/* the type ships from this folder (Google's own Latin files, two of them variable weight), so first paint never waits on a third-party stylesheet */
@font-face{font-family:"Outfit";font-style:normal;font-weight:600 800;font-display:swap;src:url("../assets/fonts/outfit-600-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("../assets/fonts/plus-jakarta-sans-400-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --canvas:#1A1512;--canvas-2:#1F1915;--panel:#26201B;--panel-2:#2D2620;
  --line:#3D332C;--line-strong:#7A695B;
  --accent:#C05008;--accent-hover:#9A3F06;--accent-muted:rgba(192,80,8,.16);
  --brass:#D9A25B;--chalk:#F2EDE6;
  --text-primary:#F2EDE6;--text-secondary:#B5ABA1;--on-accent:#FFFBF5;
  --display:"Outfit","Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --ease-lift:cubic-bezier(.2,.5,.3,1);   /* the button lift: moves in the first frame (0.52px of 3px) and keeps travelling to 240ms. Two wrong versions preceded it: cubic-bezier(.16,1,.3,1) arrived almost instantly and then crawled (a twitch), and cubic-bezier(.34,.12,.24,1) did nothing perceptible for 60ms (a delay). */
  --tshadow-hero:0 1px 2px rgba(5,5,10,.98),0 2px 6px rgba(5,5,10,.92),0 6px 18px rgba(5,5,10,.88);   /* the hero copy stands on open footage with no box behind it; three tight layers only, wide blurs cost too much to repaint (see .hero-copy) */
  --tshadow-soft:0 1px 2px rgba(5,5,10,.9),0 2px 12px rgba(5,5,10,.7);   /* for text that enters with a transition: a wide blur is re-rastered every time a layer is made, so entering text gets the light one */
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-size:1.0625rem;line-height:1.6;font-weight:400;opacity:0;animation:pagein .7s var(--ease) forwards}
@keyframes pagein{to{opacity:1}}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.014em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:12px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:8px;z-index:100;text-decoration:none}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:500}
.lede{color:var(--text-secondary);font-size:1.125rem;max-width:56ch}
/* buttons: a quiet 3px lift with a soft shadow underneath on hover, the face darkens, the press settles back; no sweep, no glow (2026-09-11, "too flashy").
   will-change keeps every button on its own compositor layer from the start. Without it the first hover frame had to promote the button and repaint the layer
   it left, and under the hero copy that repaint redraws the five-layer text shadow: the hero pair sat still for 35 to 60 ms and then jumped, while the form
   button on its plain panel moved at once (2026-09-16, "rigid and slow"). The easing was never the difference; the stall was. */
.btn{position:relative;isolation:isolate;display:inline-block;padding:15px 26px;border-radius:12px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:transform .24s var(--ease-lift),background-color .3s var(--ease),border-color .3s var(--ease);will-change:transform;cursor:pointer;letter-spacing:.01em}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;box-shadow:0 8px 20px -6px rgba(192,80,8,.35);opacity:0;transition:opacity .24s var(--ease-lift)}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0) scale(.99);transition-duration:.1s}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{border-color:var(--line-strong);color:var(--text-primary);background:rgba(23,21,15,.35)}
.btn.ghost::after{box-shadow:0 8px 20px -6px rgba(217,162,91,.18)}
.btn.ghost:hover{border-color:var(--brass);background:rgba(217,162,91,.1)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- no fixed background layer: a static grain painted into the scrolling content is the cheapest possible ground ---------- */
.grained{background-color:var(--canvas);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");background-size:240px 240px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);transition:background-color .6s var(--ease),border-color .6s var(--ease);border-bottom:1px solid transparent}
.nav.solid,.nav.open{background:rgba(26,21,18,.94);border-color:var(--line)}   /* solid below the hero, and whenever the phone menu is open so header and menu read as one panel */
/* over the hero the nav is transparent, so its text carries its own shadow; the solid state drops it.
   Every nav link rule excludes the button (2026-09-16): .nav ul a out-ranks .btn, and its transition once replaced the button's, so the
   nav button snapped up with no rise while every other button rose. The button takes nothing from the link rules but its place in the list. */
.nav .brand,.nav ul a:not(.btn){text-shadow:0 1px 2px rgba(5,5,10,.9),0 2px 12px rgba(5,5,10,.75)}
.nav.solid .brand,.nav.solid ul a:not(.btn),.nav.open .brand{text-shadow:none}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.brand svg{width:26px;height:26px}
.brand small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--text-secondary);font-weight:400;margin-top:4px;text-transform:uppercase}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;align-items:baseline}
.nav ul a:not(.btn){text-decoration:none;font-size:1rem;font-weight:500;color:var(--chalk);transition:color .3s var(--ease)}
.nav ul a:not(.btn):hover{color:var(--brass)}   /* plain links turn brass; the button keeps its own hover (it used to inherit this and turned yellow, 2026-09-11) */
.nav .btn{padding:11px 18px;font-size:1rem}   /* the compact nav size; everything else comes from .btn */
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;cursor:pointer;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){
  .nav ul{display:none}
  .nav.open ul{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(23,21,15,.96);border-bottom:1px solid var(--line);padding:10px var(--gutter) 20px}
  .nav.open ul a:not(.btn){display:block;padding:14px 0;font-size:1.1rem;border-bottom:1px solid var(--line);text-shadow:none}
  /* the call to action closes the phone menu as a full-width button */
  .nav.open .btn{display:block;margin-top:16px;padding:15px 18px;text-align:center;font-size:1.05rem}
  .nav-toggle{display:inline-block}
}

