/* Shared "playground" design: tokens, top bar, buttons, contact with lava blobs. Used by the home page and every case study. */
:root{
  --bg:#fcf8f3; --bg-2:#f3eee6; --ink:#1b1e45; --muted:#606280; --line:rgba(27,30,69,.14);
  --peri:#a9b4ee; --deep:#4b55b0; --accent:#f04e55; --on-accent:#fff; --card:#fff; --stk-border:#fff;
  --sans:Commissioner,system-ui,sans-serif;
  --eo:cubic-bezier(.23,1,.32,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --g:clamp(16px,4vw,56px); color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#13152b;--bg-2:#191c38;--ink:#e8e9f4;--muted:#a2a5c2;--line:rgba(255,255,255,.13);--peri:#3c4690;--deep:#a9b4ee;--accent:#ff6b70;--on-accent:#14152b;--card:#1d2142;--stk-border:#f4f1ea;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#13152b;--bg-2:#191c38;--ink:#e8e9f4;--muted:#a2a5c2;--line:rgba(255,255,255,.13);--peri:#3c4690;--deep:#a9b4ee;--accent:#ff6b70;--on-accent:#14152b;--card:#1d2142;--stk-border:#f4f1ea;color-scheme:dark}
/* bar */
.topbar{position:fixed;inset:12px var(--g) auto;z-index:50;display:flex;align-items:center;gap:1.4rem;padding:8px 8px 8px 16px;border-radius:999px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line),0 10px 30px -18px rgba(27,30,69,.35)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.brand b{font-weight:850}
.logo-mark{width:28px;height:28px}.logo-mark .lk{fill:currentColor}.logo-mark .l1{fill:var(--deep)}
.menu{margin-inline:auto;display:flex;gap:.3rem}
.menu a{font:650 .86rem/1 var(--sans);text-decoration:none;padding:.65rem .9rem;border-radius:999px;transition:background .25s var(--eo)}
.menu a:hover{background:color-mix(in srgb,var(--peri) 45%,transparent)}
.ctrls{display:flex;gap:.35rem}
.tb{width:40px;height:40px;border-radius:50%;border:0;background:color-mix(in srgb,var(--peri) 40%,transparent);color:var(--ink);font:800 .74rem/1 var(--sans);cursor:pointer;display:grid;place-items:center;transition:transform .2s var(--spring)}
.tb:hover{transform:rotate(-12deg) scale(1.06)}.tb:active{transform:scale(.92)}
.tb svg{width:18px;height:18px}
.menu-btn{display:none}
@media (max-width:820px){.menu{display:none}.ctrls{margin-left:auto}.brand{gap:.45rem;font-size:.68rem;letter-spacing:.09em;min-width:0}.brand span{white-space:nowrap}.topbar{gap:.6rem}
  /* phones: the same three links open from a menu button, in a small panel under the bar */
  .menu-btn{display:grid;align-content:center;gap:4px}.menu-btn i{display:block;width:16px;height:2px;margin-inline:auto;border-radius:2px;background:currentColor;transition:translate .3s var(--spring),rotate .3s var(--spring),opacity .2s}
  .topbar.open .menu-btn i:nth-child(1){translate:0 6px;rotate:45deg}.topbar.open .menu-btn i:nth-child(2){opacity:0}.topbar.open .menu-btn i:nth-child(3){translate:0 -6px;rotate:-45deg}
  .topbar.open .menu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;padding:8px;gap:2px;border-radius:24px;background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(27,30,69,.35);animation:mIn .3s var(--spring)}
  .topbar.open .menu a{padding:.95rem 1.1rem;font-size:1rem}
}
@keyframes mIn{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

.pbtn{display:inline-flex;align-items:center;gap:.55rem;padding:1rem 1.45rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font:750 .98rem/1 var(--sans);text-decoration:none;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 80%,transparent);transition:transform .25s var(--spring)}
.pbtn i{font-style:normal;display:inline-block;transition:translate .3s var(--spring)}
.pbtn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pbtn.sm{padding:.75rem 1.1rem;font-size:.86rem}
.pbtn:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.pbtn:hover{transform:translateY(-2px) rotate(-2deg)}.pbtn:hover i{translate:0 3px}}
/* hand-drawn underline under big titles */
.squig{position:absolute;left:0;bottom:-.36em;width:100%;height:.34em;overflow:visible;fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--eo) .2s}
.in > .squig{stroke-dashoffset:0}

/* ---------- contact ---------- */
.reach{padding:clamp(64px,8vw,104px) var(--g) 0;background:var(--peri);border-radius:48px 48px 0 0;margin-top:40px;position:relative;overflow:hidden}
:root[data-theme="dark"] .reach{background:#262c66}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .reach{background:#262c66}}
.cta{position:relative;z-index:2;max-width:1100px;margin:0 auto;text-align:center;font:900 clamp(2.2rem,1rem + 4.2vw,5rem)/.95 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.r-wrap{position:relative;z-index:2;max-width:760px;margin:clamp(28px,4vw,44px) auto 0}
.r-list{display:grid;gap:12px}
.r-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.75rem .75rem .75rem 1.3rem;border-radius:999px;background:var(--bg);box-shadow:0 14px 30px -20px rgba(27,30,69,.5);transition:transform .35s var(--spring)}
.r-item:nth-child(1){rotate:-.6deg}.r-item:nth-child(2){rotate:.4deg}
@media (hover:hover) and (pointer:fine){.r-item:hover{transform:scale(1.02) rotate(0deg)}}
.r-item .r-label{display:flex;align-items:center;gap:.5rem;font:750 .78rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:7.5rem}
.r-item .r-label svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.r-item .r-v{font:800 clamp(.98rem,.85rem + .55vw,1.3rem)/1.2 var(--sans);letter-spacing:-.01em;overflow-wrap:anywhere}
.r-item .r-v a{text-decoration:none}
.r-item:last-child{grid-template-columns:auto minmax(0,1fr)}
.r-copy{border:0;cursor:pointer;font:750 .8rem/1 var(--sans);padding:.85rem 1.1rem;border-radius:999px;background:var(--ink);color:var(--bg);transition:transform .25s var(--spring),background .2s}
.r-copy:active{transform:scale(.92)}.r-copy.ok{background:var(--accent);color:var(--on-accent)}
.goo{position:absolute;inset:0;z-index:1;overflow:hidden}
.goo-b{position:absolute;inset:-60px;filter:url(#goo)}
.goo-b i{position:absolute;border-radius:50%;background:var(--blob,#c3cbf6)}
:root[data-theme="dark"] .goo-b i{--blob:#323b86}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .goo-b i{--blob:#323b86}}
.gb1{width:260px;height:260px;left:6%;top:12%;animation:gb1 17s ease-in-out infinite alternate}
.gb2{width:180px;height:180px;left:78%;top:6%;animation:gb2 13s ease-in-out infinite alternate}
.gb3{width:320px;height:320px;left:70%;top:58%;animation:gb3 19s ease-in-out infinite alternate}
.gb4{width:150px;height:150px;left:22%;top:66%;animation:gb4 11s ease-in-out infinite alternate}
.gb5{width:120px;height:120px;left:48%;top:4%;animation:gb5 15s ease-in-out infinite alternate}
.gb6{width:200px;height:200px;left:2%;top:74%;animation:gb2 16s ease-in-out infinite alternate-reverse}
.goo-b .goo-me{width:150px;height:150px;left:0;top:0;margin:-75px 0 0 -75px;transform:translate(var(--gx,-400px),var(--gy,-400px));transition:transform .5s cubic-bezier(.23,1,.32,1)}
.goo-b .goo-bub{animation:bub var(--dur,3.2s) cubic-bezier(.3,.6,.4,1) forwards}
@keyframes bub{0%{scale:.2}15%{scale:1}100%{scale:.15;translate:var(--dx,0) -320px;opacity:0}}
@keyframes gb1{to{transform:translate(18vw,22vh) scale(.85)}}
@keyframes gb2{to{transform:translate(-14vw,26vh) scale(1.2)}}
@keyframes gb3{to{transform:translate(-26vw,-30vh) scale(.8)}}
@keyframes gb4{to{transform:translate(22vw,-34vh) scale(1.3)}}
@keyframes gb5{to{transform:translate(-8vw,40vh) scale(1.4)}}
.goo-hint{position:absolute;z-index:2;right:var(--g);top:clamp(28px,4vw,48px);font:650 .8rem/1 var(--sans);color:color-mix(in srgb,var(--ink) 60%,transparent);pointer-events:none}
@media (hover:none),(pointer:coarse){.goo-hint{display:none}}
.confetti{position:fixed;left:0;top:0;width:10px;height:14px;border-radius:3px;pointer-events:none;z-index:99}
.reach .pfoot-w{position:relative;z-index:2;max-width:1100px;margin:clamp(48px,7vw,80px) auto 0}
.reach .pfoot{display:flex;justify-content:space-between;gap:1rem;padding:1.4rem 0 1.8rem;border-top:1.5px solid color-mix(in srgb,var(--ink) 25%,transparent);font:700 .82rem/1 var(--sans)}
.reach .pfoot a{text-decoration:none}
@media (max-width:640px){.r-item{grid-template-columns:1fr auto;grid-template-areas:"l b" "v v";row-gap:.55rem;border-radius:24px;padding:.9rem 1rem .9rem 1.2rem}.r-item .r-label{grid-area:l}.r-item .r-copy{grid-area:b}.r-item .r-v{grid-area:v;overflow-wrap:normal;word-break:normal}.r-item:last-child{grid-template-columns:1fr;grid-template-areas:"l" "v"}.reach .pfoot{font-size:.76rem}}
@media (prefers-reduced-motion:reduce){.goo-b i{animation:none!important}}
/* very narrow phones: the name in two short lines so the buttons still fit */
@media (max-width:370px){.brand span{white-space:normal;line-height:1.15;max-width:7.5em}}