/* =========================================================================
   TOKENS
   ========================================================================= */
:root{
  /* Palette — Nuit & Laiton */
  --ink:      #0A1628;   /* navy base */
  --ink-2:    #0C1A30;
  --ink-3:    #12233A;   /* raised navy surface */
  --ink-4:    #1C3352;   /* borders / hover on dark */
  /* L'accent est défini plus bas, par variante (voir ACCENTS) */
  --ivory:    #F6F3EC;   /* light section bg */
  --ivory-2:  #FCFAF5;   /* card bg on ivory */
  --paper:    #FFFFFF;
  --slate:    #59636F;   /* muted text on light */
  --ink-text: #10203A;   /* headings on light */
  --cream:    #ECE7DB;   /* body text on dark */
  --cream-mut:#9AA7B8;   /* muted text on dark */

  /* Dégradé métallique : la bande claire au centre fait la différence entre
     un aplat coloré et une vraie surface polie qui accroche la lumière. */
  --gold-grad: linear-gradient(118deg, var(--gold-dk) 0%, var(--gold) 26%,
                var(--gold-hi) 47%, var(--gold) 66%, var(--gold-dk) 100%);
  --line-dark: rgba(200,164,93,.18);
  --line-light: rgba(16,32,58,.12);
  --shadow-lift: 0 24px 60px -28px rgba(8,18,34,.55);
  --shadow-card: 0 18px 44px -30px rgba(8,18,34,.35);

  /* Fluid type scale (base 16px, ~1.25) */
  --fs--1: clamp(.78rem, .77rem + .05vw, .82rem);
  --fs-0:  clamp(1rem, .97rem + .12vw, 1.06rem);
  --fs-1:  clamp(1.18rem, 1.1rem + .35vw, 1.35rem);
  --fs-2:  clamp(1.45rem, 1.3rem + .7vw, 1.8rem);
  --fs-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --fs-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
  --fs-hero: clamp(2.9rem, 1.9rem + 4.6vw, 5.6rem);

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 22px;

  /* MOTION — trois durées, pas dix improvisées.
     --t-fast : retours d'interaction (survol, focus) ; doit être imperceptible
     --t-base : changements d'état visibles (bascule, apparition)
     --t-slow : entrées amples, réservées aux moments choisis
     Les courbes portent l'intention : on décélère à l'arrivée, on accélère
     au départ. Une seule courbe pour tout, c'est ce qui rend la motion plate. */
  --t-fast: .2s;
  --t-base: .4s;
  --t-slow: .7s;
  --ease:      cubic-bezier(.22,.61,.36,1);  /* décélération — entrées */
  --ease-out:  cubic-bezier(.55,.06,.68,.19); /* accélération — sorties */
  --ease-soft: cubic-bezier(.4,0,.2,1);       /* déplacement neutre */
}

/* =========================================================================
   ACCENT — laiton. --gold-hi est la bande claire du dégradé métallique ;
   --gold-ink la version assombrie réservée au TEXTE sur fond clair (4,83:1).
   ========================================================================= */
:root{
  --gold-dk:#A67C2E; --gold:#C8A45D; --gold-lt:#E6CC86; --gold-hi:#F5E7C0; --gold-ink:#8A641F;
}

/* =========================================================================
   FILET DE SÉCURITÉ D'AFFICHAGE
   Plusieurs blocs démarrent invisibles et ne sont révélés que par le script
   (entrées au défilement, mise au point des images, frappe du titre). Si
   assets/js/site.js ne se charge pas — réseau lent, bloqueur de publicité,
   antivirus, proxy d'entreprise — ces blocs resteraient masqués et la page
   paraîtrait vide.
   Cette animation les rend visibles au bout de 3 s quoi qu'il arrive. Quand le
   script fonctionne, il révèle bien avant et annule ce repli : l'effet voulu
   reste intact, mais une page vide devient impossible.
   ========================================================================= */
@keyframes failsafe-show{ to{ opacity:1; transform:none; filter:none; } }

/* =========================================================================
   BASE / RESET
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* Décale les cibles d'ancre et le focus clavier sous le header fixe (76px)
     — WCAG 2.2 AA « Focus Not Obscured ». */
  scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--fs-0);
  line-height:1.65;
  color:var(--ink-text);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0;
  font-optical-sizing:auto;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:var(--ink); }

/* =========================================================================
   LAYOUT HELPERS
   ========================================================================= */
.wrap{ width:min(100% - 40px, var(--maxw)); margin-inline:auto; }
.section{ padding-block: clamp(64px, 9vw, 128px); position:relative; }
.section--dark{ background:var(--ink); color:var(--cream); }
.section--ink2{ background:var(--ink-2); color:var(--cream); }
.section--light{ background:var(--ivory); color:var(--ink-text); }
.section--paper{ background:var(--paper); color:var(--ink-text); }

