/* Concept: "Highlights" — navy discs with a light sweep (the agency's Instagram covers),
   white type, red only for action. Single committed dark world: navy, red, white. */
:root{
  --bg:#070a1c; --bg-2:#0a0e28; --card:#0d1234; --card-2:#111842;
  --navy:#1a194a; --navy-2:#212a66; --sheen:rgba(88,124,206,.34);
  --white:#ffffff; --muted:rgba(255,255,255,.72); --faint:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.22);
  --red:#ce3631; --red-hi:#e0433d; --red-text:#f25a53;
  --font-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font-body:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1240px; --g:clamp(16px,4vw,44px);
  --gl:max(var(--g), env(safe-area-inset-left,0px)); --gr:max(var(--g), env(safe-area-inset-right,0px));
  --r:22px; --ease:cubic-bezier(.2,.75,.2,1);
  --h1:clamp(2.5rem,6.4vw,5.6rem); --h2:clamp(1.9rem,3.8vw,3.1rem); --h3:clamp(1.25rem,1.7vw,1.5rem);
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@property --a{syntax:"<angle>"; inherits:false; initial-value:0deg}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--white); font-family:var(--font-body); font-size:1.0625rem; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:90; background:var(--bg)}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:780; font-stretch:112%; letter-spacing:-.015em; line-height:1.02; text-wrap:balance}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--white); outline-offset:3px; border-radius:4px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:10px; z-index:100; background:var(--red); color:#fff; padding:10px 14px; border-radius:999px; font-weight:600}
.skip:focus{left:max(16px, env(safe-area-inset-left,0px))}
.wrap{max-width:calc(var(--maxw) + 88px); margin-inline:auto; padding-left:var(--gl); padding-right:var(--gr)}

/* progress */
.progress{position:fixed; top:env(safe-area-inset-top,0px); left:0; height:2px; width:100%; z-index:95; background:var(--red); transform-origin:0 50%; transform:scaleX(0)}

/* eyebrow */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-stretch:90%; font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--muted)}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--red)}
.live{display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 12px; border:1px solid var(--line-2); border-radius:999px; font-size:.82rem; color:var(--muted); background:rgba(255,255,255,.03)}
.live i{width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(206,54,49,.6); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(206,54,49,0)} 100%{box-shadow:0 0 0 0 rgba(206,54,49,0)}}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:15px 24px; font-weight:600; font-size:.98rem; line-height:1;
  text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background-color .25s, border-color .25s, color .25s, transform .25s var(--ease)}
