/* Fiberhand landing page, 2026-10-24 (later): Team AI Setup leads with a team-library demo and a time calculator;
   the Enquiry Desk keeps the inbox demo in its own section. Who-you-deal-with + questions, prefilled emails.
   2026-10-24 (visual pass): header fits 1281–1440, type/spacing tokens, one eyebrow style, calmer compositor-only loops,
   gentler magnetic/tilt, demo height reserved, phone bar hides over the hero, Close label on the phone menu.
   2026-10-24 (audit fixes): demo shows its draft on load, CTAs say what the reply gives, visible address + copy button
   for visitors without a mail app, share card / canonical / JSON-LD (noindex stays until launch).
   Motion patterns are vanilla re-implementations of: Aceternity UI (Spotlight, Grid background, 3D card, Moving border,
   Sticky scroll reveal, Card spotlight, Timeline beam, Lamp), React Bits (BlurText, ShinyText, Particles, CountUp,
   LogoLoop marquee), Originkit (magnetic buttons). No build step, no external requests.
   Brand rules kept: lime only on dark olive, #3F5728 on light, focus rings never removed, reduced motion respected.
   Copy rules kept: no phone number, no prices, no registration claim, no first-person voice. */
:root{
  --deep:#161A14; --ink:#22281F; --ink-2:#434B3E; --ink-3:#5A6255;
  --paper:#F4F4F4; --card:#FFFFFF; --line:#DCDDD8; --tint:#ECEEE8;
  --hi:#B7EA72; --hi-hover:#C9F098; --hi-soft:#E5EEDB; --green:#3F5728;
  --dark-soft:#343B2F; --dark-rule:#58614F; --dark-line:rgba(225,229,219,.12); --on-dark:#E1E5DB; --on-dark-2:#CCD2C5;
  --radius:14px; --gutter:clamp(20px,5vw,40px); --ease:cubic-bezier(.2,.7,.3,1);
  --t1:.15s; --t2:.2s; --t3:.32s; --t4:.56s;
  --fs-h1:clamp(42px,4.8vw,68px); --fs-h2:clamp(32px,3.4vw,48px); --fs-h2-col:clamp(30px,3vw,44px); --fs-h3:24px;
  --section:clamp(80px,10vw,128px); --block:clamp(40px,5vw,56px);
  --sans:system-ui,-apple-system,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:var(--deep)}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--hi)}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--hi);color:var(--ink);padding:10px 14px;font-weight:700;z-index:60}
.skip:focus{top:10px}

/* Buttons. Primary lime (dark surfaces only), ghost on dark, solid ink on light. Magnetic pull added by JS. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:17px;text-align:center;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background var(--t1),border-color var(--t1),color var(--t1),box-shadow var(--t2),transform var(--t2) var(--ease)}
.btn .arr{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--hi);color:var(--ink);box-shadow:0 0 0 0 rgba(183,234,114,0)}
.btn-primary:hover{background:var(--hi-hover)}
@media (hover:hover){.btn-primary:hover{box-shadow:0 8px 32px -8px rgba(183,234,114,.55)}}
.btn-ghost{background:rgba(225,229,219,.04);color:var(--paper);border-color:rgba(225,229,219,.22)}
.btn-ghost:hover{background:rgba(225,229,219,.09);border-color:var(--on-dark-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--dark-soft)}

/* Header: transparent over the hero, frosted olive once the page scrolls. */
header.top{position:fixed;top:0;left:0;right:0;z-index:40;color:var(--paper);transition:background var(--t3),border-color var(--t3);border-bottom:1px solid transparent}
header.top.is-scrolled,header.top.is-open{background:rgba(22,26,20,.92);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom-color:var(--dark-line)}
header.top .wrap{display:flex;align-items:center;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-height:44px}
.brand-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#343B2F,#22281F);border:1px solid var(--dark-rule);color:var(--hi);font-weight:800;font-size:19px;line-height:1}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-weight:800;font-size:21px;letter-spacing:-.03em}
.brand .dot{color:var(--hi)}
.brand-tag{font-size:12px;font-weight:600;color:var(--on-dark-2);margin-top:3px;white-space:nowrap}
.top nav{display:flex;align-items:center;gap:clamp(14px,1.4vw,24px);font-size:15px;font-weight:600;white-space:nowrap}
.top nav a{text-decoration:none;color:var(--on-dark-2);border-bottom:2px solid transparent;padding:4px 0;transition:color .15s,border-color .15s}
.top nav a:hover,.top nav a[aria-current]{color:var(--hi);border-bottom-color:var(--hi)}
.nav-facts{display:none}
.top .btn{min-height:42px;font-size:15px;padding:0 18px;white-space:nowrap}
.cta-pill{font-size:12px;font-weight:800;line-height:1;color:var(--ink);background:var(--hi);border-radius:999px;padding:5px 8px}
.top .btn.is-hot{background:var(--hi);color:var(--ink);border-color:var(--hi)}
.top .btn.is-hot .cta-pill{background:var(--ink);color:var(--hi)}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--dark-rule);border-radius:6px;background:transparent;color:var(--paper);font:600 16px/1 var(--sans);cursor:pointer}
.menu-btn:hover{background:var(--dark-soft);border-color:var(--on-dark-2)}
.menu-btn:focus-visible{outline:2px solid var(--hi);outline-offset:3px}

/* Hero: grid + aurora + particles + cursor spotlight behind a two-column promise and product shot. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#2B3326 0%,var(--deep) 60%);color:var(--paper);padding:140px 0 0}
.hero-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--dark-line) 1px,transparent 1px),linear-gradient(90deg,var(--dark-line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);opacity:.55}
.aurora{position:absolute;inset:-20% -10% auto;height:90%;opacity:.5}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora i:nth-child(1){width:46vw;height:46vw;left:8%;top:-8%;background:radial-gradient(circle,rgba(183,234,114,.55),transparent 65%);animation:drift1 28s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;right:4%;top:-14%;background:radial-gradient(circle,rgba(92,140,70,.7),transparent 65%);animation:drift2 34s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:34vw;height:34vw;left:38%;top:12%;background:radial-gradient(circle,rgba(201,240,152,.28),transparent 65%);animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(12vw,6vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-10vw,10vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-6vw,-4vh) scale(1.2)}}
#particles{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.spot{position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(183,234,114,.09),transparent 60%);opacity:0;transition:opacity var(--t3) var(--ease)}
.hero:hover .spot{opacity:1}
.hero-main{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px 64px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid rgba(183,234,114,.28);background:rgba(183,234,114,.06);font-size:14px;font-weight:600;text-decoration:none}
.badge-dot{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--hi);color:var(--ink);font-size:12px;font-weight:800}
.badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.shiny{color:rgba(225,229,219,.7);background:linear-gradient(110deg,rgba(225,229,219,.7) 35%,#fff 50%,rgba(225,229,219,.7) 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s linear infinite}
@keyframes shine{from{background-position:100% 0}to{background-position:-150% 0}}
.hero h1{font-size:var(--fs-h1);font-weight:750;margin-top:26px;max-width:17ch}
.hero h1 .mark{background:linear-gradient(92deg,#B7EA72 0%,#DDF5B9 45%,#9FD45E 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{font-size:clamp(18px,1.6vw,20px);color:var(--on-dark-2);max-width:46ch;margin-top:26px}
.hero .lead b{color:var(--paper);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.pilot-note{display:flex;flex-wrap:wrap;gap:6px 24px;list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--dark-line);font-size:14px;font-weight:600;line-height:1.45;color:var(--on-dark-2)}
.pilot-note li{position:relative;padding-left:18px}
.cta-note{font-size:14px;line-height:1.55;color:var(--on-dark-2);max-width:52ch;margin-top:16px}
.cta-note b{color:var(--on-dark);font-weight:700}
.cta-alt{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.cta-note-c{margin:18px auto 0;text-align:center}
.copy-mail{font:inherit;font-size:13px;font-weight:700;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--dark-rule);background:transparent;color:var(--on-dark);cursor:pointer;transition:background var(--t1),border-color var(--t1),color var(--t1)}
.copy-mail:hover{background:rgba(225,229,219,.09);border-color:var(--on-dark-2)}
.copy-mail.is-done{border-color:var(--hi);color:var(--hi)}
.who .copy-mail{border-color:var(--ink-3);color:var(--green);margin-left:8px;vertical-align:2px}
.who .copy-mail:hover{background:var(--hi-soft);border-color:var(--green)}
.who .copy-mail.is-done{border-color:var(--green);color:var(--green)}
.pilot-note li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--hi);box-shadow:0 0 10px var(--hi)}

/* BlurText: words fade up out of a blur. Only when JS has split the text. */
.js .split .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.3em);animation:blurIn .7s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
.hero h1 .mark .w{background:inherit;-webkit-background-clip:text;background-clip:text}
@keyframes blurIn{to{opacity:1;filter:blur(0);transform:none}}

