@import url('./fonts/fonts.css');

/* ============================================================ 0 · tokens */
:root{
  --ink:#06080b;          /* page black                       */
  --ink-2:#0b1016;        /* raised black / steel             */
  --bone:#e2e7ea;         /* primary text                     */
  --bone-dim:#c3cbd1;
  --muted:#909aa1;      /* lifted: these sit over a lit scene, not flat ink */
  --line:rgba(226,231,234,.12);
  --line-soft:rgba(226,231,234,.06);
  --signal:#f3a63c;       /* beacon amber — the one accent    */
  --signal-2:#ff7a3c;     /* ember, hot lights only           */
  --deep:#1b3a52;         /* cold water blue, depth and haze  */

  --pad:clamp(20px,3.6vw,64px);
  --nav-h:78px;
  --maxw:1560px;
  --col:68ch;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62;
  font-weight:400;
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-synthesis-weight:none;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--signal); color:#0a0500; }

/* focus — always visible, never removed */
:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){ outline:none; }

.skip{
  position:absolute; left:12px; top:-64px; z-index:200;
  background:var(--signal); color:#0a0500; font-weight:600;
  padding:12px 18px; border-radius:4px; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:12px; }

.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================ 1 · canvas */
#world{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:block;
  background:var(--ink);
}
.page{
  position:relative; z-index:2;
  isolation:isolate;
}
/* A readability floor under the type. The gradients alone left the middle of
   the screen unprotected — which is exactly where body copy sits, and where
   the lit tower and lamp glow are brightest. The flat layer underneath them
   guarantees a minimum ground everywhere, so text never has to compete with
   whatever the camera happens to be looking at. */
.page::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(6,8,11,.60), rgba(6,8,11,.60)),
    linear-gradient(180deg,rgba(6,8,11,.50) 0%,rgba(6,8,11,.12) 26%,rgba(6,8,11,0) 48%),
    linear-gradient(0deg,rgba(6,8,11,.42) 0%,rgba(6,8,11,0) 32%);
}

/* ========================================================= 2 · preloader */
.pre{
  position:fixed; inset:0; z-index:300;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition:opacity .9s var(--ease) .12s,visibility .9s step-end .12s;
}
.pre[hidden]{ display:flex; }           /* keep layout; we fade instead */
.pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-bar{
  width:min(280px,54vw); height:1px;
  background:var(--line); position:relative; overflow:hidden;
}
.pre-bar i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--signal);
  transition:width .3s linear;
}
.pre-txt{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ============================================================== 3 · nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(6,8,11,.86);
  border-bottom-color:var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--bone);
}
.brand-mark{ width:40px; height:auto; flex:none; }
.brand-mark path{ fill:currentColor; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-size:13px; font-weight:600; letter-spacing:.20em; text-transform:uppercase;
}
.brand-sub{
  font-size:8.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); margin-top:3px;
}
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); }
.nav-links a{
  font-size:11px; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
  color:var(--bone-dim); text-decoration:none;
  padding:8px 2px; position:relative;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"],.nav-links a.on{ color:var(--bone); }
.nav-links a[aria-current="page"]::after,.nav-links a.on::after,.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal)!important; border:1px solid var(--line);
  padding:11px 18px!important; border-radius:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ border-color:var(--signal); background:rgba(243,166,60,.08); }

.burger{
  display:none; width:44px; height:44px; flex:none;
  background:none; border:0; padding:0; cursor:pointer;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:22px; height:1px; background:var(--bone); position:relative;
  transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:22px; height:1px; background:var(--bone);
  transition:transform .34s var(--ease);
}
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

.mobnav{
  position:fixed; inset:0; z-index:119;
  background:rgba(6,8,11,.985);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--nav-h) var(--pad) var(--pad);
  gap:2px;
  opacity:0; visibility:hidden;
  /* A closed panel is still a full-viewport box. Without this it can sit
     invisibly over the page and swallow taps during (and after) its fade. */
  pointer-events:none;
  transition:opacity .42s var(--ease),visibility .42s step-end;
}
.mobnav.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .42s var(--ease),visibility 0s;
}
.mobnav a{
  font-size:clamp(26px,7.4vw,40px); font-weight:200; letter-spacing:-.02em;
  text-transform:uppercase; text-decoration:none; color:var(--bone);
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.mobnav a:last-of-type{ border-bottom:0; }
.mobnav .m-cta{ color:var(--signal); }

/* ==================================================== 4 · progress rail */
.rail{
  position:fixed; right:calc(var(--pad) * .52); top:50%; transform:translateY(-50%);
  z-index:110; display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.rail a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--muted); font-size:9px; letter-spacing:.2em; font-weight:600;
  transition:color .3s var(--ease);
}
.rail i{
  display:block; width:20px; height:1px; background:currentColor;
  transition:width .4s var(--ease),background .3s var(--ease);
}
.rail a .lbl{
  opacity:0; transform:translateX(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  white-space:nowrap;
}
.rail a:hover,.rail a.on{ color:var(--signal); }
.rail a.on i{ width:36px; }
.rail a:hover .lbl,.rail a:focus-visible .lbl{ opacity:1; transform:none; }
.rail-prog{
  position:fixed; top:0; left:0; height:2px; z-index:130;
  background:var(--signal); width:0%;
  transition:width .1s linear;
}

/* ========================================================= 5 · typography */
.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); margin:0 0 26px;
  display:flex; align-items:center; gap:11px;
}
.eyebrow::before{
  content:''; width:6px; height:6px; flex:none;
  background:var(--signal); border-radius:50%;
}
.eyebrow.plain::before{ display:none; }

