/* ============================================================
   PREVOW — the global navigation
   Loaded by EVERY route, before the page's own stylesheet. This is
   the one navigation implementation on the site.

   It replaced two: the homepage carried an absolutely positioned
   .site-nav that scrolled away with the hero, and the other six
   carried a sticky white .nav bar. They also disagreed about the
   wordmark lockup (stacked vs horizontal), the call to action (a
   ruled link vs a filled pill) and the menu trigger (three rules vs
   a grey disc). Leaving a page, the header changed shape — which is
   the single clearest reason the site read as two design generations.

   THE RULE HERE: the navigation never moves and never hides. Its
   POSITION is fixed for the life of the page; only its SURFACE
   changes. There is no auto-hide, no direction detection, no
   translateY on the header, ever.
   ============================================================ */

:root{
  /* one height token — every offset on the site derives from this,
     rather than a magic number repeated per page */
  --nav-h: 76px;
}
@media (max-width:640px){ :root{ --nav-h: 64px; } }

.sitehead{
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* the safe-area inset keeps the bar clear of a notch in landscape
     without adding height on devices that do not have one */
  padding-top:env(safe-area-inset-top,0px);
  background:transparent;
  transition:background var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease);
}
/* the hairline is a pseudo-element rather than a border so the bar's
   height never changes between states — a border appearing on scroll
   moves every pixel of content below it by 1px */
.sitehead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line); opacity:0;
  transition:opacity var(--dur-base) var(--ease);
}

.sitehead__in{
  height:var(--nav-h);
  max-width:var(--page-wide); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}

/* ---- surface states -------------------------------------------
   Set by js/nav.js as an attribute on the header. Only colour and
   the hairline change; nothing here touches position or display. */

/* OVER-PHOTOGRAPH — the homepage hero, and any full-bleed image top */
.sitehead[data-surface="photo"]{ color:var(--white); }
.sitehead[data-surface="photo"] .sitehead__cta{ color:var(--white); }

/* SETTLED — scrolled away from the top, or any light page at rest */
.sitehead[data-surface="light"]{ background:var(--white); color:var(--ink); }
.sitehead[data-surface="light"]::after{ opacity:1; }

/* OVER-INK — a dark full-bleed section passing under the bar. The bar
   keeps a ground so the links never sit directly on the section and
   lose contrast mid-transition. */
.sitehead[data-surface="ink"]{ background:var(--ink); color:var(--white); }
.sitehead[data-surface="ink"]::after{ opacity:0; }
.sitehead[data-surface="ink"] .sitehead__cta{ color:var(--white); }

/* ---- lockup ---- */
.sitehead__brand{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:inherit; flex:0 0 auto;
}
/* Two marks, not one recoloured.
   The mark is an <img> whose SVG carries fill:#0B1F3A inside its own
   <style> block. An SVG loaded through <img> is an isolated document —
   page CSS cannot reach into it at all, so currentColor and a fill rule
   were both silently doing nothing and the ink mark sat invisible on the
   dark hero photograph. Two files, swapped by surface, is the fix that
   needs no JS and cannot flash the wrong one. */
.sitehead__mark{ width:34px; height:34px; display:block; grid-area:1/1; }
.sitehead__brand{ position:relative; }
.sitehead__mark--white{ display:none; }
.sitehead[data-surface="photo"] .sitehead__mark--ink,
.sitehead[data-surface="ink"] .sitehead__mark--ink{ display:none; }
.sitehead[data-surface="photo"] .sitehead__mark--white,
.sitehead[data-surface="ink"] .sitehead__mark--white{ display:block; }
/* ONE WORD, ON ONE LINE.
   The name was set over two lines against the 34px mark, which made the
   lockup a near-square block — 34x31 — but broke the word in a place the
   word does not break. "Prevow" is a single word everywhere else it appears:
   the title, the footer, the schema, the address bar. A reader meeting it
   stacked has to reassemble it before they can read it.

   Set on one line it has to be sized for that. At the old 17px the word ran
   64px wide with a 10px cap height and read as a caption beside the mark
   rather than as its other half. 1.5rem puts the cap at about 14px — a
   little over 40% of the mark's height, which is where a wordmark sits
   beside a symbol without either one looking borrowed. The tight tracking
   stays: it is what makes the word read as a mark and not as running text.

   line-height:1, because .9 existed to close the gap between two lines and
   there is only one now. */
