/* ═══════════════════════════════════════════════════════════
   STUDIO — GRAPHISTE  |  style.css · 2026
   Cross-browser : Chrome · Opera GX · Brave · Edge · Firefox · Safari
   CLS-optimisé : toutes les animations sur opacity/transform uniquement,
   contain:layout sur les sections, dimensions réservées pour images/vidéo
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* FIX STABILITÉ ANIMATIONS CROSS-BROWSER */
* {
  animation-timing-function: linear !important;
}
:root{
  --bg:#03030a;
  --fg:#edeae4;
  --fg-dim:rgba(237,234,228,.55);
  --fg-ghost:rgba(237,234,228,.15);
  --accent:#e040fb;
  --accent-mid:#c020e0;
  --accent-dim:rgba(224,64,251,.22);
  --accent-faint:rgba(224,64,251,.08);
  --accent-text:#f0a0ff;
  --line:rgba(224,64,251,.10);
  --line-bright:rgba(237,234,228,.18);
  --line-pink:rgba(224,64,251,.15);
  --ff-head:'Bebas Neue',sans-serif;
  --ff-body:'DM Sans',sans-serif;
  --ff-serif:'Cormorant Garamond',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --sp-xl:clamp(80px,10vw,160px);
  --pad:clamp(20px,5vw,64px);
}

html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--bg);color:var(--fg);font-family:var(--ff-body);font-weight:300;overflow-x:hidden;}
body.loading{overflow:hidden;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#000;}
#cursor-dot,#cursor-ring{display:none;}

/* ─── GRAIN ─── */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:190px;opacity:.028;pointer-events:none;z-index:8000;
  -webkit-animation:grainShift 8s steps(1) infinite;
  animation:grainShift 8s steps(1) infinite;
  will-change:transform;
}
@-webkit-keyframes grainShift{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}20%{-webkit-transform:translate(-2%,-4%);transform:translate(-2%,-4%)}40%{-webkit-transform:translate(3%,1%);transform:translate(3%,1%)}60%{-webkit-transform:translate(-1%,3%);transform:translate(-1%,3%)}80%{-webkit-transform:translate(4%,-2%);transform:translate(4%,-2%)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-2%,-4%)}40%{transform:translate(3%,1%)}60%{transform:translate(-1%,3%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}

/* ─── THREE CANVAS ─── */
#three-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ─── LOADER ─── */
#loader{
  position:fixed;inset:0;background:var(--bg);z-index:10000;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:40px;
  -webkit-transition:opacity 1s var(--ease),-webkit-transform 1s var(--ease);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  /* contain évite que le loader impacte le layout du reste */
  contain:strict;
}
#loader.out{opacity:0;pointer-events:none;-webkit-transform:scale(1.03);transform:scale(1.03);}
.loader-progress{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:20px;width:240px;}
.loader-bar-wrap{width:100%;height:1px;background:var(--line-bright);position:relative;overflow:hidden;}
.loader-bar{position:absolute;inset:0;background:var(--accent);-webkit-transform:translateX(-100%);transform:translateX(-100%);will-change:transform;}
.loader-count{font-family:var(--ff-head);font-size:3.5rem;letter-spacing:.1em;color:var(--fg);line-height:1;}
.loader-label{font-family:var(--ff-head);font-size:1rem;letter-spacing:.44em;color:var(--fg-dim);text-transform:uppercase;}

/* ─── NAV ─── */
nav{
  position:fixed;inset:0 0 auto;z-index:500;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify; justify-content: flex-start;
  padding:clamp(16px,2.5vw,32px) var(--pad);
  -webkit-transition:background .6s var(--ease),padding .4s var(--ease);
  transition:background .6s var(--ease),padding .4s var(--ease);
  /* hauteur fixée pour éviter le CLS au scroll */
  min-height:clamp(60px,8vw,90px);
}
nav.scrolled{
  background:rgba(3,3,10,.92);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line-pink);
  padding-top:clamp(14px,2vw,20px);padding-bottom:clamp(14px,2vw,20px);
}
.nav-logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;line-height:1;gap:3px }
.nav-logo-text{font-family:var(--ff-head);font-size:clamp(1.1rem,2.5vw,1.45rem);letter-spacing:.22em;text-transform:uppercase;}
.nav-logo-sub{font-size:clamp(.50rem,1vw,.58rem);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);}
.nav-links{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;gap:clamp(24px,4vw,48px)}
.nav-links a{font-size:clamp(.60rem,1.1vw,.70rem);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);position:relative;-webkit-transition:color .22s;transition:color .22s;white-space:nowrap;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--accent);-webkit-transition:width .32s var(--ease);transition:width .32s var(--ease);}
.nav-links a:hover{color:var(--fg);}
.nav-links a:hover::after{width:100%;}
.nav-cta{font-size:clamp(.58rem,1vw,.68rem);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-bright);padding:clamp(8px,1.5vw,12px) clamp(14px,2.5vw,26px);color:var(--fg-dim);white-space:nowrap;-webkit-transition:border-color .28s,color .28s,background .28s;transition:border-color .28s,color .28s,background .28s;}
.nav-cta:hover{border-color:var(--accent);color:var(--fg);background:var(--accent-faint);}
.nav-burger{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-burger span{display:block;width:22px;height:1px;background:var(--fg);-webkit-transition:-webkit-transform .38s var(--ease),opacity .28s;transition:transform .38s var(--ease),opacity .28s;}
.nav-burger.open span:first-child{-webkit-transform:translateY(3px) rotate(45deg);transform:translateY(3px) rotate(45deg);}
.nav-burger.open span:last-child{-webkit-transform:translateY(-3px) rotate(-45deg);transform:translateY(-3px) rotate(-45deg);}

/* ─── Logo image : dimensions explicites pour éviter CLS ─── */
.nav-logo-img{
  display:block;
  /* width/height explicites = réservation d'espace = 0 CLS */
  height:clamp(28px,4vw,38px);
  width:auto;
  aspect-ratio:120/36; /* ratio du fichier source */
  -o-object-fit:contain;object-fit:contain;
  -webkit-filter:brightness(0) saturate(100%) invert(24%) sepia(78%) saturate(2750%) hue-rotate(286deg) brightness(86%) contrast(92%);
  filter:brightness(0) saturate(100%) invert(24%) sepia(78%) saturate(2750%) hue-rotate(286deg) brightness(86%) contrast(92%);
  -webkit-transition:filter .3s;transition:filter .3s;
}
.nav-logo:hover .nav-logo-img{-webkit-filter:brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(800%) hue-rotate(260deg) brightness(120%) contrast(100%);filter:brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(800%) hue-rotate(260deg) brightness(120%) contrast(100%);}
.nav-logo:has(.nav-logo-img) .nav-logo-text{display:none;}

/* ─── HERO ─── */
.hero{
  position:relative;width:100%;
  height:100vh;height:100svh;
  min-height:600px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding:clamp(90px,13vh,130px) var(--pad) clamp(48px,8vh,80px);
  overflow:hidden;z-index:1;
  /* contain:layout empêche les enfants animés d'affecter le layout extérieur */
  contain:layout style;
}
.hero-noise{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 100% 80% at 50% 0%,transparent 50%,rgba(3,3,10,.6) 100%);}
.hero-bg-overlay{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 28%,rgba(14,20,34,.58) 0%,transparent 72%),linear-gradient(to bottom,transparent 30%,rgba(3,3,10,.96) 100%);z-index:1;pointer-events:none;}
.hero-content{position:relative;z-index:2;max-width:820px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;will-change:transform,opacity;}