/* Bas-de-casse plutôt que capitales très espacées : le libellé tracké au-dessus
   de chaque titre est le tic typographique le plus daté et le plus reconnaissable
   des pages générées. Il ne subsiste que là où il apporte une information. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Manrope", sans-serif;
  font-size:var(--fs-0); font-weight:600; letter-spacing:.01em;
  color:var(--gold-ink);
}
.section--dark .eyebrow, .section--ink2 .eyebrow{ color:var(--gold-lt); }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.8; }

.lead{ font-size:var(--fs-1); color:var(--slate); max-width:60ch; }
.section--dark .lead, .section--ink2 .lead{ color:var(--cream-mut); }

.gold-text{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.h-rule{ height:1px; background:var(--line-light); border:0; margin:0; }
.section--dark .h-rule{ background:var(--line-dark); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:var(--fs-0);
  padding:15px 26px; border-radius:999px;
  /* Un survol doit répondre, pas s'étirer : 200 ms sur une courbe neutre. */
  transition:transform var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft),
             background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
  will-change:transform;
}
.btn-primary{
  background:var(--gold-grad); color:var(--ink);
  box-shadow:0 14px 30px -14px rgba(200,164,93,.7);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 38px -14px rgba(200,164,93,.85); }
.btn-ghost{
  border:1px solid var(--line-dark); color:var(--cream);
}
.section--light .btn-ghost, .section--paper .btn-ghost{ border-color:var(--line-light); color:var(--ink-text); }
/* Le formulaire est une carte SOMBRE posée dans une section CLAIRE : la règle
   ci-dessus s'y appliquait à tort et peignait le bouton en navy sur navy
   (1,03:1 — littéralement invisible). Sur cette surface, on repasse au
   traitement fond sombre, avec une bordure dorée franche : c'est une action
   alternative réelle, pas une décoration. */
.form .btn-ghost{ border-color:rgba(200,164,93,.45); color:var(--cream); }
.form .btn-ghost:hover{ border-color:var(--gold); background:rgba(200,164,93,.12); }
.btn-ghost:hover{ background:rgba(200,164,93,.1); border-color:var(--gold); }
.btn .ic{ width:18px; height:18px; transition:transform var(--t-fast) var(--ease-soft); }
.btn:hover .ic{ transform:translateX(3px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), backdrop-filter var(--t-base);
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(10,22,40,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-dark);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--cream); }
/* Le logo fourni a un fond crème opaque (JPEG, sans transparence) : on l'assume
   en pastille arrondie, dans le crème de la charte, plutôt que de laisser un
   carré blanc flotter sur le navy. */
.brand__mark{ width:38px; height:38px; flex:none; border-radius:9px; object-fit:cover;
  background:var(--ivory-2); box-shadow:0 0 0 1px rgba(200,164,93,.35);
  transition:box-shadow var(--t-base) var(--ease); }
.brand:hover .brand__mark{ box-shadow:0 0 0 1px var(--gold), 0 6px 18px -8px rgba(200,164,93,.7); }
.brand__name{ font-family:"Fraunces",serif; font-weight:600; font-size:1.12rem; letter-spacing:.01em; line-height:1; }
.brand__name small{ display:block; font-family:"Manrope",sans-serif; font-weight:500;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:5px; }

/* 7 entrées à loger : l'écart se resserre avec la largeur plutôt que de
   déborder ou d'écraser le bouton de rendez-vous. */
.nav__links{ display:flex; align-items:center; gap:clamp(15px, 1.9vw, 30px); }
.nav__links a{ color:var(--cream); font-size:.95rem; font-weight:500; position:relative; padding:6px 0; opacity:.9; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-grad); transition:width var(--t-base) var(--ease); }
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ width:100%; }

.nav__right{ display:flex; align-items:center; gap:18px; }
.lang{ display:flex; align-items:center; gap:2px; font-size:.82rem; font-weight:700; color:var(--cream-mut); }
.lang button{ color:var(--cream-mut); padding:6px 8px; border-radius:8px; letter-spacing:.04em; transition:color var(--t-fast); }
.lang button[aria-pressed="true"]{ color:var(--ink); background:var(--gold-grad); }
.lang span{ opacity:.4; }

.nav__cta{ display:inline-flex; }
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; color:var(--cream); }
.burger svg{ width:26px; height:26px; }

/* mobile nav panel */
.mnav{ position:fixed; inset:0; z-index:55; background:rgba(8,16,30,.97); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:90px 32px 40px;
  transform:translateY(-100%); transition:transform var(--t-base) var(--ease); visibility:hidden; }
.mnav.open{ transform:translateY(0); visibility:visible; }
.mnav a{ color:var(--cream); font-family:"Fraunces",serif; font-size:1.9rem; padding:12px 0; border-bottom:1px solid var(--line-dark); }
.mnav .btn{ margin-top:22px; }

/* =========================================================================
   INTRO — scroll-expand hero
   La skyline démarre en carte centrée et s'agrandit jusqu'au plein écran
   pendant que les deux lignes du titre s'écartent. Toute l'animation est
   pilotée par une seule variable --p (0 → 1) posée par le JS sur .intro__pin.
   Sans JS (ou en mouvement réduit), --p vaut 1 : skyline plein écran statique.
   ========================================================================= */
.intro{ position:relative; height:100vh; background:var(--ink); }
.intro__pin{ --p:1; position:relative; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }

.js .intro{ height:calc(100vh + 120vh); }
.js .intro__pin{ --p:0; position:sticky; top:0; }
@media (max-width:640px){ .js .intro{ height:calc(100vh + 85vh); } }

/* Fond : photo floutée (profondeur de champ) + voile navy/or, qui s'efface
   à mesure que la carte grandit. Le flou est volontaire : il donne la
   profondeur et masque la basse résolution de la photo source (549×364). */
.intro__bg{ position:absolute; inset:0; z-index:0; overflow:hidden;
  opacity:max(0, calc(1 - var(--p) * 1.15)); }
