/* ============================================================
   HIVING — House of Influence
   Maison de talents & de médias · Clichy
   Editorial / warm-cream direction
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,800;1,900&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* warm editorial neutrals */
  --paper:    #f4f0e5;   /* main background — warm cream */
  --paper-2:  #efeadd;   /* alt section */
  --paper-3:  #e7e0cf;   /* raised panel / card */
  --ink:      #15140f;   /* warm near-black text */

  /* greens — the house lineage */
  --forest:   #1c5a3e;   /* premium house accent */
  --forest-d: #0f2d20;   /* deep band */
  --forest-dd:#0a2017;   /* deepest (ecosystem) */
  --forest-l: #2c7d56;   /* lighter green on cream */
  --lime:     #cbe646;   /* RESERVED for Hiving Food vertical */

  --ink-dim:  rgba(21,20,15,0.62);
  --ink-faint:rgba(21,20,15,0.36);
  --line:     rgba(21,20,15,0.16);
  --line-soft:rgba(21,20,15,0.09);

  /* on dark/green */
  --on-d:      #f1ede1;
  --on-d-dim:  rgba(241,237,225,0.62);
  --on-d-faint:rgba(241,237,225,0.34);
  --line-d:    rgba(241,237,225,0.16);

  --sans:  'Archivo', system-ui, sans-serif;
  --body:  'Hanken Grotesk', system-ui, sans-serif;
  --serif: 'Bodoni Moda', Georgia, serif;
  --mono:  'Space Mono', ui-monospace, monospace;
  --script:'Caveat', cursive;

  --maxw: 1520px;
  --pad: clamp(20px, 5vw, 100px);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--body); background:var(--paper); color:var(--ink);
  overflow-x:hidden; font-size:17px; line-height:1.55;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--forest); color:var(--paper); }

/* film grain */
.grain{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; }

/* shared bits */
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.7em; color:var(--ink-dim); }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--forest); display:inline-block; }
.eyebrow .rule{ width:40px; height:1.5px; background:currentColor; opacity:.55; display:inline-block; }
.ital{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-0.01em; }
.script{ font-family:var(--script); font-weight:600; }
.em{ color:var(--forest); }

/* highlight marker (DNA from Food, but forest not lime) */
.mark{ background:var(--forest); color:var(--paper); padding:.02em .18em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.mark--lime{ background:var(--lime); color:var(--ink); }

/* reveals */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; } [data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; } [data-reveal-d="4"]{ transition-delay:.32s; }
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{ display:block; transform:translateY(108%); transition:transform 1s var(--ease); }
.line-mask.in > span, .in .line-mask > span{ transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal],.line-mask>span{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:15px 26px; border-radius:46px; transition:transform .35s var(--ease), background .35s, color .35s, border-color .35s; }
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--dark:hover{ background:var(--forest); transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--lime{ background:var(--lime); color:var(--ink); }
.btn--lime:hover{ transform:translateY(-2px); }
.btn .ic{ width:22px; height:22px; border-radius:50%; background:currentColor; display:grid; place-items:center; }
.btn .ic svg{ width:9px; height:9px; }

/* plus marks (Food DNA) */
.plus{ position:absolute; width:18px; height:18px; opacity:.5; }
.plus::before,.plus::after{ content:''; position:absolute; background:var(--ink); }
.plus::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.plus::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }

/* ============================================================ NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:22px var(--pad); transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(244,240,229,0.82); backdrop-filter:blur(14px) saturate(1.2); padding-top:14px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.nav__logo{ display:flex; align-items:center; gap:11px; }
.nav__logo svg{ height:22px; width:auto; color:var(--ink); }
.nav__logo .tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); border-radius:20px; padding:3px 9px; }
.nav__links{ display:flex; gap:30px; align-items:center; }
.nav__links a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); position:relative; padding:4px 0; transition:color .3s; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--forest); transition:width .35s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:40px; display:inline-flex; align-items:center; gap:8px; transition:transform .3s var(--ease), background .3s; }
.nav__cta:hover{ background:var(--forest); transform:translateY(-1px); }
@media (max-width:980px){ .nav__links{ display:none; } }

/* ============================================================ HERO */
.hero{ min-height:94svh; position:relative; display:flex; flex-direction:column; justify-content:center; padding-bottom:clamp(40px,6vh,76px); padding-top:clamp(104px,12vh,140px); overflow:hidden; }
.hero__dots{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:radial-gradient(var(--forest) 1px, transparent 1.4px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 30%, #000 0%, transparent 62%); mask-image:radial-gradient(120% 80% at 70% 30%, #000 0%, transparent 62%); opacity:.18; }
.hero__inner{ position:relative; z-index:2; width:100%; display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(30px,4vw,72px); align-items:end; }
@media (max-width:1040px){ .hero__inner{ grid-template-columns:1fr; } }

.hero__pill{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line); border-radius:40px; padding:8px 16px; margin-bottom:clamp(22px,4vh,40px); }
.hero__pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--forest); }
.hero h1{ margin-bottom:clamp(20px,3vh,32px); position:relative; }
.hero .l1{ font-family:var(--sans); font-weight:900; font-size:clamp(58px,12.5vw,196px); line-height:.84; letter-spacing:-0.04em; }
.hero .l2{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(54px,11.6vw,182px); line-height:.92; color:var(--forest); letter-spacing:-0.02em; position:relative; display:inline-block; margin-top:-0.1em; }
.hero .l2 .under{ position:absolute; left:0; bottom:.08em; height:.06em; width:100%; background:var(--forest); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .6s; }
.hero.in .l2 .under, .hero-sticky.in .l2 .under{ transform:scaleX(1); }
.hero__scribble{ position:absolute; right:5%; top:-9%; font-family:var(--script); font-weight:700; font-size:clamp(20px,2.4vw,34px); color:var(--forest); transform:rotate(-7deg); }
.hero__scribble svg{ display:block; width:120px; height:auto; margin-top:-6px; }
.hero__sub{ max-width:560px; font-size:clamp(16px,1.4vw,20px); color:var(--ink-dim); margin-bottom:30px; }
.hero__sub b{ color:var(--ink); font-weight:600; }
.hero__actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* hero showreel visual */
.hero__reel{ position:relative; }
.hero__reel .frame{ position:relative; border-radius:12px 12px 4px 4px; overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); border:1px solid var(--line); box-shadow:0 30px 70px -30px rgba(21,20,15,.4); }
.hero__reel image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.hero__reel .badge{ position:absolute; right:-14px; top:-18px; z-index:5; background:var(--lime); color:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:9px 14px; border-radius:30px; transform:rotate(4deg); box-shadow:0 8px 24px -8px rgba(21,20,15,.4); }
.hero__reel .play{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none; }
.hero__reel .play span{ width:64px; height:64px; border-radius:50%; background:rgba(244,240,229,.92); display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.4); }
.hero__reel .play span svg{ width:18px; height:18px; margin-left:3px; fill:var(--ink); }
.hero__reel .cap{ position:absolute; left:14px; bottom:12px; z-index:4; font-family:var(--mono); font-size:11px; color:var(--on-d); background:rgba(15,45,32,.7); backdrop-filter:blur(6px); padding:5px 11px; border-radius:30px; }

