/* =====================================================================
   911.studio — Yann Bazika de Goma
   Direction artistique reprise du portfolio, logotype Poppins.
   ===================================================================== */

/* ------------------------------------------------------ tokens */
:root{
  --ink:      #0A0A0B;
  --ink-2:    #121214;
  --ink-3:    #1B1B1E;
  --paper:    #F3F1ED;
  --paper-2:  #E7E4DE;
  --cream:    #FAF8F5;
  --fog:      #8B8880;
  --line:     rgba(243,241,237,.14);
  --line-d:   rgba(10,10,11,.14);
  --accent:   #FF4A1C;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --logo: "Poppins", "Archivo", Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------------
     Échelle typographique fluide.
     Chaque taille interpole linéairement entre 360 px et 1600 px de
     large, puis se fige aux deux bornes. Aucune valeur figée ailleurs
     dans la feuille : tout le texte suit la fenêtre, sans palier.
     --------------------------------------------------------------- */
  --t-2xs : clamp(0.5625rem, 0.5353rem + 0.1210vw, 0.6562rem);  /*   9 → 10  */
  --t-xs  : clamp(0.6562rem, 0.6109rem + 0.2016vw, 0.8125rem);  /*  10 → 13  */
  --t-sm  : clamp(0.8125rem, 0.7762rem + 0.1613vw, 0.9375rem);  /*  13 → 15  */
  --t-base: clamp(0.9375rem, 0.9012rem + 0.1613vw, 1.0625rem);  /*  15 → 17  */
  --t-md  : clamp(1.0312rem, 0.9768rem + 0.2419vw, 1.2188rem);  /*  16 → 20  */
  --t-lg  : clamp(1.1875rem, 1.0605rem + 0.5645vw, 1.625rem);   /*  19 → 26  */
  --t-xl  : clamp(1.375rem,  1.1573rem + 0.9677vw, 2.125rem);   /*  22 → 34  */
  --t-2xl : clamp(1.625rem,  1.2621rem + 1.6129vw, 2.875rem);   /*  26 → 46  */
  --t-3xl : clamp(2.125rem,  1.0726rem + 4.6774vw, 5.75rem);    /*  34 → 92  */
  --t-4xl : clamp(2.5rem,    0.1411rem + 10.4839vw, 10.625rem); /*  40 → 170 */
  --t-hero: clamp(2.625rem, -0.2419rem + 12.7419vw, 12.5rem);   /*  42 → 200 */

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --gap: clamp(1rem, 1.6vw, 1.75rem);
  --sec: clamp(5.5rem, 12vw, 11rem);

  --e:   cubic-bezier(.16,1,.3,1);
  --e2:  cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.is-locked, body.is-locked{ overflow:hidden; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  font-size:var(--t-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ width:100%; max-width:1560px; margin-inline:auto; padding-inline:var(--pad); }
section[id]{ scroll-margin-top:5rem; }

.mono{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; line-height:1.4;
}
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.label{ display:block; color:var(--fog); margin-bottom:.7rem; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ------------------------------------------------------ logotype */
.logotype{
  font-family:var(--logo); font-weight:700; letter-spacing:-.045em;
  font-feature-settings:"ss01";
}
.logotype i{ font-style:normal; color:var(--accent); }

/* ------------------------------------------------------ boutons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-weight:600; font-size:var(--t-base); letter-spacing:-.015em;
  padding:.85rem 1.5rem; border-radius:100px; border:1px solid transparent;
  transition:background .35s var(--e), color .35s var(--e),
             border-color .35s var(--e), transform .35s var(--e), opacity .3s ease;
  white-space:nowrap;
}
.btn--big{ padding:1.05rem 2rem; font-size:var(--t-md); }
.btn--fill{ background:var(--accent); color:#fff; }
.btn--fill:hover{ background:#ff5f38; transform:translateY(-2px); }
.btn--ghost{ border-color:currentColor; color:inherit; }
.btn--ghost:hover{ background:currentColor; transform:translateY(-2px); }
.btn--ghost:hover{ color:var(--ink); }
.rdv .btn--ghost:hover, .hero .btn--ghost:hover{ color:var(--cream); }
.btn[disabled]{ opacity:.32; pointer-events:none; }
.btn .mono{ font-size:var(--t-2xs); opacity:.7; }

/* ------------------------------------------------------ grain */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 5s steps(5) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}    60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,4%)}
}

/* ------------------------------------------------------ reveal */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--e), transform .9s var(--e); }