/* Eyebrow : opacity seule, pas de translateY (évite CLS) */
.hero-eyebrow{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:14px;
  font-size:clamp(.58rem,1.2vw,.68rem);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim);
  margin-bottom:clamp(18px,2.5vh,26px);
  opacity:0;
  -webkit-animation:fadeIn .9s .2s both;
  animation:fadeIn .9s .2s both;
}
.eyebrow-line{display:block;width:32px;height:1px;background:var(--accent);-ms-flex-negative:0;flex-shrink:0;}

/* Hero title : le conteneur a une hauteur implicite grâce aux lignes visibles
   On anime avec clip-path au lieu de translateY pour éviter le reflow */
.hero-title{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  font-family:var(--ff-head);
  font-size:clamp(4.5rem,10vw,10rem);
  line-height:.88;letter-spacing:.025em;text-transform:uppercase;
  margin-bottom:clamp(24px,3.5vh,36px);
}
.hero-line-wrap{
  display:block;
  /* overflow:hidden sur le wrapper UNIQUEMENT — le wrapper lui-même ne bouge pas */
  overflow:hidden;
  /* hauteur explicite réservée pour chaque ligne → 0 CLS */
  line-height:.92;
}
/* Les lignes glissent depuis le bas du wrapper (pas de l'extérieur du document) */
.hero-line{
  display:block;
  -webkit-animation:slideUp .9s var(--ease) both;
  animation:slideUp .9s var(--ease) both;
  /* will-change sur l'élément animé, pas le wrapper */
  will-change:transform;
}
.hero-line-wrap:nth-child(1) .hero-line{-webkit-animation-delay:.25s;animation-delay:.25s;}
.hero-line-wrap:nth-child(2) .hero-line{-webkit-animation-delay:.35s;animation-delay:.35s;color:var(--accent-text);font-family:var(--ff-serif);text-transform:none;font-size:clamp(2.4rem,5vw,5.8rem);}
.hero-line-wrap:nth-child(3) .hero-line{-webkit-animation-delay:.45s;animation-delay:.45s;}
.hero-line-wrap:nth-child(4) .hero-line{-webkit-animation-delay:.55s;animation-delay:.55s;}
.hero-line-wrap:nth-child(5) .hero-line{-webkit-animation-delay:.65s;animation-delay:.65s;color:var(--accent-text);font-family:var(--ff-serif);text-transform:none;font-size:clamp(2.4rem,5vw,5.8rem);}

.hero-bottom-block{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  gap:clamp(16px,2.5vh,24px);
  opacity:0;
  -webkit-animation:fadeIn .8s .78s both;
  animation:fadeIn .8s .78s both;
}
.hero-sub{font-size:clamp(.82rem,1.4vw,.98rem);line-height:1.85;color:var(--fg-dim);max-width:440px;}
.hero-cta-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:clamp(14px,2vw,22px);-ms-flex-wrap:wrap;flex-wrap:wrap;}

.btn-hero{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;font-size:clamp(.62rem,1.1vw,.72rem);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--accent);padding:clamp(13px,2vw,18px) clamp(24px,4vw,40px);position:relative;overflow:hidden;-webkit-transition:color .3s,gap .22s;transition:color .3s,gap .22s;color:var(--fg);white-space:nowrap;background:var(--accent-faint);}
.btn-hero::before{content:'';position:absolute;inset:0;background:var(--accent);-webkit-transform:translateX(-101%);transform:translateX(-101%);-webkit-transition:-webkit-transform .42s var(--ease);transition:transform .42s var(--ease);z-index:-1;}
.btn-hero:hover{gap:20px;color:#000;}
.btn-hero:hover::before{-webkit-transform:translateX(0);transform:translateX(0);}

.btn-hero-ghost{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:clamp(.62rem,1.1vw,.72rem);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);border-bottom:1px solid var(--line-bright);padding-bottom:3px;white-space:nowrap;-webkit-transition:color .22s,border-color .22s;transition:color .22s,border-color .22s;}
.btn-hero-ghost:hover{color:var(--fg);border-color:var(--fg-dim);}

