:root{
    --bg:#0b0c10;
    --bg-1:#111319;
    --bg-2:#181b24;
    --line:rgba(245,241,232,.10);
    --line-strong:rgba(245,241,232,.20);
    --ink:#f5f1e8;
    --ink-dim:#b6b2a8;
    --ink-faint:#8a8579; /* lightened from #726e66 — the darker value read ~3.9:1 against --bg,
      under WCAG AA for the small captions/labels it's used on (footer links, stat labels, form
      notes); this value clears ~5:1 while staying visibly the dimmest tone in the palette */
    --copper:#c9a24b;
    --copper-soft:#e6c988;
    --copper-deep:#7a5f2c;
    --ease:cubic-bezier(.16,1,.3,1);
    --container:1240px;
    color-scheme:dark;
  }

  *,*::before,*::after{box-sizing:border-box;}
  /* deliberately NOT scroll-behavior:smooth — it fights GSAP/ScrollTrigger's
     own scroll math (a documented conflict) and was contributing to the
     "section gets stuck" feeling across the page. In-page anchor jumps
     (the hero CTA) stay instant, which is more predictable than two
     smoothing systems fighting each other. */
  html{scroll-behavior:auto;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Manrope',system-ui,-apple-system,Segoe UI,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    padding:0 clamp(20px,5vw,72px);
  }
  h1,h2,h3,p,ul{margin:0;}
  ul{list-style:none;padding:0;}
  a{color:inherit;text-decoration:none;}
  img,video{max-width:100%;display:block;}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;}
  ::selection{background:var(--copper);color:#0b0c10;}

  .container{max-width:var(--container);margin:0 auto;}

  .display{
    font-family:'Big Shoulders Display','Arial Narrow',sans-serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.005em;
    line-height:.94;
    text-wrap:balance;
  }
  .copper{color:var(--copper-soft);}

  .kicker{
    display:inline-flex;
    align-items:center;
    gap:.6em;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--copper);
  }
  .kicker::before{
    content:"";
    width:22px;height:1px;
    background:var(--copper);
    display:inline-block;
  }

  .lede{
    font-size:clamp(15px,1.5vw,18px);
    line-height:1.65;
    color:var(--ink-dim);
    max-width:52ch;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.55em;
    padding:.95em 1.6em;
    border-radius:999px;
    font-family:'Manrope',sans-serif;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
    transition:transform .45s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--copper);color:#181203;}
  .btn-primary:hover{background:var(--copper-soft);transform:translateY(-2px);}
  .btn-ghost{border:1px solid var(--line-strong);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--copper);color:var(--copper-soft);transform:translateY(-2px);}
  .btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--ease);}
  .btn:hover svg{transform:translateX(3px);}

  .link-arrow{
    display:inline-flex;align-items:center;gap:.5em;
    font-size:13.5px;font-weight:700;color:var(--ink);
    border-bottom:1px solid transparent;
    transition:color .3s var(--ease),border-color .3s var(--ease);
  }
  .link-arrow svg{width:13px;height:13px;transition:transform .4s var(--ease);}
  .link-arrow:hover{color:var(--copper-soft);border-color:var(--copper-deep);}
  .link-arrow:hover svg{transform:translateX(4px);}

  /* ---------- generative media plates ---------- */
  .plate{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(130% 150% at 12% -10%, rgba(201,162,75,.20), transparent 55%),
      radial-gradient(100% 130% at 105% 115%, rgba(201,162,75,.10), transparent 60%),
      linear-gradient(165deg, var(--bg-2), var(--bg-1) 55%, var(--bg) 100%);
  }
  .plate::before{
    content:"";
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.22;
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  .plate::after{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 105%, rgba(0,0,0,.5), transparent 60%);
    pointer-events:none;
  }
  /* stronger, deliberate scrim where a real photo sits behind card text —
     the decorative gradient plates above don't need this. */
  .plate.has-photo::after{
    background:
      linear-gradient(to top, rgba(11,12,16,.92) 0%, rgba(11,12,16,.5) 42%, rgba(11,12,16,.08) 70%),
      radial-gradient(120% 90% at 50% 105%, rgba(0,0,0,.5), transparent 60%);
  }
  .plate.has-photo img{opacity:.9;}
  .plate img,.plate video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  /* V1.1 — per-photo crop fixes (never the same centering everywhere):
     gv-roland.jpg is a square portrait with the face in the upper third —
     default center-crop lost the head entirely on wide cards.
     gv-photo-491.jpg (Cadrage panel only) is a two-subject wide shot —
     default center-crop lost the left subject's head; shifting left keeps
     him whole while the rig + right subject's hand stay in frame. */
  [data-media="expertise-2"] img{object-position:50% 12%;}
  [data-media="studio-3"] img{object-position:18% 50%;}
  .plate-mark{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    z-index:1;
  }
  .plate-mark svg{width:34%;height:34%;opacity:.4;stroke:var(--copper-soft);}
  /* when a real photo backs the plate, the pictogram becomes a small
     badge instead of floating loose over the image — same mark, kept
     legible against any photo without touching the photo itself. */
  .plate.has-photo .plate-mark{
    align-items:flex-start;justify-content:flex-end;
    padding:clamp(16px,2vw,22px);
  }
  .plate.has-photo .plate-mark::before{
    content:"";position:absolute;right:clamp(16px,2vw,22px);top:clamp(16px,2vw,22px);
    width:52px;height:52px;border-radius:50%;
    background:rgba(11,12,16,.55);
    backdrop-filter:blur(3px);
    border:1px solid rgba(245,241,232,.14);
  }
  .plate.has-photo .plate-mark svg{position:relative;width:22px;height:22px;opacity:.9;}

  /* ---------- reveal utility ---------- */
  .reveal{opacity:0;transform:translateY(26px);}
  .reveal.is-in{
    opacity:1;transform:translateY(0);
    transition:opacity .9s var(--ease),transform .9s var(--ease);
  }

  section{position:relative;}

  /* ---------- nav ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    padding:18px clamp(20px,5vw,72px);
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(16px,3vw,56px);
    background:linear-gradient(to bottom, rgba(11,12,16,.85), transparent);
    transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
    border-bottom:1px solid transparent;
  }
  .nav.is-scrolled{
    background:rgba(11,12,16,.86);
    backdrop-filter:blur(14px);
    border-color:var(--line);
  }
  .brand{display:flex;align-items:center;gap:.65em;flex:none;}
  .brand svg{width:28px;height:28px;flex:none;}
  .brand-word{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;font-weight:600;letter-spacing:.16em;
  }
  /* real Gentle Vision wordmark (kept in its official rose, unaltered) —
     used wherever .brand carries the actual logo rather than a decorative mark.
     flex:none + a fixed height keep it from ever being squeezed by its
     neighbours; the nav's own gap (above) is what guarantees breathing
     room on both sides at every width down to the burger breakpoint. */
  .brand-logo{height:27px;width:auto;display:block;flex:none;transition:transform .5s var(--ease),opacity .3s var(--ease);}
  .brand:hover .brand-logo{transform:scale(1.04);}
  .nav-right{flex:none;}
  .nav-links{display:flex;align-items:center;gap:2.1em;}
  .nav-links a{
    font-size:13.5px;font-weight:600;color:var(--ink-dim);
    position:relative;padding:.2em 0;
    transition:color .3s var(--ease);
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
    background:var(--copper);transition:right .4s var(--ease);
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{right:0;}
  .nav-right{display:flex;align-items:center;gap:1.6em;}
  .nav-cta{display:inline-flex;}
  .nav-toggle{display:none;width:34px;height:34px;align-items:center;justify-content:center;}
  .nav-toggle svg{width:20px;height:20px;}

  .mobile-panel{
    position:fixed;inset:0;z-index:60;
    background:var(--bg);
    display:flex;flex-direction:column;
    padding:24px clamp(20px,6vw,40px) 40px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .4s var(--ease),transform .4s var(--ease);
  }
  .mobile-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .mobile-panel-head{display:flex;align-items:center;justify-content:space-between;}
  .mobile-panel-head .brand-logo{height:26px;}
  .mobile-panel-close svg{width:22px;height:22px;}
  .mobile-panel nav{margin-top:14vh;display:flex;flex-direction:column;gap:.2em;}
  .mobile-panel nav a{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:700;text-transform:uppercase;
    font-size:clamp(30px,9vw,46px);
    padding:.32em 0;border-bottom:1px solid var(--line);
    color:var(--ink);
  }
  .mobile-panel .btn{margin-top:2em;align-self:flex-start;}

  /* ---------- hero ---------- */
  .hero{
    min-height:100dvh;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-top:clamp(90px,14vh,150px);
    padding-bottom:clamp(48px,7vh,90px);
    position:relative;
  }
  .hero-stage{
    position:absolute;inset:0 clamp(-20px,-5vw,-72px);
    z-index:-1;overflow:hidden;
  }
  .hero-stage::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(150deg, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg) 100%);
  }
  /* real tournage photo, full-bleed behind the hero — a very slow breathing
     zoom (CSS, time-based, never resets/jumps) plus a scroll-linked
     parallax (GSAP, same mechanism as .hero-iris-wrap below) for depth. */
  .hero-photo{position:absolute;inset:-4% -4%;overflow:hidden;}
  .hero-photo img{
    width:100%;height:100%;object-fit:cover;object-position:62% 30%;
    display:block;
    animation:hero-photo-zoom 36s ease-in-out infinite;
    filter:saturate(1.04);
  }
  @keyframes hero-photo-zoom{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
  /* scrim tuned for this specific photo: darker on the left (where the
     title sits) fading out to the right, plus a bottom pass so the lede
     and CTAs stay legible — separate from .hero-vignette, which still
     does its own subtle work on top. */
  .hero-photo-scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(to right, rgba(11,12,16,.86) 0%, rgba(11,12,16,.55) 42%, rgba(11,12,16,.22) 72%, rgba(11,12,16,.4) 100%),
      linear-gradient(to top, rgba(11,12,16,.7) 0%, rgba(11,12,16,0) 42%);
  }
  /* very light copper halo tying the photo back into the site's palette —
     kept subtle on purpose, not a colour wash over the photo itself. */
  .hero-photo-scrim::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(60% 55% at 82% 78%, rgba(201,162,75,.16), transparent 70%);
  }
  .hero-glow{
    position:absolute;border-radius:50%;
    filter:blur(2px);
    animation:drift 38s ease-in-out infinite;
  }
  .hero-glow.g1{
    width:64vmax;height:64vmax;right:-18vmax;top:-22vmax;
    background:radial-gradient(circle,rgba(201,162,75,.22),transparent 60%);
  }
  .hero-glow.g2{
    width:44vmax;height:44vmax;right:6vmax;bottom:-20vmax;
    background:radial-gradient(circle,rgba(201,162,75,.13),transparent 62%);
    animation-duration:46s;animation-direction:reverse;
  }
  @keyframes drift{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-2.5%,2%) scale(1.045);}
  }
  /* .hero-iris-wrap carries position/centering (via margin, not transform)
     and is the element the scroll-parallax targets; .hero-iris itself only
     ever rotates. Splitting the two means GSAP's scrub transform and the
     CSS spin keyframe never fight over the same "transform" property. */
  .hero-iris-wrap{
    position:absolute;right:clamp(-6%,2%,10%);top:50%;
    width:min(58vw,780px);height:min(58vw,780px);
    margin-top:calc(-1 * min(29vw,390px));
    opacity:.5;
  }
  .hero-iris{width:100%;height:100%;display:block;animation:spin 210s linear infinite;transform-origin:50% 50%;}
  @keyframes spin{to{transform:rotate(360deg);}}
  /* extremely slow, barely-perceptible breathing on the hero backdrop —
     the frame never feels perfectly static */
  .hero-stage::before{animation:stage-breathe 22s ease-in-out infinite;}
  @keyframes stage-breathe{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.018);}
  }
  .hero-grain{
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:.2;mix-blend-mode:overlay;
  }
  .hero-vignette{
    position:absolute;inset:0;
    background:
      radial-gradient(80% 60% at 20% 100%, rgba(0,0,0,.6), transparent 62%),
      linear-gradient(to right, rgba(11,12,16,.55) 0%, rgba(11,12,16,0) 55%);
  }
  .hero-content{max-width:820px;}
  .hero h1{
    font-size:clamp(40px,7.4vw,102px);
    margin-bottom:.34em;
  }
  .hero h1 .line{display:block;overflow:hidden;}
  .hero h1 .line span{
    display:block;
    animation:line-up 1s var(--ease) both;
  }
  .hero h1 .line:nth-child(1) span{animation-delay:.5s;}
  .hero h1 .line:nth-child(2) span{animation-delay:.62s;}
  @keyframes line-up{from{transform:translateY(112%);}to{transform:translateY(0);}}
  /* accent phrase pops in as a single unit right as its own line settles —
     both words move together (no internal stagger): one deliberate beat per
     line, not a cascade of small steps. Timed to start exactly when the line
     mask finishes, never before. */
  .hero h1 .copper .word{
    display:inline-block;
    opacity:0;
    transform:translateY(6px) scale(.96);
    animation:word-pop .6s var(--ease) both;
  }
  .hero h1 .line:nth-child(1) .copper .word{animation-delay:1.5s;}
  .hero h1 .line:nth-child(2) .copper .word{animation-delay:1.63s;}
  @keyframes word-pop{
    0%{opacity:0;transform:translateY(6px) scale(.96);}
    70%{opacity:1;transform:translateY(0) scale(1.015);}
    100%{opacity:1;transform:translateY(0) scale(1);}
  }
  .hero .lede{
    opacity:0;
    animation:fade-up .8s var(--ease) 2.05s both;
  }
  .hero-ctas{
    display:flex;flex-wrap:wrap;gap:1em;margin-top:2.4em;
    opacity:0;
    animation:fade-up .8s var(--ease) 2.25s both;
  }
  @keyframes fade-up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

  /* ---------- sections shared ---------- */
  .section{padding:clamp(88px,13vw,168px) 0;}
  .section-head{max-width:640px;margin-bottom:clamp(44px,6vw,80px);}
  .section-head h2{font-size:clamp(32px,4.6vw,58px);margin-top:.3em;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

  /* ---------- expertises (bento) ---------- */
  .expertise-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    grid-template-rows:auto auto;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .x-card{
    background:var(--bg);
    padding:clamp(28px,3vw,44px);
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:340px;
    position:relative;
    isolation:isolate;
  }
  .x-card:nth-child(1){grid-row:1 / 3;min-height:520px;}
  .x-card:nth-child(3){min-height:260px;}
  .x-card .plate{position:absolute;inset:0;z-index:-1;transition:transform 1.1s var(--ease);}
  .x-card:hover .plate{transform:scale(1.045);}
  .x-card-body{position:relative;}
  .x-card h3{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:700;text-transform:uppercase;
    font-size:clamp(24px,2.3vw,32px);
    margin-bottom:.3em;
  }
  .x-card p{color:var(--ink-dim);font-size:14.5px;max-width:34ch;margin-bottom:1.1em;}
  .x-card .link-arrow{
    opacity:.75;transform:translateY(4px);
    transition:opacity .4s var(--ease),transform .4s var(--ease);
  }
  .x-card:hover .link-arrow{opacity:1;transform:translateY(0);}
  .x-card::before{
    content:"";position:absolute;inset:0;border:1px solid transparent;
    transition:border-color .5s var(--ease);pointer-events:none;
  }
  .x-card:hover::before{border-color:rgba(201,162,75,.4);}

  /* ---------- manifesto ---------- */
  .manifesto{text-align:center;}
  .manifesto blockquote{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:700;text-transform:uppercase;
    font-size:clamp(30px,5.4vw,68px);
    line-height:1.06;
    max-width:16ch;margin:0 auto;
  }
  .manifesto .lede{margin:1.6em auto 0;text-align:center;}

  /* ---------- studio triptych ---------- */
  .triptych{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
  .t-panel{background:var(--bg);display:flex;flex-direction:column;}
  .t-panel .plate{aspect-ratio:4/5;}
  .t-panel:first-child .plate{aspect-ratio:auto;height:100%;min-height:420px;}
  .t-body{padding:clamp(22px,2.4vw,32px);}
  .t-body .kicker{margin-bottom:.6em;}
  .t-body h3{
    font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;
    font-size:clamp(20px,2vw,26px);margin-bottom:.35em;
  }
  .t-body p{color:var(--ink-dim);font-size:14px;max-width:30ch;}

  /* ---------- showreel ---------- */
  .showreel-frame{
    display:block;
    position:relative;border-radius:22px;overflow:hidden;
    aspect-ratio:16/8.4;
    border:1px solid var(--line-strong);
  }
  .showreel-frame .plate{position:absolute;inset:0;}
  .play-btn{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:clamp(74px,9vw,104px);height:clamp(74px,9vw,104px);
    border-radius:50%;
    border:1px solid rgba(245,241,232,.5);
    background:rgba(11,12,16,.35);
    backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
  }
  .play-btn svg{width:26%;height:26%;margin-left:4%;fill:var(--ink);}
  .play-btn:hover{transform:translate(-50%,-50%) scale(1.08);border-color:var(--copper);background:rgba(201,162,75,.14);}
  .play-btn:active{transform:translate(-50%,-50%) scale(.96);}
  .showreel-caption{margin-top:1.2em;font-size:13px;color:var(--ink-faint);text-align:center;}

  /* ---------- projects strip : défilement automatique continu, même
     principe que .trust-track (deux copies identiques placées côte à côte,
     chacune glissant à -50% de sa propre largeur ; comme les deux copies
     sont identiques, la boucle est invisible). Pause au survol pour laisser
     le temps de cliquer une vignette. ---------- */
  .projects-track-row{
    margin-top:.4em;
    overflow:hidden;
    margin-left:clamp(-20px,-5vw,-72px);margin-right:clamp(-20px,-5vw,-72px);
    padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px);
    -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .projects-track{
    display:flex;gap:20px;flex:none;width:max-content;
    padding-bottom:8px;padding-right:20px;
    animation:projects-drift 52s linear infinite;
  }
  .projects-track-row:hover .projects-track{animation-play-state:paused;}
  @keyframes projects-drift{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .p-card{
    flex:0 0 clamp(260px,32vw,380px);
  }
  .p-card .plate{aspect-ratio:4/5;border-radius:14px;}
  .p-tag{
    display:inline-flex;margin-top:1em;padding:.35em .9em;border-radius:999px;
    border:1px solid var(--line-strong);
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
    color:var(--ink-faint);text-transform:uppercase;
  }
  .p-card h3{
    margin-top:.55em;font-family:'Big Shoulders Display',sans-serif;font-weight:700;
    text-transform:uppercase;font-size:22px;
  }
  .projects-note{margin-top:2em;color:var(--ink-faint);font-size:13.5px;}

  /* ---------- ils nous font confiance (trust strip) ---------- */
  .trust-section{
    padding:clamp(40px,5.5vw,64px) 0;
    border-top:1px solid var(--line);
  }
  .trust-row{
    margin-top:1.8em;
    display:flex;align-items:center;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .trust-track{
    display:flex;align-items:center;flex:none;width:max-content;
    gap:clamp(20px,2.6vw,32px);
    padding-right:clamp(20px,2.6vw,32px);
    animation:trust-drift 38s linear infinite;
  }
  .trust-row:hover .trust-track{animation-play-state:paused;}
  @keyframes trust-drift{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  /* every logo sits on its own very light card — real official colours,
     no grayscale — which is what keeps a pure-black or pure-navy mark
     legible on the dark page without touching the logo itself. */
  .trust-logo{
    flex:none;
    width:clamp(128px,13vw,168px);height:76px;
    display:flex;align-items:center;justify-content:center;
    background:var(--ink);
    border-radius:12px;
    padding:14px 18px;
    transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  }
  .trust-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain;}
  .trust-logo:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 1px var(--copper);}

  /* ---------- process ---------- */
  .process-line-wrap{margin-top:2.4em;}
  .process-svg{width:100%;height:3px;display:block;}
  .process-track{stroke:var(--line-strong);stroke-width:2;}
  .process-fill{stroke:var(--copper);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;}
  .process-steps{
    display:grid;grid-template-columns:repeat(5,1fr);gap:1.6em;margin-top:2.2em;
  }
  .p-step{opacity:.4;transition:opacity .6s var(--ease);}
  .p-step.is-active{opacity:1;}
  .p-step .num{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--copper);
    display:block;margin-bottom:.7em;
  }
  .p-step h3{
    font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;
    font-size:19px;margin-bottom:.4em;
  }
  .p-step p{font-size:13.5px;color:var(--ink-dim);}

  /* ---------- cta final ---------- */
  .cta-final{
    border-top:1px solid var(--line);
    display:grid;grid-template-columns:1.3fr auto;align-items:end;gap:2em;
  }
  .cta-final h2{font-size:clamp(34px,5.6vw,72px);max-width:14ch;}
  .cta-final .lede{margin-top:.6em;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(50px,7vw,80px) 0 34px;}
  .foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.6em;}
  .foot-brand .brand{margin-bottom:1em;}
  .foot-brand p{color:var(--ink-faint);font-size:13.5px;max-width:32ch;}
  .foot-col h4{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.1em;
  }
  .foot-col ul{display:flex;flex-direction:column;gap:.7em;}
  .foot-col li{font-size:13.5px;color:var(--ink-dim);}
  .foot-col a{font-size:13.5px;color:var(--ink-dim);transition:color .3s var(--ease);}
  .foot-col a:hover{color:var(--copper-soft);}
  .foot-bottom{
    margin-top:clamp(40px,6vw,64px);padding-top:1.8em;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;
    font-size:12.5px;color:var(--ink-faint);
  }

  /* ---------- responsive ---------- */
  /* tablette / petit desktop : la nav complète tient encore, mais serrée —
     on réduit les espacements et la taille du texte plutôt que de basculer
     au menu burger trop tôt. */
  @media (max-width:1300px) and (min-width:1025px){
    .nav{gap:clamp(8px,1.6vw,24px);padding-left:clamp(16px,3vw,72px);padding-right:clamp(16px,3vw,72px);}
    .nav-links{gap:.9em;}
    .nav-links a{font-size:12px;white-space:nowrap;}
    .nav-cta{padding:.65em 1.1em;font-size:12.5px;}
    .brand-logo{height:23px;}
  }
  @media (max-width:1024px){
    .nav-links,.nav-cta{display:none;}
    .nav-toggle{display:flex;}
    .expertise-grid{grid-template-columns:1fr;}
    .x-card:nth-child(1){grid-row:auto;min-height:340px;}
    .triptych{grid-template-columns:1fr;}
    .t-panel:first-child .plate{min-height:280px;}
    .process-steps{grid-template-columns:repeat(2,1fr);}
    .cta-final{grid-template-columns:1fr;}
    .cta-final .btn{margin-top:1.4em;}
    .foot-top{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    body{padding-left:20px;padding-right:20px;}
    .hero{padding-top:120px;}
    .hero-ctas{flex-direction:column;align-items:stretch;}
    .hero-ctas .btn{justify-content:center;}
    .process-steps{grid-template-columns:1fr;}
    .foot-top{grid-template-columns:1fr;gap:2em;}
  }

  @media (prefers-reduced-motion:reduce){
    /* A CSS animation's computed value beats a normal (non-!important) rule
       for the whole delay + duration, so a long animation-delay would leave
       these elements sitting at their 0% keyframe (invisible) for the length
       of that delay even under reduced motion. Every entrance animation is
       therefore fully cancelled here — animation:none plus explicit,
       !important final-state values — instead of just shortening it. */
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
    .hero h1 .line span{animation:none!important;transform:translateY(0)!important;}
    .hero h1 .copper .word{animation:none!important;opacity:1!important;transform:none!important;}
    .hero .lede,.hero-ctas{animation:none!important;opacity:1!important;transform:none!important;}
    .hero-glow,.hero-iris,.hero-stage::before,.hero-photo img{animation:none!important;}
    .reveal{opacity:1;transform:none;}
    .page-curtain,.cursor-dot,.cursor-ring{display:none!important;}
    .showreel-frame{transform:none!important;}
    .play-btn::after{display:none!important;}
    .cta-final::before{animation:none!important;opacity:.6!important;}
    .x-card,.t-panel,.p-card,.m-line span{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;}
  }

/* ================= EXTENDED SYSTEM (inner pages) ================= */

/* page hero (shorter than home hero, used by inner pages) */
.page-hero{
  min-height:64vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(90px,14vh,140px);
  padding-bottom:clamp(40px,6vh,64px);
  position:relative;
}
.page-hero-stage{position:absolute;inset:0 clamp(-20px,-5vw,-72px);z-index:-1;overflow:hidden;}
.page-hero-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg) 100%);}
.page-hero-content{max-width:760px;}
.page-hero h1{font-size:clamp(36px,6vw,80px);margin-bottom:.3em;}
.page-hero .lede{opacity:0;animation:fade-up .9s var(--ease) .3s both;}
.page-hero .crumb{
  display:block;margin-bottom:.6em;opacity:0;animation:fade-up .8s var(--ease) .05s both;
}

