/* Corner Team AI site styles. Built from Banksy's concepts (home A, services, pricing v2), 2026-10-03. */
/* Inter, self-hosted (Home v4 speed pass): the latin subset of Google Fonts' Inter v20 variable font (SIL Open Font License),
   preloaded by every page, so there is no third-party stylesheet in the way of the first paint. The fallback is Arial
   (or its metric twin Liberation Sans) sized to Inter, so the rare late swap barely moves the layout. */
@font-face{font-family:"Inter";font-style:normal;font-weight:300 700;font-display:swap;src:url(/inter-latin.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:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");size-adjust:107.06%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
:root{
  --black:#000;--ink-soft:#1e1e1e;--gray:#2b2b2b;--gray-hover:#4a4a4a;--white:#fff;--light:#f2f2f0;--paper:#fafafa;--silver:#d9d9d9;
  --muted:rgb(217 217 217/.72);
  --blue:#4F86FF;--amber:#F5B83D;--mint:#2FD3B2;--lime:#C6F432;--orange:var(--accent-t,var(--accent));--orange-hover:var(--accent-hover);--err:#ff8f8f;
  --gutter:clamp(1.25rem,.5rem + 3vw,2.5rem);--section:clamp(96px,11vw,176px);
  --ease:cubic-bezier(.22,1,.36,1);
  /* accent (colour wheel, Bo 2026-10-06): --accent = the bright fill (buttons, dots); --orange = accent for text and lines
     (the same bright colour on dark, a deep shade in light); --on-accent = text on an accent button (AA for every preset) */
  --accent:#FF5A1F;--accent-hover:#ff7a48;--accent-d:#C2410C;--on-accent:#000;--pf:#000;
  --surface:#0b0b0b;--field:#141414;--track:#2b2b2b;--pop:#161616;
}
*{box-sizing:border-box}
html{font-family:Inter,"Inter Fallback","Suisse Intl",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--light);line-height:1.4;letter-spacing:-.2px}
a{color:inherit}img{display:block;max-width:100%}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-blue{color:var(--blue)}.c-amber{color:var(--amber)}.c-mint{color:var(--mint)}.c-lime{color:var(--lime)}.c-orange{color:var(--orange)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.lock{display:inline-flex;align-items:center;min-height:44px;gap:10px;font-size:20px;letter-spacing:-.035em;color:var(--white);text-decoration:none;white-space:nowrap}
.lock svg{width:22px;height:22px}.lock b{font-weight:600}
.nav ul{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;font-size:15px}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);transition:color .3s var(--ease)}
.nav ul a:hover{color:var(--white)}
.nav ul a.pill{color:var(--on-accent)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:50px;border:0;cursor:pointer;
  background:var(--accent);color:var(--on-accent);font:600 16px/1 Inter,"Inter Fallback",Arial,sans-serif;letter-spacing:-.2px;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease)}
.pill:hover{background:var(--accent-hover)}
/* "free" inside CTA pills (Bo 2026-10-06): heavier italic. Black on brand orange, 6.7:1 (white was 3.1:1, below AA for 16px text; fixed 2026-10-07) */
.pf{font-style:italic;font-weight:800;padding-right:.06em;color:var(--pf)}
.pill.sm{min-height:44px;padding:0 20px;font-size:15px}
.textlink{font-weight:600;text-decoration:underline;text-decoration-color:var(--gray-hover);text-underline-offset:6px;text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center;transition:text-decoration-color .3s var(--ease)}
.textlink:hover{text-decoration-color:currentColor}

/* type */
.statement{font-size:clamp(1.375rem,1.05rem + 1.15vw,2.25rem);line-height:1.15;letter-spacing:-.3px;color:var(--white);margin:0;max-width:41rem;font-weight:400}
.statement strong{font-weight:600}
.display{font-size:clamp(2.75rem,1.2rem + 5.6vw,6.25rem);font-weight:400;line-height:.95;letter-spacing:-.042em;color:var(--white);margin:0}
.display strong{font-weight:600}
.dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--white);margin-left:.04em}
.lead{margin:0;color:var(--muted);max-width:30rem;font-size:17px;line-height:1.5}
.label{display:block;font-size:14px;color:var(--muted);margin-bottom:16px}
section.s{padding:var(--section) 0 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}

/* hero */
.hero{padding:clamp(40px,6.5vw,104px) 0 0}
.hook{font-size:clamp(3rem,1.2rem + 6.9vw,7.25rem);font-weight:400;line-height:.94;letter-spacing:-.042em;color:var(--white);margin:0}
.hook .l2{display:block}.hook strong{font-weight:600}
.hero-sub{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:clamp(32px,4vw,56px);align-items:end}
/* hero photo: ring corner illustration, masked so the headline sits on black */
.hero-photo{position:relative;min-height:min(calc(100svh - 230px),800px);display:flex;flex-direction:column;justify-content:space-between}
.hero-photo .hook,.hero-photo .hero-sub{position:relative;z-index:1}
.hero-photo .hero-sub{grid-template-columns:minmax(0,1fr)}
.hero-photo .hero-sub .statement{max-width:34rem}
.hp{position:absolute;z-index:0;top:var(--hp-top,22%);bottom:0;right:calc(var(--gutter)*-1);width:var(--hp-w,64%);margin:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 30%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 30%,#000 82%,transparent 100%);mask-composite:intersect}
.hp img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hp-pos,center)}
.hp-cap{position:absolute;right:var(--gutter);bottom:8px;z-index:1;font-size:12px;color:var(--muted)}
@media (min-width:1441px){.hp{right:calc((100vw - 1440px)/-2 - var(--gutter))}}
@media (max-width:900px){
  .hero-photo{min-height:0;display:block}
  .hp{position:relative;inset:auto;right:auto;width:auto;margin:-24px calc(var(--gutter)*-1) 0;aspect-ratio:5/4;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .hp img{object-position:var(--hp-pos-m,center)}
  .hp-cap{position:static;display:block;text-align:right;margin-top:-28px;padding:0 var(--gutter) 12px}
  .hero-photo .hero-sub{margin-top:8px;display:flex;flex-direction:column;gap:28px}
  .hero-photo .hero-sub>div{order:-1}
}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.proof{margin:16px 0 0;color:var(--muted);font-size:15px}
.n{font-weight:600;font-variant-numeric:tabular-nums;display:block;margin-bottom:12px}


/* four corners */
.corners{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.corner{position:relative;min-height:clamp(260px,22vw,340px);padding:clamp(28px,3.4vw,56px);display:flex;flex-direction:column;justify-content:flex-start}
.corner::before{content:"";position:absolute;width:clamp(48px,5vw,72px);height:clamp(48px,5vw,72px);border:0 solid var(--c)}
.tl::before{top:0;left:0;border-top-width:7px;border-left-width:7px}
.tr::before{top:0;right:0;border-top-width:7px;border-right-width:7px}
.bl::before{bottom:0;left:0;border-bottom-width:7px;border-left-width:7px}
.br::before{bottom:0;right:0;border-bottom-width:7px;border-right-width:7px}
.bl,.br{justify-content:flex-end}
.tr,.br{align-items:flex-end;text-align:right}
.corner .k{font-size:14px;font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
.corner h3{margin:10px 0 12px;font-size:clamp(2.25rem,1.3rem + 3vw,4.5rem);font-weight:400;letter-spacing:-.045em;line-height:.95;color:var(--white)}
.corner p{margin:0;color:var(--muted);font-size:18px;line-height:1.45;max-width:26rem}
.you{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:var(--white);transform:translate(-50%,-50%)}

/* audit band (variant 2) */

/* covers list */
.covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;counter-reset:c}
.covers li{display:grid;grid-template-columns:44px 1fr;padding:18px 0;border-top:1px solid var(--ink-soft);font-size:17px;color:var(--white);counter-increment:c}
.covers li::before{content:counter(c,decimal-leading-zero);font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.covers-foot{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;margin-top:32px}
.covers-foot p{margin:0;color:var(--muted);font-size:15px}

/* how */
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--ink-soft);align-items:start}
.step .big{display:flex;gap:clamp(16px,2vw,32px);align-items:baseline}
.step .num{color:var(--white);font-size:clamp(3.5rem,2rem + 5vw,7.5rem);line-height:.85;font-weight:400;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(1.5rem,1.05rem + 1.15vw,2.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--white);margin:0}
.step p{margin:0;font-size:18px;line-height:1.45;color:var(--light);max-width:32rem}
.step .meta{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* speed to lead */
.stl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.stl .statement{margin-bottom:20px}
.stl .lead{margin-bottom:28px}
.flow{list-style:none;margin:0;padding:0}
.flow li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--ink-soft);align-items:baseline}
.flow li:last-child{border-bottom:1px solid var(--ink-soft)}
.flow time{font-weight:600;font-variant-numeric:tabular-nums;color:var(--mint);font-size:15px;white-space:nowrap}
.flow span{color:var(--white);font-size:18px;line-height:1.4}

/* human */
.pairs{list-style:none;margin:0;padding:0}
.pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--ink-soft)}
.pair h3{margin:0 0 10px;font-size:clamp(1.75rem,1.1rem + 2vw,3.25rem);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--white)}
.pair h3 strong{font-weight:600}
.pair p{margin:0;color:var(--muted);max-width:26rem}
.pair .or{font-size:15px;color:var(--muted);padding-top:clamp(8px,1vw,18px)}
.quote{margin:clamp(48px,6vw,96px) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:48px}
.quote p{margin:0}
.quote .lead{align-self:end}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.story{display:grid;gap:24px}
.story p{margin:0;font-size:18px;line-height:1.5;color:var(--light);max-width:34rem}

/* close */
.close{padding:var(--section) 0 clamp(64px,7vw,104px)}
.closegrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end;margin-top:clamp(40px,5vw,64px)}
footer{border-top:1px solid var(--ink-soft);padding:32px 0 48px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
footer b{color:var(--white);font-weight:600}

.js-anim .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-anim .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .how-head{grid-template-columns:1fr}
  .hero-sub,.head,.step,.stl,.quote,.about,.closegrid,.show{grid-template-columns:1fr}
  .hero-sub{gap:28px}.head{gap:16px}.show{gap:28px}.notes{order:2}
  .step{gap:16px}
  .covers{grid-template-columns:1fr 1fr}
  .pair{grid-template-columns:1fr;gap:8px}.pair .or{padding:0}
}
@media (max-width:640px){
  .hook{font-size:clamp(2.75rem,13.6vw,4rem);line-height:.96}
  .covers{grid-template-columns:1fr}
  .corners{grid-template-columns:1fr;gap:12px}.you{display:none}
  .corner{min-height:0;padding:28px 24px}
  .tr,.br{align-items:flex-start;text-align:left}
  .bl,.br{justify-content:flex-start}
  .flow li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js-anim .rv{opacity:1;transform:none}}
.nav ul a.on{color:var(--white)}
.svc{scroll-margin-top:24px}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(32px,4vw,56px);position:relative;padding-top:clamp(28px,3vw,44px)}
.svc-head::before{content:"";position:absolute;top:0;left:0;width:clamp(48px,5vw,72px);height:clamp(48px,5vw,72px);border-top:7px solid var(--c);border-left:7px solid var(--c)}
.svc-head .k{display:block;font-size:14px;font-weight:600;color:var(--c);margin:clamp(20px,2vw,28px) 0 10px clamp(20px,2vw,28px)}
.svc-head h2{margin:0 0 0 clamp(20px,2vw,28px);font-size:clamp(2.25rem,1.3rem + 3vw,4.5rem);font-weight:400;letter-spacing:-.045em;line-height:.95;color:var(--white)}
@media (max-width:900px){.svc-head{grid-template-columns:1fr;gap:16px}}

/* home */
.how-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.how-head p{margin:0;color:var(--muted);max-width:28rem}
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}
/* pricing */
.k{display:block;font-size:14px;font-weight:600;color:var(--c,var(--muted));font-variant-numeric:tabular-nums}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:16px;line-height:1.45;color:var(--light)}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--c,var(--white));border-bottom:2px solid var(--c,var(--white));transform:rotate(-45deg)}
.free{--c:var(--amber);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:40px;align-items:center;padding:clamp(28px,3.4vw,48px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);position:relative}
.free::before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:7px solid var(--c);border-left:7px solid var(--c);border-top-left-radius:16px}
.free h2{margin:10px 0 0;font-size:clamp(2rem,1.2rem + 2.4vw,3.5rem);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--white)}
.price{display:block;font-weight:600;color:var(--c);margin-top:8px}
.plans{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;padding:clamp(28px,2.8vw,40px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);display:flex;flex-direction:column;gap:18px}
.plan::before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:7px solid var(--c);border-left:7px solid var(--c);border-top-left-radius:16px}
.plan.pop{box-shadow:inset 0 0 0 2px var(--c);background:var(--surface)}
.plan h3{margin:0;font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--white)}
.plan .what{margin:0;color:var(--muted);font-size:16px;line-height:1.5;min-height:4.5em}
.amt{margin:0;display:flex;align-items:baseline;gap:6px;padding:16px 0;border-top:1px solid var(--ink-soft);border-bottom:1px solid var(--ink-soft)}
.amt b{font-size:clamp(2.5rem,1.6rem + 2.6vw,3.75rem);font-weight:600;letter-spacing:-.045em;color:var(--white);font-variant-numeric:tabular-nums}
.amt span{color:var(--muted);font-size:16px}
.fine{margin:20px 0 0;color:var(--muted);font-size:15px}
.rows{list-style:none;margin:0;padding:0}
.row{display:flex;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid var(--ink-soft);font-size:18px;color:var(--light)}
.row:last-child{border-bottom:1px solid var(--ink-soft)}
.row b{font-weight:600;color:var(--white);text-align:right}
@media (max-width:900px){.free{grid-template-columns:1fr;gap:24px}.plans{grid-template-columns:1fr}.plan .what{min-height:0}}
@media (max-width:640px){.row{flex-direction:column;gap:4px}.row b{text-align:left}}
.setup{margin:0;color:var(--light);font-size:16px}
.plan .setup{margin:-6px 0 0;font-size:15px;color:var(--light)}
.plan .ticks b{color:var(--white);font-weight:600}

/* shared header + footer (www build) */
.nav{display:flex;align-items:center;gap:32px;height:88px}
.nav .links{display:flex;gap:32px;margin-left:auto;font-size:15px}
.nav .links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);transition:color .3s var(--ease)}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--white)}
.sm-only{display:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:9;background:var(--white);color:var(--black);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:8px}
.step .textlink{margin-top:8px}
.nf{padding:clamp(64px,10vw,160px) 0 0}
.nf .cta{margin-top:40px}
@media (max-width:640px){
  .nav{display:grid;grid-template-columns:1fr auto;grid-template-areas:"lock cta" "links links";height:auto;gap:4px 12px;padding:14px 0 6px}
  .nav .lock{grid-area:lock;font-size:18px}
  .nav .pill{grid-area:cta}
  .nav .links{grid-area:links;margin:0;gap:24px}
  .lg-only{display:none}.sm-only{display:inline}
  main .pill{white-space:normal;text-align:center;line-height:1.2;padding:12px 24px;max-width:100%}
}

