:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Editorial agency layout: quiet white pages, left-aligned large type, full-bleed case imagery,
   a full-screen menu, a featured-case reel as the one moving moment, FAQ in an accordion. */
:root{
  --paper:#FFFFFF; --ink:#000000; --ink-2:#5C5C5C; --rule:#D2D2D2; --tint:#EEEEEE;
  --red:#D7282F; --navy:#23465A; --black:#000000; --grey:#D2D2D2; --on-navy:#FFFFFF; --on-navy-2:#B9C6CE;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,4vw,56px); --max:1440px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#000000; --ink:#FFFFFF; --ink-2:#A6A6A6; --rule:#333333; --tint:#161616; color-scheme:dark}}
:root[data-theme="dark"]{--paper:#000000; --ink:#FFFFFF; --ink-2:#A6A6A6; --rule:#333333; --tint:#161616; color-scheme:dark}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--paper)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-weight:500;text-wrap:balance}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.dark-logo{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mono-inv{filter:invert(1)}}
:root[data-theme="dark"] .mono-inv{filter:invert(1)}

/* Type scale */
.display{font-size:clamp(2.9rem,8.4vw,8.25rem);line-height:.98;letter-spacing:-.035em;font-weight:500}
.t1{font-size:clamp(2.3rem,5.4vw,5rem);line-height:1.02;letter-spacing:-.03em;font-weight:500}
.t2{font-size:clamp(1.75rem,3.4vw,3rem);line-height:1.08;letter-spacing:-.022em;font-weight:500}
.t3{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.25;letter-spacing:-.01em;font-weight:500}
.lede{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;color:var(--ink-2);max-width:38ch}
.statement{font-size:clamp(1.6rem,3.3vw,2.9rem);line-height:1.18;letter-spacing:-.02em;font-weight:400;max-width:24ch}
.meta{font-size:.875rem;color:var(--ink-2)}
.dim{color:var(--ink-2)}

/* Links and buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:1rem;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--red);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:2px;transition:background-size .3s}
.ul:hover{background-size:0 1.5px;background-position:100% 100%}
.arrow-link{display:inline-flex;align-items:center;gap:.5em;font-weight:500}
.arrow-link svg{width:1em;height:1em;transition:transform .25s}
.arrow-link:hover svg{transform:translateX(4px)}

/* Header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);transition:transform .35s ease}
.hdr.up{transform:translateY(-110%)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:76px}
.logo img{height:26px;width:auto}
.nav{display:flex;gap:30px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav a{padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.lang{display:flex;gap:2px;font-size:.82rem}
.lang button{background:none;border:0;padding:6px 7px;cursor:pointer;color:var(--ink-2);border-radius:6px}
.lang button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.hdr .btn{min-height:42px;padding:0 20px;font-size:.92rem}
.menu-btn{display:none;margin-left:auto;background:none;border:0;cursor:pointer;font-weight:500;font-size:.95rem;align-items:center;gap:10px;padding:10px 0}
.menu-btn i{display:grid;gap:5px;width:22px}
.menu-btn i::before,.menu-btn i::after{content:"";height:1.5px;background:currentColor;transition:transform .3s}
.menu-open .menu-btn i::before{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:980px){.nav,.hdr .lang,.hdr .btn{display:none}.menu-btn{display:inline-flex}}

/* Full-screen menu */
.overlay{position:fixed;inset:0;z-index:45;background:var(--paper);padding-top:calc(env(safe-area-inset-top,0px) + 96px);padding-bottom:env(safe-area-inset-bottom,0px);display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s;overflow:auto}
.menu-open .overlay{visibility:visible;opacity:1;transition:opacity .3s}
.menu-open{overflow:hidden}
.overlay .wrap{width:100%;display:flex;flex-direction:column;gap:40px;flex:1}
.olinks{display:flex;flex-direction:column}
.olinks a{font-size:clamp(2.4rem,9vw,4.5rem);line-height:1.12;letter-spacing:-.03em;font-weight:500;padding:4px 0;transform:translateY(16px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
.menu-open .olinks a{transform:none;opacity:1}
.menu-open .olinks a:nth-child(2){transition-delay:.04s}.menu-open .olinks a:nth-child(3){transition-delay:.08s}.menu-open .olinks a:nth-child(4){transition-delay:.12s}.menu-open .olinks a:nth-child(5){transition-delay:.16s}
.olinks a[aria-current="page"]{color:var(--red)}
.ofoot{margin-top:auto;padding-bottom:32px;display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:end;font-size:.95rem}
.ofoot .lang{font-size:1rem}

/* Sections */
section{padding:clamp(72px,10vw,150px) 0}
.tight{padding-top:0}
.rule-top{border-top:1px solid var(--rule)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(32px,4vw,56px);flex-wrap:wrap}

/* Home hero */
.hero{padding-top:clamp(48px,8vw,120px);padding-bottom:clamp(40px,5vw,72px)}
.hero h1{max-width:12ch}
.hero-foot{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-top:clamp(36px,5vw,64px)}
.hero-foot .cta{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:760px){.hero-foot{grid-template-columns:1fr}}

/* Featured reel: the one moving moment */
.reel{position:relative;margin:0 auto;max-width:var(--max);padding:0 max(var(--gut),env(safe-area-inset-left,0px))}
.reel-stage{position:relative;aspect-ratio:16/8.33;overflow:hidden;background:var(--tint);border-radius:4px}
@media (max-width:760px){.reel-stage{aspect-ratio:4/5}}
.reel-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:block}
.reel-slide.on{opacity:1;z-index:1}
.reel-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s linear}
.reel-slide.on img{transform:scale(1)}
.reel-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55))}
.reel-cap{position:absolute;left:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,40px);z-index:2;color:#fff;max-width:640px}
.reel-cap b{display:block;font-weight:600;font-size:.95rem;margin-bottom:8px}
.reel-cap span{font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1.15;letter-spacing:-.02em;font-weight:500}
.reel-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);margin-top:18px}
.reel-tabs button{background:none;border:0;text-align:left;cursor:pointer;padding:12px 0 0;position:relative;color:var(--ink-2);font-size:.9rem;line-height:1.35}
.reel-tabs .bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule);overflow:hidden}
.reel-tabs .bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.reel-tabs button[aria-selected="true"]{color:var(--ink)}
.reel-tabs b{display:block;color:var(--ink);font-weight:600}
@media (max-width:600px){.reel-tabs small{display:none}}

/* Statement */
.stmt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
.stmt-grid .label{font-weight:500}
.pillars{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);font-weight:500;transition:box-shadow .2s,background .2s}
.pill:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (max-width:760px){.stmt-grid{grid-template-columns:1fr}}

/* Project grid: staggered two columns, client names only */
.pgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(16px,3vw,48px);row-gap:clamp(36px,5vw,72px)}
.pgrid > a:nth-child(even){margin-top:clamp(60px,10vw,160px)}
.ptile .ph{overflow:hidden;background:var(--tint);aspect-ratio:4/5;border-radius:4px}
.ptile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ptile:hover img{transform:scale(1.035)}
.ptile h3{margin-top:16px;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.01em}
.ptile p{color:var(--ink-2);margin-top:4px;font-size:.95rem;max-width:44ch}

/* Range + logos */
.range{font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.02em;font-weight:500;max-width:22ch}
.marquee{overflow:hidden;margin-top:clamp(40px,5vw,64px);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 60s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track img{height:42px;width:auto;margin:0 clamp(28px,3.5vw,52px);opacity:.8;object-fit:contain;max-width:140px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:28px}.mq-track .dup{display:none}}

/* Shelf (latest-style cards) */
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,26vw,360px);gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(var(--gut),env(safe-area-inset-left,0px)) 12px;scroll-padding-inline:max(var(--gut),env(safe-area-inset-left,0px));scrollbar-width:none;max-width:var(--max);margin:0 auto}
.shelf::-webkit-scrollbar{display:none}
.scard{scroll-snap-align:start}
.scard .ph{aspect-ratio:4/3;overflow:hidden;background:var(--tint);border-radius:4px}
.scard img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.scard:hover img{transform:scale(1.04)}
.scard .tag{display:inline-block;margin-top:16px;font-size:.8rem;font-weight:500;color:var(--ink-2)}
.scard h3{margin-top:4px;font-size:1.06rem;line-height:1.35}
.shelf-ctrl{display:flex;gap:8px}
.shelf-ctrl button{width:46px;height:46px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px var(--rule);background:var(--paper);cursor:pointer;display:grid;place-items:center}
.shelf-ctrl button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.shelf-ctrl svg{width:18px;height:18px}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:18px;height:18px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .3s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .ans{padding:0 0 28px;color:var(--ink-2);max-width:62ch;font-size:1.05rem}
@media (max-width:760px){.faq-grid{grid-template-columns:1fr}}

