/* ============================================================
   ELECTROFLOW · Holistic Escapes
   Design tokens derived from the source deck
   ============================================================ */
:root{
  --bg:        #08080a;
  --bg-2:      #0d0d11;
  --ink:       #f2f2ec;
  --ink-dim:   #b9b9b2;
  --ink-mute:  #6e6e68;
  --lime:      #ecfa64;
  --lime-2:    #dff25c;
  --violet:    #6d5cf2;
  --magenta:   #c8347a;
  --teal:      #1f5f57;

  /* warm + gradient accents (from the deck) */
  --coral:     #fd493b;
  --orange:    #f0532e;
  --warm-a:#f7de59; --warm-b:#f5822a;   /* yellow → orange */
  --ro-a:#ff3b32;   --ro-b:#f5822a;     /* red → orange   */
  --flow-a:#ff4e52; --flow-b:#8b3e92;   /* red → purple   */
  --coral-a:#f5822a; --coral-b:#fd493b; /* orange → red   */
  --mb-a:#e85ac8;   --mb-b:#6e7bf2;     /* magenta → blue */

  --maxw: 1400px;
  --pad-x: clamp(1.5rem, 5vw, 6rem);
  --pad-y: clamp(2.5rem, 7vh, 5.5rem);

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-mono: "Montserrat", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .9s;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
strong{ font-weight:700; color:var(--ink); }
em{ font-style:italic; }

/* ============================================================
   TOP BAR + PROGRESS
   ============================================================ */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:rgba(255,255,255,.06); z-index:120;
}
.progress span{
  display:block; height:100%; width:0;
  background:var(--lime);
  box-shadow:0 0 12px rgba(236,250,100,.6);
  transition:width .15s linear;
}
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad-x);
  pointer-events:none;
  mix-blend-mode:difference;
}
.topbar a, .topbar .topbar__meta{ pointer-events:auto; }
.wordmark{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; font-size:.82rem; letter-spacing:.22em;
  color:#fff;
}
.wordmark__dot{
  width:8px; height:8px; background:var(--lime);
  transform:rotate(45deg); display:inline-block;
}
.topbar__meta{
  display:flex; align-items:center; gap:1.4rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  color:#fff;
}
.topbar__brand{ opacity:.75; }
.topbar__btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.48rem .9rem; border:1px solid currentColor; border-radius:999px;
  font-family:var(--font-mono); font-weight:700; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:#fff;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.topbar__btn:hover{ background:#fff; color:#08080a; }
.topbar__btn-dot{ width:6px; height:6px; background:var(--lime); transform:rotate(45deg); flex:none; }
@media (max-width:640px){
  .topbar__brand{ display:none; }
  .topbar__btn{ padding:.4rem .7rem; font-size:.6rem; letter-spacing:.14em; gap:.4rem; }
}
.counter b{ color:var(--lime); font-weight:700; }

/* ============================================================
   DOT NAV
   ============================================================ */
.dotnav{
  position:fixed; right:clamp(.9rem,2vw,1.7rem); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.85rem; z-index:110;
}
.dotnav a{
  position:relative; width:9px; height:9px; border-radius:50%;
  border:1.5px solid rgba(242,242,236,.35);
  transition:border-color .3s, background .3s, transform .3s;
}
.dotnav a::after{
  content:attr(data-label);
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--ink); background:rgba(8,8,10,.8);
  padding:.28em .6em; border-radius:3px;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.dotnav a:hover::after{ opacity:1; }
.dotnav a:hover{ border-color:var(--ink); }
.dotnav a.is-active{
  background:var(--lime); border-color:var(--lime);
  transform:scale(1.15);
  box-shadow:0 0 10px rgba(236,250,100,.5);
}
@media (max-width:820px){ .dotnav{ display:none; } }

/* ============================================================
   SLIDE SHELL
   ============================================================ */
.slide{
  position:relative;
  min-height:100vh; min-height:100svh;
  width:100%;
  padding:calc(var(--pad-y) + 2rem) var(--pad-x) var(--pad-y);
  display:flex; flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Eyebrow (per-section label, top-left) */
.eyebrow{
  position:absolute; top:calc(var(--pad-y) - .3rem); left:var(--pad-x);
  font-family:var(--font-mono); font-weight:700;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime); z-index:5; max-width:none; line-height:1.4; white-space:nowrap;
}
.eyebrow--over{ color:var(--lime); text-shadow:0 1px 14px rgba(0,0,0,.7); }
.eyebrow--hero{
  position:absolute; top:auto; bottom:auto;
  left:var(--pad-x); top:clamp(4.5rem,12vh,7rem);
  color:var(--ink-dim); letter-spacing:.24em;
}
/* Single-line eyebrows (match PDF) */
.manifesto .eyebrow, .collaborate .eyebrow{ white-space:nowrap; }