/* generic content row: label col + body col (used for editorial rows) */
.row{display:grid;grid-template-columns:.9fr 1.5fr;gap:clamp(24px,4vw,64px);align-items:start;}
.row + .row{margin-top:clamp(56px,7vw,96px);padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--line);}

/* gallery grid (video / photo pages) */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
}
.gallery.g-4{grid-template-columns:repeat(4,1fr);}
.g-item{background:var(--bg);position:relative;}
.g-item .plate{aspect-ratio:4/5;}
.g-item.wide{grid-column:span 2;}
.g-item.wide .plate{aspect-ratio:8/5;}
.g-caption{
  position:absolute;left:0;right:0;bottom:0;padding:1.1em 1.2em;
  background:linear-gradient(to top, rgba(11,12,16,.75), transparent);
}
.g-caption h3{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;}
.g-caption span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);}
.g-item{will-change:transform;transform-perspective:900px;}
.g-item .plate img{transition:transform .9s var(--ease);}
.g-item:hover .plate img{transform:scale(1.06);}

/* feature list (specs / capabilities, avoids default bullet dividers) */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.spec{background:var(--bg);padding:clamp(24px,2.6vw,34px);}
.spec .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--copper);display:block;margin-bottom:.8em;}
.spec h3{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:20px;margin-bottom:.4em;}
.spec p{font-size:13.5px;color:var(--ink-dim);}