/* Product shot: 3D-tilt card with glare, typed draft, moving-border approve button. */
.ib-stage{perspective:1400px;min-width:0}
.ib-wrap{margin:0;transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}
.ib-cap{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:12px}
.ib-cap::before{content:"";width:18px;height:1px;background:var(--dark-rule)}
.ib-glow{position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(140deg,rgba(183,234,114,.6),rgba(183,234,114,0) 40%,rgba(183,234,114,0) 70%,rgba(183,234,114,.35));z-index:-1}
.ib-shell{position:relative;border-radius:16px;padding:1px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(225,229,219,.06)}
.inbox{position:relative;background:var(--card);color:var(--ink);border-radius:15px;overflow:hidden}
.inbox::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--gx,80%) var(--gy,0%),rgba(255,255,255,.35),transparent 45%);mix-blend-mode:soft-light}
.ib-chrome{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F7F7F4;border-bottom:1px solid var(--line)}
.ib-chrome i{width:10px;height:10px;border-radius:50%;background:#D5D8CF}
.ib-chrome span{margin-left:10px;font-size:12px;font-weight:600;color:var(--ink-3)}
.ib-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;font-weight:800}
.ib-count{font-size:12px;font-weight:600;color:var(--ink-3)}
.ib-list{list-style:none;margin:0;padding:0}
.ib-row{display:grid;grid-template-columns:10px minmax(0,1fr);gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ib-row:last-child{border-bottom:0}
.ib-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;background:#B9BFB2}
.ib-meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.ib-from{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ib-time{flex:none}
.ib-subj{font-size:15px;line-height:1.4;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-status{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;line-height:1.3;padding:4px 9px;border-radius:999px;background:var(--tint);color:var(--ink-2)}
.is-late .ib-dot{background:var(--ink)}
.is-late .ib-status{background:var(--ink);color:var(--hi)}
.is-draft{background:linear-gradient(90deg,rgba(229,238,219,.55),rgba(229,238,219,0))}
.is-draft .ib-dot{background:var(--green);box-shadow:0 0 0 4px rgba(63,87,40,.15)}
.is-draft .ib-status{background:var(--hi-soft);color:var(--green)}
.ib-draft{margin-top:10px;padding:11px 13px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:8px;background:#FCFCFA;font-size:14px;line-height:1.55;color:var(--ink-2);min-height:4.8em}
.ib-fill{background:var(--hi-soft);color:var(--green);font-weight:700;padding:0 4px;border-radius:3px;white-space:nowrap}
.js .ib-draft.split .w{animation-delay:calc(var(--i) * 45ms + 1100ms);animation-duration:.5s}
.ib-acts{display:flex;gap:8px;margin-top:10px}
.ib-acts span{font-size:12px;font-weight:700;padding:6px 12px;border-radius:7px;border:1px solid #C9CEBE;color:var(--ink-2)}
.mb{position:relative;display:inline-flex;padding:1.5px;border-radius:8px;overflow:hidden;isolation:isolate}
.mb::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;z-index:-1;background:conic-gradient(transparent 0 65%,#B7EA72 80%,transparent 95%);animation:spin 3.2s linear infinite}
.mb .ok{border:0!important;background:var(--green);color:#fff!important;border-radius:6.5px}
@keyframes spin{to{rotate:360deg}}
.ib-foot{padding:12px 18px 30px;font-size:12px;line-height:1.45;color:var(--ink-3);background:#F7F7F4;border-top:1px solid var(--line)}
.float-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:rgba(34,40,31,.96);border:1px solid var(--dark-line);color:var(--on-dark);font-size:13px;font-weight:600;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);transform:translateZ(60px)}
.float-chip b{color:var(--hi)}
.chip-a{left:24px;bottom:-20px}
.chip-b{right:-18px;top:-18px;animation:bob 8s ease-in-out infinite}
@keyframes bob{50%{translate:0 -8px}}

/* Marquee of principles (LogoLoop). */
.marquee{position:relative;margin-top:96px;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:22px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-list{display:flex;gap:56px;padding-right:56px;margin:0;list-style:none}
.mq-list li{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:16px;font-weight:600;color:var(--on-dark-2)}
.mq-list li::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--hi)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Stats with CountUp. Numbers are the founding setup's own terms, not performance claims. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.stats li{padding:44px 28px 52px 0}
.stats li+li{padding-left:28px;border-left:1px solid var(--dark-line)}
.stat-n{display:block;font-size:clamp(44px,5vw,64px);font-weight:750;letter-spacing:-.04em;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
.stat-n small{font-size:.45em;font-weight:700;letter-spacing:-.01em;color:var(--hi);margin-left:4px}
.stat-l{display:block;font-size:15px;line-height:1.45;color:var(--on-dark-2);margin-top:12px;max-width:22ch}

/* Section scaffolding. */
section{position:relative;padding:var(--section) 0}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.kicker::before{content:"";width:22px;height:2px;background:currentColor}
.dark .kicker{color:var(--hi)}
.sec-title{font-size:var(--fs-h2);font-weight:750;margin-top:16px;max-width:22ch}
.custom-head .sec-title,.ed .sec-title,.pilot-top .sec-title,.qa .sec-title{font-size:var(--fs-h2-col)}
.sec-intro{color:var(--ink-2);font-size:clamp(18px,1.5vw,20px);margin-top:20px;max-width:58ch}
.dark .sec-intro{color:var(--on-dark-2)}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--t4) var(--ease),transform var(--t4) var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* Where it slips: sticky scroll reveal on wide screens, stacked comparison rows otherwise. */
.costs{background:var(--paper)}
.slip{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:var(--block)}
.slip-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.slip-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .18s var(--ease),border-color .18s}
@media (hover:hover){.slip-item:hover{transform:translateY(-2px);border-color:var(--green)}}
.wk-day{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.slip-item h3{font-size:clamp(22px,2vw,26px);font-weight:700;margin-top:12px;letter-spacing:-.02em;line-height:1.2}
.slip-detail{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.pane{border-radius:10px;padding:20px 22px}
.wk-lab{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.3}
.wk-lab::before{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;letter-spacing:0}
.pane p+p{margin-top:10px;font-size:16px;line-height:1.55}
.pane-before{background:var(--tint);color:var(--ink-2)}
.pane-before .wk-lab{color:var(--ink-3)}
.pane-before .wk-lab::before{content:"–";border:1.5px solid var(--ink-3);color:var(--ink-3)}
.pane-after{background:var(--ink);color:var(--on-dark)}
.pane-after .wk-lab{color:var(--hi)}
.pane-after .wk-lab::before{content:"✓";background:var(--hi);color:var(--ink)}
.pane-after b{color:var(--paper)}
.slip-stage{display:none}
.wk-note{font-size:14px;color:var(--ink-3);margin-top:28px;max-width:60ch}
@media (min-width:1001px){
  .js-sticky.slip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
  .js-sticky .slip-list{gap:0}
  .js .js-sticky .slip-item{background:none;border:0;border-left:2px solid var(--line);border-radius:0;padding:0 0 0 32px;min-height:44vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity var(--t3) var(--ease),border-color var(--t3);transform:none!important}
  .js .js-sticky .slip-item.is-active{opacity:1;border-left-color:var(--green)}
  .js-sticky .slip-item h3{font-size:clamp(26px,2.4vw,34px)}
  .js-sticky .slip-detail{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);margin:0}
  .js-sticky .slip-stage{display:block;position:sticky;top:calc(50vh - 220px)}
}
.stage-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px}
.stage-top{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 16px;font-size:13px;font-weight:700;color:var(--ink-3)}
.stage-prog{display:flex;gap:6px}
.stage-prog i{width:26px;height:4px;border-radius:2px;background:var(--line);transition:background .3s}
.stage-prog i.on{background:var(--green)}
.stage-body{display:grid;gap:10px}
.stage-body .pane{padding:26px 26px 28px;min-height:170px}
.stage-body .pane p+p{font-size:18px}
.stage-body.swap .pane{animation:swapIn .55s var(--ease)}
.stage-body.swap .pane-after{animation-delay:.06s;animation-fill-mode:backwards}
@keyframes swapIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}

/* Difference bento with spotlight cards. */
.diff-sec{background:var(--deep);color:var(--paper);overflow:hidden}
.diff-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 0%,rgba(183,234,114,.08),transparent 70%);pointer-events:none}
.bento{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:var(--block) 0 0;padding:0;list-style:none}
.bc{position:relative;grid-column:span 2;min-height:300px;border-radius:20px;background:linear-gradient(180deg,rgba(52,59,47,.55),rgba(34,40,31,.55));border:1px solid var(--dark-line);padding:30px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s var(--ease),border-color .18s}
.bc.wide{grid-column:span 4}
.bc::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),rgba(183,234,114,.12),transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none}
.bc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(300px circle at var(--x,50%) var(--y,50%),rgba(183,234,114,.75),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
@media (hover:hover){.bc:hover{transform:translateY(-2px)}.bc:hover::before,.bc:hover::after{opacity:1}}
.bc-vis{flex:1;display:flex;align-items:center;justify-content:center;min-height:120px;margin-bottom:24px}
.bc h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em}
.bc p{font-size:16px;line-height:1.55;color:var(--on-dark-2);margin-top:8px;max-width:44ch}
.v-approve{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.v-pill{padding:10px 18px;border-radius:999px;border:1px solid var(--dark-rule);font-size:14px;font-weight:700;color:var(--on-dark-2);background:rgba(22,26,20,.5)}
.v-pill.go{position:relative;background:var(--hi);border-color:var(--hi);color:var(--ink)}
.v-pill.go::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid rgba(183,234,114,.55);animation:ring 2.4s var(--ease) infinite}
@keyframes ring{from{transform:scale(1);opacity:1}to{transform:scale(1.3,1.6);opacity:0}}
.v-line{width:60px;height:2px;background:linear-gradient(90deg,var(--dark-rule),var(--hi))}
.v-mail{width:100%;max-width:280px;border-radius:12px;border:1px solid var(--dark-line);background:rgba(22,26,20,.55);padding:14px 16px;font-size:13px;color:var(--on-dark-2)}
.v-mail div+div{margin-top:8px;padding-top:8px;border-top:1px solid var(--dark-line)}
.v-mail b{color:var(--paper);font-weight:600}
.v-person{position:relative;display:grid;place-items:center;width:120px;height:120px}
.v-person i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(183,234,114,.25);animation:ripple 3.6s ease-out infinite}
.v-person i:nth-child(2){animation-delay:-1.2s}
.v-person i:nth-child(3){animation-delay:-2.4s}
.v-person span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--hi);color:var(--ink);font-weight:800;font-size:18px}
@keyframes ripple{from{transform:scale(.45);opacity:1}to{transform:scale(1.1);opacity:0}}
.v-terms{width:100%;max-width:420px;display:grid;gap:8px;margin:0;padding:0;list-style:none}
.v-terms li{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:10px;border:1px solid var(--dark-line);background:rgba(22,26,20,.45);font-size:14px;color:var(--on-dark-2)}
.v-terms b{color:var(--hi);font-weight:700}