/* ====================================================== LOADER */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--cream); color:var(--ink);
  display:grid; place-items:end stretch; padding:var(--pad);
  transition:transform 1s var(--e) .25s, opacity .5s ease .9s;
}
.loader.is-done{ transform:translateY(-101%); }
.loader__name{
  font-family:var(--logo); font-weight:700;
  font-size:var(--t-4xl); line-height:.95; letter-spacing:-.055em;
  overflow:hidden; display:flex; align-items:baseline;
}
.loader__name span{ display:block; transform:translateY(105%); animation:up .9s var(--e) forwards; }
.loader__name span:nth-child(2){ animation-delay:.07s; color:var(--accent); }
.loader__name span:nth-child(3){ animation-delay:.14s; }
@keyframes up{ to{ transform:none } }
.loader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  color:rgba(10,10,11,.5); margin:2.2rem 0 .9rem;
}
.loader__pct{ color:var(--ink); font-size:var(--t-base); }
.loader__bar{ height:1px; background:var(--line-d); position:relative; overflow:hidden; }
.loader__bar i{ position:absolute; inset:0 100% 0 0; background:var(--accent); transition:right .4s var(--e2); }

/* ====================================================== HEADER */
.head{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.15rem var(--pad); mix-blend-mode:difference;
  transition:transform .55s var(--e), opacity .4s ease;
}
.head.is-hidden{ transform:translateY(-110%); }
.head__logo .logotype{ font-size:var(--t-md); }
/* le point orange disparaît en mode différence : on le garde neutre ici */
.head .logotype i{ color:inherit; }

.head__nav{ display:flex; gap:1.9rem; }
.head__nav a{
  font-size:var(--t-sm); font-weight:500; letter-spacing:-.01em;
  display:inline-flex; align-items:baseline; gap:.45rem; position:relative; padding-bottom:2px;
}
.head__nav a .mono{ font-size:var(--t-2xs); opacity:.5; }
.head__nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .45s var(--e);
}
.head__nav a:hover::after, .head__nav a.is-active::after{ width:100%; }

.head__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:100px; padding:.55rem 1rem;
  transition:background .35s ease, color .35s ease;
}
.head__cta .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.burger{ display:none; width:34px; height:34px; position:relative; }
.burger i{
  position:absolute; left:6px; right:6px; height:1.5px; background:currentColor;
  transition:transform .45s var(--e), opacity .3s ease;
}
.burger i:nth-child(1){ top:13px; } .burger i:nth-child(2){ top:20px; }
.burger.is-on i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-on i:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------ menu mobile */
.menu{
  position:fixed; inset:0; z-index:7900; background:var(--ink);
  padding:clamp(5rem,16vh,8rem) var(--pad) var(--pad);
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--e);
  pointer-events:none;
}
.menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__nav{ display:flex; flex-direction:column; gap:.2rem; }
.menu__nav a{
  font-size:var(--t-2xl); font-weight:700; letter-spacing:-.04em;
  line-height:1.12; display:flex; align-items:baseline; gap:.7rem;
  opacity:0; transform:translateY(20px);
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; transition:opacity .6s var(--e), transform .6s var(--e); }
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.20s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.26s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.32s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.38s}
.menu.is-open .menu__nav a:nth-child(5){transition-delay:.44s}
.menu__nav a .mono{ font-size:var(--t-2xs); color:var(--accent); }
.menu__foot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; border-top:1px solid var(--line); padding-top:1.2rem;
  font-size:var(--t-sm); color:var(--fog);
}

/* ====================================================== HERO */
.hero{
  position:relative; min-height:100svh; background:var(--cream); color:var(--ink);
  display:grid; place-items:center; padding:6rem var(--pad) 5rem; overflow:hidden; isolation:isolate;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero__blob{ position:absolute; inset:-15%; z-index:0; filter:blur(70px); }
.hero__blob .b{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(closest-side, rgba(30,30,32,.55), rgba(30,30,32,0) 72%);
  animation:float 22s ease-in-out infinite alternate;
}
.hero__blob .b1{ width:105%; height:46%; left:-14%; top:6%;  transform:rotate(-13deg); opacity:.55; }
.hero__blob .b2{ width:88%;  height:38%; left:26%;  top:52%; transform:rotate(9deg);   opacity:.45; animation-duration:27s; }
.hero__blob .b3{ width:52%;  height:52%; left:-8%;  top:58%; transform:rotate(24deg);  opacity:.32; animation-duration:31s; }
.hero__blob .b4{ width:46%;  height:30%; left:62%;  top:-6%; transform:rotate(-24deg); opacity:.38; animation-duration:24s; }
@keyframes float{ to{ transform:translate3d(3%,-4%,0) rotate(6deg) scale(1.08) } }

.hero__center{ position:relative; z-index:3; width:max-content; max-width:100%; display:flex; flex-direction:column; }
.hero__role{
  align-self:flex-start;
  font-size:var(--t-lg); font-weight:400; letter-spacing:-.02em;
  margin-bottom:.05em; opacity:0; transform:translateY(14px);
}
.hrol{ --hh:1.3em; display:block; overflow:hidden; height:var(--hh); }
.hrol__track{ display:block; will-change:transform; }
.hrol__track b{ display:block; height:var(--hh); line-height:var(--hh); font-weight:400; white-space:nowrap; }
.hrol__track b:nth-child(odd){ color:var(--ink); }
.hrol__track b:nth-child(even){ color:var(--accent); }

/* « 911.studio » ne se coupe pas : le corps est calé pour que le mot tienne
   entre les marges à toutes les largeurs (rapport mesuré ≈ 6,32 × le corps). */
.hero__word{
  font-size:var(--t-hero);
  font-weight:700; line-height:.9; letter-spacing:-.055em;
  display:flex; align-items:baseline; white-space:nowrap;
}
.hero__word .w{ display:inline-block; overflow:hidden; }
.hero__dot{ color:var(--accent); display:inline-block; opacity:0; transform:scale(.2); }
.hero__foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  margin-top:.4em; font-size:var(--t-lg); font-weight:400; letter-spacing:-.02em;
}
.hero__foot span{ opacity:0; transform:translateY(14px); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.6rem,3vw,2.4rem); opacity:0; transform:translateY(14px); }