/* Les URL d'images sont écrites ICI, relatives à cette feuille (../img/...),
   et non passées depuis le HTML par une variable CSS : un url() relatif placé
   dans une custom property est résolu par rapport à la feuille qui le CONSOMME.
   Depuis que ce CSS est un fichier externe, un chemin « assets/img/... » venant
   du HTML devenait « assets/css/assets/img/... » — donc une image introuvable. */
.intro__bg::before{ content:""; position:absolute; inset:-4%;
  background:url("../img/intro-bg.jpg") center/cover no-repeat;
  filter:blur(4px) saturate(.9) brightness(.92);
  /* parallaxe souris : le fond glisse à l'inverse de la carte (profondeur) */
  transform:translate(calc(var(--px,0) * -22px), calc(var(--py,0) * -16px)); }
.intro__bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(55vw 45vw at 74% 16%, rgba(200,164,93,.20), rgba(200,164,93,0) 60%),
    radial-gradient(45vw 40vw at 16% 88%, rgba(28,51,82,.34), rgba(28,51,82,0) 62%),
    linear-gradient(180deg, rgba(10,22,40,.5) 0%, rgba(12,26,48,.3) 55%, rgba(10,22,40,.72) 100%); }

/* Carte média : 300×400 → plein écran, coins arrondis qui s'effacent */
.intro__card{ position:absolute; z-index:1; left:50%; top:50%; --w0:300px; --h0:400px;
  width:calc(var(--w0) + (100vw - var(--w0)) * var(--p));
  height:calc(var(--h0) + (100vh - var(--h0)) * var(--p));
  transform:translate(calc(-50% + var(--px,0) * 14px), calc(-50% + var(--py,0) * 10px));
  border-radius:calc(22px - 22px * var(--p));
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,calc(.7 - .7 * var(--p)));
  /* voir la note sur les chemins d'images plus haut */
  background:url("../img/intro-skyline.jpg") center/cover no-repeat; }
@media (max-width:640px){ .intro__card{ --w0:76vw; --h0:48vh; } }
/* Voile de lisibilité du titre : assez léger pour que la photo reste lisible
   (elle était noyée à 55 % sur une image déjà nocturne). */
.intro__card::after{ content:""; position:absolute; inset:0;
  background:#08101E; opacity:calc(.3 - var(--p) * .18); }

/* Titre : les lignes s'écartent horizontalement pendant l'expansion */
.intro__words{ position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; text-align:center; pointer-events:none; padding:0 24px; }
.intro__words .eyebrow{ margin-bottom:clamp(14px,2.4vh,24px); color:var(--gold-lt); }
.intro__lines{ display:flex; flex-direction:column; align-items:center; gap:.04em;
  font-size:var(--fs-hero); font-weight:400; letter-spacing:-.02em; line-height:1.02; color:var(--cream); }
.intro__word{ display:block; text-shadow:0 6px 40px rgba(0,0,0,.6); }
.intro__word--gold{ color:var(--gold-lt); }
.intro__scrollword{ margin-top:clamp(14px,2.4vh,26px); font-family:"Manrope",sans-serif;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--gold-lt); }

.js .intro__slide--a{ transform:translateX(calc(var(--p) * -72vw)); }
.js .intro__slide--b{ transform:translateX(calc(var(--p) * 72vw)); }

.intro__hint{ position:absolute; left:50%; bottom:clamp(20px,6vh,44px); transform:translateX(-50%);
  z-index:3; color:var(--cream-mut); opacity:max(0, calc(1 - var(--p) * 12)); }
/* Le chevron ne rebondit plus en boucle : il respire très légèrement en
   opacité. Un mouvement perpétuel décoratif se lit comme un GIF. */
.intro__hint svg{ animation:intro-bounce 2.4s ease-in-out infinite; }
@keyframes intro-bounce{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }

.intro__progress{ display:none; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3; background:rgba(236,231,219,.14); }
.js .intro__progress{ display:block; }
.intro__progress-bar{ height:100%; width:100%; background:var(--gold-grad);
  transform:scaleX(var(--p)); transform-origin:left center; }

@media (prefers-reduced-motion: reduce){
  .js .intro{ height:100vh; }
  .js .intro__pin{ --p:1; position:relative; }
  .js .intro__slide--a, .js .intro__slide--b{ transform:none; }
  .intro__hint, .js .intro__progress{ display:none; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; background:var(--ink); color:var(--cream); overflow:hidden; padding-top:120px; padding-bottom:clamp(60px,8vw,110px); }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg::before{ /* radial gold glow */
  content:""; position:absolute; width:70vw; height:70vw; right:-18vw; top:-22vw;
  background:radial-gradient(circle at center, rgba(200,164,93,.20), rgba(200,164,93,0) 62%);
  filter:blur(6px);
}
.hero__bg::after{ /* deep vignette bottom */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,22,40,0) 40%, rgba(8,17,32,.65) 100%);
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__eyebrow{ margin-bottom:22px; }
.hero h1{
  font-size:var(--fs-hero); font-weight:400; letter-spacing:-.02em; line-height:.98;
}
.hero h1 .dot{ color:var(--gold); }
.hero__sub{ margin-top:26px; font-size:var(--fs-1); color:var(--cream-mut); max-width:46ch; line-height:1.6; }
.hero__cta{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }
.hero__trust{ margin-top:46px; }
.hero__trust p{ font-size:var(--fs--1); letter-spacing:.01em; color:var(--cream-mut); margin-bottom:14px; }
.logos{ display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center; opacity:.72; }
.logos span{ font-family:"Fraunces",serif; font-weight:600; font-size:1.02rem; letter-spacing:.02em; color:var(--cream);
  display:inline-flex; align-items:center; gap:8px; }
