/* ================= Chatty Sharma — site styles ================= */
:root{
  --ink:#121413; --ink-2:#2B2F2D; --muted:#5A605C;
  --cream:#F6F1E7; --paper:#FFFDF8;
  --green:#0F4D3A; --green-2:#1E6B52; --mint:#BFE8D2;
  --tang:#FF7A3D; --tang-dark:#C24A12; --butter:#FFE9A8;
  --radius:22px;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:Inter, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--tang);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* type */
.display{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.4vw,88px);line-height:.98;letter-spacing:-.035em;margin:0}
.display-sm{font-size:clamp(38px,5vw,68px)}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.03em;margin:0}
.h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.02em;margin:6px 0 14px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:560px;margin:22px 0 0}
.lead-light{color:#D9E7DF}
.mono-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.hl{background:linear-gradient(transparent 62%, var(--tang) 62% 92%, transparent 92%);padding:0 .06em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent;transition:transform .15s ease, background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#000;color:#fff}
.btn-sm{min-height:42px;padding:8px 18px;font-size:15px}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-ghost-light{border-color:rgba(246,241,231,.45);color:var(--cream)}
.btn-ghost-light:hover{border-color:var(--cream)}
.link-btn{background:none;border:0;padding:8px 0;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--tang)}
.link-btn:hover{color:var(--tang-dark)}

/* top bar */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 28px;transition:background .3s, box-shadow .3s}
.topbar.scrolled{background:rgba(246,241,231,.86);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--green);color:var(--cream);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px}
.brand-name{font-family:var(--display);font-weight:700;font-size:18px}
.topnav{display:flex;align-items:center;gap:26px;font-weight:500}
.topnav a:not(.btn){text-decoration:none}
.topnav a:not(.btn):hover{color:var(--tang-dark)}

/* side dots */
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px}
.dots a{position:relative;display:block;width:12px;height:12px;border-radius:99px;background:rgba(18,20,19,.22);transition:transform .2s, background .2s}
.dots a span{position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:13px;font-weight:600;background:var(--ink);color:var(--cream);padding:4px 10px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s}
.dots a:hover span,.dots a:focus-visible span{opacity:1}
.dots a.active{background:var(--tang);transform:scale(1.35)}
.dots.on-dark a{background:rgba(246,241,231,.35)}
.dots.on-dark a.active{background:var(--tang)}

