/* ==========================================================================
   SHELL — skip link, fixed header, mobile drawer, sticky call bar.
   Above the fold: loads render-blocking.
   ========================================================================== */

/* fixed to the viewport corner, so with viewport-fit=cover it is the page's
   job to keep it out of the sensor housing in landscape */
.skip-link {
  position: fixed;
  inset-block-start: max(var(--space-2xs), env(safe-area-inset-top, 0px));
  inset-inline-start: max(var(--space-2xs), env(safe-area-inset-left, 0px));
  z-index: var(--z-skiplink);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-inset);
  background: var(--surface-accent);
  color: var(--text-on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transform: translate3d(0, calc(var(--space-4xl) * -1), 0);
  transition: transform var(--dur-fast) var(--ease-entrance);
}
.skip-link:focus-visible { transform: translate3d(0, 0, 0); }

/* --------------------------------------------------------------------------
   HEADER — a hairline row over everything, no rhythm of its own
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  max-width: var(--width-page);
  margin-inline: auto;
  background: var(--surface-header);
  border-block-end: var(--border-width-hair) solid var(--border-hairline);
  transition: box-shadow var(--dur-base) var(--ease-state);
}
.header--scrolled { box-shadow: var(--shadow-header); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.header__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h4);
  letter-spacing: var(--tracking-label);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-state);
}
/* the word is one flex item, so the gap lands between mark and wordmark and
   never between BLACKLINE and its full stop */
.header__mark-word { white-space: nowrap; }
/* the gauge's reading and the wordmark's full stop are the same accent doing
   the same job, so they move together or the pair reads as two objects */
.header__mark:hover .header__mark-dot { color: var(--text-accent-strong); }
.header__mark:hover .icon--mark { --mark-read: var(--text-accent-strong); }
.header__mark-dot { color: var(--text-accent); }

/* stretched so a submenu panel can hang off the header's own bottom edge
   rather than off the bottom of a 33px-tall link */
.header__nav { margin-inline-start: auto; align-self: stretch; display: flex; }

.header__list {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}

.header__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
}

.header__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2xs);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-state);
}
.header__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: var(--border-width-medium);
  background: var(--surface-accent);
  transform: scale3d(0, 1, 1);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-state);
}
.header__link:hover { color: var(--text-primary); }
.header__link:hover::after { transform: scale3d(1, 1, 1); }
.header__link:active { color: var(--text-primary); }

/* WHERE AM I. The accent lands as a rule under the word, never as ink in it:
   --here is the parent of the open section, [aria-current] the page itself.
   Both use the underline the link already draws on hover, latched on. */
.header__link--here,
.header__link[aria-current="page"] { color: var(--text-primary); }
.header__link--here::after,
.header__link[aria-current="page"]::after { transform: scale3d(1, 1, 1); }

/* --------------------------------------------------------------------------
   SUBMENU — a parent stays a link; this button is the disclosure beside it.
   The marker is the site's accordion marker, the one .faq__marker uses: a
   cross that turns 45deg, not a chevron. Hidden below 1024, where the list is
   only ever seen with JS off and the submenu is simply part of it.
   -------------------------------------------------------------------------- */
.header__disc {
  display: none;
  place-items: center;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-state);
}

/* Below 1024 this is a plain nested list. It is the JS-off fallback and a
   phone has no hover, so a panel here would be a menu nobody can open. */
.header__sub {
  flex: 1 0 100%;
  display: grid;
  gap: var(--space-3xs);
  padding-block-start: var(--space-3xs);
  padding-inline-start: var(--space-sm);
  background: var(--tick-rule-vertical);
}

.header__sublink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-inset);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.header__sublink:hover { background: var(--surface-raised-hover); color: var(--text-primary); }
.header__sublink[aria-current="page"] { background: var(--surface-accent-wash); color: var(--text-primary); }

/* accent ink is allowed on a numeral, never on the label — base.css */
.header__sublink-idx {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease-state);
}
.header__sublink:hover .header__sublink-idx,
.header__sublink[aria-current="page"] .header__sublink-idx { color: var(--text-accent); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-inline-start: auto;
}

.header__phone {
  display: none;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  white-space: nowrap;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-state);
}
.header__phone:hover { color: var(--text-accent); }

/* the row is one line at 1024 or --header-h is a lie and the fixed header
   crops the page it offsets */
.header__cta { display: none; white-space: nowrap; }

.header__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--control-h-sm);
  padding-inline: var(--space-sm);
  border: var(--border-width-hair) solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.header__toggle:hover { border-color: var(--border-accent); color: var(--text-accent); }