.sitehead__word{
  font-family:var(--font); font-size:1.5rem; font-weight:var(--w-display);
  letter-spacing:-.035em; line-height:1;
}

/* MENU OPEN overrides the surface.
   The menu sheet is white, so a bar still in its "photo" state paints
   white links and the white mark onto white — the header disappears
   exactly when the user needs it to close the thing they opened. The
   sheet is the ground now, whatever is scrolled behind it. */
.sitehead[data-menu]{ background:var(--white); color:var(--ink); }
.sitehead[data-menu]::after{ opacity:1; }
.sitehead[data-menu] .sitehead__cta{ color:var(--ink); }
.sitehead[data-menu] .sitehead__mark--ink{ display:block; }
.sitehead[data-menu] .sitehead__mark--white{ display:none; }

/* ---- links ---- */
.sitehead__links{ display:flex; align-items:center; gap:var(--s-5); }
.sitehead__link{
  position:relative; text-decoration:none; color:inherit;
  font-size:var(--t-row); font-weight:var(--w-bold); letter-spacing:var(--tr-row);
  padding-block:10px;
}
.sitehead__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:4px; height:1.5px;
  background:currentColor; transition:right var(--dur-base) var(--ease);
}
.sitehead__link:hover::after{ right:0; }
/* the current route keeps its rule drawn */
.sitehead__link[aria-current="page"]::after{ right:0; opacity:.45; }

/* the action is a ruled label, not a filled pill — one filled control
   per viewport, and on the homepage that one is the hero's */
.sitehead__cta{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink);
  font-size:var(--t-row); font-weight:var(--w-bold); letter-spacing:var(--tr-row);
  padding-block:10px;
}
/* 300ms tap delay removed, and the flash of grey on tap made deliberate
   rather than left to the platform default. Applies to every control on the
   site, which is why it lives in the one stylesheet every route loads. */
a, button, [role="button"], input, label, summary{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(11,31,58,.08);
}

.sitehead__cta::after{
  /* The rule used to be drawn at full width at rest, which made "Get the
     app" read as the current page — the same signal aria-current uses on
     the other two links. It draws on hover and focus only now. */
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-base) var(--ease);
}
.sitehead__cta:hover::after,
.sitehead__cta:focus-visible::after{ transform:scaleX(1); }
@keyframes navRule{
  0%{ transform:scaleX(1); transform-origin:right center; }
  49%{ transform:scaleX(0); transform-origin:right center; }
  50%{ transform:scaleX(0); transform-origin:left center; }
  100%{ transform:scaleX(1); transform-origin:left center; }
}
.sitehead__cta .ph{ transition:transform var(--dur-micro) var(--ease); }
.sitehead__cta:hover .ph{ transform:translateX(var(--travel-micro)); }

/* ---- menu trigger ---- */
.sitehead__burger{
  display:none; width:48px; height:48px; margin-right:-10px; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  background:none; color:inherit; border:0; cursor:pointer;
}
.sitehead__burger i{
  display:block; width:22px; height:1.5px; background:currentColor;
  transition:transform var(--dur-quick) var(--ease),opacity var(--dur-micro) var(--ease);
}
.sitehead[data-menu] .sitehead__burger i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.sitehead[data-menu] .sitehead__burger i:nth-child(2){ opacity:0; }
.sitehead[data-menu] .sitehead__burger i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:880px){
  .sitehead__links{ display:none; }
  .sitehead__burger{ display:inline-flex; }
}

/* ============================================================
   THE MENU
   Not a full-screen SaaS drawer. It is a sheet that unrolls from
   under the bar — the bar itself never moves, so the menu reads as
   the header extending rather than as a new screen covering the old
   one. The routes are set at display size in the editorial face,
   which is the only place on the site the navigation is allowed to
   be loud.
   ============================================================ */