/* scenes */
.scene{position:relative;padding:120px 0}
.chatty{user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 24px 30px rgba(0,0,0,.18))}
.float{animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pop{animation:popin .9s cubic-bezier(.2,1.4,.4,1) both, float 5s ease-in-out .9s infinite}
@keyframes popin{from{opacity:0;transform:scale(.7) translateY(40px)}to{opacity:1;transform:none}}
.chatty:hover{animation-play-state:paused;transform:rotate(-3deg) scale(1.03);transition:transform .25s}

/* speech bubbles */
.bubble{position:relative;display:inline-block;background:var(--paper);color:var(--ink);font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,22px);padding:14px 20px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);min-height:1.6em}
.bubble::after{content:"";position:absolute;width:18px;height:18px;background:inherit;transform:rotate(45deg)}
.bubble-hero{position:absolute;top:0;left:-6%;z-index:3;white-space:nowrap;animation:popin .7s .3s cubic-bezier(.2,1.4,.4,1) both}
.bubble-hero::after{right:38px;bottom:-8px}
.hello-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.type::after{content:"";display:inline-block;width:2px;height:1em;background:var(--tang);margin-left:3px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.type.done::after{display:none}
@keyframes blink{50%{opacity:0}}

/* ---------- HELLO ---------- */
.scene-hello{min-height:100vh;padding:84px 0 28px;background:radial-gradient(1200px 600px at 80% 20%, #FFF6DC 0%, var(--cream) 60%);display:flex;flex-direction:column;justify-content:center}
.hello-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hello-stage{position:relative;display:grid;place-items:center;padding-top:64px}
.hello-stage .chatty{position:relative;width:auto;height:min(46vh,470px);max-width:100%;object-fit:contain;z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(2px)}
.blob-green{width:78%;aspect-ratio:1;background:radial-gradient(circle at 35% 35%, var(--mint), #8FD3B0);bottom:6%;z-index:0}

.ask{margin-top:34px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:18px;max-width:600px;box-shadow:6px 6px 0 var(--ink)}
.ask-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ask-row{display:flex;gap:10px}
.ask-row input{flex:1;min-width:0;min-height:48px;border:1.5px solid #D8D2C4;border-radius:999px;padding:0 18px;font:inherit;font-size:16px;background:#fff}
.ask-row input:focus{outline:none;border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1.5px solid #E2DCCD;background:var(--cream);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;min-height:40px}
.chip:hover{background:var(--butter);border-color:var(--ink)}
.ask-note{margin:12px 2px 0;font-size:14px;color:var(--muted)}

.logos{margin-top:56px}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px}
.logo-row img{height:42px;width:auto;max-width:190px;object-fit:contain;transition:transform .2s}
.logo-row img:hover{transform:scale(1.08)}
.scroll-cue{display:block;width:max-content;margin:44px auto 0;text-decoration:none;font-weight:600;color:var(--ink-2);animation:nudge 2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- PROOF ---------- */
.scene-proof{background:var(--ink);color:var(--cream)}
.proof-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.proof-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.proof-stage .chatty{width:min(100%,330px)}
.bubble-dark{margin-top:-10px;order:-1;margin-bottom:18px}
.bubble-dark::after{left:50%;bottom:-8px;margin-left:-9px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stat{background:#1C1F1E;border:1px solid #2E3331;border-radius:var(--radius);padding:30px 26px}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-.04em;color:var(--butter)}
.stat:nth-child(2) b{color:#9BE3BE}
.stat:nth-child(3) b{color:#FFB08F}
.stat:nth-child(4) b{color:#C9BCFF}
.stat span{display:block;margin-top:12px;color:#C9D1CC;font-size:15.5px}

/* ---------- STORY ---------- */
.scene-story{background:var(--story-bg);transition:background-color .7s ease;padding-bottom:60px}
.story-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:48px}
.story-head .mono-label{width:100%;margin:0}
.story-head .h2{max-width:760px}
.skip{font-weight:600;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px}
.story-stage{position:sticky;top:90px;height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center}
.stage-inner{position:relative;display:flex;flex-direction:column;align-items:center}
.stage-year{position:absolute;top:-6%;left:0;font-family:var(--display);font-weight:800;font-size:clamp(64px,8vw,120px);letter-spacing:-.05em;color:rgba(18,20,19,.09);line-height:1;z-index:0}
.stage-img{position:relative;z-index:1;width:auto;max-height:min(58vh,520px);max-width:100%;transition:opacity .25s, transform .25s}
.stage-img.swap{opacity:0;transform:scale(.88) translateY(20px)}
.bubble-stage{position:relative;z-index:2;margin-top:-6px;text-align:center;max-width:360px}
.bubble-stage::after{left:50%;top:-8px;margin-left:-9px}
.progress{list-style:none;margin:28px 0 0;padding:0;display:flex;justify-content:center;gap:6px}
.progress li{width:28px;height:6px;border-radius:99px;background:rgba(18,20,19,.15);transition:background .3s,width .3s}
.progress li.on{background:var(--ink);width:44px}
.chapters{display:flex;flex-direction:column;gap:22vh;padding:8vh 0 18vh}
.chapter{background:var(--paper);border-radius:var(--radius);padding:34px;box-shadow:0 20px 50px rgba(0,0,0,.07);opacity:.35;transform:translateY(20px);transition:opacity .5s, transform .5s}
.chapter.active{opacity:1;transform:none}
.chapter p{margin:0 0 14px;color:var(--ink-2)}
.ch-when{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important;margin:0!important}
.ch-img{display:none}
.ch-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0 6px}
.ch-stats > span{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;background:var(--cream);border-radius:16px;padding:10px 14px 10px 10px;font-size:14px;line-height:1.3;color:var(--ink-2)}
.ch-stats b{grid-column:2;align-self:end;display:block;font-family:var(--display);font-size:19px;color:var(--ink);letter-spacing:-.01em}
.ch-stats .ico{grid-row:1 / span 2;grid-column:1;width:40px;height:40px;padding:0;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ch, var(--butter));color:var(--ink)}
.ch-stats .ico svg{width:22px;height:22px;display:block;flex:none}
.related{margin-top:22px;padding-top:18px;border-top:1px dashed #DDD5C4}
.related:empty{display:none}
.related-h{font-family:var(--mono);font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)!important;margin:0 0 10px!important}
.rel{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:1.5px solid #E6DFD0;border-radius:16px;padding:12px 16px;margin-top:8px;min-height:56px;transition:background .2s,border-color .2s,transform .2s}
.rel:hover{background:var(--cream);border-color:var(--ink);transform:translateX(3px)}
.rel-dot{flex:none;width:12px;height:36px;border-radius:6px}
.rel-t{flex:1;min-width:0}
.rel-t b{display:block;font-family:var(--display);font-size:16.5px;line-height:1.25;color:var(--ink)}
.rel-t small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.rel-go{font-size:20px;font-weight:700;transition:transform .2s}
.rel:hover .rel-go{transform:translateX(4px)}
.ch-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.chapter .btn{margin-top:10px}
.ch-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ch-cta .btn{margin-top:0}

/* ---------- WORK ---------- */
.scene-work{background:var(--paper)}
.section-head{margin-bottom:28px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.tab{min-height:46px;padding:10px 20px;border-radius:999px;border:2px solid var(--ink);background:transparent;font-weight:600}
.tab[aria-selected="true"]{background:var(--ink);color:var(--cream)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{position:relative;text-align:left;border:0;border-radius:var(--radius);padding:26px;min-height:270px;display:flex;flex-direction:column;gap:10px;color:#fff;background:var(--c);overflow:hidden;transition:transform .2s, box-shadow .2s;animation:cardin .45s ease both}
.card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.card::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12)}
.card .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.card .ttl{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.01em}
.card .res{margin-top:auto;font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.card .res small{display:block;font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;opacity:.9;margin-top:6px}
.card .open{font-weight:600;font-size:14px;opacity:.9}
.card.light{color:var(--ink)}
@keyframes cardin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.toolkit{margin-top:64px}
.tool-row{display:flex;flex-wrap:wrap;gap:10px}
.tool{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:999px;background:var(--cream);font-weight:600;font-size:14.5px;transition:transform .15s}
.tool:hover{transform:translateY(-2px)}
.tool svg{width:22px;height:22px}
.tool .dot{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff}

/* ---------- CREATIVE ---------- */
.scene-creative{background:#FFD3C7}
.creative-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:center}
.creative-stage .chatty{width:min(100%,320px);margin:0 auto}
.video{margin:28px 0 18px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.video-play{position:relative;width:100%;height:100%;border:0;padding:0;background:var(--ink);display:block}
.video-play img{width:100%;height:100%;object-fit:cover;opacity:.85}
.play-icon{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--tang);box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s}
.play-icon::after{content:"";position:absolute;left:31px;top:24px;border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent}
.video-play:hover .play-icon{transform:scale(1.1)}
.video-cap{position:absolute;left:16px;bottom:14px;background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;padding:6px 12px;border-radius:99px}
.video iframe{width:100%;height:100%;border:0;display:block}
.creative-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.clink{display:block;background:var(--paper);border-radius:16px;padding:16px 18px;text-decoration:none;transition:transform .15s}
.clink:hover{transform:translateY(-3px)}
.clink b{display:block;font-family:var(--display);font-size:18px}
.clink span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}

/* ---------- KIND WORDS ---------- */
.scene-words{background:var(--tang);color:var(--ink)}
.scene-words .mono-label{color:var(--ink)}
.quote{margin:0;background:var(--paper);border-radius:28px;padding:clamp(28px,5vw,64px);box-shadow:10px 10px 0 var(--ink)}
.quote blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.18;letter-spacing:-.02em}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:15.5px}
.avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none}
.avatar-initials{display:grid;place-items:center;background:var(--green);color:var(--cream);font-family:var(--display);font-weight:800}

/* ---------- OFF THE CLOCK ---------- */
.scene-off{background:#BFE3FF;overflow:hidden}
.off-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.off-stage .skydive{width:100%;animation:fly 6s ease-in-out infinite}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(10px,-16px) rotate(2deg)}}
.off-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.off-list li{background:var(--paper);border-radius:16px;padding:16px 20px;font-weight:600;font-size:18px;display:flex;gap:14px;align-items:center}
.off-list li span{font-size:24px}

/* ---------- CONTACT ---------- */
.scene-contact{background:var(--green);color:var(--cream);padding-bottom:30px}
.scene-contact .mono-label{color:#A9CBB9}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.contact-links{display:flex;gap:24px;margin-top:22px;font-weight:600}
.contact-links a{text-decoration:none;border-bottom:2px solid rgba(246,241,231,.4)}
.contact-stage .chatty{width:min(100%,360px);margin:0 auto}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:80px;padding-top:22px;border-top:1px solid rgba(246,241,231,.2);font-family:var(--mono);font-size:12.5px;color:#A9CBB9}

/* ---------- PANEL ---------- */
.panel-backdrop{position:fixed;inset:0;background:rgba(18,20,19,.45);z-index:90;opacity:0;transition:opacity .3s}
.panel-backdrop.open{opacity:1}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--paper);z-index:100;overflow-y:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.2)}
.panel.open{transform:none}
.panel-close{position:sticky;top:16px;float:right;margin:16px 16px 0 0;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--cream);font-size:18px;z-index:2}
.panel-hero{padding:56px 36px 32px;color:#fff;background:var(--c)}
.panel-hero.light{color:var(--ink)}
.panel-hero .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.panel-hero h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,38px);line-height:1.08;letter-spacing:-.02em;margin:10px 0 18px}
.panel-hero .big{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1}
.panel-hero .big small{display:block;font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:0;margin-top:6px;opacity:.9}
.panel-sec{padding:26px 36px 0}
.panel-sec h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.panel-sec p,.panel-sec li{color:var(--ink-2);font-size:16px}
.panel-sec ul{margin:0;padding-left:20px;display:grid;gap:8px}
.panel-sec.results li{font-weight:600;color:var(--ink)}
.panel-foot{padding:26px 36px 40px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.panel-foot .tools{font-family:var(--mono);font-size:13px;color:var(--muted);width:100%}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1.2)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .dots{display:none}
  .topnav a:not(.btn){display:none}
  .hello-grid,.proof-grid,.creative-grid,.off-grid,.contact-grid{grid-template-columns:1fr}
  .hello-stage{order:-1}
  .hello-stage .chatty{height:min(40vh,340px)}
  .bubble-hero{position:relative;top:auto;left:auto;margin-bottom:34px;white-space:normal}
  .hello-stage{padding-top:0}
  .hello-stage{display:flex;flex-direction:column;align-items:center}
  .scene{padding:90px 0}
  .story-grid{grid-template-columns:1fr}
  .story-stage{display:none}
  .chapters{gap:28px;padding:0}
  .chapter{opacity:1;transform:none}
  .ch-img{display:block;width:auto;max-height:260px;margin:-10px auto 14px}
  .proof-stage .chatty,.creative-stage .chatty,.contact-stage .chatty{width:min(60%,260px)}
  .creative-links{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .topbar{padding:12px 18px}
  .brand-name{display:none}
  .stats{grid-template-columns:1fr}
  .ask{box-shadow:4px 4px 0 var(--ink)}
  .ask-row{flex-direction:column}
  .chapter{padding:24px}
  .logo-row{gap:18px 28px}
  .logo-row img{height:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- hero proof strip ---------- */
.scene-hello .display{font-size:clamp(40px,min(5.2vw,8.4vh),76px)}
.scene-hello .lead{margin-top:18px}
.hello-ctas{margin-top:26px}
.proofbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:22px;background:var(--ink);border-radius:var(--radius);overflow:hidden}
.pstat{padding:16px 22px;border-right:1px solid #2E3331}
.pstat:last-child{border-right:0}
.pstat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,2.8vw,40px);line-height:1;letter-spacing:-.03em;color:var(--butter)}
.pstat:nth-child(2) b{color:#9BE3BE}.pstat:nth-child(3) b{color:#FFB08F}.pstat:nth-child(4) b{color:#C9BCFF}
.pstat span{display:block;margin-top:8px;font-size:13.5px;line-height:1.35;color:#C9D1CC}
.scene-hello .logos{margin-top:20px;display:flex;align-items:center;gap:14px 32px;flex-wrap:wrap}
.scene-hello .logos .mono-label{margin:0;white-space:nowrap}
.scene-hello .logo-row img{height:34px}
/* ---------- kind words with Chatty ---------- */
.words-grid{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:end}
.words-stage{display:flex;flex-direction:column;align-items:center}
.words-stage .chatty{height:400px;width:auto}
.bubble-words{margin-bottom:14px;text-align:center}
.bubble-words::after{left:50%;bottom:-8px;margin-left:-9px}
@media (max-width:960px){
  .proofbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstat:nth-child(2){border-right:0}
  .pstat:nth-child(-n+2){border-bottom:1px solid #2E3331}
  .words-grid{grid-template-columns:1fr}
  .words-stage{order:-1}
  .words-stage .chatty{height:260px}
}
.scene-hello > .wrap{width:100%}

/* ================= HERO v3: Chatty in the middle, results around him ================= */
.scene-hello{min-height:100vh;padding:78px 0 22px;display:flex;flex-direction:column;justify-content:space-between}
.hero{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.hero-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.hero-bubble{position:relative;margin:0 0 6px;max-width:560px;text-align:center;padding:16px 26px 18px;border-radius:26px;animation:popin .7s .15s cubic-bezier(.2,1.4,.4,1) both}
.hero-bubble::after{left:50%;bottom:-8px;margin-left:-9px}
.hb-small{display:block;font-family:var(--body);font-weight:600;font-size:16px;color:var(--muted);margin-bottom:4px}
.hb-big{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,min(3.2vw,5.2vh),46px);line-height:1.04;letter-spacing:-.03em;color:var(--ink)}
.hero-char{position:relative;display:grid;place-items:center}
.hero-char .blob{width:110%;aspect-ratio:1;bottom:2%}
.hero-char .chatty{position:relative;z-index:1;height:min(50vh,470px);width:auto}
.badges{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.badge{position:absolute;pointer-events:auto;display:grid;grid-template-columns:40px auto;column-gap:12px;align-items:center;background:var(--paper);border-radius:18px;padding:12px 18px 12px 12px;box-shadow:0 14px 34px rgba(18,20,19,.10);max-width:250px;animation:popin .7s cubic-bezier(.2,1.4,.4,1) both, bob 6s ease-in-out infinite;transition:transform .2s}
.badge:hover{transform:scale(1.05) rotate(-1deg)}
.badge .ico{grid-row:1 / span 2;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.badge .ico svg{width:22px;height:22px}
.badge b{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.2vw,32px);line-height:1;letter-spacing:-.03em;align-self:end}
.badge span:not(.ico){font-size:13px;line-height:1.3;color:var(--ink-2);align-self:start;margin-top:3px}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.b1{left:2%;top:14%;animation-delay:.5s,0s}  .b1 .ico{background:#FFE9A8}
.b2{left:6%;top:44%;animation-delay:.65s,1.2s} .b2 .ico{background:#C9F0DA}
.b3{left:1%;top:72%;animation-delay:.8s,2.4s} .b3 .ico{background:#D9F2C9}
.b4{right:2%;top:14%;animation-delay:.6s,.6s} .b4 .ico{background:#FFD9C9}
.b5{right:6%;top:44%;animation-delay:.75s,1.8s} .b5 .ico{background:#E3DBFF}
.b6{right:1%;top:72%;animation-delay:.9s,3s}  .b6 .ico{background:#D6ECFF}
.hero-foot{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:8px}
.hero-foot .logos{margin:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 30px}
.hero-foot .mono-label{margin:0}
.hero-foot .logo-row{justify-content:center}
.hero-foot .logo-row img{height:32px}
.tour-cue{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 22px;border-radius:999px;background:var(--ink);color:var(--cream);font-weight:600;text-decoration:none;animation:nudge 2s ease-in-out infinite}
.tour-cue:hover{background:#000}
@media (max-width:1100px){
  .badge{max-width:210px;padding:10px 14px 10px 10px}
  .b1,.b3{left:0}.b2{left:2%}.b4,.b6{right:0}.b5{right:2%}
}
@media (max-width:860px){
  .scene-hello{padding-top:76px}
  .hero{flex-direction:column}
  .hero-char .chatty{height:min(38vh,320px)}
  .badges{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;width:100%}
  .badge{position:static;max-width:none;animation:popin .7s cubic-bezier(.2,1.4,.4,1) both;padding:10px 12px 10px 10px;grid-template-columns:34px auto;column-gap:10px}
  .badge .ico{width:34px;height:34px}.badge .ico svg{width:18px;height:18px}
  .badge b{font-size:22px}
  .badge span:not(.ico){font-size:12px}
  .hero-foot{margin-top:22px}
  .hero-foot .logo-row img{height:26px}
}

/* clickable hero badges */
button.badge{border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.badge:hover{box-shadow:0 18px 40px rgba(18,20,19,.16)}
.badge .go{position:absolute;top:8px;right:10px;font-style:normal;font-weight:700;font-size:13px;color:var(--muted);opacity:.55;transition:opacity .2s, transform .2s}
.badge:hover .go,.badge:focus-visible .go{opacity:1;transform:translate(2px,-2px);color:var(--tang-dark)}
.badge{padding-right:30px}
.b3 .ico{background:#FFD3C7}.b6 .ico{background:#E3DBFF}.b5 .ico{background:#D6ECFF}
.badge:hover,.badge:focus-visible{animation-play-state:paused}

/* hero pose swap */
#hero-img{transition:opacity .13s ease, transform .13s ease}
#hero-img.swapping{opacity:0;transform:scale(.9) translateY(12px)}
#hero-img.repop{animation:repop .45s cubic-bezier(.2,1.5,.4,1) both, float 5s ease-in-out .45s infinite}
@keyframes repop{from{opacity:.2;transform:scale(.9) translateY(14px)}to{opacity:1;transform:none}}
.hb-small{min-height:1.3em;transition:color .2s}
.hb-small.react{color:var(--tang-dark);font-weight:700}

/* hero bubble: one line, one size */
.hero-bubble{width:min(480px,92vw);max-width:none;padding:16px 24px;min-height:84px;display:flex;align-items:center;justify-content:center}
.hb-line{display:block;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.55vw,22px);line-height:1.3;letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.hb-line.react{color:var(--tang-dark)}
.hb-line .hl{background:linear-gradient(transparent 60%, #FFB08F 60% 92%, transparent 92%)}
.hero-char .blob{display:none}

/* ================= CASE PANEL v2 ================= */
.panel{width:min(680px,100%)}
.panel-close{background:rgba(18,20,19,.85);backdrop-filter:blur(6px)}
.panel-hero{position:relative;display:grid;grid-template-columns:1fr 200px;align-items:end;gap:8px;padding:44px 28px 0 32px;min-height:260px;overflow:hidden}
.panel-hero::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.14)}
.ph-copy{position:relative;z-index:1;padding-bottom:28px}
.panel-hero h3{font-size:clamp(24px,2.8vw,32px);margin:10px 0 16px}
.panel-hero .big{font-size:clamp(34px,4vw,46px)}
.ph-chatty{position:relative;z-index:1;width:100%;max-height:250px;object-fit:contain;object-position:bottom;align-self:end;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25));animation:popin .5s cubic-bezier(.2,1.4,.4,1) both}
.ptabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 32px;border-bottom:1px solid #EEE7D8;background:var(--cream)}
.ptabs-l{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.ptab{min-height:38px;padding:7px 14px;border-radius:999px;border:1.5px solid #D9D1C0;background:var(--paper);font-weight:600;font-size:14px}
.ptab:hover{border-color:var(--ink)}
.ptab.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.panel-sec{padding:24px 32px 0}
.pmetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pmetrics.n2,.pmetrics.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.pm{background:var(--cream);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:4px}
.pm-ico{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;background:color-mix(in srgb, var(--c) 18%, white);color:var(--c)}
.pm-ico svg{width:20px;height:20px}
.pm b{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,28px);line-height:1.05;letter-spacing:-.02em}
.pm span:last-child{font-size:13.5px;color:var(--ink-2);line-height:1.3}
.pproblem{margin:0;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.35;color:var(--ink)!important}
.psteps{list-style:none;margin:0;padding:0;position:relative}
.psteps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:#E8E0CF}
.pstep{position:relative;display:flex;gap:16px;align-items:center;padding:8px 0}
.ps-ico{position:relative;flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--paper);border:2px solid color-mix(in srgb, var(--c) 45%, white);color:var(--c);z-index:1}
.ps-ico svg{width:22px;height:22px;display:block;flex:none}
.ps-ico i{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--cream);font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center}
.pstep b{display:block;font-family:var(--display);font-size:17px;line-height:1.2}
.pstep > div > span{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.35}
.pnote{margin:0;background:var(--butter);border-radius:14px;padding:12px 16px;font-weight:600;font-size:14.5px;color:var(--ink)!important}
.pquote{margin:0;background:var(--cream);border-radius:18px;padding:20px 22px;border-left:0}
.pquote blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.35}
.pquote figcaption{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:14px}
.pquote .avatar{width:44px;height:44px;font-size:15px}
.ptools{display:flex;flex-wrap:wrap;gap:8px}
.tchip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;border-radius:999px;background:var(--cream);font-weight:600;font-size:14px}
.tchip svg{width:20px;height:20px}
.tdot{width:20px;height:20px;border-radius:6px;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-size:11px;font-weight:800}
.panel-foot{padding:28px 32px 40px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:560px){
  .panel-hero{grid-template-columns:1fr 120px;padding:40px 20px 0 22px;min-height:220px}
  .ph-chatty{max-height:180px}
  .panel-sec,.ptabs{padding-left:22px;padding-right:22px}
  .pmetrics,.pmetrics.n2,.pmetrics.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-foot{padding:24px 22px 36px}
}
.panel-close{position:fixed;top:16px;right:16px;float:none;margin:0;z-index:5}
.tchip.plain{padding:7px 14px}
img.avatar{background:#fff;object-fit:cover;object-position:center top;border:2px solid var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* 8 badges: 4 per side */
.b1{left:2%;top:6%}  .b2{left:6%;top:30%} .b3{left:1%;top:54%} .b7{left:5%;top:78%}
.b4{right:2%;top:6%} .b5{right:6%;top:30%} .b6{right:1%;top:54%} .b8{right:5%;top:78%}
.b7{animation-delay:.95s,1.5s} .b7 .ico{background:#FFE0DC}
.b8{animation-delay:1.05s,2.7s} .b8 .ico{background:#FFF0B8}
.badge{padding-top:10px;padding-bottom:10px}
@media (max-width:1100px){ .b7{left:0} .b8{right:0} }
/* panel: business-model flow */
.pmodel{display:flex;align-items:stretch;gap:6px}
.pflow{flex:1;min-width:0;background:var(--cream);border-radius:16px;padding:14px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.pf-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--c) 16%, white);color:var(--c);margin-bottom:4px}
.pf-ico svg{width:20px;height:20px}
.pflow b{font-family:var(--display);font-size:16px;line-height:1.2}
.pflow > span:last-child{font-size:13px;color:var(--ink-2);line-height:1.3}
.pm-arrow{align-self:center;font-weight:800;font-size:20px;color:var(--muted)}
.pmodel-cap{margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.pmetrics.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){ .pmodel{flex-direction:column} .pm-arrow{transform:rotate(90deg)} .pmetrics.n6{grid-template-columns:repeat(2,minmax(0,1fr))} }
.panel-hero{min-height:220px}.ph-copy{padding-bottom:30px}.panel-hero h3{margin-bottom:0}

/* panel: client logos */
.pclients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pclient{background:#fff;border:1px solid #EEE7D8;border-radius:14px;height:72px;display:flex;align-items:center;justify-content:center;padding:12px}
.pclient img{max-height:44px;max-width:100%;width:auto;object-fit:contain}
.b8 .ico{background:#FFE0CC}
@media (max-width:560px){ .pclients{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* panel: campaign structure tree */
.pstruct{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.psl{background:var(--cream);border-radius:16px;padding:14px 16px}
.psl1{margin:0 14px}.psl2{margin:0 28px}
.psl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:10px}
.psl-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--c);padding:3px 9px;border-radius:99px}
.psl-rule{font-family:var(--display);font-weight:700;font-size:16px}
.psl-ex{display:flex;flex-wrap:wrap;gap:6px}
.psl-ex span{background:var(--paper);border:1.5px solid color-mix(in srgb, var(--c) 30%, white);border-radius:10px;padding:6px 11px;font-size:14px;font-weight:600}
.psl-ex.emoji span{width:42px;height:42px;display:grid;place-items:center;padding:0;font-size:20px}
.psl-down{align-self:center;font-weight:800;color:var(--muted);line-height:1}
.psl-win{display:flex;align-items:center;gap:10px;margin-top:8px;background:color-mix(in srgb, var(--c) 14%, white);border-radius:14px;padding:12px 14px;font-weight:600;font-size:14.5px;color:var(--ink)}
.psl-win svg{width:20px;height:20px;flex:none;color:var(--c)}
@media (max-width:560px){ .psl1{margin:0 6px}.psl2{margin:0 12px} }
/* panel: auto-scrolling creative gallery */
.pgallery{overflow:hidden;border-radius:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pg-track{display:flex;gap:12px;width:max-content;animation:pgscroll 28s linear infinite}
.pgallery:hover .pg-track,.pgallery:focus .pg-track{animation-play-state:paused}
.pg-track img{width:190px;height:190px;object-fit:cover;border-radius:14px;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.08)}
@keyframes pgscroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){ .pgallery{overflow-x:auto} .pg-track{animation:none} }
@media (max-width:560px){ .pg-track img{width:150px;height:150px} }

/* ================= CREATIVE SHOWCASE ================= */
.scene-creative{padding-bottom:100px;overflow:hidden}
.creative-head{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;margin-bottom:28px}
.creative-chatty{height:300px;width:auto;margin:0 auto}
.creative-sub{margin:14px 0 0;color:var(--ink-2);font-size:16px}
.row-label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:30px auto 12px}
.rl-ico{font-size:18px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mq-track{display:flex;gap:16px;width:max-content;padding:6px 0 14px;animation:mq 45s linear infinite}
.marquee.reverse .mq-track{animation-direction:reverse;animation-duration:55s}
.marquee.slow .mq-track{animation-duration:60s}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
.sc-item{flex:none;border:0;padding:0;background:none;text-align:left;cursor:pointer;text-decoration:none;color:inherit;transition:transform .2s}
.sc-item:hover{transform:translateY(-6px) rotate(-.6deg)}
.sc-graphic{position:relative;width:230px;height:230px;border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.sc-graphic img{width:100%;height:100%;object-fit:cover}
.sc-graphic .sc-tag{position:absolute;left:10px;bottom:10px;background:rgba(255,253,248,.92);color:var(--ink);font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;opacity:0;transition:opacity .2s}
.sc-graphic:hover .sc-tag,.sc-graphic:focus-visible .sc-tag{opacity:1}
.sc-video{width:320px;background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.10)}
.sc-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--ink)}
.sc-thumb img{width:100%;height:100%;object-fit:cover}
.sc-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--tang);box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .2s}
.sc-play::after{content:"";position:absolute;left:21px;top:16px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.sc-video:hover .sc-play{transform:scale(1.12)}
.sc-meta{display:block;padding:12px 14px 14px}
.sc-meta .sc-tag{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sc-meta b{display:block;font-family:var(--display);font-size:16.5px;line-height:1.25;margin-top:4px}
.sc-article{width:290px;min-height:180px;display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:18px;padding:20px;border-top:6px solid var(--c);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.sc-pub{align-self:flex-start;font-size:12px;font-weight:700;color:#fff;background:var(--c);padding:4px 10px;border-radius:99px}
.sc-article b{font-family:var(--display);font-size:19px;line-height:1.25}
.sc-read{margin-top:auto;font-weight:700;font-size:14px;color:var(--c)}
.vmodal{position:fixed;inset:0;z-index:120;background:rgba(18,20,19,.75);display:grid;place-items:center;padding:20px}
.vmodal[hidden]{display:none}
.vm-box{position:relative;width:min(960px,100%);background:#000;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vm-frame{aspect-ratio:16/9}
.vm-frame iframe{width:100%;height:100%;border:0;display:block}
.vm-img{width:auto;max-width:min(640px,100%);background:var(--paper)}
.vm-img img{display:block;max-height:85vh;width:auto;max-width:100%}
.vm-close{position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(18,20,19,.85);color:#fff;font-size:16px}
@media (max-width:860px){
  .creative-head{grid-template-columns:1fr;text-align:center}
  .creative-chatty{height:220px}
  .sc-graphic{width:170px;height:170px}.sc-video{width:250px}.sc-article{width:240px}
}
@media (prefers-reduced-motion:reduce){ .marquee{overflow-x:auto} .mq-track{animation:none} }
/* graphics keep their own shape (square or 4:5) */
.sc-graphic{width:auto;height:240px}
.sc-graphic img{width:auto;height:100%;object-fit:contain;display:block}
.marquee[data-row="graphics"] .mq-track{animation-duration:90s}
@media (max-width:860px){ .sc-graphic{width:auto;height:180px} }
/* video cards: content starts at the top, equal heights, clean 16:9 thumbs */
.sc-video{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.sc-thumb{width:100%;flex:none;overflow:hidden}
.sc-thumb img{display:block}
.sc-meta{flex:1}
.sc-meta b{min-height:2.5em}
.sc-article{justify-content:flex-start}
.story-toolkit{margin-top:40px;padding-top:28px;border-top:1px dashed rgba(18,20,19,.18)} .story-toolkit .tool{background:var(--paper)}

/* ================= CASE PANEL: rich blocks ================= */
.pmodel{flex-wrap:wrap}
.pmodel.n4 .pflow,.pmodel.n5 .pflow{flex:1 1 calc(50% - 30px)}
.pmodel.n4 .pm-arrow:nth-of-type(2),.pmodel.n5 .pm-arrow:nth-of-type(2){display:none}
.pmodel.n5 .pm-arrow:nth-of-type(4){display:none}
.ploop{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;border-radius:14px;border:2px dashed color-mix(in srgb, var(--c) 45%, white);font-weight:600;font-size:14px}
.ploop svg{width:20px;height:20px;color:var(--c);flex:none}
/* before/after */
.pcompare{display:flex;align-items:stretch;gap:10px}
.pc-side{flex:1;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:4px}
.pc-before{background:#EFEBE3}
.pc-after{background:color-mix(in srgb, var(--c) 16%, white);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 40%, white)}
.pc-l{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pc-side b{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,34px);line-height:1.05;letter-spacing:-.02em}
.pc-before b{color:#8A8378}
.pc-after b{color:var(--ink)}
.pc-s{font-size:13.5px;color:var(--ink-2)}
.pc-arrow{align-self:center;font-weight:800;font-size:22px;color:var(--muted)}
/* mini cards */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pcards.n2,.pcards.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcards.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pcard{background:var(--cream);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:3px}
.pcard .pm-ico{width:34px;height:34px;margin-bottom:6px}
.pcard b{font-family:var(--display);font-size:17px;line-height:1.15}
.pcard > span:last-child{font-size:13px;color:var(--ink-2);line-height:1.3}
.pcards.n5 .pcard{align-items:center;text-align:center;padding:12px 8px}
/* bars */
.pbars{display:flex;flex-direction:column;gap:12px;background:var(--cream);border-radius:18px;padding:18px}
.pbar{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px}
.pb-l{font-size:14px;font-weight:600;color:var(--ink-2)}
.pb-track{height:16px;border-radius:99px;background:#E6DFD0;overflow:hidden}
.pb-fill{display:block;height:100%;width:var(--w);border-radius:99px;background:color-mix(in srgb, var(--c) 45%, white);animation:grow .9s cubic-bezier(.2,.9,.3,1) var(--d) both}
.pbar.is-on .pb-fill{background:var(--c)}
.pbar b{font-family:var(--display);font-size:17px;min-width:96px;text-align:right}
@keyframes grow{from{width:0}}
/* page wireframe */
.pwire{background:#fff;border:1.5px solid #E6DFD0;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:8px}
.wz{border-radius:10px;background:#F1ECE2;color:var(--muted);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px}
.wz.on{background:color-mix(in srgb, var(--c) 16%, white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--c)}
.wz.kept{background:#FFF4CC;color:var(--ink);box-shadow:inset 0 0 0 2px #E0B400}
.wz-bar{min-height:28px}
.wz-nav{display:flex;gap:6px;justify-content:flex-end}.wz-nav i{width:34px;height:6px;border-radius:9px;background:#E6DFD0}
.wz-hero{min-height:70px}
.wz-body{display:grid;grid-template-columns:1fr 32%;gap:8px}
.wz-main{display:flex;flex-direction:column;gap:8px}
.wz-feat{min-height:46px}.wz-below{min-height:46px}.wz-side{min-height:100%}
.wz-lines{display:flex;flex-direction:column;gap:6px;padding:4px 2px}.wz-lines i{height:7px;border-radius:9px;background:#EEE8DC}.wz-lines i:nth-child(2n){width:82%}
.pwire-key,.dp-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.k{display:inline-block;width:12px;height:12px;border-radius:4px;background:#E6DFD0;margin-right:-8px}
.pwire-key .k.on,.dp-key .k.on{background:var(--c, #2F5BFF)}
.pwire-key .k.kept{background:#FFE58A}
.pwire-key{--c:inherit}
/* schedule */
.psched{display:flex;flex-direction:column;background:var(--cream);border-radius:18px;padding:8px 18px;position:relative}
.psi{display:grid;grid-template-columns:76px 18px 1fr;align-items:center;gap:10px;padding:10px 0;position:relative}
.psi + .psi::before{content:"";position:absolute;left:94px;top:-10px;height:20px;width:2px;background:#E2DACA}
.psi-t{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--muted)}
.psi-dot{width:14px;height:14px;border-radius:50%;border:3px solid color-mix(in srgb, var(--c) 45%, white);background:#fff}
.psi.is-on .psi-dot{background:var(--c);border-color:var(--c)}
.psi-l{font-size:14.5px;font-weight:600}
/* dayparting */
.pday{background:var(--cream);border-radius:18px;padding:18px}
.dp-row{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.dp-h{height:34px;border-radius:5px;background:#E6DFD0}
.dp-h.on{background:var(--c)}
.dp-axis{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.pday .dp-key .k.on{background:var(--c)}
@media (max-width:560px){
  .pcompare{flex-direction:column}.pc-arrow{transform:rotate(90deg)}
  .pcards,.pcards.n5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbar{grid-template-columns:90px 1fr auto}
  .pmodel.n4 .pflow,.pmodel.n5 .pflow{flex:1 1 100%}
}
/* gallery items (optionally linked, 16:9 for video thumbnails) */
.pg-item{position:relative;flex:none;display:block;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.pg-item img{box-shadow:none;border-radius:0}
.pgallery.wide .pg-track img{width:256px;height:144px;object-fit:cover}
.pg-badge{position:absolute;left:8px;top:8px;background:rgba(18,20,19,.82);color:#fff;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:99px}
.pg-play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#FF0000;opacity:.92;transition:transform .2s}
.pg-play::after{content:"";position:absolute;left:16px;top:12px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
a.pg-item:hover .pg-play{transform:scale(1.12)}
@media (max-width:560px){ .pgallery.wide .pg-track img{width:200px;height:113px} }
a.pg-item:not(:has(.pg-badge)) .pg-play{display:none}
/* overview: dive-in case cards */
.pdive{display:flex;flex-direction:column;gap:10px}
.pdive-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:18px;background:var(--cream);border:2px solid transparent;transition:transform .2s,border-color .2s}
.pdive-card:hover,.pdive-card:focus-visible{border-color:var(--c);transform:translateX(4px)}
.pdive-card img{width:64px;height:64px;flex:none;object-fit:contain;object-position:bottom;border-radius:14px;background:var(--c)}
.pd-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pd-txt b{font-family:var(--display);font-size:18px;color:var(--c);line-height:1.15}
.pd-txt span{font-size:14px;color:var(--ink-2);line-height:1.3}
.pd-go{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-weight:700}

/* ===== hero entrance: Chatty pops in and waves, then the world appears around him ===== */
.hero-char{animation:fadein .5s ease-out both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#hero-img.pop{animation:float 5s ease-in-out 1.8s infinite}
.hero-bubble{animation:popin .6s 1.0s cubic-bezier(.2,1.4,.4,1) both}
.badge.b1{animation-delay:1.45s,0s} .badge.b4{animation-delay:1.55s,.6s}
.badge.b2{animation-delay:1.65s,1.2s} .badge.b5{animation-delay:1.75s,1.8s}
.badge.b3{animation-delay:1.85s,2.4s} .badge.b6{animation-delay:1.95s,3s}
.badge.b7{animation-delay:2.05s,1.5s} .badge.b8{animation-delay:2.15s,2.1s}
.hero-foot{animation:fadeup .6s ease-out 2.35s both}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* handwritten logo */
.brand-sig{height:56px;width:auto;display:block;transition:transform .2s}
.brand:hover .brand-sig{transform:rotate(-3deg) scale(1.04)}
@media (max-width:640px){ .brand-sig{height:42px} }
/* header lines up with the page content instead of hugging the screen edge */
.topbar{padding:16px max(40px, calc((100vw - 1180px) / 2 + 28px))}
@media (max-width:640px){ .topbar{padding:12px 22px} }
/* logos + toolkit: wrap normally on big screens, one scrolling line on phones */
@media (min-width:901px){ .sl-track{display:contents} .sl-clone{display:none} }
@media (max-width:900px){
  .sl{display:block;overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .sl .sl-track{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;animation:sl-scroll 28s linear infinite}
  .sl .sl-track > *{flex:none;margin-right:28px}
  .tool-row.sl .sl-track > *{margin-right:10px}
  .tool-row.sl .sl-track{animation-duration:40s}
  .sl:hover .sl-track,.sl:active .sl-track{animation-play-state:paused}
  .hero-foot .logos{flex-direction:column;gap:10px;width:100%}
}
@keyframes sl-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .sl{overflow-x:auto} .sl .sl-clone{display:none} }
/* "How it all started": light outline pill, arrow bobs to hint at scrolling */
.tour-cue{min-height:42px;padding:8px 18px;background:none;color:var(--ink);border:1.5px solid rgba(18,20,19,.25);border-radius:999px;font-weight:600;font-size:15px;gap:8px;animation:nudge 2s ease-in-out infinite;transition:border-color .2s,background .2s}
.tour-cue span{display:inline;animation:none}
.tour-cue:hover{background:rgba(18,20,19,.05);border-color:rgba(18,20,19,.5)}
/* badge sub-lines always stay on one line on laptops/desktops */
@media (min-width:761px){ .badge > span:not(.ico){white-space:nowrap} .badge{max-width:none} }
/* image-based tool logos match the SVG ones */
.tool img{width:22px;height:22px;object-fit:contain;display:block}
.tchip img{width:20px;height:20px;object-fit:contain;display:block}

/* phones: badge labels stay on one line (icon hidden to make room, number + label are what matter) */
@media (max-width:480px){
  .badge{grid-template-columns:auto;padding:10px 24px 10px 12px}
  .badge .ico{display:none}
  .badge > span:not(.ico){white-space:nowrap;font-size:11.5px}
}
/* tablets/phones: badges fill their column so both columns line up */
@media (max-width:900px){ .badges > li{display:flex} .badges > li > .badge{width:100%} }