/* ===========================================================
   JB Substation Design
   Brand Design System Rev C — five locked colours, Century
   Gothic at Regular and Bold only.

   The page is Paper. Near-black does the reading, Silver draws
   the structure, and there is exactly one Graphite block — the
   footer. Teal is a mark, never a ground and never text on Paper.
   That lands the palette on the proportions the system asks for:
   Paper + Near-black 70–80%, Graphite 15–20%, Silver 5–8%,
   Teal under 2%.

   The display sizes extend the document scale for screen. The
   system says hierarchy is carried by size, tracking and case —
   this leans on all three, and adds no weight beyond 400/700.
   =========================================================== */

/* ---------------------------------------------------------
   Jost, self-hosted. One variable file per subset covers both
   Regular and Bold, so the browser instances the real 700
   rather than synthesising one — which the brand system
   explicitly forbids. See assets/fonts/NOTICE.txt for the
   licence.
   --------------------------------------------------------- */
@font-face{
  font-family:"Jost";
  src:url("fonts/jost-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";
  src:url("fonts/jost-latinext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#F4F5F4;
  --ink:#0B0D0E;
  --graphite:#14181A;
  --silver:#C7CDCC;
  --teal:#077C80;

  --font:"Jost","Century Gothic","Century Gothic Pro",Questrial,"Avenir Next",sans-serif;

  --gutter:clamp(22px,5vw,80px);
  --max:1560px;
  --hair:1px solid var(--silver);
  --r:14px;                      /* panels, frames, fields */
  --r-pill:999px;                /* buttons */

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.72,0,.24,1);

  --gap-section:clamp(96px,13vw,208px);
  --head:92px;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--head) + 32px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.55;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;      /* never fake a weight the family lacks */
}

img,svg,video{max-width:100%;display:block}
::selection{background:var(--teal);color:var(--paper)}

/* ---------------------------------------------------------
   Type
   --------------------------------------------------------- */

h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance}

/* the hero line — the biggest thing on the site */
.d1{font-size:clamp(42px,8.6vw,112px);line-height:.94;letter-spacing:-.035em}
/* section openers */
.d2{font-size:clamp(34px,6.2vw,80px);line-height:1;letter-spacing:-.03em}
/* sub-openers and the statement line */
.d3{font-size:clamp(26px,3.6vw,48px);line-height:1.06;letter-spacing:-.022em}
h3,.d4{font-size:clamp(19px,1.6vw,24px);line-height:1.18;letter-spacing:-.012em}

p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

.lead{
  font-size:clamp(18px,1.8vw,26px);line-height:1.34;letter-spacing:-.015em;
  max-width:34ch;
}
.lead--wide{max-width:52ch}

.label{
  display:flex;align-items:center;gap:12px;
  font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);margin:0 0 22px;
}
.label::before{
  content:"";width:22px;height:2px;background:var(--teal);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .05s;
}
.is-in .label::before,.label.is-in::before{transform:scaleX(1)}

.data{
  font-size:13px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:var(--graphite);opacity:.72;
}
.small{font-size:14px;line-height:1.5}

a{color:inherit}

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap--text{max-width:1080px}

section{position:relative}
.sec{padding:var(--gap-section) 0}
.sec--top{padding-top:0}
.sec--tight{padding:clamp(64px,8vw,128px) 0}

main,.masthead,.siteftr{position:relative;z-index:1}

.cols{display:grid;gap:clamp(28px,3vw,56px)}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* text sits in the right-hand two thirds, the label in the left third */
.split{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}

.rule{height:1px;background:var(--silver);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease)}
.rule.is-in{transform:scaleX(1)}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.skip{position:absolute;left:0;top:0;z-index:200;clip-path:inset(50%);
  background:var(--teal);color:var(--paper);padding:12px 18px;white-space:nowrap;
  border-radius:0 0 var(--r) 0}
.skip:focus{clip-path:none}

