:root{
    --bg:#0b0b0c;
    --bg-rgb:11,11,12;
    --bg-alt:#141416;
    --fg:#eeeeee;
    --fg-dim:#787880;
    --red:#e9e9ea;
    --accent-ink:#0b0b0c;
    --line:rgba(255,255,255,0.16);
    --line-soft:rgba(255,255,255,0.07);
    --surface:#101012;
    --stripe-opacity:0.05;
    --body:#b7b7bd;
  }
  [data-theme="light"]{
    --bg:#d3d3d6;
    --bg-rgb:211,211,214;
    --bg-alt:#c7c7cb;
    --fg:#0d0d0f;
    --fg-dim:#5c5c64;
    --red:#101012;
    --accent-ink:#eeeeee;
    --line:rgba(10,10,12,0.20);
    --line-soft:rgba(10,10,12,0.08);
    --surface:#c9c9cd;
    --stripe-opacity:0.06;
    --body:#33333b;
  }
  *{margin:0;padding:0;box-sizing:border-box;}

  /* "Prestations" summary reads as a horizontal band: it always runs the
     opposite theme from the rest of the page (light-on-dark site → this
     section goes dark-on-light, and vice versa) so it stands out. The
     background breaks out to the full width of the viewport; only the
     text inside stays lined up with the rest of the site's content. */
  #services-summary{
    --bg:#f5f4f1; --bg-rgb:245,244,241; --bg-alt:#ebeae6; --fg:#0c0c0c; --fg-dim:#6b6b6b;
    --line:rgba(10,10,10,0.14); --line-soft:rgba(10,10,10,0.07); --surface:#e7e6e2;
    --stripe-opacity:0.07; --body:#3a3a3a;
    background:var(--bg); color:var(--fg);
    transition:background-color .35s ease, color .35s ease;
    max-width:none; width:100vw; position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw; padding:0;
  }
  [data-theme="light"] #services-summary{
    --bg:#0a0a0a; --bg-rgb:10,10,10; --bg-alt:#131313; --fg:#f4f3f1; --fg-dim:#8f8f8f;
    --line:rgba(255,255,255,0.14); --line-soft:rgba(255,255,255,0.07); --surface:#111111;
    --stripe-opacity:0.05; --body:#c9c9c9;
  }
  .services-summary-inner{padding:130px 40px; max-width:1400px; margin:0 auto;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:'Space Grotesk',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background-color .35s ease, color .35s ease;
  }
  ::selection{background:var(--red);color:var(--fg);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .mono{font-family:'Space Mono',monospace;}
  .display{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0.01em;}

  /* progress bar */
  #progress{position:fixed;top:0;left:0;height:2px;background:var(--red);z-index:999;width:0%;transition:width .1s linear;}

  /* reveal */
  .reveal{opacity:0;transform:translateY(38px) scale(0.975);transition:opacity 1s cubic-bezier(.16,.8,.3,1),transform 1s cubic-bezier(.16,.8,.3,1);}
  .reveal.in{opacity:1;transform:translateY(0) scale(1);}
  .reveal-delay1.in{transition-delay:.08s;}
  .reveal-delay2.in{transition-delay:.16s;}

  /* scroll-linked parallax (JS-driven, no CSS transition: smoothing happens per-frame in JS) */
  .parallax-img{will-change:transform;}

  @media (prefers-reduced-motion: reduce){
    .reveal, .ed-reveal, .ed-reveal-l, .ed-reveal-r, .ed-reveal-row{transition-duration:.2s !important; transform:none !important; filter:none !important;}
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 40px;
    background:rgba(var(--bg-rgb),0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
  .brand img{height:28px;width:auto;display:block;transition:filter .3s ease;}
  [data-theme="light"] .brand img{filter:invert(1);}
  [data-theme="light"] .signature-block img{filter:invert(1);}
  .brand span{font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:0.03em;white-space:nowrap;}
  nav.links{display:flex;gap:14px;align-items:center;}
  nav.links a{
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;
    position:relative;padding-bottom:3px;color:var(--fg);
  }
  nav.links a span.num{color:var(--red);margin-right:4px;}
  nav.links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--red);transition:width .25s ease;}
  nav.links a:hover::after{width:100%;}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
  .burger span{width:24px;height:2px;background:var(--fg);display:block;}

  /* ---------- TOGGLES (lang + theme) ---------- */
  .toggle-group{display:flex;align-items:center;gap:8px;}
  .toggle-btn{
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.05em;
    background:none;border:1px solid var(--line);color:var(--fg-dim);cursor:pointer;
    padding:7px 11px;display:flex;align-items:center;gap:6px;transition:border-color .2s ease,color .2s ease;
  }
  .toggle-btn:hover{border-color:var(--red);color:var(--fg);}
  .lang-toggle .lang-opt{opacity:0.4;transition:opacity .2s ease;}
  .lang-toggle .lang-opt.active{opacity:1;color:var(--fg);}
  .lang-toggle .lang-sep{opacity:0.3;}
  .theme-toggle .theme-icon{font-size:13px;line-height:1;}

  /* ---------- HERO ---------- */
  .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 40px 60px;overflow:hidden;}
  /* the page's background: pinned to the viewport, permanently — it never
     moves and never fades, from the top of the page to the very bottom.
     Everything else (header, sections, text, images) scrolls normally
     above it. Louis may swap this for an image background later. */
  .hero-fixed-bg{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:var(--bg);
    transition:background-color .35s ease;
  }
  .hero-eyebrow{display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.12em;color:var(--fg-dim);margin-bottom:28px;text-transform:uppercase;}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
  h1.hero-title{font-size:clamp(56px,10vw,140px);line-height:0.92;will-change:transform;}
  h1.hero-title em{color:var(--red);font-style:normal;}
  .hero-sub{max-width:560px;margin-top:26px;font-size:17px;line-height:1.6;color:var(--body);}
  .hero-meta{display:grid;grid-template-columns:repeat(3,auto);gap:50px;margin-top:64px;border-top:1px solid var(--line);padding-top:22px;max-width:900px;align-items:center;}
  .hero-meta div .label{font-family:'Space Mono',monospace;font-size:10px;color:var(--fg-dim);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;}
  .hero-meta div .value{font-size:15px;font-weight:600;}
  .meta-available{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;}
  .scroll-cue{position:absolute;bottom:36px;left:40px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--fg-dim);display:flex;align-items:center;gap:10px;}
  .scroll-cue .line{width:34px;height:1px;background:var(--fg-dim);}

  /* ---------- SECTIONS ---------- */
  .section{padding:130px 40px;max-width:1400px;margin:0 auto;}
  .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:70px;flex-wrap:wrap;gap:20px;}
  .section-head .tag{font-family:'Space Mono',monospace;font-size:12px;color:var(--red);letter-spacing:0.12em;margin-bottom:14px;display:block;}
  .section-head h2{font-size:clamp(34px,5vw,64px);line-height:1;}
  .section-head h2 em{color:var(--red);font-style:normal;}
  .section-head p{max-width:420px;font-size:15px;color:var(--fg-dim);line-height:1.6;}

  /* ---------- WORK ITEMS ---------- */
  .project{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;padding:70px 0;border-top:1px solid var(--line);align-items:center;cursor:pointer;}
  .project:nth-child(even){grid-template-columns:1.1fr 0.9fr;}
  .project:nth-child(even) .project-media{order:2;}
  .project:nth-child(even) .project-info{order:1;}
  .project-info .idx{font-family:'Space Mono',monospace;color:var(--red);font-size:13px;letter-spacing:0.1em;margin-bottom:14px;display:block;}
  .project-info h3{font-size:clamp(30px,4vw,48px);line-height:1;margin-bottom:14px;}
  .project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
  .project-tags span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.06em;border:1px solid var(--line);padding:5px 10px;text-transform:uppercase;color:var(--fg-dim);}
  .project-tags span.personal{color:var(--red);border-color:var(--red);}
  .project-pitch{font-size:16px;font-weight:600;margin-bottom:14px;}
  .project-desc{font-size:14.5px;line-height:1.7;color:var(--body);margin-bottom:26px;}
  .specs-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:26px;border-top:1px solid var(--line-soft);padding-top:20px;}
  .specs-row div .label{font-family:'Space Mono',monospace;font-size:9.5px;color:var(--fg-dim);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:5px;}
  .specs-row div .val{font-size:14px;font-weight:700;}
  .features{list-style:none;}
  .features li{font-size:13.5px;padding:9px 0;border-top:1px solid var(--line-soft);display:flex;gap:10px;color:var(--body);}
  .features li::before{content:'—';color:var(--red);flex-shrink:0;}
  .project-media{position:relative;overflow:hidden;background:var(--surface);aspect-ratio:1/1;}
  .project-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease,filter .6s ease;filter:grayscale(25%) brightness(0.92);}
  .project:hover .project-media img{transform:scale(1.045);filter:grayscale(0%) brightness(1);}
  .has-video{position:absolute;top:16px;right:16px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.08em;color:#fff;background:rgba(130,130,140,0.32);padding:6px 10px;}
  /* même pastille pour les projets qui embarquent un modèle 3D */
  .has-3d{position:absolute;top:16px;right:16px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.08em;color:#fff;background:rgba(130,130,140,0.32);padding:6px 10px;}
  /* si le projet a AUSSI une vidéo, la pastille 3D se place en dessous */
  .has-video ~ .has-3d{top:48px;}
  .video-block{margin-top:40px;text-align:center;}
  .video-block video{max-width:100%;max-height:640px;width:auto;display:inline-block;background:transparent;}
  .video-block .video-label{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--fg-dim);letter-spacing:0.05em;padding:10px 2px 0;text-align:left;}
  .project-view-link{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;color:var(--red);margin-top:22px;display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;}
  .project:hover .project-view-link{gap:14px;}
  .project-view-link{transition:gap .25s ease;}
  .pipeline{display:flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--fg-dim);margin-top:18px;flex-wrap:wrap;}
  .pipeline b{color:var(--fg);}
  .pipeline .arrow{color:var(--red);}

  /* ---------- FEATURED STACK (pinned scroll deck, desktop only) ---------- */
  .stack-wrap{position:relative;}
  .stack-sticky{
    position:sticky; top:0; height:100vh;
    display:flex; align-items:center; gap:50px;
    padding:110px 40px 50px; max-width:1400px; margin:0 auto;
  }
  .stack-text-col{
    flex:0 0 500px; position:relative; height:460px;
    display:grid; grid-template-columns:132px minmax(0,1fr); gap:24px;
  }
  .stack-copy-col{position:relative; height:100%; min-width:0;}
  .stack-text-item{
    position:absolute; inset:0;
    opacity:0; transform:translateY(30px);
    transition:opacity .55s cubic-bezier(.16,.8,.3,1), transform .55s cubic-bezier(.16,.8,.3,1);
    pointer-events:none;
  }
  .stack-text-item.active{opacity:1; transform:translateY(0); pointer-events:auto;}
  .stack-text-link{
    position:absolute; top:0; left:0; right:0; bottom:64px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .stack-title{font-size:clamp(30px,3.6vw,46px);line-height:1.02;margin-bottom:16px;}
  .stack-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
  .stack-tags span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:0.06em;border:1px solid var(--line);padding:5px 10px;text-transform:uppercase;color:var(--fg-dim);}
  .stack-pitch{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:24px;color:var(--body);}
  .stack-link{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;color:var(--red);display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;transition:gap .25s ease;width:fit-content;}
  .stack-text-item:hover .stack-link{gap:14px;}
  .stack-text-item:hover .stack-title{color:var(--red);}
  .stack-nav-btns{position:absolute; left:0; bottom:0; display:flex;gap:10px;}
  .stack-nav-btn{
    width:38px; height:38px; border-radius:0; border:1px solid var(--line);
    background:none; color:var(--fg); font-size:15px; line-height:1; font-family:inherit;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .2s ease, color .2s ease, transform .2s ease;
  }
  .stack-nav-btn:hover{border-color:var(--red); color:var(--red); transform:translateY(-2px);}
  .stack-nav-btn:disabled{opacity:0.25; cursor:default; pointer-events:none; transform:none;}
  .stack-media-col{flex:1; position:relative; aspect-ratio:1/1; max-width:min(640px, 70vh); max-height:70vh;}
  .stack-card{
    position:absolute; inset:0; display:block; border-radius:3px; overflow:hidden;
    background:var(--surface); will-change:transform,opacity;
    box-shadow:0 40px 90px rgba(0,0,0,0.4);
    cursor:grab; touch-action:none;
    -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  }
  .stack-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,.8,.3,1);-webkit-user-drag:none;user-select:none;pointer-events:none;}
  .stack-card:hover img{transform:scale(1.04);}
  .stack-card .has-video{top:auto;bottom:16px;}
  .stack-card .has-3d{top:auto;bottom:16px;}
  .stack-card .has-video ~ .has-3d{top:auto;bottom:48px;}
  .stack-media-col.dragging{cursor:grabbing;}
  .stack-media-col.dragging .stack-card{cursor:grabbing;}
  .stack-media-col.dragging .stack-card img{transition:none;transform:none;}
  @media (max-width:1023px){
    .stack-media-col{max-width:none;}
  }

  /* ---------- MORE WORK ---------- */
  .more-work{margin-top:60px;}
  .more-work-list{border-top:1px solid var(--line);}
  .mw-item{display:block;padding:18px 4px;border-bottom:1px solid var(--line);overflow:hidden;transition:padding-left .25s ease,background .25s ease,opacity 1s cubic-bezier(.16,.8,.3,1);cursor:pointer;}
  .mw-item:hover{padding-left:14px;background:rgba(150,150,158,0.06);}
  .mw-item-inner{display:flex;align-items:center;gap:22px;transition:transform 1s cubic-bezier(.16,.8,.3,1);}
  .mw-item.reveal .mw-item-inner{transform:translateX(-100vw);}
  .mw-item.reveal.in .mw-item-inner{transform:translateX(0);}
  .mw-thumb{width:74px;height:56px;flex-shrink:0;overflow:hidden;background:var(--surface);position:relative;}
  .mw-video-badge{
    position:absolute; bottom:4px; right:4px; width:16px; height:16px; border-radius:50%;
    background:var(--red); color:#fff; font-size:7px; line-height:1;
    display:flex; align-items:center; justify-content:center; padding-left:1px;
    box-shadow:0 0 0 2px rgba(0,0,0,0.25);
  }
  .mw-3d-badge{
    position:absolute; bottom:4px; right:4px; width:16px; height:16px; border-radius:50%;
    background:var(--red); color:#fff; font-size:7px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 2px rgba(0,0,0,0.25);
  }
  /* décalée à gauche quand une pastille vidéo occupe déjà le coin */
  .mw-video-badge + .mw-3d-badge{right:24px;}
  .mw-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%);transition:filter .3s ease,transform .4s ease;}
  .mw-item:hover .mw-thumb img{filter:grayscale(0%);transform:scale(1.08);}
  .mw-item .mw-name{font-size:22px;font-family:'Archivo Black',sans-serif;text-transform:uppercase;flex:1;}
  .mw-item .mw-cat{font-family:'Space Mono',monospace;font-size:11px;color:var(--fg-dim);letter-spacing:0.06em;flex:1;}
  .mw-item .mw-year{font-family:'Space Mono',monospace;font-size:11px;color:var(--red);}
  .mw-item .mw-arrow{font-family:'Space Mono',monospace;font-size:14px;color:var(--red);opacity:0;transition:opacity .25s ease,transform .25s ease;transform:translateX(-6px);}
  .mw-item:hover .mw-arrow{opacity:1;transform:translateX(0);}

  /* ---------- CMF / SKETCH GRIDS ---------- */
  .media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .media-card{background:var(--surface);overflow:hidden;}
  .media-card img{width:100%;height:auto;display:block;transition:transform .6s ease;}
  .media-card:hover img{transform:scale(1.03);}
  .media-card .cap{padding:14px 2px 0;font-family:'Space Mono',monospace;font-size:11px;color:var(--fg-dim);letter-spacing:0.04em;}
  .media-card .cap b{color:var(--fg);}
  .section-banner{width:100%;margin-bottom:22px;background:var(--surface);overflow:hidden;position:relative;}
  .section-banner img{width:100%;height:auto;display:block;}
  .section-standalone{width:100%;margin-bottom:22px;background:var(--surface);overflow:hidden;position:relative;}
  .section-standalone img{width:100%;height:auto;display:block;}
  .pair-grid{display:flex;flex-direction:column;gap:0;}

  /* CMF glass mask: a slab of reeded/fluted glass sitting over the image —
     vertical ridges catch light and shadow to read as real volume, not a
     flat overlay. Width varies per image (set inline, 35–80%). Click, or
     drag it to the right, to slide the pane away and reveal the image. */
  .cmf-glass-mask{
    position:absolute; top:0; right:0; bottom:0; width:50%;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(7px) saturate(1.15);
    -webkit-backdrop-filter:blur(7px) saturate(1.15);
    background-color:rgba(240,239,235,0.16);
    background-image:repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.62) 0px,
      rgba(255,255,255,0.46) 1px,
      rgba(255,255,255,0.02) 3px,
      rgba(0,0,0,0.34) 5.5px,
      rgba(0,0,0,0.04) 7px,
      rgba(255,255,255,0.34) 9px,
      rgba(255,255,255,0.62) 11px
    );
    background-size:11px 100%;
    box-shadow:
      inset 10px 0 26px -10px rgba(0,0,0,0.45),
      inset -3px 0 0 rgba(255,255,255,0.7),
      inset 0 0 40px rgba(255,255,255,0.08);
    cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;
    transition:transform .6s cubic-bezier(.16,.8,.3,1), opacity .6s cubic-bezier(.16,.8,.3,1);
  }
  .cmf-glass-mask:active{cursor:grabbing;}
  .cmf-glass-mask.dismissed{transform:translateX(100%); opacity:0; pointer-events:none;}
  .cmf-mask-label{
    font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; color:#fff; text-align:center; line-height:1.5;
    padding:13px 22px; background:rgba(8,8,8,0.82); border-radius:3px; pointer-events:none;
  }
  .cmf-mask-label .arrow{display:block; font-size:16px; margin-top:6px;}
  [data-theme="light"] .cmf-mask-label{background:#0a0a0a !important; color:#fff !important; mix-blend-mode:normal !important;}
  @media (prefers-reduced-motion: reduce){
    .cmf-glass-mask{transition-duration:.2s;}
  }
  .pair-row{display:flex;gap:26px;}
  .pair-row figure{margin:0;flex:1;min-width:0;background:var(--surface);}
  .pair-row img{width:100%;height:auto;display:block;}
  .placeholder-note{font-family:'Space Mono',monospace;font-size:12px;color:var(--fg-dim);border:1px dashed var(--line);padding:26px;text-align:center;}

  /* ---------- RESUME ---------- */
  .resume-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
  .about-intro{display:flex;gap:60px;align-items:flex-start;margin-bottom:90px;}
  /* company / studio intro block (above the designer presentation) */
  .about-company{max-width:760px;margin:0 0 64px;}
  .about-company .tag{display:block;margin-bottom:18px;}
  .about-company-name{font-family:'Archivo Black',sans-serif;font-size:clamp(26px,3vw,40px);letter-spacing:0.01em;text-transform:lowercase;margin-bottom:22px;line-height:1;}
  .about-company p{font-size:16px;line-height:1.7;color:var(--muted,#8f8e8a);margin-bottom:16px;max-width:70ch;}
  .about-company p:last-child{margin-bottom:0;}
  .about-designer-tag{display:block;margin-bottom:24px;}

  /* ---------- SERVICES SUMMARY (homepage teaser) ---------- */
  .services-summary-row{display:flex;gap:70px;align-items:center;margin-top:50px;}
  .services-marks{display:flex;gap:0;flex:0 0 auto;}
  .services-marks .sm-mark{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);margin-left:-1px;background:var(--bg);}
  .services-marks .sm-mark img{width:60%;height:60%;object-fit:contain;filter:brightness(0) invert(1);}
  [data-theme="light"] .services-marks .sm-mark img{filter:brightness(0) invert(0);}
  .services-summary-text{flex:1;max-width:520px;color:var(--body);font-size:15px;line-height:1.75;}
  .btn-view-all{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg);border:1px solid var(--line);padding:14px 22px;flex-shrink:0;transition:border-color .2s ease,color .2s ease,background .2s ease;}

  .testimonial-preview{width:100%;margin:40px 0 10px;min-height:140px;opacity:0;transition:opacity .6s ease;}
  .testimonial-preview.tp-visible{opacity:1;}
  .tp-cursor{display:inline-block;width:2px;height:1em;background:var(--red);margin-left:2px;vertical-align:text-bottom;animation:tp-blink 0.8s step-end infinite;}
  @keyframes tp-blink{0%,100%{opacity:1;}50%{opacity:0;}}
  .btn-view-all:hover{border-color:var(--red);background:var(--red);color:#fff;}

  /* "Voir tous les services" button: red/white at rest, then flips to the
     SITE's actual global theme colours on hover (not this section's own
     inverted band colours) — black on hover in dark mode, white on hover
     in light mode. Scoped so the "Voir les retours clients" button (same
     shared class, used further down) is unaffected. */
  #services-summary .btn-view-all{background:var(--red); color:#fff; border-color:var(--red);}
  #services-summary .btn-view-all:hover{background:#0a0a0a; color:#f4f3f1; border-color:#0a0a0a;}
  [data-theme="light"] #services-summary .btn-view-all:hover{background:#f5f4f1; color:#0c0c0c; border-color:#f5f4f1;}

  /* ---------- MÉTHODE (process) + FAQ ---------- */
  #method{max-width:1400px; margin:0 auto; padding:84px 40px 0;}
  .method-steps{margin:50px 0 0; border-top:1px solid var(--line);}
  .method-step{display:flex; gap:34px; align-items:flex-start; padding:34px 0; border-bottom:1px solid var(--line);}
  .method-step .ms-num{font-family:'Archivo Black',sans-serif; font-size:clamp(34px,5vw,62px); line-height:0.9; color:var(--red); flex:0 0 auto; min-width:1.4em;}
  .method-step .ms-body{padding-top:6px;}
  .method-step .ms-body h3{font-family:'Archivo Black',sans-serif; font-size:clamp(19px,2.4vw,26px); letter-spacing:0.01em; text-transform:uppercase; margin:0 0 10px;}
  .method-step .ms-body p{font-size:15px; line-height:1.7; color:var(--body); max-width:60ch; margin:0;}

  .faq-block{margin-top:100px;}
  .faq-head{margin-bottom:8px;}
  .faq-list{border-top:1px solid var(--line); max-width:900px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; background:none; border:none; padding:24px 0; cursor:pointer; text-align:left; color:var(--fg); font-family:inherit; font-size:clamp(15px,1.7vw,18px); font-weight:500; line-height:1.35; transition:color .2s ease;}
  .faq-q:hover{color:var(--red);}
  .faq-icon{position:relative; flex:0 0 auto; width:16px; height:16px;}
  .faq-icon::before,.faq-icon::after{content:''; position:absolute; background:var(--red); transition:transform .3s ease, opacity .2s ease;}
  .faq-icon::before{top:7px; left:0; width:16px; height:2px;}
  .faq-icon::after{top:0; left:7px; width:2px; height:16px;}
  .faq-item.open .faq-icon::after{transform:scaleY(0);}
  .faq-a{overflow:hidden; max-height:0; transition:max-height .35s ease;}
  .faq-a p{margin:0; padding:0 0 26px; font-size:15px; line-height:1.75; color:var(--body); max-width:70ch;}
  @media (max-width:1023px){
    #method{padding:56px 22px 0;}
    .method-step{gap:20px; padding:26px 0;}
    .faq-block{margin-top:70px;}
    .faq-q{padding:20px 0; font-size:15px;}
  }

  /* ---------- LOGO CREATION & GRAPHIC IDENTITY (full services page) ---------- */
  .service-intro{max-width:640px;color:var(--body);font-size:15.5px;line-height:1.75;margin-top:8px;}
  .logo-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:60px 0 80px;}
  .logo-card{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;}
  .logo-card img{width:70%;height:70%;object-fit:contain;filter:brightness(0) invert(1);transition:transform .3s ease;}
  [data-theme="light"] .logo-card img{filter:brightness(0) invert(0);}
  .logo-card-big img{width:78%;height:78%;}

  .logo-mark-frame{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:none;}
  .presta-img .logo-mark-img{width:56%;height:56%;object-fit:contain;border:none;cursor:zoom-in;filter:brightness(0) invert(1);}
  [data-theme="light"] .presta-img .logo-mark-img{filter:brightness(0) invert(0);}
  .presta-img .logo-mark-img.logo-mark-boost{width:56%;height:56%;}
  .presta-img #logo-example-1{width:76%;height:76%;}
  .logo-card:hover img{transform:scale(1.08);}

  .process-flow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:90px;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .process-step{flex:1;min-width:130px;text-align:center;}
  .process-step .pn{font-family:'Space Mono',monospace;font-size:11px;color:var(--red);letter-spacing:0.1em;display:block;margin-bottom:10px;}
  .process-step .pl{font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:0.02em;text-transform:uppercase;}
  .process-arrow{color:var(--fg-dim);font-size:20px;flex-shrink:0;}

  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:40px;}
  .price-card{border:1px solid var(--line);padding:40px 32px;text-align:center;transition:border-color .2s ease,background .2s ease,color .2s ease;cursor:pointer;user-select:none;}
  .price-card:hover{border-color:var(--red);}
  .price-card .pc-count{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.1em;color:var(--fg-dim);text-transform:uppercase;margin-bottom:18px;transition:color .2s ease;}
  .price-card .pc-amount{font-family:'Archivo Black',sans-serif;font-size:52px;line-height:1;margin-bottom:10px;}
  .price-card .pc-amount span{font-size:0.35em;color:var(--red);margin-left:6px;transition:color .2s ease;}
  .price-card .pc-unit{font-family:'Space Mono',monospace;font-size:11px;color:var(--fg-dim);transition:color .2s ease;}
  .price-card.selected{background:var(--red);border-color:var(--red);}
  .price-card.selected .pc-count, .price-card.selected .pc-unit{color:rgba(255,255,255,0.8);}
  .price-card.selected .pc-amount{color:#fff;}
  .price-card.selected .pc-amount span{color:#fff;}
  .pricing-note{text-align:left;font-family:'Space Mono',monospace;font-size:11.5px;color:var(--fg-dim);margin-top:22px;margin-bottom:90px;line-height:1.6;}

  .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:90px;align-items:stretch;}
  .service-card{border:1px solid var(--line);padding:36px 30px;display:flex;flex-direction:column;transition:border-color .25s ease;}
  .service-card:hover{border-color:var(--red);}
  .service-card h3{font-family:'Archivo Black',sans-serif;font-size:22px;text-transform:uppercase;margin-bottom:20px;}
  .service-sub{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid var(--line-soft);}
  .service-sub:last-child{margin-top:auto;}
  .service-sub .sl{font-size:13.5px;color:var(--body);}
  .service-sub .sp{font-family:'Space Mono',monospace;font-size:14px;font-weight:700;white-space:nowrap;margin-left:14px;}
  .service-card .single-price{margin-top:auto;padding-top:20px;font-family:'Archivo Black',sans-serif;font-size:34px;}
  .service-card .single-price span{font-size:0.4em;color:var(--red);margin-left:6px;}
  .service-card .quote-price{margin-top:auto;padding-top:20px;font-family:'Space Mono',monospace;font-size:13px;color:var(--red);letter-spacing:0.03em;}

  .example-gallery{margin:50px 0 90px;}
  .example-gallery-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--fg-dim);text-transform:uppercase;margin-bottom:20px;display:block;}
  .example-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .example-grid img{width:100%;height:auto;display:block;border:1px solid var(--line);cursor:zoom-in;transition:transform .3s ease;}
  .example-grid a img{cursor:pointer;}
  .example-grid a:hover img{transform:translateY(-4px);border-color:var(--red);}
  .example-grid img:hover{transform:translateY(-4px);}

  .service-contact{border-top:1px solid var(--line);padding-top:60px;margin-top:20px;}
  .service-contact h3{font-family:'Archivo Black',sans-serif;font-size:clamp(26px,3vw,38px);text-transform:uppercase;margin-bottom:30px;}
  .service-contact .msg-form{max-width:640px;}
  .services-divider{border-top:1px solid var(--line);margin:100px 0;}

  .presta-selector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:50px 0 30px;}
  .presta-select-card{aspect-ratio:2/1;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;}
  .presta-select-card:hover{border-color:var(--red);}
  .presta-select-card .psc-num{font-family:'Space Mono',monospace;font-size:11px;color:var(--red);letter-spacing:0.1em;margin-bottom:14px;transition:color .2s ease;}
  .presta-select-card .psc-label{font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:0.01em;text-transform:uppercase;line-height:1.15;}
  .presta-select-card.active{background:var(--red);border-color:var(--red);}
  .presta-select-card.active .psc-num, .presta-select-card.active .psc-label{color:#fff;}

  .presta-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.16,.8,.3,1),opacity .4s ease;}
  .presta-panel.open{max-height:12000px;opacity:1;padding-top:70px;}

  /* ---------- TESTIMONIALS ---------- */
  .testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:60px 0 90px;}
  .testimonial-card{border:1px solid var(--line);padding:38px 34px;display:flex;flex-direction:column;}
  .testimonial-card .tc-quote-mark{font-family:'Archivo Black',sans-serif;font-size:52px;color:var(--red);line-height:1;margin-bottom:14px;}
  .testimonial-card .tc-text{font-size:15px;line-height:1.75;color:var(--body);flex:1;margin-bottom:26px;font-style:italic;}
  .testimonial-card .tc-footer{border-top:1px solid var(--line-soft);padding-top:18px;}
  .testimonial-card .tc-name{font-family:'Archivo Black',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:0.01em;}
  .testimonial-card .tc-role{font-family:'Space Mono',monospace;font-size:11px;color:var(--fg-dim);margin-top:4px;}
  .tc-company-link{color:var(--red); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease;}
  .tc-company-link:hover{border-color:var(--red);}
  .testimonials-authentic{max-width:900px; margin:6px auto 30px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.03em; color:var(--fg-dim); line-height:1.6;}
  #testimonials-summary .testimonials-authentic{margin:26px 0 24px;}
  .testimonial-card .tc-project{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--red);margin-top:10px;letter-spacing:0.02em;}
  .testimonial-card .tc-text{white-space:pre-line;}

  .testimonial-more{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.16,.8,.3,1),opacity .4s ease;}
  .testimonial-more.open{max-height:2400px;opacity:1;margin-top:26px;}
  .testimonial-more .testimonial-grid{grid-template-columns:repeat(2,1fr);margin:0;}
  .testimonial-toggle{display:flex;flex-direction:column;align-items:center;gap:8px;margin:36px auto 0;background:none;border:none;cursor:pointer;color:var(--fg-dim);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;transition:color .2s ease;}
  .testimonial-toggle:hover{color:var(--red);}
  .testimonial-toggle .arrow-icon{font-size:18px;line-height:1;transition:transform .4s ease;}
  .testimonial-toggle.open .arrow-icon{transform:rotate(180deg);}
  .tc-rating{margin-top:16px;}
  .tc-rating .tc-rating-label{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--red);letter-spacing:0.04em;margin-bottom:8px;text-transform:uppercase;}
  .tc-rating .tc-bars{display:flex;align-items:flex-end;gap:4px;height:26px;}
  .tc-rating .tc-bar{width:9px;background:var(--line);border-radius:1px;}
  .tc-rating .tc-bar.filled{background:var(--red);}
  .tc-rating .tc-bar:nth-child(1){height:40%;}
  .tc-rating .tc-bar:nth-child(2){height:55%;}
  .tc-rating .tc-bar:nth-child(3){height:70%;}
  .tc-rating .tc-bar:nth-child(4){height:85%;}
  .tc-rating .tc-bar:nth-child(5){height:100%;}

  .rating-field{margin:6px 0 4px;}
  .rating-field .rf-label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;color:var(--fg-dim);text-transform:uppercase;display:block;margin-bottom:12px;}
  .rating-field .rf-meaning{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--red);height:16px;margin-bottom:10px;letter-spacing:0.02em;}
  .rating-input{display:flex;align-items:flex-end;gap:8px;height:44px;}
  .rating-input .ri-bar{width:16px;background:var(--surface);border:1px solid var(--line);border-bottom:none;cursor:pointer;transition:background .15s ease,border-color .15s ease;padding:0;}
  .rating-input .ri-bar:nth-child(1){height:40%;}
  .rating-input .ri-bar:nth-child(2){height:55%;}
  .rating-input .ri-bar:nth-child(3){height:70%;}
  .rating-input .ri-bar:nth-child(4){height:85%;}
  .rating-input .ri-bar:nth-child(5){height:100%;}
  .rating-input .ri-bar:hover, .rating-input .ri-bar.hovered{border-color:var(--red);}
  .rating-input .ri-bar.filled{background:var(--red);border-color:var(--red);}
  /* ---------- PRESTATION BLOCKS (image + text, like project pages) ---------- */
  .presta-block{margin:60px 0;}
  .presta-block-flex{display:flex;align-items:center;gap:70px;}
  .presta-block-flex.rev{flex-direction:row-reverse;}
  .presta-text{flex:0 0 40%;}
  .presta-text p{color:var(--body);font-size:15px;line-height:1.8;}
  .presta-img{flex:1;min-width:0;}
  .presta-img img{width:100%;height:auto;display:block;border:1px solid var(--line);cursor:zoom-in;}
  /* images qui mènent à une page projet : elles naviguent, elles ne zooment pas */
  .presta-img a{display:block;}
  .presta-img a img{cursor:pointer;transition:opacity .25s ease;}
  .presta-img a:hover img{opacity:0.88;}
  .presta-img img.floating{border:none;padding:20px 0;}

  .presta-contact{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.16,.8,.3,1),opacity .35s ease;margin-bottom:0;}
  .presta-contact.show{max-height:900px;opacity:1;margin-bottom:90px;}
  .presta-contact-inner{border-top:1px solid var(--line);padding-top:44px;margin-top:36px;}
  .presta-contact-inner h3{font-family:'Archivo Black',sans-serif;font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;margin-bottom:24px;}
  .presta-contact-inner .msg-form{max-width:640px;}

  @media (max-width:900px){
    .presta-block-flex, .presta-block-flex.rev{flex-direction:column;gap:26px;}
    .presta-selector-grid{grid-template-columns:repeat(2,1fr);}
    .testimonial-grid{grid-template-columns:1fr;}
    .presta-text{flex:none;}
    .services-summary-row{flex-direction:column;align-items:flex-start;gap:30px;}
    .logo-gallery{grid-template-columns:repeat(3,1fr);}
    .example-grid{grid-template-columns:repeat(2,1fr);}
    .process-flow{flex-direction:column;padding:26px 0;}
    .process-arrow{transform:rotate(90deg);}
    .pricing-grid, .service-grid{grid-template-columns:1fr;}
  }
  .about-photo{flex:0 0 280px;max-width:280px;background:var(--surface);}
  .about-photo img{width:100%;height:auto;display:block;}
  .about-bio{flex:1;padding-top:6px;min-width:0;}
  .about-name{font-family:'Archivo Black',sans-serif;font-size:22px;letter-spacing:0.02em;text-transform:uppercase;margin-bottom:18px;}
  .about-bio p{font-size:16px;line-height:1.85;color:var(--body);margin-bottom:20px;max-width:640px;}
  .about-meta-row{display:flex;flex-wrap:wrap;gap:40px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px;max-width:640px;}
  .about-meta-row .label{font-family:'Space Mono',monospace;font-size:10px;color:var(--fg-dim);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;}
  .about-meta-row .value{font-size:14.5px;font-weight:600;}
  .resume-col h3{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.1em;color:var(--red);text-transform:uppercase;margin-bottom:30px;border-bottom:1px solid var(--line);padding-bottom:14px;}
  .r-entry{padding:20px 0;border-bottom:1px solid var(--line-soft);}
  .r-entry-parallel-wrap{border-bottom:1px solid var(--line-soft);padding-top:14px;}
  .r-parallel-label{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:0.12em;color:var(--red);margin-bottom:4px;}
  .r-entry-parallel{display:flex;gap:24px;position:relative;}
  .r-entry-parallel::before{content:'';position:absolute;left:50%;top:6px;bottom:14px;width:1px;background:var(--line);}
  .r-parallel-col{flex:1;min-width:0;display:flex;flex-direction:column;}
  .r-parallel-col .r-entry{padding:10px 0;border-bottom:1px solid var(--line-soft);}
  .r-parallel-col .r-entry:last-child{border-bottom:none;}
  .r-parallel-col.right{justify-content:center;}
  .r-parallel-col.right .r-entry{border-bottom:none;padding:6px 0;}
  .r-entry .r-date{font-family:'Space Mono',monospace;font-size:11px;color:var(--red);margin-bottom:6px;}
  .r-entry .r-title{font-size:16px;font-weight:700;margin-bottom:4px;}
  .r-entry .r-sub{font-size:13px;color:var(--fg-dim);line-height:1.6;}
  .toolkit-wrap{margin-top:50px;}
  .toolkit{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
  .toolkit span{font-family:'Space Mono',monospace;font-size:11px;border:1px solid var(--line);padding:7px 12px;text-transform:uppercase;letter-spacing:0.04em;}
  .lang-row{display:flex;gap:40px;margin-top:16px;}
  .lang-row div .label{font-family:'Space Mono',monospace;font-size:10px;color:var(--fg-dim);letter-spacing:0.08em;text-transform:uppercase;}
  .lang-row div .value{font-size:15px;font-weight:700;margin-top:4px;}

  /* ---------- CONTACT ---------- */
  .contact-wrap{padding:130px 40px;position:relative;overflow:hidden;border-top:1px solid var(--line);}
  .contact-inner{max-width:1400px;margin:0 auto;position:relative;z-index:2;}
  .contact-wrap .tag{color:var(--red);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.12em;display:block;margin-bottom:20px;}
  .contact-wrap h2{font-size:clamp(38px,6vw,84px);line-height:0.98;max-width:900px;}
  .contact-wrap h2 em{color:var(--red);font-style:normal;}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:80px;}
  .contact-links a{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid var(--line);font-family:'Space Mono',monospace;font-size:14px;letter-spacing:0.03em;}
  .contact-links a:last-child{border-bottom:1px solid var(--line);}
  .contact-links a span.arrow{color:var(--red);transition:transform .2s ease;}
  .contact-links a:hover span.arrow{transform:translateX(6px);}
  form.msg-form{display:flex;flex-direction:column;gap:18px;}
  form.msg-form input, form.msg-form textarea{background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--fg);font-family:'Space Grotesk',sans-serif;font-size:14px;padding:12px 2px;}
  form.msg-form input::placeholder, form.msg-form textarea::placeholder{color:var(--fg-dim);}
  form.msg-form textarea{resize:none;height:80px;}
  form.msg-form button{margin-top:10px;align-self:flex-start;background:var(--red);color:var(--fg);border:none;padding:15px 28px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:opacity .2s ease;}
  form.msg-form button:hover{background:var(--fg);color:var(--bg);}
  form.msg-form button:disabled{opacity:0.6;cursor:default;}
  form.msg-form button:disabled:hover{background:var(--red);color:var(--fg);}
  .form-status{font-family:'Space Mono',monospace;font-size:12px;margin-top:-6px;}
  .form-status.success{color:#2ea043;}
  .form-status.error{color:var(--red);}
  .signature-block{margin-top:70px;display:flex;align-items:center;gap:24px;}
  .signature-block img{height:70px;width:auto;opacity:0.9;}
  .signature-block .sig-cap{font-family:'Space Mono',monospace;font-size:11px;color:var(--fg-dim);letter-spacing:0.06em;}
  footer.site-footer{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:26px 40px;border-top:1px solid var(--line-soft);font-family:'Space Mono',monospace;font-size:11px;color:var(--fg-dim);}
  /* footer becomes a centred flow so the legal link fits cleanly */
  footer.site-footer{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; text-align:center;}
  .footer-legal-link{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
  .footer-legal-link:hover{color:var(--fg);}
  /* ===== mentions légales modal (reconstruit) ===== */
  .legal-modal{position:fixed;inset:0;z-index:1000;display:none;background:rgba(0,0,0,0.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
  [data-theme="light"] .legal-modal{background:rgba(120,120,128,0.32);}
  .legal-modal.open{display:block;}
  .legal-box{
    position:absolute; top:50%; right:6vw; transform:translateY(-50%);
    width:min(600px,44vw); max-height:82vh; overflow-y:auto;
    background:url("../bg/legal-night.webp") center center / cover no-repeat, #0b0b0c;
    color:#ededed; padding:58px 54px;
    box-shadow:0 34px 70px rgba(0,0,0,0.55); border:none; border-radius:2px;
  }
  [data-theme="light"] .legal-box{
    background:url("../bg/legal-day.webp") center center / cover no-repeat, #d3d3d6;
    color:#0d0d0f; box-shadow:0 34px 70px rgba(0,0,0,0.30);
  }
  .legal-box, .legal-box *{mix-blend-mode:normal !important;}
  .legal-close{position:absolute;top:20px;right:24px;background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;opacity:0.85;transition:opacity .2s;padding:4px 8px;}
  .legal-close:hover{opacity:1;}
  .legal-box h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(24px,2.4vw,32px);text-transform:none;letter-spacing:-0.01em;margin:0 0 26px;color:inherit;}
  .legal-content h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:0;text-transform:none;color:inherit;margin:20px 0 1px;}
  .legal-content h4:first-child{margin-top:0;}
  .legal-content p{font-family:'Space Grotesk',sans-serif;font-size:14.5px;line-height:1.5;color:inherit;opacity:0.94;margin:0;}
  .legal-content strong{font-weight:700;color:inherit;}
  @media (max-width:900px){ .legal-box{right:50%;transform:translate(50%,-50%);width:min(92vw,560px);padding:44px 26px;} }
  footer.site-footer span:first-child{text-align:left;}
  footer.site-footer span:nth-child(2){text-align:center;}
  footer.site-footer span:last-child{text-align:right;}

  /* ---------- DETAIL VIEW ---------- */
  #view-detail{display:none;}
  #view-services{display:none;}
  #view-testimonials{display:none;}
  .detail-hero{position:relative;min-height:60vh;display:flex;align-items:flex-end;padding:140px 40px 60px;overflow:hidden;}
  .detail-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.5;filter:grayscale(20%);}
  .detail-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.95) 100%);}
  .detail-hero-content{position:relative;z-index:2;max-width:1000px;color:#f4f3f1;}
  .back-link{position:fixed;top:88px;left:40px;z-index:90;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;color:rgba(244,243,241,0.75);display:flex;align-items:center;gap:8px;text-transform:uppercase;background:rgba(10,10,10,0.7);padding:10px 14px;backdrop-filter:blur(6px);}
  .back-link:hover{color:var(--red);}
  .detail-tags{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
  .detail-tags span{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:0.06em;border:1px solid rgba(244,243,241,0.35);padding:6px 12px;text-transform:uppercase;color:rgba(244,243,241,0.75);}
  .detail-tags span.personal{color:var(--red);border-color:var(--red);}
  .detail-hero-content .idx{font-family:'Space Mono',monospace;color:var(--red);font-size:13px;letter-spacing:0.15em;margin-bottom:16px;display:block;}
  .detail-hero-content h1{font-size:clamp(44px,8vw,110px);line-height:0.92;margin-bottom:20px;}
  .detail-hero-content .pitch{font-size:19px;max-width:600px;color:#dcdcdc;font-weight:500;}
  .detail-body{max-width:1400px;margin:0 auto;padding:90px 40px;display:grid;grid-template-columns:1fr 380px;gap:80px;}
  .detail-desc p{font-size:16px;line-height:1.8;color:var(--body);margin-bottom:22px;max-width:680px;}
  .detail-gallery{margin-top:40px;display:flex;flex-direction:column;gap:22px;}
  .gallery-row{display:flex;gap:22px;}
  .gallery-row figure{margin:0;flex:1;min-width:0;background:var(--surface);}
  .gallery-row img{width:100%;height:auto;display:block;}
  .gallery-row .capline{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:0.05em;color:var(--fg-dim);padding:8px 1px 0;}
  /* mirrored layout variant */
  .detail-body.variant-b{grid-template-columns:380px 1fr;}
  .detail-body.variant-b .detail-side{order:1;}
  .detail-body.variant-b .detail-desc{order:2;}
  .personal-note{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--fg-dim);margin-top:30px;border-left:2px solid var(--red);padding-left:14px;}
  .detail-side .side-block{border-top:1px solid var(--line);padding:26px 0;}
  .detail-side .side-block:first-child{border-top:none;}
  .detail-side .side-label{font-family:'Space Mono',monospace;font-size:10px;color:var(--red);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;}
  .detail-side .spec-line{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line-soft);font-size:13.5px;}
  .detail-side .spec-line:first-child{border-top:none;}
  .detail-side .spec-line .k{color:var(--fg-dim);font-family:'Space Mono',monospace;font-size:11px;}
  .detail-side .spec-line .v{font-weight:600;text-align:right;}
  .detail-side .feat-list{list-style:none;}
  .detail-side .feat-list li{font-size:13.5px;padding:9px 0;border-top:1px solid var(--line-soft);display:flex;gap:10px;color:var(--body);}
  .detail-side .feat-list li::before{content:'—';color:var(--red);}
  .detail-side .pipe-list{display:flex;flex-wrap:wrap;gap:10px;}
  .detail-side .pipe-list span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.04em;border:1px solid var(--line);padding:8px 14px;color:var(--fg-dim);}
  .detail-nav{max-width:1400px;margin:0 auto;padding:0 40px 100px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:40px;}

  /* ---------- FULL-WIDTH PROJECT LAYOUT ---------- */
  .fw-wrap{max-width:1400px;margin:0 auto;padding:70px 40px 0;}
  .fw-header{max-width:900px;}
  .fw-header .idx{font-family:'Space Mono',monospace;color:var(--red);font-size:13px;letter-spacing:0.15em;margin-bottom:16px;display:block;}
  .fw-header h1{font-size:clamp(44px,7vw,96px);line-height:0.94;margin-bottom:20px;}
  .fw-tags span{color:var(--fg-dim);border-color:var(--line);}
  .fw-tags{margin:20px 0;}
  .fw-pitch{font-size:19px;max-width:640px;color:var(--fg);font-weight:500;margin-top:10px;}
  .fw-desc{max-width:760px;margin-top:36px;padding-bottom:70px;}
  .fw-desc p{font-size:16px;line-height:1.85;color:var(--body);margin-bottom:20px;}
  .fw-media{width:100%;background:var(--surface);margin-bottom:6px;position:relative;}
  .fw-media-link-btn{
    position:absolute; bottom:20px; right:20px; z-index:2;
    background:rgba(10,10,10,0.78); color:#fff;
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    padding:13px 20px; border-radius:2px;
    display:inline-flex; align-items:center; gap:8px;
    transition:background .2s ease;
  }
  .fw-media-link-btn:hover{background:var(--red);}
  @media (max-width:640px){
    .fw-media-link-btn{bottom:12px; right:12px; padding:11px 16px; font-size:10px;}
  }
  .fw-media:last-of-type{margin-bottom:0;}
  .fw-media img{width:100%;height:auto;display:block;}
  .fw-media.fw-video{margin-top:6px;text-align:center;background:transparent;}
  .fw-media.fw-video video{width:100%;height:auto;display:block;}
  .fw-specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:70px 0 90px;border-top:1px solid var(--line);margin-top:70px;}
  .fw-specs-grid .side-block{border-top:none;}

  .fw-specs-aligned{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;row-gap:0;align-items:stretch;margin-top:100px;padding-bottom:90px;}
  .fw-specs-cell{display:flex;align-items:center;}
  .fw-specs-head{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:14px;}
  .fw-eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.14em;color:var(--red);margin-bottom:18px;display:block;}
  .fw-h2{font-family:'Archivo Black',sans-serif;font-size:clamp(32px,4vw,58px);line-height:0.98;text-transform:uppercase;}
  .fw-feature-tag{background:var(--red);display:inline-block;padding:8px 14px;color:#fff;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.1em;}
  .fw-spec-row{justify-content:space-between;padding:16px 0;border-top:1px solid var(--line);font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:0.03em;}
  .fw-spec-row .k{color:var(--fg-dim);}
  .fw-spec-row .v{font-weight:700;text-align:right;}
  .fw-feat-row{gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:14.5px;}
  .fw-feat-row .n{font-family:'Space Mono',monospace;color:var(--red);font-size:11px;flex-shrink:0;}

  @media (max-width:900px){
    .fw-wrap{padding:50px 22px 0;}
    .fw-specs-grid{grid-template-columns:1fr;gap:36px;padding:50px 0 60px;}
    .fw-specs-aligned{grid-template-columns:1fr;gap:50px;margin-top:60px;}
  }
  .detail-nav a{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-dim);}
  .detail-nav a:hover{color:var(--red);}
  .detail-nav a b{display:block;font-family:'Archivo Black',sans-serif;font-size:24px;color:var(--fg);margin-top:8px;text-transform:uppercase;letter-spacing:0;}
  .detail-nav a:hover b{color:var(--red);}
  .detail-nav .next-link{text-align:right;}

  /* ---------- LIGHTBOX ---------- */
  .zoomable{cursor:zoom-in;}
  .back-to-top{
    position:fixed;right:26px;bottom:26px;z-index:80;
    width:46px;height:46px;border-radius:0;
    background:rgba(var(--bg-rgb),0.85);border:1px solid var(--line);
    color:var(--fg);font-size:18px;cursor:pointer;backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .25s ease,transform .25s ease,border-color .2s ease,color .2s ease;
  }
  .back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
  .to-contact{bottom:84px;}
  .back-to-top:hover{border-color:var(--red);color:var(--red);}
  .lightbox{
    position:fixed;inset:0;z-index:1000;
    background:rgba(8,8,8,0.88);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;
    opacity:0;transition:opacity .25s ease;
  }
  .lightbox.open{display:flex;opacity:1;}
  .lightbox-stage{
    max-width:90vw;max-height:82vh;display:flex;align-items:center;justify-content:center;
    transform:scale(0.97);transition:transform .25s ease;
  }
  .lightbox.open .lightbox-stage{transform:scale(1);}
  .lightbox-stage img{max-width:90vw;max-height:82vh;width:auto;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,0.5);}
  .lightbox-close{
    position:fixed;top:24px;right:28px;background:none;border:none;
    color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:1002;
    width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    transition:color .2s ease;
  }
  .lightbox-close:hover{color:var(--red);}
  .lightbox-nav{
    position:fixed;top:50%;transform:translateY(-50%);background:none;border:none;
    color:#fff;font-size:44px;line-height:1;cursor:pointer;z-index:1002;
    width:64px;height:64px;display:flex;align-items:center;justify-content:center;
    transition:color .2s ease,opacity .2s ease;opacity:0.75;
  }
  .lightbox-nav:hover{color:var(--red);opacity:1;}
  .lightbox-prev{left:10px;}
  .lightbox-next{right:10px;}
  .lightbox-caption{
    position:fixed;left:0;right:0;bottom:20px;text-align:center;
    font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.05em;color:rgba(255,255,255,0.7);
    z-index:1002;pointer-events:none;
  }
  .lightbox-counter{
    position:fixed;top:30px;left:28px;font-family:'Space Mono',monospace;font-size:11px;
    letter-spacing:0.08em;color:rgba(255,255,255,0.5);z-index:1002;
  }

  /* ================= EDITORIAL LAYOUT — PUFF NOTHING ================= */
  .ed-page{
    --ed-bg:#0b0b0c; --ed-fg:#eeeeee; --ed-dim:#787880; --ed-red:#e9e9ea; --ed-accent-ink:#0b0b0c; --ed-surface:#141416;
    --ed-line:rgba(255,255,255,0.14); --ed-btn-bg:rgba(30,30,28,0.7);
    background:var(--ed-bg); color:var(--ed-fg); position:relative; overflow:hidden;
    transition:background-color .4s ease, color .4s ease;
  }
  [data-theme="light"] .ed-page{
    --ed-bg:#d3d3d6; --ed-fg:#0d0d0f; --ed-dim:#5c5c64; --ed-red:#101012; --ed-accent-ink:#eeeeee; --ed-surface:#c9c9cd;
    --ed-line:rgba(10,10,10,0.12); --ed-btn-bg:rgba(255,255,255,0.7);
  }
  [data-theme="light"] .ed-page.ed-theme-nothing{
    --ed-bg:#eae9e6; --ed-surface:#ffffff;
  }
  .ed-page ::selection{background:var(--ed-red); color:#fff;}
  .ed-grain{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.035; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .ed-section{position:relative; max-width:1500px; margin:0 auto; padding:0 50px;}
  .ed-plus{position:absolute; width:14px; height:14px; opacity:0.5;}
  .ed-plus::before,.ed-plus::after{content:'';position:absolute;background:var(--ed-fg);}
  .ed-plus::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
  .ed-plus::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}

  .ed-hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:150px 50px 80px; position:relative;}
  .ed-hero-tag{display:inline-flex; align-items:center; gap:10px; background:var(--ed-red); color:#fff; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.12em; padding:9px 16px; margin-bottom:38px; align-self:flex-start;}
  .ed-hero-title{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:clamp(56px,10vw,168px); line-height:0.86; letter-spacing:-0.01em; max-width:1200px; position:relative; z-index:3;}
  .ed-hero-title.ed-hero-title-sm{font-size:clamp(40px,7vw,108px); max-width:640px;}
  .ed-hero-title em{color:var(--ed-red); font-style:normal;}
  .ed-hero-sub{font-size:17px; line-height:1.6; color:var(--ed-dim); max-width:420px; margin-top:34px;}
  .ed-hero-float{position:absolute; right:9%; top:50%; transform:translateY(-50%); width:40%; max-width:560px; z-index:2;}
  .ed-hero-float img{width:100%; display:block; filter:drop-shadow(0 40px 60px rgba(0,0,0,0.18));}
  .ed-scroll-hint{position:absolute; bottom:40px; left:50px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--ed-dim); display:flex; align-items:center; gap:10px;}
  .ed-scroll-hint .ed-line{width:34px; height:1px; background:var(--ed-dim);}

  .ed-block{padding:100px 0; position:relative; border-top:1px solid var(--ed-line);}
  .ed-block-flex{display:flex; align-items:center; gap:70px;}
  .ed-block-flex.rev{flex-direction:row-reverse;}
  .ed-block-text{flex:0 0 38%;}
  .ed-block-img{flex:1; position:relative;}
  .ed-eyebrow{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.14em; color:var(--ed-red); margin-bottom:18px; display:block;}
  .ed-h2{font-family:'Archivo Black',sans-serif; font-size:clamp(32px,4vw,58px); line-height:0.98; text-transform:uppercase; margin-bottom:22px;}
  .ed-p{font-size:15.5px; line-height:1.8; color:var(--ed-dim); max-width:440px;}
  .ed-float-img{border-radius:2px; overflow:hidden; transition:transform .5s cubic-bezier(.16,.8,.3,1), filter .5s ease; will-change:transform;}
  .video-overlay-container{position:absolute;overflow:hidden;background:#000;}
  .video-overlay-container video{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
  .ed-float-img img{width:100%; display:block;}
  .ed-3d-viewer{position:relative; aspect-ratio:1/1; background:transparent;}
  .ed-3d-canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab;}
  .ed-3d-canvas:active{cursor:grabbing;}
  .ed-3d-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--surface); transition:opacity .4s ease; pointer-events:none;}
  .ed-3d-overlay.ed3d-hidden{opacity:0;}
  .ed-3d-spinner{width:26px; height:26px; border:2px solid var(--ed-line); border-top-color:var(--ed-red); border-radius:50%; animation:ed3dspin .8s linear infinite;}
  @keyframes ed3dspin{to{transform:rotate(360deg);}}
  .ed-3d-pct{font-family:'Space Mono',monospace; font-size:11px; color:var(--ed-dim); letter-spacing:0.04em;}
  .ed-3d-hint{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ed-dim); opacity:0; transition:opacity .3s ease; pointer-events:none;}
  .ed-3d-viewer:hover .ed-3d-hint, .ed-3d-viewer.ed3d-touched .ed-3d-hint{opacity:0.85;}

  /* 360° turntable video — real pre-rendered footage, autoplays on scroll
     and loops continuously, same mechanism as the other project videos. */
  .ed-turntable-video{position:relative; min-height:0; min-width:0; height:100%; align-self:stretch; background:#dad9d8;}
  .ed-turntable-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:transparent;}
  @media (max-width:900px){
    .ed-3d-viewer{aspect-ratio:auto; height:340px;}
  }
  .ed-float-img:hover{transform:scale(1.025) rotate(-0.4deg); filter:brightness(1.04);}

  /* scroll-blur reveal variant for editorial imagery */
  .ed-reveal{opacity:0; transform:translateY(120px) scale(0.9); filter:blur(20px); transition:opacity 1.15s cubic-bezier(.16,.8,.3,1), transform 1.15s cubic-bezier(.16,.8,.3,1), filter 1.15s cubic-bezier(.16,.8,.3,1);}
  .ed-reveal.in{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}
  .ed-reveal-l{opacity:0; transform:translateX(-18vw) rotate(-3deg); transition:opacity 1.05s ease, transform 1.05s cubic-bezier(.16,.8,.3,1);}
  .ed-reveal-l.in{opacity:1; transform:translateX(0) rotate(0);}
  .ed-reveal-r{opacity:0; transform:translateX(18vw) rotate(3deg); transition:opacity 1.05s ease, transform 1.05s cubic-bezier(.16,.8,.3,1);}
  .ed-reveal-r.in{opacity:1; transform:translateX(0) rotate(0);}
  .ed-reveal-row{opacity:0; transform:translateX(-36px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1);}
  .ed-reveal-row.in{opacity:1; transform:translateX(0);}

  /* ensure hover scale wins over the reveal's resting transform once revealed */
  .ed-float-img.ed-reveal.in:hover{transform:scale(1.025) rotate(-0.4deg);}

  .ed-specs{padding:110px 0; position:relative; border-top:1px solid var(--ed-line);}
  .ed-specs-grid{display:grid; grid-template-columns:1fr 1fr; column-gap:80px; row-gap:0; align-items:stretch;}
  .ed-specs-cell{display:flex; align-items:center;}
  .ed-specs-head{display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:14px;}
  .ed-spec-row{justify-content:space-between; padding:16px 0; border-top:1px solid var(--ed-line); font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:0.03em;}
  .ed-spec-row .k{color:var(--ed-dim);}
  .ed-spec-row .v{font-weight:700; text-align:right;}
  .ed-feature-tag{background:var(--ed-red); display:inline-block; padding:8px 14px; color:#fff; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em;}
  .ed-feat-row{gap:14px; padding:16px 0; border-top:1px solid var(--ed-line); font-size:14.5px;}
  .ed-feat-row .n{font-family:'Space Mono',monospace; color:var(--ed-red); font-size:11px; flex-shrink:0;}
  .ed-barcode{display:flex; align-items:flex-end; gap:2px; height:46px; margin-top:26px;}
  .ed-barcode span{display:block; width:2px; background:var(--ed-fg);}

  .ed-gallery{padding:0 0 110px;}
  .ed-gallery-row{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; margin-bottom:24px; align-items:start;}
  .ed-gallery-row .g-span-7{grid-column:span 7;}
  .ed-gallery-row .g-span-5{grid-column:span 5;}
  .ed-gallery-row .g-span-4{grid-column:span 4;}
  .ed-gallery-row .g-span-8{grid-column:span 8;}
  .ed-gallery-row .g-span-6{grid-column:span 6;}
  .ed-gallery-row .g-span-12{grid-column:span 12;}
  .ed-gallery img{width:100%; display:block; border-radius:2px;}

  .ed-glass{backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.6);}

  .ed-stat{padding:90px 0; text-align:center; max-width:680px; margin:0 auto;}
  .ed-stat-num{font-family:'Archivo Black',sans-serif; font-size:clamp(64px,11vw,150px); line-height:0.88; margin:18px 0; text-transform:uppercase;}
  .ed-stat-num .unit{font-size:0.32em; color:var(--ed-red); margin-left:10px; vertical-align:middle;}
  .ed-stat .ed-p{margin:0 auto; text-align:center; max-width:520px;}
  .ed-stat-line{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:clamp(28px,4.2vw,52px); line-height:1.05; margin:16px 0 22px; max-width:600px; margin-left:auto; margin-right:auto;}

  .ed-quad{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:24px; margin-bottom:24px; min-height:520px;}
  .ed-quad.left-big{grid-template-areas:"big top" "big bottom";}
  .ed-quad.right-big{grid-template-areas:"top big" "bottom big";}
  .ed-quad .q-big{grid-area:big;}
  .ed-quad .q-top{grid-area:top;}
  .ed-quad .q-bottom{grid-area:bottom;}
  .ed-quad .q-big img{width:100%; height:100%; object-fit:cover; display:block;}
  .ed-quad .q-top img{width:100%; height:100%; object-fit:cover; display:block;}
  /* draggable assembled 3D dropped into a quad's top cell (green-box slot) */
  .ed-quad .q-top.ed-3d-viewer{aspect-ratio:auto; width:100%; height:100%; min-height:280px;}
  .ed-quad.has-viewer{grid-template-rows:1.9fr 1fr; min-height:600px;}   /* stretch viewer downward */
  .ed-quad.has-viewer .q-top.ed-3d-viewer{min-height:400px;}
  .ed-quad.has-viewer .q-bottom{justify-content:flex-end;}   /* push the 48H stat lower */
  .ed-quad-stat{display:flex; flex-direction:column; justify-content:center; padding:20px 26px;}
  .ed-quad-stat .ed-eyebrow{margin-bottom:10px;}
  .ed-quad-stat .ed-stat-num{font-size:clamp(30px,4vw,44px); margin:6px 0; text-align:left;}
  .ed-quad-stat .ed-stat-line{font-size:clamp(20px,2.6vw,28px); text-align:left; margin:6px 0 10px; margin-left:0;}
  .ed-quad-stat .ed-p{font-size:13.5px; text-align:left; margin:0; max-width:none;}
  .ed-pair{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; align-items:stretch;}
  .ed-pair .ed-quad-stat{background:none; border:none;}

  .ed-video-wrap{padding:0 0 100px;}
  .ed-video-box{width:100%; text-align:center; background:transparent;}
  .ed-video-wrap.portrait .ed-video-box{max-width:560px; margin:0 auto;}
  .ed-video-wrap.portrait .ed-video-box video{max-height:860px;}
  /* Sanctum: 4 interactive element viewers flanking the portrait video */
  .ed-video-wrap.sanctum-elements{display:flex; align-items:stretch; justify-content:center; gap:22px; max-width:1360px; margin:0 auto;}
  .ed-video-wrap.sanctum-elements .ed-video-box{flex:0 0 auto; width:min(42vw,520px); margin:0;}
  .se-col{flex:1 1 0; min-width:0; max-width:460px; display:flex; flex-direction:column; gap:22px;}
  .se-viewer{flex:1 1 0; aspect-ratio:auto; width:100%; height:auto; min-height:360px; background:transparent;}
  .ed-video-box video{width:100%; max-height:760px; display:inline-block; background:transparent;}
  .ed-callout{position:absolute; padding:22px 26px; border-radius:3px; box-shadow:0 20px 50px rgba(0,0,0,0.08);}
  .ed-callout .lbl{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; color:var(--ed-dim); margin-bottom:6px;}
  .ed-callout .val{font-family:'Archivo Black',sans-serif; font-size:22px; text-transform:uppercase;}

  .ed-pipeline{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;}
  .ed-pipeline span{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.04em; border:1px solid rgba(10,10,10,0.2); padding:8px 14px; color:var(--ed-fg);}

  .ed-brand-note{max-width:1400px; margin:0 auto; padding:26px 50px 0; font-family:'Space Mono',monospace; font-size:11px; line-height:1.6; letter-spacing:0.02em; color:var(--ed-dim); font-style:italic;}
  .ed-footer-nav{display:flex; justify-content:space-between; max-width:1400px; margin:0 auto; padding:40px 40px 100px; border-top:1px solid var(--ed-line); position:relative;}  .ed-footer-nav a{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em; color:var(--ed-dim); text-transform:uppercase;}
  .ed-footer-nav a:hover{color:var(--ed-red);}
  .ed-footer-nav a b{display:block; font-family:'Archivo Black',sans-serif; font-size:26px; color:var(--ed-fg); margin-top:8px; text-transform:uppercase;}
  .ed-footer-nav a:hover b{color:var(--ed-red);}
  .ed-back-btn{position:fixed; top:26px; left:26px; z-index:95; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--ed-fg); background:var(--ed-btn-bg); backdrop-filter:blur(10px); padding:11px 16px; text-transform:uppercase; border:1px solid var(--ed-line);}
  .ed-back-btn:hover{color:#fff; background:var(--ed-red); border-color:var(--ed-red);}

  @media (max-width:900px){
    .ed-block-flex, .ed-block-flex.rev{flex-direction:column; gap:36px;}
    .ed-block-text{flex:none;}
    .ed-hero-float{position:relative; right:auto; top:auto; width:70%; margin:40px auto 0;}
    .ed-hero{padding:130px 22px 60px;}
    .ed-section{padding:0 22px;}
    .ed-specs-grid{grid-template-columns:1fr; gap:50px;}
    .ed-gallery-row{grid-template-columns:1fr; gap:16px;}
    .ed-gallery-row [class*="g-span"]{grid-column:span 1;}
    .ed-footer-nav{padding:50px 22px 70px;}
    .ed-quad{grid-template-columns:1fr; grid-template-areas:"big" "top" "bottom" !important; min-height:0;}
    .ed-pair{grid-template-columns:1fr;}
    .ed-video-wrap.portrait .ed-video-box{max-width:100%;}
    .ed-video-wrap.sanctum-elements{flex-direction:column; align-items:stretch; gap:16px;}
    .ed-video-wrap.sanctum-elements .ed-video-box{width:100%; order:-1;}
    .se-col{flex-direction:row; max-width:100%;}
    .se-viewer{min-height:220px;}
  }

  /* header adapts when viewing the Nothing editorial project */
  [data-theme="light"][data-project-theme="nothing"] header{background:rgba(234,233,230,0.88); border-bottom-color:rgba(10,10,10,0.1);}
  [data-theme="light"][data-project-theme="nothing"] header .brand span{color:#0c0c0c;}
  [data-theme="light"][data-project-theme="nothing"] header .brand img{filter:invert(1);}
  [data-theme="light"][data-project-theme="nothing"] nav.links a{color:#0c0c0c;}
  [data-theme="light"][data-project-theme="nothing"] .toggle-btn{border-color:rgba(10,10,10,0.18); color:#6b6a67;}
  [data-theme="light"][data-project-theme="nothing"] .toggle-btn:hover{border-color:#0c0c0c; color:#0c0c0c;}
  [data-theme="light"][data-project-theme="nothing"] .burger span{background:#0c0c0c;}
  [data-project-theme="nothing"] #progress{background:var(--ed-fg,#e9e9ea);}
  [data-theme="light"][data-project-theme="nothing"] #back-to-top,[data-theme="light"][data-project-theme="nothing"] #to-contact{background:rgba(255,255,255,0.75); border-color:rgba(10,10,10,0.15); color:#0c0c0c;}
  [data-project-theme="nothing"] #back-to-top:hover,[data-project-theme="nothing"] #to-contact:hover{border-color:currentColor; color:inherit;}

  @media (max-width:1180px) and (min-width:901px){
    .brand span{display:none;}
    nav.links{gap:16px;}
  }

  @media (max-width:900px){
    .lightbox-nav{width:44px;height:44px;font-size:32px;}
    .lightbox-prev{left:2px;}
    .lightbox-next{right:2px;}
    .lightbox-close{top:14px;right:14px;}
    .back-to-top{right:16px;bottom:16px;width:40px;height:40px;font-size:16px;}
    .to-contact{bottom:66px;}
    .lightbox-stage img{max-width:94vw;max-height:76vh;}
    nav.links{display:none;}
    footer.site-footer{grid-template-columns:1fr;gap:10px;text-align:center;padding:24px 22px;}
    footer.site-footer span:first-child, footer.site-footer span:nth-child(2), footer.site-footer span:last-child{text-align:center;}
    .burger{display:flex;}
    .toggle-btn{padding:6px 8px;font-size:10px;}
    .toggle-group{gap:6px;}
    .hero{padding:120px 22px 50px;}
    .hero-meta{grid-template-columns:repeat(2,1fr);gap:26px;}
    .section{padding:80px 22px;}
    .project, .project:nth-child(even){grid-template-columns:1fr;gap:30px;}
    .project:nth-child(even) .project-media{order:0;}
    .project:nth-child(even) .project-info{order:1;}
    .resume-grid{grid-template-columns:1fr;gap:50px;}
    .r-entry-parallel{flex-direction:column;gap:0;}
    .r-entry-parallel::before{display:none;}
    .r-parallel-col.right{justify-content:flex-start;}
    .r-parallel-col .r-entry{border-bottom:1px solid var(--line-soft);}
    .r-parallel-col .r-entry:last-child{border-bottom:none;}
    .about-intro{flex-direction:column;gap:26px;margin-bottom:60px;}
    .about-photo{flex:none;max-width:220px;}
    .contact-grid{grid-template-columns:1fr;gap:50px;}
    .media-grid{grid-template-columns:1fr;}
    header{padding:16px 20px;}
    .contact-wrap{padding:90px 20px;}
    .specs-row{grid-template-columns:1fr 1fr;}
    .detail-body{grid-template-columns:1fr;padding:60px 22px;gap:40px;}
    .detail-body.variant-b{grid-template-columns:1fr;}
    .detail-body.variant-b .detail-side{order:0;}
    .detail-body.variant-b .detail-desc{order:1;}
    .detail-gallery{gap:14px;}
    .gallery-row{flex-direction:column;gap:14px;}
    .pair-row{flex-direction:column;gap:14px;}
    .detail-hero{padding:120px 22px 50px;}
    .back-link{left:20px;top:80px;}
    .detail-nav{padding:0 22px 70px;}
  }

  /* =================================================================
     MOBILE FIXES — scoped entirely to <=1023px.
     Nothing here can affect the desktop (>=1024px) layout.
     1) Lays the featured "deck of cards" out vertically so the
        6-project stacked animation also runs on phones.
     2) Adds breathing room so text never sits glued under images
        and headings don't crowd on narrow screens.
     ================================================================= */
  @media (max-width:1023px){

    /* ---- Featured deck, vertical mobile layout ---- */
    .stack-sticky{
      flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:66px; padding:38px 22px 26px; height:100vh; max-width:none;
    }
    /* image on top, capped so image + text + buttons fit one screen */
    .stack-media-col{
      order:-1; flex:none; width:100%; max-width:none;
      aspect-ratio:1/1; max-height:36vh; margin:0;
    }
    /* let a vertical swipe that starts on the card scroll the page
       (desktop keeps touch-action:none for its drag gesture) */
    .stack-card{touch-action:pan-y; box-shadow:0 14px 34px rgba(0,0,0,0.32);}
    .stack-card:hover img{transform:none;} /* no hover-zoom on touch */

    /* text column: only the active project is shown, in normal flow,
       so its height is natural and nothing overlaps */
    .stack-text-col{
      flex:none; width:100%; height:auto; min-height:0;
      display:grid; grid-template-columns:86px minmax(0,1fr); gap:18px;
    }
    .stack-copy-col{height:auto; min-width:0;}
    .stack-text-item{
      position:static; inset:auto; display:none;
      opacity:0; transform:none; pointer-events:none;
    }
    .stack-text-item.active{display:block; opacity:1; pointer-events:auto;}
    .stack-text-link{position:static; inset:auto; display:flex; flex-direction:column;}
    .stack-title{font-size:clamp(25px,6.4vw,32px); margin-bottom:10px;}
    .stack-tags{margin-bottom:12px;}
    .stack-pitch{font-size:14px; margin-bottom:14px;}
    .stack-nav-btns{position:static; margin-top:16px;}

    /* ---- Breathing room: text never glued to images ---- */
    /* editorial project pages */
    .ed-block{padding:64px 0;}
    .ed-block-flex, .ed-block-flex.rev{gap:30px;}
    .ed-block-text{padding:0 2px;}
    .ed-quad{gap:20px;}
    .ed-quad-stat{padding:6px 4px 10px;}
    .ed-pair .ed-quad-stat{padding:14px 4px 4px;}
    .ed-stat{padding:60px 0;}
    .ed-stat-num{font-size:clamp(48px,15vw,90px);}
    .ed-gallery-row{margin-bottom:16px;}
    .ed-specs{padding:70px 0;}
    .ed-hero{min-height:auto; padding-bottom:56px;}
    .ed-hero-title{margin-bottom:8px;}
    .ed-hero-sub{margin-top:22px;}

    /* full-width project pages */
    .fw-media + .fw-media{margin-top:10px;}
    .fw-desc{padding-bottom:56px;}
    .fw-header h1{margin-bottom:16px;}

    /* standard detail galleries */
    .gallery-row{gap:16px;}
    .detail-gallery{gap:18px;}
    .detail-desc p{margin-bottom:18px;}

    /* services (Prestations) blocks: image and its paragraph shouldn't hug */
    .presta-block-flex{gap:26px;}
    .presta-block{margin-bottom:8px;}
    .service-intro{margin-top:14px;}
  }

  /* =================================================================
     MOBILE FIXES — part 2 (still scoped entirely to <=1023px)
     - Burger menu now opens as a dropdown with the same links as desktop
     - Prev/next project titles no longer collide
     - Editorial hero: 3D viewer/image sits BELOW the title, never over it
     - "Dossier technique" kept as two columns with a much smaller font,
       close to the desktop presentation and fully on-screen
     ================================================================= */
  @media (max-width:1023px){

    /* ---- 1) Burger dropdown menu ---- */
    nav.links.open{
      display:flex; flex-direction:column; align-items:stretch; gap:0;
      position:fixed; top:59px; left:0; right:0; z-index:99;
      background:rgba(var(--bg-rgb),0.97);
      backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
      padding:6px 22px 14px;
      max-height:calc(100vh - 59px); overflow-y:auto;
    }
    nav.links.open a{
      display:flex; align-items:center; gap:10px;
      padding:15px 2px; width:100%;
      border-bottom:1px solid var(--line-soft);
      font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.06em;
    }
    nav.links.open a:last-child{border-bottom:none;}
    nav.links.open a::after{display:none;} /* no underline animation in the dropdown */

    /* ---- 2) Prev / next project navigation ---- */
    .ed-footer-nav{gap:22px;}
    .ed-footer-nav a b{font-size:16px; margin-top:6px; line-height:1.12; word-break:break-word;}
    .detail-nav{gap:22px;}
    .detail-nav a b{font-size:16px; line-height:1.12; word-break:break-word;}

    /* ---- 3) Editorial hero: strict top-to-bottom flow ----
       block flow (not flex-centered) guarantees the floating 3D viewer /
       image can never ride up over the title */
    .ed-hero{display:block; min-height:0; padding:108px 22px 52px;}
    .ed-hero-tag{align-self:auto;}
    .ed-hero-float{
      position:static; right:auto; top:auto; transform:none;
      width:100%; max-width:400px; margin:30px auto 0;
    }
    .ed-3d-viewer{aspect-ratio:auto; height:300px;}
    .ed-scroll-hint{display:none;} /* decorative; would collide in short block hero */

    /* ---- 4) "Dossier technique" — two columns, compact, desktop-like ---- */
    .ed-specs{padding:56px 0;}
    .ed-specs-grid{grid-template-columns:1fr 1fr; column-gap:16px; gap:0;}
    .fw-specs-aligned{grid-template-columns:1fr 1fr; column-gap:16px; row-gap:0; margin-top:56px; padding-bottom:60px;}
    .ed-h2, .fw-h2{font-size:19px; line-height:1.0;}
    .ed-eyebrow, .fw-eyebrow{font-size:8.5px; margin-bottom:9px; letter-spacing:0.08em;}
    .ed-feature-tag, .fw-feature-tag{font-size:7.5px; padding:5px 8px; letter-spacing:0.05em;}
    .ed-spec-row, .fw-spec-row{font-size:8px; padding:10px 0; letter-spacing:0;}
    .ed-feat-row, .fw-feat-row{font-size:8.5px; padding:10px 0; gap:6px;}
    .ed-feat-row .n, .fw-feat-row .n{font-size:7.5px;}
    .ed-pipeline{margin-top:14px; gap:6px;}
    .ed-pipeline span{font-size:7.5px; padding:5px 7px;}
    /* full-width 3-column spec grid (older layout) stays readable too */
    .fw-specs-grid{grid-template-columns:1fr 1fr; gap:20px;}
  }

  /* =================================================================
     MOBILE FIX — part 3 (scoped to <=1023px)
     The homepage testimonial teaser types quotes of very different
     lengths on a loop. Letting it grow/shrink reflows the whole page
     and jolts the viewport when you're parked lower down (Contact).
     Fixing its height means typing never changes layout — the longest
     quote simply clips in the teaser (full text lives on /avis).
     ================================================================= */
  @media (max-width:1023px){
    .testimonial-preview{height:560px; min-height:0;}
    .testimonial-preview .tc-text{overflow:hidden; margin-bottom:18px;}
  }

  /* =================================================================
     3D VIEWER — enlarged stage (desktop only, >=1024px)
     The viewer used to be a 560px square, so zooming in quickly clipped
     the model against its edges and the grab cursor only covered that
     square. Here the stage spans the whole right-hand area instead.
     The model itself keeps its exact previous on-screen size: the
     camera stays put and the JS widens the vertical FOV in proportion
     to the taller canvas, so only the free space around the model grows.
     Scoped to >=1024px: the mobile layout above is untouched.
     ================================================================= */
  @media (min-width:1024px){
    /* THE STAGE — this box is exactly where the model has always been framed.
       It is the anchor the JS re-centres the model on, so its geometry must
       not change: the model keeps its size and position at page load. */
    .ed-hero-float.ed-hero-float-3d{
      right:20px; left:auto; top:84px; bottom:24px;
      transform:none; width:47%; max-width:none;
    }
    /* THE VISIBLE CANVAS — spans the full page width, edge to edge, so the
       whole band is grabbable. The model does not follow: the JS offsets the
       camera frustum so it stays framed on the stage above.
       left = -(stage's distance to the page's left edge) = -(53vw - 20px). */
    .ed-hero-float-3d .ed-3d-viewer{
      position:absolute; top:0; bottom:0;
      right:-20px; left:calc(20px - 53vw);
      width:auto; height:auto; aspect-ratio:auto;
    }
    /* hint + loading overlay follow the model: stage width, offset right by the
       same 4% as ED3D_SHIFT_X in the JS */
    .ed-hero-float-3d .ed-3d-hint,
    .ed-hero-float-3d .ed-3d-overlay{ left:auto; right:calc(20px - 4%); width:47%; }
    .ed-hero-float-3d .ed-3d-overlay{ background:transparent; }
    /* the generic image hover (scale + tilt) makes no sense on a full-height
       canvas and would fight the drag gesture */
    .ed-hero-float-3d .ed-3d-viewer:hover,
    .ed-hero-float-3d .ed-3d-viewer.ed-float-img.ed-reveal.in:hover{
      transform:none; filter:none;
    }
    /* The hero headings are full-width blocks: their invisible boxes reach far
       into the stage and would swallow the drag. They stay visible and on top
       (z-index), they just stop capturing the pointer. */
    .ed-hero-3d .ed-hero-tag,
    .ed-hero-3d .ed-hero-title,
    .ed-hero-3d .ed-hero-sub{ pointer-events:none; }
    /* keep the hero copy painted above the (transparent) canvas */
    .ed-hero-3d .ed-hero-tag,
    .ed-hero-3d .ed-hero-sub{ position:relative; z-index:3; }
  }

  /* ===================================================================
     SHOWCASE LAYOUT — Apple-style scroll-driven 3D presentation.
     Self-contained under the .sc- prefix. The stage is always dark
     (the cinematic hero reads best on black), the editorial body below
     reuses the standard .ed-page styling. Driven by sc-showcase.js.
     =================================================================== */
  .sc-page{
    --ed-bg:#0a0a0a; --ed-fg:#f4f3f1; --ed-dim:#8f8f8f; --ed-red:#e9e9ea; --ed-surface:#141414;
    background:#0a0a0a; color:var(--ed-fg); position:relative;
    /* NB: no overflow:hidden here — it would turn .sc-page into a scroll
       container and break the sticky 3D stage. Horizontal clipping is handled
       by body{overflow-x:hidden} + the stage itself. */
  }
  .sc-body{overflow:hidden;}  /* the editorial part below can safely clip */
  .sc-page ::selection{background:var(--ed-red); color:#fff;}
  .sc-back{position:fixed; top:84px; left:32px; z-index:40;}

  /* ── day mode: white stage, dark text (dark mode stays black) ── */
  [data-theme="light"] .sc-page{
    --ed-bg:#ffffff; --ed-fg:#0c0c0c; --ed-dim:#6b6a67; --ed-surface:#f3f3f1;
    background:#ffffff;
  }
  [data-theme="light"] .sc-stage{ background:#ffffff; }
  [data-theme="light"] .sc-loading{ background:#ffffff; }
  [data-theme="light"] .sc-glow{
    background:
      radial-gradient(58% 52% at 50% 50%, rgba(150,150,158,0.08), rgba(150,150,158,0) 70%),
      radial-gradient(95% 95% at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.06) 100%);
  }
  [data-theme="light"] .sc-progress{ background:rgba(0,0,0,0.12); }

  .sc-stage{position:relative; height:560vh; background:#0a0a0a;}
  .sc-sticky{position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center;}
  .sc-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2;}

  /* soft red glow behind the product — matches the DA accent */
  .sc-glow{position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(60% 55% at 50% 52%, rgba(150,150,158,0.13), rgba(150,150,158,0) 70%),
      radial-gradient(90% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
    opacity:0; transition:opacity .6s ease;}
  .sc-stage.sc-live .sc-glow{opacity:1;}

  .sc-overlay{position:absolute; inset:0; z-index:3; pointer-events:none;}
  .sc-cap{position:absolute; opacity:0; will-change:opacity,transform;
    /* legibility: soft dark halo so light text stays readable over bright 3D */
    text-shadow:0 0 1px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.55), 0 8px 48px rgba(0,0,0,0.45);}
  [data-theme="light"] .sc-cap{
    /* day mode: light halo so dark text stays readable over the 3D */
    text-shadow:0 0 1px rgba(255,255,255,0.7), 0 2px 10px rgba(255,255,255,0.85), 0 8px 44px rgba(255,255,255,0.8);}

  .sc-eyebrow{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.16em;
    color:var(--ed-red); text-transform:uppercase; display:block; margin-bottom:16px;}

  /* phase 0 — hero: title sits in the upper band, product fills below it */
  .sc-cap-hero{left:0; right:0; top:11vh; text-align:center; padding:0 6vw;}
  .sc-title{font-family:'Space Grotesk',sans-serif; font-weight:800;
    font-size:clamp(58px,11vw,180px); line-height:0.84; letter-spacing:-0.02em;}
  .sc-title em{color:var(--ed-red); font-style:normal;}
  .sc-sub{font-size:clamp(14px,1.4vw,18px); color:var(--ed-dim); margin-top:28px;
    letter-spacing:0.01em; max-width:520px; margin-left:auto; margin-right:auto;}

  /* phase 1/2/3 — side captions */
  .sc-cap-side{top:50%; transform:translateY(-50%); max-width:min(38vw,420px);}
  .sc-cap-left{left:6vw; text-align:left;}
  .sc-cap-right{right:6vw; text-align:right;}
  .sc-line{font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:0.005em;
    font-size:clamp(30px,4.4vw,66px); line-height:0.95;}
  .sc-text{font-size:15px; line-height:1.6; color:var(--ed-dim); margin-top:18px;}
  .sc-big{font-family:'Archivo Black',sans-serif; font-size:clamp(90px,16vw,230px); line-height:0.8;
    color:var(--ed-fg); display:flex; align-items:flex-start; gap:14px;}
  .sc-cap-left .sc-big{justify-content:flex-start;}
  .sc-unit{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.14em;
    color:var(--ed-red); margin-top:18px;}

  /* phase 4 — final centred */
  .sc-cap-final{left:0; right:0; bottom:14vh; text-align:center; padding:0 6vw;}
  .sc-title-lg{font-family:'Space Grotesk',sans-serif; font-weight:800;
    font-size:clamp(40px,6.5vw,104px); line-height:0.9; letter-spacing:-0.02em;}
  .sc-cta{color:var(--ed-fg); margin-top:22px; font-family:'Space Mono',monospace;
    font-size:12px; letter-spacing:0.16em; text-transform:uppercase; animation:scPulse 2.4s ease-in-out infinite;}
  @keyframes scPulse{0%,100%{opacity:.55;}50%{opacity:1;}}

  /* thin scroll-progress rail (right edge) */
  .sc-progress{position:absolute; right:26px; top:50%; transform:translateY(-50%);
    width:2px; height:140px; background:rgba(255,255,255,0.12); z-index:4; border-radius:2px; overflow:hidden;
    opacity:0; transition:opacity .5s ease;}
  .sc-stage.sc-live .sc-progress{opacity:1;}
  .sc-progress-bar{position:absolute; top:0; left:0; width:100%; height:0%; background:var(--ed-red);}

  /* loading + hint */
  .sc-loading{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px; color:var(--ed-dim);
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em;
    background:#0a0a0a; transition:opacity .6s ease;}
  .sc-loading.sc-hidden{opacity:0; pointer-events:none;}
  .sc-hint-drag{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4;
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ed-dim); opacity:0; transition:opacity .6s ease;}
  .sc-stage.sc-live .sc-hint-drag{opacity:.7;}

  .sc-body{padding-top:40px;}

  @media (max-width:900px){
    .sc-stage{height:480vh;}
    .sc-cap-side{max-width:80vw; left:6vw; right:auto; text-align:left; top:auto; bottom:12vh; transform:none;}
    .sc-cap-right{left:6vw; right:auto; text-align:left;}
    .sc-big{font-size:clamp(80px,26vw,160px);}
    .sc-progress{display:none;}
    .sc-back{top:70px; left:18px;}
  }

/* ============ CORRECTIF v8 : difference réparée (z-index isolants) ============ */
/* CONTACT : retirer le contexte d'empilement qui bloquait la difference */
.contact-inner{z-index:auto !important;}
/* formulaire : tout en difference (marche maintenant que contact-inner n'isole plus) */
.msg-form input,.msg-form textarea,.msg-form label,.msg-form button,.msg-form button *,.form-status,.form-status *,.contact-links a,.contact-links a *,.contact-inner p,.contact-inner span{mix-blend-mode:difference !important;color:#fff !important;}
.msg-form input::placeholder,.msg-form textarea::placeholder{color:#fff !important;opacity:0.55;}
/* HÉROS PROJET : retirer les z-index qui isolaient les titres */
.ed-hero-title,.ed-hero-sub,.detail-hero-content{z-index:auto !important;}
/* BOUTONS RETOUR : par thème (fixes + z-index = isolés, difference impossible) — visibles partout */
.ed-back-btn,.sc-back,.back-link{mix-blend-mode:normal !important;background:transparent !important;border:1px solid #fff !important;color:#fff !important;backdrop-filter:none !important;}
[data-theme="light"] .ed-back-btn,[data-theme="light"] .sc-back,[data-theme="light"] .back-link{border-color:#0d0d0f !important;color:#0d0d0f !important;}
/* Nike WATCH (sc-title em) + glow : par thème (le reste du hero Nike déjà par thème) */
.sc-title em,.sc-glow,.sc-glow *{color:#fff !important;}
[data-theme="light"] .sc-title em,[data-theme="light"] .sc-glow,[data-theme="light"] .sc-glow *{color:#0d0d0f !important;}

/* ============ SÉLECTION v4 : intervalle compteur/texte et trio recentré ============ */
@media (min-width:1024px){
  #work.section{max-width:1700px;}
  #work > .section-head,
  #work > .more-work{width:100%;max-width:1320px;margin-left:auto;margin-right:auto;}
  .stack-sticky{
    max-width:1700px;
    justify-content:center;
    gap:clamp(70px,5vw,100px);
    padding-left:clamp(96px,6.6vw,124px);
    padding-right:40px;
  }
  .stack-text-col{
    flex:0 1 clamp(540px,37vw,620px);
    grid-template-columns:clamp(150px,10vw,190px) minmax(0,1fr);
    gap:clamp(40px,3vw,52px);
  }
  .stack-media-col{
    flex:0 1 min(640px,70vh);
    width:min(640px,70vh);
  }
}