.scrollcue{ position:absolute; left:var(--pad); bottom:22px; z-index:3; display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.scrollcue .bar{ width:1.5px; height:42px; background:var(--line); position:relative; overflow:hidden; }
.scrollcue .bar::after{ content:''; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--forest); animation:cue 2.1s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(280%);} }

/* ---- immersive full-bleed hero (light / airy) ---- */
.hero--immersive{ min-height:100svh; justify-content:flex-end; align-items:stretch; padding:0; }
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(165deg, var(--paper-3), var(--paper-2)); }
.hero__media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
@media (prefers-reduced-motion:no-preference){ .hero__media image-slot, .hero__media .kb{ animation:kenburns 22s ease-in-out infinite alternate; transform-origin:center; } }
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.13) translate(-1.5%,-1%); } }
/* soft cream scrim — airy, keeps the dark editorial type legible over any image */
.hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(244,240,229,.40) 0%, rgba(244,240,229,.06) 24%, rgba(244,240,229,.12) 52%, rgba(244,240,229,.86) 100%); }
.hero__play{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); z-index:2; width:90px; height:90px; border-radius:50%; background:rgba(244,240,229,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(21,20,15,.18); display:grid; place-items:center; transition:.35s var(--ease); }
.hero__play svg{ width:24px; height:24px; fill:var(--ink); margin-left:4px; transition:fill .35s; }
.hero__play:hover{ background:var(--forest); border-color:var(--forest); transform:translate(-50%,-50%) scale(1.07); }
.hero__play:hover svg{ fill:#f4f0e5; }
.hero__top{ position:absolute; top:clamp(86px,11vh,116px); left:0; right:0; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.hero__reelbadge{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--lime); padding:8px 14px; border-radius:30px; white-space:nowrap; }
.hero__content{ position:relative; z-index:3; width:100%; padding-bottom:clamp(56px,9vh,108px); }
.hero--immersive .l1{ font-size:clamp(54px,10.6vw,164px); }
.hero--immersive .l2{ font-size:clamp(50px,10vw,154px); }
.hero__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(24px,4vw,60px); flex-wrap:wrap; margin-top:clamp(20px,3vh,30px); }
.hero--immersive .hero__sub{ max-width:520px; margin-bottom:0; }
.hero--immersive .scrollcue{ left:auto; right:var(--pad); }
.btn--lime{ background:var(--lime); color:var(--ink); }
.btn--lime:hover{ transform:translateY(-2px); }
@media (max-width:760px){ .hero__play{ width:66px; height:66px; } .hero__row{ flex-direction:column; align-items:flex-start; } .hero__reelbadge{ display:none; } }

/* ============================================================ SCALE BAR */
.scale{ padding:clamp(54px,8vh,104px) 0 clamp(40px,7vh,90px); }
.scale__panel{ position:relative; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); display:grid; grid-template-columns:repeat(5,1fr); }
.scale__panel .plus{ width:22px; height:22px; }
.scale__panel .plus.tl{ top:-11px; left:-11px; } .scale__panel .plus.br{ bottom:-11px; right:-11px; }
.stat{ padding:clamp(30px,4vw,54px) clamp(20px,2.4vw,40px); border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat__num{ font-family:var(--sans); font-weight:900; font-size:clamp(34px,3.9vw,58px); line-height:.9; letter-spacing:-0.04em; }
.stat{ padding-left:clamp(16px,1.9vw,32px); padding-right:clamp(16px,1.9vw,32px); }
.stat__num .u{ color:var(--forest); }
.stat__lab{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-top:14px; }
.stat__sub{ font-size:13.5px; color:var(--ink-faint); margin-top:6px; }
@media (max-width:860px){ .scale__panel{ grid-template-columns:1fr 1fr; } .stat{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .stat:nth-child(2n){ border-right:none; } .stat:last-child{ grid-column:1/-1; border-bottom:none; } }
@media (max-width:520px){ .scale__panel{ grid-template-columns:1fr; } .stat{ border-right:none !important; border-bottom:1px solid var(--line); } }

/* ============================================================ MANIFESTO + PILLARS */
.manifesto{ padding:clamp(70px,12vh,160px) 0 clamp(50px,8vh,110px); }
.manifesto .eyebrow{ margin-bottom:46px; }
.manifesto__big{ font-family:var(--sans); font-weight:800; font-size:clamp(28px,5vw,80px); line-height:1.02; letter-spacing:-0.03em; max-width:1280px; }
.manifesto__big .ital{ color:var(--forest); }
.manifesto__big .strike{ position:relative; color:var(--ink-faint); }
.manifesto__big .strike::after{ content:''; position:absolute; left:-2%; right:-2%; top:52%; height:.05em; background:var(--forest); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .5s; }
.manifesto__big.in .strike::after{ transform:scaleX(1); }
.manifesto__h{ font-family:var(--sans); font-weight:900; font-size:clamp(30px,5vw,80px); line-height:.98; letter-spacing:-0.03em; max-width:1100px; margin-top:30px; }
.manifesto__h .ital{ font-family:var(--serif); font-weight:500; color:var(--forest); }
.manifesto__lead{ max-width:700px; margin-top:24px; color:var(--ink-dim); font-size:clamp(16px,1.4vw,20px); }
.manifesto__lead b{ color:var(--ink); font-weight:600; }

/* ecosystem pillars */
.pillars{ margin-top:clamp(50px,8vh,90px); display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
@media (max-width:980px){ .pillars{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr 1fr; } }
.pillar{ padding:28px 22px 30px 0; border-right:1px solid var(--line); }
.pillar:last-child{ border-right:none; }
.pillar__no{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.1em; }
.pillar__name{ font-family:var(--sans); font-weight:800; font-size:clamp(19px,1.5vw,24px); margin-top:18px; letter-spacing:-0.01em; }
.pillar__name .ital{ color:var(--forest); }
.pillar__desc{ color:var(--ink-dim); font-size:13.5px; margin-top:8px; }

/* ============================================================ UNIVERSES */
.universes{ padding:clamp(70px,11vh,150px) 0; background:var(--paper-2); }
.universes__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:14px; }
.universes__head h2{ font-family:var(--sans); font-weight:900; font-size:clamp(30px,4.6vw,76px); letter-spacing:-0.03em; line-height:.98; }
.universes__head h2 .ital{ color:var(--forest); }
.uni-list{ border-top:1px solid var(--line); }
.uni{ display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:24px; padding:clamp(22px,3.2vh,42px) 0; border-bottom:1px solid var(--line); position:relative; cursor:pointer; transition:padding-left .45s var(--ease); }
.uni__no{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); letter-spacing:.1em; }
.uni__name{ font-family:var(--sans); font-weight:900; font-size:clamp(34px,6.2vw,108px); line-height:.9; letter-spacing:-0.035em; color:var(--ink); opacity:.42; transition:opacity .4s, color .4s; }
.uni__name .ital{ font-family:var(--serif); font-weight:500; }
.uni__meta{ text-align:right; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); transition:color .4s; line-height:1.7; }
.uni:hover{ padding-left:26px; } .uni:hover .uni__name{ opacity:1; } .uni:hover .uni__meta{ color:var(--forest); }
.uni__arrow{ position:absolute; left:-30px; top:50%; transform:translateY(-50%) translateX(-10px); opacity:0; color:var(--forest); font-size:22px; transition:.4s var(--ease); }
.uni:hover .uni__arrow{ opacity:1; transform:translateY(-50%) translateX(0); }
.uni__peek{ position:fixed; width:min(28vw,340px); aspect-ratio:4/5; pointer-events:none; z-index:60; border-radius:6px; overflow:hidden; opacity:0; transform:scale(.94) rotate(-3deg); transition:opacity .35s var(--ease), transform .35s var(--ease); box-shadow:0 30px 80px rgba(21,20,15,.35); }
.uni__peek.show{ opacity:1; transform:scale(1) rotate(-2deg); }

