/* ==========================================================================
   Elisha Solutions — elisha.ph
   Gold/black design system. Manrope only, self-hosted. Gold is an ACCENT.
   Tokens come from the Brand OS — do not alter values.
   ========================================================================== */

/* ===== Fonts (filenames pinned by Task 2 — do not rename) ===== */
@font-face{font-family:Manrope;src:url(/fonts/manrope-v20-latin-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-v20-latin-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-v20-latin-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-v20-latin-800.woff2) format("woff2");font-weight:800;font-display:swap}

/* ===== Tokens (Brand OS) ===== */
:root{
  --gold:#C59006;      /* Elisha Gold — accents only */
  --gold-soft:#E7C46A; /* Soft Gold — lighter contrast on dark */
  --black:#0A0A0A;     /* Elisha Black — primary bg */
  --graphite:#1C1C1C;  /* alternating section bg */
  --ivory:#F8F5EE;     /* the one light section */
  --text:#F4F1E8;      /* body text on dark */
  --text-dim:#B9B4A6;  /* secondary text on dark */
  --ink:#1C1504;       /* dark warm ink — text on gold buttons + ivory section */
  --gold-ivory:#8A6404;/* darker gold for the ivory section (contrast ≥4.5:1) */
  /* RGB triplets of the tokens above, for rgba(var(--x-rgb), alpha) tints */
  --gold-rgb:197,144,6;
  --gold-soft-rgb:231,196,106;
  --black-rgb:10,10,10;
  --text-rgb:244,241,232;
  --text-dim-rgb:185,180,166;
  --wrap:1120px;
  --nav-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1.25rem)}
body{
  background:var(--black);
  color:var(--text);
  font:400 1.05rem/1.65 Manrope,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%}
ul,ol{padding:0}
::selection{background:rgba(var(--gold-rgb),.4);color:var(--text)}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

/* ===== Type ===== */
h1,h2,h3{font-weight:800;line-height:1.12}
h1{font-size:clamp(2.4rem,6.5vw,4.2rem);letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(1.8rem,4.5vw,2.8rem);letter-spacing:-.015em;text-wrap:balance}
.accent{color:var(--gold-soft);font-style:normal}
.eyebrow{
  color:var(--gold);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase; /* the ONE uppercase element — everything else is sentence case */
  margin-bottom:1.2rem;
}

/* ===== Sections ===== */
.section{padding:6rem 0}
.section--graphite{
  background:var(--graphite);
  border-top:1px solid rgba(255,255,255,.045);
  border-bottom:1px solid rgba(255,255,255,.045);
}
.section__sub{
  color:var(--text-dim);
  max-width:46rem;
  margin-top:1.15rem;
  font-size:1.08rem;
}

/* Ivory — the one light section: flip every child color for readability */
.section--ivory{background:var(--ivory);color:var(--ink)}
.section--ivory .eyebrow{color:var(--gold-ivory)}
.section--ivory .section__sub{color:#514936}
.section--ivory .accent{color:var(--gold-ivory)}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  border-radius:.55rem;
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  text-decoration:none;
  padding:.78rem 1.5rem;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s,background-color .25s;
}
.btn--gold{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:var(--ink);
}
.btn--gold:hover{box-shadow:0 4px 30px rgba(var(--gold-rgb),.45);transform:translateY(-1px)}
.btn--gold:active{transform:translateY(0);box-shadow:0 2px 14px rgba(var(--gold-rgb),.35)}
.btn--ghost{border:1px solid rgba(var(--gold-soft-rgb),.4);color:var(--gold-soft)}
.btn--ghost:hover{border-color:var(--gold-soft);background:rgba(var(--gold-soft-rgb),.06)}
.btn--lg{padding:1rem 2rem;font-size:1.05rem}

/* ===== Nav ===== */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(var(--black-rgb),.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(var(--gold-soft-rgb),.12);
}
.nav__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 1.25rem;
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:1.75rem;
}
.nav__logo{display:flex;align-items:center}
/* The approved asset is a square canvas with ~23% transparent padding per side;
   render larger + pull left so the VISIBLE mark reads ~25px and sits on the grid edge.
   width AND max-width:none are both required: the global img{max-width:100%} resolves
   against this row-flex parent's content-sized width (46px img − 16px margin = 30px)
   and would clamp the image to a squished 30×46. */
.nav__logo img{width:46px;height:46px;max-width:none;display:block;margin-left:-16px}
.nav__links{display:flex;align-items:center;gap:1.9rem;margin-left:auto}
.nav__links a{
  color:var(--text-dim);
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  transition:color .2s;
}
.nav__links a:hover{color:var(--gold-soft)}
.nav__cta{padding:.55rem 1.2rem;font-size:.92rem}