/* Site-wide footer (Bo 2026-10-06 22:34Z): closing line + CTA, three labelled columns, bottom bar. Accent = colour picker. */
.site-foot{display:block;position:relative;margin-top:clamp(80px,9vw,144px);padding:clamp(56px,6vw,88px) 0 0;border-top:1px solid var(--ink-soft);font-size:16px;color:var(--muted)}
.site-foot::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:56px;border-top:5px solid var(--orange);border-left:5px solid var(--orange);border-top-left-radius:14px;pointer-events:none}
.site-foot p{margin:0}
.ft-close{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 48px;padding-left:clamp(28px,3vw,40px)}
.ft-say .lock{font-size:20px}
.ft-line{margin-top:clamp(20px,2vw,28px)!important;font-size:clamp(36px,2rem + 2.6vw,76px);line-height:1.02;letter-spacing:-.045em;font-weight:600;color:var(--white);text-wrap:balance}
.ft-l2{display:block}
.ft-acc{color:var(--orange)}
.ft-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.ft-book{display:inline-flex;align-items:center;min-height:48px;font-weight:600;color:var(--white);text-decoration:underline;text-decoration-color:var(--gray-hover);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .3s var(--ease)}
.ft-book:hover{text-decoration-color:var(--orange)}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(24px,4vw,64px);margin-top:clamp(56px,6vw,88px);padding:clamp(40px,4vw,56px) 0 clamp(40px,4vw,56px) clamp(28px,3vw,40px);border-top:1px solid var(--ink-soft)}
.ft-h{margin:0 0 12px!important;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;justify-items:start}
.site-foot ul a{display:inline-flex;align-items:center;min-height:44px;color:var(--light);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.site-foot ul a:hover{color:var(--white);text-decoration-color:var(--orange)}
.site-foot ul .pf{color:inherit;font-weight:700}
.ft-txt{display:flex;align-items:center;min-height:44px;color:var(--muted)}
.ft-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px 0 40px;border-top:1px solid var(--ink-soft);font-size:14px;color:var(--muted)}
.ft-bar small{font-size:inherit}
@media (prefers-reduced-motion:no-preference){
  .ft-anim .ft-col{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .ft-anim.in .ft-col{opacity:1;transform:none}
  .ft-anim.in .ft-col:nth-child(2){transition-delay:.08s}.ft-anim.in .ft-col:nth-child(3){transition-delay:.16s}
}
@media (max-width:640px){
  .ft-close,.ft-cols{padding-left:0}
  .site-foot{padding-top:72px}
  .ft-cols{grid-template-columns:1fr;gap:32px;margin-top:40px}
  .site-foot ul a,.ft-txt,.ft-say .lock{min-height:48px}
  .ft-cta{width:100%}
  .ft-cta .pill{width:100%}
  .ft-bar{flex-direction:column}
}

/* mobile overrides that must follow the base rules above (how-head) */
@media (max-width:900px){.how-head{grid-template-columns:1fr;gap:16px;margin-top:56px}}
/* Services: the old home hook is the H1 now; the "Four corners" intro sits under it (Bo 2026-10-03 05:27Z). */
.svc-label{display:block;margin-top:clamp(40px,5vw,72px)}
.svc-sub{margin:12px 0 0}
/* Headline key word in the standard orange (Bo 2026-10-03 05:37Z, replaced the 4-colour gradient). */
.hook strong.grad{color:var(--orange)}
.hook strong.grad + .dot{background:var(--orange)}

/* ===== 4 corners motion graphic, replaces the .jump pills (Bo picked Banksy's concept 3, 2026-10-03 05:39Z) =====
   The logo unfolds into the four corners, then the Bracket + wordmark lockup settles in the centre.
   Centre lockup is 1.5x the concept (Bo): sized with font-size, so the SVG and text stay sharp. */
.corners4{margin-top:clamp(48px,6vw,88px)}
.home-c4{margin-top:clamp(56px,7vw,112px)}
.home-c4 > .label{margin-bottom:clamp(20px,2.4vw,32px)}
.home-c4 .corners4{margin-top:0}
.hero .statement .aud{display:block;margin-top:12px;font-size:16px;line-height:1.4;letter-spacing:0;color:var(--muted)}
/* "What we do" teaser under the corners (Bo 2026-10-03 16:38Z): 4 pillars x 5 items, each pillar links to its Services section. */
.c4-teaser{list-style:none;margin:clamp(32px,3.6vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 32px}
.c4-teaser > li{border-top:2px solid var(--c);padding-top:14px}
.c4-teaser h2{margin:0 0 10px;font-size:19px;font-weight:600;letter-spacing:-.3px;line-height:1.2}
.c4-teaser h2 a{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;color:var(--white);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:2px;transition:text-decoration-color .3s var(--ease)}
.c4-teaser h2 a:hover,.c4-teaser h2 a:focus-visible{text-decoration-color:var(--c)}
.c4-teaser h2 a::after{content:"\2192";color:var(--c);font-weight:400}
.c4-teaser .n{font-size:14px;color:var(--c);font-variant-numeric:tabular-nums}
.c4-teaser ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.c4-teaser ul li{color:var(--muted);font-size:15px;line-height:1.35}
@media (max-width:900px){.c4-teaser{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.c4-teaser{grid-template-columns:1fr;gap:20px}.c4-teaser > li{padding-top:6px}.c4-teaser h2{margin-bottom:2px}.c4-teaser ul{display:flex;flex-wrap:wrap;gap:6px 18px}}
.corners4 .frame{position:relative;container-type:size;aspect-ratio:1360/500;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;--s:clamp(56px,7.4vw,112px);--w:clamp(6px,.62vw,9px);--d:22px}
.corners4 .cn{display:block;text-decoration:none;color:var(--white);border-radius:12px;outline-offset:-2px}
.corners4 .cn:focus-visible{outline:2px solid var(--c)}
.corners4 .brk{position:absolute;width:var(--s);height:var(--s);border:0 solid var(--c);
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1),border-color .6s ease,border-width .3s cubic-bezier(.16,1,.3,1)}
.corners4 .tl .brk{top:0;left:0;border-top-width:var(--w);border-left-width:var(--w)}
.corners4 .tr .brk{top:0;right:0;border-top-width:var(--w);border-right-width:var(--w)}
.corners4 .bl .brk{bottom:0;left:0;border-bottom-width:var(--w);border-left-width:var(--w)}
.corners4 .br .brk{bottom:0;right:0;border-bottom-width:var(--w);border-right-width:var(--w)}
.corners4 .cn:hover .brk,.corners4 .cn:focus-visible .brk{--w:clamp(9px,.9vw,13px)}
.corners4 .lab{position:absolute;display:flex;flex-direction:column;gap:6px;max-width:min(30cqw,340px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.corners4 .tl .lab{top:calc(var(--s)*.42);left:calc(var(--s)*.42)}
.corners4 .tr .lab{top:calc(var(--s)*.42);right:calc(var(--s)*.42);text-align:right;align-items:flex-end}
.corners4 .bl .lab{bottom:calc(var(--s)*.42);left:calc(var(--s)*.42)}
.corners4 .br .lab{bottom:calc(var(--s)*.42);right:calc(var(--s)*.42);text-align:right;align-items:flex-end}
.corners4 .lab .n{margin:0;display:block;font-size:14px;font-weight:600;color:var(--c);font-variant-numeric:tabular-nums}
.corners4 .lab b{font-size:clamp(1.75rem,1rem + 2.2vw,3.25rem);font-weight:400;letter-spacing:-.045em;line-height:.95}
.corners4 .lab em{font-style:normal;color:var(--muted);font-size:16px;line-height:1.35}
.corners4 .cn:hover .lab b{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:8px}
.corners4 .c4-you{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.corners4 .c4-you i{display:block;width:clamp(18px,1.8vw,26px);height:clamp(18px,1.8vw,26px);border-radius:50%;background:var(--orange)}
.corners4 .seed{position:absolute;left:50%;top:50%;width:calc(var(--s)*.9);height:calc(var(--s)*.9);transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .25s ease}
.corners4 .seed svg{width:100%;height:100%}
/* centre lockup: concept was clamp(20px,2.1vw,30px); 1.5x */
.corners4 .lockc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5em;font-size:clamp(30px,3.15vw,45px);letter-spacing:-.035em;color:var(--white);white-space:nowrap;pointer-events:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1)}
.corners4 .lockc svg{width:1.1em;height:1.1em;flex:none}
.corners4 .lockc b{font-weight:600}
/* start frame: the four brackets sit on the centre, turned to read as the Bracket logo, in white */
.corners4.pre .seed{opacity:1}
.corners4.pre .brk{border-color:var(--white);opacity:0}
.corners4.pre .tl .brk{transform:translate(calc(50cqw - var(--s)/2 + var(--d)),calc(50cqh - var(--s)/2 + var(--d))) rotate(180deg) scale(.62)}
.corners4.pre .tr .brk{transform:translate(calc(var(--d) + var(--s)/2 - 50cqw),calc(50cqh - var(--s)/2 + var(--d))) rotate(90deg) scale(.62)}
.corners4.pre .bl .brk{transform:translate(calc(50cqw - var(--s)/2 + var(--d)),calc(var(--d) + var(--s)/2 - 50cqh)) rotate(-90deg) scale(.62)}
.corners4.pre .br .brk{transform:translate(calc(var(--d) + var(--s)/2 - 50cqw),calc(var(--d) + var(--s)/2 - 50cqh)) scale(.62)}
.corners4.pre .lab{opacity:0;transform:translateY(10px)}
.corners4.pre .lockc{opacity:0;filter:blur(6px)}
.corners4.pre .c4-you{opacity:1}
.corners4.play .seed{transition-delay:.35s}
.corners4.play .brk{transition:transform 1.05s cubic-bezier(.16,1,.3,1) .45s,opacity .01s linear .4s,border-color .8s ease .6s,border-width .3s ease}
.corners4.play .tr .brk{transition-delay:.5s,.4s,.65s,0s}
.corners4.play .bl .brk{transition-delay:.55s,.4s,.7s,0s}
.corners4.play .br .brk{transition-delay:.6s,.4s,.75s,0s}
.corners4.play .lab{transition-delay:1.15s}
.corners4.play .tr .lab{transition-delay:1.22s}
.corners4.play .bl .lab{transition-delay:1.29s}
.corners4.play .br .lab{transition-delay:1.36s}
/* the dot glides into its place in the lockup, then hands over to the lockup's own dot */
.corners4.play .c4-you{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(var(--k,1));transition:transform .8s cubic-bezier(.65,0,.35,1) 1.45s,opacity .01s linear 2.3s}
.corners4.play .lockc{transition-delay:1.75s}
@media (max-width:640px){
  .corners4 .frame{aspect-ratio:1/1.1;--s:64px;--w:6px;--d:12px}
  .corners4 .lab{max-width:40cqw}
  .corners4 .lab b{font-size:1.5rem}
  .corners4 .lab em{display:none}
}
/* mid widths: a taller frame so the 1.5x lockup clears the corner labels */
@media (min-width:641px) and (max-width:1100px){.corners4 .frame{aspect-ratio:2/1}}
@media (min-width:641px) and (max-width:900px){.corners4 .frame{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.corners4 *{transition:none!important}}

/* ===== Team photos (Bo picked 07, 08, 09, 02 on 2026-10-03 05:53Z). Generated illustrations, each labelled. =====
   .band = full-bleed photo strip (home Who we are, About story, Services under the 4 corners).
   .side-photo = photo beside the Process page steps heading. Pricing hero reuses .hero-photo/.hp. */
.hero-photo .label{position:relative;z-index:1}
.band{position:relative;margin:clamp(56px,7vw,112px) calc(var(--gutter)*-1) 0}
.band img{display:block;width:100%;height:auto;aspect-ratio:var(--bp-r,21/9);object-fit:cover;object-position:var(--bp-pos,50% 45%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%)}
.band .hp-cap{bottom:6px}
@media (min-width:1441px){.band{margin-left:calc((100vw - 1440px)/-2 - var(--gutter));margin-right:calc((100vw - 1440px)/-2 - var(--gutter))}}
.how-photo{margin-top:clamp(72px,9vw,144px)}
.how-photo>div p{margin-top:20px}
.side-photo{position:relative;margin:0}
.side-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.side-photo .hp-cap{right:12px;bottom:6px}
@media (max-width:900px){
  .band img{aspect-ratio:4/3;object-position:50% 50%}
  .side-photo{margin:12px calc(var(--gutter)*-1) 0}
  .side-photo img{aspect-ratio:4/3;border-radius:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 80%,transparent 100%)}
  .side-photo .hp-cap{right:var(--gutter)}
}

/* ===== Corner Score, About, Contact pages (Bo 2026-10-03 16:22Z) ===== */
/* secondary button: white outline, never orange */
.pill.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--white)}
.pill.ghost:hover{background:var(--white);color:var(--black)}
.free .lead{max-width:34rem}
.proof a{color:var(--light);text-underline-offset:4px}
/* what you get */
.ticks.get{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 48px}
.ticks.get li{font-size:18px;color:var(--muted)}
.ticks.get b{color:var(--white);font-weight:600}
.after-how{margin-top:clamp(32px,4vw,56px);gap:16px 28px}
.after-how .proof{margin:0}
/* name cards (About) and contact cards: bracket corner, no images */
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.person{position:relative;padding:clamp(28px,3.4vw,48px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);display:flex;flex-direction:column;gap:10px;min-width:0}
.person::before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:7px solid var(--c);border-left:7px solid var(--c);border-top-left-radius:16px}
.person .k{margin-top:12px}
.person h3{margin:0;font-size:clamp(2rem,1.2rem + 2.4vw,3.5rem);font-weight:400;letter-spacing:-.04em;line-height:1.05;color:var(--white);overflow-wrap:anywhere}
.person p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
.person a.mail{text-decoration:underline;text-decoration-color:var(--gray-hover);text-decoration-thickness:2px;text-underline-offset:8px}
.person a.mail:hover{text-decoration-color:currentColor}
#reach .person h3{font-size:clamp(1.5rem,1rem + 2vw,3rem)}
@media (max-width:900px){.people,.ticks.get{grid-template-columns:1fr}}
/* nav with 5 links: two rows (logo + button, then links) below 1100px so it never overflows */
@media (max-width:1100px){
  .nav{display:grid;grid-template-columns:1fr auto;grid-template-areas:"lock cta" "links links";height:auto;gap:4px 12px;padding:14px 0 6px}
  .nav .lock{grid-area:lock}
  .nav .pill{grid-area:cta}
  .nav .links{grid-area:links;margin:0;gap:4px 28px;flex-wrap:wrap}
}
@media (max-width:640px){.nav .links{gap:0 18px;font-size:14px}}

/* About v2 (2026-10-03): hero lead, story close, Why us list, values cards */
.hero-lead{margin-bottom:24px}
.story .story-end{color:var(--white);font-size:clamp(1.25rem,1rem + .8vw,1.75rem);line-height:1.2;letter-spacing:-.3px}
.story .story-end strong{font-weight:600}
.why-lead{margin-top:20px}
.why{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--ink-soft)}
.why li{padding:20px 0;border-bottom:1px solid var(--ink-soft);font-size:17px;line-height:1.5;color:var(--muted);max-width:34rem}
.why b{display:block;color:var(--white);font-weight:600;margin-bottom:4px}
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.value{position:relative;padding:clamp(28px,3vw,40px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);display:flex;flex-direction:column;gap:10px;min-width:0}
.value::before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:7px solid var(--c);border-left:7px solid var(--c);border-top-left-radius:16px}
.value .k{margin-top:12px}
.value h3{margin:0;font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);font-weight:400;letter-spacing:-.03em;line-height:1.1;color:var(--white)}
.value h3{text-wrap:balance}
.value p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
@media (max-width:900px){.values{grid-template-columns:1fr 1fr}.why li{max-width:none}}
@media (max-width:640px){.values{grid-template-columns:1fr}}

.home-intro .home-c4{margin-top:clamp(48px,6vw,96px)}

/* ===== Home v3 (Bo 2026-10-04 01:10Z): Who we are, What we do, Corner Score, Process, Contact ===== */
.sec-links{margin-top:clamp(28px,3vw,40px)}
.values-sm{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.values-sm .value{padding:24px 20px 22px;gap:8px}
.values-sm .value::before{width:40px;height:40px;border-top-width:5px;border-left-width:5px}
.values-sm .value h3{font-size:19px;font-weight:600;letter-spacing:-.3px;line-height:1.2}
.values-sm .value p{font-size:15px;line-height:1.45}
@media (max-width:1100px){.values-sm{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.values-sm{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.values-sm{grid-template-columns:1fr}}
.home-who .band{margin-top:clamp(40px,5vw,72px)}
.home-intro .home-c4{margin-top:var(--section)}
.score-shot{margin:0}
.score-shot a{display:block;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--ink-soft),0 0 0 1px var(--ink-soft)}
.score-shot img{width:100%;height:auto;transition:transform .6s var(--ease)}
.score-shot a:hover img{transform:scale(1.015)}
.score-shot a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.score-shot figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.pdl{margin:0;display:grid;gap:18px}
.pdl dt{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:4px}
.pdl dd{margin:0;font-size:17px;line-height:1.5;color:var(--light);max-width:34rem}
/* forms */
.formgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.formgrid .statement{margin-bottom:20px}
.lead-form{border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);background:var(--surface);padding:clamp(20px,3vw,40px)}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.fld.wide{grid-column:1/-1}
.fld label,.fld legend{font-size:15px;font-weight:600;color:var(--white);padding:0}
.fld legend{margin-bottom:10px}
.opt{font-weight:400;color:var(--muted)}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:10px;background:var(--field);color:var(--white);font:400 16px/1.4 Inter,"Inter Fallback",Arial,sans-serif;box-shadow:inset 0 0 0 1px var(--gray);transition:box-shadow .2s var(--ease)}
.fld textarea{resize:vertical;min-height:120px}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--silver) 50%),linear-gradient(135deg,var(--silver) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.fld input:hover,.fld select:hover,.fld textarea:hover{box-shadow:inset 0 0 0 1px var(--gray-hover)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--orange)}
.fld [aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--err)}
.f-err{margin:0;min-height:0;font-size:14px;color:var(--err)}
.f-err:empty{display:none}
.chks{display:flex;flex-wrap:wrap;gap:10px}
.fld .chk{display:inline-flex;font-weight:400;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:50px;box-shadow:inset 0 0 0 1px var(--gray);font-size:15px;color:var(--light);cursor:pointer}
.fld .chk input{flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;border-radius:3px;box-shadow:none;background:none;accent-color:var(--orange)}
.chk:has(input:checked){box-shadow:inset 0 0 0 2px var(--orange);color:var(--white)}
.chk:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.hp-wrap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.f-foot .pill:disabled{opacity:.6;cursor:wait}
.f-status{margin:0;font-size:15px;color:var(--muted)}
.f-status.is-err{color:var(--err)}
.f-status a,.f-ok a{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.lead-form.sent .f-body{display:none}
.f-ok{outline:none}
.f-ok .statement{margin:0 0 12px}
.f-ok p:last-child{margin:0;color:var(--muted)}
@media (max-width:900px){.formgrid{grid-template-columns:1fr;gap:28px}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
/* Speed-to-lead opt-in + privacy line, inside every lead form (Bo 2026-10-07). The box is optional and never pre-ticked. */
.f-opt{display:grid;gap:4px;margin-top:12px}
.opt-chk{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:12px 0;font-size:15px;line-height:1.4;color:var(--light);cursor:pointer}
.opt-chk input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--orange);cursor:pointer}
.opt-chk:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:4px;border-radius:6px}
.opt-chk input:focus-visible{outline:none}
.f-priv{margin:0;font-size:14px;line-height:1.4;color:var(--muted)}
.f-priv a{display:inline-flex;align-items:center;min-height:48px;margin:-14px 0;color:var(--white);text-decoration:underline;text-decoration-color:var(--gray-hover);text-underline-offset:4px;text-decoration-thickness:2px}
.f-priv a:hover{text-decoration-color:currentColor}
.lead-form.full .f-opt{margin-top:20px}
.pdl dd .textlink{display:inline;min-height:0}

/* mobile menu (Bo 2026-10-04). 900px and up: .menu is display:contents, so the desktop header is unchanged.
   Below 900px with JS: one row (logo, pill, Menu button) and #site-menu is a full-screen overlay under it.
   Without JS the links show under the logo (the 1100px two-row rule above) and the button stays hidden. */