.btn .arr{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.18); transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:var(--red-hi)}
.btn-line{border-color:var(--line-2); color:#fff; background:rgba(255,255,255,.02)}
.btn-line:hover{border-color:#fff}
.btn-white{background:#fff; color:var(--navy)}
.btn-white .arr{background:rgba(26,25,74,.12)}
.btn-white:hover{background:var(--navy); color:#fff}
.btn-sm{padding:11px 18px; font-size:.9rem}
.more{display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:600; font-size:.95rem}
.more span{color:var(--red-text); transition:transform .3s var(--ease)}
.more:hover span{transform:translateX(4px)}

/* logo */
.logo{display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:#fff; font-family:var(--font-display); font-stretch:125%; font-weight:500;
  font-size:.86rem; letter-spacing:.2em; line-height:1; white-space:nowrap}
.logo .bk{width:6px; height:24px; border:1.5px solid #fff; border-right:0}
.logo .bk.r{border:1.5px solid #fff; border-left:0; margin-left:-4px}
.logo .o{color:transparent; -webkit-text-stroke:.9px #fff}
.logo .com{background:var(--red); color:#fff; font-weight:700; padding:5px 4px 4px 7px; border-radius:4px}
.logo-stack{display:grid; grid-template-columns:auto auto auto; align-items:stretch; gap:10px; color:#fff; font-family:var(--font-display); font-stretch:125%}
.logo-stack .bk{width:12px; border:2px solid #fff; border-right:0; margin-block:2px 22%}
.logo-stack .bk.r{border:2px solid #fff; border-left:0}
.logo-stack .w{display:grid; justify-items:center; gap:.18em; font-size:clamp(1.3rem,2.6vw,2.2rem); letter-spacing:.28em; font-weight:500; line-height:1}
.logo-stack .w span{padding-left:.28em}
.logo-stack .o{color:transparent; -webkit-text-stroke:1.2px #fff}
.logo-stack .com{background:var(--red); font-weight:700; border-radius:6px; padding:.18em .1em .14em .38em; margin-top:.06em}

/* header */
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:80; transition:background-color .3s, border-color .3s; border-bottom:1px solid transparent}
.hdr.is-solid{background:rgba(7,10,28,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.hdr-in{display:flex; align-items:center; gap:22px; min-height:76px}
.hdr .logo{margin-right:auto}
.nav{display:flex; align-items:center; gap:6px}
.nav > a, .nav > .dd > button{background:none; border:0; text-decoration:none; color:var(--muted); font-weight:500; font-size:.97rem; padding:10px 14px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:color .2s, background-color .2s}
.nav > a:hover, .nav > .dd > button:hover, .nav > a[aria-current="page"], .nav > .dd.is-current > button{color:#fff; background:rgba(255,255,255,.06)}
.nav > a.btn{color:#fff; background:var(--red); padding:12px 20px}
.nav > a.btn:hover{background:var(--red-hi)}
.nav .chev{width:10px; height:10px; transition:transform .25s}
.dd{position:relative}
.dd-panel{position:absolute; top:calc(100% + 10px); left:50%; width:min(580px, 90vw); transform:translateX(-50%) translateY(6px); opacity:0; visibility:hidden;
  background:rgba(12,16,46,.97); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:var(--r); padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:4px;
  transition:opacity .2s, transform .25s var(--ease), visibility 0s .25s; box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.dd.is-open .dd-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition:opacity .2s, transform .25s var(--ease)}
.dd.is-open .chev{transform:rotate(180deg)}
.dd-panel a{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:center; padding:10px; border-radius:14px; text-decoration:none}
.dd-panel a:hover, .dd-panel a:focus-visible, .dd-panel a[aria-current="page"]{background:rgba(255,255,255,.06)}
.dd-panel b{display:block; font-weight:600; font-size:.98rem}
.dd-panel small{display:block; color:var(--faint); font-size:.84rem; line-height:1.35}
.dd-panel a:last-child{grid-column:1 / -1}
.burger{display:none}
@media (max-width: 980px){
  .nav{position:fixed; top:calc(76px + env(safe-area-inset-top,0px)); left:0; right:0; bottom:0; background:var(--bg); flex-direction:column; align-items:stretch; gap:0;
    padding:14px var(--gr) 32px var(--gl); overflow-y:auto; display:none}
  .nav.is-open{display:flex}
  .nav > a, .nav > .dd > button{font-size:1.3rem; padding:16px 4px; border-radius:0; border-bottom:1px solid var(--line); justify-content:space-between; color:#fff; width:100%}
  .nav > a:hover, .nav > a[aria-current="page"], .nav > .dd > button:hover, .nav > .dd.is-current > button{background:none}
  .nav > a.btn{margin-top:22px; justify-content:center; border-radius:999px; border:0; font-size:1.05rem; padding:16px}
  .dd-panel{position:static; transform:none; opacity:1; visibility:visible; width:auto; grid-template-columns:1fr; background:none; border:0; padding:6px 0 10px; box-shadow:none; display:none; backdrop-filter:none}
  .dd.is-open .dd-panel{display:grid; transform:none}
  .dd-panel a:last-child{grid-column:auto}
  .burger{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:999px; padding:10px 16px; cursor:pointer; font-weight:500}
  .burger i{position:relative; width:16px; height:10px}
  .burger i::before,.burger i::after{content:""; position:absolute; left:0; right:0; height:1.5px; background:#fff; transition:transform .25s}
  .burger i::before{top:0} .burger i::after{bottom:0}
  .burger[aria-expanded="true"] i::before{transform:translateY(4.25px) rotate(45deg)}
  .burger[aria-expanded="true"] i::after{transform:translateY(-4.25px) rotate(-45deg)}
}
@media (max-width: 380px){ .logo{font-size:.76rem; letter-spacing:.16em} .burger{padding:9px 12px} }

/* disc — the brand's highlight cover */
.disc{position:relative; aspect-ratio:1; border-radius:50%; isolation:isolate; overflow:hidden;
  background:radial-gradient(120% 120% at 28% 18%, #22306a 0%, #151b4b 38%, #0c1031 72%, #090c26 100%);
  box-shadow:0 50px 140px -50px rgba(70,105,190,.55), inset 0 0 0 1px rgba(255,255,255,.07)}
.disc::before{content:""; position:absolute; inset:-30%; z-index:-1;
  background:
    linear-gradient(118deg, transparent 40%, rgba(96,134,214,.34) 47%, transparent 55%),
    linear-gradient(140deg, transparent 56%, rgba(82,118,200,.26) 63%, transparent 71%),
    linear-gradient(100deg, transparent 18%, rgba(255,255,255,.05) 27%, transparent 36%);
  animation:sweep 18s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.disc-c{position:absolute; inset:0; display:grid; place-items:center; color:#fff}

/* icons */
.ico{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ico .d{stroke-dasharray:1; stroke-dashoffset:0}
.bub{display:grid; place-items:center; border-radius:50%; color:#fff; position:relative; overflow:hidden; isolation:isolate; flex:none;
  background:radial-gradient(120% 120% at 25% 15%, #24326c, #121848 45%, #0a0d2a 85%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bub::before{content:""; position:absolute; inset:-30%; z-index:-1; background:linear-gradient(120deg, transparent 42%, rgba(96,134,214,.32) 50%, transparent 58%)}
.bub-44{width:44px; height:44px} .bub-44 .ico{width:20px; height:20px}
.bub-56{width:56px; height:56px} .bub-56 .ico{width:25px; height:25px}

/* hero */
.hero{position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,72px); margin-top:-77px; padding-top:calc(77px + clamp(28px,5vw,64px))}
.hero-bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 40%; filter:grayscale(1) contrast(1.1); opacity:.17}
.hero-bg::after{content:""; position:absolute; inset:0; background:
  radial-gradient(60% 70% at 78% 40%, rgba(33,42,102,.6), transparent 70%),
  linear-gradient(180deg, rgba(7,10,28,.5) 0%, rgba(7,10,28,.7) 55%, var(--bg) 96%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px); align-items:center}
.hero-copy{display:grid; gap:26px; justify-items:start; min-width:0}
.hero h1{font-size:clamp(2.3rem,5.3vw,4.5rem); font-stretch:110%; font-weight:820; text-transform:uppercase; line-height:.9; letter-spacing:-.01em}
.hero h1 span{display:block}
.hero h1 .ol{color:transparent; -webkit-text-stroke:1.6px #fff}
.hero h1 .dot{color:var(--red); display:inline}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem); color:var(--muted); font-weight:300; line-height:1.5; max-width:34em}
.lead b{color:#fff; font-weight:500}
.ticker{display:grid; height:1.3em; overflow:hidden; color:#fff; font-weight:600; font-family:var(--font-display); font-stretch:110%; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.3; margin-top:4px}
.ticker span::after{content:"."; color:var(--red)}
.ticker span{grid-area:1 / 1; white-space:nowrap; transform:translateY(105%); opacity:0; transition:transform .6s var(--ease), opacity .6s}
.ticker span.on{transform:none; opacity:1}
.ticker span.out{transform:translateY(-105%); opacity:0}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px}
.hero-photo{position:relative; margin:0; justify-self:end; width:min(100%, 470px); border-radius:28px; overflow:hidden; isolation:isolate;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08)}
.hero-photo .duo{aspect-ratio:4/5}
.hero-photo img{width:100%; height:100%; object-fit:cover; animation:drift 22s ease-in-out infinite alternate; transform-origin:60% 40%}
@keyframes drift{from{transform:scale(1.02)} to{transform:scale(1.12) translate(-1.5%,1%)}}
.hero-photo::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 55%, rgba(7,10,28,.75)); pointer-events:none}
.hero-photo figcaption{position:absolute; left:18px; bottom:18px; z-index:2; display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px;
  background:rgba(7,10,28,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:.82rem; font-weight:500; border:1px solid rgba(255,255,255,.12)}
.hero-photo figcaption i{width:7px; height:7px; border-radius:50%; background:var(--red)}
.racing-line{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.racing-line path{fill:none; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.6s cubic-bezier(.6,.05,.25,1) .35s forwards}
.racing-line .rl{stroke:var(--red); stroke-width:1.8}
.racing-line .rl-ghost{stroke:rgba(255,255,255,.14); stroke-width:1; animation-delay:.6s}
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{justify-self:stretch; width:100%}
  .hero-photo .duo{aspect-ratio:4/3}
  .racing-line{display:none}
}

/* load reveal (hero only) */
.rise{animation:rise .9s var(--ease) both}
.rise.d1{animation-delay:.08s} .rise.d2{animation-delay:.16s} .rise.d3{animation-delay:.24s} .rise.d4{animation-delay:.32s}
@keyframes rise{from{transform:translateY(22px); opacity:.15}}

/* highlights row */
.hl-row{display:flex; gap:clamp(14px,3vw,44px); justify-content:center; margin-top:clamp(36px,5vw,64px); padding:6px 4px 10px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory}
.hl-row::-webkit-scrollbar{display:none}
.hl{display:grid; justify-items:center; gap:10px; text-decoration:none; color:#fff; flex:none; scroll-snap-align:start; min-width:84px}
.ring{width:clamp(72px,8vw,94px); aspect-ratio:1; border-radius:50%; padding:3px; position:relative;
  background:conic-gradient(from var(--a), rgba(255,255,255,.24), rgba(255,255,255,.24))}
.hl:hover .ring, .hl:focus-visible .ring{background:conic-gradient(from var(--a), var(--red), #fff 25%, var(--red) 50%, rgba(255,255,255,.2) 75%, var(--red)); animation:spin 2.4s linear infinite}
@keyframes spin{to{--a:360deg}}
.ring .bub{width:100%; height:100%; border:3px solid var(--bg)}
.ring .ico{width:42%; height:42%; stroke-width:1.4}
.hl span.t{font-weight:600; font-size:.92rem}
.draw .d{stroke-dashoffset:1; animation:draw 1.3s var(--ease) .3s forwards}
.hl:nth-child(2) .d{animation-delay:.42s} .hl:nth-child(3) .d{animation-delay:.54s} .hl:nth-child(4) .d{animation-delay:.66s} .hl:nth-child(5) .d{animation-delay:.78s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width: 640px){ .hl-row{justify-content:flex-start; margin-left:calc(var(--gl) * -1); margin-right:calc(var(--gr) * -1); padding-left:var(--gl); padding-right:var(--gr)} }

/* marquee */
.marquee{border-block:1px solid var(--line); padding-block:22px; overflow:hidden; display:grid; gap:12px}
.marquee .cap{text-align:center; font-size:.76rem; color:var(--faint); letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-display); font-stretch:90%; font-weight:600}
.track{display:flex; width:max-content; animation:slide 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track ul{display:flex; align-items:center; flex:none}
.track li{display:flex; align-items:center; gap:28px; padding-right:28px; font-family:var(--font-display); font-stretch:115%; font-weight:700; font-size:clamp(1.05rem,2vw,1.5rem); text-transform:uppercase; color:rgba(255,255,255,.84); white-space:nowrap}
.track li::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--red)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(64px,9vw,128px)}
.sec-sm{padding-block:clamp(44px,6vw,80px)}
.head{display:grid; gap:16px; margin-bottom:clamp(32px,4vw,56px); max-width:46rem; justify-items:start}
.head h2{font-size:var(--h2)}
.head p{color:var(--muted); font-size:1.12rem; max-width:36em}
.head-split{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px)}
.head-split .head{margin:0}

/* bento missions */
.bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
.mcard{grid-column:span 2; position:relative; display:flex; flex-direction:column; gap:16px; padding:clamp(22px,2.4vw,32px); border-radius:var(--r); overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, var(--card-2), var(--card) 60%); border:1px solid var(--line); text-decoration:none; color:#fff; min-width:0;
  transition:border-color .3s, transform .4s var(--ease)}
.mcard--wide{grid-column:span 4; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:24px}
.mcard::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(96,134,214,.2), transparent 60%)}
.mcard:hover{border-color:var(--line-2); transform:translateY(-3px)}
.mcard:hover::before{opacity:1}
.mcard h3{font-size:var(--h3)}
.mcard p{color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips li{font-size:.82rem; padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:rgba(255,255,255,.86); background:rgba(255,255,255,.02)}
.go{margin-top:auto; display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem; padding-top:6px}
.go span{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2); transition:background-color .25s, border-color .25s, transform .3s var(--ease)}
.mcard:hover .go span{background:var(--red); border-color:var(--red); transform:translateX(3px)}
.mcard .txt{display:flex; flex-direction:column; gap:16px}
.mcard .ph{border-radius:14px; min-height:240px}
.mcard .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width: 960px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .mcard{grid-column:span 1} .mcard--wide{grid-column:1 / -1} }
@media (max-width: 620px){ .bento{grid-template-columns:1fr} .mcard--wide{grid-template-columns:1fr} .mcard .ph{min-height:180px} }

/* duotone: photos read in navy, colour returns on hover */
.duo{position:relative; overflow:hidden; background:#1c2a6e}
.duo img{filter:grayscale(1) contrast(1.12) brightness(.92); transition:filter .6s, transform .9s var(--ease)}
.duo::after{content:""; position:absolute; inset:0; background:#22327a; mix-blend-mode:color; transition:opacity .6s; pointer-events:none}
.duo-hover:hover .duo img, .duo-hover:focus-visible .duo img{filter:none; transform:scale(1.04)}
.duo-hover:hover .duo::after, .duo-hover:focus-visible .duo::after{opacity:0}

/* trust tiles */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
.tile{display:grid; gap:14px; align-content:start; padding:26px 24px 28px; border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.015)}
.tile h3{font-size:1.15rem; font-stretch:108%}
.tile p{color:var(--muted); font-size:.98rem}
@media (max-width: 960px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 520px){ .tiles{grid-template-columns:1fr} }

/* rail */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(250px,29vw,370px); gap:clamp(12px,1.6vw,20px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:16px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; overscroll-behavior-x:contain}
.rail:focus-visible{outline-offset:6px}
.wcard{scroll-snap-align:start; display:grid; gap:12px; align-content:start; text-decoration:none; color:#fff; min-width:0; background:none; border:0; padding:0; text-align:left; cursor:pointer}
.wcard .duo{border-radius:var(--r); aspect-ratio:4/5}
.wcard .duo img{width:100%; height:100%; object-fit:cover}
.wcard .tag{position:absolute; left:14px; top:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 9px; border-radius:999px; background:rgba(7,10,28,.74); backdrop-filter:blur(8px); font-size:.8rem; font-weight:600}
.wcard .tag .ico{width:16px; height:16px}
.wcard h3{font-size:1.22rem; font-stretch:108%; margin-top:4px}
.wcard p{color:var(--muted); font-size:.96rem}
.cover-disc{position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(120% 120% at 25% 15%, #24326c, #121848 45%, #0a0d2a 85%); overflow:hidden; isolation:isolate}
.cover-disc::before{content:""; position:absolute; inset:-30%; z-index:-1; background:linear-gradient(120deg, transparent 40%, rgba(96,134,214,.3) 48%, transparent 56%), linear-gradient(140deg, transparent 58%, rgba(82,118,200,.22) 65%, transparent 72%); animation:sweep 22s linear infinite}
.cover-disc .ct{font-family:var(--font-display); font-stretch:120%; font-weight:800; text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:.95; text-align:center}
.cover-disc .ct em{font-style:normal; color:var(--red-text); display:block}
.cover-disc .ct small{display:block; font-size:.72rem; letter-spacing:.2em; font-weight:600; color:var(--faint); margin-bottom:14px}
.duo .cover-disc{z-index:0}
.rail-nav{display:flex; gap:10px}
.rail-nav button{width:48px; height:48px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.02); cursor:pointer; display:grid; place-items:center; transition:background-color .2s, border-color .2s, opacity .2s, color .2s}
.rail-nav button:hover:not(:disabled){background:#fff; color:var(--navy); border-color:#fff}
.rail-nav button:disabled{opacity:.35; cursor:default}

/* CTA band */
.cta{position:relative; overflow:hidden; border-radius:calc(var(--r) + 8px); background:var(--red); isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:stretch}
.cta-in{display:grid; gap:22px; justify-items:start; align-content:center; padding:clamp(36px,6vw,80px); order:1}
.cta-ph{order:2; margin:0; position:relative; min-height:340px}
.cta-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cta-ph::before{content:""; position:absolute; inset:0 auto 0 0; width:28%; z-index:2; background:linear-gradient(90deg, var(--red), transparent); pointer-events:none}
.cta h2{font-size:clamp(2.2rem,5vw,4rem); text-transform:uppercase; font-stretch:118%; font-weight:820; line-height:.92}
.cta p{font-size:1.15rem; color:#fff; max-width:28em}
.cta .meta{display:flex; flex-wrap:wrap; gap:6px 22px; font-size:.95rem; color:#fff; font-variant-numeric:tabular-nums}
@media (max-width: 760px){
  .cta{grid-template-columns:1fr}
  .cta-ph{order:0; min-height:0; aspect-ratio:16/9}
  .cta-ph::before{inset:auto 0 0 0; width:auto; height:40%; background:linear-gradient(0deg, var(--red), transparent)}
}

/* footer */
.ftr{border-top:1px solid var(--line); padding-block:56px 30px; margin-top:clamp(64px,9vw,120px)}
.ftr-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px}
.ftr h2{font-family:var(--font-display); font-stretch:90%; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:14px}
.ftr ul{display:grid; gap:8px}
.ftr a{text-decoration:none; color:var(--muted)} .ftr a:hover{color:#fff}
.ftr li{color:var(--muted)}
.ftr p{color:var(--muted); max-width:24em; margin-top:16px; font-size:.96rem}
.ftr-base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); color:var(--faint); font-size:.86rem}
.ftr-base a{color:var(--faint)}
@media (max-width: 860px){ .ftr-grid{grid-template-columns:1fr 1fr} .ftr-brand{grid-column:1 / -1} }
@media (max-width: 480px){ .ftr-grid{grid-template-columns:1fr} }

/* inner page hero */
.phero{padding-block:clamp(28px,5vw,72px) clamp(36px,5vw,64px); position:relative}
.phero-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(24px,4vw,56px); align-items:center}
.phero h1{font-size:clamp(2rem,6.4vw,5.6rem); text-transform:uppercase; font-stretch:118%; font-weight:820; line-height:.9}
.phero .copy{display:grid; gap:22px; justify-items:start; min-width:0}
.phero .disc{width:min(100%, 320px); justify-self:center}
.phero .disc .ico{width:38%; height:38%; stroke-width:1.15}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:.86rem; color:var(--faint)}
.crumbs a{text-decoration:none} .crumbs a:hover{color:#fff}
.crumbs li + li::before{content:"/"; margin-right:8px; opacity:.5}
@media (max-width: 760px){ .phero-grid{grid-template-columns:1fr} .phero .disc{width:150px; justify-self:start; order:-1} }

/* service list (mission pages) */
.svc{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
.svc li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:18px; align-items:start; padding:26px; border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(160deg, var(--card-2), var(--card) 70%)}
.svc h3{font-size:1.2rem; font-stretch:108%; margin-bottom:6px}
.svc p{color:var(--muted)}
@media (max-width: 720px){ .svc{grid-template-columns:1fr} .svc li{grid-template-columns:44px minmax(0,1fr); padding:20px} .svc .bub-56{width:44px; height:44px} }
.note{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:18px 22px; border-radius:16px; border:1px solid var(--line); margin-top:20px; color:var(--muted)}
.note b{color:#fff; font-weight:500}

.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); counter-reset:s}
.steps li{counter-increment:s; display:grid; gap:10px; align-content:start; padding-top:22px; border-top:2px solid var(--line-2); position:relative}
.steps li::before{content:counter(s, decimal-leading-zero); font-family:var(--font-display); font-stretch:120%; font-weight:800; font-size:2.2rem; line-height:1; color:#fff}
.steps li::after{content:""; position:absolute; top:-2px; left:0; width:36px; height:2px; background:var(--red)}
.steps h3{font-size:1.15rem; font-stretch:108%}
.steps p{color:var(--muted); font-size:.98rem}
@media (max-width: 860px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px} }
@media (max-width: 480px){ .steps{grid-template-columns:1fr} }

.others{display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,36px)}

/* agence */
.figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line)}
.figs div{padding:26px 20px 6px 0; display:grid; gap:6px; align-content:start}
.figs div + div{padding-left:24px; border-left:1px solid var(--line)}
.figs b{font-family:var(--font-display); font-stretch:120%; font-weight:820; font-size:clamp(2.4rem,5vw,4rem); line-height:1; font-variant-numeric:tabular-nums}
.figs span{color:var(--muted)}
@media (max-width: 640px){ .figs{grid-template-columns:1fr} .figs div + div{padding-left:0; border-left:0; border-top:1px solid var(--line)} }
.wide{border-radius:calc(var(--r) + 6px); aspect-ratio:21/9}
.wide img{width:100%; height:100%; object-fit:cover}
@media (max-width: 700px){ .wide{aspect-ratio:4/3} }

/* realisations grid + modal */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:rgba(255,255,255,.02); color:#fff; padding:9px 16px 9px 12px; border-radius:999px; cursor:pointer; font-weight:500; font-size:.94rem; transition:background-color .2s, border-color .2s, color .2s}
.chip.np{padding-left:16px}
.chip .ico{width:18px; height:18px}
.chip:hover{border-color:#fff}
.chip[aria-pressed="true"]{background:#fff; color:var(--navy); border-color:#fff}
.wgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px) clamp(14px,2vw,24px)}
.wgrid .wcard .duo{aspect-ratio:4/3}
@media (max-width: 900px){ .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){ .wgrid{grid-template-columns:1fr} }
.count{color:var(--faint); font-size:.92rem; margin-bottom:26px}
dialog.modal{border:0; padding:0; background:transparent; color:#fff; width:min(980px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto}
dialog.modal::backdrop{background:rgba(4,6,18,.86); backdrop-filter:blur(6px)}
.modal-in{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.modal-in .mimg{min-height:300px; background:#1c2a6e; position:relative}
.modal-in .mimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.modal-in .mtxt{padding:28px; display:grid; gap:14px; align-content:start}
.modal-in h3{font-size:1.6rem}
.modal-in p{color:var(--muted)}
.mclose{justify-self:end; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:none; cursor:pointer; display:grid; place-items:center}
.mclose:hover{background:#fff; color:var(--navy)}
@media (max-width: 720px){ .modal-in{grid-template-columns:1fr} .modal-in .mimg{min-height:220px} }

/* contact */
.cgrid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width: 880px){ .cgrid{grid-template-columns:1fr} }
.form{display:grid; gap:22px; padding:clamp(22px,3vw,36px); border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(160deg, var(--card-2), var(--card) 70%)}
.field{display:grid; gap:10px; min-width:0}
.field > label, .field legend{font-weight:600; font-size:.95rem; padding:0; margin-bottom:10px}
fieldset.field{border:0; margin:0; padding:0; display:block}
.opt{color:var(--faint); font-weight:400}
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea{width:100%; font:inherit; color:#fff; background:rgba(255,255,255,.04);
  border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; transition:border-color .2s, background-color .2s}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field textarea:focus{outline:none; border-color:#fff; background:rgba(255,255,255,.07)}
.field ::placeholder{color:rgba(255,255,255,.42)}
.pick{display:flex; flex-wrap:wrap; gap:8px}
.pick input{position:absolute; opacity:0; width:1px; height:1px}
.pick label{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:999px; padding:10px 16px 10px 12px; cursor:pointer; font-weight:500; font-size:.95rem; transition:background-color .2s, color .2s, border-color .2s}
.pick label.np{padding-left:16px}
.pick .ico{width:18px; height:18px}
.pick label:hover{border-color:#fff}
.pick input:checked + label{background:#fff; color:var(--navy); border-color:#fff}
.pick input:focus-visible + label{outline:2px solid #fff; outline-offset:3px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 560px){ .two{grid-template-columns:1fr} }
.consent{display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:.9rem}
.consent input{width:18px; height:18px; margin-top:3px; accent-color:var(--red); flex:none}
.small{font-size:.84rem; color:var(--faint)}
.ok{display:grid; gap:12px; justify-items:start; padding:clamp(22px,3vw,36px); border-radius:var(--r); border:1px solid var(--line-2); background:var(--card)}
.ok h2{font-size:2rem}
.ok p{color:var(--muted)}
.coords > div{display:grid; gap:4px; padding:20px 0; border-bottom:1px solid var(--line)}
.coords > div:first-child{padding-top:0}
.coords > div:last-child{border-bottom:0}
.coords .k{font-family:var(--font-display); font-stretch:90%; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:600}
.coords .v{font-size:1.2rem; font-weight:500; font-variant-numeric:tabular-nums; word-break:break-word}
.copy-btn{justify-self:start; background:none; border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; font-size:.8rem; cursor:pointer; margin-top:4px; color:#fff}
.copy-btn:hover{border-color:#fff}
.social{display:flex; gap:8px; flex-wrap:wrap}
.social a{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--line-2); border-radius:999px; text-decoration:none; font-size:.92rem}
.social a:hover{border-color:#fff}

/* scroll-driven reveals (progressive: static where unsupported) */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 55%}
    @keyframes reveal{from{opacity:.2; transform:translateY(36px) scale(.985)}}
    .scroll-draw .d{stroke-dashoffset:1; animation:draw linear both; animation-timeline:view(); animation-range:entry 10% entry 80%}
    .progress{animation:grow linear both; animation-timeline:scroll(root)}
    @keyframes grow{to{transform:scaleX(1)}}
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .draw .d,.scroll-draw .d,.racing-line path{stroke-dashoffset:0}
  .ticker{display:none}
  .ticker-static{display:block !important}
  .track{width:auto; justify-content:center}
  .track ul[aria-hidden="true"]{display:none}
  .track ul{flex-wrap:wrap; justify-content:center; row-gap:10px; padding-inline:16px}
}
.ticker-static{display:none}

/* key figures */
.kpis{border-block:1px solid var(--line); padding-block:clamp(32px,4vw,52px)}
.kpi-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{display:grid; gap:6px; align-content:start; padding:4px clamp(14px,2.5vw,32px)}
.kpi + .kpi{border-left:1px solid var(--line)}
.kpi:first-child{padding-left:0}
.kpi b{font-family:var(--font-display); font-stretch:120%; font-weight:820; font-size:clamp(2.6rem,5.6vw,4.4rem); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.kpi span{color:var(--muted); max-width:16em}
.disciplines{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(22px,3vw,32px)}
.disciplines li{padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); font-family:var(--font-display); font-stretch:105%; font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.88)}
.disciplines li:first-child{border-color:var(--red)}
@media (max-width: 680px){ .kpi-grid{grid-template-columns:1fr} .kpi{padding:16px 0} .kpi + .kpi{border-left:0; border-top:1px solid var(--line)} }

/* testimonials: see 'avis clients' below */

/* mission page: sticky tabs + detailed items */
.tabs{position:sticky; top:calc(76px + env(safe-area-inset-top,0px)); z-index:60; background:rgba(7,10,28,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-block:1px solid var(--line)}
.tabs ul{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:10px}
.tabs ul::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; padding:9px 14px; border-radius:999px; color:var(--muted); font-weight:500; font-size:.92rem; border:1px solid transparent; transition:color .2s, background-color .2s, border-color .2s}
.tabs a .ico{width:18px; height:18px}
.tabs a:hover{color:#fff; border-color:var(--line-2)}
.tabs a.is-active{color:var(--navy); background:#fff}
.items{display:grid; gap:clamp(14px,1.8vw,22px)}
.item{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.8fr); gap:clamp(20px,3vw,40px); padding:clamp(24px,3vw,40px); border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(160deg, var(--card-2), var(--card) 70%); scroll-margin-top:170px}
.item-head{display:grid; gap:14px; align-content:start}
.item-head h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.item-head p{color:var(--muted); font-size:1.05rem}
.item .k{font-family:var(--font-display); font-stretch:90%; font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
.checks{display:grid; gap:10px}
.checks li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start}
.checks .ico{width:18px; height:18px; color:var(--red-text); margin-top:3px; stroke-width:2}
.item-get{align-self:start; padding:20px; border-radius:16px; background:rgba(255,255,255,.04); border-left:3px solid var(--red)}
.item-get p:last-child{font-weight:500}
@media (max-width: 980px){ .item{grid-template-columns:1fr 1fr} .item-head{grid-column:1 / -1} }
@media (max-width: 620px){ .item{grid-template-columns:1fr} }

/* ===== animated brand marks ===== */
@keyframes bkIn{from{transform:translateX(-70%); opacity:.15}}
@keyframes bkInR{from{transform:translateX(70%); opacity:.15}}
@keyframes focusL{0%,82%,100%{transform:none} 90%{transform:translateX(-6px)}}
@keyframes focusR{0%,82%,100%{transform:none} 90%{transform:translateX(6px)}}
@keyframes lineUp{from{transform:translateY(108%)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}}
@keyframes shine{0%{background-position:130% 0} 38%,100%{background-position:-30% 0}}
@keyframes glowCom{0%,100%{box-shadow:0 0 0 rgba(206,54,49,0)} 50%{box-shadow:0 0 28px rgba(206,54,49,.55)}}

/* header logo: brackets frame in, COM wipes in, brackets close on hover */
.hdr .logo .bk{animation:bkIn .8s var(--ease) both; transition:transform .3s var(--ease)}
.hdr .logo .bk.r{animation-name:bkInR}
.hdr .logo .com{animation:wipe .6s var(--ease) .35s both}
.logo:hover .bk{transform:translateX(3px)}
.logo:hover .bk.r{transform:translateX(-3px)}

/* hero brandmark over the photo */
.hero-mark{position:absolute; inset:0; z-index:2; display:grid; place-items:center; pointer-events:none;
  background:radial-gradient(62% 52% at 50% 47%, rgba(7,10,28,.78), rgba(7,10,28,.35) 68%, rgba(7,10,28,0))}
.brandmark{display:grid; grid-template-columns:auto auto auto; align-items:stretch; gap:.5em; color:#fff; font-family:var(--font-display); font-stretch:125%;
  font-size:clamp(1.35rem,2.6vw,2.3rem); line-height:1}
.brandmark .bk{width:.42em; border:2px solid #fff; border-right:0; margin-block:.05em 30%;
  animation:bkIn .9s var(--ease) .25s both, focusL 6s ease-in-out 2.4s infinite}
.brandmark .bk.r{border:2px solid #fff; border-left:0; animation:bkInR .9s var(--ease) .25s both, focusR 6s ease-in-out 2.4s infinite}
.bm-w{display:grid; justify-items:center; gap:.2em; letter-spacing:.3em; font-weight:500}
.bm-w > span{display:block; overflow:hidden; padding:0 0 .04em .3em}
.bm-w b{display:inline-block; font-weight:inherit; animation:lineUp .8s var(--ease) both}
.bm-l1 b{animation-delay:.4s; color:transparent; -webkit-background-clip:text; background-clip:text; background-size:260% 100%;
  background-image:linear-gradient(100deg, #fff 0 42%, #9fb5ff 50%, #fff 58% 100%);
  animation:lineUp .8s var(--ease) .4s both, shine 6s linear 2.6s infinite}
.bm-l2 b{animation-delay:.55s; color:transparent; -webkit-text-stroke:1.2px #fff}
.bm-l3{overflow:visible !important; padding-top:.06em !important}
.bm-l3 b{font-weight:700; border-radius:6px; padding:.2em .12em .16em .42em; background-size:260% 100%;
  background-image:linear-gradient(100deg, var(--red) 0 40%, #ff8079 50%, var(--red) 60% 100%);
  animation:wipe .7s var(--ease) .8s both, shine 6s linear 2.9s infinite, glowCom 6s ease-in-out 2.9s infinite}
.agence-mark{justify-self:center; padding:clamp(28px,4vw,56px); position:relative}
.agence-mark::before{content:""; position:absolute; inset:-10%; z-index:-1; background:radial-gradient(50% 50% at 50% 50%, rgba(43,60,134,.5), transparent 70%)}
.agence-mark .brandmark{font-size:clamp(1.6rem,3.2vw,2.8rem)}
@media (max-width: 760px){ .agence-mark{justify-self:start; padding:8px 0 0} .agence-mark .brandmark{font-size:1.4rem} }

/* footer: oversized mark that tracks in when it comes into view */
.ftr-mark-wrap{overflow:hidden; margin-top:clamp(40px,6vw,72px); padding-block:6px}
.ftr-mark{display:flex; align-items:center; justify-content:center; gap:.32em; font-family:var(--font-display); font-stretch:125%;
  font-size:clamp(1.5rem,6vw,5.8rem); letter-spacing:.14em; line-height:1; color:#fff; font-weight:500; white-space:nowrap}
.ftr-mark .bk{width:.3em; height:1.35em; border:2px solid rgba(255,255,255,.9); border-right:0; flex:none}
.ftr-mark .bk.r{border:2px solid rgba(255,255,255,.9); border-left:0}
.ftr-mark .t1{color:transparent; -webkit-background-clip:text; background-clip:text; background-size:260% 100%;
  background-image:linear-gradient(100deg, #fff 0 42%, #9fb5ff 50%, #fff 58% 100%); animation:shine 7s linear 1s infinite}
.ftr-mark .t2{color:transparent; -webkit-text-stroke:1.4px #fff}
.ftr-mark .t3{font-weight:700; padding:.14em .02em .1em .16em; border-radius:.1em; background-size:260% 100%;
  background-image:linear-gradient(100deg, var(--red) 0 40%, #ff8079 50%, var(--red) 60% 100%); animation:shine 7s linear 1.3s infinite}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .ftr-mark{animation:trackIn linear both; animation-timeline:view(); animation-range:entry 0% cover 45%}
    @keyframes trackIn{from{letter-spacing:.42em; opacity:.25}}
    .ftr-mark .bk{animation:fbL linear both; animation-timeline:view(); animation-range:entry 0% cover 45%}
    .ftr-mark .bk.r{animation-name:fbR}
    @keyframes fbL{from{transform:translateX(-14vw)}}
    @keyframes fbR{from{transform:translateX(14vw)}}
  }
}

/* human band: team photos + how we work, endless and slow */
.hmarquee{border-block:1px solid var(--line); padding-block:26px 30px; overflow:hidden; display:grid; gap:18px}
.hmarquee .cap{text-align:center; font-size:.76rem; color:var(--faint); letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-display); font-stretch:90%; font-weight:600}
.htrack{display:flex; width:max-content; animation:slide 55s linear infinite}
.hmarquee:hover .htrack{animation-play-state:paused}
.htrack ul{display:flex; align-items:center; flex:none}
.htrack li{display:flex; align-items:center; gap:22px; padding-right:40px}
.hm-ph{display:block; width:clamp(120px,13vw,176px); aspect-ratio:4/3; border-radius:16px; flex:none}
.hm-ph img{width:100%; height:100%; object-fit:cover}
.hmarquee li:hover .hm-ph img{filter:none}
.hmarquee li:hover .hm-ph::after{opacity:0}
.hm-t{font-family:var(--font-display); font-stretch:112%; font-weight:700; font-size:clamp(1.15rem,2vw,1.6rem); white-space:nowrap; letter-spacing:-.005em}
.hm-t::after{content:"."; color:var(--red)}
@media (prefers-reduced-motion: reduce){
  .htrack{width:auto} .htrack ul[aria-hidden="true"]{display:none}
  .htrack ul{flex-wrap:wrap; justify-content:center; row-gap:18px; padding-inline:16px}
}

/* ===== agence: story ===== */
.story-wrap{padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,80px)}
.story{position:relative; display:grid; gap:clamp(56px,8vw,120px); padding-left:clamp(28px,4vw,64px)}
.spine{position:absolute; left:calc(var(--gl) + 6px); top:8px; bottom:8px; width:2px; background:var(--line-2); overflow:hidden}
.spine span{position:absolute; inset:0; background:var(--red); transform-origin:50% 0; transform:scaleY(1)}
.chap{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,64px); align-items:center}
.chap::before{content:""; position:absolute; left:calc(clamp(28px,4vw,64px) * -1 - 1px); top:6px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:2px solid var(--red); transform:translateX(0)}
.chap-mk{grid-row:1}
.chap:not(.chap--full) .chap-txt{grid-row:2; grid-column:1}
.chap:not(.chap--full) .chap-ph{grid-row:2; grid-column:2}
.chap--rev:not(.chap--full) .chap-ph{grid-column:1}
.chap--rev:not(.chap--full) .chap-txt{grid-column:2}
.chap--full{grid-template-columns:1fr}
.chap-mk{grid-column:1 / -1; display:flex; align-items:center; gap:16px}
.chap-mk .n{font-family:var(--font-display); font-stretch:120%; font-weight:820; font-size:1rem; color:var(--red-text); font-variant-numeric:tabular-nums}
.chap-txt{display:grid; gap:18px; align-content:start; max-width:40rem; min-width:0}
.chap--full .chap-txt{max-width:52rem}
.chap-txt h2{font-size:var(--h2)}
.chap-txt p{color:var(--muted); font-size:1.1rem; line-height:1.65}
.chap-ph{margin:0; border-radius:var(--r); aspect-ratio:4/5; min-width:0}
.chap-ph img{width:100%; height:100%; object-fit:cover}
.chap-ph:hover img{filter:none} .chap-ph:hover::after{opacity:0}
.pull{margin:6px 0 0; padding:4px 0 4px 22px; border-left:3px solid var(--red); font-family:var(--font-display); font-stretch:108%; font-weight:650;
  font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.3; color:#fff; letter-spacing:-.005em}
.team{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,16px)}
.tm{margin:0; border-radius:16px; aspect-ratio:4/3}
.tm img{width:100%; height:100%; object-fit:cover}
.tm:hover img{filter:none} .tm:hover::after{opacity:0}
.manifesto{font-family:var(--font-display); font-stretch:116%; font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.02; letter-spacing:-.01em; max-width:22ch; text-wrap:balance}
.manifesto .r{color:var(--red)}
.manifesto .o{color:transparent; -webkit-text-stroke:1.5px #fff}
@media (max-width: 860px){
  .chap{grid-template-columns:1fr}
  .chap:not(.chap--full) .chap-txt, .chap:not(.chap--full) .chap-ph, .chap--rev:not(.chap--full) .chap-ph, .chap--rev:not(.chap--full) .chap-txt{grid-column:1; grid-row:auto}
  .chap-ph{aspect-ratio:4/3}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .story-wrap{view-timeline-name:--story}
    .spine span{transform:scaleY(0); animation:spineFill linear both; animation-timeline:--story; animation-range:entry 30% exit 60%}
    @keyframes spineFill{to{transform:scaleY(1)}}
    .chap::before{animation:dotOn linear both; animation-timeline:view(); animation-range:entry 30% entry 70%}
    @keyframes dotOn{to{background:var(--red); box-shadow:0 0 0 6px rgba(206,54,49,.18)}}
  }
}

/* action gallery band */
.gallery-band{border-block:1px solid var(--line); padding-block:24px 30px; overflow:hidden; display:grid; gap:18px}
.gallery-band .cap{text-align:center; font-size:.76rem; color:var(--faint); letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-display); font-stretch:90%; font-weight:600}
.gtrack{display:flex; width:max-content; animation:slide 70s linear infinite}
.gallery-band:hover .gtrack{animation-play-state:paused}
.gtrack ul{display:flex; gap:clamp(10px,1.2vw,16px); padding-right:clamp(10px,1.2vw,16px); flex:none}
.gtrack li{height:clamp(170px,19vw,260px); border-radius:18px; flex:none}
.gtrack li img{height:100%; width:auto; object-fit:cover}
.gtrack li:hover img{filter:none; transform:scale(1.04)}
.gtrack li:hover::after{opacity:0}
@media (prefers-reduced-motion: reduce){
  .gtrack{width:auto; overflow-x:auto} .gtrack ul[aria-hidden="true"]{display:none}
}

/* back to the base hero: navy disc + orbit + animated logo */
.hero-visual{position:relative; justify-self:center; width:min(100%, 450px); margin:7%}
.hero-visual .disc{width:100%}
.orbit{position:absolute; inset:-7%; border-radius:50%; border:1px dashed rgba(255,255,255,.16); animation:lap 11s linear infinite}
.orbit i{position:absolute; top:-5px; left:calc(50% - 5px); width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 16px 2px rgba(206,54,49,.8)}
@keyframes lap{to{transform:rotate(360deg)}}
.sf{position:absolute; top:-7%; left:50%; transform:translate(-50%,-50%); width:2px; height:18px; background:#fff}
.sf::after{content:"S/F"; position:absolute; left:8px; top:-2px; font:600 .62rem/1 var(--font-display); letter-spacing:.12em; color:var(--faint)}
@media (max-width: 860px){ .hero-visual{width:min(64vw, 300px); margin:8% auto 4%; order:-1} .hero-visual .brandmark{font-size:1.15rem} }

/* CTA: disc with the logo instead of a photo */
.cta-disc{order:2; display:grid; place-items:center; padding:clamp(24px,4vw,48px)}
.cta-disc .disc{width:min(100%, 380px); box-shadow:0 40px 100px -40px rgba(7,10,28,.8), inset 0 0 0 1px rgba(255,255,255,.08)}
.cta-disc .brandmark{font-size:clamp(1.1rem,2vw,1.75rem)}
@media (max-width: 760px){ .cta-disc{order:0; padding:28px 0 0} .cta-disc .disc{width:210px} .cta-disc .brandmark{font-size:1rem} }

/* ================================================================ créations */
/* posters (visuels de course) — shown in full colour, no duotone */
.poster{display:grid; gap:12px; align-content:start; padding:0; border:0; background:none; color:#fff; text-align:left; cursor:zoom-in; min-width:0; scroll-snap-align:start}
.pimg{position:relative; display:block; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--card-2);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -24px rgba(0,0,0,.9); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.pimg img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.pimg::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none}
.poster:hover .pimg, .poster:focus-visible .pimg{transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.14)}
.poster:hover .pimg img{transform:scale(1.035)}
.pcap{display:grid; gap:2px; line-height:1.3}
.pcap b{font-family:var(--font-display); font-stretch:108%; font-weight:700; font-size:1.02rem}
.pcap small{color:var(--muted); font-size:.88rem}
.rail--posters{grid-auto-columns:clamp(210px,22vw,290px)}
.posters{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,2.6vw,36px) clamp(12px,1.6vw,20px)}
.poster-note{grid-column:span 2; align-self:stretch; display:grid; gap:14px; align-content:center; padding:clamp(22px,3vw,40px); border-radius:16px;
  background:radial-gradient(120% 120% at 15% 0%, #23306e 0%, #121848 50%, #0b0f30 100%); border:1px solid var(--line)}
.poster-note h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.poster-note p{color:var(--muted)}


/* dossiers de sponsoring: CSS 3D booklet */
.books{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(30px,4vw,56px) clamp(18px,2.4vw,32px)}
.book{display:grid; gap:20px; align-content:start; padding:0; border:0; background:none; color:#fff; text-align:left; cursor:zoom-in; min-width:0}
.book-stage{display:block; perspective:1600px; padding:6% 9% 9% 4%; border-radius:var(--r);
  background:radial-gradient(90% 80% at 50% 45%, rgba(43,60,134,.45), transparent 70%)}
.book-3d{position:relative; display:block; aspect-ratio:5/3; transform-style:preserve-3d; transform:rotateX(16deg) rotateY(-20deg) rotateZ(3deg);
  transition:transform .9s var(--ease)}
.book:hover .book-3d, .book:focus-visible .book-3d{transform:rotateX(6deg) rotateY(-7deg) rotateZ(0deg) translateZ(18px)}
.book-3d .pages{position:absolute; inset:0; border-radius:2px 6px 6px 2px;
  background:repeating-linear-gradient(0deg, #f3f4f8 0 1px, #c9cedb 1px 2px), #e9ecf3}
.book-3d .pages.p1{transform:translate3d(4px,4px,-4px)}
.book-3d .pages.p2{transform:translate3d(8px,8px,-8px); box-shadow:18px 30px 50px -12px rgba(0,0,0,.75)}
.book-3d .cover{position:absolute; inset:0; overflow:hidden; border-radius:2px 5px 5px 2px; background:#0b0f30;
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.book-3d .cover img{width:100%; height:100%; object-fit:cover}
.book-3d .cover::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(255,255,255,.28) 1.1%, rgba(0,0,0,.12) 2.4%, transparent 5%),
             linear-gradient(115deg, rgba(255,255,255,.16) 0%, transparent 32%, transparent 70%, rgba(255,255,255,.06) 100%)}
.book .pcap{padding-inline:4px}

/* packs week-end: one race weekend per client, stories shown statically in phones */
.packs{display:grid; gap:clamp(20px,2.4vw,28px)}
.pack{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(20px,4vw,56px); align-items:center;
  padding:clamp(22px,3.4vw,48px); border-radius:var(--r); border:1px solid var(--line); overflow:hidden;
  background:radial-gradient(90% 120% at 80% 50%, rgba(43,60,134,.38), transparent 60%), var(--card)}
.pack-txt{display:grid; gap:16px; align-content:start; min-width:0}
.pack-txt h3{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.pack-txt > p{color:var(--muted)}
.rounds{display:flex; gap:10px; align-items:flex-start; color:#fff !important; font-weight:500; font-size:.98rem}
.rounds .ico{width:20px; height:20px; color:var(--red-text); margin-top:1px}
.phones{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,28px); justify-items:center}
.phones li{width:100%; max-width:220px}
.phone-btn{display:grid; gap:14px; justify-items:center; width:100%; padding:0; border:0; background:none; color:#fff; cursor:zoom-in}
.phone{position:relative; display:block; width:100%; aspect-ratio:9/19; border-radius:clamp(22px,2.6vw,32px); padding:clamp(5px,.6vw,7px); background:#05071a;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 0 4px #10163e, 0 36px 70px -30px rgba(0,0,0,.95); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.phone::before{content:""; position:absolute; z-index:2; top:clamp(10px,1.2vw,14px); left:50%; width:30%; height:clamp(9px,1vw,13px); transform:translateX(-50%); border-radius:999px; background:#05071a}
.screen{position:relative; display:block; width:100%; height:100%; border-radius:clamp(17px,2vw,25px); overflow:hidden; background:#0b0f30}
.screen img{width:100%; height:100%; object-fit:cover}
.phone-btn:hover .phone, .phone-btn:focus-visible .phone{transform:translateY(-6px); box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 0 0 4px #10163e, 0 44px 80px -30px rgba(0,0,0,.95)}
.phone-cap{font-size:.86rem; font-weight:500; color:var(--muted); text-align:center; line-height:1.3}
@media (max-width: 980px){ .pack{grid-template-columns:1fr} }
@media (max-width: 620px){
  .phones{display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:58%; justify-items:stretch; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(clamp(22px,3.4vw,48px) * -1); padding:6px clamp(22px,3.4vw,48px) 4px; scroll-padding-inline:clamp(22px,3.4vw,48px)}
  .phones::-webkit-scrollbar{display:none}
  .phones li{max-width:none; scroll-snap-align:start}
}
.crea .crea-stage--phone{display:flex; align-items:center; justify-content:center; padding:6% 10%}
.crea-stage--phone .phone{width:auto; height:100%; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px #10163e, 0 28px 60px -26px rgba(0,0,0,.95)}
.crea:hover .crea-stage--phone .phone{transform:translateY(-6px)}

/* identité visuelle */
.ishot{display:block; padding:0; border:0; background:var(--card-2); border-radius:16px; overflow:hidden; cursor:zoom-in; width:100%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:transform .5s var(--ease)}
.ishot img{width:100%; height:auto; transition:transform .9s var(--ease)}
.ishot:hover img{transform:scale(1.03)}
.ishot--wide{margin-bottom:clamp(12px,1.6vw,20px)}
.ident-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
@media (max-width: 760px){ .ident-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* réalisations page */
.real-sec{scroll-margin-top:150px}
.real-sec .eyebrow::before{display:none}
.real-sec .eyebrow .ico{width:16px; height:16px; color:var(--red-text)}
.real-sec + .real-sec{border-top:1px solid var(--line)}

/* mission pages: creations */
.crea-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,2.6vw,32px) clamp(14px,2vw,24px)}
.crea{display:grid; gap:12px; align-content:start; text-decoration:none; color:#fff; min-width:0}
.crea-stage{position:relative; display:grid; place-items:center; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; padding:7% 10%;
  background:radial-gradient(90% 90% at 50% 40%, #23306e 0%, #121848 55%, #0b0f30 100%); box-shadow:inset 0 0 0 1px var(--line)}
.crea-stage--flat{display:flex; align-items:center; justify-content:center}
.crea-stage--flat img{height:100%; width:auto; max-width:100%; object-fit:contain; border-radius:10px; box-shadow:0 28px 60px -26px rgba(0,0,0,.95); transition:transform .7s var(--ease)}
.crea-stage--book{perspective:1600px; padding:12% 12% 14% 8%}
.crea-stage--book .book-3d{width:100%}
.crea:hover .crea-stage--flat img{transform:translateY(-6px) rotate(-1.5deg)}
.crea:hover .book-3d{transform:rotateX(6deg) rotateY(-7deg) rotateZ(0deg) translateZ(18px)}
.crea .tag{position:absolute; left:14px; top:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 9px; border-radius:999px; background:rgba(7,10,28,.74); backdrop-filter:blur(8px); font-size:.8rem; font-weight:600}
.crea .tag .ico{width:16px; height:16px}
.crea h3{font-size:1.22rem; font-stretch:108%; margin-top:4px}
.crea p{color:var(--muted); font-size:.96rem}
@media (max-width: 620px){ .crea-grid{grid-template-columns:1fr} }

/* lightbox */
dialog.lb{border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; background:rgba(4,6,18,.94); color:#fff; overflow:hidden}
dialog.lb[open]{display:grid; grid-template-rows:auto minmax(0,1fr)}
dialog.lb::backdrop{background:rgba(4,6,18,.7); backdrop-filter:blur(6px)}
.lb-bar{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) 12px max(16px, env(safe-area-inset-left,0px))}
.lb-count{font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums}
.lb-btns{display:flex; gap:8px}
.lb-btns button{width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.04); cursor:pointer; display:grid; place-items:center}
.lb-btns button:hover{background:#fff; color:var(--navy); border-color:#fff}
.lb-btns button[hidden]{display:none}
.lb-stage{margin:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px; justify-items:center;
  padding:0 max(16px, env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); min-height:0}
.lb-stage img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:10px; min-height:0; align-self:center}
.lb-cap{font-size:.95rem; color:var(--muted); text-align:center}
@media (prefers-reduced-motion: no-preference){ dialog.lb[open] .lb-stage img{animation:lbIn .45s var(--ease)} @keyframes lbIn{from{opacity:0; transform:scale(.97)}} }

/* ================================================================ avis clients */
.quotes{columns:3 300px; column-gap:clamp(12px,1.6vw,20px)}
.quote{break-inside:avoid; position:relative; margin:0 0 clamp(12px,1.6vw,20px); display:grid; gap:18px; align-content:start; padding:26px 24px 22px;
  border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(180deg, var(--card-2), var(--card))}
.q-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.stars{display:flex; gap:3px}
.stars svg{width:17px; height:17px; fill:var(--red)}
.q-top .src{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600}
.quote blockquote{margin:0; display:grid; gap:10px; font-size:1.02rem; line-height:1.6; color:rgba(255,255,255,.78)}
.quote blockquote b{font-weight:500; color:#fff; background:linear-gradient(transparent 62%, rgba(206,54,49,.42) 62%, rgba(206,54,49,.42) 92%, transparent 92%)}
.quote figcaption{display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line)}
.quote figcaption .av{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; flex:none; font:700 .8rem/1 var(--font-display); letter-spacing:.04em;
  background:radial-gradient(120% 120% at 25% 15%, #2b3c86, #121848 60%); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px rgba(206,54,49,.7)}
.quote figcaption > span:last-child{display:grid; gap:1px}
.quote figcaption b{font-weight:600}
.quote figcaption > span > span{color:var(--faint); font-size:.88rem}
@media (max-width: 720px){
  .quotes{columns:auto; display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--gl) * -1) calc(var(--gr) * -1); padding-inline:var(--gl) var(--gr); scroll-padding-inline:var(--gl)}
  .quotes::-webkit-scrollbar{display:none}
  .quote{margin:0; scroll-snap-align:start}
}

.book-note{grid-column:span 2; display:grid; gap:14px; align-content:center; justify-items:start; padding:clamp(22px,3vw,40px); border-radius:var(--r);
  background:radial-gradient(120% 120% at 15% 0%, #23306e 0%, #121848 50%, #0b0f30 100%); border:1px solid var(--line)}
.book-note h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.book-note p{color:var(--muted); max-width:34em}
@media (max-width: 980px){ .books{grid-template-columns:repeat(2,minmax(0,1fr))} .book-note{grid-column:span 1} }
@media (max-width: 620px){ .books{grid-template-columns:1fr} }

/* mission cards: one photo per mission */
.mcard--ph{padding:0; gap:0}
.mcard--ph .ph{position:relative; aspect-ratio:16/10; min-height:0; border-radius:0}
.mcard--ph .txt{flex:1; padding:0 clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px); margin-top:-30px; position:relative; z-index:2}
.mcard--ph .txt .bub{box-shadow:0 0 0 4px var(--card-2)}
.mcard .ph::after{z-index:1}
.mcard .ph img{transition:filter .6s, transform .9s var(--ease)}

/* ================================================================ 24 Heures du Mans · Hasse-Clot Experience */
.real-sec .eyebrow .ico{flex:none}
.yr-tabs{display:inline-flex; gap:6px; padding:6px; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); margin-bottom:clamp(20px,2.6vw,32px)}
.yr-tabs button{display:inline-flex; align-items:baseline; gap:8px; padding:10px 20px; border-radius:999px; border:0; background:none; color:var(--muted); cursor:pointer;
  transition:background-color .25s, color .25s}
.yr-tabs button span{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
.yr-tabs button b{font-family:var(--font-display); font-stretch:118%; font-weight:800; font-size:1.35rem; line-height:1; font-variant-numeric:tabular-nums}
.yr-tabs button:hover{color:#fff}
.yr-tabs button[aria-selected="true"]{background:#fff; color:var(--navy)}
.yr-panel{display:grid; gap:clamp(18px,2.2vw,26px)}
.yr-line{color:var(--muted); font-size:1.08rem; max-width:44em}
@media (prefers-reduced-motion: no-preference){ .yr-panel:not([hidden]){animation:yrIn .6s var(--ease)} @keyframes yrIn{from{opacity:0; transform:translateY(14px)}} }

/* film: muted preview loop, then plays with sound on demand */
.film{position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:#000; box-shadow:0 40px 90px -50px rgba(0,0,0,.95), inset 0 0 0 1px var(--line)}
.film video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.film::after{content:""; position:absolute; inset:0; pointer-events:none; transition:opacity .5s;
  background:linear-gradient(180deg, rgba(7,10,28,0) 45%, rgba(7,10,28,.75) 100%), radial-gradient(60% 60% at 50% 50%, transparent, rgba(7,10,28,.35))}
.film-play{position:absolute; left:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,36px); z-index:2; display:inline-flex; align-items:center; gap:16px;
  padding:0; border:0; background:none; color:#fff; cursor:pointer; text-align:left}
.film-play .pl{position:relative; display:grid; place-items:center; width:clamp(58px,6vw,78px); aspect-ratio:1; border-radius:50%; background:var(--red); color:#fff;
  box-shadow:0 14px 40px -10px rgba(206,54,49,.7); transition:transform .35s var(--ease), background-color .25s}
.film-play .pl::before{content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(255,255,255,.45)}
.film-play .pl svg{width:42%; height:42%; margin-left:6%}
.film-play:hover .pl{transform:scale(1.07); background:var(--red-hi)}
.film-play .t{display:grid; gap:2px}
.film-play b{font-family:var(--font-display); font-stretch:112%; font-weight:780; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.05}
.film-play small{font-size:.86rem; color:rgba(255,255,255,.8)}
.film-tag{position:absolute; right:16px; top:16px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:rgba(7,10,28,.6); backdrop-filter:blur(8px); font-size:.76rem; color:rgba(255,255,255,.85); opacity:0; transition:opacity .4s}
.film-tag i{width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 2s infinite}
.film.is-preview .film-tag{opacity:1}
.film.is-playing::after, .film.is-playing .film-play, .film.is-playing .film-tag{opacity:0; pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  @keyframes pp{0%{box-shadow:0 0 0 0 rgba(206,54,49,.55)} 70%,100%{box-shadow:0 0 0 18px rgba(206,54,49,0)}}
  .film:not(.is-playing) .film-play .pl{animation:pp 2.4s infinite}
}
@media (max-width: 620px){ .film-play small{display:none} .film-tag{display:none} }

/* supports grid */
.sup-title{font-size:clamp(1.3rem,2vw,1.6rem); margin-top:clamp(8px,1.4vw,16px)}
.sup-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(24px,2.6vw,36px) clamp(12px,1.6vw,20px)}
.sup{display:grid; gap:14px; align-content:start; padding:0; border:0; background:none; color:#fff; text-align:left; cursor:zoom-in; min-width:0}
.sup--full{grid-column:1 / -1} .sup--half{grid-column:span 3} .sup--third{grid-column:span 2}
.sup-stage{position:relative; display:block; overflow:hidden; border-radius:var(--r); container-type:size;
  background:radial-gradient(80% 90% at 50% 30%, #23306e 0%, #121848 55%, #090c26 100%); box-shadow:inset 0 0 0 1px var(--line)}
.sup-stage::after{content:""; position:absolute; inset:auto 0 0; height:28%; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(5,7,22,.55))}
.sup--full .sup-stage{aspect-ratio:2.5/1} .sup--half .sup-stage{aspect-ratio:4/3} .sup--third .sup-stage{aspect-ratio:1/1}
.sup .pcap{padding-inline:2px}
@media (max-width: 900px){ .sup--third{grid-column:span 3} .sup--third:last-of-type{grid-column:1 / -1} }
@media (max-width: 620px){ .sup-grid{grid-template-columns:1fr} .sup--half, .sup--third, .sup--third:last-of-type{grid-column:auto} .sup--full .sup-stage{aspect-ratio:16/10} .sup--third .sup-stage, .sup--half .sup-stage{aspect-ratio:5/4} }

/* room: two printed walls meeting in a corner (interior), or a façade corner (exterior) */
.room{--H:min(44cqh, 15.5cqw); --ang:36deg; position:absolute; inset:0; perspective:calc(var(--H) * 5.5); perspective-origin:50% 40%}
.room-in{position:absolute; top:50%; left:calc(50% + var(--H) * (var(--l) - var(--r)) * .57); width:0; height:var(--H); margin-top:calc(var(--H) * -.62);
  transform-style:preserve-3d; transition:transform 1.2s var(--ease)}
.wall{position:absolute; top:0; height:100%; display:block; overflow:hidden; background:#0b0f30}
.wall img{width:100%; height:100%; object-fit:cover}
.wall::after{content:""; position:absolute; inset:0; pointer-events:none}
.wl{right:0; width:calc(var(--H) * var(--l)); transform-origin:100% 50%; transform:rotateY(var(--ang))}
.wr{left:0; width:calc(var(--H) * var(--r)); transform-origin:0 50%; transform:rotateY(calc(var(--ang) * -1))}
.wl::after{background:linear-gradient(90deg, rgba(255,255,255,.06), transparent 30%, transparent 62%, rgba(4,6,20,.42))}
.wr::after{background:linear-gradient(270deg, rgba(255,255,255,.04), transparent 35%, transparent 66%, rgba(4,6,20,.38))}
@supports (-webkit-box-reflect: below) {
  .wall{-webkit-box-reflect:below 3px linear-gradient(transparent 62%, rgba(255,255,255,.22))}
}
.room--ext{--H:min(56cqh, 46cqw); --ang:34deg; perspective:calc(var(--H) * 6)}
.room--ext .room-in{left:calc(50% + var(--H) * (var(--l) - var(--r)) * .38); margin-top:calc(var(--H) * -.62)}
.room--ext .wl{transform:rotateY(calc(var(--ang) * -1))}
.room--ext .wr{transform:rotateY(var(--ang))}
.room--ext .wl::after{background:linear-gradient(90deg, rgba(4,6,20,.4), transparent 45%)}
.room--ext .wr::after{background:linear-gradient(270deg, rgba(4,6,20,.18), transparent 50%, rgba(255,255,255,.06))}
.sup:hover .room-in, .sup:focus-visible .room-in{transform:rotateY(-7deg)}
.sup:hover .room--ext .room-in{transform:rotateY(8deg)}
@media (max-width: 620px){ .room{--H:min(40cqh, 19cqw); --ang:48deg} .room--ext{--H:min(56cqh, 46cqw); --ang:34deg} }

/* folder / booklet: the cover opens on hover (open by default on touch screens) */
.folder{position:absolute; inset:0; perspective:1800px; perspective-origin:50% 30%}
.fold-3d{position:absolute; left:50%; top:50%; height:62cqh; aspect-ratio:567/762; transform-style:preserve-3d;
  transform:translate(-50%,-48%) rotateX(16deg) rotateZ(-5deg); transition:transform 1.1s var(--ease)}
.f-base, .f-cover, .f-front, .f-back{position:absolute; inset:0; display:block}
.f-base{border-radius:2px 5px 5px 2px; overflow:hidden; box-shadow:18px 30px 50px -14px rgba(0,0,0,.8)}
.f-cover{transform-style:preserve-3d; transform-origin:0 50%; transform:rotateY(-24deg) translateZ(1px); transition:transform 1.1s var(--ease)}
.f-front, .f-back{overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.f-front{border-radius:2px 5px 5px 2px; box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.f-back{transform:rotateY(180deg); border-radius:5px 2px 2px 5px}
.f-base img, .f-front img, .f-back img{width:100%; height:100%; object-fit:cover}
.f-front::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(255,255,255,.18) 1.5%, transparent 6%, transparent 70%, rgba(255,255,255,.08))}
.f-back::after{content:""; position:absolute; inset:0; background:linear-gradient(270deg, rgba(0,0,0,.28), transparent 12%)}
.f-base::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.32), transparent 14%)}
.folder--book .fold-3d{height:64cqh}
.f-pages{position:absolute; inset:0; display:block; border-radius:2px 5px 5px 2px; transform:translate3d(5px,5px,-5px);
  background:repeating-linear-gradient(90deg, #f3f4f8 0 1px, #c9cedb 1px 2px); box-shadow:22px 34px 50px -12px rgba(0,0,0,.8)}
.folder--book .f-base{box-shadow:none}
.sup--open{cursor:pointer}
.sup--open[aria-pressed="true"] .fold-3d{transform:translate(2%,-48%) rotateX(10deg) rotateZ(0deg)}
.sup--open[aria-pressed="true"] .f-cover{transform:rotateY(-168deg) translateZ(1px)}
@media (hover: hover){
  .sup--open:hover .fold-3d{transform:translate(2%,-48%) rotateX(10deg) rotateZ(0deg)}
  .sup--open:hover .f-cover{transform:rotateY(-168deg) translateZ(1px)}
}

/* cup: tall 50 cl ecocup, white body, printed band wrapped around the middle (slightly conical) */
.cup{--Hc:80cqh; --bh:calc(var(--Hc) * .5); --C:calc(var(--bh) * 2.857); --Rm:calc(var(--C) / 6.2832);
  --Rt:calc(var(--Rm) * 1.12); --Rb:calc(var(--Rm) * .86); --fw:calc(var(--C) / var(--n)); --fwt:calc(var(--fw) * 1.12);
  position:absolute; left:50%; top:51%; width:calc(var(--Rt) * 2); height:var(--Hc); transform:translate(-50%,-50%); perspective:2600px}
.cup::after{content:""; position:absolute; left:calc(50% - var(--Rb) * 1.7); width:calc(var(--Rb) * 3.4); bottom:calc(var(--Rb) * -.32); height:calc(var(--Rb) * .7);
  border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.62), transparent); z-index:-1}
.cup-tilt{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(-9deg)}
.cup-spin{position:absolute; inset:0; transform-style:preserve-3d; animation:cupSpin 20s linear infinite}
.cf{position:absolute; top:0; left:calc(50% - var(--fwt) / 2 - 1px); width:calc(var(--fwt) + 2px); height:100%;
  background-color:#eef1f5; background-repeat:repeat-x; background-size:var(--C) var(--bh);
  background-position:calc(var(--i) * var(--fw) * -1 + (var(--fwt) - var(--fw)) / 2) 50%;
  clip-path:polygon(0 0, 100% 0, calc(50% + var(--fw) * .43 + 1px) 100%, calc(50% - var(--fw) * .43 - 1px) 100%);
  transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--Rm)) rotateX(-3.6deg);
  backface-visibility:hidden; -webkit-backface-visibility:hidden}
.cup--25 .cf{background-image:url(img/hce25-cup.webp)}
.cup-top{position:absolute; left:0; top:0; width:calc(var(--Rt) * 2); height:calc(var(--Rt) * 2); margin-top:calc(var(--Rt) * -1); border-radius:50%;
  transform:rotateX(90deg); background:radial-gradient(circle, #c9ced8 0, #dfe3ea 55%, #f4f6f9 86%, #ffffff 100%);
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(150,160,180,.5)}
.cup-shade{position:absolute; inset:0; pointer-events:none;
  clip-path:polygon(0 0, 100% 0, calc(50% + var(--Rb)) 100%, calc(50% - var(--Rb)) 100%);
  background:linear-gradient(90deg, rgba(14,22,56,.42) 0%, rgba(14,22,56,.1) 13%, rgba(255,255,255,.5) 23%, rgba(255,255,255,0) 33%,
    rgba(255,255,255,0) 64%, rgba(14,22,56,.12) 80%, rgba(14,22,56,.4) 100%),
    linear-gradient(180deg, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 6%, rgba(255,255,255,0) 92%, rgba(14,22,56,.18) 100%)}
@keyframes cupSpin{from{transform:rotateY(0)} to{transform:rotateY(-360deg)}}
.sup:hover .cup-spin{animation-duration:8s}
@media (prefers-reduced-motion: reduce){ .cup-spin{animation:none !important; transform:rotateY(-20deg)} }

/* bento v2: Communication full width (photo uncropped, 3:2), four missions below */
.bento{grid-template-columns:repeat(4,minmax(0,1fr))}
.mcard{grid-column:span 1}
.mcard--wide{grid-column:1 / -1; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(24px,3vw,44px)}
.mcard--wide .ph{position:relative; aspect-ratio:3/2; min-height:0}
@media (max-width: 960px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .mcard--wide{grid-template-columns:1fr} .mcard--wide .ph{order:-1} }
@media (max-width: 620px){ .bento{grid-template-columns:1fr} }
.mcard--ph .chips li{font-size:.76rem; padding:5px 9px}

/* ================================================================ v12 */
/* gallery band in colour */
.gtrack li{overflow:hidden; background:#10163e}
.gtrack li img{transition:transform .9s var(--ease)}

/* footer: smaller centred logo, social pictos */
.ftr-mark-wrap{display:flex; justify-content:center}
.ftr-mark{font-size:clamp(1.15rem,3.4vw,2.6rem)}
.ftr-social{display:flex; gap:10px; margin-top:18px}
.ftr-social a{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); color:#fff; transition:background-color .25s, border-color .25s, color .25s}
.ftr-social a:hover{background:#fff; color:var(--navy); border-color:#fff}
.ftr-social .ico{width:20px; height:20px}
.social .sico{width:18px; height:18px}

/* page headers: titles sized so long words never run under the disc */
.phero h1{font-size:clamp(1.9rem,4.6vw,4rem)}
.phero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}
.phero .disc{width:min(100%, 260px)}
@media (max-width: 760px){ .phero h1{font-size:clamp(1.5rem,7.4vw,2.4rem)} .phero-grid{grid-template-columns:1fr} .phero .disc{width:140px; justify-self:start} }

/* page header with a background photo (Réalisations, L'agence) */
.phero--photo{display:flex; align-items:flex-end; min-height:clamp(360px,58vh,560px); overflow:hidden; isolation:isolate; padding-top:clamp(90px,12vw,150px)}
.phero--photo > .wrap{width:100%}
.phero--photo .copy{display:grid; gap:20px; max-width:44rem}
.phero-bg{position:absolute; inset:0; z-index:-1}
.phero-bg img{width:100%; height:100%; object-fit:cover}
.phero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,10,28,.94) 0%, rgba(7,10,28,.72) 42%, rgba(7,10,28,.25) 100%), linear-gradient(180deg, rgba(7,10,28,.55) 0%, transparent 30%, transparent 62%, var(--bg) 100%)}
@media (prefers-reduced-motion: no-preference){ .phero-bg img{animation:kb 18s ease-out both} @keyframes kb{from{transform:scale(1.08)}} }
@media (max-width: 760px){ .phero--photo{min-height:420px} .phero-bg::after{background:linear-gradient(180deg, rgba(7,10,28,.55) 0%, rgba(7,10,28,.55) 40%, var(--bg) 100%)} }

/* agence: landscape team photo */
.chap-ph--land{aspect-ratio:4/3}

/* home rail: dossiers and race-week packs next to the visuals */
.rcard{display:grid; gap:12px; align-content:start; text-decoration:none; color:#fff; min-width:0; scroll-snap-align:start}
.rstage{position:relative; display:block; aspect-ratio:4/5; border-radius:16px; overflow:hidden; container-type:size;
  background:radial-gradient(90% 80% at 50% 35%, #23306e 0%, #121848 55%, #090c26 100%); box-shadow:inset 0 0 0 1px var(--line); transition:transform .5s var(--ease)}
.rcard:hover .rstage{transform:translateY(-6px)}
.rstage--book{display:grid; place-items:center; perspective:1400px; padding:0 9%}
.rstage--book .book-3d{width:100%}
.rcard:hover .book-3d{transform:rotateX(6deg) rotateY(-7deg) rotateZ(0deg) translateZ(18px)}
.rstage--pack .fan{position:absolute; top:50%; left:50%; width:44cqw; transition:transform .6s var(--ease)}
.rstage--pack .fan .phone{border-radius:clamp(16px,6cqw,26px); padding:4px; box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px #10163e, 0 24px 50px -20px rgba(0,0,0,.95)}
.rstage--pack .fan .phone::before{top:9px; height:8px}
.rstage--pack .fan .screen{border-radius:clamp(12px,5cqw,22px)}
.rstage--pack .f0{transform:translate(-50%,-50%); z-index:3}
.rstage--pack .f1{transform:translate(-92%,-46%) rotate(-9deg) scale(.88); z-index:1}
.rstage--pack .f2{transform:translate(-8%,-46%) rotate(9deg) scale(.88); z-index:2}
.rcard:hover .f1{transform:translate(-102%,-47%) rotate(-12deg) scale(.88)}
.rcard:hover .f2{transform:translate(2%,-47%) rotate(12deg) scale(.88)}

/* visuels grid: 15 race visuals + annonces fill whole rows */
.posters{grid-template-columns:repeat(5,minmax(0,1fr))}
.poster-note{grid-column:span 3}
@media (max-width: 1100px){ .posters{grid-template-columns:repeat(3,minmax(0,1fr))} .poster-note{grid-column:span 1; padding:20px} .poster-note h3{font-size:1.15rem} .poster-note p{font-size:.9rem} }
@media (max-width: 640px){ .posters{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ================================================================ v13 */
/* home: big Réalisations section, one row per type of creation */
.works .head-split{align-items:flex-end}
.rrows{display:grid; gap:clamp(36px,4.4vw,60px)}
.rrow{--rh:clamp(210px,21vw,300px); display:grid; gap:18px; padding-top:clamp(22px,2.6vw,32px); border-top:1px solid var(--line)}
.rrow-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; flex-wrap:wrap}
.rrow-t{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:4px; align-items:baseline}
.rrow-n{grid-row:span 2; font-family:var(--font-display); font-stretch:120%; font-weight:820; font-size:1rem; color:var(--red-text); font-variant-numeric:tabular-nums}
.rrow-t h3{display:flex; align-items:center; gap:10px; font-size:clamp(1.35rem,2.2vw,1.85rem)}
.rrow-t h3 .ico{width:22px; height:22px; color:var(--red-text)}
.rrow-t p{color:var(--muted); grid-column:2}
.rrow-nav{display:flex; align-items:center; gap:18px}
.rrow .rail-nav button{width:42px; height:42px}
.rrow .rail{grid-auto-columns:auto; padding-bottom:6px}
.rrow .rail > *{width:calc(var(--rh) * var(--ar, .8))}
.rail--posters{--ar:.8} .rail--books{--ar:1.33} .rail--packs{--ar:.8} .rail--events{--ar:1.33} .rail--ident{--ar:1}
.rrow .rstage{aspect-ratio:auto; height:var(--rh)}
.rrow .poster .pimg{aspect-ratio:auto; height:var(--rh)}
.rstage--book{padding:0 10%}
.rstage--photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.rcard:hover .rstage--photo img{transform:scale(1.04)}
.rstage--flat{display:grid; place-items:center; padding:9%}
.rstage--flat img{max-height:100%; width:auto; max-width:100%; border-radius:4px; box-shadow:0 26px 50px -22px rgba(0,0,0,.95); transition:transform .7s var(--ease)}
.rcard:hover .rstage--flat img{transform:translateY(-6px) rotate(-1.5deg)}
.rstage--cup .cup{--Hc:84cqh}
.rstage--square img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width: 760px){
  .rrow{--rh:clamp(200px,58vw,260px)}
  .rrow .rail-nav{display:none}
  .rrow .rail{margin-right:calc(var(--gr) * -1); padding-right:var(--gr)}
}

/* agence: square team photo, photos in natural colours */
.chap-ph--sq{aspect-ratio:1/1}
.phero--photo .phero-bg::after{background:linear-gradient(90deg, rgba(7,10,28,.9) 0%, rgba(7,10,28,.55) 38%, rgba(7,10,28,0) 72%),
  linear-gradient(180deg, rgba(7,10,28,.45) 0%, transparent 26%, transparent 70%, var(--bg) 100%)}
@media (max-width: 760px){ .phero--photo .phero-bg::after{background:linear-gradient(180deg, rgba(7,10,28,.5) 0%, rgba(7,10,28,.45) 35%, rgba(7,10,28,.85) 75%, var(--bg) 100%)} }

/* home: Studio DYCOM teaser */
.studio{position:relative; overflow:hidden; isolation:isolate}
.studio::before{content:""; position:absolute; inset:-10% -5%; z-index:-1; opacity:.55;
  background:url(img/studio-glow.webp) 78% 50% / 46% auto no-repeat, radial-gradient(40% 60% at 80% 50%, rgba(206,54,49,.18), transparent 70%); filter:blur(30px)}
.studio-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,80px); align-items:center}
.studio-copy{display:grid; gap:20px; justify-items:start; max-width:34rem}
.studio-copy h2{font-size:var(--h2)}
.studio-copy p{color:var(--muted); font-size:1.1rem}
.studio-vid{position:relative; margin:0; justify-self:center; width:min(100%, 360px); aspect-ratio:9/16; border-radius:28px; overflow:hidden; background:#05071a;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 50px 100px -40px rgba(0,0,0,.95), 0 0 80px -10px rgba(43,60,134,.55)}
.studio-vid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.studio-sound{position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(7,10,28,.6); backdrop-filter:blur(8px); color:#fff; font-size:.82rem; cursor:pointer}
.studio-sound .ico{width:18px; height:18px}
.studio-sound[aria-pressed="false"] .ico{opacity:.6}
.studio-sound[aria-pressed="true"]{background:var(--red); border-color:var(--red)}
@media (max-width: 820px){ .studio-grid{grid-template-columns:1fr} .studio-vid{width:min(78vw, 320px)} }

/* home: événementiel row = the two Hasse-Clot Experience films, same height side by side */
.rrow-films{display:grid; grid-template-columns:minmax(0,1.778fr) minmax(0,2.202fr); gap:clamp(12px,1.6vw,20px); align-items:start}
.rfilm{display:grid; gap:12px; min-width:0}
.rfilm .film-play .pl{width:clamp(48px,4.4vw,62px)}
.rfilm .film-play b{font-size:clamp(1rem,1.5vw,1.25rem)}
@media (max-width: 760px){ .rrow-films{grid-template-columns:1fr} }

/* legal pages */
.legal{display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:start}
.legal-toc{position:sticky; top:110px; display:grid; gap:12px}
.legal-toc .k{font-family:var(--font-display); font-stretch:90%; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:600}
.legal-toc ol{display:grid; gap:8px; counter-reset:t}
.legal-toc a{color:var(--muted); text-decoration:none; font-size:.95rem}
.legal-toc a:hover{color:#fff}
.legal-body{display:grid; gap:clamp(28px,3.4vw,40px); max-width:46rem}
.legal-sec{display:grid; gap:12px; scroll-margin-top:110px}
.legal-sec h2{font-size:clamp(1.25rem,2vw,1.6rem)}
.legal-sec p, .legal-sec li{color:var(--muted); line-height:1.7}
.legal-sec a, .consent a{color:#fff; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px}
.legal-dl{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:10px 20px; margin:0; padding:20px 22px; border-radius:16px; border:1px solid var(--line); background:var(--card)}
.legal-dl dt{color:var(--faint); font-size:.9rem}
.legal-dl dd{margin:0; color:#fff}
.checks-plain{display:grid; gap:6px; padding-left:18px; list-style:disc}
.legal-date{color:var(--faint); font-size:.88rem}
.ftr-legal{display:flex; gap:18px}
@media (max-width: 860px){ .legal{grid-template-columns:1fr} .legal-toc{position:static} .legal-dl{grid-template-columns:1fr; gap:2px 0} .legal-dl dd{margin-bottom:10px} }

/* contact form: honeypot + error */
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form-err{padding:14px 16px; border-radius:12px; border:1px solid var(--red); background:rgba(206,54,49,.12); color:#fff; font-size:.95rem}
.form-err a{color:#fff; text-decoration:underline}
.form [type=submit][aria-busy="true"]{opacity:.6; pointer-events:none}