/* ---------- hero: Chris's story plays once on every visit and holds its last frame, which is also the resting still under it ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;z-index:1;background:var(--canvas) url("../assets/hero-poster-rest-2560.jpg") 55% 50%/cover no-repeat}
.hero.opening{background-image:url("../assets/hero-poster-start-2560.jpg")}   /* the story's first frame, under the story on a first visit, so it starts without a jump */
.hero-media{position:absolute;inset:0}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%;opacity:0;transition:opacity .5s var(--ease)}
/* the portrait cut is already centered on the bob, whatever shape the viewport is in; this class follows the file attached, not the media query */
.hero.cut-portrait .hero-media video{object-position:50% 50%}
.hero.intro #hero-intro{opacity:1}
#hero-intro{z-index:1}
/* no shade box behind the copy (2026-09-15, the user asked for it gone): the text carries its own
   legibility through --tshadow-hero and the footage's baked-in fades; the legibility self-test holds
   every hero line at 4.5:1 or better against its own ground.
   Why the shadow is three tight layers and the copy has will-change (2026-09-25, the phone pop-in):
   phones discard the copy layer's texture while it is scrolled away and repaint it on the way back.
   With the old 46px and 90px blur layers that repaint measured 197ms across six tiles at dpr 3 under
   4x throttle, and the copy visibly popped in late; at 18px max it is 0.7ms on one tile. Do not add
   wide blur layers back, and keep the will-change: one small texture, never repainted by scrolling. */