.menu{display:contents}
.m-foot,.menu-btn{display:none}
@media (max-width:899.98px){
  .js{--hh:72px}
  .js .hd{min-height:var(--hh)}
  .js .nav{display:flex;align-items:center;gap:8px;height:var(--hh);padding:0}
  .js .nav .lock{flex:none;margin-right:auto;font-size:18px}.js .nav .lock svg{flex:none}
  .js .nav .pill.sm{flex:none}
  .js .nav .pill.sm{padding:0 16px;font-size:15px}
  .js .nav .lg-only{display:none}.js .nav .sm-only{display:inline}
  .js .menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:-4px;padding:0;border:0;border-radius:50%;
    background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px var(--gray-hover);cursor:pointer;transition:box-shadow .3s var(--ease)}
  .js .menu-btn:hover{box-shadow:inset 0 0 0 1px var(--white)}
  .menu-btn .bars{position:relative;width:18px;height:12px}
  .menu-btn .bars i{position:absolute;left:0;width:18px;height:2px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
  .menu-btn .bars i:first-child{top:2px}.menu-btn .bars i:last-child{top:8px}
  .nav.open .menu-btn .bars i{top:5px}
  .nav.open .menu-btn .bars i:first-child{transform:rotate(45deg)}.nav.open .menu-btn .bars i:last-child{transform:rotate(-45deg)}
  .js .nav.open{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--black);padding:0 var(--gutter)}
  .js .menu{position:fixed;z-index:59;top:var(--hh);left:0;right:0;bottom:0;display:flex;flex-direction:column;background:var(--black);
    padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
  .js .nav.open .menu{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .3s var(--ease),visibility 0s}
  .js .menu .links{display:flex;flex-direction:column;gap:0;margin:0;font-size:clamp(28px,7.6vw,32px)}
  .js .menu .links a{display:flex;align-items:center;min-height:64px;border-bottom:1px solid var(--ink-soft);color:var(--muted);letter-spacing:-.035em;line-height:1.1}
  .js .menu .links a[aria-current]{color:var(--white)}
  .js .menu .links a[aria-current]::after{content:"";flex:none;width:8px;height:8px;margin-left:14px;border-radius:50%;background:var(--white)}
  .js .m-foot{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding-top:40px}
  .js .m-foot .pill{min-height:56px;font-size:17px}
  .js .m-mail{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:var(--muted);font-size:16px;text-decoration:underline;text-decoration-color:var(--gray-hover);text-underline-offset:6px}
  html.menu-open,html.menu-open body{overflow:hidden}
}
/* narrow phones: "Free Score" so logo, pill and Menu always fit on one row */
@media (max-width:419.98px){.js .nav .xs-hide{display:none}}
@media (max-width:359.98px){.js .nav .lock{font-size:16px;gap:8px}.js .nav .pill.sm{padding:0 12px}.js .nav{gap:6px}}
.how-lab{margin:clamp(40px,4vw,56px) 0 16px}

/* ===== Home v4 (Bo 2026-10-04 02:44Z): hero box, proof strip, FAQ, sticky phone CTA, services in the corners ===== */
.hero-act{display:flex;flex-direction:column;gap:14px;max-width:44rem;width:100%;align-self:stretch}
.hero-form{background:rgb(11 11 11/.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:16px}
.hf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.hf-row .pill{min-height:48px;white-space:nowrap}
.short-form .fld label{font-size:14px}
.short-form .f-status:empty{display:none}
.short-form .f-status{margin-top:10px}
.short-form .f-ok p:last-child{margin:0;color:var(--muted)}
.sf-alt{margin-top:14px;font-size:15px}
.sf-alt a{color:var(--light);text-underline-offset:4px}
.hero-form .fld label{font-size:14px}
.hero-form .pill{min-height:48px}
.hero-form .f-status:empty{display:none}
.hero-form .f-status{margin-top:10px}
.hf-ok{margin:0 0 6px;font-size:19px;color:var(--white)}
.hero-form .f-ok p:last-child{margin:0;color:var(--muted)}
.hero-alt{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.proof-strip{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px}
.proof-strip li{border-top:2px solid var(--c);padding-top:12px;font-size:16px;line-height:1.35;color:var(--light)}
.faq{border-top:1px solid var(--ink-soft);max-width:52rem}
.faq-i{border-bottom:1px solid var(--ink-soft)}
.faq-i summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";flex:none;font-size:26px;font-weight:300;line-height:1;color:var(--muted);transition:transform .3s var(--ease)}
.faq-i[open] summary::after{transform:rotate(45deg)}
.faq-i summary:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
.faq-i h3{margin:0;font-size:clamp(1.125rem,1rem + .45vw,1.375rem);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--white)}
.faq-i p{margin:0 0 22px;color:var(--muted);font-size:17px;line-height:1.55;max-width:44rem}
.sticky-cta{display:none}
@media (max-width:899.98px){
  .js .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--glass,rgb(0 0 0/.88));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--ink-soft);transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
  .js .sticky-cta.show{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
  .js .sticky-cta .pill{width:100%;min-height:52px}
  .js body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .hf-row{grid-template-columns:1fr;gap:10px}
  .hero-form{padding:14px}
  .short-form .pill{width:100%}
  .proof-strip{grid-template-columns:1fr;gap:10px}
  .proof-strip li{padding-top:10px}
}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none!important}}
/* services listed inside each corner (homepage) */
.corners4 .svcs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px}
.corners4 .svcs li{font-size:14px;line-height:1.3;color:var(--light)}
.corners4.has-svcs .frame{aspect-ratio:1360/640}
.corners4.has-svcs .lab{max-width:min(28cqw,320px)}
@media (min-width:641px) and (max-width:1100px){.corners4.has-svcs .frame{aspect-ratio:4/3}.corners4.has-svcs .lab em{display:none}}
@media (max-width:640px){
  .corners4.has-svcs .frame{aspect-ratio:1/1.62}
  .corners4.has-svcs .lab{max-width:44cqw}
  .corners4.has-svcs .svcs li{font-size:13px}
}

/* ===== Photo heroes on every page (Bo 2026-10-04: "images on the top of the pages as full width heroes").
   .ph sits outside .wrap so the photo spans the viewport. Two concepts behind data-hero on <html> (set before paint):
   A Cinematic (default) = photo fills the hero, copy bottom-left on a shade that follows the 1440 frame.
   B Editorial = photo at 21:9 (4:5 on phones), a black panel with an orange corner cuts into its bottom-left.
   Per-page tuning on the section: --pos (A focus), --z/--o (A zoom + origin), --pos-b (B focus), --pos-m (phone focus). */
.ph{position:relative;isolation:isolate;padding:0;overflow:hidden;min-height:clamp(600px,90svh,920px);display:flex;align-items:flex-end}
.ph-media{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:#000}
.ph-media picture{display:block;width:100%;height:100%}
.ph-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);transform:scale(var(--z,1));transform-origin:var(--o,50% 40%)}
.ph-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgb(0 0 0/.35) 0,transparent 50%),linear-gradient(0deg,#000 0,transparent 22%),linear-gradient(180deg,rgb(0 0 0/.45) 0,transparent 14%)}
/* Stand-in photos (favourites, people across the frame) need a real shade under the copy; it follows the 1440 frame. */
.ph-stand-in::after{--f:max(0px,50% - 720px);
  background:linear-gradient(90deg,rgb(0 0 0/.9) 0,rgb(0 0 0/.78) calc(var(--f) + 20rem),rgb(0 0 0/.38) calc(var(--f) + 42rem),transparent calc(var(--f) + 58rem)),
    linear-gradient(0deg,#000 0,rgb(0 0 0/.6) 18%,transparent 46%),linear-gradient(180deg,rgb(0 0 0/.55) 0,transparent 16%)}
.ph-in{position:relative;width:100%;padding-top:96px;padding-bottom:clamp(48px,5.5vw,88px)}
.ph-card{position:relative;max-width:min(54rem,58%)}
.ph-card .label{color:var(--light)}
.ph .hook{font-size:clamp(3rem,.9rem + 4.6vw,5.75rem);text-shadow:0 2px 32px rgb(0 0 0/.45)}
.ph .hero-sub{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:clamp(24px,2.6vw,36px);max-width:min(40rem,54%)}
.ph .hero-sub .statement{max-width:34rem;text-shadow:0 1px 20px rgb(0 0 0/.5)}
.ph .hero-sub .proof{margin-top:12px}
.ph .hero-sub:has(.hero-act){max-width:min(44rem,58%)}
.ph .hero-act{align-self:stretch}

/* B Editorial */
[data-hero="b"] .ph{display:block;min-height:0}
[data-hero="b"] .ph-media{position:relative;inset:auto;z-index:auto;height:max(360px,min(calc(100vw * 9 / 21),calc(100svh - 200px)))}
[data-hero="b"] .ph-media img{object-position:var(--pos-b,50% 40%);transform:none}
[data-hero="b"] .ph-media::after{background:linear-gradient(0deg,rgb(0 0 0/.35) 0,transparent 32%)}
[data-hero="b"] .ph-in{padding-top:0;padding-bottom:0}
[data-hero="b"] .ph-card{width:fit-content;max-width:min(62rem,80%);margin-top:calc(-1 * clamp(120px,11vw,184px));background:#000;padding:clamp(28px,3vw,48px) clamp(40px,5vw,80px) 0 0;z-index:1}
[data-hero="b"] .ph-card::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:#000}
[data-hero="b"] .ph-card::after{content:"";position:absolute;top:0;right:0;width:clamp(36px,3.4vw,52px);height:clamp(36px,3.4vw,52px);border-top:6px solid var(--orange);border-right:6px solid var(--orange)}
[data-hero="b"] .ph .hook{font-size:clamp(3rem,.9rem + 4.9vw,6.25rem);text-shadow:none}
[data-hero="b"] .ph .hero-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:48px;max-width:none;margin-top:clamp(32px,3.6vw,52px)}
[data-hero="b"] .ph .hero-sub .statement{text-shadow:none}
/* About: subhead + paragraph + buttons read as one block, not split across two columns */
[data-hero="b"] .ph .hero-sub:has(.hero-lead){display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:42rem}
[data-hero="b"] .ph .hero-sub:has(.hero-lead) .hero-lead{max-width:38rem}

@media (max-width:900px){
  .ph{--mh:min(125vw,74svh);display:block;min-height:0}
  .ph-media{position:relative;inset:auto;z-index:auto;height:var(--mh)}
  .ph-media img{object-position:var(--pos-m,50% 30%);transform:none}
  .ph-media::after{background:linear-gradient(180deg,rgb(0 0 0/.35) 0,transparent 16%,transparent 66%,#000 100%)}
  .ph-stand-in::after{background:linear-gradient(180deg,rgb(0 0 0/.4) 0,transparent 18%,transparent 48%,rgb(0 0 0/.82) 80%,#000 100%)}
  .ph-in{margin-top:calc(var(--mh) * -.4);padding-top:0;padding-bottom:8px}
  .ph:has(.ph-stand-in) .ph-in{margin-top:calc(var(--mh) * -.3)}
  .ph-card{max-width:none}
  .ph .hook{font-size:clamp(2.5rem,11.4vw,3.75rem)}
  .ph .hero-sub,.ph .hero-sub:has(.hero-act){max-width:none;margin-top:20px;gap:24px;align-items:stretch}
  .ph .hero-sub>.hero-act{order:-1}
  [data-hero="b"] .ph-media{height:auto;aspect-ratio:4/5;max-height:80svh}
  [data-hero="b"] .ph-media img{object-position:var(--pos-m,50% 30%)}
  [data-hero="b"] .ph-media::after{background:linear-gradient(180deg,rgb(0 0 0/.35) 0,transparent 16%)}
  [data-hero="b"] .ph-in,[data-hero="b"] .ph:has(.ph-stand-in) .ph-in{margin-top:0}
  [data-hero="b"] .ph-card{max-width:calc(100% - 20px);margin-top:-76px;padding:24px 28px 0 0}
  [data-hero="b"] .ph .hook{font-size:clamp(2.5rem,11.4vw,3.75rem)}
  [data-hero="b"] .ph .hero-sub{display:flex;flex-direction:column;gap:24px;margin-top:20px}
}

/* Concept switch (preview only) */
/* sits in the hero's top-right corner (over the photo, inside the content edge), scrolls away with it, never over copy */
.hero-switch{position:absolute;top:14px;right:max(var(--gutter),calc((100% - 1440px)/2 + var(--gutter)));z-index:2;display:flex;gap:2px;padding:3px;border-radius:50px;background:rgb(16 16 16/.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px var(--gray),0 6px 18px rgb(0 0 0/.4)}
.hero-switch button{min-width:44px;min-height:36px;border:0;border-radius:50px;background:transparent;color:var(--silver);font:600 14px/1 Inter,"Inter Fallback",Arial,sans-serif;cursor:pointer}
.hero-switch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.svc-top{padding-top:clamp(64px,7vw,112px)}

/* Purpose-built heroes (Bo's approved picks, 2026-10-06): the photo already leaves a dark empty left (desktop) and
   bottom (phones) for the copy, so phones show the whole 9:16 frame and the copy sits in its empty lower part. */
@media (max-width:900px){
  .ph:has(.ph-built){--mh:min(177.78vw,100svh)}
  .ph-built img{object-position:var(--pos-m,50% 0)}
  .ph:has(.ph-built) .ph-in{margin-top:calc(var(--mh) * -.4)}
}
/* keep the headline inside the photo's empty half so it never runs onto the people (Pricing ran onto the robot at 1440) */
@media (min-width:900.02px){.ph:has(.ph-built) .ph-card{max-width:min(46rem,48%)}}

/* ===== Humans helping humans band + core values (Bo picked concept B, 2026-10-06) ===== */
/* Full-width band right after the hero */
.hh-band{margin:clamp(40px,5vw,72px) 0 0;padding:clamp(36px,5vw,72px) 0;border-top:1px solid var(--ink-soft);border-bottom:1px solid var(--ink-soft);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.hh-band-h{margin:0;font-size:clamp(2.75rem,1rem + 6vw,6.5rem);line-height:.94;letter-spacing:-.045em;font-weight:400;color:var(--white)}
.hh-band-h strong{font-weight:600;color:var(--orange)}
.hh-band-p{margin:0;max-width:30rem;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);line-height:1.4;color:var(--light)}
@media (max-width:900px){.hh-band{grid-template-columns:1fr;align-items:start}}
/* Core values: open list with the brand corner bracket */
.cv{list-style:none;margin:0;padding:0}
.cv h3{margin:0;font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);font-weight:400;letter-spacing:-.03em;line-height:1.1;color:var(--white)}
.cv p{margin:10px 0 0;color:var(--muted);font-size:17px;line-height:1.5;max-width:34rem}
.cv-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(32px,5vw,80px)}
.cv-b li{position:relative;padding:4px 0 0 clamp(40px,3.6vw,56px);min-width:0}
.cv-b li::before{content:"";position:absolute;left:0;top:0;width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px);border-top:5px solid var(--orange);border-left:5px solid var(--orange)}
/* value 1 title white like the rest (Bo 2026-10-06 02:33Z) */
@media (max-width:640px){.cv-b{grid-template-columns:1fr}}
/* Wordmark Classic A: "Corner Team.ai", orange period, spells the address (Bo 2026-10-06) */
.wm .wm-s{margin-left:-.01em}.wm .wm-dot{color:var(--orange)}
.lock b,.corners4 .lockc b{font-weight:650}
.lock .wm b,.corners4 .lockc .wm b{margin-left:.04em}
/* How we work: staggered entrance + the orange corner draws in (Bo 2026-10-06 "keep the style, animate it") */
.js-anim .cv-anim li.rv{transition-delay:calc(var(--i,0) * 110ms)}
.js-anim .cv-anim li::before{width:0;height:0;transition:width .45s var(--ease),height .45s var(--ease) .12s;transition-delay:calc(var(--i,0) * 110ms + .2s),calc(var(--i,0) * 110ms + .32s)}
.js-anim .cv-anim li.in::before{width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px)}
.cv-anim li h3{transition:transform .35s var(--ease)}
@media (hover:hover){.cv-anim li:hover h3{transform:translateX(4px)}.cv-anim li:hover::before{border-color:var(--orange-hover)}}
@media (prefers-reduced-motion:reduce){.js-anim .cv-anim li::before{width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px)}}

/* Home Process as four rounds, reusing the orange corner from "How we work" (Bo picked A, 2026-10-06). */
section.s.home-process{padding-top:clamp(64px,7vw,112px)}
.rfree{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:50px;font-size:12px;font-weight:600;letter-spacing:0;color:var(--black);background:var(--white);vertical-align:1px}
.rounds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(24px,2.6vw,40px)}
.rounds li{position:relative;padding:clamp(40px,3.4vw,52px) 0 0;min-width:0;display:flex;flex-direction:column}
.rounds li::before{content:"";position:absolute;left:0;top:0;width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px);border-top:5px solid var(--orange);border-left:5px solid var(--orange)}
.rounds .rk{margin:0 0 8px;font-size:14px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.rounds h3{margin:0;font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);font-weight:400;letter-spacing:-.03em;line-height:1.1;color:var(--white)}
.rounds p{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.5}
.rounds .got{color:var(--light);margin-top:14px;padding-top:14px;box-shadow:inset 0 1px 0 var(--ink-soft)}
.rounds .rl{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;align-self:flex-start;color:var(--white);font-size:16px;font-weight:600;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:5px}
.rounds .rl:hover{text-decoration-color:var(--orange-hover)}
.js-anim .rounds li{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i) * 120ms)}
.js-anim .rounds.in li{opacity:1;transform:none}
.js-anim .rounds li::before{width:0;height:0;transition:width .45s var(--ease),height .45s var(--ease);transition-delay:calc(var(--i) * 120ms + .2s),calc(var(--i) * 120ms + .32s)}
.js-anim .rounds.in li::before{width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px)}
@media (max-width:1100px){.rounds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rounds{grid-template-columns:1fr}.rounds li{padding:4px 0 0 44px}.rounds li::before{width:22px;height:22px}.js-anim .rounds.in li::before{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){.js-anim .rounds li{opacity:1;transform:none}.js-anim .rounds li::before{width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px)}}
/* Homepage spacing (Bo 2026-10-06): tighter section rhythm on the home page only; other pages keep --section. */
.home{--section:clamp(72px,8vw,128px)}
.home .hh-band + section.s{padding-top:clamp(56px,6vw,96px)}
.home .home-band{margin-top:clamp(56px,6vw,96px)}
/* "AI can be scary" band (Bo 2026-10-06 20:50Z: Bruce, corner team 3, from Banksy's band). Home, in place of the
   fist-bump band (now on About). A dark island in both themes: photo right, headline in the black on the left;
   phones get the 9:16 crop with the headline in the black at the bottom. */
