@scope (.mda) {
/* ============================================================
   MOVIMIENTOS DEL ALMA — body styles
   Paleta: marfil, gris humo, jade, coral, frambuesa, trigo
============================================================ */

:scope{
  --marfil:#f6f4ef;
  --marfil-2:#efebe2;
  --humo:#2a2620;
  --humo-soft:#4a4339;
  --jade:#87a08e;
  --jade-deep:#6b8474;
  --coral:#d97757;
  --coral-deep:#c25e3c;
  --rasp:#b96d6e;
  --rasp-deep:#9b5759;
  --wheat:#d8c8b0;
  --rule: color-mix(in oklab, var(--humo) 14%, transparent);

  --serif:'Cormorant Garamond', 'Noto Serif', Georgia, serif;
  --sans:'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;

  --maxw:1240px;
  --pad-x: clamp(20px, 5vw, 80px);

  /* root element styling (lo que el handoff aplicaba a body/.mda) */
  position:relative;
  isolation:isolate;
  background:var(--marfil);
  color:var(--humo);
  font-family:var(--sans);
  line-height:1.55;
  display:block;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--marfil);
  color:var(--humo);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.mda{
  position:relative;
  isolation:isolate;
}

/* Selección */
::selection{ background:color-mix(in oklab, var(--coral) 35%, white); color:var(--humo); }

/* ============================================================
   AMBIENT PETALS
============================================================ */
.petals{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.petal{
  position:absolute;
  width:22px; height:34px;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  transform:rotate(20deg);
  opacity:.0;
  animation: floatDrift 22s linear infinite, fadeInDelay 1.6s ease forwards;
  will-change: transform, opacity;
  filter: blur(.3px);
}
.petal::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(140deg, rgba(255,255,255,.4), transparent 60%);
  mix-blend-mode:overlay;
}

.p1{ top:6%;  left:8%;  background:var(--jade);   animation-duration:24s; }
.p2{ top:14%; left:88%; background:var(--coral);  animation-duration:30s; animation-delay:-6s; }
.p3{ top:32%; left:24%; background:var(--rasp);   animation-duration:28s; animation-delay:-12s; width:14px; height:22px; }
.p4{ top:46%; left:78%; background:var(--wheat);  animation-duration:34s; animation-delay:-3s; }
.p5{ top:58%; left:6%;  background:var(--jade);   animation-duration:26s; animation-delay:-9s; width:16px; height:26px; }
.p6{ top:72%; left:92%; background:var(--coral);  animation-duration:32s; animation-delay:-15s; }
.p7{ top:80%; left:40%; background:var(--rasp);   animation-duration:36s; animation-delay:-4s; width:18px; height:30px; }
.p8{ top:18%; left:54%; background:var(--wheat);  animation-duration:38s; animation-delay:-7s; width:14px; height:22px; }
.p9{ top:62%; left:60%; background:var(--jade);   animation-duration:30s; animation-delay:-18s; width:12px; height:20px; }
.p10{top:38%; left:48%; background:var(--coral);  animation-duration:42s; animation-delay:-2s; width:10px; height:18px; }
.p11{top:88%; left:14%; background:var(--rasp);   animation-duration:28s; animation-delay:-22s; }
.p12{top:26%; left:70%; background:var(--jade);   animation-duration:36s; animation-delay:-11s; width:18px; height:30px; }

@keyframes floatDrift{
  0%   { transform: translate3d(0,0,0)         rotate(20deg);  }
  25%  { transform: translate3d(40px,-60px,0)  rotate(60deg);  }
  50%  { transform: translate3d(-30px,-120px,0) rotate(-40deg); }
  75%  { transform: translate3d(20px,-70px,0)  rotate(30deg);  }
  100% { transform: translate3d(0,0,0)         rotate(20deg);  }
}
@keyframes fadeInDelay{ to{ opacity:.28 } }

/* ============================================================
   SHARED
============================================================ */
.eyebrow{
  font-family:var(--sans);
  font-size: 12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--coral-deep);
  font-weight:500;
  margin:0 0 .9rem;
}
.eyebrow--light{ color: color-mix(in oklab, var(--marfil) 70%, var(--coral)); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.005em;
  color:var(--humo);
  margin:0;
  text-wrap:pretty;
}
h2{
  font-size: clamp(32px, 4.4vw, 62px);
  line-height:1.08;
}
h3{
  font-size: clamp(22px, 2vw, 28px);
  line-height:1.18;
}
em{ font-style:italic; color:var(--coral-deep); font-weight:500; }

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative;
  min-height: 100vh;
  padding: clamp(80px, 10vh, 130px) var(--pad-x) clamp(80px, 10vh, 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  /* El hero es decorativo (título y lede animados letra a letra).
     Sin esto, al hacer click el navegador muestra el caret de texto vertical
     — se ve como una "línea para escribir" o un text field invisible. */
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
  cursor: default;
}
.hero a, .hero button{
  /* Restituye el cursor pointer en cualquier interactivo que pueda añadirse
     dentro del hero más adelante. */
  cursor: pointer;
}
.hero__inner{
  position:relative;
  z-index:2;
  display:flex; flex-direction:column;
  align-items:center;
  gap: clamp(18px, 2.6vh, 28px);
  max-width: 1080px;
  width:100%;
}

