/* shared v10 system — copied from v10.html so the homepage is never touched */

:root{
  --ink:#010211;
  --white:#fff;
  --purple:#5237f9;
  --radius-s:.5rem;
  --ease:cubic-bezier(.77,0,.175,1);
  --pad:clamp(1.25rem,5vw,7.8rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;background:var(--ink);color:var(--white)}
body{font-family:'Switzer',system-ui,sans-serif;font-size:.984rem;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- hero shell ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:clip;isolation:isolate}
.hero__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
/* geometry lifted 1:1 off mprez.fr: layout is a 4-col grid the width of the hero,
   16:9 cards, 21px gutters, transform-origin 64%/35%, 30s linear -50% loop, no filter */
.wall{
  --gap:21px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  width:100%;
  transform:matrix3d(1.19401,.409237,.6057,0,-.634865,1.15557,.470742,0,-.258819,-.482963,.836516,-.00102041,0,0,0,1);
  transform-origin:64% 35%;
  transform-style:preserve-3d;
}
.wcol{display:grid;gap:var(--gap);animation:scrollUp 30s linear infinite;will-change:transform}
.wcol:nth-child(even){animation-name:scrollUpInv}
.wcard{position:relative;border-radius:8.75px;overflow:hidden;aspect-ratio:16/9;background:#0a0b1c}
.wcard img{width:100%;height:100%;object-fit:cover}
@keyframes scrollUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes scrollUpInv{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(rgb(1,2,16) 3%, rgba(1,2,16,0) 24%),
    radial-gradient(circle, rgba(1,2,17,.95) 20%, rgba(1,2,17,.30) 86%);
}

/* ---------- nav ---------- */
.nav{position:relative;z-index:3;display:flex;align-items:center;gap:2rem;
  padding:.9rem clamp(1.5rem,8.7vw,8rem);height:3.94rem;
  padding-top:calc(.9rem + env(safe-area-inset-top,0px));
  height:calc(3.94rem + env(safe-area-inset-top,0px))}
.nav__logo{height:2rem;width:auto}
.nav__links{display:flex;align-items:center;gap:0;margin-left:1.4rem}
.nav__links a{font-size:.875rem;padding:0 1.25rem;line-height:3.94rem;opacity:.92;transition:opacity .3s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--purple);color:var(--white);text-transform:uppercase;
  border-radius:50vw;padding:.9rem 1.5625rem;font-size:.875rem;letter-spacing:.01em;
  transition:background-color .3s var(--ease),color .3s var(--ease);cursor:pointer;border:0;font-family:inherit}
.btn:hover{background:var(--white);color:var(--purple)}
.btn--sm{padding:.75rem 1.25rem;font-size:.766rem}
/* item H1: the nav CTA is mprez's compact contact pill — 12.25px uppercase, ~33px tall,
   17.5px side padding. Its default .btn--sm height (44.8px) was taller than the 63px bar's
   vertical slack, which forced the mobile bar to ~74px. Scoped to the nav so the site's other
   small pills (the teardown form's "Send it") keep their own size. */
.nav .btn--sm{padding:.4rem 1.1rem}

/* ---------- nav dropdown + mobile menu (mprez geometry: 63px bar, full-bleed #010211 panel) ---------- */
.nav{position:relative}
/* item H2b: mprez's bar is a solid #010211 surface, so its open menu reads as one continuous
   panel from the top of the screen down. Ours is transparent over the hero, so with the menu
   open the hero video showed through the bar strip above the dark panel — the "gap at the top".
   Painting the bar --ink only while the menu is open welds the bar to the panel without touching
   the closed hero look. */
.nav:has(.nav__drop.on),.nav-menu-open .nav{background:var(--ink);z-index:1000}
/* the real trap: on sub-pages the nav sits inside a min-height:0 header.hero{isolation:isolate},
   and the .phero section that follows (also an isolated stacking context, later in the DOM)
   painted OVER that whole header — so the open dropdown was stuck behind the hero no matter how
   high the nav's own z-index went. Lift the nav's header above .phero while the menu is open. */
.hero:has(.nav__drop.on),body.nav-menu-open .hero{position:relative;z-index:1000}
.nav__links a,.nav__toggle{font-size:.875rem;padding:0 1.00625rem;line-height:3.9375rem;
  opacity:.92;transition:opacity .3s var(--ease);background:none;border:0;color:inherit;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.nav__links a:hover,.nav__toggle:hover{opacity:1}
.nav__toggle svg{width:.7rem;height:.7rem;stroke:currentColor;stroke-width:2;fill:none;
  transition:transform .3s var(--ease)}
.nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__drop{position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--ink);overflow:hidden;
  max-height:0;opacity:0;pointer-events:none;
  transition:max-height .45s var(--ease),opacity .3s var(--ease)}
.nav__drop.on{max-height:34rem;opacity:1;pointer-events:auto}
/* The hero families isolate their transformed walls into a stacking context. Portal the open
   panel to body and give fixed positioning an explicit navbar-bottom coordinate; top:100% on a
   fixed panel resolves against the viewport and collapses the panel at its lower edge. */
body>.nav__drop.on{position:fixed;left:0;right:0;top:var(--nav-drop-top,3.9375rem);z-index:2000}
.nav__drop-inner{max-width:83.375rem;margin:0 auto;padding:3rem var(--pad) 3.25rem;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2.5rem 4.375rem}
.nav__drop h4{font-size:.766rem;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.45);margin-bottom:1.25rem}
.nav__drop-hub{display:block;font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 64,'wght' 800;font-weight:800;text-transform:uppercase;
  font-size:2.1rem;line-height:1;letter-spacing:-.005em;margin-bottom:.9rem}
