/* ============================================================
   ELEVADO v2 — Teide palette, dark/light rhythm, editorial type
   loaded after style.css, overrides only
   ============================================================ */

:root{
  /* volcanic base */
  --void:#0B0C0E;
  --basalt:#14171C;
  --basalt-2:#1B1F26;
  --ash:rgba(255,255,255,.09);
  --ash-strong:rgba(255,255,255,.16);

  /* sunrise on the summit — warm accent (replaces the old blue) */
  --blue:#C9601F;        /* ember, legible on light */
  --blue-2:#F5B451;      /* gold highlight, for dark ground */
  --blue-3:#FBEEE1;      /* warm tint */
  --blue-rgb:201,96,31;
  --ember:#C9601F;
  --gold:#F5B451;

  /* cold blue-grey from the shadow side */
  --slate:#7E8CA0;
  --slate-2:#AFBBCA;

  /* warm paper instead of cold grey */
  --paper:#F5F3EE;
  --paper-soft:#FAF8F4;
  --line:#E2DED4;
  --line-strong:#CFC9BC;
  --muted:#6E7076;

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
}

body{
  background:
    radial-gradient(720px 460px at 6% -6%,rgba(201,96,31,.10),transparent 62%),
    radial-gradient(620px 450px at 96% 6%,rgba(126,140,160,.12),transparent 64%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-soft) 44%,var(--paper) 100%);
}

/* ---------- 1. TYPE: editorial serif display + grotesk body ---------- */
h1,h2,h3,.h2,.a-h,.a-brand,.cta h2,.advisor-copy h2,
.problem-card h3,.feature-card h3,.step h3,.final-card h3,
.testi-card blockquote,.result-card strong,.stat strong,
.big-type-word,.showcase-copy h3,.manifesto-line,.faq-q{
  font-family:var(--font-display);
  font-variation-settings:'opsz' 144,'SOFT' 12,'WONK' 0;
  font-weight:700;
  letter-spacing:-.018em;
}
.h2{font-size:clamp(33px,4.3vw,62px);line-height:1.02;font-weight:760}
.a-brand{font-weight:800;letter-spacing:-.03em}
.a-h{font-weight:760;letter-spacing:-.024em;line-height:.98}
.cta h2{font-weight:760;letter-spacing:-.026em;line-height:.98}
.advisor-copy h2{font-weight:760;letter-spacing:-.022em}
.problem-card h3,.feature-card h3,.showcase-copy h3{font-weight:700;letter-spacing:-.02em;line-height:1.02}
.result-card strong,.stat strong{font-weight:760;letter-spacing:-.02em}
.faq-q{font-weight:660;font-size:20px;letter-spacing:-.014em}
.testi-card blockquote{font-weight:450;font-variation-settings:'opsz' 40,'SOFT' 24,'WONK' 0;letter-spacing:-.008em;line-height:1.45}
.manifesto-line{font-weight:700;letter-spacing:-.024em}
.big-type-word{font-weight:800;letter-spacing:.01em}

/* accent words: italic with WONK on — the swashy cut */
.serif,.h2 .serif,.a-h .serif,.cta h2 span,.manifesto-line .serif{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 1;
  letter-spacing:-.012em;
}
.lead,p,li,.tag,.kicker,.mono,.btn,.nav-links a,.client span,.client strong,
.project-meta span,.problem-number,.stat > span,.result-card span,.feature-tags .tag{
  font-family:var(--font-body);
}