h1,h2,h3,h4{ font-weight:200; margin:0; letter-spacing:-.028em; }

.display{
  font-size:clamp(38px,7.1vw,104px);
  line-height:1.02; font-weight:200;
  text-transform:uppercase; letter-spacing:-.035em;
  max-width:19ch;
}
.display-2{
  font-size:clamp(30px,4.9vw,68px);
  line-height:1.06; font-weight:200;
  text-transform:uppercase; letter-spacing:-.032em;
  max-width:21ch;
}
.display-3{
  font-size:clamp(23px,2.7vw,38px);
  line-height:1.14; font-weight:250; letter-spacing:-.024em;
  text-transform:none;
}

.lead{
  font-size:clamp(17px,1.32vw,20px); line-height:1.62;
  color:var(--bone-dim); max-width:var(--col); font-weight:300;
}
.body{ color:var(--bone-dim); max-width:var(--col); }
.body p+p{ margin-top:1.15em; }
.body p{ margin:0; }
.small{
  font-size:13.5px; line-height:1.6; color:var(--muted);
}
.label{
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.num{
  font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--signal);
  font-variant-numeric:tabular-nums;
}
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* word-by-word heading reveal */
.rv-w{ display:inline-block; overflow:hidden; vertical-align:top; }
.rv-w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  transition:transform .92s var(--ease-out) var(--d,0ms);
}
.is-in .rv-w > i{ transform:none; }

.rv{
  opacity:0; transform:translateY(16px);
  transition:opacity .78s var(--ease-out) var(--d,0ms),transform .78s var(--ease-out) var(--d,0ms);
}
.is-in .rv{ opacity:1; transform:none; }

/* ============================================================ 6 · layout */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

.sec{
  position:relative;
  padding-block:clamp(96px,15vh,190px);
  min-height:100vh;
  display:flex; align-items:center;
}
.sec > .wrap{ width:100%; }

/* the editorial split: heading left, body column offset right */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,5vw,90px);
  align-items:start;
}
.split .col-r{ padding-top:clamp(6px,1.4vw,20px); }

.stack-lg{ display:flex; flex-direction:column; gap:clamp(28px,4vw,56px); }

/* ============================================================ 7 · buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-size:12.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  padding:17px 30px; border-radius:2px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  min-height:48px;
  transition:background .32s var(--ease),color .32s var(--ease),
             border-color .32s var(--ease),transform .32s var(--ease);
}
.btn-primary{ background:var(--signal); color:#0a0500; }
.btn-primary:hover{ background:#ffbe5c; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--bone); }
.btn-ghost:hover{ border-color:var(--bone-dim); background:rgba(226,231,234,.04); }
.btn svg{ width:13px; height:13px; flex:none; }

.arrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  padding:6px 0;
}
.arrow span.ic{
  width:27px; height:27px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; flex:none;
  transition:border-color .34s var(--ease),background .34s var(--ease),transform .34s var(--ease);
}
.arrow svg{ width:10px; height:10px; }
.arrow:hover span.ic{ border-color:var(--signal); background:rgba(243,166,60,.1); transform:translate(2px,-2px); }
.arrow:hover{ color:var(--signal); }

/* ========================================================= 8 · stat rail */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px);
  border-top:1px solid var(--line);
  padding-top:clamp(26px,3.4vw,46px);
}
.stat .fig{
  font-size:clamp(21px,2.65vw,40px);
  font-weight:200; line-height:1.02; letter-spacing:-.03em;
  text-transform:uppercase; color:var(--bone);
  display:block;
}
.stat .cap{
  margin-top:12px; font-size:11.5px; line-height:1.5; color:var(--muted);
  max-width:24ch;
}