.logos span::before{ content:""; width:16px; height:16px; border:1px solid var(--gold); border-radius:4px; transform:rotate(45deg); opacity:.7; }

/* hero visual: photo placeholder + floating dashboard */
.hero__visual{ position:relative; }
.hero__photo{ aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; }
.hero__dash{
  position:absolute; left:-6%; bottom:-7%; width:min(78%, 340px);
  background:rgba(13,26,46,.85); border:1px solid var(--line-dark); border-radius:16px;
  padding:18px 18px 14px; backdrop-filter:blur(10px);
  box-shadow:var(--shadow-lift);
}
.hero__dash h4{ font-family:"Manrope",sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.12em;
  color:var(--cream-mut); margin-bottom:8px; }
.hero__dash .kpi{ display:flex; align-items:baseline; gap:8px; }
.hero__dash .kpi b{ font-family:"Fraunces",serif; font-size:2rem; font-weight:600; color:var(--gold-lt); }
.hero__dash .kpi em{ font-style:normal; font-size:.85rem; color:var(--cream-mut); font-weight:600; }
.hero__dash-note{ margin-top:10px; font-size:.76rem; line-height:1.45; color:var(--cream-mut); }
.spark{ margin-top:12px; width:100%; height:52px; }

/* =========================================================================
   STATS BAR
   ========================================================================= */
.stats{ position:relative; z-index:3; margin-top:clamp(30px,5vw,56px); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark);
  border:1px solid var(--line-dark); border-radius:var(--radius); overflow:hidden; }
.stat{ background:var(--ink-2); padding:26px 24px; display:flex; flex-direction:column; justify-content:center; }
.stat b{ font-family:"Fraunces",serif; font-size:clamp(2rem,3.4vw,2.9rem); font-weight:600; color:var(--cream); display:block; line-height:1; white-space:nowrap; }
.stat b .u{ color:var(--gold); }
.stat > span{ display:block; margin-top:10px; font-size:.9rem; color:var(--cream-mut); }
.stat__phrase{ font-family:"Fraunces",serif; font-size:1.12rem; line-height:1.34; color:var(--cream); font-weight:500; margin:0; }

/* =========================================================================
   SHIFT / VALUE (intuition -> data)
   ========================================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.shift-head h2{ font-size:var(--fs-4); }
.shift-head .lead{ margin-top:20px; }
/* Capacités, pas étapes : plus de numérotation. Un filet et une puce discrète
   suffisent, et ne promettent aucune progression qui n'existe pas. */
.valuelist{ margin-top:30px; display:grid; gap:2px; }
.valuelist li{ display:flex; gap:14px; padding:15px 4px; border-top:1px solid var(--line-light); align-items:baseline; }
.valuelist li:last-child{ border-bottom:1px solid var(--line-light); }
.valuelist li::before{ content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--gold); transform:translateY(-3px); }
.valuelist .vtxt{ font-weight:600; color:var(--ink-text); }
.valuelist .vtxt small{ display:block; font-weight:500; color:var(--slate); font-size:.92rem; margin-top:2px; }

.shift-photo{ aspect-ratio:3/4; }

/* =========================================================================
   PILLARS
   ========================================================================= */
.sec-head{ max-width:64ch; }
.sec-head h2{ font-size:var(--fs-4); margin-top:16px; }
.sec-head .lead{ margin-top:18px; }

/* Deux variantes d'ouverture de section, pour que toutes ne démarrent pas
   sur le même gabarit empilé — c'est cette répétition qui faisait « modèle ». */
/* a) titre et argument côte à côte */
.sec-head--split{ max-width:none; display:grid; grid-template-columns:1.1fr 1fr;
  gap:clamp(24px, 4vw, 64px); align-items:end; }
.sec-head--split h2{ margin-top:0; }
.sec-head--split .lead{ margin-top:0; padding-bottom:6px; }
@media (max-width:820px){ .sec-head--split{ grid-template-columns:1fr; } }

/* b) titre seul, sans paragraphe : le contenu qui suit parle de lui-même */
.sec-head--bare{ max-width:46ch; }
.sec-head--bare h2{ margin-top:0; font-size:var(--fs-3); }

/* Déclaration éditoriale : la phrase EST le titre, en grand */
.statement{ max-width:22ch; font-size:var(--fs-4); font-weight:400;
  letter-spacing:-.02em; line-height:1.06; margin:0; }
.statement + .lead{ margin-top:26px; }

/* Cinq cartes identiques ne disent rien de la maison. La première expertise —
   celle qui donne son nom au métier — occupe toute la largeur et reçoit le seul
   traitement en carte ; les quatre autres deviennent des colonnes sobres, sans
   fond ni bordure, séparées par un filet. La hiérarchie visuelle dit alors la
   même chose que le discours commercial. */
.pillars{ margin-top:clamp(36px,5vw,60px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,38px); }