/* pricing (offre) */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.price-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.price-card{background:var(--bg);padding:clamp(28px,2.8vw,38px);display:flex;flex-direction:column;position:relative;}
.price-card.is-featured{background:var(--bg-1);}
.price-tag{
  position:absolute;top:20px;right:20px;padding:.3em .8em;border-radius:999px;
  background:var(--copper);color:#181203;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.price-card .kicker{margin-bottom:1em;}
.price-card h3{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:24px;margin-bottom:.3em;}
.price-amount{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:clamp(30px,3vw,42px);color:var(--copper-soft);margin:.3em 0 1.1em;}
.price-amount small{font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;color:var(--ink-faint);}
.price-list{display:flex;flex-direction:column;gap:.65em;margin-bottom:1.6em;flex:1;}
.price-list li{display:flex;gap:.6em;font-size:13.5px;color:var(--ink-dim);}
.price-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--copper);flex:none;margin-top:.55em;}

/* vertical story / timeline (histoire) */
.story-line{position:relative;padding-left:clamp(28px,3vw,40px);}
.story-line::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-strong);}
.story-item{position:relative;padding-bottom:clamp(36px,4vw,52px);}
.story-item:last-child{padding-bottom:0;}
.story-item::before{content:"";position:absolute;left:-28px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px var(--bg);}
.story-item .kicker{margin-bottom:.5em;}
.story-item h3{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:22px;margin-bottom:.35em;}
.story-item p{font-size:14px;color:var(--ink-dim);max-width:56ch;}