/* ====================================================== 9 · chapter chips */
.chips{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
.chips a{
  background:var(--ink); text-decoration:none; display:block;
  padding:18px 20px 20px;
  transition:background .36s var(--ease);
}
.chips a:hover{ background:var(--ink-2); }
.chips .n{
  font-size:10px; font-weight:600; letter-spacing:.2em; color:var(--signal);
  display:block; margin-bottom:9px;
}
.chips .t{
  font-size:14px; font-weight:400; color:var(--bone); display:block; margin-bottom:5px;
  letter-spacing:-.01em;
}
.chips .d{ font-size:11.5px; color:var(--muted); line-height:1.45; display:block; }

/* ========================================================= 10 · vp cards */
.vpcard{
  position:relative;
  display:flex; flex-direction:column;
  /* The render and its caption are two separate objects, not one card: a gap
     between them lets the window into the scene sit on its own. */
  gap:12px;
  border:0;
}
/* Cards arrive as you scroll to them and leave as you scroll away — unlike
   the one-shot reveals elsewhere, this one runs in both directions every
   time. The 3D view fades with the card because the blit is drawn at the
   card's live opacity. */
.vpcard{
  opacity:0;
  transform:translateY(26px) scale(.955);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change:opacity, transform;
}
.vpcard.in{ opacity:1; transform:none; }

/* the view lifts away from its caption on hover — the transform is picked up
   by getBoundingClientRect, so the blit follows it exactly */
.vpcard .frame{ transition:transform .45s var(--ease); }
.vpcard.in:hover .frame{ transform:translateY(-8px); }
/* The frame is a hole in the page: world.js blits this card's own view of
   the scene into the canvas at exactly this rect, so anything painted here
   would sit on top of the live view and hide it. The fallback ground is
   only drawn when there is no WebGL to blit. */
.vpcard .frame{
  position:relative; display:block; width:100%;
  aspect-ratio:16/10;
  background:transparent;
}
/* Only paint a ground when there is no WebGL at all. A frame that cannot
   blit stays transparent so the scene behind shows through — anything else
   leaves an empty dark panel sitting in the middle of the page. */
html.nogl .vpcard .frame{ background:linear-gradient(180deg,#0d151d,#070a0e); }
/* No play glyph: these frames are already live renders, not video, and a
   button promising playback that does not exist is a false affordance. */
.vpcard .cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:14px 16px 15px;
  border:1px solid var(--line); border-radius:3px;
  background:var(--ink);
  transition:border-color .4s var(--ease);
}
.vpcard:hover .cap{ border-color:rgba(226,231,234,.24); }
.vpcard .cap b{ font-size:12px; font-weight:500; color:var(--bone); letter-spacing:-.005em; }
.vpcard .cap i{ font-size:9.5px; font-style:normal; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; }

.hero-card{
  position:absolute; right:var(--pad);
  /* Clears the chapter chips by measurement, not by a guessed number — the
     chip block changes height when it rewraps, so site.js keeps
     --hero-foot-h in step and this always sits above it. */
  bottom:calc(var(--hero-foot-h, 180px) + 26px);
  width:clamp(180px,17vw,240px); z-index:6;
}
/* On a short window (a laptop with the browser chrome eating the height, or a
   landscape phone) the card and the chapter chips want the same corner. The
   chips carry navigation, so the card is the one that goes. */
@media (max-height:660px){
  .hero-card{ display:none; }
}

/* ================================================== 11 · capability grid */
.caps{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1px 0; }
.cap-item{
  grid-column:span 4; padding:26px 30px 30px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
  transition:background .4s var(--ease);
}
.cap-item:hover{ background:rgba(226,231,234,.02); }
.cap-item .n{ font-size:10.5px; font-weight:600; letter-spacing:.2em; color:var(--signal); }
.cap-item h3{
  font-size:clamp(17px,1.42vw,21px); font-weight:350; letter-spacing:-.018em;
  text-transform:none; line-height:1.2;
}
.cap-item p{ margin:0; font-size:14px; line-height:1.56; color:var(--muted); }
.cap-vp{ grid-column:span 4; padding:26px 30px 30px; border-top:1px solid var(--line); }
.cap-vp .vpcard{ align-self:start; max-width:240px; }

/* ======================================================= 12 · packages */
.tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); }
.tier{
  border:1px solid var(--line); border-radius:3px; background:rgba(11,16,22,.62);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  padding:clamp(24px,2.4vw,36px);
  display:flex; flex-direction:column; gap:20px;
  position:relative;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.tier:hover{ border-color:rgba(226,231,234,.22); }
.tier.feat{ border-color:rgba(243,166,60,.4); }
.tier.feat:hover{ border-color:rgba(243,166,60,.62); }
.tier .flag{
  position:absolute; top:-1px; right:-1px;
  font-size:9.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  background:var(--signal); color:#0a0500; padding:7px 13px; border-radius:0 3px 0 3px;
}
.tier h3{
  font-size:clamp(21px,2.1vw,30px); font-weight:250; text-transform:uppercase;
  letter-spacing:-.022em;
}
.tier .claim{
  font-size:14.5px; line-height:1.55; color:var(--bone-dim); font-style:italic;
  font-weight:300; margin:0;
}
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.tier li{
  font-size:14px; line-height:1.5; color:var(--bone-dim);
  display:flex; gap:11px; align-items:flex-start;
}
.tier li::before{
  content:''; flex:none; width:11px; height:6px; margin-top:7px;
  border-left:1px solid var(--signal); border-bottom:1px solid var(--signal);
  transform:rotate(-45deg);
}
.tier li.inherit{ color:var(--muted); }
.tier .btn{ width:100%; }
.tier-note{
  margin-top:clamp(18px,2vw,28px); font-size:13.5px; color:var(--muted);
  max-width:76ch;
}

/* ========================================================= 13 · work */
.works{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px); }
.work{
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:rgba(11,16,22,.6); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease);
}
.work:hover{ border-color:rgba(226,231,234,.22); }
.work .top{ padding:22px 24px 0; }
.concept{
  display:inline-flex; align-items:center; gap:7px;
  font-size:9.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--signal); border:1px solid rgba(243,166,60,.42);
  padding:6px 11px; border-radius:2px; margin-bottom:16px;
}
.concept::before{ content:''; width:5px; height:5px; background:var(--signal); border-radius:50%; }
.work h3{ font-size:clamp(19px,1.7vw,25px); font-weight:300; letter-spacing:-.02em; margin-bottom:7px; }
.work .vert{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.work .bd{ padding:18px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.work dl{ margin:0; display:flex; flex-direction:column; gap:12px; }
.work dt{
  font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px;
}
.work dd{ margin:0; font-size:13.5px; line-height:1.55; color:var(--bone-dim); }

/* ==================================================== 14 · testimonials */
.tbds{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); }
.tbd-card{
  border:1px solid var(--line); border-radius:3px; padding:clamp(22px,2.2vw,32px);
  display:flex; flex-direction:column; gap:18px; min-height:200px;
  background:rgba(11,16,22,.5);
}
.tbd{
  font-size:16px; line-height:1.6; color:var(--muted);
  border-bottom:1px dotted var(--muted); text-decoration:none;
  align-self:flex-start; cursor:help; font-style:italic; font-weight:300;
}
.tbd-meta{ margin-top:auto; display:flex; flex-direction:column; gap:5px; }
.tbd-meta .n{ font-size:12.5px; color:var(--bone-dim); }
.tbd-meta .r{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* logo bar — labelled empty frames, never invented logos */
.logobar{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line-soft); }
.logobar div{
  background:var(--ink); aspect-ratio:16/7; display:grid; place-items:center;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  text-align:center; padding:8px;
}

/* ========================================================= 15 · process */
.steps{ display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns:auto minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(18px,3.4vw,60px);
  padding:clamp(26px,3.2vw,46px) 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.step .n{
  font-size:clamp(26px,3.2vw,46px); font-weight:200; color:var(--line);
  line-height:.9; letter-spacing:-.04em;
  transition:color .5s var(--ease);
  min-width:2.2ch;
}
.step:hover .n{ color:var(--signal); }
.step h3{ font-size:clamp(19px,1.9vw,27px); font-weight:300; letter-spacing:-.022em; }
.step .you{
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--muted);
}
.step .you b{ color:var(--bone-dim); font-weight:600; letter-spacing:.11em; text-transform:uppercase; font-size:10px; }

/* ============================================================ 16 · forms */
.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.wide{ grid-column:1/-1; }
.field label{
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
.field label .req{ color:var(--signal); }
.field input,.field select,.field textarea{
  font:inherit; font-size:15px;
  background:rgba(11,16,22,.72); color:var(--bone);
  border:1px solid var(--line); border-radius:2px;
  padding:14px 15px; width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease);
  min-height:50px;
}
.field textarea{ resize:vertical; min-height:140px; line-height:1.6; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--bone-dim) 50%),
                   linear-gradient(135deg,var(--bone-dim) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.field select option{ background:var(--ink-2); color:var(--bone); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--signal); background:rgba(11,16,22,.95);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.err{
  font-size:12px; color:var(--signal-2); min-height:0;
  display:none;
}
.field.bad .err{ display:block; }
.field.bad input,.field.bad select,.field.bad textarea{ border-color:var(--signal-2); }
.form-foot{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.form-note{ grid-column:1/-1; font-size:12.5px; color:var(--muted); }
.form-ok{
  grid-column:1/-1; border:1px solid rgba(243,166,60,.4); background:rgba(243,166,60,.07);
  padding:16px 18px; border-radius:2px; font-size:14px; color:var(--bone-dim);
  display:none;
}
.form-ok.show{ display:block; }

/* ======================================================= 17 · contact rows */
.cinfo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-soft); }
.cinfo > div{ background:var(--ink); padding:22px 24px 24px; }
.cinfo dt{
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px;
}
.cinfo dd{ margin:0; font-size:16px; color:var(--bone); font-weight:300; }
.cinfo dd a{ color:var(--bone); text-decoration:none; border-bottom:1px solid var(--line); }
.cinfo dd a:hover{ color:var(--signal); border-color:var(--signal); }

