/* ============================================================
   Monique Lam — "elva" cinematic layer (v2 only)
   Three transferable moves from elvalabs.ai, on-brand:
     1. Count-up cinematic preloader
     2. Cycling phrase line (replaces the marquee ticker)
     3. Scroll-pinned LAMP method (sticky letter + stepped copy)
   Modular: remove the <link>/<script> to fully revert to v1.
   ============================================================ */

/* ============================================================
   1 · CINEMATIC PRELOADER
   ============================================================ */
.elva-loader{
  position:fixed; inset:0; z-index:9999;
  background:#0c0d11; color:var(--cream,#f4f4f3);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:var(--gut,40px);
  /* SAFETY: auto-lift even if JS never runs */
  animation:elvaLoaderAuto .7s var(--ease,ease) 2.6s forwards;
}
.elva-loader.done{
  animation:none;
  opacity:0; visibility:hidden; transform:translateY(-1.5%);
  transition:opacity .7s var(--ease), transform .7s var(--ease), visibility 0s .7s;
}
@keyframes elvaLoaderAuto{ to{ opacity:0; visibility:hidden; transform:translateY(-1.5%); } }

.elva-loader::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(179,18,43,.18), transparent 55%),
    radial-gradient(80% 60% at 50% 108%, rgba(179,18,43,.10), transparent 60%);
}
.elva-loader-inner{ position:relative; text-align:center; }
.elva-loader-brand{
  font-family:'Archivo',system-ui,sans-serif; font-weight:800;
  font-size:clamp(34px,7vw,76px); letter-spacing:-.022em; line-height:.95;
  display:inline-flex; align-items:center; gap:.36em;
  opacity:0; transform:translateY(14px);
  animation:elvaUp .8s var(--ease,ease) .12s forwards;
}
.elva-loader-brand .mk{
  width:.34em; height:.34em; background:var(--red,#b3122b); transform:rotate(45deg);
  flex:none;
}
.elva-loader-meta{
  margin-top:18px;
  font-family:'IBM Plex Mono',monospace; font-size:clamp(10px,1.1vw,12.5px);
  letter-spacing:.34em; text-transform:uppercase; color:var(--cream-mute,#878993);
  opacity:0; transform:translateY(12px);
  animation:elvaUp .8s var(--ease,ease) .26s forwards;
}
@keyframes elvaUp{ to{ opacity:1; transform:none; } }

.elva-loader-foot{
  position:absolute; left:0; right:0; bottom:clamp(26px,5vw,52px);
  padding-inline:clamp(20px,5vw,52px);
  display:flex; align-items:flex-end; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;
}
.elva-loader-cap{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-mute,#878993); padding-bottom:.45em;
}
.elva-loader-num{
  font-family:'Archivo',system-ui,sans-serif; font-weight:800;
  font-size:clamp(40px,9vw,110px); line-height:.8; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  color:var(--cream,#f4f4f3);
}
.elva-loader-num::after{ content:"%"; font-size:.34em; color:var(--red,#b3122b); vertical-align:.9em; margin-left:.1em; font-style:italic; }
.elva-loader-bar{
  position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(244,244,246,.10);
}
.elva-loader-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--red-deep,#7a1322),var(--red,#b3122b),var(--red-bright,#cf2238));
}
/* lock scroll while loading (removed by JS / never set if JS dead is fine) */
body.elva-loading{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .elva-loader{ animation:elvaLoaderAuto .01s linear .2s forwards; }
  .elva-loader-brand,.elva-loader-meta{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   2 · CYCLING PHRASE LINE  (replaces .marquee)
   ============================================================ */
.elva-cycle{ border-block:1px solid var(--line); background:var(--panel); overflow:hidden; }
.elva-cycle-inner{
  padding-block:clamp(40px,6vw,76px);
  display:flex; flex-direction:column; gap:clamp(16px,2vw,24px);
}
.elva-cycle-top{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-mute);
}
.elva-cycle-top .dot{ display:inline-flex; align-items:center; gap:9px; }
.elva-cycle-top .dot i{ width:6px; height:6px; background:var(--red); transform:rotate(45deg); }
.elva-cycle-line{
  font-family:'Archivo',system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:flex-start; gap:.04em; color:var(--fg);
}
.elva-cycle-line .lead{
  font-weight:700; letter-spacing:.01em; color:var(--fg-dim); white-space:nowrap;
  font-size:clamp(17px,2vw,28px); line-height:1.1; margin-bottom:.12em;
}
.elva-rotator{
  position:relative; display:inline-block; height:1.02em; overflow:hidden;
  vertical-align:bottom; transition:width .55s var(--ease); min-width:3ch;
  font-weight:800; letter-spacing:-.022em; line-height:1.02;
  font-size:clamp(46px,9vw,116px);
}
.elva-rotator .word{
  position:absolute; left:0; top:0; white-space:nowrap;
  color:var(--red-on-dark); font-style:italic; font-weight:800;
  transform:translateY(110%); opacity:0;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.elva-rotator .word.is-active{ transform:translateY(0); opacity:1; }
.elva-rotator .word.is-out{ transform:translateY(-110%); opacity:0; }
/* static fallback (no JS): show first word, natural width */
.no-elva .elva-rotator{ width:auto !important; height:auto; }
.no-elva .elva-rotator .word{ position:static; transform:none; opacity:1; }
.no-elva .elva-rotator .word:not(:first-child){ display:none; }

.elva-cycle-sub{
  font-family:'Archivo',system-ui,sans-serif; font-style:italic; font-weight:500;
  font-size:clamp(16px,1.7vw,22px); color:var(--fg-dim); max-width:48ch;
}

/* ============================================================
   3 · SCROLL-PINNED LAMP METHOD
   ============================================================ */
.lamp-pin{ position:relative; }
.lamp-pin .sec-head{ margin-bottom:clamp(34px,4vw,56px); }
.lamp-pin-grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,6vw,96px);
  align-items:start;
}

/* --- sticky media (the big letter) --- */
.lamp-pin-media{ position:sticky; top:13vh; align-self:start; }
.lamp-stage{
  position:relative; border:1px solid var(--line); background:var(--panel-2);
  aspect-ratio:1/1.04; max-height:74vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(21,23,30,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,23,30,.04) 1px, transparent 1px);
  background-size:38px 38px;
}
.lamp-letters{ position:relative; width:1em; height:1em;
  font-family:'Archivo',system-ui,sans-serif; font-weight:800;
  font-size:clamp(150px,26vw,400px); line-height:1; }
.lamp-letter{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:transparent; -webkit-text-stroke:1.4px var(--red);
  opacity:0; transform:scale(.82) translateY(6%); transition:opacity .55s var(--ease), transform .7s var(--ease), color .55s var(--ease);
}
.lamp-letter.on{ opacity:1; transform:none; color:var(--red); }
.lamp-stage .lamp-idx{
  position:absolute; left:16px; top:14px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; color:var(--fg-mute);
}
.lamp-stage .lamp-cap{
  position:absolute; left:16px; right:16px; bottom:16px;
  font-family:'Archivo',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em;
  font-size:clamp(18px,2vw,26px); color:var(--fg);
  display:flex; align-items:center; gap:.5em;
}
.lamp-stage .lamp-cap::before{ content:""; width:.7em; height:.7em; background:var(--red); transform:rotate(45deg); flex:none; }
.lamp-stage .lamp-track{
  position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line);
}
.lamp-stage .lamp-track span{ display:block; height:100%; width:25%; background:var(--red); transition:width .5s var(--ease), transform .5s var(--ease); }

/* --- scrolling steps --- */
.lamp-pin-steps{ display:flex; flex-direction:column; }
.lamp-pin-step{
  min-height:64vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(20px,4vw,40px); border-top:1px solid var(--line);
  opacity:.4; transition:opacity .5s var(--ease);
}
.lamp-pin-step:first-child{ border-top:0; }
.lamp-pin-step.active{ opacity:1; }
.lamp-pin-step .s-no{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); display:inline-flex; align-items:center; gap:.8em; margin-bottom:18px;
}
.lamp-pin-step .s-no::before{ content:""; width:24px; height:1px; background:var(--red); display:inline-block; }
.lamp-pin-step h3{
  font-family:'Archivo',system-ui,sans-serif; font-weight:800; letter-spacing:-.018em;
  font-size:clamp(30px,4.2vw,56px); line-height:1; margin-bottom:18px;
}
.lamp-pin-step p{ color:var(--fg-dim); font-size:clamp(16px,1.5vw,20px); line-height:1.55; max-width:46ch; }

.lamp-pin .lamp-foot{ margin-top:clamp(40px,5vw,72px); }

/* --- responsive: drop the pin, go to readable stacked cards --- */
@media (max-width:900px){
  .lamp-pin-grid{ grid-template-columns:1fr; gap:30px; }
  .lamp-pin-media{ position:static; }
  .lamp-stage{ aspect-ratio:16/9; }
  .lamp-letters{ font-size:clamp(110px,30vw,200px); }
  .lamp-pin-step{ min-height:0; padding-block:26px; opacity:1; }
}
/* fix: founder portrait was stretched (CSS width + HTML height attr → object-fit:fill).
   Restore natural aspect ratio. */
.founder-photo .frame img{ height:auto; }

/* ============================================================
   SISTER-BRAND FORK  (consultancy here ⇆ Monique Lam Group agency)
   ============================================================ */
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.split-card{
  background:var(--panel); border:1px solid var(--line);
  padding:clamp(28px,3.2vw,46px); display:flex; flex-direction:column;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.split-card.here{ background:var(--panel-2); }
.split-card.group{ border-color:rgba(179,18,43,.35); background:linear-gradient(180deg,rgba(179,18,43,.06),var(--panel) 58%); }
.split-card.group:hover{ transform:translateY(-4px); box-shadow:0 28px 56px -38px rgba(28,22,17,.55); border-color:rgba(179,18,43,.5); }
.split-tag{
  align-self:flex-start; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px; margin-bottom:24px;
  color:var(--fg-mute); border:1px solid var(--line-2);
}
.split-tag.alt{ color:var(--red); background:rgba(179,18,43,.10); border:1px solid rgba(179,18,43,.3); }
.split-card h3{
  font-family:'Archivo',system-ui,sans-serif; font-weight:800;
  font-size:clamp(28px,3.4vw,46px); line-height:.96; letter-spacing:-.018em;
}
.split-card h3 .red{ color:var(--red); }
.split-role{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-text); margin:13px 0 18px;
}
.split-card p{ color:var(--fg-dim); font-size:clamp(15px,1.3vw,17px); line-height:1.56; margin-bottom:22px; max-width:46ch; }
.split-list{ list-style:none; display:grid; gap:11px; margin-bottom:28px; }
.split-list li{ display:flex; gap:11px; font-size:15px; color:var(--fg-dim); line-height:1.42; }
.split-list li::before{ content:""; flex:none; width:7px; height:7px; background:var(--red); margin-top:6px; transform:rotate(45deg); }
.split-card .btn{ margin-top:auto; align-self:flex-start; }
.split-foot{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute);
}
.split-foot i{ width:7px; height:7px; background:var(--red); transform:rotate(45deg); flex:none; }
@media (max-width:760px){ .split-grid{ grid-template-columns:1fr; } }

/* nav scrolled (light header): the solid CTA text + burger were white and
   vanished against the light background — match the Monique Lam wordmark colour */
.burger{ color:inherit; }   /* <button> doesn't inherit colour by default */
.nav.scrolled .btn-solid{ color:var(--ink); }
.nav.scrolled .btn-solid:hover{ color:var(--ink); }

/* ============================================================
   MOBILE MENU HOVER — replace the bleeding full-width underline
   with a footer-style colour highlight (no underline)
   ============================================================ */
@media (max-width:1024px){
  .nav-links.open a::after{ display:none; }
  .nav-links.open a:hover,
  .nav-links.open a:focus-visible{ color:var(--red-on-dark); opacity:1; }
  .nav.scrolled .nav-links.open a:hover,
  .nav.scrolled .nav-links.open a:focus-visible{ color:var(--red); opacity:1; }
}

@media print{
  .elva-loader{ display:none !important; }
  .lamp-pin-media{ position:static; }
  .lamp-pin-step{ opacity:1; min-height:0; }
  .lamp-letter{ opacity:1; color:var(--red); transform:none; }
}