/* layout.css — page structure: the container, header, sections and footer. */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.wrap.narrow{max-width:var(--wrap-narrow)}

.site-head{position:sticky;top:0;z-index:50;background:rgba(15,20,25,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:76px}
.brand{display:flex;align-items:center;gap:var(--s3);border:0}
/* the logo is a real SVG asset, so the old CSS-drawn mark is gone */
/* The header carries the full WORDMARK, sized off its own aspect ratio of 441:58.
   Set the HEIGHT only and let the width follow, or the letterforms distort.
   Width budget at the 1120px wrap: wordmark 274 + gap 24 + nav 564 = 862px against
   1072px of content width. The 1024px step below and the 900px collapse in
   responsive.css keep that sum true all the way down. Do not raise either size
   without redoing it. */
.brand-logo{display:block;height:30px;width:auto;border-radius:0}
.nav-list{display:flex;gap:var(--s4);align-items:center;flex-wrap:nowrap}
.nav-list a{color:var(--ink-2);font-size:.95rem;font-weight:500;white-space:nowrap;border:0}
.nav-list a:hover{color:var(--ink)}
@media (min-width:1024px){
  .brand-logo{height:36px}
  .nav-list{gap:var(--s5)}
  .nav-list a{font-size:1rem}
}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--ink);padding:var(--s2) var(--s4);border-radius:4px;font-size:.92rem;cursor:pointer}

.hero{border-bottom:1px solid var(--rule)}
/* the hero is a full-bleed photograph with overlaid copy, not a two-column grid.
   The old grid rule lived here and silently placed the copy in the LEFT column,
   on top of the subject. Do not reintroduce it. */

.band{padding-block:var(--s9);border-bottom:1px solid var(--rule)}
.band.alt{background:var(--surface)}

.site-foot{padding-block:var(--s6)}
.foot-inner{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;color:var(--ink-2);font-size:.82rem}
.site-foot p{margin:0}
/* The AI-image disclosure. It sits on its own line under the three footer items rather than
   inside that flex row, because it is a sentence and the row is a set of short labels: put it
   in the row and it either squashes the other two or wraps into a mess at tablet width.
   Deliberately NOT hidden behind a link. The EU transparency rules ask for disclosure that is
   clear at the point someone is exposed to the content, and a line you have to click through
   to find does not meet that. It is also the cheaper thing to defend: a recruiter who works
   out unaided that the images are synthetic, and finds nothing said about it, draws a
   conclusion about a man whose whole proposition is assurance. */
.foot-note{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);
  color:var(--ink-2);font-size:.78rem;max-width:70ch;line-height:1.6}

/* ---------- long-form text pages (privacy, colophon) ----------
   The base h2 has a bottom margin and no top margin. That is correct on the home page, where
   every h2 opens its own bordered section and space above it would double up. It is wrong on
   a page of running prose, where an h2 follows a paragraph and would otherwise sit flush
   against it. Scoped to .prose rather than fixed globally, so the home page is untouched.
   .band p+p already handles paragraph spacing and also greys the text; the override below
   keeps the first paragraph after a heading at full strength, because on these pages that
   paragraph is the answer, not a footnote to one. */
.prose h2{margin-top:var(--s7)}
.prose h2:first-of-type{margin-top:var(--s6)}
.prose h2+p{color:var(--ink)}
.prose .note{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule)}