/* ========================================================== 18 · blog */
.posts{ display:flex; flex-direction:column; }
.post-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(16px,3vw,52px);
  align-items:baseline;
  padding:clamp(24px,3vw,40px) 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:background .4s var(--ease);
}
.post-row:hover{ background:rgba(226,231,234,.02); }
.post-row .n{ font-size:11px; letter-spacing:.2em; color:var(--signal); font-weight:600; }
.post-row h2{
  font-size:clamp(21px,2.5vw,36px); font-weight:250; letter-spacing:-.026em;
  line-height:1.14; margin-bottom:10px;
}
.post-row .ex{ font-size:14.5px; color:var(--muted); max-width:62ch; line-height:1.56; }
.post-row .meta{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.post-row:hover h2{ color:var(--signal); }

.article{ max-width:none; }
.article .body-col{ max-width:72ch; }
.article h2{
  font-size:clamp(22px,2.5vw,34px); font-weight:250; letter-spacing:-.024em;
  margin:clamp(42px,4.4vw,64px) 0 18px; line-height:1.18;
}
.article h3{
  font-size:clamp(18px,1.6vw,22px); font-weight:400; letter-spacing:-.014em;
  margin:34px 0 12px; line-height:1.3;
}
.article p{ margin:0 0 1.15em; color:var(--bone-dim); }
.article ul,.article ol{ margin:0 0 1.3em; padding-left:22px; color:var(--bone-dim); }
.article li{ margin-bottom:9px; line-height:1.6; }
.article li::marker{ color:var(--signal); }
.article strong{ color:var(--bone); font-weight:600; }
.article .kicker{
  border-left:2px solid var(--signal); padding:4px 0 4px 20px;
  margin:30px 0; color:var(--bone); font-size:17px; font-weight:300; line-height:1.55;
}
.article .worked{
  border:1px solid var(--line); border-radius:3px; padding:24px 26px;
  margin:32px 0; background:rgba(11,16,22,.6);
}
.article .worked .tag{
  font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--signal); display:block; margin-bottom:12px;
}
.article .worked p:last-child{ margin-bottom:0; }
.art-meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  padding-bottom:clamp(24px,3vw,40px); border-bottom:1px solid var(--line);
}
.related{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-soft); }
.related a{
  background:var(--ink); padding:24px 26px 26px; text-decoration:none; display:block;
  transition:background .4s var(--ease);
}
.related a:hover{ background:var(--ink-2); }
.related .k{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px; }
.related .t{ font-size:17px; font-weight:300; color:var(--bone); line-height:1.3; display:block; }
.related a:hover .t{ color:var(--signal); }