/* Burger — hidden on desktop; three spans morph into an X when open */
.nav__burger{
  display:none;
  width:44px;height:44px;
  margin:-2px -8px -2px auto; /* enlarge tap target without widening the bar */
  padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:5px;
}
.nav__burger span{
  display:block;
  width:22px;height:2px;
  border-radius:2px;
  background:var(--text);
  transition:transform .25s var(--ease),opacity .2s;
}
.nav--open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav--open .nav__burger span:nth-child(2){opacity:0}
.nav--open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:759.98px){
  .nav{background:rgba(var(--black-rgb),.92)}
  .nav__inner{flex-wrap:wrap;gap:0}
  /* Keep the bar row logo+burger even when the panel rows appear below */
  .nav__logo{order:1}
  .nav__burger{order:2;display:flex}
  .nav__links{order:3}
  .nav__cta{order:4}
  /* Closed state: display:none so hidden links are NOT keyboard-focusable */
  .nav__links,.nav__cta{display:none}
  .nav--open{background:rgba(var(--black-rgb),.97);box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .nav--open .nav__links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
    margin:0;
    padding:.5rem 0 .25rem;
    border-top:1px solid rgba(var(--gold-soft-rgb),.12);
  }
  .nav--open .nav__links a{padding:.8rem .25rem;font-size:1.02rem}
  .nav--open .nav__cta{
    display:block;
    width:100%;
    text-align:center;
    margin:.5rem 0 1rem;
    padding:.85rem 1.2rem;
  }
}

/* ===== Hero ===== */
.hero{
  min-height:92vh;
  min-height:92svh;
  display:flex;
  align-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + 4.5rem) 0 4.5rem;
  background:
    radial-gradient(58rem 30rem at 50% -8rem,rgba(var(--gold-rgb),.15),transparent 65%),
    radial-gradient(42rem 24rem at 85% 110%,rgba(var(--gold-rgb),.05),transparent 60%);
}
.hero .wrap{width:100%}
.hero__sub{
  color:var(--text-dim);
  font-size:1.13rem;
  max-width:42rem;
  margin:1.5rem auto 0;
}
.hero__triple{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.35rem 1.7rem;
  margin-top:1.55rem;
  font-weight:700;
  font-size:1.04rem;
  color:var(--gold-soft);
}
.hero__actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.5rem;
}

/* ===== Quotes (bottlenecks) ===== */
.quotes{
  display:grid;
  grid-template-columns:repeat(2,1fr); /* 4 Voice-of-Customer groups → 2×2 */
  gap:2rem 1.75rem;
  margin-top:3.25rem;
}
.quotes__group h3{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--gold-soft);
  margin-bottom:1.1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.quotes__group h3::after{
  content:"";
  height:1px;flex:1;
  background:linear-gradient(90deg,rgba(var(--gold-soft-rgb),.35),transparent);
}
.quotes__group blockquote{
  background:#232220;
  border:1px solid rgba(255,255,255,.06);
  border-left:3px solid var(--gold);
  border-radius:.6rem;
  padding:1.05rem 1.2rem;
  margin:0 0 .9rem;
  font-size:.97rem;
  line-height:1.55;
  color:rgba(var(--text-rgb),.88);
}
.quotes__group blockquote:last-child{margin-bottom:0}

/* The stagnation line — the emotional centerpiece of the section */
.quotes__feature{
  margin:3.25rem auto 0;
  max-width:44rem;
  text-align:center;
  font-size:clamp(1.15rem,2.4vw,1.45rem);
  font-weight:700;
  line-height:1.5;
  color:var(--text);
  text-wrap:balance;
}
.quotes__feature::before{
  content:"";
  display:block;
  width:56px;height:2px;
  background:var(--gold);
  margin:0 auto 1.5rem;
}

/* ===== Steps (diagnosis strip + vertical variant) ===== */
.steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:3.25rem;
}
.steps li{
  border-top:1px solid rgba(var(--gold-soft-rgb),.22);
  padding-top:1.35rem;
}
.steps__num{
  display:block;
  font-size:2.1rem;
  font-weight:800;
  line-height:1;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  margin-bottom:.9rem;
}
.steps h3{font-size:1.12rem;margin-bottom:.45rem}
.steps p{color:var(--text-dim);font-size:.95rem;line-height:1.55}

/* Five-across variant (diagnosis path has 5 steps) */
.steps--five{grid-template-columns:repeat(5,1fr);gap:1.35rem}

/* Vertical variant — stacked with a gold left rail */
.steps--vertical{
  display:block;
  max-width:41rem;
  margin-top:3rem;
}
.steps--vertical li{
  border-top:0;
  position:relative;
  padding:0 0 2.4rem 4.4rem;
}
.steps--vertical li:last-child{padding-bottom:0}
.steps--vertical li::before{
  content:"";
  position:absolute;
  left:1.4rem;top:3.2rem;bottom:.35rem;
  width:1px;
  background:linear-gradient(180deg,rgba(var(--gold-soft-rgb),.3),rgba(var(--gold-soft-rgb),.08));
}
.steps--vertical li:last-child::before{display:none}
.steps--vertical .steps__num{
  position:absolute;
  left:0;top:0;
  width:2.8rem;height:2.8rem;
  display:grid;place-items:center;
  margin:0;
  font-size:1.05rem;
  color:var(--gold-soft);
  border:1px solid rgba(var(--gold-rgb),.5);
  border-radius:50%;
  background:rgba(var(--gold-rgb),.06);
}

