/* ==========================================================================
   WATER IS 4LIFE
   Design language: instrument panel. Hairlines, measured type, hard edges.
   No rounded corners, no drop shadows, no floating panels.
   ========================================================================== */

:root{
  /* palette carried over from the brand */
  --deep:#03121f;
  --navy:#061b32;
  --navy-2:#0a2540;
  --blue:#0875d1;
  --sky:#32a9f3;
  --gold:#efad27;
  --green:#6dbb45;
  --cream:#f2efe8;
  --paper:#e6e1d6;
  --ink:#102d48;
  --muted:#5d7183;

  /* hairlines */
  --line-light:rgba(255,255,255,.16);
  --line-dark:rgba(16,45,72,.22);

  /* rhythm */
  --pad:clamp(20px,5vw,86px);
  --bar:64px;

  /* type */
  --sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --ease:cubic-bezier(.16,.84,.34,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--bar)}
body{
  margin:0;
  background:var(--deep);
  color:var(--cream);
  font-family:var(--sans);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--gold);color:var(--deep)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:14px 20px;background:var(--gold);color:var(--deep);font:500 12px/1 var(--mono)}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* film grain, whole page, keeps the flat colour fields from going dead */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */

/* the display voice: extended, heavy, set very tight */
.stage-head,.declare-head,.anatomy-head,.places-head,.method-head,.coverage-head,.intake-head,.ledger-head{
  font-variation-settings:"wdth" 112,"wght" 640;
  letter-spacing:-.035em;
  line-height:.94;
  text-wrap:balance;
}

/* mono voice: every label and piece of metadata */
.tag,.index,.gauge dt,.masthead-call i,.fld span,.fine,.foot-bottom,.intake-form-label,.dir-note,.status{
  font-family:var(--mono);
  font-weight:500;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.tag,.index{
  display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--gold);
}
.tag s,.index s{display:block;width:30px;height:1px;background:currentColor;opacity:.55;text-decoration:none;flex:none}
.index-dark{color:rgba(3,18,31,.6)}
.index-light{color:var(--gold)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.act{
  --fg:var(--deep);--bg:var(--gold);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 30px;overflow:hidden;
  background:var(--bg);color:var(--fg);
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  border:0;cursor:pointer;white-space:nowrap;
  transition:color .3s var(--ease);
}
/* the fill wipes up from the base and the label inverts with it */
.act::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);
  transform:scaleY(0);transform-origin:bottom;transition:transform .38s var(--ease);
}
.act:hover::before,.act:focus-visible::before{transform:scaleY(1)}
.act:hover,.act:focus-visible{color:var(--bg)}
.act-gold{--bg:var(--gold);--fg:var(--deep)}
.act-navy{--bg:var(--deep);--fg:var(--gold)}
.act-white{--bg:#fff;--fg:var(--blue)}
.act-ghost{
  --bg:transparent;--fg:var(--cream);
  background:transparent;color:var(--cream);
  padding:0 2px;height:auto;line-height:1;
  border-bottom:1px solid var(--gold);padding-bottom:12px;
}
.act-ghost::before{display:none}
.act-ghost:hover{color:var(--gold)}
.act-wide{width:100%;margin-top:38px}

/* text link with a rule that draws itself */
.rule-link{
  display:inline-block;margin-top:26px;padding-bottom:10px;position:relative;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
}
.rule-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform-origin:left;transition:transform .4s var(--ease)}
.rule-link:hover::after{transform:scaleX(.35)}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(3,18,31,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-light);
  transition:background .3s,transform .45s var(--ease);
}
.masthead-inner{
  position:relative;z-index:2;
  height:var(--bar);padding:0 var(--pad);
  display:flex;align-items:center;gap:clamp(20px,4vw,60px);
}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{display:block;width:34px;height:34px;overflow:hidden;background:var(--navy);flex:none}
.brand-mark img{width:100%;height:100%;object-fit:cover;object-position:52% 50%;transform:scale(1.32)}
.brand-type{display:flex;flex-direction:column;line-height:1}
.brand-type b{font-variation-settings:"wdth" 112,"wght" 700;font-size:15px;letter-spacing:.02em;color:#fff}
.brand-type em{font-family:var(--mono);font-style:normal;font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--green);margin-top:4px}