/* FOOD vertical block */
.food{ margin-top:clamp(40px,6vh,70px); position:relative; border-radius:16px; overflow:hidden; background:var(--lime); color:var(--ink); padding:clamp(34px,4vw,60px); display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
@media (max-width:820px){ .food{ grid-template-columns:1fr; } }
.food__tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6em; }
.food__tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink); }
.food h3{ font-family:var(--sans); font-weight:900; font-size:clamp(32px,4.4vw,72px); line-height:.92; letter-spacing:-0.03em; margin:18px 0 16px; }
.food h3 .ital{ font-family:var(--serif); font-weight:500; }
.food p{ max-width:520px; font-size:15.5px; color:rgba(21,20,15,.72); margin-bottom:26px; }
.food .btn--dark:hover{ background:var(--forest); }
.food__logo{ display:flex; align-items:center; gap:10px; }
.food__logo svg{ height:34px; color:var(--ink); }
.food__logo .f{ font-family:var(--script); font-weight:700; font-size:34px; }
.food__side{ display:flex; flex-direction:column; gap:14px; }
.food__stat{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(21,20,15,.2); padding-top:12px; }
.food__stat .v{ font-family:var(--sans); font-weight:900; font-size:clamp(26px,2.4vw,40px); letter-spacing:-0.02em; }
.food__stat .k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* ============================================================ ECOSYSTEM (WOW) — theme-driven */
.eco{
  --eco-bg:#103024; --eco-fg:#f1ede1; --eco-fg-dim:rgba(241,237,225,.62); --eco-fg-faint:rgba(241,237,225,.34);
  --eco-line:#2c7d56; --eco-line-op:.20; --eco-accent:var(--lime); --eco-on-accent:#15140f;
  --eco-node-bg:#0d2a1f; --eco-border:rgba(241,237,225,.16);
  --eco-panel-bg:rgba(13,42,31,.80); --eco-grad:rgba(10,32,23,.85);
  background:var(--eco-bg); color:var(--eco-fg); padding:clamp(70px,11vh,150px) 0 clamp(50px,8vh,110px); position:relative; overflow:hidden;
  transition:background .6s var(--ease), color .6s var(--ease);
}
body[data-eco="emeraude"] .eco{ --eco-bg:#0a3b2c; --eco-node-bg:#093528; --eco-line:#2f9b6e; --eco-grad:rgba(7,42,31,.85); }
body[data-eco="olive"]    .eco{ --eco-bg:#262f17; --eco-node-bg:#222b15; --eco-line:#8a973f; --eco-grad:rgba(28,36,16,.85); }
body[data-eco="ardoise"]  .eco{ --eco-bg:#1d2421; --eco-node-bg:#161c19; --eco-line:#5a766b; --eco-grad:rgba(15,20,18,.85); }
body[data-eco="encre"]    .eco{ --eco-bg:#0c0c0a; --eco-node-bg:#161613; --eco-line:#3c3c33; --eco-grad:rgba(0,0,0,.86); }
body[data-eco="creme"]    .eco{ --eco-bg:#e7e0cf; --eco-fg:#15140f; --eco-fg-dim:rgba(21,20,15,.64); --eco-fg-faint:rgba(21,20,15,.4); --eco-line:var(--forest); --eco-line-op:.26; --eco-accent:var(--forest); --eco-on-accent:#f4f0e5; --eco-node-bg:#d8d0bd; --eco-border:rgba(21,20,15,.16); --eco-panel-bg:rgba(244,240,229,.9); }
.eco__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:3; }
.eco__head .eyebrow{ color:var(--eco-fg-dim); } .eco__head .eyebrow .dot{ background:var(--eco-accent); } .eco__head .eyebrow .rule{ background:var(--eco-fg-dim); }
.eco__head h2{ font-family:var(--sans); font-weight:900; font-size:clamp(30px,5vw,84px); line-height:.96; letter-spacing:-0.03em; max-width:900px; }
.eco__head h2 .ital{ font-family:var(--serif); font-weight:500; color:var(--eco-accent); }
.eco__head .lead{ max-width:340px; color:var(--eco-fg-dim); font-size:15px; }
.eco__filters{ display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 8px; position:relative; z-index:3; }
.eco__chip{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--eco-border); color:var(--eco-fg-dim); padding:9px 16px; border-radius:30px; transition:.3s var(--ease); }
.eco__chip:hover{ color:var(--eco-fg); border-color:var(--eco-fg); }
.eco__chip.active{ background:var(--eco-accent); color:var(--eco-on-accent); border-color:var(--eco-accent); }

.eco__stage{ position:relative; height:930px; margin-top:18px; }
@media (max-width:860px){ .eco__stage{ height:auto; } }
.eco__lines{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }
.eco__lines line{ stroke:var(--eco-line); stroke-width:1; opacity:var(--eco-line-op); transition:opacity .4s, stroke .4s; }
.eco__lines line.hot{ stroke:var(--eco-accent); opacity:.7; }
.node{ position:absolute; z-index:2; cursor:pointer; transform:translate(-50%,-50%); transition:filter .4s, opacity .45s var(--ease); will-change:transform; }
.node__inner{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--eco-border); box-shadow:0 18px 40px -18px rgba(0,0,0,.6); transition:transform .45s var(--ease), border-color .4s; background:var(--eco-node-bg); }
.node image-slot{ display:block; width:100%; height:100%; }
.node__tag{ position:absolute; left:8px; bottom:8px; right:8px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:2px; pointer-events:none; }
.node__tag .nm{ font-family:var(--sans); font-weight:700; font-size:12px; color:#f1ede1; text-shadow:0 1px 6px rgba(0,0,0,.6); line-height:1.08; max-width:100%; overflow-wrap:anywhere; }
.node__tag .uv{ font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--eco-accent); text-shadow:0 1px 5px rgba(0,0,0,.7); max-width:100%; white-space:nowrap; }
.node__grad{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,transparent 45%, var(--eco-grad)); pointer-events:none; }
.node:hover{ z-index:30; }
.node:hover .node__inner{ transform:scale(1.12); border-color:var(--eco-accent); }
.node.dim{ opacity:.16; filter:grayscale(.6); }
.node.hot .node__inner{ border-color:var(--eco-accent); }

/* ecosystem detail panel */
.eco__panel{ position:absolute; right:0; bottom:0; z-index:25; width:min(340px,80vw); background:var(--eco-panel-bg); backdrop-filter:blur(12px); border:1px solid var(--eco-border); border-radius:12px; padding:24px; transition:opacity .4s, transform .4s var(--ease), background .6s; }
@media (max-width:860px){ .eco__panel{ position:relative; width:100%; margin-top:24px; } }
.eco__panel .pv-uv{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--eco-accent); }
.eco__panel .pv-nm{ font-family:var(--sans); font-weight:900; font-size:34px; letter-spacing:-0.02em; line-height:1; margin:10px 0 4px; color:var(--eco-fg); }
.eco__panel .pv-hd{ font-family:var(--mono); font-size:12px; color:var(--eco-fg-dim); }
.eco__panel .pv-desc{ font-size:14px; color:var(--eco-fg-dim); margin:16px 0; line-height:1.5; }
.eco__panel .pv-row{ display:flex; gap:26px; padding-top:16px; border-top:1px solid var(--eco-border); }
.eco__panel .pv-row .v{ font-family:var(--sans); font-weight:800; font-size:22px; letter-spacing:-0.02em; color:var(--eco-fg); }
.eco__panel .pv-row .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--eco-fg-faint); margin-top:3px; }
.eco__panel .pv-brands{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--eco-fg-dim); }
.eco__panel .pv-brands b{ color:var(--eco-accent); font-weight:400; }
.eco__foot{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:40px; position:relative; z-index:3; }
.eco__foot .btn--ghost{ border-color:var(--eco-border); color:var(--eco-fg); }
.eco__foot .btn--ghost:hover{ border-color:var(--eco-fg); }
.eco__foot .note{ font-family:var(--script); font-weight:600; font-size:22px; color:var(--eco-accent); }

