/* ==========================================================
   Layout – page shell, header, sections, footer
   ========================================================== */
/* Header */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--porcelain) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:4.25rem;position:relative}
.brand{display:block;flex:none;text-decoration:none;line-height:0}
.brand img{display:block;width:auto;height:2.5rem}
nav{display:flex;gap:clamp(.9rem,2vw,2rem);align-items:center}
nav a:not(.btn){text-decoration:none;font-size:var(--t-s);color:var(--ink-soft)}
nav a:not(.btn):hover{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:var(--s3)}
.header-actions .btn{padding:.7rem 1.2rem;font-size:var(--t-s)}
.menu-toggle{display:none}

/* Hero */
.hero{padding:var(--s8) 0 var(--s9)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center}

/* Sections */
section{padding:var(--s9) 0}
.section--flush{padding-top:0}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:start}
.split > .head{position:sticky;top:7rem}
.head h2{margin-bottom:var(--s4)}
.head p{color:var(--ink-soft)}
.head--spaced{margin-bottom:var(--s7)}

/* Footer */
footer{padding:var(--s7) 0 var(--s8);border-top:1px solid var(--line);font-size:var(--t-s);color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}

/* Section grids */
.laser .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:center}
.crew .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:center}