/* Home page (flagship direction). Dark reel, light body. Europe is the hero image. Loads after base.css. */
:root{--accent:#1B4DD8;--accent-soft:#6B8DF7;--accent-glow:rgba(27,77,216,.12);--night:#07070B}
h1{font-size:clamp(2.8rem,6.4vw,6rem);max-width:14ch;letter-spacing:-.045em}
h2{font-size:clamp(2.2rem,4.8vw,4rem);letter-spacing:-.04em;text-wrap:balance}
.band-head{margin-bottom:2.8rem;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem 4rem;align-items:end}
.band-head .eyebrow{grid-column:1/-1}
.band-head h2{margin-top:.4rem;max-width:20ch}
.band-note{color:var(--muted);max-width:44ch;padding-bottom:.4rem}
@media (max-width:900px){.band-head{grid-template-columns:1fr;gap:.8rem}}

/* ---------- reveals ---------- */
.js-anim .rv{opacity:0}
.js-anim .rv-up{transform:translateY(28px)}
.js-anim .rv.in{opacity:1;transform:none}

/* ---------- top bar over dark ---------- */
#topbar{gap:2rem}
.menu{display:flex;gap:2rem;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.menu a{color:var(--ink);opacity:.7;transition:opacity .2s var(--ease),color .3s var(--ease)}
.on-dark #topbar .mark,.on-dark #topbar .nav,.on-dark .menu a{color:var(--dark-ink)}
.on-dark #topbar .nav{border-bottom-color:rgba(244,242,236,.3)}
.on-dark #topbar{background:var(--night)}
.on-dark #topbar.stuck{background:rgba(7,7,11,.72);border-bottom-color:rgba(244,242,236,.12)}
#topbar .mark,#topbar .nav{transition:color .3s var(--ease),border-color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.menu a:hover{opacity:1;color:var(--accent)} .on-dark .menu a:hover{color:var(--accent-soft)}}
@media (max-width:900px){.menu{display:none}}

/* ---------- hero ---------- */
#hero{position:relative;background:var(--night);color:var(--dark-ink);min-height:calc(100svh - 64px);display:flex;align-items:center;padding:5rem 0 7rem;overflow:hidden}
#hero .eyebrow{color:var(--dark-muted)}
#hero .lede{color:var(--dark-muted);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;max-width:46ch;margin-top:1.8rem}
.hero-grid{position:relative;z-index:2}
.hero-copy{max-width:min(58ch,100%)}
.hero-copy h1{margin-top:1.4rem}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.ghost{display:inline-flex;align-items:center;gap:.6rem;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-ink);opacity:.75;transition:opacity .2s var(--ease)}
.ghost .arrow{transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ghost:hover{opacity:1}.ghost:hover .arrow{transform:translateY(3px)}}

.map-wrap{position:absolute;inset:0;z-index:1;pointer-events:none}
#euromap{position:absolute;right:0;top:-6%;width:min(66vw,1000px);height:112%}
#euromap .land{fill:rgba(244,242,236,.045);stroke:rgba(244,242,236,.16);stroke-width:.6;opacity:0;transition:opacity .9s var(--ease-out)}
#euromap.show .land{opacity:1}
#euromap .land.hot{fill:rgba(27,77,216,.16);stroke:rgba(107,141,247,.4)}
#euromap .city{fill:var(--accent-soft)}
#euromap .pulse{fill:none;stroke:var(--accent-soft);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:pulse 7.5s var(--ease-out) infinite}
#euromap .label{font-family:"IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;fill:rgba(244,242,236,.55)}
#euromap .link{fill:none;stroke:rgba(107,141,247,.35);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1}
#euromap.show .link{animation:draw 2.2s var(--ease-out) forwards}
@keyframes pulse{0%{transform:scale(.4);opacity:.6}45%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.map-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 0%,rgba(7,7,11,.85) 32%,rgba(7,7,11,.15) 60%,rgba(7,7,11,0) 100%),linear-gradient(0deg,var(--night) 0%,rgba(7,7,11,0) 30%)}