/* =========================================================== 19 · footer */
.foot{
  position:relative; z-index:2;
  isolation:isolate;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(6,8,11,.82),rgba(6,8,11,.97));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding-top:clamp(56px,7vw,96px);
}
.foot > .wrap{ position:relative; z-index:2; }
.foot .fg{ z-index:1; height:min(26vh,210px); opacity:.62; }
.foot .fg.on{ opacity:.62; }
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,60px);
  padding-bottom:clamp(44px,5vw,72px);
}
.foot h4,.foot .foot-h{
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot ul a{
  font-size:14px; color:var(--bone-dim); text-decoration:none;
  transition:color .3s var(--ease);
}
.foot ul a:hover{ color:var(--signal); }
.foot-brand p{ font-size:14px; color:var(--muted); max-width:44ch; margin:18px 0 0; line-height:1.6; }
.foot-base{
  border-top:1px solid var(--line);
  padding:22px 0 30px;
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--muted);
}
.socials{ display:flex; gap:20px; }
.socials a{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; transition:color .3s var(--ease);
}
.socials a:hover{ color:var(--signal); }

/* ====================================================== 20 · foreground */
/* DOM-side foreground plates: they arrive at full opacity, pin while their
   section is live, then blur and fade during the handoff. The 3D scene has
   its own cut-outs; these carry the lower edge of the page over the top. */
.fg{
  position:fixed; left:0; right:0; bottom:0; z-index:1;
  pointer-events:none;
  height:min(38vh,340px);
  opacity:0;
  filter:blur(0px);
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);
  transform:translateY(14px);
}
.fg.on{ opacity:1; transform:none; }
.fg.out{ opacity:0; filter:blur(9px); transform:translateY(4px); }
.fg canvas{ width:100%; height:100%; display:block; }