.hero-scroll-indicator{position:absolute;right:var(--pad);bottom:clamp(32px,6vh,64px);z-index:3;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;opacity:0;-webkit-animation:fadeIn .8s 1.1s both;animation:fadeIn .8s 1.1s both;}
.scroll-track{width:1px;height:64px;background:rgba(237,234,228,.12);position:relative;overflow:hidden;}
.scroll-thumb{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  background:var(--accent);

  animation: scrollThumb 2.8s linear infinite;

  will-change: transform;
  transform: translateZ(0);
}
@-webkit-keyframes scrollThumb{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}50%{-webkit-transform:translateY(100%);transform:translateY(100%)}100%{-webkit-transform:translateY(200%);transform:translateY(200%)}}
@keyframes scrollThumb{0%{transform:translateY(-100%)}50%{transform:translateY(100%)}100%{transform:translateY(200%)}}
.hero-scroll-indicator>span{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text);opacity:.6;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;}


/* ─── SHARED ─── */
.section-label{display:block;font-size:clamp(.58rem,1vw,.62rem);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:clamp(14px,2vw,22px);}
.section-title{font-family:var(--ff-head);font-size:clamp(2.4rem,6.5vw,8rem);line-height:.92;letter-spacing:.03em;text-transform:uppercase;color:var(--fg);}
.serif-accent{font-family:var(--ff-serif);font-weight:300;font-style:italic;color:var(--accent-text);text-transform:none;letter-spacing:.02em;}

/* ── rv : opacity + transform UNIQUEMENT (pas de width/height/margin) ── */
.rv{
  opacity:0;
  -webkit-transform:translateY(32px);transform:translateY(32px);
  -webkit-transition:opacity .9s var(--ease),-webkit-transform .9s var(--ease);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  /* will-change déclaré ici → le navigateur réserve le layer avant l'animation */
  will-change:opacity,transform;
}
.rv.in{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}

/* ─── STATEMENT ─── */
.statement-section{
  position:relative;z-index:2;
  padding:var(--sp-xl) var(--pad);
  border-top:1px solid var(--line-pink);
  overflow:hidden;
  contain:layout style;
}
.statement-inner{max-width:1360px;margin:0 auto;display:-ms-grid;display:grid;grid-template-columns:clamp(120px,14vw,180px) 1fr clamp(160px,18vw,240px);gap:clamp(36px,5vw,64px);-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.statement-label-col{-ms-flex-item-align:start;align-self:start;padding-top:clamp(12px,2vw,24px);}
.statement-tag{font-size:clamp(.58rem,1vw,.65rem);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-dim);padding:8px 18px;display:inline-block;white-space:nowrap;}
.statement-content-col{grid-column:2;grid-row:1;}

.statement-title{
  font-family:var(--ff-head);
  font-size:clamp(4rem,11vw,14rem);
  line-height:.88;letter-spacing:.02em;text-transform:uppercase;color:var(--fg);
}

/* st-line : le wrapper overflow:hidden est sur .statement-title lui-même
   → les lignes sont clippées DANS le titre, aucun layout shift externe */
.st-line{
  display:block;
  overflow:hidden; /* clip local */
}
/* Inner span qui glisse */
.st-line-inner{
  display:block;
  -webkit-transform:translateY(110%);transform:translateY(110%);
  opacity:0;
  -webkit-transition:-webkit-transform 1.1s var(--ease),opacity .7s;
  transition:transform 1.1s var(--ease),opacity .7s;
  will-change:transform,opacity;
}
.st-line.in .st-line-inner{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;}
.st-line:nth-child(2) .st-line-inner{-webkit-transition-delay:.12s;transition-delay:.12s;}
.st-line:nth-child(3) .st-line-inner{-webkit-transition-delay:.22s;transition-delay:.22s;}

.statement-sub{
  font-size:clamp(.80rem,1.4vw,1rem);line-height:1.85;color:var(--fg-dim);
  margin-top:clamp(28px,4vw,44px);max-width:480px;
  opacity:0;
  -webkit-transition:opacity .9s .5s var(--ease);
  transition:opacity .9s .5s var(--ease);
  /* PAS de transform → zéro layout shift */
}
.statement-sub.in{opacity:1;}

/* ─── IMAGE STATEMENT ─── */
.statement-visual{
  grid-column:3;grid-row:1;position:relative;overflow:hidden;
  border:1px solid var(--line-bright);
  /* aspect-ratio réserve l'espace → 0 CLS */
  aspect-ratio:3/4;
  width:100%;
  -ms-flex-item-align:center;align-self:center;
  -ms-grid-column-align:end;justify-self:end;
}
.statement-img{
  width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;
  opacity:.82;
  -webkit-filter:brightness(.90) saturate(.85);
  filter:brightness(.90) saturate(.85);
  -webkit-transition:opacity .6s var(--ease),-webkit-transform 1.2s var(--ease),-webkit-filter .6s var(--ease);
  transition:opacity .6s var(--ease),transform 1.2s var(--ease),filter .6s var(--ease);
  display:block;
  /* Empêche le navigateur de recalculer le layout à chaque frame */
  will-change:transform,opacity,filter;
}
.statement-section:hover .statement-img{
  opacity:.95;
  -webkit-filter:brightness(1) saturate(1);
  filter:brightness(1) saturate(1);
  -webkit-transform:scale(1.03);
  transform:scale(1.03);
}
.statement-img-label{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:.50rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);border:1px solid var(--accent-dim);padding:4px 10px;background:rgba(3,3,10,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;}

