/* Light homepage (21 Sep 2026). Reference: distyl.ai, runner-up harvey.ai.
Everything is scoped under main.v2 so the dark inner pages, which share
brand.css and home.css, are untouched. brand.css styles bare nav and footer
elements (fixed, dark), so .v2 resets both below. Stylesheet URL carries ?v=
in app/layout.tsx: bump it whenever this file changes. */
body:has(main.v2){background:#F3EFE6;color:#15181D}
body:has(main.v2) .atmos,
body:has(main.v2) .gridlay,
body:has(main.v2) .grain{display:none}
.v2{
--p:#F3EFE6; --p2:#ECE6DA; --ink:#15181D; --ink2:#3F444C; --mute:#72767E;
--line:#D9D2C4; --line2:#C6BDAE;
--serif:'Newsreader',Georgia,serif; --sans:'Geist',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
position:relative;z-index:1;background:var(--p);color:var(--ink);
font-family:var(--sans);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased
}
.v2 a{color:inherit}
.v2 nav{position:static;padding:0;border:0;background:none;z-index:auto;transition:none}
.v2 footer{position:static;background:none;border:0;z-index:auto}
.v2 a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.v2-wrap{width:100%;max-width:1840px;margin:0 auto;padding:0 clamp(18px,2.6vw,48px)}
@media(max-width:700px){.v2-wrap{padding:0 18px}}
/* ---------- nav ---------- */
.v2-nav{position:sticky;top:0;z-index:50;background:rgba(243,239,230,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.v2-nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;gap:24px}
.v2-nav-in>.v2-btn{justify-self:end}
.v2-logo{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.22em;white-space:nowrap;text-decoration:none;color:var(--ink)}
.v2 .v2-links{display:flex;gap:30px}
.v2-links a{white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink2);transition:color .2s}
.v2-links a:hover{color:var(--ink)}
@media(max-width:1000px){.v2 .v2-links{display:none}}
/* ---------- buttons ---------- */
.v2-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--ink);padding:11px 16px;border-radius:3px;white-space:nowrap;transition:background .2s,color .2s}
.v2-btn:hover{background:var(--ink);color:var(--p)}
.v2-btn.solid{background:var(--ink);color:var(--p)}
.v2-btn.solid:hover{background:#2C3037}
/* ---------- type ---------- */
.v2-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 22px}
.v2-h1{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.022em;margin:0;max-width:13ch}
.v2-hero-card .v2-h1{max-width:none}
.v2-hero-card .v2-lede{max-width:62ch}
.v2-h2{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(34px,4.2vw,58px);line-height:1.06;letter-spacing:-.018em;margin:0;max-width:17ch}
.v2-h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.01em;margin:0 0 12px}
.v2-lede{font-size:18px;line-height:1.6;color:var(--ink2);max-width:44ch;margin:0}
.v2-body{font-size:15.5px;line-height:1.65;color:var(--ink2);margin:0}
.v2-num{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
/* ---------- hero ---------- */
.v2-hero{padding:16px 0 0}
.v2-hero-card{background:var(--p2);border-radius:18px;padding:clamp(28px,3.5vw,52px) clamp(24px,5vw,72px) clamp(28px,3.5vw,52px)}
.v2-hero-card .v2-label{display:inline-block;font-size:15px;letter-spacing:.16em;color:var(--ink2);background:#DED5C3;border:1px solid #CEC3AD;border-radius:4px;padding:7px 12px 6px;margin-bottom:20px}
/* Everything below the hero sits a little narrower than the full-bleed hero. */
.v2 section:not(.v2-hero)>.v2-wrap{max-width:1360px}
.v2-ctas{display:flex;gap:10px;flex-wrap:wrap}
.v2-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.v2-hero-card .v2-lede{margin-top:24px}
.v2-lede-gap{display:block;height:.9em}
.v2-hero-card .v2-ctas{margin-top:28px}
/* The turning mark (SpinMark). The flat SVG shows until the canvas has drawn
its first frame, and stays if WebGL is unavailable. */
.v2-mark3d{position:relative;width:100%;max-width:600px;aspect-ratio:1;justify-self:center}
.v2-mark3d canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block}
.v2-mark-flat{position:absolute;left:22%;top:22%;width:56%;height:56%;transition:opacity .6s ease}
.v2-mark3d.live .v2-mark-flat{opacity:0}
/* ---------- proof (straight under the hero) ---------- */
.v2-proof{padding:0 0 clamp(70px,8vw,110px)}
.v2-quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v2-quote{margin:0;background:var(--p2);border-radius:14px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:34px}
.v2-quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.36;letter-spacing:-.005em}
.v2-quote figcaption{display:flex;align-items:center;gap:18px;font-size:15px;color:var(--ink2)}
.v2-quote figcaption > span{display:flex;flex-direction:column;gap:3px}
.v2-quote figcaption img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.v2-quote figcaption b{font-weight:600;font-size:17px;color:var(--ink)}
.v2-quote figcaption a{text-decoration:none;border-bottom:1px solid var(--line2)}
.v2-head{margin-bottom:clamp(32px,4vw,52px)}
.v2-head-split{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.v2-head-split .v2-body{max-width:44ch;font-size:17px}
.v2-head-split .v2-h2{max-width:22ch}
/* ---------- what we do: three blueprint cards ---------- */
.v2-pillars{padding:clamp(80px,9vw,130px) 0 clamp(90px,11vw,150px)}
.v2-pillar-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v2-pillar{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;padding:16px 16px 30px;background:var(--p);transition:border-color .3s ease,background .3s ease}
.v2-pillar:hover{border-color:var(--line2);background:#F7F4EE}
.v2-pillar > :not(.v2-pillar-art){margin-left:14px;margin-right:14px}
.v2-pillar .v2-num{margin-top:26px}
.v2-pillar .v2-h3{font-size:clamp(28px,2.6vw,36px)}
.v2-pillar .v2-link{margin-top:auto;padding-top:22px;align-self:flex-start}
.v2-pillar-art{border-radius:6px;border:1px solid var(--line);padding:18px 12px;background-color:#EFEAE0;background-image:linear-gradient(rgba(21,24,29,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,24,29,.05) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px}
.v2-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:4px;transition:border-color .2s}
.v2-link:hover{border-color:var(--ink)}
/* Blueprint drawings (components/Blueprint.tsx). Lines draw in, then the face
fills, notes and ink pieces settle; the lifted ink piece floats. */
.v2-bp{display:block;width:100%;height:auto;overflow:visible}
.v2-bp path{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round}
.v2-bp .bp-box .f1{fill:#F8F5EF}
.v2-bp .bp-box .f2{fill:#E3DCCE}
.v2-bp .bp-box .f3{fill:#EDE7DB}
.v2-bp .bp-box.tint .f1{fill:#E8E1D2}
.v2-bp .bp-box.tint .f2{fill:#D6CCBA}
.v2-bp .bp-box.tint .f3{fill:#DFD7C7}
.v2-bp .bp-box.ink path{stroke:#15181D}
.v2-bp .bp-box.ink .f1{fill:#30343B}
.v2-bp .bp-box.ink .f2{fill:#15181D}
.v2-bp .bp-box.ink .f3{fill:#1F2328}
.v2-bp .bp-grid path{stroke:rgba(21,24,29,.18);stroke-width:.5}
.v2-bp .bp-route{stroke-dasharray:3 3;stroke-width:1.3}
.v2-bp .bp-hidden path{stroke:var(--mute);stroke-width:.7;stroke-dasharray:2 3}
.v2-bp .bp-fill{fill:var(--ink);stroke:none}
.v2-bp .bp-dim path{stroke:var(--mute);stroke-width:.6}
.v2-bp .bp-lead{stroke-width:.6}
.v2-bp .bp-dot{fill:var(--ink);stroke:none}
.v2-bp text{font-family:var(--mono);font-size:8px;letter-spacing:.14em;fill:var(--ink2)}
.v2 .rv .v2-bp [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .15s}
.v2 .rv.in .v2-bp [pathLength]{stroke-dashoffset:0}
.v2 .rv .v2-bp .bp-box path{fill-opacity:0;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .15s,fill-opacity .9s ease 1.1s}
.v2 .rv.in .v2-bp .bp-box path{fill-opacity:1}
.v2 .rv .v2-bp text,.v2 .rv .v2-bp .bp-dot,.v2 .rv .v2-bp .bp-fill,.v2 .rv .v2-bp .bp-hidden,.v2 .rv .v2-bp .bp-grid,.v2 .rv .v2-bp .bp-route{opacity:0;transition:opacity .8s ease 1.4s}
.v2 .rv.in .v2-bp text,.v2 .rv.in .v2-bp .bp-dot,.v2 .rv.in .v2-bp .bp-fill,.v2 .rv.in .v2-bp .bp-hidden,.v2 .rv.in .v2-bp .bp-grid,.v2 .rv.in .v2-bp .bp-route{opacity:1}
.v2-bp .bp-float{animation:v2float 3.6s ease-in-out infinite alternate}
@keyframes v2float{to{transform:translateY(-6px)}}
/* ---------- how we work: four stages on one line ---------- */
.v2-how{padding:0 0 clamp(90px,11vw,150px)}
.v2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.v2-steps::before{content:'';position:absolute;left:0;right:0;top:7px;border-top:1px solid var(--ink)}
.v2-steps::after{content:'';position:absolute;right:-2px;top:3px;width:9px;height:9px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.v2-step{position:relative;padding-top:40px}
.v2-step-node{position:absolute;left:0;top:0;width:15px;height:15px;background:var(--p);border:1px solid var(--ink);transform:rotate(45deg)}
.v2-step:last-child .v2-step-node{background:var(--ink)}
.v2-step .v2-body{max-width:34ch}
/* ---------- what the roadmap touches ---------- */
.v2-areas{padding:0 0 clamp(90px,11vw,150px)}
.v2-area-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.v2-area{padding:30px 30px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s ease}
.v2-area:hover{background:var(--p2)}
.v2-area-t{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.01em;margin:0 0 16px}
.v2-area ul{list-style:none;margin:0;padding:0}
.v2-area li{position:relative;padding:9px 0 9px 20px;border-top:1px dashed var(--line);font-size:15.5px;line-height:1.45;color:var(--ink2)}
.v2-area li::before{content:'';position:absolute;left:2px;top:16px;width:7px;height:7px;border:1px solid var(--ink);transform:rotate(45deg)}
/* ---------- selected work ---------- */
.v2-work{padding:0 0 clamp(90px,11vw,150px)}
.v2-work-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;background:var(--p2);border-radius:18px;padding:clamp(20px,2.4vw,32px)}
.v2-work-text{padding:clamp(8px,2vw,28px)}
.v2-work .v2-h2{font-size:clamp(32px,3.2vw,46px)}
.v2-work-text .v2-body{margin-top:20px;font-size:17px;max-width:46ch}
.v2-stat{display:flex;align-items:baseline;gap:14px;margin:28px 0 30px;padding:18px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.v2-stat b{white-space:nowrap;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4vw,56px);letter-spacing:-.02em;line-height:1}
.v2-stat span{font-size:15px;color:var(--ink2)}
/* The Harvey move: real product inside a moody textured panel. The texture is
two SVG noise layers, no image file; the large one drifts slowly. */
.v2-panel{position:relative;margin:0;min-height:clamp(320px,36vw,560px);display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;background:radial-gradient(120% 100% at 15% 0%,#6E7A72 0%,#3B4540 44%,#1D2320 100%)}
.v2-panel::before,.v2-panel::after{content:'';position:absolute;pointer-events:none}
.v2-panel::before{inset:-20%;background-image:url("data:image/svg+xml;utf8,");background-size:900px 900px;opacity:.6;mix-blend-mode:soft-light;animation:v2drift 40s linear infinite alternate}
.v2-panel::after{inset:0;background-image:url("data:image/svg+xml;utf8,");opacity:.32;mix-blend-mode:overlay}
@keyframes v2drift{to{transform:translate(-6%,-4%)}}
.v2-panel img{position:relative;z-index:1;display:block;width:88%;height:auto;margin:40px auto 56px;border-radius:8px;box-shadow:0 40px 90px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.v2-cap{position:absolute;z-index:2;left:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.v2-cap span{background:rgba(20,24,22,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:7px 10px;border-radius:3px}
/* ---------- who we work with ---------- */
.v2-who{padding:0 0 clamp(90px,11vw,150px)}
.v2-who .v2-h2{max-width:24ch}
.v2-who-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v2-who-card{border:1px solid var(--line);border-radius:10px;padding:32px 32px 30px;background:var(--p);display:flex;flex-direction:column}
.v2-who-card .v2-body{font-size:16px;max-width:52ch}
.v2-who-card .v2-link{align-self:flex-start}
/* ---------- inner v2 pages (/strategy, /transformation) ---------- */
.v2-sec{padding:0 0 clamp(90px,11vw,150px)}
.v2-hero + .v2-sec{padding-top:clamp(80px,9vw,130px)}
.v2-h1-page{font-size:clamp(40px,4.8vw,70px);max-width:16ch}
.v2-hero-art{border-radius:10px;border:1px solid var(--line);padding:22px 16px;background-color:#EFEAE0;background-image:linear-gradient(rgba(21,24,29,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,24,29,.05) 1px,transparent 1px);background-size:22px 22px}
.v2-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v2-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.v2-split-head{position:sticky;top:110px}
.v2-split-head .v2-link{margin-top:28px}
.v2-timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--ink)}
.v2-timeline li{position:relative;padding:0 0 38px 36px}
.v2-timeline li:last-child{padding-bottom:0}
.v2-timeline li::before{content:'';position:absolute;left:-8px;top:2px;width:13px;height:13px;background:var(--p);border:1px solid var(--ink);transform:rotate(45deg)}
.v2-timeline li:last-child::before{background:var(--ink)}
.v2-timeline .v2-body{max-width:52ch;font-size:16.5px}
.v2-deliver{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.v2-deliver-card{border:1px solid var(--line);border-radius:12px;padding:clamp(26px,3vw,40px);background:var(--p2)}
.v2-deliver-card ul{list-style:none;margin:6px 0 0;padding:0}
.v2-deliver-card li{position:relative;padding:14px 0 14px 24px;border-top:1px dashed var(--line2);font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);line-height:1.3}
.v2-deliver-card li::before{content:'';position:absolute;left:2px;top:22px;width:8px;height:8px;border:1px solid var(--ink);transform:rotate(45deg)}
.v2-deliver-card.dark{background:var(--ink);color:var(--p);border-color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end}
.v2-deliver-card.dark .v2-num{color:rgba(243,239,230,.55);margin-bottom:auto}
.v2-deliver-card.dark .v2-area-t{font-size:clamp(26px,2.4vw,34px);margin-top:40px}
.v2-deliver-card.dark .v2-body{color:rgba(243,239,230,.75);max-width:40ch}
.v2-bigquote{margin:0;max-width:1000px}
.v2-bigquote blockquote{margin:0;font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);line-height:1.22;letter-spacing:-.015em}
.v2-bigquote figcaption{display:flex;align-items:center;gap:16px;margin-top:30px;font-size:15px;color:var(--ink2)}
.v2-bigquote figcaption img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.v2-bigquote figcaption > span{display:flex;flex-direction:column;gap:3px}
.v2-bigquote figcaption b{color:var(--ink);font-weight:600}
.v2-statement-card{background:var(--p2);border-radius:18px;padding:clamp(34px,5vw,72px)}
.v2-statement-card .v2-h2{max-width:22ch}
.v2-statement-card .v2-body{margin-top:22px;max-width:60ch;font-size:17.5px}
.v2-faq details{border-top:1px solid var(--line)}
.v2-faq details:last-child{border-bottom:1px solid var(--line)}
.v2-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);line-height:1.3}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--mute);transition:transform .2s}
.v2-faq details[open] summary::after{transform:rotate(45deg)}
.v2-faq details p{margin:0 0 24px;max-width:62ch;font-size:16px;line-height:1.65;color:var(--ink2)}
.v2-band{background:var(--ink);color:var(--p);border-radius:18px;padding:clamp(32px,5vw,64px);display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.v2-band .v2-label{color:rgba(243,239,230,.55)}
.v2-band .v2-h2{color:var(--p)}
.v2-band .v2-body{color:rgba(243,239,230,.75);margin-top:16px;max-width:48ch}
.v2-btn.light{background:var(--p);color:var(--ink);border-color:var(--p)}
.v2-btn.light:hover{background:#fff}
.v2-area > .v2-body{font-size:15.5px}
.v2-feature{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:clamp(26px,3vw,40px);background:var(--p2);text-decoration:none;color:inherit;transition:border-color .3s,background .3s}
.v2-feature:hover{border-color:var(--line2);background:#E8E1D4}
.v2-feature .v2-area-t{font-size:clamp(26px,2.6vw,34px);margin-top:8px}
.v2-feature .v2-body{max-width:60ch;font-size:16.5px}
.v2-feature .v2-link{margin-top:0}
.v2-products{margin-top:48px;border-top:1px solid var(--line);padding-top:24px}
.v2-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:6px}
.v2-product b{display:block;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.16em;margin-bottom:8px}
.v2-product span{font-size:14.5px;line-height:1.55;color:var(--ink2)}
@media(max-width:900px){.v2-product-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.v2-product-grid{grid-template-columns:1fr}}
.v2-hero-solo .v2-h1-page{max-width:18ch}
.v2-hero-solo .v2-lede{max-width:56ch}
.v2-statement-card .v2-ctas{gap:28px}
.v2-statement-card .v2-ctas .v2-link{margin-top:0}
.v2-founder{display:grid;grid-template-columns:320px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.v2-founder img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.v2-founder .v2-h2{margin-bottom:22px}
.v2-founder .v2-body{font-size:17px;line-height:1.75;max-width:62ch;margin-top:16px}
.v2-inline{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
@media(max-width:760px){.v2-founder{grid-template-columns:1fr}.v2-founder img{max-width:260px}}
/* ---------- mobile drawer (components/V2Nav.tsx) ---------- */
.v2-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;justify-self:end}
.v2-burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.v2-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.v2-burger.open span:nth-child(2){opacity:0}
.v2-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.v2-scrim{position:fixed;inset:0;z-index:60;background:rgba(21,24,29,.28);opacity:0;pointer-events:none;transition:opacity .3s}
.v2-scrim.open{opacity:1;pointer-events:auto}
.v2-drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(82vw,340px);background:var(--p);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;padding:40px 32px;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.v2-drawer.open{transform:none}
.v2-drawer a:not(.v2-btn){font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--ink);text-decoration:none}
.v2-drawer .v2-btn{margin-top:14px}
@media(max-width:1000px){.v2-nav-in{grid-template-columns:1fr auto}.v2-nav-in>.v2-btn{display:none}.v2-burger{display:flex}}
@media(min-width:821px){.v2-drawer,.v2-scrim{display:none}}
/* ---------- hero label order on phones ---------- */
.v2-hero-card .v2-label-m{display:none}
/* ---------- swipe rails (phones) ---------- */
.v2-swipe{display:none;align-items:center;gap:8px;margin:-8px 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.v2-swipe svg{animation:v2nudge 1.6s ease-in-out infinite}
@keyframes v2nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
/* ---------- who it's for: a drawing on every card ---------- */
.v2-sit-grid{grid-template-columns:repeat(4,1fr)}
.v2-sit{padding:14px 14px 26px}
.v2-sit > :not(.v2-sit-art){margin-left:12px;margin-right:12px}
.v2-sit-art{border:1px solid var(--line);border-radius:8px;padding:10px 6px;margin-bottom:22px;background-color:#EFEAE0;background-image:linear-gradient(rgba(21,24,29,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,24,29,.05) 1px,transparent 1px);background-size:18px 18px}
.v2-sit .v2-area-t{font-size:22px}
@media(max-width:1100px) and (min-width:701px){.v2-sit-grid{grid-template-columns:1fr 1fr}}
.v2-cal-btn{display:none;margin-top:24px}
/* ---------- message form (components/ContactForm.tsx) in the v2 pages ---------- */
.v2 .cform{background:var(--p);border:1px solid var(--line);border-radius:14px;padding:clamp(22px,3vw,34px);color:var(--ink)}
.v2 .fld label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mute)}
.v2 .fld input,.v2 .fld select,.v2 .fld textarea{background:#FBF9F4;border:1px solid var(--line2);border-radius:6px;color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:400}
.v2 .fld input:focus,.v2 .fld select:focus,.v2 .fld textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,24,29,.08);outline:none}
.v2 .fsubmit{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--p);background:var(--ink);border:0;border-radius:3px;padding:16px;cursor:pointer;box-shadow:none;transform:none}
.v2 .fsubmit:hover{background:#2C3037;box-shadow:none;transform:none}
.v2 .fsuccess{color:var(--ink)}
.v2 .fsuccess h3{font-family:var(--serif);font-weight:400;font-size:26px}
.v2-close-form{align-self:start}
.v2-close-alt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:rgba(243,239,230,.6)}
.v2-close-alt .v2-alt{margin-top:0;background:none;border:0;border-bottom:1px solid rgba(243,239,230,.3);cursor:pointer;font:inherit;font-size:14px;color:var(--p);padding:0 0 3px}
.v2-meta-ink{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:24px 0 0}
#book{scroll-margin-top:80px}#message{scroll-margin-top:80px}
.v2-contact{padding-top:clamp(48px,6vw,88px)}
.v2-contact .v2-h1-page{font-size:clamp(40px,4.6vw,66px);margin-bottom:20px}
.v2-contact .v2-split-head .v2-body{font-size:17px;max-width:44ch}
/* ---------- /ai-for: the industry picker and the capability board ---------- */
.v2-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.v2-pick-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:32px 30px 28px;background:var(--p);text-decoration:none;color:inherit;transition:border-color .3s,background .3s,transform .3s}
.v2-pick-card:hover{border-color:var(--mute);background:#F7F4EE;transform:translateY(-2px);box-shadow:0 26px 50px -44px rgba(21,24,29,.8)}
.v2-pick-card .v2-area-t{font-size:clamp(27px,2.6vw,34px);line-height:1.12}
.v2-pick-card:hover .v2-area-t{color:var(--ink)}
.v2-pick-card:last-child{grid-column:1/-1}
.v2-pick-card:last-child .v2-body{max-width:60ch}
.v2-pick-card .v2-body{margin:10px 0 0;max-width:46ch}
.v2-pick-card .v2-link{margin-top:auto;padding-top:24px;align-self:flex-start}
.v2-pick-n{display:flex;align-items:baseline;gap:10px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line2)}
.v2-pick-n b{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1}
.v2-pick-n span{font-family:var(--serif);font-size:15px;line-height:1.3;color:var(--ink2)}
.v2-board-group{margin-bottom:clamp(40px,5vw,64px)}
.v2-board{display:grid;gap:12px}
.v2-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-radius:20px;padding:5px 11px;white-space:nowrap}
.v2-chip::before{content:'';width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.v2-chip.proven{color:#3F5A4A;background:rgba(91,107,98,.12);border:1px solid rgba(91,107,98,.3)}
.v2-chip.proven::before{background:#5B6B62}
.v2-chip.working{color:#7A5A2E;background:rgba(138,106,59,.12);border:1px solid rgba(138,106,59,.3)}
.v2-chip.working::before{background:#8A6A3B}
.v2-chip.early{color:var(--mute);background:rgba(21,24,29,.05);border:1px solid var(--line2)}
.v2-chip.early::before{background:transparent;border:1px solid var(--mute)}
/* One strip above the board: what to do, and what the three states mean. */
.v2-legend{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 30px;padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:var(--p2)}
.v2-legend-h{font-family:var(--serif);font-size:clamp(18px,1.8vw,21px);line-height:1.35;margin:0}
.v2-legend-k{display:flex;flex-wrap:wrap;gap:10px 26px}
.v2-legend-k>span{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2)}
@media(max-width:600px){.v2-legend{padding:18px}.v2-legend-k{gap:10px}.v2-legend-k>span{font-size:13px}}
.v2-card{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--p);overflow:hidden;transition:border-color .25s,background .25s,box-shadow .25s}
.v2-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2);transition:background .25s}
.v2-card.m-proven::before{background:#5B6B62}
.v2-card.m-working::before{background:#8A6A3B}
.v2-card:hover{border-color:var(--line2);background:#F7F4EE;box-shadow:0 18px 40px -34px rgba(21,24,29,.5)}
.v2-card[open]{background:var(--p2);border-color:var(--line2)}
.v2-card[open]::before{width:5px}
.v2-card summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:20px;padding:24px 26px 24px 30px}
.v2-card summary::-webkit-details-marker{display:none}
.v2-card-i{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute);padding-top:7px}
.v2-card-main{display:grid;gap:7px;min-width:0}
.v2-card-t{font-family:var(--serif);font-size:clamp(20px,2vw,25px);line-height:1.25;letter-spacing:-.01em}
.v2-card-teaser{font-size:15.5px;line-height:1.55;color:var(--ink2);max-width:70ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2-card[open] .v2-card-teaser{display:none}
.v2-card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto}
.v2-card-more{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);opacity:0;transition:opacity .25s}
.v2-card:hover .v2-card-more{opacity:1}
.v2-card[open] .v2-card-more{opacity:1}
.v2-card[open] .v2-card-more::after{content:' \2013'}
.v2-card-body{padding:0 26px 28px 30px;max-width:78ch}
.v2-card-body p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink2)}
.v2-card-body dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:20px 0 0}
.v2-card-body dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:3px;white-space:nowrap}
.v2-card-body dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.v2-card-note{margin-top:20px!important;padding-left:16px;border-left:2px solid var(--line2);font-size:15px!important;color:var(--mute)!important}
@media(max-width:700px){
.v2-pick{grid-template-columns:1fr}
.v2-card summary{grid-template-columns:auto 1fr;padding:18px 18px 20px 22px;gap:12px}
.v2-card-i{display:none}
.v2-card-meta{flex-direction:row;align-items:center;grid-column:2;margin-top:4px}
.v2-card-more{display:none}
.v2-card-body{padding:0 18px 22px 22px}
.v2-card-body dl{grid-template-columns:1fr;gap:4px 0}
.v2-card-body dt{padding-top:12px}
.v2-card-m{display:none}
}
.v2-explore-card{background:var(--p2);border-radius:18px;padding:clamp(28px,4vw,56px)}
.v2-explore-card .v2-head{margin-bottom:34px}
.v2-explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.v2-explore-tile{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border:1px solid var(--line2);border-radius:8px;background:var(--p);text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.25;transition:background .25s,transform .25s}
.v2-explore-tile:hover{background:var(--ink);color:var(--p);transform:translateY(-2px)}
.v2-explore-tile svg{flex:0 0 auto}
.v2-explore-n{flex:0 0 auto;font-family:var(--sans);font-size:15px;color:var(--mute)}
.v2-explore-tile:hover .v2-explore-n{color:rgba(243,239,230,.7)}
@media(max-width:900px){.v2-explore-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.v2-explore-grid{grid-template-columns:1fr}.v2-explore-tile{padding:18px 20px;font-size:17px}}
.v2-card-eg{margin-top:20px!important;padding:16px 18px;border-radius:8px;background:rgba(21,24,29,.04);font-size:15.5px!important;line-height:1.6;color:var(--ink)!important}
.v2-card-eg span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
/* Docks to the bottom of the window once someone has opened a few, so the page
answers back while they read rather than waiting for the form at the end. */
.v2-readout{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;width:min(760px,calc(100vw - 32px));display:flex;align-items:center;justify-content:space-between;gap:22px;padding:16px 18px 16px 24px;border-radius:12px;background:var(--ink);color:var(--p);box-shadow:0 30px 60px -28px rgba(21,24,29,.85);animation:v2dock .4s cubic-bezier(.2,.8,.3,1)}
@keyframes v2dock{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.v2-readout p{margin:0;font-size:15px;line-height:1.5;color:rgba(243,239,230,.8)}
.v2-readout b{color:var(--p);font-weight:500}
.v2-readout .v2-btn.solid{background:var(--p);color:var(--ink);white-space:nowrap}
.v2-readout .v2-btn.solid:hover{background:#fff}
@media(max-width:700px){.v2-readout{flex-direction:column;align-items:stretch;padding:16px 18px;gap:12px;bottom:12px}.v2-readout p{font-size:14px}.v2-readout .v2-btn{width:100%;justify-content:center}}
.v2-chapter{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,36px);align-items:start;margin:0 0 24px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.v2-chapter-n{font-family:var(--serif);font-size:clamp(44px,6vw,76px);line-height:.78;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(21,24,29,.28)}
.v2-chapter-h{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,42px);line-height:1.08;letter-spacing:-.018em;margin:0}
.v2-chapter-i{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink2);max-width:52ch}
.v2-board-group{margin-bottom:clamp(56px,7vw,96px)}
@media(max-width:820px){.v2-chapter{gap:14px}.v2-chapter-n{font-size:34px;padding-top:4px}}
.v2-hero-photo{width:100%;height:100%;min-height:260px;max-height:420px;object-fit:cover;border-radius:12px;display:block}
.v2-hero-hub{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,64px);align-items:center}
.v2-hero-hub .v2-h1-page{max-width:16ch}
@media(max-width:900px){.v2-hero-hub{grid-template-columns:1fr}.v2-hero-hub .v2-mark3d{order:-1;max-width:240px;margin:0 auto}.v2-board-open{grid-template-columns:1fr}.v2-board-art{display:none}}
.v2-assure{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);background:var(--ink);color:var(--p);border-radius:18px;padding:clamp(30px,4vw,60px)}
.v2-assure .v2-label{color:rgba(243,239,230,.55)}
.v2-assure .v2-h2{color:var(--p);max-width:16ch}
.v2-assure .v2-body{color:rgba(243,239,230,.72);margin-top:18px;max-width:44ch}
.v2-assure ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.v2-assure li{display:grid;gap:6px;padding:20px 0;border-top:1px solid rgba(243,239,230,.16)}
.v2-assure li:first-child{border-top:0;padding-top:0}
.v2-assure b{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--p)}
.v2-assure span{font-size:15.5px;line-height:1.6;color:rgba(243,239,230,.72)}
@media(max-width:820px){.v2-assure{grid-template-columns:1fr}}
/* ---------- close ---------- */
.v2-close{padding:0 0 28px}
.v2-close-card{background:var(--ink);color:var(--p);border-radius:18px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.v2-close .v2-label{color:rgba(243,239,230,.55)}
.v2-close .v2-h2{color:var(--p)}
.v2-close .v2-body{color:rgba(243,239,230,.75);margin-top:18px;max-width:42ch}
.v2-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,239,230,.55);margin:26px 0 0}
.v2-alt{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--p);text-decoration:none;border-bottom:1px solid rgba(243,239,230,.3);padding-bottom:3px;font-size:14px}
.v2-cal{background:#101215;border-radius:12px;min-height:560px;overflow:hidden}
/* ---------- footer ---------- */
.v2-foot{padding:40px 0 48px}
.v2-foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
.v2-foot nav{display:flex;gap:22px;flex-wrap:wrap}
.v2-foot nav a{font-size:13px;color:var(--ink2);text-decoration:none}
.v2-foot nav a:hover{color:var(--ink)}
.v2-foot p{margin:0;font-size:12px;color:var(--mute)}
/* ---------- responsive ---------- */
@media(max-width:960px){.v2-close-card{grid-template-columns:1fr}}
@media(max-width:900px){
.v2-quotes{grid-template-columns:1fr}
.v2-pillar-list{grid-template-columns:1fr;max-width:560px}
.v2-area-grid{grid-template-columns:1fr 1fr}
.v2-work-card{grid-template-columns:1fr}
.v2-head-split{grid-template-columns:1fr;gap:16px}
.v2-steps{grid-template-columns:1fr 1fr;row-gap:40px}
.v2-cards3{grid-template-columns:1fr}
.v2-split{grid-template-columns:1fr;gap:28px}
.v2-split-head{position:static}
.v2-deliver{grid-template-columns:1fr}
.v2-hero-art{order:-1;max-width:520px}
.v2-hero-grid{grid-template-columns:1fr;gap:8px}
.v2-mark3d{max-width:300px;order:-1;margin:-20px auto -10px}
}
@media(max-width:600px){
.v2-mark3d{max-width:190px;margin:-24px auto -18px}
.v2-hero-card .v2-label{font-size:13px;margin-bottom:12px}
.v2-hero-card .v2-lede{font-size:16px;margin-top:16px}
.v2-hero-card .v2-ctas{margin-top:20px}
.v2-area-grid{grid-template-columns:1fr}
.v2-who .v2-h2{max-width:24ch}
.v2-who-grid{grid-template-columns:1fr}
.v2-steps{grid-template-columns:1fr}
.v2-quote figcaption img{width:64px;height:64px}
}
@media(max-width:700px){
.v2-cap{left:12px;bottom:12px}
}
/* ---------- phones: rails, hero order, compact cards ---------- */
@media(max-width:700px){
.v2-hero-card .v2-label-m{display:block;justify-self:center;order:-2;margin:0 auto 4px}
.v2-hero-card .v2-label-d{display:none}
.v2-swipe{display:flex}
.v2-rail,.v2-steps{display:flex!important;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;scroll-padding:0 18px;gap:12px;margin-left:-18px;margin-right:-18px;padding:4px 18px 12px;scrollbar-width:none;overscroll-behavior-x:contain;border:0}
.v2-rail::-webkit-scrollbar,.v2-steps::-webkit-scrollbar{display:none}
.v2-rail>*,.v2-steps>*{flex:0 0 82%;scroll-snap-align:start}
.v2-rail>.rv,.v2-steps>.rv{transform:none}
.v2-steps::before,.v2-steps::after{display:none}
.v2-step{background:var(--p2);border-radius:12px;padding:26px 22px 28px}
.v2-step-node{position:static;display:block;margin:0 0 18px 2px}
.v2-area-grid.v2-rail{border:0}
.v2-area-grid.v2-rail .v2-area{border:1px solid var(--line);border-radius:12px;background:var(--p)}
.v2-work-card{padding:12px;gap:14px}
.v2-work-text{padding:6px 8px 12px}
.v2-work .v2-h2{font-size:28px}
.v2-work-text .v2-body{display:none}
.v2-stat{margin:16px 0 18px;padding:10px 0}
.v2-stat b{font-size:34px}
.v2-panel{min-height:0;order:-1;border-radius:10px}
.v2-panel img{width:92%;margin:16px auto}
.v2-cap{display:none}
}
/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
.v2-panel::before{animation:none}
.v2-bp .bp-float{animation:none}
.v2-swipe svg{animation:none}
}
/* Contents panel in the industry hero. Built from the board below it, so it is
information rather than ornament and nothing competes with the mark on the homepage. */
main.v2 .v2-index{border:1px solid var(--line);border-radius:10px;background:var(--p);padding:22px 24px}
main.v2 .v2-index-h{font-family:var(--serif);font-size:17px;line-height:1.35;color:var(--ink2);margin:0 0 14px}
main.v2 .v2-index-h b{font-family:var(--sans);font-size:30px;font-weight:500;color:var(--ink);letter-spacing:-.02em;margin-right:4px}
main.v2 .v2-index ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
main.v2 .v2-index li{border-bottom:1px solid var(--line2)}
main.v2 .v2-index li a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding:11px 2px;text-decoration:none;color:var(--ink);transition:padding .25s,color .25s}
main.v2 .v2-index li a:hover{padding-left:8px;color:var(--ink)}
main.v2 .v2-index-n{font-size:11px;letter-spacing:.1em;color:var(--mute)}
main.v2 .v2-index-t{font-size:15px;line-height:1.3}
main.v2 .v2-index-c{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
main.v2 .v2-index-bar{display:flex;gap:3px;height:5px;margin:18px 0 10px}
main.v2 .v2-index-bar span{border-radius:3px}
main.v2 .v2-index-bar .proven{background:#5B6B62}
main.v2 .v2-index-bar .working{background:#8A6A3B}
main.v2 .v2-index-bar .early{background:rgba(21,24,29,.14)}
main.v2 .v2-index-k{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;font-size:12px;color:var(--mute)}
main.v2 .v2-index-k>span{display:inline-flex;align-items:center;gap:5px}
main.v2 .v2-index-k .v2-chip{padding:4px 8px;letter-spacing:.1em}
@media(max-width:820px){main.v2 .v2-index{padding:18px 18px}}
/* The turning plate stack on /ai-for. Not the mark: five flat drawings, one per industry. */
main.v2 .v2-stack{display:flex;align-items:center;justify-content:center;min-height:320px;perspective:1000px}
main.v2 .v2-stack-in{position:relative;width:250px;height:250px;transform-style:preserve-3d;animation:v2stack 52s linear infinite}
@keyframes v2stack{from{transform:rotateX(63deg) rotateZ(0deg)}to{transform:rotateX(63deg) rotateZ(360deg)}}
main.v2 .v2-plate{position:absolute;inset:0;border:1px solid rgba(21,24,29,.26);border-radius:4px;transform:translateZ(calc(var(--n) * 34px - 68px));background-color:rgba(239,234,224,.5);background-image:linear-gradient(rgba(21,24,29,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(21,24,29,.07) 1px,transparent 1px);background-size:25px 25px;box-shadow:0 20px 40px -38px rgba(21,24,29,.7)}
main.v2 .v2-plate i{position:absolute;width:9px;height:9px;border:1px solid var(--ink);border-radius:50%;background:var(--p)}
main.v2 .v2-plate i:nth-child(1){left:22%;top:30%}
main.v2 .v2-plate i:nth-child(2){left:64%;top:44%;background:var(--ink)}
main.v2 .v2-plate i:nth-child(3){left:38%;top:72%}
main.v2 .v2-plate b{position:absolute;border:1px solid rgba(21,24,29,.45);border-radius:2px}
main.v2 .v2-plate u{position:absolute;height:1px;background:rgba(21,24,29,.4)}
/* Each plate carries a different drawing, so the stack reads as five pages of one set. */
main.v2 .v2-plate:nth-child(1) b{left:14%;top:18%;width:38%;height:26%}
main.v2 .v2-plate:nth-child(1) u{left:52%;top:31%;width:30%}
main.v2 .v2-plate:nth-child(2) b{left:46%;top:22%;width:34%;height:34%;border-radius:50%}
main.v2 .v2-plate:nth-child(2) u{left:16%;top:62%;width:44%}
main.v2 .v2-plate:nth-child(3) b{left:20%;top:44%;width:52%;height:22%}
main.v2 .v2-plate:nth-child(3) u{left:30%;top:22%;width:26%;transform:rotate(38deg)}
main.v2 .v2-plate:nth-child(4) b{left:30%;top:16%;width:26%;height:52%}
main.v2 .v2-plate:nth-child(4) u{left:58%;top:70%;width:28%}
main.v2 .v2-plate:nth-child(5) b{left:18%;top:26%;width:30%;height:30%;border-radius:50%}
main.v2 .v2-plate:nth-child(5) u{left:44%;top:41%;width:38%}
@media(max-width:820px){main.v2 .v2-stack{min-height:230px}main.v2 .v2-stack-in{width:180px;height:180px}main.v2 .v2-plate{transform:translateZ(calc(var(--n) * 24px - 48px))}}
@media(prefers-reduced-motion:reduce){main.v2 .v2-stack-in{animation:none;transform:rotateX(63deg) rotateZ(38deg)}}
/* Picking. A card someone adds is part of a scope, so it reads as selected, not ticked. */
main.v2 .v2-card summary{position:relative;padding-bottom:58px}
main.v2 .v2-pickbtn{position:absolute;left:30px;bottom:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);background:var(--p2);border:1px solid var(--line2);border-radius:20px;padding:7px 15px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
main.v2 .v2-pickbtn:hover{background:var(--ink);color:var(--p);border-color:var(--ink)}
main.v2 .v2-pickbtn[aria-pressed='true']{background:var(--ink);color:var(--p);border-color:var(--ink)}
main.v2 .v2-pickbtn[aria-pressed='true']::before{content:'✓ ';letter-spacing:0}
main.v2 .v2-card.picked{border-color:var(--ink);background:#F7F4EE}
main.v2 .v2-card.picked::before{width:5px;background:var(--ink)}
main.v2 .v2-chapter-s{display:flex;align-items:baseline;gap:9px;margin:16px 0 0;font-family:var(--serif);font-size:18px;color:var(--ink)}
main.v2 .v2-chapter-s span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* The build-out. What they picked, grouped into the systems we deliver. */
main.v2 .v2-build{border:1px solid var(--line2);border-radius:14px;background:var(--p2);padding:clamp(28px,4vw,48px);margin:clamp(20px,3vw,34px) 0 0;scroll-margin-top:96px}
main.v2 .v2-build-h{margin-bottom:26px}
main.v2 .v2-build-e{margin:0;font-size:17px;line-height:1.6;color:var(--ink2);max-width:60ch}
main.v2 .v2-build-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:18px}
main.v2 .v2-build-list>li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:var(--p)}
main.v2 .v2-build-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mute);padding-top:6px}
main.v2 .v2-build-list h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,27px);line-height:1.2;margin:0}
main.v2 .v2-build-d{margin:7px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
main.v2 .v2-build-list ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
main.v2 .v2-build-list ul li{display:flex;align-items:baseline;gap:9px;font-size:15px;color:var(--ink)}
main.v2 .v2-build-list ul button{font-size:15px;line-height:1;color:var(--mute);background:none;border:0;padding:2px 4px;cursor:pointer}
main.v2 .v2-build-list ul button:hover{color:var(--ink)}
main.v2 .v2-build-f{margin:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--ink2);max-width:62ch}
@media(max-width:600px){main.v2 .v2-build-list>li{grid-template-columns:1fr;gap:8px}main.v2 .v2-build-n{padding:0}}
/* The live voice demo. Dark, because it is the one thing on the page that is switched on. */
main.v2 .v2-demo-sec{padding:clamp(40px,5vw,72px) 0 clamp(44px,5.5vw,80px)}
main.v2 .v2-demo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(30px,4vw,54px);border-radius:16px;background:var(--ink);color:var(--p)}
main.v2 .v2-demo .v2-label{color:rgba(243,239,230,.55)}
main.v2 .v2-demo .v2-h2{color:var(--p)}
main.v2 .v2-demo .v2-body{color:rgba(243,239,230,.78)}
main.v2 .v2-demo-try{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
main.v2 .v2-demo-try li{display:flex;gap:11px;font-size:15px;line-height:1.5;color:rgba(243,239,230,.78)}
main.v2 .v2-demo-try li::before{content:'';flex:0 0 auto;width:6px;height:6px;margin-top:8px;border-radius:50%;background:rgba(243,239,230,.45)}
main.v2 .v2-call{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 26px;border:1px solid rgba(243,239,230,.18);border-radius:14px;background:rgba(243,239,230,.05)}
main.v2 .v2-call-orb{position:relative;width:74px;height:74px;margin-bottom:18px}
main.v2 .v2-call-orb span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(243,239,230,.35)}
main.v2 .v2-call-orb span:last-child{inset:13px;background:rgba(243,239,230,.1);border-color:transparent}
main.v2 .v2-call[data-state='connecting'] .v2-call-orb span:first-child{animation:v2pulse 1.4s ease-out infinite}
main.v2 .v2-call.speaking .v2-call-orb span:last-child{animation:v2pulse 1s ease-out infinite}
@keyframes v2pulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
main.v2 .v2-call-s{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,230,.55)}
main.v2 .v2-call-b{margin:12px 0 2px;font-family:var(--serif);font-size:22px;line-height:1.2}
main.v2 .v2-call-p{margin:0;font-size:14px;color:rgba(243,239,230,.6)}
main.v2 .v2-call-t{margin:10px 0 0;font-family:var(--mono);font-size:13px;color:rgba(243,239,230,.7);font-variant-numeric:tabular-nums}
main.v2 .v2-call-w{display:flex;align-items:center;justify-content:center;gap:4px;height:22px;margin:8px 0 18px;opacity:.25;transition:opacity .3s}
main.v2 .v2-call.speaking .v2-call-w{opacity:1}
main.v2 .v2-call-w i{width:3px;height:6px;border-radius:2px;background:var(--p)}
main.v2 .v2-call.speaking .v2-call-w i{animation:v2wave .7s ease-in-out infinite}
@keyframes v2wave{0%,100%{height:6px}50%{height:20px}}
main.v2 .v2-call .v2-btn.solid{background:var(--p);color:var(--ink)}
main.v2 .v2-call .v2-btn.ghost{border:1px solid rgba(243,239,230,.35);color:var(--p)}
main.v2 .v2-call-n{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:rgba(243,239,230,.5);max-width:34ch}
@media(max-width:860px){main.v2 .v2-demo{grid-template-columns:1fr}}
/* The message box flashes once when the build-out writes into it, so the handoff is seen. */
main.v2 .cform textarea.filled{border-color:var(--p);box-shadow:0 0 0 3px rgba(243,239,230,.18);transition:box-shadow .4s,border-color .4s}
main.v2 .v2-call-tel{display:flex;flex-direction:column;gap:3px;margin:16px 0 0;padding:12px 18px;border:1px solid rgba(243,239,230,.22);border-radius:10px;text-decoration:none;transition:background .25s,border-color .25s}
main.v2 .v2-call-tel:hover{background:rgba(243,239,230,.08);border-color:rgba(243,239,230,.4)}
main.v2 .v2-call-tel span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,239,230,.55)}
main.v2 .v2-call-tel b{font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:.02em;color:var(--p)}
main.v2 .v2-call[data-state='error'] .v2-call-tel{border-color:rgba(243,239,230,.5);background:rgba(243,239,230,.08)}
.v2-explore-all{margin-top:26px;display:inline-flex}
main.v2 .v2-orb{width:min(240px,74vw);height:auto;aspect-ratio:1;display:block;margin:-6px auto 6px}
/* The About mechanism. Canvas, so the movement can be drawn properly. */
/* The About globe: meridians and latitudes, turning. --u scales the sphere's own
units (a 200 box) to the pixels the container is drawn at. */
main.v2 .v2-globe{display:flex;align-items:center;justify-content:center;min-height:380px;perspective:1200px}
main.v2 .v2-globe-in{--u:1.55;position:relative;width:310px;height:310px;transform-style:preserve-3d;animation:v2globe 66s linear infinite}
@keyframes v2globe{from{transform:rotateX(14deg) rotateY(0deg)}to{transform:rotateX(14deg) rotateY(360deg)}}
main.v2 .v2-gp{position:absolute;inset:0}
main.v2 .v2-gp>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(21,24,29,.62);stroke-width:1.1;stroke-linecap:round;vector-effect:non-scaling-stroke;overflow:visible}
@media(max-width:820px){
main.v2 .v2-globe{min-height:280px}
main.v2 .v2-globe-in{--u:1.1;width:220px;height:220px}
}
@media(prefers-reduced-motion:reduce){main.v2 .v2-globe-in{animation:none;transform:rotateX(14deg) rotateY(26deg)}}
}