.nav__drop-hub:hover{color:#dbff9b}
.nav__drop p{color:rgba(255,255,255,.6);font-size:.875rem;line-height:1.7;max-width:22rem}
.nav__drop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:.15rem 2.5rem}
.nav__drop-list a{display:block;padding:.6rem 0;font-size:.94rem;color:rgba(255,255,255,.78);
  transition:color .3s var(--ease)}
.nav__drop-list a:hover{color:#fff}
.nav__drop-main{display:none}
.nav__burger{display:none;width:2.6rem;height:2.6rem;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;color:#fff;margin-left:.5rem}
.nav__burger span{display:block;width:1.35rem;height:2px;background:currentColor;position:relative;
  transition:transform .3s var(--ease),background-color .3s var(--ease)}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:100%;
  height:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.nav__burger span::before{top:-.4rem}
.nav__burger span::after{top:.4rem}
.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* item H2b (redo): the mobile burger menu clones mprez's minimal open state — a short stack of
   big nav links, a Services accordion, and one full-width contact pill on the #010211 panel.
   The desktop Services mega-dropdown (.nav__drop-inner) is untouched; this only shows on mobile,
   where the mega content is hidden. mprez numbers @390: links 22.2px / left / 29.6px vertical
   padding; pill 56px tall, 18.5px uppercase, #5237f9, fully round. */
.nav__m{display:none}
.nav__m-link,.nav__m-acc>summary{display:block;width:100%;font-size:1.389rem;line-height:1.15;
  color:#fff;padding:1.75rem 0;background:none;border:0;cursor:pointer;text-align:left;
  list-style:none;font-family:inherit;transition:opacity .3s var(--ease)}
.nav__m-link:hover,.nav__m-acc>summary:hover{opacity:.72}
.nav__m-acc>summary{display:flex;align-items:center;justify-content:space-between}
.nav__m-acc>summary::-webkit-details-marker{display:none}
.nav__m-acc>summary::after{content:"";width:.66rem;height:.66rem;margin-left:1rem;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-25%) rotate(45deg);transition:transform .3s var(--ease)}
.nav__m-acc[open]>summary::after{transform:translateY(15%) rotate(-135deg)}
.nav__m-sub{padding:.1rem 0 1rem}
.nav__m-sub a{display:block;font-size:1.05rem;color:rgba(255,255,255,.72);padding:.55rem 0;
  transition:color .3s var(--ease)}
.nav__m-sub a:hover{color:#fff}
.nav__m-cta.btn{display:flex;width:100%;margin-top:1.7rem;padding:1.15rem;font-size:1.157rem;
  line-height:1;border-radius:50vw}
@media (prefers-reduced-motion:reduce){
  .nav__m-link,.nav__m-acc>summary,.nav__m-acc>summary::after,.nav__m-sub a,.nav__m-cta.btn{transition:none}
}

@media (max-width:991px){
  .nav__burger{display:flex}
  .nav__drop-inner{display:none}
  .nav__m{display:block;padding:1.85rem var(--pad) 2.5rem}
  /* Fixed viewport geometry keeps the portalled mobile panel below the nav bar. */
  .nav__drop.on{position:fixed;left:0;right:0;
    top:calc(4.6rem + env(safe-area-inset-top,0px));bottom:0;z-index:200;
    background:var(--ink);opacity:1;pointer-events:auto;
    height:auto;overflow-y:auto;max-height:none}
}

/* ---------- hero content ---------- */
.hero__inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:2rem var(--pad) clamp(3rem,8vh,6rem)}
.hero h1{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2.15rem,8.1vw,7.3rem);
  line-height:.9;letter-spacing:-.005em;
  max-width:min(82rem,94vw);
  text-wrap:balance;
}
.hero__sub{margin-top:1.35rem;max-width:42rem;font-size:.984rem;line-height:1.7;color:rgba(255,255,255,.86)}
.hero__trust{margin-top:1.9rem;display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;
  font-size:.875rem;color:rgba(255,255,255,.62)}