.masthead-nav{display:flex;gap:clamp(16px,2.4vw,32px);margin-left:auto}
.masthead-nav a{
  position:relative;font-size:14px;color:rgba(242,239,232,.62);
  padding:6px 0;transition:color .25s;
}
.masthead-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.masthead-nav a:hover,.masthead-nav a.on{color:#fff}
.masthead-nav a.on::after{transform:scaleX(1)}

.masthead-call{
  display:flex;flex-direction:column;gap:3px;flex:none;
  padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--line-light);
}
.masthead-call i{font-style:normal;font-size:11px;color:var(--gold)}
.masthead-call b{font-variation-settings:"wdth" 105,"wght" 600;font-size:15px;letter-spacing:.01em}
.masthead-call:hover b{color:var(--gold)}

.scrollbar{height:2px;background:rgba(255,255,255,.08)}
.scrollbar span{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}

.burger{display:none;width:40px;height:40px;padding:0;background:none;border:1px solid var(--line-light);flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;margin-left:auto}
.burger span:not(.sr-only){display:block;width:17px;height:1.5px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* ==========================================================================
   HERO / STAGE
   ========================================================================== */
.stage{
  position:relative;
  min-height:100svh;
  padding-top:var(--bar);
  background:var(--navy);
  display:grid;
  grid-template-columns:1fr minmax(0,44vw);
  grid-template-rows:1fr auto;
  overflow:hidden;
}

/* faint column rules running the height of the hero */
.rules{position:absolute;inset:0;display:flex;justify-content:space-around;pointer-events:none;z-index:1}
.rules i{width:1px;background:rgba(255,255,255,.05)}

.stage-copy{
  grid-column:1;grid-row:1;z-index:3;align-self:center;
  padding:clamp(48px,7vh,90px) clamp(24px,3vw,60px) clamp(40px,6vh,70px) var(--pad);
  max-width:1000px;
}
.stage-tag{animation:rise .8s var(--ease) .1s both}
.stage-head{
  margin:26px 0 0;
  font-size:clamp(42px,6.1vw,104px);
  color:#fff;
  animation:reveal 1.1s var(--ease) .18s both;
}
.stage-lede{
  max-width:44ch;margin:30px 0 0;
  color:rgba(242,239,232,.66);font-size:clamp(15px,1.15vw,18px);line-height:1.62;
  animation:rise .9s var(--ease) .42s both;
}
.stage-actions{
  margin-top:clamp(30px,4vh,46px);
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  animation:rise .9s var(--ease) .56s both;
}

.stage-shot{
  grid-column:2;grid-row:1/3;position:relative;margin:0;overflow:hidden;z-index:2;
  border-left:1px solid var(--line-light);
  animation:wipe 1.3s var(--ease) .1s both;
}
.stage-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;transform:scale(1.02)}
.stage-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,27,50,.92),rgba(6,27,50,0) 38%),
             linear-gradient(0deg,rgba(3,18,31,.7),rgba(3,18,31,0) 42%);
}
.stage-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px 22px;border-top:1px solid var(--line-light);
  background:rgba(3,18,31,.45);backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:rgba(242,239,232,.78);
}

.gauge{
  grid-column:1;grid-row:2;z-index:3;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-light);
  animation:rise .9s var(--ease) .7s both;
}
.gauge div{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px var(--pad) 24px;border-right:1px solid var(--line-light);
}
.gauge div:first-child{padding-left:var(--pad)}
.gauge div:not(:first-child){padding-left:clamp(14px,1.6vw,26px)}
.gauge div:last-child{border-right:0}
.gauge dt{font-size:11.5px;color:rgba(242,239,232,.5);margin-bottom:10px}
.gauge dd{margin:0;font-variation-settings:"wdth" 108,"wght" 600;font-size:clamp(16px,1.6vw,23px);line-height:1.15;color:var(--gold);letter-spacing:-.015em}

/* ==========================================================================
   DECLARE (statement, cream)
   ========================================================================== */