.scary{position:relative;margin:clamp(56px,6vw,96px) calc(var(--gutter)*-1) 0;background:#000;color:#f2f2f0;overflow:hidden;isolation:isolate}
@media (min-width:1441px){.scary{margin-left:calc((100vw - 1440px)/-2 - var(--gutter));margin-right:calc((100vw - 1440px)/-2 - var(--gutter))}}
.scary img{display:block;width:100%;height:auto;aspect-ratio:2400/1029;max-height:92vh;object-fit:cover;object-position:100% 50%}
.scary::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(0 0 0/.5) 0%,rgb(0 0 0/0) 40%);pointer-events:none}
.scary-copy{position:absolute;z-index:1;left:max(var(--gutter),calc((100% - 1440px)/2 + var(--gutter)));top:50%;transform:translateY(-50%);max-width:34%}
.scary h2{margin:0;font-size:clamp(2rem,1rem + 3.6vw,5.4rem);font-weight:400;letter-spacing:-.05em;line-height:.98;color:#fff;text-wrap:balance}
.scary h2 strong{display:block;font-weight:600;color:var(--accent-t,var(--accent))}
@media (max-width:820px){
  .scary img{aspect-ratio:9/16;max-height:min(100svh,1100px);object-position:50% 0}
  .scary::after{background:linear-gradient(0deg,rgb(0 0 0/.8) 0%,rgb(0 0 0/.4) 26%,rgb(0 0 0/0) 42%)}
  .scary-copy{top:auto;bottom:7%;transform:none;max-width:none;left:var(--gutter);right:var(--gutter)}
  .scary h2{font-size:clamp(2.5rem,1.6rem + 3.6vw,3.25rem)}
}
/* Fighter video TRY (?vid=1 only, see index.html). 9:16 muted loop under the four corners. */
.c4-vid{margin:clamp(40px,5vw,64px) auto 0;max-width:340px}
.c4-vid video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:16px;background:#111;box-shadow:0 0 0 1px var(--ink-soft)}
/* Humans band: About-page line as the lead (Bo 2026-10-06) */
.hh-band-copy{display:grid;gap:14px;max-width:32rem}
.hh-band-lead{margin:0;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.25rem);line-height:1.15;letter-spacing:-.02em;font-weight:600;color:var(--white)}
.hh-band-copy .hh-band-p{font-size:clamp(1rem,.95rem + .25vw,1.125rem)}
/* Humans band animation (Bo 2026-10-06): words rise in one by one, "humans" lands in orange, the period pops last */
.js-anim .hh-anim.rv{opacity:1;transform:none}
.hh-anim .w{display:inline-block}
.js-anim .hh-anim .w{opacity:0;transform:translateY(.45em);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d) * 160ms)}
.js-anim .hh-anim.in .w{opacity:1;transform:none}
.js-anim .hh-anim strong.w{color:var(--white);transition:opacity .6s var(--ease),transform .7s var(--ease),color .6s var(--ease) .75s;transition-delay:320ms,320ms,820ms}
.js-anim .hh-anim.in strong.w{color:var(--orange)}
.hh-anim .hh-dot{display:inline-block}
.js-anim .hh-anim .hh-dot{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1) 1.15s}
.js-anim .hh-anim.in .hh-dot{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.js-anim .hh-anim .w,.js-anim .hh-anim .hh-dot{opacity:1;transform:none}.js-anim .hh-anim strong.w{color:var(--orange)}}
/* Home band headline on two lines (Bo 2026-10-06 21:36Z): "Humans helping humans" white, "work with AI." in the accent.
   Each line stays whole (no orphan words); the size is capped so line 1 always fits its column. */
.hh-band-h2{font-size:min(clamp(2.75rem,1rem + 6vw,6.5rem),var(--hh2-fit))}
.hh-band-h2 .hh-l1,.hh-band-h2 .hh-l2{display:block;white-space:nowrap}
.hh-band-h2 strong{font-weight:600}
.hh-band.hh-bg:has(.hh-band-h2){--hh2-fit:calc((100vw - 2 * var(--gutter)) * .1)}
@media (min-width:901px){.hh-band.hh-bg:has(.hh-band-h2){--hh2-fit:calc((min(100vw,1440px) - 2 * var(--gutter)) * .068);grid-template-columns:max-content minmax(14rem,1fr)}}
.js-anim .hh-anim .hh-l2 strong.w{transition-delay:calc(var(--d) * 160ms),calc(var(--d) * 160ms),calc(var(--d) * 160ms + 500ms)}
.js .hh-band-h2 .hh-dot{transition-delay:1.45s}

/* Home order + Humans band photo (Bo 2026-10-06). The Corner Score Audit now comes straight after the hero, then the band.
   The band is a full-bleed photo with a dark shade so the copy stays readable. data-bg 1 = team lifting the owner's glove
   (default), 2 = the empty spotlit corner. Preview the other with ?hhbg=2. Only the chosen image downloads. */
