/* MUVES round 3: calmer palette (graphite, white, warm paper, one softer red), rounded "bubbly" cards,
   real bullet points, brighter small text, light and dark sections that alternate, smoke backgrounds,
   a centred navigation with a clean full-width dropdown. Loads after muves.css and v2.css. */

:root{
  --red:#e5484d; --red-bright:#ff6b6f; --red-deep:#b8333a; --red-tint:#fdecec;
  --base:#0e1014; --surface:#171a20; --surface-2:#20242c; --line:#2a2f38; --line-2:#3a404b;
  --white:#ffffff; --silver:#eef0f4; --text:#e3e6ec; --dim:#c9cdd5;
  --paper:#f6f4ef; --stone:#e8e4dd; --ink:#12151b; --ink-soft:#3a414d; --ink-line:#dcd7cf;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --metal:linear-gradient(180deg,#ffffff 0%,#e6e8ec 46%,#b7bcc6 56%,#f1f2f5 100%);
}
body{background:var(--base);color:var(--text)}
::selection{background:rgba(229,72,77,.35)}
.btn-red{background:var(--red)}
@media (hover:hover) and (pointer:fine){.btn-red:hover{background:#d93d42}}
.btn-ghost{border-color:rgba(255,255,255,.28)}
.btn-dark{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.btn-dark:hover{background:#262a33}}
.lede{color:var(--text)}
.fact span,.pain p,.how-step .body,.svc3-copy p,.checks li,.ways2 p,.who span,.faq2 details p,.foot a,.foot li,.legal{color:var(--dim)}

/* ---------- light sections ---------- */
.sec-paper,.sec-white{color:var(--ink-soft)}
.sec-paper{background:var(--paper)}
.sec-white{background:var(--card)}
.sec-paper h2,.sec-paper h3,.sec-white h2,.sec-white h3,.sec-paper .h2,.sec-white .h2,.sec-paper b,.sec-white b{color:var(--ink)}
.sec-paper .h2 .soft,.sec-white .h2 .soft,.sec-paper .big-title .soft,.sec-white .big-title .soft{color:#6b7280}
.sec-paper .lede,.sec-white .lede,.sec-paper p,.sec-white p{color:var(--ink-soft)}
.sec-paper .link,.sec-white .link{color:var(--ink);border-color:var(--ink-line)}
.sec-paper .link:hover,.sec-white .link:hover{border-color:var(--red)}
.kicker{display:inline-block;color:var(--red);font-weight:650;font-size:.9rem;letter-spacing:.02em;margin-bottom:14px}
.sec-dark .kicker,.hero2 .kicker{color:var(--red-bright)}

/* ---------- smoke backgrounds ---------- */
[data-smoke]{position:relative;isolation:isolate;overflow:hidden}
.smoke-cv{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.smoke-css::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 50% at 20% 30%,rgba(120,128,145,.35),transparent 70%),radial-gradient(35% 45% at 80% 70%,rgba(229,72,77,.18),transparent 70%),radial-gradient(45% 55% at 60% 20%,rgba(200,205,215,.18),transparent 70%);filter:blur(40px);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.smoke-css::before{animation:none}}

/* ---------- header: centred links, clean full-width dropdown ---------- */
.top{background:rgba(14,16,20,.82)}
.nav{position:relative}
.nav-links{flex:1;justify-content:center;gap:40px}
.nav-links>.btn{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.nav-links>.btn:active{transform:translateY(-50%) scale(.97)}
.nav-links a:not(.btn),.dd-top{font-size:1rem;font-weight:550}
.dd{position:static}
.dd-panel,.dd-panel.dd-narrow{left:50%;width:min(1040px,calc(100vw - 40px));top:calc(100% - 6px);padding:0;border-radius:var(--r-lg);background:var(--card);border:0;box-shadow:0 40px 90px -20px rgba(0,0,0,.6);display:grid;grid-template-columns:300px 1fr;overflow:hidden}
.dd-panel::before{top:-16px;height:16px}
.dd-intro{background:var(--paper);padding:30px 28px;display:flex;flex-direction:column;gap:10px}
.dd-intro b{font-size:1.35rem;color:var(--ink);letter-spacing:-.02em}
.dd-intro p{color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.nav-links .dd-intro a.dd-foot{margin:auto 0 0;padding:0;border:0;color:var(--ink);justify-content:flex-start;gap:8px;font-weight:650}
.nav-links .dd-intro a.dd-foot span{color:var(--red)}
.dd-grid{padding:18px;gap:6px;align-content:start}
.nav-links a.dd-item{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:14px;border-radius:var(--r-sm)}
.nav-links a.dd-item b{color:var(--ink);font-size:1rem}
.nav-links a.dd-item span:not(.di){color:var(--ink-soft);font-size:.9rem}
.nav-links a.dd-item:hover,.nav-links a.dd-item:focus-visible{background:var(--paper)}
.dd-item .di{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--red-tint);color:var(--red)}
.dd-item .di svg{width:22px;height:22px}
@media (max-width:820px){
  .nav-links{justify-content:flex-start}
  .nav-links>.btn{position:static;transform:none;margin-top:18px}
  .dd-panel,.dd-panel.dd-narrow{display:none;grid-template-columns:1fr;background:none;box-shadow:none;border-radius:0;width:100%}
  .dd.open .dd-panel{display:block}
  .dd-intro{display:none}
  .dd-grid{padding:0 0 12px}
  .nav-links a.dd-item{grid-template-columns:36px 1fr;border-left:0;padding:10px 0}
  .nav-links a.dd-item b{color:var(--white)}
  .nav-links a.dd-item span:not(.di){color:var(--dim)}
  .dd-item .di{width:36px;height:36px;border-radius:10px;background:rgba(229,72,77,.14);color:var(--red-bright)}
  .nav-links a.dd-item:hover{background:none}
}

/* ---------- hero ---------- */
.hero2::before{background:linear-gradient(90deg,rgba(14,16,20,.96) 0%,rgba(14,16,20,.85) 28%,rgba(14,16,20,.2) 46%,transparent 58%),linear-gradient(0deg,var(--base) 0%,transparent 16%),linear-gradient(180deg,rgba(14,16,20,.7) 0%,transparent 16%)}
.hero2 .film-pause{position:absolute;right:max(20px,calc((100vw - 1180px)/2));bottom:36px;top:auto}
@media (max-width:1100px){.hero2 .film-pause{position:absolute;right:16px;bottom:16px}.hero2-media{aspect-ratio:960/855}.hero2-vid{left:0;top:0;width:100%;height:100%;object-fit:cover}}

/* ---------- bullets, not lines ---------- */
.dots{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.dots li{position:relative;padding-left:22px;line-height:1.45}
.dots li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--red)}
.built2 li::before,.ai-card li::before{width:8px;height:8px;flex:0 0 8px;border-radius:50%;transform:none;margin-top:.5em;align-self:flex-start}
.built2 li,.ai-card li{align-items:flex-start}
.checks li::before,.how-step .get li::before{border:0;width:18px;height:18px;flex:0 0 18px;border-radius:50%;transform:none;margin-top:.15em;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.checks li,.how-step .get li{align-items:flex-start}

/* ---------- tools ---------- */
.flow-sec{padding:110px 0 30px}
.toolflow{height:clamp(340px,38vw,500px)}

/* ---------- Sound familiar: rounded picture cards on paper ---------- */
.pains{gap:22px}
.pain{background:var(--card);border:1px solid var(--ink-line);border-radius:var(--r-lg);box-shadow:0 1px 0 rgba(0,0,0,.02),0 20px 40px -28px rgba(20,24,32,.25)}
.pain .pic{background:var(--stone);border-bottom:0;margin:10px 10px 0;border-radius:calc(var(--r-lg) - 8px)}
.pain .kicker{margin:0;color:var(--red)}
.pain h3{color:var(--ink)}
.pain p{color:var(--ink-soft)}
.pain .go{color:var(--ink)}
.pain .go span{color:var(--red)}
@media (hover:hover) and (pointer:fine){.pain:hover{border-color:#cfc9bf;box-shadow:0 30px 60px -30px rgba(20,24,32,.35)}}

/* ---------- How it works: four cards with pictures ---------- */
.how3{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;counter-reset:st}
.how3 .card{background:var(--paper);border-radius:var(--r-lg);padding:26px 24px 28px;display:flex;flex-direction:column;position:relative}
.how3 .ill{height:150px;border-radius:var(--r-md);background:var(--card);display:grid;place-items:center;margin-bottom:22px;overflow:hidden}
.how3 .ill svg{width:100%;height:100%}
.how3 .n{font-size:.88rem;font-weight:700;color:var(--red)}
.how3 h3{font-size:1.5rem;margin-top:4px;color:var(--ink)}
.how3 .when{font-size:.95rem;color:var(--ink);font-weight:600;margin-top:2px}
.how3 p.body{margin-top:12px;font-size:1rem;color:var(--ink-soft)}
.how3 .dots{margin-top:16px}
.how3 .dots li{color:var(--ink);font-size:.96rem}
.how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.how-head .lede{max-width:46ch;margin-top:14px}
@media (max-width:1100px){.how3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.how3{grid-template-columns:1fr}}

/* ---------- case studies ---------- */
.cases{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:44px}
.case-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,transform .4s var(--ease)}
.case-card .media{aspect-ratio:16/9;background:#000;overflow:hidden}
.case-card .media img,.case-card .media video{width:100%;height:100%;object-fit:cover}
.case-card .txt{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.case-card .who{font-size:.92rem;color:var(--red-bright);font-weight:650}
.case-card h3{font-size:clamp(1.35rem,2vw,1.75rem);margin-top:8px;line-height:1.15}
.case-card p{margin-top:12px;color:var(--dim)}
.case-card .stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px}
.case-card .stats b{display:block;font-size:1.5rem;color:#fff;letter-spacing:-.02em}
.case-card .stats span{font-size:.9rem;color:var(--dim)}
.case-card .go{margin-top:auto;padding-top:22px;color:#fff;font-weight:600;display:flex;gap:8px;align-items:center}
.case-card .go span{color:var(--red-bright);transition:transform .25s var(--ease)}
.cases .side{display:grid;gap:22px}
.cases .side .case-card{flex-direction:row}
.cases .side .media{aspect-ratio:auto;width:42%;flex:none}
.cases .side .txt{padding:22px}
@media (hover:hover) and (pointer:fine){.case-card:hover{border-color:var(--line-2);transform:translateY(-4px)}.case-card:hover .go span{transform:translateX(4px)}}
@media (max-width:980px){.cases{grid-template-columns:1fr}}
@media (max-width:560px){.cases .side .case-card{flex-direction:column}.cases .side .media{width:100%;aspect-ratio:16/9}}

/* ---------- what we can build ---------- */
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.build{background:var(--card);border:1px solid var(--ink-line);border-radius:var(--r-md);padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px}
.build .bi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--red-tint);color:var(--red);margin-bottom:10px}
.build .bi svg{width:24px;height:24px}
.build b{font-size:1.1rem;color:var(--ink)}
.build p{font-size:.97rem;color:var(--ink-soft)}
.build .tag2{margin-top:8px;font-size:.85rem;color:var(--ink);font-weight:600}
@media (max-width:980px){.build-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.build-grid{grid-template-columns:1fr}}

/* ---------- insights cards ---------- */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.ins{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-lg);padding:26px;min-height:260px;transition:transform .4s var(--ease),box-shadow .3s}
.ins .topic{font-size:.88rem;font-weight:650;color:var(--red)}
.ins h3{font-size:1.3rem;margin-top:10px;line-height:1.2;color:var(--ink)}
.ins p{margin-top:10px;font-size:.98rem;color:var(--ink-soft)}
.ins .meta{margin-top:auto;padding-top:18px;font-size:.9rem;color:var(--ink);font-weight:550}
@media (hover:hover) and (pointer:fine){.ins:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,24,32,.35)}}
@media (max-width:980px){.ins-grid{grid-template-columns:1fr}}

/* ---------- founders, CTA ---------- */
.founders .person img{border-radius:var(--r-lg)}
.cta{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.cta::after{opacity:.05}
.cta p{color:var(--text)}

/* ---------- section rhythm ---------- */
section.sec-paper,section.sec-white,section.sec-dark{padding:110px 0}
@media (max-width:720px){section.sec-paper,section.sec-white,section.sec-dark{padding:80px 0}}
footer{margin-top:0;background:#0b0c0f}

/* ---------- start page: the calendar sits on light paper so Google's white blends in ---------- */
.book2 .h1{color:var(--ink)}
.book2 .sub{color:var(--ink-soft)}
.book2 .cal-frame{border-color:var(--ink-line);box-shadow:0 30px 60px -40px rgba(20,24,32,.4)}
.book2 .alt a{background:var(--card);border-color:var(--ink-line)}
.book2 .alt b{color:var(--ink)}
.book2 .alt span span{color:var(--ink-soft)}
.book2 .alt .ic{background:var(--red-tint);color:var(--red)}
.book2 .alt .faces{color:var(--ink-soft)}
.book2 .alt .faces img{border-color:var(--paper)}
.book2{padding-top:120px}

/* ---------- page heads and articles ---------- */
.page-head.sec-dark{padding:120px 0 90px;background:var(--base)}
.page-head .kicker{display:block}
.ins-grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.ins-grid.two{grid-template-columns:1fr}}
.art-shell{max-width:760px}
.art-head .h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08}
.art-head .lede{max-width:56ch;margin-top:18px}
.art-head .back{display:inline-block;margin-bottom:26px;color:var(--text);font-weight:600}
.byline{margin-top:22px;color:var(--dim);font-size:.95rem}
.prose{color:var(--ink-soft);font-size:1.12rem;line-height:1.7}
.prose h2{font-size:1.6rem;color:var(--ink);margin:44px 0 12px;letter-spacing:-.02em;line-height:1.2}
.prose h3{font-size:1.2rem;color:var(--ink);margin:28px 0 8px}
.prose p+p{margin-top:16px}
.prose ul,.prose ol{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.prose ul li{position:relative;padding-left:24px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--red)}
.prose ol{counter-reset:o}
.prose ol li{position:relative;padding-left:38px;counter-increment:o}
.prose ol li::before{content:counter(o);position:absolute;left:0;top:.15em;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:.85rem;font-weight:700;display:grid;place-items:center}
.prose b,.prose strong{color:var(--ink)}
.prose .callout{margin:32px 0;padding:24px 26px;background:var(--paper);border-radius:var(--r-md)}
.prose .callout b{display:block;font-size:1.1rem;margin-bottom:6px}
.art-cta{margin-top:56px;padding:30px;border-radius:var(--r-lg);background:var(--ink);color:var(--text)}
.art-cta b{display:block;color:#fff;font-size:1.3rem}
.art-cta p{color:var(--text);margin:8px 0 20px}
.center-cta{text-align:center}
.center-cta .lede{margin:20px auto 0;text-align:center}
.center-cta .hero-cta{justify-content:center}
.cases .side .case-card{flex-direction:column}
.cases .side .media{width:100%;aspect-ratio:16/7}
.cases .side .txt{padding:22px 24px 24px}
.sec-paper .person .nm{color:var(--ink)}
.sec-paper .person .rl{color:var(--ink-soft)}
.sec-paper .person .li{color:var(--ink);border-color:var(--ink-line)}
.foot .tag{color:var(--text)}

/* ---------- case studies page ---------- */
.cs-index{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.cs-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:transform .35s var(--ease),border-color .3s}
.cs-card .m{aspect-ratio:16/9;overflow:hidden;background:#000}
.cs-card .m img{width:100%;height:100%;object-fit:cover}
.cs-card .t{padding:16px 18px 18px}
.cs-card .kicker{margin:0 0 4px;font-size:.84rem}
.cs-card b{display:block;color:#fff;font-size:1.02rem;line-height:1.3}
@media (hover:hover) and (pointer:fine){.cs-card:hover{transform:translateY(-3px);border-color:var(--line-2)}}
@media (max-width:900px){.cs-index{grid-template-columns:1fr 1fr}}
.cs{scroll-margin-top:72px}
.cs-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.cs.flip .cs-media{order:-1}
.cs-media{position:sticky;top:110px}
.cs-media video,.cs-media .shot{border-radius:var(--r-lg);overflow:hidden;display:block;width:100%;box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.cs-media .ba{border-radius:var(--r-lg)}
.cs .h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.cs .lede{margin-top:16px;max-width:52ch}
.cs-status{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:600;font-size:.98rem}
.cs-status span{width:10px;height:10px;border-radius:50%;background:#2fbf71;box-shadow:0 0 0 4px rgba(47,191,113,.18)}
.sec-white .cs-status,.sec-paper .cs-status{color:var(--ink)}
.cs-part{margin-top:26px}
.cs-part h3{font-size:1.1rem}
.cs-part .dots{margin-top:12px}
.sec-dark .cs-part li{color:var(--text)}
.cs-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--ink-line)}
.sec-dark .cs-stats{border-color:var(--line)}
.cs-stats b{display:block;font-size:1.8rem;letter-spacing:-.03em}
.cs-stats span{font-size:.95rem}
.cs-more-head .lede{margin-top:14px}
.cs-more{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.cs-mini{background:var(--paper);border-radius:var(--r-lg);padding:12px 12px 24px}
.cs-mini .m{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:#000;margin-bottom:18px}
.cs-mini .m video{width:100%;height:100%;object-fit:cover}
.cs-mini .mstat{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:22px;background:var(--ink)}
.cs-mini .mstat b{color:#fff;font-size:2rem;letter-spacing:-.03em}
.cs-mini .mstat span{color:var(--text)}
.cs-mini .kicker,.cs-mini h3,.cs-mini p{margin-left:12px;margin-right:12px}
.cs-mini .kicker{margin-bottom:6px}
.cs-mini h3{font-size:1.15rem}
.cs-mini p{font-size:.97rem;margin-top:8px}
@media (max-width:1100px){.cs-more{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.cs-grid{grid-template-columns:1fr;gap:36px}.cs.flip .cs-media{order:0}.cs-media{position:static}}
@media (max-width:560px){.cs-more,.cs-index{grid-template-columns:1fr}}
.cs-status.soon span{background:#e0a33a;box-shadow:0 0 0 4px rgba(224,163,58,.2)}

/* ---------- light context fixes for older components ---------- */
.sec-white .checks li,.sec-paper .checks li,.sec-white .ways2 p,.sec-paper .ways2 p,.sec-white .who span,.sec-paper .who span,.sec-paper .faq2 details p,.sec-white .faq2 details p{color:var(--ink-soft)}
.sec-white .svc3-copy p,.sec-paper .svc3-copy p{color:var(--ink-soft)}
.sec-white .svc3-copy .like,.sec-paper .svc3-copy .like{color:var(--ink);background:var(--red-tint);border-left:0;border-radius:var(--r-md);padding:20px 22px}
.sec-white .svc3-copy .result span,.sec-paper .svc3-copy .result span{color:var(--ink-soft)}
.sec-white .svc3-more,.sec-paper .svc3-more{border-color:var(--ink-line)}
.sec-white .uses span,.sec-paper .uses span{color:var(--ink)}
.sec-white .film,.sec-paper .film{border:0;border-radius:var(--r-lg);box-shadow:0 40px 80px -40px rgba(20,24,32,.5)}
.svc3{border-bottom:0}
.sec-paper .ways2,.sec-white .ways2,.sec-paper .ways2>div,.sec-white .ways2>div{border-color:var(--ink-line)}
.sec-paper .ways2 h3,.sec-white .ways2 h3{color:var(--ink)}
.sec-white .who li,.sec-paper .who li{background:var(--paper);border:0;border-radius:var(--r-md)}
.sec-paper .who li{background:var(--card)}
.sec-paper .faq2 details,.sec-white .faq2 details{border-color:var(--ink-line)}
.sec-paper .faq2 summary,.sec-white .faq2 summary{color:var(--ink)}
.sec-paper .promise b,.sec-white .promise b{color:var(--ink)}
.svc-head{padding:120px 0 80px}
.svc-head .promise span{color:var(--text)}
.svc-tabs{background:rgba(14,16,20,.92)}
.ai-card{border-radius:var(--r-lg)}
.ai-card::before{display:none}
.ai-card .ic{background:rgba(229,72,77,.16);color:var(--red-bright)}
/* about on light */
.sec-paper .tl h3,.sec-white .tl h3,.sec-white .bio h3,.sec-paper .believe h3{color:var(--ink)}
.sec-paper .tl p,.sec-white .bio p,.sec-paper .tl .when{color:var(--ink-soft)}
.sec-paper .tl li.now .when{color:var(--red)}
.sec-paper .why,.sec-white .why{background:var(--ink);border-radius:var(--r-lg)}
.sec-paper .why h2,.sec-paper .why b{color:#fff}
.sec-paper .why p,.sec-paper .why li{color:var(--text)}
.sec-white .bio .li{color:var(--ink);border-color:var(--ink-line)}
/* start */
.msg2.sec-dark{padding:100px 0}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec-white .svc3-top .promise-line,.sec-paper .svc3-top .promise-line{color:var(--ink-soft)}
.sec-white .svc3-copy .like b,.sec-paper .svc3-copy .like b,.sec-white .svc3-copy .result b,.sec-paper .svc3-copy .result b,.sec-white .svc3-more h3,.sec-paper .svc3-more h3{color:var(--ink)}
.sec-white .svc3-copy .like,.sec-paper .svc3-copy .like{color:var(--ink-soft)}
.lab-strip{padding:0 0 110px}
.strip{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.strip figure{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11}
.strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.strip{grid-template-columns:1fr 1fr}.strip figure:first-child{grid-column:1/-1}}
.nav-links a.dd-item .di{display:grid;margin:0;color:var(--red);font-size:inherit}
@media (max-width:820px){.nav-links a.dd-item .di{color:var(--red-bright);background:rgba(229,72,77,.16)}}
.pain .pic{background:var(--paper)}

/* ---------- deep review 1 ---------- */
/* buttons and small red text that pass contrast; bright red stays for accents on dark */
.btn-red{background:#c9343a}
@media (hover:hover) and (pointer:fine){.btn-red:hover{background:#b8333a}}
.sec-paper .kicker,.sec-white .kicker,.ins .topic,.how3 .n,.pain .kicker,.sec-paper .tl li.now .when,.sec-paper .pn,.sec-white .pn,.build .bi,.dd-item .di{color:#b8333a}
.sec-paper .faq2 summary::after,.sec-white .faq2 summary::after{background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat}
.sec-paper :focus-visible,.sec-white :focus-visible{outline-color:var(--ink)}
/* about: founder cards light; timeline tail matches paper */
.sec-white .bio{background:var(--paper);border:0;border-radius:var(--r-lg)}
.sec-white .bio .rl,.sec-white .facts-list dt,.sec-white .facts-list dd{color:var(--ink-soft)}
.sec-white .facts-list,.sec-white .facts-list>div{border-color:var(--ink-line)}
.sec-white .facts-list dd a{color:var(--ink);border-color:var(--ink-line)}
.sec-paper .tl li:last-child::after{background:var(--paper)}
.tl li.now::before{box-shadow:0 0 0 5px rgba(229,72,77,.2)}
/* case card client line was picking up the services list style */
.case-card .who{display:block;margin:0}
.cases{align-items:start}
/* nav: links truly centred on the page; tighter mobile menu */
@media (min-width:821px){.nav-links{position:absolute;inset:0;pointer-events:none}.nav-links>*{pointer-events:auto}}
@media (max-width:820px){.nav-links{gap:0}}
.nav-links a.dd-item{align-content:start}
.nav-links .dd-intro a.dd-foot{margin-top:18px}
/* lines into rounded cards */
.promise li{border-left:0;padding:18px 20px;border-radius:var(--r-md);background:rgba(255,255,255,.06)}
.promise{border-top:0;padding-top:0}
.sec-paper .ways2,.sec-white .ways2{border-top:0;gap:14px}
.sec-paper .ways2>div,.sec-white .ways2>div{border:0;margin:0;padding:22px;border-radius:var(--r-md);background:var(--card)}
.sec-white .ways2>div{background:var(--paper)}
.svc3-more,.cs-stats{border-top:0}
.svc3-copy .result>div{background:var(--paper);border-radius:var(--r-md);padding:16px 18px}
.sec-paper .svc3-copy .result>div{background:var(--card)}
@media (min-width:1201px){.svc3-copy .result{grid-template-columns:1fr}}
.believe>div,.believe .item{border-top:0}
.sec-paper .believe>div{background:var(--card);border-radius:var(--r-md);padding:22px}
.why-pts li::before{width:8px!important;height:8px!important;border-radius:50%;background:var(--red-bright)!important}
/* radii */
.bio,.cform,.cal-frame,.laptop,.shot,.case-vid,.ba{border-radius:var(--r-lg)}
.alt a,.sec-white .who li,.sec-paper .who li{border-radius:var(--r-md)}
/* images */
.case-card .media img,.cs-card .m img{object-position:top}
.strip figure{aspect-ratio:auto;height:clamp(200px,24vw,320px)}
.ba .tag,.ba .tag.l,.ba .tag.r{top:auto;bottom:14px;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:999px;text-shadow:none}
/* text balance */
.center-cta .lede,.h2,.alt span span,.big-title{text-wrap:balance}
/* dark sections that sat next to each other */
.flow-sec{background:var(--surface)}
/* light message form, privacy */
.msg2.sec-paper .cform{background:var(--card);border-color:var(--ink-line)}
.msg2.sec-paper .cform label,.msg2.sec-paper .cform legend{color:var(--ink)}
.msg2.sec-paper .cform input:not([type=radio]),.msg2.sec-paper .cform textarea{background:var(--paper);border-color:var(--ink-line);color:var(--ink)}
.msg2.sec-paper .h2{color:var(--ink)}
.msg2 .shell{display:grid;grid-template-columns:1fr;justify-items:start}
.sec-paper .legal-body h2{color:var(--ink)}
.sec-paper .legal-body p,.sec-paper .legal-body li{color:var(--ink-soft)}
.sec-paper .legal-body>div{border-color:var(--ink-line)}
.page-head.sec-paper .h1{color:var(--ink)}
.page-head.sec-paper .lede{color:var(--ink-soft)}
.toolflow .hub-ring{transform-origin:600px 230px;stroke:rgba(229,72,77,.35)}
/* services: how we approach it / what you get */
.svc-approach{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:48px}
.svc-approach>div{background:var(--paper);border-radius:var(--r-lg);padding:28px 30px}
.sec-paper .svc-approach>div{background:var(--card)}
.svc-approach h3{font-size:1.15rem;color:var(--ink);margin-bottom:18px}
.ap-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:ap}
.ap-steps li{counter-increment:ap;display:flex;flex-direction:column;gap:6px}
.ap-steps li::before{content:counter(ap);width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem;margin-bottom:6px}
.ap-steps b{color:var(--ink);font-size:1.02rem}
.ap-steps span{color:var(--ink-soft);font-size:.96rem;line-height:1.45}
.checks.one{grid-template-columns:1fr}
@media (max-width:1100px){.svc-approach{grid-template-columns:1fr}}
@media (max-width:640px){.ap-steps{grid-template-columns:1fr}}

/* ---------- deep review 4: phones, accessibility ---------- */
.sec-paper .btn-ghost,.sec-white .btn-ghost{color:var(--ink);border-color:rgba(18,21,27,.28)}
.sec-paper .h1 .soft,.sec-white .h1 .soft{color:#6b7280}
.sec-paper .legal-body a{color:var(--ink);border-bottom-color:var(--ink-line)}
.cform input:not([type=radio]),.cform textarea{font-size:16px}
.msg2.sec-paper .cform input:not([type=radio]),.msg2.sec-paper .cform textarea{border-color:#a8a29a}
.msg2.sec-paper .cform [aria-invalid="true"]{border-color:var(--red-deep);box-shadow:0 0 0 1px var(--red-deep)}
.msg2.sec-paper .cform input:not([type=radio]):focus,.msg2.sec-paper .cform textarea:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink);outline:0}
.sec-paper .pref input:focus-visible,.sec-white .pref input:focus-visible{outline-color:var(--ink)}
@media (max-width:820px){.top:has(.nav-links.open){background:var(--base)}}
.svc-tabs{transition:transform .35s var(--ease),opacity .25s}
.svc-tabs.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
@media (pointer:coarse){.foot a,.legal a,.facts-list dd a,.art-head .back,.sec-head .link{display:inline-block;padding-block:10px}.hero2 .film-pause{width:44px;height:44px}.pref label{padding:9px 0}.person .li,.bio .li{padding-block:10px}}
@media (pointer:coarse) and (min-width:821px){.nav-links>a:not(.btn),.dd-top{padding-block:10px}}
@media (max-width:600px){.cs-mini .m{aspect-ratio:4/5}.cs-media video{aspect-ratio:4/5;object-fit:cover}}
.person .li,.tl .when,.eyebrow{font-size:.85rem}
.prose p,.prose li,.svc3-copy p{max-width:68ch}
.js [data-rv]:focus-within{opacity:1;transform:none}
.ba input{touch-action:pan-y}
@media (max-width:720px){.toolflow{height:380px}}
.cal-help{margin-top:12px;color:var(--ink-soft);font-size:.95rem}.cal-help a{color:var(--ink);border-bottom:1px solid var(--ink-line)}

/* ---------- deep review 5 ---------- */
.top{background:rgba(14,16,20,.97)}
.svc-tabs{background:rgba(14,16,20,.97)}
/* closing calls on light smoke so pages don't open and close black */
.cta-light .big-title{color:var(--ink)}
.cta-light .big-title .soft{color:var(--ink-soft)}
.cta-light .lede{color:var(--ink-soft)}
.cta-light .btn-ghost{color:var(--ink);border-color:rgba(18,21,27,.22);background:rgba(255,255,255,.5)}
.cta-light .btn-ghost:hover{border-color:var(--ink)}
/* FAQ: rounded cards instead of hairlines */
.faq2{max-width:none}
.faq2 details{background:var(--surface);border:0;border-radius:var(--r-md);padding:0 26px;margin-bottom:12px}
.sec-paper .faq2 details{background:var(--card)}
.sec-white .faq2 details{background:var(--paper)}
.faq2 summary{padding:22px 0}
.faq2 details p{padding:0 0 22px}
/* case study index: five across on wide screens */
@media (min-width:1200px){.cs-index{grid-template-columns:repeat(5,1fr)}}
/* stat tile: light card, big ink number */
.cs-mini .mstat{background:var(--card)}
.cs-mini .mstat b{color:var(--ink);font-size:3rem}
.cs-mini .mstat span{color:var(--ink-soft)}
/* tools flow: fade the edges so cut-off pills read as "more beyond" */
.flow-sec svg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* services tab bar on phones: fade the edges to hint it scrolls */
@media (max-width:900px){.svc-tabs .shell,.svc-tabs-in{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 28px),transparent)}}
/* booking: calendar first on phones, and a soft placeholder while it loads */
@media (max-width:900px){.book2-grid .cal-col{order:-1}}
.book2 .cal-frame{background:var(--paper);min-height:560px}

/* ---------- deep review 6 ---------- */
.svc3{scroll-margin-top:24px}
/* phones: the case-study index becomes a swipeable strip instead of five stacked cards */
@media (max-width:600px){
  .cs-index{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:28px -16px 0;padding:0 16px 6px;scrollbar-width:none}
  .cs-index::-webkit-scrollbar{display:none}
  .cs-index>*{flex:0 0 72%;scroll-snap-align:start}
  .cs-mini .m.mstat{aspect-ratio:auto;min-height:0;padding:20px 22px}
}
/* LabelBot: keep the clip beside the long story on wide screens */
@media (min-width:1000px){#labelbot .cs-media{position:sticky;top:96px;align-self:start}}

/* ---------- round 4 ---------- */
/* phones: all five service tabs fit on screen (no hidden Consulting tab) */
@media (max-width:600px){
  .svc-tabs .shell{gap:0;justify-content:space-between;-webkit-mask-image:none;mask-image:none;padding-right:16px}
  .svc-tabs a{font-size:.8rem;padding:16px 0 14px}
  .svc-tabs a span{display:none}
}

/* round 4: dark pages. Two graphite shades alternate; red is the accent; white only for type and pictures */
section.sec-dark{background:var(--base);color:var(--text)}
section.sec-dark.sec-alt{background:var(--surface)}
.flow-sec{background:#121419}

/* round 4 tokens: the "light" tokens now resolve to graphite, so every card and panel goes dark */
:root{
  --paper:#1b1f26; --stone:#232832; --card:#1f232b; --ink:#f3f4f7; --ink-soft:#b6bcc7; --ink-line:#2e333d;
  --red-tint:rgba(229,72,77,.14); --dim:#c3c8d1;
}
section.sec-dark.sec-alt{--card:#262a33;--paper:#22262e}
.dd-panel,.dd-panel.dd-narrow{background:#171a20;box-shadow:0 40px 90px -20px rgba(0,0,0,.8),0 0 0 1px #2a2f38}
.dd-intro{background:#1f232b}
.nav-links a.dd-item:hover,.nav-links a.dd-item:focus-visible{background:#22262e}

/* round 4: About */
.about-head{padding:150px 0 110px}
.about-head .h1{font-size:clamp(3rem,7vw,6.2rem);line-height:.98}
.about-head .lede{max-width:640px;margin-top:22px;font-size:1.22rem;color:var(--text)}
.about-faces{display:flex;align-items:center;gap:0;margin-top:34px;color:var(--dim);font-size:.95rem;line-height:1.35}
.about-faces img{width:52px;height:52px;border-radius:50%;border:3px solid var(--base);object-fit:cover}
.about-faces img+img{margin-left:-14px}
.about-faces span{margin-left:16px}.about-faces b{color:#fff;font-weight:600}
.story2 .ch{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:44px 0;border-top:1px solid var(--line)}
.story2 .ch:first-of-type{margin-top:40px}
.ch-when{display:flex;flex-direction:column;gap:8px;color:var(--dim);font-size:.95rem;font-weight:600}
.ch-n{font-size:3.4rem;line-height:1;font-weight:800;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28)}
.ch.now .ch-n{-webkit-text-stroke:0;color:var(--red)}
.ch-body{max-width:720px}
.ch-body h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;margin:0 0 14px;color:#fff}
.ch-body p{font-size:1.1rem;line-height:1.7;color:var(--text);margin:0 0 14px}
.ch-body p b{color:#fff}
.ch-body blockquote{margin:26px 0;padding:22px 26px;border-radius:var(--r-md);background:rgba(229,72,77,.1);border-left:3px solid var(--red);font-size:1.35rem;line-height:1.4;font-weight:650;color:#fff;letter-spacing:-.015em}
.ch-body blockquote cite{display:block;margin-top:10px;font-size:.9rem;font-weight:500;font-style:normal;color:var(--dim)}
.moves{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:none}
.moves li{background:var(--surface);border-radius:var(--r-lg);padding:28px 26px 30px}
.moves .pn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(229,72,77,.14);color:var(--red-bright);font-weight:700;font-size:.9rem;margin-bottom:18px}
.moves h3{font-size:1.25rem;margin:0 0 8px;color:#fff;letter-spacing:-.015em}
.moves p{margin:0;color:var(--dim);line-height:1.6}
.believe{grid-template-columns:repeat(3,1fr)!important}
@media (max-width:900px){.moves,.believe{grid-template-columns:1fr 1fr!important}.story2 .ch{grid-template-columns:1fr;gap:14px}.ch-when{flex-direction:row;align-items:baseline;gap:14px}.ch-n{font-size:2.4rem}}
@media (max-width:600px){.moves,.believe{grid-template-columns:1fr!important}.about-head{padding:120px 0 80px}}

/* films always loop: no native play overlay or controls */
video::-webkit-media-controls,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
video{pointer-events:none}

/* round 5: no scroll animations anywhere */
.rv,.rv-k,[data-rv],.zoom-in{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.hero2-copy{transform:none!important;opacity:1!important}.hero2-vid{transform:none!important}

/* round 4b: the hero film fills the whole first screen on every device */
.hero2{min-height:100vh;min-height:100svh}
.hero2-vid{object-fit:cover;object-position:center}
.hero2::before{background:linear-gradient(90deg,rgba(14,16,20,.9) 0%,rgba(14,16,20,.72) 30%,rgba(14,16,20,.2) 50%,transparent 64%),linear-gradient(0deg,var(--base) 0%,transparent 14%),linear-gradient(180deg,rgba(14,16,20,.55) 0%,transparent 14%)}
.hero2 h1,.hero2 .lede{text-shadow:0 2px 24px rgba(0,0,0,.55)}
@media (max-width:1100px){
  .hero2{display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;padding-top:72px}
  .hero2::before{display:block;background:linear-gradient(0deg,rgba(14,16,20,.97) 0%,rgba(14,16,20,.85) 30%,rgba(14,16,20,.2) 55%,transparent 70%),linear-gradient(180deg,rgba(14,16,20,.6) 0%,transparent 14%)}
  .hero2-media{position:absolute;inset:0;order:0;width:auto;aspect-ratio:auto;z-index:-2;-webkit-mask-image:none;mask-image:none}
  .hero2-vid{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none}
  .hero2-in{padding:0 0 44px;order:1}
}