.ticker{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid rgba(244,242,236,.1);overflow:hidden;padding:1.1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;gap:0;width:max-content;animation:ticker var(--ticker-dur,48s) linear infinite}
.ticker span{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,236,.55);padding-right:3.2rem;position:relative}
.ticker span::after{content:"";position:absolute;right:1.5rem;top:50%;width:3px;height:3px;border-radius:50%;background:var(--accent-soft);opacity:.8}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- proof ---------- */
#proof{padding:clamp(4rem,8vh,6rem) 0 clamp(2.5rem,5vh,4rem);border-bottom:1px solid var(--hair)}
.proof-head{max-width:40ch;margin-bottom:2.6rem}
.proof-head h2{margin-top:1.1rem}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair)}
.proof{padding:2.2rem 1.6rem 2.4rem 0;border-left:1px solid var(--hair);padding-left:1.6rem}
.proof:first-child{border-left:0;padding-left:0}
.proof b{display:block;font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.proof > span{display:block;margin-top:.9rem;color:var(--muted);font-size:.95rem;max-width:22ch;text-wrap:pretty}
.proof-note{margin-top:2.4rem;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--muted);max-width:70ch;line-height:1.7}

/* ---------- work: pinned horizontal rail ---------- */
#work{background:var(--bone)}
.work-track{position:relative}
.js-anim .work-track{min-height:100svh}
.work-stage{position:relative;padding:clamp(4rem,8vh,6rem) 0;overflow:hidden}
.js-anim .work-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}
.work-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1rem 2rem;margin-bottom:2.8rem}
.work-head h2{margin-top:1.1rem;grid-column:1}
.work-head .eyebrow{grid-column:1}
.work-count{grid-column:2;grid-row:1/3;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;color:var(--ink);font-variant-numeric:tabular-nums}
.work-rail{display:flex;gap:1.4rem;padding-left:max(5vw,calc((100vw - 1180px)/2));padding-right:5vw;will-change:transform}
.js-anim .work-rail{width:max-content}
.case{flex:0 0 auto;width:min(760px,82vw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:#fff;border:1px solid var(--hair);border-radius:24px;overflow:hidden;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.case-art{position:relative;background:var(--night);min-height:340px;padding:1.6rem;display:flex;flex-direction:column;justify-content:flex-end}
.case-kpi{position:relative;z-index:1;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.7);display:flex;align-items:baseline;gap:.7rem}
.case-kpi b{font-family:Inter,sans-serif;font-weight:800;font-size:clamp(2rem,3vw,2.8rem);letter-spacing:-.04em;color:var(--dark-ink);text-transform:none}
.case-body{padding:2.2rem 2rem 2rem}
.case-body h3{font-size:clamp(1.25rem,1.6vw,1.5rem);letter-spacing:-.025em;line-height:1.2;margin:1rem 0 .9rem;text-wrap:pretty}
.case-body p{color:var(--muted);font-size:.98rem}
.case-meta{list-style:none;margin-top:1.6rem;border-top:1px solid var(--hair)}
.case-meta li{padding:.7rem 0;border-bottom:1px solid var(--hair);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* charts: each artefact is drawn from the case's own subject, animates when the case is in view */
.chart{position:absolute;inset:1.6rem 1.6rem 5.5rem 1.6rem;display:flex;flex-direction:column}
.chart svg{width:100%;flex:1;min-height:0;overflow:visible}
.chart-legend{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.5)}
.chart-legend .k{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 .45rem 0 .9rem;vertical-align:middle}
.chart-legend .k:first-child{margin-left:0}
.k1{background:var(--accent-soft)}.k2{background:var(--accent)}.k3{background:rgba(244,242,236,.45)}
/* 01 game launch: six distribution channels go live over nine months while paid media lifts installs */
.launch{justify-content:flex-end}
.launch .installs{position:absolute;left:0;right:0;top:0;bottom:2.4rem;width:100%;height:auto;flex:none;min-height:0}
.launch .area{fill:rgba(27,77,216,.16);opacity:var(--cp,0);transition:opacity .2s linear}
.launch .curve{fill:none;stroke:var(--accent-soft);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--cp,0));transition:stroke-dashoffset .2s linear}
.ch-rows{position:relative;display:flex;flex-direction:column;gap:7px}
.ch{display:grid;grid-template-columns:minmax(0,1.15fr) 2fr 2rem;align-items:center;gap:.7rem;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.ch{--k:clamp(0, (var(--cp,0) * 9 - (var(--m) - 1)) / (10 - var(--m)), 1)}
.ch span{color:rgba(244,242,236,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:clamp(.18, var(--k) * 4, 1);transition:opacity .2s linear}
.ch i{position:relative;height:9px;border-radius:2px;background:rgba(244,242,236,.07)}
.ch i::after{content:"";position:absolute;top:0;bottom:0;left:calc((var(--m) - 1) / 9 * 100%);right:0;border-radius:2px;background:var(--accent);transform:scaleX(var(--k));transform-origin:left;transition:transform .2s linear}
.ch:nth-child(-n+2) i::after{background:var(--accent-soft)}
.ch b{font-weight:500;color:rgba(244,242,236,.5);text-align:right;opacity:clamp(0, var(--k) * 3, 1);transition:opacity .2s linear}

/* 02 CPA line + channel mix */
.mix{display:flex;gap:3px;height:22px;margin-bottom:1rem}
.mix i{flex:0 0 calc(var(--w) * 100%);background:rgba(244,242,236,.14);border-radius:3px;position:relative;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.mix i:first-child{background:var(--accent)}.mix i:nth-child(2){background:var(--accent-soft)}
.mix i span{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-ink);white-space:nowrap;overflow:hidden;max-width:calc(100% - 8px)}
.case.on .mix i{transform:scaleX(1)}
.mix i:nth-child(2){transition-delay:.1s}.mix i:nth-child(3){transition-delay:.2s}.mix i:nth-child(4){transition-delay:.3s}
.line svg{height:auto}
.line .grid{stroke:rgba(244,242,236,.12);stroke-dasharray:2 4}
.line-path{fill:none;stroke:var(--accent-soft);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--cp,0));transition:stroke-dashoffset .2s linear}
.line-dot{fill:var(--accent-soft);opacity:clamp(0, (var(--cp,0) - .9) * 10, 1);transition:opacity .2s linear}
/* 03 publisher placement tiles */
.tile-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;flex:1;align-content:end}
.tile-grid i{display:block;aspect-ratio:1.4;border-radius:3px;background:rgba(244,242,236,.08);transform:scale(.5);opacity:0;transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
.tile-grid i.t1{background:var(--accent-soft)}.tile-grid i.t2{background:var(--accent)}.tile-grid i.t3{background:rgba(244,242,236,.45)}
.case.on .tile-grid i{transform:none;opacity:1}
/* 04 quarter timeline */
.gantt{justify-content:flex-end;gap:.55rem}
/* a playhead sweeps the quarter with the scroll; bars fill behind it, weeks light as it passes */
.g-head{position:absolute;top:0;bottom:1.9rem;left:clamp(0%, var(--cp,0) * 100%, 100%);width:1px;background:linear-gradient(rgba(107,141,247,0),var(--accent-soft) 30%,var(--accent-soft) 70%,rgba(107,141,247,0));pointer-events:none;transition:left .2s linear}
.g-head::before{content:"";position:absolute;left:-3px;bottom:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent-soft);box-shadow:0 0 0 4px rgba(107,141,247,.18)}
.g-week{position:absolute;top:-2px;left:8px;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);white-space:nowrap}
.g-axis span{transition:color .3s}
.g-axis span:nth-child(2){color:rgba(244,242,236,calc(.28 + clamp(0, (var(--cp,0) - .23) * 12, 1) * .5))}
.g-axis span:nth-child(3){color:rgba(244,242,236,calc(.28 + clamp(0, (var(--cp,0) - .54) * 12, 1) * .5))}
.g-axis span:nth-child(4){color:rgba(244,242,236,calc(.28 + clamp(0, (var(--cp,0) - .92) * 12, 1) * .5))}
.g-row:nth-child(2) i,.g-row:nth-child(4) i{box-shadow:0 0 22px -4px rgba(27,77,216,calc(var(--k) * .9))}
.g-row:nth-child(4)::after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--accent-soft);opacity:clamp(0, (var(--cp,0) - .96) * 25, 1);animation:ring 2.2s var(--ease-out) infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(107,141,247,.5)}100%{box-shadow:0 0 0 14px rgba(107,141,247,0)}}
.g-row{position:relative;height:26px;display:flex;align-items:center}
.g-row{--k:clamp(0, (var(--cp,0) - var(--s)) / (var(--e) - var(--s)), 1)}
.g-row i{position:absolute;left:calc(var(--s) * 100%);width:calc((var(--e) - var(--s)) * 100%);height:100%;border-radius:4px;background:rgba(244,242,236,.14);transform:scaleX(var(--k));transform-origin:left;transition:transform .2s linear}
.g-row:nth-child(2) i{background:var(--accent)}.g-row:last-of-type i{background:var(--accent-soft)}
.g-row span{position:relative;z-index:1;margin-left:calc(var(--s) * 100% + 8px);font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark-ink);white-space:nowrap;opacity:clamp(0, var(--k) * 3, 1);transition:opacity .2s linear}
.g-axis{display:flex;justify-content:space-between;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(244,242,236,.12);font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,236,.5)}