/* Founding places: offer panel with animated border, then a five-stop timeline whose beam fills on scroll. */
.pilot{background:var(--paper)}
.pilot-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 72px;align-items:start}
.pilot-solo{align-items:center}
.pilot-solo .sec-title em{display:block;font-style:normal;color:var(--green)}
.fc-shell{position:relative;border-radius:22px;padding:1px;overflow:hidden;isolation:isolate;box-shadow:0 24px 48px -32px rgba(22,26,20,.45)}
.fc-shell::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;z-index:-1;background:conic-gradient(#343B2F 0 60%,#B7EA72 75%,#343B2F 90%);animation:spin 6s linear infinite}
.fc{background:radial-gradient(120% 70% at 100% 0%,#2C3427,var(--ink) 60%);color:var(--on-dark);border-radius:21px;padding:34px 34px 30px}
.fc-lab{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hi)}
.fc h3{font-size:clamp(26px,2.4vw,30px);font-weight:750;color:var(--paper);margin-top:12px}
/* Home founding card (2026-11-08): three numbered steps joined by a thin rule; the last step (the client's decision)
   is the filled lime one. The link under them is a ghost button, so the closing section below keeps the one primary CTA. */
.fc-steps{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--dark-line);counter-reset:fcs}
.fc-steps li{position:relative;counter-increment:fcs;padding:0 0 22px 52px;font-size:15px;line-height:1.5;color:var(--on-dark-2)}
.fc-steps li:last-child{padding-bottom:0}
.fc-steps li::before{content:counter(fcs,decimal-leading-zero);position:absolute;left:0;top:-3px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(183,234,114,.45);background:rgba(183,234,114,.08);color:var(--hi);font-size:13px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fc-steps li:last-child::before{background:var(--hi);border-color:var(--hi);color:var(--ink);box-shadow:0 0 18px -4px rgba(183,234,114,.6)}
.fc-steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:37px;bottom:3px;width:1px;background:linear-gradient(rgba(183,234,114,.45),var(--dark-line))}
.fc-steps b{display:block;font-size:17px;font-weight:700;color:var(--paper);margin-bottom:3px}
.fc .fc-more{margin-top:28px;min-height:48px;font-size:16px;border-color:rgba(183,234,114,.4);color:var(--hi)}
.fc .fc-more:hover{border-color:var(--hi);background:rgba(183,234,114,.08)}
/* Five service names under the founding title: light surface, so the accent is green, not lime. */
.svc-links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:22px 0 0;padding:0}
.svc-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(63,87,40,.28);border-radius:999px;font-size:15px;font-weight:650;color:var(--green);text-decoration:none;transition:background var(--t1),border-color var(--t1)}
.svc-links a:hover{background:rgba(63,87,40,.07);border-color:var(--green)}
.tl-wrap{position:relative;margin-top:88px}
.tl{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;counter-reset:t}
.tl-beam{position:absolute;left:22px;right:calc((100% - 96px) / 5 - 22px);top:21px;height:2px;background:var(--line);overflow:hidden}
.tl-beam i{position:absolute;inset:0;background:linear-gradient(90deg,var(--green),#7FA851);transform-origin:left;transform:scaleX(var(--p,1))}
.tl li{counter-increment:t;position:relative;min-width:0}
.tl li::before{content:counter(t,decimal-leading-zero);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card);border:1.5px solid var(--ink);color:var(--ink);font-size:14px;font-weight:800;position:relative;z-index:1;transition:background .3s,color .3s}
.tl li.lit::before{background:var(--ink);color:var(--hi)}
.tl-tag{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--green);margin-top:20px;line-height:1.35}
.tl h3{font-size:20px;font-weight:700;margin-top:8px;letter-spacing:-.015em}
.tl p.tl-text{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:8px}
.tl-note{font-size:14px;color:var(--ink-3);margin-top:36px;max-width:70ch}