.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(244,245,244,0);border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             backdrop-filter .4s var(--ease),transform .5s var(--ease);
}
.masthead.is-stuck{
  background:rgba(244,245,244,.82);border-bottom-color:var(--silver);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
.masthead__in{display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:var(--head)}

.brand{display:flex;align-items:center;text-decoration:none;padding:6px 0}
.brand .mark{height:52px;width:auto;aspect-ratio:660/222;transition:opacity .3s var(--ease)}
.brand:hover .mark{opacity:.65}

.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,38px)}
.nav a{
  position:relative;text-decoration:none;color:var(--ink);
  font-size:14px;letter-spacing:-.01em;padding:6px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]::after{background:var(--teal);height:2px;transform:scaleX(1)}

.navtoggle{
  display:none;background:none;border:0;padding:10px 0 10px 10px;cursor:pointer;
  font-family:var(--font);font-size:14px;color:var(--ink);
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.btn{
  --btn-fg:var(--paper);--btn-bg:var(--teal);
  position:relative;display:inline-flex;align-items:center;gap:12px;isolation:isolate;
  padding:18px 32px;border:1px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);
  border-radius:var(--r-pill);
  font-family:var(--font);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);border-radius:inherit;
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{border-color:var(--ink)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{color:var(--paper)}
.btn__a{flex:none;width:15px;height:1px;background:currentColor;position:relative;
  transition:transform .45s var(--ease)}
.btn__a::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .btn__a{transform:translateX(5px)}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.tlink{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid var(--silver);
  transition:border-color .4s var(--ease),gap .4s var(--ease);
}
.tlink:hover{border-bottom-color:var(--ink);gap:16px}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--head) + clamp(56px,11vh,132px)) 0 clamp(48px,7vw,96px);
}
/* A slow network field behind the opening screen: nodes joined by
   right-angled runs rather than the usual diagonal constellation, so it
   reads as a network rather than as decoration. Masked away from the
   headline so it can never touch the contrast of the text. */