.is-ready .hero__role,
.is-ready .hero__cta,
.is-ready .hero__foot span{ opacity:1; transform:none; transition:opacity .9s var(--e), transform .9s var(--e); }
.is-ready .hero__role{ transition-delay:.15s; }
.is-ready .hero__foot span:first-child{ transition-delay:.6s; }
.is-ready .hero__foot span:last-child{ transition-delay:.68s; }
.is-ready .hero__cta{ transition-delay:.85s; }
.is-ready .hero__dot{ opacity:1; transform:none; transition:opacity .6s var(--e) .9s, transform .8s var(--e) .9s; }

.hero__edges{
  position:absolute; z-index:3; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) + .2rem);
  display:flex; justify-content:space-between; gap:1rem; color:rgba(10,10,11,.5);
}

/* ====================================================== BANDE
   Le seul aplat de couleur du site : autant qu'il vende. Dégradé chaud,
   reflet qui balaie, et des promesses plutôt qu'une simple liste. */
.marquee{
  position:relative; overflow:hidden; padding:.95rem 0; color:#fff;
  background:linear-gradient(100deg, #F0380B 0%, #FF4A1C 32%, #FF8340 62%, #FF4A1C 100%);
  border-block:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.14);
}
.marquee::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
  transform:translateX(-100%);
  animation:brillance 7s ease-in-out infinite;
}
@keyframes brillance{ 0%,58%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }

.marquee__track{ display:flex; width:max-content; animation:slide 38s linear infinite; will-change:transform; }
.marquee__track span{
  font-size:var(--t-xl); font-weight:800; letter-spacing:-.035em;
  text-transform:uppercase; padding-right:1.1rem; white-space:nowrap;
  text-shadow:0 1px 0 rgba(120,30,5,.18);
}
.marquee__track b{
  color:rgba(255,255,255,.65); padding-inline:.5em;
  font-weight:400; font-size:.62em; vertical-align:.14em;
}
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ====================================================== SECTION HEADS */
.sec-head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.sec-num{ color:var(--accent); display:block; margin-bottom:1.1rem; }
.sec-title{ font-size:var(--t-3xl); font-weight:800; line-height:.95; letter-spacing:-.05em; }
.sec-title em{ font-size:1.05em; }
.sec-lead{ margin-top:1.4rem; max-width:50ch; color:var(--fog); font-size:var(--t-md); }

/* ====================================================== TRAVAUX */
.work{ padding:var(--sec) 0; }
.filters{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.4rem;
  border-block:1px solid var(--line); padding:1.1rem 0;
  position:sticky; top:0; z-index:60; background:var(--ink); backdrop-filter:blur(8px);
}
.filter{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:.55rem 1rem; color:var(--fog);
  display:inline-flex; align-items:center; gap:.4rem;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.filter sup{ font-size:.85em; opacity:.65; }
.filter:hover{ color:var(--paper); border-color:rgba(243,241,237,.4); }
.filter.is-on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.grid{ columns:4; column-gap:var(--gap); }
@media (max-width:1200px){ .grid{ columns:3 } }
@media (max-width:760px) { .grid{ columns:2; column-gap:.6rem } }

.card{
  break-inside:avoid; margin-bottom:var(--gap); position:relative; cursor:pointer;
  opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity .7s var(--e), transform .7s var(--e);
}
.card.in{ opacity:1; transform:none; }
.card.is-hidden{ display:none; }
.card__media{ position:relative; overflow:hidden; background:var(--ink-3); }
.card__media img{ width:100%; transition:transform 1.1s var(--e), opacity .8s ease; opacity:0; }
.card__media img.loaded{ opacity:1; }
.card:hover .card__media img{ transform:scale(1.045); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,11,.72), transparent 55%);
  opacity:0; transition:opacity .5s ease;
}
.card:hover .card__media::after{ opacity:1; }
.card__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:.7rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--e), transform .45s var(--e); color:var(--paper);
}
.card:hover .card__cap{ opacity:1; transform:none; }
.card__t{ font-weight:600; font-size:var(--t-base); letter-spacing:-.02em; }
.card__c{ color:var(--accent); }
.grid__empty{ color:var(--fog); padding:3rem 0; }
.more{ display:flex; justify-content:center; margin-top:clamp(2rem,4vw,3.5rem); }

