/* ============================================================
   Chart & Tide — janisahil.com
   Tokens → primitives → components
   ============================================================ */

:root{
  /* ── colour — five values, no more ── */
  --ink:      #0B1F2A;
  --abyss:    #06131B;
  --chart:    #E8E2D4;
  --contour:  #2E5A6B;
  --buoy:     #FF5B1F;

  /* alpha variants of the same hues — no sixth colour */
  --chart-70:   rgba(232,226,212,.70);
  --chart-mute: rgba(232,226,212,.62);  /* AA-verified against --ink */
  --chart-16:   rgba(232,226,212,.16);
  --chart-08:   rgba(232,226,212,.08);
  --ink-72:     rgba(11,31,42,.72);
  --ink-68:     rgba(11,31,42,.68);
  --ink-22:     rgba(11,31,42,.22);
  --ink-14:     rgba(11,31,42,.14);

  /* ── type ── */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-mono:  clamp(.66rem, .60rem + .22vw, .76rem);
  --t-micro: .62rem;
  --t-body:  clamp(1.02rem, .96rem + .34vw, 1.22rem);
  --t-lede:  clamp(1.14rem, 1.02rem + .70vw, 1.55rem);
  --t-h3:    clamp(1.35rem, 1.16rem + .95vw, 1.95rem);
  --t-h2:    clamp(2.1rem, 1.5rem + 3.0vw, 4.3rem);
  --t-h1:    clamp(2.7rem, 1.55rem + 5.6vw, 7.4rem);

  /* ── spacing scale — every gap in the page comes from here ──
     Ad-hoc rem values were the source of the inconsistent rhythm;
     nothing below this line should invent its own number. */
  --sp-1: .35rem;
  --sp-2: .55rem;
  --sp-3: .85rem;
  --sp-4: 1.25rem;
  --sp-5: 1.85rem;
  --sp-6: 2.75rem;
  --sp-7: 4rem;
  --sp-8: clamp(3rem, 2rem + 4vw, 6rem);
  --sp-9: clamp(3.25rem, 2rem + 4.5vw, 5.5rem); /* band rhythm — applied to BOTH edges, so section gaps are 2x */

  --pad-card: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  --gut:      clamp(1.25rem, .6rem + 3vw, 3rem);
  --maxw:     76rem;
  --rail:     clamp(0rem, -3rem + 8vw, 4.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; }

body{
  margin:0;
  background:var(--ink);
  color:var(--chart);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
p,figure{ margin:0; }
h1,h2,h3{ margin:0; font-weight:inherit; }
a{ color:inherit; }
strong{ font-weight:600; color:var(--chart); }

:focus-visible{ outline:2px solid var(--buoy); outline-offset:3px; border-radius:1px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--buoy); color:var(--abyss);
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--mono); font-size:var(--t-mono);
}
.skip:focus{ left:0; }

/* ── shared primitives ─────────────────────────────────── */

.band{
  position:relative;
  padding-block:var(--sp-9);
  padding-inline:var(--gut);
  margin-inline:auto;
  max-width:calc(var(--maxw) + var(--rail));
}
@media (min-width:60rem){
  .band{ padding-left:calc(var(--gut) + var(--rail)); }
}

.band__label{
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--chart-mute);
  margin-bottom:var(--sp-8);
}
/* inside a head the label is followed by the title, which is a tighter
   relationship than label → section content */
.band__head .band__label{ margin-bottom:var(--sp-6); }
.band__label--light{ color:var(--ink-72); }

.band__head{ margin-bottom:var(--sp-8); }

.band__title{
  font-family:var(--display);
  font-size:var(--t-h2);
  font-weight:600;
  font-stretch:82%;
  line-height:.94;
  letter-spacing:-.025em;
  max-width:18ch;
}

.band__intro{
  margin-top:var(--sp-5);
  max-width:52ch;
  color:var(--chart-70);
  font-size:var(--t-lede);
  line-height:1.5;
}

/* contour rules — drawn, not solid */
.contour{
  position:absolute; top:0; left:0;
  width:100%; height:2.5rem;
  overflow:visible; pointer-events:none;
}
.contour path{
  fill:none; stroke:var(--contour); stroke-width:1;
  vector-effect:non-scaling-stroke;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:var(--sp-4) var(--sp-5);
  background:var(--buoy); color:#160600;
  border:1px solid var(--buoy);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:transparent; color:var(--buoy); transform:translateY(-2px); }