.hero__trust b{font-weight:500;color:rgba(255,255,255,.92)}
.hero__cta{margin-top:1.7rem;display:flex;align-items:center;gap:.6rem}
.circ{width:2.9rem;height:2.9rem;border-radius:50%;background:var(--white);
  display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.circ svg{width:.9rem;height:.9rem;stroke:var(--purple);stroke-width:2;fill:none}
.pair:hover .circ,.circ:hover{transform:translate(2px,-2px)}
.pair{display:inline-flex;align-items:center;gap:.6rem}

@media (max-width:991px){
  .nav__links{display:none}
  .wall{--gap:13.37px;grid-template-columns:repeat(3,1fr);transform-origin:40% 35%;
    transform:matrix3d(1.70572,.584625,.865286,0,-.906949,1.65082,.672489,0,-.258819,-.482963,.836516,-.00102041,0,0,0,1)}
  .wcol:nth-child(4){display:none}
}
@media (max-width:600px){
  .wall{--gap:14.81px;grid-template-columns:repeat(2,1fr);width:120%;margin-left:-10%}
  .wcol:nth-child(n+3){display:none}
  .hero__veil{background:
    linear-gradient(rgb(1,2,16) 3%, rgba(1,2,16,0) 26%),
    radial-gradient(circle at 50% 46%, rgba(1,2,17,.95) 26%, rgba(1,2,17,.34) 92%)}
  .nav{padding-top:calc(1.5rem + env(safe-area-inset-top,0px));
       height:calc(4.6rem + env(safe-area-inset-top,0px))}
  .hero__inner{padding-bottom:clamp(2rem,6vh,3.5rem)}
  .hero__sub{margin-top:1.1rem}
  .hero__trust{margin-top:1.4rem}
  .hero__cta{margin-top:1.4rem}
  .hero h1{max-width:100%;font-size:clamp(2.15rem,10.2vw,3.2rem);letter-spacing:0}
  .hero__sub{font-size:.94rem;line-height:1.6}
  .hero__trust{flex-wrap:wrap;justify-content:center;gap:.35rem;font-size:.8rem;text-align:center}
}
/* ---------- client strip ---------- */
.strip{--base:2.5rem;--setw:0px;position:relative;z-index:4;background:#dbff9b;height:5.375rem;display:flex;align-items:center;overflow:hidden}
.strip__track{display:flex;align-items:center;flex:none;
  animation:slide var(--dur,40s) linear infinite;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.strip__set{display:flex;align-items:center;gap:5rem;padding-right:5rem;flex:none}
/* logos are already pure black on disk — no runtime filter, it makes iOS repaint every frame */
.strip img{--k:1;height:calc(var(--base) * var(--k));width:auto;flex:none}
@keyframes slide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--setw) * -1),0,0)}
}