/* ============================================================
   DISPLAY TYPE
   ============================================================ */
.display{
  font-family:var(--font-display);
  font-weight:800; line-height:.98; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--ink);
}
.display--xl{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); }
.display--l{ font-size:clamp(2.2rem, 5vw, 4rem); }
.display .thin{ color:var(--ink); font-weight:300; }
.display .thin-b, .thin-b{ font-weight:500; display:inline; }
.gt{ text-shadow:none !important; }
.display span{ display:block; }
.italic{ font-style:italic; font-weight:800; }
.accent{ color:var(--lime); }
.accent-soft{ color:var(--lime-2); }
.accent-soft strong{ color:var(--lime); }

/* Gradient text fills (deck-faithful accents) */
.gt{ -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; }
.gt-warm{ background-image:linear-gradient(180deg,var(--warm-a),var(--warm-b)); }
.gt-ro{ background-image:linear-gradient(90deg,var(--ro-a),var(--ro-b)); }
.gt-flow{ background-image:linear-gradient(90deg,var(--flow-a),var(--flow-b)); }
.gt-coral{ background-image:linear-gradient(180deg,var(--coral-a),var(--coral-b)); }
.gt-mb{ background-image:linear-gradient(90deg,var(--mb-a),var(--mb-b)); }
.c-coral{ color:var(--coral); }
.c-orange{ color:var(--orange); }

/* Atmospheric gradient blobs (echo the deck's lit backgrounds) */
.atmos{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.9;
}
.atmos::before{
  content:""; position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.55;
  animation:drift 18s var(--ease) infinite alternate;
}
.atmos--violet::before{ width:60vw; height:60vw; left:-10vw; bottom:-20vw;
  background:radial-gradient(circle,var(--violet),transparent 68%); }