/* — expertise signature — */
.pillar--lead{
  grid-column:1 / -1;
  display:grid; grid-template-columns:auto 1fr 1.15fr; gap:clamp(20px,3vw,40px); align-items:center;
  padding:clamp(26px,3vw,40px);
  background:linear-gradient(120deg, rgba(200,164,93,.13), rgba(200,164,93,.02) 55%, transparent 80%), var(--ink-3);
  border:1px solid rgba(200,164,93,.34); border-radius:var(--radius-lg);
}
.pillar--lead .pillar__ic{ width:56px; height:56px; margin:0; }
.pillar--lead h3{ font-size:var(--fs-3); }
.pillar--lead p{ margin-top:0; font-size:var(--fs-0); }
@media(max-width:860px){ .pillar--lead{ grid-template-columns:1fr; align-items:start; } }

/* — piliers secondaires : filet en tête, aucun fond — */
.pillar{ position:relative; padding-top:22px; border-top:1px solid var(--line-dark); }
.pillar::after{ content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--gold-grad); transition:width var(--t-base) var(--ease); }
.pillar:hover::after{ width:100%; }
.pillar__ic{ width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--gold-lt); margin-bottom:16px; }
.pillar__ic svg{ width:24px; height:24px; }
.pillar h3{ font-size:var(--fs-1); color:var(--cream); }
.pillar p{ margin-top:10px; color:var(--cream-mut); font-size:.94rem; }
@media(max-width:860px){ .pillars{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* =========================================================================
   METHOD (numbered sequence)
   ========================================================================= */
.steps{ margin-top:clamp(36px,5vw,60px); display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.step{ padding:34px 28px 30px; border-left:1px solid var(--line-light); position:relative; }
.step:first-child{ border-left:0; }
.step__n{ font-family:"Fraunces",serif; font-size:2.8rem; font-weight:500; color:transparent;
  -webkit-text-stroke:1px var(--gold); line-height:1; margin-bottom:20px; }
.step h3{ font-size:var(--fs-1); color:var(--ink-text); }
.step p{ margin-top:10px; color:var(--slate); font-size:.95rem; }
.step__line{ position:absolute; left:0; top:0; width:100%; height:2px; background:var(--gold-grad); transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow) var(--ease); }
.step.in .step__line{ transform:scaleX(1); }

/* =========================================================================
   RESULTS / DASHBOARD
   ========================================================================= */
.results__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,70px); align-items:center; }
.dashcard{ background:var(--ink-3); border:1px solid var(--line-dark); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-lift); }
.dashcard__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.dashcard__top h4{ font-family:"Manrope",sans-serif; font-size:.84rem; letter-spacing:.01em; color:var(--cream-mut); font-weight:600; }
.chip{ font-size:.78rem; font-weight:700; color:#7fd99b; background:rgba(127,217,155,.12); padding:5px 12px; border-radius:999px; }
.dashcard__chart{ width:100%; height:190px; }
.dashcard__chart .bar--peak{ fill:var(--gold-lt); }

/* --- Diagramme en bandes : le graphique se construit, puis chaque barre vit
   à son propre rythme. La respiration est volontairement déphasée d'une barre
   à l'autre (délai négatif indexé) pour qu'elles ne bougent jamais à l'unisson. */
.dashcard__chart .bar{ transform-box:fill-box; transform-origin:50% 100%; transition:opacity var(--t-fast) ease; }
.js .dashcard__chart .bar{ transform:scaleY(0); }
.js .dashcard__chart .gridline{ opacity:0; animation:failsafe-show 0s linear 3s forwards; }
.js .dashcard__chart .baseline{ stroke-dasharray:480; stroke-dashoffset:480; }

/* 1. la grille apparaît  2. la ligne de base se trace  3. les barres montent */
.dashcard.is-live .gridline{ animation:dc-fade .5s ease forwards; animation-delay:calc(var(--i) * .1s); }
.dashcard.is-live .baseline{ animation:dc-draw .7s cubic-bezier(.22,.61,.36,1) .2s forwards; }
.dashcard.is-live .bar{
  animation:dc-rise .85s cubic-bezier(.2,1.3,.4,1) forwards;
  animation-delay:calc(.55s + var(--i) * .07s); }
.dashcard.is-breathing .bar{
  animation:dc-breathe calc(3.4s + var(--i) * .21s) ease-in-out infinite;
  animation-delay:calc(var(--i) * -.41s); }
.dashcard.is-breathing .bar--peak{
  animation:dc-peak 2.8s ease-in-out infinite;
  filter:drop-shadow(0 0 5px rgba(230,204,134,.4)); }

@keyframes dc-fade{ to{ opacity:1; } }
@keyframes dc-draw{ to{ stroke-dashoffset:0; } }
@keyframes dc-rise{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes dc-breathe{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.04); } }
@keyframes dc-peak{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.07); } }

/* survol : la barre pointée ressort, les autres reculent */
.dashcard__chart:hover .bar{ opacity:.38; }
.dashcard__chart .bar:hover{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .js .dashcard__chart .bar{ transform:none; }
  .js .dashcard__chart .gridline{ opacity:1; }
  .js .dashcard__chart .baseline{ stroke-dashoffset:0; }
  .dashcard.is-live .bar,
  .dashcard.is-breathing .bar,
  .dashcard.is-breathing .bar--peak{ animation:none; filter:none; }
  .dashcard__chart:hover .bar{ opacity:1; }
}
.dashcard__row{ display:grid; gap:10px; margin-top:22px; }
.mini{ background:var(--ink-2); border:1px solid var(--line-dark); border-radius:12px; padding:13px 15px; display:flex; align-items:center; gap:12px; }
.mini__ic{ width:22px; height:22px; flex:none; color:var(--gold-lt); }
.mini span{ font-size:.86rem; color:var(--cream); line-height:1.35; }