/* halo de fondo, suave y respirando */
.hero__halo{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
  display:grid; place-items:center;
}
.halo{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter: blur(0.5px);
}
.halo--1{
  width: clamp(380px, 60vw, 720px);
  aspect-ratio:1;
  background: radial-gradient(circle, color-mix(in oklab, var(--coral) 22%, transparent) 0%, transparent 60%);
  animation: haloPulse 7s ease-in-out infinite;
}
.halo--2{
  width: clamp(280px, 42vw, 520px);
  aspect-ratio:1;
  background: radial-gradient(circle, color-mix(in oklab, var(--jade) 18%, transparent) 0%, transparent 65%);
  animation: haloPulse 9s ease-in-out infinite reverse;
}
.halo--3{
  width: clamp(220px, 32vw, 380px);
  aspect-ratio:1;
  background: radial-gradient(circle, color-mix(in oklab, var(--rasp) 16%, transparent) 0%, transparent 65%);
  animation: haloPulse 11s ease-in-out infinite;
}
@keyframes haloPulse{
  0%,100%{ transform: scale(1); opacity:.9; }
  50%   { transform: scale(1.12); opacity:1; }
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:11px;
  letter-spacing:.34em; text-transform:uppercase;
  color: color-mix(in oklab, var(--humo) 60%, transparent);
  opacity:0;
  animation: rise .9s .2s ease-out forwards;
}
.hero__eyebrow .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--coral);
}