/* ─── ABOUT ─── */
.about-section{position:relative;z-index:2;padding:var(--sp-xl) 0;border-top:1px solid var(--line-pink);contain:layout style;}
.about-wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad);display:-ms-grid;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(48px,8vw,100px);-webkit-box-align:start;-ms-flex-align:start;align-items:start;}
.about-left .section-title{margin-bottom:clamp(32px,5vw,56px);}
.about-visual{
  position:relative;overflow:hidden;border:1px solid var(--line-pink);
  /* aspect-ratio pour réserver la hauteur → 0 CLS */
  aspect-ratio:4/3;
}
.about-visual-video{
  position:absolute;inset:0;width:100%;height:100%;
  -o-object-fit:cover;object-fit:cover;z-index:1;opacity:.88;
  pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
.about-visual-bg{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 45% 55%,rgba(14,20,34,.30) 0%,rgba(3,3,10,.42) 65%,transparent 100%);pointer-events:none;will-change:transform;}
.about-grid-lines{position:absolute;inset:0;z-index:3;background-image:linear-gradient(rgba(224,64,251,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(224,64,251,.08) 1px,transparent 1px);background-size:52px 52px;opacity:.4;pointer-events:none;}
.about-visual-orb{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(224,64,251,.08) 0%,transparent 70%);-webkit-animation:orbPulse 5s ease-in-out infinite;animation:orbPulse 5s ease-in-out infinite;z-index:4;}
@-webkit-keyframes orbPulse{0%,100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:.6}50%{-webkit-transform:translate(-50%,-50%) scale(1.15);transform:translate(-50%,-50%) scale(1.15);opacity:1}}
@keyframes orbPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
.about-year{position:absolute;bottom:8px;right:12px;font-family:var(--ff-head);font-size:clamp(3rem,8vw,6.5rem);letter-spacing:.05em;color:rgba(224,64,251,.18);line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:5;}
.about-visual-label{position:absolute;top:14px;left:14px;font-size:clamp(.52rem,1vw,.58rem);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);border:1px solid var(--accent-dim);padding:5px 12px;z-index:6;background:rgba(3,3,10,.6);}

.about-video-volume{position:absolute;bottom:14px;left:14px;z-index:10;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:9px;background:rgba(3,3,10,.82);border:1px solid var(--accent-dim);padding:7px 12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;-webkit-transition:opacity .35s;transition:opacity .35s;}
.about-visual:hover .about-video-volume{opacity:1;}
.about-video-volume .vol-icon{color:var(--accent-text);-ms-flex-negative:0;flex-shrink:0;pointer-events:none;}
.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:72px;height:2px;background:rgba(224,64,251,.3);outline:none;cursor:pointer;border-radius:2px;}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--accent);cursor:pointer;-webkit-transition:-webkit-transform .15s;transition:transform .15s;}
.volume-slider::-webkit-slider-thumb:hover{-webkit-transform:scale(1.25);transform:scale(1.25);}
.volume-slider::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}
.volume-slider::-ms-thumb{width:11px;height:11px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}

.about-right{padding-top:clamp(0px,8vw,88px);}
.about-text{font-size:clamp(.86rem,1.5vw,1.06rem);line-height:1.9;color:var(--fg-dim);margin-bottom:clamp(40px,6vw,72px);}
.stats-grid{display:-ms-grid;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,40px);}
.stat-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:6px;}
.stat-num{font-family:var(--ff-head);font-size:clamp(2rem,4.5vw,4.6rem);letter-spacing:.03em;color:var(--fg);line-height:1;}
.stat-item sup{font-size:clamp(.7rem,1.2vw,1rem);color:var(--accent);vertical-align:super;font-family:var(--ff-body);}
.stat-label{font-size:clamp(.56rem,1vw,.62rem);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);}