.home > .home-score:first-child{padding-top:clamp(56px,6vw,96px)}
.hh-band.hh-bg{position:relative;isolation:isolate;margin:clamp(40px,5vw,72px) calc(var(--gutter)*-1) 0;padding:clamp(96px,11vw,176px) var(--gutter) clamp(56px,6vw,96px);border:0;min-height:clamp(440px,42vw,620px)}
.hh-bg::before,.hh-bg::after{content:"";position:absolute;inset:0;z-index:-1}
.hh-bg::before{background:var(--hh-img) var(--hh-pos,50% 35%)/cover no-repeat #000}
.hh-bg::after{z-index:-1;background:linear-gradient(to bottom,#000 0,rgb(0 0 0/.55) 22%,rgb(0 0 0/.62) 55%,rgb(0 0 0/.92) 100%),linear-gradient(to right,rgb(0 0 0/.35),transparent 60%)}
.hh-bg[data-bg="1"]{--hh-img:url(/team-hand-raised-owner-1264.webp);--hh-pos:50% 28%}
.hh-bg .hh-band-h,.hh-bg .hh-band-lead,.hh-bg .hh-band-p{text-shadow:0 1px 18px rgb(0 0 0/.55)}
@media (min-width:1441px){.hh-band.hh-bg{margin-left:calc((100vw - 1440px)/-2 - var(--gutter));margin-right:calc((100vw - 1440px)/-2 - var(--gutter));padding-left:calc((100vw - 1440px)/2 + var(--gutter));padding-right:calc((100vw - 1440px)/2 + var(--gutter))}}
@media (max-width:900px){
  .hh-band.hh-bg{min-height:0;padding-top:clamp(220px,62vw,340px)}
  .hh-bg::after{background:linear-gradient(to bottom,#000 0,rgb(0 0 0/.2) 14%,rgb(0 0 0/.25) 34%,rgb(0 0 0/.85) 58%,#000 78%)}
  .hh-bg[data-bg="1"]{--hh-img:url(/team-hand-raised-owner-mobile.webp);--hh-pos:50% 0;--hh-h:75vw}
  /* the photo sits at the top at its own shape and fades out into the black under the copy, so no hard edge */
  .hh-bg::before{bottom:auto;height:var(--hh-h);background-size:100% auto;background-position:var(--hh-pos);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
}
/* Header nav hover: orange text + orange underline that grows from the left (Bo 2026-10-06) */
.nav .links a:not(.pill),.nav ul a:not(.pill){position:relative}
.nav .links a:not(.pill)::after,.nav ul a:not(.pill)::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav .links a:not(.pill):hover,.nav ul a:not(.pill):hover,.nav .links a:not(.pill):focus-visible{color:var(--orange)}
.nav .links a:not(.pill):hover::after,.nav ul a:not(.pill):hover::after,.nav .links a:not(.pill):focus-visible::after,.nav .links a[aria-current]::after{transform:scaleX(1)}
.nav .links a[aria-current]:not(:hover){color:var(--white)}

/* ===== Colour wheel + night/day switch (Bo 2026-10-06, modelled on prmrmarketing.com) =====
   The wheel opens a "Pick your colour" popover: any hue. Brand orange is the default; a picked hue is derived in the head
   script (ctAcc in build.mjs), which sets --accent (bright fill), --accent-t (text on dark), --accent-d (text on light),
   --accent-hover and --on-accent/--pf (black or white, whichever passes AA) on <html>. "free" is black on brand orange (6.7:1), like the button text. */
.lg-dot{fill:var(--orange)}
.corners4 .seed{color:var(--white)}

/* Light: warm paper grounds, ink type, the deep shade of the accent and corner colours for text and lines.
   The token names are the dark theme's (--black = page ground, --white = strongest ink), so every rule above follows. */
:root[data-theme=light]{color-scheme:light;
  --black:#F4F1EA;--ink-soft:#DDD6C9;--gray:#CBC2B3;--gray-hover:#9E9484;--white:#15120E;--light:#2E2923;--silver:#6B6258;--paper:#FBF9F4;
  --muted:rgb(21 18 14/.68);--err:#B3261E;
  --orange:var(--accent-d);--orange-hover:color-mix(in srgb,var(--accent-d) 80%,#000);
  --blue:#1D4ED8;--amber:#A15C07;--mint:#0F766E;--lime:#3F6212;
  --surface:#FBF9F4;--field:#fff;--track:#DDD6C9;--pop:#FBF9F4;--glass:rgb(244 241 234/.9)}
:root[data-theme=light] ::selection{background:var(--accent);color:var(--on-accent)}
[data-theme=light] .score-shot a{box-shadow:0 0 0 1px var(--ink-soft),0 18px 40px -24px rgb(40 30 15/.35)}
[data-theme=light] .lead-form,[data-theme=light] .plan.pop,[data-theme=light] .person,[data-theme=light] .value,[data-theme=light] .plan,[data-theme=light] .free{background:var(--surface)}
/* Photo heroes and the photo band stay dark islands in light: their shades stay black, so the copy on them stays white. */
[data-theme=light] :is(.ph,.hh-bg,.scary){color-scheme:dark;background:#000;color:#f2f2f0;
  --black:#000;--ink-soft:#1e1e1e;--gray:#2b2b2b;--gray-hover:#4a4a4a;--white:#fff;--light:#f2f2f0;--silver:#d9d9d9;--muted:rgb(217 217 217/.72);--err:#ff8f8f;
  --orange:var(--accent-t,var(--accent));--orange-hover:var(--accent-hover);--blue:#4F86FF;--amber:#F5B83D;--mint:#2FD3B2;--lime:#C6F432;
  --surface:#0b0b0b;--field:#141414;--pop:#161616}
/* Light: the photo bands (dark islands) fade in and out of the paper at their top and bottom edges instead of starting
   on a hard black line (subpages pass 2026-10-06). Heroes are left alone; the fade sits in the band's own padding.
   The mask reveals the page ground itself (body background, the paper in light), so the edge always lands on the exact
   paper colour. Kept short (16 to 24px, review 2026-10-06): a long fade of black over paper read as a grey smear. */
[data-theme=light] :is(.hh-band.hh-bg,.scary,.svp-band,.pp .pp-band){--band-fade:clamp(16px,1.6vw,24px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--band-fade),#000 calc(100% - var(--band-fade)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--band-fade),#000 calc(100% - var(--band-fade)),transparent 100%)}

/* the controls: hidden without JS (the site stays dark/orange) */
.tw{display:none}
.js .tw{display:flex;align-items:center;gap:12px;flex:none}
.js .tw-m{display:none}
.wheel{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;flex:none}
.wheel::after,.tswitch::after{content:"";position:absolute;inset:-4px}
.tswitch::after{inset:-7px -2px;border-radius:30px}
.wheel-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#ff76a6,#fc8e00,#feca00,#b5f745,#4ef986,#00f4fe,#60b0ff,#bb91ff,#f171e8,#ff76a6);
  -webkit-mask:radial-gradient(circle,transparent 11px,#000 11.5px);mask:radial-gradient(circle,transparent 11px,#000 11.5px);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.wheel-dot{position:relative;width:17px;height:17px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px rgb(127 127 127/.35);transition:transform .3s var(--ease),background-color .2s ease}
.wheel[aria-expanded=true] .wheel-ring{transform:rotate(90deg)}
@media (hover:hover){.wheel:hover .wheel-ring{transform:rotate(90deg)}.wheel:hover .wheel-dot{transform:scale(1.12)}}
.wheel:active .wheel-dot{transform:scale(.9)}
.tswitch{position:relative;width:58px;height:31px;padding:0;border:0;border-radius:30px;background:var(--track);box-shadow:inset 0 1px 4px rgb(0 0 0/.3);cursor:pointer;flex:none;color:var(--white)}
.ts-sun,.ts-moon{position:absolute;top:9px;line-height:0;opacity:.7}
.ts-sun{left:8px}.ts-moon{right:8px}
.ts-knob{position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fffef8;color:#29331e;box-shadow:0 2px 5px rgb(0 0 0/.3);display:grid;place-items:center;
  transform:translateX(27px);transition:transform .35s cubic-bezier(.34,1.3,.64,1)}
.ts-knob>span{position:absolute;line-height:0;transition:opacity .3s,transform .4s}
.k-sun{opacity:0;transform:rotate(70deg)}.k-moon{opacity:1;transform:none}
[data-theme=light] .ts-knob{transform:none}
[data-theme=light] .k-sun{opacity:1;transform:none}[data-theme=light] .k-moon{opacity:0;transform:rotate(-70deg)}
[data-theme=light] .tswitch{box-shadow:inset 0 1px 3px rgb(40 30 15/.25)}
/* header placement: right of the pill (desktop); two-row widths put the controls on the logo row */
@media (min-width:900px) and (max-width:1100px){
  .js .nav{grid-template-columns:1fr auto auto;grid-template-areas:"lock cta tw" "links links links"}
  .js .nav .tw-h{grid-area:tw}
}
@media (max-width:899.98px){
  .js .tw-h{display:none}
  .js .tw-m{display:flex;justify-content:center;gap:16px;padding-top:8px}
}
/* the theme/accent change itself fades over ~200ms (not with reduced motion: the class is never added) */
.tw-anim,.tw-anim *,.tw-anim *::before,.tw-anim *::after{transition-property:background-color,color,border-color,box-shadow,fill,stroke,outline-color,text-decoration-color!important;transition-duration:.2s!important;transition-delay:0s!important;transition-timing-function:ease!important}
.tw-anim .ts-knob,.tw-anim .ts-knob>span,.tw-anim .wheel-ring{transition-property:transform,opacity,background-color!important;transition-duration:.35s!important}
@media (min-width:1101px){.js .nav .tw-h{margin-left:-16px}}

/* "Pick your colour" popover (Bo 2026-10-06, his reference screenshot of prmrmarketing.com) */
.tw{position:relative}
.cp{position:absolute;z-index:70;top:calc(100% + 14px);right:-8px;width:min(320px,calc(100vw - 32px));padding:18px;border-radius:20px;background:var(--pop);color:var(--white);
  box-shadow:0 0 0 1px var(--ink-soft),0 24px 60px -24px rgb(0 0 0/.6),0 2px 8px -4px rgb(0 0 0/.4);animation:cp-in .2s var(--ease)}
.cp[hidden]{display:none}
@keyframes cp-in{from{opacity:0;transform:translateY(-6px)}}
.cp-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.cp-t{margin:0;font-size:17px;font-weight:600;letter-spacing:-.3px;color:var(--white)}
.cp-n{margin:0;font-size:14px;color:var(--muted)}
.cp-hue{position:relative;height:44px;cursor:pointer;touch-action:none;border-radius:22px;--th:28px}
.cp-hue::before{content:"";position:absolute;left:0;right:0;top:11px;height:22px;border-radius:11px;
  background:linear-gradient(90deg,hsl(0 95% 60%) 14px,hsl(30 95% 58%),hsl(60 95% 50%),hsl(90 95% 50%),hsl(120 95% 50%),hsl(150 95% 48%),hsl(180 95% 48%),hsl(210 95% 58%),hsl(240 95% 66%),hsl(270 95% 66%),hsl(300 95% 62%),hsl(330 95% 62%),hsl(360 95% 60%) calc(100% - 14px))}
.cp-th{position:absolute;top:8px;left:calc(var(--h,16) / 360 * (100% - var(--th)));width:var(--th);height:var(--th);border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff,0 2px 10px rgb(0 0 0/.45);pointer-events:none}
.cp-hue:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cp-btns{display:flex;gap:10px;margin-top:12px}
.cp-btns .pill{gap:8px;padding:0 14px;font-size:15px;min-height:44px}
.cp-btns .cp-reset{flex:1}
.cp-btns svg{flex:none}
@media (max-width:899.98px){
  .js .tw-m{position:static}
  .js .m-foot{position:relative}
  .js .tw-m .cp{top:auto;left:0;right:0;bottom:56px;width:auto}
}

/* ===== Home hero text: Banksy's "Punchline" look (Bo picked 2026-10-06 21:42Z) =====
   Small accent label, quiet grey set-up line, one big two-line punch ("corner." in the accent), smaller grey line under it,
   one slim form bar (email | website | button), "Our Services" as a quiet link. Scoped to .hero.ph; only the home hero has .l1. */
.hero.ph .hero-kicker{margin:0 0 clamp(14px,1.4vw,20px);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);text-wrap:balance}
.hero.ph .hero-kicker .nw,.hero.ph .hero-sub .nw{white-space:nowrap}
.hero.ph .hook:has(.l1){text-shadow:none}
.hero.ph .hook .l1{display:block;font-size:clamp(1.25rem,.95rem + .9vw,1.875rem);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--silver);margin:0 0 .55em;text-shadow:0 1px 20px rgb(0 0 0/.5)}
.hero.ph .hook .l1 + .l2{font-size:clamp(3.25rem,1.1rem + 5.4vw,6.5rem);font-weight:500;line-height:.92;letter-spacing:-.055em;color:var(--white);text-wrap:balance;max-width:6.4em;text-shadow:0 2px 32px rgb(0 0 0/.45)}
.hero.ph .hook:has(.l1) strong{font-weight:600}
.hero.ph .hero-sub:has(.hero-form){margin-top:clamp(22px,2.2vw,32px);gap:24px}
.hero.ph .hero-sub:has(.hero-form) .statement{font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.45;letter-spacing:-.01em;color:var(--silver);max-width:30rem;text-wrap:pretty}
.hero.ph .hero-act{max-width:44rem;gap:10px}
.hero.ph .hero-form{padding:6px;border-radius:999px;background:rgb(20 20 20/.78);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),0 12px 40px rgb(0 0 0/.45)}
/* email gets the bigger share so "you@yourcompany.com" is never cut off (Bo 21:43Z) */
.hero.ph .hf-row{grid-template-columns:minmax(14rem,1.4fr) minmax(11.25rem,1fr) auto;gap:0;align-items:center}
/* small laptops/tablets: the copy column is too narrow for the bar at 58%, so give it the full 44rem */
@media (min-width:901px) and (max-width:1180px){.hero.ph .hero-sub:has(.hero-form){max-width:min(44rem,100%)}}
.hero.ph .hero-form .fld{position:relative;gap:0;min-width:0}
.hero.ph .hero-form .fld+.fld::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:rgb(255 255 255/.16)}
.hero.ph .hero-form .fld label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero.ph .hero-form .fld input{min-height:52px;padding:0 20px;border-radius:999px;background:transparent;box-shadow:none}
.hero.ph .hero-form .fld input:focus{box-shadow:inset 0 0 0 2px var(--orange)}
.hero.ph .hero-form .fld [aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--err)}
.hero.ph .hero-form .f-err{position:absolute;top:calc(100% + 12px);left:20px;white-space:nowrap}
.hero.ph .hero-form .pill{min-height:52px;padding:0 24px}
.hero.ph .hero-form.sent{border-radius:16px;padding:20px}
.hero.ph .hero-alt{gap:4px 24px;padding-left:20px;font-size:15px}
.hero.ph .hero-alt a{color:var(--muted)}
.hero.ph .hero-alt .pill.ghost{min-height:44px;padding:0;border-radius:0;background:none;box-shadow:none;border:0;font-weight:600;font-size:15px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--gray-hover);text-underline-offset:6px;text-decoration-thickness:2px}
.hero.ph .hero-alt a:hover,.hero.ph .hero-alt .pill.ghost:hover{color:var(--white)}
@media (max-width:900px){
  .hero.ph .hook .l1{margin-bottom:.5em}
  .hero.ph .hook .l1 + .l2{font-size:clamp(3rem,14vw,4.25rem)}
  .hero.ph .hero-sub:has(.hero-form)>.statement{order:-2}
  .hero.ph .hero-sub:has(.hero-form)>.hero-act{order:-1}
  .hero.ph .hero-form{border-radius:18px;padding:6px}
  .hero.ph .hf-row{grid-template-columns:1fr;gap:0}
  .hero.ph .hero-form .fld+.fld::before{left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px}
  .hero.ph .hero-form .fld input{border-radius:12px}
  .hero.ph .hero-form .f-err{position:static;padding:4px 20px 8px}
  .hero.ph .hero-form .pill{margin-top:6px;border-radius:12px;width:100%}
  .hero.ph .hero-alt{padding-left:0}
}
/* Hero form with the opt-in (2026-10-07): the pill look moves from the form to its input row, so the opt-in box and the privacy
   line can sit under the pill on the photo. A shown error pushes them down so the two never overlap. */
.hero.ph .hero-form{padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero.ph .hero-form .hf-row{padding:6px;border-radius:999px;background:rgb(20 20 20/.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),0 12px 40px rgb(0 0 0/.45)}
.hero.ph .hero-form.sent{padding:20px;border-radius:16px;background:rgb(20 20 20/.78);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),0 12px 40px rgb(0 0 0/.45)}
.hero.ph .hero-form .f-opt{margin-top:6px;padding:0 20px;gap:0;text-shadow:0 1px 12px rgb(0 0 0/.7)}
.hero.ph .hero-form:has(.f-err:not(:empty)) .f-opt{margin-top:34px}
.hero.ph .hero-form .opt-chk{color:var(--silver);padding:10px 0}
.hero.ph .hero-form .f-priv{color:var(--silver)}
@media (max-width:900px){
  .hero.ph .hero-form .hf-row{border-radius:18px}
  .hero.ph .hero-form:has(.f-err:not(:empty)) .f-opt{margin-top:6px}
  .hero.ph .hero-form .f-opt{padding:0 4px}
}

/* Humans band: one left-aligned stack, the small line sits under the headline as its subline (Bo 2026-10-06 21:43Z) */
.hh-band.hh-bg:has(.hh-band-h2){grid-template-columns:minmax(0,max-content);align-items:start;align-content:start;gap:clamp(20px,1.8vw,24px)}
@media (min-width:901px){.hh-band.hh-bg:has(.hh-band-h2){grid-template-columns:minmax(0,max-content)}}
.hh-band.hh-bg:has(.hh-band-h2) .hh-band-copy{max-width:34rem}
.hh-band.hh-bg:has(.hh-band-h2) .hh-band-p{font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.45;font-weight:400;letter-spacing:-.01em;color:var(--silver);text-wrap:balance}

/* ===== Section text + layout pass (Banksy 2026-10-06, Brett's brief): Corner Score Audit, Process, FAQ =====
   One stack per section head (label, headline, one short line, all on one left edge), the label matching the hero kicker. */
.head.stack{display:block;max-width:46rem;margin-bottom:clamp(36px,4.4vw,64px)}
.head.stack .label{margin:0 0 clamp(14px,1.4vw,20px);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.head.stack .statement{font-size:clamp(2.5rem,1.3rem + 3vw,4.25rem);line-height:.98;letter-spacing:-.045em;max-width:none;text-wrap:balance}
.head.stack .statement strong{font-weight:600}
.head.stack .lead{margin-top:clamp(16px,1.6vw,24px);max-width:32rem;font-size:clamp(1.0625rem,.98rem + .3vw,1.25rem);line-height:1.5;color:var(--muted);text-wrap:pretty}

/* Process: four equal cards; every row (round, title, text, "You get", link) lines up across the four via subgrid.
   The orange bracket sits on each card's own top-left corner. */
.home-process .rounds{grid-template-rows:auto;gap:clamp(14px,1.4vw,20px)}
.home-process .rounds li{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:clamp(28px,2.4vw,36px) clamp(22px,2vw,30px) clamp(22px,2vw,28px);border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.home-process .rounds li::before{left:-1px;top:-1px;border-top-left-radius:16px}
.home-process .rounds .rk{margin:0 0 10px;display:flex;align-items:center;gap:8px}
.home-process .rounds h3{align-self:start}
.home-process .rounds li>p:not(.rk):not(.got){margin:12px 0 0;text-wrap:balance}
.home-process .rounds .got{text-wrap:pretty}
.home-process .rounds .got{align-self:start;margin-top:20px;padding-top:16px}
.home-process .rounds .rl{grid-row:5;margin-top:6px}
@media (max-width:640px){
  .home-process .rounds li{grid-row:auto;display:flex;padding:28px 22px 22px 22px}
  .home-process .rounds li::before{width:22px;height:22px}
}

/* FAQ: head on the left, a calm numbered accordion on the right, smooth open and close, a closing line. */
.home-faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,6vw,112px);align-items:start}
.home-faq .head.stack{grid-row:1/span 2;margin:0;position:sticky;top:120px}
.home-faq .faq{max-width:none;border-top:1px solid var(--ink-soft)}
.home-faq .faq-i summary{display:grid;grid-template-columns:3rem minmax(0,1fr) 40px;align-items:center;gap:0 12px;min-height:84px;padding:20px 0}
.home-faq .fq-n{font-size:14px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.home-faq .faq-i h3{font-size:clamp(1.1875rem,1rem + .5vw,1.5rem);font-weight:400;letter-spacing:-.025em;line-height:1.3;color:var(--light);transition:color .3s var(--ease)}
.home-faq .faq-i summary::after{content:none}
.home-faq .fq-x{position:relative;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--gray);transition:box-shadow .3s var(--ease),background-color .3s var(--ease),transform .4s var(--ease)}
.home-faq .fq-x::before,.home-faq .fq-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:var(--white);border-radius:2px;transition:transform .4s var(--ease)}
.home-faq .fq-x::after{transform:rotate(90deg)}
.home-faq .faq-i summary:hover h3,.home-faq .faq-i[open] h3{color:var(--white)}
.home-faq .faq-i summary:hover .fq-x{box-shadow:inset 0 0 0 1px var(--silver)}
.home-faq .faq-i[open] .fq-n{color:var(--orange)}
.home-faq .faq-i[open] .fq-x{background:var(--accent);box-shadow:none}
.home-faq .faq-i[open] .fq-x::before,.home-faq .faq-i[open] .fq-x::after{background:var(--on-accent)}
.home-faq .faq-i[open] .fq-x::after{transform:rotate(0)}
.home-faq .faq-i p{margin:0 52px 28px calc(3rem + 12px);max-width:38rem;font-size:17px;line-height:1.6;color:var(--muted)}
.home-faq .faq-i::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.home-faq .faq-i[open]::details-content{block-size:auto}
.home-faq .faq{interpolate-size:allow-keywords}
.home-faq .faq-end{grid-column:2;margin:clamp(24px,2.4vw,36px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:17px;color:var(--muted)}
.home-faq .faq-end .textlink{color:var(--white);text-decoration-color:var(--orange)}
@media (max-width:900px){
  .home-faq{display:block}
  .home-faq .head.stack{position:static;margin-bottom:32px}
  .home-faq .faq-i summary{grid-template-columns:2.25rem minmax(0,1fr) 36px;min-height:72px;padding:16px 0}
  .home-faq .fq-x{width:36px;height:36px}
  .home-faq .faq-i p{margin:0 0 22px calc(2.25rem + 12px)}
}
@media (prefers-reduced-motion:reduce){.home-faq .faq-i::details-content{transition:none}}
[data-theme=light] .home-process .rounds li{background:var(--surface)}
/* Spielberg "How the Corner Score Audit works" video in the audit section (Bo 2026-10-06 22:05Z). Wide file on desktop, tall file under 700px. */
.score-vid{margin:0 0 clamp(20px,2.4vw,32px);border-radius:16px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px var(--ink-soft),0 0 0 1px var(--ink-soft)}
.score-vid video{display:block;width:100%;height:auto;background:#000}
.score-vid .sv-tall{display:none}
@media (max-width:700px){.score-vid{width:min(100%,calc(76svh * 9 / 16));margin-inline:auto}.score-vid .sv-wide{display:none}.score-vid .sv-tall{display:block}}
[data-theme=light] .score-vid{box-shadow:0 0 0 1px var(--ink-soft),0 18px 40px -24px rgb(40 30 15/.35)}
/* Corner Score Audit section, Bo's option 1 (2026-10-06 22:23Z): text on the left, the video beside it on the right
   (about 60% of the width), vertically centred. Phones keep the order text, video, links. Old sample image removed. */
@media (min-width:901px){
  .home-score{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". vid" "head vid" "cta vid" ". vid";column-gap:clamp(36px,4.5vw,72px)}
  .home-score>.head.stack{grid-area:head;margin-bottom:0}
  .home-score>.score-vid{grid-area:vid;align-self:center;margin:0}
  .home-score>.sec-links{grid-area:cta}
}
@media (max-width:700px){.score-vid{width:min(100%,calc(70svh * 9 / 16))}}

/* ===== Process: colour + "the four rounds, fought in order" (2026-10-06). =====
   Colour: "You start free." and "Round 1 to 4" in the accent; the Free pills stay white, titles white, body grey.
   Motion (html.js; the script after the section adds .rr-on): as you scroll, a line runs along the cards' top edges from
   Round 1 to Round 4 with the dot at its tip. When it reaches a card, that card's corner draws out from its vertex, the dot
   drops into the corner (corner + dot = the logo), and the card's edge flashes the accent, then settles to a soft tint.
   Tied to scroll, so scrolling back pulls it back. Stacked cards on phones: the line runs down the left edge. 2x2: each card
   lights as it comes into view. The text is never hidden (this replaces the old fade-in). Reduced motion: the lit state. */
.home-process .statement .acc{color:var(--orange)} /* simple accent class, adoptable by the site-wide head pass */
.home-process .rounds .rk{color:var(--orange)}
.home-process .rounds.rr-on{opacity:1;transform:none;transition:none}
.js .home-process .rounds.rr-on li{opacity:1;transform:none;transition:box-shadow .7s var(--ease)} /* port: was transition:none, which out-ranked the settle transition below */
.home-process .rounds.rr-on{position:relative}
.home-process .rounds.rr-on li{--rs:clamp(22px,2vw,30px);transition:box-shadow .7s var(--ease)}
.js .home-process .rounds.rr-on li::before{width:var(--rs);height:var(--rs);clip-path:inset(0 100% 100% 0);transition:clip-path .38s var(--ease)}
.js .home-process .rounds.rr-on li.rr-lit::before{clip-path:inset(0)}
.home-process .rounds li.rr-lit{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 30%,var(--ink-soft))}
.js .home-process .rounds li.rr-lit.rr-flash{box-shadow:inset 0 0 0 1px var(--orange),0 0 36px -10px color-mix(in srgb,var(--orange) 60%,transparent);transition-duration:.25s}
.rr-d,.rr-r{position:absolute;left:calc(var(--rs) * .42 - 1px);top:calc(var(--rs) * .42 - 1px);width:calc(var(--rs) * .42);height:calc(var(--rs) * .42);border-radius:50%;pointer-events:none}
.rr-d{background:var(--orange);transform:scale(0);transition:transform .42s cubic-bezier(.34,1.45,.64,1) .2s}
.rr-r{box-shadow:0 0 0 2px var(--orange);opacity:0}
.rr-lit .rr-d{transform:none}
.rr-lit.rr-ping .rr-r{animation:rr-ring .7s cubic-bezier(.16,1,.3,1) .28s both}
.rr-rope{position:absolute;z-index:1;pointer-events:none}
.rr-rope::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--muted) 40%,transparent) 0 2px,transparent 2px 8px)}
.rr-rope.rr-vert::before{background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--muted) 40%,transparent) 0 2px,transparent 2px 8px)}
.rr-fill{position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--p,0));transform-origin:left center}
.rr-vert .rr-fill{transform:scaleY(var(--p,0));transform-origin:center top}
.rr-head{position:absolute;left:0;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 24%,transparent),0 0 20px color-mix(in srgb,var(--orange) 75%,transparent);
  transform:translateX(var(--x,0px));opacity:var(--o,0);transition:opacity .2s ease}
.rr-vert .rr-head{left:50%;top:0;transform:translateY(var(--x,0px))}
@keyframes rr-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
@media (max-width:640px){.home-process .rounds.rr-on li{--rs:22px}}
@media (prefers-reduced-motion:reduce){.js .home-process .rounds.rr-on li::before{clip-path:none}.rr-head{display:none}}
/* ===== Site-wide section heads (Bo 2026-10-06 22:26Z / 22:27Z): every section head is the one stack above
   (accent label, big headline, one grey line), its bold payoff in the accent (follows the colour picker; --orange is the
   darker accent in light mode), and in-section sub-heads use the same small accent label. ===== */