/* Logo real protagonista */
.hero__mark{
  position:relative;
  width: clamp(200px, 28vw, 320px);
  aspect-ratio: 1;
  opacity:0;
  transform: translateY(20px) scale(.92);
  animation: markIn 1.4s .3s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes markIn{
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.mark-stage{
  position:relative;
  width:100%; height:100%;
  display:grid; place-items:center;
}
.mark-img{
  position:relative;
  z-index:3;
  width: 76%;
  height:auto;
  animation: breathe 6s ease-in-out infinite;
  filter: drop-shadow(0 14px 30px color-mix(in oklab, var(--coral) 25%, transparent));
}
.mark-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid color-mix(in oklab, var(--coral) 35%, transparent);
  pointer-events:none;
}
.mark-ring--1{
  inset: 0;
  animation: ringPulse 3.2s ease-out infinite;
}
.mark-ring--2{
  inset: 8%;
  border-color: color-mix(in oklab, var(--jade) 40%, transparent);
  animation: ringPulse 3.2s 1.4s ease-out infinite;
}
@keyframes ringPulse{
  0%   { transform: scale(.9); opacity:0; }
  20%  { opacity:.55; }
  100% { transform: scale(1.45); opacity:0; }
}

/* órbitas con partículas alrededor */
.mark-orbit{
  position:absolute;
  inset: -8%;
  border-radius:50%;
  pointer-events:none;
  animation: orbitSpin 22s linear infinite;
}
.mark-orbit--rev{
  inset: -22%;
  animation-duration: 34s;
  animation-direction: reverse;
}
.mark-orbit--slow{
  inset: -38%;
  animation-duration: 48s;
}
.orbit-dot{
  position:absolute;
  top: -4px; left: 50%;
  width:8px; height:8px; border-radius:50%;
  transform: translateX(-50%);
}
.orbit-dot--jade  { background: var(--jade);  box-shadow: 0 0 12px color-mix(in oklab, var(--jade) 80%, transparent); }
.orbit-dot--coral { background: var(--coral); box-shadow: 0 0 14px color-mix(in oklab, var(--coral) 80%, transparent); }
.orbit-dot--rasp  { background: var(--rasp);  box-shadow: 0 0 12px color-mix(in oklab, var(--rasp) 80%, transparent); }
@keyframes orbitSpin{ to{ transform: rotate(360deg); } }
@keyframes breathe{
  0%,100%{ transform: scale(1); }
  50%    { transform: scale(1.04); }
}

.hero__title{
  position:relative;
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(48px, 9vw, 132px);
  line-height:.95;
  letter-spacing:-.015em;
  margin: 0;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:center;
  gap: 0 .28em;
  max-width: 100%;
}
.reveal-word{
  display:inline-block;
  overflow:hidden;
  padding: 0 .04em;
  line-height:.95;
}
.reveal-word > span{
  display:inline-block;
  transform: translateY(110%);
  animation: wordRise 1s cubic-bezier(.22,.7,.2,1) forwards;
  line-height:1.05;
}
.reveal-word:nth-child(1) > span{ animation-delay:.65s }
.reveal-word:nth-child(2) > span{ animation-delay:.85s }
.reveal-word:nth-child(3) > span{ animation-delay:1.05s }
.reveal-word--accent > span{
  font-style:italic;
  color:var(--coral-deep);
  font-family:var(--serif);
  font-size:.72em;
  font-weight:300;
  transform-origin: 50% 100%;
}
@keyframes wordRise{ to{ transform: translateY(0); } }

.hero__lede{
  font-family:var(--serif);
  font-style:italic;
  font-size: clamp(17px, 1.6vw, 22px);
  color: color-mix(in oklab, var(--humo) 75%, transparent);
  margin: 0;
  line-height:1.5;
  max-width: 620px;
}
.hero__lede .line{
  display:block;
  overflow:hidden;
}
.hero__lede .line > span{
  display:inline-block;
  transform: translateY(110%);
  animation: wordRise 1s cubic-bezier(.22,.7,.2,1) forwards;
}
.hero__lede .line:nth-child(1) > span{ animation-delay:1.25s; }
.hero__lede .line:nth-child(2) > span{ animation-delay:1.40s; }

.hero__meta{
  display:flex; align-items:center; justify-content:center;
  gap: 10px 14px; flex-wrap:wrap;
  font-family:var(--sans);
  font-size: clamp(10px, 1vw, 12px); letter-spacing:.3em; text-transform:uppercase;
  color: color-mix(in oklab, var(--humo) 55%, transparent);
  opacity:0;
  animation: rise 1s 1.7s ease-out forwards;
  margin-top: 6px;
}
.hero__meta .sep{ color:var(--coral); }

.hero__scroll{
  position:absolute;
  bottom: clamp(20px, 3vh, 36px);
  left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--sans);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color: color-mix(in oklab, var(--humo) 50%, transparent);
  opacity:0;
  animation: rise 1s 2.0s ease-out forwards;
  z-index: 3;
}
.hero__scroll-line{
  width:1px; height:40px; background: color-mix(in oklab, var(--humo) 20%, transparent);
  position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:''; position:absolute; top:-40px; left:0; width:1px; height:40px;
  background:var(--coral);
  animation: scrollHint 2.4s ease-in-out infinite;
}
@keyframes scrollHint{
  0%   { transform: translateY(0); }
  60%  { transform: translateY(80px); }
  61%, 100% { transform: translateY(80px); opacity:0; }
}

@keyframes rise{
  from{ opacity:0; transform: translateY(14px); }
  to  { opacity:1; transform: translateY(0); }
}

/* ============================================================
   WHAT IS
============================================================ */
.what{
  position:relative;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
}
.what__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items:center;
}
.what__copy h2{
  font-size: clamp(30px, 3.6vw, 52px);
  line-height:1.12;
  margin-bottom: 28px;
  max-width: 18ch;
}
.what__text{
  font-size: 17px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--humo) 86%, transparent);
  max-width: 56ch;
  margin: 0 0 18px;
}
.what__text strong{ font-weight:600; color:var(--humo); }