/* ====================================================== PRESTATIONS */
.prest{ padding:var(--sec) 0; background:var(--ink-2); border-top:1px solid var(--line); }
.prest__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--gap); }
.prest__item{
  border:1px solid var(--line); border-radius:3px; padding:clamp(1.4rem,2.4vw,2rem);
  display:flex; flex-direction:column; gap:.9rem;
  transition:border-color .45s var(--e), background .45s var(--e), transform .45s var(--e);
}
.prest__item:hover{ border-color:var(--accent); background:rgba(255,74,28,.045); transform:translateY(-3px); }
.prest__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.prest__nom{ font-size:var(--t-xl); font-weight:700; letter-spacing:-.04em; line-height:1.05; }
.prest__tag{
  font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(255,74,28,.5); border-radius:100px;
  padding:.3rem .6rem; white-space:nowrap; flex:none;
}
.prest__meta{ display:flex; gap:1.2rem; color:var(--fog); }
.prest__meta b{ color:var(--paper); font-weight:600; }
.prest__desc{ color:var(--fog); font-size:var(--t-base); }
.prest__inclus{ display:flex; flex-direction:column; gap:.4rem; margin-top:auto; padding-top:.4rem; }
.prest__inclus li{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--t-sm); color:var(--fog); }
.prest__inclus li::before{ content:"—"; color:var(--accent); flex:none; }
.prest__go{ margin-top:.6rem; align-self:flex-start; }

/* ====================================================== RENDEZ-VOUS */
.rdv{ padding:var(--sec) 0; background:var(--paper); color:var(--ink); }
.rdv .sec-lead{ color:rgba(10,10,11,.6); }

.book{
  background:var(--cream); border:1px solid var(--line-d); border-radius:4px;
  padding:clamp(1.3rem,3vw,2.6rem);
  box-shadow:0 40px 80px -60px rgba(10,10,11,.5);
}

/* ------------------------------------------------ fil d'étapes */
.book__steps{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  border-bottom:1px solid var(--line-d); padding-bottom:1.2rem; margin-bottom:clamp(1.5rem,3vw,2.4rem);
}
.book__steps li{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font-size:var(--t-base); font-weight:600; letter-spacing:-.02em; color:rgba(10,10,11,.35);
  transition:color .4s ease;
}
.book__steps li .mono{ font-size:var(--t-2xs); }
.book__steps li.is-on{ color:var(--ink); }
.book__steps li.is-on .mono{ color:var(--accent); }
.book__steps li.is-done{ color:rgba(10,10,11,.6); }

.book__panel{ display:none; }
.book__panel.is-on{ display:block; animation:fadeUp .55s var(--e); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.book__h{
  font-size:var(--t-xl); font-weight:700; letter-spacing:-.045em;
  line-height:1.05; margin-bottom:.55rem;
}
.book__sub{ color:rgba(10,10,11,.55); font-size:var(--t-base); max-width:56ch; }
/* l'espace se met sous le sous-titre quand il existe, sous le titre sinon */
.book__h + .book__choices, .book__h + .book__when, .book__h + .form,
.book__sub + .book__choices, .book__sub + .book__when{
  margin-top:clamp(1.2rem,2.5vw,1.8rem);
}

/* ------------------------------------------------ étape 1 : prestations */
.book__choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.6rem; }
.choice{
  position:relative; display:flex; flex-direction:column; gap:.35rem;
  border:1px solid var(--line-d); border-radius:3px; padding:1rem 2.2rem 1rem 1.1rem;
  background:#fff; cursor:pointer; text-align:left;
  transition:border-color .3s var(--e), box-shadow .3s var(--e), transform .3s var(--e);
}
.choice:hover{ border-color:rgba(10,10,11,.4); transform:translateY(-2px); }
.choice.is-on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.choice__nom{ font-size:var(--t-md); font-weight:700; letter-spacing:-.03em; }
.choice__meta{ font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase; color:rgba(10,10,11,.5); }
.choice__prix{ font-weight:600; font-size:var(--t-sm); color:var(--accent); }
.choice.is-on::after{
  content:"✓"; position:absolute; top:.7rem; right:.85rem;
  width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:var(--t-xs); line-height:1;
}