.hero__field{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;user-select:none;z-index:0;
  /* two masks intersected: clear of the header band, and weighted away
     from the headline column, so the field can never sit behind type */
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0,transparent 96px,#000 168px),
    radial-gradient(105% 100% at 88% 52%,#000 0%,#000 34%,transparent 92%);
  mask-image:
    linear-gradient(to bottom,transparent 0,transparent 96px,#000 168px),
    radial-gradient(105% 100% at 88% 52%,#000 0%,#000 34%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.hero > .wrap{position:relative;z-index:1}
@media (max-width:760px){
  .hero__field{
    -webkit-mask-image:
      linear-gradient(to bottom,transparent 0,transparent 76px,#000 150px),
      radial-gradient(130% 60% at 72% 84%,#000 0%,#000 30%,transparent 94%);
    mask-image:
      linear-gradient(to bottom,transparent 0,transparent 76px,#000 150px),
      radial-gradient(130% 60% at 72% 84%,#000 0%,#000 30%,transparent 94%);
  }
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px)}
.hero .d1{max-width:14ch}
.hero__foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);
  align-items:end;margin-top:clamp(24px,3vw,40px);
}
.hero--sub{padding-bottom:clamp(32px,4vw,56px)}
.hero--sub .d1{font-size:clamp(38px,6.6vw,84px);max-width:17ch}

.scrollcue{
  display:inline-flex;align-items:center;gap:14px;margin-top:clamp(48px,7vw,104px);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
}
.scrollcue i{display:block;width:1px;height:40px;background:var(--silver);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(-100%);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{45%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ---------------------------------------------------------
   Media — the drawings
   Every drawing is a Paper sheet with Graphite linework, so it
   belongs to the page rather than sitting on it as a dark slab.
   --------------------------------------------------------- */

figure{margin:0}

/* The frame owns the ratio, so a placeholder and a real photograph
   occupy exactly the same space. Swapping one for the other is a
   single element change — see README. */
.media{
  position:relative;overflow:hidden;background:var(--paper);border:var(--hair);
  aspect-ratio:4/3;border-radius:var(--r);
}
.media--wide16{aspect-ratio:16/9}
.media--sheet{aspect-ratio:1200/760}
.media--tall{aspect-ratio:4/5}
.media--square{aspect-ratio:1/1}

.media__i{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.5s var(--ease);
}
.media.is-in .media__i{transform:scale(1)}

/* the empty slot: quiet, deliberate, and it says what belongs there */
.media__ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  padding:24px;border-radius:inherit;background:
    repeating-linear-gradient(-45deg,transparent 0 11px,rgba(11,13,14,.022) 11px 22px);
}
.media__ph b{
  font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--graphite);opacity:.7;
}
.media__ph span{
  font-size:15px;line-height:1.4;max-width:32ch;color:var(--graphite);opacity:.7;
}
.media__ph::before{
  content:"";position:absolute;inset:14px;border:1px dashed rgba(11,13,14,.16);border-radius:6px;
}
/* a Paper curtain lifts off the sheet as it arrives */
.media::after{
  content:"";position:absolute;inset:0;background:var(--paper);z-index:2;
  transform-origin:bottom;transform:scaleY(1);
  transition:transform 1.2s var(--ease-io);
}
.media.is-in::after{transform:scaleY(0)}

.cap{
  display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;align-items:baseline;
  margin-top:16px;font-size:14px;line-height:1.5;
}
.cap b{font-weight:400}
.cap span:last-child{color:var(--graphite);opacity:.72;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* a wide sheet that breaks the column grid */
.media--wide{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);border-left:0;border-right:0}

/* ---------------------------------------------------------
   Work cards
   --------------------------------------------------------- */

.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,72px) clamp(24px,3vw,48px)}
.work__item{display:flex;flex-direction:column}
.work__item h3{margin:8px 0 10px}
.work__item p{color:var(--graphite);max-width:44ch}
.work__item .data{margin-bottom:0}
.work__item:nth-child(odd){margin-top:0}
.work__item:nth-child(even){margin-top:clamp(0px,6vw,96px)}

/* ---------------------------------------------------------
   Discipline rows — media and copy, alternating
   --------------------------------------------------------- */

.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,80px);align-items:center}
.row + .row{margin-top:var(--gap-section)}
.row--flip > figure{order:2}
.row__copy h2,.row__copy h3{margin-bottom:22px}
.row__copy .lead{margin-bottom:24px}
.row__no{display:block;margin-bottom:18px}

/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:13px 0 13px 26px;border-bottom:var(--hair);font-size:16px}
.ticks li:first-child{border-top:var(--hair)}
.ticks li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:1px;
  background:var(--ink);transition:width .4s var(--ease),background-color .4s var(--ease)}
.ticks li:hover::before{width:20px;background:var(--teal)}

.plain{list-style:none;margin:0;padding:0}
.plain li{padding:9px 0;font-size:16px;overflow-wrap:anywhere}

/* numbered capability points */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.point{padding:34px clamp(18px,2vw,36px) 40px 0;border-top:1px solid var(--ink)}
.point h3{margin:14px 0 10px;font-size:clamp(18px,1.3vw,21px)}
.point p{color:var(--graphite);font-size:16px}
.point .data{opacity:.6}

/* lifecycle stages */
.stages{border-top:var(--hair)}
.stage{display:grid;grid-template-columns:clamp(64px,7vw,120px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);padding:clamp(26px,3vw,44px) 0;border-bottom:var(--hair);
  transition:padding-left .5s var(--ease)}
.stage:hover{padding-left:10px}
.stage h3{margin-bottom:10px}
.stage p{color:var(--graphite);max-width:64ch}

/* ---------------------------------------------------------
   Statement
   --------------------------------------------------------- */

.statement{padding:clamp(112px,16vw,240px) 0}
.statement p{max-width:22ch;margin:0}

