/* ============================================================
   TOKENS — swap brand values here only
   ============================================================ */
:root{
  --ink:#231F20;             /* from logo — .st0 */
  --ink-deep:#171415;        /* dark bands, slightly deeper than the mark */
  --paper:#F5F6F8;
  --paper-2:#E9ECF1;
  --accent:#3A629D;          /* the logo blue (#4978BC, kept below) deepened so text on it, and blue text on paper, pass AA contrast */
  --accent-logo:#4978BC;     /* from logo — .st1; decorative use only, never under or as small text */
  --accent-lift:#6E97D2;     /* accent on dark backgrounds */
  --muted:#59585C;           /* was #6B6A6E; darkened so light-weight secondary text reads clearly */
  --line:rgba(35,31,32,.14);
  --line-dark:rgba(245,246,248,.18);

  /* one family, four weights: 300 / 400 / 700 / 900 */
  --display:"montserrat","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ui:var(--display);
  --mono:var(--display);   /* labels are the same face, set in 700 with wide tracking */

  --pad:clamp(1.15rem,3.4vw,3.6rem);   /* was 9vw/9.5rem — content now runs close to the edge */   /* deliberately wider than the ~5vw standard */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E");
  --max:1440px;

  /* The XIII, lifted out of the logo, used as the preloader mask. The viewBox is
     padded up top and out to the right so the crossing point of the X (25.8,
     26.72 in mark units) is the exact center of the image — see the preloader
     block at the end of this stylesheet. */
  --mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -63.45 51.6 180.34'%3E%3Cpolygon fill='%23000' points='49.85 1.32 25.64 18.68 0 0 0 15.02 16.26 26.52 0 38.14 0 53.47 26.16 34.46 49.85 51.63 49.85 37.25 35.34 26.93 49.85 16.5 49.85 1.32'/%3E%3Crect fill='%23000' y='61.2' width='49.85' height='13.41'/%3E%3Crect fill='%23000' y='82.34' width='49.85' height='13.41'/%3E%3Crect fill='%23000' y='103.48' width='49.85' height='13.41'/%3E%3C/svg%3E");
  --sec:clamp(4.5rem,9vw,9rem);
}

@media(max-width:700px){:root{--pad:1.4rem}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:clamp(1.02rem,.35vw + .95rem,1.16rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.015em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--ink-deep);color:var(--paper);padding:.75rem 1rem;border-radius:2px}
.skip:focus{top:1rem}

/* type ---------------------------------------------------- */
.d1{font-family:var(--display);font-weight:900;font-size:clamp(2.1rem,5.5vw,4.9rem);line-height:1.0;letter-spacing:-.032em}
.d2{font-family:var(--display);font-weight:900;font-size:clamp(1.75rem,3.7vw,3.05rem);line-height:1.06;letter-spacing:-.028em;text-transform:lowercase}
.d3{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.16;letter-spacing:-.018em}
/* hero turn — the H2 under the H1: smaller, lighter, accent */
.h-turn{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.9vw,2.5rem);line-height:1.12;letter-spacing:-.018em;color:var(--accent);margin-top:.55rem;max-width:24ch}
.lead{font-weight:400;font-size:clamp(1.1rem,.55vw + 1rem,1.34rem);line-height:1.55;max-width:34ch}
.body-w{max-width:60ch}
.mono{font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase}
.muted{color:var(--muted)}
em{font-style:italic}

/* section frame ------------------------------------------- */
section{padding-block:var(--sec);position:relative}
.band-dark{background:var(--ink-deep);color:var(--paper)}
.band-dark .sec-head .num,.band-dark .punch .hl{color:var(--accent-lift)}
.band-dark .stat b{color:var(--paper)}
.band-dark .muted{color:rgba(247,245,241,.72)}
.band-tint{background:var(--paper-2)}
/* SECTION EYEBROWS — markup retained, rendering suppressed.
   Delete the display:none below to bring every eyebrow back at once.
   In WordPress keep the field populated; the label is still useful for
   editors, for the block inspector, and for section anchors. */
/* SECTION EYEBROWS — the device, small.
   A spreadsheet cell with an X in it: the thing the agency is named after,
   repeated at the head of every section so it reads as a system rather than
   an ornament. */
.sec-head{display:flex;gap:.8rem;align-items:center;margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.cell{
  width:1.65rem;height:1.65rem;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:2px;background:transparent;
}
.cell svg{width:.62rem;height:auto;display:block;fill:var(--accent)}
.band-dark .cell{border-color:var(--line-dark)}
.band-dark .cell svg{fill:var(--accent-lift)}
.sec-head .num{color:var(--accent)}
.band-dark .sec-head .num{color:var(--accent-lift)}
.sec-head .lbl{color:var(--muted)}

/* buttons -------------------------------------------------- */
/* BUTTONS — pill, hairline, generous gap, diagonal arrow.
   Sentence case rather than the uppercase used for labels, so an action
   never reads like a section marker. Arrow is a mask, so it inherits color. */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:clamp(1.15rem,2.2vw,2.1rem);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.06rem,1.25vw,1.28rem);letter-spacing:-.012em;
  padding:.9rem 1.65rem .9rem 1.95rem;min-height:61px;
  border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  transition:background .3s cubic-bezier(.2,.7,.3,1),color .3s,border-color .3s;
}
.btn::after{
  content:"";width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{background:transparent;color:var(--ink)}
.btn:hover::after{transform:translate(3px,-3px)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* inverted contexts */
.band-dark .btn,.band-blue .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.band-dark .btn:hover,.band-blue .btn:hover{background:transparent;color:var(--paper)}
.band-dark .btn--ghost,.band-blue .btn--ghost{background:transparent;color:var(--paper);border-color:var(--line-dark)}
.band-dark .btn--ghost:hover,.band-blue .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.4rem}
/* rotating contact label (site.js): fades between doors, sized to the longest */
.cta-rot{display:inline-block;text-align:left;transition:opacity .26s ease}
.cta-rot.is-out{opacity:0}
/* the "see all the work" button under the three featured cases on the homepage */
.mk-more{margin-top:clamp(2.8rem,5.6vw,5.4rem)}
/* newsletter signup: the bot trap people never see, and the reply that replaces the form */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.sign-msg{margin:.7rem 0 0;font-size:.95rem;font-weight:700;line-height:1.4}
.sign-msg:empty{display:none}
.sign-msg.is-err{font-weight:400}
/* writer bios (functions.php c13_author_bio_block): short bio, "Read more", links */
.bio-more summary{display:inline-block;cursor:pointer;list-style:none;font-weight:700;font-size:.95rem;color:var(--accent);margin:.7rem 0 0}
.bio-more summary::-webkit-details-marker{display:none}
.bio-more summary::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.bio-more[open] summary::after{transform:translateY(.1em) rotate(-135deg)}
.bio-more .less,.bio-more[open] .more{display:none}
.bio-more[open] .less{display:inline}
.bio-full p{margin:.7rem 0 0}
.bio-links{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1rem 0 0}
.bio-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);font-weight:700;font-size:.95rem}
.bio-links a:hover{border-bottom-color:var(--accent)}
/* the email sits on its own line, in full, so it can be read and copied even
   where clicking a mailto link does nothing; LinkedIn and Articles are icons */
.bio-links .bio-mail{flex-basis:100%;width:max-content;max-width:100%;overflow-wrap:anywhere;font-weight:400}
.bio-links .bio-ico{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
  border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.bio-links .bio-ico svg{width:1.05rem;height:1.05rem;fill:currentColor;display:block}
.bio-links .bio-ico:hover,.bio-links .bio-ico:focus-visible{border-color:var(--accent);color:var(--accent)}
.au-bio p{margin:.7rem 0 0}
.au-bio .bio-short{margin-top:0}
.slot--initials{font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--muted);letter-spacing:.02em}
/* About page team cards built from profiles ([c13_team]) */
.ab-face--photo{border-style:solid}
.ab-face--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ab-face--initials b{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,4vw,3rem);color:var(--muted);letter-spacing:.02em}
.ab-people .bio-short{margin:0}
.ab-people .bio-more summary{margin-top:.6rem}
.ab-people .bio-links{margin-top:.8rem}
/* people's names keep their own casing, like client names */
.ab .ab-name,.art-author h2,.au-head .pg-h1{text-transform:none}
.hero .btn-row{margin-top:clamp(2.4rem,5vw,3.6rem)}
.arrow-link{
  display:inline-flex;align-self:flex-start;align-items:center;gap:.7rem;text-decoration:none;
  font-family:var(--display);font-weight:400;font-size:clamp(.92rem,.95vw,1rem);
  padding-block:.45rem;border-bottom:1px solid currentColor;
}
.arrow-link span{
  width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.arrow-link:hover span{transform:translate(3px,-3px)}

/* ============================================================
   HEADER + OVERLAY NAV
   Model: dotsandlines (persistent contact + toggle),
   numbering: fplus / Feed
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s;
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr.is-hidden{transform:translateY(-102%)}
.hdr.is-open{background:transparent;backdrop-filter:none;border-color:transparent}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;position:relative;z-index:2}
.brand svg{height:clamp(42px,5vw,54px);width:auto;display:block}
/* logo fills are driven by tokens so the mark adapts to light and dark contexts.
   .wm = the wordmark (ink), .st0 = the 13 mark (accent). */
.brand svg .wm path{fill:var(--ink);transition:fill .3s}
.brand svg .st0{fill:var(--accent);transition:fill .3s}
.hdr.is-open .brand svg .wm path{fill:var(--paper)}
.hdr.is-open .brand svg .st0{fill:var(--accent-lift)}
.ftr-logo{display:block;margin-bottom:1.6rem}
.ftr-logo svg{height:56px;width:auto}
.ftr-logo svg .wm path{fill:var(--paper)}
.ftr-logo svg .st0{fill:var(--accent-lift)}

.hdr-right{display:flex;align-items:center;gap:1.4rem;position:relative;z-index:2}
.hdr-contact{
  text-decoration:none;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.5rem 0;
  /* borders on BOTH sides so the flex centring sees a symmetric box —
     a bottom-only border shifts the glyphs up by half its width */
  border-top:1px solid transparent;border-bottom:1px solid transparent;
  transition:border-color .2s,color .2s;
}
.hdr-contact:hover{border-bottom-color:currentColor}
.hdr.is-open .hdr-contact{color:var(--paper)}

.burger{
  display:flex;align-items:center;gap:.7rem;padding:.6rem 0;min-height:44px;
}
.burger-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.burger-bars{width:26px;height:12px;position:relative;flex:none}
.burger-bars i{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .38s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
.burger-bars i:nth-child(1){top:0}
.burger-bars i:nth-child(2){bottom:0}
.hdr.is-open .burger{color:var(--paper)}
.hdr.is-open .burger-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hdr.is-open .burger-bars i:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

.nav-overlay{
  position:fixed;inset:0;z-index:80;background:var(--ink-deep);color:var(--paper);
  display:grid;grid-template-rows:1fr auto;
  padding:clamp(6rem,14vh,9rem) var(--pad) clamp(2rem,5vh,3.5rem);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s cubic-bezier(.76,0,.24,1);
  visibility:hidden;
}
.nav-overlay.is-open{clip-path:inset(0 0 0 0);visibility:visible}
/* small phones: the menu column can never be wider than the screen */
@media(max-width:640px){.nav-overlay{grid-template-columns:minmax(0,1fr)}.nav-list a{font-size:clamp(1.6rem,9vw,1.9rem)}}

.nav-list{list-style:none;margin:0;padding:0;counter-reset:nav;align-self:center}
.nav-list li{border-top:1px solid var(--line-dark);overflow:hidden}
.nav-list li:last-child{border-bottom:1px solid var(--line-dark)}
.nav-list a{
  display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  text-decoration:none;padding:clamp(.7rem,1.8vh,1.15rem) 0;
  font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,5.4vw,3.9rem);line-height:1.08;letter-spacing:-.03em;
  transform:translateY(105%);opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.25,1),opacity .5s,color .25s;
}
.nav-overlay.is-open .nav-list a{transform:translateY(0);opacity:1}
.nav-list li:nth-child(1) a{transition-delay:.10s}
.nav-list li:nth-child(2) a{transition-delay:.16s}
.nav-list li:nth-child(3) a{transition-delay:.22s}
.nav-list li:nth-child(4) a{transition-delay:.28s}
.nav-list li:nth-child(5) a{transition-delay:.34s}
.nav-list a::before{
  counter-increment:nav;content:"0" counter(nav);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--accent-lift);flex:none;transform:translateY(-.35em);
}
.nav-list a:hover,.nav-list a:focus-visible{color:var(--accent-lift)}

.nav-foot{
  display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;
  align-items:flex-end;border-top:1px solid var(--line-dark);padding-top:1.5rem;
  opacity:0;transition:opacity .4s .40s;
}
.nav-overlay.is-open .nav-foot{opacity:1}
.nav-foot a{text-decoration:none;border-bottom:1px solid transparent}
.nav-foot a:hover{border-bottom-color:currentColor}
.nav-foot .grp{display:flex;flex-direction:column;gap:.35rem}
.nav-sign{margin-top:.45rem;width:min(100%,22rem)}
.nav-social{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;gap:.6rem}
.nav-social a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--line-dark);color:rgba(247,245,241,.7);
  transition:color .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1),background .4s cubic-bezier(.16,1,.3,1);
}
.nav-social svg{width:17px;height:17px;display:block;fill:currentColor}
.nav-social a:hover,.nav-social a:focus-visible{color:var(--ink-deep);background:var(--paper);border-color:var(--paper)}
.nav-social a{border-bottom:1px solid var(--line-dark)}

/* ============================================================
   01 HERO
   ============================================================ */
/* hero fills the viewport, content anchored low */

/* ============================================================
   HERO ART  — "the X"
   Single raster, flattened onto --paper at export time so the
   glitch slices can shift without revealing an alpha edge.
   In WordPress this becomes a media-library asset + <img>, not a
   data URI; the URI only exists so this preview is one portable file.
   ============================================================ */
/* Art geometry lives on :root: the hero sizes itself from it, and the
   statement section below pulls itself up against it. */
:root{--art-top:clamp(3rem,7vh,6.5rem);--art-h:min(114vh,1220px);--art-gap:clamp(1rem,3.5vh,3rem);
  --eyebrow:calc(1.65rem + clamp(1.5rem,3vw,2.4rem)); /* cell + its margin: keeps the pull-up honest when the eyebrow resizes */
  --hero-h:max(100svh, calc(var(--art-top) + var(--art-h) + var(--art-gap)))}
:root{--hx:url(../img/hero-xiii.webp)}
/* Art size lives in variables so the hero can grow to contain it. */
.hero{position:relative;overflow:hidden}
/* Art is absolutely placed and deliberately oversized: it fills the right
   flank and bleeds past the right edge. The hero grows tall enough to hold
   its full height, so all three bars below the X are visible — the graphic
   continues past the fold rather than being cut off at it.
   It sits BEHIND the copy (z-index 1 vs 2), and is a direct child of
   .hero — not of .wrap, which is bottom-aligned and would drag the art
   down with it. */
.hero > .wrap{width:100%;position:relative;z-index:2}
.hero-art{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  top:var(--art-top);
  /* pushed further off-canvas so the header logo gets clean air above it */
  right:clamp(-17rem,-11.5vw,-5rem);
  height:var(--art-h);
  aspect-ratio:1859/1780;
  background:var(--hx) center/contain no-repeat;
  /* No mask. There was a soft radial hole here to keep the artwork off the
     headline back when the type was 223px and the graphic sat further left.
     The headline came down to 142px and the art moved right, so the hole was
     washing out a graphic that no longer needed protecting. The image carries
     its own pale background, so the left edge dissolves on its own. */
}
/* Below ~1400px the copy column stops shrinking but the artwork does not move,
   so the graphic starts running under the headline. Rather than fading the art
   out with a mask — which is what used to happen, and which cost the graphic its
   punch on every screen including the big ones — the art simply gets smaller as
   the viewport narrows, and stays out of the way. 55vw is measured: it is the
   largest the art can be at 1280–1400 and still leave the subhead ~60px of air.
   --hero-h and the statement's pull-up both reference --art-h, so they follow. */
@media(max-width:1400px){:root{--art-h:min(114vh,1220px,55vw)}}

.hero{
  /* tall enough for the whole graphic, never shorter than one screen */
  min-height:var(--hero-h);
  display:block;
  /* the generic section padding-block would otherwise offset .wrap and
     push the copy below the fold — the wrap owns the hero's padding now */
  padding:0;
}
/* .wrap is the first screen: the copy stays bottom-anchored to the fold
   even though the section itself now runs taller than the viewport. */
.hero > .wrap{
  min-height:100svh;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(7rem,16vh,12rem);
  /* The scroll cue used to sit under the buttons and hold the copy this far up
     off the fold. It is gone, but the position it produced was the right one —
     so its exact footprint (its margin-top clamp plus its own ~1.1rem line box)
     is added back here as padding rather than left as a gap in the stack. */
  padding-bottom:calc(clamp(2.25rem,5vh,4rem) + clamp(2.5rem,6vh,4.5rem) + 1.1rem);
}
.hero > .wrap{width:100%}
/* The headline now wraps to two lines on purpose. One line caps out around
   138px before it runs into the art; two lines let it go to ~215px and still
   leave the right flank for the graphic. Measured, not guessed. */