.btn--ghost{ background:transparent; color:var(--chart); border-color:var(--chart-16); }
.btn--ghost:hover{ border-color:var(--chart); color:var(--chart); }

.btn--light{ background:var(--ink); color:var(--chart); border-color:var(--ink); }
.btn--light:hover{ background:transparent; color:var(--ink); }

.btn--sm{ padding:var(--sp-2) var(--sp-4); }
.btn--lg{ padding:var(--sp-4) var(--sp-6); margin-top:var(--sp-7); }

/* On phones the hero CTA is already on screen, so a second orange action
   above the fold competes with it. One primary per view. */
@media (max-width:51.99rem){
  .nav .btn--sm{ background:transparent; color:var(--chart); border-color:var(--chart-16); }
  .nav .btn--sm:hover{ border-color:var(--chart); }
}

/* ── margin rail ───────────────────────────────────────── */

.rail{
  position:fixed; left:0; top:0; bottom:0;
  width:var(--rail); z-index:5;
  display:none;
  flex-direction:column; justify-content:space-around; align-items:center;
  border-right:1px solid var(--chart-08);
  pointer-events:none;
}
@media (min-width:60rem){ .rail{ display:flex; } }

.rail__tick{
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.1em; color:var(--chart-mute);
  writing-mode:vertical-rl; transform:rotate(180deg);
}

/* the sounding line: a depth marker that tracks how far down the page you are */
.rail__mark{
  position:absolute; left:50%; top:0;
  width:9px; height:9px; margin-left:-4.5px;
  border:1px solid var(--buoy); border-radius:50%;
  background:var(--ink);
}
.rail__mark::before{
  content:""; position:absolute;
  left:50%; bottom:100%; width:1px; height:100vh;
  margin-left:-.5px;
  background:linear-gradient(180deg, transparent, var(--buoy));
  opacity:.42;
}

/* ── nav ───────────────────────────────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-4) var(--gut);
  padding-left:calc(var(--gut) + var(--rail));
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(6,19,27,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--chart-08);
  padding-top:var(--sp-3); padding-bottom:var(--sp-3);
}

.nav__mark{ text-decoration:none; display:grid; gap:var(--sp-1); margin-right:auto; }
.nav__mark-glyph{
  font-family:var(--display); font-weight:700; font-stretch:78%;
  font-size:1.35rem; letter-spacing:.02em; line-height:1;
}
.nav__mark-meta{
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.1em; color:var(--chart-mute);
}

.nav__toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 9px;
  background:transparent; border:1px solid var(--chart-16); cursor:pointer;
}
.nav__toggle span{ display:block; height:1.5px; background:var(--chart); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.is-drawer .nav__toggle span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.is-drawer .nav__toggle span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
@media (min-width:52rem){ .nav__toggle{ display:none; } }

.nav__links{ display:none; gap:var(--sp-5); }
@media (min-width:52rem){ .nav__links{ display:flex; } .nav__cta{ display:inline-flex; } }
@media (max-width:51.99rem){ .nav__cta{ display:none; } }

.nav__links a{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--chart-70);
  padding-bottom:var(--sp-1);
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.nav__links a:hover{ color:var(--chart); border-bottom-color:var(--buoy); }

/* ── mobile drawer ────────────────────────────────────── */

.drawer{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-9) var(--gut) var(--sp-7);
  background:var(--abyss);
  opacity:0; visibility:hidden;
  transform:translateY(-1.5%);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.is-drawer .drawer{ opacity:1; visibility:visible; transform:none; }
@media (min-width:52rem){ .drawer{ display:none; } }

.drawer__nav{ display:grid; gap:var(--sp-2); }
.drawer__link{
  display:flex; align-items:baseline; gap:var(--sp-4);
  font-family:var(--display); font-size:clamp(2rem,1.3rem+4vw,3rem);
  font-weight:600; font-stretch:84%; letter-spacing:-.02em;
  text-decoration:none; color:var(--chart);
  padding:var(--sp-2) 0; border-bottom:1px solid var(--chart-08);
  transition:color .25s var(--ease);
}
.drawer__link span{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.14em; color:var(--buoy);
}
.drawer__link:hover,.drawer__link:focus-visible{ color:var(--buoy); }