/* ---------------------------------------------------------
   Accordion
   --------------------------------------------------------- */

.acc{border-top:var(--hair)}
.acc__i{border-bottom:var(--hair)}
.acc__b{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--font);font-weight:700;font-size:clamp(18px,1.7vw,24px);
  line-height:1.22;letter-spacing:-.015em;padding:30px 60px 30px 0;position:relative;
  transition:color .35s var(--ease),padding-left .45s var(--ease);
}
.acc__b::after,.acc__b::before{content:"";position:absolute;right:10px;top:50%;background:var(--ink);
  transition:transform .45s var(--ease),opacity .45s var(--ease),background-color .35s var(--ease)}
.acc__b::after{width:18px;height:1px;margin-top:-.5px}
.acc__b::before{width:1px;height:18px;margin-top:-9px;margin-right:8.5px}
.acc__b:hover{color:var(--teal);padding-left:8px}
.acc__b:hover::after,.acc__b:hover::before{background:var(--teal)}
.acc__i.is-open .acc__b::before{transform:scaleY(0);opacity:0}
.acc__i.is-open .acc__b{color:var(--teal)}
.acc__i.is-open .acc__b::after{background:var(--teal)}
.acc__p{overflow:hidden;height:0;transition:height .5s var(--ease)}
.acc__p > div{padding:0 0 32px;max-width:68ch;color:var(--graphite)}

/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */

.field{display:block;margin-bottom:30px}
.field > span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);margin-bottom:10px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font);font-size:17px;line-height:1.5;color:var(--ink);
  padding:14px 0;border:0;border-bottom:1px solid var(--silver);background:transparent;border-radius:0;
  transition:border-color .35s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--graphite)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--teal);border-bottom-width:2px;padding-bottom:13px}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 13px) 24px,calc(100% - 7px) 24px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.formnote{margin-top:22px;padding:18px 22px;border-left:2px solid var(--teal);
  background:rgba(7,124,128,.05);font-size:16px;border-radius:0 var(--r) var(--r) 0}
.formnote[hidden]{display:none}
/* honeypot: hidden from people, left in the DOM for bots to fall into */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------
   Policy prose
   --------------------------------------------------------- */

.policy{max-width:72ch}
.policy h2{margin-top:56px;padding-top:30px;border-top:var(--hair);font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.policy h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.policy p{margin-bottom:15px}
.policy ul{margin:0 0 15px;padding-left:22px}
.policy li{margin-bottom:7px}
.policy .updated{color:var(--graphite);font-size:14px;margin-bottom:40px}
.policy a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------
   Footer — the one Graphite block on the site
   --------------------------------------------------------- */

/* sized by its content — a forced full-height footer left a void once the
   wordmark came down to a sensible size */
.siteftr{
  background:var(--graphite);color:var(--paper);
  padding:clamp(64px,8vw,112px) 0 36px;
}
.siteftr a{color:var(--silver);text-decoration:none;transition:color .3s var(--ease)}
.siteftr .label{color:var(--silver)}
.siteftr a:hover{color:var(--paper)}
.siteftr__top{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,72px);align-items:start}
/* the CTA reads as a peer of the link columns beside it, not a billboard */
.siteftr__cta .d2{
  font-size:clamp(24px,2.5vw,34px);line-height:1.12;letter-spacing:-.02em;max-width:15ch;
}
.siteftr__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.siteftr__nav h2{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--silver);opacity:.7;margin:0 0 18px}
.siteftr ul{list-style:none;margin:0;padding:0}
.siteftr li{padding:6px 0;font-size:15px;overflow-wrap:break-word}
.siteftr .btn{--btn-bg:var(--teal);--btn-fg:var(--paper);border-color:var(--teal)}
.siteftr .btn::before{background:var(--paper)}
.siteftr .btn:hover{color:var(--ink);border-color:var(--paper)}
/* the wordmark, set as large as the column allows */
.siteftr__mark{margin-top:clamp(48px,7vw,88px)}
.siteftr__mark img{width:clamp(200px,26vw,360px);height:auto;aspect-ratio:660/222;opacity:.96}
.siteftr__legal{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(199,205,204,.2);
  color:var(--silver);font-size:13px;opacity:.85}