/* ============================================================ WORK / CASES */
.work{ padding:clamp(70px,11vh,150px) 0; }
.work__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:50px; }
.work__head h2{ font-family:var(--sans); font-weight:900; font-size:clamp(32px,5vw,84px); line-height:.96; letter-spacing:-0.03em; }
.work__head h2 .ital{ color:var(--forest); }
.cases{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,44px); }
@media (max-width:860px){ .cases{ grid-template-columns:1fr; } }
.case{ display:flex; flex-direction:column; cursor:pointer; }
.case--wide{ grid-column:1 / -1; display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,3vw,56px); align-items:center; }
@media (max-width:860px){ .case--wide{ grid-template-columns:1fr; } }
.case__media{ position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--paper-3); }
.case--wide .case__media{ aspect-ratio:4/3; }
.case__media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.case__media .case__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; background:#0a2017; }
.case__media .tagrow{ position:absolute; left:16px; top:16px; z-index:3; display:flex; gap:8px; }
.case .ctag{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:rgba(21,20,15,.78); color:var(--paper); padding:6px 12px; border-radius:30px; backdrop-filter:blur(6px); }
.case .ctag--green{ background:var(--forest); }
.case__body{ padding:26px 4px 0; } .case--wide .case__body{ padding:0; }
.case__title{ font-family:var(--sans); font-weight:900; font-size:clamp(23px,2.4vw,40px); line-height:1.02; letter-spacing:-0.02em; }
.case__title .ital{ font-family:var(--serif); font-weight:500; color:var(--forest); }
.case__desc{ color:var(--ink-dim); margin-top:14px; max-width:560px; font-size:15.5px; }
.case__stats{ display:flex; gap:34px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.case__stats .v{ font-family:var(--sans); font-weight:900; font-size:clamp(22px,2vw,32px); letter-spacing:-0.02em; }
.case__stats .k{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }

/* ============================================================ STUDIOS (polaroid spirit) */
.studios{ padding:clamp(70px,11vh,150px) 0; background:var(--paper-2); overflow:hidden; }
.studios__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; margin-bottom:18px; }
.studios__head .l{ max-width:900px; }
.studios__head h2{ font-family:var(--sans); font-weight:900; font-size:clamp(34px,6.2vw,120px); line-height:.88; letter-spacing:-0.035em; }
.studios__head h2 .ital{ font-family:var(--serif); font-weight:500; color:var(--forest); }
.studios__head h2 .mark{ background:var(--forest); color:var(--paper); }
.studios__head .lead{ margin-top:24px; max-width:560px; color:var(--ink-dim); font-size:clamp(15px,1.3vw,18px); }
.studios__head .lead b{ color:var(--ink); font-weight:600; }
.studios__scribble{ font-family:var(--script); font-weight:600; font-size:clamp(18px,1.8vw,26px); color:var(--forest); display:inline-flex; align-items:center; gap:8px; }
.plateaux{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,40px); margin-top:50px; }
@media (max-width:860px){ .plateaux{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }
.plateau{ position:relative; }
/* polaroid */
.polaroid{ background:#fbfaf4; padding:14px 14px 0; border-radius:3px; box-shadow:0 20px 44px -22px rgba(21,20,15,.45); transform:rotate(var(--rot,-2deg)); transition:transform .5s var(--ease); position:relative; }
.plateau:hover .polaroid{ transform:rotate(0deg) translateY(-6px); }
.polaroid .tape{ position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(var(--trot,-3deg)); width:90px; height:26px; background:rgba(28,90,62,.28); border:1px dashed rgba(28,90,62,.5); }
.polaroid .tape.lime{ background:rgba(203,230,70,.6); border-color:rgba(21,20,15,.3); }
.polaroid .tape.dark{ background:rgba(21,20,15,.78); border-color:rgba(21,20,15,.5); }
.polaroid__media{ position:relative; aspect-ratio:1/1; background:var(--paper-3); overflow:hidden; }
.polaroid__media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.polaroid__cap{ display:flex; justify-content:space-between; align-items:center; padding:12px 4px 16px; }
.polaroid__cap .h{ font-family:var(--script); font-weight:600; font-size:22px; color:var(--ink); }
.polaroid__cap .n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-faint); }
/* spec card */
.spec{ border:1px solid var(--line); border-radius:12px; padding:24px 22px 26px; margin-top:18px; background:var(--paper); transition:border-color .4s, transform .4s; }
.plateau:hover .spec{ border-color:var(--forest); }
.spec__top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.spec__name{ font-family:var(--sans); font-weight:900; font-size:clamp(24px,2.3vw,32px); letter-spacing:-0.02em; }
.spec__name .ital{ font-family:var(--serif); font-weight:500; color:var(--forest); }
.spec__desc{ color:var(--ink-dim); font-size:14px; margin-top:10px; min-height:60px; }
.spec__foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }
.spec__foot .price{ font-family:var(--sans); font-weight:900; font-size:22px; }
.spec__foot .price small{ font-family:var(--mono); font-weight:400; font-size:11px; color:var(--ink-faint); }
.spec__foot .crew{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.studios__cta{ display:flex; justify-content:center; align-items:center; gap:20px; margin-top:46px; flex-wrap:wrap; }

/* ============================================================ METHOD */
.method{ padding:clamp(70px,11vh,150px) 0; }
.method .eyebrow{ margin-bottom:34px; }
.method h2{ font-family:var(--sans); font-weight:900; font-size:clamp(30px,5vw,82px); line-height:.96; letter-spacing:-0.03em; max-width:1000px; }
.method h2 .ital{ font-family:var(--serif); font-weight:500; color:var(--forest); }
.method__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2vw,44px); margin-top:64px; }
@media (max-width:860px){ .method__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .method__grid{ grid-template-columns:1fr; } }
.step{ border-top:1px solid var(--line); padding-top:22px; }
.step__no{ font-family:var(--script); font-weight:700; font-size:58px; color:var(--forest); line-height:.9; }
.step__name{ font-family:var(--sans); font-weight:800; font-size:21px; margin-top:14px; letter-spacing:-0.01em; }
.step__desc{ color:var(--ink-dim); font-size:14.5px; margin-top:10px; }