/* ------------------------------------------------ étape 2 : calendrier */
/* le calendrier garde une taille de calendrier : au-delà il paraît gonflé */
.book__when{ display:grid; grid-template-columns:minmax(260px,420px) minmax(0,1fr); gap:clamp(1.4rem,3vw,2.6rem); align-items:start; }

.cal{ background:#fff; border:1px solid var(--line-d); border-radius:3px; padding:1rem clamp(.8rem,1.5vw,1.2rem) 1.2rem; }
.cal__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:1rem; }
.cal__month{ font-size:var(--t-md); font-weight:700; letter-spacing:-.03em; text-transform:capitalize; }
.cal__nav{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-d); transition:background .3s ease, color .3s ease, opacity .3s ease;
}
.cal__nav:hover{ background:var(--ink); color:var(--cream); }
.cal__nav[disabled]{ opacity:.25; pointer-events:none; }
.cal__nav svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

.cal__dow,.cal__days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal__dow{ margin-bottom:6px; }
.cal__dow span{
  font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:.08em;
  text-align:center; color:rgba(10,10,11,.4);
}
.day{
  aspect-ratio:1; display:grid; place-items:center; position:relative;
  border-radius:3px; font-size:var(--t-base); font-weight:600; font-variant-numeric:tabular-nums;
  border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.day--pad{ pointer-events:none; }
.day--free{ background:rgba(10,10,11,.045); }
.day--free:hover{ background:var(--ink); color:var(--cream); }
.day--free::after{
  content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}
.day--busy{ color:rgba(10,10,11,.25); pointer-events:none; text-decoration:line-through; }
.day.is-on{ background:var(--accent); color:#fff; }
.day.is-on::after{ background:#fff; }
.day--today{ border-color:rgba(10,10,11,.35); }
.cal__note{ margin-top:.9rem; color:rgba(10,10,11,.45); }

/* ------------------------------------------------ créneaux */
.slots .label{ color:rgba(10,10,11,.5); }
.slots__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.45rem; }
.slots__empty,.slots__none{
  grid-column:1/-1; color:rgba(10,10,11,.45); font-size:var(--t-sm);
  border:1px dashed var(--line-d); border-radius:3px; padding:1.2rem; text-align:center;
}
.slot{
  border:1px solid var(--line-d); border-radius:3px; padding:.6rem .4rem;
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.05em; background:#fff;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.slot:hover{ border-color:var(--ink); transform:translateY(-2px); }
.slot.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.slots__load{ grid-column:1/-1; color:rgba(10,10,11,.45); font-size:var(--t-sm); padding:1rem 0; }

/* ------------------------------------------------ étape 3 : formulaire */
.form{ display:flex; flex-direction:column; gap:1.1rem; max-width:820px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field .mono{ color:rgba(10,10,11,.5); }
.field input,.field textarea{
  font:inherit; font-size:var(--t-base); color:var(--ink); background:#fff;
  border:1px solid var(--line-d); border-radius:3px; padding:.8rem .9rem;
  transition:border-color .3s ease, box-shadow .3s ease; width:100%;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,74,28,.12);
}
.field input.is-bad,.field textarea.is-bad{ border-color:#c8321a; background:#fff6f4; }
.field textarea{ resize:vertical; min-height:110px; }
.field__help{ font-style:normal; font-size:var(--t-sm); color:rgba(10,10,11,.45); }

fieldset.field{ border:0; padding:0; min-inline-size:0; }
.radios{ display:flex; flex-wrap:wrap; gap:.5rem; }
.radio{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  border:1px solid var(--line-d); border-radius:100px; padding:.6rem 1.1rem;
  background:#fff; font-size:var(--t-base); font-weight:600; letter-spacing:-.015em;
  transition:border-color .3s var(--e), box-shadow .3s var(--e);
}
.radio input{ accent-color:var(--accent); width:16px; height:16px; flex:none; }
.radio.is-on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }

.check-line{ display:flex; gap:.7rem; align-items:flex-start; font-size:var(--t-sm); color:rgba(10,10,11,.65); cursor:pointer; }
.check-line input{ margin-top:.25rem; accent-color:var(--accent); width:17px; height:17px; flex:none; }
.check-line.is-bad{ color:#c8321a; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.recap{
  border:1px solid var(--line-d); border-left:3px solid var(--accent); border-radius:3px;
  background:#fff; padding:1rem 1.2rem; display:grid; gap:.5rem;
}
.recap__l{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.recap__l span{ font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase; color:rgba(10,10,11,.45); }
.recap__l b{ font-size:var(--t-base); font-weight:700; letter-spacing:-.025em; text-align:right; }

.form__err{
  color:#c8321a; font-size:var(--t-sm); font-weight:600;
  border:1px solid rgba(200,50,26,.3); background:#fff6f4; border-radius:3px; padding:.8rem 1rem;
}
.form__legal{ color:rgba(10,10,11,.4); }

.btn.is-busy{ pointer-events:none; opacity:.7; }
.btn.is-busy::after{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ------------------------------------------------ succès */
.done{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem; max-width:640px; }
.done__mark{
  width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center;
  animation:pop .7s cubic-bezier(.2,1.55,.35,1);
}
@keyframes pop{ from{ transform:scale(.3); opacity:0 } to{ transform:none; opacity:1 } }
.done__mark svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.done__h{ font-size:var(--t-2xl); font-weight:800; letter-spacing:-.05em; line-height:1; }
.done__p{ color:rgba(10,10,11,.65); }
.done__recap{ width:100%; }

/* ------------------------------------------------ navigation */
.book__nav{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line-d); padding-top:1.4rem; margin-top:clamp(1.4rem,3vw,2.2rem);
}
.book__nav .btn--ghost{ color:var(--ink); }
.book__nav .btn--ghost:hover{ color:var(--cream); }
.book__nav > *:only-child{ margin-left:auto; }

.rdv__alt{ margin-top:1.6rem; color:rgba(10,10,11,.55); font-size:var(--t-base); }
.rdv__alt a{ color:var(--accent); font-weight:600; border-bottom:1px solid transparent; transition:border-color .3s ease; }
.rdv__alt a:hover{ border-color:var(--accent); }

/* ====================================================== LE STUDIO */
.studio{ padding:var(--sec) 0; }
/* photo à gauche, texte à droite : la colonne image reste étroite pour que
   le côte à côte tienne jusque sur les fenêtres serrées */
.studio__grid{ display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr); gap:clamp(1.6rem,4vw,4.5rem); align-items:start; }
.studio__pics{ position:sticky; top:12vh; display:grid; gap:1rem; align-items:start; }
.studio__pic{ overflow:hidden; background:var(--ink-3); }
.studio__pic img{ width:100%; height:100%; object-fit:cover; }
.studio__pic--a{ aspect-ratio:4/5; }
.studio__cap{ color:var(--fog); }
.studio__text .lead{ font-size:var(--t-lg); font-weight:500; letter-spacing:-.025em; line-height:1.35; }
.studio__text p{ margin-bottom:1.2rem; color:var(--fog); }
.studio__text .lead{ color:var(--paper); }
.studio__text b{ color:var(--paper); font-weight:600; }
.studio__text .pivot{ font-size:var(--t-xl); color:var(--paper); font-weight:500; letter-spacing:-.03em; }
.studio__text .pivot em{ font-family:var(--serif); font-style:italic; color:var(--accent); }
.studio__nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; border-block:1px solid var(--line); padding:1.4rem 0; margin-bottom:1.4rem; }
.studio__nums b{ display:block; font-size:var(--t-xl); font-weight:800; letter-spacing:-.045em; line-height:1; }
.studio__nums .mono{ color:var(--fog); display:block; margin-top:.4rem; }
.case__link{ display:inline-flex; align-items:center; gap:.35rem; color:var(--accent); font-weight:600; border-bottom:1px solid transparent; transition:border-color .3s ease; }
.case__link:hover{ border-color:var(--accent); }
.case__link svg{ width:.85em; height:.85em; fill:none; stroke:currentColor; stroke-width:2; }

/* ====================================================== COMMENT ÇA MARCHE */
/* bandeau compact : quatre lignes de texte n'ont pas besoin de la respiration
   d'une vraie section, sinon ça fait deux grands vides pour rien */
.how{ padding:clamp(2.5rem,4.5vw,3.75rem) 0; background:var(--ink-2); border-top:1px solid var(--line); }
.how__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 clamp(2rem,4vw,4rem); border-top:1px solid var(--line); }
.how__list li{ display:grid; gap:.3rem; padding:1.6rem 0; border-bottom:1px solid var(--line); align-content:start; }
.how__list .mono{ color:var(--accent); }
.how__list b{ font-size:var(--t-md); font-weight:700; letter-spacing:-.03em; }
.how__list i{ font-style:normal; color:var(--fog); font-size:var(--t-sm); line-height:1.45; }

/* ====================================================== CONTACT
   La dernière page doit donner envie de cliquer, pas seulement finir la
   page : halo orange, promesse chiffrée, et un bouton qu'on ne rate pas. */
.contact{
  position:relative; border-top:1px solid var(--line);
  min-height:100svh; display:flex; overflow:hidden; isolation:isolate;
}
.contact__glow{ position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(110px); }
.contact__glow i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,74,28,.5), rgba(255,74,28,0) 72%);
  animation:lueur 20s ease-in-out infinite alternate;
}
.contact__glow i:nth-child(1){ width:72%; height:62%; left:-14%; top:-12%; opacity:.8; }
.contact__glow i:nth-child(2){ width:56%; height:56%; right:-12%; bottom:-20%; opacity:.5; animation-duration:27s; }
@keyframes lueur{ to{ transform:translate3d(6%,8%,0) scale(1.16) } }