.hero .d1{max-width:2.6em;font-size:clamp(2.55rem,10.05vw,8.9rem);letter-spacing:-.04em;line-height:.92}
.hero .h-turn{font-size:clamp(1.28rem,3.1vw,2.6rem);margin-top:.55rem;max-width:none;text-wrap:balance}
.hero .lead{margin-top:clamp(1.7rem,3vw,2.4rem);max-width:46ch}

/* Phone and tablet: the XIII stays. (After the base hero rules on purpose:
   same specificity, so this has to come later to win.) Side by side stops working below 1000px,
   so the hero stacks instead of hiding the art: the graphic comes first, large
   and bleeding off the right edge the way it does on desktop, and the headline
   sits directly under it. Nothing overlaps the copy, and there is no empty band
   above the headline waiting for a graphic that is not there. */
@media(max-width:1000px){
  :root{--art-top:0px;--art-h:0px}
  .hero{min-height:0}
  .hero-art{
    position:relative;display:block;top:auto;right:auto;
    height:min(52svh,112vw,720px);width:auto;
    margin:clamp(4.4rem,11vw,6rem) -16vw 0 auto;
  }
  .hero > .wrap{
    min-height:0;justify-content:flex-start;
    padding-top:clamp(.25rem,2vw,1.25rem);
    padding-bottom:clamp(.5rem,2vw,1.25rem);
  }
}
/* Tablet: there is room beside the art, so the headline rises into the
   empty space to the left of the lower bars, the same composition as desktop. */
@media(min-width:641px) and (max-width:1000px){
  .hero > .wrap{position:relative;z-index:1;margin-top:calc(min(52svh,112vw,720px) * -.36)}
  .hero .h-turn{max-width:14ch}
}
/* Phone and tablet: blue closing bands carry the section padding once, not
   twice (the band's own padding plus its inner wrap's), and the next and
   previous case links sit right under the deliverables. */
@media(max-width:1000px){
  main .band-blue:not(#close){min-height:0}
  main .band-blue > .wrap{padding-block:0}
  main .band-blue:not(#close) h2{margin-bottom:.9rem}
  main .wk-close{margin-top:var(--sec)}
  main section[data-mod="close-next-prev"]{padding-top:0}
}

/* marquee -------------------------------------------------- */
/* logo wall label ------------------------------------------- */
.marquee-head{padding-block:clamp(2rem,4.1vw,3.4rem) clamp(1.7rem,3.4vw,2.8rem)}

/* THE WALL HEAD IS THE DOOR. The whole block is one link to the portfolio page:
   headline left, the same diagonal arrow the buttons use on the right, and on
   hover the entire thing fills with C13 blue and the type and arrow go to paper.

   The horizontal padding is canceled by an equal negative margin, so the
   headline stays on the page's hard-left alignment while the blue fill still has
   room to breathe past the text on both sides. */
/* The whole head is the door to the portfolio page, but it no longer behaves
   like a button: the eyebrow sits on the headline the way it does in every other
   section, and the affordance is a quiet label and arrow on the right that both
   come up to full strength on hover. */
/* this headline carries more leading above its cap than the .d2s do, so the
   eyebrow needs a slightly tighter margin to sit at the same optical distance */
.marquee-head .sec-head{margin-bottom:clamp(1.05rem,2.2vw,1.75rem)}
.wall-cta{display:block;text-decoration:none;color:var(--ink)}
.wall-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.25rem,4vw,4rem);
}
.wall-go{
  display:flex;align-items:center;flex:none;
  gap:clamp(.7rem,1.5vw,1.3rem);color:var(--muted);
  transition:color .45s cubic-bezier(.16,1,.3,1);
}
.wall-cta:hover .wall-go,.wall-cta:focus-visible .wall-go{color:var(--ink)}
.go-lbl{
  font-family:var(--display);font-weight:400;letter-spacing:-.012em;white-space:nowrap;
  font-size:clamp(.95rem,1.15vw,1.16rem);
}
.wall-cta:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:3px}
.wall-arrow{
  flex:none;width:clamp(52px,7vw,112px);aspect-ratio:1;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.wall-cta:hover .wall-arrow,.wall-cta:focus-visible .wall-arrow{transform:translate(10px,-10px)}
/* the label goes early so the headline keeps its second line intact */
@media (max-width:900px){.go-lbl{display:none}}
@media (max-width:640px){
  .brk{display:none}
  .wall-row{gap:1.1rem}
}
.mh-title{
  /* sized off the LONGER line: "Learn more about the clients we've served" has to
     hold one line next to the See our work block at every width down to 640,
     which caps the type at about 2.85vw. Measured, not guessed. */
  font-size:clamp(1.35rem,2.85vw,2.7rem);letter-spacing:-.035em;line-height:1.06;
  max-width:none;margin:0;color:inherit;
  /* set with capitals in the markup so screen readers say it properly */
}
/* no rules above or below — the wall floats out of the work section */
.marquee{border:0;padding-block:clamp(.8rem,1.7vw,1.4rem) clamp(2.6rem,5.4vw,4.4rem);overflow:hidden;background:var(--paper)}
/* the velocity layer: the whole wall drifts with the direction you are
   scrolling and settles back when you stop. Driven by the ticker. */
.marquee-vel{will-change:transform}
/* 86s not 66s: the marks are ~75% larger now, so the track is much longer —
   the old duration would have read as a noticeably faster scroll. */
/* SEAM. The belt is two identical copies of the logo list translated to -50%.
   With `gap` on the flex container that is half a gap short of a perfect loop,
   because a run of N items has N-1 internal gaps but each copy needs N to reach
   the next copy. The result was a measured 64px jump on every cycle. Putting the
   spacing on each item as margin-right instead gives every copy an identical
   width INCLUDING its trailing space, so -50% lands exactly one copy along and
   the belt never blinks. */
.marquee-track{display:flex;align-items:center;width:max-content;animation:slide 86s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mark{
  font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2.1rem);
  white-space:nowrap;display:flex;align-items:center;gap:.7rem;color:var(--ink);
  text-decoration:none;
  margin-right:clamp(4rem,9vw,8rem);
  /* brightness(0) flattens every brand color to black, opacity(.3) makes it a
     30% tint. One rule greys any logo without touching its file. */
  filter:brightness(0) opacity(.3);
  transition:filter .32s ease,transform .32s ease;
}
.mark svg,.mark img{
  height:calc(clamp(40px,4.5vw,63px) * var(--s,1));width:auto;max-width:clamp(230px,27vw,380px);
  object-fit:contain;display:block;
}
/* hover pulls BACK rather than forward: full color, slightly smaller.
   At this size a lift or a grow reads as eager; a shrink reads as composed. */
.marquee .mark:hover,.marquee .mark:focus-visible{filter:none;transform:scale(.9)}
.marquee .mark:focus-visible{outline:2px solid var(--accent);outline-offset:10px;border-radius:3px}
/* no hover on touch — show the marks in color rather than permanently grey */
@media (hover:none){.mark{filter:none}}


/* ------------------------------------------------------------
   STATEMENT PULL-UP
   The graphic reads as X + III — Roman 13. The statement headline is
   aligned to the middle of the bottom "I" so the two lock together
   instead of sitting in separate stacked blocks.

   Bottom bar spans 86.5%-99.0% of the artwork's height (measured off the
   asset, not eyeballed), so its midpoint is art-top + .9275 * art-h.
   The headline's natural midpoint is hero-bottom + section padding +
   half the h2. The difference between the two is the pull:
       hero height + section padding + half the h2
       - art-top - .9275*art-h
   Every term is a live variable, so the alignment holds as the art
   rescales with the viewport rather than drifting off a fixed offset. */
section[data-block="statement"]{
  position:relative;z-index:2;           /* paint above the art (z-index 1) */
  /* referenced to the real hero height, not to art-top+art-h+gap: above
     ~1070px viewport height the hero is sized by 100svh instead of by
     the art, and a formula built on the art alone drifts. */
  /* aligns the "We are Column 13." line to the bar — it is short and single-
     line, so it is a stable target; the oversized claim then lands below the art. */
  /* --stmt-drop lets the whole block slide down without moving section 02: the
     same value is taken back out of the padding below, so the gap between the
     two sections closes while 02 stays exactly where it is. */
  --stmt-drop:55px;
  margin-top:calc(-1 * (var(--hero-h) + var(--sec) + 19px - var(--stmt-drop) + var(--eyebrow) - var(--art-top) - var(--art-h) * .9275));
}
/* The pull-up only works while the artwork is tall enough that its bottom bar
   sits BELOW the hero copy. Once the art scales down (≤1400px) that bar rises
   above the buttons, and aligning to it would drag the statement on top of the
   hero. Below that width — and below 1000px, where the art is hidden entirely —
   the statement just follows the hero normally. */
@media(max-width:1400px){
  section[data-block="statement"]{margin-top:0}
}

/* ============================================================
   02 STATEMENT
   ============================================================ */

/* --- statement: indented block, Adjective-style rhythm -------
   small name line → oversized claim → the origin → one paragraph.
   The indent (starts ~30% across on desktop) is what makes it read as
   deliberate rather than as a left-aligned wall. */
.stmt-lead{max-width:none}

/* THE THREE COLUMNS — one wide card, three cells across, deliberately much
   wider than it is tall so it reads as a bar under the copy rather than as a
   list beside it. It spans the wrap, so it never breaks the page's container
   width. Dividers are the cells' own left borders, which means the count of
   rules is always cells-minus-one with no extra markup. The bar glyph is the
   III of the mark: one bar, two, three. */
.cols3{
  --gw:clamp(17px,1.35vw,22px);
  list-style:none;margin:clamp(2.4rem,5vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--paper-2);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;
}
.cols3 li{border-left:1px solid var(--line)}
.cols3 li:first-child{border-left:0}
.col-cell{
  display:block;text-decoration:none;color:inherit;
  padding:clamp(1.5rem,2.7vw,2.3rem) clamp(1.35rem,2.4vw,2.1rem);
  transition:background .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1);
}
.col-cell:hover{background:rgba(73,120,188,.055)}
/* the cell you are on stays, the other two step back */
.cols3:hover .col-cell{opacity:.48}
.cols3 .col-cell:hover,.cols3 .col-cell:focus-visible{opacity:1}
.col-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:2px}
/* THE GLYPH. Every cell carries the same three-bar mark; which bars are lit is
   what says where you are in the order. Positioning lights one, Building two,
   Distribution all three, and they stack from the floor up so the row reads like
   a small chart climbing to the right.

   On hover the bars that have NOT happened yet appear as ghosts, so hovering
   "positioning" shows one solid bar with two still to come. That is the section
   headline's "always in this order" claim, made without a word of copy. */
.cols3 .bars{display:block;width:var(--gw);margin-bottom:clamp(.9rem,1.7vw,1.35rem);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .95s cubic-bezier(.16,1,.3,1) var(--bd,0s)}
.rv.in .cols3 .bars{clip-path:inset(0 0 0 0)}
.cols3 li:nth-child(1) .bars{--bd:.06s}
.cols3 li:nth-child(2) .bars{--bd:.18s}
.cols3 li:nth-child(3) .bars{--bd:.30s}
.cols3 .bars svg{width:100%;height:auto;display:block}
.cols3 .bars rect{fill:var(--accent);transition:opacity .55s cubic-bezier(.16,1,.3,1)}
/* not yet reached: hidden at rest */
.cols3 li:nth-child(1) .b1,.cols3 li:nth-child(1) .b2{opacity:0}
.cols3 li:nth-child(2) .b1{opacity:0}
/* on hover they show as what is still to come */
.cols3 li:nth-child(1) .col-cell:hover .b1,
.cols3 li:nth-child(1) .col-cell:hover .b2,
.cols3 li:nth-child(1) .col-cell:focus-visible .b1,
.cols3 li:nth-child(1) .col-cell:focus-visible .b2{opacity:.22}
.cols3 li:nth-child(2) .col-cell:hover .b1,
.cols3 li:nth-child(2) .col-cell:focus-visible .b1{opacity:.22}
.cols3 .n{
  display:block;font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.1rem,1.6vw,1.42rem);letter-spacing:-.028em;line-height:1.05;
}
.cols3 .s{display:block;margin-top:.4rem;font-weight:400;
  font-size:clamp(.95rem,1.05vw,1.06rem);color:var(--muted);line-height:1.35}
@media (max-width:760px){
  .cols3{grid-template-columns:1fr}
  .cols3 li{border-left:0;border-top:1px solid var(--line)}
  .cols3 li:first-child{border-top:0}
}
/* no indent: the art occupies the right flank, and tight gutters are the
   house style now. The rhythm does the work, not the offset. */
/* set to stay clear of the artwork it sits beside — measured, not guessed */
.stmt-big{max-width:12ch;font-size:clamp(1.85rem,4.3vw,3.6rem);line-height:.98;letter-spacing:-.035em}
.stmt-origin{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.05rem,1.75vw,1.45rem);line-height:1.35;letter-spacing:-.012em;
  max-width:44ch;margin:clamp(1.9rem,4.5vh,3rem) 0 0;color:var(--muted);
}
.stmt-origin::before{
  content:"";display:block;width:2.6rem;height:2px;background:var(--accent);
  margin-bottom:1.1rem;
}
.stmt-body{margin-top:clamp(1.6rem,3.5vh,2.4rem)}
.stmt-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,3rem)}
.stmt-body p + p{margin-top:1.1rem}
.punch{
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.25rem);line-height:1.18;letter-spacing:-.02em;
  margin-top:clamp(2rem,4vw,3rem);max-width:22ch;
}
.punch .hl{color:var(--accent)}

/* ============================================================
   03 PARITY (dark)
   ============================================================ */
.parity-body{max-width:56ch}
.parity-body p + p{margin-top:1.15rem}
.standard{
  font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.026em;
  margin-top:clamp(2.2rem,4vw,3.2rem);max-width:20ch;
}
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line-dark);margin-top:clamp(2.8rem,5vw,4.5rem);
  border:1px solid var(--line-dark);
}
.stat{background:var(--ink-deep);padding:clamp(1.4rem,2.4vw,2rem)}
.stat b{display:block;font-family:var(--display);font-weight:900;letter-spacing:-.03em;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;margin-bottom:.5rem}
.stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(247,245,241,.72)}

/* ============================================================
   02 MARKED — the work
   ------------------------------------------------------------
   Alternating rows: image on one side, the verdict and the copy on the
   other, flipping every row. Adjective & Co. tag each project with an
   adjective in brackets; this is the same move made out of our own name —
   a spreadsheet cell with an X in it, then the one-word verdict.

   Every transform here is applied by the ticker at the bottom of the file,
   not by CSS, so the parallax and the hover scale share one animation
   frame and can never fight each other.
   ============================================================ */
/* the gap between the statement and the work was reading as dead space */
section[data-block="statement"]{padding-bottom:calc(var(--sec) * .72 - var(--stmt-drop, 0px))}
#work{padding-top:calc(var(--sec) * .5)}
/* the wall pulls up under the work rather than sitting a full section away */
#work{padding-bottom:calc(var(--sec) * .45)}
/* tightened: the rows were reading as separate sections rather than a set */
.mk-list{display:flex;flex-direction:column;gap:clamp(2.8rem,5.6vw,5.4rem)}
.mk-row{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center;
}
/* explicit columns rather than order/flex tricks: the flip is structural,
   so nothing can auto-place itself into the wrong half */
.mk-row > .mk-mediawrap{grid-column:1;grid-row:1}
.mk-row > .mk-copy {grid-column:2;grid-row:1}
.mk-row.flip > .mk-mediawrap{grid-column:2}
.mk-row.flip > .mk-copy {grid-column:1}

.mk-media{
  position:relative;display:block;overflow:hidden;border-radius:4px;
  aspect-ratio:16/11;background:var(--paper-2);text-decoration:none;
}
/* 114% tall and pulled up 7%: the parallax travel never exposes an edge */
.mk-img{
  position:absolute;inset:-7% 0;
  background:var(--src) center/cover no-repeat;
  transform:translate3d(0,0,0) scale(1.045);
  will-change:transform;backface-visibility:hidden;
}
.mk-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(205deg,rgba(35,31,32,.16),rgba(35,31,32,0) 55%);
  transition:opacity 1s cubic-bezier(.16,1,.3,1);
}
.mk-row:hover .mk-media::after{opacity:.25}

.mk-copy{display:flex;flex-direction:column;align-items:flex-start}
.mk-cell{display:flex;align-items:center;gap:.8rem;margin:0 0 clamp(1rem,2vw,1.5rem)}
.mk-verdict{
  font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(.98rem,1.35vw,1.2rem);letter-spacing:-.015em;color:var(--accent);
}
.mk-client{
  font-family:var(--display);font-weight:900;text-transform:none; /* client names keep their own casing */
  font-size:clamp(1.8rem,3.4vw,2.95rem);line-height:1.02;letter-spacing:-.034em;
  margin:0;max-width:13ch;
}
.mk-note{
  font-weight:400;font-size:clamp(1rem,1.15vw,1.16rem);line-height:1.5;
  color:var(--muted);max-width:33ch;
  margin:clamp(.9rem,1.8vw,1.35rem) 0 clamp(1.7rem,3.2vw,2.5rem);
}
.mk-mediawrap{min-width:0}

/* ============================================================
   04 THE NAME — the origin story, as the payoff
   ============================================================ */