.drawer__foot{ margin-top:var(--sp-8); display:grid; gap:var(--sp-4); justify-items:start; }
.drawer__meta{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.1em; color:var(--chart-mute); }

body.is-drawer{ overflow:hidden; }

/* ── hero ──────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-9) var(--gut) var(--sp-8);
  overflow:hidden;
}
@media (min-width:60rem){ .hero{ padding-left:calc(var(--gut) + var(--rail)); } }

.hero__canvas,.hero__static{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero{ perspective:1000px; }

/* Static stand-in for the WebGL layer. The gradient is the universal base;
   the surveyed plate loads only where it is actually designed to appear —
   small screens and reduced motion — so desktop never pays for it. */
.hero__static{
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(46,90,107,.55) 0%, transparent 62%),
    radial-gradient(60% 40% at 78% 100%, rgba(255,91,31,.12) 0%, transparent 70%),
    linear-gradient(180deg, var(--abyss) 0%, var(--ink) 55%);
}
.is-3d .hero__static{ display:none; }

@media (max-width:59.99rem){
  .hero__static{
    background:
      linear-gradient(180deg, rgba(11,31,42,.94) 0%, rgba(11,31,42,.55) 45%, var(--ink) 100%),
      image-set(url("../img/hero-chart.webp") type("image/webp"),
                url("../img/hero-chart.jpg")  type("image/jpeg")) center/cover no-repeat;
  }
}
@media (prefers-reduced-motion:reduce) and (min-width:60rem){
  .hero__static{
    background:
      linear-gradient(180deg, rgba(11,31,42,.90) 0%, rgba(11,31,42,.45) 50%, var(--ink) 100%),
      image-set(url("../img/hero-chart.webp") type("image/webp"),
                url("../img/hero-chart.jpg")  type("image/jpeg")) center/cover no-repeat;
  }
}

/* the mesh is live behind the type — guarantee the text side stays flat */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, var(--ink) 0%, rgba(11,31,42,.92) 26%, rgba(11,31,42,.30) 52%, transparent 72%),
    linear-gradient(0deg, var(--ink) 0%, transparent 26%);
}

.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin-inline:auto; }

.eyebrow{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--chart-70);
  margin-bottom:var(--sp-5);
}
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%; background:var(--buoy);
  animation:ping 2.8s var(--ease) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(255,91,31,.45); }
  70%{ box-shadow:0 0 0 9px rgba(255,91,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,91,31,0); }
}

.hero__h1{
  font-family:var(--display); font-size:var(--t-h1);
  font-weight:600; font-stretch:80%;
  line-height:.90; letter-spacing:-.035em;
  margin-bottom:var(--sp-5);
}
.hero__line{ display:block; overflow:hidden; }
.hero__line > span{ display:block; }

/* the service line reads AFTER the promise, as a quiet tag, not a menu
   before it (per the design critique) */
.hero__tag{
  display:flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-4);
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--chart-mute);
}
.hero__tag span{ width:16px; height:1px; background:var(--buoy); }

.hero__lede{ max-width:46ch; font-size:var(--t-lede); line-height:1.5; color:var(--chart-70); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }

.hero__scroll{
  position:absolute; z-index:3; display:none;
  left:var(--gut); bottom:0;
  flex-direction:column; align-items:center; gap:0;
}
@media (min-width:52rem){ .hero__scroll{ display:flex; } }
@media (min-width:60rem){ .hero__scroll{ left:calc(var(--gut) + var(--rail)); } }

.hero__scroll span:first-child{
  font-family:var(--mono); font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--chart-mute);
  writing-mode:vertical-rl; margin-bottom:var(--sp-3);
}
.hero__scroll-line{ width:1px; height:44px; background:var(--chart-16); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; left:0; right:0; top:0; height:16px;
  background:var(--buoy);
  animation:drop 2s var(--ease) infinite;
}
@keyframes drop{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(280%);} }

/* ── soundings ─────────────────────────────────────────── */

.soundings{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-7) var(--sp-4); }
@media (min-width:52rem){ .soundings{ grid-template-columns:repeat(4,1fr); } }