.contact__lead{
  max-width:46ch; font-size:var(--t-lg);
  line-height:1.45; letter-spacing:-.015em; color:var(--fog);
}
.contact__lead b{ color:var(--paper); font-weight:600; box-shadow:inset 0 -.42em 0 rgba(255,74,28,.3); }
.contact__lead em{ color:var(--paper); }

/* --------- le gros bouton --------- */
.cta{
  --h:clamp(62px,7.5vw,92px);
  position:relative; display:inline-flex; align-items:center;
  gap:clamp(1rem,2vw,1.8rem); overflow:hidden;
  height:var(--h); padding:0 calc(var(--h) * .12) 0 clamp(1.6rem,3vw,2.6rem);
  border-radius:100px; color:#fff;
  background:linear-gradient(100deg,#F0380B,#FF4A1C 45%,#FF8340);
  font-weight:700; letter-spacing:-.035em; font-size:var(--t-lg);
  box-shadow:0 26px 60px -26px rgba(255,74,28,.85);
  transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.cta:hover{ transform:translateY(-3px); box-shadow:0 34px 74px -24px rgba(255,74,28,1); }
.cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
  transform:translateX(-100%); animation:brillance 5.5s ease-in-out infinite;
}
.cta__txt{ position:relative; z-index:2; }
.cta__arrow{
  position:relative; z-index:2; flex:none;
  width:calc(var(--h) - clamp(20px,2.4vw,26px)); aspect-ratio:1;
  border-radius:50%; background:#fff; color:var(--ink);
  display:grid; place-items:center;
  transition:transform .5s var(--e);
}
.cta:hover .cta__arrow{ transform:rotate(45deg); }
.cta__arrow svg{ width:40%; height:40%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* --------- machine à sous : les métiers défilent, ça s'arrête sur le studio --------- */
.contact__duo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5rem); align-items:center; width:100%;
}
.contact__left{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(1.3rem,2.4vw,2rem); }