/* the one letter on the page that must not be lowercased */
.d2 .lit{text-transform:none}
.name-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,7vw,7rem);align-items:center}
.name-lead{max-width:none}
.name-def{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;
  margin:clamp(1.6rem,3.4vw,2.4rem) 0 0;padding-top:1.1rem;
  border-top:1px solid var(--line);max-width:46ch;
}
.name-def .w{font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,1.6vw,1.4rem);letter-spacing:-.03em}
.name-def .p{font-family:var(--display);font-weight:300;font-style:italic;color:var(--muted);font-size:.9rem}
.name-def .d{flex:1 1 100%;color:var(--muted);font-weight:300;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.45;margin-top:.2rem}
.name-mark{width:clamp(84px,10vw,158px)}
.name-mark svg{width:100%;height:auto;display:block;fill:var(--ink);opacity:.11}
@media (max-width:820px){.name-grid{grid-template-columns:1fr}.name-mark{display:none}}
.name-big{max-width:16ch}
.name-body{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.5;letter-spacing:-.012em;
  max-width:46ch;margin:clamp(1.4rem,3vw,2.1rem) 0 0;color:var(--muted);
}
.name-body::before{content:"";display:block;width:2.6rem;height:2px;background:var(--accent);margin-bottom:1.1rem}


@media (max-width:820px){
  .mk-row{grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2rem)}
  .mk-row > .mk-mediawrap,.mk-row.flip > .mk-mediawrap{grid-column:1;grid-row:1}
  .mk-row > .mk-copy, .mk-row.flip > .mk-copy {grid-column:1;grid-row:2}
  .mk-client{max-width:none}
}

/* ============================================================
   05 MOVES — accordion (dotsandlines model)
   ============================================================ */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;align-items:center;gap:clamp(.9rem,2.5vw,2rem);
  padding:clamp(1.35rem,2.6vw,2.1rem) 0;text-align:left;
}
.acc-btn .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--accent);flex:none}
.acc-btn .ttl{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.12;letter-spacing:-.022em;flex:1}
.acc-btn .ttl em{color:var(--muted);font-style:normal;display:block;font-weight:400;font-size:.86rem;letter-spacing:0;margin-top:.4rem}
.acc-sign{width:20px;height:20px;position:relative;flex:none}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.acc-sign::before{top:9.25px;left:0;right:0;height:1.5px}
.acc-sign::after{left:9.25px;top:0;bottom:0;width:1.5px}
.acc-btn[aria-expanded="true"] .acc-sign::after{transform:rotate(90deg)}
.acc-panel{overflow:hidden;height:0;transition:height .42s cubic-bezier(.2,.7,.3,1)}
.acc-panel-inner{padding:0 0 clamp(1.5rem,3vw,2.4rem) 0;max-width:62ch}
@media(min-width:800px){.acc-panel-inner{padding-left:calc(.7rem + 3.4rem)}}
.acc-panel-inner p + p{margin-top:1rem}
.engage{margin-top:clamp(2.2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}

/* ============================================================
   MOVES — three scales doing three jobs at once.
   Big words carry the claim, a plain list carries the specifics,
   one image carries the proof. Nothing hidden behind a click.
   ============================================================ */
.moves{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:1040px){.moves{grid-template-columns:1fr minmax(215px,.42fr);gap:clamp(2rem,3.5vw,3.5rem);align-items:start}}

/* anchor targets for the three cells in section 01: clear the fixed header on
   arrival, then flag the row once so it is obvious what you were sent to. */
.moves-list > li{scroll-margin-top:clamp(6rem,13vh,9.5rem)}
.moves-list > li:target{animation:flagMove 2.4s cubic-bezier(.16,1,.3,1) both}
@keyframes flagMove{
  0%{background:rgba(73,120,188,.15)}
  100%{background:transparent}
}
@media (prefers-reduced-motion:reduce){
  .cols3 .bars{clip-path:none}
  .moves-list > li:target{animation:none}
}
.moves-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.9rem,3.2vw,2.8rem)}
.moves-list > li{list-style:none}
@media(min-width:780px){
  .moves-list > li{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.72fr);gap:clamp(1.2rem,2.2vw,2rem);align-items:start}
}
.mv-head{display:flex;gap:clamp(.7rem,1.5vw,1.35rem);align-items:flex-start}
/* the number hangs outside the block and sits raised in the gap, not on the baseline */
.mv-n{
  font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.17em;
  color:var(--accent);flex:none;width:2.4ch;transform:translateY(.55em);
}
.mv-w{
  font-family:var(--display);font-weight:900;line-height:.94;letter-spacing:-.042em;
  font-size:clamp(1.95rem,4.6vw,3.6rem);white-space:nowrap;
}
.mv-dot{display:inline-block;width:.30em;height:.30em;border-radius:50%;background:var(--accent);vertical-align:.06em;margin-left:.1em}
.mv-sub{margin-top:.55rem;color:var(--muted);font-size:clamp(.92rem,1vw,1.02rem)}
@media(min-width:780px){.mv-sub{padding-left:calc(2.4ch + clamp(.7rem,1.5vw,1.35rem))}}

.deliv{list-style:none;margin:0;padding:0;color:var(--muted);line-height:1.72;font-size:clamp(.88rem,.92vw,.96rem)}
@media(min-width:780px){.deliv{padding-top:.45rem}}

.moves-media{margin:0;position:relative}
.moves-media .shot{
  aspect-ratio:4/3;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;
  background:
    linear-gradient(135deg,rgba(73,120,188,.16),transparent 62%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 2px,transparent 2px 9px),
    var(--paper);
}
.moves-media .shot span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--line);padding:.5rem .8rem;
}
.moves-media figcaption{margin-top:.9rem;color:var(--muted);font-size:.86rem;max-width:34ch}
@media(min-width:1040px){.moves-media{position:sticky;top:7rem}}

.moves-tail{
  margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(1.4rem,2.5vw,2rem);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;justify-content:space-between;
}
.moves-tail p{max-width:44ch}

/* ============================================================
   06 TESTIMONIALS
   ============================================================ */
.quotes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.quotes{grid-template-columns:1fr 1fr}}
.quote{background:var(--paper-2);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.2rem}
.quote-body{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.4;letter-spacing:-.012em}
.quote-by{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:auto}
.ph{outline:1px dashed var(--accent);outline-offset:3px}

/* ============================================================
   07 COLUMNS
   ============================================================ */
.col-feature{
  display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:clamp(2rem,4vw,3rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}
@media(min-width:900px){.col-feature{grid-template-columns:1.35fr .85fr}}
.col-feature .kicker{display:flex;gap:.8rem;align-items:center;margin-bottom:1.1rem}
.col-feature .d2{max-width:20ch}
.col-feature-meta{display:flex;flex-direction:column;gap:1rem}
.col-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:560px){.col-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.col-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.col-grid{grid-template-columns:repeat(4,1fr)}}
.col-card{
  background:var(--paper);padding:clamp(1.05rem,1.6vw,1.4rem);
  display:flex;flex-direction:column;gap:.8rem;min-height:170px;text-decoration:none;
  transition:background .28s;
}
.col-card:hover{background:var(--paper-2)}
.col-card .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--accent)}
.col-card h3{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;letter-spacing:-.015em}
.col-card .meta{margin-top:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:.8rem}
.col-tail{margin-top:clamp(1.8rem,3vw,2.6rem);display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center}

/* ============================================================
   08 FACTS + STACK
   ============================================================ */
.facts-wrap{display:grid;gap:clamp(2.5rem,5vw,5rem)}
@media(min-width:960px){.facts-wrap{grid-template-columns:1.1fr .9fr}}
.facts dl{margin:0;border-top:1px solid var(--line-dark)}
.facts .row{display:grid;grid-template-columns:minmax(96px,.34fr) 1fr;gap:1rem;padding-block:.95rem;border-bottom:1px solid var(--line-dark)}
.facts dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,241,.72);padding-top:.28rem}
.facts dd{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.35}
.stack-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.chip{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  border:1px solid var(--line-dark);border-radius:99px;padding:.45rem .8rem;
  color:rgba(247,245,241,.85);
}

/* ============================================================
   09 CLOSE
   ============================================================ */
.close-grid{display:grid;gap:clamp(2rem,4vw,4rem)}
@media(min-width:900px){.close-grid{grid-template-columns:1.05fr .95fr;align-items:end}}
/* The rocket from the headline, flying up and out of the section to the right,
   the way the hero XIII runs off the edge. It sits behind the copy and never
   takes clicks. No scroll motion, on purpose. */
#close{position:relative}
#close > .wrap{position:relative;z-index:1}
.close-rocket{display:block;height:auto;pointer-events:none;user-select:none}
@media(min-width:900px){
  /* right edge lines up with the content edge, so the whole rocket is on screen */
  .close-rocket{position:absolute;z-index:0;right:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));top:clamp(2.5rem,8%,6rem);
    /* exactly as wide as the right-hand column (the one the button sits in), so it can never reach the copy */
    width:min(820px,calc((min(100%,var(--max)) - 2 * var(--pad) - clamp(2rem,4vw,4rem)) * .475))}
}
/* Stacked: the rocket leads, bleeding off the right edge, then the copy. */
@media(max-width:899px){
  #close{flex-direction:column;align-items:stretch;justify-content:center}
  .close-rocket{width:min(92vw,620px);margin:0 -7vw clamp(1rem,3vw,1.75rem) auto}
}

/* ============================================================
   FOOTER — dictionary easter egg (Copula model)
   ============================================================ */
/* ============================================================
   FOOTER
   Brand column carries the page's own promise, repeated: the first thing a
   visitor reads at the top is the last thing they read at the bottom. Then two
   short columns, where to go and how to reach a person. Nothing else.
   ============================================================ */
.ftr{background:var(--ink-deep);color:var(--paper);padding-block:clamp(3.4rem,6.5vw,5.5rem) 1.8rem}
.ftr-top{
  display:grid;gap:clamp(2.4rem,4.5vw,4rem);
  padding-bottom:clamp(2.4rem,4vw,3.4rem);border-bottom:1px solid var(--line-dark);
}
@media(min-width:860px){.ftr-top{grid-template-columns:minmax(0,1.3fr) minmax(0,.62fr) minmax(0,.72fr) minmax(0,.9fr)}}

/* Sized to sit UNDER the logo, not beside it. At display scale the two read as
   two competing marks; at this size the logo stays the loudest thing in the
   column and the line supports it. */
.ftr-line{
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.3;
  font-size:clamp(1rem,1.2vw,1.18rem);margin:0 0 clamp(1.5rem,2.8vw,2rem);
  max-width:24ch;color:rgba(247,245,241,.92);
}
.ftr-line span{display:block;font-weight:300;color:var(--accent-lift)}

.ftr-social{list-style:none;margin:0;padding:0;display:flex;gap:.6rem;flex:none}
.ftr-social a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--line-dark);color:rgba(247,245,241,.7);
  transition:color .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1),
             background .4s cubic-bezier(.16,1,.3,1);
}
.ftr-social svg{width:17px;height:17px;display:block;fill:currentColor}
.ftr-social a:hover,.ftr-social a:focus-visible{
  color:var(--ink-deep);background:var(--paper);border-color:var(--paper);
}

.ftr-col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,241,.72);margin:0 0 1rem}
.ftr-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.ftr-col a{
  text-decoration:none;color:rgba(247,245,241,.86);
  align-self:flex-start;min-height:34px;display:inline-flex;align-items:center;
  transition:color .35s cubic-bezier(.16,1,.3,1);
}
.ftr-col a:hover{color:var(--accent-lift)}
.ftr-mail{font-family:var(--display);font-weight:700;letter-spacing:-.018em;font-size:clamp(1rem,1.25vw,1.16rem)}
.ftr-where{margin:1.1rem 0 0;font-weight:400;line-height:1.5;color:rgba(247,245,241,.72);font-size:.95rem}

.ftr-tel{font-family:var(--display);font-weight:400;letter-spacing:-.01em;font-size:clamp(.98rem,1.15vw,1.08rem)}

/* visually hidden, still read aloud */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* COLUMNS SIGNUP. One field and a go button, because every extra field on a
   footer form costs subscribers and none of them are needed to send an email. */
/* Copy and field were flex/space-between, which threw them to opposite ends of
   a 1342px row and made them read as two unrelated things. They are a grid now:
   the field starts on the same line as the Pages column above it, so it sits
   right beside the sentence that explains it instead of across the footer. */