.sounding{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1);
  padding-top:var(--sp-4);
  border-top:1px solid var(--chart-16);
}
.sounding__n{
  font-family:var(--display);
  font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem);
  font-weight:300; font-stretch:88%;
  line-height:.85; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.sounding__plus{
  font-family:var(--display);
  font-size:clamp(1.1rem,.8rem + 1.2vw,1.7rem);
  font-weight:300; color:var(--buoy); line-height:1;
}
.sounding__l{
  flex-basis:100%; margin-top:var(--sp-3);
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--chart-mute);
}

/* ── services: alternating discipline rows ─────────────── */

.disc{ display:grid; border-top:1px solid var(--chart-16); }

.disc__row{
  background:var(--ink);
  display:grid; gap:var(--sp-6);
  padding:var(--pad-card);
  align-items:center;
  border-bottom:1px solid var(--chart-16);
}
@media (min-width:60rem){
  .disc__row{ grid-template-columns:1.05fr .95fr; gap:var(--sp-8); padding-block:var(--sp-8); }
  .disc__row--flip .disc__body{ order:2; }
  .disc__row--flip .disc__fig{ order:1; }
}

.disc__no{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.14em; color:var(--buoy); margin-bottom:var(--sp-4);
}
.disc__h{
  font-family:var(--display); font-size:var(--t-h2);
  font-weight:600; font-stretch:84%; line-height:.96; letter-spacing:-.025em;
  margin-bottom:var(--sp-4); max-width:14ch;
}
.disc__p{
  color:var(--chart-70); font-size:var(--t-lede); line-height:1.5;
  max-width:46ch; margin-bottom:var(--sp-5);
}
.disc__list{ display:grid; gap:var(--sp-3); margin-bottom:var(--sp-6); max-width:52ch; }
.disc__list li{
  position:relative; padding-left:var(--sp-4);
  font-size:1rem; line-height:1.5; color:var(--chart-70);
}
.disc__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:1px; background:var(--buoy);
}
.disc__link{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--buoy); border-bottom:1px solid rgba(255,91,31,.35);
  padding-bottom:3px; transition:border-color .25s var(--ease);
}
.disc__link:hover{ border-bottom-color:var(--buoy); }

.disc__fig{
  position:relative;
  border:1px solid var(--chart-08);
  background:var(--abyss);
  aspect-ratio:16/11; overflow:hidden;
}
.disc__fig img{ width:100%; height:114%; object-fit:cover; will-change:transform; }
/* a scrubbed accent line sweeps the row's leading edge as it enters */
.disc__row{ position:relative; }
.disc__row{ --rule:0; }
.disc__row::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background:var(--buoy); transform:scaleX(var(--rule)); transform-origin:left;
}

/* ── engagement model ──────────────────────────────────── */

.engage{ margin-top:var(--sp-8); }
.engage__grid{ display:grid; border-top:1px solid var(--chart-16); border-bottom:1px solid var(--chart-16); }
@media (min-width:52rem){ .engage__grid{ grid-template-columns:repeat(3,1fr); } }

.engage__col{ background:var(--ink); padding:var(--pad-card); transition:background .4s var(--ease); }
@media (min-width:52rem){ .engage__col + .engage__col{ border-left:1px solid var(--chart-16); } }
@media (max-width:51.99rem){ .engage__col + .engage__col{ border-top:1px solid var(--chart-16); } }
.engage__col:hover{ background:var(--abyss); }
.engage__mode{
  font-family:var(--display); font-size:var(--t-h3);
  font-weight:600; font-stretch:86%; letter-spacing:-.015em;
  margin-bottom:var(--sp-3);
}
.engage__desc{ color:var(--chart-70); font-size:1rem; line-height:1.55; margin-bottom:var(--sp-4); }
.engage__meta{
  display:flex; gap:var(--sp-3); align-items:baseline;
  padding-top:var(--sp-3); border-top:1px solid var(--chart-08);
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em;
  color:var(--chart-70);
}
.engage__meta span{ min-width:5rem; color:var(--chart-mute); text-transform:uppercase; letter-spacing:.12em; }

/* ── toolkit ledger ────────────────────────────────────── */