/* CTA band */
.cta-band{background:var(--navy);color:var(--on-navy)}
.cta-band .t1{max-width:14ch}
.cta-band p{color:var(--on-navy-2);margin-top:20px;font-size:1.15rem}
.cta-band .btn{background:var(--on-navy);color:#0E2533;margin-top:36px}
.cta-band .btn:hover{background:var(--red);color:#fff}

/* Footer */
footer{padding:clamp(56px,7vw,96px) 0 32px;border-top:1px solid var(--rule)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:32px}
.fgrid h4{font-size:.85rem;font-weight:500;color:var(--ink-2);margin-bottom:14px}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fgrid a:hover{color:var(--red)}
.fword{width:min(100%,560px);height:auto;margin:clamp(48px,7vw,96px) 0 28px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:20px}
.social{display:flex;gap:18px}
@media (max-width:860px){.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fgrid .fbrand{grid-column:1/-1}}
@media (max-width:520px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fgrid a{overflow-wrap:anywhere}

/* Page heads */
.phead{padding-top:clamp(48px,7vw,110px);padding-bottom:clamp(36px,5vw,64px)}
.phead .lede{margin-top:28px}

/* What we do */
.disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px;padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--rule)}
.disc:last-child{border-bottom:1px solid var(--rule)}
.disc .name{position:sticky;top:110px;align-self:start}
.disc .name p{margin-top:16px;color:var(--ink-2);max-width:30ch;font-size:1.05rem}
.disc .name a{margin-top:24px}.disc .name a.cs-link + a{margin-top:10px}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px;align-content:start}
.caps h3{font-size:1.15rem;margin-bottom:8px}
.caps p{color:var(--ink-2);font-size:.98rem}
@media (max-width:860px){.disc{grid-template-columns:1fr}.disc .name{position:static}.caps{grid-template-columns:1fr}}
.inds{columns:2;column-gap:clamp(24px,5vw,80px)}
.inds a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-top:1px solid var(--rule);break-inside:avoid;font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:500;letter-spacing:-.01em}
.inds a span{font-size:.85rem;color:var(--ink-2);font-weight:400}
.inds a:hover{color:var(--red)}
@media (max-width:700px){.inds{columns:1}}
.tk{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.tk h3{font-size:1.15rem;padding-bottom:14px;border-bottom:1.5px solid var(--ink);margin-bottom:6px}
.tk dl{margin:0}
.tk dt{font-weight:500;margin-top:16px}
.tk dd{margin:2px 0 0;color:var(--ink-2);font-size:.95rem}
@media (max-width:980px){.tk{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tk{grid-template-columns:1fr}}

/* Work */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.filters button{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:none;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;font-size:.9rem;font-weight:500;color:var(--ink-2)}
.filters button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.wcount{margin-top:20px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(16px,2.5vw,40px);row-gap:clamp(40px,5vw,72px)}
.wgrid .ptile .ph{aspect-ratio:4/5}
.wgrid .ptile .tag{display:block;margin-top:16px;font-size:.82rem;color:var(--ink-2);font-weight:500}
.wgrid .ptile h3{margin-top:4px;font-size:1.12rem;line-height:1.3}
@media (max-width:980px){.wgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.wgrid{grid-template-columns:1fr}.pgrid{grid-template-columns:1fr}.pgrid > a:nth-child(even){margin-top:0}}

/* Case */
.back{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.back:hover{color:var(--ink)}
.back svg{width:16px;height:16px}
.chead{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(36px,5vw,64px)}
.chead .client{display:flex;align-items:center;gap:14px;margin:clamp(28px,4vw,56px) 0 20px;font-weight:500}
.chead .client img{height:34px;width:auto;max-width:130px;object-fit:contain}
.chead h1{max-width:20ch}
.cbanner{max-width:var(--max);margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-left,0px))}
.cbanner img{width:100%;aspect-ratio:16/8.33;object-fit:cover;border-radius:4px;background:var(--tint)}
.cbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,5vw,80px)}
.spec{align-self:start;position:sticky;top:110px}
.spec dl{margin:0;display:grid;gap:22px}
.spec dt{font-size:.82rem;color:var(--ink-2);font-weight:500}
.spec dd{margin:4px 0 0;font-size:.98rem}
.story .statement{max-width:none;font-size:clamp(1.4rem,2.5vw,2.1rem)}
.story .blk{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:32px 0;border-top:1px solid var(--rule);margin-top:0}
.story .statement{margin-bottom:40px}
.story .blk h3{font-size:1rem;font-weight:600}
.story .blk p{font-size:1.08rem;max-width:62ch}
.nums{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.nums span{padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);font-size:.9rem}
.impacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-top:16px;padding-top:40px;border-top:1px solid var(--rule)}
.impact strong{display:block;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--red)}
.impact span{display:block;margin-top:10px;color:var(--ink-2);max-width:22ch}
.footnote{margin-top:24px;font-size:.82rem;color:var(--ink-2)}
@media (max-width:860px){.cbody{grid-template-columns:1fr}.spec{position:static;order:2;border-top:1px solid var(--rule);padding-top:32px}.story .blk{grid-template-columns:1fr;gap:10px}}
.next{display:block;position:relative;color:#fff;overflow:hidden;background:#000}
.next img{width:100%;height:clamp(320px,52vw,620px);object-fit:cover;opacity:.62;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .4s}
.next:hover img{transform:scale(1.03);opacity:.5}
.next .wrap{position:absolute;inset:auto 0 clamp(28px,4vw,56px);left:0;right:0}
.next p{font-weight:500;font-size:.95rem;opacity:.85;margin-bottom:12px}
.next h2{max-width:22ch}

/* About */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.principles div{border-top:1.5px solid var(--ink);padding-top:20px}
.principles h3{font-size:1.35rem;margin-bottom:10px}
.principles p{color:var(--ink-2)}
@media (max-width:860px){.principles{grid-template-columns:1fr}}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,64px) clamp(16px,2.5vw,40px)}
.member .ph{aspect-ratio:1;overflow:hidden;background:var(--tint);border-radius:4px}
.member img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.member:hover img{filter:none}
.member h3{margin-top:18px;font-size:1.2rem}
.member .role{color:var(--ink-2);font-size:.92rem}
.member p{margin-top:12px;font-size:.95rem;color:var(--ink-2)}
.member .mlinks{display:flex;gap:16px;margin-top:14px;font-size:.9rem;font-weight:500}
@media (max-width:900px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.team{grid-template-columns:1fr}}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px)}
.path{display:block;padding:clamp(28px,3vw,44px);border-radius:4px;background:var(--tint);transition:background .3s}
.path:hover{background:var(--rule)}
.path h3{font-size:1.5rem;margin-bottom:10px}
.path p{color:var(--ink-2);max-width:40ch;margin-bottom:24px}
@media (max-width:760px){.paths{grid-template-columns:1fr}}