.declare{
  position:relative;background:var(--cream);color:var(--ink);
  padding:clamp(72px,11vh,140px) var(--pad);
  display:grid;grid-template-columns:1.15fr .85fr;column-gap:clamp(40px,7vw,120px);row-gap:34px;
  border-bottom:1px solid var(--line-dark);
}
.declare .index{grid-column:1/-1;margin-bottom:clamp(30px,5vh,60px)}
.declare-head{font-size:clamp(32px,4.6vw,74px);color:var(--ink)}
.declare-body{align-self:end;padding-bottom:6px}
.declare-body p{color:var(--muted);font-size:16.5px;line-height:1.72;margin-bottom:20px}
.declare-body p:last-of-type{margin-bottom:0}

/* ==========================================================================
   LEDGER (numbered rows, cream)
   ========================================================================== */
.ledger{background:var(--cream);color:var(--ink);padding:0 var(--pad) clamp(70px,10vh,120px)}
.ledger-head{
  font-size:clamp(20px,1.8vw,26px);
  font-variation-settings:"wdth" 108,"wght" 560;
  padding:clamp(40px,6vh,64px) 0 26px;
}
.ledger-rows li{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(20px,3vw,50px);
  padding:clamp(22px,3vh,34px) clamp(14px,2vw,26px);
  border-top:1px solid var(--line-dark);
  transition:color .4s var(--ease);
}
.ledger-rows li:last-child{border-bottom:1px solid var(--line-dark)}
.ledger-rows li::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);
}
.ledger-rows li:hover::before{transform:scaleY(1)}
.ledger-rows li:hover{color:var(--cream)}
.ledger-rows li > *{position:relative;z-index:1}
.ledger-name{
  font-variation-settings:"wdth" 112,"wght" 620;
  font-size:clamp(24px,3.1vw,48px);letter-spacing:-.035em;line-height:1;
}
.ledger-note{color:var(--muted);font-size:15px;line-height:1.65;transition:color .4s var(--ease)}
.ledger-rows li:hover .ledger-note{color:rgba(242,239,232,.72)}

/* ==========================================================================
   ANATOMY (annotated machine, deep)
   ========================================================================== */
