/* Wildly Social: site design system.
   Apple-grade direction: one typeface (San Francisco on Apple devices, Inter
   elsewhere), centred storytelling, generous space, rounded tiles, and the
   brand shapes and colours used as objects. Ink and paper stay the base.
   The official logo SVGs in assets/img are never redrawn or recoloured. */
:root{
  --bg:#fbfaf7; --bg-2:#f2f0ea; --fg:#1d1d1f; --fg-2:#6e6e73; --fg-3:#86868b;
  --line:rgba(0,0,0,.08); --tile:#ffffff; --tile-dark:#0b0b0c;
  --red:#F23B30; --gold:#F6CB45; --green:#6BBE4A;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000; --bg-2:#0d0d0e; --fg:#f5f5f7; --fg-2:#a1a1a6; --fg-3:#86868b; --line:rgba(255,255,255,.12); --tile:#151516; --tile-dark:#1c1c1e; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#000;--bg-2:#0d0d0e;--fg:#f5f5f7;--fg-2:#a1a1a6;--fg-3:#86868b;--line:rgba(255,255,255,.12);--tile:#151516;--tile-dark:#1c1c1e;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sf);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.035em;line-height:1.05;font-weight:700}
p{text-wrap:pretty}
:focus-visible{outline:2px solid #0071e3;outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.center{text-align:center}

/* Nav: thin, frosted */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:52px;gap:24px}
.nav .logo img{height:26px;width:auto}
.nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--fg-2)}
.nav ul a:hover{color:var(--fg)}
.logo .on-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .on-light{display:none}:root:not([data-theme="light"]) .logo .on-dark{display:block}}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:500}
@media (max-width:760px){.nav ul{display:none}}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;font-size:17px;font-weight:500;transition:transform .3s var(--ease),background-color .2s}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{transform:scale(1.03)}
.more{color:var(--red);font-size:17px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.more::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform .3s var(--ease)}
.more:hover::after{transform:translateX(3px) rotate(45deg)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px}

/* Type scale */
.eyebrow{font-size:17px;font-weight:600;color:var(--fg-2);letter-spacing:-.01em}
.display{font-size:clamp(64px,12vw,152px);letter-spacing:-.055em;line-height:.95;font-weight:700}
.h1{font-size:clamp(40px,6.4vw,80px);letter-spacing:-.045em}
.h2{font-size:clamp(32px,4.6vw,56px)}
.h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em}
.sub{font-size:clamp(19px,2.2vw,24px);line-height:1.38;color:var(--fg-2);font-weight:500;letter-spacing:-.02em;max-width:34em;margin-inline:auto}
.section{padding-block:clamp(88px,12vw,160px)}

/* Hero */
.hero{padding-top:clamp(64px,9vw,120px);text-align:center}
.hero .display{margin:14px 0 22px}
.hero .ctas{margin-top:36px}
.stage{margin-top:clamp(56px,7vw,88px);border-radius:clamp(24px,3vw,36px);background:radial-gradient(70% 90% at 25% 20%,rgba(242,59,48,.10),transparent 60%),radial-gradient(60% 80% at 85% 85%,rgba(107,190,74,.12),transparent 60%),radial-gradient(50% 60% at 70% 10%,rgba(246,203,69,.16),transparent 60%),var(--bg-2);aspect-ratio:16/8;display:grid;place-items:center;overflow:hidden;position:relative}
.stage svg{width:min(78%,760px);height:auto}
.float{animation:float 9s var(--ease) infinite alternate}
.float.b{animation-duration:11s;animation-delay:-3s}.float.c{animation-duration:13s;animation-delay:-6s}
@keyframes float{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.float{animation:none}}
@media (max-width:640px){.stage{aspect-ratio:4/3.4}}