.head.stack .statement{margin:0}
.head.stack .statement strong{color:var(--orange)}
.label.sub{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.home-who .how-lab{margin:clamp(40px,4vw,56px) 0 clamp(14px,1.4vw,20px)}
/* heads that sit in a two-column grid next to a form, a list, story text or a photo */
:is(.formgrid,.about,.how-head)>.head.stack{margin-bottom:0}
.how-head:has(>.head.stack){align-items:center}
/* corner sections (services): the stack sits inside the coloured corner bracket */
.svc-head.stack{display:block;max-width:none;padding:clamp(44px,4.6vw,68px) 0 0 clamp(20px,2vw,28px)}
.svc-head.stack>div{max-width:46rem}
.svc-head.stack h2{margin:0}
.svc-top .head.stack{margin-bottom:clamp(28px,3vw,44px)}

/* ===== One shared entrance for every section head and every photo band headline (Bo 2026-10-06 22:30Z).
   Label rises, headline words rise in (40ms stagger), the accent words arrive last with a colour sweep, then the grey line.
   Only with .js-anim (set in <head> when motion is allowed), so the text is plain and visible without JS or with reduced motion.
   Transform, opacity and colour only: no layout shift. The home hero is not part of this. ===== */
.js-anim :is(.head.stack,.scary) .rv{opacity:1;transform:none}
.js-anim .hw{display:inline-block;transition:opacity .34s var(--ease),transform .42s var(--ease);transition-delay:calc(90ms + var(--w) * 40ms)}
.js-anim strong .hw{transition-property:opacity,transform,color;transition-duration:.34s,.42s,.5s;transition-delay:calc(90ms + var(--w) * 40ms),calc(90ms + var(--w) * 40ms),calc(240ms + var(--w) * 40ms)}
.js-anim :is(.head.stack,.scary):not(.h-in) .hw{opacity:0;transform:translateY(.4em)}
.js-anim .head.stack:not(.h-in) strong .hw{color:var(--white)}
.js-anim .scary:not(.h-in) strong .hw{color:#fff}
.js-anim .head.stack .label{transition:opacity .34s var(--ease),transform .34s var(--ease)}
.js-anim .head.stack:not(.h-in) .label{opacity:0;transform:translateY(8px)}
.js-anim .head.stack .lead{transition:opacity .45s var(--ease) calc(200ms + var(--n,8) * 40ms),transform .45s var(--ease) calc(200ms + var(--n,8) * 40ms)}
.js-anim .head.stack:not(.h-in) .lead{opacity:0;transform:translateY(6px)}
/* the Humans band keeps its own word spans, retimed to the same entrance */
.js-anim .hh-anim .w{transition:opacity .34s var(--ease),transform .42s var(--ease);transition-delay:calc(90ms + var(--d) * 40ms)}
.js-anim .hh-anim strong.w,.js-anim .hh-anim .hh-l2 strong.w{transition:opacity .34s var(--ease),transform .42s var(--ease),color .5s var(--ease);transition-delay:calc(90ms + var(--d) * 40ms),calc(90ms + var(--d) * 40ms),calc(240ms + var(--d) * 40ms)}
.js-anim .hh-anim .hh-dot{transition-delay:.62s}
.js-anim .hh-band-p.rv{transition-delay:calc(200ms + 6 * 40ms)!important}
/* slow push-in on the band photos */
.hh-band.hh-bg{overflow:clip}
.js-anim .hh-bg::before,.js-anim .scary img{transform:scale(1.04);transition:transform 1.2s var(--ease)}
.js-anim .hh-bg:has(.hh-anim.in)::before,.js-anim .scary.h-in img{transform:none}

/* ===== Page heroes use the home hero's Punchline text system (Bo 2026-10-06 22:31Z): accent label, optional grey set-up
   line (.l1), one big punch with the payoff in the accent, a ~20px grey line, then the CTA row. Shared .punch class. ===== */
.punch .hook{font-size:clamp(3.25rem,1.1rem + 5.4vw,6.5rem);font-weight:500;line-height:.92;letter-spacing:-.055em;color:var(--white);text-wrap:balance;max-width:8em;text-shadow:0 2px 32px rgb(0 0 0/.45)}
.punch .hook .l1{display:block;font-size:clamp(1.25rem,.95rem + .9vw,1.875rem);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--silver);margin:0 0 .55em;text-shadow:0 1px 20px rgb(0 0 0/.5)}
.punch .hook .l2{display:block}
.punch .hook strong{font-weight:600;color:var(--orange)}
.punch .hook strong + .dot{background:var(--orange)}
.punch .label.sub{margin:0 0 clamp(14px,1.4vw,20px);text-wrap:balance}
.ph.punch .hero-sub,[data-hero] .ph.punch .hero-sub,.nf.punch .hero-sub{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:min(44rem,100%);margin-top:clamp(22px,2.2vw,32px)}
.punch .hero-sub .statement{font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.45;letter-spacing:-.01em;font-weight:400;color:var(--silver);max-width:34rem;text-wrap:pretty}
.punch .hero-sub .statement strong{font-weight:400}
@media (max-width:900px){.punch .hook{font-size:clamp(3rem,14vw,4.25rem)}.punch .hook .l1{margin-bottom:.5em}}
/* page heroes: the shared hero motion (see "Hero motion" at the end) replaces the head entrance here; .rv stays visible */
.js-anim .punch .rv{opacity:1;transform:none}

/* ===== Hero motion, shared by every photo hero (2026-10-06): a wow in the first 2 seconds, kept classy, done in about 1.9 s. =====
   html.hm-go is set once per page per tab session by the script before the hero photo (build.mjs HERO_GATE_JS); without it
   (no JS, repeat view, reduced motion) the hero is static and finished. Transform and opacity only, so nothing shifts, and
   everything is readable by 0.9 s. Every colour is the accent (follows the colour picker).
   0 to 0.75 s: the ring lights come up with a flicker (and the lamp and screens glow when the image has fx). The photo pushes in.
   Label, then the set-up line (.l1), then the punch lands (.l2; a hook without .l1 lands as one). 0.84 to 1.4 s: the corner
   bracket draws around the accent word and its dot drops in, so the word becomes the logo. Then the line, the actions and one
   shimmer on the main button. The bracket stays (any hook with strong.grad followed by .dot). */
.hero.ph .hook strong.grad:has(+ .dot){position:relative}
.hero.ph .hook strong.grad:has(+ .dot)::before,.hero.ph .hook strong.grad:has(+ .dot)::after{content:"";position:absolute;background:var(--orange);pointer-events:none}
.hero.ph .hook strong.grad:has(+ .dot)::before{right:-.38em;top:.3em;bottom:.03em;width:.085em;transform-origin:center top}
.hero.ph .hook strong.grad:has(+ .dot)::after{right:-.38em;left:-.02em;bottom:.03em;height:.085em;transform-origin:right center}
.hero.ph .hook strong.grad + .dot{position:relative}
.hm-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;transform-origin:var(--o,50% 40%)}
.hm-fx i{position:absolute;display:block}
.hm-dim{inset:0;background:#000;opacity:0}
.hm-lamp{width:var(--w);height:calc(var(--w) * .7);margin:calc(var(--w) * -.25) 0 0 calc(var(--w) * -.5);border-radius:50%;
  background:radial-gradient(closest-side,rgb(255 250 240/.55),rgb(255 250 240/.12) 55%,transparent);mix-blend-mode:screen;opacity:0}
.hm-scr{width:var(--w);height:calc(var(--w) * .75);margin:calc(var(--w) * -.375) 0 0 calc(var(--w) * -.5);border-radius:50%;
  background:radial-gradient(closest-side,rgb(225 240 255/.75),rgb(225 240 255/.18) 55%,transparent);mix-blend-mode:screen;opacity:0}
.hm-go .hero.ph .hero-sub .pill:not(.ghost){position:relative;overflow:hidden}
.hm-go .hero.ph .hero-sub .pill:not(.ghost)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgb(255 255 255/.45),transparent);transform:translateX(-120%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hm-go .hero.ph .ph-media img,.hm-go .hm-fx{animation:hm-push 9s cubic-bezier(.25,.6,.3,1) both}
  .hm-go .hm-dim{animation:hm-dim .75s linear both}
  .hm-go .hm-lamp{animation:hm-lamp 1.6s linear both}
  .hm-go .hm-scr{animation:hm-scr 1.1s cubic-bezier(.3,.7,.3,1) .62s both}
  .hm-go .hm-scr:nth-child(4){animation-delay:.74s}.hm-go .hm-scr:nth-child(5){animation-delay:.86s}
  .hm-go .hero.ph .ph-card > .label{animation:hm-up .45s cubic-bezier(.16,1,.3,1) .06s both}
  .hm-go .hero.ph .hook .l1{animation:hm-up .5s cubic-bezier(.16,1,.3,1) .16s both}
  .hm-go .hero.ph .hook:has(.l1) .l2,.hm-go .hero.ph .hook:not(:has(.l1)){animation:hm-land .55s cubic-bezier(.2,.9,.25,1) .3s both}
  .hm-go .hero.ph .hook strong.grad:has(+ .dot)::before{animation:hm-drawv .24s cubic-bezier(.5,0,.2,1) .84s both}
  .hm-go .hero.ph .hook strong.grad:has(+ .dot)::after{animation:hm-drawh .3s cubic-bezier(.16,1,.3,1) 1.04s both}
  .hm-go .hero.ph .hook strong.grad + .dot{animation:hm-drop .42s cubic-bezier(.3,0,.4,1) 1.06s both}
  .hm-go .hero.ph .hero-sub > .statement{animation:hm-up .5s cubic-bezier(.16,1,.3,1) .6s both}
  .hm-go .hero.ph .hero-sub > :not(.statement){animation:hm-up .55s cubic-bezier(.16,1,.3,1) .85s both}
  .hm-go .hero.ph .hero-sub .pill:not(.ghost)::after{animation:hm-shine .7s cubic-bezier(.4,0,.2,1) 1.4s both}
}
@keyframes hm-push{from{scale:1}to{scale:1.045}}
@keyframes hm-dim{0%{opacity:.6}18%{opacity:.25}26%{opacity:.5}40%{opacity:.12}52%{opacity:.3}100%{opacity:0}}
@keyframes hm-lamp{0%{opacity:0}10%{opacity:.9}18%{opacity:.2}30%{opacity:1}40%{opacity:.45}55%{opacity:.85}100%{opacity:0}}
@keyframes hm-scr{0%{opacity:0;transform:scale(.7)}35%{opacity:.85;transform:none}100%{opacity:0;transform:scale(1.15)}}
@keyframes hm-up{from{opacity:0;transform:translateY(14px)}}
@keyframes hm-land{0%{opacity:0;transform:translateY(-.16em) scale(1.03);filter:blur(6px)}55%{opacity:1;transform:translateY(.025em);filter:none}100%{transform:none}}
@keyframes hm-drawv{from{transform:scaleY(0)}}
@keyframes hm-drawh{from{transform:scaleX(0)}}
@keyframes hm-drop{0%{transform:translateY(-.9em);opacity:0}55%{transform:translateY(.04em);opacity:1}75%{transform:translateY(-.06em)}100%{transform:none}}
@keyframes hm-shine{0%{opacity:1;transform:translateX(-120%)}100%{opacity:1;transform:translateX(260%)}}

/* ===== page:services (subpages pass 2026-10-06) ===== */
/* Everything below is scoped to the Services page (.svp on its main wrap). Corner cards with the accent bracket and
   subgrid rows, a "What it costs" card per corner, a photo band, the AI team roster, two ways to work, and a closing form. */
.svp{--svp-r:16px;--svp-b:clamp(22px,2vw,30px)}
.svp .svc{scroll-margin-top:96px}
.svp .svc-head{margin-bottom:clamp(28px,3.4vw,48px)}
/* corner cards: every row (title, what we do, what you get) lines up across a row of cards */
.svp-cards,.svp-agents{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,20px)}
.svp-card,.svp-agent{position:relative;min-width:0;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;
  padding:clamp(28px,2.4vw,36px) clamp(22px,2vw,30px) clamp(22px,2vw,28px);border-radius:var(--svp-r);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--ink-soft);transition:box-shadow .3s var(--ease)}