/* phones: the rail becomes a native swipe strip with snap; charts are fully drawn */
.work-track.swipe{height:auto !important}
.work-track.swipe .work-stage{position:static;height:auto;display:block;padding-top:3rem}
.work-track.swipe .work-rail{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:5vw;transform:none !important}
.work-track.swipe .work-rail::-webkit-scrollbar{display:none}
.work-track.swipe .case{scroll-snap-align:center;--cp:1}
.work-track.swipe .work-count{display:none}

/* ---------- point of view: words light up as you scroll ---------- */
#pov{background:var(--night);color:var(--dark-ink)}
#pov .eyebrow{color:var(--dark-muted);margin-bottom:2rem}
.pov-track{position:relative}
.js-anim .pov-track{height:170svh}
.pov-stage{position:relative;overflow:hidden;padding:clamp(5rem,10vh,8rem) 0;background:var(--night) url("moment-poster.jpg") center/cover no-repeat}
.pov-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9}
.pov-stage .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,7,11,.97) 0%,rgba(7,7,11,.9) 45%,rgba(7,7,11,.62) 100%)}
.pov-stage .shell{position:relative;z-index:2}
.js-anim .pov-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.pov-text{font-size:clamp(1.9rem,4.4vw,3.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;max-width:24ch;text-wrap:pretty}
.pov-text .w{color:rgba(244,242,236,.22);transition:color .35s var(--ease)}
.pov-text .w.lit{color:var(--dark-ink)}
.pov-text .w.key.lit{color:var(--accent-soft)}

/* ---------- services ---------- */
#services{padding:clamp(4rem,8vh,6rem) 0}
.svc{border-top:1px solid var(--hair)}
.svc-row{position:relative;display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,1.1fr);gap:1.5rem 3rem;align-items:start;padding:2.2rem 0}
.svc-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .2s}
.svc-row.in::after{transform:scaleX(1)}
.svc-num{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:var(--accent);padding-top:.6rem}
.svc-row h3{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.04em;line-height:1;transition:transform .5s var(--ease-out)}
.svc-body p{color:var(--muted);font-size:1.02rem;max-width:40ch}
.svc-body ul{list-style:none;margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.svc-body li{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--hair);border-radius:100px;padding:.45rem .8rem;background:#fff}
@media (hover:hover) and (pointer:fine){.svc-row:hover h3{transform:translateX(10px)}}

/* ---------- process: sticky heading, steps scroll past ---------- */
#process{background:var(--bone-deep);border-block:1px solid var(--hair);padding:clamp(4rem,8vh,6rem) 0}
.process-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:stretch}
.process-side{align-self:stretch}
.process-sticky{position:sticky;top:7rem}
.process-sticky h2{margin:1.1rem 0 2.2rem}
.prail-v{position:relative;width:2px;height:clamp(8rem,22svh,14rem);background:var(--hair)}
.prail-v i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.pcount{display:block;margin-top:1.2rem;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;color:var(--ink);font-variant-numeric:tabular-nums}
.pstep-list{display:flex;flex-direction:column;gap:clamp(3rem,8vh,6rem);padding-block:1rem 40svh}
.pstep{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem 1.6rem;align-items:baseline}
.pstep-num{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:var(--muted);transition:color .4s}
.pstep.cur .pstep-num{color:var(--accent)}
.pstep h3{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:1;transition:color .4s}
.pstep p{grid-column:2;color:var(--muted);font-size:1.05rem;max-width:42ch}
.artefact{grid-column:2;margin-top:.6rem;display:inline-flex;flex-direction:column;gap:.35rem;padding:1rem 1.2rem;background:#fff;border:1px solid var(--hair);border-radius:14px;width:max-content;max-width:100%}
.artefact b{font-weight:500;font-size:1rem;letter-spacing:-.01em}

/* ---------- who hires us ---------- */
#team{padding:clamp(4rem,8vh,6rem) 0}
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.client{position:relative;display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid var(--hair);border-radius:20px;padding:1.6rem 1.5rem 1.5rem;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.client-num{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:var(--accent)}
.client h3{font-size:1.3rem;letter-spacing:-.025em;margin-top:.4rem}
.client p{color:var(--muted);font-size:.95rem;text-wrap:pretty;flex:1}
.client-tag{align-self:flex-start;margin-top:.6rem;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--hair);border-radius:100px;padding:.4rem .8rem}
@media (hover:hover) and (pointer:fine){.client:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 30px 50px -34px rgba(22,22,26,.35)}}