/* values grid (philosophie) */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px);}
.value{text-align:left;}
.value svg{width:30px;height:30px;stroke:var(--copper);margin-bottom:1em;}
.value h3{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:18px;margin-bottom:.4em;}
.value p{font-size:13px;color:var(--ink-dim);}

/* founder callout */
.founder{display:flex;gap:clamp(20px,3vw,36px);align-items:center;}
.founder .plate{width:clamp(120px,14vw,180px);aspect-ratio:1;border-radius:50%;flex:none;}
.founder h3{font-family:'Big Shoulders Display',sans-serif;font-weight:700;text-transform:uppercase;font-size:22px;}
.founder .role{color:var(--copper);font-size:12.5px;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;margin:.3em 0 .8em;}
.founder p{font-size:14px;color:var(--ink-dim);max-width:52ch;}

/* stat row (verified counts only) */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,28px);}
.stat{border-top:1px solid var(--line-strong);padding-top:1em;}
.stat b{display:block;font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:clamp(28px,3vw,40px);color:var(--copper-soft);}
.stat span{font-size:12.5px;color:var(--ink-faint);}

/* avis (reviews) — honest empty state, no fabricated content */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.review-card{background:var(--bg);padding:clamp(26px,2.8vw,34px);display:flex;flex-direction:column;gap:1.4em;min-height:220px;justify-content:space-between;}
.review-mark{width:26px;height:26px;stroke:var(--line-strong);}
.review-empty p{font-size:13.5px;color:var(--ink-faint);}
.review-empty span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}