.ftr-sign{
  display:grid;gap:clamp(1rem,2.2vw,2rem);align-items:center;
  padding-block:clamp(1.8rem,3.4vw,2.6rem);
  border-bottom:1px solid var(--line-dark);
}
@media(min-width:860px){
  .ftr-sign{grid-template-columns:minmax(0,1fr) auto}
}
.sign-copy{max-width:30rem;width:100%}
.sign-copy h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,241,.72);margin:0 0 .8rem}
.sign-form{display:flex;align-items:center;gap:.5rem;width:100%}
.ftr-sign .ftr-social{justify-self:end}
/* stacked on a phone, they belong on the same left edge as everything else */
@media(max-width:859px){.ftr-sign{grid-template-columns:minmax(0,1fr)}.ftr-sign .ftr-social{justify-self:start}}
.sign-input{
  flex:1 1 auto;min-width:0;font:400 1rem/1 var(--display);color:var(--paper);
  background:transparent;border:1px solid var(--line-dark);border-radius:999px;
  padding:.95rem 1.3rem;min-height:52px;
  transition:border-color .4s cubic-bezier(.16,1,.3,1);
}
.sign-input::placeholder{color:rgba(247,245,241,.62)}
.sign-input:focus{outline:0;border-color:var(--accent-lift)}
.sign-go{
  flex:none;width:52px;height:52px;border-radius:999px;border:0;cursor:pointer;
  background:var(--paper);color:var(--ink-deep);display:grid;place-items:center;
  transition:background .4s cubic-bezier(.16,1,.3,1);
}
.sign-go:hover{background:var(--accent-lift)}
.sign-arrow{
  width:1.05rem;height:1.05rem;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.sign-go:hover .sign-arrow{transform:translate(3px,-3px)}

.ftr-bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-top:1.5rem;color:rgba(247,245,241,.72)}
.ftr-end{display:flex;gap:clamp(1.2rem,2.6vw,2.2rem)}
.ftr-bottom a{color:inherit;text-decoration:none}
.ftr-top-link span{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ftr-top-link:hover span{transform:translateY(-3px)}
.ftr-bottom a:hover{color:var(--paper)}

/* ============================================================
   BLUE BAND + DRAW-ON LINE ART
   Mechanism per animated-line-art-spec.md:
   center-line strokes, pathLength="100", one dash rule for every path,
   per-path animation-delay derived from leftmost x (baked into the SVG),
   IntersectionObserver gate so it plays when seen and only once.
   ============================================================ */
.band-blue{
  background:var(--accent);color:#fff;overflow-x:clip;
  min-height:clamp(460px,64vh,640px);display:flex;align-items:center;
}
.band-blue .muted{color:rgba(255,255,255,.9)}
.band-blue > .wrap{width:100%}
/* the eyebrow was built for paper and for ink; on blue the cell outline and the
   X both disappeared into the background */
.band-blue .cell{border-color:rgba(255,255,255,.4)}
.band-blue .cell svg{fill:#fff}
.band-blue .sec-head .num{color:#fff}
.band-blue .sec-head .lbl{color:rgba(255,255,255,.9)}

.rocket-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){
  .rocket-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(.5rem,1.4vw,1.5rem)}
}
/* the two halves interlock slightly instead of sitting in separate boxes */
@media(min-width:1100px){
  .line-art{margin-left:-10%}
}

/* 20% smaller, centerd in its column */
.line-art{
  width:80%;margin-inline:auto;
  transform:translate3d(var(--drift-x,0),var(--drift-y,0),0);
  will-change:transform;
}

.rocket-copy p{font-family:var(--display);letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
.rocket-copy .r1{font-weight:300;font-size:clamp(1.75rem,4vw,3.4rem);max-width:15ch;color:rgba(255,255,255,.9)}
.rocket-copy .r2{font-weight:900;font-size:clamp(2.7rem,6.6vw,5.5rem);margin-top:.45rem;max-width:11ch;letter-spacing:-.042em;line-height:.98}

/* the two lines arrive in sequence with the drawing, not before it */
.draw-seq .r1,.draw-seq .r2{
  opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);
}
.draw-seq.draw .r1{opacity:1;transform:none;transition-delay:.05s}
.draw-seq.draw .r2{opacity:1;transform:none;transition-delay:1.58s}
html:not(.js) .draw-seq .r1,html:not(.js) .draw-seq .r2{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .draw-seq .r1,.draw-seq .r2{opacity:1!important;transform:none!important;transition:none!important}
}

.line-art{width:100%}
.line-art svg{width:100%;height:auto;display:block;overflow:visible}
.line-art .s{
  fill:none;
  stroke:currentColor;               /* inherits the band's text color */
  stroke-width:var(--stroke,1.5);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:100 300;          /* gap must clear dash + offset */
  stroke-dashoffset:101;             /* 101, not 100 — hides the round cap */
  animation-name:none;               /* nothing runs until .draw lands */
  animation-timing-function:cubic-bezier(.65,0,.35,1);
  animation-fill-mode:forwards;      /* hold the finished drawing */
}
/* EXHAUST — short strokes streaming back along the flight axis, forever.
   Held until the drawing has finished, then looped so the rocket never
   stops travelling. Direction is the reverse of nose-cone travel. */
.line-art .exhaust path{
  fill:none;stroke:currentColor;stroke-linecap:round;
  stroke-width:calc(var(--stroke,1.5) * .5);
  opacity:0;animation-name:none;
  animation-duration:2.2s;animation-timing-function:linear;animation-iteration-count:infinite;
}
.line-art.draw .exhaust path{animation-name:exhaust}

/* TWO STATES — the sentence, drawn.
   The loose traced line is the scraps. It holds, then resolves into a
   version built to spec: same rocket, same axis, engineered.
   The second line of copy lands on the same beat. */
.rocket-morph .steel{opacity:0}
.rocket-morph .steel .hair{stroke-width:calc(var(--stroke,1.5) * .5);opacity:.55}
.rocket-morph .steel .s{stroke-width:calc(var(--stroke,1.5) * .8)}
.rocket-morph.draw .steel{animation:steelIn .3s ease 1.5s forwards}
.rocket-morph.draw .sketch{animation:sketchOut .85s cubic-bezier(.4,0,.2,1) 1.62s forwards}
@keyframes steelIn{to{opacity:1}}
@keyframes sketchOut{to{opacity:0}}

/* no JS, or reduced motion: land on the finished steel state */
html:not(.js) .rocket-morph .sketch,
.rocket-morph .steel{transition:none}
html:not(.js) .rocket-morph .steel{opacity:1}
html:not(.js) .rocket-morph .sketch{opacity:0}
@media(prefers-reduced-motion:reduce){
  .rocket-morph .steel{opacity:1!important;animation:none!important}
  .rocket-morph .sketch{opacity:0!important;animation:none!important}
}
@keyframes exhaust{
  0%   {opacity:0;   transform:translate(14px,-11px)}
  14%  {opacity:.6}
  55%  {opacity:.32}
  100% {opacity:0;   transform:translate(-104px,79px)}
}
@media(prefers-reduced-motion:reduce){
  .line-art .exhaust path{animation:none!important;opacity:.22}
}
html:not(.js) .line-art .exhaust path{opacity:.22}
.line-art.draw .s{animation-name:draw}
@keyframes draw{to{stroke-dashoffset:0}}
/* no JS: show the finished drawing rather than nothing */
html:not(.js) .line-art .s{stroke-dashoffset:0;animation:none}
@media(prefers-reduced-motion:reduce){
  .line-art .s{animation:none!important;stroke-dashoffset:0!important}
}

/* reveal --------------------------------------------------- */
/* REVEAL — one ease everywhere (a long expo-out), transform+opacity only.
   Longer and softer than the old .7s: the point is that nothing ever
   appears to *start*, it is already moving when you notice it. */
.rv{opacity:0;transform:translate3d(0,26px,0);
    transition:opacity 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
/* no script, no hiding: every revealed element is visible by default */
html:not(.js) .rv{opacity:1;transform:none}
html:not(.js) .mk-row.rv .mk-media{clip-path:none}
html:not(.js) .mk-row.rv .mk-copy > *{opacity:1;transform:none}
html:not(.js) .cols3 .bars{clip-path:none}

/* work rows reveal as a wipe + a staggered column, not as a block fade */
.mk-row.rv{opacity:1;transform:none}
.mk-row.rv .mk-media{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
.mk-row.rv.in .mk-media{clip-path:inset(0 0 0 0)}
.mk-row.rv .mk-copy > *{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .95s cubic-bezier(.16,1,.3,1) var(--d,0s),transform .95s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.mk-row.rv.in .mk-copy > *{opacity:1;transform:none}
.mk-row .mk-copy > *:nth-child(1){--d:.10s}
.mk-row .mk-copy > *:nth-child(2){--d:.17s}
.mk-row .mk-copy > *:nth-child(3){--d:.24s}
.mk-row .mk-copy > *:nth-child(4){--d:.31s}
.mk-row .mk-copy > *:nth-child(5){--d:.38s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .mk-row.rv .mk-media{clip-path:none}
  .mk-row.rv .mk-copy > *{opacity:1;transform:none}
  .mk-img{transform:none}
  .nav-list a{transform:none;opacity:1}
}
/* ---------- mobile ---------- */
@media (max-width:640px){
  .hero .lead{margin-top:1.35rem;max-width:none;font-size:1.02rem;line-height:1.5}
  .btn-row{margin-top:1.9rem;gap:.6rem}
  .btn{padding:.8rem 1.3rem .8rem 1.5rem;font-size:1.02rem;gap:1.1rem;min-height:54px}
  .sec-head{margin-bottom:1.75rem}
  .stmt-grid{gap:1.25rem}
  .work-tail,.engage,.col-tail{gap:1.4rem}
  .work-tail .btn{width:100%;justify-content:center}
  .acc-btn{gap:.75rem;padding-block:1.15rem}
  .acc-btn .ttl em{font-size:.78rem}
  .quote{padding:1.4rem}
  .col-card{min-height:0}
  .facts .row{grid-template-columns:1fr;gap:.2rem;padding-block:.85rem}
  .stat-row{grid-template-columns:1fr 1fr}
  .stat-row .stat:last-child{grid-column:1 / -1}
  .ftr-bottom{flex-direction:column;gap:.5rem}
  .hdr{padding-block:.7rem}
  .nav-foot{gap:1.1rem}
  .nav-foot .grp{width:100%}
}
@media (max-width:400px){
  .hdr-contact{display:none}
}
/* ============================================================
   COOKIE CONSENT UI
   Banner sits above the header (z 200) but below the preloader (z 300), so it
   never appears over the reveal. Everything uses the site's own button, pill
   and color tokens rather than a second design language.
   ============================================================ */
.btn--sm{
  font-size:clamp(.92rem,1vw,1rem);padding:.62rem 1.15rem .62rem 1.35rem;
  min-height:46px;gap:.9rem;
}
.btn--sm::after{width:.95em;height:.95em}

.ck-bar{
  position:fixed;z-index:200;left:0;right:0;bottom:0;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -10px 40px rgba(20,25,40,.10);
  transform:translateY(110%);transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.ck-bar.is-in{transform:none}
.ck-bar-in{
  max-width:var(--max);margin-inline:auto;padding:clamp(1.1rem,2.2vw,1.6rem) var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);
  justify-content:space-between;
}
.ck-copy{flex:1 1 34ch;min-width:0}
.ck-title{font-family:var(--display);font-weight:900;letter-spacing:-.025em;font-size:1.05rem;margin:0 0 .3rem}
.ck-copy p{margin:0;font-weight:400;font-size:.95rem;line-height:1.45;color:var(--muted);max-width:74ch}
.ck-copy a{color:var(--ink);text-underline-offset:3px}
.ck-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;flex:none}
.ck-link{
  background:0;border:0;cursor:pointer;color:var(--muted);
  font:400 .95rem/1 var(--display);padding:.7rem .4rem;
  border-bottom:1px solid transparent;transition:color .35s,border-color .35s;
}
.ck-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

.ck-scrim{position:fixed;inset:0;z-index:250;background:rgba(20,18,19,.55);opacity:0;transition:opacity .45s ease}
.ck-scrim.is-in{opacity:1}
/* display:grid here would beat the UA's [hidden]{display:none}, which left the
   dialog panel invisible but still in the page, swallowing hover and clicks over
   the middle of every screen. Guard the display on :not([hidden]). */
.ck-modal{position:fixed;inset:0;z-index:260;place-items:center;padding:clamp(.8rem,3vw,2rem);pointer-events:none}
.ck-modal:not([hidden]){display:grid}
.ck-modal[hidden]{display:none}
.ck-modal-in{
  pointer-events:auto;background:var(--paper);color:var(--ink);border-radius:8px;
  width:min(100%,640px);max-height:min(86vh,840px);overflow:auto;
  padding:clamp(1.3rem,2.6vw,2.1rem);
  box-shadow:0 30px 80px rgba(20,25,40,.28);
  transform:translateY(14px) scale(.985);opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s ease;
}
.ck-modal.is-in .ck-modal-in{transform:none;opacity:1}
.ck-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ck-modal-head h2{font-family:var(--display);font-weight:900;letter-spacing:-.03em;font-size:clamp(1.3rem,2.4vw,1.75rem);margin:0}
.ck-x{background:0;border:0;cursor:pointer;font-size:1.8rem;line-height:1;color:var(--muted);padding:.2rem .5rem;border-radius:999px}
.ck-x:hover{color:var(--ink)}
.ck-lede{margin:.6rem 0 1.1rem;font-weight:400;line-height:1.5;color:var(--muted);font-size:.98rem}
.ck-gpc{
  margin:0 0 1.3rem;padding:.85rem 1rem;border-radius:4px;font-size:.92rem;line-height:1.45;
  background:rgba(73,120,188,.09);border:1px solid rgba(73,120,188,.25);color:var(--ink);
}

.ck-cat{padding:.95rem 0;border-top:1px solid var(--line)}
.ck-cat-head{display:flex;align-items:center;gap:.8rem}
.ck-cat-head h3{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin:0;flex:1}
.ck-always{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ck-desc{margin:.45rem 0 0;font-weight:400;line-height:1.45;color:var(--muted);font-size:.95rem;max-width:62ch}
.ck-cookies{margin:.55rem 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--muted);word-break:break-word}
.ck-cookies span{color:var(--ink);letter-spacing:.14em;text-transform:uppercase;margin-right:.5rem}

/* the switch: a real checkbox under a drawn track, so it is keyboard operable
   and announced correctly without any ARIA of our own */
.ck-switch{position:relative;display:inline-block;width:52px;height:30px;flex:none;cursor:pointer}
/* the real input sits ON TOP of the drawn track, invisible, so the pointer
   hits the control itself rather than relying on label association */
.ck-switch input{position:absolute;inset:0;z-index:1;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.ck-track{
  position:absolute;inset:0;border-radius:999px;background:var(--paper-2);
  border:1px solid var(--line);transition:background .35s ease,border-color .35s ease;
}
.ck-track::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;
  background:var(--muted);transition:transform .38s cubic-bezier(.16,1,.3,1),background .35s ease;
}
.ck-switch input:checked + .ck-track{background:var(--accent);border-color:var(--accent)}
.ck-switch input:checked + .ck-track::after{transform:translateX(22px);background:#fff}
.ck-switch input:focus-visible + .ck-track{outline:2px solid var(--accent);outline-offset:3px}
.ck-switch input:disabled{cursor:not-allowed}
.ck-switch input:disabled + .ck-track{opacity:.55}

/* the actions stay reachable no matter how tall the category list grows: a
   consent dialog whose Save button is below the fold is a consent dialog people
   abandon */
.ck-modal-foot{
  position:sticky;bottom:calc(-1 * clamp(1.3rem,2.6vw,2.1rem));
  display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;
  padding:1.1rem 0 clamp(1.3rem,2.6vw,2.1rem);
  border-top:1px solid var(--line);background:var(--paper);
}

@media (max-width:720px){
  .ck-bar-in{gap:1rem}
  .ck-acts{width:100%}
  .ck-acts .btn{flex:1 1 auto;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .ck-bar,.ck-modal-in,.ck-scrim{transition:none}
}
/* ============================================================
   INTERIOR PAGES  (shared by every page that is not the homepage)
   Type below the h1 is the homepage system untouched: .d2 headings, same body
   sizes, same muted grey, same accent rule. Only the page head changes.
     .pg-head        quiet     information pages
     .pg-head--warm  medium    pages that want you to do something
     .pg-head--loud  oversized services, portfolio
   ============================================================ */
.pg{padding-top:clamp(7.5rem,15vh,11rem)}
.pg-head{padding-bottom:clamp(2.2rem,4.5vw,3.6rem);border-bottom:1px solid var(--line)}
.pg-h1{
  font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;letter-spacing:-.04em;
  margin:0;max-width:16ch;
}
.pg-head--warm .pg-h1{font-size:clamp(2.9rem,7.6vw,6.2rem);max-width:12ch}
.pg-head--loud .pg-h1{font-size:clamp(3rem,10vw,9rem);line-height:.92;max-width:11ch}
.pg-lede{
  font-weight:400;font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.5;
  color:var(--muted);max-width:56ch;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;
}

html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   PRELOADER
   ------------------------------------------------------------
   Three layers: the page, a solid ink panel (.fill), and a paper
   panel with the XIII punched out of it (.sheet). At rest you are
   looking through the hole at the ink panel, so it reads as a solid
   black mark on paper. Then the hole scales up while the ink panel
   fades — the same hole that was the mark becomes the window onto
   the hero.

   The mask viewBox is padded above the art so the CROSSING POINT OF
   THE X sits at the exact center of the image; a percentage
   mask-position anchors the zoom on the same fraction of the image,
   which is what makes the reveal open out of the middle of the X.

   WORDPRESS NOTE: this whole block plus #pre plus the inline script
   in <head> is the preloader. It is homepage-only and fires once per
   browser session (sessionStorage), so returning to the homepage from
   an interior page does NOT replay it. Append ?preloader to the URL
   to force a replay while reviewing.
   ============================================================ */
.pre{display:none}
/* vmin tracks the short edge, so one value would leave the mark tiny on a
   phone — the mark holds a similar share of the screen at both ends. */
:root{--mkw:7.45vmin}
@media (max-width:700px){:root{--mkw:12.5vmin}}
html.pre-on,html.pre-on body{overflow:hidden}
.pre-on .pre{display:block;position:fixed;inset:0;z-index:300;pointer-events:none}
.pre .fill{position:fixed;inset:0;background:var(--ink)}
.pre .sheet{
  position:fixed;inset:0;background:var(--paper);
  -webkit-mask-image:var(--mk),linear-gradient(#000,#000);
          mask-image:var(--mk),linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat,no-repeat;  mask-repeat:no-repeat,no-repeat;
  /* 46% not 50%: the padded image is centerd on the crossing, so a flat 50%
     would hang the mark ~40px low. This lifts it to optical center and moves
     the zoom anchor only ~9px, still inside the waist of the X. */
  -webkit-mask-position:center 46%,center;  mask-position:center 46%,center;
  -webkit-mask-size:var(--mkw) auto,cover;  mask-size:var(--mkw) auto,cover;
  -webkit-mask-composite:xor;               mask-composite:exclude;
}
.pre-run .sheet{animation:preOpen 1.5s cubic-bezier(.5,0,.72,.32) .55s forwards}
.pre-run .fill {animation:preFill .38s ease 1.42s forwards}
.pre-run .pre  {animation:preGone .32s ease 1.95s forwards}
@keyframes preOpen{
  /* the mark's own gaps would survive an infinite zoom, so the sheet fades over
     the last sixth — by then the hole is doing all the work anyway */
  0%   {-webkit-mask-size:var(--mkw) auto,cover; mask-size:var(--mkw) auto,cover; opacity:1}
  84%  {opacity:1}
  100% {-webkit-mask-size:600vmax auto,cover; mask-size:600vmax auto,cover; opacity:0}
}
@keyframes preFill{to{opacity:0}}
@keyframes preGone{to{opacity:0;visibility:hidden}}
/* the hero settles out of the reveal rather than sitting there waiting for it */
.pre-on .hero{transform:scale(1.05);transform-origin:50% 45%}
.hero-in .hero{transform:none;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  .pre{display:none!important}
  .pre-on .hero{transform:none}
  html.pre-on,html.pre-on body{overflow:visible}
}

/* ============================================================
   THE MOBILE JOURNEY (phones only)
   ------------------------------------------------------------
   On a phone held upright, the homepage is one big canvas and the screen is a
   window travelling a path across it:
     row 1, sideways: the promise, the XIII, what we do, the three steps
     column, down:    what that is worth, one case per screen
     row 2, sideways: the range with its logo belts, the rocket, the invitation
   then down into the footer. Artwork sits across the joins between screens,
   as it would on one canvas, so the next stop is always half-visible.

   Every rule here is scoped to html.jny, a class the page only ever gets from
   the script below when (max-width:640px) and (orientation:portrait) and no
   reduced-motion preference all hold. Desktop and tablet never receive it, so
   none of this can touch them. html.jny-wait only hides the page for the
   instant between first paint and the journey being assembled.
   ============================================================ */
html.jny-wait main{opacity:0}
html.jny{scroll-snap-type:y proximity}
html.jny body{overflow-x:clip}
html.jny .hdr.is-hidden{transform:none}   /* the nav stays put the whole way */
html.jny [data-block="statement"],html.jny #close{display:none}

/* the pinned stage: native sticky does the pinning, the script only slides the track */
html.jny .jny-h{position:relative}
html.jny .jny-snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
html.jny .jny-stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--paper)}
html.jny .jny-track{display:flex;height:100%;width:max-content;will-change:transform}
html.jny .jny-panel{
  position:relative;flex:none;width:100vw;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  /* content is centred in the part of the screen the browser bars never cover */
  padding:calc(var(--jh,64px) + 1rem) var(--pad) calc(100lvh - 100svh + 1.5rem);
}
html.jny .jny-panel.band-blue{min-height:0;overflow:visible;background:var(--accent);color:#fff}
/* one canvas: backgrounds at the bottom, artwork over them (it may cross into
   the next screen), words on top of everything */
html.jny .jny-panel > *{position:relative;z-index:2}
html.jny .jny-panel > .hero-art,html.jny .jny-panel > .close-rocket{z-index:1}
html.jny .jny-w{display:inline-block}
html.jny .jny-lbl{font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem}

/* 1 · the promise, filling the screen, same ratio as desktop (subhead = .29 x headline) */
html.jny .jny-p-hero .hero{min-height:0;padding:0;background:none}
html.jny .jny-p-hero .hero > .wrap{min-height:0;margin:0;padding:0;max-width:none}
html.jny .jny-p-hero .hero .d1{font-size:25vw;max-width:none;line-height:.9;letter-spacing:-.045em}
html.jny .jny-p-hero .hero .h-turn{font-size:7.25vw;max-width:none;margin-top:1.1rem;line-height:1.12}
html.jny .jny-p-hero .hero .btn-row{margin-top:clamp(1.6rem,6vw,2.4rem)}

/* 2 · the XIII, bigger than its screen: it crosses both joins, so its edge is
   already showing beside the promise and still trailing behind the next headline */
html.jny .jny-p-art{padding-inline:0;align-items:center}
html.jny .jny-p-art{--xw:min(136vw,calc((100svh - var(--jh,64px) - 2rem) * 1.044))}
html.jny .jny-p-art .hero-art{position:relative;inset:auto;top:auto;right:auto;display:block;flex:none;
  width:var(--xw);height:auto;aspect-ratio:1859/1780;align-self:flex-start;
  margin:0 0 0 calc((100vw - var(--xw)) / 2);background-position:center}

/* 3 · the chapter's headline */
html.jny .jny-p-head .stmt-big{font-size:14.5vw;max-width:none;line-height:.94;letter-spacing:-.045em}
html.jny .jny-p-head .sec-head{margin-bottom:1.6rem}

/* 4 · the paragraph, read on its own */
html.jny .jny-p-copy .stmt-origin{font-size:7.1vw;line-height:1.28;max-width:none;margin:0;color:var(--ink)}
html.jny .jny-p-copy .stmt-origin::before{width:3rem;height:3px;margin-bottom:1.6rem}

/* 5 · the three steps on one screen that holds still and builds on itself:
   the bars fill from the floor up while the words change */
html.jny .jny-glyph{position:relative;width:26vw;margin-bottom:2.2rem}
html.jny .jny-glyph .bars{display:block;width:100%;margin:0;clip-path:none}
html.jny .jny-glyph .jny-fill{position:absolute;inset:0}
html.jny .jny-glyph rect{fill:var(--accent);opacity:1}
html.jny .jny-glyph .jny-ghost rect{opacity:.16}
html.jny .jny-glyph .jny-fill rect{transform-box:fill-box;transform-origin:0 50%}
html.jny .jny-layers{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;
  background:none;border:0;border-radius:0;overflow:visible}
html.jny .jny-layers > li{grid-area:1 / 1;border:0}
html.jny .jny-layers .col-cell{padding:0;background:none;opacity:1}
html.jny .jny-layers .bars{display:none}
html.jny .jny-layers .n{font-size:14.5vw;line-height:.95;letter-spacing:-.045em}
html.jny .jny-layers .s{font-size:6.4vw;margin-top:.9rem;line-height:1.25}

/* chapter 2 · down: the headline gets a screen, then each case gets one */
html.jny #work{padding-block:0}
html.jny .jny-vbeat{min-height:72svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--jh,64px) + 1rem) 0 2rem}
html.jny .jny-vbeat h2.d2{font-size:14.5vw;max-width:none!important;margin:0!important;line-height:.94;letter-spacing:-.045em}
html.jny .mk-list{gap:0}
html.jny .mk-row{min-height:100svh;align-content:center;padding:calc(var(--jh,64px) + .5rem) 0 2.5rem}
html.jny .mk-client{font-size:9vw;line-height:1}
/* taller pictures: each case fills its screen (final images need an upright crop for phones) */
html.jny .mk-media{aspect-ratio:auto;height:clamp(38svh,calc(100svh - var(--jh,64px) - 17rem),62svh)}
html.jny .mk-note{font-size:1.12rem}

/* row 2 · the range, with two belts of logos running opposite ways under it */
html.jny .jny-p-range .marquee-head{padding:0}
html.jny .jny-p-range .mh-title{font-size:min(10.5vw,5.4svh);max-width:none;line-height:.96;letter-spacing:-.04em}
html.jny .jny-p-range .mh-title .brk{display:block}
html.jny .jny-p-range .wall-row{flex-direction:column;align-items:flex-start;gap:1.4rem}
html.jny .jny-belts{display:grid;gap:clamp(.8rem,2svh,1.5rem);margin:clamp(1.2rem,3svh,2.4rem) calc(var(--pad) * -1) 0}
html.jny .jny-belts .marquee{padding:0;background:none;overflow:hidden}
html.jny .jny-belts .marquee-vel{transform:none!important}
html.jny .jny-belts .marquee-track{animation-duration:38s}
html.jny .jny-belts .jny-belt2 .marquee-track{animation-direction:reverse;animation-delay:-19s}
html.jny .jny-belts .mark{margin-right:2.8rem}
html.jny .jny-belts .mark svg,html.jny .jny-belts .mark img{height:calc(34px * var(--s,1));max-width:44vw}

/* the rocket rides above its headline and crosses into the invitation */
html.jny .jny-p-closehead .close-rocket{align-self:flex-start;flex:none;
  width:min(106vw,calc((100svh - var(--jh,64px)) * .78));max-width:none;height:auto;
  margin:0 0 1.2rem calc(3vw - var(--pad))}
html.jny .jny-p-closehead h2.d2{font-size:12.5vw;max-width:none!important;line-height:.95;letter-spacing:-.045em;color:#fff}
html.jny .jny-p-closebody .body-w{margin:0!important;max-width:none}
html.jny .jny-p-closebody .body-w p{font-size:clamp(.95rem,2.8svh,1.2rem);line-height:1.5}
html.jny .jny-p-closebody .btn-row{margin-top:clamp(1.2rem,3.5svh,2rem)!important}


/* ---- work.html ---- */
.wk{padding-block:clamp(2.6rem,5vw,4rem) 0}
.wk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem .9rem;
  padding-bottom:clamp(1.4rem,2.6vw,2rem);}
.wk-bar .mono{color:var(--muted);margin-right:.3rem}
.wk-filters{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.wk-f{font-family:var(--display);font-weight:400;font-size:.94rem;letter-spacing:-.01em;
  padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color .28s cubic-bezier(.16,1,.3,1),
             border-color .28s cubic-bezier(.16,1,.3,1),
             color .28s cubic-bezier(.16,1,.3,1);}
.wk-f:hover{border-color:var(--accent)}
.wk-f[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wk-count{margin:0 0 0 auto;font-weight:400;font-size:.88rem;color:var(--muted)}
.wk-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.6rem,3.2vw,2.8rem);
  grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1000px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wk-grid{grid-template-columns:minmax(0,1fr)}}
.wk-grid > li[hidden]{display:none}
.wk-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.wk-media{position:relative;display:block;overflow:hidden;border-radius:4px;border:1px solid var(--line); /* faint edge so light images don't melt into the page */
  aspect-ratio:16/11;background:var(--paper-2);}
.wk-img{position:absolute;inset:0;background:var(--src) center/cover no-repeat;
  transform:scale(1.02);transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.wk-card:hover .wk-img{transform:scale(1.06)}
.wk-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(205deg,rgba(35,31,32,.16),rgba(35,31,32,0) 55%);
  transition:opacity 1s cubic-bezier(.16,1,.3,1);}
.wk-card:hover .wk-media::after{opacity:.3}
.wk-year{display:block;color:var(--muted);margin:clamp(1rem,1.8vw,1.35rem) 0 .35rem} /* when the work was done */
.wk-year + .wk-verdict{margin-top:0}
.wk-verdict{display:block;font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:.96rem;letter-spacing:-.015em;color:var(--accent);
  margin:clamp(1rem,1.8vw,1.35rem) 0 .4rem;}
.wk-client{font-family:var(--display);font-weight:900;text-transform:none; /* client names keep their own casing */
  font-size:clamp(1.3rem,1.9vw,1.68rem);line-height:1.04;letter-spacing:-.03em;
  margin:0;max-width:16ch;}
.wk-note{font-weight:400;font-size:.99rem;line-height:1.5;color:var(--muted);
  margin:.6rem 0 0;max-width:40ch;}
.wk-tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:auto 0 0;padding:1rem 0 0;}
@media (max-width:1000px){.wk-tags{margin-top:0}}
.wk-tag{font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.32rem .6rem;}
.wk-card:hover .wk-client{color:var(--accent)}
.wk-client{transition:color .28s cubic-bezier(.16,1,.3,1)}
.wk-ph .wk-media{border:1px dashed var(--line);background:var(--paper-2);
  display:grid;place-items:center;}
.wk-ph .wk-media svg{width:26px;height:auto;fill:var(--line);opacity:.9}
.wk-ph .wk-verdict{color:var(--muted)}
.wk-ph .wk-client{color:var(--muted)}
.wk-ph .wk-note{opacity:.85}
.wk-flag{align-self:flex-start;font-family:var(--mono);font-weight:700;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:.3rem .55rem;
  margin:clamp(1rem,1.8vw,1.35rem) 0 .5rem;}
.wk-media--slot{border:1px dashed var(--line);display:grid;place-items:center}
.wk-media--slot svg{width:24px;height:auto;fill:var(--line)}
.wk-slot{position:absolute;bottom:.7rem;left:.8rem;font-family:var(--mono);font-weight:700;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wk-empty{margin:clamp(2rem,4vw,3rem) 0 0;font-weight:400;color:var(--muted);}
.wk-empty[hidden]{display:none}
.wk-close{margin-top:clamp(3.6rem,7vw,6rem);background:var(--accent);color:#fff}
.wk-close .wrap{padding-block:clamp(3rem,6vw,5rem)}
.wk-close h2{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.02;letter-spacing:-.032em;
  margin:0;max-width:18ch;}
.wk-close p{font-weight:400;font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.55;
  color:rgba(255,255,255,.9);max-width:52ch;margin:clamp(1rem,2vw,1.4rem) 0 0;}


/* ---- case-american-electrical.html ---- */
.cs{--gutter:clamp(1.2rem,3vw,2.4rem)}
.cs-sec{padding-block:clamp(2.6rem,5.5vw,4.6rem)}
.cs-sec--tight{padding-block:clamp(1.6rem,3vw,2.4rem)}
.cs-measure{max-width:64ch}
.cs-kicker{color:var(--muted);margin-bottom:.9rem}
.cs h2{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 1.1rem}
.cs h3{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.1;letter-spacing:-.024em;margin:0 0 .5rem}
.cs .pg-h1{text-transform:none} /* the case title is the client's name: keep their casing */
.cs p{font-weight:400;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62;margin:0 0 1.1rem}
.cs p:last-child{margin-bottom:0}
.cs-dim{color:var(--muted)}
.cs-meta{display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(1rem,2vw,1.35rem);}
.cs-meta div{display:flex;flex-direction:column;gap:.3rem}
.cs-meta dt{color:var(--muted)}
.cs-meta dd{margin:0;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:-.014em;text-transform:none}
.cs-lead{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:21/9;border:1px solid var(--line);
  background:var(--paper-2) var(--src) center/cover no-repeat;}
@media (max-width:700px){.cs-lead{aspect-ratio:4/3}}
.cs-sum{display:grid;gap:clamp(1.4rem,3vw,2.6rem);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.cs-sum{grid-template-columns:minmax(0,1fr)}}
.cs-sum > div{border-top:2px solid var(--ink);padding-top:1.1rem}
.cs-sum > div:last-child{border-top-color:var(--accent)}
.cs-sum p{font-size:1rem;color:var(--muted);margin:0}
.cs-pull{border-left:2px solid var(--accent);padding-left:clamp(1.2rem,2.4vw,2rem);
  max-width:34ch;margin:0;}
.cs-pull p{font-family:var(--display);font-weight:300;letter-spacing:-.028em;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.14;color:var(--ink);margin:0;}
.cs-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1.1rem,2.2vw,1.7rem)}
.cs-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.1rem;align-items:start}
.cs-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);font-family:var(--display);font-weight:700;
  font-size:.84rem;line-height:1;color:var(--accent);margin-top:.1rem;}