/* ---------- contact ---------- */
#contact{position:relative;overflow:hidden;background:var(--night);color:var(--dark-ink);padding:clamp(5rem,10vh,8rem) 0}
#contact #ring{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#contact .contact-grid{position:relative;z-index:1}
#contact .eyebrow{color:var(--dark-muted)}
#contact h2{margin:1.2rem 0 1.1rem;max-width:12ch;font-size:clamp(2.8rem,6.4vw,6rem);letter-spacing:-.05em}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:end}
.contact-note{color:var(--dark-muted);max-width:36ch;margin-bottom:2.4rem}
.contact-list{list-style:none;margin:1.2rem 0 0;border-top:1px solid rgba(244,242,236,.16);counter-reset:cl}
.contact-list li{padding:.95rem 0;border-bottom:1px solid rgba(244,242,236,.16);font-size:1.1rem;counter-increment:cl}
.contact-list li::before{content:"0" counter(cl);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;color:var(--accent-soft);margin-right:1.1rem}
#contact .btn{background:var(--dark-ink);color:var(--ink)}
#contact .btn::before{background:var(--accent)}
#contact .btn:hover{color:#fff}
footer{background:var(--night);border-top-color:rgba(244,242,236,.12);color:var(--dark-muted)}
footer a{color:var(--dark-muted)}