/* logo placeholder strip (trust bar, empty state) */
.logo-strip{
  display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.logo-slot{width:96px;height:34px;border:1px dashed var(--line-strong);border-radius:6px;opacity:.55;}

/* contact form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4em;}
.field{display:flex;flex-direction:column;gap:.55em;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-dim);}
.field input,.field select,.field textarea{
  background:var(--bg-1);border:1px solid var(--line-strong);border-radius:10px;
  padding:.9em 1em;color:var(--ink);font-family:'Manrope',sans-serif;font-size:14.5px;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:120px;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper);}
.contact-info{display:flex;flex-direction:column;gap:1.8em;}
.info-block h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6em;}
.info-block p{font-size:14.5px;color:var(--ink-dim);}
.checkbox-label{display:flex;align-items:flex-start;gap:.8em;cursor:pointer;}
.checkbox-label input{width:17px;height:17px;flex:none;margin-top:.15em;accent-color:var(--copper);}
.checkbox-label span{font-size:13px;color:var(--ink-dim);line-height:1.5;}
.form-note{margin-top:1em;font-size:12.5px;color:var(--ink-faint);}
.form-status{margin-top:1em;font-size:13.5px;color:var(--copper-soft);}

@media (max-width:1024px){
  .row{grid-template-columns:1fr;}
  .gallery,.gallery.g-4{grid-template-columns:repeat(2,1fr);}
  .spec-grid,.price-grid,.price-grid.cols-2,.review-grid{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:repeat(2,1fr);}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .founder{flex-direction:column;align-items:flex-start;text-align:left;}
}
@media (max-width:640px){
  .gallery,.gallery.g-4{grid-template-columns:1fr;}
  .g-item.wide{grid-column:span 1;}
}

.nav-links a.is-active,.mobile-panel nav a.is-active{color:var(--copper-soft);}
.nav-links a.is-active::after{right:0;}

/* ================= MOTION SYSTEM v2 ================= */
/* Langage d'animation Gentle Vision : chaque type de contenu a sa propre
   signature (masque pour le texte héroïque, flou-montée pour le manifeste,
   clip-path pour les cartes, échelle pour le showreel, glissement alterné
   pour le triptyque). Rien ne réutilise le même fade partout.
   Principe de robustesse : l'état par défaut en CSS est TOUJOURS l'état final
   visible ; c'est le JS qui, s'il peut s'exécuter, place un état de départ
   temporaire juste avant d'animer. Si GSAP/le CDN est indisponible, rien ne
   reste bloqué invisible. */

/* ---------- rideau d'entrée / transition de page ---------- */
.page-curtain{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(0);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.page-curtain.is-hidden{transform:translateY(-100%);}
.page-curtain.is-gone{display:none;}
.page-curtain-mark{width:50px;height:50px;opacity:0;animation:curtain-mark-in .5s var(--ease) .12s forwards;}
.page-curtain-mark path{stroke-dasharray:130;stroke-dashoffset:130;animation:curtain-draw 1s var(--ease) .16s forwards;}
@keyframes curtain-mark-in{to{opacity:1;}}
@keyframes curtain-draw{to{stroke-dashoffset:0;}}

/* ---------- curseur personnalisé (desktop uniquement) ---------- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:300;
  pointer-events:none;
  border-radius:50%;
  will-change:transform;
}
.cursor-dot{width:6px;height:6px;background:var(--copper-soft);opacity:0;transition:opacity .3s var(--ease);}
.cursor-ring{
  width:36px;height:36px;border:1px solid var(--copper);opacity:0;
  transition:opacity .3s var(--ease),width .4s var(--ease),height .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.has-cursor .cursor-dot,.has-cursor .cursor-ring{opacity:1;}
.cursor-ring.is-active{width:60px;height:60px;border-color:var(--copper-soft);background:rgba(201,162,75,.08);}
.cursor-ring.is-pressed{width:30px;height:30px;}
.has-cursor,.has-cursor a,.has-cursor button{cursor:none;}

/* ---------- manifeste : flou + montée (distinct du masque du hero) ---------- */
.m-line{display:block;overflow:hidden;}
.m-line span{display:block;}

/* ---------- cartes expertises : clip-path (pas de fade) ---------- */
.x-card{will-change:clip-path;}

/* ---------- triptyque studio : glissement alterné ---------- */
.t-panel{will-change:transform,opacity;}

/* ---------- showreel : jamais invisible, juste plus petit par défaut.
   Grandit nettement au scroll (presque plein cadre) puis se stabilise —
   voir la séquence en deux temps dans site.js. ---------- */
.showreel-frame{transform:scale(.84);transform-origin:center;will-change:transform;}
.play-btn{overflow:visible;transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);}
.play-btn::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--copper);opacity:0;pointer-events:none;
  animation:pulse-ring 3.2s ease-out infinite;
}
.play-btn:hover::after{animation-duration:1.9s;}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.42;}
  100%{transform:scale(1.3);opacity:0;}
}