.atmos--warm::before{ width:50vw; height:50vw; left:-8vw; bottom:-8vw;
  background:radial-gradient(circle,#7a4a2e,transparent 66%); opacity:.4; }
.atmos--cool::before{ width:55vw; height:55vw; left:-12vw; top:20vh;
  background:radial-gradient(circle,#3a5a7a,transparent 68%); opacity:.35; }
.atmos--ember::before{ width:70vw; height:70vw; left:-18vw; top:8vh;
  background:radial-gradient(circle,#a83c2e,transparent 62%); opacity:.42; }
.atmos--teal::before{ width:70vw; height:70vw; left:-16vw; top:-14vw;
  background:radial-gradient(circle,var(--teal),transparent 66%); opacity:.6; }
.atmos--royal::before{ width:62vw; height:62vw; right:-14vw; left:auto; top:14vh;
  background:radial-gradient(circle,#5a3a9a,transparent 66%); opacity:.55; }
.atmos--right::before{ right:-16vw; left:auto; }
.atmos--left::before{ left:-16vw; right:auto; }

@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(6%,-5%,0) scale(1.12); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ justify-content:flex-end; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  transform:scale(1.06); will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,12,.55) 0%, rgba(8,8,12,.15) 35%, rgba(8,8,12,.75) 100%),
    linear-gradient(90deg, rgba(40,20,80,.35), transparent 60%);
}
.hero__logo{
  position:absolute; top:clamp(4.2rem,11vh,6rem); right:var(--pad-x);
  width:clamp(60px,7vw,88px); height:auto; z-index:5;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.hero__copy{ position:relative; z-index:4; max-width:min(92vw,44ch); }
.hero__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.75rem, 12.5vw, 11rem);
  line-height:.9; letter-spacing:-.03em; color:#dbcec4;
}
.hero__tag{
  margin-top:.4rem;
  font-weight:800; font-style:italic;
  font-size:clamp(1.1rem, 3.4vw, 2.2rem);
  line-height:1.05; letter-spacing:.01em;
  text-transform:uppercase; color:var(--lime);
  white-space:nowrap;
}
@media (max-width:480px){ .hero__tag{ white-space:normal; } }
.scrollcue{
  position:absolute; bottom:1.6rem; right:var(--pad-x); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim);
}
.scrollcue i{
  width:1px; height:38px; background:linear-gradient(var(--lime),transparent);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; }
  40%{ transform:scaleY(1); transform-origin:top; }
  60%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto__grid, .vision__grid{
  margin:auto 0; width:100%; max-width:var(--maxw); align-self:center;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,6rem);
  align-items:center;
}
.manifesto__body{ max-width:42ch; }
.manifesto__body p{ color:var(--ink-dim); font-size:clamp(1rem,1.5vw,1.22rem); margin-bottom:1.4rem; }
.manifesto__body p strong{ color:var(--ink); }
.kicker{ margin-top:2.4rem; }
.kicker em{
  font-weight:600; font-size:clamp(1.3rem,2.6vw,2rem);
  text-transform:uppercase; color:var(--ink); letter-spacing:.01em; line-height:1.15;
}
.kicker b{ font-weight:800; }

/* ============================================================
   VISION
   ============================================================ */
.vision__body{ max-width:42ch; }
.vision__body p{ font-size:clamp(1rem,1.5vw,1.22rem); color:var(--ink-dim); margin-bottom:2.2rem; }

/* ============================================================
   ELECTRO MEETS FLOW
   ============================================================ */
.ef__head{ margin:auto 0 clamp(2rem,5vh,3.5rem); max-width:var(--maxw); align-self:center; width:100%; }
.ef__cols{
  width:100%; max-width:var(--maxw); align-self:center; margin-bottom:auto;
  display:grid; grid-template-columns:1fr 1px 1fr; gap:clamp(1.6rem,5vw,4.5rem);
}
.ef__rule{ background:linear-gradient(transparent,rgba(242,242,236,.25),transparent); }
.ef__colhead{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.ef__colhead h3{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,4.5vw,3.4rem); letter-spacing:-.01em; line-height:1;
}
.ef__icon{ width:clamp(34px,4vw,52px); height:auto; color:var(--lime); flex:none; }
.ef__col p{ color:var(--ink-dim); font-size:clamp(1rem,1.4vw,1.18rem); max-width:34ch; }

/* ============================================================
   METODO — three elements over silhouettes
   ============================================================ */
.metodo__bg{
  position:absolute; inset:0; z-index:-2;
  background:#1a0805 url("../media/metodo-bg.jpg") center/cover no-repeat;
  filter:brightness(.72) saturate(.92);
}
.metodo__bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(130% 100% at 50% 55%, transparent 30%, rgba(6,3,3,.65)),
    linear-gradient(180deg, rgba(6,3,3,.35), rgba(6,3,3,.15) 40%, rgba(6,3,3,.5)); }
.metodo__head{ position:relative; z-index:3; max-width:var(--maxw); align-self:center; width:100%;
  text-shadow:0 2px 20px rgba(0,0,0,.55); }

.metodo__stage{
  position:relative; align-self:center; width:100%;
  max-width:1080px; height:min(64vh,600px);
  margin-top:clamp(.5rem,3vh,1.5rem); margin-bottom:auto;
}
.metodo__ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(52%,470px); aspect-ratio:1; border-radius:50%;
  border:1.5px dashed rgba(236,250,100,.30);
  z-index:0; pointer-events:none;
}
.sil{
  position:absolute; z-index:1; pointer-events:none;
  filter:brightness(.9) contrast(1.1) drop-shadow(0 8px 30px rgba(0,0,0,.5));
  opacity:.95;
}
.sil--mov{ top:-4%; left:50%; transform:translateX(-42%); height:46%; }
.sil--com{ bottom:6%; left:20%; height:42%; }
.sil--mus{ bottom:8%; right:6%; height:36%; }

