/* ============================================================
   NOTEBOOK OF A COO — LUXE DESIGN LAYER
   Editorial Luxe · warm obsidian + champagne · loaded LAST.
   Token-level + base-element refinements that elevate every
   page without rewriting bespoke layouts.
   ============================================================ */

/* ── 1. Warm obsidian + champagne + cream tokens ───────────── */
:root {
  --black:         #0A0A0C;   /* warm near-black base (was pure #000) */
  --surface:       #100F12;
  --surface-2:     #17151B;
  --card:          #161318;   /* subtly warm card */
  --white:         #FAF7F0;   /* cream-white for headings */
  --cream:         #F4F0E7;
  --text:          rgba(244,240,231,0.74);
  --text-bright:   rgba(250,247,240,0.92);
  --text-muted:    rgba(244,240,231,0.42);
  --border-subtle: rgba(244,240,231,0.08);

  --gold:          #CBA85A;   /* antique gold */
  --gold-light:    #EAC871;   /* champagne */
  --gold-dim:      rgba(203,168,90,0.10);
  --gold-border:   rgba(203,168,90,0.26);
  --gold-grad:     linear-gradient(135deg, #EAC871 0%, #C9A84C 100%);

  --ease-luxe:     cubic-bezier(0.22, 1, 0.36, 1);
  --max-w:         1180px;
}

html { background: var(--black); }

/* ── 2. Editorial typography ───────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.004em;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-weight: 600;            /* Cormorant sings at 600, not 700 */
  letter-spacing: -0.014em;
  color: var(--white);
}
h1 { line-height: 1.015; }
h2 { line-height: 1.08; }
/* editorial italic gold accent inside headlines (e.g. "missing.") */
h1 em, h2 em, .hero h1 em, .home-hero h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold-light);
}
p { line-height: 1.72; }

/* eyebrows / kickers — wide-tracked champagne */
.label, .sub, .card__eyebrow, .result-eyebrow, .result-section .sub, .frac-section .sub {
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  font-weight: 600;
}

/* hairline rule accent */
.rule { background: var(--gold-grad) !important; opacity: 0.9; }

/* ── 3. Buttons — champagne, lifted, confident ─────────────── */
.btn { letter-spacing: 0.045em; border-radius: 3px; }
.btn--gold {
  background: var(--gold-grad);
  color: #1A1206;
  border: none;
  box-shadow: 0 10px 34px -14px rgba(201,168,76,0.55);
}
.btn--gold:hover {
  background: linear-gradient(135deg, #F2D484 0%, #D6B45A 100%);
  color: #1A1206;
  transform: translateY(-2px);
  box-shadow: 0 18px 46px -14px rgba(201,168,76,0.70);
}
.btn--ghost {
  border: 1px solid rgba(244,240,231,0.22);
  color: var(--white);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: var(--gold-dim);
  transform: translateY(-2px);
}
.btn--lg { padding: 19px 42px; }

/* ── 4. Cards — warmer surface, deeper lift ────────────────── */
.card, .tcard, .type-box, .gap-item, .pricing-card, .inside-cell {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  transition: border-color 0.35s var(--ease-luxe),
              transform 0.45s var(--ease-luxe),
              box-shadow 0.45s var(--ease-luxe);
}
.card:hover, .tcard:hover, .type-box:hover, .gap-item:hover, .pricing-card:hover {
  border-color: var(--gold-border);
  transform: translateY(-5px);
  box-shadow: 0 28px 70px -34px rgba(0,0,0,0.95);
}

/* ── 5. Premium sticky nav (frosted on scroll) ─────────────── */
.nav { transition: background 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe), backdrop-filter 0.4s; }
.nav.scrolled {
  background: rgba(10,10,12,0.72);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

/* ── 6. Refined motion easing on reveals ───────────────────── */
[data-reveal] {
  transition: opacity 1.05s var(--ease-luxe), transform 1.05s var(--ease-luxe);
}

/* ── 7. Section rhythm + dividers ──────────────────────────── */
.authority-bar { background: var(--surface); }
.trap-section .pull, .pull {
  border-left-color: var(--gold) !important;
  font-family: var(--display);
  font-style: italic;
}

/* selection */
::selection { background: rgba(234,200,113,0.28); color: #FFFDF7; }

/* ── 8. Integrated hero: copy + framed media (no slapped-on bands) ── */
.home-hero .hero__inner { display:grid; grid-template-columns:1.06fr 0.94fr; gap:60px; align-items:center; }
.home-hero .hero__copy { min-width:0; }
.home-hero .hero__media {
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--gold-border);
  box-shadow:0 40px 90px -42px rgba(0,0,0,0.92);
  opacity:0; transform:translateY(22px) scale(0.985);
  transition:opacity 1.1s var(--ease-luxe), transform 1.1s var(--ease-luxe);
}
.home-hero .hero__media.in-view { opacity:1; transform:none; }
.home-hero .hero__media img { display:block; width:100%; height:auto; }
.home-hero .hero__media::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 120% at 72% 8%, transparent 52%, rgba(10,10,12,0.55)); }
@media (max-width:920px){
  .home-hero .hero__inner { grid-template-columns:1fr; gap:34px; }
  .home-hero .hero__media { max-width:560px; }
}