/* =================================================== 21 · pointer (removed) */
/* No custom cursor. Hiding the native pointer to draw a ring meant it could
   disappear entirely; the OS cursor is always visible and always correct. */

/* ========================================================= 22 · hero bits */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--nav-h);
  padding-bottom:clamp(150px,22vh,240px);
}
.hero .wrap{ width:100%; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; margin-top:clamp(26px,3vw,40px); }
.hero-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding-inline:var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.cue{
  display:flex; align-items:center; gap:12px;
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); padding-bottom:16px;
}
.cue i{ display:block; width:52px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.cue i::after{
  content:''; position:absolute; inset:0; background:var(--signal);
  transform-origin:left; animation:cue 2.9s var(--ease-io) infinite;
}
@keyframes cue{ 0%{transform:scaleX(0)} 46%{transform:scaleX(1)} 100%{transform:scaleX(1) translateX(100%)} }
@media (prefers-reduced-motion:reduce){ .cue i::after{ animation:none; transform:scaleX(.4); } }

/* the giant DOM wordmark is only a fallback if WebGL is unavailable */
.word-fb{ display:none; }
html.nogl .word-fb{
  display:block; position:absolute; left:0; right:0; bottom:22vh; z-index:1;
  font-size:clamp(56px,15.4vw,230px); font-weight:200; letter-spacing:.02em;
  text-transform:uppercase; color:rgba(226,231,234,.1); text-align:center;
  line-height:.9; pointer-events:none; user-select:none;
}

/* ====================================================== 23 · page header */
.phead{
  padding-top:calc(var(--nav-h) + clamp(56px,9vw,120px));
  padding-bottom:clamp(40px,5vw,72px);
}
.phead .display-2{ margin-bottom:26px; }

/* ======================================================= 24 · responsive */
@media (max-width:1180px){
  .caps .cap-item{ grid-column:span 6; }
  .caps .cap-vp{ grid-column:span 6; }
  .rail{ display:none; }
}
@media (max-width:1000px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .split{ grid-template-columns:1fr; gap:26px; }
  .split .col-r{ padding-top:0; }
  .tiers,.works,.tbds{ grid-template-columns:1fr; }
  .chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-card{ display:none; }
  .step{ grid-template-columns:auto minmax(0,1fr); }
  .step .col3{ grid-column:2; }
  .logobar{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* The full company name is long, and at phone widths it filled the whole bar
   and pushed the menu button off the screen entirely — the mobile nav was
   unreachable. The name still renders in full (R4); it is just set smaller,
   and the bar is allowed to shrink around the button, which never does. */
@media (max-width:640px){
  .brand{ min-width:0; flex:0 1 auto; }
  .brand-txt{ min-width:0; }
  .brand-mark{ width:32px; }
  .brand-name{ font-size:11px; letter-spacing:.13em; white-space:nowrap; }
  .brand-sub{ font-size:7.5px; letter-spacing:.17em; white-space:nowrap; }
  .burger{ flex:0 0 44px; margin-right:-10px; }
}
@media (max-width:400px){
  .brand-sub{ display:none; }
  .brand-name{ font-size:10.5px; letter-spacing:.10em; }
}

@media (max-width:720px){
  :root{ --nav-h:66px; }
  body{ font-size:16px; }
  .sec{ min-height:0; padding-block:clamp(66px,11vh,96px); }

  /* The hero's lower furniture is pinned to the viewport on desktop. On a
     phone four stacked chips are taller than the space under the headline,
     so it rides over the copy — put it back in normal flow instead and let
     the hero grow. */
  .hero{ min-height:auto; padding-bottom:44px; }
  .hero-foot{ position:static; margin-top:34px; }
  .hero .chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cue{ padding-bottom:0; padding-top:18px; }

  /* the longest headline line has to fit the frame before it is oversized */
  .display{ font-size:clamp(25px,7.6vw,104px); }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
  .caps .cap-item,.caps .cap-vp{ grid-column:1/-1; padding:22px 0 26px; }
  .chips{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .cinfo{ grid-template-columns:1fr; }
  .related{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .post-row{ grid-template-columns:1fr; gap:12px; }
  .post-row .meta{ order:3; }
  .step{ grid-template-columns:1fr; gap:12px; }
  .step .n{ font-size:22px; }
  .display{ max-width:none; }
  .btn{ width:100%; }
  .hero-cta .btn{ width:auto; }
  .fg{ height:min(26vh,220px); }
}
@media (max-width:420px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
}

/* ==================================================== 25 · reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .rv,.rv-w > i{ opacity:1!important; transform:none!important; }
  /* The plates still belong to their own section — only the blur-and-drift
     handoff is removed. Forcing them all visible would stack the hero's
     reeds over every chapter below it. */
  .fg{ filter:none!important; transform:none!important; }
  .fg.out{ opacity:0!important; }
  .pre{ display:none!important; }
}

/* ============================================================ 26 · print */
@media print{
  #world,.fg,.rail,.rail-prog,.pre,.burger,.mobnav{ display:none!important; }
  body{ background:#fff; color:#000; }
  .page::before{ display:none; }
}

/* ================================================== 27 · comparison table */
.cmp{
  width:100%; border-collapse:collapse; min-width:660px;
  font-size:14px;
}
.cmp th,.cmp td{
  text-align:left; padding:15px 18px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.cmp thead th{
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); border-bottom-color:rgba(226,231,234,.22);
  white-space:nowrap;
}
.cmp tbody th{
  font-weight:400; color:var(--bone); width:38%;
}
.cmp tbody th .cn{
  display:inline-block; min-width:2.4ch;
  color:var(--signal); font-size:10.5px; font-weight:600; letter-spacing:.14em;
}
.cmp td{ color:var(--bone-dim); }
.cmp td.n{ color:var(--dim); }
.cmp td.y::before{
  content:''; display:inline-block; width:10px; height:5.5px; margin-right:9px;
  border-left:1px solid var(--signal); border-bottom:1px solid var(--signal);
  transform:rotate(-45deg) translateY(-2px);
}
.cmp tbody tr:hover{ background:rgba(226,231,234,.022); }

/* ============================================================= 28 · faq */
.faq{ display:flex; flex-direction:column; }
.faq details{
  border-top:1px solid var(--line);
}
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:22px 44px 22px 0; position:relative;
  font-size:clamp(16px,1.5vw,20px); font-weight:300; letter-spacing:-.016em;
  color:var(--bone);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--signal); }
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transform-origin:center;
  transition:transform .34s var(--ease);
  color:var(--muted);
}
.faq details[open] summary::after{ transform:rotate(-135deg); color:var(--signal); }
.faq .ans{ padding:0 0 24px; max-width:var(--col); }
.faq .ans p{ margin:0; color:var(--bone-dim); font-size:15px; line-height:1.66; }

@media (max-width:720px){
  .faq summary{ font-size:16px; padding-right:36px; }
  .cmp th,.cmp td{ padding:12px 14px; }
}

/* ======================================================== 29 · portrait */
.portrait{ margin:0; max-width:186px; }
.portrait img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:3px;
  /* the photograph is graded to sit on a near-black page; this just keeps
     the join between image edge and page from reading as a hard rectangle */
  box-shadow:0 0 0 1px rgba(6,8,11,.6), 0 18px 40px rgba(0,0,0,.45);
}

/* ================================================ 30 · scrollable table */
/* The comparison table is wider than a phone. It scrolls inside its own box
   rather than the page, takes focus so it can be scrolled from the keyboard,
   and fades at the right edge so it is visibly a scroller. */
.tscroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--muted) transparent;
}
.tscroll:focus-visible{ outline:2px solid var(--signal); outline-offset:4px; }
.tscroll::-webkit-scrollbar{ height:6px; }
.tscroll::-webkit-scrollbar-thumb{ background:var(--muted); border-radius:3px; }
.tscroll::-webkit-scrollbar-track{ background:rgba(226,231,234,.05); }