.ledger{ margin-top:var(--sp-8); }
.ledger__list{ display:grid; }
.ledger__list li{
  display:grid; gap:var(--sp-1); padding:var(--sp-4) 0;
  border-top:1px solid var(--chart-08);
}
.ledger__list li:last-child{ border-bottom:1px solid var(--chart-08); }
@media (min-width:52rem){
  .ledger__list li{ grid-template-columns:16rem 1fr; gap:var(--sp-5); align-items:baseline; }
}
.ledger__k{
  font-family:var(--display); font-size:1.1rem;
  font-weight:600; font-stretch:88%; letter-spacing:-.01em;
}
.ledger__v{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; color:var(--chart-mute); }

/* shared section label */
.caps__label{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--chart-mute); margin-bottom:var(--sp-5);
}

/* ── work plates ───────────────────────────────────────── */

/* work index — a running counter + active project name, scroll-synced.
   Only on wide screens where the section pins and the track travels. */
.work__nav{ display:none; }
@media (min-width:72rem){
  .work__nav{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:baseline; gap:var(--sp-5);
    margin-top:var(--sp-6);
    max-width:34rem;
  }
  .work__count{
    font-family:var(--display); font-weight:300; font-stretch:88%;
    font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem);
    line-height:.8; letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;
    color:var(--chart);
  }
  .work__count [data-work-index]{ color:var(--buoy); }
  .work__count-total{
    font-family:var(--mono); font-size:var(--t-mono);
    letter-spacing:.1em; color:var(--chart-mute); margin-left:var(--sp-2);
  }
  .work__name{
    font-family:var(--mono); font-size:var(--t-mono);
    letter-spacing:.14em; text-transform:uppercase; color:var(--chart-70);
    transition:opacity .35s var(--ease);
  }
  .work__bar{
    grid-column:1 / -1;
    display:block; height:1px; width:100%;
    background:var(--chart-16); margin-top:var(--sp-4);
    position:relative; overflow:hidden;
  }
  .work__bar-fill{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background:var(--buoy);
  }
}

.plates{ display:grid; gap:1px; background:var(--chart-16); }
@media (min-width:56rem) and (max-width:71.99rem){ .plates{ grid-template-columns:repeat(2,1fr); } }

/* On wide screens the work section pins and the plates travel sideways —
   a chart table you pull plates across. The track is laid out here; JS only
   drives its x. Below 72rem it stays a normal vertical stack. */
@media (min-width:72rem){
  .plates__vp{ overflow:hidden; }
  .plates{
    display:flex; width:max-content;
    grid-template-columns:none;
  }
  .plate{
    flex:0 0 auto;
    width:min(42vw, 34rem);
  }
}

.plate{
  background:var(--ink); padding:var(--pad-card);
  display:grid; gap:var(--sp-5);
  transition:background .4s var(--ease);
}
.plate:hover{ background:var(--abyss); }

/* Frame is 16:10 while the capture is 3:2, so the image is naturally taller
   than its frame — that surplus is the parallax travel. Sizing the img with
   height:auto keeps its own aspect, so nothing is ever cropped horizontally
   (object-fit:cover on a stretched box was slicing headlines mid-word). */
.plate__fig{
  overflow:hidden;
  border:1px solid var(--chart-08);
  aspect-ratio:16/10;
}
.plate__fig{ position:relative; background:var(--abyss); }
.plate__fig img{
  width:100%; height:auto;
  will-change:transform;
  filter:saturate(.72) contrast(1.03) brightness(.9);
  transition:filter .5s var(--ease);
}
/* an ink wash so four bright storefronts sit inside the chart palette
   instead of on top of it — lifted on hover, where the real colour is
   the reward for looking */
.plate__fig::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,31,42,.16), rgba(11,31,42,.38));
  transition:opacity .5s var(--ease);
}
.plate:hover .plate__fig img{ filter:none; }
.plate:hover .plate__fig::after{ opacity:0; }

.plate__no{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--chart-mute); margin-bottom:var(--sp-3);
}
.plate__h{
  font-family:var(--display); font-size:var(--t-h3);
  font-weight:600; font-stretch:86%;
  line-height:1.02; letter-spacing:-.02em;
  margin-bottom:var(--sp-3);
}
.plate__p{ color:var(--chart-70); font-size:1rem; line-height:1.58; margin-bottom:var(--sp-4); }
.plate__tags{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--chart-mute);
}
.plate__link{
  display:inline-block; margin-top:var(--sp-3);
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.08em; color:var(--buoy); text-decoration:none;
  border-bottom:1px solid rgba(46,90,107,.4); padding-bottom:2px;
  transition:border-color .25s var(--ease);
}
.plate__link:hover{ border-bottom-color:var(--buoy); }