.sitemenu{
  position:fixed; inset:0 0 auto 0; z-index:99;
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + var(--s-6)) 0 var(--s-8);
  background:var(--white); color:var(--ink);
  /* clipped from the top so it unrolls; no transform on the header */
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path var(--dur-cinematic) var(--ease),
             visibility 0s linear var(--dur-cinematic);
}
.sitemenu[data-open]{
  clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path var(--dur-cinematic) var(--ease),visibility 0s linear 0s;
}
.sitemenu__in{ max-width:var(--page-wide); margin-inline:auto; padding-inline:var(--gutter); }
.sitemenu__links{ display:flex; flex-direction:column; }
.sitemenu__links a{
  display:block; text-decoration:none; color:var(--ink);
  font-family:var(--font-display); font-variation-settings:var(--fv-display);
  font-size:clamp(2rem,9vw,3rem); font-weight:var(--w-editorial);
  letter-spacing:var(--tr-display); line-height:1.12;
  padding-block:var(--s-3);
  border-top:1px solid var(--line);
  /* each route arrives a beat after the one above it */
  opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.sitemenu__links a:last-child{ border-bottom:1px solid var(--line); }
.sitemenu[data-open] .sitemenu__links a{ opacity:1; transform:none; }
.sitemenu[data-open] .sitemenu__links a:nth-child(1){ transition-delay:90ms; }
.sitemenu[data-open] .sitemenu__links a:nth-child(2){ transition-delay:150ms; }
.sitemenu[data-open] .sitemenu__links a:nth-child(3){ transition-delay:210ms; }
.sitemenu[data-open] .sitemenu__links a:nth-child(4){ transition-delay:270ms; }
.sitemenu__foot{
  margin-top:var(--s-6); font-size:var(--t-small); color:var(--muted);
  opacity:0; transition:opacity var(--dur-base) var(--ease) 320ms;
}
.sitemenu[data-open] .sitemenu__foot{ opacity:1; }

/* ============================================================
   LAYOUT CONSEQUENCES OF A FIXED HEADER
   Handled once, here, rather than as per-page magic numbers.
   ============================================================ */

/* every page that does NOT open with a full-bleed hero starts below
   the bar; the homepage opts out because its photograph is meant to
   run under the header */
body:not(.has-hero) .sitehead ~ main,
body:not(.has-hero) main{ padding-top:var(--nav-h); }

/* anchors and in-page links must not land under the bar */
:target,[id]{ scroll-margin-top:calc(var(--nav-h) + var(--s-3)); }

/* anything sticky on the site parks below the header, not under it */
.journey__stage,
.privacy__col--view{ scroll-margin-top:var(--nav-h); }

@media (prefers-reduced-motion:reduce){
  .sitehead,.sitehead::after,.sitemenu,.sitemenu__links a,.sitemenu__foot{ transition:none; }
  .sitehead__cta:hover::after{ animation:none; }
}

/* ============================================================
   THE GLOBAL FOOTER
   Was two: the homepage set the routes as oversized lowercase
   words in the display face, and the other six ran a compact ink
   bar with a horizontal "prevow" wordmark. Arriving at the bottom
   of any page told you which generation you were on.

   The homepage version is the one that survives — it is the more
   distinctive, and the oversized routes are the last editorial
   gesture on the page rather than a utility strip.
   ============================================================ */
/* THE ENDING.

   It was white on white. Every page on this site is white, so a white
   footer is simply where the last section stops having content — there
   is no edge, and the reader cannot tell the difference between "the
   page has ended" and "the page has run out". The footer read as one
   more band.

   It is ink now, and that single change does most of the work: the
   page has a bottom you can see coming. Ink is already the site's
   closing colour — it is what the kit gives to primary buttons and to
   closed states — so this is the palette's own vocabulary, not a new
   idea. White sits only on ink (kit §2), which is exactly this case.

   The rhythm changes too. Sections breathe on --sec / --sec-loose;
   the footer opens on --sec-air, the token reserved for the moment a
   band is allowed to be almost entirely empty. Arriving here the page
   slows down before it stops. */
.sitefoot{
  background:var(--ink); color:var(--white);
  /* was --sec-air (120-224px) plus a --s-12 gap and an oversized mark, which
     is a lot of page to travel past on the way out */
  padding-block:var(--sec-tight) var(--s-3);
  position:relative; overflow:hidden;
}
.sitefoot__in{ position:relative; z-index:1; max-width:var(--page-wide); margin-inline:auto; padding-inline:var(--gutter); }

/* the seam arrives at the top of the ending, as it does everywhere a
   division carries meaning — here the division is the page's own edge */
.sitefoot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--seam);
  background:rgba(255,255,255,.22);
}