.what__logo{
  display:grid; place-items:center;
}
.logo-stage{
  position:relative;
  width: min(420px, 86%);
  aspect-ratio: 1 / 1.1;
  display:grid; place-items:center;
}
.logo-img{
  width:100%; height:auto;
  z-index:2;
  position:relative;
}
.breathing{ animation: breathe 6s ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ transform: scale(1) }
  50%    { transform: scale(1.025) }
}
.orbit{
  position:absolute;
  border:1px solid color-mix(in oklab, var(--jade) 50%, transparent);
  border-radius:50%;
  inset: 0;
  pointer-events:none;
  animation: rotateCW 40s linear infinite;
  opacity:.5;
}
.orbit::before{
  content:'';
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  background:var(--coral);
  top:-3px; left:50%; transform:translateX(-50%);
  box-shadow: 0 0 14px var(--coral);
}
.orbit--1{ inset:-22px; animation-duration:50s; }
.orbit--2{
  inset:-46px;
  border-color: color-mix(in oklab, var(--rasp) 50%, transparent);
  animation: rotateCCW 70s linear infinite;
}
.orbit--2::before{ background:var(--rasp); box-shadow:0 0 12px var(--rasp); }
.orbit--3{
  inset:-72px;
  border-color: color-mix(in oklab, var(--wheat) 70%, transparent);
  animation-duration: 90s;
}
.orbit--3::before{ background:var(--wheat); }

@keyframes rotateCW{ to{ transform: rotate(360deg) } }
@keyframes rotateCCW{ to{ transform: rotate(-360deg) } }

/* ============================================================
   MANIFESTO
============================================================ */
.manifesto{
  position:relative;
  background: var(--humo);
  color: var(--marfil);
  padding: clamp(100px, 16vh, 180px) var(--pad-x);
  overflow:hidden;
}
.manifesto::before{
  /* soft warm vignette */
  content:'';
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 40% at 70% 20%, color-mix(in oklab, var(--coral) 22%, transparent), transparent 70%),
    radial-gradient(50% 40% at 20% 80%, color-mix(in oklab, var(--jade) 18%, transparent), transparent 70%);
  pointer-events:none;
  opacity:.8;
  z-index:0;
}
.manifesto > *{ position:relative; z-index:1; }
.manifesto em{ color: color-mix(in oklab, var(--coral) 60%, var(--marfil)); font-style:italic; font-weight:400; }

.manifesto__head{
  max-width: 920px;
  margin: 0 auto clamp(60px, 10vh, 110px);
  text-align:center;
}
.manifesto__head h2{
  color:var(--marfil);
  font-size: clamp(32px, 4.5vw, 64px);
  line-height:1.12;
}
.m-word{
  display:inline-block;
  opacity:0;
  transform: translateY(20px) rotateX(-30deg);
  transform-origin: 50% 100%;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  margin-right: .22em;
}
.m-word.in{ opacity:1; transform: translateY(0) rotateX(0); }
.manifesto__head .eyebrow{ color: color-mix(in oklab, var(--coral) 70%, var(--marfil)); }

.manifesto__rail{
  position:absolute;
  left: 5%;
  top: clamp(220px, 30vh, 320px);
  bottom: clamp(120px, 16vh, 200px);
  display:flex; flex-direction:column; align-items:center;
  width:24px;
  pointer-events:none;
  z-index:0;
}
.rail-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 16px var(--coral);
  animation: railDot 4s ease-in-out infinite;
}
.rail-line{
  flex:1;
  width:1px;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--coral) 80%, transparent) 0%,
    color-mix(in oklab, var(--marfil) 20%, transparent) 50%,
    transparent 100%);
}
@keyframes railDot{
  0%,100%{ transform: scale(1) }
  50%    { transform: scale(1.6) }
}

.manifesto__body{
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--serif);
}
.m-line{
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.55;
  color: color-mix(in oklab, var(--marfil) 88%, transparent);
  margin: 0 0 clamp(28px, 4vh, 44px);
  font-weight:400;
}
.m-strong{
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--marfil);
}
.m-quote{
  font-size: clamp(28px, 3.4vw, 44px);
  font-style:italic;
  text-align:center;
  line-height:1.25;
  margin: clamp(40px, 6vh, 70px) 0;
  color: var(--marfil);
}
.brand-inline{ font-style:normal; color: color-mix(in oklab, var(--coral) 70%, var(--marfil)); }