.tri{ position:absolute; z-index:2; width:clamp(200px,26%,300px); }
.tri h3{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2rem); margin-bottom:.55rem; letter-spacing:.01em;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.tri p{ color:#d8cfc9; font-size:clamp(.86rem,1.15vw,1.02rem); text-shadow:0 1px 10px rgba(0,0,0,.7); }
.tri--mov{ top:38%; left:50%; transform:translateX(-50%); text-align:center; }
.tri--com{ bottom:0; left:8%; text-align:center; }
.tri--mus{ bottom:0; right:2%; text-align:center; }

/* ============================================================
   FLOW — kinetic type over wave
   ============================================================ */
.flowtype{ justify-content:center; }
.flowtype__media{ position:absolute; inset:0; z-index:-2; }
.flowtype__media img{ width:100%; height:100%; object-fit:cover; }
.flowtype::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(8,8,16,.6),transparent 55%); }
.flowtype__words{
  align-self:center; width:100%; max-width:var(--maxw);
  display:flex; flex-direction:column;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  color:#fff; line-height:1.02; letter-spacing:-.01em;
  font-size:clamp(2.4rem,8vw,7rem);
  text-shadow:0 4px 40px rgba(0,0,0,.35);
}
.fw-1{ align-self:flex-start; }
.fw-2{ align-self:center; }
.fw-3{ align-self:flex-end; text-align:right; }

/* ============================================================
   VSLIDE — inset video slides (Flow · Track Record), PDF-style
   ============================================================ */
.vslide{ justify-content:center; }
.vslide__stage{
  align-self:center; width:min(100%,1320px);
  margin-top:clamp(1rem,4vh,2rem);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.vslide__video{ width:100%; height:auto; display:block; }
.vslide--flow{
  background:
    radial-gradient(70% 90% at 12% 8%, rgba(70,110,200,.5), transparent 60%),
    radial-gradient(60% 80% at 88% 92%, rgba(30,60,140,.45), transparent 60%),
    #0a1226;
}
.vslide--track{
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(120,90,200,.4), transparent 60%),
    radial-gradient(70% 90% at 10% 95%, rgba(90,70,170,.5), transparent 62%),
    #17122b;
}

/* ============================================================
   THE JOURNEY
   ============================================================ */
.journey__intro{
  width:100%; max-width:var(--maxw); align-self:center; margin:auto 0 clamp(2rem,5vh,3.5rem);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,5vw,4rem); align-items:end;
}
.journey__intro p{ color:var(--ink-dim); font-size:clamp(1rem,1.5vw,1.25rem); max-width:52ch; padding-bottom:.4rem; }
.journey__cards{
  list-style:none; width:100%; max-width:var(--maxw); align-self:center; margin-bottom:auto;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.7rem,1.4vw,1.1rem);
}
@media (min-width:901px){
  .jcard{ transform:translate3d(0,calc(var(--jy,0px) + 38px),0); }
  .journey__cards .jcard.in{ transform:translateY(var(--jy,0)); }
  .jcard:nth-child(1){ --jy:0px; }
  .jcard:nth-child(2){ --jy:46px; }
  .jcard:nth-child(3){ --jy:98px; }
  .jcard:nth-child(4){ --jy:30px; }
  .jcard:nth-child(5){ --jy:8px; }
  .journey__cards .jcard.in:hover{ transform:translateY(calc(var(--jy,0px) - 4px)); }
}
.jcard{
  border:1px solid rgba(242,242,236,.18); border-radius:14px;
  padding:clamp(1rem,1.8vw,1.5rem) 1rem; min-height:118px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:rgba(255,255,255,.015);
  transition:border-color .4s, background .4s, transform .4s;
}
.jcard:hover{ border-color:rgba(236,250,100,.55); background:rgba(236,250,100,.04); transform:translateY(-4px); }
.jcard h3{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.86rem,1.1vw,1.02rem); letter-spacing:.03em; line-height:1.25; }

/* ============================================================
   FOUNDERS
   ============================================================ */
.founders{ justify-content:center; }
.founders__head{ position:relative; z-index:3; max-width:var(--maxw); align-self:center; width:100%;
  font-size:clamp(1.6rem,2.9vw,2.5rem); letter-spacing:-.01em; margin-bottom:auto; }
.founders__photo{
  position:absolute; left:clamp(1.5rem,5vw,7rem); right:auto; bottom:0; margin-inline:0;
  height:min(80vh,800px); width:auto; max-width:46vw; aspect-ratio:1462/1521; z-index:1;
  object-fit:contain; object-position:left bottom; pointer-events:none;
}
.founders__stage{
  position:relative; z-index:3; width:100%; max-width:var(--maxw); align-self:center;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,48%);
  align-items:center; margin-top:clamp(1rem,3vh,2rem); pointer-events:none;
}
.fbio{ grid-column:2; text-align:center; pointer-events:auto; }
.fbio__names{ font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.55rem,2.5vw,2.3rem); line-height:1.06; letter-spacing:-.01em; color:#fff; }
.fbio .role{ display:block; font-family:var(--font-mono); font-size:clamp(.66rem,.85vw,.78rem);
  letter-spacing:.16em; text-transform:uppercase; margin-top:.8rem; }