/* ============================================================ CLIENTS */
.clients{ background:var(--forest-d); color:var(--on-d); padding:clamp(38px,6vh,68px) 0; overflow:hidden; }
.clients .eyebrow{ color:var(--on-d-dim); justify-content:center; display:flex; margin-bottom:30px; }
.clients .eyebrow .rule{ background:var(--lime); } .clients .eyebrow .dot{ background:var(--lime); }
.marquee{ display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee__track{ display:flex; align-items:center; animation:scrollx 40s linear infinite; }
.marquee__track span{ font-family:var(--sans); font-weight:900; font-size:clamp(28px,4.2vw,64px); letter-spacing:-0.02em; padding:0 .5em; white-space:nowrap; opacity:.92; }
.marquee__track i{ color:var(--lime); font-style:normal; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ============================================================ CTA */
.cta{ padding:clamp(80px,16vh,200px) 0; text-align:center; position:relative; overflow:hidden; }
.cta .eyebrow{ justify-content:center; display:flex; margin-bottom:34px; }
.cta h2{ font-family:var(--sans); font-weight:900; font-size:clamp(40px,8.6vw,150px); line-height:.88; letter-spacing:-0.04em; }
.cta h2 .ital{ font-family:var(--serif); font-weight:500; color:var(--forest); }
.cta__sub{ max-width:560px; margin:28px auto 38px; color:var(--ink-dim); font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.6vw,23px); line-height:1.5; }
.cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta__scribble{ display:block; margin:22px auto 0; width:90px; color:var(--forest); }

/* ============================================================ FOOTER */
.footer{ background:var(--ink); color:var(--on-d); padding:clamp(50px,8vh,90px) 0 38px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--line-d); }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer__brand svg{ height:26px; color:var(--paper); }
.footer__brand .tl{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--on-d-dim); margin-top:18px; }
.footer__brand p{ color:var(--on-d-faint); font-size:14px; margin-top:14px; max-width:320px; }
.footer__brand .socials{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.footer__brand .socials a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line-d); padding:8px 13px; border-radius:30px; color:var(--on-d-dim); transition:.3s; }
.footer__brand .socials a:hover{ border-color:var(--lime); color:var(--lime); }
.footer__col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-d-faint); margin-bottom:18px; }
.footer__col a, .footer__news h4{ display:block; }
.footer__col a{ color:var(--on-d-dim); font-size:15px; padding:6px 0; transition:color .3s, padding-left .3s; }
.footer__col a:hover{ color:var(--paper); padding-left:5px; }
.footer__news h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-d-faint); margin-bottom:18px; }
.footer__news p{ color:var(--on-d-dim); font-size:14px; margin-bottom:16px; }
.footer__news .field{ display:flex; border:1px solid var(--line-d); border-radius:40px; overflow:hidden; max-width:340px; }
.footer__news input{ flex:1; background:none; border:none; color:var(--paper); font-family:var(--body); padding:13px 18px; outline:none; font-size:14px; }
.footer__news input::placeholder{ color:var(--on-d-faint); }
.footer__news button{ background:var(--lime); color:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:0 18px; white-space:nowrap; }
.footer__addr{ margin-top:24px; font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--on-d-dim); }
.footer__addr b{ color:var(--on-d-faint); display:block; font-weight:400; letter-spacing:.1em; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:28px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-d-faint); }
.footer__bottom .links{ display:flex; gap:24px; }
.footer__bottom a:hover{ color:var(--paper); }

/* ============================================================
   TWEAK STATES — expressive reshaping
   ============================================================ */