.cascade{
  display:flex; flex-direction:column;
  gap: 12px;
  padding: 20px 0 20px 28px;
  border-left: 1px solid color-mix(in oklab, var(--coral) 50%, transparent);
  margin: clamp(20px, 4vh, 40px) 0 clamp(20px, 4vh, 40px) clamp(0px, 4vw, 30px);
}
.cascade p{
  margin:0;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--marfil);
}
.cascade p:nth-child(1){ opacity:.55; }
.cascade p:nth-child(2){ opacity:.7; padding-left:18px; }
.cascade p:nth-child(3){ opacity:.82; padding-left:36px; }
.cascade p:nth-child(4){ opacity:.92; padding-left:54px; }
.cascade p:nth-child(5){ opacity:1; padding-left:72px; }

.m-signature{
  font-family:var(--sans);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color: color-mix(in oklab, var(--marfil) 60%, transparent);
  text-align:center;
  margin-top: clamp(40px, 6vh, 70px);
}

/* ============================================================
   CURRENTS
============================================================ */
.currents{
  position:relative;
  padding: clamp(100px, 14vh, 160px) var(--pad-x);
}
.currents__head{
  max-width: 760px;
  margin: 0 auto clamp(50px, 8vh, 80px);
  text-align:center;
}
.currents__head h2{ font-size: clamp(30px, 3.8vw, 54px); }
.currents__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.current{
  position:relative;
  padding: clamp(28px, 3vw, 42px);
  background: white;
  border-radius: 4px;
  border: 1px solid var(--rule);
  overflow:hidden;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease, border-color .4s ease;
}
.current:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--humo) 28%, transparent);
}
.current__wave{
  position:absolute;
  top:14px; right:14px;
  width: 90px; height:36px;
  opacity:.4;
}
.current__wave svg{ width:100%; height:100%; overflow:visible; }
.current__wave path{
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: drawWave 2.4s ease-out forwards;
  animation-delay: var(--delay);
}
.current:hover .current__wave path{
  animation: waveLoop 3s ease-in-out infinite;
}
@keyframes drawWave{ to{ stroke-dashoffset:0 } }
@keyframes waveLoop{
  0%,100% { transform: translateX(0) }
  50%     { transform: translateX(-8px) }
}

.current--jade  { color: var(--jade-deep); }
.current--coral { color: var(--coral-deep); }
.current--rasp  { color: var(--rasp-deep); }
.current--wheat { color: color-mix(in oklab, var(--wheat) 30%, var(--humo)); }

.current__num{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px; letter-spacing:.3em;
  color: currentColor;
  opacity:.75;
  margin-bottom:36px;
}
.current h3{
  font-size: clamp(24px, 2.2vw, 30px);
  margin-bottom: 12px;
  color: currentColor;
}
.current p{
  font-size:14.5px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--humo) 78%, transparent);
  margin:0;
}
.current::before{
  content:'';
  position:absolute;
  left:0; bottom:0;
  height:3px; width:0;
  background: currentColor;
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.current.is-visible::before{ width:100%; }

/* ============================================================
   VMP
============================================================ */
.vmp{
  position:relative;
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
  background: linear-gradient(180deg, var(--marfil), var(--marfil-2));
}
.vmp__head{
  max-width: 760px;
  margin: 0 auto clamp(50px, 8vh, 80px);
  text-align:center;
}
.vmp__head h2{ font-size: clamp(30px, 3.8vw, 54px); }
.vmp__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 60px);
  align-items:start;
}
.pillar{
  position:relative;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2vw, 32px);
  border-top: 1px solid var(--rule);
}
.pillar__symbol{
  width: 64px; height:64px;
  margin-bottom: 20px;
}
.pillar__symbol svg{ width:100%; height:100%; }
.draw-stroke{
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);
}
.pillar.is-visible .draw-stroke{ stroke-dashoffset: 0; }