@media (max-width:600px){
  .strip{height:4.5rem;--base:1.9rem}

  .strip__set{gap:2.25rem;padding-right:2.25rem}
}
/* ---------- catchphrase ---------- */
.say{background:#06282d;padding:7.875rem 0;overflow:clip}
.say__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.say__rows{display:grid;gap:0}
.say__row:first-child{justify-content:flex-start}
.say__row{display:flex;align-items:center;gap:2.625rem}
.say__row.is-indent{padding-left:4.7rem}
.say__row.is-sticker{gap:1.75rem;justify-content:flex-end}
.say__t{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;
  font-size:calc(clamp(2.35rem,9.4vw,9rem) * var(--fit,1));
  line-height:.73;letter-spacing:-.005em;color:#fff;white-space:nowrap}
.say__t.is-lime{color:#dbff9b}
.say__arrow{width:clamp(2.6rem,5.6vw,6.3rem);height:auto;flex:none;color:#dbff9b}
.say__arrow svg{width:100%;height:auto;display:block;stroke:currentColor;stroke-width:1.6;fill:none}
.say__sticker{width:clamp(5rem,13.8vw,13.9rem);height:auto;flex:none;margin-bottom:-1.4rem}

/* ---------- mission + showreel ---------- */
.mission{background:var(--ink);padding:7.875rem 0 0}
.mission__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.mission__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5.25rem;align-items:start}
.mission h2{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.005em}
.mission__copy p{color:rgba(255,255,255,.78);font-size:.984rem;line-height:1.7;max-width:34.6rem}
.mission__copy p + p{margin-top:1.6rem}
.reel{margin-top:5.25rem;padding-bottom:7.875rem}
.reel__frame{position:relative;aspect-ratio:16/9;background:#0a0b1c;overflow:hidden}
.reel__frame video,.reel__frame img{width:100%;height:100%;object-fit:cover;display:block}
.reel__tag{position:absolute;left:1.25rem;bottom:1.25rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(1,2,17,.72);backdrop-filter:blur(10px);
  padding:.55rem .9rem;border-radius:50vw;font-size:.766rem;
  text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.9)}
.reel__tag::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#dbff9b}

@media (max-width:900px){
  .mission{padding-top:5rem}
  .mission__grid{grid-template-columns:1fr;gap:1.75rem}
  .reel{margin-top:3rem;padding-bottom:5rem}
}

/* ---------- testimonials ---------- */
.says{background:var(--ink);padding:6.125rem 0}
.says__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.says__head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5.25rem;align-items:start;margin-bottom:3.25rem}
.says h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.005em}
.says__lede{color:rgba(255,255,255,.72);font-size:.984rem;line-height:1.7;max-width:26rem}
.says__track{display:flex;gap:.875rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.25rem}
.says__track::-webkit-scrollbar{display:none}
.say-card{flex:0 0 calc((100% - 1.75rem)/3);scroll-snap-align:start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:14px;
  padding:2.5rem;display:flex;flex-direction:column;min-height:25rem}
.say-card__logo{height:2.4rem;width:100%;max-width:11.5rem;object-fit:contain;object-position:left center;
  margin-bottom:1.9rem;opacity:.95}
.say-card__q{color:rgba(255,255,255,.86);font-size:.94rem;line-height:1.62;flex:1}
.say-card__rule{border:0;border-top:1px solid rgba(255,255,255,.14);margin:1.9rem 0 1.15rem}
.say-card__name{font-weight:500;font-size:1rem;line-height:1.35}
.say-card__role{color:rgba(255,255,255,.5);font-size:.82rem;line-height:1.4}
.says__foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2.75rem}
.says__note{color:rgba(255,255,255,.45);font-size:.766rem;text-transform:uppercase;letter-spacing:.04em}
.says__nav{display:flex;gap:.6rem}
.says__nav button{width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.says__nav button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.says__nav svg{width:.85rem;height:.85rem;stroke:currentColor;stroke-width:2;fill:none}
.says__dots{display:flex;gap:.45rem}
.says__dots i{width:.45rem;height:.45rem;border-radius:50%;background:rgba(255,255,255,.25);transition:background-color .3s var(--ease)}
.says__dots i.on{background:#fff}

@media (max-width:900px){
  .says{padding:4rem 0}
  .says__head{grid-template-columns:1fr;gap:1.25rem;margin-bottom:2rem}
  .say-card{flex:0 0 84%;padding:1.75rem;min-height:21rem}
  .says__foot{flex-wrap:wrap}
}

/* ---------- pinned feature column ---------- */
.feat{background:var(--ink);padding:6.125rem 0}
.feat__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.feat__grid{display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,28.0625rem);column-gap:4.375rem}
.feat__media{position:sticky;top:8.4rem;align-self:start}
.feat__frame{position:relative;height:39.375rem;border-radius:21px;overflow:hidden;background:#0a0b1c}
.feat__collage{
  position:absolute;top:50%;left:50%;width:170rem;
  display:flex;flex-direction:column;gap:17.5px;
  transform:translate(-50%,-50%) rotate(-20deg);
  transform-origin:center;will-change:transform}
.feat__row{display:grid;grid-auto-flow:column;grid-auto-columns:322px;gap:17.5px;
  justify-content:center;transform:translate3d(var(--rx,0px),0,0);will-change:transform}
.feat__card{border-radius:8.75px;overflow:hidden;aspect-ratio:322/181;background:#0a0b1c}
.feat__card img{width:100%;height:100%;object-fit:cover}

.feat__rail{position:sticky;top:5.625rem;align-self:start;height:45rem;
  background:rgba(255,255,255,.12);overflow:hidden}
.feat__rail i{display:block;width:100%;height:100%;background:#dbff9b;
  transform-origin:top;transform:scaleY(var(--prog,0))}

.feat__steps{display:flex;flex-direction:column}
.feat__step{min-height:45rem;display:flex;flex-direction:column;justify-content:center}
.feat__step h3{font-size:1.75rem;line-height:1.2;font-weight:400;letter-spacing:-.005em}
.feat__step p{margin-top:1.1rem;color:rgba(255,255,255,.74);font-size:.984rem;line-height:1.7}
/* tier C, the section-exit link. One component, shared with .eco__more and .work__all:
   35px disc at 15% white, no border, 12.25px uppercase label, 14px gap. Measured off the seven
   identical instances on mprez.fr/ (VOIR TOUT, EN SAVOIR PLUS, CAPTEZ L'ATTENTION, ...). */
.feat__link{margin-top:1.9rem;display:inline-flex;align-items:center;gap:.875rem;
  font-size:.766rem;text-transform:uppercase;letter-spacing:.03em;align-self:flex-start}
.feat__link span{width:2.1875rem;height:2.1875rem;border-radius:50%;background:rgba(255,255,255,.15);
  display:grid;place-items:center;flex:0 0 auto;
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.feat__link:hover span{background:var(--purple);transform:translateX(3px)}
.feat__link svg{width:.8rem;height:.8rem;stroke:#fff;stroke-width:2;fill:none}

@media (max-width:900px){
  .feat{padding:4rem 0}
  .feat__grid{grid-template-columns:1fr;row-gap:2rem}
  .feat__rail{display:none}
  .feat__media{position:static}
  .feat__frame{height:16rem}
  .feat__step{min-height:0;padding:2.25rem 0}
  .feat__step h3{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .feat__row{transform:none}
}

/* ---------- services grid ---------- */
.svc{background:var(--ink);padding:6.125rem 0}
.svc__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.svc__eyebrow{font-size:.766rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:1.25rem}
.svc__head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,27.65rem);gap:1.3rem 5.25rem;margin-bottom:3.9rem}
.svc h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.005em}
.svc__lede{color:rgba(255,255,255,.72);font-size:.984rem;line-height:1.7}
.svc__lede b{color:#fff;font-weight:500}
.svc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-card{position:relative;display:flex;flex-direction:column;border-radius:14px;
  border:1px solid rgba(255,255,255,0);padding:1.8125rem;min-height:23rem;
  background-color:rgba(255,255,255,0);transition:background-color .3s var(--ease);
  color:inherit;text-decoration:none}
.svc-card:hover{background-color:rgba(255,255,255,.1)}
.svc-card__icon{width:4.8125rem;height:4.8125rem;object-fit:contain;margin-bottom:2.1rem}
.svc-card h3{font-size:1.3125rem;line-height:1.2;font-weight:400;letter-spacing:-.005em}
.svc-card p{margin-top:1.1rem;font-size:.875rem;line-height:1.7;color:#c4cadf}
.svc-card__arrow{position:absolute;top:1.8125rem;right:1.8125rem;
  width:2.4375rem;height:2.4375rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;background:transparent;color:#fff;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.svc-card:hover .svc-card__arrow{background:#fff;color:var(--ink)}
.svc-card__arrow svg{width:.8rem;height:.8rem;stroke:currentColor;stroke-width:2;fill:none}
.svc-card.is-cta{background-color:var(--purple)}
.svc-card.is-cta:hover{background-color:#6650ff}
.svc-card.is-cta p{color:rgba(255,255,255,.82)}
.svc-card.is-cta .svc-card__arrow{border-color:rgba(255,255,255,.45)}
.svc-card.is-cta:hover .svc-card__arrow{background:#fff;color:var(--purple)}

@media (max-width:900px){
  .svc{padding:4rem 0}
  .svc__head{grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}
  .svc__grid{display:flex;grid-template-columns:none;gap:14.8px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none}
  .svc__grid::-webkit-scrollbar{display:none}
  .svc-card{flex:0 0 75%;scroll-snap-align:start;min-height:0;padding:1.75rem;
    background-color:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07)}
  .svc-card.is-cta{background-color:var(--purple);border-color:transparent}
  .svc-card__icon{width:3.6rem;height:3.6rem;margin-bottom:1.4rem}
}
@media (min-width:901px) and (max-width:1180px){
  .svc__grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- method tabs ---------- */
.how{background:var(--ink);padding:6.125rem 0}
.how__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.how__head{text-align:center;margin-bottom:5.4375rem}
.how__eyebrow{font-size:.766rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:.9rem}
.how h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.005em}
.how__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3.5rem;align-items:start}
.how__media{position:relative;aspect-ratio:1/1;border-radius:21px;overflow:hidden;background:#0a0b1c}
.how__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease)}
.how__media img.on{opacity:1}
.how__menu{display:flex;flex-direction:column}
.how-tab{position:relative;display:block;width:100%;text-align:left;background:none;border:0;
  color:inherit;font-family:inherit;cursor:pointer;padding:.875rem 1.75rem;transition:padding .2s var(--ease)}
.how-tab.on{padding:1.75rem}
.how-tab__bar{position:absolute;left:0;top:0;width:2px;height:0;background:#dbff9b;
  transition:height .6s cubic-bezier(.77,0,.175,1)}
.how-tab.on .how-tab__bar{height:100%}
.how-tab__t{font-size:1.3125rem;line-height:1.2;font-weight:400;letter-spacing:-.005em;color:#fff}
.how-tab__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.how-tab.on .how-tab__body{grid-template-rows:1fr}
.how-tab__body > p{overflow:hidden;font-size:.875rem;line-height:1.7;color:#c4cadf;
  opacity:0;transition:opacity .4s var(--ease)}
.how-tab.on .how-tab__body > p{opacity:1;padding-top:.875rem}

.how-tab__img{display:none}
@media (max-width:900px){
  .how{padding:4rem 0}
  .how__head{margin-bottom:2.25rem}
  .how__grid{grid-template-columns:1fr;gap:0}
  .how__media{display:none}
  .how-tab{padding:0 0 2.75rem;cursor:default}
  .how-tab.on{padding:0 0 2.75rem}
  .how-tab__bar{display:none}
  .how-tab__img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
    border-radius:21px;margin-bottom:1.4rem}
  .how-tab__t{font-size:1.125rem;display:block}
  .how-tab__body{grid-template-rows:1fr}
  .how-tab__body > p{opacity:1;padding-top:.75rem}
  .how-tab__q svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .how__media img,.how-tab__bar,.how-tab__body,.how-tab{transition:none}
}

/* ---------- free offer ---------- */
.free{position:relative;z-index:2;background:#06282d;padding:7.875rem 0}
.free__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.free__rows{display:grid;gap:0;justify-items:center;text-align:center}
.free__row{display:flex;align-items:flex-start;justify-content:center;gap:calc(2.625rem * var(--ffit,1))}
.free__t{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;
  font-size:calc(clamp(2.35rem,9.4vw,9rem) * var(--ffit,1));
  line-height:.73;letter-spacing:-.005em;color:#fff;white-space:nowrap}
.free__t.is-lime{color:#dbff9b}
.free__note{max-width:26.25rem;text-align:left;color:rgba(255,255,255,.78);
  font-size:.984rem;line-height:1.7;margin-top:.875rem}
.free__cta{margin-top:3.25rem;display:flex;align-items:center;justify-content:center;gap:.6rem}
.free__sticker{position:absolute;left:2.5rem;bottom:-3.25rem;width:clamp(9rem,17vw,17.5rem);
  height:auto;z-index:3;pointer-events:none}

@media (max-width:900px){
  .free{padding:4.5rem 0 5.5rem}
  .free__row{flex-direction:column;align-items:center;gap:.9rem}
  .free__note{text-align:center;max-width:32rem;padding-top:1.1rem}
  .free__sticker{left:1.25rem;bottom:-2rem;width:7.5rem}
  .free__cta{margin-top:2.25rem}
}

/* ---------- around the website ---------- */
.eco{background:var(--ink);padding:6.125rem 0}
.eco__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.eco__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5rem 4.375rem;align-items:start}
.eco__eyebrow{font-size:.766rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:1.25rem}
.eco h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.005em}
.eco__lede{margin-top:1.6rem;color:rgba(255,255,255,.74);font-size:.984rem;line-height:1.7}
/* tier C, same component as .feat__link and .work__all. See the note above. */
.eco__more{margin-top:2.1rem;display:inline-flex;align-items:center;gap:.875rem;
  font-size:.766rem;text-transform:uppercase;letter-spacing:.03em}
.eco__more span{width:2.1875rem;height:2.1875rem;border-radius:50%;background:rgba(255,255,255,.15);
  display:grid;place-items:center;flex:0 0 auto;
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.eco__more:hover span{background:var(--purple);transform:translateX(3px)}
.eco__more svg{width:.8rem;height:.8rem;stroke:#fff;stroke-width:2;fill:none}
.eco__cards{display:flex;flex-direction:column;gap:.875rem}
.eco-card{position:relative;display:flex;gap:3.5rem;align-items:flex-start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,0);border-radius:14px;
  padding:2.1875rem 1.75rem;color:inherit;text-decoration:none;
  transition:background-color .3s var(--ease)}
.eco-card:hover{background:rgba(255,255,255,.1)}
.eco-card__icon{width:4.375rem;height:4.375rem;object-fit:contain;flex:none}
.eco-card h3{font-size:1.3125rem;line-height:1.2;font-weight:400;letter-spacing:-.005em;padding-right:3.5rem}
.eco-card p{margin-top:.9rem;font-size:.875rem;line-height:1.7;color:#c4cadf}
.eco-card__arrow{position:absolute;top:2.1875rem;right:1.75rem;
  width:2.4375rem;height:2.4375rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:#fff;transition:background-color .3s var(--ease),color .3s var(--ease)}
.eco-card:hover .eco-card__arrow{background:#fff;color:var(--ink)}
.eco-card__arrow svg{width:.8rem;height:.8rem;stroke:currentColor;stroke-width:2;fill:none}

@media (max-width:900px){
  .eco{padding:4rem 0}
  .eco__grid{grid-template-columns:1fr;gap:2rem}
  .eco-card{flex-direction:column;gap:1.25rem;padding:1.5rem}
  .eco-card__arrow{top:1.5rem;right:1.5rem}
  .eco-card h3{padding-right:3rem}
}

/* ---------- proof / our own brands ---------- */
.work{background:var(--ink);padding:6.125rem 0}
.work__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.work__eyebrow{font-size:.766rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:1.25rem}
.work__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27.65rem);gap:1.3rem 5.25rem;align-items:start;margin-bottom:3.9rem}
.work h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.005em}
.work__lede{color:rgba(255,255,255,.72);font-size:.984rem;line-height:1.7}
/* proof section = horizontal swipe, cloning mprez's Splide portfolio on the service pages
   (cards ~387px, ~3 visible, snap + drag/touch). Home uses inline CSS so it's untouched. */
.work__grid{display:flex;gap:1.125rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.5rem;cursor:grab}
.work__grid::-webkit-scrollbar{display:none}
.work__grid.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.work__grid>.work-card{flex:0 0 min(24rem,82vw);scroll-snap-align:start}
/* item 12: their portfolio section ends on VOIR TOUT -> /cas-clients; ours ended on three
   cards and no way through to the nine. Measured live off mprez.fr/ at 1440: label 12.25px
   uppercase white, 14px to a 35px disc at 15% white, centred, 57px under the grid. The 98px
   to the section floor is .work's existing padding, which is already theirs. */
.work__all{margin:3.5625rem auto 0;display:flex;width:fit-content;align-items:center;gap:.875rem;
  font-size:.766rem;text-transform:uppercase;letter-spacing:.03em;color:var(--white);
  text-decoration:none}
.work__all span{width:2.1875rem;height:2.1875rem;border-radius:50%;background:rgba(255,255,255,.15);
  display:grid;place-items:center;flex:0 0 auto;
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.work__all:hover span{background:var(--purple);transform:translateX(3px)}
.work__all svg{width:.8rem;height:.8rem;stroke:#fff;stroke-width:2;fill:none}
.work-card{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,0);
  color:inherit;text-decoration:none;transition:background-color .3s var(--ease)}
.work-card:hover{background:rgba(255,255,255,.1)}
.work-card__shot{position:relative;aspect-ratio:847/497;overflow:hidden;background:#0a0b1c}
.work-card__shot > img.work-card__pic{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.work-card:hover .work-card__pic{transform:scale(1.03)}
.work-card__shot > img.work-card__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:2.35rem;width:auto;max-width:58%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.55))}
.work-card__shot::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(1,2,17,.30),rgba(1,2,17,.55))}
.work-card__body{padding:1.75rem;position:relative;flex:1}
/* purple stat interstitial cards in the work swipe — cloning mprez's +2500/+10000 tiles */
.work-card.is-stat{background:var(--purple);flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:2rem;gap:.4rem}
.work-card__statnum{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wght' 800;
  font-weight:800;font-size:clamp(3.5rem,7vw,5.5rem);line-height:.92;color:#fff;letter-spacing:-.01em}
.work-card__statlabel{font-size:1.1rem;line-height:1.3;color:rgba(255,255,255,.92);max-width:12rem}
.work-card__body h3{font-size:1.3125rem;line-height:1.2;font-weight:400;letter-spacing:-.005em;padding-right:3.5rem}
.work-card__body p{margin-top:.85rem;font-size:.875rem;line-height:1.7;color:#c4cadf}
.work-card__arrow{position:absolute;top:-1.2rem;right:1.75rem;z-index:3;
  width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(1,2,17,.7);
  border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;
  backdrop-filter:blur(8px);transition:background-color .3s var(--ease),color .3s var(--ease)}
.work-card:hover .work-card__arrow{background:#fff;color:var(--ink)}
.work-card__arrow svg{width:.8rem;height:.8rem;stroke:currentColor;stroke-width:2;fill:none}

@media (max-width:1100px){ .work__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .work{padding:4rem 0}
  .work__head{grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}
  .work__grid{grid-template-columns:1fr}
}

/* ---------- closing CTA ---------- */
.close{background:#06282d;padding:7.875rem 0;overflow:clip}
.close__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.close__rows{display:grid;gap:0;justify-items:center}
.close__row{display:flex;align-items:center;justify-content:center;gap:calc(2.2rem * var(--cfit,1))}
.close__t{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;
  font-size:calc(clamp(2.35rem,9.4vw,9rem) * var(--cfit,1));
  line-height:.73;letter-spacing:-.005em;color:#fff;white-space:nowrap}
.close__t.is-lime{color:#dbff9b}
.close__sticker{width:calc(clamp(6rem,14vw,14rem) * var(--cfit,1));height:auto;flex:none;margin-bottom:-1rem}
.close__arrow{width:calc(clamp(2.6rem,5.6vw,6.3rem) * var(--cfit,1));height:auto;flex:none;color:#dbff9b}
.close__arrow svg{width:100%;height:auto;display:block;stroke:currentColor;stroke-width:1.6;fill:none}
.close__cta{margin-top:3.25rem;display:flex;align-items:center;justify-content:center}
.close__sub{margin-top:1.4rem;text-align:center;color:rgba(255,255,255,.6);font-size:.875rem}

@media (max-width:900px){
  .close{padding:4.5rem 0}
  .close__row{gap:1rem}
  .close__cta{margin-top:2.25rem}
}

/* ---------- faq ---------- */
.faq{background:var(--ink);padding:6.125rem 0}
.faq__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.faq h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;font-size:3.5rem;line-height:1;text-align:center;margin-bottom:3.9rem}
.faq__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.625rem;
  border-bottom:1px solid rgba(255,255,255,.2)}
.faq-item{border-top:1px solid rgba(255,255,255,.2)}
.faq-item__q{display:flex;align-items:flex-start;gap:1.75rem;width:100%;
  background:none;border:0;padding:1.75rem 0;color:#fff;font-family:inherit;
  font-size:.875rem;font-weight:500;line-height:1.6;text-align:left;cursor:pointer}
.faq-item__q span{flex:1}
.faq-item__q svg{width:1.3125rem;height:1.3125rem;flex:none;stroke:currentColor;stroke-width:2;fill:none;
  margin-top:.1rem;transition:transform .4s var(--ease)}
.faq-item.on .faq-item__q svg{transform:rotate(180deg)}
.faq-item__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.on .faq-item__a{grid-template-rows:1fr}
.faq-item__a > p{overflow:hidden;font-size:.875rem;line-height:1.7;color:#c4cadf;
  opacity:0;transition:opacity .35s var(--ease)}
.faq-item.on .faq-item__a > p{opacity:1;padding-bottom:1.75rem}

@media (max-width:1100px){ .faq__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  .faq{padding:4rem 0}
  .faq h2{font-size:2.4rem;margin-bottom:2rem}
  .faq__grid{grid-template-columns:1fr}
}

/* ---------- meet the owners ---------- */
.own{background:var(--ink);padding:0 0 6.125rem}
.own__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.own__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27.65rem);gap:1.3rem 5.25rem;align-items:start;margin-bottom:3.25rem}
.own__eyebrow{font-size:.766rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.55);margin-bottom:1.25rem}
.own h2{font-family:'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 64,'wght' 800;
  font-weight:800;text-transform:uppercase;font-size:clamp(2rem,3.9vw,3.5rem);line-height:1;letter-spacing:-.005em}
.own__lede{color:rgba(255,255,255,.72);font-size:.984rem;line-height:1.7}
.own__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.875rem;align-items:stretch}
.own__photo{position:relative;border-radius:14px;overflow:hidden;background:#0a0b1c;min-height:30.4375rem}
.own__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.own__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,2,17,0) 45%,rgba(1,2,17,.82) 100%)}
.own__cap{position:absolute;left:1.75rem;bottom:1.6rem;z-index:2}
.own__cap b{display:block;font-size:1.3125rem;font-weight:500;line-height:1.25}
.own__cap span{font-size:.82rem;color:rgba(255,255,255,.62)}
.own__side{display:flex;flex-direction:column;gap:.875rem}
.own-note{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:2.1875rem 1.75rem;display:flex;flex-direction:column;justify-content:center}
.own-note b{display:block;font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 64,'wght' 800;font-weight:800;text-transform:uppercase;
  font-size:2.4rem;line-height:.95;letter-spacing:-.005em;color:#dbff9b;margin-bottom:.9rem}
.own-note p{font-size:.875rem;line-height:1.7;color:#c4cadf}

@media (max-width:1100px){
  .own__grid{grid-template-columns:1fr}
  .own__photo{min-height:22rem}
}
@media (max-width:900px){
  .own{padding-bottom:4rem}
  .own__head{grid-template-columns:1fr;gap:1rem;margin-bottom:2rem}
  .own-note{padding:1.5rem}
  .own-note b{font-size:1.9rem}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);padding:6.125rem 0 2.5rem}
.foot__inner{max-width:83.375rem;margin:0 auto;padding:0 var(--pad)}
.foot__top{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.984rem}
.foot__logo{height:2.0625rem;width:auto;margin-bottom:1.6rem}
.foot__meta{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.5)}
.foot__meta a{color:rgba(255,255,255,.72)}
.foot__meta a:hover{color:#fff}
.foot__meta p + p{margin-top:.9rem}
.foot h4{overflow-wrap:anywhere;font-size:.875rem;font-weight:400;color:#fff;margin-bottom:1.4rem}
.foot ul{list-style:none}
.foot li + li{margin-top:.9rem}
.foot li a{font-size:.82rem;color:rgba(255,255,255,.55);transition:color .3s var(--ease)}
.foot li a:hover{color:#fff}
.foot__rule{height:1px;background:rgba(255,255,255,.18);margin:3.5rem 0}
.foot__news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5rem;align-items:center}
.foot__news > div{min-width:0}
.foot__news h3{overflow-wrap:anywhere;font-size:1.75rem;line-height:1.2;font-weight:400;letter-spacing:-.01em}
.foot__news p{margin-top:.7rem;font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.6)}
.foot__form{display:flex;align-items:center;gap:.5rem;max-width:100%;flex-wrap:wrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:50vw;padding:.4rem .4rem .4rem 1.4rem}
.foot__form input{flex:1 1 8rem;min-width:0;background:none;border:0;color:#fff;
  font-family:inherit;font-size:.875rem;padding:.7rem 0}
.foot__form input::placeholder{color:rgba(255,255,255,.4)}
/* The ring moves to the pill rather than being deleted: the input is borderless inside
   .foot__form, so outline:none on its own left the site's one lead-capture field with no
   keyboard state at all, on every page. Same treatment teardown.html's form already had. */
.foot__form input:focus{outline:none}
.foot__form:focus-within{outline:2px solid var(--purple);outline-offset:3px}
.foot__form button{flex:none}
.foot__fine{margin-top:.9rem;font-size:.766rem;color:rgba(255,255,255,.42)}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.766rem;color:rgba(255,255,255,.42)}
.foot__bottom a{color:rgba(255,255,255,.42)}
.foot__bottom a:hover{color:rgba(255,255,255,.75)}
/* mprez runs a legal list in the footer at 12.25px on a 21px column gap; ours had no
   legal links anywhere, so /legal/terms and /legal/privacy were unreachable. */
.foot__legal{display:inline-flex;gap:1.3125rem;flex-wrap:wrap}

@media (max-width:900px){
  .foot{padding:4rem 0 2rem}
  .foot__top{grid-template-columns:1fr 1fr;gap:2.25rem}
  .foot__top > div:first-child{grid-column:1/-1}
  .foot__rule{margin:2.5rem 0}
  .foot__news{grid-template-columns:1fr;gap:1.5rem}
}

/* one motion vocabulary: rise + fade, staggered, no exit */
.rise{opacity:0;transform:translateY(2.4rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}

@media (max-width:900px){
  .say{padding:5rem 0}
  .say__row{gap:1.4rem}
  .say__row.is-indent{padding-left:1.6rem}
  .say__t{font-size:calc(clamp(1.9rem,9.6vw,4rem) * var(--fit,1))}
}
@media (prefers-reduced-motion:reduce){
  /* .wcol:nth-child(even) sets animation-name later and at higher specificity, so half the hero
     wall kept scrolling under reduce. Both selectors, or the shorthand loses. */
  .wcol,.wcol:nth-child(even){animation:none}
  .strip__track{animation:none}
  .circ,.btn{transition:none}
  .rise{opacity:1;transform:none;transition:none}
}