/* ---------- responsive ---------- */
@media (max-width:1100px){#euromap{right:0;width:100vw;opacity:.65}}
@media (max-width:600px){
  .proof-grid{grid-template-columns:1fr}
  .proof{border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  .proof:first-child{border-top:0}
  .case{width:min(420px,88vw)}
  .case-art{min-height:220px}
  .ticker span{font-size:11px;padding-right:2.4rem}
  .svc-body ul{gap:.4rem}
  .svc-body li{font-size:10px;padding:.4rem .7rem}
  .client{padding:1.6rem 1.4rem 1.5rem}
}
/* touch: no hover-fill, no cursor spotlight, no bar hide-on-scroll jitter */
@media (hover:none){
  .btn::before{display:none}
  .js-anim #topbar.hide{transform:none}
}
@media (max-width:900px){
  #hero{min-height:auto;padding:3.5rem 0 6.5rem}
  #hero .lede{font-size:1.02rem}
  h1{font-size:clamp(2.4rem,11vw,3.6rem)}
  .cta-row{flex-wrap:wrap;gap:1rem 1.6rem}
  #euromap{top:auto;bottom:-8%;height:70%;opacity:.45}
  .map-wrap::after{background:linear-gradient(0deg,var(--night) 0%,rgba(7,7,11,.2) 40%,rgba(7,7,11,.75) 100%)}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof{padding:1.6rem 1rem 1.7rem 1rem}
  .proof b{font-size:2.6rem}
  .proof span{font-size:.88rem}
  .work-stage{padding:3rem 0}
  .js-anim .work-stage{justify-content:flex-start;padding-top:calc(64px + 2rem)}
  .work-head{margin-bottom:1.6rem}
  .work-rail{gap:1rem;padding-left:5vw}
  .case-body{padding:1.5rem 1.3rem 1.4rem}
  .case-body h3{font-size:1.15rem}
  .case-body p{font-size:.92rem}
  .case-meta{margin-top:1.1rem}
  .chart{inset:1.2rem 1.2rem 4.8rem 1.2rem}
  .ch{grid-template-columns:minmax(0,1.3fr) 1.6fr 1.8rem;font-size:8px}
  .g-row span{font-size:8px}
  .pov-text{font-size:clamp(1.7rem,8vw,2.6rem)}
  .svc-row{padding:2rem 0}
  .svc-row h3{font-size:1.7rem}
  .pstep h3{font-size:2rem}
  .pstep-list{gap:3.5rem}
  .artefact{width:100%}
  #contact h2{font-size:clamp(2.4rem,11vw,3.6rem)}
  .contact-list li{font-size:1rem}
  .proof:nth-child(3){border-left:0;padding-left:0}
  .proof:nth-child(n+3){border-top:1px solid var(--hair)}
  .case{grid-template-columns:1fr;width:min(520px,84vw)}
  .case-art{min-height:240px}
  .svc-row{grid-template-columns:3.2rem 1fr}
  .svc-body{grid-column:2}
  .process-grid{grid-template-columns:1fr}
  .process-sticky{position:static}
  .prail-v{display:none}
  .clients{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;align-items:start}
  .js-anim .pov-track{height:160svh}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js-anim .rv,.js-anim .rv.in{opacity:1;transform:none;transition:none}
  #euromap .land,#euromap.show .land{opacity:1;transition:none}
  #euromap .pulse{animation:none;opacity:0}
  #euromap .link,#euromap.show .link{animation:none;stroke-dashoffset:0}
  .ticker-track{animation:none}
  .js-anim .work-track{height:auto}
  .js-anim .work-stage{position:static;height:auto}
  .js-anim .work-rail{width:auto;flex-wrap:wrap;transform:none !important}
  .case{--cp:1}
  .mix i,.tile-grid i{transform:none;opacity:1;transition:none}
  .g-row:nth-child(4)::after{animation:none}
  .js-anim .pov-track{height:auto}
  .js-anim .pov-stage{position:static;height:auto}
  .pov-text .w{color:var(--dark-ink)}
  .pov-stage video,#contact #ring{display:none}
  .svc-row::after{transform:scaleX(1);transition:none}
  .prail-v i{transform:scaleY(1)}
}

/* ======== shared polish layer (was iter-polish.css) ======== */
/* Shared polish layer, loaded after each iteration's own sheet.
   Subtle, editorial: soft-focus reveals, a reading-progress hairline, a bar
   that steps out of the way, a cursor spotlight on cards, lit sector rows. */

/* ---------- reveals: focus in, not just fade in ---------- */
.rv{transition:opacity .6s var(--ease-out),transform .9s var(--ease-out),clip-path .9s var(--ease-out),filter .7s var(--ease-out)}
.js-anim .rv{filter:blur(8px)}
.js-anim .rv.in{filter:blur(0)}
.js-anim .rv-panel{filter:none}          /* big panels with video: never blur */

/* headline words tip up out of the mask */
.js-anim .word > span{transform:translateY(105%) rotate(2.5deg);transform-origin:left bottom;transition:transform 1s var(--ease-out)}
.ready .word > span{transform:none}

/* ---------- top bar: reading progress, steps out on the way down ---------- */
#topbar{transition:background .4s var(--ease),border-color .4s var(--ease),transform .55s var(--ease-out)}
#topbar::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(var(--prog,0));transform-origin:left;opacity:0;transition:opacity .4s var(--ease)}
#topbar.stuck::after{opacity:1}
.js-anim #topbar.hide{transform:translateY(-100%)}
#topbar .mark{position:relative}
#topbar .mark::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}

/* ---------- button: ink fill on hover, arrow leads ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),box-shadow .2s var(--ease),color .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);border-radius:inherit;transition:transform .45s var(--ease-out)}
.btn .arrow{display:inline-block}

/* ---------- cursor spotlight on cards ---------- */
.card,.opt,.contact-card,.stat{position:relative}
.card::after,.opt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--accent-glow),transparent 62%)}