.pillar__label{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--coral-deep);
  margin:0 0 8px;
  font-weight:500;
}
.pillar__title{
  font-size: clamp(22px, 2vw, 28px);
  line-height:1.2;
  margin-bottom: 16px;
}
.pillar__copy{
  font-size: 15px;
  line-height:1.7;
  color: color-mix(in oklab, var(--humo) 80%, transparent);
  margin:0;
}
.pillar::after{
  content:'';
  position:absolute;
  top:-1px; left:0; height:1px;
  width:0;
  background: var(--coral);
  transition: width 1.4s cubic-bezier(.2,.7,.2,1);
}
.pillar.is-visible::after{ width:100%; }

/* ============================================================
   ESSENCE
============================================================ */
.essence{
  position:relative;
  background:
    radial-gradient(60% 50% at 50% 30%, color-mix(in oklab, var(--rasp) 14%, var(--marfil)) 0%, var(--marfil) 70%),
    var(--marfil);
  padding: clamp(100px, 14vh, 160px) var(--pad-x);
  overflow:hidden;
}
.essence__inner{
  max-width: 980px;
  margin:0 auto;
  text-align:center;
}
.essence__head h2{
  font-size: clamp(34px, 4.4vw, 62px);
  line-height:1.12;
  margin-bottom: clamp(40px, 6vh, 70px);
}
.essence__tags{
  list-style:none;
  padding:0;
  margin: 0 auto clamp(50px, 7vh, 80px);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 12px 14px;
  max-width: 760px;
}
.essence__tags li{
  --i:0;
  opacity:0;
  transform: translateY(10px) scale(.96);
}
.essence__tags.is-visible li{
  animation: tagIn .8s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
.essence__tags li span{
  display:inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--humo) 16%, transparent);
  font-family:var(--serif);
  font-style:italic;
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--humo);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(4px);
  transition: transform .4s ease, background .4s ease, border-color .4s ease;
}
.essence__tags li:hover span{
  transform: translateY(-4px);
  background: white;
  border-color: var(--coral);
  color: var(--coral-deep);
}
@keyframes tagIn{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.essence__quote{
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height:1.5;
  color: var(--humo-soft);
}
.essence__quote em{ color: var(--rasp-deep); }

/* ============================================================
   CLOSE
============================================================ */
.close{
  position:relative;
  padding: clamp(100px, 14vh, 160px) var(--pad-x) clamp(80px, 10vh, 120px);
}
.close__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items:center;
}
.close__portrait{
  margin:0;
  display:grid;
  justify-items:center;
  gap: 22px;
}
.portrait-frame{
  position:relative;
  width: min(420px, 100%);
  aspect-ratio: 3/4;
  overflow:hidden;
  border-radius: 220px 220px 12px 12px;
  background: var(--marfil-2);
  box-shadow:
    0 60px 90px -50px color-mix(in oklab, var(--humo) 30%, transparent),
    0 20px 30px -20px color-mix(in oklab, var(--humo) 20%, transparent);
}
.portrait-frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 12%;
  transition: transform 1.2s ease;
}
.close__portrait:hover .portrait-frame img{ transform: scale(1.04); }

.portrait-petal{
  position:absolute;
  width: 90px; height: 140px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: blur(.3px);
  opacity:.85;
}
.portrait-petal--a{
  background: var(--coral);
  top: -30px; right: -28px;
  transform: rotate(28deg);
  animation: petalBob 8s ease-in-out infinite;
}
.portrait-petal--b{
  background: var(--jade);
  bottom: -36px; left: -28px;
  transform: rotate(-30deg);
  animation: petalBob 9s ease-in-out infinite reverse;
}
@keyframes petalBob{
  0%,100% { transform: rotate(28deg) translateY(0); }
  50%     { transform: rotate(34deg) translateY(-10px); }
}

.close__portrait figcaption{
  text-align:center;
  display:flex; flex-direction:column; gap: 4px;
}
.cap-name{
  font-family: var(--serif);
  font-size: 22px;
  font-style:italic;
  color: var(--humo);
}
.cap-role{
  font-family:var(--sans);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color: color-mix(in oklab, var(--humo) 55%, transparent);
}