/* — Expression typographique — */
/* handwritten / playful DNA accents */
.script-accent{ transition:opacity .4s var(--ease); }
.x-mark{ transition:background .4s, color .4s, padding .4s; }
/* Sobre : retire les accents manuscrits, registre plus institutionnel */
body.temp-sobre .script-accent{ opacity:0; pointer-events:none; }
body.temp-sobre .hero__scribble{ display:none; }
body.temp-sobre .step__no{ font-family:var(--serif); font-style:italic; font-weight:600; }
body.temp-sobre .polaroid__cap .h{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
/* Expressif : amplifie le mix typographique */
body.temp-expressif .x-mark{ background:var(--forest); color:var(--paper); padding:.02em .2em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
body.temp-expressif .hero__scribble{ transform:rotate(-9deg) scale(1.12); }
body.temp-expressif .script-accent{ opacity:1; }
body.temp-expressif .uni__name{ font-style:normal; }
body.temp-expressif .uni:nth-child(even) .uni__name{ font-family:var(--serif); font-weight:500; font-style:italic; }

/* — Rythme / motion register — */
/* Calme : motion minimale, tout posé */
body.motion-calme [data-reveal]{ transform:translateY(10px); transition-duration:.6s; }
body.motion-calme .line-mask > span{ transition-duration:.6s; }
body.motion-calme .marquee__track{ animation-duration:64s; }
body.motion-calme .scrollcue .bar::after{ animation:none; }
/* Cinéma : motion ample et vivante */
body.motion-cinema [data-reveal]{ transform:translateY(48px); transition-duration:1.1s; }
body.motion-cinema .marquee__track{ animation-duration:28s; }
body.motion-cinema .hero .l1{ letter-spacing:-0.045em; }

/* grain intensity tie-in (kept subtle) */
body.motion-cinema .grain{ opacity:.06; }
body.motion-calme .grain{ opacity:.025; }

/* — Site background tone — */
body[data-bg="sable"]  { --paper:#f0e8d6; --paper-2:#e9dfca; --paper-3:#ded2b8; }
body[data-bg="ivoire"] { --paper:#f7f4ec; --paper-2:#f1ede2; --paper-3:#e8e2d2; }
body[data-bg="brume"]  { --paper:#edf0ea; --paper-2:#e6ebe2; --paper-3:#dce3d7; }
body[data-bg="kraft"]  { --paper:#ece3d3; --paper-2:#e4d9c4; --paper-3:#d8cab1; }
body{ transition:background .6s var(--ease); }

/* — Texture toggles — */
body.no-grain .grain{ display:none; }
body.no-dots .wave-bg{ display:none; }

/* site-wide interactive wave dot-field */
.wave-bg{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.hero__dots{ display:none; } /* replaced by the global wave field */

/* ============================================================
   SCROLL-EXPAND HERO — film s'ouvre au scroll (vanilla port of
   the 21st.dev ScrollExpandMedia effect, tuned for a portrait video)
   ============================================================ */
.hero--expand{ min-height:100svh; padding:0; display:block; overflow:visible; }
/* --se-p 0..1 progress · --se-w/--se-h media box size · --se-tx title parting */
.se{ --se-p:0; --se-w:240px; --se-h:340px; --se-tx:0vw;
  position:relative; height:100svh; width:100%; overflow:hidden; }

/* fading background photo */
.se__bg{ position:absolute; inset:0; z-index:0; opacity:calc(1 - var(--se-p)); transition:opacity .12s linear; will-change:opacity; }
.se__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.se__bg-scrim{ position:absolute; inset:0; background:
   linear-gradient(180deg, rgba(21,20,15,.34) 0%, rgba(21,20,15,.10) 26%, rgba(21,20,15,.16) 60%, rgba(244,240,229,.30) 100%); }

/* centered stage */
.se__stage{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; }

/* expanding video box */
.se__media{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  width:var(--se-w); height:var(--se-h); max-width:95vw; max-height:88vh;
  border-radius:16px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(21,20,15,.55);
  will-change:width,height; }
.se__video{ width:100%; height:100%; object-fit:cover; display:block; background:#0a2017; }
.se__media-scrim{ position:absolute; inset:0; background:rgba(10,32,23,.30); opacity:calc(.5 - var(--se-p)*.42); transition:opacity .2s linear; pointer-events:none; }

/* parting title sitting over the media */
.se__heading{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.02em;
  mix-blend-mode:difference; pointer-events:none;
  opacity:clamp(0, calc((1 - var(--se-p)) / 0.4), 1); will-change:opacity; }
.se__line{ font-family:var(--sans); font-weight:900; letter-spacing:-0.035em; line-height:.92; color:#f4f0e5;
  font-size:clamp(50px,9.4vw,150px); will-change:transform; }
.se__line--1{ transform:translateX(calc(-1 * var(--se-tx))); }
.se__line--2{ font-family:var(--serif); font-weight:500; font-style:italic; letter-spacing:-0.02em;
  font-size:clamp(46px,9vw,142px); transform:translateX(var(--se-tx)); }

/* scroll cue under the title — fades out as the film opens */
.se__cue{ position:absolute; left:0; right:0; bottom:clamp(26px,5vh,54px); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:calc(1 - var(--se-p)*1.4); transition:opacity .15s linear; }
.se__date{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-d);
  display:inline-flex; align-items:center; gap:.6em; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.se__date .dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); }
.se__hint{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-d-dim);
  display:inline-flex; align-items:center; gap:8px; text-shadow:0 1px 10px rgba(0,0,0,.5); }
.se__hint .ar{ display:inline-block; animation:se-bob 1.8s var(--ease) infinite; }
@keyframes se-bob{ 0%,100%{ transform:translateY(0);} 55%{ transform:translateY(5px);} }

/* content revealed once the film is fully expanded */
.se__reveal{ position:relative; z-index:2; padding:clamp(40px,7vh,90px) 0 clamp(30px,5vh,60px);
  opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.hero--expand.se-content .se__reveal{ opacity:1; transform:none; }
.se__reveal .hero__content{ position:relative; }
.se__reveal .hero__scribble{ position:absolute; right:5%; top:-46px; font-family:var(--script); font-weight:700; font-size:clamp(20px,2.4vw,34px); color:var(--forest); transform:rotate(-7deg); }
.se__reveal .hero__scribble svg{ display:block; width:120px; height:auto; margin-top:-6px; }
.se__reveal .hero__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(24px,4vw,60px); flex-wrap:wrap; }
.se__reveal .hero__sub{ max-width:560px; font-size:clamp(16px,1.4vw,20px); color:var(--ink-dim); }
.se__reveal .hero__sub b{ color:var(--ink); font-weight:600; }
.se__reveal .hero__actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* nav stays legible (light) over the film — but only while the photo is up;
   once the film is fully open (cream behind), revert to dark nav */
body.se-active:not(.se-open) .nav:not(.scrolled) .nav__logo svg{ color:var(--paper); }
body.se-active:not(.se-open) .nav:not(.scrolled) .nav__logo .tag{ color:var(--on-d-dim); border-color:var(--line-d); }
body.se-active:not(.se-open) .nav:not(.scrolled) .nav__links a{ color:rgba(244,240,229,.78); }
body.se-active:not(.se-open) .nav:not(.scrolled) .nav__links a:hover{ color:var(--paper); }

@media (max-width:760px){
  .se__heading{ gap:.04em; }
  .se__reveal .hero__scribble{ position:static; display:inline-block; margin-bottom:14px; }
  .se__reveal .hero__row{ flex-direction:column; align-items:flex-start; }
}

/* reduced motion / no-JS fallback: film already open, content shown */
@media (prefers-reduced-motion: reduce){
  .se__bg{ opacity:.18; } .se__media{ width:min(95vw,520px); height:min(80vh,720px); }
  .se__cue{ opacity:0; } .se__heading{ position:absolute; top:8%; }
  .hero--expand .se__reveal{ opacity:1; transform:none; }
}

/* ============================================================
   HOVER MICRO-ANIMATIONS — bloc Hiving Food + studios
   ============================================================ */
/* Hiving Food : le bloc se soulève et un CADRE NOIR pop autour
   (effet « clique-moi »), le wordmark "food" s'incline, les chiffres glissent */
.food{ cursor:pointer; transition:transform .5s var(--ease), box-shadow .5s var(--ease); will-change:transform; }
.food:hover{ transform:translateY(-7px); box-shadow:0 0 0 3px var(--ink), 0 46px 88px -30px rgba(21,20,15,.6); }
.food__logo .f{ display:inline-block; transform-origin:left center; transition:transform .45s var(--ease); }
.food:hover .food__logo .f{ transform:rotate(-4deg) scale(1.06); }
.food__stat .v{ display:inline-block; transition:transform .45s var(--ease); }
.food:hover .food__stat .v{ transform:translateX(-5px); }

/* Studios : la fiche technique POP en noir au survol (inspiration Hiving Food),
   + léger zoom du visuel dans le polaroïd (en plus du redressement existant) */
.polaroid__media image-slot{ transition:transform .6s var(--ease); will-change:transform; }
.plateau:hover .polaroid__media image-slot{ transform:scale(1.06); }
.spec{ transition:border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease); }
.spec__top, .spec__name, .spec__name .ital, .spec__desc,
.spec__foot, .spec__foot .price, .spec__foot .price small, .spec__foot .crew{ transition:color .4s var(--ease), border-color .4s var(--ease); }
.plateau:hover .spec{ background:var(--ink); border-color:var(--ink); transform:translateY(-4px); box-shadow:0 32px 64px -28px rgba(21,20,15,.6); }
.plateau:hover .spec__top{ color:var(--on-d-faint); }
.plateau:hover .spec__name{ color:var(--paper); }
.plateau:hover .spec__name .ital{ color:var(--lime); }
.plateau:hover .spec__desc{ color:var(--on-d-dim); }
.plateau:hover .spec__foot{ border-top-color:var(--line-d); }
.plateau:hover .spec__foot .price{ color:var(--paper); }
.plateau:hover .spec__foot .price small,
.plateau:hover .spec__foot .crew{ color:var(--on-d-faint); }

@media (prefers-reduced-motion: reduce){
  .food:hover, .food:hover .food__logo .f, .food:hover .food__stat .v,
  .plateau:hover .polaroid__media image-slot, .plateau:hover .spec{ transform:none; }
}

/* ============================================================
   CUSTOM DIRECTIONAL CURSOR
   Trailing ring that stretches toward movement + exact dot.
   mix-blend-mode:difference keeps it visible on light & dark.
   Added on fine-pointer, non-reduced-motion devices only.
   ============================================================ */
.cursor-ring, .cursor-dot{
  position:fixed; top:0; left:0; z-index:99999; pointer-events:none;
  border-radius:50%; mix-blend-mode:difference; will-change:transform;
}
.cursor-ring{
  width:32px; height:32px; border:1.6px solid #fff; opacity:.9;
  transition:width .28s var(--ease), height .28s var(--ease),
             background-color .28s var(--ease), opacity .35s, border-color .28s;
}
.cursor-dot{
  width:6px; height:6px; background:#fff; transition:opacity .35s, width .2s, height .2s;
}
/* grow + fill over interactive targets */
.cursor-ring--lg{ width:58px; height:58px; background:rgba(255,255,255,.55); border-color:transparent; }
.cursor-dot--lg{ width:0; height:0; }
/* hide native cursor only while the custom one is active */
html.has-cursor, html.has-cursor *{ cursor:none !important; }
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .cursor-ring, .cursor-dot{ display:none !important; }
}

/* ============================================================
   CTA IMAGE TRAIL
   Photos spawned along the cursor path, pop in then shrink out.
   Vanilla port of 21st.dev danielpetho/image-trail (no React).
   ============================================================ */
.cta__trail{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cta .wrap{ position:relative; z-index:2; }
.trail-img{ position:absolute; width:clamp(116px,11.5vw,172px); aspect-ratio:4/5; will-change:transform, opacity; }
.trail-img img{ width:100%; height:100%; object-fit:cover; border-radius:9px; display:block;
  box-shadow:0 26px 54px -20px rgba(21,20,15,.55); }
@media (prefers-reduced-motion: reduce){ .cta__trail{ display:none; } }

/* ============================================================
   METHOD STEPS — interactive hover
   ============================================================ */
.step{ position:relative; transition:transform .45s var(--ease); }
.step::before{ content:""; position:absolute; top:-1px; left:0; height:2px; width:100%;
  background:var(--forest); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); }
.step__no{ transition:transform .45s var(--ease), color .4s; }
.step__name{ transition:color .35s; }
.step__desc{ transition:color .35s; }
.step:hover{ transform:translateY(-7px); }
.step:hover::before{ transform:scaleX(1); }
.step:hover .step__no{ transform:translateY(-5px) scale(1.06); }
.step:hover .step__name{ color:var(--forest); }
.step:hover .step__desc{ color:var(--ink); }

/* ============================================================
   STATS BAND — "wow" hover (lift + green emphasis, dim siblings)
   ============================================================ */
.stat{ transition:transform .45s var(--ease), background-color .45s var(--ease), opacity .4s var(--ease); }
.stat__num{ transition:color .4s; }
.stat__lab{ transition:color .4s; }
.stat:hover{ transform:translateY(-7px); background-color:rgba(14,59,60,.05); }
.stat:hover .stat__num{ color:var(--forest); }
.stat:hover .stat__lab{ color:var(--forest); }
.scale__panel:hover .stat:not(:hover){ opacity:.5; }

@media (prefers-reduced-motion: reduce){
  .step, .step:hover, .step:hover .step__no, .stat, .stat:hover{ transform:none; }
  .scale__panel:hover .stat:not(:hover){ opacity:1; }
}

/* ============================================================
   PANEL — creator email (inviting mailto pill)
   ============================================================ */
.pv-mail{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; padding:11px 15px; border-radius:10px; text-decoration:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--eco-accent); border:1px solid var(--eco-accent); background:transparent;
  transition:background .3s var(--ease), color .3s, transform .3s var(--ease), box-shadow .35s; }
.pv-mail .pv-mail-addr{ font-weight:400; text-transform:none; letter-spacing:0; }
.pv-mail .pv-mail-ar{ transition:transform .3s var(--ease); }
.pv-mail:hover{ background:var(--eco-accent); color:#0a2017; transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.5); }
.pv-mail:hover .pv-mail-ar{ transform:translate(3px,-3px); }
@media (prefers-reduced-motion: reduce){ .pv-mail:hover{ transform:none; } }

/* ============================================================
   CASES — REEL WALL (hover-play + cursor tilt + focus dim)
   ============================================================ */
.reel-wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.7vw,28px); margin-top:20px; perspective:1200px; }
@media (max-width:900px){ .reel-wall{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (max-width:680px){ .reel-wall{ grid-template-columns:1fr 1fr; } }
.reel{ position:relative; }
.reel__media{ position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden; background:#0a2017;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), filter .45s var(--ease), opacity .45s var(--ease);
  box-shadow:0 20px 46px -26px rgba(21,20,15,.55); cursor:pointer; }
.reel__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.reel__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,32,23,.18) 0%, transparent 28%, transparent 52%, rgba(10,32,23,.86) 100%);
  transition:background .45s var(--ease); }