.sitefoot__cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-5); margin-top:var(--s-6); max-width:var(--page-narrow);
}
.sitefoot__col{ display:flex; flex-direction:column; gap:10px; }
.sitefoot__k{
  font-size:var(--t-label); font-weight:var(--w-bold); letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--on-navy); margin:0 0 var(--s-1);
}
.sitefoot__col a{
  text-decoration:none; font-size:var(--t-body); font-weight:var(--w-bold);
  width:max-content; min-height:24px; color:var(--white);
}
.sitefoot__col a:hover{ color:var(--teal); }
.sitefoot__note{ margin:0; color:var(--on-navy); font-size:var(--t-small); line-height:1.6; max-width:28ch; }

/* The closing mark. Set in CSS rather than in markup because it is
   decoration, not content — the name is already in the nav, the title
   and the copyright line, and a screen reader announcing "prevow" a
   fourth time is noise. It is deliberately oversized and cropped by
   the footer's own edge: the word runs past the bottom of the page,
   which is the last thing the reader sees. */
.sitefoot__in::after{
  content:"prevow"; display:block; margin-top:var(--s-4);
  font-family:var(--font-display); font-variation-settings:var(--fv-display);
  font-weight:var(--w-editorial); letter-spacing:-.045em; line-height:.78;
  font-size:clamp(2.25rem,7vw,5rem);
  color:rgba(255,255,255,.09);
  margin-bottom:-.22em; pointer-events:none; user-select:none;
}

/* Just the copyright now. Privacy, Terms and Contact used to be repeated
   here under a "Legal" nav while already sitting in the Prevow column above —
   the same three links twice in one footer, a few centimetres apart. */
.sitefoot__base{
  display:flex; align-items:center; gap:var(--s-3);
  margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.18);
}
.sitefoot__base p{ color:var(--on-navy); font-size:var(--t-meta); margin:0; }

@media (max-width:560px){
  .sitefoot__cols{ grid-template-columns:1fr; gap:var(--s-5); margin-top:var(--s-8); }
  .sitefoot__col a{ padding-block:7px; }
}


/* shorter still on a phone, where the footer was a large share of the scroll */
@media (max-width:560px){
  .sitefoot{ padding-block:var(--sec-tight) var(--s-3); }
  .sitefoot__cols{ margin-top:var(--s-6); gap:var(--s-4); }
  .sitefoot__in::after{ margin-top:var(--s-4); font-size:clamp(2.75rem,16vw,4.5rem); }
  .sitefoot__base{ margin-top:var(--s-4); }
}


/* ---- the footer had become a page of its own ----
   Measured on the live site it ran close to a full viewport: oversized
   route links at up to 3.25rem, then columns, then the base row, then a
   10rem closing mark under all of it. An ending should be unmistakable,
   not something you scroll THROUGH.

   The links come down to a size that still reads as the last editorial
   gesture without being a menu of billboards, the mark is cropped harder
   by its own negative margin, and the whole thing opens on --sec-tight. */
.sitefoot__big{ gap:0; }
.sitefoot__in::after{ line-height:.72; }