.svp-card::before,.svp-agent::before{content:"";position:absolute;left:-1px;top:-1px;width:var(--svp-b);height:var(--svp-b);border-top:5px solid var(--orange);border-left:5px solid var(--orange);border-top-left-radius:var(--svp-r);transition:width .45s var(--ease),height .45s var(--ease) .1s}
.svp-card h3,.svp-agent h3{margin:0;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--white);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.svp-card p,.svp-agent p{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.5;text-wrap:pretty}
.svp-card p a{color:var(--light);text-underline-offset:4px}
.svp-card .got{align-self:start;margin-top:18px;padding-top:16px;color:var(--light);box-shadow:inset 0 1px 0 var(--ink-soft)}
.svp-card em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:0;color:var(--black);background:var(--c);border-radius:50px;padding:4px 10px}
.svp-star{box-shadow:inset 0 0 0 1px var(--ink-soft),inset 0 2px 0 var(--c)}
/* light-up: the bracket reaches further and the card edge warms to the corner colour */
@media (hover:hover){
  .svp-card:hover,.svp-agent:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--orange)) 55%,var(--ink-soft))}
  .svp-card:hover::before,.svp-agent:hover::before{width:calc(var(--svp-b) * 1.6);height:calc(var(--svp-b) * 1.6)}
}
/* the bracket draws in as each card arrives (cards are shown without JS; only the bracket waits) */
.js-anim .svp :is(.svp-card,.svp-agent,.svp-way)::before{width:0;height:0}
.js-anim .svp :is(.svp-card,.svp-agent,.svp-way).in::before{width:var(--svp-b);height:var(--svp-b);transition-delay:.25s,.35s}
@media (hover:hover){.js-anim .svp :is(.svp-card,.svp-agent).in:hover::before{width:calc(var(--svp-b) * 1.6);height:calc(var(--svp-b) * 1.6);transition-delay:0s}}
/* What it costs: the sixth card in each corner */
.svp-price{display:flex;flex-direction:column;background:color-mix(in srgb,var(--c) 7%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,var(--ink-soft))}
.svp-price .k{margin:0;color:var(--c)}
.svp-from{margin:10px 0 0!important;font-size:18px!important;color:var(--light)!important}
.svp-from b{display:block;font-size:clamp(2.5rem,1.8rem + 2vw,3.5rem);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--white);font-variant-numeric:tabular-nums;margin-bottom:2px}
.svp-pl{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:auto;padding-top:12px;align-self:flex-start;font-size:16px;font-weight:600;color:var(--white);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:5px;text-decoration-thickness:2px}
.svp-pl::after{content:"→";text-decoration:none;transition:transform .3s var(--ease)}
.svp-pl:hover::after{transform:translateX(4px)}
/* photo band: full bleed, B&W photo with the subject in colour, headline on the fade */
.svp-band{position:relative;margin:var(--section) calc(var(--gutter)*-1) 0}
@media (min-width:1441px){.svp-band{margin-left:calc((100vw - 1440px)/-2 - var(--gutter));margin-right:calc((100vw - 1440px)/-2 - var(--gutter))}}
.svp-band figure{margin:0}
.svp-band img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 22%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 62%,transparent 100%)}
.svp-band-copy{position:relative;z-index:1;margin:clamp(-72px,-4vw,-24px) auto 0;max-width:1440px;padding:0 calc(var(--gutter)*2);display:grid;gap:clamp(16px,2vw,24px)}
.svp-band h2{margin:0;text-shadow:0 2px 24px rgb(0 0 0/.55);font-size:clamp(2.5rem,1rem + 4.2vw,5rem);font-weight:400;letter-spacing:-.05em;line-height:.96;color:var(--white);text-wrap:balance}
.svp-band h2 strong{display:block;white-space:nowrap;font-weight:600;color:var(--orange)}
.svp-band-copy p{margin:0;max-width:26rem;font-size:clamp(1.0625rem,.98rem + .3vw,1.25rem);line-height:1.45;color:var(--light)}
/* the AI team: six agents, each named by its job; a status dot comes on as each one arrives */
/* rows repeat title, text, "you get": any extra height (from a taller price card) goes to the last row, not above titles */
.svp-cards,.svp-agents{grid-auto-rows:auto auto 1fr}
.svp-agents{margin-top:0}
.svp-agent{--c:var(--orange)}
.svp-agent .k{margin:0 0 10px;color:var(--orange)}
.svp-agent::after{content:"";position:absolute;right:clamp(20px,2vw,28px);top:clamp(28px,2.4vw,36px);width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.js-anim .svp .svp-agent::after{background:var(--gray);box-shadow:0 0 0 4px transparent;transition:background-color .4s var(--ease) .45s,box-shadow .6s var(--ease) .45s}
.js-anim .svp .svp-agent.in::after{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.svp-team-note{margin:clamp(28px,3vw,40px) 0 0;max-width:56rem;font-size:17px;line-height:1.55;color:var(--muted)}
.svp-team-note strong{color:var(--white);font-weight:600}
.svp-team-note .textlink{margin-left:6px;color:var(--white)}
/* two ways to work: two bracket cards with "or" between */
.svp-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}
.svp-way{position:relative;padding:clamp(32px,3.4vw,52px) clamp(24px,3vw,44px);border-radius:var(--svp-r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.svp-way::before{content:"";position:absolute;left:-1px;top:-1px;width:var(--svp-b);height:var(--svp-b);border-top:5px solid var(--orange);border-left:5px solid var(--orange);border-top-left-radius:var(--svp-r);transition:width .45s var(--ease),height .45s var(--ease) .1s}
.svp-way .k{margin:0 0 12px;color:var(--orange)}
.svp-way h3{margin:0;font-size:clamp(2rem,1.2rem + 2.4vw,3.5rem);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--white)}
.svp-way p{margin:16px 0 0;max-width:26rem;font-size:clamp(1.0625rem,1rem + .25vw,1.25rem);line-height:1.5;color:var(--muted);text-wrap:pretty}
.svp-or{align-self:center;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-size:15px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--gray);background:var(--black)}
/* closing: the short form beside the line */
.svp-close .closegrid{align-items:center}
.svp-close-say .statement{margin:0}
.svp-close-links{margin:clamp(16px,2vw,24px) 0 0;display:flex;flex-wrap:wrap;gap:4px 28px}
.svp-close .lead-form{padding:clamp(18px,2vw,28px)}
.svp-close .hf-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.svp-close .hf-row .pill{grid-column:1/-1;width:100%}
.svp-close .sf-alt{margin:14px 0 0;color:var(--muted)}
/* light theme: the band stays a dark island, like the other photo bands */
[data-theme=light] .svp-band{color-scheme:dark;background:#000;padding-bottom:clamp(40px,5vw,72px);--white:#fff;--light:#f2f2f0;--muted:rgb(217 217 217/.72);--orange:var(--accent-t,var(--accent))}
@media (max-width:1100px){
  .svp-cards,.svp-agents{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .svp-band-copy{padding:0 var(--gutter)}
  .svp-band h2 strong{white-space:normal}
  .svp-band h2{font-size:clamp(2rem,8.4vw,2.75rem)}
  .svp-band img{aspect-ratio:4/3}
  .svp-pair{grid-template-columns:1fr}
  .svp-or{justify-self:center;width:48px;height:48px;margin:-4px 0}
  .svp-close .hf-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .svp-cards,.svp-agents{grid-template-columns:1fr;grid-auto-rows:auto}
  .svp-card,.svp-agent{grid-row:auto;display:flex;flex-direction:column;padding:28px 22px 22px}
}
@media (prefers-reduced-motion:reduce){
  .js-anim .svp :is(.svp-card,.svp-agent,.svp-way)::before{width:var(--svp-b);height:var(--svp-b)}
  .js-anim .svp .svp-agent::after{background:var(--accent)}
}
/* ===== page:corner-score (subpages pass 2026-10-06) =====
   Every rule here is scoped to the /corner-score/ page: .cs-page (the page's main wrap) or a cs- class used only there.
   Reuses the shared patterns by class (head.stack, score-vid, home-process rounds + rope motion, home-faq, home-contact form,
   scary photo band); this block only adds the page's own layouts: video beside the "what you get" list, the seven
   section cards, the real 53 sample card, and the band crop. Motion only with .js-anim; reduced motion = final state. */
.cs-page{--section:clamp(80px,9vw,144px)}
/* What you get + the video beside it */
.cs-page .cs-get{grid-template-columns:1fr;gap:14px;margin:0 0 clamp(28px,3vw,40px)}
.cs-page .cs-get li{font-size:17px}
@media (min-width:901px){
  .cs-page .cs-how{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". vid" "head vid" "get vid" ". vid";column-gap:clamp(36px,4.5vw,72px)}
  .cs-page .cs-how>.head.stack{grid-area:head;margin-bottom:clamp(24px,2.4vw,32px)}
  .cs-page .cs-how>.cs-get{grid-area:get;margin:0}
  .cs-page .cs-how>.score-vid{grid-area:vid;align-self:center;margin:0}
}
/* Step cards at phone width: the body text and the "got" line run the full card width (review 2026-10-06). */
@media (max-width:640px){.cs-page .cs-steps .rounds li>p{align-self:stretch;max-width:none;text-wrap:pretty}}
/* The seven sections: equal cards, rows aligned by subgrid, the accent corner on each card's own corner */
.cs-page .cs-secs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4vw,20px)}
.cs-page .cs-secs>li{--rs:clamp(22px,2vw,30px);position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;min-width:0;
  padding:clamp(28px,2.4vw,36px) clamp(22px,2vw,30px) clamp(22px,2vw,28px);border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-soft);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.cs-page .cs-secs>li::before{content:"";position:absolute;left:-1px;top:-1px;width:var(--rs);height:var(--rs);border-top:5px solid var(--orange);border-left:5px solid var(--orange);border-top-left-radius:16px}
.cs-page .cs-n{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--orange);font-variant-numeric:tabular-nums}
.cs-page .cs-secs h3{margin:0;font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);font-weight:400;letter-spacing:-.03em;line-height:1.1;color:var(--white)}
.cs-page .cs-call h3 strong{font-weight:600;color:var(--orange)}
.cs-page .cs-secs>li>p:not(.cs-n){margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.5;text-wrap:pretty}
.cs-page .cs-trays{list-style:none;margin:18px 0 0;padding:16px 0 0;box-shadow:inset 0 1px 0 var(--ink-soft);display:flex;flex-wrap:wrap;gap:8px;align-self:start}
.cs-page .cs-trays li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:50px;font-size:13px;font-weight:500;line-height:1.3;color:var(--light);box-shadow:inset 0 0 0 1px var(--gray)}
.cs-page .cs-trays em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-page .cs-secs>li:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 45%,var(--ink-soft))}
.cs-page .cs-secs>li.cs-call{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 40%,var(--ink-soft))}
.cs-page .cs-call .cs-n{text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.cs-page .cs-call .cs-trays li{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 35%,var(--gray))}
@media (max-width:1100px){.cs-page .cs-secs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cs-page .cs-secs{grid-template-columns:1fr}.cs-page .cs-secs>li{grid-row:auto;display:flex;flex-direction:column;padding:26px 22px 22px}.cs-page .cs-trays{align-self:stretch}}
/* card light-up: rise in order, then the corner draws out from its vertex */
.js-anim .cs-page .cs-secs.rv{opacity:1;transform:none}
.js-anim .cs-page .cs-secs>li{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .3s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js-anim .cs-page .cs-secs.in>li{opacity:1;transform:none}
.js-anim .cs-page .cs-secs>li::before{clip-path:inset(0 100% 100% 0);transition:clip-path .4s var(--ease);transition-delay:calc(var(--i) * 70ms + .25s)}
.js-anim .cs-page .cs-secs.in>li::before{clip-path:inset(0)}
/* The real sample: 53, the rank line, and the seven section scores as bars */
.cs-page .cs-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(32px,5vw,80px);align-items:center;
  padding:clamp(28px,4vw,56px);border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.cs-page .cs-card::before{content:"";position:absolute;left:-1px;top:-1px;width:56px;height:56px;border-top:7px solid var(--orange);border-left:7px solid var(--orange);border-top-left-radius:16px}
.cs-page .cs-big{margin:0;display:flex;align-items:baseline;gap:14px}
.cs-page .cs-53{font-size:clamp(6rem,3rem + 8vw,10.5rem);font-weight:500;line-height:.82;letter-spacing:-.07em;color:var(--white);font-variant-numeric:tabular-nums}
.cs-page .cs-of{font-size:clamp(1.125rem,1rem + .4vw,1.375rem);color:var(--muted)}
.cs-page .cs-rank{margin:clamp(20px,2vw,28px) 0 0;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);color:var(--light)}
.cs-page .cs-rank b{color:var(--white);font-weight:600}
.cs-page .cs-quote{margin:10px 0 clamp(24px,2.6vw,36px);font-size:clamp(1.375rem,1.1rem + 1vw,2rem);line-height:1.15;letter-spacing:-.03em;color:var(--white);text-wrap:balance}
.cs-page .cs-quote strong{font-weight:600;color:var(--orange)}
.cs-page .cs-cap{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.cs-page .cs-bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cs-page .cs-bars li{display:grid;grid-template-columns:minmax(8.5rem,10rem) minmax(0,1fr) 2.25rem;gap:16px;align-items:center;font-size:16px;color:var(--light)}
.cs-page .cs-bars b{font-weight:600;color:var(--white);text-align:right;font-variant-numeric:tabular-nums}
.cs-page .cs-bt{position:relative;height:8px;border-radius:8px;background:var(--track);overflow:hidden}
.cs-page .cs-bt i{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);min-width:4px;border-radius:8px;background:var(--accent);transform-origin:left center}
.js-anim .cs-page .cs-card .cs-bt i{transform:scaleX(0);transition:transform .9s var(--ease)}
.js-anim .cs-page .cs-card.in .cs-bt i{transform:none}
.js-anim .cs-page .cs-card.in li:nth-child(2) .cs-bt i{transition-delay:.06s}
.js-anim .cs-page .cs-card.in li:nth-child(3) .cs-bt i{transition-delay:.12s}
.js-anim .cs-page .cs-card.in li:nth-child(4) .cs-bt i{transition-delay:.18s}
.js-anim .cs-page .cs-card.in li:nth-child(5) .cs-bt i{transition-delay:.24s}
.js-anim .cs-page .cs-card.in li:nth-child(6) .cs-bt i{transition-delay:.3s}
.js-anim .cs-page .cs-card.in li:nth-child(7) .cs-bt i{transition-delay:.36s}
.cs-page .cs-key{list-style:none;margin:clamp(22px,2.4vw,32px) 0 0;padding:18px 0 0;box-shadow:inset 0 1px 0 var(--ink-soft);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;font-size:14px;line-height:1.4;color:var(--muted)}
.cs-page .cs-key b{display:block;margin-bottom:2px;color:var(--white);font-weight:600;font-variant-numeric:tabular-nums}
.cs-page .cs-date{margin:14px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:900px){.cs-page .cs-card{grid-template-columns:1fr}}
@media (max-width:520px){.cs-page .cs-bars li{grid-template-columns:7.5rem minmax(0,1fr) 2rem;gap:12px;font-size:15px}.cs-page .cs-key{grid-template-columns:1fr}.cs-page .cs-total .pill{width:100%}}
/* Photo band: the team showing the owner the numbers; copy on the dark side */
.cs-page .cs-band img{aspect-ratio:1376/768;max-height:88vh;object-position:62% 40%}
.cs-page .cs-band::after{background:linear-gradient(90deg,rgb(0 0 0/.9) 0%,rgb(0 0 0/.72) 30%,rgb(0 0 0/0) 58%)}
.cs-page .cs-band .scary-copy{max-width:min(36%,34rem)}
.cs-page .cs-band-p{margin:clamp(16px,1.6vw,24px) 0 0;max-width:26rem;font-size:clamp(1rem,.95rem + .3vw,1.25rem);line-height:1.45;color:#d9d9d9;text-wrap:pretty}
@media (max-width:820px){
  .cs-page .cs-band img{aspect-ratio:614/768;max-height:none;object-position:50% 0}
  .cs-page .cs-band::after{background:linear-gradient(0deg,#000 0%,rgb(0 0 0/.92) 30%,rgb(0 0 0/0) 52%)}
  .cs-page .cs-band .scary-copy{max-width:none;bottom:clamp(28px,8vw,48px)}
  .cs-page .cs-band h2{font-size:clamp(2.25rem,1.4rem + 3.6vw,3rem)}
}
@media (prefers-reduced-motion:reduce){.cs-page .cs-secs>li,.cs-page .cs-secs>li::before,.cs-page .cs-bt i{transition:none}}
[data-theme=light] .cs-page .cs-secs>li:not(.cs-call),[data-theme=light] .cs-page .cs-card{background:var(--surface)}

/* ===== page:process (subpages pass 2026-10-06) =====
   /process/ only. Every selector is scoped to .pr-* hooks that exist only in src/pages/process.html.
   The four rounds reuse the homepage Process motion (4ce1045): the shared .rounds card, the corner bracket drawing out,
   the dot dropping into the corner (corner + dot = the logo), the edge flash then soft tint, and the .rr-rope line with the
   dot at its tip. Here the rounds are full-width stacked cards, so the script measures a column and the line runs down the
   cards' left edge from Round 1 to Round 4 at every width. Text is never hidden: the .rr-on rules below show the cards as
   soon as the script runs, and without JS the shared .rounds fallback applies. Reduced motion: the lit state, no line. */
.pr-rounds{grid-template-columns:minmax(0,1fr);gap:clamp(20px,2vw,28px)}
.pr-rounds.rr-on{opacity:1;transform:none;transition:none;position:relative}
.pr-rounds>li{--rs:clamp(22px,2vw,30px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,72px);align-items:start;
  padding:clamp(40px,3.6vw,56px) clamp(24px,3.2vw,52px) clamp(36px,3.4vw,52px) clamp(52px,5vw,88px);
  background:color-mix(in srgb,var(--white) 2.5%,transparent);box-shadow:inset 0 0 0 1px var(--ink-soft);scroll-margin-top:96px}
.js .pr-rounds.rr-on>li{opacity:1;transform:none;transition:box-shadow .7s var(--ease)}
.js .pr-rounds.rr-on>li::before{width:var(--rs);height:var(--rs);clip-path:inset(0 100% 100% 0);transition:clip-path .38s var(--ease)}
.js .pr-rounds.rr-on>li.rr-lit::before{clip-path:inset(0)}
.pr-rounds>li.rr-lit{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 30%,var(--ink-soft))}
.js .pr-rounds>li.rr-lit.rr-flash{box-shadow:inset 0 0 0 1px var(--orange),0 0 36px -10px color-mix(in srgb,var(--orange) 60%,transparent);transition-duration:.25s}
.pr-rounds .rk{color:var(--orange);margin-bottom:12px}
.pr-top{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pr-rounds h3{font-size:clamp(1.75rem,1.15rem + 1.7vw,2.75rem);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.pr-rounds .pr-sum{margin-top:14px;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);line-height:1.45;color:var(--light);max-width:26rem;text-wrap:pretty}
.pr-rounds .rl{margin-top:12px}
.pr-dl{gap:0;min-width:0}
.pr-dl>div{display:grid;grid-template-columns:minmax(8.5rem,.32fr) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-top:1px solid var(--ink-soft)}
.pr-dl>div:first-child{border-top:0;padding-top:4px}
.pr-dl>div:last-child{padding-bottom:0}
.pr-dl dt{margin:0;font-size:14px;line-height:1.6;font-weight:600;color:var(--muted)}
.pr-dl dd{max-width:38rem;text-wrap:pretty}
.pr-dl dd .textlink{text-underline-offset:4px}
@media (max-width:1000px){.pr-rounds>li{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:640px){
  .pr-rounds>li{--rs:22px;padding:32px 20px 28px 40px}
  .pr-dl>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}
}
@media (prefers-reduced-motion:reduce){.js .pr-rounds.rr-on>li::before{clip-path:none}}
/* The round cards carry the same rounded card and orange corner bracket as the homepage rounds (review 2026-10-06). */
.pr-rounds>li{border-radius:16px}
.pr-rounds>li::before{left:-1px;top:-1px;border-top-left-radius:16px}
/* the band: the owner wins, his corner team around him */
.pr-band{--hh-img:url(/hero-owner-wins-1376.webp);--hh-pos:50% 30%}
.js-anim .pr-band:has(.rv.in)::before{transform:none}
@media (max-width:900px){.pr-band{--hh-img:url(/hero-owner-wins-m.webp);--hh-pos:50% 12%;--hh-h:110vw}}
/* closing form */
section.s.pr-close{padding-top:clamp(72px,8vw,128px)}

/* ===== page:pricing (subpages pass 2026-10-06) ===== */
/* /pricing/ only. Every rule is scoped to .pp, the content wrapper that only pricing.html uses. One accent (the colour
   picker's --orange) replaces the old blue/mint/lime card colours, matching the homepage brackets and labels. */
.pp{--section:clamp(80px,9vw,144px)}
.pp .pp-pk{padding-top:clamp(64px,7vw,112px)}
/* "12-month plans include a new website" chip */
.pp .pp-site{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(20px,2vw,28px);padding:10px 18px 10px 14px;border-radius:50px;box-shadow:inset 0 0 0 1px var(--ink-soft);font-size:15px;font-weight:600;color:var(--white)}
.pp .pp-site-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* Plan cards: equal height, every row lined up across the three cards (subgrid), the accent bracket on the corner */
.pp .pp-plans{gap:16px}
.pp .pp-plans .plan{--c:var(--orange);display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:18px;align-content:start;transition:box-shadow .3s var(--ease)}
.pp .pp-plans .plan .k{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pp .pp-plans .plan .what{min-height:0}
.pp .pp-price .amt{padding:16px 0 12px}
.pp .pp-price .setup{margin:12px 0 0;font-size:15px;color:var(--light)}
.pp .pp-plans .ticks{align-content:start}
.pp .pp-go{align-self:end;width:100%;margin-top:8px}
.pp .pp-badge{padding:3px 10px;border-radius:50px;font-size:12px;font-weight:600;letter-spacing:0;color:var(--on-accent);background:var(--accent)}
.pp .pp-plans .plan.pop{background:var(--surface);box-shadow:inset 0 0 0 2px var(--orange),0 40px 80px -48px color-mix(in srgb,var(--accent) 55%,transparent)}
@media (hover:hover){.pp .pp-plans .plan:not(.pop):hover{box-shadow:inset 0 0 0 1px var(--gray-hover)}.pp .pp-plans .plan:hover::before{border-color:var(--orange-hover)}}
.pp .pp-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 32px;margin-top:20px}
.pp .pp-under .fine{margin:0}
/* entrance: cards rise in order, then each bracket draws in (the Process rounds pattern) */
.js-anim .pp .pp-plans.rv{opacity:1;transform:none}
.js-anim .pp .pp-plans .plan{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .3s var(--ease);transition-delay:calc(var(--i) * 120ms),calc(var(--i) * 120ms),0s}
.js-anim .pp .pp-plans.in .plan{opacity:1;transform:none}
.js-anim .pp .pp-plans .plan::before{width:0;height:0;transition:width .45s var(--ease),height .45s var(--ease),border-color .3s var(--ease);transition-delay:calc(var(--i) * 120ms + .25s),calc(var(--i) * 120ms + .37s),0s}
.js-anim .pp .pp-plans.in .plan::before{width:56px;height:56px}
@media (max-width:900px){.pp .pp-plans .plan{row-gap:16px}}
/* pricing v2 (2026-10-07): grouped card lines, feature panels, the guarantee, score areas */
.pp .pp-body{display:grid;gap:22px;align-content:start}
.pp .pp-gl{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:var(--orange)}
.pp .pp-body .ticks{--c:var(--orange);gap:9px}
.pp .pp-body .ticks li{font-size:15.5px}
.pp .pp-feat{padding:18px 18px 20px;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)}
.pp .pp-feat .pp-gl{font-size:13px}
.pp .pp-feat .ticks li,.pp .pp-ft{color:var(--white)}
.pp .pp-ft{margin:0;font-size:16px;line-height:1.45}
.pp .pp-seal{margin:0;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;line-height:1.25}
.pp .pp-seal-n{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;font-size:17px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pp .pp-seal small{display:block;margin-top:3px;font-size:13.5px;font-weight:500;line-height:1.35}
.pp .ticks li.pp-gt{color:var(--white)}
.pp .ticks li.pp-gt b{color:var(--orange)}
/* guarantee strip under the cards */
.pp .pp-gtee{position:relative;margin-top:20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,48px);border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--orange)}
.pp .pp-gtee::before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:7px solid var(--orange);border-left:7px solid var(--orange);border-top-left-radius:16px}
.pp .pp-gtee-n{margin:0;display:flex;align-items:baseline;gap:6px;font-size:clamp(4rem,2.6rem + 4vw,7rem);font-weight:600;letter-spacing:-.06em;line-height:.9;color:var(--orange);font-variant-numeric:tabular-nums}
.pp .pp-gtee-n small{font-size:clamp(1rem,.8rem + .5vw,1.375rem);letter-spacing:0;font-weight:600}
.pp .pp-gtee .label.sub{margin:0}
.pp .pp-gtee-h{margin:10px 0 0;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.5rem);font-weight:400;letter-spacing:-.04em;line-height:1.08;color:var(--white);text-wrap:balance}
.pp .pp-gtee-h strong{font-weight:600;color:var(--orange)}
.pp .pp-gtee-s{margin:12px 0 0;font-size:15px;color:var(--muted)}
/* which audit areas each package works on */
.pp .pp-lift{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,48px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft)}
.pp .pp-lift-head .label.sub{margin:0}
.pp .pp-lift-head p:not(.label){margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.pp .pp-lift-cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pp .pp-lift-cols .k{margin:0 0 10px;color:var(--white)}
.pp .pp-chips{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.pp .pp-chips span{padding:6px 12px;border-radius:50px;font-size:14px;line-height:1.2;color:var(--light);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.pp .pp-rules .fine{margin:0 0 6px;max-width:52rem}
.pp .pp-tbl tbody th b{color:var(--white);font-weight:600}
.pp .pp-tbl .pp-gt-row th{color:var(--white)}
.pp .pp-tbl .pp-money .vs{font-size:12.5px;font-weight:400;letter-spacing:0}
.pp .pp-ac-note{margin-top:20px}
.pp .pp-from{margin:4px 0 0;font-size:20px;color:var(--light)}
.pp .pp-from b{display:inline-block;margin:0 4px;font-size:clamp(2.5rem,1.6rem + 2.6vw,3.75rem);font-weight:600;letter-spacing:-.045em;color:var(--white);font-variant-numeric:tabular-nums}
.pp .pp-from-s{margin:12px 0 8px;font-size:16px;color:var(--muted)}
@media (max-width:1100px){.pp .pp-lift{grid-template-columns:1fr}}
@media (max-width:900px){.pp .pp-gtee{grid-template-columns:1fr;gap:12px}.pp .pp-lift-cols{grid-template-columns:1fr;gap:16px}}

/* Comparison table */
.pp .pp-tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:16px}
.pp .pp-tbl tr>:first-child{width:40%}
.pp .pp-tbl thead :is(th,td){position:sticky;top:0;z-index:2;background:var(--black);border-bottom:1px solid var(--ink-soft)}
.pp .pp-tbl thead th{padding:20px 12px 18px;text-align:center;font-size:clamp(1rem,.9rem + .4vw,1.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--white)}
.pp .pp-tbl thead th.pp-hi{box-shadow:inset 0 3px 0 var(--orange)}
.pp .pp-tbl tbody th{padding:16px 16px 16px 0;text-align:left;font-weight:400;line-height:1.4;color:var(--light);border-top:1px solid var(--ink-soft)}
.pp .pp-tbl td{padding:16px 12px;text-align:center;vertical-align:middle;color:var(--white);border-top:1px solid var(--ink-soft)}
.pp .pp-tbl .pp-hi{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pp .pp-tbl thead th.pp-hi{background:color-mix(in srgb,var(--accent) 7%,var(--black))}
.pp .pp-tbl .pp-grp th{padding:40px 0 12px;border-top:0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.pp .pp-tbl .pp-money :is(th,td){padding-top:20px;padding-bottom:20px}
.pp .pp-tbl .pp-money td{font-size:clamp(1.25rem,1rem + .7vw,1.75rem);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pp .pp-tbl tbody:first-of-type tr:first-child :is(th,td){border-top:0}
.pp .pp-tbl i{font-style:normal;display:inline-block;overflow:hidden;color:transparent;font-size:1px;line-height:1;vertical-align:middle}
.pp .pp-tbl i.y{width:15px;height:8px;border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:translateY(-2px) rotate(-45deg)}
.pp .pp-tbl i.n{width:12px;height:2px;background:var(--gray-hover)}
.pp .pp-tbl .v{font-weight:600}
.pp .pp-tbl .vs{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--muted)}
@media (hover:hover){.pp .pp-tbl tbody tr:not(.pp-grp):hover :is(th,td){background-color:color-mix(in srgb,var(--white) 3%,transparent)}}
@media (max-width:700px){
  .pp .pp-tbl,.pp .pp-tbl thead,.pp .pp-tbl tbody{display:block}
  .pp .pp-tbl thead{position:sticky;top:0;z-index:2;background:var(--black)}
  .pp .pp-tbl tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp .pp-tbl tr>:first-child{width:auto}
  .pp .pp-tbl thead :is(th,td){position:static}
  .pp .pp-tbl thead td{display:none}
  .pp .pp-tbl thead th{padding:12px 6px;font-size:14px}
  .pp .pp-tbl tbody th{grid-column:1/-1;padding:16px 0 6px}
  .pp .pp-tbl td{border-top:0;padding:6px 6px 14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:40px}
  .pp .pp-tbl td i{margin-top:8px}
  .pp .pp-tbl .pp-grp th{padding:32px 0 4px}
  .pp .pp-tbl .pp-money td{font-size:1.25rem}
}

/* Photo band: the corner team looking after the owner. A dark island in both themes. Wide screens: the copy sits in
   the black on the left and the photo fades in on the right, so the headline never runs over the people. */
.pp .pp-band{position:relative;margin:var(--section) calc(var(--gutter)*-1) 0;background:#000;color:#f2f2f0;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
@media (min-width:1441px){.pp .pp-band{margin-left:calc((100vw - 1440px)/-2 - var(--gutter));margin-right:calc((100vw - 1440px)/-2 - var(--gutter))}}
.pp .pp-band picture{grid-column:2;grid-row:1;margin-left:-14%;display:block}
.pp .pp-band img{display:block;width:100%;height:auto;aspect-ratio:1264/705;object-fit:cover;object-position:50% 40%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
.pp .pp-band-copy{grid-column:1;grid-row:1;position:relative;z-index:1;padding:clamp(48px,6vw,96px) 0 clamp(48px,6vw,96px) max(var(--gutter),calc((100vw - 1440px)/2 + var(--gutter)))}
.pp .pp-band h2{margin:0;font-size:clamp(2.25rem,1rem + 3.3vw,4.75rem);font-weight:400;letter-spacing:-.05em;line-height:.98;color:#fff;text-wrap:balance}
.pp .pp-band h2 strong{display:block;font-weight:600;color:var(--accent-t,var(--accent))}
.pp .pp-band-copy p{margin:20px 0 0;max-width:26rem;font-size:clamp(1.0625rem,1rem + .3vw,1.3125rem);line-height:1.45;color:#d9d9d9;text-wrap:pretty}
.js-anim .pp .pp-band img{transform:scale(1.04);transition:transform 1.2s var(--ease)}
.js-anim .pp .pp-band:has(h2.in) img{transform:none}
@media (max-width:820px){
  .pp .pp-band{grid-template-columns:1fr}
  .pp .pp-band picture{grid-column:1;grid-row:1;margin:0}
  .pp .pp-band img{aspect-ratio:4/3;object-position:50% 30%;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
  .pp .pp-band-copy{grid-row:2;padding:8px var(--gutter) clamp(40px,10vw,56px)}
  .pp .pp-band h2{font-size:clamp(2.25rem,1.5rem + 3.4vw,3.25rem)}
}

/* À la carte: two columns of rows on wide screens, read down then across */
.pp .pp-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:clamp(32px,5vw,80px);border-bottom:1px solid var(--ink-soft)}
.pp .pp-rows .row{align-items:baseline}
.pp .pp-rows .row:last-child{border-bottom:0}
.pp .pp-rows .row b{white-space:nowrap;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pp .pp-rows .row b small{margin-left:6px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}
@media (max-width:900px){.pp .pp-rows{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}

/* Custom work: what we do beside the hourly rates card */
.pp .pp-cu-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:end}
.pp .pp-covers{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp .pp-rates{position:relative;padding:clamp(28px,3vw,40px);border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.pp .pp-rates::before{content:"";position:absolute;top:0;left:0;width:40px;height:40px;border-top:6px solid var(--orange);border-left:6px solid var(--orange);border-top-left-radius:16px}
.pp .pp-rates .k{margin:0 0 8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.pp .pp-rates .row{flex-direction:row;padding:18px 0;font-size:17px}
.pp .pp-rates .row:first-child{border-top:0}
.pp .pp-rates .row:last-child{border-bottom:1px solid var(--ink-soft)}
.pp .pp-rates .row b{white-space:nowrap;text-align:right}
.pp .pp-rates .textlink{margin-top:12px}
@media (max-width:1100px){.pp .pp-cu-grid{grid-template-columns:1fr;align-items:start}.pp .pp-rates{max-width:36rem}}
@media (max-width:640px){.pp .pp-covers{grid-template-columns:1fr}}

/* Start here: the $0 audit and the short form */
.pp .pp-start{padding-bottom:clamp(24px,3vw,48px)}
.pp .pp-start .formgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.pp .pp-start .head.stack{margin:0}
.pp .pp-ticks{--c:var(--orange);margin-top:clamp(24px,2.4vw,32px)}
.pp .pp-ticks li{font-size:17px}
.pp .pp-zero{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:0 0 20px}
.pp .pp-zero b{font-size:clamp(4rem,2.6rem + 4vw,7rem);font-weight:600;letter-spacing:-.06em;line-height:.9;color:var(--orange)}
.pp .pp-zero span{max-width:15rem;font-size:17px;line-height:1.35;color:var(--light)}
.pp .pp-start .hf-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp .pp-start .hf-row .pill{grid-column:1/-1}
.pp .pp-alt{margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.pp .pp-alt a{color:var(--white);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--orange)}
@media (max-width:900px){.pp .pp-start .formgrid{grid-template-columns:1fr}}
@media (max-width:560px){.pp .pp-start .hf-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.js-anim .pp .pp-plans .plan{opacity:1;transform:none}.js-anim .pp .pp-plans .plan::before{width:56px;height:56px}.js-anim .pp .pp-band img{transform:none}}

/* ===== page:about (subpages pass 2026-10-06) =====
   About page only; every selector is scoped to .about-hero or .about-page (the wrap on src/pages/about.html).
   Why list: numbered rows in the accent. Humans band: the fist-bump photo behind "Humans helping / humans."
   Values: six equal-height cards on a subgrid, accent corner bracket that draws in on entrance, soft light-up on hover. */
.about-page .ab-why .why li{position:relative;padding:22px 0 22px 3.25rem;font-size:17px}
.about-page .ab-why .why b{font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);letter-spacing:-.01em;line-height:1.3;margin-bottom:6px}
.about-page .ab-why .ab-n{position:absolute;left:0;top:25px;font-size:14px;font-weight:600;color:var(--orange);font-variant-numeric:tabular-nums}
.about-page .ab-band{--hh-img:url(/team-fist-bump-1264.webp);--hh-pos:50% 32%;grid-template-columns:minmax(0,max-content);align-items:start;align-content:start;gap:clamp(20px,1.8vw,24px)}
.about-page .ab-band .ab-l1,.about-page .ab-band .ab-l2{display:block}
.about-page .ab-band .hh-band-h{font-size:clamp(2.75rem,1rem + 4.4vw,5.25rem)}
.about-page .ab-band .hh-band-h strong{font-weight:600}
.about-page .ab-band .hh-band-p{font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.45;color:var(--silver);max-width:30rem}
.js .about-page .ab-band .hh-dot{transition-delay:.85s}
@media (min-width:641px){.about-page .ab-band .ab-l1,.about-page .ab-band .ab-l2{white-space:nowrap}}
@media (max-width:900px){.about-page .ab-band{--hh-img:url(/team-fist-bump-mobile.webp);--hh-pos:50% 0;--hh-h:75vw}}
.about-page .ab-band + .s{padding-top:clamp(64px,7vw,112px)}
.about-page .ab-cards .value{--c:var(--orange);display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:10px;align-content:start;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.about-page .ab-cards .value .k{margin-top:12px}
@supports not (grid-template-rows:subgrid){.about-page .ab-cards .value{display:flex;grid-row:auto}}
@media (hover:hover){.about-page .ab-cards .value:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 45%,var(--ink-soft)),0 18px 40px -24px color-mix(in srgb,var(--orange) 55%,transparent);transform:translateY(-2px)}}
.js-anim .about-page .ab-cards .value::before{clip-path:inset(0 100% 100% 0);transition:clip-path .5s var(--ease) .2s}
.js-anim .about-page .ab-cards .value.in::before{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){.about-page .ab-cards .value{transition:none}.about-page .ab-cards .value:hover{transform:none}}
.about-page .ab-close{padding-bottom:clamp(72px,8vw,120px)}
.about-page .ab-close .sf-alt a{color:var(--light);text-underline-offset:4px;padding-block:12px}
.about-page .ab-close .sf-alt a:hover{color:var(--orange)}

/* ===== page:contact (subpages pass 2026-10-06) ===== */
/* /contact/ only (every selector sits under .ct, .ct-hero or a ct-* class). Form markup is the shared partial and is
   untouched; this only restyles around it. Sticky side column (head + email card) beside a bracketed form card,
   "What happens next" as bracket step cards, the homepage FAQ look, and a bracketed closing CTA card. */
.ct .statement .acc{color:var(--orange)}
.ct-form .formgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px)}
.ct-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:clamp(32px,3vw,48px);min-width:0}
.ct-side .head.stack{margin:0}
.ct-side .head.stack .statement{margin-bottom:0}
.ct-reach{position:relative;padding:clamp(24px,2.4vw,32px);border-radius:16px;box-shadow:inset 0 0 0 1px var(--ink-soft);background:var(--surface)}
.ct-reach::before,.ct-card::before{content:"";position:absolute;left:0;top:0;width:clamp(36px,3.4vw,52px);height:clamp(36px,3.4vw,52px);border-top:5px solid var(--orange);border-left:5px solid var(--orange);border-top-left-radius:16px;pointer-events:none;z-index:1}
.ct-k{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.ct-mail{margin:0;font-size:clamp(1.5rem,1.05rem + 1.3vw,2.25rem);font-weight:400;letter-spacing:-.035em;line-height:1.1}
.ct-mail a{display:inline-flex;align-items:center;min-height:48px;color:var(--white);text-decoration:underline;text-decoration-color:var(--gray-hover);text-decoration-thickness:2px;text-underline-offset:8px;overflow-wrap:anywhere;transition:text-decoration-color .3s var(--ease)}
.ct-mail a:hover{text-decoration-color:var(--orange)}
.ct-mail a:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
.ct-where{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.5;max-width:30rem;text-wrap:pretty}
.ct-card{position:relative;min-width:0}
.ct-card:has(.lead-form.sent)::before{display:none} /* the "Got it" moment draws its own corners on send */
.ct-card .lead-form{padding:clamp(24px,3.4vw,48px);background:linear-gradient(180deg,var(--pop),var(--surface) 60%);box-shadow:inset 0 0 0 1px var(--ink-soft),0 1px 0 0 rgb(255 255 255/.04) inset,0 40px 80px -48px rgb(0 0 0/.9)}
.ct-card .f-grid{gap:22px 20px}
.ct-card .fld label{font-size:14px;letter-spacing:-.005em}
.ct-card .fld input,.ct-card .fld select,.ct-card .fld textarea{min-height:52px}
.ct-card .fld textarea{min-height:132px}
.ct-card .f-foot{margin-top:32px;padding-top:24px;box-shadow:inset 0 1px 0 var(--ink-soft)}
.ct-card .f-foot .pill{min-width:180px;min-height:52px}
[data-theme=light] .ct-card .lead-form{box-shadow:inset 0 0 0 1px var(--ink-soft),0 30px 60px -44px rgb(40 30 15/.35)}
.ct-next .rounds .rk{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
@media (max-width:900px){
  .ct-form .formgrid{grid-template-columns:1fr;gap:32px}
  .ct-side{position:static;display:contents}
  .ct-side .head.stack{order:1}.ct-card{order:2}.ct-reach{order:3}
}
@media (max-width:560px){.ct-card .lead-form{padding:24px 18px}.ct-card .f-foot .pill{width:100%}}
/* Pricing and Corner Score end on their own form, then the footer CTA: about 40% less space between them (review 2026-10-06). */
body:has(#free.pp-start,#get-score.cs-close) .site-foot{margin-top:clamp(32px,4vw,56px);padding-top:clamp(48px,4.4vw,64px)}

/* Privacy policy (/privacy/, 2026-10-07): type-led page on the 404 punch header, one readable column. */
.pv-top .hero-sub{margin-top:clamp(20px,2vw,28px)}
.pv-top .statement{font-size:clamp(1.0625rem,.98rem + .3vw,1.25rem);line-height:1.5;color:var(--muted)}
.pv-top .statement .textlink{color:var(--white)}
.pv{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(64px,8vw,128px)}
.pv-body{max-width:46rem}
.pv-body section{padding:clamp(28px,3vw,40px) 0;border-top:1px solid var(--ink-soft)}
.pv-body section:first-child{border-top:0;padding-top:0}
.pv-body h2{margin:0 0 16px;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--white)}
.pv-body h3{margin:24px 0 6px;font-size:17px;font-weight:600;line-height:1.35;color:var(--white)}
.pv-body p,.pv-body li{font-size:17px;line-height:1.6;color:var(--light);text-wrap:pretty}
.pv-body p{margin:0 0 14px}
.pv-body p:last-child{margin-bottom:0}
.pv-body b{color:var(--white);font-weight:600}
.pv-body a{color:var(--white);text-decoration:underline;text-decoration-color:var(--gray-hover);text-underline-offset:4px;text-decoration-thickness:2px;padding:12px 0;margin:-12px 0}
.pv-body a:hover{text-decoration-color:currentColor}
.pv-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.pv-list li{position:relative;padding-left:22px}
.pv-list li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.pp-cad{color:var(--light);font-weight:600}