.results__copy h2{ font-size:var(--fs-4); }
.results__copy .lead{ margin-top:18px; }
.results__copy .btn{ margin-top:30px; }

/* =========================================================================
   WHY / ABOUT
   ========================================================================= */
.why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
/* Portrait carré : la source fait 640×640, un cadre 4/3 lui couperait le
   haut du crâne et la poitrine. */
.why__photo{ aspect-ratio:1/1; }
.why__caption{ margin-top:14px; display:flex; flex-direction:column; gap:2px; }
.why__caption b{ font-family:"Fraunces",serif; font-size:1rem; font-weight:600; color:var(--ink-text); }
.why__caption span{ font-size:.86rem; letter-spacing:.01em; color:var(--gold-ink); font-weight:600; }
.why h2{ font-size:var(--fs-4); }
.why .lead{ margin-top:20px; }
/* Six items strictement identiques, chacun avec sa petite icône, se lisaient
   comme une grille de fonctionnalités. Traitées en notices séparées par un
   filet, avec le nom de la valeur en exergue, elles redeviennent du discours. */
.values{ margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,4vw,46px); }
.value{ display:block; padding:16px 0; border-top:1px solid var(--line-light); }
.value b{ display:block; font-family:"Fraunces",serif; font-weight:600; font-size:1.06rem;
  color:var(--ink-text); margin-bottom:3px; }
.value span{ font-size:.92rem; color:var(--slate); line-height:1.5; }
@media(max-width:620px){ .values{ grid-template-columns:1fr; } }

/* =========================================================================
   CTA BANNER
   ========================================================================= */
.cta{ text-align:center; position:relative; overflow:hidden; }
.cta__inner{ position:relative; z-index:2; max-width:44ch; margin-inline:auto; }
.cta h2{ font-size:var(--fs-4); font-weight:400; }
.cta p{ margin-top:20px; color:var(--cream-mut); font-size:var(--fs-1); }
.cta .btn{ margin-top:34px; }
/* Effet machine à écrire — chaque caractère garde sa place (aucun décalage de
   mise en page pendant la frappe) ; le texte complet reste dans le DOM, donc
   les lecteurs d'écran le lisent en entier. */
.is-typing .type-char{ visibility:hidden; }
.is-typing .type-char.is-in{ visibility:visible; }
.type-caret{ display:inline-block; width:2px; height:.9em; margin-left:.03em;
  background:var(--gold); vertical-align:-.07em; animation:type-blink .8s steps(1) infinite; }
@keyframes type-blink{ 0%,49.9%{ opacity:1; } 50%,100%{ opacity:0; } }
/* Le bloc sous le titre monte depuis le bas une fois la frappe terminée */
.js [data-rise]{ opacity:0; transform:translateY(26px); animation:failsafe-show 0s linear 3s forwards;
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js [data-rise].is-in{ opacity:1; transform:none; animation:none; }

@media (prefers-reduced-motion: reduce){
  .is-typing .type-char{ visibility:visible; }
  .type-caret{ display:none; }
  .js [data-rise]{ opacity:1; transform:none; transition:none; }
}

.cta__glow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60vw; height:60vw;
  background:radial-gradient(circle,rgba(200,164,93,.16),transparent 60%); z-index:1; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); }
.contact h2{ font-size:var(--fs-3); }
.contact .lead{ margin-top:16px; }
.contact__info{ margin-top:32px; display:grid; gap:20px; }
.cinfo{ display:flex; gap:16px; align-items:flex-start; }
.cinfo__ic{ width:44px; height:44px; border-radius:12px; background:rgba(166,124,46,.12); color:var(--gold-dk); display:flex; align-items:center; justify-content:center; flex:none; }
.cinfo__ic svg{ width:20px; height:20px; }
.cinfo b{ display:block; color:var(--ink-text); font-size:.95rem; }
.cinfo span{ color:var(--slate); font-size:.92rem; }
.cinfo a{ display:inline-block; color:var(--slate); font-size:.92rem; word-break:break-word;
  border-bottom:1px solid transparent; transition:color var(--t-fast), border-color var(--t-fast); }
.cinfo a:hover{ color:var(--gold-ink); border-bottom-color:var(--gold); }

.form{ background:var(--ink-3); border:1px solid var(--line-dark); border-radius:var(--radius-lg); padding:clamp(26px,4vw,40px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--cream-mut); margin-bottom:8px; }
.field input,.field textarea,.field select{ width:100%; background:var(--ink-2); border:1px solid var(--line-dark); border-radius:10px;
  padding:13px 15px; color:var(--cream); font-family:inherit; font-size:.98rem; transition:border-color var(--t-fast); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,164,93,.25); }
/* chevron dessiné en CSS : la flèche native du système jure avec le navy */
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                   linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.field select option{ background:var(--ink-2); color:var(--cream); }
.field textarea{ resize:vertical; min-height:120px; }
.form .btn{ width:100%; margin-top:6px; }
.form__note{ font-size:.8rem; color:var(--cream-mut); text-align:center; margin-top:14px; }