/* --------------------------------------------------------------------------
   DRAWER — with JS off the toggle is hidden and the nav list shows inline
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: var(--z-drawer);
  max-width: var(--width-page);
  margin-inline: auto;
  padding: var(--space-lg) var(--gutter) var(--space-xl);
  /* landscape on a notched iPhone puts the inline insets at ~44px, and the
     drawer's own padding is what has to clear them because it is fixed and
     therefore outside .wrap */
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  padding-block-end: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  /* both groups expanded runs 894px against an 844px phone, so the drawer
     scrolls rather than pushing its own CTAs off the screen.
     svh is unknown to Safari before 15.4, and an unknown unit drops the whole
     declaration — which here would remove the cap and let the drawer run past
     the bottom of the screen with its CTAs on it. vh first, svh second: old
     engines keep the vh line, new ones overwrite it. Same pattern in
     hero.css. */
  max-block-size: calc(100vh - var(--header-h));
  max-block-size: calc(100svh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-sunken);
  border-block-end: var(--border-width-hair) solid var(--border-strong);
  transform: translate3d(0, -100%, 0);
  transition: transform var(--dur-base) var(--ease-state), visibility var(--dur-base) var(--ease-state);
  visibility: hidden;
}
.drawer[data-open="true"] { transform: translate3d(0, 0, 0); visibility: visible; }

.drawer__list { display: grid; gap: var(--space-xs); }
.drawer__link {
  position: relative;
  display: block;
  padding-block: var(--space-xs);
  border-block-end: var(--border-width-hair) solid var(--border-hairline);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-lift);
}
.drawer__link:hover { color: var(--text-accent); transform: translate3d(var(--space-2xs), 0, 0); }
.drawer__foot { margin-block-start: var(--space-lg); display: grid; gap: var(--space-xs); }

/* --------------------------------------------------------------------------
   DRAWER GROUP — accordion, never an overlay. A second sheet sliding over the
   first is where a phone visitor loses the way back; this one just grows.
   The row carries the hairline so the disclosure sits inside the same rule as
   the link rather than beside a border that stops short of it.
   -------------------------------------------------------------------------- */
.drawer__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-block-end: var(--border-width-hair) solid var(--border-hairline);
}
.drawer__row .drawer__link { flex: 1; border-block-end: 0; }

.drawer__disc {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border: var(--border-width-hair) solid var(--border-soft);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-state), border-color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-state);
}
.drawer__disc:hover { border-color: var(--border-accent); color: var(--text-accent); }

/* Instant, both ways: an accordion's height is not a transform and this site
   does not animate height. Which also satisfies the reduced-motion rule
   without a second code path. */
.drawer__sub {
  display: none;
  gap: var(--space-3xs);
  padding-block: var(--space-2xs) var(--space-xs);
  padding-inline-start: var(--space-md);
  background: var(--tick-rule-vertical);
}
.drawer__item[data-open="true"] .drawer__sub { display: grid; }
.drawer__item[data-open="true"] .drawer__disc { color: var(--text-accent); border-color: var(--border-accent); transform: rotate(45deg); }

.drawer__sublink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-state), transform var(--dur-fast) var(--ease-lift);
}
.drawer__sublink:hover { color: var(--text-primary); transform: translate3d(var(--space-2xs), 0, 0); }
.drawer__sublink[aria-current="page"] { color: var(--text-primary); }

.drawer__sublink-idx {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-mono-label);
  color: var(--text-faint);
}
.drawer__sublink[aria-current="page"] .drawer__sublink-idx { color: var(--text-accent); }

/* same latch as the header: a short accent rule, not accent ink */
.drawer__link--here::after,
.drawer__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: var(--space-lg);
  height: var(--border-width-bar);
  background: var(--surface-accent);
}

/* JS off: no drawer, the list is the nav */
html:not(.js) .drawer { display: none; }
html:not(.js) .header__toggle { display: none; }
html:not(.js) .header__list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ...and below 1024 that list carries both submenus inline, because a phone
   has no hover to open a panel with. Measured at 390: 637px of header. A
   fixed element that tall does not sit over the page, it replaces it — so
   with no script and no drawer the header stops being fixed and becomes what
   it actually is, the document's opening block. Fixed positioning is a
   consequence of the 60px bar, not a property of the header.
   Above 1024 nothing changes: the list is one row and the submenus are
   absolutely positioned panels, so the bar is 60px and stays fixed. */