/* ── hero survey — a bathymetric site map ──────────────── */

.hero__survey{ display:none; }

@media (min-width:64rem){
  .hero__survey{
    display:block;
    position:absolute; z-index:2;
    right:clamp(1.5rem, -3rem + 7vw, 5rem);
    top:50%; transform:translateY(-50%);
    width:min(34vw, 27rem);
    will-change:transform;
  }
  .hero__survey-img{
    width:100%; height:auto; display:block;
    -webkit-mask-image:radial-gradient(120% 100% at 60% 40%, #000 62%, transparent 100%);
    mask-image:radial-gradient(120% 100% at 60% 40%, #000 62%, transparent 100%);
  }

  /* an orange triangulation crosshair drawn over the shelf on load */
  .hero__survey-mark{
    position:absolute; inset:0; width:100%; height:100%;
    overflow:visible; pointer-events:none;
  }
  .hero__survey-mark line,
  .hero__survey-mark circle{
    fill:none; stroke:var(--buoy); stroke-width:.7;
    vector-effect:non-scaling-stroke;
  }
  .hs-ring{ opacity:.9; }

  .hero__survey-read{
    position:absolute; left:38%; top:30%;
    font-family:var(--mono); font-size:.58rem;
    letter-spacing:.14em; color:var(--buoy);
    white-space:nowrap;
  }
}

/* ── soundings band (now carries reach) ────────────────── */

.band--soundings{ overflow:hidden; padding-top:var(--sp-6); }

.soundings__bg{
  position:absolute; inset:-20% 0;
  background:image-set(url("../img/chart-reach.webp") type("image/webp"),
                       url("../img/chart-reach.jpg")  type("image/jpeg")) center/cover no-repeat;
  opacity:.55;
  will-change:transform;
}
.band--soundings::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(11,31,42,.72) 40%, var(--ink) 100%);
  pointer-events:none;
}
.soundings__inner{ position:relative; z-index:2; }

/* reach — a single compact strip, not a section of its own.
   The countries repeat what "8 countries" already says, so they
   read as the footnote to that number rather than a rival claim. */
.reach{ margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--chart-16); }

.reach__k{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--chart-mute); margin-bottom:var(--sp-4);
}

/* ── reach map ─────────────────────────────────────────── */

.map{
  position:relative;
  width:100%;
  aspect-ratio:2.35/1;
  max-width:60rem;
  border:1px solid var(--chart-16);
  background:rgba(6,19,27,.35);
}
.map__canvas{ position:absolute; inset:0; width:100%; height:100%; }

.map__stations{ position:absolute; inset:0; }

.map__station{ position:absolute; transform:translate(-50%,-50%); }

.map__dot{
  display:block; width:11px; height:11px; padding:0;
  border:1px solid var(--buoy); border-radius:50%;
  background:var(--ink); cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.map__station--home .map__dot{ background:var(--buoy); }
.map__station.is-active .map__dot{ transform:scale(1.45); background:var(--buoy); }

.map__sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.map__tip{
  position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  display:grid; gap:2px;
  padding:var(--sp-2) var(--sp-3);
  background:var(--abyss);
  border:1px solid var(--chart-16);
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--chart);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.map__tip em{ font-style:normal; color:var(--chart-mute); }
.map__station.is-active .map__tip{ opacity:1; transform:translateX(-50%) translateY(0); }

/* clickable index — drives the map, and the map drives it back */
.reach__list{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-2);
  margin-top:var(--sp-4); max-width:60rem;
}
.reach__list button{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--chart-mute); background:transparent;
  border:1px solid var(--chart-08);
  padding:var(--sp-1) var(--sp-3); cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.reach__list button:hover{ color:var(--chart); border-color:var(--chart-16); }
.reach__list li.is-active button{ color:var(--buoy); border-color:var(--buoy); }

/* tips near the frame edge would overflow the band */
.map__station[data-x="86.9"] .map__tip{ left:auto; right:0; transform:translateY(4px); }
.map__station[data-x="86.9"].is-active .map__tip{ transform:translateY(0); }