/* validation : message d'erreur sous le champ concerné (jamais la couleur seule) */
.field__error{ display:none; margin-top:7px; font-size:.78rem; font-weight:600; color:#E8A597; }
.field--invalid .field__error{ display:block; }
.field--invalid input,.field--invalid textarea{ border-color:#C8695A; }

.form__status{ display:none; margin-top:14px; padding:12px 14px; border-radius:10px;
  font-size:.86rem; font-weight:600; line-height:1.45; text-align:center; }
.form__status--ok{ display:block; background:rgba(200,164,93,.14); border:1px solid var(--line-dark); color:var(--gold-lt); }
.form__status--err{ display:block; background:rgba(200,105,90,.13); border:1px solid rgba(200,105,90,.42); color:#E8A597; }
.form button[disabled]{ opacity:.6; cursor:progress; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ background:var(--ink-2); color:var(--cream); padding-block:70px 34px;
  border-top:1px solid var(--line-dark); position:relative; overflow:hidden; }
/* Globe filaire : le globe du logo, rendu vivant. Il tourne seul et s'incline
   vers le curseur. Coupé par le bas — il se poursuit hors de la page. */
.footer__globe{ position:absolute; left:50%; bottom:-24%; transform:translateX(-50%);
  width:min(1040px, 142vw); height:min(1040px, 142vw);
  pointer-events:none; z-index:0; opacity:0; transition:opacity var(--t-slow) var(--ease);
  /* halo ambiant : détache le filaire du navy du pied de page */
  background:radial-gradient(closest-side, rgba(200,164,93,.11), rgba(200,164,93,.03) 52%, rgba(200,164,93,0) 72%); }
.footer__globe.is-live{ opacity:1; }
.footer > .wrap{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .footer__globe{ display:none; } }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer .brand{ margin-bottom:18px; }
.footer__about{ color:var(--cream-mut); font-size:.92rem; max-width:34ch; }
.footer h5{ font-family:"Manrope",sans-serif; font-size:.9rem; letter-spacing:.01em; color:var(--gold); margin:0 0 18px; font-weight:700; }
.footer li{ margin-bottom:12px; }
.footer li a{ color:var(--cream-mut); font-size:.93rem; transition:color var(--t-fast); }
.footer li a:hover{ color:var(--gold-lt); }
.footer__terr{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.footer__terr span{ font-size:.78rem; color:var(--cream-mut); border:1px solid var(--line-dark); padding:4px 10px; border-radius:999px; }
.footer__bar{ margin-top:50px; padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--cream-mut); font-size:.84rem; }

/* =========================================================================
   IMAGE PLACEHOLDERS
   ========================================================================= */
.slot-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph{ position:relative; width:100%; height:100%; min-height:200px;
  background:
    linear-gradient(135deg, rgba(200,164,93,.10), rgba(200,164,93,0) 55%),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--cream-mut); text-align:center; padding:24px;
  border:1px solid var(--line-dark);
}
.ph[style*="--img"]{ background:var(--img) center/cover no-repeat; border:0; }
.ph[style*="--img"] .ph__body{ display:none; }
.ph__body{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.ph svg{ width:34px; height:34px; color:var(--gold); opacity:.8; }
.ph b{ font-family:"Manrope",sans-serif; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); }
.ph span{ font-size:.8rem; color:var(--cream-mut); max-width:26ch; }
.ph::after{ content:""; position:absolute; inset:12px; border:1px dashed var(--line-dark); border-radius:10px; pointer-events:none; }

/* =========================================================================
   BANDE DEVIS — seule surface du site où le dégradé doré sert de fond.
   C'est ce qui la détache de l'alternance clair/sombre des autres sections,
   sans l'interrompre : elle se lit comme une césure, pas comme une section.
   ========================================================================= */
.quote{ position:relative; overflow:hidden; background:var(--gold-grad); color:var(--ink);
  padding-block:clamp(44px, 6vw, 74px); }
.quote__inner{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px, 4vw, 56px); flex-wrap:wrap; position:relative; z-index:1; }
.quote__copy{ max-width:56ch; }
.quote .eyebrow{ color:rgba(10,22,40,.74); }
.quote .eyebrow::before{ background:var(--ink); opacity:.45; }
.quote h2{ font-size:var(--fs-3); font-weight:400; letter-spacing:-.02em; color:var(--ink); margin-top:14px; }
.quote p{ margin-top:15px; color:rgba(10,22,40,.78); max-width:50ch; }
.quote__cta{ flex:none; }
.btn-invert{ background:var(--ink); color:var(--gold-lt); padding:17px 32px; font-size:1rem;
  box-shadow:0 18px 40px -18px rgba(8,18,34,.85); }
.btn-invert:hover{ transform:translateY(-2px); box-shadow:0 24px 52px -18px rgba(8,18,34,.95); }
@media (max-width:760px){
  .quote__inner{ flex-direction:column; align-items:flex-start; }
  .quote__cta .btn{ width:100%; }
}

/* =========================================================================
   SOURIS — halo doré qui suit le pointeur + éclairage des cartes au survol.
   Le curseur système n'est jamais masqué (il reste lisible et personnalisable
   par l'utilisateur) : on ajoute seulement une lumière par-dessus la page.
   Désactivé au toucher et en mouvement réduit.
   ========================================================================= */
.cursor-glow{
  position:fixed; top:0; left:0; width:640px; height:640px; margin:-320px 0 0 -320px;
  border-radius:50%; pointer-events:none; z-index:54; opacity:0;
  background:radial-gradient(closest-side, rgba(230,204,134,.16), rgba(200,164,93,.07) 46%, rgba(200,164,93,0) 72%);
  mix-blend-mode:screen; will-change:transform; transition:opacity var(--t-slow) ease;
}
.has-glow .cursor-glow{ opacity:1; }

/* Traînée : un filament de métal en fusion qui suit le pointeur et se dissout.
   Dessinée en fusion additive, elle n'assombrit jamais ce qu'elle traverse. */
.cursor-trail{ position:fixed; inset:0; z-index:55; pointer-events:none;
  mix-blend-mode:screen; opacity:0; transition:opacity var(--t-base) ease; }
.has-glow .cursor-trail{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor-trail{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cursor-trail{ display:none; } }

/* projecteur suivant le pointeur à l'intérieur des cartes sombres */
.spot{ position:relative; }
.spot::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(200,164,93,.17), rgba(200,164,93,0) 68%);
  opacity:0; transition:opacity var(--t-base) ease;
}
.spot:hover::after{ opacity:1; }