@media (max-width: 1023px) {
  html:not(.js) .header { position: static; }
  html:not(.js) body { padding-block-start: 0; }
  /* and once it is a block it should read as one: mark, then the whole nav in
     a single column, rather than five links reflowing around a wordmark */
  html:not(.js) .header__inner { flex-wrap: wrap; row-gap: var(--space-sm); padding-block: var(--space-sm); }
  html:not(.js) .header__nav { flex: 1 0 100%; margin-inline-start: 0; }
  html:not(.js) .header__list { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   STICKY CALL BAR — mobile only
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  /* THE HOME INDICATOR. head.html ships viewport-fit=cover, so the fixed bar's
     bottom edge is the physical bottom of the screen and the system gesture
     bar is drawn over the last ~34px of it. Both buttons sat partly behind it.
     env() resolves to 0px on every device without an inset, so the bar is
     unchanged on Android, on a desktop narrow window and on a pre-notch
     iPhone. Declared after the shorthand so the shorthand cannot re-flatten
     it, and the plain --space-2xs line stays as the fallback for an engine
     that does not know env() at all. */
  padding-block-end: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--space-2xs), env(safe-area-inset-left, 0px)) max(var(--space-2xs), env(safe-area-inset-right, 0px));
  background: var(--surface-sunken);
  border-block-start: var(--border-width-hair) solid var(--border-strong);
}
.callbar__btn { flex: 1; padding-inline: var(--space-2xs); white-space: nowrap; }

@media (min-width: 768px) {
  .header__phone { display: inline-flex; }
  .header__cta { display: inline-flex; }
}

@media (min-width: 1024px) {
  /* two disclosure buttons cost ~48px of row; the wide gap comes back at 1280 */
  .header__list { display: flex; align-items: stretch; gap: var(--space-md); }
  .header__toggle { display: none; }
  .drawer { display: none; }
  .callbar { display: none; }
  .header__actions { margin-inline-start: 0; }

  /* full height so inset-block-start: 100% is the header's own bottom edge */
  .header__item { height: 100%; flex-wrap: nowrap; }
  .header__disc { display: grid; }

  /* ------------------------------------------------------------------------
     THE PANEL. Not a translucent sheet over a photograph: a real opaque
     surface a step above the header, the site's chamfer on the top-right
     corner, and a cast shadow. clip-path deletes box-shadow, so the shadow is
     the drop-shadow pair made for chamfered objects — applied to this same
     element, which is what makes it follow the cut corner instead of a box.
     Absolutely positioned, so it can never change --header-h: CLS stays 0.
     ------------------------------------------------------------------------ */
  .header__sub {
    --chamfer: var(--chamfer-sm);
    --sub-dur: var(--dur-fast);
    --sub-ease: var(--ease-exit);
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: calc(var(--space-sm) * -1);
    z-index: var(--z-overlay);
    flex: none;
    min-width: var(--card-min);
    padding: var(--space-2xs) var(--space-2xs) var(--space-xs);
    border: var(--border-width-hair) solid var(--border-soft);
    border-radius: var(--radius-inset);
    clip-path: var(--chamfer-clip);
    background: var(--chamfer-edge), var(--surface-raised);
    filter: var(--shadow-chamfer);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, calc(var(--space-2xs) * -1), 0);
    transition: opacity var(--sub-dur) var(--sub-ease), transform var(--sub-dur) var(--sub-ease), visibility var(--sub-dur) var(--sub-ease);
  }

  /* THE NO-SCRIPT PATH, and the one that runs before nav.js does. Entrance is
     slower than exit; the two curves ride in on --sub-dur/--sub-ease so the
     reduced-motion reset below only has to unset one `transition`. */
  .header__item:hover .header__sub,
  .header__item:focus-within .header__sub {
    --sub-dur: var(--dur-base);
    --sub-ease: var(--ease-entrance);
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  .header__item:hover .header__disc,
  .header__item:focus-within .header__disc { color: var(--text-accent); transform: rotate(45deg); }

  /* ONCE nav.js IS LIVE, data-open is the only truth — it is the sole way to
     close a panel whose disclosure button still holds focus. These tie with
     the pair above on specificity and win on source order, which is why they
     are last and must stay last. No attribute at all means "CSS decides", so
     a blocked script leaves the hover/focus menu above intact. */
  .header__item[data-open="false"] .header__sub {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, calc(var(--space-2xs) * -1), 0);
  }
  .header__item[data-open="false"] .header__disc { color: var(--text-muted); transform: none; }
  .header__item[data-open="true"] .header__sub {
    --sub-dur: var(--dur-base);
    --sub-ease: var(--ease-entrance);
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  .header__item[data-open="true"] .header__disc { color: var(--text-accent); transform: rotate(45deg); }
}

@media (min-width: 1280px) {
  .header__list { gap: var(--space-lg); }
}

/* the panel appears and disappears; it does not travel */
@media (prefers-reduced-motion: reduce) {
  .header__sub { transition: none; }
  .header__disc { transition: none; }
}

/* The end padding reserves the call bar's own height so the footer is never
   under it. The bar now also carries the home-indicator inset, so the reserve
   has to carry it too or the last footer row hides behind the taller bar. */
body { padding-block-start: var(--header-h); padding-block-end: var(--control-h-lg); }
body { padding-block-end: calc(var(--control-h-lg) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { body { padding-block-end: 0; } }