/* ---------- 2. RHYTHM: dark sections ---------- */
.section.dark,.advisor.dark,.logo-cloud.dark{
  background:var(--void);
  color:#fff;
  border-block:0;
}
.section.light-panel.dark{background:var(--void)}
.dark .h2,.dark h2,.dark h3,.dark h4,.dark strong,.dark .a-h{color:#fff}
.dark .lead,.dark p,.dark li,.dark blockquote{color:rgba(255,255,255,.66)}
.dark .kicker{color:var(--gold)}
.dark .kicker:before{background:var(--gold)}
.dark .mono,.dark small{color:var(--slate-2)}

/* cards on dark ground */
.dark .result-card,.dark .step,.dark .final-card,.dark .faq-item,
.dark .compare-table,.dark .result-copy,.dark .portrait-wrap,
.dark .availability-card,.dark .testi-card,.dark .problem-card{
  background:var(--basalt);
  border-color:var(--ash);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  color:#fff;
}
.dark .result-card:before{background:rgba(245,180,81,.12)}
.dark .result-card span,.dark .stat > span{color:rgba(255,255,255,.6)}
.dark .result-card.blue{background:linear-gradient(150deg,var(--ember),#8E3D10);border-color:rgba(245,180,81,.35)}
.dark .result-card.blue span{color:rgba(255,255,255,.82)}
.dark .chart i{background:rgba(255,255,255,.14)}
.dark .result-card.blue .chart i{background:rgba(255,255,255,.34)}
.dark .stat-band,.dark .stat{border-color:var(--ash)}
.dark .stat strong{color:var(--gold)}
.dark .check-list li{color:rgba(255,255,255,.62)}
.dark .check-list li:before{color:var(--gold)}
.dark .step-num{color:rgba(255,255,255,.16)}
.dark .step.active{border-color:rgba(245,180,81,.42);background:var(--basalt-2)}
.dark .step.active .step-num{color:var(--gold)}
.dark .process-count span{background:rgba(255,255,255,.16)}
.dark .process-count span.active{background:var(--gold)}

/* faq on dark */
.dark .faq-grid{border-top-color:var(--ash)}
.dark .faq-item{background:transparent;border-bottom:1px solid var(--ash);box-shadow:none}
.dark .faq-q{color:#fff}
.dark .faq-q span{border-color:var(--ash-strong);color:var(--gold)}
.dark .faq-a div{color:rgba(255,255,255,.62)}

/* advisor on dark */
.advisor.dark .advisor-bg-title{color:rgba(255,255,255,.045)}
.advisor.dark .manifesto-line{color:rgba(255,255,255,calc((170 - var(--shade,170)) / 164 * 0.86 + 0.14));transition:color .18s linear}
.advisor.dark .manifesto-line .serif{color:inherit}
.advisor.dark .advisor-role{color:rgba(255,255,255,.62)}
.advisor.dark .person-badge{background:rgba(12,14,18,.62);border-color:rgba(255,255,255,.14);backdrop-filter:blur(18px)}
.advisor.dark .person-badge strong{color:#fff}
.advisor.dark .person-badge small,.advisor.dark .person-badge span{color:var(--slate-2)}
.advisor.dark .availability-card{color:rgba(255,255,255,.78)}
.advisor.dark .availability-card i{background:var(--gold);box-shadow:0 0 18px rgba(245,180,81,.6)}
.dark .btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.18)}
.dark .btn-ghost:hover{background:rgba(255,255,255,.13)}

/* logo cloud as the bridge out of the hero */
.logo-cloud.dark{padding:44px 0 56px}
.logo-cloud.dark .logo-label{color:var(--slate)}
.logo-cloud.dark .logo-item{color:rgba(255,255,255,.30)}
.logo-cloud.dark .logo-item.serif-logo{font-family:var(--font-display);font-style:italic;color:rgba(245,180,81,.62);font-variation-settings:'SOFT' 60,'WONK' 1}

/* light sections keep a warmer, quieter panel */
.section.light-panel:not(.dark){background:transparent;border-block:0}
.tag{background:var(--blue-3);color:#8A431A;border-color:rgba(201,96,31,.16)}
.dark .tag{background:rgba(245,180,81,.10);color:var(--gold);border-color:rgba(245,180,81,.24)}

/* CTA becomes the warm climax instead of another black box */
.cta-panel{background:linear-gradient(145deg,#1A0E05 0%,#A84E17 46%,#E89B3E 100%);box-shadow:0 40px 120px rgba(140,62,18,.34)}
.cta-panel:before{background:radial-gradient(circle,rgba(255,214,150,.45),transparent 62%)}
.cta .btn-blue{background:#fff;color:#7A3A10}
.cta .btn-blue:hover{background:#FFF3E2}

/* outro rides out dark */
.big-type{background:var(--void);border-block-color:var(--ash)}
.big-type-caption{color:var(--slate)}
.big-type-word{color:#fff}
.big-type-word.ghost{color:rgba(255,255,255,.13)}
.footer{background:var(--void);color:rgba(255,255,255,.5);border-top:1px solid var(--ash)}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:var(--gold)}

/* nav inverts over any dark section */
body.nav-dark .nav{background:rgba(12,14,18,.62);border-color:rgba(255,255,255,.13)}
body.nav-dark .nav .logo{color:#fff}
body.nav-dark .nav-links{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10)}
body.nav-dark .nav-links a{color:rgba(255,255,255,.62)}
body.nav-dark .nav-links a:hover,body.nav-dark .nav-links a.active{background:rgba(255,255,255,.92);color:var(--void)}
body.nav-dark .lang-toggle{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.08)}
body.nav-dark .lang-toggle span{color:rgba(255,255,255,.68)}
body.nav-dark .lang-toggle span.on{background:#fff;color:var(--void)}

/* ---------- 3. PROJECTS: full-bleed showcases, screenshot shown 1:1 ---------- */
.projects .project-grid{display:none}
.showcase{position:relative;margin-top:34px}
.showcase + .showcase{margin-top:96px}
.showcase-inner{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px;align-items:center}
.showcase-copy{max-width:430px}
.showcase-index{font-family:var(--font-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:20px}
.showcase-index:before{content:"";width:34px;height:1px;background:var(--gold)}
.showcase-copy h3{font-size:clamp(38px,4.6vw,68px);line-height:.98;margin-bottom:18px;color:#fff}
.showcase-copy p{color:rgba(255,255,255,.64);font-size:17px;line-height:1.65;max-width:400px}
.showcase-meta{font-family:var(--font-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.showcase-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 30px}
.showcase-link{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:14px;border-bottom:1px solid rgba(245,180,81,.5);padding-bottom:5px;transition:gap .25s ease,border-color .25s ease}
.showcase-link:hover{gap:16px;border-color:var(--gold)}

.showcase-device{perspective:1400px}
.device{position:relative;border-radius:20px;background:linear-gradient(160deg,#2A2F38,#101318);padding:12px 12px 14px;box-shadow:0 50px 140px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .8s ease}
.device:after{content:"";position:absolute;inset:-14% -8% auto auto;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(245,180,81,.24),transparent 66%);pointer-events:none;z-index:-1}
.showcase-device:hover .device{transform:translateY(-6px);box-shadow:0 62px 160px rgba(0,0,0,.68),0 0 0 1px rgba(245,180,81,.22),inset 0 1px 0 rgba(255,255,255,.16)}
.device-bar{display:flex;align-items:center;gap:7px;padding:0 4px 11px}
.device-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.20);display:block}
.device-bar u{flex:1;height:20px;border-radius:999px;background:rgba(255,255,255,.07);text-decoration:none;font-family:var(--font-ui);font-size:9px;color:rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;letter-spacing:.06em}
.device-screen{position:relative;overflow:hidden;border-radius:12px;background:#0d0f13;line-height:0}
.device-screen img{position:static;width:100%;height:auto;display:block;transform:none}
.device-glow{position:absolute;inset:0;border-radius:12px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}

@media(max-width:1100px){
  .showcase-inner{grid-template-columns:1fr;gap:30px}
  .showcase + .showcase{margin-top:64px}
  .showcase-copy{max-width:none}
}

/* ---------- 4. MOTION ---------- */
/* the old per-word pop is replaced by line masks */
.wsplit .w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.lmask{display:block;overflow:hidden;padding-block:.05em .14em;margin-block:-.05em -.14em}
.lmask-i{display:block;transform:translateY(108%);clip-path:inset(0 0 -20% 0);transition:transform .82s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--d,0) * 60ms)}
.lines-in .lmask-i{transform:none}

@media(prefers-reduced-motion:reduce){.lmask-i{transform:none;transition:none}}

/* NOTE: reveals used to run on `animation-timeline: view()`. Two problems
   made that unusable: inside any element with `overflow:hidden` the timeline
   resolves against that non-scrolling box and stays at progress 0 forever
   (the contact buttons were permanently invisible), and for elements taller
   than the viewport the range finishes far too late. The IntersectionObserver
   reveal in main.js is authoritative again. */

/* view transition for the language switch */
::view-transition-old(root){animation:vtOut .34s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .46s cubic-bezier(0,0,.2,1) both}
@keyframes vtOut{to{opacity:0;filter:blur(3px)}}
@keyframes vtIn{from{opacity:0;filter:blur(3px)}}

/* misc harmonisation with the new palette */
.logo-mark{background:linear-gradient(135deg,var(--ember),var(--gold));box-shadow:0 12px 34px rgba(201,96,31,.28)}
.stars{color:var(--gold)}
.quote-mark{color:rgba(201,96,31,.16)}
.client-pic{background:linear-gradient(135deg,var(--slate),#2A2F38)}
.mark.yes{background:var(--ember);color:#fff}
.mark.warn{background:#FBEEE1;color:#9A5A16}
.dark .mark.no{background:rgba(255,255,255,.08);color:rgba(255,255,255,.42)}
.dark .table-head{background:var(--basalt-2)}
.dark .table-head div,.dark .table-row div{border-color:var(--ash)}
.dark .table-row{border-top-color:var(--ash)}
.dark .us-col{background:rgba(245,180,81,.07)}
.final-card.elevado{background:linear-gradient(155deg,#1A0E05,#8E4413)}
.cursor-glow{background:radial-gradient(circle,rgba(201,96,31,.10),rgba(201,96,31,.02) 45%,transparent 70%)}
#scrollbar span{background:linear-gradient(90deg,var(--ember),var(--gold));box-shadow:0 0 28px rgba(245,180,81,.4)}
.tilt-glare{background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(255,222,180,.42),rgba(255,255,255,0) 58%)}

/* ---------- language picker with flags ---------- */
.lang-picker{position:relative}
.lang-trigger{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 7px;border:1px solid rgba(11,12,14,.12);border-radius:999px;background:rgba(11,12,14,.035);cursor:pointer;color:var(--muted);transition:background .2s ease,border-color .2s ease,color .2s ease}
.lang-trigger:hover{background:rgba(11,12,14,.07);color:var(--ink)}
.lang-caret{width:10px;height:6px;opacity:.7;transition:transform .25s ease}
.lang-picker.open .lang-caret{transform:rotate(180deg)}
.flag{width:20px;height:14px;border-radius:3px;display:inline-block;flex:0 0 auto;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(11,12,14,.10),0 1px 3px rgba(0,0,0,.18)}
.flag-es{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Crect%20width%3D%2260%22%20height%3D%2240%22%20fill%3D%22%23AA151B%22%2F%3E%3Crect%20y%3D%2210%22%20width%3D%2260%22%20height%3D%2220%22%20fill%3D%22%23F1BF00%22%2F%3E%3C%2Fsvg%3E")}
.flag-de{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2036%22%3E%3Crect%20width%3D%2260%22%20height%3D%2236%22%20fill%3D%22%23FFCE00%22%2F%3E%3Crect%20width%3D%2260%22%20height%3D%2224%22%20fill%3D%22%23DD0000%22%2F%3E%3Crect%20width%3D%2260%22%20height%3D%2212%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")}
.flag-en{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22M0%200v30h60V0z%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22b%22%3E%3Cpath%20d%3D%22M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23a%29%22%3E%3Cpath%20d%3D%22M0%200v30h60V0z%22%20fill%3D%22%23012169%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%22%20clip-path%3D%22url%28%23b%29%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v30%20M0%2C15%20h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v30%20M0%2C15%20h60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:172px;padding:6px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(22px);border:1px solid rgba(11,12,14,.10);box-shadow:0 24px 60px rgba(11,12,14,.16);display:grid;gap:2px;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1);z-index:120}
.lang-picker.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:11px;background:transparent;border:0;cursor:pointer;font-family:var(--font-body);font-size:13.5px;font-weight:700;color:var(--ink);text-align:left;transition:background .18s ease}
.lang-menu button:hover{background:rgba(11,12,14,.06)}
.lang-menu button.on{background:var(--blue-3);color:#8A431A}
.lang-menu button.on:after{content:"\2713";margin-left:auto;color:var(--ember);font-weight:900}
body.nav-dark .lang-trigger,body.ascent-active .lang-trigger{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
body.nav-dark .lang-trigger:hover,body.ascent-active .lang-trigger:hover{color:#fff}
body.nav-dark .lang-menu,body.ascent-active .lang-menu{background:rgba(18,21,26,.92);border-color:rgba(255,255,255,.12)}
body.nav-dark .lang-menu button,body.ascent-active .lang-menu button{color:#fff}
body.nav-dark .lang-menu button:hover,body.ascent-active .lang-menu button:hover{background:rgba(255,255,255,.09)}
body.nav-dark .lang-menu button.on,body.ascent-active .lang-menu button.on{background:rgba(245,180,81,.14);color:var(--gold)}
@media(max-width:820px){.lang-menu{min-width:158px}.lang-menu button{font-size:13px}}

/* ---------- hero: one guaranteed stop per image ----------
   `scroll-snap-stop: always` is what stops a fast fling from flying past a
   station. Mandatory snapping is toggled by js and only while the pinned
   hero is running, so the rest of the page is never magnetised to a stop. */
.ascent{height:250vh}
html.hero-snap{scroll-snap-type:y mandatory}
html.hero-snap.snap-free{scroll-snap-type:none}
.ascent-stops{position:absolute;inset:0;pointer-events:none;z-index:0}
.ascent-stops i{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always}
.ascent-stops i:nth-child(1){top:0}
.ascent-stops i:nth-child(2){top:50vh}
.ascent-stops i:nth-child(3){top:100vh}
.ascent-stops i:nth-child(4){top:150vh}
@media(prefers-reduced-motion:reduce){html.hero-snap{scroll-snap-type:none}}

/* ---------- nav logo is the gold E ---------- */
.logo-mark{width:38px;height:38px;border-radius:0;background:none!important;box-shadow:none!important;object-fit:contain;display:block;filter:drop-shadow(0 2px 8px rgba(201,96,31,.28))}
.logo{gap:11px;font-size:20px}

/* ---------- problem cards carry real artwork ---------- */
.problem-grid{align-items:stretch}
.problem-card,.problem-card.large{min-height:0;padding:30px 30px 0;display:flex;flex-direction:column}
.problem-card .problem-content{flex:0 0 auto;padding-bottom:24px}
.card-shot{position:relative;margin:auto 0 30px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 18px 44px rgba(11,12,14,.10);line-height:0;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.card-shot{background:#F7F5F1}
.card-shot img{width:100%;height:auto;display:block}
.problem-card:hover .card-shot{transform:translateY(-5px);box-shadow:0 28px 64px rgba(11,12,14,.17)}
.problem-card .pattern{mask-image:linear-gradient(180deg,#000,transparent 55%)}
@media(max-width:820px){.problem-card,.problem-card.large{padding:24px 24px 0}.card-shot{margin-bottom:24px}}

/* ---------- FAQ: readable and clearly interactive ---------- */
.faq-grid{margin-top:44px;border-top:0;display:grid;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.dark .faq-item{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.dark .faq-item:hover{background:rgba(255,255,255,.06);border-color:rgba(245,180,81,.28)}
.dark .faq-item.open{background:rgba(245,180,81,.055);border-color:rgba(245,180,81,.42);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.faq-q{position:relative;padding:24px 26px;gap:22px;font-size:19px;line-height:1.34;align-items:center;cursor:pointer;transition:color .25s ease}
.dark .faq-q{color:rgba(255,255,255,.90)}
.dark .faq-item:hover .faq-q,.dark .faq-item.open .faq-q{color:#fff}
.faq-q:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);transform:scaleY(0);transform-origin:center;transition:transform .38s cubic-bezier(.16,1,.3,1)}
.faq-item.open .faq-q:before{transform:scaleY(1)}
.faq-q span{flex:0 0 auto;width:34px;height:34px;font-size:20px;line-height:1;border-radius:50%;transition:transform .35s cubic-bezier(.16,1,.3,1),background .28s ease,color .28s ease,border-color .28s ease}
.dark .faq-q span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--gold)}
.dark .faq-item:hover .faq-q span{background:rgba(245,180,81,.16);border-color:rgba(245,180,81,.4)}
.dark .faq-item.open .faq-q span{background:var(--gold);color:var(--void);border-color:var(--gold);transform:rotate(135deg)}
.faq-item.open .faq-q span{transform:rotate(135deg)}
.faq-a div{padding:0 74px 26px 26px;font-size:16.5px;line-height:1.72;max-width:820px}
.dark .faq-a div{color:rgba(255,255,255,.80)}
@media(max-width:820px){.faq-q{padding:20px;font-size:17px;gap:14px}.faq-a div{padding:0 20px 22px}}

/* ============================================================
   MOBILE SCROLL PERFORMANCE
   phones repaint every frame on blur + huge composited layers,
   so the expensive parts are traded for cheap equivalents
   ============================================================ */
@media (hover:none),(max-width:900px){
  /* live blur behind the fixed bar is the single most expensive
     thing while scrolling — swap it for a solid tint */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.94)}
  body.nav-dark .nav,body.ascent-active .nav{background:rgba(12,14,18,.92)}
  .lang-menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  body.nav-dark .lang-menu,body.ascent-active .lang-menu{background:#15181E}
  .person-badge{backdrop-filter:none;-webkit-backdrop-filter:none}
  .advisor.dark .person-badge{background:rgba(12,14,18,.86)}

  /* four full-screen promoted layers ≈ 40 MB of GPU texture on a phone */
  .ascent-layer{will-change:auto;transform:none!important}
  .ascent-sticky{will-change:auto}

  /* soften the heaviest shadows: large blur radii cost real paint time */
  .device{box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07)}
  .dark .result-card,.dark .step,.dark .final-card,.dark .faq-item,
  .dark .compare-table,.dark .result-copy,.dark .portrait-wrap,
  .dark .availability-card,.dark .testi-card,.dark .problem-card{box-shadow:0 10px 26px rgba(0,0,0,.34)}
  .cta-panel{box-shadow:0 18px 48px rgba(140,62,18,.28)}
  .card-shot{box-shadow:0 8px 20px rgba(11,12,14,.09)}

  /* no cursor on a phone */
  .cursor-glow{display:none}

  /* the body gradient repaints on every scroll step — fix it in place */
  body{background-attachment:scroll}

  /* hover-only flourishes never fire on touch, so drop their transitions */
  .device,.card-shot,.project-card,.result-card,.testi-card{transition:none}

  /* marquees: keep them, but let the compositor own them outright */
  .logo-track,.big-type-marquee{will-change:transform}
}

/* touch feedback instead of hover states */
@media (hover:none){
  .faq-item:active{background:rgba(255,255,255,.07)}
  .btn:active{transform:scale(.985)}
  a,button{-webkit-tap-highlight-color:rgba(201,96,31,.18)}
}

/* phones: same four stops, shorter run */
@media (max-width:900px){
  .ascent{height:200vh}
  .ascent-stops i:nth-child(2){top:33.33vh}
  .ascent-stops i:nth-child(3){top:66.66vh}
  .ascent-stops i:nth-child(4){top:100vh}
}

/* headlines keep a stable line count while scrolling */
.showcase-copy h3{text-wrap:balance;min-height:2em}
.h2,.advisor-copy h2,.cta h2,.showcase-copy h3{font-variation-settings:'opsz' 144,'SOFT' 14,'WONK' 0}
.h2 .serif,.cta h2 span,.advisor-copy h2 .serif,.showcase-copy h3 .serif{font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 1}

/* ============================================================
   no sideways scrolling
   body had overflow-x:hidden, but with a `visible` root that value
   propagates to the viewport and stops clipping anything. `clip` is
   used rather than `hidden` because it does not create a scroll
   container — `hidden` on body would break the pinned hero.
   ============================================================ */
html,body{overflow-x:clip;max-width:100%}
@supports not (overflow:clip){body{overflow-x:hidden}}

/* the oversized background word is decorative and may not push the page.
   `clip` instead of `hidden`: hidden would make .advisor a scroll container
   and break anything inside it that depends on the page scroll. */
.advisor{overflow:clip}
@media (max-width:900px){.advisor-bg-title{font-size:min(13vw,74px)}}

/* ============================================================
   SECTION DIVIDERS — drifting ridgelines
   Three layers per divider, each a 200%-wide svg whose path tiles
   every 50%. Drifting by exactly -50% therefore loops seamlessly.
   `translate` (not `transform`) carries the drift so `transform` and
   `scale` stay free for the bob and the vertical flip.
   ============================================================ */
.sdiv-defs{position:absolute;width:0;height:0;overflow:hidden}
.sdiv{contain:paint;position:relative;z-index:1;height:clamp(52px,6.5vw,96px);overflow:hidden;line-height:0;pointer-events:none;background:transparent;margin-block:-1px}
.sl{position:absolute;left:0;top:0;width:200%;height:100%;display:block}
.sl1{fill:var(--void);animation:sdriftC 26s linear infinite}
.sl2{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.4;animation:sdriftB 17s linear infinite}
.sl3{fill:none;stroke:rgba(245,180,81,.34);stroke-width:1.2;animation:sdriftA 21s linear infinite}

/* "up" reuses the same geometry, flipped: the mass sits at the bottom */
.sdiv[data-dir="up"] .sl{scale:1 -1}

@keyframes sdriftA{from{translate:0}to{translate:-50%}}
@keyframes sdriftB{from{translate:-50%}to{translate:0}}
@keyframes sdriftC{from{translate:0}to{translate:-50%}}
@keyframes sglint{0%,100%{transform:translateX(-30%);opacity:.18}50%{transform:translateX(30%);opacity:.55}}

/* only animate what is on screen */
.sdiv:not(.on) .sl{animation-play-state:paused}

/* the dark neighbours must meet the divider without a seam */
.logo-cloud.dark + .sdiv,.section.dark + .sdiv,.advisor.dark + .sdiv,.big-type + .sdiv{margin-top:-1px}

@media (max-width:900px){
  .sdiv{height:clamp(40px,9vw,64px)}
  .sl3{display:none}                    /* one contour is plenty on a phone */
  .sl2{animation-duration:22s}
}

@media (prefers-reduced-motion:reduce){
  .sl{animation:none}
  .sl2{translate:-50%}
}

/* global smooth scrolling made every wheel notch animate and fought the
   hero snap; anchor jumps do their own smooth scroll in js instead */
html{scroll-behavior:auto}

/* ============================================================
   FAQ — rebuilt for contrast. The previous surfaces sat at 3.5%
   white on near-black, which is invisible on most screens.
   ============================================================ */
.dark .faq-item{
  background:#161A21;
  border:1px solid rgba(255,255,255,.17);
  border-radius:18px;
  box-shadow:0 2px 0 rgba(255,255,255,.03) inset;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.dark .faq-item:hover{background:#1D222B;border-color:rgba(245,180,81,.42)}
.dark .faq-item.open{
  background:linear-gradient(180deg,rgba(245,180,81,.13),rgba(245,180,81,.035));
  border-color:rgba(245,180,81,.62);
  box-shadow:0 18px 48px rgba(0,0,0,.5);
}
.dark .faq-q{color:#fff;font-size:19px;padding:22px 24px}
.dark .faq-item:hover .faq-q,.dark .faq-item.open .faq-q{color:#fff}
.faq-q:before{background:var(--gold);width:4px}
.dark .faq-q span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  color:#FFD79A;font-size:21px;
}
.dark .faq-item:hover .faq-q span{background:rgba(245,180,81,.24);border-color:rgba(245,180,81,.6);color:#fff}
.dark .faq-item.open .faq-q span{background:var(--gold);border-color:var(--gold);color:#14100A}
.dark .faq-a div{color:rgba(255,255,255,.82);font-size:16.5px;padding:0 70px 24px 24px}
.dark #faq .kicker{color:var(--gold)}
@media (max-width:820px){
  .dark .faq-q{font-size:17px;padding:18px}
  .dark .faq-a div{padding:0 18px 20px}
}

/* ============================================================
   availability badge — a live green pulse, not a dot
   ============================================================ */
.availability-card i{position:relative;background:#3ED27B;box-shadow:0 0 12px rgba(62,210,123,.85);animation:availDot 2.4s ease-in-out infinite}
.advisor.dark .availability-card i{background:#3ED27B;box-shadow:0 0 12px rgba(62,210,123,.85)}
.availability-card i:before,.availability-card i:after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(62,210,123,.55);animation:availRing 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.availability-card i:after{animation-delay:1.2s}
@keyframes availRing{0%{transform:scale(1);opacity:.75}70%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0}}
@keyframes availDot{0%,100%{opacity:1}50%{opacity:.62}}
.advisor.dark .availability-card{border-color:rgba(62,210,123,.30);color:rgba(255,255,255,.88)}
@media (prefers-reduced-motion:reduce){
  .availability-card i,.availability-card i:before,.availability-card i:after{animation:none}
  .availability-card i:before,.availability-card i:after{display:none}
}

/* ============================================================
   v3 — gold identity, contrast, stacking
   ============================================================ */

/* the fixed nav lived inside .page, whose `z-index:1` created a stacking
   context and trapped it below every later section. Releasing that context
   is what actually keeps the bar on top. */
.page{z-index:auto}
.nav{z-index:300}
#scrollbar{z-index:400}

/* --- navigation: gold as the identity colour --- */
.nav{border-color:rgba(201,96,31,.22);box-shadow:0 18px 52px rgba(11,12,14,.10),0 0 0 1px rgba(245,180,81,.10)}
.nav-links a:hover,.nav-links a.active{background:var(--ember);color:#fff}
.nav .btn-primary{background:linear-gradient(135deg,var(--ember),#E08B33);color:#fff;box-shadow:0 8px 22px rgba(201,96,31,.30)}
.nav .btn-primary:hover{box-shadow:0 12px 30px rgba(201,96,31,.44)}
.logo{color:var(--ink)}
body.nav-dark .nav,body.ascent-active .nav{background:rgba(14,12,10,.72);border-color:rgba(245,180,81,.34);box-shadow:0 18px 52px rgba(0,0,0,.5),0 0 0 1px rgba(245,180,81,.14)}
body.nav-dark .nav-links,body.ascent-active .nav-links{background:rgba(245,180,81,.08);border-color:rgba(245,180,81,.16)}
body.nav-dark .nav-links a,body.ascent-active .nav-links a{color:rgba(255,236,208,.72)}
body.nav-dark .nav-links a:hover,body.nav-dark .nav-links a.active,
body.ascent-active .nav-links a:hover,body.ascent-active .nav-links a.active{background:var(--gold);color:#1A0E05}
body.nav-dark .nav .btn-primary,body.ascent-active .nav .btn-primary{background:var(--gold);color:#1A0E05;box-shadow:0 8px 24px rgba(245,180,81,.34)}

/* --- three equal problem cards --- */
.problem-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.problem-card,.problem-card.large{grid-row:auto;min-height:0}
.problem-card h3{font-size:clamp(23px,1.9vw,30px)}
.problem-card p{font-size:15.5px;line-height:1.62;max-width:none}
@media(max-width:1100px){.problem-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.problem-grid{grid-template-columns:1fr}}

/* --- contact block: readable again --- */
.advisor.dark .manifesto-line{color:rgba(255,255,255,calc((170 - var(--shade,170)) / 164 * 0.55 + 0.45))}
.advisor.dark .advisor-role{color:rgba(255,255,255,.80);font-size:18px}
.advisor.dark .advisor-bg-title{color:rgba(245,180,81,.07)}
.advisor.dark .kicker{color:var(--gold)}
.advisor.dark .person-badge{background:rgba(14,12,10,.82);border-color:rgba(245,180,81,.28)}
.advisor.dark .person-badge small{color:var(--gold)}
.advisor.dark .person-badge span{color:rgba(255,255,255,.72)}
.advisor.dark .btn-ghost{background:rgba(245,180,81,.12);border-color:rgba(245,180,81,.38);color:#FFE7C2}
.advisor.dark .btn-ghost:hover{background:rgba(245,180,81,.22);color:#fff}
.advisor.dark .btn-blue{background:linear-gradient(135deg,var(--gold),#E08B33);color:#1A0E05;font-weight:850}
.advisor.dark .btn-blue:hover{box-shadow:0 14px 34px rgba(245,180,81,.34)}

/* --- FAQ: warm, gold-lit, clearly readable --- */
#faq.section.dark{background:linear-gradient(180deg,#0B0C0E 0%,#15100A 45%,#0B0C0E 100%)}
.dark .faq-item{
  background:linear-gradient(180deg,rgba(245,180,81,.09),rgba(245,180,81,.035));
  border:1px solid rgba(245,180,81,.26);
  border-radius:18px;
  box-shadow:none;
}
.dark .faq-item:hover{background:linear-gradient(180deg,rgba(245,180,81,.16),rgba(245,180,81,.06));border-color:rgba(245,180,81,.5)}
.dark .faq-item.open{
  background:linear-gradient(180deg,rgba(245,180,81,.22),rgba(245,180,81,.07));
  border-color:var(--gold);
  box-shadow:0 20px 54px rgba(0,0,0,.45),0 0 0 1px rgba(245,180,81,.22);
}
.dark .faq-q{color:#FFF3E0}
.dark .faq-item:hover .faq-q,.dark .faq-item.open .faq-q{color:#fff}
.dark .faq-q span{background:rgba(245,180,81,.18);border-color:rgba(245,180,81,.45);color:var(--gold)}
.dark .faq-item:hover .faq-q span{background:rgba(245,180,81,.32);border-color:var(--gold);color:#fff}
.dark .faq-item.open .faq-q span{background:var(--gold);border-color:var(--gold);color:#1A0E05}
.dark .faq-a div{color:rgba(255,240,220,.86)}
#faq .h2{color:#fff}