.hero-copy{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(44vw,640px);text-shadow:var(--tshadow-hero);z-index:2;will-change:transform}
.hero-copy .kicker{display:block;margin-bottom:18px}
.hero h1{font-size:clamp(2.4rem,4.9vw,4.6rem);max-width:14ch}
.hero-copy .by{display:flex;align-items:flex-start;gap:12px;margin-top:16px;font-size:clamp(.92rem,1.05vw,1.02rem);font-weight:500;color:var(--brass);max-width:44ch}   /* the headline is the president's line: his name under it behind a short brass rule that does the work of a dash (2026-09-28) */
.hero-copy .by::before{content:"";flex:none;width:26px;height:0;border-top:1px solid currentColor;margin-top:.74em}   /* a border, not a background: it keeps its colour in forced-colors mode */
.hero-copy .line{margin-top:22px;font-size:clamp(1rem,1.35vw,1.25rem);color:var(--chalk);max-width:44ch}
.hero-copy .cta-row{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-copy .btn{text-shadow:none}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  /* on phones the copy sits high so the bob's landing at the bottom of the frame stays in view */
  .hero{min-height:600px;background-position:55% 50%}
  .hero-copy{top:max(88px,12vh);bottom:auto;transform:none;width:auto;right:var(--gutter)}
  .hero h1{font-size:clamp(2.1rem,8vw,3.4rem)}
  .hero-copy .by{font-size:.92rem;margin-top:12px}
  .hero-copy .line{font-size:1.02rem;max-width:40ch;margin-top:16px}
  .hero-copy .cta-row{margin-top:24px}   /* the attribution takes two lines here; the block sits a little higher and tighter so the buttons stay clear of the bob's cap on short screens (2026-09-28; the phone self-test measures the clearance) */
  .hero-copy .cta-row .btn{flex:1 1 0;text-align:center;padding-left:14px;padding-right:14px}
}
@media (max-width:720px) and (max-height:700px){
  /* short phones (an iPhone SE class screen gives the hero its 600px minimum): the stack tightens further so the buttons end above the bob's cap; the phone self-test measures it at 375x600 and 360x640 */
  .hero-copy{top:84px}
  .hero-copy .by{margin-top:10px;font-size:.9rem;line-height:1.3}
  .hero-copy .line{margin-top:14px;font-size:.98rem;line-height:1.5}
  .hero-copy .cta-row{margin-top:18px}
}
@media (max-aspect-ratio: 7/10){
  /* tall phones get the 9:16 posters, framed on the bob. A wide cut shown in a tall viewport sits at 57.5%: with cover scaling that puts the bob dead center, the same window the portrait cut shows, so the two cuts never disagree about where the bob is */
  .hero{background-image:url("../assets/hero-poster-rest-portrait-1080.jpg");background-position:50% 50%}
  .hero.opening{background-image:url("../assets/hero-poster-start-portrait-1080.jpg")}
  .hero-media video{object-position:57.5% 50%}
}
@media (max-aspect-ratio: 7/10) and (max-width:1024px){
  /* the string hangs at 47.08% of the portrait cut's width (measured on the portrait poster), which under cover scaling is
     50vw minus 2.92% of the scaled video width, max(100vw, 56.25svh, 337.5px) (the hero is 100svh tall, at least 600px).
     The first button ends half the 12px gap short of that line, so the gap between the two buttons centers on the string
     exactly, whatever the browser chrome leaves of the viewport (2026-09-25, the user asked for the string precisely mid-gap).
     A single object-position cannot do this: the offset it needs varies with the viewport's shape, and a width-fitted
     viewport (aspect at or above 9/16) gives it no slack at all. Browsers without svh in calc keep the even split above. */
  .hero-copy .cta-row .btn{padding-left:10px;padding-right:10px;white-space:nowrap}   /* the string side is the narrow one; both labels stay on one line, both buttons keep one look */
  .hero-copy .cta-row .btn:first-child{flex:0 1 calc(50vw - .0292*max(100vw, 56.25svh, 337.5px) - var(--gutter) - 6px)}
}

/* ---------- sections ---------- */
main{position:relative;z-index:2}
section.block{position:relative;padding:clamp(72px,10vw,140px) var(--gutter)}
.wrap{max-width:1180px;margin:0 auto;position:relative}
.rule{height:1px;margin:0 auto;max-width:1180px;background:repeating-linear-gradient(90deg,var(--brass) 0 6px,transparent 6px 14px);opacity:.45;transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out)}
.rule.in{transform:scaleX(1)}
.h2{font-size:clamp(2rem,3.9vw,3.5rem);max-width:18ch}
.part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)}
.in .part{opacity:1;transform:none}
.in .part:nth-child(2){transition-delay:.09s}.in .part:nth-child(3){transition-delay:.18s}.in .part:nth-child(4){transition-delay:.27s}.in .part:nth-child(5){transition-delay:.36s}.in .part:nth-child(6){transition-delay:.45s}
.in.settled .part:nth-child(n){transition-delay:0s}
@media (max-width:720px){
  /* phones: shorter, closer entrances, so the layers a transition creates live briefly, and anchors land clear of the fixed nav */
  .part{transform:translateY(14px);transition-duration:.55s,.7s}
  section.block{scroll-margin-top:16px}
}

/* A: the promise */
#about .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,96px);align-items:start}
#about .h2{margin:18px 0 26px}
#about .copy p+p{margin-top:16px}
.pillars{list-style:none;margin:0;padding:0}   /* no rule above the first pillar (2026-09-15): each row is closed by its own bottom border */
.pillars li{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:baseline;position:relative}
.pillars .n{font-family:var(--mono);color:var(--brass);font-size:.85rem}
.pillars strong{display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.pillars span{color:var(--text-secondary);display:block;margin-top:8px}
.pillars li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width 1.4s var(--ease-out)}
.in .pillars li::after{width:64px}
/* the first pillar once carried a breathing orange glow (.pulse); the user saw it as a darker box behind that row, and it was the page's last self-running animation, so it is gone (2026-09-15) */