.fbio .bio__rule{ width:min(420px,80%); margin:1.1rem auto 1.4rem; }
.fbio p{ color:#d9d9d3; font-size:clamp(.88rem,1.05vw,1rem); line-height:1.6;
  max-width:52ch; margin:0 auto .9rem; }
.fbio p:last-child{ margin-bottom:0; }
.founders__stage .bio{ pointer-events:auto; }
.bio--left{ grid-column:1; }
.bio--right{ grid-column:3; text-align:right; }
.bio h3{ font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1; margin-bottom:.5rem; }
.bio .role{ display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:.9rem; }
.bio .role.accent{ color:var(--lime); }
.bio p{ color:var(--ink-dim); font-size:clamp(.9rem,1.1vw,1.02rem); margin-bottom:.9rem; }
.founders .bio p{ color:#d9d9d3; }
.bio__rule{ height:1px; background:rgba(242,242,236,.28); margin:.1rem 0 1.1rem; }
.bio--right .bio__rule{ margin-left:auto; }

/* ============================================================
   TEAM — single member (Brillante), photo left · text right
   ============================================================ */
.team{ justify-content:center; }
.team__photo{
  position:absolute; left:clamp(-1.5rem,-1vw,0px); bottom:0; z-index:1;
  height:min(88vh,880px); width:auto; max-width:50vw;
  object-fit:contain; object-position:left bottom; pointer-events:none;
}
.team__stage{
  position:relative; z-index:3; width:100%; max-width:var(--maxw); align-self:center;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,46%);
}
.team__bio{ grid-column:2; text-align:center; }
.team__name{ font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1; margin-bottom:.55rem; color:#fff; }
.team__bio .role{ display:block; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:0; }
.team__bio .bio__rule{ width:min(360px,78%); margin:1.1rem auto 1.5rem; }
.team__bio p{ color:#d9d9d3; font-size:clamp(.92rem,1.1vw,1.04rem);
  max-width:44ch; margin:0 auto 1.1rem; line-height:1.55; }

/* ============================================================
   WAYS TO COLLABORATE
   ============================================================ */
.collab__grid{
  width:100%; max-width:var(--maxw); align-self:center; margin:auto 0;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); align-items:stretch;
}
.collab__head{ align-self:end; }
.collab__list{ list-style:none; display:flex; flex-direction:column; align-self:start; width:100%; }
.opp{
  padding:.85rem 0 .9rem;
  border-bottom:1px solid rgba(242,242,236,.16);
}
.opp:first-child{ border-top:1px solid rgba(242,242,236,.16); }
.opp h3{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.4rem); letter-spacing:.01em; margin-bottom:.3rem; color:var(--ink); }
.opp p{ color:var(--ink-dim); font-size:clamp(.85rem,1.05vw,.96rem); max-width:66ch;
  padding-left:clamp(1rem,2.2vw,2.4rem); }

/* ============================================================
   EVENTI — calendario editoriale
   ============================================================ */
.events{ justify-content:center; }
.events__head{
  width:100%; max-width:var(--maxw); align-self:center; margin-top:auto;
  display:grid; grid-template-columns:auto 1fr; align-items:end; gap:clamp(1.5rem,4vw,3rem);
  padding-bottom:clamp(1rem,2.4vh,1.7rem);
  border-bottom:1px solid rgba(236,250,100,.34);
}
.events__label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); padding-bottom:.45rem;
}
.events__title{ justify-self:end; text-align:right; letter-spacing:-.02em; }
.events__list{
  list-style:none; width:100%; max-width:var(--maxw); align-self:center; margin-bottom:auto;
}
.evt{
  display:grid; grid-template-columns:minmax(120px,14%) minmax(0,1fr) minmax(190px,26%);
  gap:clamp(1.2rem,3vw,3rem); align-items:stretch;
  padding:clamp(1.5rem,4vh,2.6rem) 0;
  border-bottom:1px solid rgba(236,250,100,.34);
}
.evt__date{
  display:grid; grid-template-columns:auto auto; column-gap:.45rem;
  align-content:start; justify-content:start; align-items:baseline;
}
.evt__days{ font-weight:800; font-size:clamp(1.5rem,2.7vw,2.15rem); line-height:1; letter-spacing:-.02em; }
.evt__month{ font-weight:500; font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1; color:var(--ink-dim); }
.evt__year{ grid-column:1/-1; margin-top:.35rem; font-weight:700; color:var(--ink-mute);
  font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1; }