.anatomy{background:var(--deep);padding:clamp(72px,11vh,140px) var(--pad)}
.anatomy-top{
  display:grid;grid-template-columns:1.1fr .9fr;column-gap:clamp(40px,7vw,120px);row-gap:24px;
  align-items:end;padding-bottom:clamp(40px,6vh,70px);
}
.anatomy-top .index{grid-column:1/-1;margin-bottom:clamp(24px,4vh,44px)}
.anatomy-head{font-size:clamp(30px,4.2vw,66px);color:#fff}
.anatomy-lede{color:rgba(242,239,232,.6);font-size:16px;line-height:1.7;max-width:46ch}

.anatomy-stage{background:var(--deep);border:1px solid var(--line-light)}
/* aspect locked to the source file so the callout pins stay on target */
.anatomy-shot{position:relative;margin:0;overflow:hidden;background:var(--navy);aspect-ratio:1656/931}
.anatomy-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anatomy-shot::after{content:"";position:absolute;inset:0;background:rgba(3,18,31,.22);transition:background .5s}
.anatomy-shot:hover::after{background:rgba(3,18,31,.04)}

/* target markers: a square sight with a centre dot, no labels on the photo */
.pin{
  position:absolute;left:var(--x);top:var(--y);z-index:3;
  width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(3,18,31,.55);border:1px solid rgba(255,255,255,.7);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.pin::after{
  content:"";width:6px;height:6px;background:#fff;transition:background .3s,transform .3s var(--ease);
}
.pin::before{
  content:"";position:absolute;inset:-8px;border:1px solid rgba(255,255,255,.3);
  transform:scale(.7);opacity:0;transition:transform .45s var(--ease),opacity .45s;
}
.pin:hover,.pin.on{background:var(--gold);border-color:var(--gold);transform:scale(1.12)}
.pin:hover::after,.pin.on::after{background:var(--deep)}
.pin.on::before{transform:scale(1);opacity:1;border-color:var(--gold)}

/* legend for the pins above, one column per callout */
.specs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-light)}
.specs li{
  position:relative;padding:clamp(20px,2.4vw,28px) clamp(14px,1.5vw,22px);
  border-left:1px solid var(--line-light);cursor:default;transition:background .35s;
}
.specs li:first-child{border-left:0}
.specs li::before{content:"";position:absolute;left:-1px;right:0;top:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.specs li.on{background:rgba(255,255,255,.05)}
.specs li.on::before{transform:scaleX(1)}
.specs strong{display:block;font-variation-settings:"wdth" 106,"wght" 600;font-size:15.5px;letter-spacing:-.01em;color:#fff;margin-bottom:10px}
.specs span{display:block;color:rgba(242,239,232,.55);font-size:13.5px;line-height:1.6}

/* ==========================================================================
   PLACES (directory, gold)
   ========================================================================== */
.places{background:var(--gold);color:var(--deep);padding:clamp(72px,11vh,140px) var(--pad)}
.places-top{display:grid;grid-template-columns:1.1fr .9fr;column-gap:clamp(40px,7vw,120px);row-gap:24px;align-items:end}
.places-top .index{grid-column:1/-1;margin-bottom:clamp(24px,4vh,44px)}
.places-head{font-size:clamp(32px,4.8vw,78px)}
.places-lede{font-size:16px;line-height:1.7;max-width:44ch;color:rgba(3,18,31,.72)}

.directory{margin-top:clamp(44px,7vh,80px)}
.directory li{
  display:flex;align-items:baseline;gap:18px;
  padding:clamp(16px,2.4vh,26px) 0;
  border-top:1px solid rgba(3,18,31,.28);
  transition:padding-left .4s var(--ease);
}
.directory li:last-child{border-bottom:1px solid rgba(3,18,31,.28)}
.directory li:hover{padding-left:16px}
.dir-name{
  font-variation-settings:"wdth" 110,"wght" 580;
  font-size:clamp(20px,2.7vw,42px);letter-spacing:-.03em;line-height:1;flex:none;
}
.dir-dots{
  flex:1;height:1px;min-width:20px;align-self:center;
  background-image:radial-gradient(circle,rgba(3,18,31,.5) 1px,transparent 1px);
  background-size:7px 1px;background-repeat:repeat-x;
}
.dir-note{flex:none;font-size:12px;color:rgba(3,18,31,.74);text-align:right;max-width:34ch}

.places-foot{
  margin-top:clamp(34px,5vh,56px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.places-foot p{font-variation-settings:"wdth" 104,"wght" 560;font-size:clamp(16px,1.5vw,20px)}

/* ==========================================================================
   METHOD (process, navy)
   ========================================================================== */
.method{background:var(--navy)}
.method-shot{margin:0;position:relative;height:clamp(280px,46vh,520px);overflow:hidden}
.method-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 45%}
.method-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,27,50,.96),rgba(6,27,50,.15) 55%,rgba(6,27,50,.4))}

.method-body{padding:clamp(46px,7vh,86px) var(--pad) clamp(72px,11vh,130px)}
.method-top{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vh,44px);padding-bottom:clamp(40px,6vh,70px)}
.method-head{font-size:clamp(30px,4.4vw,68px);color:#fff}

.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:56px}
.track::before,.track::after{content:"";position:absolute;left:0;right:0;top:0;height:1px}
.track::before{background:var(--line-light)}
.track::after{background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .25s linear}
.track li{position:relative;padding:0 clamp(18px,2.4vw,38px) 0 0}
.track li:not(:first-child){padding-left:clamp(18px,2.4vw,38px);border-left:1px solid var(--line-light)}
.track li::before{
  content:"";position:absolute;top:-56px;left:0;width:9px;height:9px;margin-top:-4px;
  background:var(--navy);border:1px solid var(--gold);
}
.track li:not(:first-child)::before{left:clamp(18px,2.4vw,38px);margin-left:-4px}
.track strong{
  display:block;font-variation-settings:"wdth" 108,"wght" 600;
  font-size:clamp(16px,1.5vw,21px);letter-spacing:-.015em;color:#fff;margin-bottom:10px;
}
.track span{display:block;color:rgba(242,239,232,.55);font-size:14.5px;line-height:1.6}