/* ─── WORK ─── */
.work-section{position:relative;z-index:2;contain:layout style;}
.work-header{max-width:1360px;margin:0 auto;padding:var(--sp-xl) var(--pad) clamp(40px,6vw,72px);border-top:1px solid var(--line-pink);}
.work-panel{position:relative;border-top:1px solid var(--line-pink);overflow:hidden;}
.work-panel-inner{max-width:1360px;margin:0 auto;padding:clamp(48px,8vw,100px) var(--pad);display:-ms-grid;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.work-panel-inner--flip{grid-template-columns:1fr 1.1fr;}

.work-panel-visual{
  position:relative;overflow:hidden;border-radius:2px;
  /* aspect-ratio réserve la hauteur avant chargement image */
  aspect-ratio:4/3;
}
.work-visual-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 42% 55%,hsl(calc(var(--h)),30%,18%) 0%,hsl(calc(var(--h)),16%,7%) 55%,#060606 100%);border:1px solid rgba(255,255,255,.05);-webkit-transition:-webkit-transform 1.3s var(--ease);transition:transform 1.3s var(--ease);will-change:transform;}
.work-panel:hover .work-visual-bg{-webkit-transform:scale(1.04);transform:scale(1.04);}
.work-visual-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(224,64,251,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(224,64,251,.08) 1px,transparent 1px);background-size:40px 40px;opacity:0;-webkit-transition:opacity .6s var(--ease);transition:opacity .6s var(--ease);}
.work-panel:hover .work-visual-lines{opacity:.6;}
.work-visual-num{position:absolute;bottom:clamp(12px,2vw,24px);right:clamp(14px,2.5vw,28px);font-family:var(--ff-head);font-size:clamp(2.5rem,6vw,5rem);letter-spacing:.04em;color:rgba(255,255,255,.04);line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.work-visual-img{
  position:absolute;inset:0;width:100%;height:100%;
  -o-object-fit:cover;object-fit:cover;z-index:1;
  -webkit-transition:-webkit-transform 1.3s var(--ease),opacity .6s;
  transition:transform 1.3s var(--ease),opacity .6s;
  opacity:.75;will-change:transform,opacity;
}
.work-panel:hover .work-visual-img{-webkit-transform:scale(1.04);transform:scale(1.04);opacity:1;}
.work-visual-bg{z-index:0;}.work-visual-lines{z-index:2;}.work-visual-num{z-index:3;}

.work-panel-text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}
.work-tag-pill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;width:-webkit-fit-content;width:fit-content;font-size:clamp(.58rem,1vw,.66rem);letter-spacing:.10em;color:var(--accent-text);border:1px solid var(--accent-dim);padding:6px 16px 6px 10px;margin-bottom:clamp(16px,3vw,28px);background:var(--accent-faint);}
.work-tag-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);-ms-flex-negative:0;flex-shrink:0;}
.work-title{font-family:var(--ff-head);font-size:clamp(2.4rem,5.5vw,7.5rem);line-height:.9;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);margin-bottom:14px;}
.work-sub{font-size:clamp(.78rem,1.3vw,1rem);color:var(--fg-dim);line-height:1.75;margin-bottom:24px;}
.work-divider{width:48px;height:1px;background:var(--accent-dim);margin-bottom:24px;}
.work-desc{font-size:clamp(.78rem,1.2vw,.84rem);line-height:1.8;color:var(--fg-dim);max-width:380px;margin-bottom:clamp(24px,4vw,36px);}
.work-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;font-size:clamp(.60rem,1vw,.68rem);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent-dim);padding-bottom:4px;-webkit-transition:gap .22s,border-color .22s;transition:gap .22s,border-color .22s;width:-webkit-fit-content;width:fit-content;}
.work-link:hover{gap:16px;border-color:var(--accent);}
.work-link svg{-webkit-transition:-webkit-transform .22s;transition:transform .22s;-ms-flex-negative:0;flex-shrink:0;}
.work-link:hover svg{-webkit-transform:translateX(4px);transform:translateX(4px);}
.work-tags-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;}
.work-chip{font-size:clamp(.58rem,1vw,.63rem);letter-spacing:.08em;color:var(--fg-dim);border:1px solid rgba(224,64,251,.20);padding:5px 14px;-webkit-transition:border-color .22s,color .22s,background .22s;transition:border-color .22s,color .22s,background .22s;}
.work-panel:hover .work-chip{border-color:var(--accent-dim);color:var(--accent-text);background:var(--accent-faint);}

.work-panel--soon{background:rgba(224,64,251,.03);}
.soon-inner{max-width:1360px;margin:0 auto;padding:clamp(48px,8vw,80px) var(--pad);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:40px;position:relative;overflow:hidden;}
.soon-badge{position:absolute;top:clamp(16px,3vw,32px);right:var(--pad);font-size:clamp(.54rem,1vw,.60rem);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-dim);padding:5px 14px;background:var(--accent-faint);}
.soon-bg-text{position:absolute;right:var(--pad);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-family:var(--ff-head);font-size:clamp(4rem,14vw,14rem);color:rgba(224,64,251,.06);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1;}
.soon-title{font-family:var(--ff-head);font-size:clamp(2rem,6vw,7.5rem);letter-spacing:.04em;line-height:.92;color:var(--fg);margin:18px 0 14px;}
.soon-title .serif-accent{color:var(--accent-text);}
.soon-desc{font-size:clamp(.76rem,1.2vw,.82rem);color:var(--fg-dim);}
.soon-dots{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;position:relative;z-index:1;}
.soon-dots span{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);

  animation: dotPulse 2.4s linear infinite;

  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.soon-dots span:nth-child(2){-webkit-animation-delay:.22s;animation-delay:.22s;}.soon-dots span:nth-child(3){-webkit-animation-delay:.44s;animation-delay:.44s;}
@-webkit-keyframes dotPulse{0%,100%{opacity:.3;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(1.5);transform:scale(1.5)}}
@keyframes dotPulse{
  0%{opacity:.3;transform:scale(1)}
  50%{opacity:1;transform:scale(1.4)}
  100%{opacity:.3;transform:scale(1)}
}