/* ---------------------------------------------------------
   Reveals — all driven by IntersectionObserver on native scroll
   --------------------------------------------------------- */

.rise{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rise.is-in{opacity:1;transform:none}

.stagger > *{opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.stagger.is-in > *{opacity:1;transform:none}
.stagger.is-in > *:nth-child(1){transition-delay:.02s}
.stagger.is-in > *:nth-child(2){transition-delay:.09s}
.stagger.is-in > *:nth-child(3){transition-delay:.16s}
.stagger.is-in > *:nth-child(4){transition-delay:.23s}
.stagger.is-in > *:nth-child(5){transition-delay:.30s}
.stagger.is-in > *:nth-child(6){transition-delay:.37s}

/* per-word headline reveal, built in JS */
/* The clip has to reach below the baseline or descenders — the g in
   "design", the y in "Every" — are shaved off. The padding extends the
   box, the negative margin takes the space back, so line spacing is
   unchanged. The word still starts fully below the clip, so the reveal
   is identical. */
.words .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.26em;margin-bottom:-.26em;
}
.words .w > i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform 1.05s var(--ease)}
.words.is-in .w > i{transform:none}

/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width:1080px){
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr);gap:24px}
  .row,.row--flip{grid-template-columns:minmax(0,1fr)}
  .row--flip > figure{order:0}
  .siteftr__top{grid-template-columns:minmax(0,1fr)}
  .siteftr__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  body{font-size:16px}
  :root{--head:76px}
  .brand .mark{height:40px}
  .navtoggle{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);
    border-bottom:var(--hair);padding:4px var(--gutter) 20px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:16px 0;border-bottom:1px solid rgba(199,205,204,.6);font-size:17px}
  .nav a::after{display:none}
  .masthead.has-open-nav{background:var(--paper);border-bottom-color:var(--silver)}
  .work,.c2,.c3,.points{grid-template-columns:minmax(0,1fr)}
  .work__item:nth-child(even){margin-top:0}
  .hero__foot{grid-template-columns:minmax(0,1fr);gap:28px}
  .stage{grid-template-columns:minmax(0,1fr);gap:8px}
  .stage:hover{padding-left:0}
    .siteftr__nav{grid-template-columns:minmax(0,1fr);gap:24px}
  .media--wide{margin-left:0;margin-right:0;border-left:var(--hair);border-right:var(--hair)}
}

/* ---------------------------------------------------------
   Reduced motion — nothing moves, everything is present
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rise,.stagger > *{opacity:1;transform:none}
  .words .w > i{transform:none}
  .rule,.label::before{transform:scaleX(1)}
  .media__i{transform:none}
  .media::after{display:none}
  .scrollcue i::after{animation:none;transform:none}
}

/* ---------------------------------------------------------
   No JavaScript — every motion state starts hidden, so settle
   all of them. The inline head script adds `.js`.
   --------------------------------------------------------- */

html:not(.js) .rise,
html:not(.js) .stagger > *{opacity:1;transform:none}
html:not(.js) .rule,
html:not(.js) .label::before{transform:scaleX(1)}
html:not(.js) .media__i{transform:none}
html:not(.js) .media::after{display:none}
html:not(.js) .acc__p{height:auto}
html:not(.js) .acc__b{cursor:default}
html:not(.js) .acc__b::after,
html:not(.js) .acc__b::before{display:none}

@media print{
  .masthead,.navtoggle,.scrollcue{display:none !important}
  body{background:#fff}
  .media::after{display:none}
  .media__i{transform:none}
  .rise,.stagger > *{opacity:1;transform:none}
}