/* ── timeline ──────────────────────────────────────────── */

.tl{ position:relative; display:grid; gap:var(--sp-7); padding-left:var(--sp-6); }

.tl__line{
  position:absolute; left:0; top:var(--sp-2); bottom:0;
  width:1px; background:var(--chart-16);
  transform:scaleY(0); transform-origin:top;
}

.tl__item{ position:relative; display:grid; gap:var(--sp-2); }
.tl__item::before{
  content:""; position:absolute;
  left:calc(var(--sp-6) * -1); top:.55em;
  width:7px; height:7px; margin-left:-3px;
  border:1px solid var(--buoy); border-radius:50%; background:var(--ink);
}

.tl__yr{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.14em; color:var(--buoy);
}
.tl__h{
  font-family:var(--display); font-size:1.3rem;
  font-weight:600; font-stretch:86%; letter-spacing:-.015em;
}
.tl__org{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.08em; text-transform:uppercase; color:var(--chart-mute);
}
.tl__p{ margin-top:var(--sp-2); max-width:56ch; color:var(--chart-70); font-size:1rem; line-height:1.58; }

@media (min-width:52rem){
  .tl{ padding-left:var(--sp-7); }
  .tl__item{ grid-template-columns:6rem 1fr; gap:var(--sp-5); align-items:start; }
  .tl__item::before{ left:calc(var(--sp-7) * -1); }
  .tl__yr{ padding-top:.3rem; }
}


/* ── testimonials ──────────────────────────────────────── */

.voices{ display:grid; gap:1px; background:var(--chart-16); border-block:1px solid var(--chart-16); }
@media (min-width:56rem){ .voices{ grid-template-columns:repeat(3,1fr); } }

.voice{
  background:var(--ink); padding:var(--pad-card);
  display:flex; flex-direction:column; gap:var(--sp-5);
  transition:background .4s var(--ease);
}
.voice:hover{ background:var(--abyss); }
.voice__quote{
  margin:0; font-family:var(--body); font-size:var(--t-lede);
  line-height:1.5; color:var(--chart); position:relative;
  padding-top:var(--sp-5);
}
.voice__quote::before{
  content:"C"; position:absolute; top:-.35em; left:-.05em;
  font-family:var(--display); font-size:3rem; line-height:1;
  color:var(--buoy);
}
.voice__by{ margin-top:auto; display:grid; gap:2px; padding-top:var(--sp-4); border-top:1px solid var(--chart-08); }
.voice__name{ font-family:var(--display); font-weight:600; font-stretch:88%; font-size:1.05rem; letter-spacing:-.01em; }
.voice__role{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--chart-mute); }

/* placeholder cards read as unfinished until real quotes replace them */
.voice[data-placeholder]{ opacity:.55; }
.voice[data-placeholder]::after{
  content:"PLACEHOLDER"; position:absolute; top:var(--sp-3); right:var(--sp-3);
  font-family:var(--mono); font-size:.5rem; letter-spacing:.16em;
  color:var(--buoy); border:1px solid rgba(255,91,31,.4); padding:2px 6px;
}
.voice{ position:relative; }

/* ── audit (inverted plate) ────────────────────────────── */

.band--audit{
  max-width:none; width:100%;
  background:var(--chart); color:var(--ink);
  padding-inline:0;
  isolation:isolate;
}

/* press texture — feTurbulence rather than a generated JPEG:
   tiles perfectly, scales to any viewport, costs no request */
.band--audit::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.audit{
  max-width:calc(var(--maxw) + var(--rail));
  margin-inline:auto; padding-inline:var(--gut);
  display:grid; gap:var(--sp-8);
}
@media (min-width:60rem){
  .audit{ grid-template-columns:1.1fr .9fr; padding-left:calc(var(--gut) + var(--rail)); align-items:start; }
  /* the list's first rule must sit on the same baseline as the label,
     not float above it — its top border was the odd one out */
  .audit__list{ padding-top:calc(var(--t-mono) * 0.55); }
}

.audit__h{
  font-family:var(--display); font-size:var(--t-h2);
  font-weight:600; font-stretch:82%;
  line-height:.94; letter-spacing:-.03em;
  max-width:14ch; margin-bottom:var(--sp-5);
}
.audit__p{ max-width:44ch; color:var(--ink-72); font-size:var(--t-lede); line-height:1.5; margin-bottom:var(--sp-5); }