/* ─── SERVICES ─── */
.services-section{position:relative;z-index:2;border-top:1px solid var(--line-pink);contain:layout style;}
.services-header{max-width:1360px;margin:0 auto;padding:var(--sp-xl) var(--pad) clamp(36px,5vw,72px);}
.services-list{max-width:1360px;margin:0 auto;padding:0 var(--pad) var(--sp-xl);}
.svc-row{
  display:-ms-grid;display:grid;
  grid-template-columns:clamp(40px,5vw,60px) 1fr clamp(36px,4vw,48px);
  gap:0 clamp(20px,4vw,48px);
  padding:clamp(24px,4vw,40px) 0;
  border-top:1px solid rgba(224,64,251,.12);
  -webkit-box-align:start;-ms-flex-align:start;align-items:start;
  -webkit-transition:padding-left .42s var(--ease),border-color .28s;
  transition:padding-left .42s var(--ease),border-color .28s;
  position:relative;overflow:hidden;cursor:default;
  /* will-change sur padding → navigateur anticipe */
  will-change:padding-left;
}
.svc-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transition:-webkit-transform .42s var(--ease);transition:transform .42s var(--ease);-webkit-transform-origin:bottom;transform-origin:bottom;}
.svc-row:hover{padding-left:clamp(12px,2vw,18px);border-color:var(--accent-dim);}
.svc-row:hover::before{-webkit-transform:scaleY(1);transform:scaleY(1);}
.svc-num{font-family:var(--ff-head);font-size:clamp(.85rem,1.5vw,1rem);letter-spacing:.08em;color:var(--accent);padding-top:5px;}
.svc-title{font-family:var(--ff-head);font-size:clamp(1.3rem,2.8vw,2.8rem);letter-spacing:.04em;text-transform:uppercase;color:var(--fg);line-height:1;}
.svc-desc{font-size:clamp(.76rem,1.2vw,.82rem);line-height:1.8;color:var(--fg-dim);padding-top:4px;}
.svc-arrow-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding-top:6px;}
.svc-arrow{color:rgba(237,234,228,.25);-webkit-transition:color .28s,-webkit-transform .38s var(--ease);transition:color .28s,transform .38s var(--ease);}
.svc-row:hover .svc-arrow{color:var(--accent);-webkit-transform:translateX(8px) rotate(-45deg);transform:translateX(8px) rotate(-45deg);}

/* ─── CONTACT ─── */
.contact-section{
  position:relative;z-index:2;border-top:1px solid var(--line-pink);
  padding:var(--sp-xl) var(--pad);text-align:center;overflow:hidden;
  contain:layout style;
}
.contact-inner{position:relative;z-index:1;}
.contact-section .section-label{text-align:left;}
.contact-title{
  font-family:var(--ff-head);
  font-size:clamp(4rem,16vw,20rem);
  line-height:.88;letter-spacing:.02em;text-transform:uppercase;
  margin:clamp(16px,3vw,20px) 0 clamp(20px,4vw,36px);
}
/* ct-line : toujours visible, animé en opacity+transform SEULEMENT
   (plus de translateY énorme qui cause CLS) */
.ct-line{
  display:block;
  opacity:1; /* visible par défaut = 0 CLS garanti */
  -webkit-transform:none;transform:none;
}
/* Classe animée ajoutée par JS via IntersectionObserver */
.ct-line--animate{
  opacity:0;
  -webkit-transform:translateY(24px);transform:translateY(24px);
  will-change:opacity,transform;
}
.ct-line--animate.in{
  opacity:1;
  -webkit-transform:translateY(0);transform:translateY(0);
  -webkit-transition:opacity .9s var(--ease),-webkit-transform .9s var(--ease);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}

.contact-sub{font-size:clamp(.88rem,1.5vw,1.02rem);color:var(--fg-dim);margin-bottom:clamp(36px,6vw,56px);}
.contact-email{display:inline-block;font-size:clamp(.9rem,2.2vw,1.8rem);font-weight:300;color:var(--fg);position:relative;margin-bottom:clamp(40px,6vw,64px);-webkit-transition:color .22s;transition:color .22s;word-break:break-all;}
.contact-email::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--line-bright);-webkit-transition:background .28s;transition:background .28s;}
.contact-email:hover{color:var(--accent);}
.contact-email:hover::after{background:var(--accent);}
.contact-socials{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:24px;}
.contact-social{font-size:clamp(.62rem,1.1vw,.68rem);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);-webkit-transition:color .22s;transition:color .22s;}
.contact-social:hover{color:var(--accent-text);}
.contact-sep{color:var(--accent-dim);}
.contact-bg-text{
  position:absolute;bottom:-6%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);
  font-family:var(--ff-head);font-size:clamp(8rem,22vw,26rem);
  color:rgba(224,64,251,.06);pointer-events:none;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  white-space:nowrap;letter-spacing:.08em;
  /* Ce texte était le LCP element — on s'assure qu'il ne bouge pas */
  will-change:auto;
}