/* ── 9. Reusable integrated split (text + image), for other pages ── */
.luxe-split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.luxe-split--media-right .luxe-split__media { order:2; }
.luxe-split__media { position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--gold-border); box-shadow:0 40px 90px -42px rgba(0,0,0,0.9); }
.luxe-split__media img { display:block; width:100%; height:auto; }
@media (max-width:880px){ .luxe-split { grid-template-columns:1fr; gap:30px; } }

/* ── 10. Credibility stats strip (rolling counters) ───────────── */
.luxe-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border-subtle); border:1px solid var(--border-subtle);
  border-radius:10px; overflow:hidden; }
.luxe-stats__cell { background:var(--surface); padding:42px 26px; text-align:center; }
.luxe-stat-num { font-family:var(--display); font-weight:600; color:var(--gold-light);
  font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums; }
.luxe-stat-label { margin-top:14px; font-size:0.72rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--text-muted); font-weight:600; line-height:1.5; }
@media (max-width:760px){ .luxe-stats { grid-template-columns:1fr 1fr; } }

/* ── 11. Kinetic typography ───────────────────────────────────── */
.word-rotate { position:relative; display:inline-block; color:var(--gold-light);
  font-style:italic; white-space:nowrap; vertical-align:baseline; }
.word-rotate > span { display:inline-block;
  transition:opacity .55s var(--ease-luxe), transform .55s var(--ease-luxe); }
.word-rotate > span.is-out { opacity:0; transform:translateY(-0.55em); position:absolute; left:0; top:0; }
.word-rotate > span.is-in  { opacity:1; transform:none; position:relative; }
/* line-by-line headline reveal */
.line-reveal .line { display:block; overflow:hidden; }
.line-reveal .line > span { display:block; transform:translateY(110%);
  transition:transform 0.95s var(--ease-luxe); }
.line-reveal .line:nth-child(2) > span { transition-delay:0.08s; }
.line-reveal .line:nth-child(3) > span { transition-delay:0.16s; }
.line-reveal.in-view .line > span, .line-reveal.visible .line > span { transform:none; }

/* ── 12. Cinematic image reveal (clip wipe) + parallax ────────── */
.ai-feature[data-reveal], .luxe-split__media[data-reveal] {
  opacity:1 !important; transform:none !important;
  clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-luxe); }
.ai-feature[data-reveal].in-view, .ai-feature[data-reveal].visible,
.luxe-split__media[data-reveal].in-view { clip-path:inset(0 0 0 0); }
.ai-feature img, .hero__media img { will-change:transform; }

/* ── 13. Preloader (base styles; critical copy is inline in <head>) ── */
#noc-pre { position:fixed; inset:0; z-index:99999; background:var(--black);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .6s var(--ease-luxe), visibility .6s; }
#noc-pre.is-done { opacity:0; visibility:hidden; pointer-events:none; }
#noc-pre .pre-mark { font-size:0.72rem; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--gold-light); font-weight:600; margin-bottom:26px; }
#noc-pre .pre-count { font-family:var(--display); font-weight:600; color:var(--white);
  font-size:clamp(3rem,8vw,5.5rem); line-height:1; font-variant-numeric:tabular-nums; }
#noc-pre .pre-bar { margin-top:26px; width:200px; height:1px; background:rgba(244,240,231,0.14);
  position:relative; overflow:hidden; }
#noc-pre .pre-bar > span { position:absolute; inset:0 100% 0 0; background:var(--gold-grad); }
@media (prefers-reduced-motion: reduce){ #noc-pre{ display:none !important; } }

/* line-reveal headline should not also inherit the generic .reveal/[data-reveal] block slide */
.reveal.line-reveal, [data-reveal].line-reveal { opacity:1 !important; transform:none !important; }

/* preloader failsafe: auto-dismiss even if JS never runs */
#noc-pre { animation: nocPreFail 0s 3.2s forwards; }
@keyframes nocPreFail { to { opacity:0; visibility:hidden; pointer-events:none; } }