/* ============================================================
   LaundrySEO — replicated from the VERVEA reference
   Palette and type taken from the reference's own spec sheet:
   #FFFFFF / #929292 / #5D5D5D / #000000 — Bebas Neue + Inter
   Layout grid measured off the reference at 1950px (design 1440):
   four columns of 35.06% / 14.94% / 28.74% / 21.26% of content
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,dl,dd,figure,form{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}

:root{
  --white:#fff;
  --grey:#929292;
  --grey-d:#5d5d5d;
  --black:#000;
  --near:#0a0a0a;
  --line:rgba(255,255,255,.14);
  /* Secondary ink for whichever panel an element sits in. Each grey clears AA
     on one ground only: --grey is 6.75:1 on black but 3.11:1 on white, and
     --grey-d is the exact reverse (3.19:1 / 6.58:1). Secondary text therefore
     cannot name a fixed grey; it names the role and the panel decides, the
     same way --line is redefined per panel further down. */
  --ink-2:var(--grey);

  --gutter:clamp(20px,2.15vw,42px);
  --cols:35.06% 14.94% 28.74% 21.26%;

  --fs-body:clamp(15px,calc(.35vw + 11.2px),17px);
  --fs-eye:clamp(15px,calc(.19vw + 16.5px),20px);
  --fs-nav:clamp(13px,.97vw,15px);
  --fs-state:clamp(19px,1.81vw,30px);
  --fs-display:clamp(56px,calc(7.4vw + 49.5px),200px);
  --fs-count:clamp(70px,calc(5.11vw + 77px),180px);
  --fs-mark:clamp(23px,2.5vw,38px);

  --lh-display:.786;
  --pad-y:clamp(56px,6.46vw,110px);
  --nav-h:clamp(62px,5.97vw,92px);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-glide:cubic-bezier(.32,.72,0,1);   /* fast start, long settle */
  --dur:.62s;

  --img:grayscale(1) contrast(1.06) brightness(.98);
}