/* Contact */
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px)}
.ct-direct{display:grid;gap:28px;margin-top:48px}
.ct-direct h3{font-size:.85rem;color:var(--ink-2);font-weight:500;margin-bottom:6px}
.ct-direct a.big{font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.01em;font-weight:500}
.ct-direct .row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.copyb{background:none;border:0;box-shadow:inset 0 0 0 1px var(--rule);border-radius:999px;padding:6px 14px;font-size:.82rem;cursor:pointer}
.copyb:hover{box-shadow:inset 0 0 0 1px var(--ink)}
form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full,.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:500;color:var(--ink-2)}
label.req::after{content:" *";color:var(--red)}
input,select,textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--rule);padding:10px 0;border-radius:0;outline:0;transition:border-color .2s;width:100%}
select{appearance:none;background:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%) right 6px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ink-2) 50%) right 0 center/6px 6px no-repeat}
select option{background:var(--paper);color:var(--ink)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
.field.err input,.field.err textarea{border-color:var(--red)}
.note{grid-column:1/-1;font-size:.95rem;padding:14px 16px;background:var(--tint);border-radius:4px}
.offices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.office{border-top:1.5px solid var(--ink);padding-top:20px}
.office p.meta{margin-bottom:6px}
.office h3{font-size:1.5rem;margin-bottom:12px}
.office address{font-style:normal;color:var(--ink-2);margin-bottom:18px;line-height:1.7}
@media (max-width:860px){.ct{grid-template-columns:1fr}.offices{grid-template-columns:1fr}form{grid-template-columns:1fr}}

/* Reveal: one quiet fade for large blocks only */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.reel-slide,.reel-slide img{transition:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Brandnographer brand layer (Branding Guidelines: Poppins; Primary Red #D7282F, Secondary #23465A, Black, Grey #D2D2D2) ===== */
h1,h2,h3{font-weight:500}
.display{font-weight:400;letter-spacing:-.025em}
.t1{font-weight:400;letter-spacing:-.02em}
.t2{font-weight:400;letter-spacing:-.015em}
.lede,.faq .ans,.caps p,.disc .name p,.tk dd,.member p,.principles p,.path p,.ptile p,.story .blk p,.fbrand p{font-weight:300}
.statement{font-weight:300}
/* tracked small labels, as on every guideline page header */
.lab,.stmt-grid .label,.fgrid h4,.spec dt,.ct-direct h3,.office p.meta,.scard .tag,.wgrid .ptile .tag,.next p,.reel-cap b,.chead .client .meta,label,.story .blk h3{font-size:.78rem;font-weight:500;letter-spacing:.16em;color:var(--ink-2)}
.story .blk h3{color:var(--red);padding-top:4px}
.reel-cap b,.next p{color:#fff;opacity:.9}
/* primary action in Primary Red */
.btn{background:var(--red);color:#fff}
.btn:hover{background:var(--black);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1.5px var(--red)}
.nav a::after{background:var(--red);height:2px}
.nav a[aria-current="page"]{color:var(--red)}
.lang button[aria-pressed="true"]{color:var(--red)}
.filters button[aria-pressed="true"]{background:var(--red);color:#fff}
.reel-tabs .bar i{background:var(--red)}
.pill:hover{box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red)}
.ptile:hover h3,.scard:hover h3,.inds a:hover{color:var(--red)}
.faq summary i{color:var(--red)}
.tk h3{border-bottom-color:var(--red)}
.principles div,.office{border-top-color:var(--red)}
/* Secondary navy band: the guideline cover */
.navy-band{background:var(--navy);color:#fff}
.navy-band .stmt-grid .label{color:var(--on-navy-2)}
.navy-band .pill{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#fff}
.navy-band .pill:hover{box-shadow:inset 0 0 0 1.5px #fff;background:#fff;color:var(--navy)}
/* Primary red band: the guideline divider pages */
.cta-band{background:var(--red);color:#fff;position:relative;overflow:hidden}
.cta-band p{color:rgba(255,255,255,.85)}
.cta-band .btn{background:#fff;color:var(--red)}
.cta-band .btn:hover{background:var(--black);color:#fff}
.cta-band .mark{position:absolute;top:clamp(28px,4vw,56px);right:max(var(--gut),env(safe-area-inset-right,0px));width:clamp(40px,4vw,56px);height:auto;filter:brightness(0) invert(1)}
.cta-band .wrap{position:relative}
.cta-band .foot{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(56px,8vw,120px);padding-top:16px;border-top:1px solid rgba(255,255,255,.4);font-size:.78rem;letter-spacing:.16em}
/* Light numerals for chapters, as in the guideline section dividers */
.num{display:block;font-weight:200;font-size:clamp(3.2rem,6vw,5.5rem);line-height:.9;letter-spacing:-.02em;color:var(--red);margin-bottom:18px}
.impact strong{font-weight:300}
/* Red Brandnographer wordmark stays legible on black */
.member img{filter:grayscale(1)}

/* Case study filters: sticky bar, service toggle + sector chips */
.fbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:top .35s ease}
.hdr:not(.up) ~ main .fbar{top:calc(env(safe-area-inset-top,0px) + 76px)}
.fbar-in{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px}
.svcseg{display:flex;flex:none;padding:4px;border-radius:999px;background:var(--tint)}
.svcseg button{border:0;background:none;min-height:36px;padding:0 16px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.svcseg button:hover{color:var(--ink)}
.svcseg button[aria-pressed="true"]{background:var(--paper);color:var(--red);box-shadow:0 0 0 1px var(--rule)}
.fbar .filters{margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent);padding-right:32px}
.fbar .filters::-webkit-scrollbar{display:none}
.fbar .filters button{flex:none;white-space:nowrap;min-height:36px;font-size:.85rem}
.filters button small{margin-left:6px;font-weight:400;opacity:.65}
.filters button:disabled{opacity:.35;cursor:default;box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-2)}
.wmeta{display:flex;align-items:center;gap:16px;min-height:72px;padding:20px 0 28px}
.wcount{font-size:.78rem;font-weight:500;letter-spacing:.16em;color:var(--ink-2)}
.wcount b{color:var(--ink);font-weight:600}
.wclear{border:0;background:none;padding:0;font:inherit;font-size:.88rem;font-weight:500;color:var(--red);cursor:pointer;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:2px}
.wempty{grid-column:1/-1;padding:56px 0;font-size:1.2rem;font-weight:300;color:var(--ink-2)}
@media (max-width:760px){.fbar-in{flex-direction:column;align-items:stretch;gap:10px}.svcseg{overflow-x:auto;scrollbar-width:none}.svcseg button{flex:1;padding:0 10px}.fbar .filters{margin-right:calc(-1 * var(--gut))}}
.disc .name .cs-link{display:flex;margin-top:12px}


/* Discipline animations (from the original site), played only while on screen */

.art{aspect-ratio:16/10;border-radius:4px;overflow:hidden;position:relative;background:radial-gradient(120% 90% at 30% 20%,#FFFFFF,color-mix(in srgb,var(--a) 9%,#FFFFFF))}
.art-insight{--a:#D7282F}.art-strategy{--a:#23465A}.art-experience{--a:#D7282F}
.of3{display:block;width:100%;height:100%;overflow:visible}
.i-net{stroke-width:2.2;opacity:.5}
.i-flow{stroke-width:2.6;stroke-linecap:round;stroke-dasharray:5 46;animation:iFlow 1.8s linear infinite}
.i-bub{opacity:0;animation:iBub 7.5s ease-in-out infinite}
.i-bub.b2{animation-delay:2.5s}.i-bub.b3{animation-delay:5s}
.s-bar{transform-box:fill-box;transform-origin:50% 100%;animation:sBar 5s cubic-bezier(.3,.8,.3,1) infinite;animation-delay:var(--d)}
.s-trail{stroke-dasharray:100 100;animation:sTrail 5s cubic-bezier(.5,0,.5,1) infinite}
.s-rings circle:first-child,.s-rings .r2{transform-box:fill-box;transform-origin:center;animation:sRing 2.4s ease-out infinite}
.s-rings .r2{animation-delay:1.2s}
.s-cloth{transform-box:fill-box;transform-origin:0 50%;animation:sWave 1.6s ease-in-out infinite}
.s-chip{animation:fl 5s ease-in-out infinite}.s-chip.c2{animation-delay:-2.5s}
.e-ui{animation:eUi 6s cubic-bezier(.2,.8,.2,1) infinite}
.e-ui.u2{animation-delay:.25s}.e-ui.u3{animation-delay:.5s}.e-ui.u4{animation-delay:.75s}
.e-check{stroke-dasharray:60;animation:eChk 6s ease infinite}
.e-tap{transform-box:fill-box;transform-origin:center;opacity:0;animation:eTap 3s ease-out infinite 1.2s}
.e-hand{transform-box:fill-box;transform-origin:center;animation:eHand 3s ease-in-out infinite 1.2s}
.e-card{animation:fl 6s ease-in-out infinite}
.e-card.k2{animation-delay:-1.5s;animation-duration:7s}.e-card.k3{animation-delay:-3s;animation-duration:6.5s}.e-card.k4{animation-delay:-4.5s}
.e-orbit{animation:eOrb 30s linear infinite}
.e-spark path{transform-box:fill-box;transform-origin:center;animation:eSp 2.2s ease-in-out infinite}
.e-spark .sp2{animation-delay:-1.1s}
.art:not(.live) .of3 *{animation-play-state:paused!important}
@keyframes iFlow{to{stroke-dashoffset:-51}}
@keyframes iBub{0%{opacity:0;translate:0 14px;scale:.92}8%,30%{opacity:1;translate:0 0;scale:1}40%,100%{opacity:0;translate:0 -6px}}
@keyframes sBar{0%{transform:scaleY(.12)}22%,88%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
@keyframes sTrail{0%{stroke-dashoffset:100;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes sRing{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
@keyframes sWave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-6deg) scaleX(.9)}}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes eUi{0%{opacity:0;translate:0 30px}14%,86%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
@keyframes eChk{0%,20%{stroke-dashoffset:60}34%,100%{stroke-dashoffset:0}}
@keyframes eTap{0%{opacity:0;transform:scale(.4)}10%{opacity:1}55%,100%{opacity:0;transform:scale(2.8)}}
@keyframes eHand{0%,100%{transform:scale(1);opacity:.9}8%{transform:scale(.7)}20%{transform:scale(1)}}
@keyframes eOrb{to{stroke-dashoffset:-280}}
@keyframes eSp{0%,100%{transform:scale(.5) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.of3 *{animation:none!important}.i-bub{opacity:1}.e-tap{opacity:0}}

/* Dropdown filters */
.fbar-in{flex-wrap:wrap;gap:12px 20px;align-items:center}
.dd{position:relative;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 44px 0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);background:var(--paper);cursor:pointer;transition:box-shadow .2s}
.dd:hover,.dd:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.dd.set{box-shadow:inset 0 0 0 1.5px var(--red)}
.dd > span{font-size:.72rem;font-weight:500;letter-spacing:.16em;color:var(--ink-2);white-space:nowrap}
.dd::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.dd.set::after{color:var(--red)}
.dd select{appearance:none;-webkit-appearance:none;border:0;background:none;padding:10px 0;font:inherit;font-size:.95rem;font-weight:500;color:var(--ink);cursor:pointer;width:auto;max-width:56vw}
.dd.set select{color:var(--red)}
.dd select:focus{outline:0}
.dd:focus-within{outline:2px solid var(--red);outline-offset:3px}
.fbar .wcount{margin-left:auto}
@media (max-width:760px){.fbar-in{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;padding-bottom:10px}.fbar .wcount{flex:1;font-size:.7rem}.dd{flex:1 1 calc(50% - 4px);min-width:0;padding:0 34px 0 14px}.dd > span{display:none}.dd select{max-width:100%;width:100%;font-size:.9rem}.dd::after{right:14px}.fbar .wcount{margin-left:0}}

/* Case profile entrance */
@keyframes cRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cFade{from{opacity:0}to{opacity:1}}
@keyframes cWipe{from{clip-path:inset(14% 8% 14% 8%)}to{clip-path:inset(0 0 0 0)}}
@keyframes cLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.enter .chead .back{animation:cFade .5s ease both}
.enter .chead .client{animation:cRise .7s cubic-bezier(.2,.7,.2,1) .08s both}
.enter .chead h1{animation:cRise .9s cubic-bezier(.2,.7,.2,1) .18s both}
.enter .cbanner{overflow:hidden}
.enter .cbanner .stage{animation:cWipe 1.2s cubic-bezier(.7,0,.2,1) .3s both}
.vt .enter .cbanner .stage{animation:none}
.enter .stage .fg{animation:fgIn 1.1s cubic-bezier(.2,.7,.2,1) .9s both}
.vt .enter .stage .fg{animation:none}
.enter .spec dl > div{animation:cRise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.75s + var(--i,0) * .07s)}
.enter .story .statement{animation:cRise .9s cubic-bezier(.2,.7,.2,1) .8s both}
.story .blk{position:relative}
.story .blk::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left}
.story .blk.rv.in::before{animation:cLine 1s cubic-bezier(.7,0,.2,1) .15s both}
.next h2{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.next:hover h2{transform:translateX(12px)}
::view-transition-group(case-hero){animation-duration:.7s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(case-hero),::view-transition-new(case-hero){height:100%;object-fit:cover;overflow:clip}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
@media (prefers-reduced-motion:reduce){.enter *{animation:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Living case pictures: the object floats over its own background, and leans toward the pointer */
@keyframes float{0%,100%{transform:translateY(0) rotate(calc(var(--r,1deg) * -1)) scale(1)}50%{transform:translateY(-1.6%) rotate(var(--r,1deg)) scale(1.015)}}
@keyframes kb{from{scale:1}to{scale:1.035}}
@keyframes fgIn{from{opacity:0;transform:translateY(6%) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stage .fg,.stage .bg{animation:none!important;transition:none!important}}

/* Discipline rows: text | animation | services, all sharing one top and bottom edge */
.disc .art{width:100%;max-width:none;margin:0}
.disc .name{position:static;align-self:stretch}
@media (min-width:1200px){
  .disc{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.6fr);gap:clamp(28px,3vw,48px);align-items:stretch}
  .disc .name{display:flex;flex-direction:column;align-items:flex-start}
  .disc .name a.cs-link{margin-top:auto;padding-top:24px}
  .disc .art{aspect-ratio:auto;height:100%;min-height:300px}
  .disc .caps{align-content:start}
}
@media (min-width:700px) and (max-width:1199px){
  .disc{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"name art" "caps caps";gap:32px 40px;align-items:stretch}
  .disc .name{grid-area:name;display:flex;flex-direction:column;align-items:flex-start}
  .disc .name a.cs-link{margin-top:auto;padding-top:20px}
  .disc .art{grid-area:art;aspect-ratio:16/10}
  .disc .caps{grid-area:caps}
}
@media (max-width:699px){.disc{grid-template-columns:1fr}.disc .art{aspect-ratio:16/10}}

/* Case picture: Full HD (1920×1000), edge to edge, client logo in colour bottom-left */
.cbanner{max-width:none;padding:0}
.cbanner .stage{position:relative;width:100%;max-width:calc((100vh - 76px) * 1.92);margin:0 auto;aspect-ratio:1920/1000;overflow:hidden;background:var(--tint)}
.stage .world{position:absolute;inset:0;scale:1.03;translate:var(--bx,0) var(--by,0);transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.stage.live .world,.stage.flat .world{animation:kb 18s ease-in-out infinite alternate}
.cbanner .stage .world img{position:absolute;max-width:none;border-radius:0;background:none}
.cbanner .stage .bg{inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.cbanner .stage .fg{left:var(--l);top:var(--t);width:var(--w);height:auto;aspect-ratio:auto;object-fit:fill;transform-origin:50% 85%;translate:var(--fx,0) var(--fy,0);transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.stage.live .fg{animation:float var(--dur,6.5s) ease-in-out infinite}
@keyframes kb{from{scale:1.03}to{scale:1.07}}
.clogo{position:absolute;left:clamp(16px,2.5vw,40px);bottom:clamp(16px,2.5vw,40px);z-index:2;display:flex;align-items:center;justify-content:center;min-height:clamp(52px,5vw,76px);padding:clamp(10px,1vw,16px) clamp(16px,1.6vw,26px);background:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.cbanner .clogo img{aspect-ratio:auto;border-radius:0;background:none;height:clamp(28px,3vw,46px);width:auto;max-width:clamp(110px,12vw,190px);object-fit:contain}
.clogo b{color:#000;font-weight:600;font-size:1rem}
.clogo:empty{display:none}
@media (max-width:600px){.clogo{left:12px;bottom:12px;min-height:36px;padding:7px 14px}.cbanner .clogo img{height:20px;max-width:100px}}
.enter .clogo{animation:cRise .8s cubic-bezier(.2,.7,.2,1) 1.25s both}
@media (prefers-reduced-motion:reduce){.stage .world,.stage .fg{animation:none!important;transition:none!important}}

/* ===== 2026-10 improvements: positioning, proof, Human + AI, offers, one-tap contact ===== */
.kicker{font-size:.78rem;font-weight:500;letter-spacing:.16em;color:var(--red);margin-bottom:clamp(18px,2vw,28px);text-transform:uppercase}
.hero .lede{max-width:40ch;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,88px);padding-top:32px;border-top:1px solid rgba(255,255,255,.25)}
.stats b{display:block;font-weight:200;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;letter-spacing:-.03em;color:#fff}
.stats span{display:block;margin-top:12px;color:var(--on-navy-2);font-size:.95rem;font-weight:300;max-width:18ch}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr;row-gap:36px}}
.deeper .t2{max-width:24ch}
.deeper .lede{margin-top:24px;max-width:56ch}
.layers{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.layers li{padding:clamp(20px,2vw,28px);border-radius:4px;background:var(--tint);display:flex;flex-direction:column;gap:10px;min-height:clamp(180px,18vw,240px)}
.layers li:nth-child(2){background:color-mix(in srgb,var(--red) 9%,var(--paper))}
.layers li:nth-child(3){background:color-mix(in srgb,var(--red) 20%,var(--paper))}
.layers li:nth-child(4){background:var(--red);color:#fff}
.layers .ln{font-weight:200;font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1;color:var(--red);margin-bottom:auto}
.layers li:nth-child(4) .ln{color:#fff}
.layers b{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.layers .tx{font-weight:300;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.4}
.layers li:nth-child(4) .tx{font-weight:400}
.deeper .meta{margin-top:24px;max-width:60ch}
@media (max-width:900px){.layers{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.layers{grid-template-columns:1fr}.layers li{min-height:0}.layers .ln{margin-bottom:6px}}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.offer{background:var(--tint);border-radius:4px;padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--red)}
.offer .num{font-size:clamp(2.2rem,3.4vw,3rem);margin-bottom:6px}
.offer h3{font-size:clamp(1.2rem,1.6vw,1.4rem)}
.offer p{color:var(--ink-2);font-weight:300}
.offer a{margin-top:auto;padding-top:14px;color:var(--red);font-weight:500;align-self:flex-start}
@media (max-width:980px){.offers{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.offers{grid-template-columns:1fr}}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.models div{border-top:1.5px solid var(--red);padding-top:20px}
.models h3{font-size:1.35rem;margin-bottom:10px}
.models p{color:var(--ink-2);font-weight:300}
@media (max-width:860px){.models{grid-template-columns:1fr}}
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);margin-top:clamp(32px,4vw,56px)}
.fit h3{font-size:.78rem;font-weight:500;letter-spacing:.16em;color:var(--ink-2);margin-bottom:8px;text-transform:uppercase}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{padding:18px 0;border-top:1px solid var(--rule);font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em}
.fit li:last-child{border-bottom:1px solid var(--rule)}
.fit .yes li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:14px;vertical-align:middle}
.fit .no li{color:var(--ink-2);font-weight:300}
@media (max-width:760px){.fit{grid-template-columns:1fr}}
@media (min-width:900px){.paths{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ptile .kpi{margin-top:10px;font-size:.92rem;color:var(--ink-2);font-weight:300;max-width:40ch}
.ptile .kpi b{color:var(--red);font-weight:500;margin-right:6px}
.dig{height:340vh;margin-top:clamp(28px,4vw,48px)}
.dig-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.dig-scene{position:relative;height:min(78vh,760px);border-radius:4px;overflow:hidden;background:#ECEEF0}
.dig-scene svg{display:block;width:100%;height:100%}
.dig-meter{position:absolute;right:16px;top:16px;bottom:16px;width:4px;border-radius:4px;background:rgba(255,255,255,.55)}
.dig-meter i{position:absolute;left:0;right:0;top:0;height:0;border-radius:4px;background:#23465A}
.dig-copy{position:relative;min-height:300px}
.dig-step{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s;pointer-events:none}
.dig-step.on{opacity:1;transform:none}
.dig-step .ln{display:block;font-weight:200;font-size:clamp(3rem,6vw,5.5rem);line-height:.9;color:var(--red);margin-bottom:14px}
.dig-step b{display:block;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.dig-step p{font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.25;letter-spacing:-.01em;font-weight:300;max-width:22ch}
.dig-hint{position:absolute;left:0;bottom:-48px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.dig-on .layers{display:none}
@media (max-width:860px){.dig-sticky{grid-template-columns:1fr;align-content:start;padding-top:16px;gap:20px}.dig-scene{height:52vh}.dig-copy{min-height:200px}.dig-hint{bottom:-24px}}
.lens{margin-bottom:clamp(56px,7vw,110px)}
.lens-stage{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:1600/640;max-width:100%;cursor:none;touch-action:pan-y;background:#ECEEF0}
.lens-stage svg{display:block;width:100%;height:100%}
.lens-tag text{font-family:var(--font);font-size:26px;font-weight:500;fill:#23465A}
.lens-tag.deep text{fill:#FFFFFF}
.lens-cap{display:flex;gap:16px 28px;align-items:baseline;flex-wrap:wrap;margin-top:16px}
.lens-cap .lab{color:var(--red)}
.lens-cap p:last-child{color:var(--ink-2);font-weight:300}
@media (max-width:760px){.lens-stage{aspect-ratio:4/3;cursor:default}}
.wa-fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:44;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 16px;border-radius:999px;background:var(--red);color:#fff;font-weight:500;font-size:.95rem;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:background .2s,transform .25s}
.wa-fab:hover{background:var(--black);transform:translateY(-2px)}
.wa-fab svg{width:24px;height:24px;flex:none}
.menu-open .wa-fab{opacity:0;pointer-events:none}
@media (max-width:600px){.wa-fab{width:56px;height:56px;padding:0;justify-content:center}.wa-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media print{.wa-fab{display:none}}
.faq-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.faq-tabs button{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:none;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;font:inherit;font-size:.88rem;font-weight:500;color:var(--ink-2)}
.faq-tabs button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.faq-tabs button[aria-selected="true"]{background:var(--red);color:#fff;box-shadow:none}
.faq summary{padding:16px 0;font-size:clamp(1rem,1.3vw,1.12rem)}
.faq .ans{padding:0 0 18px;font-size:.98rem}
.faq .faq-group details:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:700px){.disc{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-template-areas:none;align-items:start}.disc .name,.disc .caps{grid-area:auto}}
@media (min-width:1100px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ptile .ph{position:relative}
.tlogo{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;min-height:38px;padding:7px 14px;background:#fff;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.ptile .tlogo img{width:auto;height:22px;max-width:96px;object-fit:contain;transform:none!important;transition:none}
@media (max-width:520px){.tlogo{min-height:34px;padding:6px 12px}.ptile .tlogo img{height:18px}}
.net .dig-scene{background:#23465A}
.net .dig-meter{background:rgba(255,255,255,.2)}.net .dig-meter i{background:#D7282F}
.nl{stroke:#FFFFFF;stroke-opacity:.28;stroke-width:1.5}.nl.wide{stroke-opacity:.18;stroke-width:2;stroke-dasharray:3 7}
.nd{fill:#FFFFFF}.nt{fill:#FFFFFF;font-family:var(--font);font-size:22px;font-weight:500;text-anchor:middle;letter-spacing:.04em}
.nh{fill:none;stroke:#D7282F;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.npulse{fill:#D7282F;opacity:0}
.net [data-s]{opacity:0;transition:opacity .7s ease}
.net [data-s].in{opacity:1}
.net .nh.in{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1),opacity .3s}
.net .npulse.in{opacity:.35;transform-box:fill-box;transform-origin:center;animation:npl 2.2s ease-out infinite}
@keyframes npl{from{transform:scale(.6);opacity:.5}to{transform:scale(1.9);opacity:0}}
.net-static{height:auto}.net-static .dig-sticky{position:static;height:auto;padding-block:24px}.net-static .dig-step{position:static;opacity:1;transform:none;margin-bottom:24px}.net-static .dig-copy{min-height:0}.net-static .dig-hint{display:none}
@media (prefers-reduced-motion:reduce){.net .npulse.in{animation:none}}
:root,:root[data-theme="light"],:root[data-theme="dark"]{--paper:#FFFFFF;--ink:#000000;--ink-2:#5C5C5C;--rule:#D2D2D2;--tint:#F4F4F4;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#FFFFFF;--ink:#000000;--ink-2:#5C5C5C;--rule:#D2D2D2;--tint:#F4F4F4;color-scheme:light}}
.mono-inv,.mono-logo{filter:none!important}
.hdr{background:color-mix(in srgb,var(--paper) 74%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body::before{background:var(--paper)}
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 76px);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(48px,7vw,96px)}
.hero-fx{position:absolute;top:0;bottom:0;left:50%;width:100vw;max-width:none;transform:translateX(-50%);z-index:-1;display:block}
.hero h1{max-width:none}
.reel-stage,.ptile .ph,.scard .ph,.lens-stage,.dig-scene,.member .ph,.path,.offer,.faq-tabs button{border-radius:18px}
.reel-stage{border-radius:22px}
.path{background:var(--tint)}.path:hover{background:var(--rule)}
.fill{-webkit-box-decoration-break:slice;box-decoration-break:slice;background-image:linear-gradient(var(--fc),var(--fc)),linear-gradient(var(--fd),var(--fd));background-size:var(--fp,0%) 100%,100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.navy-band .fill{--fc:#FFFFFF;--fd:rgba(255,255,255,.22)}
.range .fill{--fc:var(--ink);--fd:rgba(0,0,0,.14)}
@media (prefers-reduced-motion:reduce){.fill{--fp:100%}}
.cbody{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.cbody .spec{order:2;align-self:start;position:sticky;top:110px;background:#F3F3F3;color:#111111;border-radius:28px;padding:clamp(24px,2.4vw,32px) clamp(24px,2.6vw,34px)}
.cbody .spec dl{display:block}
.cbody .spec dl>div{padding:22px 0;border-top:1px solid #D2D2D2}
.cbody .spec dl>div:first-child{border-top:0;padding-top:0}
.cbody .spec dl>div:last-child{padding-bottom:0}
.cbody .spec dt{font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#666666}
.cbody .spec dd{margin:8px 0 0;font-size:1.12rem;line-height:1.45;color:#111111}
.cbody .spec dd a{color:inherit;background:none;padding:0}
.cbody .spec .spec-cta{color:#C8323A;font-weight:400}
.cbody .spec .spec-cta:hover{color:#D7282F;text-decoration:underline}
.cbody .story{order:1}
@media (max-width:860px){.cbody{grid-template-columns:1fr}.cbody .spec{position:static;border-top:0;padding-top:clamp(24px,5vw,32px)}}
.cta-band{width:100%;height:400px;margin:clamp(56px,7vw,110px) 0 0;padding:0;border-radius:0;display:flex;align-items:center}
.cta-band .wrap{width:100%}
.cta-band .mark{right:max(var(--gut),env(safe-area-inset-right,0px))!important}
.cta-band .t1{font-size:clamp(1.9rem,3.6vw,3rem);max-width:16ch}
.cta-band p{margin-top:12px;font-size:1.05rem}
.cta-band .btn{margin-top:24px}
.cta-band .foot{margin-top:28px;padding-top:12px}
.cta-band .mark{top:clamp(20px,3vw,32px);right:clamp(20px,3vw,32px);width:clamp(32px,3.4vw,44px)}
@media (max-width:760px){.cta-band{height:auto;min-height:340px;padding-block:36px}}
.ft{background:#F4F4F4;color:#000;border-top:0;padding:clamp(28px,3vw,40px) 0 24px}
.ft-logo{display:block;height:40px;width:auto;margin:0}
.ft-line{margin-top:20px;color:#555;font-size:.98rem;padding-bottom:20px;border-bottom:1px solid #D2D2D2}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:22px 0 26px;border-bottom:1px solid #D2D2D2}
.ft h4{font-size:1rem;font-weight:500;color:#000;margin:0 0 12px;letter-spacing:0;text-transform:none}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft ul a{color:#555;overflow-wrap:anywhere}.ft ul a:hover{color:var(--red)}
.ft-social{display:flex;gap:14px}
.ft-social a{width:50px;height:50px;border-radius:50%;background:#FFF;box-shadow:inset 0 0 0 1px #D2D2D2;display:grid;place-items:center;color:#000;transition:color .2s,box-shadow .2s}
.ft-social a:hover{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
.ft-social svg{width:22px;height:22px}
.ft-legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;color:#555;font-size:.95rem}
@media (max-width:860px){.ft-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ft-cols{grid-template-columns:1fr}}
/* Compact bottom: smaller red CTA band and tighter footer */
.cta-band{height:auto;padding-block:clamp(32px,3.5vw,48px) clamp(18px,2vw,24px);margin-top:clamp(40px,5vw,72px)}
.cta-band .t1{font-size:clamp(1.6rem,2.8vw,2.3rem);max-width:none}
.cta-band p{margin-top:8px;font-size:1rem}
.cta-band .btn{margin-top:18px;min-height:44px}
.cta-band .foot{margin-top:20px;padding-top:10px;font-size:.72rem}
.cta-band .mark{width:clamp(28px,2.8vw,36px)}
@media (max-width:760px){.cta-band{height:auto;min-height:0;padding-block:28px}}
.ft{padding:24px 0 18px}
.ft-logo{height:30px}
.ft-line{margin-top:12px;font-size:.9rem;padding-bottom:14px}
.ft-cols{gap:20px;padding:16px 0 18px}
.ft h4{font-size:.92rem;margin-bottom:8px}
.ft ul{gap:6px;font-size:.92rem}
.ft-social a{width:40px;height:40px}
.ft-social svg{width:18px;height:18px}
.ft-legal{padding-top:14px;font-size:.85rem}
@media (max-width:480px){.ft-cols{grid-template-columns:1fr 1fr;gap:18px 16px}.ft-line{font-size:.85rem}.ft ul{font-size:.86rem}.cta-band .t1{padding-right:44px}}
/* Footer: same stacked layout (logo, line, rule, four columns, rule, legal), scaled down */
.ft{padding:22px 0 16px}
.ft-logo{height:28px}
.ft-line{margin-top:10px;font-size:.85rem;padding-bottom:14px;border-bottom:1px solid #D2D2D2;max-width:none}
.ft-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:14px 0 16px;border-bottom:1px solid #D2D2D2}
.ft h4{font-size:.85rem;margin-bottom:6px}
.ft ul{gap:4px;font-size:.82rem}
.ft-social{gap:10px}
.ft-social a{width:34px;height:34px}
.ft-social svg{width:16px;height:16px}
.ft-legal{padding-top:12px;margin-top:0;border-top:0;font-size:.8rem}
@media (max-width:860px){.ft-cols{grid-template-columns:1fr 1fr}}
/* Next case banner: compact, as on the live site */
.next{height:clamp(260px,32vw,380px);isolation:isolate;margin-top:0}
section:has(> .cbody){padding-bottom:clamp(32px,4vw,56px)}
/* Tighter spacing everywhere: less empty white space between blocks */
section{padding:clamp(40px,5vw,72px) 0}
.tight{padding-top:0}
.cta-band{margin-top:0}
.hero{min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);justify-content:center;padding-top:clamp(16px,2vw,32px);padding-bottom:clamp(56px,7vw,104px)}
.hero-foot{margin-top:clamp(24px,3vw,44px);grid-template-columns:1fr;gap:clamp(20px,2.4vw,32px);align-items:start}
.hero-foot .cta{justify-content:flex-start}
.hero-fx{height:100%!important}
@media (max-width:700px){.hero{padding-top:32px;padding-bottom:32px}}
.hero + .reel{margin-top:clamp(32px,4vw,56px)}
.phead{padding-top:clamp(32px,4vw,64px);padding-bottom:clamp(24px,3vw,40px)}
.chead{padding-top:clamp(20px,2.5vw,36px);padding-bottom:clamp(24px,3vw,40px)}
.chead .client{margin:clamp(16px,2.5vw,32px) 0 14px}
.disc{padding:clamp(32px,4vw,56px) 0}
.pgrid > a:nth-child(even){margin-top:clamp(30px,5vw,80px)}
.pgrid{row-gap:clamp(28px,3.5vw,48px)}
.wgrid{row-gap:clamp(28px,3.5vw,48px)}
.sec-head{margin-bottom:clamp(24px,3vw,40px)}
.marquee{margin-top:clamp(24px,3vw,40px)}
.stats{margin-top:clamp(32px,4vw,56px)}
.layers{margin-top:clamp(24px,3vw,40px)}
.dig{height:260vh;margin-top:clamp(16px,2vw,28px)}
.dig-hint{bottom:-32px}
@media (min-width:861px){.dig-sticky{align-items:start;padding-top:clamp(16px,4vh,40px)}.dig-copy{align-self:center}}
@media (min-width:861px){.dig-sticky{height:auto;top:clamp(16px,4vh,40px);padding-top:0}.dig{height:220vh}}
.deeper{padding-bottom:clamp(24px,3vw,40px)}
.deeper .layers{margin-bottom:0}
.next > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;z-index:-2}
.next::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1))}
.next .wrap{position:relative;inset:auto;height:100%;display:flex;flex-direction:column;justify-content:center;gap:8px}
.next p{margin-bottom:0}
.next .nlogo{display:block;margin-bottom:10px}
.next .nlogo:empty{display:none}
.next .nlogo img{position:static;width:auto;height:clamp(28px,3.4vw,46px);max-width:220px;object-fit:contain;filter:brightness(0) invert(1);opacity:1;transform:none!important}
.next:hover > img{transform:scale(1.05);opacity:1}
/* Next case: bigger label with a moving >> indicator and an arrow button */
.next .next-lab{display:flex;align-items:center;gap:12px;font-size:clamp(1rem,1.5vw,1.3rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:1}
.nchev{display:inline-flex;gap:1px;font-style:normal;font-family:Arial,sans-serif;font-size:1.7em;line-height:1;color:#fff;letter-spacing:0}
.nchev b{font-weight:600;animation:nchev 1.4s ease-in-out infinite}
.nchev b:nth-child(2){animation-delay:.18s}
@keyframes nchev{0%,100%{opacity:.35;transform:translateX(0)}50%{opacity:1;transform:translateX(5px)}}
.ngo{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px);border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s}
.ngo svg{width:42%;height:42%}
.next:hover .ngo{transform:translateY(-50%) translateX(6px) scale(1.06);background:#fff;color:var(--red)}
.next .wrap{padding-right:clamp(90px,10vw,140px)}
@media (max-width:600px){.ngo{top:auto;bottom:20px;transform:none;width:48px;height:48px}.next:hover .ngo{transform:none}.next .wrap{padding-right:80px}}
@media (prefers-reduced-motion:reduce){.nchev b{animation:none;opacity:1}}
/* keep the WhatsApp button from covering the footer's last line */
.ft-legal{padding-right:0}
.member .ph:has(.ph-init){background:none;display:flex;align-items:flex-end;justify-content:center}
.member .ph-init{display:grid;place-items:center;width:82%;aspect-ratio:1;border-radius:50%;background:var(--tint);font-size:clamp(2.4rem,5vw,4rem);font-weight:200;letter-spacing:.04em;color:var(--ink-2)}
/* Featured reel: caption + pill indicators over the image (client name, bold title, three pills) */
.reel-slide::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65))}
.reel-cap{bottom:clamp(64px,6.5vw,96px);max-width:760px}
.reel-cap b{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:400;letter-spacing:0;text-transform:none;opacity:1;margin-bottom:6px;color:#fff}
.reel-cap span{display:block;font-weight:600;font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.12;letter-spacing:-.015em}
.reel-logo{position:absolute;z-index:2;left:clamp(20px,3vw,44px);top:clamp(20px,3vw,40px);display:flex;align-items:center;justify-content:center;min-height:clamp(60px,5.8vw,86px);padding:clamp(12px,1.2vw,18px) clamp(20px,2vw,30px);background:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.reel-slide .reel-logo img{width:auto;height:clamp(32px,3.4vw,50px);max-width:clamp(130px,14vw,220px);object-fit:contain;transform:none!important;transition:none}
@media (max-width:600px){.reel-logo{left:16px;top:16px;min-height:48px;padding:10px 16px}.reel-slide .reel-logo img{height:26px;max-width:120px}}
.reel-tabs{position:absolute;z-index:3;left:clamp(20px,3vw,44px);bottom:clamp(24px,3vw,44px);display:flex;gap:12px;margin:0}
.reel-tabs button{width:clamp(44px,4.5vw,64px);height:16px;padding:0;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden;position:relative;transition:background .3s}
.reel-tabs button:hover{background:rgba(255,255,255,.45)}
.reel-tabs button[aria-selected="true"]{background:rgba(255,255,255,.4)}
.reel-tabs .bar{position:absolute;inset:0;height:auto;background:none;border-radius:999px}
.reel-tabs .bar i{background:rgba(255,255,255,.9);border-radius:999px}
.reel-tabs button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:600px){.reel-tabs button{height:12px;width:40px}.reel-tabs{bottom:20px}.reel-cap{bottom:50px}}
/* Section descriptions: wider so they sit on two lines on desktop where they can */
.lede,.hero .lede,.deeper .lede,.tk-head .lede{max-width:min(100%,68ch)}
.hero:not(.ahero) .lede{max-width:none}
.tk-head{max-width:1040px}
.tk-sec .tk-head .lede{text-wrap:balance;max-width:68ch}
.deeper .stmt-grid .lede{max-width:none}
.gc .lede{max-width:44ch}
/* Home: selected work in three columns, middle column staggered */
@media (min-width:761px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.pgrid > a:nth-child(even){margin-top:0}.pgrid > a:nth-child(3n+2){margin-top:clamp(30px,5vw,80px)}}
/* About: opening with an animated ethnographer's eye */
.ahero{background:radial-gradient(60% 70% at 78% 50%,rgba(215,40,47,.07),rgba(35,70,90,.05) 45%,rgba(255,255,255,0) 75%)}
.aeye{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);width:min(40vw,560px);aspect-ratio:1;z-index:0;pointer-events:none}
.aeye svg{width:100%;height:100%;overflow:visible}
.ahero > :not(.aeye){position:relative;z-index:1}
.ering{transform-box:fill-box;transform-origin:center;animation:eSpin 60s linear infinite}
.ering.r2{animation-duration:40s;animation-direction:reverse}
@keyframes eSpin{to{transform:rotate(360deg)}}
.eyeball{transform-box:view-box;transform-origin:300px 300px;animation:eBlink 6s ease-in-out infinite}
@keyframes eBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.06)}}
.eorbit{position:absolute;inset:0}
.eorbit span{position:absolute;white-space:nowrap;font-size:clamp(.72rem,.9vw,.86rem);font-weight:500;letter-spacing:.06em;color:var(--navy);background:#fff;border:1px solid var(--rule);padding:6px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(35,70,90,.08)}
.eorbit span:nth-child(3n+1){color:var(--red);border-color:rgba(215,40,47,.35)}
@media (min-width:861px){.ahero .lede{max-width:min(44ch,50%)}.ahero h1{max-width:min(15ch,56%)}.aeye{width:min(36vw,520px)}}
@media (max-width:860px){.aeye{position:relative;right:auto;top:auto;transform:none;width:min(78vw,340px);margin:0 auto 28px}.ahero{justify-content:center}}
@media (prefers-reduced-motion:reduce){.ering,.eyeball{animation:none}}

.ahero h1{max-width:16ch}
.ahero .lede{margin-top:clamp(20px,2.4vw,32px);color:var(--ink)}
@media (max-width:700px){.ahero{min-height:calc(100svh - 76px)}}
/* Case studies: slightly smaller details column */
@media (min-width:861px){.cbody{grid-template-columns:minmax(0,2.3fr) minmax(0,.9fr)}}
.cbody .spec{border-radius:24px;padding:clamp(20px,2vw,26px) clamp(20px,2.2vw,28px)}
.cbody .spec dl>div{padding:16px 0}
.cbody .spec dt{font-size:.74rem}
.cbody .spec dd{margin-top:6px;font-size:.98rem;line-height:1.45}
/* Header: larger logo */
.hdr .logo img{height:36px}
@media (max-width:600px){.hdr .logo img{height:30px}}
/* Get involved: links line up along the bottom of the three cards */
.paths{align-items:stretch}
.path{display:flex;flex-direction:column}
.path p{flex:1}
.path .ul{align-self:flex-start}
/* How we see deeper: a shovel digs as you scroll, kicking up dirt */
#digShovel .shv{transform-box:view-box;transform-origin:0 0;animation:shvIdle 2.6s ease-in-out infinite}
#digShovel .dirt ellipse{opacity:0}
.dig.digging #digShovel .shv{animation:shvDig .5s ease-in-out infinite}
.dig.digging #digShovel .dirt ellipse{animation:dirt .6s ease-out infinite}
#digShovel .dirt .d1{--dx:-46px;--dy:-58px}#digShovel .dirt .d2{--dx:38px;--dy:-66px;animation-delay:.08s!important}#digShovel .dirt .d3{--dx:-24px;--dy:-80px;animation-delay:.16s!important}
#digShovel .dirt .d4{--dx:56px;--dy:-40px;animation-delay:.24s!important}#digShovel .dirt .d5{--dx:-60px;--dy:-30px;animation-delay:.3s!important}#digShovel .dirt .d6{--dx:20px;--dy:-88px;animation-delay:.4s!important}
@keyframes shvIdle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(4deg) translateY(-6px)}}
@keyframes shvDig{0%{transform:rotate(-14deg) translateY(-14px)}45%{transform:rotate(6deg) translateY(6px)}100%{transform:rotate(-14deg) translateY(-14px)}}
@keyframes dirt{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
#digShovel .kd{transform:translate(52px,-120px);animation:kdBob 1.8s ease-in-out infinite}
@keyframes kdBob{0%,100%{transform:translate(52px,-120px)}50%{transform:translate(52px,-128px)}}
@media (prefers-reduced-motion:reduce){#digShovel *{animation:none!important}}
/* Featured reel, Pearlfisher-style: slides glide sideways, quiet caption, thin progress bars under the image */
.reel-stage{border-radius:8px}
.reel-slide{opacity:1;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.reel-slide img{transform:none;transition:none}
.reel-slide::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.5))}
.reel-cap{bottom:clamp(20px,2.6vw,36px);left:clamp(20px,2.6vw,36px)}
.reel-cap b{font-size:1rem;font-weight:400;margin-bottom:4px}
.reel-cap span{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;letter-spacing:0}
.reel-tabs{position:static;display:flex;gap:0;margin:6px 0 0 -10px}
.reel-tabs button{width:52px;height:40px;padding:0;background:none;border-radius:0;overflow:visible}
.reel-tabs button:hover,.reel-tabs button[aria-selected="true"]{background:none}
.reel-tabs .bar{position:absolute;left:10px;right:10px;top:50%;height:3px;inset:auto 10px auto 10px;transform:translateY(-50%);background:var(--rule);border-radius:3px;overflow:hidden}
.reel-tabs .bar i{background:var(--ink);border-radius:3px}
.reel-tabs button:focus-visible{outline:2px solid var(--red);outline-offset:0}
@media (max-width:600px){.reel-tabs button{width:44px;height:36px}.reel-cap{bottom:18px}}
/* Even less white space between sections */
section{padding:clamp(28px,3.4vw,52px) 0}
.tight{padding-top:0}
.hero + .reel{margin-top:clamp(16px,2vw,28px)}
.sec-head{margin-bottom:clamp(18px,2.2vw,30px)}
.phead{padding-bottom:clamp(16px,2vw,28px)}
/* Who we work with: good-fit list only, in two columns */
.fit{grid-template-columns:1fr}
@media (min-width:861px){.fit .yes ul{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,72px)}.fit .yes li:nth-last-child(2){border-bottom:1px solid var(--rule)}}
.hred{color:var(--red)}
html[lang^="zh"] .ensp{display:none}
.deeper .t2{max-width:none}
@media (min-width:861px){.deeper .t2{white-space:nowrap}}
/* Case studies: breathing room between the stat chips and the red rule below */
.cbody .nums{margin-bottom:10px}
.hero-bulb{position:absolute;z-index:-1;pointer-events:none;opacity:0;display:block}
/* Solutions: tabbed Insight / Strategy / Experience (design from the live site), in our type styles */
.of2-sec{padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(48px,6vw,80px)}
.of2-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;margin-bottom:32px;text-align:center}
.of2-tabs{display:inline-flex;background:var(--tint);border-radius:999px;padding:4px;gap:2px}
.of2-tabs button{border:0;background:none;font:inherit;font-size:.95rem;font-weight:500;padding:10px 22px;border-radius:999px;color:var(--ink-2);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.of2-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 6px rgba(0,0,0,.12)}
.of2-panel{display:none;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:14px;animation:of2in .45s cubic-bezier(.2,.8,.2,1)}
.of2-panel.on{display:grid}
@keyframes of2in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:981px){.of2-panel{grid-template-columns:minmax(0,1.25fr) minmax(0,2fr)}}
.of2-hero{background:var(--tint);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:6px}
.of2-img{border-radius:16px;aspect-ratio:5/4;overflow:hidden;margin-bottom:14px;perspective:800px;background:radial-gradient(120% 90% at 30% 20%,#fff,color-mix(in srgb,var(--a) 7%,#fff))}
.of2-img .tilt{display:block;width:100%;height:100%;transition:transform .25s ease-out;transform-style:preserve-3d}
.of3{display:block;width:100%;height:100%;overflow:visible}
.of2-lab{margin:0;font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
.of2-h{margin:0;font-size:clamp(1.35rem,2.16vw,1.8rem);font-weight:500;letter-spacing:-.015em;line-height:1.15}
.of2-lead{margin:2px 0 0;color:var(--ink-2);font-size:1rem;font-weight:300;line-height:1.5}
.of2-hero .of2-cs{margin-top:auto;padding-top:16px;display:flex}
.of2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.of2-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.of2-t{background:var(--tint);border-radius:20px;padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.of2-t:hover{transform:translateY(-3px)}
.of2-ic{width:34px;height:34px;color:var(--a)}
.of2-ic svg{width:30px;height:30px;stroke-width:1.7}
.of2-t h3{margin:0 0 6px;font-size:1.1rem;font-weight:500;letter-spacing:-.005em;line-height:1.3}
.of2-t p{margin:0;color:var(--ink-2);font-size:.95rem;font-weight:300;line-height:1.55}
.i-net{stroke-width:2.2;opacity:.5}
.i-flow{stroke-width:2.6;stroke-linecap:round;stroke-dasharray:5 46;animation:iFlow 1.8s linear infinite}
.i-bub{opacity:0;animation:iBub 7.5s ease-in-out infinite}
.i-bub.b2{animation-delay:2.5s}.i-bub.b3{animation-delay:5s}
.s-bar{transform-box:fill-box;transform-origin:50% 100%;animation:sBar 5s cubic-bezier(.3,.8,.3,1) infinite;animation-delay:var(--d)}
.s-trail{stroke-dasharray:100 100;animation:sTrail 5s cubic-bezier(.5,0,.5,1) infinite}
.s-rings circle:first-child,.s-rings .r2{transform-box:fill-box;transform-origin:center;animation:sRing 2.4s ease-out infinite}
.s-rings .r2{animation-delay:1.2s}
.s-cloth{transform-box:fill-box;transform-origin:0 50%;animation:sWave 1.6s ease-in-out infinite}
.s-chip{animation:of2fl 5s ease-in-out infinite}.s-chip.c2{animation-delay:-2.5s}
.e-ui{animation:eUi 6s cubic-bezier(.2,.8,.2,1) infinite}
.e-ui.u2{animation-delay:.25s}.e-ui.u3{animation-delay:.5s}.e-ui.u4{animation-delay:.75s}
.e-check{stroke-dasharray:60;animation:eChk 6s ease infinite}
.e-tap{transform-box:fill-box;transform-origin:center;opacity:0;animation:eTap 3s ease-out infinite 1.2s}
.e-hand{transform-box:fill-box;transform-origin:center;animation:eHand 3s ease-in-out infinite 1.2s}
.e-card{animation:of2fl 6s ease-in-out infinite}
.e-card.k2{animation-delay:-1.5s;animation-duration:7s}.e-card.k3{animation-delay:-3s;animation-duration:6.5s}.e-card.k4{animation-delay:-4.5s}
.e-orbit{animation:eOrb 30s linear infinite}
.e-spark path{transform-box:fill-box;transform-origin:center;animation:eSp 2.2s ease-in-out infinite}
.e-spark .sp2{animation-delay:-1.1s}
@keyframes iFlow{to{stroke-dashoffset:-51}}
@keyframes iBub{0%{opacity:0;translate:0 14px;scale:.92}8%,30%{opacity:1;translate:0 0;scale:1}40%,100%{opacity:0;translate:0 -6px}}
@keyframes sBar{0%{transform:scaleY(.12)}22%,88%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
@keyframes sTrail{0%{stroke-dashoffset:100;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes sRing{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
@keyframes sWave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-6deg) scaleX(.9)}}
@keyframes of2fl{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes eUi{0%{opacity:0;translate:0 30px}14%,86%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}
@keyframes eChk{0%,20%{stroke-dashoffset:60}34%,100%{stroke-dashoffset:0}}
@keyframes eTap{0%{opacity:0;transform:scale(.4)}10%{opacity:1}55%,100%{opacity:0;transform:scale(2.8)}}
@keyframes eHand{0%,100%{transform:scale(1);opacity:.9}8%{transform:scale(.7)}20%{transform:scale(1)}}
@keyframes eOrb{to{stroke-dashoffset:-280}}
@keyframes eSp{0%,100%{transform:scale(.5) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
@media (max-width:980px){.of2-panel{grid-template-columns:1fr}.of2-img{aspect-ratio:16/11}.of2-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.of2-img{aspect-ratio:4/3}}
@media (max-width:560px){.of2-grid,.of2-grid.c3{grid-template-columns:1fr;gap:10px}.of2-t{flex-direction:row;align-items:flex-start;gap:14px;padding:16px;border-radius:16px}.of2-t .of2-ic{flex:none;width:28px;height:28px;margin-top:2px}.of2-t .of2-ic svg{width:24px;height:24px}.of2-tabs button{padding:9px 16px}}
@media (prefers-reduced-motion:reduce){.of3 *,.of2-panel{animation:none!important}}
/* How we see deeper: a general picture, the data on the surface and real lives underneath */
#digSvg .dg-bar{transform-box:fill-box;transform-origin:50% 100%;animation:dgBar 4s cubic-bezier(.3,.8,.3,1) infinite;animation-delay:var(--d)}
#digSvg .dg-line{stroke-dasharray:100 100;animation:dgLine 4s ease-in-out infinite}
#digSvg .dg-p{animation:dgP 3.2s ease-in-out infinite}#digSvg .dg-p:nth-of-type(odd){animation-delay:-1.6s}
@keyframes dgBar{0%{transform:scaleY(.2)}25%,85%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
@keyframes dgLine{0%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes dgP{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (prefers-reduced-motion:reduce){#digSvg .dg-bar,#digSvg .dg-line,#digSvg .dg-p{animation:none}}
/* How we see deeper: an iceberg, the data is the tip, the why is deep below; the layers light up in turn */
.deep-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch;margin-top:clamp(24px,3vw,40px)}
.deep-fig{margin:0;border-radius:18px;overflow:hidden;background:#E6EAEE;min-height:420px}
.deep-fig svg{display:block;width:100%;height:100%}
.deep-wrap .layers{margin:0!important;grid-template-columns:1fr;gap:10px}
.deep-wrap .layers li{min-height:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;column-gap:18px;row-gap:6px;padding:clamp(16px,1.8vw,24px);border-radius:14px;transition:none;animation:dpLi 10s infinite}
.deep-wrap .layers .ln{margin:0;grid-row:1/3;font-size:clamp(1.6rem,2.2vw,2.2rem);min-width:2.2ch;align-self:start}
.deep-wrap .layers b{align-self:end}
.deep-wrap .layers .tx{grid-column:2}
.deep-wrap .layers li:nth-child(2){animation-delay:2.5s}.deep-wrap .layers li:nth-child(3){animation-delay:5s}.deep-wrap .layers li:nth-child(4){animation-delay:7.5s}
@keyframes dpLi{0%,25%{box-shadow:inset 0 0 0 2px var(--red),0 10px 24px -14px rgba(0,0,0,.35)}28%,100%{box-shadow:inset 0 0 0 0 transparent}}
.deep-wrap .layers li:nth-child(4){animation-name:dpLi4}
@keyframes dpLi4{0%,25%{box-shadow:inset 0 0 0 2px #23465A,0 10px 24px -14px rgba(0,0,0,.35)}28%,100%{box-shadow:inset 0 0 0 0 transparent}}
.dp-m line{stroke:#FFFFFF;stroke-opacity:.18;stroke-width:1.5;stroke-dasharray:4 8}
.dp-m circle{fill:#FFFFFF;stroke:#23465A;stroke-width:2}.dp-m text{fill:#23465A}
.dp-m.m1 circle{fill:#23465A;stroke:#FFFFFF}.dp-m.m1 text{fill:#FFFFFF}
.dp-m circle,.dp-m text{transition:none}
.dp-m{animation:dpM 10s infinite}.dp-m.m2{animation-delay:2.5s}.dp-m.m3{animation-delay:5s}.dp-m.m4{animation-delay:7.5s}
.dp-m circle{transform-box:fill-box;transform-origin:center}
@keyframes dpM{0%,25%{opacity:1}28%,100%{opacity:.55}}
.dp-m{opacity:.55}
.dp-m line{animation:dpLine 10s infinite;animation-delay:inherit}
@keyframes dpLine{0%,25%{stroke-opacity:.6}28%,100%{stroke-opacity:.18}}
.dp-berg{animation:dpBob 6s ease-in-out infinite}
@keyframes dpBob{0%,100%{translate:0 0}50%{translate:0 5px}}
.dp-wave{animation:dpWave 6s linear infinite}
@keyframes dpWave{to{transform:translateX(150px)}}
.dp-glow{transform-box:fill-box;transform-origin:center;animation:dpGlow 2.6s ease-in-out infinite}
@keyframes dpGlow{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.dp-gem{transform-box:fill-box;transform-origin:center;animation:dpGem 2.6s ease-in-out infinite}
@keyframes dpGem{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.dp-card{animation:dpBob 5s ease-in-out infinite reverse}
.dp-bub circle{animation:dpBub 6s linear infinite}
.dp-bub circle:nth-child(2){animation-delay:-1.5s}.dp-bub circle:nth-child(3){animation-delay:-3s}.dp-bub circle:nth-child(4){animation-delay:-4.5s}
@keyframes dpBub{0%{translate:0 0;opacity:0}10%{opacity:1}90%{opacity:.8}100%{translate:0 -400px;opacity:0}}
.dp-rays path{animation:dpRay 7s ease-in-out infinite}.dp-rays path:nth-child(2){animation-delay:-2.3s}.dp-rays path:nth-child(3){animation-delay:-4.6s}
@keyframes dpRay{0%,100%{opacity:.02}50%{opacity:.09}}
@media (max-width:860px){.deep-wrap{grid-template-columns:1fr}.deep-fig{min-height:0;aspect-ratio:600/560}}
@media (prefers-reduced-motion:reduce){.deep-fig *,.deep-wrap .layers li{animation:none!important}.dp-m{opacity:1}}
/* Solutions: the offering photos from the deck, floating gently and tilting toward the cursor */
.of2-img{background:#FFFFFF!important;position:relative}
.of2-img .tilt{position:absolute;inset:0}
.of2-img .floaty{position:absolute;inset:0;display:block;animation:of2float 6s ease-in-out infinite;transform-origin:50% 60%}
.of2-panel.on .of2-img .floaty{animation:of2pop .9s cubic-bezier(.2,.8,.2,1),of2float 6s ease-in-out .9s infinite}
.of2-img img{display:block;width:100%;height:100%;object-fit:contain;padding:6%}
@keyframes of2float{0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1)}50%{transform:translateY(-10px) rotate(1.5deg) scale(1.04)}}
@keyframes of2pop{from{transform:scale(.8) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.of2-img .floaty{animation:none!important}}
/* Solutions photos come alive: the data wave moves, the climber swings, the phones turn clockwise */
.of2-img svg.ph{position:absolute;left:6%;top:6%;width:88%;height:88%;overflow:visible}
.of2-img .iq{transform-box:view-box;animation:iqWave 2.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes iqWave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.62)}}
.of2-img .climber{transform-box:view-box;animation:climb 3.2s ease-in-out infinite}
@keyframes climb{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.of2-img .spin{transform-box:view-box;animation:phSpin 24s linear infinite}
@keyframes phSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.of2-img .iq,.of2-img .climber,.of2-img .spin{animation:none}}
/* Case banner logo badge: sized and placed exactly like the badges in the supplied 1920x1000 pictures */
.cbanner .stage{container-type:inline-size}
.cbanner .clogo{left:2.92cqw;bottom:2.97cqw;height:6.82cqw;min-height:0;padding:0 2.08cqw;min-width:11.46cqw;box-sizing:border-box;border-radius:999px;box-shadow:0 .4cqw 1.4cqw rgba(0,0,0,.12)}
.cbanner .clogo img{height:3.6cqw;max-width:16.7cqw}
.cbanner .clogo b{font-size:2cqw}
.cbanner .clogo img.px{height:auto;max-width:none;max-height:none}
@media (max-width:600px){.cbanner .clogo{left:2.92cqw;bottom:2.97cqw;height:6.82cqw;min-height:0;padding:0 2.08cqw}.cbanner .clogo img.px{height:auto;max-width:none}.cbanner .clogo img{height:3.6cqw;max-width:16.7cqw}}
/* FAQ page: the FAQ section from Home, without its own side heading */
#faqSlot .faq-grid{grid-template-columns:1fr}
#faqSlot .faq-grid > h2{display:none}
#faqSlot > section{padding-top:0;border-top:0}
/* Mobile polish: bigger tap areas, readable "Next case", footer email on one line */
.tk-slide input{height:28px!important;background-size:100% 6px!important;background-position:0 50%!important;background-repeat:no-repeat!important}
@media (max-width:700px){
  .ft-cols > div:nth-child(3){grid-column:1/-1}
  .ft-cols li a,.ft-cols ul a{display:inline-block;padding:6px 0;min-height:32px}
  .ft-cols ul{gap:0}
  .next::before{background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.4))}
  .next h2{font-size:clamp(1.35rem,6vw,1.7rem);line-height:1.2}
  .mlinks a{display:inline-flex;align-items:center;min-height:36px}
}
/* Hero kicker: one line on desktop, two lines on phones */
.kicker .k1,.kicker .k2{display:inline}
html:not([lang^="zh"]) .kicker .k2::before{content:"\00a0"}
@media (max-width:700px){.kicker .k1,.kicker .k2{display:block}html:not([lang^="zh"]) .kicker .k2::before{content:none}}
/* Home: range line on two lines */
.range{max-width:none}
/* Team: LinkedIn / Email links sit on one line at the bottom of every card */
.team{align-items:stretch}
.member{display:flex;flex-direction:column}
.member .mlinks{margin-top:auto;padding-top:14px}
/* About: Get involved as a navy banner with three cards */
.involve{background:var(--navy);color:#fff;padding:clamp(48px,6vw,88px) 0}
.involve .t2{text-align:center;color:#fff;margin-bottom:clamp(24px,3vw,40px)}
.inv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.inv{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ic t" "ic p" "ic go";gap:6px 16px;align-content:start;padding:clamp(22px,2vw,30px);border-radius:28px;background:rgba(10,24,33,.35);transition:background .25s,transform .25s}
.inv:hover{background:rgba(10,24,33,.55);transform:translateY(-3px)}
.inv-ic{grid-area:ic;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff}
.inv-ic.red{background:var(--red)}
.inv-ic svg{width:20px;height:20px}
.inv h3{grid-area:t;font-size:clamp(1.15rem,1.5vw,1.35rem);font-weight:500;line-height:1.25;align-self:center;color:#fff}
.inv p{grid-area:p;font-size:.98rem;font-weight:300;line-height:1.55;color:rgba(255,255,255,.78)}
.inv-go{grid-area:go;margin-top:8px;font-size:.98rem;color:#EF8F93;white-space:nowrap}
.inv:hover .inv-go{color:#fff}
@media (max-width:900px){.inv-grid{grid-template-columns:1fr}}
@media (max-width:480px){.inv{grid-template-columns:38px minmax(0,1fr);gap:4px 12px;padding:18px}.inv-ic{width:38px;height:38px;border-radius:11px}.inv p{font-size:.88rem}}
/* About: 3D globe that flies into Hong Kong as you scroll (from the live site), in our type styles */
.gpin{position:relative;height:190vh;padding:0;background:var(--navy);color:#fff}
.gstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--navy)}
.gstage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gstage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(35,70,90,.92),rgba(35,70,90,0) 58%)}
.gcopy{position:relative;z-index:2;height:100%;display:grid;align-content:center;pointer-events:none}
.gc{grid-area:1/1;max-width:min(560px,100%);display:flex;flex-direction:column;gap:18px;opacity:0;transform:translateY(30px);transition:opacity .22s,transform .22s}
.gc.on{opacity:1;transform:none;transition:opacity .5s .2s,transform .6s cubic-bezier(.2,.7,.2,1) .2s}
.gc .label{color:var(--on-navy-2)}
.gc .t2{color:#fff}
.gc .gred{color:var(--red)}
.gc .lede{color:rgba(255,255,255,.85);max-width:34ch}
.glabels span{position:absolute;left:0;top:0;z-index:2;font-size:.78rem;font-weight:500;color:#fff;padding:4px 10px;border-radius:999px;background:rgba(20,42,55,.66);border:1px solid rgba(255,255,255,.22);white-space:nowrap;opacity:0;transition:opacity .4s;pointer-events:none}
.glabels span[data-c="hk"],.glabels span[data-c="sh"]{z-index:3;background:rgba(20,42,55,.9);border-color:rgba(215,40,47,.75)}
.glabels span[data-c="hk"]::before,.glabels span[data-c="sh"]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:1px}
@media (max-width:700px){.gpin{height:150vh}.gcopy{align-content:start;padding-top:40px}.gstage::after{background:linear-gradient(rgba(35,70,90,.92),rgba(35,70,90,0) 50%)}}
@media (prefers-reduced-motion:reduce){.gpin{height:auto}.gstage{position:relative;height:auto;min-height:620px}.gcopy{display:block;padding-block:56px}.gc{opacity:1;transform:none;margin-bottom:28px}}

/* Solutions: interactive toolkit (from the live site), scaled up, in our type styles */
.tk-head{text-align:center;max-width:760px;margin:0 auto clamp(28px,3vw,40px)}
.tk-head .lede{margin:16px auto 0;max-width:46ch}
.tk-ctrl{display:flex;flex-direction:column;align-items:center;gap:24px;margin-bottom:clamp(28px,3vw,40px)}
.tk-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tk-pills button{border:0;box-shadow:inset 0 0 0 1px var(--rule);background:var(--paper);border-radius:999px;min-height:46px;padding:0 20px;font:500 .95rem var(--font);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .25s,color .25s,box-shadow .25s}
.tk-pills button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tk-pills button b{width:10px;height:10px;border-radius:50%;background:var(--c)}
.tk-pills button.on{background:var(--ink);color:var(--paper);box-shadow:none}
.tk-pills button[data-g]:not([data-g="all"]).on{background:var(--c);color:#fff}
.tk-pills button.on b{background:#fff}
.tk-slide{display:flex;align-items:center;gap:16px;width:min(640px,100%);font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.tk-slide span{white-space:nowrap}
.tk-slide input{flex:1;-webkit-appearance:none;appearance:none;height:6px;padding:0;border:0;border-radius:6px;background:linear-gradient(90deg,#D7282F,#23465A);outline:0;cursor:pointer}
.tk-slide input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.tk-slide input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.18)}
/* larger depth-to-scale bar: red for qualitative, dark blue for quantitative */
.tk-slide{width:min(980px,100%);gap:24px;font-size:.92rem;font-weight:600;letter-spacing:.1em}
.tk-slide span:first-child{color:#D7282F}
.tk-slide span:last-child{color:#23465A}
.tk-slide input{height:6px;border-radius:999px;background:linear-gradient(90deg,#D7282F,#C91C5C,#B3217D,#982B95,#7936A1,#593F9F,#3A468F,#234976,#23465A)}
.tk-slide input::-webkit-slider-thumb{width:28px;height:28px;border:3px solid var(--th,#7936A1);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.tk-slide input::-moz-range-thumb{width:26px;height:26px;border:3px solid var(--th,#7936A1);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.tk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.tk-t{position:relative;background:var(--tint);border-radius:18px;padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:8px;transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1),background-color .45s,box-shadow .45s}
.tk-t .tk-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--paper));margin-bottom:8px;transition:background .45s,color .45s}
.tk-t .tk-ic svg{width:26px;height:26px}
.tk-t h3{font-size:clamp(1.1rem,1.4vw,1.3rem);font-weight:500;line-height:1.25;letter-spacing:-.01em}
.tk-t p{font-size:.98rem;font-weight:300;line-height:1.5;color:var(--ink-2);flex:1}
.tk-m{position:relative;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin-top:12px}
.tk-m i{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--c);transform:translate(-50%,-50%)}
.tk-t.dim{opacity:.3;transform:scale(.97)}
.tk-t.hot{background:color-mix(in srgb,var(--c) 10%,var(--paper));transform:translateY(-4px);box-shadow:0 22px 40px -26px color-mix(in srgb,var(--c) 70%,transparent)}
.tk-t.hot .tk-ic{background:var(--c);color:#fff}
.tk-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}
@media (min-width:1101px){.tk-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.tk-t{padding:18px 16px 16px;gap:6px;border-radius:16px}.tk-t .tk-ic{width:40px;height:40px;border-radius:11px;margin-bottom:4px}.tk-t .tk-ic svg{width:21px;height:21px}.tk-t h3{font-size:1rem}.tk-t p{font-size:.85rem}.tk-m{margin-top:8px}.tk-m i{width:8px;height:8px}}
@media (max-width:1100px) and (min-width:981px){.tk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.tk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.tk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tk-t{padding:16px 14px}.tk-t .tk-ic{width:42px;height:42px}.tk-t .tk-ic svg{width:22px;height:22px}.tk-t h3{font-size:1rem}.tk-t p{font-size:.85rem}.tk-slide{font-size:.72rem;gap:14px 10px;letter-spacing:.06em;flex-wrap:wrap;justify-content:space-between}.tk-slide input{order:3;flex:1 1 100%;height:6px}.tk-pills button{min-height:40px;padding:0 14px;font-size:.88rem}}