@media (max-width:560px){
  .sitefoot{ padding-block:var(--s-8) var(--s-3); }
  .sitefoot__cols{ margin-top:var(--s-5); gap:var(--s-4); }
  .sitefoot__in::after{ margin-top:var(--s-3); font-size:clamp(2rem,11vw,3rem); }
  .sitefoot__base{ margin-top:var(--s-4); }
}


/* ---- and the reason it was still 681px ----
   Trimming padding was treating a symptom. The footer stacked FOUR bands
   vertically — route links, then columns, then the base row, then the
   closing mark — so its height was the sum of all of them however tight
   each one got.

   Two columns instead: the routes on the left, the small print beside
   them. Same content, roughly half the page. The closing mark keeps its
   own line because it is the last thing and it should be. */
@media (min-width:761px){
  .sitefoot__top{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:var(--s-8); align-items:start;
  }
  .sitefoot__cols{ margin-top:0; max-width:none; }
}


/* The closing mark was still worth ~90px of page on its own. It is
   decoration, so it is the first thing that should give: smaller, cropped
   harder by its own negative margin, and sitting on the base row's line
   rather than occupying a band above it. */
.sitefoot__in::after{
  font-size:clamp(2rem,5vw,3.5rem);
  margin-top:var(--s-2); margin-bottom:-.30em; line-height:.7;
}
.sitefoot{ padding-block:var(--s-8) var(--s-2); }
.sitefoot__base{ margin-top:var(--s-4); padding-top:var(--s-3); }
@media (max-width:560px){
  .sitefoot{ padding-block:var(--s-6) var(--s-2); }
  .sitefoot__in::after{ font-size:clamp(1.75rem,9vw,2.5rem); margin-top:var(--s-2); }
}


/* ---- mobile was the actual problem ----
   Desktop came down to ~536px but a phone was still at 720 of an 800px
   viewport, because none of the two-column work applied below 761px and
   every band simply stacked: three oversized links, two column blocks one
   under the other, the base row, then the mark.

   The two link columns sit side by side there — they are four short items,
   they were never going to need full width — and the route links stop
   being billboards. */
@media (max-width:760px){
  .sitefoot{ padding-block:var(--s-6) var(--s-2); }
  .sitefoot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); margin-top:var(--s-5); }
  .sitefoot__col a{ padding-block:5px; font-size:var(--t-row); }
  .sitefoot__k{ margin-bottom:6px; }
  .sitefoot__note{ font-size:var(--t-meta); }
  .sitefoot__base{ margin-top:var(--s-4); padding-top:var(--s-3); gap:var(--s-2); }
  .sitefoot__in::after{ font-size:clamp(1.5rem,7vw,2rem); margin-top:var(--s-2); margin-bottom:-.32em; }
}


/* ---- the white strip under the footer ----
   Measured at 29px of page after the footer's bottom edge. It was not a
   margin: it was a phantom LINE BOX. The whitespace between </footer> and
   the script tags is a text node in the body, and body has a line-height,
   so the browser gave it a line — 17px x 1.7 = 29px of white below an ink
   footer that is supposed to be the last thing on the page.

   A flex body was the first attempt and it did NOT close the gap —
   measured again at 29px — so the whitespace theory was wrong and I am
   not going to keep guessing at the source. The ground below the last
   element is painted ink instead, which makes any residual space
   continuous with the footer whatever is creating it. The flex body
   stays because it is correct anyway: it keeps the footer at the bottom
   on short pages like /404. */


/* ---- the 29px white strip under the footer ----
   Three theories tested and all three wrong: a phantom whitespace line box
   (removing the whitespace changed nothing), a flex body (no effect), and
   trailing script nodes (they measure zero). The body is simply 29px taller
   than its last visible child and I have not found what creates it.

   So the strip is removed by making it impossible to see rather than by
   chasing it further: the BODY carries the ink now and the page's own
   surfaces paint themselves white on top. Whatever those 29px are, they
   are the same colour as the footer that precedes them.

   If the cause is ever found this can go back to a white body. */
html, body{ background:var(--ink); }
.hero, main, .sitehead[data-surface="light"]{ background:var(--white); }
.sitemenu{ background:var(--white); overscroll-behavior:contain; }