/* ─── FOOTER ─── */
.footer{border-top:1px solid rgba(224,64,251,.12);padding:clamp(18px,3vw,28px) var(--pad);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:clamp(.58rem,1vw,.66rem);letter-spacing:.08em;color:rgba(237,234,228,.28);position:relative;z-index:2;gap:12px;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.footer-mid{color:var(--accent-text);opacity:.5;}

/* ─── KEYFRAMES ─── */
/* fadeUp remplacé par fadeIn (opacity seule) pour zéro CLS */
@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* slideUp : translate uniquement dans un overflow:hidden → 0 CLS */
@-webkit-keyframes slideUp{from{-webkit-transform:translateY(110%);transform:translateY(110%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL
═══════════════════════════════════════════════════════════════ */
#hscroll-wrapper{position:relative;z-index:2;}
#hscroll-spacer{display:block;pointer-events:none;}

.hscroll-section{
  position:-webkit-sticky;
  position:sticky;
  top:0;left:0;width:100%;
  height:100vh;height:100svh;
  border-top:1px solid var(--line-pink);
  background:var(--bg);
  z-index:2;
}
@supports not (position:sticky){
  .hscroll-section{position:relative;height:auto;overflow:visible;}
  #hscroll-spacer{display:none;}
}
.hscroll-sticky{position:absolute;inset:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;}
.hscroll-header{position:absolute;top:0;left:0;right:0;padding:clamp(24px,4vw,48px) var(--pad) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;z-index:2;}
.hscroll-header .section-label{margin-bottom:0;}
.hscroll-counter{font-family:var(--ff-head);font-size:clamp(1rem,2vw,1.4rem);letter-spacing:.1em;color:rgba(237,234,228,.18);}
.hscroll-counter em{color:var(--accent);font-style:normal;}
.hscroll-track{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 var(--pad);gap:clamp(24px,4vw,48px);will-change:transform;will-change: transform;
transform: translateZ(0);}
.hscroll-card{-ms-flex-negative:0;flex-shrink:0;width:clamp(280px,38vw,560px);border:1px solid rgba(224,64,251,.12);padding:clamp(32px,4vw,52px);background:rgba(224,64,251,.02);position:relative;overflow:hidden;-webkit-transition:border-color .4s var(--ease);transition:border-color .4s var(--ease);}
.hscroll-card::before{content:'';position:absolute;top:0;left:0;width:2px;height:0;background:var(--accent);-webkit-transition:height .6s var(--ease);transition:height .6s var(--ease);}
.hscroll-card.active{border-color:var(--accent-dim);}
.hscroll-card.active::before{height:100%;}
.hcard-num{font-family:var(--ff-head);font-size:clamp(3rem,6vw,7rem);line-height:1;letter-spacing:.04em;color:rgba(224,64,251,.20);margin-bottom:clamp(16px,3vw,28px);display:block;}
.hcard-title{font-family:var(--ff-head);font-size:clamp(1.4rem,2.8vw,2.6rem);letter-spacing:.04em;text-transform:uppercase;color:var(--fg);line-height:1;margin-bottom:16px;}
.hcard-desc{font-size:clamp(.76rem,1.2vw,.86rem);line-height:1.8;color:var(--fg-dim);max-width:380px;}
.hcard-tag{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;font-size:clamp(.58rem,1vw,.64rem);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:clamp(20px,3vw,32px);}
.hcard-tag::before{content:'';width:20px;height:1px;background:var(--accent);-ms-flex-negative:0;flex-shrink:0;}
.hscroll-progress-bar{position:absolute;bottom:0;left:0;height:1px;background:var(--line-bright);width:100%;}
.hscroll-progress-fill{height:100%;background:var(--accent);width:0%;will-change:width;}

.hscroll-swipe-hint{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;position:absolute;bottom:clamp(20px,4vw,36px);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:3;-webkit-animation:hintFade 3.5s 1.2s both;animation:hintFade 3.5s 1.2s both;pointer-events:none;}
.hscroll-swipe-hint span{font-size:.58rem;letter-spacing:.20em;text-transform:uppercase;color:rgba(237,234,228,.35);white-space:nowrap;}
.swipe-arrow{display:-webkit-box;display:-ms-flexbox;display:flex;gap:3px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.swipe-arrow i{
  display:block;
  width:5px;
  height:5px;
  border-right:1px solid var(--accent-dim);
  border-bottom:1px solid var(--accent-dim);

  transform:rotate(-45deg) translateZ(0);

  animation: swipeChev 1.4s linear infinite;

  will-change: transform, opacity;
}
.swipe-arrow i:nth-child(3){-webkit-animation-delay:.30s;animation-delay:.30s;opacity:.3;}
@-webkit-keyframes swipeChev{0%,100%{opacity:.2;-webkit-transform:rotate(-45deg) translateX(0);transform:rotate(-45deg) translateX(0)}50%{opacity:1;-webkit-transform:rotate(-45deg) translateX(3px);transform:rotate(-45deg) translateX(3px)}}
@keyframes swipeChev{0%,100%{opacity:.2;transform:rotate(-45deg) translateX(0)}50%{opacity:1;transform:rotate(-45deg) translateX(3px)}}
@-webkit-keyframes hintFade{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes hintFade{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}

.hscroll-dots{display:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:8px;padding:16px 0 24px;}
.hscroll-dot{width:20px;height:2px;background:var(--line-bright);-webkit-transition:background .3s,width .3s;transition:background .3s,width .3s;border-radius:2px;}
.hscroll-dot.active{background:var(--accent);width:32px;}

/* ─── Extra reveals — opacity+transform uniquement ─── */
.drift-left{opacity:0;-webkit-transform:translateX(-28px);transform:translateX(-28px);-webkit-transition:opacity .9s var(--ease),-webkit-transform .9s var(--ease);transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:opacity,transform;}
.drift-right{opacity:0;-webkit-transform:translateX(28px);transform:translateX(28px);-webkit-transition:opacity .9s var(--ease),-webkit-transform .9s var(--ease);transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:opacity,transform;}
.drift-left.in,.drift-right.in{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
.clip-reveal{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);-webkit-transition:-webkit-clip-path 1.2s var(--ease);transition:clip-path 1.2s var(--ease);}
.clip-reveal.in{-webkit-clip-path:inset(0 0% 0 0);clip-path:inset(0 0% 0 0);}
.animated-line{-webkit-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:-webkit-transform 1s var(--ease);transition:transform 1s var(--ease);}
.animated-line.in{-webkit-transform:scaleX(1);transform:scaleX(1);}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media(max-width:1280px){
  .statement-inner{grid-template-columns:clamp(110px,12vw,150px) 1fr clamp(140px,17vw,210px);gap:clamp(28px,4vw,52px);}
  .statement-title{font-size:clamp(3.8rem,10vw,12rem);}
}
@media(max-width:1100px){
  .statement-title{font-size:clamp(3.5rem,9vw,10rem);}
  .work-panel-inner{grid-template-columns:1fr;gap:36px;}
  .work-panel-inner--flip{grid-template-columns:1fr;}
  .work-panel-inner--flip .work-panel-visual{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;}
  .svc-row{grid-template-columns:clamp(36px,4vw,52px) 1fr clamp(32px,4vw,44px);}
  .svc-desc{grid-column:2;grid-row:2;}
}
@media(max-width:900px){
  .nav-links{display:none;position:fixed;top:0;right:0;width:min(76vw,320px);height:100vh;background:rgba(3,3,10,.97);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:80px 44px;gap:30px;border-left:1px solid var(--line-pink);z-index:600;}
  .nav-links.open{display:-webkit-box;display:-ms-flexbox;display:flex;}
  .nav-links a{font-size:1.1rem;}
  .nav-cta{display:none;}
  .nav-burger{display:-webkit-box;display:-ms-flexbox;display:flex;}
  .statement-inner{grid-template-columns:1fr clamp(130px,28vw,190px)!important;grid-template-rows:auto auto;gap:20px 28px;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}
  .statement-label-col{grid-column:1/-1;grid-row:1;padding-top:0;}
  .statement-content-col{grid-column:1;grid-row:2;-ms-flex-item-align:start;align-self:start;}
  .statement-visual{grid-column:2;grid-row:2;aspect-ratio:3/4;width:100%;-ms-flex-item-align:start;align-self:start;-ms-grid-column-align:end;justify-self:end;}
  .statement-title{font-size:clamp(2.8rem,9vw,6rem);}
  .statement-sub{margin-top:clamp(16px,2.5vw,24px);}
  .about-wrap{grid-template-columns:1fr;gap:40px;}
  .about-right{padding-top:0;}
  .stats-grid{grid-template-columns:repeat(3,auto);-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;}
  .work-panel-inner,.work-panel-inner--flip{padding:clamp(40px,6vw,64px) var(--pad);}
  .soon-inner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:24px;}
  .soon-bg-text{display:none;}
}
@media(max-width:768px){
  #hscroll-spacer{display:none!important;}
  .hscroll-section{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;}
  .hscroll-sticky{position:relative!important;inset:auto!important;height:auto!important;overflow:visible!important;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important;-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important;}
  .hscroll-header{position:relative!important;padding:clamp(32px,6vw,48px) var(--pad) clamp(20px,4vw,28px);}
  .hscroll-track{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0 var(--pad) clamp(24px,5vw,36px);padding-right:calc(var(--pad) + 20px);gap:clamp(16px,4vw,24px);scrollbar-width:none;will-change:auto!important;-webkit-transform:none!important;transform:none!important;}
  .hscroll-track::-webkit-scrollbar{display:none;}
  .hscroll-card{scroll-snap-align:start;width:clamp(260px,78vw,340px);}
  .hscroll-card:last-child{scroll-snap-align:end;}
  .hscroll-swipe-hint{display:-webkit-box;display:-ms-flexbox;display:flex;}
  .hscroll-dots{display:-webkit-box;display:-ms-flexbox;display:flex;}
  .hscroll-progress-bar{position:relative;margin:0 var(--pad);}
}
@media(max-width:640px){
  .hero-scroll-indicator{display:none;}
  .hero-content{text-align:left!important;-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important;}
  .hero-sub{max-width:100%;}
  .hero-title{font-size:clamp(3.2rem,11vw,4.8rem);}
  .hero-line-wrap:nth-child(2) .hero-line,.hero-line-wrap:nth-child(5) .hero-line{font-size:clamp(2.4rem,9vw,3.6rem);}
  .hero-cta-row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:14px;}
  .hero-eyebrow{-ms-flex-wrap:wrap;flex-wrap:wrap;}
  .statement-inner{grid-template-columns:1fr!important;gap:20px;}
  .statement-label-col{grid-column:1;grid-row:1;}
  .statement-content-col{grid-column:1;grid-row:2;}
  .statement-visual{display:none;}
  .statement-title{font-size:clamp(3rem,13vw,5.5rem);}
  .statement-sub{max-width:100%;}
  .about-visual{aspect-ratio:16/9;}
  .stats-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .work-panel-inner{padding:40px var(--pad);}
  .work-title{font-size:clamp(2rem,9vw,3.5rem);}
  .svc-row{grid-template-columns:clamp(32px,6vw,44px) 1fr clamp(28px,5vw,40px);grid-template-rows:auto auto;gap:6px 16px;}
  .svc-desc{grid-column:2;grid-row:2;}
  .svc-title{font-size:clamp(1.1rem,5vw,1.8rem);}
  .contact-title{font-size:clamp(3rem,13vw,7rem);}
  .section-title{font-size:clamp(2rem,9vw,5rem);}
  .footer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:6px;text-align:center;}
  .footer-mid{display:none;}
  .soon-badge{position:static;display:inline-block;margin-bottom:12px;}
  .soon-title{font-size:clamp(2rem,10vw,4rem);}
}
@media(max-width:400px){
  .hero-title{font-size:clamp(2.8rem,12vw,3.6rem);}
  .hero-line-wrap:nth-child(2) .hero-line,.hero-line-wrap:nth-child(5) .hero-line{font-size:clamp(2.2rem,10vw,3rem);}
  .stats-grid{grid-template-columns:1fr;}
  .work-title{font-size:clamp(1.8rem,9vw,3rem);}
  .statement-title{font-size:clamp(2.6rem,12vw,4rem);}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-transition-duration:.01ms!important;transition-duration:.01ms!important;}
  #three-canvas{opacity:0.5;}
  #hscroll-spacer{display:none;}
  .hscroll-section{position:relative!important;top:auto!important;height:auto;}
  .hscroll-sticky{position:relative;height:auto;}
  .hscroll-track{overflow-x:auto;}
  .hero-line,.rv,.st-line-inner,.drift-left,.drift-right,.clip-reveal{opacity:1;-webkit-transform:none;transform:none;-webkit-clip-path:none;clip-path:none;}
}