/* ---------- projets : piste auto-défilante + média cadré ---------- */
.p-card{will-change:transform;}
.p-media{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:4/5;}
.p-media .plate{position:absolute;inset:0;aspect-ratio:auto;transition:transform .8s var(--ease);}
.p-media::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(245,241,232,0);
  background:linear-gradient(to top, rgba(11,12,16,.38), transparent 45%);
  opacity:0;transition:opacity .5s var(--ease);
}
.p-card:hover .p-media .plate{transform:scale(1.055);}
.p-card:hover .p-media::after{opacity:1;}
.x-card .plate-mark svg{transition:transform .7s var(--ease);}
.x-card:hover .plate-mark svg{transform:scale(1.05) rotate(2deg);}

/* ---------- boutons : suivi magnétique (desktop) ---------- */
.btn{will-change:transform;}

/* ---------- logo : léger frémissement au survol ---------- */
.brand svg{transition:transform .5s var(--ease);}
.brand:hover svg{transform:rotate(-5deg) scale(1.04);}

/* ---------- continuité entre sections : la lumière cuivre du hero se
   prolonge discrètement à travers la page plutôt que de s'arrêter net ---------- */
.manifesto::before{
  content:"";position:absolute;left:50%;top:-6%;
  width:56vw;max-width:760px;aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(201,162,75,.09),transparent 66%);
  pointer-events:none;z-index:-1;
}
#process::before{
  content:"";position:absolute;left:12%;top:-8%;
  width:46vw;max-width:600px;aspect-ratio:1;
  background:radial-gradient(circle,rgba(201,162,75,.07),transparent 66%);
  pointer-events:none;z-index:-1;
}

