/* ═══════════════════════════════════════════════════════════════
   BRADFORD CARLTON — "Cornerstone" design system
   Warm trusted-advisor: ivory paper, deep pine, burnished amber.
   Petrona (display serif) + Karla (humanist sans).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:      #FAF7F0;
  --paper-deep: #F2ECDF;
  --paper-card: #FFFDF8;
  --ink:        #23201A;
  --ink-soft:   #5D5546;
  --ink-faint:  #8A8171;
  --pine:       #1C4638;
  --pine-deep:  #123329;
  --pine-tint:  #E3EAE2;
  --amber:      #C4802B;
  --amber-deep: #A96A1D;
  --amber-tint: #F6E8D2;
  --line:       rgba(35, 32, 26, 0.12);
  --shadow-soft: 0 2px 24px rgba(35, 32, 26, 0.07);
  --shadow-lift: 0 12px 40px rgba(18, 51, 41, 0.14);
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain — whole-site warmth */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.42 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.font-display { font-family: 'Petrona', serif; }
.font-body    { font-family: 'Karla', sans-serif; }

h1, h2, h3, .h-display {
  font-family: 'Petrona', serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.eyebrow {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

.on-dark .eyebrow { color: #E4B36A; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark p { color: var(--paper); }
.on-dark .text-soft { color: rgba(250, 247, 240, 0.72); }

.text-soft { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 16px;
  border-radius: 999px; padding: .95rem 2rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer; text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-amber {
  background: var(--amber); color: #FFFDF8;
  box-shadow: 0 4px 18px rgba(196, 128, 43, 0.35);
}
.btn-amber:hover { background: var(--amber-deep); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(169, 106, 29, 0.4); }

.btn-pine { background: var(--pine); color: var(--paper); }
.btn-pine:hover { background: var(--pine-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-ghost {
  border: 1.5px solid var(--line); color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.on-dark .btn-ghost { border-color: rgba(250,247,240,.35); color: var(--paper); }
.on-dark .btn-ghost:hover { border-color: var(--paper); }

/* ── Cards & surfaces ────────────────────────────────────── */
.card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.section-pine { background: var(--pine); color: var(--paper); }
.section-pine-deep { background: var(--pine-deep); color: var(--paper); }
.section-paper-deep { background: var(--paper-deep); }

.rule { border-top: 1px solid var(--line); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav-shell {
  background: rgba(250, 247, 240, 0);
  transition: background .3s ease, box-shadow .3s ease;
}
.nav-shell.nav-solid {
  background: rgba(250, 247, 240, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

/* ── Reveal on scroll ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Testimonial wall ───────────────────────────────────── */
.quote-card { position: relative; }
.quote-card::before {
  content: '\201C';
  font-family: 'Petrona', serif;
  font-size: 64px; line-height: 1;
  color: var(--amber); opacity: .5;
  position: absolute; top: 14px; left: 20px;
}
.stars { color: var(--amber); letter-spacing: 2px; font-size: 14px; }

/* Client portrait treatment — unifies mixed photo styles */
.portrait {
  filter: grayscale(1) contrast(1.05) brightness(1.02) sepia(.22);
  transition: filter .35s ease;
}
.portrait:hover { filter: grayscale(0) sepia(0) contrast(1); }

/* Logo strip treatment */
.logo-tile {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: center;
  min-height: 108px;
}
.logo-tile img {
  filter: grayscale(1) opacity(.85);
  transition: filter .3s ease;
  max-width: 100%; width: auto; margin: 0 auto;
}
.logo-tile:hover img { filter: grayscale(0) opacity(1); }

/* Transparent Bradford cut-outs */
.cutout {
  filter: drop-shadow(0 18px 30px rgba(35, 32, 26, 0.28));
}
.cutout-stage {
  position: relative;
  background: radial-gradient(ellipse at 50% 88%, var(--amber-tint) 0%, transparent 65%);
}

/* Members lesson slide-over */
.lesson-panel-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(35, 32, 26, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.lesson-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(720px, 94vw);
  background: var(--paper);
  box-shadow: -20px 0 60px rgba(35, 32, 26, 0.25);
  transform: translateX(103%);
  transition: transform .35s cubic-bezier(.32,.72,.28,1);
  overflow-y: auto;
}
.lesson-open .lesson-panel { transform: none; }
.lesson-open .lesson-panel-backdrop { opacity: 1; pointer-events: auto; }
.video-slot {
  aspect-ratio: 16 / 9;
  background: var(--pine-deep);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Press row ───────────────────────────────────────────── */
.press-name {
  font-family: 'Petrona', serif;
  font-weight: 700; font-size: 20px;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero-photo-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hero-photo-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(18,51,41,0) 40%, rgba(18,51,41,.42) 100%);
}
#particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ── ROI calculator ──────────────────────────────────────── */
.roi-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--amber) var(--fill, 50%), rgba(35,32,26,.14) var(--fill, 50%));
  outline: none;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper-card);
  border: 3px solid var(--amber);
  box-shadow: 0 2px 8px rgba(35,32,26,.25);
  cursor: pointer;
}
.roi-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper-card); border: 3px solid var(--amber);
  box-shadow: 0 2px 8px rgba(35,32,26,.25); cursor: pointer;
}
.roi-number {
  font-family: 'Petrona', serif; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Quiz (bottleneck finder) ────────────────────────────── */
.quiz-option {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper-card);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.quiz-option:hover { border-color: var(--amber); transform: translateY(-1px); }
.quiz-option.selected { border-color: var(--amber); background: var(--amber-tint); }
.quiz-progress-bar { transition: width .4s ease; }

/* ── Membership tiles ────────────────────────────────────── */
.day-tile { position: relative; overflow: hidden; }
.day-tile.locked { opacity: .78; }
.tile-lock-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 12px; font-weight: 700;
  padding: .3rem .8rem; border-radius: 999px;
  background: rgba(35,32,26,.08); color: var(--ink-soft);
}
.tile-open-badge { background: var(--pine-tint); color: var(--pine); }
.countdown { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.locked-tile {
  position: relative;
  background: linear-gradient(160deg, var(--pine) 0%, var(--pine-deep) 100%);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.locked-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.locked-tile::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Count-up stat ───────────────────────────────────────── */
.stat-number {
  font-family: 'Petrona', serif; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pine);
}
.on-dark .stat-number { color: #E4B36A; }

/* ── Sticky mobile CTA ───────────────────────────────────── */
.mobile-cta-bar {
  transform: translateY(110%);
  transition: transform .35s ease;
}
.mobile-cta-bar.show { transform: none; }

/* ── Misc ────────────────────────────────────────────────── */
.checklist li { position: relative; padding-left: 2.3rem; }
.checklist li::before {
  content: '';
  position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--pine-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C4638' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.on-dark .checklist li::before {
  background-color: rgba(228,179,106,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4B36A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}