.reel__tag{ position:absolute; left:11px; top:11px; z-index:3; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 22px); }
.reel .ctag{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(10,32,23,.72); color:var(--paper); padding:5px 9px; border-radius:30px; backdrop-filter:blur(6px); }
.reel .ctag--green{ background:var(--forest); }
.reel__info{ position:absolute; left:14px; right:14px; bottom:14px; z-index:3; color:var(--paper);
  transform:translateY(14px); opacity:0; transition:transform .5s var(--ease), opacity .45s var(--ease); }
.reel__title{ font-family:var(--sans); font-weight:800; font-size:clamp(15px,1.15vw,18px); line-height:1.08; letter-spacing:-0.01em; }
.reel__stats{ display:flex; gap:16px; margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:rgba(244,242,236,.8); }
.reel__stats b{ color:var(--paper); font-weight:700; }
.reel:hover .reel__media{ box-shadow:0 44px 84px -30px rgba(21,20,15,.72); }
.reel:hover .reel__info{ transform:translateY(0); opacity:1; }
.reel:hover .reel__scrim{ background:linear-gradient(180deg, rgba(10,32,23,.2) 0%, transparent 32%, rgba(10,32,23,.4) 66%, rgba(10,32,23,.92) 100%); }
.reel-wall:hover .reel:not(:hover) .reel__media{ opacity:.48; filter:saturate(.7) brightness(.82); }
.work__foot{ margin-top:clamp(28px,3.2vw,52px); display:flex; justify-content:center; }
@media (prefers-reduced-motion: reduce){
  .reel__media{ transition:box-shadow .4s, opacity .4s; transform:none !important; }
  .reel__info{ opacity:1; transform:none; }
}