body{
  background:var(--black);
  color:var(--white);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.24;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#000;padding:12px 18px}
.skip:focus{left:0}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- shared type ---------- */
.display{
  font-family:"Bebas Neue",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  font-weight:400;
  font-size:var(--fs-display);
  line-height:var(--lh-display);
  letter-spacing:-.016em;
  text-transform:uppercase;
}
.eyebrow{
  font-size:var(--fs-eye);
  font-weight:700;
  letter-spacing:.005em;
  line-height:1;
  text-transform:uppercase;
}
.body{font-size:var(--fs-body);line-height:1.42;color:inherit}
.statement{
  font-size:var(--fs-state);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.005em;
  text-transform:uppercase;
  text-indent:23.1%;
}
.statement span{color:var(--ink-2)}
.lede{
  font-size:var(--fs-state);
  font-weight:500;
  line-height:1.24;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
.lede span{color:var(--ink-2)}
.ta-r{text-align:right}

.count{
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-weight:400;
  line-height:.72;
  letter-spacing:-.01em;
  display:flex;
  align-items:baseline;
  gap:0;
}
.count{font-size:var(--fs-count)}
.count .sep,.count .off{color:var(--grey-d)}
.ta-r.count{justify-content:flex-end}

.arr{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square}

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:var(--cols);
  padding-inline:var(--gutter);
  align-content:start;
}
.c1{grid-column:1}
.c2{grid-column:2}
.c3{grid-column:3}
.c4{grid-column:4}
.c1-2{grid-column:1/3}
.c2-3{grid-column:2/4}
.c2-4{grid-column:2/5}
.c3-4{grid-column:3/5}
.c1-4{grid-column:1/5}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  border:1px solid currentColor;
  min-height:clamp(46px,2.99vw,58px);
  padding:0 1.4em;
  font-size:var(--fs-eye);
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn>*{position:relative;z-index:1;transition:color .45s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .5s var(--ease);z-index:0;
}
.btn:hover::before{transform:scaleY(1)}
.about .btn:hover>*{color:#fff}
.btn-send:hover>*{color:#000}
.btn .arr{width:.86em;height:.86em}

/* ============================== HEADER ============================== */
.bar{position:fixed;inset:0 0 auto;z-index:90;pointer-events:none}
.bar-in{
  height:var(--nav-h);
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  container-type:inline-size;
}
.bar-in>*{pointer-events:auto}
.mark{
  grid-column:1;
  justify-self:start;
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:var(--fs-mark);
  line-height:1;
  letter-spacing:.045em;
  color:var(--grey);
  transition:transform .75s var(--ease-glide),color .35s var(--ease);
}
.mark:hover{color:var(--white)}

@media (min-width:1081px){
  .mark{transform:translateX(calc(50cqw - 50%))}
  .is-scrolled .mark{transform:translateX(0)}
  /* the in-hero nav occupies the slot the wordmark docks into, so it clears out
     as you leave the hero - the two read as one handover */
  .hero-nav{transition:transform .5s var(--ease),visibility 0s linear .5s}
  .is-scrolled .hero-nav{visibility:hidden;transform:translateX(-12px);pointer-events:none}
}
.mark-dot{margin-inline:.06em;vertical-align:.05em}

.bar-cta{
  grid-column:3;justify-self:end;
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--fs-eye);font-weight:700;letter-spacing:.01em;
  padding-bottom:.5em;
  border-bottom:1px solid rgba(255,255,255,.55);
  transition:border-color .35s var(--ease)
}
.bar-cta .arr{width:.95em;height:.95em}
.bar-cta:hover{border-color:#fff}

.burger{grid-column:3;justify-self:end;display:none;width:44px;height:44px;margin-right:-10px;place-items:center}
.burger-box{position:relative;display:block;width:26px;height:12px}
.burger-l{position:absolute;left:0;width:26px;height:1.5px;background:#fff;transition:transform .5s var(--ease),opacity .3s}
.burger-l.l1{top:0}
.burger-l.l2{top:10.5px}
.menu-open .burger-l.l1{transform:translateY(5.25px) rotate(45deg)}
.menu-open .burger-l.l2{transform:translateY(-5.25px) rotate(-45deg)}

/* scrolled state — dark plate behind the bar */
.bar::after{
  content:"";position:absolute;inset:0;background:var(--black);
  transform:translateY(-100%);transition:transform .5s var(--ease);z-index:-1
}
.is-scrolled .bar::after{opacity:1;transform:none}

/* ============================== MOBILE SHEET ==============================
   An iOS-style bottom sheet: springs up from the floor, dims and blurs the page
   behind it, and can be flicked back down. Motion is transform/opacity only.
   --sheet-ease is the drawer curve iOS uses - a fast start that settles rather
   than eases symmetrically, which is what reads as "buttery" rather than slow. */
:root{
  --sheet-ease:var(--ease-glide);
  --sheet-in:.56s;
  --sheet-out:.42s;
}

.scrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(14px) saturate(.7);
  backdrop-filter:blur(14px) saturate(.7);
  opacity:0;
  transition:opacity var(--sheet-out) var(--sheet-ease);
  will-change:opacity;
}
.menu-open .scrim{opacity:1;transition-duration:var(--sheet-in)}

.sheet{
  position:fixed;z-index:85;
  left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  max-height:min(86svh,760px);
  background:#0b0b0b;
  border-top:1px solid rgba(255,255,255,.15);
  border-radius:26px 26px 0 0;
  box-shadow:0 -32px 70px -20px rgba(0,0,0,.9);
  padding:0 var(--gutter) max(26px,calc(env(safe-area-inset-bottom) + 14px));
  transform:translate3d(0,101%,0);
  transition:transform var(--sheet-out) var(--sheet-ease),visibility 0s linear var(--sheet-out);
  visibility:hidden;
  touch-action:none;
  will-change:transform;
}
.menu-open .sheet{
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:transform var(--sheet-in) var(--sheet-ease),visibility 0s;
}
/* while a finger is on it the sheet tracks the pointer 1:1, no easing */
.sheet.is-dragging{transition:none}

.sheet{outline:none}
.sheet-head{padding:10px 0 16px;flex:none;cursor:grab}
.sheet-head:active{cursor:grabbing}
.sheet-grab{
  display:block;width:42px;height:4px;margin:0 auto;
  border-radius:99px;background:rgba(255,255,255,.28);
  transition:background .3s var(--ease),transform .3s var(--sheet-ease);
}
.sheet.is-dragging .sheet-grab{background:rgba(255,255,255,.5);transform:scaleX(1.14)}
.sheet-eyebrow{
  margin-top:18px;
  font-size:var(--fs-body);font-weight:700;letter-spacing:.16em;
  color:var(--ink-2);text-transform:uppercase;
}

.sheet-list{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:12px;
}
.sheet-list li{border-bottom:1px solid rgba(255,255,255,.07)}
.sheet-list a{
  display:flex;align-items:baseline;gap:14px;
  padding-block:clamp(9px,1.75svh,15px);
  color:var(--grey);
  transition:color .3s var(--ease);
}
.sheet-n{
  flex:none;width:2.4em;
  font-size:calc(var(--fs-body) * .92);font-weight:600;letter-spacing:.05em;
  color:var(--ink-2);transition:color .3s var(--ease);
}
.sheet-t{
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:clamp(25px,6.9vw,34px);
  line-height:1.06;letter-spacing:-.008em;
}
.sheet-list a:hover,.sheet-list a:focus-visible{color:#fff}
.sheet-list a:hover .sheet-n,.sheet-list a:focus-visible .sheet-n{color:var(--white)}

/* staggered reveal - the rows arrive just behind the sheet itself */
.sheet-list li,.sheet-foot>*{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .44s var(--sheet-ease),transform .44s var(--sheet-ease);
}
.menu-open .sheet-list li,.menu-open .sheet-foot>*{opacity:1;transform:none}
.menu-open .sheet-list li:nth-child(1){transition-delay:.10s}
.menu-open .sheet-list li:nth-child(2){transition-delay:.14s}
.menu-open .sheet-list li:nth-child(3){transition-delay:.18s}
.menu-open .sheet-list li:nth-child(4){transition-delay:.22s}
.menu-open .sheet-list li:nth-child(5){transition-delay:.26s}
.menu-open .sheet-list li:nth-child(6){transition-delay:.30s}
.menu-open .sheet-list li:nth-child(7){transition-delay:.34s}
.menu-open .sheet-list li:nth-child(8){transition-delay:.38s}
.menu-open .sheet-list li:nth-child(9){transition-delay:.42s}
.menu-open .sheet-foot>*:nth-child(1){transition-delay:.44s}
.menu-open .sheet-foot>*:nth-child(2){transition-delay:.48s}

.sheet-foot{flex:none;padding-top:clamp(16px,2.4svh,24px)}
.sheet-cta{width:100%;border-radius:0}
.sheet-cta:hover>*{color:#000}
.sheet-contact{
  margin-top:clamp(12px,1.8svh,18px);
  display:flex;flex-wrap:wrap;gap:4px 22px;
  font-size:var(--fs-body);color:var(--ink-2);
}
.sheet-contact a{transition:color .3s var(--ease)}
.sheet-contact a:hover{color:var(--grey)}

/* iOS will rubber-band the page behind a locked scroll without this */
html.menu-open,html.menu-open body{overscroll-behavior:none}

/* ============================== HERO ============================== */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  overflow:hidden;
  background:var(--black);
  display:block;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:grayscale(1) contrast(1.12) brightness(.3)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.3) 32%,rgba(0,0,0,.58) 100%);
}

.hero-nav{
  position:absolute;z-index:4;
  left:var(--gutter);
  top:calc(var(--nav-h) / 2 - 1.15em);
  display:grid;
  gap:clamp(10px,1.75svh,20px);
  line-height:1.2;
  font-size:var(--fs-nav);
  letter-spacing:.055em;
}
.hero-nav a{color:rgba(255,255,255,.62);transition:color .3s var(--ease)}
.hero-nav a:hover,.hero-nav a.is-active{color:#fff}
.hero-nav a.is-active{font-weight:600}

.hero-chip{
  position:absolute;z-index:3;
  left:15.13%;
  top:20.4%;
  width:7.4%;
  aspect-ratio:1;
}
.hero-plate{
  position:absolute;z-index:5;
  left:74.36%;right:var(--gutter);
  top:20.5%;
  aspect-ratio:459/520;
}
.hero-chip img,.hero-plate img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}

.hero-foot{
  position:absolute;z-index:4;
  left:var(--gutter);right:var(--gutter);
  bottom:var(--gutter);
}
.hero-note{
  font-size:var(--fs-body);
  line-height:1.36;
  color:rgba(255,255,255,.86);
  margin-bottom:clamp(14px,2.2svh,26px);
}

/* Ink box of "LAUNDRYSEO" in Bebas Neue is 3.838em wide with a 0.041em left
   side bearing; Bebas has 0.9em ascent / 0.3em descent, so at line-height 1.2
   the baseline sits 0.3em above the box bottom. Both constants are used below
   so the word measures gutter-to-gutter and rests one gutter off the floor. */
.hero-word{
  position:relative;
  margin-bottom:-.3em;
  font-family:"Bebas Neue",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  font-size:calc((100vw - 2 * var(--gutter)) / 3.838);
  line-height:1.2;
  font-weight:400;
  letter-spacing:0;
  overflow:hidden;
}
.hero-word-in{display:block;white-space:nowrap;margin-left:-.041em;color:#fff}

/* Old-Luminous launch entrance. The head adds launch-pending before body parsing, so
   these foreground elements cannot paint in their final position and then disappear. */
html.js.launch-pending .hero-nav,
html.js.launch-pending .hero-chip,
html.js.launch-pending .hero-plate,
html.js.launch-pending .hero-note,
html.js.launch-pending .hero-word-in{
  opacity:0;
  transform:translate3d(0,36px,0)
}

/* Site-wide one-shot reveal, matching the previous Luminous implementation. Only
   section contents move; section backgrounds themselves remain stable. */
html.js.reveal-enabled :is(
  section:not(.hero) .grid > *,
  .work .rail,
  .contact > *,
  .pband,
  .foot-nav,
  .foot-legal > *
){
  opacity:0;
  transform:translate3d(0,36px,0);
  transition:opacity .75s ease,transform .75s ease;
  transition-delay:var(--reveal-delay,0ms)
}
html.js.reveal-enabled :is(
  section:not(.hero) .grid > *,
  .work .rail,
  .contact > *,
  .pband,
  .foot-nav,
  .foot-legal > *
).is-revealed{
  opacity:1;
  transform:none
}
html.js.reveal-failed :is(
  section:not(.hero) .grid > *,
  .work .rail,
  .contact > *,
  .pband,
  .foot-nav,
  .foot-legal > *
){opacity:1!important;transform:none!important;transition:none!important}

/* ============================== ABOUT ============================== */
.about{background:var(--white);color:var(--black);--ink-2:var(--grey-d);padding-block:var(--pad-y)}
.about .grid{row-gap:0}
.about .eyebrow{grid-row:1}
.about .statement{grid-row:1}
.about-p1,.about-p2{grid-row:2;margin-top:clamp(48px,7.99vw,115px)}
.about-p2{grid-column:2/4;max-width:clamp(190px,19.4vw,290px)}
.about .btn{grid-row:2;align-self:start;margin-top:clamp(70px,11.6vw,168px);justify-self:stretch}

/* ============================== WORK ============================== */
.work{background:var(--black);padding-block:clamp(40px,4.03vw,58px) clamp(34px,4vw,58px)}
.work-head{margin-bottom:clamp(48px,5.9vw,101px)}
/* Every slide sits in the same grid cell, so a change is a cross-fade in place
   rather than one slide being swapped out from under the other. */
.rail{
  position:relative;width:calc(100% - var(--gutter));margin-left:var(--gutter);
  display:grid;
}
.rail-slide{
  grid-area:1/1;
  display:grid;
  grid-template-columns:48.85% 27.28% 1fr;
  gap:.82%;
  align-items:stretch;
}
.rail-slide:not(.is-on){
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(0,20px,0) scale(.994);
  transition:opacity .46s var(--ease),transform .46s var(--ease),visibility 0s linear .46s;
}
.rail-slide.is-on{
  opacity:1;visibility:visible;z-index:1;
  transform:translate3d(0,0,0) scale(1);
  transition:opacity .78s var(--ease) .05s,transform .78s var(--ease-glide) .05s,visibility 0s;
}
.rail-slide figure{overflow:hidden;background:#111}
.rail-slide img{width:100%;height:100%;object-fit:cover;filter:var(--img);transition:transform 1.1s var(--ease)}
.rail-slide figure:hover img{transform:scale(1.035)}
.rail-a{aspect-ratio:932/790}
.rail-b{aspect-ratio:520/373;align-self:end}
.rail-c{align-self:stretch}

.work-foot{margin-top:clamp(20px,2.5vw,36px);row-gap:0;align-items:start}
.work-foot .cat{grid-row:1;font-size:var(--fs-body);color:rgba(255,255,255,.9)}
.work-foot .steps{grid-row:1;grid-column:3;margin-top:.15em}
.work-foot .count{grid-row:1;align-self:start;margin-top:calc(var(--fs-count) * .06)}
.work-foot .rail-cap{
  grid-row:1;grid-column:1/5;align-self:end;margin-left:21.4%;
  font-size:var(--fs-eye);font-weight:500;line-height:1.28;letter-spacing:.01em;text-transform:uppercase;
}

/* .count is a later grid sibling whose box overlaps this row, and the reveal
   system gives it a transform, which promotes it into the positioned paint layer.
   Without this it paints over the arrows and eats roughly half of each hit box. */
.steps{display:flex;gap:clamp(14px,1.6vw,26px);align-items:center;position:relative;z-index:2}
.step{
  width:clamp(34px,3.2vw,46px);height:22px;
  display:grid;place-items:center;color:var(--grey);
  position:relative;
  transition:color .35s var(--ease);
}
/* The arrow stays hairline-thin, but the thing you actually have to hit is 44px
   square (WCAG 2.5.5). The overlay is layout-neutral, so nothing shifts. */
.step::after{
  content:'';position:absolute;top:50%;left:50%;
  width:max(100%,44px);height:44px;
  transform:translate(-50%,-50%);
}
.step svg{
  width:100%;height:12px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:square;
  transition:transform .55s var(--ease-glide);
}
.step:hover,.step:focus-visible{color:#fff}
.step-prev:hover svg,.step-prev:focus-visible svg{transform:translate3d(-5px,0,0)}
.step-next:hover svg,.step-next:focus-visible svg{transform:translate3d(5px,0,0)}
.step:active svg{transform:scale(.93);transition-duration:.12s}
.step[disabled]{opacity:.32;cursor:default}
.step[disabled]::after{display:none}

/* Copy tied to a slide fades with it instead of hard-cutting mid-transition.
   The reveal system already owns opacity/transform on these elements, so this
   rides the independent filter/translate properties and composes with it. */
.work-foot .cat,.work-foot .rail-cap,.count{
  transition:filter .2s var(--ease),translate .2s var(--ease);
}
.is-swapping{filter:opacity(0);translate:0 7px}

/* ============================== APPROACH ============================== */
.approach{background:var(--black);padding-block:clamp(44px,5.2vw,75px) clamp(44px,4.5vw,61px);position:relative}
.approach .grid{row-gap:0}
.approach .eyebrow{grid-row:1}
.appr-h{grid-row:2;margin-top:clamp(46px,6.5vw,90px);color:#fff}
.appr-fig{grid-row:2;margin-top:clamp(46px,6.5vw,90px);aspect-ratio:815/706;overflow:hidden}
.appr-fig img{width:100%;height:100%;object-fit:cover;filter:var(--img)}
.appr-p{grid-row:3;margin-top:clamp(28px,3.6vw,61px);color:var(--grey);max-width:32ch}
.vrail{
  position:absolute;right:calc(var(--gutter) * .55);top:clamp(150px,20vw,290px);
  writing-mode:vertical-rl;
  font-size:var(--fs-body);letter-spacing:.12em;color:var(--grey-d);text-transform:uppercase
}

/* ============================== PROCESS ============================== */
.process{background:var(--black);padding-block:clamp(56px,6.46vw,110px)}
.process .grid{row-gap:0}
.process .eyebrow{grid-row:1}
.process .statement{grid-row:1;color:#fff}
.process .statement span{color:var(--ink-2)}
.proc-p{grid-row:2;margin-top:clamp(40px,6.2vw,90px);color:var(--grey)}
.proc-fig{grid-row:3;margin-top:clamp(36px,4.4vw,62px);aspect-ratio:815/430;overflow:hidden}
.proc-fig img{width:100%;height:100%;object-fit:cover;filter:var(--img)}

/* ============================== SERVICES ============================== */
.services{background:var(--white);color:var(--black);--ink-2:var(--grey-d);padding-block:clamp(56px,6.8vw,94px) clamp(56px,6.46vw,110px)}
.services .grid{row-gap:0;align-items:start}
.services .eyebrow{grid-row:1}
.svc-p{grid-row:2;margin-top:clamp(36px,5.1vw,73px)}
.svc-fig{grid-row:3;margin-top:clamp(46px,9.5vw,137px);margin-left:auto;width:38.9%;aspect-ratio:255/186;overflow:hidden}
.svc-fig img{width:100%;height:100%;object-fit:cover;filter:var(--img)}
.svc-count{grid-row:4;margin-top:clamp(46px,9vw,130px)}
.svc-count .count{color:var(--black)}
.svc-count .steps{margin-top:clamp(10px,1vw,14px)}
.svc-count .step{color:var(--grey-d)}
.svc-count .step:hover{color:#000}

.svc-stack{grid-row:1/6;position:relative;display:grid}
.svc-slide{grid-area:1/1;display:grid;row-gap:clamp(40px,7.2vw,103px);align-content:start}
.svc-slide:not(.is-on){
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(0,20px,0);
  transition:opacity .46s var(--ease),transform .46s var(--ease),visibility 0s linear .46s;
}
.svc-slide.is-on{
  opacity:1;visibility:visible;z-index:1;
  transform:translate3d(0,0,0);
  transition:opacity .78s var(--ease) .05s,transform .78s var(--ease-glide) .05s,visibility 0s;
}
.svc-slide li h3{color:var(--black)}
.svc-slide li p{margin-top:clamp(14px,2.2vw,32px);max-width:40ch}

/* ============================== RESULTS ============================== */
.results{background:var(--white);color:var(--black);--ink-2:var(--grey-d);padding-block:clamp(48px,6vw,86px) clamp(56px,6.46vw,110px)}
.results .grid{row-gap:0}
.results .eyebrow{grid-row:1}
.results .lede{grid-row:2;margin-top:clamp(28px,3.1vw,45px)}
.res-cta{grid-row:2;grid-column:4;margin-top:clamp(28px,3.1vw,45px);align-self:end}
.res-cta a{border-bottom:1px solid currentColor;transition:opacity .3s}
.res-cta a:hover{opacity:.6}
.res-a{grid-row:3;align-self:end;aspect-ratio:657/656;overflow:hidden}
.res-b{grid-row:3;margin-top:clamp(24px,3vw,43px);aspect-ratio:935/867;overflow:hidden}
.res-a img,.res-b img{width:100%;height:100%;object-fit:cover;filter:var(--img)}

/* ============================== FAQ ============================== */
.faq{background:var(--black);padding-block:clamp(56px,6.5vw,111px);position:relative;overflow:hidden}
.faq .grid{row-gap:0;position:relative}
.faq .eyebrow{grid-row:1}
.stats{grid-row:2;margin-top:clamp(20px,2.1vw,30px)}
.stats li{
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:var(--fs-display);
  line-height:1;
  height:clamp(74px,9.4vw,136px);
  letter-spacing:-.016em;
  color:var(--grey-d);
  transition:color .5s var(--ease);
}
.stats li.is-on{color:#fff}

.qa{grid-row:2;margin-top:clamp(20px,2.1vw,30px);display:grid;grid-template-columns:23% 44.25% 32.75%;grid-template-columns:subgrid}
.qa-row{
  display:grid;
  grid-template-columns:23% 44.25% 32.75%;
  grid-template-columns:subgrid;
  grid-column:1/4;
  min-height:clamp(74px,9.4vw,136px);
  align-content:start;
  padding-top:clamp(16px,2.6vw,38px);
}
.qa .q{
  grid-column:1/3;
  font-size:var(--fs-eye);font-weight:500;line-height:1.32;letter-spacing:.01em;text-transform:uppercase;
  color:var(--grey);transition:color .4s var(--ease);cursor:pointer;
}
.qa-row.is-on .q{color:#fff}
.qa .a{grid-column:3;font-size:var(--fs-body);line-height:1.42;color:var(--grey);transition:color .4s var(--ease)}
.qa-row.is-on .a{color:rgba(255,255,255,.92)}

.faq-fig{
  position:absolute;z-index:2;
  left:59.4%;width:8.5%;
  top:clamp(120px,15.4vw,222px);
  aspect-ratio:166/222;overflow:hidden;
}
.faq-fig img{width:100%;height:100%;object-fit:cover;filter:var(--img)}

/* ============================== CONTACT ============================== */
.contact{background:var(--black);display:grid;grid-template-columns:67.9% 1fr;align-items:stretch}
.ct-panel{position:relative;overflow:hidden;min-height:clamp(460px,52.4vw,755px);display:flex}
.ct-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 50%;filter:grayscale(1) contrast(1.08) brightness(.46)}
.ct-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.22) 58%,rgba(0,0,0,.44) 100%)}
.ct-panel-in{position:relative;z-index:2;padding:clamp(34px,4.3vw,62px) clamp(24px,3vw,44px) clamp(28px,3.5vw,50px) var(--gutter);display:flex;flex-direction:column;width:100%}
.ct-mark{color:var(--white);font-size:clamp(19px,1.7vw,26px);letter-spacing:.05em}
.ct-h{margin-top:clamp(26px,4.3vw,62px)}
.ct-p{margin-top:auto;padding-top:clamp(30px,4vw,58px);max-width:34ch;color:rgba(255,255,255,.86)}
.ct-line{margin-top:clamp(26px,6vw,86px);display:flex;gap:clamp(20px,10vw,144px);font-size:var(--fs-eye);font-weight:700;letter-spacing:.01em}
.ct-line a{transition:color .3s}
.ct-line a:hover{color:var(--grey)}

.ct-form{padding:clamp(30px,3.2vw,46px) var(--gutter) clamp(36px,4vw,58px) clamp(24px,2.8vw,40px);display:flex;flex-direction:column}
.ct-form .eyebrow{color:#fff}
.ct-form form{margin-top:clamp(30px,4.3vw,62px);display:grid;row-gap:clamp(14px,1.5vw,22px)}
.field{position:relative;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.42);padding-bottom:.85em;transition:border-color .35s var(--ease)}
.field:focus-within{border-color:#fff}
.field input,.field select,.field textarea{width:100%;font-size:var(--fs-body);font-weight:600;color:#fff;outline:0}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.92);font-weight:600;opacity:1}
.field select{appearance:none;cursor:pointer}
.field select:invalid{color:rgba(255,255,255,.92)}
.field select option{color:#111;background:#fff}
.field textarea{resize:vertical;min-height:3.5em;line-height:1.42}
.field-message{align-items:flex-start}
.field .arr{width:1.1em;height:1.1em;color:rgba(255,255,255,.8)}
.btn-send{margin-top:clamp(34px,4.9vw,70px);width:100%}
.btn-send:disabled{cursor:wait;opacity:.62}
.form-note{margin-top:12px;font-size:var(--fs-body);color:var(--grey);min-height:1.2em}
.form-note.is-error{color:#ffb4a9}
.form-note.is-success{color:#fff}
.form-alt{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:var(--fs-body);color:var(--grey);
}
.form-alt a{
  color:#fff;border-bottom:1px solid rgba(255,255,255,.45);
  transition:border-color .3s var(--ease)
}
.form-alt a:hover{border-color:#fff}
.form-privacy{font-size:calc(var(--fs-body) * .88);line-height:1.5;color:var(--ink-2)}
.form-privacy a{color:var(--grey);border-bottom:1px solid rgba(255,255,255,.25)}
.form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.ct-social{margin-top:auto;padding-top:clamp(40px,5vw,72px)}
.ct-social ul{margin-top:clamp(14px,1.6vw,23px);display:grid;row-gap:clamp(8px,.9vw,13px);font-size:var(--fs-body);color:var(--grey)}
.ct-social a{transition:color .3s}
.ct-social a:hover{color:#fff}

/* ============================== FOOTER ============================== */
.foot{background:var(--black);border-top:1px solid rgba(255,255,255,.12)}
.foot-legal{
  padding:clamp(20px,2vw,30px) var(--gutter);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:var(--fs-body);color:var(--grey);
}
.foot-credit{display:inline-flex;align-items:center;gap:.35em}
.foot-credit a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s}
.foot-credit a:hover{border-color:#fff}
.foot-credit .arr{width:.85em;height:.85em}

/* ============================================================
   TABLET  <= 1080px
   ============================================================ */
@media (max-width:1080px){
  :root{--cols:1fr 1fr;--fs-state:clamp(19px,2.6vw,26px)}
  .hero-nav{display:none}
  .burger{display:grid}
  .bar-cta{display:none}

  .c1,.c1-2{grid-column:1/3}
  .c2,.c3,.c4,.c2-3,.c2-4,.c3-4,.c1-4{grid-column:1/3}
  .statement{text-indent:0}

  .about .eyebrow{grid-row:1}
  .about .statement{grid-row:2;margin-top:clamp(30px,4vw,48px)}
  .about-p1,.about-p2{grid-row:auto;grid-column:1/3;margin-top:clamp(26px,3.4vw,40px);max-width:none}
  .about .btn{grid-row:auto;grid-column:1/3;margin-top:clamp(34px,4.4vw,52px);justify-self:start;padding-inline:2em}

  .work-head .eyebrow{text-align:right}
  .rail-slide{grid-template-columns:1fr;gap:10px}
  .rail-a{aspect-ratio:16/11}
  .rail-b,.rail-c{display:none}
  .work-foot{grid-template-columns:1fr auto}
  .work-foot .cat{grid-row:1;grid-column:1}
  .work-foot .steps{grid-row:2;grid-column:1;margin-top:16px}
  .work-foot .count{grid-row:1/3;grid-column:2;margin-top:0;align-self:center}
  .work-foot .rail-cap{grid-row:3;grid-column:1/3;margin-left:0;margin-top:26px}

  .appr-h,.appr-fig{grid-row:auto;margin-top:clamp(30px,4vw,48px)}
  .appr-fig{aspect-ratio:16/10}
  .appr-p{grid-row:auto;margin-top:clamp(26px,3.4vw,40px)}
  .vrail{display:none}

  .process .statement{grid-row:2;margin-top:clamp(30px,4vw,48px)}
  .proc-p,.proc-fig{grid-row:auto;margin-top:clamp(26px,3.4vw,44px)}
  .proc-fig{aspect-ratio:16/10}

  .svc-p{grid-row:auto;margin-top:clamp(26px,3.4vw,40px)}
  .svc-fig{grid-row:auto;grid-column:1/3;margin-left:0;margin-top:clamp(30px,4vw,48px);aspect-ratio:16/9;max-width:340px}
  .svc-stack{grid-row:auto;grid-column:1/3;margin-top:clamp(36px,5vw,60px)}
  .svc-count{grid-row:auto;grid-column:1/3;margin-top:clamp(30px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px}
  .svc-count .steps{margin-top:0}

  .res-cta{grid-row:auto;grid-column:1/3;margin-top:clamp(16px,2vw,24px)}
  .res-a,.res-b{grid-row:auto;grid-column:1/3;margin-top:clamp(26px,3.4vw,44px)}
  .res-a{aspect-ratio:4/3}
  .res-b{aspect-ratio:4/3}

  .stats{display:none}
  .qa{grid-row:auto;grid-column:1/3;margin-top:clamp(22px,3vw,38px);grid-template-columns:1fr}
  .qa-row{grid-template-columns:1fr;grid-column:1;min-height:0;border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(20px,3vw,30px);padding-bottom:clamp(20px,3vw,30px);row-gap:12px}
  .qa .q,.qa .a{grid-column:1}
  .qa-row .stat-m{
    font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
    font-size:clamp(40px,10vw,64px);line-height:1;color:var(--grey-d);
  }
  .qa-row.is-on .stat-m{color:#fff}
  .faq-fig{display:none}

  .contact{grid-template-columns:1fr}
  .ct-panel{min-height:clamp(440px,74vw,620px)}
  .ct-form{padding-inline:var(--gutter)}
  .ct-form .eyebrow{text-align:left}
}

/* ============================================================
   PHONE  <= 620px
   ============================================================ */
@media (max-width:620px){
  :root{--cols:1fr}
  .c1,.c2,.c3,.c4,.c1-2,.c2-3,.c2-4,.c3-4,.c1-4{grid-column:1}
  .qa-row{grid-column:1}
  .work-foot{grid-template-columns:1fr auto}
  .work-foot .cat{grid-column:1}
  .work-foot .steps{grid-column:1}
  .work-foot .count{grid-column:2}
  .work-foot .rail-cap{grid-column:1/3}

  /* Reference proportions, translated rather than inherited: the plate keeps the
     reference's 20.5%-61.5% band of the hero, the chip stays on the left as it is on
     desktop, and the two overlap so the composition cascades into the wordmark
     instead of leaving a dead band in the middle. */
  .hero-plate{left:auto;right:var(--gutter);top:20.5%;width:72%}
  .hero-chip{left:var(--gutter);right:auto;top:50.8%;width:32%;z-index:6}
  .hero-note{bottom:auto;top:calc(var(--nav-h) + 3.5svh)}
  .about .btn{width:100%}
  .ct-line{flex-direction:column;gap:8px}
  .foot-legal{flex-direction:column}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .sheet,.scrim{transition-duration:.001ms!important}
  .sheet-list li,.sheet-foot>*{opacity:1!important;transform:none!important;transition-delay:0s!important}
  .rail-slide,.svc-slide{transition-delay:0s!important}
  .rail-slide.is-on,.svc-slide.is-on{transform:none!important}
  .is-swapping{filter:none!important;translate:none!important}
  .step svg{transform:none!important}
  html.js.launch-pending .hero-nav,html.js.launch-pending .hero-chip,html.js.launch-pending .hero-plate,html.js.launch-pending .hero-note,html.js.launch-pending .hero-word-in{opacity:1!important;transform:none!important}
  html.js.reveal-enabled :is(section:not(.hero) .grid > *,.work .rail,.contact > *,.pband,.foot-nav,.foot-legal > *){opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
html.menu-open .bar{position:fixed;top:0;left:0;right:0}

/* mobile-only stat marker inside each FAQ row */
.stat-m{display:none}
@media (max-width:1080px){
  .stat-m{display:block}
}

/* ============================== INTERIOR PAGES ==============================
   Page hero, numbered list and full-bleed band. Same four-track grid, same
   display scale, same black/white alternation as the home page - interior
   pages differ in content, never in system. */
.phero{background:var(--black);padding-block:calc(var(--nav-h) + clamp(38px,5.4vw,82px)) clamp(46px,5.6vw,92px)}
.phero .grid{row-gap:0}
.phero .eyebrow{grid-row:1}
.phero-h{grid-row:2;grid-column:1/5;margin-top:clamp(26px,3.8vw,56px);color:#fff}
.phero-p{grid-row:3;grid-column:2/4;margin-top:clamp(26px,3.4vw,50px);color:var(--grey);max-width:46ch}
.phero-cta{grid-row:4;grid-column:2/4;margin-top:clamp(26px,3vw,42px)}
.phero-cta .btn{display:inline-flex;width:auto;padding-inline:clamp(20px,2.4vw,34px)}
.phero-meta{grid-row:3;grid-column:4;margin-top:clamp(14px,3.4vw,50px);color:var(--grey-d);font-size:var(--fs-body);line-height:1.42}

.pband{position:relative;overflow:hidden;background:var(--black)}
.pband img{width:100%;height:100%;object-fit:cover;filter:var(--img)}
.pband{aspect-ratio:1950/620}

/* numbered rows - process steps, deliverables, anything ordered */
.plist{display:grid;grid-template-columns:subgrid;grid-column:1/5}
.plist-row{
  display:grid;grid-template-columns:subgrid;grid-column:1/5;
  padding-block:clamp(24px,3.2vw,46px);
  border-top:1px solid var(--line);
}
.plist-row:last-child{border-bottom:1px solid var(--line)}
.plist-n{
  grid-column:1;
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:clamp(40px,4.6vw,66px);line-height:.8;letter-spacing:-.01em;
  color:var(--grey-d);
}
.plist-t{grid-column:2/4;font-size:var(--fs-eye);font-weight:500;letter-spacing:.01em;text-transform:uppercase;line-height:1.28}
.plist-d{grid-column:4;font-size:var(--fs-body);line-height:1.42;color:var(--ink-2)}

/* one service or engagement per block: display heading, prose, ordered detail */
.block{padding-block:clamp(52px,6.2vw,104px)}
.block-k{background:var(--black);color:var(--white);--line:rgba(255,255,255,.14)}
.block-w{background:var(--white);color:var(--black);--line:rgba(0,0,0,.14);--ink-2:var(--grey-d)}
.block .grid{row-gap:0}
.block .eyebrow{grid-row:1;grid-column:4;text-align:right}
.block-h{grid-row:2;grid-column:1/4;margin-top:clamp(20px,2.4vw,36px)}
.block-p{grid-row:3;grid-column:1/3;margin-top:clamp(22px,2.8vw,40px);max-width:52ch}
/* the figure spans the heading and prose rows and stretches to fill them, so a
   short paragraph can never leave a void beside a tall image */
.block-fig{grid-row:2/4;grid-column:4;align-self:stretch;margin-top:clamp(22px,2.8vw,40px);
  min-height:clamp(210px,19vw,290px);overflow:hidden}
.block-fig img{width:100%;height:100%;object-fit:cover;filter:var(--img)}
.block .plist{grid-row:4;margin-top:clamp(30px,3.8vw,62px)}
.block-w .plist-n{color:var(--grey)}

.note{
  grid-row:4;grid-column:1/5;margin-top:clamp(26px,3vw,44px);
  padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);
  border:1px solid var(--line);
  font-size:var(--fs-body);line-height:1.42;color:var(--ink-2);max-width:70ch;
}

.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}

.evidence-context{height:auto;aspect-ratio:auto;background:var(--black)}
.evidence-context picture{display:block;aspect-ratio:3/2;overflow:hidden}
.evidence-context img{width:100%;height:100%;object-fit:cover}
.evidence-context figcaption,
.proof-figure figcaption{
  padding:12px var(--gutter);font-size:clamp(11px,.86vw,14px);line-height:1.45;
  color:var(--grey-d);background:var(--white);border-bottom:1px solid var(--line);
}
.proof-figure{
  grid-column:1/5;margin-top:clamp(34px,5vw,76px);border:1px solid var(--line);
  background:#eef2f8;overflow:hidden;
}
.proof-figure picture,.proof-figure img{display:block;width:100%;height:auto}
.proof-figure-dark figcaption{background:#151515;color:#aaa;border-color:rgba(255,255,255,.16)}
.method-grid{
  grid-column:1/5;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;margin-top:clamp(38px,4.5vw,70px);background:var(--line);border:1px solid var(--line);
}
.method-grid article{padding:clamp(20px,2.4vw,36px);background:var(--black)}
.method-grid h3{font-size:var(--fs-eye);letter-spacing:.08em;text-transform:uppercase}
.method-grid p{margin-top:12px;font-size:var(--fs-body);line-height:1.55;color:var(--ink-2)}
.block-w .method-grid article{background:var(--white)}

.is-current{color:#fff!important}
.sheet-list .is-current .sheet-n{color:var(--grey)}

.foot-nav{
  display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.4vw,36px);
  padding:clamp(26px,3vw,44px) var(--gutter) 0;
  font-size:var(--fs-body);color:var(--grey);
}
.foot-nav a{transition:color .3s var(--ease)}
.foot-nav a:hover{color:#fff}

@media (max-width:1080px){
  .phero-h{grid-column:1/3}
  .phero-p,.phero-meta{grid-column:1/3;max-width:none}
  .phero-cta{grid-column:1/3}
  .phero-meta{grid-row:4;margin-top:clamp(18px,2.4vw,28px)}
  .plist,.plist-row{grid-column:1/3}
  .plist-n{grid-column:1}
  .plist-t{grid-column:2}
  .plist-d{grid-column:1/3;margin-top:12px}
  .block .eyebrow{grid-column:1/3;text-align:left}
  .block-h,.block-p,.block-fig{grid-column:1/3}
  .block-fig{grid-row:auto;aspect-ratio:16/10;min-height:0;margin-top:clamp(24px,3vw,36px)}
  .note{grid-column:1/3}
  .proof-figure,.method-grid{grid-column:1/3}
  .method-grid{grid-template-columns:1fr}
  .pband{aspect-ratio:16/9}
  .evidence-context{aspect-ratio:auto}
}
@media (max-width:620px){
  .phero-h,.phero-p,.phero-meta,.phero-cta,.plist,.plist-row,.note{grid-column:1}
  .plist-row{grid-template-columns:1fr}
  .plist-n,.plist-t,.plist-d{grid-column:1}
  .plist-t{margin-top:8px}
  .block .eyebrow,.block-h,.block-p,.block-fig{grid-column:1}
  .proof-figure,.method-grid{grid-column:1}
}

/* ============================== ARTICLES ==============================
   Long-form pages keep the four-track grid: contents in track 1, prose in
   2-3 at a readable measure, publishing meta in track 4. */
.article{background:var(--white);color:var(--black);--line:rgba(0,0,0,.13);--ink-2:var(--grey-d);padding-block:clamp(48px,5.6vw,92px)}
.article .grid{row-gap:0;align-items:start}

.prose{grid-column:2/4;max-width:68ch}
.prose > * + *{margin-top:1.05em}
.prose h2{
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:clamp(27px,3vw,42px);line-height:1.02;letter-spacing:-.008em;
  margin-top:clamp(40px,4.6vw,68px);
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:var(--fs-eye);font-weight:600;letter-spacing:.015em;text-transform:uppercase;
  margin-top:2.1em;
}
.prose p,.prose li{font-size:var(--fs-body);line-height:1.62;color:#141414}
.prose a{border-bottom:1px solid rgba(0,0,0,.32);transition:border-color .3s var(--ease)}
.prose a:hover{border-color:#000}
.prose ul,.prose ol{padding-left:1.2em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.45em}
.prose strong{font-weight:600}
.prose blockquote{
  border-left:2px solid var(--black);padding-left:clamp(14px,1.4vw,20px);
  margin-block:1.6em;font-size:calc(var(--fs-body) * 1.06);
}
.prose .lead{font-size:calc(var(--fs-body) * 1.14);line-height:1.55}

.toc{grid-column:1;font-size:var(--fs-body);line-height:1.5}
.toc p{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:calc(var(--fs-body) * .92);color:var(--grey-d);margin-bottom:14px}
.toc ol{counter-reset:t}
.toc li{border-top:1px solid var(--line)}
.toc a{display:block;padding-block:9px;color:var(--grey-d);transition:color .3s var(--ease)}
.toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);margin-right:10px;color:var(--black);opacity:.35}
.toc a:hover{color:var(--black)}

.abox{grid-column:4;font-size:var(--fs-body);line-height:1.5;color:var(--grey-d)}
.abox dt{font-weight:600;color:var(--black);margin-top:16px}
.abox dt:first-child{margin-top:0}

/* blog index rows */
.post{
  display:grid;grid-template-columns:subgrid;grid-column:1/5;
  padding-block:clamp(26px,3.4vw,50px);border-top:1px solid var(--line);
}
.post:last-of-type{border-bottom:1px solid var(--line)}
.post-n{grid-column:1;font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:clamp(38px,4.2vw,60px);line-height:.8;color:var(--grey)}
.post-b{grid-column:2/4}
.post-t{font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-size:clamp(26px,3vw,42px);line-height:1.02;letter-spacing:-.008em}
.post-t a{transition:opacity .3s var(--ease)}
.post-t a:hover{opacity:.58}
.post-x{margin-top:12px;font-size:var(--fs-body);line-height:1.5;color:var(--grey-d);max-width:56ch}
.post-m{grid-column:4;font-size:var(--fs-body);color:var(--grey-d);line-height:1.5}

@media (max-width:1080px){
  .prose{grid-column:1/3;max-width:none}
  .toc{grid-column:1/3;margin-bottom:clamp(30px,4vw,48px)}
  .abox{grid-column:1/3;margin-top:clamp(32px,4vw,52px)}
  .post,.post-b{grid-column:1/3}
  .post-n{grid-column:1}
  .post-b{grid-column:2}
  .post-m{grid-column:1/3;margin-top:14px}
}
@media (max-width:620px){
  .prose,.toc,.abox,.post,.post-b,.post-m{grid-column:1}
  .post{grid-template-columns:1fr}
  .post-n,.post-b{grid-column:1}
  .post-b{margin-top:10px}
}

/* ============================ CONTACT DOCK ============================
   The Luminous contact dock is a fixed brand asset: it ships its own ink,
   accent, Montserrat labels and 58px trigger, and it must NOT be mapped to
   this site's tokens. The only override here is the one the skill sanctions
   for a host whose overlays sit below the dock's default 190.

   This site's stack is scrim 80, menu sheet 85, header bar 90. At 190 the
   dock would float above all three. 70 puts it above page content (max 6)
   and below every overlay. The dock's own .menu-open rule also fires, since
   app.js sets menu-open on both <html> and <body>.
   ===================================================================== */
:root{ --dock-z:70 }

/* ===================== IN-PROSE LINKS IN BLOCK SECTIONS =====================
   Only `.prose a` (blog and legal pages) ever carried link styling, so links
   written into `.block-p`, `.plist-d` and `.phero-p` inherited the body color
   with no underline and were effectively invisible. That affected the existing
   industries and local-seo pages as well as the location pages.

   Same hairline treatment as `.prose a`, inverted on the black blocks, which
   sit on `--near`/#000 and carry white text.
   ========================================================================= */
.block-w .block-p a,
.block-w .plist-d a{border-bottom:1px solid rgba(0,0,0,.32);transition:border-color .3s var(--ease)}
.block-w .block-p a:hover,
.block-w .plist-d a:hover{border-color:#000}

.block-k .block-p a,
.block-k .plist-d a,
.phero-p a{border-bottom:1px solid rgba(255,255,255,.38);transition:border-color .3s var(--ease)}
.block-k .block-p a:hover,
.block-k .plist-d a:hover,
.phero-p a:hover{border-color:#fff}

/* ============================ .btn HOVER INVERSION =========================
   .btn::before fills the button with `currentColor` on hover, so the label has
   to invert or it disappears into the fill. That was only ever declared for
   `.about .btn` and `.btn-send`, which left both `.phero-cta` buttons hovering
   into themselves: the /contact/ one white-on-white, the 404 one black-on-black.

   Scoped to .phero-cta so the two buttons that already work are untouched.
   ========================================================================= */
.phero .phero-cta .btn:hover>*{color:var(--black)}     /* dark section, white fill */
.block-w .phero-cta .btn:hover>*{color:var(--white)}   /* light section, black fill */

/* `.block .grid` places its children on explicit rows and `.block .plist` owns
   row 4, so a CTA added after the list auto-placed into row 4 alongside it and
   stretched to the list's full height. Give it a row of its own. */
.block .phero-cta{grid-row:5;grid-column:1/-1;margin-top:clamp(30px,3.8vw,62px)}