/* ---------- sector rows: the one nearest the centre is lit ---------- */
.js-anim .row.rv.in{opacity:.5}
.js-anim .row.rv.in.lit{opacity:1}
.js-anim .row .idx,.js-anim .row .name{transition:color .5s var(--ease),transform .6s var(--ease-out)}
.js-anim .row.lit .idx{color:var(--accent)}
.js-anim .row.lit .name{transform:translateX(12px)}
.js-anim .row::before{content:"";position:absolute;left:-14px;top:22%;width:2px;height:56%;background:var(--accent);transform:scaleY(0);transform-origin:center;transition:transform .5s var(--ease-out)}
.js-anim .row.lit::before{transform:scaleY(1)}

/* ---------- footer links draw an underline ---------- */
footer a,.doc a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .35s var(--ease-out),color .2s var(--ease)}

/* ---------- eyebrows get a tiny accent tick once revealed ---------- */
.rv .eyebrow{display:inline-flex;align-items:center;gap:.7rem}
.rv .eyebrow::before{content:"";width:0;height:1px;background:var(--accent);transition:width .7s var(--ease-out) .2s}
.rv.in .eyebrow::before{width:1.4rem}

@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(22,22,26,.35)}
  .btn:hover::before{transform:translateY(0)}
  .btn:hover .arrow{transform:translateX(5px)}
  .card:hover::after,.opt:hover::after{opacity:1}
  #topbar .mark:hover::after{transform:scaleX(1)}
  footer a:hover,.doc a:hover{background-size:100% 1px}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .rv,.js-anim .rv.in{filter:none;transition:none}
  .js-anim .word > span{transform:none;transition:none}
  .js-anim #topbar.hide{transform:none}
  #topbar::after{display:none}
  .btn::before{display:none}
  .js-anim .row.rv.in{opacity:1}
  .js-anim .row.lit .name{transform:none}
  .js-anim .row::before,.js-anim .row.lit::before{transform:scaleY(1);transition:none}
  .rv .eyebrow::before,.rv.in .eyebrow::before{width:1.4rem;transition:none}
}