/* ---------- CTA final : lueur douce + relief ---------- */
.cta-final{overflow:hidden;}
.cta-final::before{
  content:"";position:absolute;left:50%;top:45%;
  width:70vw;max-width:900px;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(201,162,75,.15),transparent 62%);
  pointer-events:none;z-index:-1;
  animation:glow-breathe 9s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:.72;transform:translate(-50%,-50%) scale(1.045);}
}

/* ---------- menu plein écran : numérotation éditoriale ---------- */
.mobile-panel{position:fixed;overflow:hidden;}
.mobile-panel::before{
  content:"";position:absolute;left:50%;top:-10%;
  width:70vmax;height:70vmax;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(201,162,75,.10),transparent 60%);
  pointer-events:none;
}
.mobile-panel nav{counter-reset:navcount;position:relative;}
.mobile-panel nav a{
  counter-increment:navcount;position:relative;padding-left:1.9em;
  transition:color .35s var(--ease),padding-left .35s var(--ease);
}
.mobile-panel nav a::before{
  content:counter(navcount,decimal-leading-zero);
  position:absolute;left:0;top:.5em;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;color:var(--copper);
  letter-spacing:0;text-transform:none;
}
.mobile-panel nav a:hover{color:var(--copper-soft);padding-left:2.3em;}

@media (max-width:640px){
  .cursor-dot,.cursor-ring{display:none;}
}