.evt__main{
  border-left:1px solid rgba(236,250,100,.2);
  padding-left:clamp(1.2rem,3vw,2.6rem);
}
.evt__name{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.3rem,2.5vw,2.05rem); line-height:1.08; letter-spacing:-.01em; color:var(--ink);
}
.evt__meta{
  border-left:1px solid rgba(236,250,100,.2);
  padding-left:clamp(1.2rem,3vw,2.6rem);
  display:flex; flex-direction:column; gap:.55rem;
  font-family:var(--font-mono); text-transform:uppercase;
}
.evt__city{ font-size:.72rem; font-weight:700; letter-spacing:.2em; color:var(--lime); }
.evt__tba{ font-size:.72rem; letter-spacing:.08em; color:var(--ink-dim); line-height:1.5; }

/* ============================================================
   CLOSING
   ============================================================ */
.closing{ justify-content:center; }
.closing__media{ position:absolute; inset:0; z-index:-2; }
.closing__media img{ width:100%; height:100%; object-fit:cover; }
.closing__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,4,4,.5),rgba(8,4,4,.2) 40%,rgba(8,4,4,.65)); }
.closing__logo{ position:absolute; top:clamp(4.2rem,11vh,6rem); right:var(--pad-x);
  width:clamp(56px,6vw,82px); z-index:5; filter:drop-shadow(0 2px 10px rgba(0,0,0,.7)); }
.closing__head{
  align-self:flex-start; max-width:22ch;
  font-family:var(--font-display); font-weight:800; font-style:italic;
  text-transform:uppercase; line-height:1.02; letter-spacing:-.01em;
  font-size:clamp(2rem,6vw,5rem); color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.closing__foot{
  position:absolute; bottom:1.6rem; left:var(--pad-x); right:var(--pad-x); z-index:5;
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim);
}
@media (max-width:640px){ .closing__foot{ flex-direction:column; gap:.3rem; } }

/* ============================================================
   REVEAL ANIMATIONS  (translate the deck's entrance effects)
   fly-in-from-bottom + fade  ·  respects reduced-motion
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(38px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--rd,0ms);
  will-change:opacity,transform;
}
[data-reveal].in{ opacity:1; transform:none; }

/* Kinetic FLOW words fly in from their own side */
.fw-1[data-reveal]{ transform:translateX(-40px); }
.fw-3[data-reveal]{ transform:translateX(40px); }
.fw[data-reveal].in{ transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .manifesto__grid, .vision__grid,
  .journey__intro, .collab__grid{
    grid-template-columns:1fr; gap:2rem;
  }
  .ef__cols{ grid-template-columns:1fr; gap:2.5rem; }
  .ef__rule{ display:none; }
  .journey__cards{ grid-template-columns:repeat(2,1fr); }

  /* Founders → stacked: head, photo, then bio */
  .founders__photo{ position:relative; left:auto; right:auto; bottom:auto; height:auto;
    margin:1.6rem auto 0; align-self:center; width:min(72vw,360px); max-width:none;
    object-position:center bottom; }
  .founders__stage{ display:flex; flex-direction:column; gap:2rem; margin-top:1.2rem; }
  .fbio{ text-align:center; }
  .bio--left, .bio--right{ text-align:left; }
  .bio--right .bio__rule{ margin-left:0; }

  /* Team → stacked: photo on top, text below */
  .team__photo{ position:relative; left:auto; bottom:auto; height:auto;
    width:min(58vw,280px); max-width:none; margin:1rem auto 0; align-self:center;
    object-position:center bottom; }
  .team__stage{ display:flex; flex-direction:column; gap:1.5rem; margin-top:1rem; }
  .team__bio{ text-align:center; }

  .collab__head{ align-self:start; }

  /* Eventi → intestazione impilata, riga a colonna singola */
  .events__head{ grid-template-columns:1fr; align-items:start; gap:.7rem; }
  .events__title{ justify-self:start; text-align:left; }
  .events__label{ padding-bottom:0; }
  .evt{ grid-template-columns:1fr; gap:1rem; }
  .evt__main, .evt__meta{ border-left:0; padding-left:0; }
  .evt__name br{ display:none; }
}
@media (max-width:760px){
  /* Metodo → stacked list, hide silhouettes + ring */
  .metodo__stage{ height:auto; display:flex; flex-direction:column; gap:2rem; margin-top:1.5rem; }
  .metodo__ring, .sil{ display:none; }
  .tri, .tri--mov, .tri--com, .tri--mus{
    position:static; transform:none; width:100%; max-width:42ch; text-align:left;
  }
}
@media (max-width:520px){
  .journey__cards{ grid-template-columns:1fr; }
  .eyebrow{ white-space:normal; max-width:20ch; }
}