/* Statement: words light up */
.statement p.big{font-size:clamp(32px,5vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1.08;max-width:17em;margin-inline:auto;color:var(--fg-3)}
.statement p.big strong{color:var(--fg);font-weight:700}
.statement p.big em{font-style:normal;background:linear-gradient(90deg,var(--red),#f58a2b 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.statement .sub{margin-top:28px}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:64px}
.tile{position:relative;border-radius:28px;background:var(--tile);padding:clamp(28px,3vw,40px);min-height:340px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 0 var(--line) inset,0 0 0 1px var(--line)}
.tile .role{font-size:14px;font-weight:600;color:var(--fg-3);letter-spacing:-.01em}
.tile h3{margin-top:8px}
.tile p{margin-top:12px;color:var(--fg-2);max-width:26em}
.tile .art{margin-top:auto;padding-top:28px}
.t-a{grid-column:span 4;background:var(--tile-dark);color:#f5f5f7}
.t-a p{color:#a1a1a6}.t-a .role{color:#86868b}
.t-b{grid-column:span 2}
.t-c,.t-d,.t-e{grid-column:span 2}
@media (max-width:900px){.bento{grid-template-columns:minmax(0,1fr)}.t-a,.t-b,.t-c,.t-d,.t-e{grid-column:auto;min-height:280px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#d2d2d7}
.tile:not(.t-a) .chip{background:var(--bg-2);color:var(--fg-2)}

/* Three promises */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:72px;text-align:left}
.trio .num{font-size:clamp(44px,5vw,64px);font-weight:700;letter-spacing:-.05em;line-height:1}
.trio h3{margin-top:20px}
.trio p{margin-top:10px;color:var(--fg-2)}
.trio .num.r{color:var(--red)}.trio .num.g{color:var(--green)}.trio .num.y{color:#d9a400}
@media (max-width:800px){.trio{grid-template-columns:minmax(0,1fr)}}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:64px;counter-reset:s}
.step{border-radius:24px;background:var(--tile);box-shadow:0 0 0 1px var(--line);padding:28px;min-height:220px;display:flex;flex-direction:column}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-size:14px;font-weight:600;color:var(--fg-3)}
.step h3{margin-top:auto;font-size:24px}
.step p{margin-top:8px;color:var(--fg-2);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Newsletter */
.letter{border-radius:36px;background:var(--bg-2);padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px);text-align:center}
.signup{display:flex;gap:8px;max-width:460px;margin:36px auto 0;padding:6px;border-radius:999px;background:var(--tile);box-shadow:0 0 0 1px var(--line),0 8px 30px rgba(0,0,0,.05)}
.signup input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:17px;color:var(--fg);padding:0 18px;outline:none}
.signup .btn{height:44px}
.form-note{margin-top:14px;font-size:14px;color:var(--fg-2);min-height:1.4em}

/* Closing band */
.close{background:#000;color:#f5f5f7;text-align:center;overflow:hidden;position:relative}
.close .sub{color:#a1a1a6}
.close h2{margin-bottom:20px}
.close .ctas{margin-top:36px}
.close .more{color:#ff6b60}

/* Footer */
footer{font-size:12px;color:var(--fg-3);padding:32px 0 48px;border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line)}
footer h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--fg)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a:hover{color:var(--fg);text-decoration:underline}
footer .legal{display:flex;justify-content:space-between;gap:16px;padding-top:20px;flex-wrap:wrap}
@media (max-width:720px){footer .cols{grid-template-columns:minmax(0,1fr)}}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Mobile menu ---------- */
.menu-btn{display:none;font:inherit;font-size:13px;font-weight:500;background:none;border:0;color:var(--fg);padding:8px 4px;cursor:pointer}
@media (max-width:760px){
  .menu-btn{display:inline-block;order:3}
  .nav .wrap{position:relative}
  .nav ul#site-nav{position:absolute;left:0;right:0;top:52px;display:none;flex-direction:column;gap:0;padding:8px clamp(16px,4vw,32px) 20px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.06);font-size:24px;font-weight:600;color:var(--fg)}
  .nav ul#site-nav.open{display:flex}
  .nav ul#site-nav a{display:block;padding:10px 0}
  .nav .pill{margin-left:auto}
}

/* ---------- 1. Scroll story: the shapes build the brand ---------- */
.story{height:340vh;position:relative}
.story-pin{position:sticky;top:52px;height:calc(100vh - 52px);display:flex;align-items:center}
.story .stage{margin-top:0;width:100%;max-height:calc(100vh - 100px);aspect-ratio:auto;height:min(78vh,620px)}
.story svg{width:min(58%,620px);margin-bottom:120px}
.story svg g{transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.captions{position:absolute;left:clamp(24px,4vw,48px);bottom:clamp(24px,4vw,44px);right:24px;height:120px}
.cap{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cap.on{opacity:1;transform:none}
.cap b{display:block;font-size:clamp(40px,6vw,72px);letter-spacing:-.05em;line-height:1;font-weight:700}
.cap span{display:block;margin-top:8px;color:var(--fg-2);font-size:clamp(15px,1.6vw,19px);font-weight:500}
.story-meter{position:absolute;right:clamp(24px,4vw,44px);bottom:clamp(28px,4vw,48px);display:flex;gap:8px}
.story-meter i{width:8px;height:8px;border-radius:50%;background:var(--fg);opacity:.15;transition:opacity .3s,transform .3s var(--ease)}
.story-meter i.on{opacity:1;transform:scale(1.25)}
@media (max-width:640px){.story svg{width:92%;margin-bottom:90px}.story .stage{height:min(72vh,560px)}}
@media (prefers-reduced-motion:reduce){.story{height:auto}.story-pin{position:static;height:auto}.cap{position:static;opacity:1;transform:none;margin-top:12px}.cap:not(:last-child){display:none}.captions{position:static;height:auto;padding:0 24px 24px}.story-meter{display:none}}

/* ---------- 2. Statement reads itself ---------- */
.statement p.big .w{color:var(--fg-3);opacity:.35;transition:opacity .35s,color .35s}
.statement p.big .w.lit{opacity:1;color:var(--fg)}
.statement p.big em .w{color:transparent;opacity:.25}
.statement p.big em .w.lit{color:transparent;opacity:1}

/* ---------- 4. Tiles that open ---------- */
.tile{cursor:pointer;transition:box-shadow .3s var(--ease)}
.tile:hover{box-shadow:0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.08)}
.tile-toggle{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:0;background:var(--bg-2);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:transform .4s var(--ease),background-color .2s}
.t-a .tile-toggle{background:rgba(255,255,255,.12);color:#f5f5f7}
.tile-toggle svg{width:14px;height:14px}
.tile.open .tile-toggle{transform:rotate(45deg)}
.tile.open{grid-column:1/-1}
.tile .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.tile.open .panel{grid-template-rows:1fr}
.panel > div{overflow:hidden}
.panel .inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 48px;padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}
.t-a .panel .inner{border-color:rgba(255,255,255,.14)}
.panel .lede{font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.025em;line-height:1.3;color:inherit;margin:0}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.panel li{display:flex;gap:10px;align-items:center;color:var(--fg-2)}
.t-a .panel li{color:#d2d2d7}
.panel li::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.panel .go{grid-column:1/-1;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.tile.open .art{display:none}
@media (max-width:700px){.panel .inner{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5. Which unit do I need? ---------- */
.quiz{border-radius:36px;background:var(--tile);box-shadow:0 0 0 1px var(--line),0 30px 80px rgba(0,0,0,.06);padding:clamp(32px,5vw,64px);max-width:860px;margin:56px auto 0;text-align:left;min-height:420px;display:flex;flex-direction:column}
.q-top{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--fg-3);font-weight:600}
.q-bar{flex:1;height:4px;border-radius:4px;background:var(--bg-2);overflow:hidden;max-width:240px}
.q-bar i{display:block;height:100%;background:var(--fg);border-radius:4px;transition:width .5s var(--ease)}
.q-step{margin-top:32px;animation:qin .5s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.q-step h3{font-size:clamp(28px,3.4vw,40px)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:28px}
.opt{font:inherit;text-align:left;padding:18px 20px;border-radius:18px;border:0;background:var(--bg-2);color:var(--fg);cursor:pointer;box-shadow:0 0 0 1px transparent inset;transition:transform .25s var(--ease),box-shadow .2s,background-color .2s;display:flex;gap:14px;align-items:center}
.opt:hover{transform:translateY(-2px);box-shadow:0 0 0 1.5px var(--fg) inset}
.opt[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.opt .ic{flex:none;width:28px;height:28px}
.opt b{display:block;font-weight:600;font-size:17px}
.opt small{display:block;color:var(--fg-2);font-size:14px;margin-top:2px}
.opt[aria-pressed="true"] small{color:inherit;opacity:.7}
.q-nav{margin-top:auto;padding-top:32px;display:flex;justify-content:space-between;align-items:center}
.linkbtn{font:inherit;background:none;border:0;color:var(--fg-2);cursor:pointer;padding:8px 0;font-size:15px}
.linkbtn:hover{color:var(--fg)}
.result .unit{display:flex;gap:20px;align-items:center;margin-top:20px}
.result .unit svg{flex:none;width:72px;height:72px}
.result h3{font-size:clamp(32px,4vw,48px)}
.result p{margin-top:16px;color:var(--fg-2);font-size:19px;max-width:34em}
.result .ctas{justify-content:flex-start;margin-top:32px}

/* ---------- 6. Conversational brief ---------- */
.brief{min-height:calc(100vh - 52px);display:flex;flex-direction:column}
.brief-top{position:sticky;top:52px;z-index:5;background:var(--bg)}
.brief-bar{height:3px;background:var(--line)}
.brief-bar i{display:block;height:100%;background:var(--red);transition:width .6s var(--ease)}
.brief-body{flex:1;display:flex;align-items:center;padding-block:clamp(48px,8vw,96px)}
.brief-body .wrap{max-width:760px;width:100%}
.js .b-step{display:none}
.js .b-step.on{display:block;animation:qin .55s var(--ease)}
html:not(.js) .b-step{margin-bottom:64px}
html:not(.js) [data-next],html:not(.js) [data-prev],html:not(.js) [data-enter-hint]{display:none}html:not(.js) [data-send]{display:inline-flex!important}
.b-count{font-size:15px;font-weight:600;color:var(--fg-3)}
.b-step h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.045em;margin-top:10px}
.b-step .help{margin-top:12px;color:var(--fg-2);font-size:19px}
.b-field{margin-top:36px}
.b-field + .b-field{margin-top:20px}
.b-field label{display:block;font-size:14px;font-weight:600;color:var(--fg-2);margin-bottom:8px}
.b-input{width:100%;font:inherit;font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.02em;color:var(--fg);background:transparent;border:0;border-bottom:2px solid var(--line);padding:10px 0;outline:none;transition:border-color .2s;border-radius:0}
.b-input:focus{border-bottom-color:var(--fg)}
textarea.b-input{resize:vertical;min-height:120px;line-height:1.35}
.b-input[aria-invalid="true"]{border-bottom-color:var(--red)}
.b-err{color:#d70015;font-size:14px;margin-top:8px;min-height:1.2em}
.b-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.b-chips .opt{padding:14px 18px;border-radius:999px;font-size:16px;font-weight:500}
.b-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.b-suggest button{font:inherit;font-size:14px;border:0;border-radius:999px;padding:6px 12px;background:var(--bg-2);color:var(--fg-2);cursor:pointer}
.b-suggest button:hover{color:var(--fg)}
.b-actions{display:flex;align-items:center;gap:20px;margin-top:40px;flex-wrap:wrap}
.b-actions .hint{font-size:13px;color:var(--fg-3)}
.b-actions kbd{font:inherit;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--bg-2)}
.review{margin-top:32px;border-radius:24px;background:var(--tile);box-shadow:0 0 0 1px var(--line);padding:8px 24px}
.review div{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.review div:last-child{border-bottom:0}
.review dt{color:var(--fg-3);font-size:14px}
.review dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
@media (max-width:560px){.review div{grid-template-columns:minmax(0,1fr) auto}.review dt{grid-column:1/-1}}
.talk{border-top:1px solid var(--line);padding-block:24px;font-size:14px;color:var(--fg-2)}
.talk .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
.talk a{color:var(--fg);font-weight:500}
.sent{text-align:center}
.sent .check{width:80px;height:80px;margin:0 auto 24px}
.sent .check circle{fill:var(--green)}

/* Fixes */
[hidden]{display:none!important}
button.btn{border:0;font-family:inherit;cursor:pointer}
.bento{grid-auto-flow:dense}
.statement p.big em{background:none;color:inherit}
.statement p.big em .w{background:linear-gradient(90deg,var(--red),#f58a2b 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Shared page parts ---------- */
.nav ul a[aria-current="page"]{color:var(--fg);font-weight:600}
.page-hero{padding:clamp(72px,10vw,136px) 0 clamp(48px,7vw,96px);text-align:center}
.page-hero h1{font-size:clamp(48px,8.4vw,104px);letter-spacing:-.05em;line-height:1;margin:14px auto 22px;max-width:12em}
.lead-prose{font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.25;max-width:22em;margin-inline:auto}
.prose{max-width:36em;margin:28px auto 0;color:var(--fg-2);font-size:19px;display:grid;gap:18px}
.section-head{text-align:center;margin-bottom:56px}
.section-head h2{margin-top:10px}

/* Services: one feature panel per unit */
.units{display:grid;gap:20px}
.unit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border-radius:36px;background:var(--tile);box-shadow:0 0 0 1px var(--line);overflow:hidden;scroll-margin-top:72px}
.unit .visual{display:grid;place-items:center;min-height:360px;background:var(--bg-2)}
.unit .visual svg{width:min(52%,220px)}
.unit .body{padding:clamp(32px,5vw,64px);display:flex;flex-direction:column}
.unit .role{font-size:15px;font-weight:600;color:var(--fg-3)}
.unit h2{font-size:clamp(32px,3.6vw,48px);margin-top:8px}
.unit .lede{margin-top:16px;font-size:clamp(19px,1.8vw,22px);color:var(--fg-2);letter-spacing:-.02em}
.unit ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.unit li{font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;background:var(--bg-2);color:var(--fg)}
.unit .go{margin-top:auto;padding-top:32px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.unit:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.unit:nth-child(even) .visual{order:2}
.unit.dark{background:var(--tile-dark);color:#f5f5f7;box-shadow:none}
.unit.dark .visual{background:#151516}
.unit.dark .lede{color:#a1a1a6}.unit.dark .role{color:#86868b}
.unit.dark li{background:rgba(255,255,255,.08);color:#f5f5f7}
@media (max-width:820px){.unit,.unit:nth-child(even){grid-template-columns:minmax(0,1fr)}.unit:nth-child(even) .visual{order:0}.unit .visual{min-height:220px}}

/* About and Journal: card grids */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border-radius:28px;background:var(--tile);box-shadow:0 0 0 1px var(--line);padding:clamp(28px,3vw,36px);display:flex;flex-direction:column;min-height:240px}
.card .mark{width:44px;height:44px}
.card .n{font-size:14px;font-weight:600;color:var(--fg-3)}
.card h3{font-size:24px;margin-top:40px}
.card p{margin-top:10px;color:var(--fg-2)}
.badge{display:inline-flex;align-self:flex-start;margin-top:20px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--bg-2);color:var(--fg-2)}
.card .mark + h3{margin-top:40px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards,.cards.two{grid-template-columns:minmax(0,1fr)}}

/* About: founder */
.founder{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;border-radius:36px;background:var(--tile);box-shadow:0 0 0 1px var(--line);padding:clamp(28px,4vw,48px)}
.founder .photo{aspect-ratio:4/5;border-radius:24px;background:var(--bg-2);display:grid;place-items:center;text-align:center;color:var(--fg-3);font-size:14px;border:1.5px dashed var(--line);padding:16px}
.founder p.big{font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.3}
.todo{margin-top:20px;font-size:15px;color:var(--fg-2);border-radius:16px;background:var(--bg-2);padding:14px 16px}
.todo strong{color:var(--fg)}
@media (max-width:720px){.founder{grid-template-columns:minmax(0,1fr)}.founder .photo{max-width:220px}}

/* Work: case-study placeholders */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px}
.case{border-radius:28px;background:var(--bg-2);aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:28px}
.case svg{position:absolute;inset:0;margin:auto;width:34%;opacity:.9}
.case span{position:relative;font-size:14px;font-weight:600;color:var(--fg-2);background:var(--tile);padding:8px 14px;border-radius:999px;box-shadow:0 0 0 1px var(--line)}
@media (max-width:700px){.cases{grid-template-columns:minmax(0,1fr)}}

/* Start: contact pills with copy */
.talk .copy{font:inherit;font-size:13px;font-weight:500;border:0;border-radius:999px;padding:4px 10px;margin-left:6px;background:var(--bg-2);color:var(--fg-2);cursor:pointer}
.talk .copy:hover{color:var(--fg)}
.talk li{list-style:none}
.talk ul{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;margin:0;padding:0;align-items:center}
.talk .label{color:var(--fg-3);margin-right:6px}
.talk .value{color:var(--fg);font-weight:500}

/* 404 */
.lost{min-height:calc(100vh - 52px - 160px);display:grid;place-items:center;text-align:center;padding:64px 0}
.lost svg{width:180px;margin:0 auto 32px}
.lost h1{font-size:clamp(40px,6vw,72px)}
.lost .sub{margin-top:16px}
.lost .ctas{margin-top:32px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px}
.skip:focus{top:10px}
.brief-body{overflow-x:clip}

/* Placeholders (remove the data-placeholder content as real material arrives) */
.avatar{display:grid;place-items:center;border-radius:24px;background:radial-gradient(80% 80% at 30% 25%,rgba(242,59,48,.35),transparent 60%),radial-gradient(70% 70% at 80% 85%,rgba(107,190,74,.3),transparent 60%),var(--bg-2);border:0}
.avatar span{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.04em;color:var(--fg);opacity:.75}
.avatar.a2{background:radial-gradient(80% 80% at 70% 25%,rgba(246,203,69,.45),transparent 60%),var(--bg-2)}
.avatar.a3{background:radial-gradient(80% 80% at 30% 80%,rgba(107,190,74,.4),transparent 60%),var(--bg-2)}
.avatar.a4{background:radial-gradient(80% 80% at 60% 30%,rgba(242,59,48,.3),transparent 60%),var(--bg-2)}
.founder .who{display:flex;flex-direction:column;margin-bottom:16px}
.founder .who b{font-size:22px;letter-spacing:-.02em}
.founder .who span{color:var(--fg-2);font-size:15px;margin-top:2px}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.person{border-radius:28px;background:var(--tile);box-shadow:0 0 0 1px var(--line);padding:20px;display:flex;flex-direction:column}
.person .avatar{aspect-ratio:1/1;margin-bottom:16px}
.person .avatar span{font-size:28px}
.person b{font-size:17px}
.person > span{color:var(--fg-2);font-size:14px;margin-top:2px}
@media (max-width:700px){.team{grid-template-columns:minmax(0,1fr)}.person{flex-direction:row;align-items:center;gap:16px}.person .avatar{width:64px;margin:0;border-radius:18px}.person .avatar span{font-size:18px}.person b{display:block}}

.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:0}
.case-card{border-radius:32px;background:var(--tile);box-shadow:0 0 0 1px var(--line);overflow:hidden;display:flex;flex-direction:column}
.case-card.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.case-visual{display:grid;place-items:center;min-height:280px;background:var(--bg-2)}
.case-visual svg{width:min(34%,160px)}
.case-card.wide .case-visual{min-height:420px}
.v-red{background:radial-gradient(70% 70% at 50% 50%,rgba(242,59,48,.14),transparent 70%),var(--bg-2)}
.v-green{background:radial-gradient(70% 70% at 50% 50%,rgba(107,190,74,.16),transparent 70%),var(--bg-2)}
.v-gold{background:radial-gradient(70% 70% at 50% 60%,rgba(246,203,69,.22),transparent 70%),var(--bg-2)}
.case-meta{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start}
.case-card.wide .case-meta{justify-content:center}
.case-tags{font-size:14px;font-weight:600;color:var(--fg-3)}
.case-meta h3{font-size:clamp(26px,2.6vw,34px);margin-top:6px}
.case-meta > p:not(.case-tags){margin-top:10px;color:var(--fg-2)}
.metric{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);width:100%}
.metric b{display:block;font-size:clamp(36px,4vw,52px);letter-spacing:-.05em;line-height:1}
.metric span{display:block;margin-top:6px;font-size:14px;color:var(--fg-2)}
.ph-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--bg-2);color:var(--fg-3);margin-bottom:14px;border:1px dashed var(--line)}
@media (max-width:760px){.cases,.case-card.wide{grid-template-columns:minmax(0,1fr)}.case-card.wide .case-visual{min-height:260px}}
.founder .photo.avatar{border:0;background:radial-gradient(80% 80% at 30% 25%,rgba(242,59,48,.35),transparent 60%),radial-gradient(70% 70% at 80% 85%,rgba(107,190,74,.3),transparent 60%),var(--bg-2)}
.person{flex-direction:row;align-items:center;gap:16px}
.person .avatar{width:72px;flex:none;margin:0;border-radius:50%}
.person .avatar span{font-size:20px}
.person b{display:block}
.person > div:last-child{display:flex;flex-direction:column}