.cs-steps p{margin:.35rem 0 0;color:var(--muted);font-size:1rem}
.cs-quote{background:var(--paper-2);border-radius:6px;padding:clamp(1.6rem,3.4vw,2.8rem);margin:0}
.cs-quote p{font-family:var(--display);font-weight:300;letter-spacing:-.022em;
  font-size:clamp(1.18rem,2vw,1.6rem);line-height:1.3;margin:0 0 1.1rem;}
.cs-quote footer{font-size:.95rem;font-weight:400;color:var(--muted)}
.cs-quote footer b{font-weight:700;color:var(--ink)}
.cs-fig{margin:0}
.cs-fig figcaption,.cs-cap{margin:.8rem 0 0;font-size:.9rem;font-weight:400;color:var(--muted)}
.cs-shot{position:relative;overflow:hidden;border-radius:4px;border:1px solid var(--line);background:var(--paper-2) var(--src) center/cover no-repeat;}
.cs-bleed{width:100%}
.cs-duo{display:grid;gap:var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-trio{display:grid;gap:var(--gutter);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.cs-duo,.cs-trio{grid-template-columns:minmax(0,1fr)}}
.cs-slot{display:grid;place-items:center;border:1px dashed var(--line);border-radius:4px;
  background:var(--paper-2);color:var(--muted);}
.cs-slot svg{width:24px;height:auto;fill:var(--line)}
.cs-slot span{position:absolute;bottom:.7rem;left:.8rem;font-family:var(--mono);font-weight:700;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.cs-slot{position:relative}
.cs-wipe{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:16/9;background:var(--paper-2);touch-action:none}
.cs-wipe-a,.cs-wipe-b{position:absolute;inset:0;background:var(--src) center/cover no-repeat}
.cs-wipe-b{clip-path:inset(0 0 0 var(--split,50%))}
.cs-wipe-line{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:var(--paper);pointer-events:none}
.cs-wipe-grip{position:absolute;top:50%;left:clamp(22px,var(--split,50%),calc(100% - 22px));
  transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:var(--paper);border:0;cursor:ew-resize;
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(20,25,40,.18);}
.cs-wipe-grip::before{content:"";width:13px;height:13px;background:var(--ink);
  -webkit-mask:var(--wipe-ico) center/contain no-repeat;mask:var(--wipe-ico) center/contain no-repeat}
.cs-wipe-tag{position:absolute;top:.8rem;font-family:var(--mono);font-weight:700;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(35,31,32,.55);border-radius:999px;padding:.3rem .6rem;pointer-events:none;}
.cs-wipe-tag.is-a{left:.8rem}
.cs-wipe-tag.is-b{right:.8rem}
.cs-browser{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper-2)}
.cs-browser-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:var(--paper)}
.cs-dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.cs-browser-url{margin-left:.6rem;flex:1;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--muted);background:var(--paper-2);border-radius:999px;padding:.32rem .7rem;}
.cs-browser-shot{aspect-ratio:16/10;background:var(--paper-2) var(--src) top center/cover no-repeat}
.cs-swatches{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));list-style:none;margin:0;padding:0}
.cs-sw{border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.cs-sw i{display:block;height:74px;background:var(--c)}
.cs-sw b{display:block;font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.1em;
  padding:.5rem .6rem .15rem;text-transform:uppercase}
.cs-sw em{display:block;font-style:normal;font-size:.78rem;font-weight:400;color:var(--muted);padding:0 .6rem .55rem}
.cs-spec{border:1px solid var(--line);border-radius:6px;padding:clamp(1.2rem,2.6vw,2rem)}
.cs-spec-aa{font-family:var(--display);font-weight:900;font-size:clamp(3rem,9vw,6.5rem);line-height:.9;letter-spacing:-.04em;margin:0}
.cs-spec-row{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.cs-spec-row > div{min-width:9rem}
.cs-spec-row p{margin:.25rem 0 0;font-size:.95rem;color:var(--muted)}
.cs-video{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/9;
  background:var(--paper-2) var(--src) center/cover no-repeat;display:grid;place-items:center;}
.cs-video::after{content:"";position:absolute;inset:0;background:rgba(35,31,32,.22)}
.cs-play{position:relative;z-index:1;width:clamp(58px,6vw,78px);aspect-ratio:1;border-radius:50%;
  border:0;background:var(--paper);cursor:pointer;display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.cs-video:hover .cs-play{transform:scale(1.07)}
.cs-play::before{content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent}
.cs-reel{display:grid;gap:var(--gutter);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.cs-reel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-reel .cs-slot,.cs-reel .cs-video{aspect-ratio:9/16}
.cs-stats{display:grid;gap:clamp(1.2rem,2.6vw,2.2rem);grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
@media (max-width:900px){.cs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.cs-stats{grid-template-columns:minmax(0,1fr)}}
.cs-stat{border-top:1px solid var(--line);padding-top:1rem}
.cs-stat .k{display:block;color:var(--muted);margin-bottom:.55rem}
.cs-stat .v{display:block;font-family:var(--display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(2.1rem,4vw,3.1rem);line-height:1;color:var(--ink);}
.cs-stat .d{display:block;margin-top:.5rem;font-size:.9rem;font-weight:400;color:var(--muted)}
.cs-stat .d b{font-weight:700;color:var(--accent)}
.cs-hero-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(1rem,2.6vw,2.2rem)}
.cs-hero-fig .v{font-family:var(--display);font-weight:900;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(4.5rem,15vw,12rem);color:var(--ink);}
.cs-hero-fig p{max-width:28ch;color:var(--muted);margin:0}
.cs-charts{display:grid;gap:clamp(1.4rem,3vw,2.4rem);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.cs-charts{grid-template-columns:minmax(0,1fr)}}
.cs-chart{border-top:1px solid var(--line);padding-top:1rem}
.cs-chart .k{display:block;color:var(--muted);margin-bottom:.15rem}
.cs-chart .n{display:block;font-family:var(--display);font-weight:900;font-size:1.5rem;
  letter-spacing:-.03em;line-height:1.1;margin-bottom:.7rem}
.ch{display:block;width:100%;height:auto;overflow:visible}
.ch-t{font-family:var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.ch-t--k{font-size:8px}
.ch-t--v{font-size:11px;letter-spacing:.04em;fill:var(--ink);text-transform:none;font-family:var(--display)}
.ch-hit{cursor:crosshair}
.cs-tip{position:fixed;z-index:120;pointer-events:none;opacity:0;transform:translate(-50%,-140%);
  background:var(--ink);color:var(--paper);border-radius:4px;padding:.4rem .6rem;
  font-size:.78rem;font-weight:400;white-space:nowrap;transition:opacity .15s ease;}
.cs-tip.on{opacity:1}
.cs-tbl-toggle{font-family:var(--display);font-weight:400;font-size:.9rem;background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;cursor:pointer;color:var(--ink);
  transition:border-color .28s ease;}
.cs-tbl-toggle:hover{border-color:var(--accent)}
.cs-tbl{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.92rem}
.cs-tbl[hidden]{display:none}
.cs-tbl th,.cs-tbl td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--line)}
.cs-tbl th{font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.cs-tbl td{font-weight:400}
.cs-tbl td + td,.cs-tbl th + th{text-align:right;font-variant-numeric:tabular-nums}
.cs-deliver{columns:2;column-gap:clamp(1.6rem,4vw,3.4rem);list-style:none;margin:0;padding:0}
@media (max-width:640px){.cs-deliver{columns:1}}
.cs-deliver li{break-inside:avoid;padding:.62rem 0;border-bottom:1px solid var(--line);font-weight:400}
.cs-nextprev{display:grid;gap:var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);padding-top:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:640px){.cs-nextprev{grid-template-columns:minmax(0,1fr)}}
.cs-np{text-decoration:none;color:inherit;display:block}
.cs-np .k{display:block;color:var(--muted);margin-bottom:.45rem}
.cs-np .t{font-family:var(--display);font-weight:900;text-transform:none; /* client names keep their own casing */
  font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-.03em;line-height:1.05;
  transition:color .28s cubic-bezier(.16,1,.3,1)}
.cs-np:hover .t{color:var(--accent)}
.cs-np.is-next{text-align:right}
.cs-cta{background:var(--accent);color:#fff}
.cs-cta .wrap{padding-block:clamp(3rem,6vw,5rem)}
.cs-cta h2{margin:0;max-width:18ch;color:#fff}
.cs-cta p{color:rgba(255,255,255,.9);max-width:52ch}
.cs-kit{position:fixed;z-index:130;right:clamp(.8rem,2vw,1.4rem);bottom:clamp(.8rem,2vw,1.4rem);
  display:flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper);
  border:0;border-radius:999px;padding:.7rem 1.1rem;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 6px 24px rgba(20,25,40,.18);}
.cs-kit i{width:8px;height:8px;border-radius:50%;background:#6B6A6E;transition:background .2s ease}
.cs-kit[aria-pressed="true"] i{background:var(--accent)}
[data-mod]{position:relative}
.kit [data-mod]{outline:1px dashed rgba(73,120,188,.55);outline-offset:8px;border-radius:2px}
.kit [data-mod]::before{content:attr(data-mod);position:absolute;top:-8px;left:0;transform:translateY(-100%);
  font-family:var(--mono);font-weight:700;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:#fff;border-radius:999px;padding:.28rem .6rem;white-space:nowrap;z-index:2;}
@media (prefers-reduced-motion:reduce){.cs-video:hover .cs-play,.cs-np:hover .t{transition:none}}
.cs-stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.cs-charts--1{grid-template-columns:minmax(0,1fr);max-width:28rem}
.cs-charts--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:58rem}
@media (max-width:860px){.cs-charts--2{grid-template-columns:minmax(0,1fr)}}
.cs-stat .v{text-wrap:balance}


/* ---- capabilities.html ---- */
.cp-sec{padding-block:clamp(2.8rem,6vw,5rem)}
.cp-sec--last{padding-bottom:clamp(2.2rem,4.2vw,3.4rem)}
.cp h2{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.04;letter-spacing:-.032em;margin:0 0 1.2rem}
.cp p{font-weight:400;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62;margin:0 0 1.15rem}
.cp p:last-child{margin-bottom:0}
.cp-measure{max-width:62ch}
.cp-kicker{color:var(--muted);margin-bottom:1rem}
.cp-dim{color:var(--muted)}
.cp-jump{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(1rem,2vw,1.3rem);}
.cp-jump a{display:inline-block;font-family:var(--display);font-weight:400;font-size:.92rem;
  letter-spacing:-.01em;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;
  transition:border-color .28s ease,background-color .28s ease,color .28s ease;}
.cp-jump a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (min-width:1000px){.cp-jump{display:grid;grid-template-columns:repeat(4,max-content);justify-content:start}
  .cp-jump a{display:block;text-align:center}}
.cp-method{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.3rem,2.6vw,2rem);
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cp-method{grid-template-columns:minmax(0,1fr)}}
.cp-method > li{border-top:2px solid var(--ink);padding-top:1.2rem;scroll-margin-top:7rem}
.cp-method > li:nth-child(3){border-top-color:var(--accent)}
.cp-bars{display:flex;align-items:flex-end;width:20px;height:22px;gap:2px;margin-bottom:.9rem}
.cp-bars i{flex:1;background:var(--accent);border-radius:1px}
.cp-bars i:nth-child(1){height:34%}
.cp-bars i:nth-child(2){height:67%}
.cp-bars i:nth-child(3){height:100%}
.cp-method > li:nth-child(1) .cp-bars i:nth-child(2),
.cp-method > li:nth-child(1) .cp-bars i:nth-child(3),
.cp-method > li:nth-child(2) .cp-bars i:nth-child(3){opacity:.22}
.cp-method h3{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.026em;margin:.2rem 0 .1rem}
.cp-method .cp-do{display:block;color:var(--accent);font-family:var(--display);
  font-weight:900;text-transform:lowercase;font-size:1rem;letter-spacing:-.02em;margin-bottom:.6rem}
.cp-method p{font-size:1rem;color:var(--muted);margin:0;text-wrap:pretty}
.cp-list{list-style:none;margin:0;padding:0}
.cp-row{display:grid;gap:clamp(1rem,3vw,3rem);align-items:start;
  padding-block:clamp(1.8rem,3.6vw,2.8rem);border-top:1px solid var(--line);
  scroll-margin-top:6rem;}
.cp-row:last-child{border-bottom:1px solid var(--line)}
@media (min-width:880px){.cp-row{grid-template-columns:auto minmax(0,1.05fr) minmax(0,.95fr)}}
.cp-n{font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.17em;
  color:var(--accent);padding-top:.5rem;}
.cp-name{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.5rem,2.8vw,2.15rem);line-height:1.02;letter-spacing:-.032em;margin:0;}
.cp-promise{font-weight:400;font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.5;
  color:var(--muted);margin:.7rem 0 0;max-width:34ch}
.cp-does{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.cp-does li{display:flex;align-items:baseline;gap:.7rem;font-weight:400;font-size:1rem;line-height:1.4;}
.cp-does li::before{content:"";flex:none;width:6px;height:6px;border-radius:1px;background:var(--accent);
  transform:translateY(-1px);}
.cp-see{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:.15rem;
  transition:border-color .3s ease,color .3s ease;}
.cp-see:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cp-see span{width:.85em;height:.85em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.cp-see:hover span{transform:translate(3px,-3px)}
.cp-cta{background:var(--accent);color:#fff}
.cp-cta .wrap{padding-block:clamp(3rem,6vw,5rem)}
.cp-cta h2{margin:0 0 1rem;max-width:18ch;color:#fff}
.cp-cta p{color:rgba(255,255,255,.9);max-width:52ch}


/* ---- about.html ---- */
.ab-sec{padding-block:clamp(2.8rem,6vw,5rem)}
.ab h2{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.04;letter-spacing:-.032em;margin:0 0 1.2rem}
.ab h3{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.1;letter-spacing:-.024em;margin:0 0 .5rem}
.ab p{font-weight:400;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62;margin:0 0 1.15rem}
.ab p:last-child{margin-bottom:0}
.ab-measure{max-width:62ch}
.ab-kicker{color:var(--muted);margin-bottom:1rem}
.ab-dim{color:var(--muted)}
.ab-split{display:grid;gap:clamp(1.4rem,4vw,4rem)}
@media (min-width:900px){.ab-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.ab-people{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.4rem,2.6vw,2.2rem);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.ab-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ab-people{grid-template-columns:minmax(0,1fr)}}
.ab-face{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;
  border:1px dashed var(--line);background:var(--paper-2);display:grid;place-items:center;margin-bottom:1.1rem}
.ab-face svg{width:26px;height:auto;fill:var(--line)}
.ab-face span{position:absolute;bottom:.7rem;left:.8rem;font-family:var(--mono);font-weight:700;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ab-role{display:block;color:var(--muted);margin:.2rem 0 .7rem}
.ab-people p{font-size:1rem;color:var(--muted)}
.ab-mail{display:inline-block;margin-top:.8rem;color:var(--ink);font-family:var(--display);
  font-weight:700;font-size:.98rem;text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .3s ease}
.ab-mail:hover{border-bottom-color:var(--accent)}
.ab-facts{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.2rem,2.6vw,2.2rem);
  
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.ab-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.ab-facts{grid-template-columns:minmax(0,1fr)}}
.ab-facts li{border-top:1px solid var(--line);padding-top:1rem}
.ab-facts .v{display:block;font-family:var(--display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1;margin-bottom:.45rem}
.ab-facts .k{display:block;color:var(--muted);font-weight:400;font-size:.95rem}
.ab-cta{background:var(--accent);color:#fff}
.ab-cta .wrap{padding-block:clamp(3rem,6vw,5rem)}
.ab-cta h2{margin:0 0 1rem;max-width:18ch;color:#fff}
.ab-cta p{color:rgba(255,255,255,.9);max-width:52ch}


/* ---- trades.html ---- */
.tr-sec{padding-block:clamp(3rem,6vw,5.2rem)}
.tr h2.tr-h{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.8rem,3.8vw,3rem);line-height:1.02;letter-spacing:-.034em;margin:0 0 1.1rem;max-width:18ch}
.tr p.tr-p{font-weight:400;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62;color:var(--muted);max-width:60ch;margin:0}
.tr-trades{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:clamp(1.6rem,3vw,2.2rem) 0 0;padding:0}
.tr-trades li{font-family:var(--display);font-size:.92rem;letter-spacing:-.01em;
  border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem}
.tr-trades li.more{border-style:dashed;color:var(--muted)}
.tr .pg-head .btn-row{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.tr-story{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
  border-top:2px solid var(--ink);padding-top:clamp(1.4rem,2.6vw,2rem)}
@media (min-width:900px){.tr-story{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.tr-story .mk-verdict{display:block;margin-bottom:.6rem}
.tr-story p.tr-p{margin-bottom:1.1rem}
.tr-story p.tr-p:last-of-type{margin-bottom:0}
.tr-nums{list-style:none;margin:clamp(1.6rem,3vw,2.2rem) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,3.4rem)}
.tr-nums .n{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5.4vw,4rem);
  line-height:.9;letter-spacing:-.045em;color:var(--accent)}
.tr-nums .k{display:block;margin-top:.55rem;font-weight:400;font-size:.95rem;color:var(--muted);max-width:22ch}
.tr-quote{margin:0;background:var(--paper-2);border-radius:4px;padding:clamp(1.4rem,2.6vw,2rem)}
.tr-qmark{font-family:var(--display);font-weight:900;font-size:3.4rem;line-height:.6;color:var(--accent);margin:0 0 .6rem}
.tr-quote blockquote{margin:0}
.tr-quote blockquote p{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.5vw,1.32rem);
  line-height:1.4;letter-spacing:-.018em;color:var(--ink);margin:0}
.tr-quote figcaption{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.tr-who{display:block;font-family:var(--display);font-weight:700;font-size:.95rem}
.tr-role{display:block;margin-top:.25rem;font-weight:400;font-size:.86rem;color:var(--muted)}
.tr-proof{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:end;
  border-top:2px solid var(--ink);padding-top:clamp(1.4rem,2.6vw,2rem)}
@media (min-width:860px){.tr-proof{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tr-proof .tr-stat{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(4rem,11vw,8.5rem);
  line-height:.86;letter-spacing:-.05em;color:var(--accent)}
.tr-proof .tr-stat small{display:block;font-size:.16em;letter-spacing:0;font-weight:700;color:var(--ink);
  margin-top:.9rem;text-transform:lowercase}
.tr-proof .mk-verdict{display:block;margin-bottom:.5rem}
.tr-proof h3{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.02;letter-spacing:-.032em;margin:0 0 .8rem}
.tr-proof p{font-weight:400;line-height:1.55;color:var(--muted);max-width:40ch;margin:0 0 1.4rem}
.tr-how{list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;display:grid;
  gap:clamp(1.4rem,2.6vw,2rem) clamp(1.6rem,3.4vw,3rem)}
@media (min-width:760px){.tr-how{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tr-how li{border-top:1px solid var(--line);padding-top:1.1rem}
.tr-how h3{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:-.024em;margin:0 0 .45rem}
.tr-how p{font-weight:400;font-size:1rem;line-height:1.55;color:var(--muted);margin:0;max-width:46ch}
.tr-cta{background:var(--accent);color:#fff}
.tr-cta .wrap{padding-block:clamp(3rem,6vw,5rem)}
.tr-cta h2.tr-h{color:#fff}
.tr-cta p.tr-p{color:rgba(255,255,255,.9)}
.tr-cta .btn-row{margin-top:clamp(1.6rem,3vw,2.2rem)}
.tr-cta a.tr-tel{color:#fff}
.gcalc{--gc-panel:#fff;
  --gc-err:#B4302B;
  color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;}
.gcalc *{box-sizing:border-box}
.gcalc .wrap{max-width:none;margin:0;padding:0}
.gcalc h2,.gcalc .big{font-family:var(--display);color:var(--ink)}
.gcalc .grid{display:grid;gap:clamp(1.2rem,2.4vw,2rem);align-items:stretch;
  grid-template-columns:minmax(280px,min(40%,440px)) minmax(0,1fr);
  grid-template-areas:"panel sheet" "plan plan"}
.gcalc .grid > div:first-child{display:contents}
.gcalc .panel{grid-area:panel}
.gcalc .sheet{grid-area:sheet;display:flex;flex-direction:column}
.gcalc .plan{grid-area:plan;margin:0}
.gcalc .chart-box{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
@media (min-width:861px){.gcalc .plan{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem)}
  .gcalc .plan h2{grid-column:1 / -1}
  .gcalc .plan .row{flex-direction:column;align-items:flex-start;gap:.25rem;
    border-bottom:0;border-top:1px dashed var(--line);padding:.7rem 0 0}
  .gcalc .plan .row .v{text-align:left;font-size:1.05rem}
  .gcalc .plan .desc{grid-column:1 / -1}
  .gcalc .plan .desc:first-of-type{margin-top:1.1rem}}
@media (max-width:860px){.gcalc .grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"panel" "sheet" "plan"}
  .gcalc .plan{margin-top:0}}
.gcalc .panel,.gcalc .plan,.gcalc .sheet{background:var(--gc-panel);border:1px solid var(--line);border-radius:4px}
.gcalc .panel{padding:clamp(1.1rem,2vw,1.5rem)}
.gcalc .field{margin-bottom:1.5rem}
.gcalc .field:last-child{margin-bottom:0}
.gcalc label{display:block;font-weight:700;font-size:.95rem;letter-spacing:-.012em;margin:0 0 .35rem;color:var(--ink)}
.gcalc .val{display:block;font-weight:900;font-size:1.45rem;letter-spacing:-.03em;color:var(--accent);line-height:1.15}
.gcalc input[type=range]{width:100%;accent-color:var(--accent);margin:.55rem 0 0}
.gcalc .seg{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:.45rem}
.gcalc .seg button{flex:1;padding:.6rem .3rem;border:0;border-right:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--muted);font:600 .86rem/1.25 var(--display);cursor:pointer;
  transition:background .25s ease,color .25s ease;}
.gcalc .seg button:last-child{border-right:0}
.gcalc .seg button:hover{color:var(--ink)}
.gcalc .seg button.on{background:var(--ink);color:var(--paper)}
.gcalc .seg button:focus-visible,.gcalc input:focus-visible,.gcalc select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gcalc .hint{font-size:.86rem;font-weight:400;line-height:1.45;color:var(--muted);margin:.45rem 0 0}
.gcalc .field input.txt{width:100%;font:300 1.02rem/1.45 var(--display);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:.8rem 1rem;margin-top:.2rem;}
.gcalc .field input.txt:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(73,120,188,.16)}
.gcalc .plan{padding:clamp(1.1rem,2vw,1.5rem);margin-top:1.2rem}
.gcalc .plan h2{font-weight:900;text-transform:lowercase;font-size:1.12rem;letter-spacing:-.024em;line-height:1.15;margin:0 0 .6rem}
.gcalc .plan .desc{margin:.8rem 0 0;padding-top:.8rem;border-top:1px dashed var(--line);color:var(--muted);font-weight:400;font-size:.94rem;line-height:1.5}
.gcalc .sheet{overflow:hidden}
.gcalc .sheet-head{padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.1rem,2.2vw,1.6rem) .9rem;border-bottom:2px solid var(--ink)}
.gcalc .sheet-head .kicker{font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .55rem}
.gcalc .big{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1;letter-spacing:-.04em;margin:0}
.gcalc .big small{display:inline-block;font-size:.34em;font-weight:600;color:var(--muted);letter-spacing:0}
.gcalc .rows{padding:.4rem clamp(1.1rem,2.2vw,1.6rem)}
.gcalc .row{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px dashed var(--line)}
.gcalc .row:last-child{border-bottom:0}
.gcalc .row .k{color:var(--muted);font-weight:400}
.gcalc .row .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.gcalc .row.roi .v{color:var(--accent);font-weight:900;font-size:1.2rem;letter-spacing:-.02em}
.gcalc .chart-box{padding:.9rem clamp(1.1rem,2.2vw,1.6rem) 0}
.gcalc svg{display:block;width:100%;height:auto}
.gcalc .legend{display:flex;gap:1.25rem;flex-wrap:wrap;padding:.55rem clamp(1.1rem,2.2vw,1.6rem) .8rem;font-size:.84rem;color:var(--muted)}
.gcalc .legend span{display:inline-flex;align-items:center;gap:.45rem}
.gcalc .legend i{width:16px;height:3px;border-radius:2px;display:inline-block}
.gcalc .legend i.band{height:10px;opacity:.3;border-radius:2px}
.gcalc .cta-band{padding:clamp(1.1rem,2.2vw,1.5rem);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.gcalc .cta-band p{color:var(--muted);font-weight:400;max-width:38ch;margin:0;line-height:1.5}
.gcalc .btn[disabled]{opacity:.6;cursor:default}
.gcalc .foot{margin:1.2rem 0 0;font-size:.84rem;font-weight:400;line-height:1.55;color:var(--muted);max-width:78ch}
.gcalc .overlay{position:fixed;inset:0;z-index:200;background:rgba(23,20,21,.62);
  display:none;align-items:center;justify-content:center;padding:1rem}
.gcalc .overlay.open{display:flex}
.gcalc .modal{position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:var(--paper);color:var(--ink);border-radius:6px;padding:clamp(1.4rem,3vw,2rem)}
.gcalc .modal h2{font-weight:900;text-transform:lowercase;font-size:1.6rem;letter-spacing:-.034em;line-height:1.05;margin:0 0 .45rem;padding-right:2rem}
.gcalc .modal .sub{color:var(--muted);font-weight:400;font-size:.96rem;margin:0 0 1.2rem}
.gcalc .modal .x{position:absolute;top:.7rem;right:.7rem;border:0;background:transparent;color:var(--muted);
  font-size:1.6rem;line-height:1;cursor:pointer;padding:.4rem .55rem}
.gcalc .modal .x:hover{color:var(--ink)}
.gcalc .f{margin-bottom:1rem}
.gcalc .f label{font-size:.9rem;margin-bottom:.35rem}
.gcalc .f label em{font-style:normal;color:var(--muted);font-weight:400}
.gcalc .f input[type=text],.gcalc .f input[type=email],.gcalc .f input[type=tel],.gcalc .f input[type=url],.gcalc .f select{width:100%;font:300 1rem/1.4 var(--display);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:4px;padding:.75rem .9rem;min-height:48px;}
.gcalc .f input:focus,.gcalc .f select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(73,120,188,.16)}
.gcalc .two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:440px){.gcalc .two{grid-template-columns:1fr}}
.gcalc fieldset{border:0;margin:0 0 1.1rem;padding:0}
.gcalc fieldset legend{font-weight:700;font-size:.9rem;margin:0 0 .15rem;padding:0;color:var(--ink)}
.gcalc fieldset .why{font-size:.84rem;font-weight:400;color:var(--muted);margin:0 0 .6rem}
.gcalc .checks{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .8rem}
@media (max-width:440px){.gcalc .checks{grid-template-columns:1fr}}
.gcalc .checks label{display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:.9rem;margin:0;cursor:pointer}
.gcalc .checks input{accent-color:var(--accent)}
.gcalc .modal .btn{width:100%;justify-content:space-between}
.gcalc .formerr{color:var(--gc-err);font-size:.88rem;font-weight:700;margin:0 0 .8rem;display:none}
.gcalc .formerr a{color:inherit}
.gcalc .thanks{display:none;padding:1.4rem 0 .4rem}
.gcalc .thanks h2{margin-bottom:.6rem}
.gcalc .thanks p{color:var(--muted);font-weight:400;margin:0}
.gcalc .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.gcalc{--amber:var(--accent);--amber-ink:var(--accent);--invest:var(--ink);--ink-soft:var(--muted);--good:var(--accent);--err:#B4302B}


/* ---- contact.html (scoped: this page overrides shared rules) ---- */
@media (max-width:1000px){body.c13-contact .hero-art{display:none}
body.c13-contact :root{--art-top:0px;--art-h:0px}}
@media (max-width:640px){body.c13-contact .hero .lead{margin-top:1.35rem;max-width:none;font-size:1.02rem;line-height:1.5}
body.c13-contact .hero,body.c13-contact .hero > .wrap{min-height:84vh;min-height:84svh}
body.c13-contact .hero > .wrap{padding-top:6rem}
body.c13-contact .btn-row{margin-top:1.9rem;gap:.6rem}
body.c13-contact .btn{padding:.8rem 1.3rem .8rem 1.5rem;font-size:1.02rem;gap:1.1rem;min-height:54px}
body.c13-contact .sec-head{margin-bottom:1.75rem}
body.c13-contact .stmt-grid{gap:1.25rem}
body.c13-contact .work-tail,body.c13-contact .engage,body.c13-contact .col-tail{gap:1.4rem}
body.c13-contact .work-tail .btn{width:100%;justify-content:center}
body.c13-contact .acc-btn{gap:.75rem;padding-block:1.15rem}
body.c13-contact .acc-btn .ttl em{font-size:.78rem}
body.c13-contact .quote{padding:1.4rem}
body.c13-contact .col-card{min-height:0}
body.c13-contact .facts .row{grid-template-columns:1fr;gap:.2rem;padding-block:.85rem}
body.c13-contact .stat-row{grid-template-columns:1fr 1fr}
body.c13-contact .stat-row .stat:last-child{grid-column:1 / -1}
body.c13-contact .ftr-bottom{flex-direction:column;gap:.5rem}
body.c13-contact .hdr{padding-block:.7rem}
body.c13-contact .nav-foot{gap:1.1rem}
body.c13-contact .nav-foot .grp{width:100%}}
body.c13-contact .cn-body{display:grid;gap:clamp(2.2rem,5vw,4.5rem);
  padding-block:clamp(2.6rem,5vw,4.4rem) clamp(4rem,8vw,7rem);}
@media (min-width:960px){body.c13-contact .cn-body{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}}
body.c13-contact .cn-form{max-width:44rem}
@media (max-width:1000px){body.c13-contact .cn-form{max-width:none}}
body.c13-contact .fld{margin-bottom:clamp(1.15rem,2.2vw,1.6rem)}
body.c13-contact .fld > label{display:block;font-family:var(--display);font-weight:700;
  font-size:.95rem;letter-spacing:-.012em;margin-bottom:.5rem;
  transition:color .3s cubic-bezier(.16,1,.3,1);}
body.c13-contact .fld .req{color:var(--accent);margin-left:.25rem}
body.c13-contact .fld:focus-within > label{color:var(--accent)}
body.c13-contact .fld input,body.c13-contact .fld select,body.c13-contact .fld textarea{width:100%;box-sizing:border-box;
  font:300 1.02rem/1.45 var(--display);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:.95rem 1.05rem;min-height:56px;
  transition:border-color .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);}
body.c13-contact .fld textarea{min-height:9.5rem;resize:vertical}
body.c13-contact .fld input::placeholder,body.c13-contact .fld textarea::placeholder{color:var(--muted)}
body.c13-contact .fld input:focus,body.c13-contact .fld select:focus,body.c13-contact .fld textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(73,120,188,.16);}
body.c13-contact .fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B6A6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.15rem center;background-size:12px 8px;}
body.c13-contact .fld .hint{margin:.45rem 0 0;font-size:.86rem;font-weight:400;color:var(--muted)}
body.c13-contact .fld .err{display:none;margin:.45rem 0 0;font-size:.86rem;font-weight:700;color:#B4302B;}
body.c13-contact .fld.is-bad input,body.c13-contact .fld.is-bad select,body.c13-contact .fld.is-bad textarea{border-color:#B4302B;box-shadow:0 0 0 3px rgba(180,48,43,.12)}
body.c13-contact .fld.is-bad .err{display:block}
body.c13-contact .needs{border:0;margin:0 0 clamp(1.15rem,2.2vw,1.6rem);padding:0;min-width:0}
body.c13-contact .needs > legend{display:block;float:left;width:100%;padding:0;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:-.012em;margin-bottom:.5rem;}
body.c13-contact .needs > legend + *{clear:both}
body.c13-contact .need-grid{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(2,minmax(0,1fr));}
body.c13-contact .need{display:grid;grid-template-columns:22px 1fr;column-gap:.8rem;row-gap:.15rem;
  align-items:start;height:100%;cursor:pointer;
  padding:.92rem 1rem;border:1px solid var(--line);border-radius:4px;
  background:var(--paper);
  transition:border-color .28s cubic-bezier(.16,1,.3,1),
             background-color .28s cubic-bezier(.16,1,.3,1),
             transform .28s cubic-bezier(.16,1,.3,1);}
body.c13-contact .need:hover{border-color:rgba(73,120,188,.5)}
body.c13-contact .need:active{transform:scale(.988)}
body.c13-contact .needs .need input{appearance:none;-webkit-appearance:none;flex:none;
  grid-row:1 / span 2;align-self:start;margin:.1rem 0 0;
  width:22px;min-width:22px;height:22px;min-height:22px;padding:0;
  border:1px solid var(--line);border-radius:3px;background:var(--paper);
  cursor:pointer;position:relative;box-shadow:none;
  transition:background-color .22s ease,border-color .22s ease;}
body.c13-contact .needs .need input:checked{background:var(--accent);border-color:var(--accent)}
body.c13-contact .needs .need input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
body.c13-contact .needs .need input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.c13-contact .need-t{font-family:var(--display);font-weight:700;font-size:.97rem;letter-spacing:-.012em;line-height:1.25}
body.c13-contact .need-s{font-weight:400;font-size:.85rem;line-height:1.35;color:var(--muted);grid-column:2}
body.c13-contact .need:has(input:checked),body.c13-contact .need.is-on{background:rgba(73,120,188,.07);border-color:var(--accent)}
body.c13-contact .need:has(input:checked) .need-t,body.c13-contact .need.is-on .need-t{color:var(--accent)}
body.c13-contact .needs .hint{margin:.6rem 0 0;font-size:.86rem;font-weight:400;color:var(--muted)}
body.c13-contact .needs .err{display:none;margin:.45rem 0 0;font-size:.86rem;font-weight:700;color:#B4302B}
body.c13-contact .needs.is-bad .err{display:block}
body.c13-contact .needs.is-bad .need-grid{border-radius:6px;outline:1px solid #B4302B;outline-offset:7px;}
body.c13-contact .needs.is-bad > legend{color:#B4302B}
@media (max-width:560px){body.c13-contact .need-grid{grid-template-columns:minmax(0,1fr)}}
body.c13-contact .cn-consent{display:flex;gap:.85rem;align-items:flex-start;
  margin:clamp(1.4rem,2.6vw,2rem) 0;padding:1.05rem 1.15rem;
  border:1px solid var(--line);border-radius:4px;background:var(--paper-2);}
body.c13-contact .cn-consent input{appearance:none;-webkit-appearance:none;flex:none;margin:.12rem 0 0;
  width:22px;height:22px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);cursor:pointer;position:relative;
  transition:background .25s ease,border-color .25s ease;}
body.c13-contact .cn-consent input:checked{background:var(--accent);border-color:var(--accent)}
body.c13-contact .cn-consent input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
body.c13-contact .cn-consent input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.c13-contact .cn-consent label{font-weight:400;font-size:.96rem;line-height:1.45;cursor:pointer}
body.c13-contact .cn-consent label b{font-weight:700}
body.c13-contact .cn-legal{margin:0 0 1.4rem;font-size:.86rem;font-weight:400;line-height:1.5;color:var(--muted);max-width:52ch}
body.c13-contact .cn-legal a{color:var(--ink)}
body.c13-contact .cn-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.c13-contact .cn-ok{display:none;padding:clamp(.3rem,.8vw,.6rem) 0 0}
body.c13-contact .cn-ok h2{font-family:var(--display);margin:0;max-width:46ch;
  font-weight:400;font-size:clamp(1.14rem,1.9vw,1.4rem);
  line-height:1.45;letter-spacing:-.014em;color:var(--ink);}
body.c13-contact .cn-ok h2 b{font-weight:700}
body.c13-contact .cn-ok p{margin:clamp(.8rem,1.6vw,1.05rem) 0 0;font-weight:400;line-height:1.55;color:var(--muted);max-width:46ch}
body.c13-contact .cn-ok .cn-ok-alt{margin-top:.75rem;font-size:.92rem;}
body.c13-contact .cn-ok .cn-ok-alt a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s ease}
body.c13-contact .cn-ok .cn-ok-alt a:hover{border-bottom-color:var(--accent)}
body.c13-contact .is-sent .cn-ok{animation:okIn .85s cubic-bezier(.16,1,.3,1) both}
@keyframes okIn{body.c13-contact from{opacity:0;transform:translateY(14px)}
body.c13-contact to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.c13-contact .is-sent .cn-ok{animation:none}}
body.c13-contact .is-sent .cn-form{display:none}
body.c13-contact .is-sent .cn-ok{display:block}
body.c13-contact .cn-card{position:relative;overflow:hidden;
  background:var(--accent);color:#fff;border-radius:6px;
  padding:clamp(1.5rem,3vw,2.3rem);}
@media (min-width:960px){body.c13-contact .cn-card{position:sticky;top:clamp(6.5rem,13vh,9rem)}}
body.c13-contact .cn-card-mark{position:absolute;right:-1.6rem;bottom:-2.6rem;width:clamp(80px,8vw,124px);
  opacity:.1;pointer-events:none;}
body.c13-contact .cn-card-mark svg{width:100%;height:auto;display:block;fill:#fff}
body.c13-contact .cn-card h2{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.9);margin:0 0 1.1rem;font-weight:700;}
body.c13-contact .cn-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.35rem)}
body.c13-contact .cn-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:.95rem;align-items:start}
body.c13-contact .cn-steps .num{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);margin-top:.05rem;
  font-family:var(--display);font-weight:700;font-size:.82rem;line-height:1;color:#fff;}
body.c13-contact .cn-steps p{margin:0;font-weight:400;font-size:.99rem;line-height:1.45;color:rgba(255,255,255,.93)}
body.c13-contact .cn-rule{height:1px;background:rgba(255,255,255,.28);margin:clamp(1.5rem,3vw,2.1rem) 0}
body.c13-contact .cn-direct{display:flex;flex-direction:column;gap:.15rem;margin-bottom:1.2rem}
body.c13-contact .cn-direct a{color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;
  letter-spacing:-.018em;font-size:clamp(1rem,1.2vw,1.12rem);padding:.3rem 0;
  border-bottom:1px solid transparent;align-self:flex-start;
  transition:border-color .3s ease;}
body.c13-contact .cn-direct a:hover{border-bottom-color:rgba(255,255,255,.75)}
body.c13-contact .cn-where{margin:1.2rem 0 0;font-weight:400;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.9)}
body.c13-contact .cn-card .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
body.c13-contact .cn-card .btn:hover{background:transparent;color:#fff}


/* ---- privacy.html (scoped: this page overrides shared rules) ---- */
@media (max-width:1000px){body.c13-privacy .hero-art{display:none}
body.c13-privacy :root{--art-top:0px;--art-h:0px}}
body.c13-privacy .mark{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2.1rem);
  white-space:nowrap;display:flex;align-items:center;gap:.7rem;color:var(--ink);
  margin-right:clamp(4rem,9vw,8rem);
  
  filter:brightness(0) opacity(.3);
  transition:filter .32s ease,transform .32s ease;}
body.c13-privacy .marquee .mark:hover{filter:none;transform:scale(.9)}
@media (max-width:640px){body.c13-privacy .hero .lead{margin-top:1.35rem;max-width:none;font-size:1.02rem;line-height:1.5}
body.c13-privacy .hero,body.c13-privacy .hero > .wrap{min-height:84vh;min-height:84svh}
body.c13-privacy .hero > .wrap{padding-top:6rem}
body.c13-privacy .btn-row{margin-top:1.9rem;gap:.6rem}
body.c13-privacy .btn{padding:.8rem 1.3rem .8rem 1.5rem;font-size:1.02rem;gap:1.1rem;min-height:54px}
body.c13-privacy .sec-head{margin-bottom:1.75rem}
body.c13-privacy .stmt-grid{gap:1.25rem}
body.c13-privacy .work-tail,body.c13-privacy .engage,body.c13-privacy .col-tail{gap:1.4rem}
body.c13-privacy .work-tail .btn{width:100%;justify-content:center}
body.c13-privacy .acc-btn{gap:.75rem;padding-block:1.15rem}
body.c13-privacy .acc-btn .ttl em{font-size:.78rem}
body.c13-privacy .quote{padding:1.4rem}
body.c13-privacy .col-card{min-height:0}
body.c13-privacy .facts .row{grid-template-columns:1fr;gap:.2rem;padding-block:.85rem}
body.c13-privacy .stat-row{grid-template-columns:1fr 1fr}
body.c13-privacy .stat-row .stat:last-child{grid-column:1 / -1}
body.c13-privacy .ftr-bottom{flex-direction:column;gap:.5rem}
body.c13-privacy .hdr{padding-block:.7rem}
body.c13-privacy .nav-foot{gap:1.1rem}
body.c13-privacy .nav-foot .grp{width:100%}}
body.c13-privacy .pg-lede{font-weight:400;font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.5;
  color:var(--muted);max-width:60ch;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;}
body.c13-privacy .pg-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:clamp(1.4rem,2.6vw,2rem) 0 0;}
body.c13-privacy .pg-body{display:grid;gap:clamp(2rem,5vw,5rem);
  padding-block:clamp(2.6rem,5vw,4.4rem) clamp(4rem,8vw,7rem);}
@media (min-width:1000px){body.c13-privacy .pg-body{grid-template-columns:minmax(0,1fr) minmax(0,15rem)}
body.c13-privacy .pg-toc{order:2}
body.c13-privacy .pg-doc{order:1}}
body.c13-privacy .pg-toc-in{position:sticky;top:clamp(6.5rem,13vh,9rem)}
body.c13-privacy .pg-toc h2{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem;font-weight:700}
body.c13-privacy .pg-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;display:flex;flex-direction:column;gap:.1rem}
body.c13-privacy .pg-toc a{display:flex;gap:.7rem;text-decoration:none;color:var(--muted);
  font-size:.92rem;line-height:1.3;padding:.42rem 0;
  border-left:2px solid transparent;padding-left:.8rem;margin-left:-.8rem;
  transition:color .35s cubic-bezier(.16,1,.3,1),border-color .35s cubic-bezier(.16,1,.3,1);}
body.c13-privacy .pg-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--line);padding-top:.15em}
body.c13-privacy .pg-toc a:hover{color:var(--ink)}
body.c13-privacy .pg-toc a.is-here{color:var(--ink);border-left-color:var(--accent)}
body.c13-privacy .pg-toc a.is-here::before{color:var(--accent)}
body.c13-privacy .pg-doc{max-width:70ch}
body.c13-privacy .pg-doc section{padding-block:clamp(2.6rem,5vw,4rem) 0;scroll-margin-top:clamp(6rem,13vh,9.5rem)}
body.c13-privacy .pg-doc section:first-child{padding-top:0}
body.c13-privacy .pg-doc section:last-child{padding-bottom:0}
body.c13-privacy .pg-doc h2{margin:0 0 clamp(.9rem,1.8vw,1.3rem)}
body.c13-privacy .pg-doc h3{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.4vw,1.2rem);
  letter-spacing:-.02em;margin:clamp(1.5rem,2.6vw,2rem) 0 .6rem;}
body.c13-privacy .pg-doc p{margin:0 0 1rem;font-weight:400;line-height:1.62;color:var(--ink)}
body.c13-privacy .pg-doc p.muted{color:var(--muted)}
body.c13-privacy .pg-doc ul{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
body.c13-privacy .pg-doc li{position:relative;padding-left:1.5rem;font-weight:400;line-height:1.55}
body.c13-privacy .pg-doc li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:2px;background:var(--accent);}
body.c13-privacy .pg-doc li strong{font-weight:700}
body.c13-privacy .pg-doc a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
body.c13-privacy .pg-doc a:hover{color:var(--accent)}
body.c13-privacy .pg-note{margin:1.4rem 0;padding:1.1rem 1.3rem;border-radius:4px;
  background:var(--paper-2);border:1px solid var(--line);}
body.c13-privacy .pg-note p{margin:0;font-size:.96rem}
body.c13-privacy .pg-contact{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
body.c13-privacy .pg-contact a{font-family:var(--display);font-weight:700;letter-spacing:-.018em;font-size:1.08rem;text-decoration:none}
body.c13-privacy .pg-contact a:hover{color:var(--accent)}


/* ---- a-second-opinion.html ---- */
/* A Second Opinion pages (hub, categories, writers, articles) start their eyebrow
   where every other page starts its title */
.so.pg{padding-top:clamp(7.5rem,15vh,11rem)}
.so-mast{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:end;
  border-bottom:2px solid var(--ink);padding-bottom:clamp(1.4rem,2.6vw,2rem)}
@media (min-width:900px){.so-mast{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.so-mast h1{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(2.4rem,6.4vw,5.2rem);line-height:.92;letter-spacing:-.045em;margin:0}
.so-mast .so-mast-sub{font-weight:400;font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.5;
  color:var(--muted);max-width:44ch;margin:clamp(.9rem,1.8vw,1.3rem) 0 0}
.so-mast-sign{align-self:end}
.so-mast-sign .mono{display:block;color:var(--muted);margin-bottom:.7rem}
.so-issue{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 clamp(1rem,2vw,1.4rem);
  font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.so-sub{max-width:24rem}
.so-sub .sign-input{background:var(--paper);border-color:var(--line);color:var(--ink)}
.so-sub .sign-input::placeholder{color:var(--muted)}
.so-sub .sign-go{background:var(--ink);color:var(--paper)}
.so-sub .sign-go:hover{background:var(--accent)}
.so-cta .so-sub{max-width:26rem}
.so-cta .so-sub .sign-input{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.so-cta .so-sub .sign-input::placeholder{color:rgba(255,255,255,.8)}
.so-cta .so-sub .sign-go{background:#fff;color:var(--ink)}
.so-sec{padding-block:clamp(2.8rem,6vw,5rem)}
.so-sec--tight{padding-top:0}
.so h2.so-h{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.04;letter-spacing:-.032em;margin:0}
.so-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:clamp(.9rem,1.8vw,1.2rem);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.so-cat{display:block;font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.so-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.8rem 0 0;
  font-weight:400;font-size:.85rem;color:var(--muted)}
.so-meta a.so-who{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)}
.so-meta a.so-who:hover{color:var(--accent);border-bottom-color:var(--accent)}
.so-dot{opacity:.45}
.so-teaser{font-weight:400;font-size:1rem;line-height:1.6;color:var(--muted);margin:.9rem 0 0;max-width:48ch}
.so-sec--lead{padding-top:clamp(2rem,4vw,3.4rem)}
.so-cta{min-height:clamp(320px,44vh,460px)}
.so-cta-in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3rem);align-items:end}
@media (min-width:860px){.so-cta-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.so-lead{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,3.4vw,3rem);align-items:center;text-decoration:none;color:inherit}
@media (min-width:900px){.so-lead{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.so-lead-media,.so-card-media{display:block;position:relative;overflow:hidden;border-radius:4px;
  background:var(--paper-2);border:1px solid var(--line)}
.so-lead-media{aspect-ratio:3/2}
.so-lead-media img,.so-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.so-card-media{aspect-ratio:16/11;margin-bottom:1rem}
.slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);line-height:1.7}
.so-lead-title{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-.038em;margin:0;max-width:18ch}
.so-lead-link{display:block;text-decoration:none;color:inherit}
.so-lead-link:hover .so-lead-title{color:var(--accent)}
.so-lead .so-teaser{max-width:44ch}
.so-lead-copy{display:block;min-width:0}
span.so-teaser{display:block}
.so-grid{display:grid;gap:clamp(2rem,3.6vw,3.2rem) clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.so-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.so-grid{grid-template-columns:minmax(0,1fr)}}
.so-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.so-grid--wide{grid-template-columns:minmax(0,1fr)}}
.so-card{min-width:0}
.so-card[hidden]{display:none}
.so-card-link{text-decoration:none;color:inherit;display:block}
.so-card-title{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.12rem,1.6vw,1.38rem);line-height:1.1;letter-spacing:-.028em;margin:0}
.so-grid--wide .so-card-title{font-size:clamp(1.3rem,2vw,1.7rem)}
.so-card-link:hover .so-card-title{color:var(--accent)}
.so-filter{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0 0 clamp(1.2rem,2.2vw,1.8rem);padding:0}
.so-filter button{font-family:var(--display);font-weight:400;font-size:.92rem;letter-spacing:-.01em;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;background:transparent;cursor:pointer;
  transition:border-color .28s ease,background-color .28s ease,color .28s ease;}
.so-filter button:hover{border-color:var(--ink)}
.so-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.so-count{font-weight:400;font-size:.9rem;color:var(--muted);margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.so-more{display:flex;justify-content:center;margin-top:clamp(2.4rem,4.6vw,3.6rem)}
.so-more[hidden],.so-more button[hidden]{display:none}
.so-head .so-count{margin:0}
.ad{display:block;border:1px solid var(--line);border-radius:4px;background:var(--paper-2);
  padding:clamp(1.1rem,2.2vw,1.6rem);color:inherit;text-decoration:none;
  transition:border-color .3s ease,background-color .3s ease}
a.ad:hover{border-color:var(--accent)}
.ad-flag{display:block;font-family:var(--mono);font-weight:700;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.ad-title{display:block;font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.08;letter-spacing:-.026em;margin:0}
.ad-text{font-weight:400;font-size:.95rem;line-height:1.55;color:var(--muted);margin:.7rem 0 1.1rem;max-width:44ch}
.ad-cue{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--ink)}
.ad-arrow{width:.85em;height:.85em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
a.ad:hover .ad-cue{color:var(--accent)}
a.ad:hover .ad-arrow{transform:translate(3px,-3px)}
.ad--band{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);align-items:center;background:var(--ink);
  border-color:var(--ink);color:var(--paper);padding:clamp(1.6rem,3.4vw,2.8rem)}
@media (min-width:760px){.ad--band{grid-template-columns:minmax(0,1fr) auto}}
.ad--band .ad-flag{color:rgba(245,246,248,.75)}
.ad--band .ad-title{font-size:clamp(1.4rem,2.6vw,2.2rem);max-width:20ch;line-height:1.02}
.ad--band .ad-text{color:rgba(245,246,248,.78);max-width:52ch}
.ad--band .ad-cue{color:var(--paper)}
a.ad--band:hover{border-color:var(--accent-lift)}
a.ad--band:hover .ad-cue{color:var(--accent-lift)}
.ad-bars{display:flex;align-items:flex-end;gap:6px;width:104px;height:76px}
.ad-bars i{flex:1;background:var(--accent-lift);border-radius:2px}
.ad-bars i:nth-child(1){height:38%}
.ad-bars i:nth-child(2){height:68%}
.ad-bars i:nth-child(3){height:100%}
.ad--inline{margin:clamp(2rem,3.6vw,2.8rem) 0}
.ad--inline .ad-text{margin-bottom:1rem}
.art-head{border-bottom:1px solid var(--line);padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.art-crumb{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1.1rem;
  font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.art-crumb a{color:var(--muted);text-decoration:none}
.art-crumb a:hover{color:var(--accent)}
.art-h1{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(2.1rem,5vw,4rem);line-height:.98;letter-spacing:-.04em;margin:0;max-width:20ch}
.art-dek{font-weight:400;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.5;color:var(--muted);
  max-width:56ch;margin:clamp(1rem,2vw,1.4rem) 0 0}
.art-byline{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:clamp(1.4rem,2.6vw,2rem)}
.art-byface{width:44px;height:44px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);flex:none}
.art-byface{overflow:hidden}
.art-byface img{display:block;width:100%;height:100%;object-fit:cover}
.art-hero{display:block;position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);margin:clamp(1.8rem,3.4vw,2.8rem) 0 0}
.art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.art-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start;padding-block:clamp(2rem,4vw,3.4rem)}
@media (min-width:1000px){.art-body{grid-template-columns:minmax(0,1fr) minmax(0,17rem)}}
.art-prose{max-width:68ch}
.art-prose h2{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.06;letter-spacing:-.03em;margin:clamp(2rem,3.6vw,2.8rem) 0 .9rem}
.art-prose h3{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.024em;margin:1.8rem 0 .6rem}
.art-prose p{font-weight:400;font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.7;margin:0 0 1.15rem}
.art-prose ul,.art-prose ol{margin:0 0 1.3rem 1.1rem;padding:0}
.art-prose li{font-weight:400;line-height:1.6;margin-bottom:.5rem}
.art-prose blockquote{margin:clamp(1.8rem,3vw,2.4rem) 0;padding-left:clamp(1rem,2vw,1.6rem);
  border-left:3px solid var(--accent);font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.35;letter-spacing:-.018em}
.art-key{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;
  padding:clamp(1rem,2vw,1.4rem);margin:0 0 clamp(1.6rem,3vw,2.2rem);background:var(--paper-2)}
.art-key .mono{display:block;color:var(--muted);margin-bottom:.5rem}
.art-key p{margin:0;font-weight:400;line-height:1.55}
.art-fig{margin:clamp(1.8rem,3.4vw,2.6rem) 0}
.art-fig .slotbox{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line)}
.art-fig figcaption{margin-top:.7rem;font-weight:400;font-size:.9rem;color:var(--muted)}
.art-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,2.4vw,1.8rem);position:sticky;top:clamp(6.5rem,13vh,9rem)}
@media (max-width:999px){.art-rail{position:static}}
.art-toc{border-top:2px solid var(--ink);padding-top:.9rem}
.art-toc ol{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem}
.art-toc a{text-decoration:none;color:var(--muted);font-weight:400;font-size:.95rem;line-height:1.35}
.art-toc a:hover,.art-toc a.is-here{color:var(--ink)}
.art-faq{border-top:1px solid var(--line);padding-top:clamp(1.4rem,2.6vw,2rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.art-faq dt{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-top:1.1rem}
.art-faq dd{margin:.4rem 0 0;font-weight:400;line-height:1.6;color:var(--muted)}
.art-author{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2.4vw,1.8rem);align-items:start;border-top:2px solid var(--ink);
  padding-top:clamp(1.4rem,2.6vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:620px){.art-author{grid-template-columns:auto minmax(0,1fr)}}
.art-author .so-face{width:132px;margin:0}
.art-author h2{font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.03em;margin:0}
.art-author p{font-weight:400;line-height:1.6;color:var(--muted);margin:.7rem 0 0;max-width:56ch}
.so-face{display:block;position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line)}
.so-face img{width:100%;height:100%;object-fit:cover;display:block}
.so-role{display:block;font-weight:400;font-size:.95rem;color:var(--muted);margin-top:.4rem}
.au-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,3.4vw,3rem);align-items:center;
  border-bottom:2px solid var(--ink);padding-bottom:clamp(1.8rem,3.4vw,2.8rem)}
@media (min-width:760px){.au-head{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.au-bio{font-weight:400;font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.65;color:var(--muted);
  max-width:56ch;margin:1.2rem 0 0}
.au-note{display:inline-block;margin-top:1.2rem;font-family:var(--mono);font-weight:700;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px dashed var(--line);
  border-radius:999px;padding:.35rem .8rem}
.so-cta .wrap{padding-block:clamp(3rem,6vw,5rem)}


/* ---- 404.html ---- */
.nf{min-height:100vh;display:flex;flex-direction:column}
.nf-stage{padding-block:clamp(1rem,3vw,2rem) clamp(3rem,6vw,5rem);flex:1}
.nf-kick{color:var(--muted);margin:0 0 clamp(.6rem,1.4vw,1rem)}
.nf-kick b{color:var(--accent);font-weight:700}
.nf-big{display:flex;align-items:flex-end;gap:clamp(.2rem,1vw,.8rem);
  font-family:var(--display);font-weight:900;letter-spacing:-.06em;line-height:.8;
  font-size:clamp(7rem,27vw,23rem);color:var(--ink);
  margin:0 0 clamp(1.4rem,3vw,2.4rem);user-select:none;-webkit-user-select:none;
  touch-action:pan-y;}
.nf-d{display:inline-block;will-change:transform;transform:translate3d(0,0,0)}
.nf-d:nth-child(2){color:var(--accent)}
.nf-h{font-family:var(--display);margin:0;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.1rem,5vw,4rem);}
.nf-h b{display:block;font-weight:900}
.nf-h i{display:block;font-style:normal;font-weight:400;color:var(--accent)}
.nf-p{font-weight:400;font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.55;color:var(--muted);
  max-width:48ch;margin:clamp(1.1rem,2.2vw,1.5rem) 0 0;text-wrap:pretty;}
.nf-doors{list-style:none;margin:clamp(2.2rem,4.4vw,3.4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);}
@media (max-width:900px){.nf-doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.nf-doors{grid-template-columns:minmax(0,1fr)}}
.nf-doors li{border-bottom:1px solid var(--line)}
@media (min-width:901px){.nf-doors li + li{border-left:1px solid var(--line)}}
@media (min-width:481px) and (max-width:900px){.nf-doors li:nth-child(2n){border-left:1px solid var(--line)}}
.nf-door{display:flex;flex-direction:column;gap:.35rem;height:100%;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(.9rem,1.8vw,1.4rem);
  text-decoration:none;color:var(--ink);
  transition:background-color .35s cubic-bezier(.16,1,.3,1),color .35s cubic-bezier(.16,1,.3,1);}
.nf-door .k{color:var(--muted);transition:color .35s cubic-bezier(.16,1,.3,1)}
.nf-door .t{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:-.03em;line-height:1.05;}
.nf-door .t::after{content:"";flex:none;width:.8em;height:.8em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);}
.nf-door:hover,.nf-door:focus-visible{background:var(--accent);color:#fff}
.nf-door:hover .k,.nf-door:focus-visible .k{color:rgba(255,255,255,.8)}
.nf-door:hover .t::after,.nf-door:focus-visible .t::after{transform:translate(4px,-4px)}
.nf-home{margin-top:clamp(1.4rem,2.6vw,2rem);font-weight:400;color:var(--muted);font-size:.98rem}
.nf-home a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s ease}
.nf-home a:hover{border-bottom-color:var(--accent)}