.audit__badges{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-6); }
.audit__badges li{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase;
  padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--ink-22); color:var(--ink-72);
}

/* the plate the copy is describing, on its own paper */
.audit__fig{
  border:1px solid var(--ink-22);
  overflow:hidden;
  margin-bottom:var(--sp-5);
}
.audit__fig img{ width:100%; height:auto; display:block; }

.audit__list{ display:grid; align-content:start; }
.audit__list li{
  display:flex; align-items:baseline; gap:var(--sp-3);
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--ink-14);
  font-size:1.02rem;
}
.audit__list li:first-child{ border-top:1px solid var(--ink-14); }
/* the accent cannot carry text on chart paper — 2.4:1. Ink instead. */
.audit__list span{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; color:var(--ink-68);
}

/* ── process ───────────────────────────────────────────── */

.steps{ display:grid; gap:var(--sp-6); }
@media (min-width:56rem){ .steps{ grid-template-columns:repeat(3,1fr); } }

.step{ padding-top:var(--sp-4); border-top:1px solid var(--chart-16); }

/* three survey stages: raw readings, readings joined, finished plate */
.step__fig{
  margin-bottom:var(--sp-4);
  border:1px solid var(--chart-08);
  background:var(--abyss);
  overflow:hidden;
}
.step__fig img{ width:100%; height:auto; }

.step__n{
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--buoy); margin-bottom:var(--sp-4);
}
.step__h{
  font-family:var(--display); font-size:1.35rem;
  font-weight:600; font-stretch:86%; letter-spacing:-.015em;
  margin-bottom:var(--sp-2);
}
.step__p{ color:var(--chart-70); font-size:1rem; line-height:1.55; max-width:34ch; }

/* ── contact ───────────────────────────────────────────── */

.contact__h{
  font-family:var(--display); font-size:var(--t-h1);
  font-weight:600; font-stretch:80%;
  line-height:.90; letter-spacing:-.035em;
  margin-bottom:var(--sp-5);
}
.contact__p{ max-width:48ch; font-size:var(--t-lede); line-height:1.5; color:var(--chart-70); margin-bottom:var(--sp-5); }

.contact__status{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-bottom:var(--sp-8);
  padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--chart-16);
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase; color:var(--chart-70);
}
.contact__status-dot{
  width:6px; height:6px; border-radius:50%; background:var(--buoy);
  animation:ping 2.8s var(--ease) infinite;
}

.contact__grid{ display:grid; gap:var(--sp-5) var(--sp-4); grid-template-columns:repeat(2,1fr); }
@media (min-width:56rem){ .contact__grid{ grid-template-columns:repeat(4,1fr); } }

.contact__item{ padding-top:var(--sp-3); border-top:1px solid var(--chart-16); }
.contact__k{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--chart-mute); margin-bottom:var(--sp-2);
}
.contact__v{
  display:block; font-size:1rem; text-decoration:none; color:var(--chart);
  border-bottom:1px solid transparent; width:fit-content;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.contact__v:hover{ color:var(--buoy); border-bottom-color:var(--buoy); }
.contact__v + .contact__v{ margin-top:var(--sp-1); }

.contact__copy{
  margin-top:var(--sp-3);
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--chart-mute); background:transparent;
  border:1px solid var(--chart-08); padding:var(--sp-1) var(--sp-3);
  cursor:pointer; transition:color .25s var(--ease), border-color .25s var(--ease);
}
.contact__copy:hover{ color:var(--chart); border-color:var(--chart-16); }
.contact__copy.is-copied{ color:var(--buoy); border-color:var(--buoy); }

/* ── footer ────────────────────────────────────────────── */

.foot{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between;
  max-width:calc(var(--maxw) + var(--rail));
  margin-inline:auto;
  padding:var(--sp-5) var(--gut) var(--sp-6);
  border-top:1px solid var(--chart-08);
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--chart-mute);
}
@media (min-width:60rem){ .foot{ padding-left:calc(var(--gut) + var(--rail)); } }

/* ── motion opt-out ────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .plate__fig img{ height:100%; }
  .tl__line{ transform:scaleY(1); }
  .rail__mark{ display:none; }
}