/* ======== chart data that was inline style="" in the markup; the CSP forbids inline style ======== */
.ch-rows .ch:nth-child(1){--m:1}.ch-rows .ch:nth-child(2){--m:2}.ch-rows .ch:nth-child(3){--m:4}
.ch-rows .ch:nth-child(4){--m:5}.ch-rows .ch:nth-child(5){--m:7}.ch-rows .ch:nth-child(6){--m:9}
.mix i:nth-child(1){--w:.42}.mix i:nth-child(2){--w:.28}.mix i:nth-child(3){--w:.17}.mix i:nth-child(4){--w:.13}
.gantt .g-row:nth-child(1){--s:0;--e:.22}.gantt .g-row:nth-child(2){--s:.14;--e:.56}
.gantt .g-row:nth-child(3){--s:.36;--e:.84}.gantt .g-row:nth-child(4){--s:.62;--e:1}

/* ======== no JavaScript: charts fully drawn, cases stack, nothing left faint ======== */
html:not(.js-anim) .case{--cp:1}
html:not(.js-anim) .mix i,html:not(.js-anim) .tile-grid i{transform:none;opacity:1}
html:not(.js-anim) .work-rail{flex-wrap:wrap;padding-right:max(5vw,calc((100vw - 1180px)/2))}
html:not(.js-anim) .case{width:min(760px,100%)}

/* ===== Deck match layer (Oct 2026): logo, blues, labels, number tiles, Inter everywhere but charts and map ===== */