/* Closing band: Lamp. */
.lamp{background:var(--deep);color:var(--paper);overflow:hidden;padding:0 0 128px;text-align:center}
.lamp-light{position:relative;height:300px;display:flex;justify-content:center;pointer-events:none}
.lamp-light .cone{position:absolute;top:0;width:min(34vw,420px);height:300px;opacity:.75;transition:width 1.2s var(--ease)}
.lamp-light .l{right:50%;background:conic-gradient(from 70deg at 100% 0%,rgba(183,234,114,.55),transparent 22%);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 90%);mask-image:linear-gradient(180deg,#000 10%,transparent 90%)}
.lamp-light .r{left:50%;background:conic-gradient(from 270deg at 0% 0%,transparent 78%,rgba(183,234,114,.55));-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 90%);mask-image:linear-gradient(180deg,#000 10%,transparent 90%)}
.lamp-light .bar{position:absolute;top:0;height:2px;width:min(40vw,480px);background:var(--hi);box-shadow:0 0 24px 4px rgba(183,234,114,.6);transition:width 1.2s var(--ease)}
.lamp-light .glow{position:absolute;top:-80px;width:min(50vw,560px);height:180px;border-radius:50%;background:rgba(183,234,114,.25);filter:blur(60px)}
.js .lamp:not(.in) .cone{width:min(14vw,160px)}
.js .lamp:not(.in) .bar{width:min(16vw,180px)}
.lamp .sec-title{font-size:clamp(36px,4vw,56px);margin:-150px auto 0;max-width:18ch;position:relative}
.lamp .sec-intro{margin:22px auto 0;max-width:52ch}
.lamp .hero-actions{justify-content:center}

footer{background:var(--deep);color:var(--on-dark-2);border-top:1px solid var(--dark-line);padding:64px 0 40px;font-size:15px}
.ft{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:40px}
.ft h4{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft a{text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.ft a:hover{color:var(--hi);border-bottom-color:var(--hi)}
.ft-brand p{margin-top:14px;max-width:36ch;line-height:1.55}
.ft-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--dark-line);font-size:13px}

/* Hero demo: the visitor fills the price blank and approves the draft themselves. */
.ib-price{display:inline-flex;align-items:baseline;gap:1px;background:var(--hi-soft);color:var(--green);font-weight:700;padding:0 4px;border-radius:4px;white-space:nowrap}
.ib-price input{width:5.2ch;border:0;border-bottom:1.5px dashed var(--green);background:transparent;color:inherit;font:700 16px/1.2 var(--sans);padding:0 2px;border-radius:0}
.ib-price input::placeholder{color:var(--green);opacity:.75}
.ib-price input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.ib-price.is-err{background:#F6E3D8;color:#8A3A16}
.ib-price.is-err input{border-bottom-color:#8A3A16}
.ib-acts{display:none;align-items:center;flex-wrap:wrap}
.js .ib-acts{display:flex}
.ib-acts button{min-height:38px;padding:0 14px;border-radius:7px;border:1px solid #C9CEBE;background:#fff;color:var(--ink-2);font:700 14px/1 var(--sans);cursor:pointer;transition:background .15s,border-color .15s}
.ib-acts button:hover{background:var(--tint);border-color:var(--green)}
.mb .ok:hover{background:#4C6A30!important}
.ib-acts .mb{padding:1.5px;border:0;border-radius:8px}
.ib-hint{display:none;font-size:13px;line-height:1.45;color:var(--ink-3);margin-top:8px}
.js .ib-hint{display:block}
.ib-hint b{color:var(--green)}
.is-sent .ib-dot{background:var(--hi);box-shadow:0 0 0 4px rgba(183,234,114,.35)}
.is-sent .ib-status{background:var(--ink);color:var(--hi)}
.is-sent{background:none}
.is-sent .mb::before{animation:none;opacity:0}
.ib-acts button:disabled{cursor:default;opacity:.55}
.ib-reset{border:0!important;background:none!important;text-decoration:underline;text-underline-offset:3px;padding:0 6px!important}

/* Cost calculator: the visitor's own numbers, light panel of inputs beside a dark result. */
.calc-sec{background:var(--hi-soft)}
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;margin-top:var(--block)}
.calc-in{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 32px;display:grid;gap:26px}
.cf label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:17px;font-weight:700;line-height:1.35}
.cf output{flex:none;font-size:20px;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.cf .help{font-size:14px;color:var(--ink-3);margin-top:2px}
.cf input[type=range]{width:100%;height:36px;margin:6px 0 0;accent-color:var(--green);cursor:pointer}
.calc-out{position:relative;overflow:hidden;background:radial-gradient(120% 80% at 100% 0%,#2C3427,var(--ink) 60%);color:var(--on-dark);border-radius:20px;padding:32px;display:flex;flex-direction:column}
.calc-lab{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hi)}
.calc-n{font-size:clamp(48px,6vw,76px);font-weight:750;letter-spacing:-.04em;line-height:1;color:var(--paper);margin-top:16px;font-variant-numeric:tabular-nums}
.calc-n small{font-size:.4em;color:var(--on-dark-2);font-weight:700;letter-spacing:0;margin-left:6px}
.calc-sub{font-size:17px;line-height:1.5;color:var(--on-dark-2);margin-top:16px}
.calc-sub b{color:var(--paper)}
.calc-fix{margin-top:auto;padding-top:24px;border-top:1px solid var(--dark-line);font-size:16px;line-height:1.5;color:var(--on-dark)}
.calc-out .btn{margin-top:20px;align-self:flex-start}
.calc-note{font-size:14px;color:var(--ink-3);margin-top:20px;max-width:70ch}
.calc-note a{color:var(--green)}
/* Hidden cost: loose-prompt loop vs tested prompt, four cost cards. */
.loop{margin-top:var(--block);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 32px;display:grid;gap:28px}
.loop-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 24px;align-items:center}
.loop-row+.loop-row{padding-top:28px;border-top:1px solid var(--line)}
.loop-lab{font-size:16px;font-weight:800;line-height:1.3}
.loop-row>:not(.loop-lab){grid-column:2}
.loop-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:10px}
.loop-steps li{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:15px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.loop-steps li+li{margin-left:24px}
.loop-steps li+li::before{content:"";position:absolute;left:-25px;top:50%;width:24px;height:2px;background:var(--line)}
.loop-steps .is-fix{border-style:dashed;border-color:#B9BFB2;background:transparent;color:var(--ink-3)}
.loop-steps .is-use{background:var(--ink);border-color:var(--ink);color:var(--hi)}
.loop-bar{height:6px;border-radius:99px;background:var(--tint);overflow:hidden}
.loop-bar i{display:block;height:100%;width:calc(var(--w) * 100%);border-radius:inherit;background:#B9BFB2;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .5s}
.is-good .loop-bar i{background:var(--green);transition-duration:.6s}
.loop.in .loop-bar i{transform:none}
.loop-meta{font-size:15px;line-height:1.5;color:var(--ink-3)}
.loop-meta b{color:var(--ink)}
.loop-slots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.loop-slots li{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--hi-soft);color:var(--green)}
.loop-slots li::before{content:"✓ "}
.js .loop .loop-steps li{opacity:0;transform:translateY(6px)}
.js .loop.in .loop-steps li{animation:chipIn .4s var(--ease) forwards;animation-delay:calc(var(--i) * 170ms + 200ms)}
@keyframes chipIn{to{opacity:1;transform:none}}
.calc-h3{font-size:var(--fs-h3);font-weight:750;margin-top:var(--section)}
.calc-h3+.calc{margin-top:24px}

/* Who you'll deal with + questions. */
.qa-sec{background:var(--card);border-top:1px solid var(--line)}
.qa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px 72px;align-items:start}
.who{position:sticky;top:104px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px}
.who-top{display:flex;align-items:center;gap:16px}
.who-av{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--hi);font-weight:800;font-size:22px}
.who h3{font-size:28px;font-weight:750}
.who-role{font-size:15px;color:var(--ink-3);margin-top:4px}
.who p.who-body{font-size:17px;line-height:1.6;color:var(--ink-2);margin-top:20px}
.who-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.who-tags li{font-size:14px;font-weight:700;padding:7px 12px;border-radius:999px;background:var(--hi-soft);color:var(--green)}
.who-mail{display:inline-block;padding:8px 0;margin-top:14px;font-weight:700;color:var(--green);text-underline-offset:4px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:22px 0;font-size:19px;font-weight:700;line-height:1.35;cursor:pointer;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);font-size:20px;font-weight:600;color:var(--green);transition:transform .2s var(--ease),background .15s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--hi-soft)}
.faq summary:hover{color:var(--green)}
.faq details p{font-size:17px;line-height:1.6;color:var(--ink-2);padding:0 52px 24px 0;max-width:62ch}

/* What's included: six light cards for the Team AI Setup, one shared enquiry route. */
.custom-sec{background:var(--card);border-top:1px solid var(--line)}
.custom-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 72px;align-items:end}
.custom-head .sec-intro{margin-top:0}
.cx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:var(--block) 0 0;padding:0}
.cx-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px;transition:transform .18s var(--ease),border-color .18s}
@media (hover:hover){.cx-card:hover{transform:translateY(-2px);border-color:var(--green)}}
.cx-tag{display:block;color:var(--ink-3)}
.cx-tag.is-now{color:var(--green)}
.cx-card h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;margin-top:14px;line-height:1.2}
.cx-card p:not(.cx-tag){font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.cx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:16px;padding:24px 28px;border-radius:20px;background:var(--hi-soft)}
.cx-foot p{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:60ch}
.cx-foot b{color:var(--ink)}
.faq details p a{color:var(--green);font-weight:700;text-underline-offset:3px}
.ask-note a{color:var(--hi);font-weight:700;text-underline-offset:3px}
.who-quote{margin:22px 0 0;padding:16px 0 0 18px;border-left:3px solid var(--green)}
.who-quote p{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.who-quote cite{display:block;margin-top:8px;font-size:14px;font-style:normal;font-weight:600;color:var(--ink-3)}

/* Closing: what to put in the first email. */
.ask3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:860px;margin:40px auto 0;padding:0;list-style:none;counter-reset:a;text-align:left}
.ask3 li{counter-increment:a;display:flex;align-items:flex-start;gap:14px;border:1px solid var(--dark-line);background:rgba(52,59,47,.45);border-radius:14px;padding:18px 20px;font-size:16px;line-height:1.45;color:var(--on-dark)}
.ask3 li::before{content:counter(a);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hi);color:var(--ink);font-size:14px;font-weight:800;margin-top:-2px}
.ask-note{font-size:15px;color:var(--on-dark-2);max-width:62ch;margin:22px auto 0}
.pick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:980px;margin:40px auto 0;padding:0;list-style:none;text-align:left}
.pick li{grid-column:span 2}
.pick li:nth-child(n+4){grid-column:span 3}
.pick-card{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;min-height:96px;border:1px solid var(--dark-line);background:rgba(52,59,47,.45);border-radius:14px;padding:20px 52px 20px 22px;color:var(--on-dark);text-decoration:none;transition:transform .18s var(--ease),border-color .18s,background .18s}
.pick-name{font-size:18px;font-weight:750;line-height:1.25;color:var(--paper);transition:color .18s}
.pick-txt{font-size:15px;line-height:1.45;color:var(--on-dark-2)}
.pick-card .arr{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hi);color:var(--ink);font-size:14px;font-weight:800;transition:transform .18s var(--ease)}
.pick-card:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
@media (hover:hover){.pick-card:hover{transform:translateY(-2px);border-color:var(--hi);background:rgba(52,59,47,.8)}.pick-card:hover .pick-name{color:var(--hi)}.pick-card:hover .arr{transform:translateX(3px)}}
@media (max-width:1000px){.pick{grid-template-columns:repeat(2,minmax(0,1fr))}.pick li,.pick li:nth-child(n+4){grid-column:auto}.pick li:last-child{grid-column:1/-1}}
@media (max-width:640px){.pick{grid-template-columns:1fr}.pick-card{min-height:0}}

/* Hero demo: the team library. The visitor picks a saved task and runs it. */
.lib-tabs{display:none;flex-wrap:wrap;gap:6px;padding:14px 18px 0}
.js .lib-tabs{display:flex}
.lib-tabs button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:700 14px/1.2 var(--sans);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.lib-tabs button:hover{border-color:var(--green)}
.lib-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--hi)}
.lib-panel{padding:14px 18px 16px}
.lib-lab{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.lib-lab-out{margin-top:14px}
.lib-in{margin-top:6px;padding:10px 13px;border-radius:8px;background:var(--tint);font-size:14px;line-height:1.5;color:var(--ink-2)}
.lib-panel .ib-acts .ok{min-height:44px}
.lib-out{margin-top:6px;min-height:6.4em}
.lib-in{min-height:3.2em}
/* Inline words keep the same line breaks as the plain draft, so the card doesn't jump. */
.js .lib-out.split .w{display:inline;transform:none;filter:none;animation-name:fadeIn;animation-delay:calc(var(--i) * 28ms);animation-duration:.45s}
@keyframes fadeIn{to{opacity:1}}

/* Enquiry Desk: second service, dark band with the inbox demo. */
.ed-sec{background:var(--deep);color:var(--paper);overflow:hidden}
.ed-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 50% at 100% 30%,rgba(183,234,114,.07),transparent 70%);pointer-events:none}
.ed{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:56px 72px;align-items:center}
.ed-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--dark-line)}
.ed-list li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--dark-line);font-size:16px;line-height:1.55;color:var(--on-dark-2)}
.ed-list li::before{content:"✓";position:absolute;left:0;top:17px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--hi);color:var(--ink);font-size:12px;font-weight:800;line-height:1}
.ed-list b{display:block;font-size:17px;color:var(--paper)}
.ed-out{font-size:15px;color:var(--on-dark-2);margin-top:18px}
.ed-out b{color:var(--paper)}
.ed .hero-actions{margin-top:28px}

/* Founding places: one scope list per service. */