.close__copy h2{
  font-size: clamp(34px, 4.4vw, 62px);
  line-height:1.08;
  margin-bottom: 24px;
}
.close__lede{
  font-size: 17px;
  line-height:1.7;
  color: color-mix(in oklab, var(--humo) 82%, transparent);
  max-width: 52ch;
  margin: 0 0 28px;
}
.close__cta{
  display:flex; gap:14px; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size:14px;
  letter-spacing:.04em;
  border-radius: 999px;
  text-decoration:none;
  transition: transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.btn--primary{
  background: var(--coral-deep);
  color: white;
}
.btn--primary:hover{
  background: var(--humo);
  transform: translateY(-2px);
}
.btn--primary svg{ transition: transform .35s ease; }
.btn--primary:hover svg{ transform: translateX(4px); }
.btn--ghost{
  color: var(--humo);
  border-color: color-mix(in oklab, var(--humo) 25%, transparent);
}
.btn--ghost:hover{
  border-color: var(--humo);
  background: var(--humo);
  color: var(--marfil);
}

.close__signoff{
  text-align:center;
  margin: clamp(80px, 10vh, 120px) auto 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 34px);
  color: color-mix(in oklab, var(--humo) 65%, transparent);
  line-height:1.4;
  max-width: 800px;
}
.close__signoff em{ color: var(--coral-deep); }

/* ============================================================
   SCROLL REVEALS
============================================================ */
.reveal-on-scroll{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0ms);
}
.reveal-on-scroll.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px){
  .currents__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px){
  .what__inner{ grid-template-columns: 1fr; }
  .what__logo{ order:-1; max-width: 360px; margin: 0 auto; }
  .vmp__grid{ grid-template-columns: 1fr; gap: 8px; }
  .close__grid{ grid-template-columns: 1fr; }
  .close__portrait{ order:-1; }
  .manifesto__rail{ display:none; }
  .pillar{ padding: 28px 0; }
}
@media (max-width: 720px){
  :scope{ --pad-x: 22px; }
  .hero{ min-height: auto; padding-top: 70px; padding-bottom: 110px; }
  .hero__title{
    font-size: clamp(46px, 13vw, 80px);
    gap: 0 .18em;
  }
  .hero__mark{ width: clamp(180px, 50vw, 240px); }
  .hero__lede{ font-size: 16px; }
  .hero__scroll{ display:none; }

  .what{ padding-top: 80px; padding-bottom: 80px; }
  .what__copy h2{ font-size: clamp(28px, 7vw, 38px); }
  .what__text{ font-size: 15.5px; }

  .manifesto{ padding-top: 80px; padding-bottom: 80px; }
  .manifesto__head h2{ font-size: clamp(26px, 7vw, 36px); }
  .m-line{ font-size: 17px; }
  .m-strong{ font-size: 18px; }
  .m-quote{ font-size: clamp(22px, 7vw, 30px); }
  .cascade{
    margin-left: 0;
    padding-left: 16px;
  }
  .cascade p{ font-size: 17px; }

  .currents{ padding-top: 70px; padding-bottom: 70px; }
  .currents__grid{ grid-template-columns: 1fr; gap: 14px; }
  .currents__head h2{ font-size: clamp(26px, 7vw, 38px); }

  .vmp{ padding-top: 70px; padding-bottom: 70px; }
  .vmp__head h2{ font-size: clamp(26px, 7vw, 38px); }
  .pillar__title{ font-size: 22px; }

  .essence{ padding-top: 80px; padding-bottom: 80px; }
  .essence__head h2{ font-size: clamp(28px, 8vw, 38px); }
  .essence__tags li span{ font-size: 15px; padding: 8px 18px; }

  .close{ padding-top: 70px; padding-bottom: 70px; }
  .close__copy h2{ font-size: clamp(28px, 8vw, 40px); }
  .close__signoff{ font-size: 20px; margin-top: 60px; }
  .portrait-frame{ width: min(320px, 88%); }
  .close__cta .btn{ width: 100%; justify-content:center; }
}
@media (max-width: 420px){
  .hero__eyebrow{ font-size: 10px; letter-spacing: .25em; gap: 8px; }
  .hero__meta{ font-size: 9.5px; letter-spacing: .25em; }
  .hero__title{ font-size: clamp(40px, 14vw, 64px); }
  .reveal-word--accent > span{ font-size: .65em; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-on-scroll{ opacity:1; transform:none; }
  .reveal-word > span,
  .hero__lede .line > span{ transform: none !important; }
  .hero__mark, .hero__eyebrow, .hero__meta, .hero__scroll{ opacity:1 !important; transform:none !important; }
}
}