/* ==========================================================================
   Site header — one definition, shared by every page.

   The homepage header is the reference design; this file IS that design,
   lifted out of index.html so the other pages can't drift from it again.
   Geometry (logo height, capsule shape, link and CTA sizing, breakpoint) is
   identical everywhere. Only the COLOUR tokens change, via data-variant on
   .masthead, because the same header sits on two kinds of backdrop:

     data-variant="over"   white-on-dark  — over the homepage's photo hero
     data-variant="light"  dark-on-light  — on the light page background

   Dropdown panels are moved onto <body> by header.js (an ancestor with
   backdrop-filter becomes a backdrop root and would cancel the panel's own
   blur), so they carry their own copy of the variant attribute.
   ========================================================================== */

/* Site-wide (this file is on every page): no blue flash on tap on phones
   (owner 2026-10-20). Focus rings for keyboards are unaffected. */
html { -webkit-tap-highlight-color: transparent; }

.masthead {
  /* Geometry — the homepage values, unchanged. */
  /* The STUDIO lockup is wider than the ENGINEERING one it replaced (3.74:1
     against 3.0:1), so at the old height it sat noticeably larger in the bar. */
  --nav-logo-h:   clamp(26px, 3.4vw, 38px);
  --nav-pad-y:    clamp(0.9rem, 1.9vw, 1.7rem);
  --nav-gap:      clamp(1rem, 1.7vw, 1.55rem);
  --nav-cap-pad:  clamp(0.42rem, 0.8vw, 0.7rem) clamp(0.95rem, 1.8vw, 1.6rem);
  --nav-link-fs:  clamp(0.78rem, 1.08vw, 0.98rem);
  --nav-cta-pad:  clamp(.45rem, .85vw, .75rem) clamp(1rem, 1.9vw, 1.7rem);
  --nav-cta-fs:   clamp(0.74rem, 1.02vw, 0.92rem);
  /* Horizontal inset + width cap. Pages override these two so the logo lines
     up with the content beneath it; nothing else about the bar changes. */
  --nav-pad-x:    var(--gut, clamp(1.1rem, 5.42vw, 5rem));
  --nav-maxw:     1560px;
}