.stickybar{display:none}

/* One label style for every small uppercase eyebrow. */
.kicker,.wk-day,.wk-lab,.fc-lab,.calc-lab,.tl-tag,.lib-lab,.ib-cap,.ft h4,.cx-tag{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.35;text-transform:uppercase}
.kicker{align-items:baseline}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}}

@media (max-width:1000px){
  .hero-main{grid-template-columns:1fr;gap:56px}
  .ib-stage{max-width:580px}
  .chip-b{right:-6px}
  .stats{grid-template-columns:1fr 1fr}
  .stats li,.stats li+li{padding:32px 20px 32px 0;border-left:0;border-bottom:1px solid var(--dark-line)}
  .stats li:nth-child(even){padding-left:20px;border-left:1px solid var(--dark-line)}
  .bento{grid-template-columns:1fr 1fr}
  .bc,.bc.wide{grid-column:span 1}
  .bc.wide{grid-column:span 2}
  .pilot-top{grid-template-columns:1fr}
  .fc-shell{max-width:580px}
  .tl-wrap{margin-top:56px}
  .tl{grid-template-columns:1fr}
  .tl-beam{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .tl-beam i{transform-origin:top;transform:scaleY(var(--p,1))}
  .tl li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding-bottom:32px}
  .tl li::before{grid-row:1/span 3}
  .tl li:last-child{padding-bottom:0}
  .tl-tag{margin-top:2px}
  .calc{grid-template-columns:1fr}
  .ed{grid-template-columns:1fr}
  .ed-stage{max-width:580px}
  .qa{grid-template-columns:1fr}
  .custom-head{grid-template-columns:1fr}
  .cx{grid-template-columns:1fr}
  .who{position:static}
  .ask3{grid-template-columns:1fr}
}
@media (min-width:641px) and (max-width:1000px){
  .cx{grid-template-columns:1fr 1fr}
  .bc:last-child{grid-column:span 2}
}
/* The container tops out at 1120px, so the tagline and pill only fit while the nav is collapsed. */
@media (min-width:1001px){
  .brand-tag{display:none}
}
@media (max-width:1000px){
  .top nav{display:none}
  .menu-btn:not([hidden]){display:inline-flex}
  .top.is-open nav{animation:menuIn var(--t2) var(--ease);display:grid;grid-template-columns:1fr 1fr;gap:0 20px;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 72px);overflow-y:auto;padding:8px var(--gutter) 20px;background:var(--ink);border-bottom:1px solid var(--dark-rule)}
  .top.is-open nav a{display:flex;align-items:center;min-height:48px;font-size:17px;color:var(--on-dark)}
  .top.is-open nav a:hover,.top.is-open nav a[aria-current]{color:var(--hi)}
  .top.is-open .nav-facts{display:block;grid-column:1/-1;list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--dark-rule);font-size:15px;font-weight:600;color:var(--on-dark-2)}
  .top.is-open .nav-facts li{padding:3px 0 3px 24px;position:relative}
  .top.is-open .nav-facts li::before{content:"✓";position:absolute;left:0;color:var(--hi);font-weight:800}
}
@media (max-width:900px){
  .slip-detail{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  section{padding:80px 0}
  .hero{padding-top:112px}
  .brand-tag{display:none}
  .hero h1{margin-top:20px}
  html{scroll-padding-bottom:88px}
  .kicker{letter-spacing:.06em}
  .hero-actions .btn{width:100%}
  .lib-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .lib-tabs button{flex:none;scroll-snap-align:start}
  .copy-mail{min-height:44px}
  .ib-acts button{min-height:44px}
  .v-approve{flex-direction:column;gap:6px}
  .v-line{width:2px;height:16px;background:linear-gradient(180deg,var(--dark-rule),var(--hi))}
  .ft ul{gap:0}
  .ft a{display:inline-flex;align-items:center;min-height:44px}
  .pilot-note{flex-direction:column}
  .float-chip{display:none}
  .marquee{margin-top:64px}
  .stat-l{font-size:14px}
  .slip-item{padding:22px 18px}
  .pane{padding:18px}
  .bento{grid-template-columns:1fr}
  .bc,.bc.wide{grid-column:span 1;min-height:0;padding:24px}
  .fc{padding:26px 22px 24px}
  .calc-in{padding:24px 20px}
  .loop{padding:24px 20px;gap:24px}
  .loop-row{grid-template-columns:1fr}
  .loop-row>:not(.loop-lab){grid-column:1}
  .loop-row+.loop-row{padding-top:24px}
  .loop-steps{gap:8px}
  .loop-steps li{min-height:36px;padding:0 12px;font-size:14px}
  .loop-steps li+li{margin-left:0}
  .loop-steps li+li::before{display:none}
  .calc-h3{margin-top:80px}
  .calc-out{padding:26px 22px}
  .calc-out .btn{align-self:stretch;font-size:16px;padding:0 18px}
  .who{padding:24px 20px}
  .cx-card{padding:24px 20px}
  .cx-foot{padding:22px 20px}
  .cx-foot .btn{width:100%}
  .faq summary{font-size:18px;padding:18px 0}
  .faq details p{padding-right:0}
  .lamp{padding-bottom:88px}
  .lamp-light{height:220px}
  .lamp .sec-title{margin-top:-110px}
  .ft{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
  .top .btn{display:none}
  .stickybar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(22,26,20,.94);border-top:1px solid var(--dark-line);transition:transform var(--t3) var(--ease)}
  .stickybar.is-hidden{transform:translateY(110%)}
  .stickybar .btn{flex:1;min-height:50px;font-size:16px;padding:0 12px}
  footer{padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .split .w{opacity:1;filter:none;transform:none}
  .js .reveal{opacity:1;transform:none}
  .js .loop .loop-steps li{opacity:1;transform:none}
  .loop-bar i{transform:none}
  #particles,.spot{display:none}
}

/* ---------- Multi-page demo additions (2026-11-07) ---------- */
.top .btn[aria-current]{background:var(--hi);color:var(--ink);border-color:var(--hi)}
.hero-solo{grid-template-columns:minmax(0,1fr)}
.hero-solo h1{max-width:19ch}
.hero-solo .lead{max-width:58ch}
.hero.hero-pad{padding-bottom:var(--section)}
.cx.cx-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.more-link{display:inline-block;margin-top:24px;font-weight:700;color:var(--green);text-underline-offset:4px}
.faq-solo{max-width:880px}
.how-sec .tl-wrap{margin-top:var(--block)}
.faq-solo .faq{margin-top:36px}
.who.who-static{position:static}
.about-copy p{font-size:18px;line-height:1.65;color:var(--ink-2);margin-top:18px;max-width:56ch}
.about-copy p:first-of-type{margin-top:28px}
@media (max-width:1000px){.cx.cx-2{grid-template-columns:1fr}}
@media (min-width:1001px){.top nav a.nav-only-phone{display:none}}
/* Home page: service orbit. Vanilla re-implementations of Magic UI patterns (Orbiting Circles, Animated Beam, Ripple).
   Five equal services on one ring around "your business" (not a service, not clickable): no service sits under another.
   The ring turns slowly and pauses on hover/focus; orbs counter-rotate so labels stay upright. Compositor-only animations. */
.orb-sec{background:radial-gradient(60% 55% at 28% 58%,#2B3326 0%,var(--deep) 72%);color:var(--paper);overflow:hidden}
.orb-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;align-items:center;margin-top:var(--block)}
.orbit{--S:min(540px,calc(100vw - 2 * var(--gutter)));--r:calc(var(--S) * .37);--dur:90s;position:relative;width:var(--S);height:var(--S);margin:0 auto}
.ring{position:absolute;inset:0;animation:orbSpin var(--dur) linear infinite}
.ring-line{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);border:1px dashed rgba(225,229,219,.16);border-radius:50%}
.spoke{position:absolute;left:50%;top:50%;width:var(--r);height:1px;transform-origin:0 50%;transform:rotate(var(--a));background:linear-gradient(90deg,transparent 0%,rgba(183,234,114,.5) 50%,transparent 100%) 0 0/50% 100% no-repeat,rgba(225,229,219,.08);animation:beam 3.6s linear infinite}
.spoke.is-on{height:2px;margin-top:-.5px;background-color:rgba(183,234,114,.35)}
.slot{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1))}
.orb{--d:calc(var(--S) * .235);position:absolute;left:calc(var(--d) / -2);top:calc(var(--d) / -2);width:var(--d);height:var(--d);padding:0;margin:0;border:0;border-radius:50%;background:none;color:var(--paper);font:inherit;cursor:pointer;animation:orbSpin var(--dur) linear infinite reverse}
.orb:focus-visible{outline-offset:5px;border-radius:50%}
.orb-face{position:absolute;inset:0;display:grid;place-content:center;padding:8px;border-radius:50%;text-align:center;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.16),rgba(255,255,255,.02) 62%),var(--dark-soft);border:1px solid rgba(225,229,219,.22);box-shadow:0 12px 30px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);animation:bob 6s ease-in-out infinite;animation-delay:var(--bd,0s);transition:scale .25s var(--ease),border-color .2s,box-shadow .25s,background .25s,color .2s}
.orb-face small{font-size:12px;font-weight:700;line-height:1.2;opacity:.75;margin-top:2px}
.orb-lab{font-size:clamp(13px,calc(var(--S) * .032),17px);font-weight:750;line-height:1.15;letter-spacing:-.01em}
.orb:hover .orb-face{scale:1.07;border-color:var(--hi)}
.orb.is-on .orb-face{background:radial-gradient(circle at 32% 26%,#E4F7C8 0%,var(--hi) 52%,#8FC453 100%);color:var(--ink);border-color:transparent;box-shadow:0 0 0 6px rgba(183,234,114,.16),0 0 56px -4px rgba(183,234,114,.55)}
.orb-hub{position:absolute;left:50%;top:50%;width:calc(var(--S) * .27);height:calc(var(--S) * .27);margin:calc(var(--S) * -.135) 0 0 calc(var(--S) * -.135);display:grid;place-content:center;gap:2px;border-radius:50%;text-align:center;background:rgba(22,26,20,.7);border:1px solid rgba(183,234,114,.35);box-shadow:inset 0 0 40px rgba(183,234,114,.08);z-index:1}
.orb-hub small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.orb-hub span{font-size:clamp(14px,calc(var(--S) * .036),19px);font-weight:750;line-height:1.15;color:var(--hi)}
.orbit:hover .ring,.orbit:hover .orb,.orbit:focus-within .ring,.orbit:focus-within .orb{animation-play-state:paused}
.orbit-ripple i{position:absolute;left:50%;top:50%;width:calc(var(--S) * .27);height:calc(var(--S) * .27);margin:calc(var(--S) * -.135) 0 0 calc(var(--S) * -.135);border-radius:50%;border:1px solid rgba(183,234,114,.4);opacity:0;animation:ripple 6s ease-out infinite}
.orbit-ripple i:nth-child(2){animation-delay:2s}
.orbit-ripple i:nth-child(3){animation-delay:4s}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes beam{from{background-position:-100% 0,0 0}to{background-position:200% 0,0 0}}
@keyframes ripple{0%{scale:1;opacity:.5}100%{scale:2.9;opacity:0}}
.orb-panels{display:grid;gap:16px}
.orb-panel{background:rgba(225,229,219,.04);border:1px solid var(--dark-line);border-radius:20px;padding:32px}
.js .orb-panel:not(.is-on){display:none}
.js .orb-panel.is-on{animation:panelIn .35s var(--ease)}
@keyframes panelIn{from{opacity:0;translate:0 10px}}
.orb-panel .cx-tag{color:var(--hi)}
.orb-panel h3{font-size:clamp(26px,2.4vw,32px);font-weight:750;line-height:1.15;margin-top:12px}
.orb-panel>p:not(.cx-tag){font-size:17px;line-height:1.6;color:var(--on-dark-2);margin-top:12px}
.orb-ex{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.orb-ex li{font-size:16px;line-height:1.5;color:var(--on-dark-2);padding-left:18px;position:relative}
.orb-ex li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--hi)}
.orb-ex b{color:var(--paper);font-weight:700;margin-right:6px}
.orb-pts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.orb-pts li{font-size:14px;font-weight:700;padding:7px 12px;border-radius:999px;background:rgba(183,234,114,.12);color:var(--hi)}
.opt-acts{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.opt-more{font-weight:700;color:var(--hi);text-underline-offset:4px}
.orb-panel>p.orb-note{font-size:14px;line-height:1.5;margin-top:18px}
@media (max-width:1100px){.orb-grid{grid-template-columns:1fr}.orb-panels{max-width:640px;width:100%;margin:0 auto}}
@media (max-width:640px){
  .orb-panel{padding:24px 20px}
  .opt-acts .btn{width:100%}
}
.hero .hero-kicker{display:flex;margin-top:28px}
.hero .hero-kicker+h1{margin-top:12px}

/* Home "why" cards: spotlight that follows the pointer (vanilla take on Magic UI's Magic Card, MIT); icons from Lucide (ISC). */
.mcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:var(--block) 0 0;padding:0}
.mc{--mx:50%;--my:-40%;position:relative;isolation:isolate;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px;transition:transform .18s var(--ease),border-color .18s}
.mc::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(183,234,114,.30),transparent 62%);opacity:0;transition:opacity .3s}
.mc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),var(--green),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .3s;pointer-events:none}
.mc-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--hi-soft);color:var(--green)}
.mc-tag{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.35;text-transform:uppercase;color:var(--green);margin-top:22px}
.mc h3{font-size:var(--fs-h3);font-weight:750;letter-spacing:-.02em;line-height:1.2;margin-top:8px}
.mc-pts{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.mc-pts li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2)}
.mc-pts li:last-child{border-bottom:0;padding-bottom:0}
.mc-pts li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.why-sec .more-link{margin-top:28px}
@media (hover:hover){.mc:hover{transform:translateY(-2px);border-color:transparent}.mc:hover::before,.mc:hover::after{opacity:1}}
.mc-tabs{display:none}
@media (min-width:641px) and (max-width:1000px){.mcs{gap:12px}.mc{padding:24px 20px}.mc h3{font-size:20px}.mc-pts li{font-size:14px;padding-left:24px}}
/* Phone: the three cards become one panel with a sliding tab bar above it (tap or swipe to switch). */
@media (max-width:640px){
  .js .mc-tabs{--i:0;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:16px}
  .js .mc-tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:12px;background:var(--ink);transform:translateX(calc(var(--i) * 100%));transition:transform .35s var(--ease)}
  .mc-tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;padding:10px 4px;border:0;border-radius:12px;background:none;font:inherit;font-size:13px;font-weight:700;line-height:1.2;color:var(--ink-2);cursor:pointer;transition:color .2s}
  .mc-tab-ico{display:grid;place-items:center;color:var(--green);transition:color .2s}
  .mc-tab.is-on,.mc-tab.is-on .mc-tab-ico{color:var(--hi)}
  .mc-tab:focus-visible{outline:2px solid var(--green);outline-offset:2px}
  .js .mcs{grid-template-columns:minmax(0,1fr);margin-top:12px;touch-action:pan-y}
  .js .mc{grid-area:1/1;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
  .js .mc.is-on{transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
  .js .mc:not(.is-on){opacity:0;visibility:hidden;transform:translateX(var(--dx,16px))}
  .js .mc .mc-ico,.js .mc .mc-tag{display:none}
  .js .mc h3{margin-top:0}
  .mc{padding:24px 22px}
}

/* Why cards, motion pass. References (all open source): Magic UI Magic Card (MIT), React Bits Particles (the hero constellation, behind the whole dark section), animated Lucide icons (ISC),
   Motion-style staggered children. Content rows line up across cards with subgrid; every effect is off under reduced motion. */
.mcs{grid-template-rows:auto auto auto 1fr}
@supports (grid-template-rows:subgrid){.mc{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}}
.mc{--d:0s;background:var(--card)}

.mc:nth-child(2){--d:.06s}
.mc:nth-child(3){--d:.12s}
.mc h3{text-wrap:balance}
.mc-pts li{--k:0;text-wrap:pretty}
.mc-pts li:nth-child(2){--k:1}
.mc-pts li:nth-child(3){--k:2}
.mc-ico{box-shadow:0 0 0 1px rgba(63,87,40,.1);transition:background .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.mc-ico svg{overflow:visible;transform-origin:50% 50%}
.js .mc .mc-ico svg>*{stroke-dasharray:1}
.js .mc.in .mc-ico svg>*{animation:mcDraw 1s var(--ease) calc(var(--d) + .15s) backwards}
.js .mc.in .mc-pts li{animation:mcLi .5s var(--ease) calc(var(--d) + .4s + var(--k) * .12s) backwards}
.js .mc.in .mc-pts li::before{animation:mcTick .45s cubic-bezier(.3,1.6,.5,1) calc(var(--d) + .5s + var(--k) * .12s) backwards}
@keyframes mcDraw{from{stroke-dashoffset:1}}
@keyframes mcLi{from{opacity:0;transform:translateX(-8px)}}
@keyframes mcTick{from{opacity:0;transform:rotate(-45deg) scale(0)}}
@keyframes mcPop{40%{transform:scale(1.18)}}
@media (hover:hover){
  .mc:hover .mc-ico{background:var(--ink);color:var(--hi);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(34,40,31,.6)}
  .mc:hover .mc-ico svg{animation:mcPop .5s var(--ease)}
}
@media (max-width:640px){
  .js .mcs{grid-template-rows:none}
  .js .mc{display:block;grid-row:auto;grid-area:1/1}
}

/* Why section on dark: same background and constellation as the hero; cards become dark panels with lime accents. */
.why-sec{isolation:isolate;overflow:hidden;background:radial-gradient(70% 60% at 50% 55%,#252C21 0%,var(--deep) 72%);color:var(--paper)}
.why-sky{position:absolute;inset:0;width:100%;height:100%;opacity:.8;z-index:-1;pointer-events:none}
.why-sec .mc{background:rgba(34,40,31,.8);border-color:var(--dark-line)}
.why-sec .mc::before{background:radial-gradient(380px circle at var(--mx) var(--my),rgba(183,234,114,.14),transparent 62%)}
.why-sec .mc::after{background:radial-gradient(260px circle at var(--mx) var(--my),var(--hi),transparent 65%)}
.why-sec .mc-ico{background:rgba(183,234,114,.12);color:var(--hi);box-shadow:0 0 0 1px rgba(183,234,114,.2)}
.why-sec .mc-tag{color:var(--hi)}
.why-sec .mc h3{color:var(--paper)}
.why-sec .mc-pts{border-top-color:var(--dark-line)}
.why-sec .mc-pts li{border-bottom-color:var(--dark-line);color:var(--on-dark-2)}
.why-sec .mc-pts li::before{border-color:var(--hi)}
.why-sec .more-link{color:var(--hi)}
@media (hover:hover){.why-sec .mc:hover .mc-ico{background:var(--hi);color:var(--ink);box-shadow:0 10px 28px -12px rgba(183,234,114,.6)}}
@media (max-width:640px){
  .why-sec .mc-tabs{background:rgba(34,40,31,.8);border-color:var(--dark-line)}
  .why-sec .mc-tabs::before{background:var(--hi)}
  .why-sec .mc-tab{color:var(--on-dark-2)}
  .why-sec .mc-tab-ico{color:var(--hi)}
  .why-sec .mc-tab.is-on,.why-sec .mc-tab.is-on .mc-tab-ico{color:var(--ink)}
  .why-sec .mc-tab:focus-visible{outline-color:var(--hi)}
}

/* Two dark sections in a row read as one band: no seam, and about half the usual gap between them
   (the hero keeps its own bottom spacing, the lamp keeps its beam at the top). */
section.dark:not(.hero):has(+ section.dark:not(.lamp)){padding-bottom:calc(var(--section) * .5)}
section.dark + section.dark:not(.lamp){padding-top:calc(var(--section) * .5)}

/* ---------- Site-wide alignment pass (2026-11-07) ----------
   One title size for every section (the two-column variant is retired), one left edge for every section,
   one gap from heading block to content. Founding heading is the one promo title and sits a step larger. */
:root{--fs-h2:clamp(34px,3.8vw,52px)}
.custom-head .sec-title,.ed .sec-title,.pilot-top .sec-title,.qa .sec-title{font-size:var(--fs-h2)}
.pilot-solo .sec-title{font-size:clamp(38px,4.4vw,60px);max-width:15ch;line-height:1.05}
.lamp .sec-title{font-size:clamp(38px,4.4vw,60px)}
.wrap.faq-solo{max-width:1200px}
.faq-solo .faq{max-width:880px;margin-top:var(--block)}
.how-sec .tl-wrap,.mcs,.orb-grid{margin-top:var(--block)}

/* Section hand-overs, after the "glowing divider" seen in open-source dark landing templates (Linear-style
   section edges, Magic UI / Aceternity glow lines): where two dark bands meet, a lime hairline that fades
   out at both ends with a soft glow under it; where a dark band hands over to a light one, a faint fold
   shadow at the top of the light band instead of a hard cut. */
section.dark + section.dark:not(.lamp)::after{content:"";position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  background:linear-gradient(90deg,transparent 8%,rgba(183,234,114,.38) 50%,transparent 92%) top/100% 1px no-repeat,
             radial-gradient(45% 100% at 50% 0%,rgba(183,234,114,.09),transparent 70%)}
section.dark + section:not(.dark){box-shadow:inset 0 28px 36px -28px rgba(22,26,20,.22)}

/* Orbit labels: the service name leads, the sub-label is a quiet one-line descriptor. All five orbs carry one;
   on phones (79px orbs) only the name shows and the panel below carries the detail. */
.orb-face{gap:0;padding:10px}
.orb-lab{font-size:clamp(14px,calc(var(--S) * .034),18px);font-weight:750;line-height:1.1;letter-spacing:-.015em}
.orb-face small{display:block;margin-top:6px;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.01em;white-space:nowrap;color:var(--on-dark-2);opacity:.85}
.orb.is-on .orb-face small{color:var(--ink);opacity:.68}
@media (max-width:640px){.orb-face small{display:none}}

/* Orbit hub: the Fiberhand mark is the core the services circle; a two-line caption that always fits;
   solid face so the spokes end at its rim; a soft lime halo. Phones show the mark only. */
.orb-hub{gap:0;background:radial-gradient(circle at 50% 35%,#2A3225 0%,#1B2018 70%);border:1px solid rgba(183,234,114,.38);
  box-shadow:0 0 0 8px rgba(183,234,114,.05),0 0 48px -6px rgba(183,234,114,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.hub-mark{display:grid;place-items:center;margin:0 auto;width:calc(var(--S) * .078);height:calc(var(--S) * .078);min-width:30px;min-height:30px;border-radius:calc(var(--S) * .02);
  background:linear-gradient(145deg,#343B2F,#22281F);border:1px solid var(--dark-rule);color:var(--hi);font-weight:800;font-size:calc(var(--S) * .044);line-height:1;
  box-shadow:0 6px 18px -8px rgba(183,234,114,.55)}
.hub-cap{display:grid;gap:1px;margin-top:8px;max-width:calc(var(--S) * .22)}
.orb-hub .hub-cap small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);line-height:1.3}
.orb-hub .hub-cap span{font-size:clamp(12px,calc(var(--S) * .026),14px);font-weight:750;line-height:1.2;color:var(--hi);white-space:nowrap}
@media (max-width:640px){.hub-cap{display:none}}

/* Founding section between 641 and 1000px: stay two columns down to 761px (stacking left a 3-line title over a
   card that stopped at 580px with a blank right half); below that, stack with a 2-line title and a full-width card. */
@media (min-width:761px) and (max-width:1000px){
  .pilot-solo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .pilot-solo .fc{padding:28px 26px 24px}
}
@media (max-width:760px){
  .pilot-solo .sec-title{max-width:20ch}
  .pilot-solo .fc-shell{max-width:none}
}

/* Founding seats (2026-11-08): three squares under the founding card title, one per place. Open = lime outline on a
   soft lime fill; taken (.is-taken) = dim and empty. The text beside them says the count, so colour isn't the only cue. */
.seats{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.seat{width:30px;height:30px;border-radius:8px;border:2px solid var(--hi);background:rgba(183,234,114,.14);box-shadow:0 0 14px -4px rgba(183,234,114,.55)}
.seat.is-taken{border-color:var(--dark-rule);background:transparent;box-shadow:none}
.seats-txt{margin-left:6px;font-size:15px;font-weight:700;color:var(--on-dark)}

/* Closing email preview (2026-11-08): built by site.js under the pick cards / closing buttons once a
   data-compose link is clicked. Shows To, Subject and body, then mail app / Gmail / copy. Dark lamp surface only. */
.cmp{max-width:760px;margin:36px auto 0;text-align:left}
.cmp.is-in{animation:cmp-in .45s var(--ease) both}
@keyframes cmp-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cmp-cap{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.35;text-transform:uppercase;color:var(--hi);margin-bottom:12px}
.cmp-cap:focus{outline:none}
.cmp-cap:focus-visible{outline:2px solid var(--hi);outline-offset:4px}
.cmp-box{border:1px solid var(--dark-rule);border-radius:16px;background:rgba(52,59,47,.6);overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.cmp-row{display:grid;grid-template-columns:5.2em minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px 10px 20px;border-bottom:1px solid var(--dark-line);font-size:16px}
.cmp-k{color:var(--on-dark-2)}
.cmp-v{color:var(--paper);font-weight:600;overflow-wrap:anywhere}
.cmp-row .copy-mail{min-height:34px}
.cmp-body{margin:0;padding:18px 20px;white-space:pre-wrap;overflow-wrap:anywhere;font:400 16px/1.65 var(--sans);color:var(--on-dark);background:rgba(22,26,20,.35)}
.cmp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 20px;border-top:1px solid var(--dark-line)}
.cmp-acts .btn{min-height:48px;font-size:16px;padding:0 22px}
.cmp-acts .cmp-copy{min-height:48px;font-size:15px;padding:0 18px}
.cmp-note{font-size:14px;color:var(--on-dark-2);margin-top:12px}
.pick-card.is-on{border-color:var(--hi);background:rgba(52,59,47,.85);box-shadow:inset 0 0 0 1px var(--hi)}
.pick-card.is-on .pick-name{color:var(--hi)}
@media (max-width:640px){
  .cmp{margin-top:28px}
  .cmp-row{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px 10px 16px;row-gap:2px}
  .cmp-k{grid-column:1/-1;font-size:13px}
  .cmp-v{grid-row:2}
  .cmp-row .copy-mail{grid-row:2;min-height:44px}
  .cmp-body{padding:16px;font-size:15px}
  .cmp-acts{padding:14px 16px}
  .cmp-acts .btn,.cmp-acts .cmp-copy{width:100%}
}
@media (prefers-reduced-motion:reduce){.cmp.is-in{animation:none}}
/* Once the preview is open it already offers "Copy" for the address, so the no-JS fallback line steps aside. */
.cmp:not([hidden]) ~ .cta-note{display:none}

/* ---------- Team AI page, design audit pass (2026-11-08) ----------
   Goal: the page reads like the home page. Home is dark-led with one light band; this page now alternates
   dark (hero) / light (moments) / dark (what's included) / light (cost + calculator, questions) / dark (closing),
   and every light band uses the same paper grey. */
.is-paper,.calc-sec{background:var(--paper)}

/* What's included on dark: the home "why" treatment (radial background + constellation canvas), and the six
   cards as dark spotlight panels with a Lucide icon tile. After Magic UI Magic Card (MIT) and Lucide (ISC),
   as on the home page. Icon strokes draw in on reveal; all motion off under reduced motion. */
.inc-sec{border-top:0;isolation:isolate;overflow:hidden;background:radial-gradient(70% 60% at 50% 55%,#252C21 0%,var(--deep) 72%);color:var(--paper)}
.inc-sec .sec-intro{color:var(--on-dark-2)}
.inc-sec .cx-card{--mx:50%;--my:-40%;position:relative;isolation:isolate;overflow:hidden;background:rgba(34,40,31,.8);border-color:var(--dark-line);color:var(--paper)}
.inc-sec .cx-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(183,234,114,.14),transparent 62%);opacity:0;transition:opacity .3s}
.inc-sec .cx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),var(--hi),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .3s;pointer-events:none}
.inc-sec .cx-tag.is-now{color:var(--hi);margin-top:20px}
.inc-sec .cx-card h3{color:var(--paper);margin-top:8px}
.inc-sec .cx-card p:not(.cx-tag){color:var(--on-dark-2)}
.cx-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(183,234,114,.12);color:var(--hi);box-shadow:0 0 0 1px rgba(183,234,114,.2);transition:background .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.cx-ico svg{overflow:visible}
.js .cx-ico svg>*{stroke-dasharray:1}
.js .cx-card.in .cx-ico svg>*{animation:mcDraw 1s var(--ease) .15s backwards}
@media (hover:hover){
  .inc-sec .cx-card:hover{transform:translateY(-2px);border-color:transparent}
  .inc-sec .cx-card:hover::before,.inc-sec .cx-card:hover::after{opacity:1}
  .inc-sec .cx-card:hover .cx-ico{background:var(--hi);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 28px -12px rgba(183,234,114,.6)}
}
.inc-sec .cx-foot{background:rgba(183,234,114,.07);border:1px solid rgba(183,234,114,.2)}
.inc-sec .cx-foot p{color:var(--on-dark-2)}
.inc-sec .cx-foot b{color:var(--paper)}

/* The one study figure, kept under the two-row comparison now that the four cost cards are gone. */
.loop-stat{max-width:72ch;margin-top:20px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.loop-stat b{font-size:20px;letter-spacing:-.02em;color:var(--green);margin-right:4px}

/* Hero demos as dark glass windows (Team AI library and Enquiry Desk inbox; 2026-11-08),
   with a rotating lime edge like the home founding card (after Magic UI Border Beam, MIT). */
#library .ib-glow,#inbox .ib-glow{overflow:hidden;background:rgba(183,234,114,.16)}
#library .ib-glow::before,#inbox .ib-glow::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(transparent 0 62%,#B7EA72 78%,transparent 92%);animation:spin 7s linear infinite}
#library .inbox,#inbox .inbox{background:rgba(29,34,26,.96);color:var(--on-dark);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#library .inbox::after,#inbox .inbox::after{background:radial-gradient(500px circle at var(--gx,80%) var(--gy,0%),rgba(183,234,114,.08),transparent 45%);mix-blend-mode:normal}
#library .ib-chrome,#inbox .ib-chrome{background:rgba(225,229,219,.03);border-bottom-color:var(--dark-line)}
#library .ib-chrome i,#inbox .ib-chrome i{background:rgba(225,229,219,.16)}
#library .ib-chrome span,#library .ib-count,#library .lib-lab,#library .ib-hint,#inbox .ib-chrome span,#inbox .ib-count,#inbox .lib-lab,#inbox .ib-hint{color:var(--on-dark-2)}
#library .ib-bar,#inbox .ib-bar{border-bottom-color:var(--dark-line);color:var(--paper)}
#library .lib-tabs button,#inbox .lib-tabs button{background:transparent;border-color:var(--dark-rule);color:var(--on-dark-2)}
#library .lib-tabs button:hover,#inbox .lib-tabs button:hover{border-color:var(--hi);color:var(--paper)}
#library .lib-tabs button[aria-selected=true],#inbox .lib-tabs button[aria-selected=true]{background:var(--hi);border-color:var(--hi);color:var(--ink)}
#library .lib-in,#inbox .lib-in{background:rgba(225,229,219,.06);color:var(--on-dark)}
#library .ib-draft,#inbox .ib-draft{background:rgba(22,26,20,.55);border-color:var(--dark-line);border-left-color:var(--hi);color:var(--on-dark)}
#library .ib-fill,#inbox .ib-fill{background:rgba(183,234,114,.16);color:var(--hi)}
#library .mb .ok,#inbox .mb .ok{background:var(--hi);color:var(--ink)!important}
#library .mb .ok:hover,#inbox .mb .ok:hover{background:var(--hi-hover)!important}
#library .ib-hint b,#inbox .ib-hint b{color:var(--hi)}
#library .ib-foot,#inbox .ib-foot{background:rgba(225,229,219,.03);border-top-color:var(--dark-line);color:var(--on-dark-2)}
#library :focus-visible,#inbox :focus-visible{outline-color:var(--hi)}
/* Phone: icon sits on the tag line so six stacked cards don't grow by an icon row each. */
@media (max-width:640px){
  .inc-sec .cx-card{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:center}
  .inc-sec .cx-ico{width:36px;height:36px;border-radius:10px}
  .inc-sec .cx-ico svg{width:18px;height:18px}
  .inc-sec .cx-tag.is-now{margin-top:0}
  .inc-sec .cx-card h3,.inc-sec .cx-card p:not(.cx-tag){grid-column:1/-1}
  .inc-sec .cx-card h3{margin-top:14px}
}

/* Enquiry Desk inbox rows on the dark window: unread/late, draft and sent states keep their meaning through
   lime and olive only; the price error uses one amber, the site's dark-surface warning colour. */
#inbox .ib-row{border-bottom-color:var(--dark-line)}
#inbox .ib-dot{background:var(--dark-rule)}
#inbox .ib-meta{color:var(--on-dark-2)}
#inbox .ib-from{color:var(--paper)}
#inbox .ib-subj{color:var(--on-dark)}
#inbox .ib-status{background:rgba(225,229,219,.08);color:var(--on-dark-2)}
#inbox .is-late .ib-dot{background:var(--paper)}
#inbox .is-late .ib-status{background:var(--paper);color:var(--ink)}
#inbox .is-draft{background:linear-gradient(90deg,rgba(183,234,114,.08),rgba(183,234,114,0))}
#inbox .is-draft .ib-dot{background:var(--hi);box-shadow:0 0 0 4px rgba(183,234,114,.18)}
#inbox .is-draft .ib-status{background:rgba(183,234,114,.14);color:var(--hi)}
#inbox .is-sent{background:none}
#inbox .is-sent .ib-status{background:var(--hi);color:var(--ink)}
#inbox .ib-price{background:rgba(183,234,114,.16);color:var(--hi)}
#inbox .ib-price input{border-bottom-color:var(--hi)}
#inbox .ib-price input::placeholder{color:var(--hi)}
#inbox .ib-price input:focus-visible{outline-color:var(--hi)}
#inbox .ib-price.is-err{background:rgba(240,195,110,.16);color:#F0C36E}
#inbox .ib-price.is-err input{border-bottom-color:#F0C36E}
#inbox .ib-acts button{background:transparent;border-color:var(--dark-rule);color:var(--on-dark)}
#inbox .ib-acts button:hover{background:rgba(225,229,219,.06);border-color:var(--hi)}
#inbox .ib-acts .mb .ok{background:var(--hi);color:var(--ink)!important}

/* ---------- About page alignment (2026-11-08), same standard as the service pages ----------
   "How it's different" gets the home "why" background and constellation; the founder card becomes a dark
   card in the rotating-edge shell used by the home founding card (light section + dark card, as on home). */
.diff-sec{isolation:isolate;background:radial-gradient(70% 60% at 50% 55%,#252C21 0%,var(--deep) 72%)}
.diff-sec::before{z-index:-1}
.who-shell{align-self:start}
.who-dark{background:radial-gradient(120% 70% at 100% 0%,#2C3427,var(--ink) 60%);border:0;border-radius:21px;color:var(--on-dark)}
.who-dark h3{color:var(--paper)}
.who-dark .who-av{background:var(--hi);color:var(--ink)}
.who-dark .who-role,.who-dark .who-quote cite{color:var(--on-dark-2)}
.who-dark p.who-body{color:var(--on-dark-2)}
.who-dark .who-quote{border-left-color:var(--hi)}
.who-dark .who-quote p{color:var(--paper)}
.who-dark .who-tags li{background:rgba(183,234,114,.12);color:var(--hi)}
.who-dark .who-mail{color:var(--hi)}
.who-dark .copy-mail{border-color:var(--dark-rule);color:var(--on-dark)}
.who-dark .copy-mail:hover{background:rgba(225,229,219,.09);border-color:var(--on-dark-2)}
.who-dark .copy-mail.is-done{border-color:var(--hi);color:var(--hi)}
.who-dark :focus-visible{outline-color:var(--hi)}

/* Why Fiberhand, compared with the alternatives (2026-11-08): five factual lines under the three "why" cards.
   No speed or price comparisons, only what each alternative leaves out. Dark section, lime labels. */
.vs{margin-top:var(--block);border-top:1px solid var(--dark-line);padding-top:28px}
.vs-h{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.35;text-transform:uppercase;color:var(--hi)}
.vs-list{margin:14px 0 0;padding:0}
.vs-list>div{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:6px 32px;padding:16px 0;border-bottom:1px solid var(--dark-line);transition:padding-left .18s var(--ease)}
.vs-list dt{font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--paper)}
.vs-list dd{margin:0;font-size:16px;line-height:1.55;color:var(--on-dark-2);max-width:68ch}
@media (hover:hover){.vs-list>div:hover{padding-left:10px}.vs-list>div:hover dt{color:var(--hi)}}
@media (max-width:760px){.vs-list>div{grid-template-columns:1fr;padding:14px 0}.vs-list dt{font-size:16px}.vs-list dd{font-size:15px}}