/* Markey Media — site stylesheet.
   Tokens and component geometry replicate pixelspot.in (Apple.com-style system) as briefed:
   system font stack, #1d1d1f ink, #f5f5f7 snow, #0071e3 blue, 980px measure, 980px pills, 44px nav. */

:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b; --snow:#f5f5f7; --white:#fff; --black:#000;
  --blue:#0071e3; --blue-h:#0077ed; --link-l:#0066cc; --link-d:#2997ff;
  --line:rgba(0,0,0,.08); --rule:#d2d2d7; --gap:12px;
  --grad:linear-gradient(90deg,#0a84ff,#a855f7,#ec4899);
  --ease:cubic-bezier(.25,.1,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.005em}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;z-index:2000}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- global nav (44px, dark translucent) ---------- */
.nv{position:fixed;top:0;left:0;right:0;z-index:1000;height:44px;background:rgba(18,18,20,.65);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);color:var(--snow)}
.nv-in{max-width:1024px;margin:0 auto;height:44px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.nv-logo{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--snow);min-height:44px}
.nv-logo svg{width:20px;height:20px}
.nv-links{display:flex;align-items:center;gap:30px;font-size:12px;letter-spacing:-.01em;list-style:none;height:44px}
.nv-links li{display:flex;align-items:center;height:44px}
.nv-links li>a{display:inline-flex;align-items:center;height:44px}
.nv-panel{position:absolute;left:0;right:0;top:44px;background:rgba(22,22,23,.985);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;z-index:-1}
.has-menu:hover>.nv-panel,.has-menu:focus-within>.nv-panel{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.nv-panel-in{max-width:1024px;margin:0 auto;padding:40px 22px 64px;display:grid;grid-template-columns:320px repeat(2,minmax(0,170px));gap:0 48px;text-align:left}
.nv-label{font-size:12px;color:#86868b;margin-bottom:12px;letter-spacing:-.01em}
.nv-col a{display:block;font-size:12px;color:var(--snow);opacity:.88;padding:6px 0;letter-spacing:-.01em;line-height:1.3}
.nv-col.big a{font-size:22px;font-weight:600;opacity:1;padding:5px 0;letter-spacing:-.02em;white-space:nowrap}
.nv-col a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.nv-links li>a{color:var(--snow);opacity:.82;transition:opacity .2s}
.nv-links li>a:hover,.has-menu:hover>a{opacity:1;color:#fff}
.nv-right{display:flex;align-items:center;gap:16px}
.nv-search{display:inline-flex;width:16px;height:16px;opacity:.82}
.nv-cta{background:var(--blue);color:#fff;padding:5px 12px;font-size:12px;border-radius:980px;line-height:1.1;transition:background .2s}
.nv-cta:hover{background:var(--blue-h)}
.nv-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nv-burger span{display:block;width:17px;height:1.5px;background:var(--snow);border-radius:2px}
.nv-menu{display:none}
@media (max-width:900px){
  .nv-links{display:none}
  .nv-cta{display:none}
  .nv-burger{display:flex}
  .nv.open .nv-menu{display:flex;flex-direction:column;position:absolute;top:44px;left:0;right:0;background:rgba(18,18,20,.96);padding:12px 22px 22px;gap:2px}
  .nv-menu a{font-size:17px}
  .nv-menu a{color:var(--snow);font-size:17px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 21px;border-radius:980px;font-size:17px;line-height:1.2;letter-spacing:-.022em;white-space:nowrap;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-p{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-p:hover{background:var(--blue-h);border-color:var(--blue-h)}
.btn-o{background:transparent;border-color:var(--link-l);color:var(--link-l)}
.btn-o:hover{background:var(--link-l);color:#fff}
.dark .btn-o,.btn-o.on-dark{border-color:var(--link-d);color:var(--link-d)}
.dark .btn-o:hover,.btn-o.on-dark:hover{background:var(--link-d);color:#000}
.btn-glass{background:rgba(0,0,0,.45);color:#fff;border-color:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(0,0,0,.6)}
.btn-sm{font-size:15px;min-height:36px;padding:8px 16px}
.tile .btn-o{border-color:var(--link-d);color:var(--link-d)}
.tile .btn-o:hover{background:var(--link-d);color:#000}
.tile.light .btn-o{border-color:var(--link-l);color:var(--link-l)}
.tile.light .btn-o:hover{background:var(--link-l);color:#fff}
.lnk{color:var(--link-l);font-size:17px;display:inline-flex;align-items:center;gap:3px}
.lnk:hover{text-decoration:underline}
.dark .lnk{color:var(--link-d)}
.lnk i{font-style:normal}

/* ---------- hero (headline + rail of real work) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(36px,5vh,60px);overflow:hidden;padding:110px 0 56px}
.hero-in{position:relative;z-index:3;text-align:center;max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:0 16px}
.hero h1{margin:0 0 16px;font-size:clamp(44px,6.6vw,80px);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:#fff}
.hero h1 .sub{display:block;margin-top:.18em;font-size:.42em;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.72)}
.hero-tag{font-size:clamp(17px,2vw,22px);font-weight:450;color:#f3f4f6;letter-spacing:-.015em;line-height:1.45;margin:0 0 32px;max-width:720px;text-wrap:balance}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.hero-actions .btn{min-height:48px;font-size:15px;font-weight:600;padding:12px 22px}
.hero-proof{margin:18px 0 0;font-size:14px;color:rgba(255,255,255,.82);letter-spacing:.01em}
.hero-proof a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero-rail{display:flex;gap:12px;width:100%;justify-content:center;overflow:hidden;animation:railIn 1s var(--ease) both .15s}
@keyframes railIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero-shot{position:relative;flex:0 0 clamp(240px,24vw,360px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#111;display:block}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.2s var(--ease)}
.hero-shot:hover img{transform:scale(1.04)}
.hero-shot span{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-size:12px;font-weight:600;color:var(--snow);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75))}
@media (max-width:768px){.hero{padding-top:90px}.hero-rail{justify-content:flex-start;overflow-x:auto;padding:0 16px;scroll-snap-type:x mandatory;scrollbar-width:none}.hero-rail::-webkit-scrollbar{display:none}.hero-shot{flex-basis:78%;scroll-snap-align:start}}

/* ---------- unit (full-width promo band) ---------- */
.unit{position:relative;overflow:hidden;margin:0 0 var(--gap);background:var(--snow);color:var(--ink);display:flex;flex-direction:column;align-items:center;text-align:center;min-height:clamp(560px,48vw,692px)}
.unit.dark{background:#000;color:var(--snow)}
.unit .copy{position:relative;z-index:3;width:100%;max-width:880px;margin:0 auto;padding:56px 22px 0}
.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.dark .eyebrow{color:rgba(245,245,247,.72)}
.h{font-size:clamp(32px,4.2vw,56px);font-weight:600;letter-spacing:-.005em;line-height:1.07;text-wrap:balance}
.s{font-size:clamp(19px,2.2vw,28px);line-height:1.14;letter-spacing:.007em;margin-top:10px;font-weight:400}
.ctas{display:flex;justify-content:center;align-items:center;gap:12px;margin:18px 0 0;flex-wrap:wrap}
.proof{margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.dark .proof{color:rgba(245,245,247,.72)}
.unit .art{position:relative;z-index:1;width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;padding:34px 22px 0}
.unit .art img{width:min(92%,980px);height:auto;object-fit:contain}
.unit .art.bleed{padding:34px 0 0}
.unit .art.bleed img{width:min(943px,100% - 48px);aspect-ratio:943/523;object-fit:cover;border-radius:18px 18px 0 0}

/* report fragment (the "product" shot of the performance unit) */
.report{width:min(92%,900px);background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -1px 0 rgba(0,0,0,.06);text-align:left;padding:22px 26px 28px;font-size:13px;letter-spacing:0}
.report-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--ink-2);font-size:12px}
.report-top b{color:var(--ink);font-weight:600}
.report-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.report-tiles div{background:var(--snow);border-radius:12px;padding:12px 14px}
.report-tiles small{display:block;color:var(--ink-2);font-size:11px;margin-bottom:4px}
.report-tiles strong{font-size:20px;font-weight:600;letter-spacing:-.02em}
.report-tiles .claim strong{color:#9a9a9a}
.report-chart{display:flex;align-items:flex-end;gap:6px;height:84px;padding:0 2px}
.report-chart i{flex:1;background:#d2d2d7;border-radius:3px 3px 0 0}
.report-chart i.b{background:var(--blue)}
.report-foot{display:flex;justify-content:space-between;color:var(--ink-2);font-size:11px;margin-top:8px}
@media (max-width:640px){.report-tiles{grid-template-columns:repeat(2,1fr)}}

/* ---------- installs → recent work ---------- */
.works{background:#fff;padding:88px 22px 96px}
.works-head{max-width:980px;margin:0 auto 36px;text-align:center}
.works-head .s{color:var(--ink-2)}
.works-grid{list-style:none;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.work a{display:block;background:var(--snow);border-radius:22px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.work a:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.08)}
.work img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.work-body{display:block;padding:18px 22px 22px}
.work-kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);text-transform:uppercase}
.work-title{display:block;margin-top:6px;font-size:21px;line-height:1.24;font-weight:600;color:var(--ink)}
.work-more{display:inline-block;margin-top:10px;font-size:15px;color:var(--link-l)}
.work a:hover .work-more{text-decoration:underline}
@media (max-width:900px){
  .works{padding:64px 0 72px}
  .works-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 22px;gap:12px;scrollbar-width:none}
  .works-grid::-webkit-scrollbar{display:none}
  .work{flex:0 0 78%;scroll-snap-align:start}
}

/* ---------- tile grid ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);padding:0 var(--gap);margin:0 0 var(--gap)}
.tile{position:relative;overflow:hidden;background:#000;color:var(--snow);text-align:center;display:flex;flex-direction:column;align-items:center;aspect-ratio:702/580;min-height:440px}
.tile.light{background:var(--snow);color:var(--ink)}
.tile .copy{position:relative;z-index:3;padding:40px 22px 0;max-width:640px}
.tile .h{font-size:clamp(28px,3vw,40px);letter-spacing:-.003em;line-height:1.1}
.tile .s{font-size:clamp(17px,1.6vw,21px);line-height:1.19;margin-top:6px}
.tile .ctas{margin-top:18px}
.tile .art{position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;display:flex;align-items:flex-end;justify-content:center}
.tile .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.tile.render::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,#000 52%,rgba(0,0,0,0) 100%);z-index:2;pointer-events:none}
.tile.render .art img{object-fit:contain;object-position:50% 100%}
.tile.light.render::after{display:none}
.tile.light .art{height:58%;padding:0 22px 26px}
.tile.light .art img{position:relative;inset:auto;width:min(88%,540px);height:100%;object-fit:contain;object-position:50% 100%}
.tile.cover .art{inset:0;height:auto}
.tile.cover::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.56) 40%,rgba(0,0,0,0) 72%)}
.tile.cover.bottom{justify-content:flex-end}
.tile.bottom .copy{padding:0 22px 44px}
.tile.cover.bottom::before{background:linear-gradient(0deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.28) 40%,rgba(0,0,0,0) 68%)}
.tile.cover .art img{object-position:var(--pos,50% 50%)}
.tile .frame{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);width:min(78%,480px);border-radius:14px 14px 0 0;overflow:hidden;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.tile .frame img{position:static;width:100%;height:auto}
@media (max-width:768px){.grid{grid-template-columns:1fr}.tile{aspect-ratio:auto;min-height:560px}}

/* ---------- why cards ---------- */
.why{position:relative;padding:72px 0 64px;margin:0 0 var(--gap);background:#fff;color:var(--ink)}
.why-head{margin:0 0 34px;padding:0 max(22px,calc((100vw - 1256px)/2 + 12px))}
.why-head .h{font-size:clamp(32px,3.6vw,48px);line-height:1.08;text-align:left;letter-spacing:-.003em;max-width:22ch}
.why-head .s{font-size:clamp(19px,2vw,24px);line-height:1.16;text-align:left;color:var(--ink-2);margin-top:6px}
.why-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px max(22px,calc((100vw - 1256px)/2 + 12px)) 24px;scrollbar-width:none}
.why-track::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 auto;width:372px;height:520px;border-radius:24px;overflow:hidden;background:#000;color:var(--snow);scroll-snap-align:start;display:block;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.2s var(--ease)}
.card:hover img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.66) 0,rgba(0,0,0,.08) 45%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%)}
.card-copy{position:absolute;left:0;right:0;top:0;padding:28px 26px 0;z-index:2}
.card-eye{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em;color:rgba(245,245,247,.72);margin-bottom:6px}
.card-h{font-size:28px;font-weight:600;line-height:1.14;letter-spacing:.007em;text-wrap:balance}
.card-plus{position:absolute;right:20px;bottom:20px;width:36px;height:36px;border-radius:50%;background:rgba(245,245,247,.92);color:#1d1d1f;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;font-weight:300;z-index:2}
.card.mono img{filter:grayscale(1) contrast(1.05)}
.why-ctl{display:flex;justify-content:flex-end;gap:10px;padding:0 max(22px,calc((100vw - 1256px)/2 + 12px))}
.why-ctl button{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.06);font-size:20px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.why-ctl button:hover{background:rgba(0,0,0,.1)}
@media (max-width:640px){.card{width:300px;height:420px}.card-h{font-size:24px}}

/* ---------- gallery ---------- */
.gallery{padding:56px 0 30px;margin:0 0 var(--gap);background:#fff;overflow:hidden}
.gal-head{text-align:center;max-width:820px;margin:0 auto 30px;padding:0 22px}
.gal-head .h{font-size:clamp(30px,3.2vw,40px);letter-spacing:-.003em}
.gal-head .s{font-size:21px;color:var(--ink-2);margin-top:6px}
.gal-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-left:calc((100vw - min(943px,100vw - 48px))/2);padding-right:calc((100vw - min(943px,100vw - 48px))/2);scrollbar-width:none}
.gal-track::-webkit-scrollbar{display:none}
.gal-track::before{content:"MM";flex:0 0 calc((100vw - min(943px,100vw - 48px))/2 - 24px);align-self:stretch;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:-.05em;font-size:40px;opacity:.9}
.slide{position:relative;flex:0 0 min(943px,100vw - 48px);aspect-ratio:943/523;background:#111;scroll-snap-align:center;overflow:hidden;color:#fff}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 7s linear}
.slide.on img{transform:scale(1.06)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 55%,rgba(0,0,0,.8) 100%)}
.slide-logo{position:absolute;top:24px;left:28px;z-index:2;font-size:15px;font-weight:700;letter-spacing:-.02em;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.slide-title{position:absolute;left:28px;right:28px;bottom:96px;z-index:2;font-size:clamp(1.6rem,3.2vw,2.75rem);font-weight:600;letter-spacing:-.01em;line-height:1.05;max-width:22ch;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.slide-cap{position:absolute;left:28px;right:28px;bottom:26px;z-index:2;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.slide-btn{background:#fff;color:#1d1d1f;padding:9px 18px;font-size:15px;font-weight:500;border-radius:980px}
.slide-meta{font-size:14px;line-height:1.35;color:var(--snow);max-width:56ch;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.slide-meta b{font-weight:600}
.gal-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px auto 0;max-width:980px;padding:0 22px}
.gal-dots{display:flex;gap:8px;padding:10px 14px;border-radius:980px;background:rgba(0,0,0,.06)}
.gal-dots button{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.42);padding:0}
.gal-dots button.on{background:#1d1d1f}
.gal-pause{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.06);font-size:11px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.gal-all{color:var(--link-l);font-size:17px}
@media (max-width:640px){.slide{aspect-ratio:4/5}.slide-title{font-size:1.5rem;bottom:120px;right:20px;left:20px}.slide-logo{left:20px}.slide-cap{left:20px;right:20px}}

/* ---------- help ---------- */
.help{background:var(--snow);color:var(--ink);padding:64px 22px 66px;margin:0 0 var(--gap);text-align:center}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:980px;margin:0 auto}
.help-card{display:flex;flex-direction:column;align-items:center;padding:14px 20px 8px;color:var(--ink)}
.help-card svg{width:38px;height:38px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.help-card h2{font-size:24px;font-weight:600;letter-spacing:.009em;line-height:1.17}
.help-card p{margin:6px 0 0;font-size:17px;line-height:1.47;max-width:30ch}
.help-card .lnk{margin-top:6px;min-height:44px}
@media (max-width:640px){.help-grid{grid-template-columns:1fr}}

/* ---------- seo link chips + guide list ---------- */
.seo{background:#fff;padding:48px 22px 24px;text-align:center}
.seo h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:980px;margin:0 auto}
.chips a{font-size:13px;font-weight:500;padding:8px 14px;border-radius:980px;background:var(--snow);color:var(--ink);transition:background .2s}
.chips a:hover{background:#e8e8ed}
.seo .more{display:block;margin-top:14px;font-size:15px;color:var(--link-l)}
.guides{background:#fff;padding:36px 22px 72px;text-align:center}
.guides h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px}
.guides ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;max-width:900px;margin:0 auto}
.guides li a{font-size:15px;color:var(--link-l);line-height:2}
.guides li a:hover{text-decoration:underline}

/* ---------- FAQ chat ---------- */
.faq{background:#fff;padding:90px 22px 60px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(40px,6vw,90px);align-items:start}
.faq-head{position:sticky;top:110px;text-align:left}
.sec-eye{font-size:.72rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.faq-head h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:16px}
.faq-sub{color:var(--ink-2);font-size:.98rem;line-height:1.65;max-width:34ch;margin-bottom:26px}
.faq-wa{display:inline-block;padding:9px 17px;border-radius:980px;border:1px solid var(--blue);color:var(--blue);font-size:15px;transition:background .2s,color .2s}
.faq-wa:hover{background:var(--blue);color:#fff}
.faq-list details{padding:0}
.faq-list summary{list-style:none;cursor:pointer;padding:7px 0;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .q{display:inline-block;padding:10px 16px;border-radius:14px;background:var(--snow);color:var(--ink);transition:background .3s,color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.faq-list summary:hover .q{transform:translateX(3px)}
.faq-list summary::after{content:"+";flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:300;color:var(--ink-2);transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details[open] summary .q{background:rgba(0,113,227,.12);color:var(--blue)}
.faq-list p{display:flex;justify-content:flex-end;padding:4px 0 12px 48px}
.faq-list p .a{display:block;max-width:34rem;padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--blue);color:#fff;font-size:.95rem;line-height:1.55;letter-spacing:0;animation:faqIn .45s cubic-bezier(.16,1,.3,1) both}
.faq-list p .a a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@keyframes faqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.faq{grid-template-columns:1fr;padding:64px 22px 40px}.faq-head{position:static}}

/* ---------- close ("Let's light it up.") ---------- */
.close{position:relative;padding:150px 24px 60px;text-align:center;overflow:hidden;border-top:1px solid var(--line);background:#fff}
.close h2{font-size:clamp(2.6rem,8vw,6.4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.close h2 span{background:var(--grad);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gslide 7s linear infinite}
@keyframes gslide{from{background-position:0 0}to{background-position:240% 0}}
.close-sub{margin:22px auto 40px;color:var(--ink-2);max-width:460px;font-size:17px;line-height:1.5}
.btn-dark{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-weight:600;font-size:1rem;padding:15px 30px;border-radius:980px;transition:transform .3s,box-shadow .3s}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.22)}

/* ---------- footer ---------- */
.psft{background:var(--snow);border-top:1px solid var(--rule);padding:22px 24px 26px;color:rgba(0,0,0,.72);font-size:12px;letter-spacing:0}
.ft-row{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start;text-align:left}
.ft-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;min-height:44px}
.ft-logo svg{width:32px;height:32px;border-radius:8px}
.ft-brand p{margin:14px 0 16px;color:var(--ink-2);font-size:12px;line-height:1.55;max-width:30ch}
.ft-badges{display:flex;flex-wrap:wrap;gap:8px}
.ft-badges span{font-size:.75rem;font-weight:600;color:#3a3a3c;padding:6px 10px;border-radius:999px;background:#e8e8ed}
.psft-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px}
.psft-grid h4{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.psft-grid a{display:flex;width:fit-content;align-items:center;gap:4px;min-height:34px;color:rgba(0,0,0,.72);font-size:12px;line-height:1.6}
.psft-grid a::after{content:"\203A";color:var(--ink-2);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.psft-grid a:hover{color:var(--ink)}
.psft-grid a:hover::after{opacity:1;transform:none}
.psft-areas{max-width:1100px;margin:38px auto 0;text-align:center}
.psft-areas .t{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin:24px 0 8px}
.psft-areas .l{font-size:.77rem;color:var(--ink-2);line-height:1.95}
.psft-areas .l a:hover{color:var(--blue)}
.psft-base{max-width:1100px;margin:22px auto 0;padding-top:16px;border-top:1px solid var(--rule);text-align:center;font-size:.75rem;color:var(--ink-2)}
.psft-base a{color:inherit}
.psft-base a:hover{color:var(--blue)}
@media (max-width:900px){.ft-row{grid-template-columns:1fr;gap:28px}.psft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- reveal motion ---------- */
.rv{opacity:0;transform:translate3d(0,20px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-rail,.close h2 span,.slide img{animation:none!important;transition:none!important;transform:none!important}
  .card img,.card:hover img{transition:none;transform:none}
}

/* =====================================================================
   SERVICES PAGE (mirrors the store page)
   ===================================================================== */
.store-header{position:relative;background:#fff;padding:44px 18px 26px;overflow:hidden}
.store-header::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 8% 0%,rgba(0,113,227,.14) 0,rgba(0,113,227,0) 70%);pointer-events:none}
.store-top{position:relative;max-width:980px;margin:0 auto;padding:60px 0 44px;display:grid;grid-template-columns:1.2fr .8fr;align-items:start;gap:24px}
.store-title{font-size:clamp(34px,4.2vw,48px);white-space:nowrap;font-weight:600;letter-spacing:-.035em;line-height:1.04}
.store-title span{color:var(--blue)}
.store-tag{text-align:right}
.store-tag h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.store-tag .pills{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}
.pill-o{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border-radius:980px;border:1px solid var(--rule);font-size:13px;color:var(--link-l);background:#fff;transition:border-color .2s}
.pill-o:hover{border-color:var(--link-l)}
.store-icons{position:relative;max-width:980px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;padding:0 10px}
.store-icon{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;font-weight:500;color:var(--ink);flex:1;min-width:0;text-align:center}
.store-icon .ic{width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--snow);display:flex;align-items:center;justify-content:center}
.store-icon .ic img{width:100%;height:100%;object-fit:cover}
.store-icon:hover{color:var(--blue)}
.findbar{background:rgba(250,250,252,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:12px 18px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.findbar-in{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.search{flex:1 1 260px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--rule);border-radius:980px;padding:9px 16px;font-size:14px;color:var(--ink-2)}
.search input{border:0;background:none;flex:1;font:inherit;color:var(--ink);outline:none;min-width:0}
.search svg{width:16px;height:16px;flex:none}
.count{font-size:12px;color:var(--blue);font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchips button{padding:7px 14px;border-radius:980px;border:1px solid var(--rule);background:#fff;font-size:13px;font-weight:500;color:var(--ink);transition:background .2s,color .2s}
.fchips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sx{background:#fff;padding:32px 14px 48px}
.sx-in{max-width:980px;margin:0 auto}
.sx-h{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:26px}
.sx-h span{color:var(--ink-2);font-weight:600}
.sx-h.white{color:#fff}
.sx-h.white span{color:#86868b}
.latest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.lcard{position:relative;border-radius:18px;overflow:hidden;background:var(--snow);color:var(--ink);min-height:340px;padding:26px 24px 0;display:flex;flex-direction:column;transition:transform .35s var(--ease)}
.lcard:hover{transform:translateY(-3px)}
.lcard.black{background:#000;color:#fff}
.lcard h3{font-size:18.4px;font-weight:700;letter-spacing:-.018em;line-height:1.2}
.lcard .tag{font-size:14px;font-weight:600;margin-top:8px;line-height:1.3}
.lcard.black .tag{color:#2997ff}
.lcard .tag.red{color:#ff2d55}
.lcard .from{font-size:12px;color:var(--ink-2);margin-top:6px}
.lcard.black .from{color:#a1a1a6}
.lcard .pic{margin-top:auto;padding-top:18px;display:flex;justify-content:center}
.lcard .pic img{width:72%;height:160px;object-fit:cover;object-position:50% 0;border-radius:10px 10px 0 0}
.lcard.black .pic img{box-shadow:0 10px 30px rgba(0,0,0,.6)}
@media (max-width:900px){.latest{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.latest{grid-template-columns:1fr}}
.help4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hcard{position:relative;border-radius:18px;background:var(--snow);padding:26px 24px 0;min-height:330px;display:flex;flex-direction:column;color:var(--ink);overflow:hidden;transition:transform .35s var(--ease)}
.hcard:hover{transform:translateY(-3px)}
.hcard.blue{background:linear-gradient(180deg,#f3f7fc,#e3ecf8)}
.hcard .eye{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.hcard h3{font-size:18.4px;font-weight:700;letter-spacing:-.018em;line-height:1.2}
.hcard p{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:8px;letter-spacing:0}
.hcard .pic{margin-top:auto;display:flex;justify-content:center;padding-top:18px}
.hcard .pic img{width:70%;height:140px;object-fit:cover;object-position:50% 0;border-radius:10px 10px 0 0}
.hcard .pic svg{width:110px;height:110px;stroke:var(--link-l);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
@media (max-width:900px){.help4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.help4{grid-template-columns:1fr}}
.diff{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.diff::-webkit-scrollbar{display:none}
.dcard{flex:0 0 186px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 20px;min-height:140px;letter-spacing:0}
.dcard svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.dcard p{font-size:13px;line-height:1.45;color:var(--ink-2)}
.dcard p b{color:var(--blue);font-weight:600}
.featured{background:#000;padding:48px 14px 64px;color:#fff}
.feat{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.feat::-webkit-scrollbar{display:none}
.fcard{position:relative;flex:0 0 calc(25% - 9px);min-width:230px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;scroll-snap-align:start;background:#111}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.2s var(--ease)}
.fcard:hover img{transform:scale(1.04)}
.fcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.6) 38%,rgba(0,0,0,.08) 62%,rgba(0,0,0,0) 75%)}
.fcard .copy{position:absolute;left:0;right:0;top:0;z-index:2;padding:22px 20px 0}
.fcard .eye{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:6px}
.fcard h3{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.feat-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;color:#86868b;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.feat-ctl button{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
.feat-ctl button:hover{background:rgba(255,255,255,.22)}
.range{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.range::-webkit-scrollbar{display:none}
.rcard{position:relative;flex:0 0 232px;aspect-ratio:232/360;border-radius:18px;overflow:hidden;background:#000;color:#fff;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px 22px;transition:transform .35s var(--ease)}
.rcard:hover{transform:translateY(-3px)}
.rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);z-index:0}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%);z-index:1}
.rcard .copy{position:relative;z-index:2}
.rcard .eye{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#86868b;margin-bottom:6px}
.rcard h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.rcard .from{font-size:12px;color:#a1a1a6;margin-top:4px;letter-spacing:0}
.rcard.intro{background:var(--snow);color:var(--ink);justify-content:flex-start;padding:26px 22px 0}
.rcard.intro::after{display:none}
.rcard.intro h3{font-size:18.4px;font-weight:700;letter-spacing:-.018em;line-height:1.2}
.rcard.intro p{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:8px;letter-spacing:0}
.rcard.intro p a{color:var(--link-l)}
.rcard.intro img{position:absolute;inset:auto 0 0 0;height:46%;z-index:0;object-position:50% 20%}
.sx-why{background:var(--snow);padding:70px 14px}
.sx-why .sx-h{text-align:center}
.why4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:980px;margin:0 auto}
.wcard{background:#fff;border-radius:18px;padding:28px 24px 30px;letter-spacing:0}
.wcard svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.wcard h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.wcard p{font-size:13px;line-height:1.5;color:var(--ink-2)}
.wcard p b{color:var(--ink);font-weight:600}
@media (max-width:900px){.why4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why4{grid-template-columns:1fr}}
.promo{background:#fbfbfd;padding:66px 14px 74px}
.promo-in{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.promo .brand{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:18px}
.promo .brand svg{width:22px;height:22px}
.promo h2{font-size:clamp(26px,3.2vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.promo p{font-size:17px;line-height:1.47;color:var(--ink-2);margin-top:16px;max-width:38ch}
.promo .lnk{margin-top:14px;font-size:15px}
.promo-pic{border-radius:22px;overflow:hidden;aspect-ratio:1;background:var(--snow)}
.promo-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (max-width:800px){.promo-in{grid-template-columns:1fr}}
.ways{background:var(--snow);padding:62px 14px 66px}
.ways-in{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;text-align:center}
.way svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 14px}
.way h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.way p{font-size:13px;line-height:1.5;color:var(--ink-2);letter-spacing:0}
.way .lnk{font-size:13px;margin-top:8px;justify-content:center}
@media (max-width:900px){.ways-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ways-in{grid-template-columns:1fr}}
@media (max-width:640px){
  .store-top{grid-template-columns:1fr;padding:44px 0 32px}.store-title{white-space:normal}
  .store-tag{text-align:left}.store-tag .pills{justify-content:flex-start}
  .store-icons{overflow-x:auto;justify-content:flex-start;gap:22px;padding-bottom:6px;scrollbar-width:none}
  .store-icon{flex:0 0 72px}
}

/* =====================================================================
   v2 additions: logos, section bands, case studies, approach steps
   ===================================================================== */
.logos{background:#fff;padding:64px 22px 48px;text-align:center}
.logos-h{font-size:17px;font-weight:400;color:var(--ink-2);letter-spacing:-.01em;margin-bottom:28px}
.logo-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 56px;max-width:980px;margin:0 auto}
.logo-row li{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--ink);opacity:.82}
.band{background:var(--snow);padding:72px 22px 36px;text-align:center}
.band-head{max-width:820px;margin:0 auto;text-align:center}
.band-head .s{color:var(--ink-2)}
.band + .grid{padding-top:0}
.cases{background:#fff;padding:88px 22px 72px}
.cases .band-head{margin-bottom:36px}
.case-grid{list-style:none;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.case a{display:flex;flex-direction:column;min-height:300px;padding:28px 26px 24px;border-radius:22px;background:var(--snow);color:var(--ink);transition:transform .35s var(--ease)}
.case a:hover{transform:translateY(-3px)}
.case.dark a{background:#000;color:var(--snow)}
.case.blue a{background:var(--blue);color:#fff}
.case-eye{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;opacity:.72;margin-bottom:auto}
.case-name{display:block;font-size:clamp(28px,2.8vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:36px 0 10px}
.case-txt{font-size:15px;line-height:1.45;max-width:30ch;letter-spacing:0;opacity:.88}
.case-more{display:inline-block;margin-top:18px;font-size:15px;color:var(--link-l)}
.case.dark .case-more{color:var(--link-d)}
.case.blue .case-more{color:#fff}
.case a:hover .case-more{text-decoration:underline}
@media (max-width:900px){.case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.case-grid{grid-template-columns:1fr}.case a{min-height:240px}}
.steps{background:#000;color:var(--snow);padding:96px 22px 104px}
.steps .band-head .s{color:rgba(245,245,247,.72)}
.step-list{list-style:none;max-width:1180px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.step-list li{padding:0 26px}
.step-list h3{font-size:clamp(32px,3.6vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:16px}
.step-list p{font-size:17px;line-height:1.47;color:rgba(245,245,247,.82);max-width:34ch}
@media (max-width:768px){.step-list{grid-template-columns:1fr;gap:40px}.step-list li{padding:0}}
.close-alt{margin-top:22px;font-size:14px;color:var(--ink-2)}
.close-alt a{color:var(--link-l)}
.psft-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.psft-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =====================================================================
   Desktop scale: the layout reads best at the density of a 75% zoom,
   so desktop viewports render at that scale. Phones are untouched.
   ===================================================================== */
@media (min-width:1200px){html{zoom:.78}}
@media (min-width:900px) and (max-width:1199.98px){html{zoom:.88}}

/* ---------- case-study pages ---------- */
.cs-hero{background:#000;color:#fff;padding:120px 22px 0;overflow:hidden}
.cs-hero-in{max-width:980px;margin:0 auto;text-align:center}
.cs-eye{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:rgba(245,245,247,.72);margin-bottom:14px}
.cs-hero h1{font-size:clamp(44px,6.6vw,80px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.cs-sum{font-size:clamp(17px,2vw,22px);color:#f3f4f6;margin:16px auto 22px;max-width:640px;line-height:1.45;text-wrap:balance}
.cs-chips{list-style:none;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.cs-chips li{font-size:13px;font-weight:500;padding:7px 14px;border-radius:980px;background:rgba(255,255,255,.12);color:var(--snow)}
.cs-shots{position:relative;max-width:1180px;margin:56px auto 0;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:end;padding:0 0 0 0}
.cs-shot{display:block;border-radius:18px 18px 0 0;overflow:hidden;background:#111;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.cs-shot img{width:100%;height:auto;display:block}
.cs-shot.mob{border-radius:28px 28px 0 0;border:6px solid #1d1d1f;border-bottom:0}
@media (max-width:768px){.cs-hero{padding-top:90px}.cs-shots{grid-template-columns:1fr;margin-top:36px}.cs-shot.mob{display:none}}
.cs-stats{background:#fff;padding:72px 22px 48px;text-align:center}
.stat-row{list-style:none;max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat-row li{background:var(--snow);border-radius:18px;padding:30px 22px 26px}
.stat-row strong{display:block;font-size:clamp(40px,4.6vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.stat-row span{display:block;margin-top:10px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.stat-row small{display:block;margin-top:4px;font-size:13px;color:var(--ink-2);letter-spacing:0}
.stat-row li.pending strong{color:var(--ink-3)}
.cs-note{margin-top:18px;font-size:13px;color:var(--ink-2)}
@media (max-width:640px){.stat-row{grid-template-columns:1fr}}
.cs-story{background:var(--snow);padding:88px 22px 96px}
.sr{position:absolute;left:-9999px}
.cs-cols{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cs-cols div{background:#fff;border-radius:22px;padding:32px 28px 36px}
.cs-cols h3{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.cs-cols p{font-size:17px;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
@media (max-width:900px){.cs-cols{grid-template-columns:1fr}}
.cs-next{background:#000;color:#fff;padding:12px 12px 0}
.cs-next-link{display:flex;flex-direction:column;align-items:center;text-align:center;padding:88px 22px 96px;color:#fff;transition:opacity .2s}
.cs-next-link:hover{opacity:.85}
.cs-next-name{font-size:clamp(40px,5vw,72px);font-weight:700;letter-spacing:-.035em;line-height:1}
.cs-next-sum{margin-top:14px;font-size:17px;color:rgba(245,245,247,.72);max-width:48ch}

/* =====================================================================
   v3: larger nav and footer type, compact hero, logo marquee, swapped
   discipline/work layouts, auto-scrolling services rail
   ===================================================================== */
.nv-logo{font-size:1.05rem}
.nv-links{font-size:14px;gap:34px}
.nv-cta{font-size:13px;padding:6px 14px}
.nv-col a{font-size:14px}
.nv-col.big a{font-size:24px}
.nv-label{font-size:13px}
.psft{font-size:14px}
.psft-grid h4{font-size:14px}
.psft-grid a{font-size:14px;min-height:36px}
.ft-brand p{font-size:14px;max-width:34ch}
.psft-base{font-size:13px}
.hero.compact{min-height:0;padding:170px 16px 120px}
.hero.compact .hero-tag{margin-bottom:34px}
.s,.hero-tag,.case-txt,.close-sub,.step-list p{text-wrap:balance}
.band-head .h{text-wrap:balance}
.logo-marquee{background:#fff;padding:64px 0 56px;text-align:center;overflow:hidden}
.logo-viewport{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{list-style:none;display:flex;align-items:center;gap:88px;width:max-content;padding:0 44px;animation:marquee 32s linear infinite}
.logo-track li{flex:0 0 auto;display:flex;align-items:center}
.logo-track img{height:34px;width:auto;display:block}
.logo-viewport:hover .logo-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:640px){.logo-track{gap:48px;animation-duration:22s}.logo-track img{height:26px}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:28px 48px}.logo-track li[aria-hidden]{display:none}.logo-viewport{mask-image:none;-webkit-mask-image:none}}
.store-header .store-top h2.store-title{font-size:clamp(34px,4.2vw,48px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.store-tagline{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.disciplines{background:#fff}
.case-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
.case-grid.cols4 .case a{min-height:320px;padding:26px 24px 22px}
.case-grid.cols4 .case-name{font-size:clamp(24px,2.1vw,30px)}
@media (max-width:900px){.case-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.case-grid.cols4{grid-template-columns:1fr}}
.tile .eyebrow{color:rgba(245,245,247,.72);margin-bottom:8px}
.tile.light .eyebrow{color:var(--ink-2)}
.tile.blue{background:var(--blue);color:#fff}
.tile.blue .eyebrow{color:rgba(255,255,255,.75)}
.btn-white{background:#fff;border-color:#fff;color:var(--blue)}
.btn-white:hover{background:var(--snow)}
.tile.cover.bottom .copy{padding-bottom:40px}
.tile.cover.bottom .s{max-width:36ch;margin-left:auto;margin-right:auto}
.range.auto{display:block;overflow:hidden;width:80vw;max-width:none;margin:0 calc(50% - 40vw);padding:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.range-track{display:flex;gap:12px;width:max-content;animation:marquee 48s linear infinite}
.range.auto:hover .range-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.range-track{animation:none}.range.auto{overflow-x:auto}}
/* v3 fixes: stronger scrim under work-tile copy; nav type stays on one line on phones */
.tile.cover.bottom::before{background:linear-gradient(0deg,rgba(0,0,0,.94) 0,rgba(0,0,0,.72) 34%,rgba(0,0,0,.25) 58%,rgba(0,0,0,0) 78%)}
@media (max-width:900px){.nv-logo{font-size:.95rem;white-space:nowrap}.nv-cta{white-space:nowrap;font-size:12px;padding:5px 12px}.nv-in{gap:12px}}
/* v3.1: services header spans the full width */
.store-header{padding:44px 0 32px}
.store-top{max-width:none;padding:64px 22px 48px;grid-template-columns:1fr auto}
.store-tag{text-align:right}
.store-icons{max-width:none;padding:0 22px;justify-content:space-around;gap:16px}
.store-icon{font-size:14px;gap:12px}
.store-icon .ic{width:88px;height:88px;border-radius:18px}
@media (max-width:640px){.store-top{grid-template-columns:1fr;padding:44px 16px 32px}.store-icons{padding:0 16px;justify-content:flex-start}.store-icon .ic{width:64px;height:64px;border-radius:14px}}

/* =====================================================================
   v4: case studies as folders with cards that fan out
   ===================================================================== */
.folders{background:#fff radial-gradient(rgba(0,0,0,.09) 1px,transparent 1px) 0 0/22px 22px;padding:88px 22px 96px}
.folders .band-head{margin-bottom:72px}
.folder-grid{list-style:none;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:150px 40px;padding-top:130px}
.folder{position:relative;height:270px;perspective:1200px;transform-style:preserve-3d}
.folder-hit{position:absolute;inset:0;z-index:5;background:none;border:0;border-radius:18px;cursor:pointer}
.folder-hit:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.folder-back,.folder-front{position:absolute;left:0;right:0;bottom:0;border-radius:18px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.folder-back{top:0;overflow:hidden;background:#d2d2d7;z-index:1}
.folder-back::before{content:"";position:absolute;left:0;top:-22px;width:42%;height:44px;border-radius:14px 14px 0 0;background:inherit;z-index:0}
.folder-back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:saturate(1.1)}
.folder-back.next{background:linear-gradient(135deg,#2b2b2e,#000)}
.folder-cards{list-style:none;position:absolute;left:18px;right:18px;bottom:96px;height:190px;z-index:2;pointer-events:none}
.fcardx{position:absolute;left:0;right:0;bottom:0;height:190px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.18);transform:translateY(60px) scale(.94);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.fcardx img{width:100%;height:150px;object-fit:cover;object-position:50% 0;display:block}
.fcardx>span{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px}
.fcardx>span b{font-weight:600}.fcardx>span i{font-style:normal;color:var(--ink-2);font-size:12px}
.fcardx.doc a{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:18px 18px 16px;color:var(--ink);background:var(--snow)}
.doc-eye{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:auto}
.doc-h{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:10px 0 8px}
.doc-more{font-size:14px;color:var(--link-l)}
.fcardx.doc a:hover .doc-more{text-decoration:underline}
.folder-front{top:46%;z-index:3;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 50px rgba(0,0,0,.14);transform-origin:50% 100%;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 22px}
.folder-front::before{content:"";position:absolute;left:0;top:-20px;width:42%;height:42px;border-radius:14px 14px 0 0;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.folder-meta{display:flex;flex-direction:column;gap:4px}
.folder-name{font-size:21px;font-weight:600;letter-spacing:-.02em}
.folder-items{font-size:12px;color:var(--ink-2)}
.folder-btn{position:relative;z-index:6;width:52px;height:52px;border-radius:16px;background:#1d1d1f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .25s}
.folder-btn:hover{transform:translateY(-2px)}
.folder.dark .folder-front,.folder.dark .folder-front::before{background:rgba(28,28,30,.82);color:#fff}
.folder.dark .folder-items{color:rgba(255,255,255,.6)}
.folder.dark .folder-btn{background:#fff;color:#1d1d1f}
/* lean on hover */
.folder:hover .folder-front{transform:rotateX(-10deg) translateY(4px)}
.folder:hover .folder-back{transform:rotateX(-4deg)}
.folder:hover .fcardx,.folder.open .fcardx{opacity:1}
.folder:hover .fcardx:nth-child(1){transform:translate(-34px,-44px) rotate(-7deg)}
.folder:hover .fcardx:nth-child(2){transform:translate(0,-62px) rotate(0)}
.folder:hover .fcardx:nth-child(3){transform:translate(34px,-44px) rotate(7deg)}
/* open on click */
.folder.open .folder-front{transform:rotateX(-14deg) translateY(10px)}
.folder.open .folder-cards{pointer-events:auto}
.folder.open .fcardx:nth-child(1){transform:translate(-96px,-150px) rotate(-12deg)}
.folder.open .fcardx:nth-child(2){transform:translate(0,-176px) rotate(0)}
.folder.open .fcardx:nth-child(3){transform:translate(96px,-150px) rotate(12deg)}
.folder.open .fcardx:nth-child(3),.folder.open .fcardx:only-child{z-index:3}
.folder.open .fcardx:only-child{transform:translate(0,-160px)}
.folder.open .folder-hit{inset:auto 0 0 0;height:54%}
.folder-hint{text-align:center;margin-top:96px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:900px){.folder-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:140px 28px}}
@media (max-width:600px){.folder-grid{grid-template-columns:1fr;gap:150px 0;max-width:380px}.folder.open .fcardx:nth-child(1){transform:translate(-60px,-140px) rotate(-10deg)}.folder.open .fcardx:nth-child(3){transform:translate(60px,-140px) rotate(10deg)}}
@media (prefers-reduced-motion:reduce){.folder-back,.folder-front,.fcardx,.folder-btn{transition:none}}
/* v4.1: services header at 80% width, centred */
.store-top{width:80%;max-width:none;margin:0 auto;padding-left:0;padding-right:0}
.store-icons{width:80%;max-width:none;margin:0 auto;padding-left:0;padding-right:0;justify-content:space-between}
@media (max-width:640px){.store-top,.store-icons{width:auto;padding-left:16px;padding-right:16px}}
/* v4.2: wider fan when a folder is open */
.folder.open .fcardx:nth-child(1){transform:translate(-150px,-172px) rotate(-14deg)}
.folder.open .fcardx:nth-child(2){transform:translate(0,-206px) rotate(0)}
.folder.open .fcardx:nth-child(3){transform:translate(150px,-172px) rotate(14deg)}
@media (max-width:600px){.folder.open .fcardx:nth-child(1){transform:translate(-70px,-150px) rotate(-10deg)}.folder.open .fcardx:nth-child(2){transform:translate(0,-180px)}.folder.open .fcardx:nth-child(3){transform:translate(70px,-150px) rotate(10deg)}}

/* =====================================================================
   v5: wide centred carousel for case studies; discipline folders
   ===================================================================== */
.gallery.wide{background:#fff radial-gradient(rgba(0,0,0,.07) 1px,transparent 1px) 0 0/22px 22px;padding:88px 0 56px}
.gallery.wide .gal-head{margin-bottom:44px}
.gallery.wide .gal-track{--sw:min(1250px,100% - 150px);padding-left:calc((100% - var(--sw))/2);padding-right:calc((100% - var(--sw))/2);gap:14px}
.gallery.wide .gal-track::before{display:none}
.gallery.wide .slide{flex:0 0 var(--sw);aspect-ratio:1250/670;border-radius:0;background:#111}
.gallery.wide .slide img:first-child{object-position:50% 0}
.gallery.wide .slide::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.82) 100%)}
.gallery.wide .slide-logo{top:28px;left:34px;display:inline-flex;align-items:center;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.92);filter:none}
.gallery.wide .slide-logo img{height:22px;width:auto;display:block}
.gallery.wide .slide-title{left:34px;right:34px;bottom:104px;font-size:clamp(2.2rem,4.6vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.gallery.wide .slide-cap{left:34px;right:34px;bottom:30px}
.gallery.wide .slide-btn{padding:12px 22px;font-size:17px;font-weight:500}
.gallery.wide .slide-meta{font-size:17px}
.gallery.wide .gal-ctl{margin-top:30px}
@media (max-width:768px){.gallery.wide .gal-track{--sw:calc(100% - 48px)}.gallery.wide .slide{aspect-ratio:4/5}.gallery.wide .slide-title{font-size:2rem;bottom:120px}}
/* discipline folders: four across, 1–3 cards each */
.folder-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr));gap:150px 28px}
.folder-grid.cols4 .folder{height:240px}
.fcardx a{display:block;height:100%;color:var(--ink)}
.fcardx a:hover span b{text-decoration:underline}
.folder-cards[data-n="1"] .fcardx:nth-child(1){transform:translateY(60px) scale(.94)}
.folder:hover .folder-cards[data-n="1"] .fcardx:nth-child(1){transform:translate(0,-62px)}
.folder.open .folder-cards[data-n="1"] .fcardx:nth-child(1){transform:translate(0,-190px)}
.folder:hover .folder-cards[data-n="2"] .fcardx:nth-child(1){transform:translate(-38px,-50px) rotate(-6deg)}
.folder:hover .folder-cards[data-n="2"] .fcardx:nth-child(2){transform:translate(38px,-50px) rotate(6deg)}
.folder.open .folder-cards[data-n="2"] .fcardx:nth-child(1){transform:translate(-110px,-176px) rotate(-10deg)}
.folder.open .folder-cards[data-n="2"] .fcardx:nth-child(2){transform:translate(110px,-176px) rotate(10deg)}
.folder.open .fcardx:last-child{z-index:3}
@media (max-width:1100px){.folder-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.folder-grid.cols4{grid-template-columns:1fr;max-width:380px}.folder-grid.cols4 .folder{height:270px}.folder.open .folder-cards[data-n="2"] .fcardx:nth-child(1){transform:translate(-64px,-150px) rotate(-8deg)}.folder.open .folder-cards[data-n="2"] .fcardx:nth-child(2){transform:translate(64px,-150px) rotate(8deg)}}
/* v5.1: discipline folders — room above for the fan, stacked captions, tighter open fan */
.folder-grid.cols4{padding-top:190px}
.folder-grid.cols4 .fcardx{height:176px}
.folder-grid.cols4 .fcardx img{height:128px}
.folder-grid.cols4 .fcardx>span{flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px;line-height:1.25}
.folder-grid.cols4 .fcardx>span i{font-size:11px}
.folder-grid.cols4 .folder.open .fcardx:nth-child(1){transform:translate(-118px,-128px) rotate(-12deg)}
.folder-grid.cols4 .folder.open .fcardx:nth-child(2){transform:translate(0,-158px) rotate(0)}
.folder-grid.cols4 .folder.open .fcardx:nth-child(3){transform:translate(118px,-128px) rotate(12deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="2"] .fcardx:nth-child(1){transform:translate(-92px,-140px) rotate(-9deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="2"] .fcardx:nth-child(2){transform:translate(92px,-140px) rotate(9deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="1"] .fcardx:nth-child(1){transform:translate(0,-150px)}

/* =====================================================================
   v5.2: spacing pass — no empty bands between headings and content
   ===================================================================== */
.folders{padding:80px 22px 72px}
.folders .band-head{margin-bottom:36px}
.folder-grid{padding-top:96px;gap:120px 40px}
.folder-grid.cols4{padding-top:104px;gap:120px 28px}
.folder-grid.cols4 .folder-cards{bottom:40px}
.folder-grid.cols4 .folder.open .fcardx:nth-child(1){transform:translate(-118px,-118px) rotate(-12deg)}
.folder-grid.cols4 .folder.open .fcardx:nth-child(2){transform:translate(0,-146px) rotate(0)}
.folder-grid.cols4 .folder.open .fcardx:nth-child(3){transform:translate(118px,-118px) rotate(12deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="2"] .fcardx:nth-child(1){transform:translate(-92px,-130px) rotate(-9deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="2"] .fcardx:nth-child(2){transform:translate(92px,-130px) rotate(9deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="1"] .fcardx:nth-child(1){transform:translate(0,-140px)}
.folder-hint{margin-top:64px}
.store-header{padding:24px 0 28px}
.store-top{padding-top:40px;padding-bottom:36px}
.logo-marquee{padding:56px 0 48px}
.steps{padding:88px 22px 96px}
.gallery.wide{padding:80px 0 48px}
.gallery.wide .gal-head{margin-bottom:36px}
.faq{padding:80px 22px 56px}
.close{padding:120px 24px 56px}
.cs-stats{padding:64px 22px 40px}
.cs-story{padding:72px 22px 80px}
.cs-next-link{padding:80px 22px 88px}
@media (max-width:600px){.folder-grid.cols4 .folder-cards{bottom:96px}}
/* v5.3: fan spreads sideways, folders hug the heading */
.folders .band-head{margin-bottom:28px}
.folder-grid.cols4{padding-top:64px;gap:110px 28px}
.folder:hover .folder-cards .fcardx:nth-child(1){transform:translate(-30px,-34px) rotate(-6deg)}
.folder:hover .folder-cards .fcardx:nth-child(2){transform:translate(0,-46px) rotate(0)}
.folder:hover .folder-cards .fcardx:nth-child(3){transform:translate(30px,-34px) rotate(6deg)}
.folder:hover .folder-cards[data-n="2"] .fcardx:nth-child(1){transform:translate(-34px,-38px) rotate(-5deg)}
.folder:hover .folder-cards[data-n="2"] .fcardx:nth-child(2){transform:translate(34px,-38px) rotate(5deg)}
.folder:hover .folder-cards[data-n="1"] .fcardx:nth-child(1){transform:translate(0,-46px)}
.folder-grid.cols4 .folder.open .fcardx:nth-child(1){transform:translate(-128px,-78px) rotate(-12deg)}
.folder-grid.cols4 .folder.open .fcardx:nth-child(2){transform:translate(0,-96px) rotate(0)}
.folder-grid.cols4 .folder.open .fcardx:nth-child(3){transform:translate(128px,-78px) rotate(12deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="2"] .fcardx:nth-child(1){transform:translate(-100px,-86px) rotate(-9deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="2"] .fcardx:nth-child(2){transform:translate(100px,-86px) rotate(9deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="1"] .fcardx:nth-child(1){transform:translate(0,-96px)}
.folder.open .folder-cards .fcardx{z-index:4}
.folder.open .folder-cards{z-index:4}
.folder-hint{margin-top:48px}

/* v5.4: larger All-services tiles */
.store-icon .ic{width:104px;height:104px;border-radius:22px}
.store-icon{font-size:15px;gap:14px}
@media (max-width:640px){.store-icon .ic{width:72px;height:72px;border-radius:16px}}

/* v5.5: discipline pages */
.d-cover{max-width:1180px;height:440px;margin:56px auto 0;border-radius:18px 18px 0 0;overflow:hidden;background:#111;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.d-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.cs-chips li a{color:inherit}.cs-chips li a:hover{text-decoration:underline}
.d-cases{background:#fff;padding:88px 22px 96px}
.d-cases .band-head{margin-bottom:40px}
.d-grid{list-style:none;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.dcard a{display:block;height:100%;border-radius:22px;overflow:hidden;background:var(--snow);color:var(--ink);transition:transform .35s var(--ease)}
.dcard a:hover{transform:translateY(-4px)}
.dcard img{width:100%;height:220px;object-fit:cover;object-position:50% 0;display:block}
.dcard-copy{display:block;padding:20px 22px 24px}
.dcard-copy b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.dcard-copy i{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:2px}
.dcard-copy p{font-size:15px;line-height:1.45;margin-top:10px;color:var(--ink)}
.dcard-copy em{display:block;font-style:normal;font-size:14px;color:var(--blue);margin-top:14px}
.dcard a:hover em{text-decoration:underline}
@media (max-width:640px){.d-cover{height:260px;margin-top:36px;border-radius:14px 14px 0 0}.d-cases{padding:64px 16px 72px}.dcard img{height:180px}}

/* v5.6: bigger nav logo and type */
.nv,.nv-in,.nv-links,.nv-links li,.nv-links li>a,.nv-logo{height:52px;min-height:52px}
.nv-logo{font-size:1.3rem;gap:10px}
.nv-logo svg{width:28px;height:28px}
.nv-links{font-size:16px;gap:36px}
.nv-cta{font-size:14px;padding:7px 16px}
.nv-panel{top:52px}
@media (max-width:900px){.nv-logo{font-size:1.15rem}.nv-logo svg{width:24px;height:24px}.nv.open .nv-menu{top:52px}}

/* v5.7: service tile popup */
.svc-pop{border:0;border-radius:26px;padding:0;width:min(460px,calc(100% - 32px));background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:center}
.svc-pop::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.svc-pop-in{position:relative;padding:40px 32px 34px}
.svc-pop .ic{display:block;width:120px;height:120px;margin:0 auto 20px;border-radius:26px;overflow:hidden;background:var(--snow)}
.svc-pop .ic img{width:100%;height:100%;object-fit:cover;display:block}
.svc-pop h3{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.svc-pop-text{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink)}
.svc-pop-price{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink-2)}
.svc-pop-go{display:inline-flex;align-items:center;gap:6px;margin-top:22px;padding:11px 22px;border-radius:980px;background:var(--blue);color:#fff;font-size:16px;font-weight:500}
.svc-pop-go:hover{background:var(--blue-h)}
.svc-pop-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.svc-pop-x:hover{background:rgba(0,0,0,.12)}
.svc-pop{position:fixed;inset:auto;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);max-height:calc(100vh - 32px);overflow:auto}

/* v5.8: four-card folder fan, inverted marquee logo */
.logo-track img.inv{filter:invert(1)}
.folder:hover .folder-cards[data-n="4"] .fcardx:nth-child(1){transform:translate(-42px,-30px) rotate(-7deg)}
.folder:hover .folder-cards[data-n="4"] .fcardx:nth-child(2){transform:translate(-14px,-44px) rotate(-2deg)}
.folder:hover .folder-cards[data-n="4"] .fcardx:nth-child(3){transform:translate(14px,-44px) rotate(2deg)}
.folder:hover .folder-cards[data-n="4"] .fcardx:nth-child(4){transform:translate(42px,-30px) rotate(7deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(1){transform:translate(-150px,-70px) rotate(-14deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(2){transform:translate(-50px,-96px) rotate(-5deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(3){transform:translate(50px,-96px) rotate(5deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(4){transform:translate(150px,-70px) rotate(14deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(1){transform:translate(-126px,-74px) rotate(-12deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(2){transform:translate(-42px,-96px) rotate(-4deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(3){transform:translate(42px,-96px) rotate(4deg)}
.folder-grid.cols4 .folder.open .folder-cards[data-n="4"] .fcardx:nth-child(4){transform:translate(126px,-74px) rotate(12deg)}
.logo-track img.inv{height:58px}
.folder-back img[src*="-hero"]{object-position:50% 40%}

/* ============================================================
   v7 — BLEND THEME
   Brucira's boldness (dark type-led hero, volt ticker, giant
   numbered discipline sections, Inter, left-aligned display)
   on Pixelspot's light grounds and card language.
   Volt is the single accent; blue is retired to ink.
   ============================================================ */
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --volt:#E6FA36; --volt-h:#F1FF6B; --volt-tint:rgba(214,235,25,.26);
  --dark:#0E0E0F; --dark-2:#0A0A0B; --dpanel:#17171A;
  --dtxt:#F4F4F1; --dtxt-2:#A2A2A8; --line-dk:rgba(255,255,255,.14);
  --blue:#0B0B0C; --blue-h:#26262B; --link-l:#0B0B0C; --link-d:var(--volt);
}
body{font-family:var(--font)}

/* --- nav: dark pill bar (shared) --- */
.nv{background:rgba(10,10,11,.78)}
.nv-links{gap:8px;font-size:12px}
.nv-links li,.nv-links li>a{height:auto;min-height:0}
.nv-links li>a{text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:8px 14px;border-radius:980px;background:rgba(255,255,255,.07);opacity:1}
.nv-links li>a:hover,.has-menu:hover>a{background:rgba(255,255,255,.16);color:#fff}
.nv-cta{background:var(--volt);color:#0B0B0C;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.nv-cta:hover{background:var(--volt-h)}
.nv-panel{top:52px;background:rgba(14,14,16,.98);border-bottom:1px solid var(--line-dk)}

/* --- hero: dark, type-led --- */
.hero.intl{min-height:88vh;display:flex;align-items:flex-end;background:var(--dark);padding:150px 0 56px;text-align:left}
.hero.intl .hero-in{display:block;width:100%;max-width:1256px;margin:0 auto;padding:0 22px;text-align:left}
.hero-eye{text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--dtxt-2);margin-bottom:26px}
.hero.intl h1{font-size:clamp(50px,7.4vw,116px);font-weight:600;letter-spacing:-.035em;line-height:.99;color:var(--dtxt);max-width:none}
.hero.intl h1 em{font-style:normal;color:var(--volt)}
.hero.intl .hero-tag{font-size:clamp(17px,1.5vw,21px);color:var(--dtxt-2);margin:28px 0 32px;max-width:52ch;line-height:1.55}
.hero.intl .hero-actions{display:flex;justify-content:flex-start;gap:12px}
.hero.intl .btn{min-height:48px;padding:13px 24px;font-size:16px}
.hero.intl .btn-p{background:var(--volt);color:#0B0B0C}
.hero.intl .btn-p:hover{background:var(--volt-h)}
.hero.intl .btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.hero.intl .btn-glass:hover{background:rgba(255,255,255,.14)}
.hero-links{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:72px;padding-top:26px;border-top:1px solid var(--line-dk)}
.hero-links a{display:inline-flex;align-items:center;gap:12px;font-size:clamp(19px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;color:var(--dtxt);transition:color .2s}
.hero-links a:hover{color:var(--volt)}
.hero-links .chip{width:1.25em;height:1.25em;border-radius:50%;background:var(--volt);color:#0B0B0C;display:inline-flex;align-items:center;justify-content:center;font-size:.55em;font-weight:700}

/* --- ticker: volt --- */
.ticker{background:var(--volt);color:#0B0B0C;overflow:hidden;padding:13px 0}
.ticker-track{display:flex;align-items:center;width:max-content;animation:marquee 46s linear infinite;white-space:nowrap}
.ticker-track span{font-size:14px;font-weight:700;letter-spacing:-.005em}
.ticker-track i{font-style:normal;margin:0 26px;font-size:11px}
.ticker:hover .ticker-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* --- big left section heads (light sections: ink; steps keeps snow) --- */
.band-head,.gal-head{max-width:1256px;margin:0 auto 44px;padding:0 22px;text-align:left}
.band-head .h,.gal-head .h{font-size:clamp(40px,5.4vw,80px);font-weight:600;letter-spacing:-.033em;line-height:1.02}
.band-head .s,.gal-head .s{font-size:clamp(16px,1.4vw,19px);margin-top:14px}
.steps .band-head .s{color:rgba(245,245,247,.72)}

/* --- clients: light band (pixelspot) --- */
.logo-marquee{padding:56px 0 48px}
.logos-h{text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--ink-2)}

/* --- discipline cards: dark, pinned, stacking on scroll --- */
.disc{background:#fff;padding:0 0 48px}
.disc-block{position:sticky;top:calc(52px + var(--i,0)*56px);background:var(--dark);color:var(--dtxt);border-radius:26px 26px 0 0;padding:0 0 70px;box-shadow:0 -20px 60px rgba(0,0,0,.28);min-height:calc(100vh - 52px - var(--i,0)*56px)}
.disc-top{max-width:1256px;margin:0 auto;padding:0 22px;height:56px;display:flex;align-items:center;border-bottom:1px solid var(--line-dk)}
.disc-top a{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--dtxt)}
.disc-top a:hover{color:var(--volt)}
.disc-top .chip{width:22px;height:22px;border-radius:50%;background:var(--volt);color:#0B0B0C;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.disc-inner{max-width:1256px;margin:0 auto;padding:54px 22px 0}
.disc-name a{font-size:clamp(58px,9.4vw,148px);font-weight:600;letter-spacing:-.045em;line-height:.98;color:var(--dtxt);transition:color .25s}
.disc-name a:hover{color:var(--volt)}
.disc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px 72px;margin-top:46px;align-items:start}
.disc-copy p{color:var(--dtxt-2);font-size:17px;line-height:1.6;max-width:46ch}
.disc-price{margin-top:14px;font-size:14px;font-weight:600;color:var(--dtxt)}
.pill-learn{display:inline-flex;align-items:center;gap:10px;margin-top:30px;background:#fff;color:#0B0B0C;border-radius:980px;padding:13px 24px;font-weight:600;font-size:15px;transition:background .2s,transform .2s}
.pill-learn:hover{background:var(--volt);transform:translateY(-2px)}
.pill-learn .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.disc-list{list-style:none}
.disc-list li{border-bottom:1px solid var(--line-dk)}
.disc-list li:first-child{border-top:1px solid var(--line-dk)}
.disc-list a{display:flex;align-items:baseline;gap:26px;padding:21px 6px;font-size:clamp(18px,1.9vw,25px);font-weight:500;letter-spacing:-.015em;color:var(--dtxt);transition:color .2s,transform .25s}
.disc-list a:hover{color:var(--volt);transform:translateX(8px)}
.disc-list i{font-style:normal;font-size:13px;font-weight:600;color:var(--dtxt-2);font-variant-numeric:tabular-nums}

/* --- volt accent moments on the light system --- */
.slide-btn{background:var(--volt);color:#0B0B0C}
.slide-btn:hover{background:var(--volt-h)}
.gal-dots button.on{background:var(--ink)}
.gal-all{color:var(--ink);font-weight:600}
.folder-btn{background:var(--volt);color:#0B0B0C}
.folder.dark .folder-btn{background:var(--volt);color:#0B0B0C}
.sec-eye{color:var(--ink-2)}
.faq-wa{border-color:var(--ink);color:var(--ink)}
.faq-wa:hover{background:var(--volt);border-color:var(--volt);color:#0B0B0C}
.faq-list details[open] summary .q{background:var(--volt-tint);color:var(--ink)}
.faq-list p .a{background:var(--volt);color:#0B0B0C}
.faq-list p .a a{color:#0B0B0C}
.close h2 span{background:var(--volt);-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#0B0B0C;color:#0B0B0C;animation:none;padding:0 .14em;border-radius:.06em;display:inline-block;line-height:1.06}
.btn-dark:hover{background:var(--volt);color:#0B0B0C;box-shadow:0 14px 34px rgba(214,235,25,.4)}
.svc-pop-go{background:var(--volt);color:#0B0B0C}
.count{color:var(--ink);font-weight:600}
.dcard-copy em{color:var(--ink);font-weight:600}
.cs-cols h3{color:var(--ink)}
.wcard svg{stroke:var(--ink)}
.psft-grid a:hover{color:var(--ink)}

/* --- buttons that used blue fills become ink (links stay legible) --- */
.btn-p,.btn.btn-p{background:var(--ink);color:#fff}
.btn-p:hover{background:#26262B}
.faq-list summary::after{background:var(--snow);color:var(--ink-2)}

/* --- mobile --- */
@media (max-width:900px){
  .hero.intl{min-height:78vh;padding:120px 0 40px}
  .hero-links{gap:12px 22px;margin-top:48px}
  .disc-body{grid-template-columns:1fr;gap:28px}
  .disc-block{position:static;min-height:0;border-radius:20px;margin:0 10px 14px;padding:0 0 46px}
  .disc-inner{padding:34px 16px 0}
  .disc-top{padding:0 16px}
  .ticker-track span{font-size:13px}
  .band-head,.gal-head{margin-bottom:32px}
}

/* ============================================================
   v7.1 — propagate the blend to every page
   ============================================================ */
/* case + discipline page heads: dark, left-aligned, type-led */
.cs-hero{background:var(--dark);padding:150px 22px 0}
.cs-hero-in{max-width:1256px;margin:0 auto;text-align:left}
.cs-eye{text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--dtxt-2);margin-bottom:22px}
.cs-hero h1{font-size:clamp(52px,7.6vw,118px);font-weight:600;letter-spacing:-.04em;line-height:.99;color:var(--dtxt)}
.cs-sum{margin:24px 0 26px;max-width:52ch;color:var(--dtxt-2);font-size:clamp(17px,1.6vw,21px);line-height:1.5;text-wrap:unset}
.cs-chips{justify-content:flex-start}
.cs-chips li{background:rgba(255,255,255,.1);color:var(--dtxt);font-weight:600}
.cs-chips li a{color:inherit}
.cs-shots{margin-top:64px}
.d-cover{margin-top:64px}

/* story + stats keep light grounds, new type */
.cs-stats{background:#fff}
.stat-row li{background:var(--snow)}
.cs-story{background:var(--snow)}
.cs-cols h3{font-weight:600}
.d-cases{background:#fff}

/* next-case band: volt arrow energy */
.cs-next-link .cs-eye{color:var(--dtxt-2)}
.cs-next-name{font-weight:600;letter-spacing:-.04em}
.cs-next-link:hover .cs-next-name{color:var(--volt)}

/* services page head: dark band in the same voice */
.store-header{background:var(--dark);padding:150px 18px 56px}
.store-header::before,.store-header::after{display:none}
.store-top{padding-top:0;padding-bottom:40px}
.store-title{color:var(--dtxt);font-size:clamp(52px,7vw,104px);font-weight:600;letter-spacing:-.04em;white-space:normal;line-height:.99}
.store-tagline{color:var(--dtxt-2)}
.store-top .pill-o{border-color:rgba(255,255,255,.3);color:var(--dtxt)}
.store-top .pill-o:hover{border-color:var(--volt);color:var(--volt)}
.store-icon{color:var(--dtxt)}
.store-icon:hover{color:var(--volt)}
.store-icon .ic{background:#1B1B1F}
.findbar{background:rgba(255,255,255,.92)}

/* services sections stay light; headline scale follows the system */
.sx-h{font-size:clamp(34px,4.2vw,60px);font-weight:600;letter-spacing:-.03em}
.sx-h span{color:var(--ink-2)}
.promo h2{font-weight:600;letter-spacing:-.03em}

/* close: same weight everywhere */
.close h2{font-weight:600}

@media (max-width:900px){
  .cs-hero{padding:120px 16px 0}
  .store-header{padding:120px 16px 44px}
  .cs-hero h1{font-size:clamp(44px,11vw,64px)}
}

/* ============================================================
   v7.2 — taste pass: 80% frame, defects fixed
   (kept by direction: eyebrows, 01-numbering, caps labels,
    hairlines, glass nav, carousel peek, stacking overlap)
   ============================================================ */
/* one 80% frame shared by the page's main containers */
.hero.intl .hero-in,.band-head,.gal-head,.disc-top,.disc-inner{max-width:none;width:80%;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.gal-ctl{justify-content:flex-start;width:80%;max-width:none;margin:28px auto 0;padding:0;gap:16px}
.gal-all{margin-left:auto}
/* headline discipline: two lines at every width */
.hero.intl h1{font-size:clamp(42px,5.9vw,94px)}
/* ticker separator: a drawn dot, not a glyph */
.ticker-track i{width:6px;height:6px;border-radius:50%;background:#0B0B0C;margin:0 26px;display:inline-block;flex:0 0 auto}
/* pause control */
.gal-pause{display:inline-flex;align-items:center;justify-content:center}
/* shadows only when the fan is in motion */
.fcardx{box-shadow:none}
.folder:hover .fcardx,.folder.open .fcardx{box-shadow:0 18px 40px rgba(0,0,0,.35)}
/* no text-shadows; the slide scrim carries legibility */
.slide-title,.slide-meta{text-shadow:none}
/* nothing under 13px */
.nv-links{font-size:13px}
.hero-eye,.logos-h,.cs-eye{font-size:13px}
.sec-eye{font-size:13px}
.psft h4{font-size:13px}
.psft-grid a,.psft-base,.ft-brand p{font-size:13px}
/* reveal must never hide content from reduced-motion readers */
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}}
/* pinned blocks earn fewer screens */
.close{padding:110px 24px 52px}
.faq{padding:72px 22px 48px}
/* tablet: centre the dark band head instead of a half-empty row */
@media (max-width:900px){
  .steps .band-head{text-align:center}
  .steps .band-head .s{margin-left:auto;margin-right:auto}
  .hero.intl .hero-in,.band-head,.gal-head,.disc-top,.disc-inner,.gal-ctl{width:auto;padding-left:16px;padding-right:16px}
}
@media (max-width:480px){
  .band-head .h,.gal-head .h{font-size:34px}
}

/* v7.3 — taste fixes: pause icon, mobile headline, min text size */
.gal-pause svg{display:block}
@media (max-width:480px){
  .hero.intl h1{font-size:26px;line-height:1.1;letter-spacing:-.02em}
  .band-head .h,.gal-head .h{font-size:32px}
  .disc-name a{font-size:clamp(44px,13vw,64px)}
}
/* lift every remaining caption to 13px minimum */
.slide-meta,.gal-all,.fchips button,.count,.cs-note,.psft-base,.dcard-copy i{font-size:13px}

/* ============================================================
   v7.4 — full-bleed frame (brucira): blend elements run edge
   to edge on one tight, equal gutter; giant words run large.
   ============================================================ */
.hero.intl .hero-in,.band-head,.gal-head,.disc-top,.disc-inner,.gal-ctl{
  max-width:none;width:100%;margin-left:0;margin-right:0;box-sizing:border-box;
  padding-left:clamp(22px,3vw,48px);padding-right:clamp(22px,3vw,48px)
}
.hero.intl{display:block;padding-top:min(26vh,230px)}
.hero.intl .hero-in{padding-bottom:0}
.disc-body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px clamp(48px,7vw,120px)}
.hero.intl h1{font-size:clamp(50px,8.2vw,132px)}
.disc-name a{font-size:clamp(64px,11vw,184px)}
.band-head .h,.gal-head .h{font-size:clamp(44px,6vw,92px)}
@media (max-width:900px){
  .hero.intl .hero-in,.band-head,.gal-head,.disc-top,.disc-inner,.gal-ctl{padding-left:16px;padding-right:16px}
  .disc-body{grid-template-columns:1fr;gap:28px}
}
@media (max-width:480px){
  .hero.intl h1{font-size:26px}
  .disc-name a{font-size:clamp(44px,13vw,64px)}
  .band-head .h,.gal-head .h{font-size:34px}
}

/* v7.5 — nav aligned to the full-bleed gutter */
.nv-in{max-width:none;margin:0;padding-left:clamp(22px,3vw,48px);padding-right:clamp(22px,3vw,48px)}
.nv.open .nv-menu{padding-left:clamp(22px,3vw,48px);padding-right:clamp(22px,3vw,48px)}
@media (max-width:900px){.nv-in{padding-left:16px;padding-right:16px}}

/* v7.6 — taller nav */
.nv,.nv-in,.nv-links,.nv-links li,.nv-links li>a,.nv-logo{height:64px;min-height:64px}
.nv-panel{top:64px}
.disc-block{top:calc(64px + var(--i,0)*56px)}
.disc-top{top:0}
@media (max-width:900px){.nv.open .nv-menu{top:64px}}

/* v7.7 — nav links are plain text, no pill background */
.nv-links li>a{height:auto;min-height:0;background:transparent;border-radius:0;padding:6px 2px;opacity:.72}
.nv-links li>a:hover,.has-menu:hover>a{background:transparent;opacity:1;color:#fff}
.nv-links{gap:26px}

/* v7.8 — footer to the full-bleed gutter, consistent type */
.psft{padding:30px clamp(22px,3vw,48px) 34px;font-family:var(--font)}
.ft-row{max-width:none;margin:0}
.psft-areas,.psft-base{max-width:none;margin-left:0;margin-right:0}
.psft-grid h4{text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--ink-2)}

/* v7.9 — larger footer type to match the site body */
.psft{font-size:15px}
.psft-grid a{font-size:15px;min-height:40px}
.ft-brand p{font-size:15px;max-width:36ch;line-height:1.6}
.psft-grid h4{font-size:13px;margin-bottom:12px}
.psft-base{font-size:14px}
.ft-logo{font-size:1.15rem}
.psft-grid{gap:30px 16px}

/* ============================================================
   v8 — site-wide font + width normalization
   One full-bleed frame · display weight 600 · min 13px text ·
   headlines stay <=2 lines at tablet and phone.
   ============================================================ */
:root{--gut:clamp(22px,3vw,48px)}

/* -- content frame matches the full-bleed heads (equal L/R gutter) -- */
.cs-hero-in,.step-list,.cs-shots,.stat-row,.cs-cols,.d-grid,.sx-in,.store-top,.store-icons{
  max-width:none;width:auto;margin-left:0;margin-right:0;box-sizing:border-box;
  padding-left:var(--gut);padding-right:var(--gut)
}
.cs-next-link{padding-left:var(--gut);padding-right:var(--gut)}
.cs-sum,.close-sub,.hero.intl .hero-tag{max-width:54ch}

/* -- one display weight (600) across every big headline -- */
.close h2,.faq-head h2,.step-list h3,.stat-row strong,.cs-next-name,
.gallery.wide .slide-title,.slide-title,.logo-row li,.case-name{font-weight:600}

/* -- no text under 13px -- */
.nv-label,.nv-col a,.eyebrow,.work-kicker,.card-eye,.store-icon,.count,
.lcard .from,.hcard .eye,.fcard .eye,.rcard .eye,.rcard .from,.case-eye,
.cs-eye,.hero-eye,.logos-h,.doc-eye,.folder-items,.folder-hint,
.fcardx>span i,.folder-grid.cols4 .fcardx>span i,.sec-eye,.ft-brand p,
.psft-grid h4,.psft-grid a,.psft-areas .t,.psft-areas .l,.psft-base,
.feat-ctl,.gal-pause,.report-tiles small,.report-foot,.report-top,
.ft-badges span,.nv-links,.nv-cta{font-size:13px}
.sec-eye{font-size:13px;letter-spacing:.2em}
.ticker-track i{font-size:13px}

/* -- headlines <=2 lines on tablet / phone -- */
@media (max-width:1024px){
  .hero.intl h1{font-size:clamp(40px,6.4vw,70px)}
  .sx-h{font-size:clamp(28px,4vw,44px)}
  .band-head .h,.gal-head .h{font-size:clamp(34px,5vw,56px)}
  .disc-name a{font-size:clamp(56px,10vw,110px)}
}
@media (max-width:560px){
  .hero.intl h1{font-size:26px}
  .sx-h{font-size:25px}
  .band-head .h,.gal-head .h{font-size:28px}
  .cs-hero h1{font-size:clamp(38px,10vw,52px)}
}
.chip,.hero-links .chip,.disc-top .chip{font-size:13px;line-height:1}

/* v9 — hero data-globe (dependency-free canvas, behind content) */
.hero.intl{position:relative;overflow:hidden}
.hero-glow{position:absolute;z-index:0;top:50%;right:-8%;width:min(60vw,820px);height:min(60vw,820px);transform:translateY(-50%);pointer-events:none;background:radial-gradient(circle,rgba(18,59,50,.5),rgba(18,59,50,.14) 38%,transparent 66%);animation:heroGlow 8s ease-in-out infinite}
.hero-globe{position:absolute;z-index:1;top:50%;right:-20%;width:min(64vw,920px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.92;-webkit-mask-image:linear-gradient(to left,#000 40%,rgba(0,0,0,.4) 66%,transparent 82%);mask-image:linear-gradient(to left,#000 40%,rgba(0,0,0,.4) 66%,transparent 82%)}
@keyframes heroGlow{0%,100%{opacity:.5;transform:translateY(-50%) scale(1)}50%{opacity:.82;transform:translateY(-50%) scale(1.07)}}
@media (max-width:900px){.hero-globe{right:-44%;width:94vw;opacity:.26}.hero-glow{right:-24%;width:72vw;height:72vw;opacity:.42}}
@media (prefers-reduced-motion:reduce){.hero-glow{animation:none}}

/* ============================================================
   v10 — editorial hero (index home only). Light collage hero;
   nav flips dark-on-light, scoped to body.home so other pages
   keep their nav. Georgia stays scoped to .paper (masthead).
   ============================================================ */
.ahero{position:relative;background:#F3F3F1;color:#111;overflow:hidden;padding:150px 0 48px;
  background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:72px 72px}
.ahero-in{position:relative;z-index:2;max-width:none;margin:0;padding:0 var(--gut)}
.ahero-eyebrow{font-weight:600;font-size:clamp(13px,1.2vw,16px);letter-spacing:.02em;
  text-transform:uppercase;color:#555;margin:0 0 16px}
.ahero-head{font-weight:700;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(44px,8.4vw,124px);text-transform:uppercase;margin:0 0 44px}
.ahero-head .faint{color:#C9C9C4}
.ahero-head .ink{color:#111}
.ahero-chip{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:clamp(72px,7vw,104px);height:clamp(40px,4vw,58px);border-radius:999px;margin:0 .08em;
  background:#0E0E0F;color:#E6FA36;font-size:clamp(9px,.85vw,12px);font-weight:600;line-height:1.05;
  text-transform:none;letter-spacing:0;text-align:center;transform:translateY(-.08em)}
.ahero-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:28px;align-items:start}
.ahero-left{padding-top:8px}
.ahero-note{font-size:15px;line-height:1.5;color:#444;max-width:26ch;margin-bottom:18px}
.ahero-logos{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px}
.ahero-logos img{height:22px;width:auto;opacity:.78;filter:grayscale(1)}
.ahero-logos img.inv{height:26px;filter:invert(1);opacity:.72}
.ahero-center{display:flex;justify-content:center}
.paper{width:100%;max-width:560px;background:#FBFBF8;border:1px solid #111;box-shadow:10px 12px 0 rgba(17,17,17,.9);
  padding:22px 26px 26px;font-family:Georgia,'Times New Roman',serif;color:#111;transform:rotate(-.6deg)}
.paper-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-family:'Inter',sans-serif;color:#333}
.paper-name{font-family:Georgia,serif;font-size:15px;font-weight:700;letter-spacing:.02em}
.paper-rule{height:3px;background:#111;margin:8px 0 0}
.paper-rule+.paper-banner{margin-top:14px}
.paper-banner{background:#111;color:#FBFBF8;text-align:center;font-weight:700;letter-spacing:.06em;
  padding:12px 10px;font-size:clamp(20px,2.4vw,30px);font-family:Georgia,serif}
.paper-list{list-style:none;margin:20px 6px 10px;font-size:clamp(18px,2vw,24px);font-weight:700}
.paper-list li{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.paper-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:#111;flex:0 0 auto;transform:translateY(-3px)}
.paper-tag{text-align:center;font-style:italic;font-size:clamp(15px,1.5vw,18px);color:#222;margin:14px 6px 18px}
.paper-cta{display:block;text-align:center;border:2px solid #111;font-family:'Inter',sans-serif;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;font-size:clamp(14px,1.4vw,17px);padding:14px;color:#111;transition:background .2s,color .2s}
.paper-cta:hover{background:#E6FA36;border-color:#E6FA36}
.ahero-right{padding-top:8px;text-align:right}
.ahero-right p{font-size:15px;line-height:1.55;color:#444;margin-bottom:20px}
.ahero-cta{display:inline-flex;align-items:center;gap:8px;background:#0E0E0F;color:#fff;border-radius:999px;
  padding:13px 24px;font-weight:600;font-size:15px;transition:background .2s}
.ahero-cta:hover{background:#E6FA36;color:#0E0E0F}
.ahero .hero-links{margin-top:48px;padding-top:26px;border-top:1px solid rgba(0,0,0,.14);display:flex;flex-wrap:wrap;gap:16px 36px}
.ahero .hero-links a{color:#111;font-weight:600;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:12px}
.ahero .hero-links a:hover{color:#149B4B}
.ahero .hero-links .chip{width:1.25em;height:1.25em;border-radius:50%;background:#E6FA36;color:#0E0E0F;display:inline-flex;align-items:center;justify-content:center;font-size:.55em;font-weight:700}
/* light nav over the light hero — home page only */
body.home .nv{background:rgba(243,243,241,.82)}
body.home .nv-logo{color:#111}
body.home .nv-logo svg rect{fill:#111}
body.home .nv-logo svg path{stroke:#fff}
body.home .nv-links li>a{color:#111!important;opacity:.72}
body.home .nv-links li>a:hover,body.home .has-menu:hover>a{opacity:1;color:#111!important}
body.home .nv-cta{background:#0E0E0F;color:#fff}
body.home .nv-cta:hover{background:#E6FA36;color:#0E0E0F}
body.home .nv-burger span{background:#111}
@media (max-width:980px){
  .ahero-grid{grid-template-columns:1fr;gap:34px}
  .ahero-right{text-align:left}
  .ahero-left{order:3}
}
@media (max-width:560px){
  .ahero{padding-top:120px;background-size:48px 48px}
  .ahero-head{font-size:34px}
  .ahero-chip{display:none}
  .paper{box-shadow:6px 8px 0 rgba(17,17,17,.9)}
}

/* ============================================================
   v11 — the hero's light editorial language, site-wide.
   Converts the remaining dark sections (discipline stacking
   blocks, case-study hero + next, services hero, steps) to the
   light #F3F3F1 grid ground with ink text and the single lime
   accent. Nav goes dark-on-light on every page. Lime stays a
   fill/accent; lime-as-text hovers become green for contrast.
   ============================================================ */
:root{--paper:#F3F3F1;--paper-2:#FBFBF8;--grid:rgba(0,0,0,.05);--leaf:#149B4B}

/* --- nav: dark-on-light everywhere (whole site is light now) --- */
.nv{background:rgba(243,243,241,.82)}
.nv-logo{color:#111}
.nv-logo svg rect{fill:#111}
.nv-logo svg path{stroke:#F3F3F1}
.nv-links li>a{background:none;color:#111;opacity:.72}
.nv-links li>a:hover,.has-menu:hover>a{opacity:1;color:#111;background:none}
.nv-cta{background:#0E0E0F;color:#fff}
.nv-cta:hover{background:var(--volt);color:#0B0B0C}
.nv-burger span{background:#111}
.nv-panel,.nv.open .nv-menu{background:rgba(243,243,241,.98);border-bottom:1px solid rgba(0,0,0,.12)}
.nv-menu a{color:#111;border-bottom:1px solid rgba(0,0,0,.1)}

/* --- shared grid-ground helper (the hero signature) --- */
.disc-block,.cs-hero,.store-header,.steps{
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:72px 72px}

/* --- discipline stacking blocks: dark -> light editorial --- */
.disc-block{background-color:var(--paper-2);color:#111;
  border:1px solid #111;border-bottom:0;border-radius:16px 16px 0 0;
  box-shadow:0 -16px 46px rgba(0,0,0,.10)}
.disc-top{border-bottom:1px solid rgba(0,0,0,.14)}
.disc-top a,.disc-name a,.disc-price,.disc-list a{color:#111}
.disc-copy p{color:#444}
.disc-list i{color:#6e6e73}
.disc-list li,.disc-list li:first-child{border-color:rgba(0,0,0,.12)}
.disc-top a:hover,.disc-name a:hover,.disc-list a:hover{color:var(--leaf)}
.pill-learn{background:#0E0E0F;color:#fff}
.pill-learn:hover{background:var(--volt);color:#0B0B0C}

/* --- case-study hero + next block: dark -> light editorial --- */
.cs-hero{background-color:var(--paper);color:#111;border-bottom:1px solid rgba(0,0,0,.1)}
.cs-hero h1{color:#111}
.cs-eye{color:#6e6e73}
.cs-chips li{background:transparent;border:1px solid rgba(0,0,0,.22);color:#111}
.cs-next{background:var(--paper);color:#111;border-top:1px solid rgba(0,0,0,.1)}
.cs-next-link,.cs-next-name{color:#111}
.cs-next-link .cs-eye,.cs-next-sum{color:#6e6e73}
.cs-next-link:hover .cs-next-name{color:var(--leaf)}

/* --- services hero: dark -> light editorial --- */
.store-header{background-color:var(--paper)}
.store-header::before,.store-header::after{display:none}
.store-title{color:#111}
.store-top .pill-o{border-color:rgba(0,0,0,.28);color:#111}
.store-top .pill-o:hover{border-color:#111;background:#111;color:#fff}
.store-icon{color:#111}
.store-icon:hover{color:var(--leaf)}
.store-icon .ic{background:#fff;border:1px solid rgba(0,0,0,.12)}

/* --- "how we work" steps (index): dark -> light --- */
.steps{background-color:var(--paper);color:#111}
.steps .band-head .s{color:#6e6e73}
.steps .step-list h3{color:#111}
.steps .step-list p{color:#444}

/* ============================================================
   v12 — editorial serif display + highlighted hero CTA.
   Playfair Display (the newspaper masthead serif) carries every
   big headline across the site; Inter stays for body, nav,
   labels, lists and buttons so the page stays clean and legible.
   ============================================================ */
:root{--display:'Playfair Display',Georgia,'Times New Roman',serif}

/* hero CTA stays highlighted (lime), not just on hover */
.paper-cta{background:var(--volt);border-color:#111;color:#0B0B0C}
.paper-cta:hover{background:#0B0B0C;border-color:#0B0B0C;color:#fff}

/* editorial serif on all display headings */
.ahero-head,
.band-head .h,.gal-head .h,
.disc-name a,
.cs-hero h1,.cs-next-name,
.close h2,.close h2 span,
.store-title,.store-header .store-top h2.store-title,
.sx-h,
.case-name,
.faq-head h2{
  font-family:var(--display);
  letter-spacing:-.01em}

/* the newspaper card: Playfair everywhere except the Inter top line */
.paper,.paper-name,.paper-banner,.paper-tag,.paper-list{font-family:var(--display)}
.paper-top{font-family:'Inter',sans-serif}

/* hero headline: serif wants a touch more line + lighter tracking */
.ahero-head{font-weight:800;line-height:1.0;letter-spacing:-.015em}

/* big left section heads read better slightly tighter in serif */
.band-head .h,.gal-head .h,.sx-h{font-weight:700}

/* ============================================================
   v13 — full editorial rebuild: replace the remaining Apple-style
   soft cards with bordered editorial surfaces, serif card titles,
   and a clean "Selected work" grid (carousel retired).
   ============================================================ */

/* --- editorial card surfaces (was: soft white, rounded, drop shadow) --- */
.cs-cols div,.stat-row li,.wcard,.lcard{
  background:var(--paper-2);border:1px solid #111;border-radius:6px;box-shadow:none}
.dcard{border:0;border-radius:6px}
.dcard a{background:var(--paper-2);border:1px solid #111;border-radius:6px}
.lcard:hover,.dcard a:hover{box-shadow:6px 6px 0 #111;transform:translate(-2px,-2px)}
/* image frames: ink border, hard edges, drop the heavy soft shadow */
.cs-shot,.d-cover{border:1px solid #111;box-shadow:none}
.cs-shot{border-radius:8px 8px 0 0}
.d-cover{border-radius:8px 8px 0 0}

/* --- serif on card + stat headings (Inter stays for body) --- */
.cs-cols h3,.wcard h3,.lcard h3,.dcard-copy b,.stat-row strong,.step-list h3{
  font-family:var(--display)}
.cs-cols h3,.stat-row strong{font-weight:700;letter-spacing:-.01em}

/* ============================================================
   Selected work — editorial grid (featured + 2×2)
   ============================================================ */
.work{background:#fff;padding:88px 0 96px}
.work-head{max-width:1256px;margin:0 auto 40px;padding:0 var(--gut)}
.work-head .h{font-family:var(--display);font-size:clamp(40px,5.4vw,78px);font-weight:700;letter-spacing:-.02em;line-height:1.03;margin-top:12px}
.work-grid{list-style:none;max-width:1256px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.work-card{border:1px solid #111;border-radius:6px;overflow:hidden;background:var(--paper-2);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.work-card a{display:block;height:100%;color:#111}
.work-card:hover{box-shadow:8px 8px 0 #111;transform:translate(-3px,-3px)}
.work-media{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid #111;background:#ededeb}
.work-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.work-card:hover .work-media img{transform:scale(1.03)}
.work-cap{padding:22px 24px 24px}
.work-sector{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6e6e73;margin-bottom:10px}
.work-cap h3{font-family:var(--display);font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.01em;line-height:1.04}
.work-sum{font-size:15px;line-height:1.5;color:#444;margin-top:8px;max-width:44ch}
.work-cap em{display:inline-block;font-style:normal;font-weight:600;font-size:14px;margin-top:16px;color:#111}
.work-card:hover .work-cap em{color:var(--leaf)}
/* featured card: full width, image + caption side by side */
.work-card.feat{grid-column:1/-1}
.work-card.feat a{display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch}
.work-card.feat .work-media{aspect-ratio:auto;border-bottom:0;border-right:1px solid #111;min-height:340px}
.work-card.feat .work-cap{align-self:center;padding:40px clamp(28px,3vw,52px)}
.work-card.feat .work-cap h3{font-size:clamp(40px,4.2vw,64px)}
.work-card.feat .work-sum{font-size:17px}
.work-foot{max-width:1256px;margin:28px auto 0;padding:0 var(--gut)}
.work-all{font-weight:600;font-size:16px;color:#111}
.work-all:hover{color:var(--leaf)}
@media (max-width:760px){
  .work{padding:64px 0 72px}
  .work-grid{grid-template-columns:1fr}
  .work-card.feat a{grid-template-columns:1fr}
  .work-card.feat .work-media{aspect-ratio:16/10;border-right:0;border-bottom:1px solid #111;min-height:0}
  .work-card.feat .work-cap{padding:22px 24px 24px}
}

/* ============================================================
   dalora — centred hero + neon aura
   ============================================================ */
.ahero-in{text-align:center}
.ahero-eyebrow,.ahero-head{text-align:center}
.ahero-note{margin-left:auto;margin-right:auto;text-align:center}
.ahero-left,.ahero-right{text-align:center}
.ahero .hero-links{justify-content:center}
/* DALÍ AURA: neon-lime on a black newspaper strip (static, no animation) */
.ahero-head .faint{
  display:inline-block;
  background:#0E0E0F;
  color:var(--volt);-webkit-text-fill-color:var(--volt);
  padding:.04em .24em;margin-bottom:.08em;
  line-height:1;border-radius:3px}