.pitch{ font-size:var(--t-2xl); font-weight:700; letter-spacing:-.04em; }
.pitch__row{ display:flex; align-items:center; gap:clamp(1rem,2vw,1.8rem); }
.pitch__txt{ min-width:0; }
/* le visage surgit une fois que le nom s'est calé */
.pitch__face{
  flex:none; width:clamp(110px,13vw,220px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; background:var(--ink-3);
  opacity:0; transform:scale(.25) rotate(-18deg);
}
.pitch__face img{ width:100%; height:100%; object-fit:cover; }
.pitch.is-done .pitch__face{
  opacity:1; transform:none;
  transition:opacity .45s var(--e) .5s, transform .8s cubic-bezier(.2,1.55,.35,1) .5s;
}
.pitch__pre{ color:var(--fog); font-weight:500; line-height:1.1; opacity:0; transform:translateY(14px); }
.pitch.is-on .pitch__pre{ opacity:1; transform:none; transition:opacity .7s var(--e), transform .7s var(--e); }

.roller{ --h:1.16em; display:block; overflow:hidden; height:var(--h); margin-top:.12em; }
.roller__track{ display:block; transform:translateY(0); transition:transform .58s cubic-bezier(.7,0,.2,1); }
.roller__track b{
  display:block; height:var(--h); line-height:var(--h);
  font-weight:700; color:var(--accent); white-space:nowrap;
}
/* l'arrivée : on passe du orange au blanc, avec un trait qui se tire dessous */
.roller__track b.is-final{
  color:var(--paper); position:relative; width:max-content; max-width:100%;
  letter-spacing:-.05em;
}
.roller__track b.is-final .pt{ font-style:normal; color:var(--accent); }
.roller__track b.is-final .souligne{
  position:absolute; left:0; bottom:.16em; height:3px; width:0; background:var(--accent);
}
.pitch.is-done .roller__track b.is-final .souligne{ width:100%; transition:width .8s var(--e) .25s; }
.pitch.is-done .roller__track{ transition-timing-function:cubic-bezier(.16,1.25,.3,1); }
.contact__in{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(2.5rem,6vw,4rem);
  padding-block:clamp(3rem,7vw,5.5rem) clamp(1.5rem,3vw,2.5rem);
}
.contact__top{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:clamp(1.8rem,4vw,3.2rem); }
.contact .sec-num{ margin-bottom:0; }
.contact__big{ font-size:var(--t-4xl); font-weight:800; line-height:.86; letter-spacing:-.058em; margin:.3rem 0 0; }
.contact__big .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.contact__big .w{ display:block; transform:translateY(105%); transition:transform 1s var(--e); }
.contact__big.in .w{ transform:none; }
.contact__big .line:nth-child(2) .w{ transition-delay:.10s; }
.contact__bottom{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem); align-items:end;
  border-top:1px solid var(--line); padding-top:clamp(1.5rem,3vw,2.4rem);
}
.cbox{ display:flex; flex-direction:column; }
.cbox .label{ margin-bottom:.9rem; }
.contact__mail,.contact__tel{
  display:flex; width:max-content; max-width:100%; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:var(--t-lg); font-weight:600; letter-spacing:-.035em;
  border-bottom:1px solid var(--line); padding-bottom:.32em; word-break:break-word;
  transition:color .35s ease, border-color .35s ease;
}
.contact__tel{ font-variant-numeric:tabular-nums; }
.contact__mail:hover,.contact__tel:hover{ color:var(--accent); border-color:var(--accent); }
.contact__mail svg,.contact__tel svg{ width:.82em; height:.82em; fill:none; stroke:currentColor; stroke-width:1.6; flex:none; }
.contact__zone{ color:var(--fog); font-size:var(--t-base); }