/* ===== Capability columns (what we build) ===== */
.cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  margin-top:3.25rem;
}
.col{
  background:rgba(var(--black-rgb),.55);
  border:1px solid rgba(var(--gold-rgb),.16);
  border-radius:.9rem;
  padding:1.75rem 1.6rem;
  transition:border-color .25s;
}
.col:hover{border-color:rgba(var(--gold-rgb),.34)}
.col h3{font-size:1.22rem;line-height:1.4;margin-bottom:.3rem}
.col__kicker{color:var(--text-dim);font-size:.85rem;margin:0 0 1.05rem}
.col ul{list-style:none;margin:0}
.col li{
  position:relative;
  padding:.42rem 0 .42rem 1.5rem;
  color:rgba(var(--text-rgb),.78);
  font-size:.97rem;
  line-height:1.5;
}
.col li::before{
  content:"";
  position:absolute;
  left:0;top:1.05em;
  width:.8rem;height:2px;
  background:var(--gold);
  opacity:.65;
}

/* ===== Final CTA — the strongest gold glow on the page ===== */
.cta{
  text-align:center;
  padding:7.5rem 0 8rem;
  background:radial-gradient(46rem 28rem at 50% 42%,rgba(var(--gold-rgb),.18),transparent 68%);
}
.cta h2{max-width:46rem;margin:0 auto}
.cta .section__sub{margin:1.3rem auto 0}

/* Symptom-recognition list (approved CTA pattern: name the symptom, then invite) */
.cta__symptoms{
  list-style:none;
  max-width:34rem;
  margin:2.2rem auto 0;
  text-align:left;
  display:grid;
  gap:.7rem;
}
.cta__symptoms li{
  position:relative;
  padding-left:1.65rem;
  color:rgba(var(--text-rgb),.9);
  font-size:1.03rem;
  line-height:1.5;
}
.cta__symptoms li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:.85rem;height:2px;
  background:var(--gold);
}

/* ===== Footer ===== */
.footer{
  background:var(--graphite);
  border-top:1px solid rgba(var(--gold-soft-rgb),.1);
  padding:3rem 0 2.5rem;
}
.footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.9rem;
}
.footer__logo{height:56px;width:auto;margin-bottom:-.4rem} /* visible mark ≈ 30px (canvas has transparent padding) */
.footer__inner p{color:var(--text-dim);font-size:.95rem}
.footer__inner nav a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:.9rem;
  margin:0 .6rem;
  transition:color .2s;
}
.footer__inner nav a:hover{color:var(--gold-soft)}
.footer__copy{font-size:.8rem;color:rgba(var(--text-dim-rgb),.6)}

/* ===== Reveal (JS adds .in via IntersectionObserver) =====
   Proof-of-execution gate: the hidden baseline applies ONLY under html.js-ready,
   a class /js/main.js adds inside a try block wrapping the reveal wiring — and
   REMOVES again in its catch if that wiring throws. Only code that provably
   unhides content is allowed to hide it — a 404'd, ad-blocked or CSP-blocked
   main.js (or a mid-setup exception) leaves the page fully visible, just without
   animation. The gate is wrapped in :where() so it adds ZERO specificity:
   the unconditional .reveal.in below always wins, and browsers too old to parse
   :where() drop the hide rule entirely (fail-visible). */
:where(html.js-ready) .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
/* Load/scroll choreography: mild stagger for sibling groups.
   NOTE: nth-child counts ALL element children, not just .reveal — inserting a
   non-.reveal sibling into .hero .wrap / .quotes / .steps / .cols shifts delays. */
:where(html.js-ready) .hero .reveal:nth-child(2){transition-delay:.08s}
:where(html.js-ready) .hero .reveal:nth-child(3){transition-delay:.16s}
:where(html.js-ready) .hero .reveal:nth-child(4){transition-delay:.24s}
:where(html.js-ready) .hero .reveal:nth-child(5){transition-delay:.32s}
:where(html.js-ready) :is(.quotes__group,.steps li,.col):nth-child(2){transition-delay:.1s}
:where(html.js-ready) :is(.quotes__group,.steps li,.col):nth-child(3){transition-delay:.2s}
:where(html.js-ready) :is(.quotes__group,.steps li):nth-child(4){transition-delay:.3s}
:where(html.js-ready) .steps li:nth-child(5){transition-delay:.4s}
.reveal.in{opacity:1;transform:none}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .steps--five{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:920px){
  .quotes{grid-template-columns:1fr;gap:2.25rem}
}
@media (max-width:860px){
  .steps,.steps--five{grid-template-columns:repeat(2,1fr);gap:1.75rem 1.5rem}
  .steps--vertical{grid-template-columns:none}
  .cols{grid-template-columns:1fr}
}
@media (max-width:759.98px){
  .section{padding:4.25rem 0}
  .hero{padding:calc(var(--nav-h) + 3.5rem) 0 3.5rem}
  .cta{padding:5.5rem 0 6rem}
}
@media (max-width:480px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{text-align:center}
  .steps--vertical li{padding-left:3.9rem}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important}
}