/* ============================================================
   MOBILE ART DIRECTION — override solo ≤760px
   (desktop e tablet restano invariati)
   ============================================================ */
@media (max-width:760px){

  /* ── 01 · HERO — il wordmark non deve mai essere tagliato ── */
  .hero__copy{ max-width:100%; }
  .hero__title{
    font-size:clamp(1.7rem, 10.3vw, 5rem);
    letter-spacing:-.035em;
    overflow-wrap:normal; hyphens:none;
  }
  .hero__tag{ font-size:clamp(1rem, 4.4vw, 1.5rem); white-space:normal; }
  /* lo scroll cue si sovrapponeva al tagline: su mobile il gesto è implicito */
  .hero .scrollcue{ display:none; }

  /* ── 07 / 11 · VIDEO SLIDE — formato verticale 700×900 ── */
  .vslide{ padding-left:0; padding-right:0; }
  .vslide .eyebrow{ left:var(--pad-x); }
  .vslide__stage{
    width:100%; max-width:none;
    margin:clamp(.75rem,3vh,1.5rem) 0 0;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
  .vslide__video{
    width:100%; height:auto;
    aspect-ratio:700 / 900;
    object-fit:cover;
  }

  /* ── 08 · THE JOURNEY — da box cliccabili a indice editoriale ── */
  .journey__intro{
    margin:auto 0 clamp(1.5rem,4vh,2.2rem);
    display:flex; flex-direction:column; align-items:flex-start;
    text-align:left; gap:.9rem;
  }
  .journey__intro .display--l{ font-size:clamp(2.1rem,10vw,3rem); text-align:left; }
  .journey__intro p{
    font-size:.94rem; line-height:1.55; padding-bottom:0; max-width:38ch;
  }
  .journey__cards{
    display:flex; flex-direction:column; gap:0;
    margin:0 0 auto; counter-reset:jrn;
  }
  .jcard{
    border:0; border-radius:0; background:none;
    border-top:1px solid rgba(242,242,236,.14);
    min-height:0; padding:.9rem 0;
    display:grid; grid-template-columns:2.4rem 1fr;
    align-items:baseline; text-align:left;
    transition:none; cursor:default;
  }
  .jcard:last-child{ border-bottom:1px solid rgba(242,242,236,.14); }
  .jcard::before{
    counter-increment:jrn;
    content:counter(jrn,decimal-leading-zero);
    font-family:var(--font-mono); font-weight:700;
    font-size:.64rem; letter-spacing:.16em; color:var(--lime);
  }
  .jcard h3{
    font-size:1.02rem; letter-spacing:.02em; line-height:1.2;
  }
  .jcard h3 br{ display:none; }
  /* nessuna affordance di click: niente hover/tap state */
  .jcard:hover, .jcard:active, .jcard:focus{
    border-color:rgba(242,242,236,.14); background:none; transform:none;
  }

  /* ── 13 · CLOSING — via la fascia nera morta in basso ── */
  .closing{ justify-content:flex-end; }
  .closing__media img{
    height:128%; width:100%;
    object-fit:cover; object-position:center top;
  }
  .closing__scrim{
    background:linear-gradient(180deg,
      rgba(8,4,4,.62) 0%,
      rgba(8,4,4,.18) 42%,
      rgba(8,4,4,.30) 100%);
  }
  .closing__head{
    font-size:clamp(1.9rem,8.6vw,2.8rem);
    max-width:16ch; margin-bottom:clamp(2.6rem,7vh,3.6rem);
  }
  .closing__foot{ bottom:1.1rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .atmos::before{ animation:none; }
}

/* Focus visibility */
a:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:2px; }