/* ==========================================================================
   COVERAGE (belt, blue)
   ========================================================================== */
.coverage{background:var(--blue);color:#fff;padding:clamp(72px,11vh,130px) 0;overflow:hidden}
.coverage-top{padding:0 var(--pad) clamp(40px,6vh,64px)}
.coverage-top .index{color:rgba(255,255,255,.7);margin-bottom:clamp(20px,3vh,36px)}
.coverage-head{font-size:clamp(32px,5.2vw,86px);color:#fff}

.belt{display:flex;width:100%;overflow:hidden;padding:6px 0;user-select:none}
.belt-run{display:flex;flex:none;gap:clamp(28px,4vw,64px);padding-right:clamp(28px,4vw,64px);animation:belt 42s linear infinite;will-change:transform}
.belt-run-rev{animation-duration:56s;animation-direction:reverse}
.belt-run span{
  flex:none;font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(44px,8.5vw,140px);letter-spacing:-.045em;line-height:1;text-transform:uppercase;
}
.belt-run .hollow{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.belt-back{opacity:.85;margin-top:10px}
.belt-back .belt-run span{font-size:clamp(26px,4.4vw,72px);font-variation-settings:"wdth" 112,"wght" 500}

.coverage-foot{
  margin-top:clamp(40px,6vh,70px);padding:clamp(30px,4vh,44px) var(--pad) 0;
  border-top:1px solid rgba(255,255,255,.3);
  display:grid;grid-template-columns:1.2fr auto;gap:30px;align-items:center;
}
.coverage-foot p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;max-width:56ch}

/* ==========================================================================
   INTAKE (form, deep)
   ========================================================================== */
.intake{
  background:var(--deep);
  padding:clamp(72px,11vh,140px) var(--pad);
  display:grid;grid-template-columns:.8fr 1.2fr;column-gap:clamp(40px,7vw,110px);row-gap:48px;
}
.intake-side{position:sticky;top:calc(var(--bar) + 40px);align-self:start}
.intake-side .index{margin-bottom:clamp(22px,3.5vh,40px)}
.intake-head{font-size:clamp(30px,3.5vw,54px);color:#fff}
.intake-lede{margin-top:24px;color:rgba(242,239,232,.6);font-size:15.5px;line-height:1.7;max-width:42ch}

.intake-call{
  display:block;margin-top:36px;padding:22px 0;
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
}
.intake-call i{display:block;font-family:var(--mono);font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.intake-call b{font-variation-settings:"wdth" 110,"wght" 640;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;color:#fff;transition:color .3s}
.intake-call:hover b{color:var(--gold)}

.intake-form{border-top:2px solid var(--gold);padding-top:clamp(28px,4vh,40px)}
.intake-form-label{font-size:11.5px;color:rgba(242,239,232,.5);margin-bottom:clamp(26px,4vh,38px)}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vh,32px) clamp(20px,3vw,40px)}
.fld{display:block}
.fld-wide{grid-column:1/-1}
.fld > span{display:flex;align-items:baseline;gap:9px;margin-bottom:12px;font-size:11.5px;color:rgba(242,239,232,.66)}
.fld > span em{font-style:normal;margin-left:auto;font-size:10px;letter-spacing:.08em;color:rgba(242,239,232,.32)}
.fld input,.fld select,.fld textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);
  border-radius:0;padding:0 0 12px;color:#fff;font-size:16px;
  transition:border-color .3s;appearance:none;-webkit-appearance:none;
}
.fld input,.fld select{height:42px}
.fld select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%23efad27' stroke-width='1.4'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:22px;cursor:pointer;
}
.fld select option{background:var(--navy);color:#fff}
.fld textarea{padding-top:6px;resize:vertical;min-height:64px;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(242,239,232,.26)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--gold)}
.fld:focus-within > span{color:#fff}
.fld input:invalid.touched,.fld select:invalid.touched{border-bottom-color:#d8674f}

.fine{margin-top:20px;font-size:11px;color:rgba(242,239,232,.4);text-align:center}
.status{display:none;margin-top:22px;padding:20px 22px;border-left:2px solid var(--sky);background:rgba(50,169,243,.09);font-size:12.5px;line-height:1.75;letter-spacing:.03em;color:rgba(242,239,232,.88)}
.status a{color:var(--gold);border-bottom:1px solid currentColor}
.status.show{display:block;animation:rise .4s var(--ease) both}
.status.bad{border-left-color:#d8674f;background:rgba(216,103,79,.1)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--navy);padding:clamp(56px,8vh,90px) var(--pad) 0;border-top:1px solid var(--line-light)}
.foot-top{
  display:grid;grid-template-columns:auto 1.1fr auto auto;
  gap:clamp(28px,5vw,70px);align-items:center;
  padding-bottom:clamp(44px,6vh,66px);
}
.brand-lg .brand-mark{width:46px;height:46px}
.brand-lg .brand-type b{font-size:19px}
.brand-lg .brand-type em{font-size:10px}
.foot-line{color:rgba(242,239,232,.5);font-size:14px;line-height:1.65;max-width:40ch}
.foot-links{display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.foot-links a{color:rgba(242,239,232,.55);transition:color .25s}
.foot-links a:hover{color:var(--gold)}
.foot-act{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.foot-call{font-variation-settings:"wdth" 108,"wght" 620;font-size:22px;letter-spacing:-.015em}
.foot-call:hover{color:var(--gold)}

.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  min-height:60px;padding:18px 0;border-top:1px solid var(--line-light);
  font-size:11px;color:rgba(242,239,232,.42);
}
.foot-bottom a:hover{color:var(--gold)}
.foot-boroughs s{display:inline-block;width:12px;height:1px;background:currentColor;vertical-align:middle;opacity:.5;margin:0 2px;text-decoration:none}

/* ==========================================================================
   MOTION
   ========================================================================== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes reveal{from{opacity:0;transform:translateY(26px);clip-path:inset(0 0 102% 0)}to{opacity:1;transform:none;clip-path:inset(-20% -20% -20% -20%)}}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}

[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.ledger-rows li[data-reveal],.directory li[data-reveal]{transition-delay:calc(var(--i,0) * 70ms)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .masthead-nav{gap:18px}
  .masthead-nav a{font-size:13px}
  .stage{grid-template-columns:1fr minmax(0,38vw)}
  .ledger-rows li{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .anatomy-stage{grid-template-columns:1fr .8fr}
}

@media (max-width:960px){
  .burger{display:flex}
  .masthead-nav{
    position:fixed;inset:calc(var(--bar) + 2px) 0 auto;z-index:1;
    flex-direction:column;gap:0;margin:0;padding:12px var(--pad) 34px;
    max-height:calc(100dvh - var(--bar));overflow-y:auto;
    background:var(--deep);border-bottom:1px solid var(--line-light);
    transform:translateY(-101%);visibility:hidden;
    transition:transform .5s var(--ease),visibility 0s linear .5s;
  }
  .masthead-nav.open{transform:none;visibility:visible;transition:transform .5s var(--ease)}
  .masthead-nav a{
    padding:17px 0;border-bottom:1px solid var(--line-light);
    font-variation-settings:"wdth" 108,"wght" 560;font-size:22px;color:#fff;
  }
  .masthead-nav a::after{display:none}
  .masthead-call{margin-left:auto;padding-left:0;border-left:0}
  .masthead-call i{display:none}
  .burger{margin-left:20px}

  .stage{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0}
  .stage-copy{grid-column:1;grid-row:1;padding:clamp(44px,8vh,80px) var(--pad) clamp(38px,6vh,60px)}
  .stage-shot{grid-column:1;grid-row:2;height:clamp(300px,52vh,480px);border-left:0;border-top:1px solid var(--line-light)}
  .stage-shot::after{background:linear-gradient(0deg,rgba(3,18,31,.72),rgba(3,18,31,0) 50%)}
  .gauge{grid-column:1;grid-row:3;grid-template-columns:1fr 1fr}
  .gauge div{padding:18px var(--pad) 20px}
  .gauge div:nth-child(2n){border-right:0}
  .gauge div:nth-child(-n+2){border-bottom:1px solid var(--line-light)}
  .gauge div:not(:first-child){padding-left:var(--pad)}

  .declare,.anatomy-top,.places-top{grid-template-columns:1fr}
  .declare-body{padding-top:6px}
  .specs{grid-template-columns:repeat(2,1fr)}
  .specs li{border-top:1px solid var(--line-light)}
  .specs li:nth-child(-n+2){border-top:0}
  .specs li:nth-child(odd){border-left:0}
  .specs li:last-child{grid-column:1/-1}
  /* the rail turns vertical and the gold fill runs top to bottom */
  .track{grid-template-columns:1fr;row-gap:0;padding:0 0 0 30px}
  .track::before{right:auto;bottom:0;width:1px;height:auto}
  .track::after{right:auto;bottom:0;width:1px;height:auto;transform:scaleY(var(--p,0));transform-origin:top}
  .track li,.track li:not(:first-child){padding:0 0 34px;border-left:0}
  .track li:last-child{padding-bottom:0}
  .track li::before,.track li:not(:first-child)::before{top:5px;left:-30px;margin:0 0 0 -4px}
  .intake{grid-template-columns:1fr}
  .intake-side{position:static}
  .coverage-foot{grid-template-columns:1fr;gap:26px;justify-items:start}
  .foot-top{grid-template-columns:1fr 1fr;row-gap:36px}
  .foot-line{grid-column:1/-1;order:3}
  .foot-links{order:4}
  .foot-act{order:5;align-items:flex-start}
}

@media (max-width:680px){
  :root{--bar:58px}
  .brand-type b{font-size:14px}
  .brand-type em{font-size:9px;letter-spacing:.16em}
  .masthead-call b{font-size:14px}
  .burger{margin-left:14px}

  .stage-head{font-size:clamp(34px,10.5vw,52px)}
  .stage-actions{flex-direction:column;align-items:flex-start;gap:24px}
  .stage-actions .act-gold{width:100%}
  .gauge{grid-template-columns:1fr 1fr}
  .gauge dd{font-size:24px}

  .ledger-rows li{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .ledger-rows li:hover{padding-left:14px}
  .ledger-rows li::before{display:none}
  .ledger-rows li:hover{color:var(--ink)}
  .ledger-rows li:hover .ledger-note{color:var(--muted)}
  .ledger-name{font-size:30px}

  /* let the annotated photo run edge to edge so the callouts stay readable */
  .anatomy-stage{margin:0 calc(var(--pad) * -1);border-left:0;border-right:0}
  .specs{grid-template-columns:1fr}
  .specs li{padding:18px var(--pad);border-left:0;border-top:1px solid var(--line-light)}
  .specs li:first-child{border-top:0}
  .specs li:last-child{grid-column:auto}
  .pin{width:22px;height:22px;margin:-11px 0 0 -11px}
  .pin::after{width:5px;height:5px}

  .directory li{flex-wrap:wrap;gap:6px}
  .dir-dots{display:none}
  .dir-name{font-size:24px;flex:1 1 100%}
  .dir-note{text-align:left;max-width:none}
  .places-foot .act{width:100%}

  .track{padding-left:24px}
  .track li,.track li:not(:first-child){padding-bottom:30px}
  .track li::before,.track li:not(:first-child)::before{left:-24px}

  .fields{grid-template-columns:1fr}
  .coverage-foot .act,.foot-act .act{width:100%;justify-content:center}
  .foot-top{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0}
}

@media (hover:none){
  .ledger-rows li:hover::before{transform:scaleY(0)}
  .ledger-rows li:hover{color:var(--ink)}
  .ledger-rows li:hover .ledger-note{color:var(--muted)}
  .directory li:hover{padding-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .stage-head,.stage-tag,.stage-lede,.stage-actions,.stage-shot,.gauge{animation:none;opacity:1;clip-path:none}
}