@media (hover:none),(pointer:coarse){ .cursor-glow{ display:none; } .spot::after{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cursor-glow{ display:none; } }

/* =========================================================================
   ZOOM REVEAL — l'image arrive en grand plan (centrée, agrandie), se replie
   à sa place exacte au fil du scroll, puis le texte apparaît.
   Transform posé par le JS sur l'image ; la case parente garde la mise en
   page (jamais transformée) et sert de repère de mesure.
   ========================================================================= */
.zoom{ position:relative; z-index:3; }
.zoom .slot-img{ border-radius:var(--radius-lg); transform-origin:center center; }

/* L'image n'arrive pas seulement « plus grande » : elle arrive hors focus et
   désaturée, puis se met au point en se repliant. C'est le passage flou→net
   qui donne la sensation d'apaisement, davantage que le mouvement lui-même. */
.js .zoom .slot-img{
  will-change:transform, filter;
  transform:translateX(var(--zx,0px)) scale(var(--zs,1));
  filter:blur(calc((1 - var(--z,1)) * 13px))
         saturate(calc(.34 + var(--z,1) * .66))
         brightness(calc(.68 + var(--z,1) * .32));
}

/* Équerres de cadrage : elles se posent quand l'image atteint sa place exacte.
   Repère de mesure plutôt que décor — c'est le vocabulaire du site. */
.js .zoom::before, .js .zoom::after{
  content:""; position:absolute; width:28px; height:28px; pointer-events:none; z-index:4;
  border:0 solid var(--gold); opacity:calc((var(--z,1) - .74) * 3.9); }
.js .zoom::before{ top:-10px; left:-10px; border-top-width:1.5px; border-left-width:1.5px; }
.js .zoom::after{ bottom:-10px; right:-10px; border-bottom-width:1.5px; border-right-width:1.5px; }

/* Le texte se dépose ligne à ligne, net à partir du flou */
.js .zoom-text > *{
  opacity:0; transform:translateY(20px); filter:blur(7px); animation:failsafe-show 0s linear 3s forwards;
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
.js .zoom-text.is-in > *{ opacity:1; transform:none; filter:blur(0); animation:none; }
.js .zoom-text.is-in > *:nth-child(1){ transition-delay:.04s; }
.js .zoom-text.is-in > *:nth-child(2){ transition-delay:.14s; }
.js .zoom-text.is-in > *:nth-child(3){ transition-delay:.24s; }
.js .zoom-text.is-in > *:nth-child(4){ transition-delay:.34s; }
.js .zoom-text.is-in > *:nth-child(5){ transition-delay:.44s; }

@media (prefers-reduced-motion: reduce){
  .js .zoom-text > *{ opacity:1; transform:none; filter:none; transition:none; }
  .js .zoom .slot-img{ transform:none; filter:none; }
  .js .zoom::before, .js .zoom::after{ opacity:1; }
}

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
/* Montée réduite de 22 à 12 px : l'entrée se remarque moins et se subit moins.
   Le fondu-montée ne subsiste plus que sur une poignée de blocs, pas sur chaque
   élément — c'est la répétition, pas l'effet, qui faisait générique. */
.js .reveal{ opacity:0; transform:translateY(12px); animation:failsafe-show 0s linear 3s forwards; transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in{ opacity:1; transform:none; animation:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

/* hero orchestrated entrance */
.js .hero .anim{ opacity:0; transform:translateY(26px); animation:failsafe-show 0s linear 3s forwards; }
.hero.ready .anim{ opacity:1; transform:none; animation:none; transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.hero.ready .anim[data-d="1"]{ transition-delay:.15s; }
.hero.ready .anim[data-d="2"]{ transition-delay:.3s; }
.hero.ready .anim[data-d="3"]{ transition-delay:.45s; }
.hero.ready .anim[data-d="4"]{ transition-delay:.6s; }
.hero.ready .anim[data-d="5"]{ transition-delay:.78s; }

@media (prefers-reduced-motion: reduce){
  .reveal,.hero .anim{ opacity:1 !important; transform:none !important; transition:none !important; }
  .step__line,.pillar::after{ transition:none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:880px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:flex; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ max-width:440px; margin-top:12px; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .split,.results__grid,.why__grid,.contact__grid{ grid-template-columns:1fr; }
  .results__grid{ display:flex; flex-direction:column-reverse; }
  .pillars{ grid-template-columns:1fr; }
  .pillar,.pillar--feature{ grid-column:auto !important; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step{ border-left:0; border-top:1px solid var(--line-light); padding:28px 4px; }
  .values{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .stats__grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__dash{ width:74%; }
}