/* 02 · deck blues */
:root{--blue:#0066CC;--blue-soft:rgba(0,102,204,.10);--blue-lift:#2997FF;--accent:#0066CC;--accent-soft:#2997FF;--accent-glow:rgba(0,102,204,.12)}
#euromap .land.hot{fill:rgba(0,102,204,.16);stroke:rgba(41,151,255,.4)}
#euromap .link{stroke:rgba(41,151,255,.35)}
.launch .area{fill:rgba(0,102,204,.16)}
.g-head{background:linear-gradient(rgba(41,151,255,0),var(--accent-soft) 30%,var(--accent-soft) 70%,rgba(41,151,255,0))}
.g-head::before{box-shadow:0 0 0 4px rgba(41,151,255,.18)}
.g-row:nth-child(2) i,.g-row:nth-child(4) i{box-shadow:0 0 22px -4px rgba(0,102,204,calc(var(--k) * .9))}

/* 01 · logo in bold Inter */
#topbar .mark{font-family:Inter,-apple-system,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}

/* 03 · section labels: Inter, blue, normal case, no line before */
.eyebrow{font-family:Inter,-apple-system,sans-serif;font-size:16px;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--blue);line-height:19.2px}
#hero .eyebrow,#pov .eyebrow,#contact .eyebrow{color:var(--blue-lift)}
.case-body .eyebrow{color:var(--blue)}
.rv .eyebrow::before,.rv.in .eyebrow::before{display:none}
.artefact .eyebrow{font-size:13px;line-height:19.2px;color:var(--muted)}

/* 04 · track record as white number tiles */
.proof-grid{gap:14px;border-top:0;padding-top:2px}
.proof,.proof:first-child,.proof:nth-child(3),.proof:nth-child(n+3){background:#fff;border:0;border-radius:20px;padding:2.7rem 1.6rem 2.9rem;min-width:0}
.proof b{font-size:clamp(2.3rem,4vw,3.7rem)}

/* F1 · Inter everywhere except chart and map labels */
#topbar .nav,.menu,.ghost,.ticker span,.proof-note,.work-count,.case-kpi,.case-meta li,.svc-num,.svc-body li,.pcount,.pstep-num,.client-num,.client-tag,.contact-list li::before,footer{font-family:Inter,-apple-system,sans-serif}
.menu,#topbar .nav,.ghost{font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.ticker span{font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.svc-num,.pstep-num,.client-num,.pcount,.work-count,.contact-list li::before{font-size:14px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:19.2px}
.case-kpi{font-size:14px;letter-spacing:0;text-transform:none}
.case-meta li{font-size:13px;letter-spacing:0;text-transform:none;line-height:17.6px}
.svc-body li,.client-tag{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;line-height:17.6px}
.proof-note{font-size:14px;letter-spacing:0}

/* F2 · headlines one step lighter (hero stays extra bold) */
h2,h3,.pov-text,.proof b,.case-kpi b{font-weight:700;letter-spacing:-.03em}
.hero-copy h1{font-weight:800}

/* F3 · footer like the deck */
footer{font-size:14px;line-height:19.2px;letter-spacing:0}
footer b{color:var(--dark-ink);font-weight:700}

/* fix: on phones the count inside the number picked up the small caption size */
.proof b span{font-size:inherit}
@media (max-width:900px){
  .proof-grid{gap:10px}
  .proof,.proof:first-child,.proof:nth-child(3),.proof:nth-child(n+3){padding:1.6rem 1.1rem 1.7rem}
  .proof b{font-size:min(2.1rem,7.6vw)}
}

/* Deck match, part 2: cool neutrals, silver hero headline, soft tags, borderless cards */

/* 05 · cool grey neutrals like the deck */
:root{--bone:#F5F5F7;--bone-deep:#EDEDF0;--ink:#1D1D1F;--muted:#6E6E73;--hair:#E2E2E7;--dark:#0B0B0D;--dark-ink:#F5F5F7;--dark-muted:#98989D;--dark-hair:#2C2C30;--night:#0B0B0D}

/* 06 · silver headline on the hero */
.hero-copy h1{background:linear-gradient(180deg,#F5F5F7 10%,#A5A5A9 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy h1 *{color:inherit}

/* 07 · softer tags: soft grey fill, no outline */
.svc-body li,.client-tag{border-color:transparent;background:#E8E8ED;color:var(--ink)}

/* 08 · cards without a border */
.client,.case,.artefact{border-color:transparent}

/* 05 · top bar uses the cool grey too */
#topbar.stuck{background:rgba(245,245,247,.88)}
.on-dark #topbar.stuck{background:rgba(11,11,13,.72)}