/* --- dark backdrop (homepage hero) ---------------------------------------- */
.masthead[data-variant="over"] {
  --nav-fg:         rgba(255,255,255,.92);
  --nav-fg-strong:  #fff;
  --nav-logo-filter: brightness(0) invert(1);   /* black wordmark → white */
  --nav-cap-bg:     rgba(255,255,255,.14);
  --nav-cap-bd:     rgba(255,255,255,.2);
  --nav-cap-bg-noblur: rgba(255,255,255,.22);
  --nav-cta-bg:     #fff;
  --nav-cta-fg:     var(--ink, #101720);
  --nav-cta-bg-h:   #EDF2F7;
}
/* --- light backdrop (every other page) ------------------------------------ */
.masthead[data-variant="light"] {
  --nav-fg:         var(--muted, #5E6A78);
  --nav-fg-strong:  var(--ink, #101720);
  --nav-logo-filter: none;
  --nav-cap-bg:     rgba(16,23,32,.045);
  --nav-cap-bd:     var(--line, #E2E8F0);
  --nav-cap-bg-noblur: rgba(16,23,32,.06);
  --nav-cta-bg:     var(--blue, #1155D6);
  --nav-cta-fg:     #fff;
  --nav-cta-bg-h:   var(--blue-d, #0D42A8);
}
/* Floating over a light photo hero (gallery): same light variant, but the
   capsule needs a real surface under it or the links sit on bare photograph. */
.masthead.float {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: transparent;
  --nav-cap-bg: rgba(255,255,255,.55);
  --nav-cap-bd: rgba(255,255,255,.7);
  --nav-cap-blur: blur(14px) saturate(1.4);
  --nav-cap-bg-noblur: rgba(255,255,255,.82);
}

/* Three tracks — logo, centre capsule, right-hand group — rather than a flex
   row: the centre capsule has to sit on the page's centre line, and with flex
   it drifts left by half of whatever sits to its right. */
.navbar {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.4rem;
  max-width: var(--nav-maxw); margin-inline: auto;
  padding: var(--nav-pad-y) var(--nav-pad-x);
}
.navbar .logo { justify-self: start; }
.navbar .navlinks { justify-self: center; }
/* The studio capsule and the quote button, pinned to the right edge. */
.nav-end {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: clamp(0.5rem, 1vw, 0.85rem);
}
.navbar .logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.navbar .logo img {
  height: var(--nav-logo-h); width: auto; display: block;
  filter: var(--nav-logo-filter);
}

/* Frosted capsule behind the links. Both the prefixed and unprefixed
   backdrop-filter are declared — Safari still needs -webkit-, and shipping
   only one of the pair is how this silently degrades to a flat panel. */
.navlinks {
  display: flex; gap: var(--nav-gap);
  padding: var(--nav-cap-pad);
  border-radius: 999px;
  background: var(--nav-cap-bg);
  border: 1px solid var(--nav-cap-bd);
  -webkit-backdrop-filter: var(--nav-cap-blur, blur(14px) saturate(1.5));
  backdrop-filter: var(--nav-cap-blur, blur(14px) saturate(1.5));
}
/* No blur support: lean on opacity so the capsule still reads as a surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navlinks { background: var(--nav-cap-bg-noblur); }
}
.navlinks a, .navlinks button {
  position: relative;
  /* Shared by the chevron itself and by the hover rule that has to stop short
     of it, so the underline can never drift out of step with the glyph. */
  --nav-chev: 0.7em;
  --nav-chev-gap: 0.32rem;
  color: var(--nav-fg); text-decoration: none; font: inherit;
  font-size: var(--nav-link-fs);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--nav-chev-gap); white-space: nowrap;
  transition: color .18s ease;
}
/* A hairline that wipes in under the label. Deliberately quiet: it is drawn in
   currentColor at half strength, so it is only ever a shade of the text it sits
   under, and it lives in a pseudo-element positioned into the capsule's padding
   so nothing about the bar's geometry moves.

   It grows by background-size, NOT by scaleX. Scaling a 1px rule hands it to the
   compositor, which rasterises it soft at fractional device pixels and then
   re-paints it crisp the moment the animation ends — the line visibly snaps
   thicker at the end of every hover. Growing the background keeps it a real,
   pixel-snapped 1px rule at every frame. */
.navlinks a::after, .navlinks button::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -0.34em; height: 1px;
  /* Under the label only — a rule running on under the chevron reads as a
     mistake rather than as emphasis. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  opacity: .5;
  transition: background-size .28s cubic-bezier(.2, .8, .2, 1);
}
.navitem > a::after { right: calc(var(--nav-chev) + var(--nav-chev-gap)); }
.navlinks a:hover, .navlinks button:hover,
.navlinks a:focus-visible,
.navitem[data-open="true"] > a { color: var(--nav-fg-strong); }
.navlinks a:hover::after, .navlinks button:hover::after,
.navlinks a:focus-visible::after,
.navitem[data-open="true"] > a::after { background-size: 100% 100%; }
.navlinks a[aria-current="page"] { color: var(--nav-fg-strong); }
@media (prefers-reduced-motion: reduce) {
  .navlinks a::after, .navlinks button::after { transition: none; }
}
/* Keep a ring for high-contrast / forced-colours, where the hairline is lost. */
.navlinks a:focus-visible, .navlinks button:focus-visible { outline: 2px solid transparent; outline-offset: 6px; }

.navitem { position: relative; }
.navitem > a .chev { width: var(--nav-chev); height: var(--nav-chev); transition: transform 160ms; }
.navitem[data-open="true"] > a .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .navitem > a .chev { transition: none; } }

.nav-cta {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
  border-radius: 999px; padding: var(--nav-cta-pad); font-size: var(--nav-cta-fs);
  font-weight: 500; text-decoration: none; border: 1px solid transparent;
  background: var(--nav-cta-bg); color: var(--nav-cta-fg);
  transition: background .18s ease;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--nav-cta-bg-h); }

/* ---- phone & tablet menu (2026-10-13) ------------------------------------
   The button shows at 900px and below, where the capsules are hidden; the sheet
   (header.js mobileMenu) is a light full-screen panel on every page variant. */
.nav-burger { display: none; }
@media (max-width: 900px) {
  .nav-burger {
    display: inline-grid; place-items: center; flex: none; cursor: pointer;
    /* Same height as the quote pill beside it. */
    width: 35px; height: 35px; border-radius: 999px; padding: 0;
    color: var(--nav-fg-strong); background: var(--nav-cap-bg); border: 1px solid var(--nav-cap-bd);
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  }
  .nav-burger svg { width: 18px; height: 18px; }
  .nav-burger:focus-visible { outline: 2px solid var(--nav-fg-strong); outline-offset: 2px; }
}
html.mnav-lock, html.mnav-lock body { overflow: hidden; }
.mnav {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: var(--bg, #F6F8FB); color: var(--ink, #101720);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.mnav[hidden] { display: none; }
.mnav.is-open { opacity: 1; transform: none; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: var(--nav-pad-y, 1rem) var(--gut, 1.25rem); }
.mnav-logo img { display: block; height: 28px; width: auto; }
.mnav-x { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line, #E2E8F0);
  background: var(--surface, #fff); color: var(--ink, #101720); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mnav-x svg { width: 20px; height: 20px; }
.mnav-body { flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.4rem var(--gut, 1.25rem) 1.5rem; }
.mnav-big { display: grid; }
.mnav-big a { font-family: "General Sans", var(--sans, sans-serif); font-weight: 600;
  font-size: clamp(1.7rem, 7vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.15;
  color: var(--ink, #101720); text-decoration: none; padding: 0.42rem 0;
  border-bottom: 1px solid var(--line, #E2E8F0); }
.mnav-group { margin-top: 1.7rem; }
.mnav-h { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 500; color: var(--muted, #5E6A78); }
.mnav-offer { display: flex; align-items: center; gap: 0.85rem; padding: 0.45rem 0;
  color: inherit; text-decoration: none; }
.mnav-offer img { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #E7ECF2; }
.mnav-offer b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.3; }
.mnav-offer em { display: block; font-style: normal; font-size: 0.8rem; color: var(--muted, #5E6A78); line-height: 1.35; }
.mnav-est { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem;
  border: 1px solid var(--line, #E2E8F0); border-radius: 14px; background: var(--surface, #fff);
  color: inherit; text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.mnav-est > span:nth-child(2) { flex: 1; }
.mnav-ic { flex: none; width: 34px; height: 34px; color: #8E9AA8; }
.mnav-ic svg { width: 100%; height: 100%; }
.mnav-ic .ac { stroke: var(--blue, #1155D6); }
.mnav-est > svg { flex: none; width: 18px; height: 18px; color: var(--muted, #5E6A78); }
.mnav-foot { flex: none; padding: 0.9rem var(--gut, 1.25rem) calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line, #E2E8F0); background: var(--bg, #F6F8FB); }
.mnav-cta { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px;
  background: var(--blue, #1155D6); color: #fff; font-weight: 600; text-decoration: none; }
.mnav a:focus-visible, .mnav button:focus-visible { outline: 2px solid var(--blue, #1155D6); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mnav { transition: none; transform: none; } }

@media (max-width: 900px) {
  /* The desktop dropdowns are unreachable here (their triggers are hidden), and the
     880px mega panel, parked invisible, still widened the page on a phone. */
  .menu, .menu[hidden] { display: none; }
  .navlinks { display: none; }
  /* Only the logo and the quote button survive; close the empty middle track. */
  .navbar { grid-template-columns: auto 1fr; }
  .nav-end { grid-column: 2; }
}

/* ---- dropdown / mega panels (rendered on <body>) ------------------------- */
/* Glass, but tinted dark rather than white on the hero. The capsule can use a
   white tint because it sits high in the hero where the scrim is strong; this
   panel drops into the bright half, and at 14% white the labels disappeared
   against a pale sofa. Fixed-positioned; JS sets top/left under the trigger. */
.menu {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  border-radius: 16px; padding: 0.45rem;
  background: var(--menu-bg);
  border: 1px solid var(--menu-bd);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 20px 46px rgba(9,15,23,.3);
  display: grid; gap: 0.1rem; min-width: 232px; z-index: 60;
}
.menu[data-variant="over"] {
  --menu-bg: rgba(255,255,255,.14); --menu-bd: rgba(255,255,255,.2);
  --menu-bg-noblur: rgba(255,255,255,.22);
  --menu-fg: rgba(255,255,255,.92); --menu-fg-strong: #fff;
  --menu-fg-dim: rgba(255,255,255,.6); --menu-label: rgba(255,255,255,.5);
  --menu-hover: rgba(255,255,255,.16); --menu-icon: rgba(255,255,255,.72);
  --menu-rule: rgba(255,255,255,.12); --menu-tile: rgba(255,255,255,.06);
  --menu-tile-h: rgba(255,255,255,.15);
  /* The accent has to lift on dark glass — #1155D6 disappears against it. */
  --menu-accent: #93BEF5;
}
.menu[data-variant="light"] {
  --menu-bg: rgba(255,255,255,.82); --menu-bd: var(--line, #E2E8F0);
  --menu-bg-noblur: #fff;
  --menu-fg: var(--muted, #5E6A78); --menu-fg-strong: var(--ink, #101720);
  --menu-fg-dim: var(--muted, #5E6A78); --menu-label: var(--muted, #5E6A78);
  --menu-hover: rgba(16,23,32,.055); --menu-icon: var(--muted, #5E6A78);
  --menu-rule: var(--line, #E2E8F0); --menu-tile: rgba(16,23,32,.035);
  --menu-tile-h: rgba(16,23,32,.075);
  --menu-accent: var(--blue, #1155D6);
  box-shadow: 0 20px 46px rgba(16,23,32,.14);
}
/* Without blur the panel is just a wash over a photograph and the labels
   vanish. Fall back to a solid plate, which keeps the text legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu { background: var(--menu-bg-noblur); }
}
/* Hidden by visibility, NOT display. These panels carry a backdrop-filter, and
   display:none tears the composited layer down and rebuilds it on every open —
   hover quickly across the triggers and Chrome leaves stale blurred rectangles
   behind, painted where a panel used to be. Keeping the box in the layer tree
   and just fading it out avoids the churn entirely; visibility:hidden still
   takes it out of the accessibility tree and the tab order, and pointer-events
   keeps it from swallowing clicks. It also makes place() cheaper: the panel can
   be measured without being shown first. */
.menu[hidden] {
  display: grid;               /* override the UA rule for the hidden attribute */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .13s ease, visibility 0s linear .13s;
}
.menu { opacity: 1; visibility: visible; transition: opacity .13s ease; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu[hidden] { transition: none; }
}

/* Mega panel. Never centres past the viewport edge — the trigger sits left of
   centre, so an 880px panel centred on it would hang off the right. */
.menu.mega {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 0 clamp(1.2rem, 2.4vw, 2.4rem);
  width: min(1040px, calc(var(--vw, 100vw) - 2.5rem));
  padding: 1.15rem 1.25rem 1.35rem;
  left: 50%; transform: translateX(-50%);
}
/* The right side: the hovered sector's columns, three across. */
/* Panes share one grid cell, so the panel keeps the tallest pane's height
   and does not jump as the pointer moves between sectors. */
.megaright { min-width: 0; display: grid; }
.megapane { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 2.4vw, 2.4rem); align-content: start; }
.megapane[hidden] { display: grid; visibility: hidden; }
@media (max-width: 980px) { .megapane { grid-template-columns: 1fr 1fr; } }
.megacol > h4 {
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--menu-label); font-weight: 500; margin: 0 0 0.7rem;
}
.megacol { display: grid; align-content: start; gap: 0.3rem; }

.offer {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem; border-radius: 12px; text-decoration: none;
  background: var(--menu-tile); transition: background 140ms;
}
.offer:hover, .offer.on { background: var(--menu-tile-h); }
/* The sector cards: an arrow toward the pane they open on the right. */
.offer .offer-go { width: 16px; height: 16px; margin-left: auto; flex: none; color: var(--menu-fg-dim);
  opacity: 0; transform: translateX(-4px); transition: opacity 140ms, transform 140ms; }
.offer.on .offer-go { opacity: 1; transform: none; }
.offer > span { min-width: 0; }
.offer img { width: 62px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.offer b { display: block; color: var(--menu-fg-strong); font-size: 0.86rem; font-weight: 500; line-height: 1.25; }
.offer em { display: block; color: var(--menu-fg-dim); font-size: 0.74rem; font-style: normal; line-height: 1.3; }

.megalink {
  display: block; color: var(--menu-fg); text-decoration: none;
  font-size: 0.86rem; padding: 0.62rem 0.2rem;
  border-bottom: 1px solid var(--menu-rule);
  transition: color 140ms, padding-left 140ms;
}
.megalink:hover { color: var(--menu-fg-strong); padding-left: 0.45rem; }
@media (prefers-reduced-motion: reduce) { .megalink { transition: none; } }

.menu a {
  color: var(--menu-fg); text-decoration: none; font-size: 0.86rem; padding: 0.5rem 0.6rem;
  border-radius: 10px; white-space: nowrap;
  display: flex; align-items: center; gap: 0.62rem;
  transition: background 130ms, color 130ms;
}
.menu a svg { width: 22px; height: 22px; flex: none; color: var(--menu-icon); transition: color 130ms; }
.menu a .ac { stroke: var(--menu-accent); }
.menu a:hover { background: var(--menu-hover); color: var(--menu-fg-strong); }
.menu a:hover svg { color: var(--menu-fg-strong); }
/* Bridges the gap between trigger and panel so the pointer can cross it
   without the menu closing underneath it. */
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.85rem; height: 0.85rem; }