/* ============================================================
   CASES — HORIZONTAL SCROLL GALLERY (auto-play, infos visibles)
   ============================================================ */
.hscroll{ position:relative; }
.hscroll__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
.hscroll__track{ display:flex; align-items:center; gap:clamp(22px,2.6vw,52px); padding:0 max(6vw,28px); will-change:transform; }
.hcase{ flex:0 0 auto; --h:clamp(300px,52vh,520px); }
.hcase__media{ position:relative; height:var(--h); width:calc(var(--h) * 9 / 16); border-radius:16px; overflow:hidden;
  background:#0a2017; box-shadow:0 34px 70px -32px rgba(21,20,15,.62); }
.hcase__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hcase__tag{ position:absolute; left:12px; top:12px; z-index:2; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 24px); }
.hcase .ctag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; background:rgba(10,32,23,.74); color:var(--paper); padding:5px 10px; border-radius:30px; backdrop-filter:blur(6px); }
.hcase .ctag--green{ background:var(--forest); }
.hcase__info{ width:calc(var(--h) * 9 / 16); padding:18px 2px 0; }
.hcase__title{ font-family:var(--sans); font-weight:800; font-size:clamp(18px,1.45vw,24px); line-height:1.05; letter-spacing:-0.015em; }
.hcase__desc{ color:var(--ink-dim); font-size:13.5px; line-height:1.45; margin-top:9px; }
.hcase__stats{ display:flex; gap:26px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }
.hcase__stats b{ display:block; font-family:var(--sans); font-weight:900; font-size:clamp(19px,1.5vw,26px); letter-spacing:-0.02em; }
.hcase__stats span{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; }
/* end CTA panel */
.hcase--cta{ --h:clamp(300px,52vh,520px); height:var(--h); width:calc(var(--h) * 9 / 16); border-radius:16px; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:28px; text-decoration:none;
  transition:transform .5s var(--ease), background .4s; }
.hcase--cta:hover{ transform:translateY(-8px); background:var(--forest); }
.hcase-cta__k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); }
.hcase-cta__t{ font-family:var(--sans); font-weight:800; font-size:clamp(20px,1.6vw,26px); line-height:1.06; }
.hcase-cta__ar{ font-size:26px; line-height:1; }
.hscroll__hint{ position:absolute; right:max(6vw,28px); bottom:34px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
@media (prefers-reduced-motion: reduce){
  .hscroll{ height:auto !important; }
  .hscroll__sticky{ position:static; height:auto; overflow-x:auto; padding:10px 0 24px; }
  .hscroll__track{ transform:none !important; }
  .hscroll__hint{ display:none; }
}
@media (max-width:680px){
  .hcase{ --h:clamp(280px,46vh,420px); }
  .hcase--cta{ --h:clamp(280px,46vh,420px); }
}

/* ============================================================
   MOBILE / TABLET — burger nav + ecosystem as a card grid
   ============================================================ */
.nav__burger{ display:none; }
.node__reach{ display:none; }
.nav__mobile{ display:none; }

@media (max-width:980px){
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0;
    border:1px solid var(--line); border-radius:12px; background:transparent; cursor:pointer; }
  .nav__burger span{ display:block; width:18px; height:1.6px; background:var(--ink); margin:0 auto; transition:transform .35s var(--ease), opacity .25s; }
  body.se-active:not(.se-open) .nav:not(.scrolled) .nav__burger{ border-color:var(--line-d); }
  body.se-active:not(.se-open) .nav:not(.scrolled) .nav__burger span{ background:var(--paper); }
  body.nav-open .nav__burger span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
  body.nav-open .nav__burger span:nth-child(2){ opacity:0; }
  body.nav-open .nav__burger span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

  .nav__mobile{ position:fixed; inset:0; z-index:1001; background:var(--paper); display:flex; flex-direction:column; justify-content:center;
    gap:4px; padding:0 var(--pad); opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .4s var(--ease), transform .45s var(--ease), visibility .4s; }
  body.nav-open .nav__mobile{ opacity:1; visibility:visible; transform:none; }
  body.nav-open .nav{ z-index:1002; }
  .nav__mobile a{ font-family:var(--sans); font-weight:800; font-size:clamp(28px,7.5vw,44px); letter-spacing:-0.02em; color:var(--ink);
    padding:11px 0; border-bottom:1px solid var(--line-soft); }
  .nav__mobile .nav__mobile-cta{ margin-top:20px; font-family:var(--mono); font-weight:400; font-size:14px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--paper); background:var(--ink); border:none; border-radius:40px; padding:17px 22px; text-align:center; }
}
@media (max-width:560px){ .nav__logo .tag{ display:none; } }

@media (max-width:1180px){
  .eco__stage{ height:auto !important; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
  .eco__lines{ display:none !important; }
  .eco__panel{ display:none !important; }
  .node{ position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; transform:none !important; z-index:1 !important; }
  .node__float{ width:100% !important; height:100% !important; transform:none !important; }
  .node__inner{ width:100% !important; height:auto !important; aspect-ratio:3/4; }
  .node.dim{ display:none !important; }
  .node:hover .node__inner{ transform:none; border-color:var(--eco-border); }
  .node__tag{ left:10px; right:10px; bottom:10px; }
  .node__reach{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:rgba(244,237,225,.78); margin-top:3px; }
}
@media (max-width:620px){ .eco__stage{ grid-template-columns:repeat(2,1fr); } }