/* B: the scope board */
#services{background:var(--canvas-2)}
#services .head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:48px}
#services .head .lede{margin-top:14px}
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.group{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px 22px;position:relative;overflow:hidden;transition:border-color .5s var(--ease),transform .7s var(--ease-out)}
.group:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.group:nth-child(1),.group:nth-child(2),.group:nth-child(3){grid-column:span 2}
.group:nth-child(4),.group:nth-child(5){grid-column:span 3}
.group svg{width:38px;height:38px;color:var(--brass);margin-bottom:16px}
.group svg path,.group svg rect,.group svg circle,.group svg line{stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.6s var(--ease-out)}
.in .group svg path,.in .group svg rect,.in .group svg circle,.in .group svg line{stroke-dashoffset:0}
.group h3{font-size:1.3rem;font-weight:700;margin-bottom:14px}
.group ul{list-style:none;margin:0;padding:0}
.group li{padding:8px 0;border-top:1px solid var(--line);color:var(--text-secondary);font-size:.98rem;display:flex;gap:10px;align-items:baseline}
.group li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:none;transform:translateY(-3px);opacity:.7}
.group .tag{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--text-secondary)}
.board-note{margin-top:28px;color:var(--text-secondary);font-size:1.05rem;max-width:60ch}
@media (max-width:1000px){.group:nth-child(n){grid-column:span 3}}
@media (max-width:640px){.group:nth-child(n){grid-column:span 6}#services .head{grid-template-columns:1fr}}

/* C: how we work */
#process .h2{margin:18px 0 10px}
#process .h2.triplet{max-width:none}
.steps{margin-top:56px;display:grid;gap:clamp(40px,7vw,96px)}
.step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.step:nth-child(even) .media{order:2}
.step:nth-child(2){transform:translateX(clamp(0px,4vw,60px))}
.step:nth-child(3){transform:translateX(clamp(0px,-2vw,-30px))}
.media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--panel);border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover}
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,21,15,0) 55%,rgba(23,21,15,.55) 100%);pointer-events:none}
.media .num{position:absolute;left:18px;bottom:14px;font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--chalk);text-shadow:var(--tshadow-soft)}
.step h3{font-size:1.9rem;margin:10px 0 14px}
.step .kicker{color:var(--text-secondary)}
.step p{color:var(--text-secondary);max-width:46ch;font-size:1.06rem}
.step .mark{width:44px;height:2px;background:var(--accent);margin-bottom:22px;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out) .3s}
.in .step .mark{transform:scaleX(1)}
@media (max-width:800px){.step{grid-template-columns:1fr}.step:nth-child(even) .media{order:0}.step:nth-child(n){transform:none}}
@media (max-width:720px){#process .h2.triplet{font-size:min(2rem,7.2vw)}}   /* each phrase of the triplet stays on its own line down to 320px wide ("Consistent communication." measures 12.1 times the font size) */

/* D: the sign-off (interactive) */
#signoff{background:var(--canvas-2);text-align:center}
#signoff .h2{margin:18px auto 14px;max-width:18ch}
#signoff .lede{margin:0 auto}
.hold{margin:44px auto 0;display:inline-flex;align-items:center;gap:16px;padding:0;border:none;background:none;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
.hold .disc{position:relative;width:96px;height:96px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;background:var(--panel);transition:border-color .4s var(--ease),transform .6s var(--ease-out),background-color .4s var(--ease)}
.hold:hover .disc{border-color:var(--brass);background:var(--panel-2);transform:scale(1.05)}
.hold.holding .disc{transform:scale(.96)}
.hold .disc svg{position:absolute;inset:-1px;width:98px;height:98px;transform:rotate(-90deg)}
.hold .disc circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:302;stroke-dashoffset:calc(302 * (1 - var(--p,0)))}
.hold .disc .bob{position:relative;inset:auto;width:26px;height:26px;color:var(--brass)}
.hold .label{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);transition:color .4s var(--ease)}
.hold.done .label{color:var(--brass)}
.punch{list-style:none;margin:44px auto 0;padding:0;max-width:520px;text-align:left;border-top:1px solid var(--line)}
.punch li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--text-secondary);font-size:1.08rem;transition:color .5s var(--ease)}
.punch li.lit{color:var(--text-primary)}
.punch svg{width:22px;height:22px;flex:none}
.punch circle{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.punch path{fill:none;stroke:var(--brass);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .6s var(--ease-out)}
.punch li.lit path{stroke-dashoffset:0}
.punch li.lit circle{stroke:var(--brass)}
.signed{margin-top:28px;font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;color:var(--brass);opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .9s var(--ease-out)}
.signed.show{opacity:1;transform:none}

/* E: who we work with */
#clients{padding:0}
.banner{position:relative;min-height:70vh;display:grid;align-items:end;overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,21,15,.2) 0%,rgba(23,21,15,.55) 50%,rgba(23,21,15,.96) 100%)}
.banner .panel{position:relative;z-index:1;margin:0 auto;max-width:1180px;width:100%;padding:clamp(120px,18vw,220px) var(--gutter) clamp(56px,7vw,90px);text-shadow:var(--tshadow-soft)}
.banner .h2{margin:18px 0 20px}
.banner p{max-width:62ch;font-size:1.1rem;color:var(--chalk)}
/* the two routes a job takes to KG, drawn as a static flow: a grey rail per route, both running into one brass line beside the card; nothing moves on its own */
.flow{padding:56px var(--gutter) 72px;border-top:1px solid var(--line);background:var(--canvas-2)}
.flow-head{max-width:1180px;margin:0 auto 44px}
.flow-head .kicker{color:var(--text-secondary)}
.flow-head h3{font-size:clamp(1.5rem,2.3vw,2rem);margin-top:10px;font-weight:700;max-width:24ch}
.flow-head p{max-width:64ch;margin-top:16px;color:var(--text-secondary);font-size:1.04rem}
.lanes{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,24vw,300px);align-items:stretch}
.lane{grid-column:1;display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,3fr);border-top:1px solid var(--line-strong);padding-bottom:36px}
.lane+.lane{padding-bottom:0}
.lane-tag{position:relative;padding:20px 28px 0 0}
.lane-tag::before,.stop::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--brass);transition:transform .35s var(--ease-out)}
.lane-tag::before{background:var(--canvas-2);border:1px solid var(--brass)}
.lane-tag .idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.lane-tag .name{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;line-height:1.12;color:var(--text-primary);margin-top:8px}
.lane-tag .sub{font-size:.92rem;color:var(--text-secondary);margin-top:8px;max-width:22ch}
.stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stop{position:relative;padding:20px 26px 0 0}
.stop:hover::before{transform:scale(1.5)}
.stop b{display:block;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.2;letter-spacing:-.005em;color:var(--text-primary)}
.stop p{font-size:.92rem;color:var(--text-secondary);margin-top:8px;max-width:30ch}
.merge{grid-column:2;grid-row:1 / span 2;position:relative;margin-left:36px;background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;justify-content:center;transition:border-color .4s var(--ease)}
.merge:hover{border-color:var(--line-strong)}
.merge::before{content:"";position:absolute;left:-36px;top:0;bottom:0;width:1px;background:var(--brass)}
.merge::after{content:"";position:absolute;left:-36px;top:50%;width:36px;height:1px;background:var(--brass)}
.merge .pin{position:absolute;left:-42px;top:-6px;width:13px;height:13px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px var(--canvas-2)}
.merge .name{font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-.01em;line-height:1.12;color:var(--text-primary)}
.merge .sub{font-size:.95rem;color:var(--text-secondary);margin-top:10px;max-width:26ch}
/* the route icons and the hard hat (the 3D one from js/hat.js, faded in when it is ready; the spot stays empty until then, and the user asked that no flat drawing stand in for it, 2026-10-09) */
.lane-icon{width:26px;height:26px;display:block;margin-bottom:10px;color:var(--brass)}
.lane-icon *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.merge .hat{position:relative;width:200px;height:150px;margin:0 auto 18px;touch-action:pan-y}
.hat canvas{position:absolute;inset:0;width:100%;height:100%;display:block;animation:hat-in .6s var(--ease) both}
@keyframes hat-in{from{opacity:0}}
@media (max-width:1100px){
  .lanes{grid-template-columns:1fr}
  .merge{grid-column:1;grid-row:auto;margin:36px 0 0;flex-direction:row;align-items:center;gap:22px;padding:24px 28px}
  .merge::before,.merge::after,.merge .pin{display:none}
  .merge .hat{width:120px;height:90px;margin:0;flex:0 0 120px}
  .merge .sub{max-width:56ch}
}
@media (max-width:720px){
  .lane{grid-template-columns:1fr;border-top:none;border-left:1px solid var(--line-strong);padding:0 0 32px 22px}
  .lane+.lane{padding-bottom:0}
  .lane-tag{padding:0 0 4px}
  .lane-tag::before{left:-27px;top:5px}
  .stops{grid-template-columns:1fr}
  .stop{padding:18px 0 0}
  .stop::before{left:-27px;top:24px}
  .merge{margin-top:32px;gap:16px;padding:22px}
  .merge .hat{width:96px;height:72px;flex-basis:96px}
}