.foot{ border-top:1px solid var(--line); padding:1.6rem 0; }
.foot__in{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--fog); }
.foot__up:hover{ color:var(--paper); }

/* ====================================================== LIGHTBOX */
.lb{
  position:fixed; inset:0; z-index:9200; background:rgba(8,8,9,.97);
  display:grid; grid-template-rows:1fr auto; opacity:0; pointer-events:none;
  transition:opacity .45s ease; backdrop-filter:blur(6px); color:var(--paper);
}
.lb.is-open{ opacity:1; pointer-events:auto; }
.lb__stage{ display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; padding:clamp(3.5rem,7vh,5rem) clamp(1rem,7vw,7rem) 1rem; }
.lb__stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transform:scale(.97); transition:opacity .5s var(--e), transform .6s var(--e);
}
.lb.is-ready .lb__stage img{ opacity:1; transform:none; }
.lb__bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem var(--pad) calc(1.1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.lb__title{ font-weight:600; letter-spacing:-.02em; }
.lb__count{ color:var(--fog); }
.lb__close,.lb__nav{
  position:absolute; z-index:3; display:grid; place-items:center;
  width:48px; height:48px; border:1px solid var(--line); border-radius:50%;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.lb__close:hover,.lb__nav:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.lb__close{ top:1.1rem; right:var(--pad); }
.lb__nav{ top:50%; transform:translateY(-50%); }
.lb__nav--prev{ left:clamp(.6rem,2vw,1.6rem); }
.lb__nav--next{ right:clamp(.6rem,2vw,1.6rem); }
.lb svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

/* ====================================================== RESPONSIVE */
@media (max-width:1080px){
  .head__nav{ display:none; }
  .head__cta{ display:none; }
  .burger{ display:block; }
  .book__when{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .contact__duo{ grid-template-columns:1fr; gap:clamp(2rem,5vw,3rem); }
}
/* le côte à côte photo / texte ne lâche qu'au vrai format mobile */
@media (max-width:720px){
  .studio__grid{ grid-template-columns:1fr; }
  .studio__pics{ position:relative; top:0; max-width:460px; }
}
@media (max-width:760px){
  .hero__edges{ display:none; }
  /* sans cette largeur imposée, la rangée de boutons dicte sa taille au bloc
     entier et « Paris » finit collé au bord de l'écran */
  .hero__center{ width:100%; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 auto; }
  .filters{
    flex-wrap:nowrap; overflow-x:auto; gap:.4rem;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
    scroll-snap-type:x proximity;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filter{ flex:none; scroll-snap-align:start; }
  .card{ margin-bottom:.6rem; }
  .card__cap{ padding:.6rem; }
  .card__c{ display:none; }
  .lb__nav{ width:42px; height:42px; }
  .form__row{ grid-template-columns:1fr; }
  .book__steps{ gap:.3rem .9rem; }
  .slots__list{ grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); }
  /* on récupère chaque pixel pour que les jours restent cliquables au doigt */
  .book{ padding:1rem; }
  .cal{ padding:.9rem .6rem 1rem; }
  .cal__days{ gap:3px; }
  .day{ min-height:40px; }
  .contact{ min-height:0; }
  .contact__bottom{ grid-template-columns:1fr; gap:2rem; }
  .studio__nums{ grid-template-columns:1fr; gap:.9rem; }
  .book__nav{ flex-direction:column-reverse; }
  .book__nav .btn{ width:100%; }
}

/* ====================================================== A11Y */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .card{ opacity:1; transform:none; }
  .contact__big .w{ transform:none; }
  .hero__role,.hero__foot span,.hero__cta,.hero__dot{ opacity:1; transform:none; }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }