:root{--paper:#FBF3EC;--ink:#2A1420;--muted:#6E5560;--red:#B4235E;--line:#E3C5C2;--rule:1.5px solid var(--line);--f-d:"DM Sans",system-ui,sans-serif;--f-h:"Fraunces",Georgia,serif;--f-b:"Newsreader",Georgia,serif}
*{box-sizing:border-box}html{scroll-padding-top:4.5rem}
body{margin:0;color:var(--ink);font:1.125rem/1.6 var(--f-b);background:radial-gradient(1200px 600px at 85% -10%,#F6DCE0 0,transparent 60%),var(--paper)}
a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:9}.skip:focus{top:1rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
h1,h2,h3,.nav,.btn,dt,.funnel{font-family:var(--f-d);font-stretch:80%}
header.top{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:var(--rule)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0;font-weight:600}
.nav ul{display:flex;gap:clamp(.8rem,3vw,2rem);list-style:none;margin:0;padding:0}.nav a{text-decoration:none}.nav a:hover{text-decoration:underline;text-underline-offset:5px}
h1{font-size:clamp(2.6rem,7.5vw,6rem);line-height:.98;font-weight:800;letter-spacing:-.02em;margin:0;max-width:14ch}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;margin:0 0 1rem}h3{font-size:1.6rem;margin:0 0 .5rem;line-height:1.1}
.hero{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:end;padding:clamp(3rem,9vw,7rem) 0 3rem}
.hero p{max-width:34rem}
dl.specblock{margin:0;border:var(--rule);background:var(--paper);font-size:1rem}
.specblock div{display:grid;grid-template-columns:7rem 1fr;border-top:var(--rule)}.specblock div:first-child{border-top:0}
dt{font-weight:700;padding:.55rem .8rem;border-right:var(--rule)}dd{margin:0;padding:.55rem .8rem}
.ph{display:grid;place-items:center;min-height:320px;border:var(--rule);background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(16,18,20,.08) 11px 12px);color:var(--muted);font:600 .95rem var(--f-d);text-align:center;padding:1rem;position:relative}
.ph .pin{position:absolute;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:700 .85rem var(--f-d)}
section{padding:3rem 0}.line{border-top:var(--rule)}
.proj{display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;padding:2.5rem 0;border-top:var(--rule);align-items:center}
.proj:nth-child(even){grid-template-columns:1.4fr 1fr}.proj:nth-child(even) .ph{order:-1}
.funnel{list-style:none;display:flex;margin:1rem 0 1.5rem;padding:0;font-size:.85rem;font-weight:600;color:var(--muted)}
.funnel li{flex:1;padding:.35rem .4rem;border-top:3px solid var(--line)}.funnel li.on{color:var(--ink);border-color:var(--red)}
.btn{display:inline-block;border:var(--rule);padding:.6rem 1.1rem;font-weight:700;text-decoration:none;background:var(--ink);color:var(--paper);transition:background .15s}
.btn:hover{background:var(--red);border-color:var(--red)}.btn.alt{background:transparent;color:var(--ink)}.btn.alt:hover{color:#fff}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:.8rem 0;border-top:var(--rule)}
.note{color:var(--red);font:600 .95rem var(--f-d)}
.case h1{max-width:20ch;font-size:clamp(2.2rem,5.5vw,4.2rem)}.case section{border-top:var(--rule)}.case p,.case ol{max-width:42rem}
footer{border-top:var(--rule);padding:2rem 0;font-size:1rem}
@media(max-width:800px){.hero,.proj,.proj:nth-child(even),.cols{grid-template-columns:1fr}.proj:nth-child(even) .ph{order:0}.ph{min-height:220px}}
@media(prefers-reduced-motion:no-preference){.hero h1{animation:draw 1s cubic-bezier(.2,.7,.2,1) both}@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}}

.bhead{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.bhead h2{margin:0;font-size:1.2rem}
.marq{overflow:hidden}
.track{display:flex;width:max-content;animation:brands 70s linear infinite}.track.paused{animation-play-state:paused}
.track ul{display:flex;gap:3rem;list-style:none;margin:0;padding:0 1.5rem}
.track li{font:600 1.35rem var(--f-d);font-stretch:80%;color:var(--muted);white-space:nowrap}
@keyframes brands{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.track{animation:none;width:auto}.track ul{flex-wrap:wrap}.track ul[aria-hidden]{display:none}#brands-pause{display:none}}

.brow{margin:1.25rem 0 0}.blabel{font:600 .95rem var(--f-d);font-stretch:80%;margin:0 0 .5rem}
.bstatic{display:flex;flex-wrap:wrap;gap:.5rem 3rem;list-style:none;margin:0;padding:0 1.5rem}
.bstatic li{font:600 1.35rem var(--f-d);font-stretch:80%;color:var(--muted)}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:start;margin-top:1rem}.gal figure{margin:0}.gal img{display:block;width:100%;height:auto;border:var(--rule)}.gal figcaption{font:600 .8rem var(--f-d);color:var(--muted);margin-top:.4rem}

.hero-fig{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;max-height:460px;overflow:hidden;align-items:start;border:var(--rule);padding:.75rem;background:#fff;-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent)}.hero-fig img{width:100%;height:auto;display:block}
.figgrp{font:700 1rem var(--f-d);margin:1.5rem 0 .5rem}.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,340px));gap:1.25rem;align-items:start}.shots figure{margin:0}.shots img{display:block;width:100%;height:auto;border:var(--rule)}.shots figcaption{font:600 .85rem var(--f-d);color:var(--muted);margin-top:.4rem}
.scr{max-height:1000px;overflow:auto;border:var(--rule)}.scr img{border:0!important}.scr:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.shots.wide{grid-template-columns:minmax(0,900px)}.hero-fig img:only-child{grid-column:1/-1}
.hlfig{margin:1rem 0 0}.hlfig img{display:block;width:100%;max-width:320px;height:auto;border:var(--rule)}.hlfig figcaption{font:600 .85rem var(--f-d);color:var(--muted);margin-top:.4rem}
.hlfigs{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}
.hlfig{width:100%}.hlfig .scr{max-height:720px}.hlfig img{max-width:none!important;border:0}
.hlfig{max-width:320px}.hlfig img{max-width:100%!important;width:100%}
/* soft image frames */
:root{--soft:1px solid #D9D6D2}
.hero-fig,.scr,.shots img,.gal img,.hlfig img{border:var(--soft)!important;border-radius:10px}
.scr img,.hlfig .scr img{border:0!important;border-radius:0}
.scr{overflow:auto}.hero-fig{padding:.75rem}

/* bold and warm */
h1,h2,h3{font-family:var(--f-h);font-stretch:100%;font-variation-settings:"SOFT" 100,"WONK" 1}
.nav,.btn,dt,.funnel,.blabel{font-family:var(--f-d);font-stretch:100%}
h1{font-weight:800;line-height:1.02;letter-spacing:-.025em}
h2{font-weight:700;letter-spacing:-.01em}
.btn{border-radius:999px;border:0;background:var(--red);color:#fff;padding:.7rem 1.4rem}
.btn:hover{background:var(--ink);border:0}
.btn.alt{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}.btn.alt:hover{background:var(--red);color:#fff}
dl.specblock,.ph,.skip{border-radius:14px}
dl.specblock{background:#fff;overflow:hidden}
header.top{background:rgba(251,243,236,.92);backdrop-filter:blur(6px)}
.funnel li.on{border-color:var(--red)}
::selection{background:#F3C3D3}
:root{--soft:1px solid #EBD6D0}
.nav{padding:.9rem clamp(1rem,4vw,2.5rem)}

/* ---- bold, colorful pass ---- */
:root{--blush:#F9D9E1;--lilac:#E3D8F6;--butter:#FCE7A0;--plum:#2A1420;--berry-d:#8F1A4A}
body{overflow-x:hidden}
section{padding:4rem 0}
.line{border-top:0}
.eyebrow{font:700 .85rem var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 .75rem}
/* hero */
.hero{position:relative;padding-top:clamp(3rem,8vw,6rem)}
.hero::before{content:"";position:absolute;right:-8%;top:-2rem;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--blush),var(--lilac) 70%);opacity:.9;z-index:-1}
.hero::after{content:"";position:absolute;left:-4%;bottom:-1rem;width:90px;height:90px;border-radius:50%;background:var(--butter);z-index:-1}
h1{font-size:clamp(2.8rem,8vw,6.6rem);max-width:15ch}
h1 mark{background:linear-gradient(transparent 58%,var(--blush) 58% 92%,transparent 92%);color:var(--red);padding:0 .08em;font-style:italic}
dl.specblock{box-shadow:0 12px 30px -12px rgba(143,26,74,.25);border:0}
.specblock div{border-top:1px solid var(--line)}dt{border-right:1px solid var(--line);color:var(--red)}
/* case studies */
#work-list{display:grid;gap:1.5rem}
.proj{border:0;border-radius:28px;padding:clamp(1.25rem,3vw,2.25rem);background:var(--blush)}
.proj:nth-child(2){background:var(--lilac)}.proj:nth-child(3){background:var(--butter)}.proj:nth-child(4){background:#FBD9C9}
.proj h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.proj .btn{background:var(--plum)}.proj .btn:hover{background:var(--red)}
.hero-fig{border-radius:18px;background:#fff}
.funnel li{border-top-color:rgba(42,20,32,.2)}
/* selected projects */
#hl li{border:0;background:#fff;border-radius:22px;padding:1.5rem 1.75rem;margin:0 0 1rem;box-shadow:0 10px 28px -16px rgba(143,26,74,.35);border-left:8px solid var(--red)}
#hl li:nth-child(2){border-left-color:#7A5AC8}#hl li:nth-child(3){border-left-color:#E0A800}#hl li:nth-child(4){border-left-color:#E5553F}
#hl li strong{font:700 1.4rem var(--f-h);display:block;margin-bottom:.35rem}
/* AI band */
.band{position:relative;isolation:isolate;color:#FBF3EC}
.band::before{content:"";position:absolute;inset:0 -100vmax;background:var(--plum);z-index:-1}
.ai{padding:5rem 0}
.ai .eyebrow{color:var(--butter)}
.ai h2{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;max-width:22ch;margin-bottom:2.5rem;color:#fff}
.aigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.aicard{border-radius:24px;padding:1.75rem;color:var(--ink);position:relative}
.aicard.c1{background:var(--blush)}.aicard.c2{background:var(--lilac)}.aicard.c3{background:var(--butter)}
.aicard .num{font:800 .9rem var(--f-d);letter-spacing:.1em;color:var(--red);display:block;margin-bottom:.5rem}
.aicard h3{font-size:1.7rem;margin-bottom:.8rem}
.aicard ul{margin:0;padding-left:1.1rem;font-size:1.02rem;line-height:1.5}.aicard li{margin:0 0 .6rem}
.pull{margin:3rem 0 0;padding:0}
.pull p{font:700 clamp(1.5rem,3.4vw,2.6rem)/1.15 var(--f-h);color:#fff;margin:0 0 1rem;max-width:28ch;font-variation-settings:"SOFT" 100,"WONK" 1}
.pull p::before{content:"\201C";color:var(--butter)}.pull p::after{content:"\201D";color:var(--butter)}
.pull footer{border:0;padding:0;font-size:1.05rem;color:#E9D6DC;max-width:60ch}
/* leadership tiles */
main .cols>div{border-radius:24px;padding:1.75rem;background:#fff;box-shadow:0 10px 28px -18px rgba(143,26,74,.4)}
main .cols>div:nth-child(1){border-top:8px solid var(--red)}main .cols>div:nth-child(2){border-top:8px solid #7A5AC8}main .cols>div:nth-child(3){border-top:8px solid #E0A800}
/* contact */
#contact{text-align:left;border-radius:32px;background:var(--red);color:#fff;padding:clamp(2rem,5vw,3.5rem);margin:3rem 0}
#contact h2{font-size:clamp(2rem,5vw,3.6rem);color:#fff}
#contact .btn{background:#fff;color:var(--red)}#contact .btn:hover{background:var(--plum);color:#fff}
.bhead h2{font-size:1.4rem}
footer{border-top:1px solid var(--line)}
@media(max-width:800px){.aigrid{grid-template-columns:1fr}.hero::before{opacity:.6}}
html,body{overflow-x:clip}.hero::after{left:1rem}
.aside{font:600 .95rem var(--f-d);margin:1.25rem 0 0}.aside a{color:var(--muted);text-underline-offset:4px}.aside a:hover{color:var(--red)}
/* device stages */
.stage{border-radius:28px;padding:clamp(1.25rem,3vw,2.25rem);margin:1.5rem 0;background:var(--blush)}
.stage.s1{background:var(--lilac)}.stage.s2{background:var(--butter)}.stage.s3{background:#FBD9C9}
.figgrp{margin:0 0 .25rem;font:700 1.35rem var(--f-h)}
.scrollnote{margin:0 0 1.25rem;font:500 .85rem var(--f-d);color:var(--muted)}
.stage .figgrp+.rowfigs{margin-top:1.25rem}
.rowfigs{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;align-items:flex-start}
.fg{margin:0}.fg figcaption{font:600 .85rem var(--f-d);color:var(--muted);margin-top:.75rem;text-align:center;max-width:36ch;margin-inline:auto}
.fg img{display:block;width:100%;height:auto;border:0!important;border-radius:0!important}
.fg .scr{border:0!important;border-radius:0!important;max-height:none;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(42,20,32,.35) transparent}
.fg .scr:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
/* phone */
.fg.m{width:260px}
.fg.m .dev{background:#fff;border:9px solid var(--plum);border-radius:36px;overflow:hidden;box-shadow:0 22px 40px -22px rgba(42,20,32,.55)}
.fg.m .scr{height:540px}
/* desktop browser */
.fg.d{width:min(100%,860px)}
.fg.d .dev{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 40px -22px rgba(42,20,32,.5);border:1px solid rgba(42,20,32,.12)}
.fg.d .dev::before{content:"";display:block;height:30px;background:radial-gradient(circle at 16px 15px,#E8847A 0 5px,transparent 5.5px),radial-gradient(circle at 34px 15px,#F2C55C 0 5px,transparent 5.5px),radial-gradient(circle at 52px 15px,#7FC08E 0 5px,transparent 5.5px),#F3E7E8}
.fg.d .scr{max-height:520px}
/* components */
.fg.c{width:min(100%,340px)}
.fg.c .dev{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 16px 34px -20px rgba(42,20,32,.5)}
.fg.c img{border-radius:18px!important}
/* highlights use same frames */
.rowfigs.hl{justify-content:flex-start;margin-top:1.25rem;padding:1.5rem;border-radius:24px;background:var(--blush)}
#hl li:nth-child(2) .rowfigs.hl{background:var(--lilac)}#hl li:nth-child(3) .rowfigs.hl{background:var(--butter)}
.hero-fig{border:0!important;background:transparent;padding:0;gap:1rem;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.hero-fig img{border-radius:14px;box-shadow:0 14px 30px -18px rgba(42,20,32,.5)}
.rowfigs.hl:empty{display:none}

/* single-row brand pills */
.bpills{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.bpills li{font:700 1.05rem var(--f-d);padding:.55rem 1.1rem;border-radius:999px;background:var(--blush);color:var(--ink);cursor:default;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .45s ease,transform .45s cubic-bezier(.3,1.5,.5,1),background .2s,color .2s,box-shadow .2s;transition-delay:calc(var(--i)*45ms),calc(var(--i)*45ms),0s,0s,0s}
.bpills.in li{opacity:1;transform:none}
.bpills li:nth-child(4n+2){background:var(--lilac)}.bpills li:nth-child(4n+3){background:var(--butter)}.bpills li:nth-child(4n){background:#FBD9C9}
.bpills.in li:hover,.bpills.in li:focus-visible{transform:translateY(-4px) rotate(-3deg) scale(1.08);background:var(--red);color:#fff;box-shadow:0 12px 20px -10px rgba(180,35,94,.6);transition-delay:0s;outline:none}
.bpills.in li:nth-child(even):hover,.bpills.in li:nth-child(even):focus-visible{transform:translateY(-4px) rotate(3deg) scale(1.08)}
@media(prefers-reduced-motion:reduce){.bpills li{opacity:1;transform:none;transition:none}.bpills.in li:hover{transform:none}}
/* ===== playful sticker / card pass ===== */
:root{--peach:#FFE6D4;--lime:#DDF28B;--violet:#4B2E83;--teal:#1F4F4A;--f-m:"DM Mono",ui-monospace,monospace}
/* nav as pills */
header.top{background:transparent;backdrop-filter:none;border-bottom:0}
.nav{padding:.9rem clamp(1rem,4vw,2.5rem)}
.nav .nm{background:var(--lime);color:var(--plum);padding:.5rem 1.1rem;border-radius:999px;transform:rotate(-2deg);font-weight:800;text-decoration:none;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.nav .nm:hover{transform:rotate(2deg) scale(1.06)}
.nav nav ul{background:#fff;border-radius:999px;padding:.3rem;gap:.15rem;box-shadow:0 10px 24px -14px rgba(143,26,74,.45)}
.nav nav a{display:block;padding:.5rem 1rem;border-radius:999px;font-weight:700;font-size:.95rem;transition:background .2s,color .2s,transform .2s}
.nav nav a:hover{background:var(--blush);text-decoration:none;transform:translateY(-1px)}
.nav nav a[aria-current],.nav nav a.on{background:var(--plum);color:#fff}
/* hero */
.hero::before,.hero::after{display:none}
.hero{position:relative;grid-template-columns:1.5fr 1fr;align-items:center}
.who{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:0 0 2rem;font:800 clamp(2.4rem,7vw,5.2rem)/1 var(--f-h);font-variation-settings:"SOFT" 100,"WONK" 1}
.tg{display:inline-block;padding:.15em .45em .22em;border-radius:.3em}
.tg.t1{background:var(--lime);color:var(--plum);transform:rotate(-4deg)}
.tg.t2{background:var(--plum);color:#fff;transform:rotate(2.5deg)}
.hero h1{font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.1;font-family:var(--f-h);max-width:20ch;font-weight:700;letter-spacing:-.01em}
.hero p:not(.who){font-size:1.1rem}
.sticker{position:absolute;touch-action:none;cursor:grab;user-select:none;translate:var(--dx,0) var(--dy,0);transform:rotate(var(--r,0deg));z-index:2;animation:bob 5s ease-in-out infinite}
.sticker.grab{cursor:grabbing;animation:none;filter:drop-shadow(0 10px 12px rgba(42,20,32,.3))}
.s-burst{width:clamp(70px,11vw,130px);right:6%;top:3%}
.s-spark1{width:clamp(28px,4vw,48px);left:44%;top:6%;animation-delay:-1s}
.s-spark2{width:clamp(22px,3vw,36px);left:3%;bottom:6%;animation-delay:-2s}
.s-squig{width:clamp(70px,10vw,120px);left:34%;bottom:2%;animation-delay:-3s}
@keyframes bob{50%{transform:rotate(var(--r,0deg)) translateY(-8px)}}
/* folder with project cards */
#work{padding-top:3rem}
#work-list{position:relative;margin-top:4rem;background:var(--peach);border-radius:36px;padding:clamp(1.25rem,3vw,2.75rem);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
#work-list::before{content:"";position:absolute;left:clamp(1.5rem,5vw,4rem);top:-2.9rem;width:240px;height:3rem;background:var(--peach);clip-path:polygon(0 100%,9% 0,91% 0,100% 100%)}
.pcard{display:block;text-decoration:none;color:var(--ink);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.pcard:hover,.pcard:focus-visible{transform:translateY(-8px) rotate(-1deg)}
.pcard:nth-child(even):hover,.pcard:nth-child(even):focus-visible{transform:translateY(-8px) rotate(1deg)}
.pcard:focus-visible{outline:3px solid var(--red);outline-offset:6px;border-radius:28px}
.pimg{position:relative;display:flex;gap:.9rem;justify-content:center;align-items:flex-start;height:min(52vw,380px);padding:1.5rem 1.5rem 0;border-radius:28px;overflow:hidden;background:var(--plum)}
.pcard.c1 .pimg{background:var(--violet)}.pcard.c2 .pimg{background:#8F1A4A}.pcard.c3 .pimg{background:var(--teal)}
.pimg img{flex:1 1 0;min-width:0;max-width:48%;height:auto;border-radius:16px 16px 0 0;box-shadow:0 14px 26px -12px rgba(0,0,0,.5)}
.pimg:has(img:only-child) img{max-width:56%}.pimg.wide img{max-width:100%}
.pimg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none}
.go{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;width:3.2rem;height:3.2rem;border-radius:50%;background:#fff;color:var(--plum);display:grid;place-items:center;font-size:1.5rem;font-weight:700;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .2s}
.pcard:hover .go,.pcard:focus-visible .go{transform:rotate(45deg) scale(1.1);background:var(--lime)}
.pcap{padding:1rem .4rem 0}
.ptag{display:block;font:500 .85rem var(--f-m);color:var(--muted);margin-bottom:.35rem}
.pcap h3{font-size:1.45rem;margin:0 0 .4rem;line-height:1.15}
.pcap p{margin:0;font-size:1rem;color:#4c3a42}
/* leadership: sideways cards */
.lead .swipe{font:500 .85rem var(--f-m);color:var(--muted);margin:-.5rem 0 1rem}
.lead .cols{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1.5rem;scrollbar-width:thin}
.lead .cols>div{flex:0 0 min(400px,86vw);scroll-snap-align:start;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.lead .cols>div:hover{transform:translateY(-6px) rotate(-.8deg)}
.lead .cols>div:nth-child(1){background:var(--blush);border-top:0}.lead .cols>div:nth-child(2){background:var(--lilac);border-top:0}.lead .cols>div:nth-child(3){background:var(--butter);border-top:0}
.lead .cols h3{font-size:1.6rem}
/* contact sticker */
#contact{position:relative;overflow:hidden}
#contact::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;background:var(--lime);border-radius:50%;opacity:.9}
#contact::before{content:"";position:absolute;right:50px;bottom:-40px;width:90px;height:90px;background:#F4A58A;border-radius:50%}
#contact>*{position:relative;z-index:1}
@media(max-width:800px){#work-list{grid-template-columns:1fr}.hero{grid-template-columns:1fr}.s-burst{right:2%;top:0}.s-squig,.s-spark1{display:none}}
@media(prefers-reduced-motion:reduce){.sticker{animation:none}.pcard,.pcard .go,.nav .nm{transition:none}.pcard:hover,.pcard:focus-visible{transform:none}}
.s-spark2{left:52%;bottom:10%}.s-squig{left:auto;right:8%;bottom:-3%}
@media(max-width:700px){header.top{position:static}.nav{flex-wrap:wrap;gap:.6rem;justify-content:flex-start}.nav nav{width:100%}.nav nav ul{justify-content:space-between;overflow-x:auto}.nav nav a{padding:.45rem .7rem;font-size:.88rem}}
@media(max-width:800px){.s-spark2{display:none}}

/* ===== jelly ===== */
.hero{grid-template-columns:1.05fr 1fr;align-items:center}
.hero p:not(.who){font-size:1.1rem}
.jelly{margin:0}
.bag{width:100%;max-width:540px;display:block;margin:0 auto;transform-origin:50% 100%;filter:drop-shadow(0 20px 26px rgba(180,35,94,.28));overflow:visible}
.bag.jig{animation:jelly .8s cubic-bezier(.3,1.4,.5,1)}
.bag .item{cursor:pointer;transform-box:fill-box;transform-origin:50% 60%;outline:none}
.bag .item.jig{animation:jelly .7s cubic-bezier(.3,1.4,.5,1)}
.bag .item:focus-visible{filter:drop-shadow(0 0 6px #B4235E)}
.bagcap{text-align:center;font:500 .9rem var(--f-m);color:var(--muted);min-height:2.6em;margin-top:.5rem}
@keyframes jelly{0%{transform:scale(1,1)}22%{transform:scale(.9,1.12)}44%{transform:scale(1.08,.93)}64%{transform:scale(.97,1.04)}82%{transform:scale(1.02,.99)}100%{transform:scale(1,1)}}
.jchips{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.8rem}
.jchips li{padding:.65rem 1.2rem;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.25)),var(--blush);box-shadow:inset 0 2px 5px rgba(255,255,255,.9),inset 0 -4px 8px rgba(180,35,94,.12),0 10px 18px -12px rgba(180,35,94,.5);font:600 1rem var(--f-d);transition:transform .2s}
.jchips li span{font-weight:800;color:var(--red);margin-right:.6rem;text-transform:uppercase;font-size:.78rem;letter-spacing:.1em}
.jchips li:hover{animation:jelly .7s}
/* glossy jelly buttons and pills */
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%);box-shadow:inset 0 2px 4px rgba(255,255,255,.55),inset 0 -4px 8px rgba(0,0,0,.18),0 10px 18px -10px rgba(180,35,94,.7)}
.btn:hover{animation:jelly .7s}
.btn.alt{background-image:none;box-shadow:inset 0 0 0 1.5px var(--red)}
.bpills li{background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%);box-shadow:inset 0 2px 4px rgba(255,255,255,.8),inset 0 -3px 6px rgba(0,0,0,.07)}
.pimg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 35%);pointer-events:none;border-radius:28px}
.s-spark1{left:47%;top:4%}.s-spark2{left:3%;bottom:2%}.s-squig{right:4%;bottom:-2%;left:auto}
@media(max-width:800px){.hero{grid-template-columns:1fr}.bag{max-width:420px}}
@media(prefers-reduced-motion:reduce){.bag.jig,.bag .item.jig,.btn:hover,.jchips li:hover{animation:none}}
.bag>path,.bag>ellipse{pointer-events:none}

/* ladybug logo */
.nav .nm{display:inline-flex;align-items:center;gap:.5rem}
.lady{width:1.7rem;height:1.7rem;flex:none;overflow:visible}
.lady .wl,.lady .wr{transform-box:view-box;transform-origin:20px 13px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.nav .nm:hover .lady,.nav .nm:focus-visible .lady{animation:crawl .9s ease-in-out}
.nav .nm:hover .wl,.nav .nm:focus-visible .wl{transform:rotate(-18deg)}
.nav .nm:hover .wr,.nav .nm:focus-visible .wr{transform:rotate(18deg)}
@keyframes crawl{0%{transform:translateX(0) rotate(0)}25%{transform:translateX(3px) rotate(14deg)}50%{transform:translateX(-2px) rotate(-12deg)}75%{transform:translateX(2px) rotate(8deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.nav .nm:hover .lady{animation:none}.lady .wl,.lady .wr{transition:none}}

/* jelly + glitter brand pills */
.bpills{gap:.8rem .7rem}
.bpills li{--bg:var(--blush);background-color:var(--bg);padding:.65rem 1.3rem;position:relative;overflow:hidden;isolation:isolate;border:1.5px solid rgba(255,255,255,.7);
background-image:radial-gradient(ellipse 60% 38% at 28% 22%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%);
box-shadow:inset 0 3px 5px rgba(255,255,255,.9),inset 0 -6px 10px rgba(0,0,0,.09),0 8px 14px -8px rgba(42,20,32,.35)}
.bpills li.j-blush{--bg:#F9D0DC}.bpills li.j-lilac{--bg:#DCCDF7}.bpills li.j-butter{--bg:#FCE08A}.bpills li.j-peach{--bg:#FFD2B5}.bpills li.j-mint{--bg:#C4EBD6}.bpills li.j-sky{--bg:#C6E2F8}.bpills li.j-lime{--bg:#DDF28B}.bpills li.j-rose{--bg:#F6B4C8}
.bpills li:nth-child(n){background-color:var(--bg)}
.bpills.in li{animation:jbob 4.2s ease-in-out var(--w) infinite}
@keyframes jbob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2px) scale(1.015,.985)}}
.bpills.in li:hover,.bpills.in li:focus-visible,.bpills.in li:nth-child(even):hover,.bpills.in li:nth-child(even):focus-visible{animation:jpill .7s both;color:var(--ink);box-shadow:inset 0 3px 5px rgba(255,255,255,.9),inset 0 -6px 10px rgba(0,0,0,.09),0 14px 22px -10px rgba(180,35,94,.5);
background-color:#F7C6E6;background-image:radial-gradient(circle at 15% 30%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 70% 20%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 45% 75%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 88% 65%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 30% 85%,#fff 0 1px,transparent 2px),linear-gradient(115deg,#FFD6F0,#D9C8FF,#BFEFFF,#FFF3B0,#FFD6F0);background-size:34px 34px,41px 41px,29px 29px,37px 37px,23px 23px,300% 100%;animation:jpill .7s both,glit 1.6s linear infinite}
.bpills.in li:hover::after,.bpills.in li:focus-visible::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 20% 50%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 60% 30%,#fff 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#fff 0 1.5px,transparent 2.5px);background-size:46px 46px,38px 38px,52px 52px;animation:twink .5s steps(2) infinite;mix-blend-mode:overlay}
@keyframes jpill{0%{transform:scale(1)}25%{transform:scale(1.2,.84) rotate(var(--r))}50%{transform:scale(.9,1.14) translateY(-6px) rotate(var(--r))}75%{transform:scale(1.07,.95) rotate(var(--r))}100%{transform:scale(1.06) translateY(-3px) rotate(var(--r))}}
@keyframes glit{to{background-position:17px 9px,-20px 14px,11px -8px,-14px -12px,9px 7px,300% 0}}
@keyframes twink{0%{opacity:.2}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.bpills.in li,.bpills.in li:hover{animation:none}.bpills.in li:hover::after{animation:none}}

/* blue cloud logo */
.nav .nm{background:none!important;position:relative;isolation:isolate;padding:.85rem 1.9rem .75rem 1.5rem;--r:2deg;filter:drop-shadow(0 7px 8px rgba(70,125,190,.35))}
.nav .nm::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#CFEBFF,#8FC8F2 70%,#7DBBEB);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none'%3E%3Cpath d='M34 64C10 64 4 42 24 36C20 18 44 10 56 20C62 4 92 0 102 16C114 4 144 8 148 26C168 18 194 30 182 46C194 58 186 66 168 66Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none'%3E%3Cpath d='M34 64C10 64 4 42 24 36C20 18 44 10 56 20C62 4 92 0 102 16C114 4 144 8 148 26C168 18 194 30 182 46C194 58 186 66 168 66Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nav .nm::after{content:"";position:absolute;left:18%;top:14%;width:34%;height:16%;border-radius:50%;background:rgba(255,255,255,.75);transform:rotate(-8deg);z-index:-1;filter:blur(1px)}
.nav .nm:hover,.nav .nm:focus-visible{animation:jpill .7s both;transform:none}
.nav .nm:hover::before,.nav .nm:focus-visible::before{background-color:#F7C6E6;background-image:radial-gradient(circle at 15% 30%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 70% 20%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 45% 75%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 88% 65%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 30% 85%,#fff 0 1px,transparent 2px),linear-gradient(115deg,#BDE4FF,#D9C8FF,#FFD6F0,#FFF3B0,#BDE4FF);background-size:34px 34px,41px 41px,29px 29px,37px 37px,23px 23px,300% 100%;animation:glit 1.6s linear infinite}
.nav .nm:hover::after,.nav .nm:focus-visible::after{inset:0;left:0;top:0;width:auto;height:auto;border-radius:0;transform:none;filter:none;background:radial-gradient(circle at 20% 50%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 60% 30%,#fff 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,#fff 0 1.5px,transparent 2.5px);background-size:46px 46px,38px 38px,52px 52px;animation:twink .5s steps(2) infinite;mix-blend-mode:overlay;-webkit-mask:inherit;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none'%3E%3Cpath d='M34 64C10 64 4 42 24 36C20 18 44 10 56 20C62 4 92 0 102 16C114 4 144 8 148 26C168 18 194 30 182 46C194 58 186 66 168 66Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(prefers-reduced-motion:reduce){.nav .nm:hover,.nav .nm:hover::before,.nav .nm:hover::after{animation:none}}
/* hang tags under the bag */
.jtags{list-style:none;margin:1.1rem auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.jtags li{position:relative;width:8.2rem;padding:1.15rem .8rem .7rem;border-radius:14px 14px 18px 18px;font:700 .86rem/1.25 var(--f-d);text-align:center;box-shadow:inset 0 2px 4px rgba(255,255,255,.9),inset 0 -4px 8px rgba(0,0,0,.07),0 8px 14px -9px rgba(42,20,32,.4);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.jtags li::before{content:"";position:absolute;top:.45rem;left:50%;width:.55rem;height:.55rem;margin-left:-.275rem;border-radius:50%;background:var(--cream);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.jtags li:nth-child(1){background:var(--lilac);transform:rotate(-3deg)}.jtags li:nth-child(2){background:var(--butter);transform:rotate(2deg)}.jtags li:nth-child(3){background:var(--blush);transform:rotate(-2deg)}
.jtags li:hover{transform:translateY(-4px) rotate(0) scale(1.05)}
.jtags li span{display:block;font-weight:800;color:var(--red);text-transform:uppercase;font-size:.68rem;letter-spacing:.12em;margin-bottom:.2rem}
.nav .nm,.nav .nm:hover,.nav .nm:focus-visible{text-decoration:none!important}
.nav .nm span{text-decoration:none!important}
.hero .s-squig{left:44%;bottom:-4%}

/* jelly name */
.who{flex-wrap:nowrap;margin:0 0 1.6rem;font-size:clamp(2rem,5.6vw,4.2rem)}
.who .tg.jl{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;color:#fff;background:radial-gradient(ellipse 70% 40% at 28% 18%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),linear-gradient(180deg,#FF86BC,#E5388F 60%,#C9247A);padding:.12em .55em .2em;border-radius:999px;transform:rotate(-2deg);
text-shadow:0 2px 0 rgba(130,10,70,.45),0 0 14px rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.65);
box-shadow:inset 0 .08em .12em rgba(255,255,255,.85),inset 0 -.14em .22em rgba(120,0,70,.35),0 .3em .5em -.15em rgba(180,35,94,.55),0 1em 1.6em -1em rgba(180,35,94,.6);
animation:jbob 4.6s ease-in-out infinite;cursor:default;outline:none}
.who .tg.jl::after{content:"";position:absolute;right:9%;top:14%;width:.28em;height:.14em;border-radius:50%;background:rgba(255,255,255,.8);transform:rotate(-20deg)}
.who .tg.jl:hover,.who .tg.jl:focus-visible{animation:jpill .8s both;--r:2deg}
@media(prefers-reduced-motion:reduce){.who .tg.jl,.who .tg.jl:hover{animation:none}}
.who .tg.jl::after{display:none}

/* glitter specs */
.specs{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.sp{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 6px 1px var(--c),0 0 0 1px rgba(255,255,255,.6);opacity:.9;animation:specs var(--t) ease-in-out var(--d) infinite}
.sp.x{border-radius:0;background:none;box-shadow:none;width:calc(var(--s)*1.6);height:calc(var(--s)*1.6)}
.sp.x::before,.sp.x::after{content:"";position:absolute;left:50%;top:50%;background:var(--c);border-radius:2px;box-shadow:0 0 6px var(--c)}
.sp.x::before{width:100%;height:2px;transform:translate(-50%,-50%)}.sp.x::after{width:2px;height:100%;transform:translate(-50%,-50%)}
@keyframes specs{0%,100%{opacity:.15;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.sp{animation:none;opacity:.7}}
.sp{opacity:1;box-shadow:0 0 5px 1px var(--c)}
/* jelly light grey case study backgrounds */
.pcard .pimg,.pcard.c1 .pimg,.pcard.c2 .pimg,.pcard.c3 .pimg{background:radial-gradient(ellipse 60% 35% at 25% 10%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),linear-gradient(180deg,#EEF0F4,#DADDE5);border:2px solid rgba(255,255,255,.85);box-shadow:inset 0 4px 8px rgba(255,255,255,.95),inset 0 -10px 18px rgba(80,90,110,.14),0 14px 24px -14px rgba(42,20,32,.35)}
.pimg::before{background:linear-gradient(115deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 38%)}
.pimg::after{background:linear-gradient(transparent,rgba(90,100,120,.14))}
.pimg img{box-shadow:0 14px 26px -12px rgba(42,20,32,.4)}
/* light blue hero jelly */
.who .tg.jl{color:var(--plum);background:radial-gradient(ellipse 70% 40% at 28% 18%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),linear-gradient(180deg,#D6EEFF,#A9D8F8 60%,#8CC8F0);text-shadow:0 1px 0 rgba(255,255,255,.7);box-shadow:inset 0 .08em .12em rgba(255,255,255,.95),inset 0 -.14em .22em rgba(60,120,185,.3),0 .3em .5em -.15em rgba(70,130,195,.5),0 1em 1.6em -1em rgba(70,130,195,.55)}
.hero .btn:not(.alt){background-color:#A9D8F8;background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 55%);color:var(--plum);box-shadow:inset 0 2px 4px rgba(255,255,255,.9),inset 0 -4px 8px rgba(60,120,185,.25),0 10px 18px -10px rgba(70,130,195,.7)}
.hero .btn:not(.alt):hover{background-color:#BFE3FB;color:var(--plum)}
.hero .btn.alt{color:#2F6FA8;box-shadow:inset 0 0 0 1.5px #8CC8F0;background:rgba(255,255,255,.5)}
.hero .btn.alt:hover{background:#D6EEFF;color:var(--plum)}

/* case study at-a-glance + accordion */
.glance{margin:1.25rem 0 2rem}
.glance dl.specblock{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));font-size:.92rem;box-shadow:none;border:1.5px solid var(--line)}
.glance .specblock div{display:block;border-top:0;border-left:1px solid var(--line);padding:.6rem .9rem}.glance .specblock div:first-child{border-left:0}
.glance dt{border:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.15rem}.glance dd{margin:0}
.glance .gl{margin:.7rem 0 0;font-size:.98rem}.glance .gl strong{font:800 .7rem var(--f-d);text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin-right:.5rem}
.glance details.more{margin-top:.8rem}.glance summary{cursor:pointer;font:700 .85rem var(--f-d);color:var(--red)}.glance details dl.specblock{margin-top:.6rem;display:block}
.glance details .specblock div{display:grid;grid-template-columns:8rem 1fr;border-left:0;border-top:1px solid var(--line)}
.complead{margin:1rem 0 0;font-style:italic;color:var(--muted)}
.accbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:16px;text-align:left}
.accbtn:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.accimg{display:block;position:relative}
.accimg img{display:block;width:100%;height:auto;animation:accin .4s cubic-bezier(.3,1.4,.5,1)}
.accbtn:hover .accimg{filter:brightness(.98)}
@keyframes accin{from{opacity:0;transform:scale(.97) translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.accimg img{animation:none}}
.accimg img[hidden]{display:none}
/* flat case study cards: no gradients */
.pcard .pimg,.pcard.c1 .pimg,.pcard.c2 .pimg,.pcard.c3 .pimg{background:#ECEEF3;background-image:none;box-shadow:0 14px 24px -16px rgba(42,20,32,.3)}
.pimg::before,.pimg::after{background:none!important;content:none}
.pimg.wide{align-items:center;padding-bottom:1.5rem}.pimg.wide img{border-radius:12px}
.pimg.zoom{justify-content:flex-start;align-items:flex-start;padding:1.25rem 0 0 1.25rem}.pimg.zoom img{flex:none;width:175%;max-width:none;border-radius:12px 0 0 0;box-shadow:0 10px 24px -12px rgba(42,20,32,.4)}
.glance dl.specblock{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}

/* smart pill chip */
.pillitem{cursor:pointer}
.pillitem .ph1,.pillitem .ph2,.pillitem .chk{transition:fill .2s,stroke .2s,opacity .2s}
.pillitem.on .ph1,.pillitem.on .ph2{fill:#CFE0FF;stroke:#2563EB}
.pillitem.on .chk{opacity:1}
.pillitem:hover .spk{animation:twink .5s steps(2) infinite}
/* ladybug flaps instead of squashing */
.nav .nm:hover,.nav .nm:focus-visible{animation:none;transform:translateY(-2px) rotate(-1deg)}
.nav .nm:hover .lady,.nav .nm:focus-visible .lady{animation:none}
.nav .nm:hover .wl,.nav .nm:focus-visible .wl{transition:none;animation:flapl .22s ease-in-out infinite alternate}
.nav .nm:hover .wr,.nav .nm:focus-visible .wr{transition:none;animation:flapr .22s ease-in-out infinite alternate}
@keyframes flapl{from{transform:rotate(0)}to{transform:rotate(-38deg) scaleX(.92)}}
@keyframes flapr{from{transform:rotate(0)}to{transform:rotate(38deg) scaleX(.92)}}
@media(prefers-reduced-motion:reduce){.nav .nm:hover .wl,.nav .nm:hover .wr{animation:none}}

/* interactive offer details */
.hotwrap{position:relative}.hotwrap img{display:block;width:100%}
.hot{position:absolute;padding:0;border:0;background:rgba(255,201,60,.0);border-radius:6px;cursor:pointer;animation:hotpulse 2.2s ease-out infinite}
.hot:hover,.hot:focus-visible{background:rgba(255,201,60,.35);outline:2px solid #FFC93C}
@keyframes hotpulse{0%{box-shadow:0 0 0 0 rgba(255,201,60,.9)}80%,100%{box-shadow:0 0 0 12px rgba(255,201,60,0)}}
dialog#offerdlg{border:0;padding:1rem;border-radius:22px;background:#fff;max-width:min(92vw,560px);box-shadow:0 30px 80px -20px rgba(42,20,32,.55);animation:dlgin .35s cubic-bezier(.3,1.5,.5,1)}
dialog#offerdlg::backdrop{background:rgba(42,20,32,.45);backdrop-filter:blur(3px)}
dialog#offerdlg img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:12px}
.dclose{position:absolute;right:.6rem;top:.4rem;z-index:2;width:2.2rem;height:2.2rem;border-radius:50%;border:0;background:var(--plum);color:#fff;font:700 1.4rem/1 var(--f-d);cursor:pointer}
@keyframes dlgin{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hot,dialog#offerdlg{animation:none}}

/* embedded at-a-glance band */
.glance{margin:1.5rem 0 2.25rem}
.glance dl.specblock{background:var(--blush);border:0;border-radius:28px;box-shadow:none;padding:.4rem .5rem;gap:0;overflow:hidden}
.glance .specblock div{border-left:2px solid rgba(255,255,255,.7);padding:.9rem 1.2rem}.glance .specblock div:first-child{border-left:0}
.glance dt{color:var(--red);opacity:.9}
.glance dd{font:500 1rem/1.4 var(--f-b,inherit)}
@media(max-width:700px){.glance .specblock div{border-left:0;border-top:2px solid rgba(255,255,255,.7)}.glance .specblock div:first-child{border-top:0}}

/* in-frame offer modal */
.dev{position:relative}
.ovl{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(10,20,40,.55);border-radius:inherit;animation:ovin .25s ease-out;padding:4%}
.ovl[hidden]{display:none}
.ovlbox{position:relative;max-width:min(88%,560px);max-height:100%}
.ovlbox img{display:block;width:100%;height:auto;max-height:100%;border-radius:14px;box-shadow:0 18px 50px -10px rgba(0,0,0,.5);animation:dlgin .35s cubic-bezier(.3,1.5,.5,1)}
.ovlx{position:absolute;right:-.5rem;top:-.5rem;z-index:2;width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid #fff;background:var(--plum);color:#fff;font:700 1.3rem/1 var(--f-d);cursor:pointer}
@keyframes ovin{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.ovl,.ovlbox img{animation:none}}
/* more work: screens side by side */
.rowfigs.hl{flex-wrap:nowrap;gap:1.25rem;align-items:flex-start;justify-content:center}
.rowfigs.hl .fg.d{flex:1 1 0;min-width:0;width:auto}
.rowfigs.hl .fg.m{flex:0 0 230px;width:230px}
.rowfigs.hl .fg.c{flex:0 1 340px}
.rowfigs.hl .fg figcaption{max-width:none}
@media(max-width:820px){.rowfigs.hl{flex-wrap:wrap}.rowfigs.hl .fg.d{flex:1 1 100%;width:100%}}
.rowfigs.hl .fg.d{width:0;flex:1 1 0}.rowfigs.hl .fg.d figcaption{overflow-wrap:anywhere}@media(max-width:820px){.rowfigs.hl .fg.d{width:100%;flex:1 1 100%}}

/* calmer brand pill palette */
.bpills li.j-peach{--bg:#FFD6BC}.bpills li.j-lime{--bg:#D3EE6F}.bpills li.j-pink{--bg:#F9D3DF}.bpills li.j-blue{--bg:#C9E3F8}.bpills li.j-green{--bg:#C7EBD3}

/* blingy sandal link */
#hl li.hasbling{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.sandal{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none;color:var(--ink);font:700 .85rem var(--f-d);border-radius:18px;padding:.4rem .6rem}
.sandal .sdl{width:150px;height:100px;overflow:visible;filter:drop-shadow(0 8px 8px rgba(184,134,11,.35));transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.sandal:hover .sdl,.sandal:focus-visible .sdl{animation:jelly .7s;transform:rotate(-6deg) scale(1.08)}
.sandal:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sandal span{color:var(--red)}.sandal:hover span{text-decoration:underline}
.sdl .tw{transform-box:fill-box;transform-origin:center;animation:twk 1.8s ease-in-out infinite}.sdl .t2{animation-delay:-.6s}.sdl .t3{animation-delay:-1.2s}
@keyframes twk{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
@media(max-width:700px){#hl li.hasbling{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sdl .tw,.sandal:hover .sdl{animation:none}}
.sandal .sdl{width:190px;height:127px}
.pcard .pimg,.pcard.c1 .pimg,.pcard.c2 .pimg,.pcard.c3 .pimg{background:#D4D9E3}
.fg.zoomed .scr{overflow-x:hidden}.fg.zoomed .scr img{max-width:none}
/* leadership cards: no sideways scroll */
.lead .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;overflow:visible;scroll-snap-type:none;padding:.5rem 0 1rem}
.lead .cols>div{flex:none;min-width:0;padding:1.1rem 1.25rem;border-radius:20px;font-size:.9rem;line-height:1.5}
.lead .cols>div p{font-size:.9rem;line-height:1.5;margin:.4rem 0 0}
.lead .cols h3{font-size:1.2rem;margin:0}

/* what I bring rows */
ul.bring li{display:grid;grid-template-columns:8rem 1fr;gap:1rem;align-items:baseline}
ul.bring strong{font:800 .75rem var(--f-d);text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
@media(max-width:600px){ul.bring li{grid-template-columns:1fr;gap:.2rem}}

.lead .cols.one{display:block}
.lead .cols.one>div{background:var(--blush);max-width:62rem;padding:1.5rem 1.75rem;font-size:1rem}
.lead .cols.one>div:hover{transform:none}
.lead .cols.one p{font-size:1.02rem;line-height:1.6;margin:0 0 .9rem}.lead .cols.one p:last-child{margin-bottom:0}
.lead .cols.one strong{color:var(--red)}
/* smaller light blue contact card */
#contact{background:#CFE6FA;color:var(--plum);padding:1.5rem 1.75rem;margin:2.5rem 0;max-width:34rem;border-radius:24px;box-shadow:inset 0 3px 6px rgba(255,255,255,.9),inset 0 -6px 12px rgba(60,120,185,.18),0 14px 26px -16px rgba(70,130,195,.6)}
#contact h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--plum);margin:0 0 .4rem}
#contact p{margin:.3rem 0;font-size:1rem}
#contact::before,#contact::after{display:none}
#contact .btn{background:#fff;color:#2F6FA8;box-shadow:0 8px 14px -8px rgba(70,130,195,.7)}#contact .btn:hover{background:var(--plum);color:#fff}
/* more work: grey card backgrounds */
.rowfigs.hl,#hl li:nth-child(n) .rowfigs.hl{background:#D4D9E3}
/* clickable quiz prototype */
.qgo{position:absolute;padding:0;border:0;background:transparent;border-radius:999px;cursor:pointer;animation:hotpulse 2.2s ease-out infinite}
.qgo:hover,.qgo:focus-visible{background:rgba(255,201,60,.3);outline:2px solid #FFC93C}
.qnav{display:flex;gap:.4rem;justify-content:center;margin:.75rem 0 0}
.qdot{width:30px;height:30px;border-radius:50%;border:2px solid rgba(42,20,32,.25);background:#fff;color:var(--plum);font:600 .8rem/1 "DM Sans",sans-serif;cursor:pointer;padding:0}
.qdot.on{background:var(--plum);border-color:var(--plum);color:#fff}
.qs[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.qgo{animation:none}}
/* channel lineup: equal screen heights so bottoms align */
#hl li:nth-child(3) .rowfigs.hl .fg.d .scr{height:450px;max-height:450px}
.ctext{display:flex;align-items:center;justify-content:center;text-align:center;min-height:220px;padding:2rem;font:600 clamp(1.3rem,2.6vw,1.9rem)/1.2 "Fraunces",Georgia,serif;color:var(--plum)}
ul.meas{margin:.25rem 0 1rem;padding-left:1.25rem}ul.meas li{margin:.3rem 0}
.pimg:has(.ctext){display:flex;align-items:center;justify-content:center}.pimg .ctext{min-height:0}
/* case study story template */
main.case h1{max-width:20ch}
.ovw{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:0;margin:1.5rem 0 1.75rem;background:#fff;border-radius:28px;padding:1.4rem .6rem;box-shadow:0 14px 28px -20px rgba(42,20,32,.4)}
.ovw>div{padding:0 1.3rem;border-left:1.5px solid var(--line)}.ovw>div:first-child{border-left:0}
.ovw h2{font:800 .7rem var(--f-d);text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin:0 0 .4rem}
.ovw p{margin:0;font-size:.98rem;line-height:1.5}.ovw .chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.ovw .chips span{background:var(--blush);border-radius:999px;padding:.2rem .7rem;font:600 .78rem var(--f-d)}
@media(max-width:860px){.ovw{grid-template-columns:1fr 1fr;row-gap:1rem}.ovw>div{border-left:0}.ovw .ovx{grid-column:1/-1}}
@media(max-width:520px){.ovw{grid-template-columns:1fr}}
.eb{font:800 .72rem var(--f-d);text-transform:uppercase;letter-spacing:.12em;color:var(--red);margin:0 0 .5rem}
.gl3{margin:0 0 1.5rem}.gl3g{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.glc{background:var(--blush);border-radius:22px;padding:1.1rem 1.3rem}.glc:nth-child(2){background:var(--lilac)}.glc:nth-child(3){background:var(--butter)}
.glc h3{font:800 .95rem var(--f-d);margin:0 0 .35rem}.glc p{margin:0;font-size:.98rem;line-height:1.5}
.toc{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin:1.5rem 0 2rem;font-size:.85rem}
.toc span{font:800 .7rem var(--f-d);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-right:.3rem}
.toc a{text-decoration:none;color:var(--plum);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.25rem .75rem;font:600 .8rem var(--f-d)}.toc a:hover,.toc a:focus-visible{border-color:var(--red);color:var(--red)}
.story{display:grid;gap:1.25rem}
.story .st{background:#fff;border-radius:28px;padding:clamp(1.25rem,3vw,2.25rem);box-shadow:0 14px 28px -22px rgba(42,20,32,.4);scroll-margin-top:90px;border-top:0}
.story .st h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 .9rem}.story .st p{max-width:42rem}.story .st .stage{margin-left:0}
.story .gl3g.keys{margin-top:1.25rem}
.nextcs{margin:3rem 0 1.5rem}.nextcs h2{font-size:1.5rem;margin:0 0 1rem}
.ncard{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:1.25rem;align-items:center;text-decoration:none;color:var(--plum);background:#D4D9E3;border-radius:28px;padding:1.25rem;transition:transform .3s}
.ncard:hover,.ncard:focus-visible{transform:translateY(-4px)}.ncard img{width:100%;max-height:200px;object-fit:cover;object-position:top;border-radius:16px;background:#fff}
.nct{display:grid;gap:.5rem}.nct strong{font:700 1.3rem/1.25 var(--f-d)}.nct .btn{justify-self:start}
@media(max-width:620px){.ncard{grid-template-columns:1fr}}
.ovw .chips span{border-radius:14px;line-height:1.35}
/* simple story layout */
.lede{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.5;max-width:40rem;margin:.75rem 0 1.5rem}
.facts{display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin:0 0 2.5rem;padding:1rem 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.facts div{min-width:7rem;max-width:16rem}.facts dt{font:800 .68rem var(--f-d);text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin:0 0 .15rem}.facts dd{margin:0;font-size:.95rem;line-height:1.4}
.story.simple{display:block}
.story.simple .sx{background:none;box-shadow:none;border-radius:0;padding:0;margin:0 0 3rem;border:0}
.story.simple .sx h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .8rem}
.story.simple .sx>p,.story.simple .steps{max-width:40rem;font-size:1.08rem;line-height:1.65}
.story.simple .sx>p{margin:0 0 1rem}
.steps{list-style:none;margin:1rem 0 1.25rem;padding:0;display:grid;gap:.9rem}
.steps li{padding-left:1.1rem;border-left:4px solid var(--blush)}.steps li:nth-child(3n+2){border-color:var(--lilac)}.steps li:nth-child(3n){border-color:var(--butter)}
.steps strong{display:block;font:700 1rem var(--f-d);margin-bottom:.15rem}
.story.simple ul.meas{max-width:40rem;font-size:1.08rem;line-height:1.65}
.story.simple .stage{margin-top:1.75rem}
.hdl{margin:1.75rem 0 0;max-width:40rem}.hdl .hq{font:700 clamp(1.3rem,2.6vw,1.75rem)/1.25 "Fraunces",Georgia,serif;margin:0 0 .35rem;color:var(--plum)}.hdl .hs{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.55}
.story.simple .hdl+.stage{margin-top:1.25rem}
/* big-number baseline */
.bn{margin:1.5rem 0 .5rem;max-width:44rem}
.bnr{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem}
.bnc{display:flex;flex-direction:column;gap:.3rem}
.bnv{font:800 clamp(2.8rem,8vw,5rem)/1 "Fraunces",Georgia,serif;color:var(--red);letter-spacing:-.02em}
.bnc.d .bnv{color:#8A8FA3}
.bnl{font:600 .95rem/1.35 var(--f-d)}
.bns{font:700 clamp(1.4rem,3vw,2rem)/1.25 "Fraunces",Georgia,serif;margin:1.75rem 0;padding:1.1rem 1.3rem;background:var(--butter);border-radius:22px;max-width:none!important}
.bnn{margin:1.25rem 0 0;font-size:.88rem;color:var(--muted);max-width:none!important}
@media(max-width:520px){.bnr{grid-template-columns:1fr}}
/* branching journey diagram */
.brn{display:flex;flex-direction:column;align-items:center;margin:1.75rem 0 .5rem;max-width:44rem;text-align:center}
.brt{background:#fff;border:2px solid var(--plum);border-radius:14px;padding:.8rem 1.4rem;min-width:14rem;font:600 1rem var(--f-d);color:#6f6a73;text-align:left;box-shadow:0 8px 16px -12px rgba(42,20,32,.5)}
.brm{background:#CFE6FA;border-radius:999px;padding:.55rem 1.4rem;font:800 .95rem var(--f-d);color:var(--plum);box-shadow:inset 0 3px 6px rgba(255,255,255,.9),inset 0 -5px 10px rgba(60,120,185,.2)}
.brl{width:2px;height:1.4rem;background:var(--plum);opacity:.5}
.brg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;width:100%;padding-top:1.4rem}
.brg::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:2px;background:var(--plum);opacity:.5}
.brg::after{content:"";position:absolute;top:-1.4rem;left:50%;width:2px;height:1.4rem;background:var(--plum);opacity:.5}
.brf{position:relative;border-radius:18px;padding:1rem .6rem;font:700 .95rem/1.25 var(--f-d);background:var(--blush)}
.brf::before{content:"";position:absolute;top:-1.4rem;left:50%;width:2px;height:1.4rem;background:var(--plum);opacity:.5}
.brf:nth-child(2){background:var(--lilac)}.brf:nth-child(3){background:var(--butter)}.brf:nth-child(4){background:#D5F0DC}
@media(max-width:560px){.brg{grid-template-columns:1fr 1fr;row-gap:1.4rem}.brg::before,.brg::after{display:none}.brf::before{display:none}.brl:last-of-type{display:none}.brg{padding-top:1rem}}
.brg::before{left:calc((100% - 2.25rem)/8);right:calc((100% - 2.25rem)/8)}.brg::after{display:none}
@media(max-width:560px){.brm+.brl{display:none}.brm{margin-bottom:1rem}}
/* case studies: grey stages, no pink */
.story.simple .stage,.story.simple .stage.s1,.story.simple .stage.s2,.story.simple .stage.s3{background:#D4D9E3}
.steps li,.steps li:nth-child(3n+2),.steps li:nth-child(3n){border-color:#C4CAD8}
.brf,.brf:nth-child(2),.brf:nth-child(3),.brf:nth-child(4){background:#D4D9E3}
.bns{background:#E4E8F0}
/* streamlined image backgrounds in case studies */
.story.simple .stage{width:fit-content;max-width:100%;padding:1rem 1.25rem 1.1rem;border-radius:22px;margin:1.25rem 0;box-sizing:border-box}
.story.simple .stage .figgrp{font:700 .95rem var(--f-d);margin:0 0 .75rem}
.story.simple .stage .scrollnote{display:none}
.story.simple .stage .rowfigs{gap:1.25rem;justify-content:flex-start}
.story.simple .stage .figgrp+.rowfigs{margin-top:0}
.pcard[href$="acquisition"] .pimg img{flex:none;width:52%;max-width:none;height:auto;align-self:flex-start}
/* decision matrix */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dm{margin:1.5rem 0;overflow:hidden;border-radius:22px;background:#E4E8F0}
.dm table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.45}
.dm th,.dm td{padding:1rem 1.1rem;text-align:left;vertical-align:top;border-bottom:2px solid #fff}
.dm thead th{font:800 .68rem var(--f-d);text-transform:uppercase;letter-spacing:.1em;color:var(--plum);background:#D4D9E3;vertical-align:bottom}
.dm tbody th{font:700 1rem/1.35 var(--f-d);width:22%}
.dm tbody tr:last-child th,.dm tbody tr:last-child td{border-bottom:0}
@media(max-width:760px){.dm table,.dm tbody,.dm tr,.dm th,.dm td{display:block;width:auto}.dm thead{display:none}.dm tr{padding:.5rem 0;border-bottom:2px solid #fff}.dm th,.dm td{border:0;padding:.35rem 1.1rem}.dm td::before{content:attr(data-l);display:block;font:800 .65rem var(--f-d);text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin-bottom:.1rem}.dm tbody th{width:auto}}
.hotwrap video.qvid{display:block;width:100%;height:auto}
/* service-eligibility: no panels behind screens, readable decision grid, side-by-side redesign */
.story.simple.se .stage{background:none;padding:0;border-radius:0;width:100%;margin:1.25rem 0}
.story.simple.se .stage .rowfigs{flex-wrap:nowrap;align-items:flex-start;gap:1.75rem}
.story.simple.se .stage .rowfigs .fg.m{flex:0 0 auto}
.story.simple.se .stage .rowfigs .fg.d{flex:1 1 0;width:0;min-width:0}
.story.simple.se .stage .fg.d .scr{max-height:none;height:auto;overflow:hidden}
@media(max-width:820px){.story.simple.se .stage .rowfigs{flex-wrap:wrap}.story.simple.se .stage .rowfigs .fg.d{flex:1 1 100%;width:100%}}
.dm{background:#fff;border:1.5px solid #2A1420;border-radius:18px}
.dm th,.dm td{border-bottom:1px solid #E3DEE0;font-size:.95rem;color:#2A1420}
.dm thead th{background:#2A1420;color:#fff;border-bottom:0}
.dm tbody th{background:#F6F3F4;border-right:1px solid #E3DEE0}
.dm tbody tr:nth-child(even) td{background:#FBFAFA}
.dm tbody tr:last-child th,.dm tbody tr:last-child td{border-bottom:0}
@media(max-width:760px){.dm tr{border-bottom:1px solid #E3DEE0}.dm tbody th{border-right:0}}
/* soft clear-white cloud logo */
.nav .nm{filter:drop-shadow(0 6px 10px rgba(42,20,32,.12))}
.nav .nm::before{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5) 75%,rgba(255,255,255,.4))}
.nav .nm::after{background:rgba(255,255,255,.9)}
.nav .nm:hover::before,.nav .nm:focus-visible::before{background-color:rgba(255,255,255,.7)}
/* clear white jelly name */
.who .tg.jl{color:var(--plum);background:radial-gradient(ellipse 70% 40% at 28% 18%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.4));text-shadow:none;border:2px solid rgba(255,255,255,.9);box-shadow:inset 0 .08em .12em rgba(255,255,255,.95),inset 0 -.12em .2em rgba(42,20,32,.05),0 .3em .6em -.25em rgba(42,20,32,.2),0 1em 1.6em -1.1em rgba(42,20,32,.2)}
.srcs{font-size:.9rem;color:var(--plum);opacity:.85}.srcs a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hsub{display:block;font:600 1.05rem/1.3 "Inter",system-ui,sans-serif;color:var(--plum);opacity:.75;margin:.15rem 0 .5rem}
.aicard .aitag{font:700 1.15rem/1.3 "Fraunces",Georgia,serif;margin:.1rem 0 .6rem}.aicard p{margin:.35rem 0}
.lead .lead2{font-size:1.25rem;line-height:1.45}.lead ul.prin{list-style:none;padding:0;margin:.5rem 0 0}.lead ul.prin li{margin:.8rem 0;padding-left:1rem;border-left:3px solid #D4D9E3}