/* F: questions */
#faq .h2{margin:18px 0 40px}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,72px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child,.faq details:nth-last-child(2){border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--display);font-size:1.2rem;position:relative;font-weight:600;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);transform:translateY(-70%) rotate(45deg);transition:transform .5s var(--ease-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.faq details[open] .a{grid-template-rows:1fr}
.faq .a>div{overflow:hidden}
.faq .a p{padding:0 0 24px;color:var(--text-secondary);max-width:50ch}
@media (max-width:800px){.faq{grid-template-columns:1fr}.faq details:nth-last-child(2){border-bottom:none}}

/* G: start a project */
#contact{overflow:hidden;background:var(--canvas)}
/* the backdrop is a lazy image, not a CSS background, so it no longer downloads alongside the hero descent on first load */
#contact .bg{position:absolute;inset:0;opacity:.28}
#contact .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
#contact .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,21,15,.95) 0%,rgba(23,21,15,.75) 50%,rgba(23,21,15,.35) 100%)}
#contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:start}
#contact .h2{margin:18px 0 20px}
#contact .lede{margin-bottom:26px}
.direct{font-family:var(--mono);font-size:.9rem;color:var(--text-secondary)}
.direct a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .3s var(--ease)}
.direct a:hover{border-color:var(--brass)}
form{background:rgba(34,31,23,.9);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,36px)}
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field select,.field textarea{width:100%;background:rgba(23,21,15,.7);border:1px solid var(--line-strong);border-radius:10px;padding:13px 14px;color:var(--text-primary);font:inherit;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass)}   /* the page's own focus ring stays for keyboard users */
.field textarea{min-height:120px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field[hidden]{display:none}
form .btn{width:100%;margin-top:6px}
/* the notice stays in the page while empty (a live region that is always there), and takes its box only once it has text */
.success{padding:22px;border:1px solid var(--brass);border-radius:12px;background:var(--accent-muted);color:var(--chalk);margin-top:16px;font-size:1.05rem}
.success:empty{padding:0;border:0;margin:0;height:0;overflow:hidden}
.success.soft{border-color:var(--line-strong);background:var(--panel)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
#send[disabled]{opacity:.7;cursor:progress;transform:none}
#send[disabled]::after{opacity:0}
@media (max-width:860px){#about .grid,#contact .grid{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

/* footer */
footer{position:relative;z-index:2;padding:48px var(--gutter);border-top:1px solid var(--line);background:var(--canvas)}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
footer p{color:var(--text-secondary);font-size:.95rem;margin-top:10px}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
footer ul a{text-decoration:none;color:var(--text-secondary);font-size:.95rem;transition:color .3s var(--ease)}
footer ul a:hover{color:var(--text-primary)}
footer .fine{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;margin-top:22px}
@media (max-width:700px){footer .wrap{grid-template-columns:1fr}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* reduced motion: final states, no drives, no video */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  body{opacity:1}
  .hero-media video{display:none}
  .part{opacity:1;transform:none}
  .rule{transform:scaleX(1)}
  .group svg *{stroke-dashoffset:0 !important}
  .step .mark{transform:scaleX(1)}
  .pillars li::after{width:64px}
  .punch li{color:var(--text-primary)}.punch path{stroke-dashoffset:0}.punch circle{stroke:var(--brass)}
  .signed{opacity:1;transform:none}
  .hold .disc circle{stroke-dashoffset:0}
  .step:nth-child(n){transform:none}
}