@media (max-width:720px){
  /* a hint that there is more table to the right */
  .tscroll{
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .tscroll:focus-visible{ mask-image:none; -webkit-mask-image:none; }
}

/* ========================================================= 31 · booking */
.booking{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  border:1px solid var(--line); border-radius:3px;
  background:rgba(11,16,22,.66);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:clamp(26px,3.4vw,52px);
}
.booking .display-3{ margin-top:10px; }
.booking-action .btn{ width:100%; }
.booking-action .small a{ color:var(--signal); }

/* the calendar itself, once someone has asked for it */
/* The page declares a dark colour-scheme, and the browser paints an opaque
   backdrop behind a cross-origin iframe that has not opted in — which is
   where the white slab around Calendly comes from, not from Calendly itself.
   Declaring a scheme on the embed stops the UA supplying its own. */
.cal-host,
.cal-host .calendly-inline-widget,
.cal-host iframe{ color-scheme:light; }

.cal-host{
  margin-top:clamp(20px,2.4vw,32px);
  border:1px solid var(--line); border-radius:3px;
  background:#0d1224;              /* matches the widget's own background_color */
  overflow:hidden;
  min-height:700px;
}
.cal-host[hidden]{ display:none; }
.cal-note{
  margin:0; padding:22px 24px;
  font-size:14px; line-height:1.6; color:var(--bone-dim);
  background:var(--ink-2);
}
.cal-note a{ color:var(--signal); }

/* the arrival CTA on the home page */
.arrive{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(18px,3vw,44px);
  border-top:1px solid var(--line);
  padding-top:clamp(24px,3vw,40px);
}
.arrive-line{
  margin:10px 0 0;
  font-size:clamp(17px,1.6vw,22px); font-weight:300; line-height:1.4;
  color:var(--bone); max-width:34ch; letter-spacing:-.014em;
}

@media (max-width:900px){
  .booking{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width:720px){
  .booking{ padding:24px 20px; }
  .arrive{ flex-direction:column; align-items:stretch; }
  .arrive .btn{ width:100%; }
  .cal-host{ min-height:640px; }
}

/* the quiet second route under the booking panel */
.booking-alt{
  margin:clamp(16px,2vw,24px) 0 0;
  font-size:15px; color:var(--bone-dim);
}
.booking-alt a{ color:var(--signal); text-decoration:none; border-bottom:1px solid rgba(243,166,60,.4); }
.booking-alt a:hover{ border-bottom-color:var(--signal); }

/* honeypot — off-screen rather than display:none, which some bots skip */
.vh-hp{
  position:absolute!important; left:-9999px!important; top:auto!important;
  width:1px!important; height:1px!important; opacity:0!important;
  pointer-events:none!important;
}
.form-ok.bad{
  border-color:rgba(255,122,60,.45);
  background:rgba(255,122,60,.07);
}

/* ================================================ 32 · real client work */
/* The counterpart to .concept. That badge existed to mark work that was
   self-initiated; this one marks work that was delivered and paid for. */
.client{
  display:inline-flex; align-items:center; gap:7px;
  font-size:9.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:#0a0500; background:var(--signal);
  padding:6px 11px; border-radius:2px; margin-bottom:16px;
}
.client::before{ content:''; width:5px; height:5px; background:#0a0500; border-radius:50%; }

.quote{ margin:0; }
.quote blockquote{
  margin:0;
  font-size:clamp(19px,2.05vw,28px); line-height:1.42; font-weight:250;
  letter-spacing:-.018em; color:var(--bone);
  border-left:2px solid var(--signal);
  padding-left:clamp(18px,2vw,28px);
}
.quote figcaption{
  margin-top:22px; padding-left:clamp(18px,2vw,28px);
  display:flex; flex-direction:column; gap:5px;
}
.quote .who{ font-size:14px; color:var(--bone); font-weight:500; }
.quote .role{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

/* the testimonial trio on the about page, now carrying real quotes */
.tcard{
  border:1px solid var(--line); border-radius:3px;
  padding:clamp(22px,2.2vw,32px);
  display:flex; flex-direction:column; gap:20px;
  background:rgba(11,16,22,.5);
  transition:border-color .4s var(--ease);
}
.tcard:hover{ border-color:rgba(226,231,234,.22); }
.tcard blockquote{
  margin:0; font-size:15.5px; line-height:1.6; color:var(--bone-dim); font-weight:300;
}
.tcard .who{ display:block; font-size:13px; color:var(--bone); }
.tcard .role{
  display:block; margin-top:5px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.tcard figcaption{ margin-top:auto; }

/* a plain named client strip — set in type, never invented logos */
.clientstrip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line-soft);
}
.clientstrip div{
  background:var(--ink); padding:26px 18px; text-align:center;
}
.clientstrip .n{
  display:block; font-size:15px; font-weight:400; color:var(--bone); letter-spacing:-.012em;
}
.clientstrip .s{
  display:block; margin-top:7px;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:900px){
  .clientstrip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .quote blockquote{ padding-left:16px; }
  .quote figcaption{ padding-left:16px; }
}

/* four client cards rather than three concept builds */
.works.four{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.work blockquote{
  margin:0; font-size:14px; line-height:1.56; color:var(--bone-dim);
  font-style:italic; font-weight:300;
}
.work .attrib{
  margin:0; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:1180px){ .works.four{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1000px){ .works.four{ grid-template-columns:1fr; } }

/* quotes differ in length, so pin the link to the bottom of every card */
.work .bd .arrow{ margin-top:auto; }
.work .top h3{ min-height:2.3em; }

/* four testimonials rather than three */
.tbds.four{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1180px){ .tbds.four{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .tbds.four{ grid-template-columns:1fr; } }

/* ============================================================ 33 · tagline */
/* The mission statement gets its own line at the head of the colophon,
   set at display scale with air around it, rather than shrinking into
   the small print with the copyright. */
.tagline{
  margin:0 0 clamp(38px,5vw,64px);
  padding-bottom:clamp(26px,3.4vw,44px);
  border-bottom:1px solid var(--line);
  font-size:clamp(23px,3.1vw,44px);
  font-weight:200; line-height:1.15; letter-spacing:-.03em;
  color:var(--bone);
  max-width:22ch;
}