/* =====================================================
   RKT Tutoring — World-Class Redesign (Rounds 1-5)
   Fixed: section collapse, spacing, contrast, animations
   Additions: How It Works, FAQ, trust signals, phone field
   Currency clarity, favicon, social meta all included.
   ===================================================== */

/* ====== Design Tokens ====== */
:root {
  --bg-deep: #080014;
  --bg-mid: #0c0020;
  --purple-950: #1a0333;
  --purple-900: #2d1b69;
  --purple-700: #3b0764;
  --purple-600: #5b21b6;
  --purple-500: #7c3aed;
  --purple-400: #a78bfa;
  --purple-300: #c4b5fd;
  --purple-bright: #e0d3ff;
  --amber-400: #fbbf24;
  --amber-600: #d97706;
  --amber-soft: #fde68a;
  --amber-glow: rgba(251,191,36,0.15);
  --white: #ffffff;
  --white-muted: #e6dafe;
  --white-dim: rgba(240,231,255,0.65);
  --glass-bg: rgba(44,18,93,0.55);
  --glass-border: rgba(167,139,250,0.25);
  --glass-border-hover: rgba(196,181,253,0.40);
  --max-w: 1140px;
  --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --s-card: 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  --s-card-hover: 0 8px 32px rgba(109,40,217,0.30), 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  --s-glow: 0 0 60px rgba(109,40,217,0.35);
}

/* ============================================================
   CREAM EDITORIAL THEME — re-skin purple→navy/ink on cream paper.
   Overrides above so the entire page goes light/editorial.
   Token values chosen to keep .btn-glow dark-on-light (#fff text works).
   =================================================================== */
:root {
  /* Dark → cream paper surfaces */
  --bg-deep: #f6f1ea; --bg-mid: #ede7db; --purple-950: #ffffff; --purple-900: #faf8f4; --purple-700: #eee2cf;
  /* Purple/amber → navy + gold */
  --purple-600: #1b2a49; --purple-500: #1b2a49; --purple-400: #b8956a; --purple-300: #5c534b; --purple-bright: #1b2a49;
  --amber-400: #b8956a; --amber-600: #9a7a52; --amber-soft: #d4ba94; --amber-glow: rgba(184,149,106,.15);
  /* Type: light-on-dark → ink-on-cream */
  --white: #1b2a49; --white-muted: #2e2620; --white-dim: rgba(46,38,32,.72);
  /* Glass panels → soft paper cards */
  --glass-bg: rgba(255,255,255,.72); --glass-border: rgba(27,42,73,.12); --glass-border-hover: rgba(27,42,73,.24);
  /* Cream-theme named colors — defined here so !important rules in the audit section have values */
  --navy: #1b2a49; --navy-deep: #0e1a34; --gold: #b8956a; --ink-mid: #5c534b; --ink-light: #8a7e74;
}

/* Kill dark-theme glows that read like smudges on cream */
.btn-glow, .nav-cta, .card, .glass { box-shadow: 0 4px 16px rgba(27,42,73,.10) !important; }
#wordConstellation { display: none; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
html, body { background: var(--bg-deep); color: var(--white-muted); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: color .2s ease; }
img, svg { display: block; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; font-weight: inherit; }
ul { list-style: none; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2rem); }

/* ====== Scroll Progress ====== */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:200; background:rgba(8,0,20,.9); }
.scroll-progress-fill { height:100%; width:0; background:linear-gradient(90deg,var(--purple-500),var(--amber-400)); border-radius:0 2px 2px 0; transition:width .12s linear; box-shadow:0 0 8px var(--purple-400); }

/* ====== Floating CTA ====== */
.floating-cta { position:fixed; bottom:1.75rem; right:1.75rem; z-index:150; opacity:0; transform:translateY(18px); transition:opacity .35s ease,transform .35s var(--ease-out),pointer-events .3s; pointer-events:none; }
.floating-cta.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.floating-cta-btn { display:inline-flex; align-items:center; gap:.4em; padding:.7em 1.5rem; font-size:.85rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--purple-600),var(--purple-900)); border-radius:999px; text-decoration:none; box-shadow:0 4px 20px rgba(109,40,217,.45),0 8px 32px rgba(0,0,0,.3); transition:transform .2s ease,box-shadow .2s ease; }
.floating-cta-btn:hover { transform:scale(1.06) translateY(-1px); box-shadow:0 0 50px rgba(109,40,217,.5),0 12px 40px rgba(0,0,0,.35); }

/* ====== Background ====== */
.bg-layer { position:fixed; inset:0; z-index:-2; overflow:hidden; }
.bg-layer canvas { width:100%; height:100%; display:block; }
.bg-mesh { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ====== Sections — FIXED SPACING ====== */
.section { padding-block: clamp(4.5rem, 8vh, 6.5rem) clamp(3rem, 5vh, 4.5rem); position:relative; overflow:hidden; }

/* Alternating subtle backgrounds for visual rhythm — cream-safe */
.how-it-works-section { background: linear-gradient(180deg, var(--bg-deep), rgba(27,42,73,.04) 40%, rgba(27,42,73,.02) 70%, var(--bg-deep)); }
.about-section { background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(27,42,73,.06) 100%); }
.subjects-section { background: linear-gradient(180deg, var(--bg-deep), rgba(27,42,73,.05) 50%, var(--bg-deep)); }
.pricing-section { background: linear-gradient(180deg, var(--bg-deep), rgba(27,42,73,.08) 50%, var(--bg-deep)); }
.testimonials-section { background: linear-gradient(180deg, var(--bg-mid), rgba(27,42,73,.06) 50%, var(--bg-deep)); }
.faq-section { background: var(--bg-deep); }
.contact-section { background: linear-gradient(180deg, var(--bg-deep), rgba(27,42,73,.04)); }

/* ====== Eyebrow & Titles ====== */
.section-eyebrow { display:inline-block; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--purple-400); background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.22); border-radius:999px; padding:.35em 1.1em; margin-bottom:.75rem; }
.section-title { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; line-height:1.18; letter-spacing:-.03em; color:#fff; margin-bottom:1.5rem; }
.highlight-gradient { background:linear-gradient(135deg,var(--purple-bright),var(--amber-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-subtitle { font-size:clamp(.95rem,1.3vw,1.05rem); color:var(--white-dim); max-width:620px; margin:0 auto 2.5rem; line-height:1.75; text-align:center; }
.section-header { text-align:center; max-width:680px; margin:0 auto 3.5rem; }

/* ====== Fade-in (IntersectionObserver) ====== */
.fade-in { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.fade-in.is-visible { opacity:1; transform:translateY(0); }

/* ====== Header ====== */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease; border-bottom:1px solid transparent; }
.site-header.scrolled { background:rgba(8,0,20,.82); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); border-bottom-color:rgba(124,58,237,.15); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo { display:flex; align-items:baseline; gap:.1em; text-decoration:none; color:#fff; font-size:.9rem; }
.logo-rkt { font-weight:900; letter-spacing:-.04em; background:linear-gradient(135deg,var(--purple-bright),var(--amber-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo-dot { color:var(--white-dim); margin:0 .12em; }
.logo-label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; opacity:.55; }

.nav-links { display:flex; align-items:center; gap:clamp(1rem,2vw,2.2rem); }
.nav-link { font-size:.84rem; font-weight:500; color:var(--white-dim); text-decoration:none; position:relative; transition:color .2s ease; }
.nav-link::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--purple-400),transparent); transform:scaleX(0); transform-origin:right; transition:transform .25s var(--ease-out); }
.nav-link:hover, .nav-link.active { color:#fff; }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); transform-origin:left; }
.nav-cta { background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(124,58,237,.08)); border:1px solid rgba(124,58,237,.35); padding:.55em 1.3em; border-radius:var(--r); color:var(--purple-300) !important; font-weight:600; transition:all .2s ease; text-decoration:none; font-size:.84rem; }
.nav-cta:hover { background:rgba(124,58,237,.3); color:#fff !important; border-color:var(--purple-400); box-shadow:0 0 20px rgba(124,58,237,.25); }

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:.4rem; }
.hamburger-line { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease,opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

@media(max-width:860px) {
  .nav-toggle { display:flex; }
  .nav-links { position:fixed; top:68px; left:0; right:0; bottom:0; flex-direction:column; align-items:center; justify-content:center; gap:2rem; background:rgba(8,0,20,.97); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); opacity:0; transition:opacity .3s ease; pointer-events:none; }
  .nav-links.is-open { display:flex; opacity:1; pointer-events:auto; }
}

/* ====== Buttons ====== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; letter-spacing:-.01em; padding:.82em 2em; font-size:.92rem; font-weight:600; border-radius:var(--r); text-decoration:none; transition:all .2s var(--ease-out); }
.btn-full { width:100%; }
.btn-glow { color:#fff; background:linear-gradient(135deg,var(--purple-600),var(--purple-900)); box-shadow:0 4px 20px rgba(109,40,217,.4),0 6px 24px rgba(0,0,0,.3); }
.btn-glow:hover { transform:translateY(-2px); box-shadow:0 0 50px rgba(109,40,217,.5),0 8px 28px rgba(0,0,0,.35); }
.btn-ghost { background:transparent; color:var(--purple-300); border:1px solid var(--glass-border); }
.btn-ghost:hover { background:rgba(124,58,237,.1); border-color:var(--glass-border-hover); transform:translateY(-1px); }
.btn-outline-full { display:flex; justify-content:center; width:100%; color:var(--purple-300); border:1.5px solid var(--glass-border); background:rgba(44,18,93,.35); }
.btn-outline-full:hover { border-color:var(--purple-400); background:rgba(124,58,237,.12); transform:translateY(-1px); }

/* ====== HERO ====== */
.hero { min-height:clamp(75vh,95vh,100vh); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; position:relative; padding-inline:1.25rem; }

/* Fix hero title descender clipping: explicit line-height 1.3 so ratio = 1.3 */
.hero-title, .hero-title span { line-height: 1.3 !important; }
#wordConstellation { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.7; }
/* Fix hero overlay overlap with fixed header and restore layout properties */
.hero-overlay { padding-top: clamp(7.5rem, 12vh, 7rem); padding-bottom:clamp(3rem,6vh,4.5rem); position:relative; z-index:2; max-width:820px; margin:0 auto; }

.hero-eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.32em; color:var(--purple-400); margin-bottom:1.6rem; opacity:.8; }
.hero-title { font-size:clamp(2.6rem,7vw,5.2rem); font-weight:900; line-height:1.18; letter-spacing:-.035em; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35),0 0 20px rgba(109,40,217,.25); margin-bottom:1.4rem; }
.hero-highlight { background:linear-gradient(135deg,var(--purple-bright),var(--amber-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 2px 10px rgba(109,40,217,.4)); }
.hero-desc { color:rgba(240,231,255,.82) !important; max-width:640px; margin:0 auto 2.2rem; line-height:1.8; font-size:clamp(.95rem,1.3vw,1.1rem); }
.hero-desc strong { color:var(--purple-300); }

/* Trust badges row */
.hero-trust { display:flex; align-items:center; justify-content:center; gap:.7em; flex-wrap:wrap; margin-bottom:2.5rem; margin-left:-.4em; margin-right:-.4em; }
.trust-badge { display:inline-flex; align-items:center; gap:.35em; padding:.45em .9em; border-radius:999px; background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.18); font-size:.78rem; font-weight:600; color:var(--purple-300); }
.tb-icon { font-size:.95em; line-height:1; }
.trust-divider { width:1px; height:20px; background:rgba(124,58,237,.5); border-radius:1px; box-shadow:0 0 4px rgba(124,58,237,.3); }

.hero-actions { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }

/* ====== How It Works ====== */
.how-steps { display:grid; grid-template-columns:1fr; gap:1.2rem; max-width:960px; margin:0 auto; }
@media(min-width:640px) { .how-steps { grid-template-columns:repeat(2,1fr); } }
@media(min-width:880px) { .how-steps { grid-template-columns:repeat(4,1fr); gap:1.5rem; } }

.hiw-step { text-align:center; padding:2rem 1.2rem 2.2rem; border-radius:var(--r-lg); background:rgba(44,18,93,.35); border:1px solid rgba(124,58,237,.12); transition:all .3s var(--ease-out); }
.hiw-step:hover { border-color:rgba(124,58,237,.3); background:rgba(44,18,93,.55); transform:translateY(-4px); box-shadow:0 8px 30px rgba(109,40,217,.15); }
.hiw-number { width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; font-size:.9rem; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--purple-600),var(--purple-900)); border-radius:50%; box-shadow:0 4px 16px rgba(109,40,217,.4); }
.hiw-step h3 { font-size:1.08rem; font-weight:700; color:#fff; margin-bottom:.6rem; letter-spacing:-.015em; }
.hiw-step p { font-size:.88rem; color:var(--white-dim); line-height:1.65; max-width:260px; margin:0 auto; }

/* About grid */
@media(min-width:900px) { .about-grid { grid-template-columns:420px 1fr; gap:3rem; align-items:start; } }
.about-intro { max-width:700px; margin:0 auto 3rem; text-align:center; }

/* Headshot */
.about-visual-col { perspective:900px; }
.headshot-frame { position:relative; width:100%; max-width:420px; margin:0 auto; }
.headshot-placeholder { aspect-ratio:4/5; border-radius:var(--r-xl); background:linear-gradient(160deg,rgba(93,38,217,.2),rgba(44,18,93,.5)); border:1.5px dashed rgba(167,139,250,.2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; position:relative; overflow:hidden; z-index:1; }
.headshot-placeholder svg { opacity:.4; }
.headshot-label { font-size:.75rem; color:var(--purple-400); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.headshot-glow { position:absolute; bottom:-10%; right:-8%; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(167,139,250,.2),transparent 65%); pointer-events:none; z-index:0; }

.about-text { font-size:1rem; color:var(--white-muted); margin-bottom:1.1rem; line-height:1.8; text-align:justify; hyphens:auto; }
.text-glow { color:var(--purple-bright); font-weight:600; filter:drop-shadow(0 0 6px rgba(109,40,217,.3)); }

.bio-badges { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin-top:1.8rem; }
.bio-badge { display:flex; align-items:center; gap:.75rem; min-height:68px; padding:1rem 1.1rem; border-radius:var(--r); background:rgba(26,3,51,.7); border:1px solid rgba(124,58,237,.18); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:all .25s var(--ease-out); box-shadow:var(--s-card); }
.bio-badge:hover { border-color:var(--glass-border-hover); background:rgba(44,18,93,.6); transform:translateY(-2px); box-shadow:var(--s-card-hover); }
.bb-icon { font-size:1.25rem; line-height:1.2; flex-shrink:0; margin-top:.05em; }
.bb-info strong { font-size:.82rem; color:#fff; font-weight:700; display:block; margin-bottom:.1rem; }
.bb-info span { font-size:.74rem; color:var(--white-dim); line-height:1.35; display:block; }
@media(max-width:480px) { .bio-badges{ grid-template-columns:1fr; } }

/* ====== Subjects ====== */
.subjects-stack { display:grid; gap:1.2rem; max-width:960px; margin:0 auto 1rem; }
@media(min-width:760px) { .subjects-stack { grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.sub-card { position:relative; border-radius:var(--r-lg); overflow:hidden; background:rgba(44,18,93,.45); border:1px solid rgba(124,58,237,.14); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); transition:all .3s var(--ease-out); box-shadow:var(--s-card); }
.sub-card:hover { border-color:rgba(167,139,250,.45); background:rgba(44,18,93,.65); transform:translateY(-5px); box-shadow:var(--s-card-hover); }
.sub-card-accent { position:absolute; top:-15%; right:-18%; width:160px; height:240px; border-radius:50%; background:radial-gradient(ellipse,rgba(124,58,237,.18),transparent 65%); pointer-events:none; }
.sub-card-content { position:relative; z-index:1; padding:2.2rem; display:flex; flex-direction:column; gap:.8rem; flex:1; min-height:100%; }
.sub-tag { font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--purple-400); padding:.25em .75em; background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.16); border-radius:999px; display:inline-block; margin-bottom:.2rem; width:fit-content; }
.sub-card-content h3 { font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-.02em; }
.sub-desc { font-size:.87rem; color:var(--white-muted); line-height:1.65; }
.sub-topics li { position:relative; padding-left:1.3em; margin-bottom:.35rem; font-size:.84rem; color:var(--white-dim); line-height:1.55; }
.sub-topics li::before { content:'→'; position:absolute; left:.1em; top:0; color:var(--purple-400); font-weight:600; }
.sub-badge-row { display:flex; gap:.32rem; flex-wrap:wrap; margin-top:auto; padding-top:.8rem; border-top:1px solid rgba(124,58,237,.1); }
.sub-badge-row span { font-size:.68rem; font-weight:600; padding:.25em .65em; border-radius:999px; background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.14); color:var(--purple-300); white-space:nowrap; }
.sub-texts { font-size:.79rem; color:var(--white-dim); line-height:1.7; margin-top:.3rem; padding:.6rem .8rem; background:rgba(12,2,30,.45); border-radius:8px; border-left:2px solid rgba(124,58,237,.35); }
.sub-texts strong { color:var(--purple-300); }
.sub-exam-board { font-size:.72rem; color:rgba(240,231,255,.45); font-style:italic; margin-top:.4rem; line-height:1.5; }

/* ====== Pricing ====== */
.pricing-grid { display:grid; gap:1.5rem; max-width:960px; margin:0 auto 3rem; }
@media(min-width:780px) { .pricing-grid { grid-template-columns:repeat(3,1fr); gap:1.8rem; align-items:stretch; } }

.price-card { border-radius:var(--r-xl); overflow:hidden; background:rgba(44,18,93,.4); border:1px solid rgba(124,58,237,.14); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); transition:all .3s var(--ease-out); box-shadow:var(--s-card); display:flex; flex-direction:column; }
.price-card:hover { transform:translateY(-5px); border-color:rgba(167,139,250,.4); box-shadow:var(--s-card-hover); }

.price-card.price-featured { overflow:visible; /* Allow ribbon to show above card border */ }

.price-card-inner { padding:2.2rem 2.2rem 1.8rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.price-label { font-size:.82rem; font-weight:600; color:var(--purple-400); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }

.price-currency-wrap, .price-amount-wrap { display:flex; align-items:baseline; gap:.12em; margin-bottom:.25rem; }
.price-currency { font-size:1.1rem; font-weight:700; color:var(--purple-400); opacity:.8; }
.price-amount { font-size:clamp(2.5rem,4vw,3.4rem); font-weight:900; line-height:1; background:linear-gradient(135deg,var(--purple-bright),var(--amber-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.price-period { font-size:.82rem; color:var(--white-dim); }

.price-desc { font-size:.86rem; color:var(--white-muted); line-height:1.65; margin-bottom:.5rem; }
.price-features { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.8rem; flex:1; }
.price-features li { position:relative; padding-left:2em; font-size:.84rem; color:var(--white-dim); line-height:1.55; }
.pf-ok { position:absolute; left:.3em; top:-1px; color:var(--purple-400); font-weight:700; font-size:1em; }

/* Push the booking button to the bottom of each price card — HTML has no .price-card-inner wrapper, so target last child directly */
.price-card > .btn:last-child { margin-top: auto; }

/* Ribbon */
.price-ribbon { display:inline-block; padding:.5em 1.3em; background:linear-gradient(135deg,var(--purple-600),var(--purple-900)); color:#fff; font-size:.7rem; font-weight:700; border-radius:999px 999px 4px 4px; box-shadow:0 -2px 8px rgba(109,40,217,.4); text-align:center; margin:-0.6em auto .3em; letter-spacing:.04em; position:relative; z-index:2; }

/* Featured card (Best Value) — calm, not pulsing */
.price-card.price-featured { border-color:rgba(251,191,36,.3); background:linear-gradient(168deg,rgba(124,58,237,.18) 0%,rgba(44,18,93,.65) 50%,rgba(44,18,93,.5) 100%); box-shadow:0 0 60px rgba(109,40,217,.2),0 4px 24px rgba(0,0,0,.35); }
.price-card.price-featured:hover { border-color:rgba(251,191,36,.5); box-shadow:0 0 80px rgba(109,40,217,.25),0 8px 32px rgba(0,0,0,.4); }
.price-card.price-featured .price-currency-wrap,
.price-card.price-featured .price-amount { font-size:clamp(2.6rem,4.2vw,3.6rem); }

/* Savings callout */
.price-calc { font-size:.82rem; color:var(--amber-soft); margin-top:auto; padding:.7em 1.1rem; background:rgba(251,191,36,.06); border-left:3px solid var(--amber-400); border-radius:0 var(--r) var(--r) 0; }
.price-calc strong { color:var(--amber-soft); font-weight:800; }

/* Bottom note */
.pricing-note { text-align:center; margin-top:2.5rem; padding:1.6rem 2.5rem; border-radius:var(--r-lg); background:rgba(44,48,70,.08); border:1px solid rgba(27,42,73,.1); max-width:600px; margin-left:auto; margin-right:auto; }
.pricing-note p { font-size:.92rem; color:var(--white-muted); margin-bottom:.7rem; line-height:1.65; }
.pricing-note > .btn { }

/* ====== Testimonials ====== */
.testimonials-grid { display:grid; gap:1.3rem; max-width:960px; margin:0 auto; }
@media(min-width:720px) { .testimonials-grid { grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.test-card { padding:2.4rem 2.1rem 2rem; border-radius:var(--r-lg); background:#fff; border:1px solid rgba(27,42,73,.08); backdrop-filter:blur(10px) saturate(110%); -webkit-backdrop-filter:blur(10px) saturate(110%); transition:all .3s var(--ease-out); box-shadow:0 1px 4px rgba(27,42,73,.08),inset 0 1px 0 rgba(27,42,73,.04); display:flex; flex-direction:column; min-height:340px; position:relative; }
.test-card:hover { border-color:rgba(184,149,106,.35); transform:translateY(-4px); box-shadow:0 4px 16px rgba(27,42,73,.12),0 2px 8px rgba(27,42,73,.05),inset 0 1px 0 rgba(255,255,255,.6); }
.test-card::before { content:''; position:absolute; top:0; left:clamp(.5rem,8%,1.5rem) right:clamp(.5rem,8%,1.5rem) height:3px; border-radius:0 0 2px 2px; background:linear-gradient(90deg,var(--gold),rgba(184,149,106,.7)); }
.test-stars { font-size:.96rem; margin-bottom:1.1rem; letter-spacing:.28em; color:var(--amber-600) !important; position:relative; z-index:1; min-height:1.5em; font-weight:700; opacity:.85; }
.test-text { font-size:.96rem !important; color:var(--ink-mid) !important; line-height:1.72; margin-bottom:auto; position:relative; z-index:1; font-weight:400; }
.test-text strong { color:var(--navy-deep); font-weight:600; }
.test-meta { border-top:1px solid rgba(27,42,73,.1) !important; padding-top:.8rem; margin-top:auto; position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; flex-shrink:0; min-height:2.6em; }
.test-meta strong { font-size:.85rem !important; color:var(--navy) !important; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.test-meta span { font-size:.58rem !important; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-light) !important; opacity:.75 !important; }

.test-primary { border-color:rgba(251,191,36,.3) !important; background:linear-gradient(168deg,rgba(251,191,36,.07),rgba(30,8,65,.92)); box-shadow:0 2px 20px rgba(251,191,36,.1),inset 0 1px 0 rgba(251,191,36,.05); }
.test-primary::before { background:linear-gradient(90deg,var(--amber-400),var(--amber-soft)); opacity:.8; }

/* ====== FAQ Accordion ====== */
.faq-list { max-width:740px; margin:0 auto 1rem; display:flex; flex-direction:column; gap:.65rem; }
.faq-item { border-radius:var(--r-lg); border:1.5px solid rgba(124,58,237,.3); background:rgba(30,10,68,.94); overflow:hidden; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease; backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); box-shadow:0 2px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(167,139,250,.08); }
.faq-item[open] { border-color:rgba(167,139,250,.55) !important; background:rgba(44,18,93,.96); box-shadow:0 2px 16px rgba(109,40,217,.2),0 2px 12px rgba(0,0,0,.45); }
.faq-question { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:1.1em 1.35em; font-size:.97rem; color:#f0eaff !important; cursor:pointer; transition:background .2s ease,color .2s ease; user-select:none; -webkit-user-select:none; width:100%; text-align:left; letter-spacing:-.01em; line-height:1.5; font-weight:600; }
.faq-question:hover { background:rgba(124,58,237,.1); color:#fff !important; }
@media(min-width:780px) { .faq-question { font-size:1.02rem; padding:1.1em 1.45em; } }
.faq-chevron { font-size:.9rem; flex-shrink:0; transition:transform .25s var(--ease-out); color:#c4b5fd !important; opacity:.8 !important; margin-left:.3em; }
.faq-item[open] .faq-chevron { transform:rotate(180deg); opacity:1 !important; color:#fff !important; }
.faq-answer { padding:0 1.35em 1.2em; font-size:.94rem; color:#d8cee6 !important; line-height:1.72; overflow:hidden; animation:faqIn .25s var(--ease-out); }
.faq-answer p { margin-bottom:.3em; }
@media(min-width:780px) { .faq-answer { padding:0 1.4em 1.3em; font-size:.98rem; } }

@keyframes faqIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
:focus-visible { outline:2px solid var(--purple-400); outline-offset:2px; border-radius:4px; }

/* ====== Contact Split ====== */
.contact-split { display:grid; gap:3rem; grid-template-columns:1fr; max-width:1060px; margin:0 auto; }
@media(min-width:780px) { .contact-split { grid-template-columns:420px 1fr; } }

.contact-info-col .section-title { text-align:left; }
.contact-desc { font-size:.95rem; color:var(--white-dim); margin-bottom:2.2rem; line-height:1.65; max-width:380px; }
.contact-cards { display:flex; flex-direction:column; gap:.8rem; }
.cp-card { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-radius:var(--r); background:rgba(44,18,93,.45); border:1px solid rgba(124,58,237,.12); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); transition:all .2s var(--ease-out); text-decoration:none; color:#fff; }
.cp-card:hover { border-color:var(--glass-border-hover); transform:translateX(3px); box-shadow:var(--s-card-hover); }
.cp-icon { font-size:1.15rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--r); background:rgba(124,58,237,.12); flex-shrink:0; }
.cp-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cp-label { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--white-dim); opacity:.7; }
.cp-val { font-size:.88rem; color:var(--purple-300); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.contact-form-col { margin-top:2.5rem; max-width:100%; }
@media(min-width:780px) { .contact-form-col { margin-top:0; } }

/* ====== Contact Form ====== */
.contact-form { padding:2rem 2rem 1.6rem; border-radius:var(--r-xl); background:rgba(44,18,93,.45); border:1px solid rgba(124,58,237,.14); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); box-shadow:var(--s-card-hover); }
.form-row { display:grid; gap:.9rem; margin-bottom:0; }
@media(max-width:560px) { .form-row { grid-template-columns:1fr; gap:.9rem; } }

.form-group { max-width:100%; width:100%; margin-bottom:1.1rem; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--purple-400); margin-bottom:.45rem; letter-spacing:.02em; }

.contact-form input, .contact-form textarea, .contact-form select { width:100%; max-width:100%; padding:.78em 1em; background:rgba(12,2,30,.65); border:1.5px solid rgba(124,58,237,.18); border-radius:var(--r); color:#fff; font-size:.92rem; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:rgba(240,231,255,.35); }
.contact-form select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23a78bfa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/=%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 1em) center; padding-right:2.4em; }
.contact-form select option { background:#1a0333; color:#fff; }

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline:none; border-color:var(--purple-400); box-shadow:0 0 0 3px rgba(124,58,237,.13); background:rgba(44,18,93,.55); }

form .btn { margin-top:.4rem; }
.form-note { text-align:center; font-size:.68rem; color:var(--white-dim); margin-top:1rem; line-height:1.45; }

/* ====== Footer ====== */
.site-footer { background:rgba(5,0,14,.92); border-top:1px solid rgba(124,58,237,.12); padding:3rem 0 2.5rem; margin-top:1rem; }
.footer-inner { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.footer-logo { color:inherit; font-size:.88rem; }
.fl-rkt { font-weight:900; background:linear-gradient(135deg,var(--purple-bright),var(--amber-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fl-dot { color:var(--white-dim); margin:0 .1em; font-size:.9rem; }
.fl-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; opacity:.5; }
.footer-desc { font-size:.78rem; letter-spacing:.08em; color:var(--purple-300); opacity:.65; }
.footer-nav { display:flex; gap:clamp(.9rem,3vw,1.8rem); flex-wrap:wrap; justify-content:center; }
.footer-nav a { font-size:.84rem; color:var(--white-dim); font-weight:500; }
.footer-nav a:hover { color:var(--purple-400); }
/* Fix footer text readability — effective sizes need >=10px (fontSize × opacity) */
.footer-copy { font-size:.9rem !important; color:var(--white-muted) !important; opacity:.75 !important; letter-spacing:.06em; }
.footer-desc { font-size:.84rem !important; color:var(--purple-300) !important; opacity:.8 !important; letter-spacing:.05em; }

/* ====== Modal ====== */
.modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.modal.is-active { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(8,0,20,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal-content { position:relative; background:linear-gradient(172deg,rgba(44,18,93,.95),rgba(12,2,30,.95)); border:1px solid var(--glass-border-hover); border-radius:var(--r-xl); padding:2.5rem 2.2rem; max-width:380px; width:calc(100% - 2rem); text-align:center; box-shadow:0 0 80px rgba(109,40,217,.25),var(--s-card-hover); animation:modalIn .3s var(--ease-out); }
@keyframes modalIn { from { transform:scale(.93) translateY(16px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }
.modal-icon { margin:0 auto .9rem; display:flex; justify-content:center; }
.modal-title { font-size:1.25rem; font-weight:800; color:#fff; margin-bottom:.4rem; }
.modal-text { font-size:.86rem; color:var(--white-muted); margin-bottom:1.3rem; line-height:1.55; }

/* ====== Accessibility & Perf ====== */
@media(prefers-reduced-motion:reduce) {
  .fade-in, .hiw-step, .sub-card, .price-card, .test-card, .bio-badge, .cp-card, .btn, .nav-link::after, .scroll-progress-fill, .floating-cta { transition:none !important; animation:none !important; }
  .scroll-progress-fill { width:100% !important; background:var(--amber-400); }
  * { opacity:1 !important; transform:none !important; }
}

/* ====== Selection ====== */
::selection { background:rgba(124,58,237,.35); color:#fff; }

/* ====== Scrollbar ====== */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg-deep); }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,.35); border-radius:9px; }
::-webkit-scrollbar-thumb:hover { background:rgba(124,58,237,.55); }

/* ============================================================
   CREAM EDITORIAL THEME FIXES — 2026-08-03 audit
   Light paper background; navy/ink text; all missing HTML-class styles.
   ============================================================ */

html, body { background: var(--bg-deep) !important; color: var(--white-muted) !important; }

/* Headings, labels on cream: dark ink instead of white */
.section-title, .hiw-step h3, .bb-info strong, .gradient-text,
.hero-title, .hero-title span, .sub-card-content h3, .cp-card, .cp-card *,
.faq-question { color: var(--navy) !important; }

/* Nav hover state on cream */
.nav-link:hover, .nav-link.active { color: var(--gold) !important; }
.hamburger-line { background: var(--navy) !important; }

/* Hero text overrides for light bg + hero-overlay positioning tweak */
.hero-title { color: var(--navy) !important; text-shadow: none !important; }
.hero-desc { color: var(--ink-mid) !important; }

/* Eyebrow labels: navy on cream tint */
.section-eyebrow, .hero-eyebrow { color: var(--navy) !important; background: rgba(184,149,106,.12) !important; }

/* Sub tags / badges → gold accent */
.sub-tag { color: var(--gold) !important; border-color: rgba(184,149,106,.35) !important; }

/* FAQ on cream cards */
.faq-question { color: #2e2620 !important; font-weight: 600 !important; cursor: pointer !important; }
.faq-item { background: #f6f1ea !important; border-color: rgba(27,42,73,.18) !important; box-shadow: none !important; }
.faq-answer p { color: var(--ink-mid) !important; margin-bottom: .3em !important; font-weight: 400 !important; font-size: .95rem !important; line-height: 1.72 !important; letter-spacing: -.01em !important; }

/* Pricing inner elements — no styles existed before */
.price-row { display: flex; align-items: baseline; gap: .15em; line-height: 1; margin-bottom: .3rem; }
.price-val { font-size: clamp(2.5rem,4vw,3.4rem); font-weight: 900; background: linear-gradient(135deg,var(--purple-600),var(--navy-deep)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.price-unit { font-size: .82rem; color: var(--ink-light); }
.price-list { padding-left: 0; margin-bottom: .8rem; flex: 1; }
.price-savings { font-size: .84rem; color: var(--gold); font-style: italic; text-align: center; margin-top: .6rem; padding: .6em 1em; background: rgba(184,149,106,.08); border-radius: 8px; }

/* Subject card sub-badges (Y10 Y11 GCSE pill row) — no styles existed */
.sub-badges { display: flex; gap: .32rem; flex-wrap: wrap; margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(27,42,73,.08); }
.sub-badges span { font-size: .68rem; font-weight: 600; padding: .25em .65em; border-radius: 999px; background: rgba(184,149,106,.12); border: 1px solid rgba(184,149,106,.2); color: var(--navy-deep); white-space: nowrap; }

/* Sub-card topics list — → arrows, consistent spacing */
.sub-topics li { padding-left: 1.3em !important; position: relative; margin-bottom: .35rem; font-size: .84rem; color: var(--ink-mid) !important; line-height: 1.55; }
.sub-topics li::before { content: "→" !important; position: absolute !important; left: .1em; top: 0; color: var(--gold) !important; font-weight: 600 !important; }

/* Contact form helpers (were bare HTML elements, no CSS at all) */
.form-row.double-half { grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: 0; }
@media(max-width:560px) { .form-row.double-half { grid-template-columns: 1fr; } }
.form-group.full-width textarea,
.form-group.full-width input,
.form-group.full-width select { width: 100%; max-width: 100%; }

/* Footer tagline */
.footer-tagline { font-size: .7rem; color: var(--ink-light); letter-spacing: .06em; opacity: .65; font-weight: 400; margin: 0; line-height: 1.5; }

/* About text section wrapper */
.about-text-section { margin-top: 2rem; max-width: 780px; margin-left: auto; margin-right: auto; }

/* ============================================================
   LIT-DENSITY SECTION — torn-paper quotes between Subjects and Pricing.
   This section existed in HTML (class="lit-densities") with ZERO CSS.
   ============================================================ */
.lit-densities { padding: 3rem 0; background: linear-gradient(180deg, transparent, rgba(184,149,106,.04), transparent); }
.densities-wrapper { display: flex; align-items: stretch; gap: 1.5rem; max-width: 1100px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.dens-note { flex: 0 0 30%; min-width: 240px; background: linear-gradient(160deg, rgba(253,250,245,.9), rgba(241,233,220,.9)); border: 1px solid rgba(27,42,73,.08); border-radius: 2px; padding: 1.6rem 1.2rem 1.2rem; box-shadow: 0 10px 35px rgba(27,42,73,.08); display: flex; flex-direction: column; gap: .4rem; }
.dens-note blockquote { font-family: 'Cormorant Garamond', Georgia, serif; font-size: .96rem; font-style: italic; line-height: 1.55; color: var(--navy) !important; margin: 0; }
.dens-note cite { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-size: .54rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold) !important; margin-top: .3rem; }
.note-outer.left { transform: rotate(-1deg); background: linear-gradient(160deg, #faf3ea, #e9d9d2); }
.note-outer.right { transform: rotate(.8deg); background: linear-gradient(160deg, #f4f0ea, #ece2d5); }
.dens-centre,
.dens-center { flex: 0 0 32%; min-width: 260px; text-align: center; padding: 1.5rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: .4rem; background: linear-gradient(180deg,transparent,rgba(184,149,106,.04)); }
.dens-centre p, .dens-center p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.35rem; line-height: 1.35; color: var(--navy) !important; margin: 0; }
.dens-attr { font-family: 'Inter', sans-serif; font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: .7; }
@media(max-width:900px) {
  .densities-wrapper { flex-direction: column; align-items: center; }
  .dens-note, .dens-centre, .dens-center { flex: 0 0 auto; width: 100%; max-width: 480px; transform: none !important; }
}

/* Hero torn-paper notes (old hero variant — <div class="hero-notes"> with .torn-note inside) */
.hero-notes { display: flex; gap: .8rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.torn-note { position: relative; width: 170px; padding: 1.2rem 1rem 1.4rem; background: linear-gradient(165deg,#faf8f3,#f3eade); border: 1px solid rgba(27,42,73,.07); border-radius: 2px; box-shadow: 0 6px 20px rgba(27,42,73,.09); }
.torn-note::before { content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:60%; height:3px; background:linear-gradient(90deg,transparent,rgba(184,149,106,.5),transparent); }
.note-pin { display:block; width:8px; height:8px; border-radius:50%; margin:0 auto .6rem; background:var(--gold); opacity:.7; box-shadow:0 1px 3px rgba(27,42,73,.15); }
.note-1 { transform:rotate(-2.5deg); }
.note-2 { transform:rotate(1.8deg); }
.note-3 { transform:rotate(-1.1deg); background:linear-gradient(165deg,#f8f3ea,#ede4d2); }
.note-pin.gem::after { content:'✦'; font-size:.6rem; line-height:1; color:var(--gold); }

/* Lit-note cards (lit-1, lit-2, lit-3) — slight rotations for torn-paper feel */
.lit-1 { transform: rotate(-1.4deg); }
.lit-2 { transform: rotate(.9deg); background: linear-gradient(155deg,#faf3ea,#ece0d2); }
.lit-3 { transform: rotate(-.6deg); }
@media(max-width:900px) { .lit-1, .lit-2, .lit-3 { transform: none !important; } }

/* ============================================================
   CREAM-THEME OVERRIDES — these elements had inline dark rgba() backgrounds, not CSS var references.
   Cream theme needs light surfaces on cream paper.
   ============================================================ */

/* Price card dark background override */
.price-card { border-color:rgba(27,42,73,.1) !important; background:#fff !important; }
.price-card:hover { border-color:rgba(184,149,106,.3) !important; box-shadow:0 4px 18px rgba(27,42,73,.1) !important; }

/* Featured price card cream override */
.price-card.price-featured { border-color: var(--gold) !important; background:#fff !important; background-image:none !important; box-shadow:0 0 30px rgba(184,149,106,.12),0 4px 18px rgba(27,42,73,.08) !important; }
.price-card.price-featured:hover { border-color:rgba(184,149,106,.5) !important; box-shadow:0 0 40px rgba(184,149,106,.18),0 8px 24px rgba(27,42,73,.1) !important; }

/* Price ribbon dark → gold */
.price-ribbon { background:linear-gradient(135deg,var(--gold),var(--amber-600)) !important; box-shadow:0 -2px 8px rgba(184,149,106,.25) !important; color:#fff !important; }

/* Sub-card dark background override */
.sub-card { border-color:rgba(27,42,73,.08) !important; background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 1px 4px rgba(27,42,73,.06),inset 0 1px 0 rgba(27,42,73,.04) !important; }
.sub-card:hover { border-color:rgba(184,149,106,.35) !important; background:#fff !important; box-shadow:0 4px 16px rgba(27,42,73,.1),inset 0 1px 0 rgba(27,42,73,.06) !important; }
.sub-card-accent { display:none !important; }

/* Sub-card topic list override */
.sub-topics li { color:var(--ink-mid) !important; }
.sub-topics li::before { color:var(--gold) !important; }

/* Sub-texts dark background override */
.sub-texts { background:rgba(246,241,234,.7) !important; border-left-color:var(--gold) !important; }
.sub-texts strong { color:var(--navy-deep) !important; }

/* Sub-badge-row / sub-badges pill colors */
.sub-badge-row span, .sub-badges span { background:rgba(184,149,106,.12) !important; border-color:rgba(184,149,106,.25) !important; color:var(--navy-deep) !important; }

/* FAQ accordion dark-background overrides */
.faq-item { background:#fff !important; border-color:rgba(27,42,73,.12) !important; box-shadow:0 1px 4px rgba(27,42,73,.06) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.faq-item[open] { border-color:rgba(184,149,106,.4) !important; background:#fff !important; box-shadow:0 2px 12px rgba(27,42,73,.1) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.faq-question { color:var(--navy) !important; border-radius:var(--r-lg); }
.faq-question:hover { background:rgba(184,149,106,.06) !important; color:var(--navy-deep) !important; }
.faq-chevron { color:var(--gold) !important; opacity:.7 !important; }
.faq-item[open] .faq-chevron { color:var(--amber-600) !important; }
.faq-answer { background:#fff !important; color:var(--ink-mid) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.faq-answer p { margin-bottom:.3em; color:var(--ink-mid) !important; }

/* Hiw-step dark background override */
.hiw-step { background:#fff !important; border-color:rgba(27,42,73,.08) !important; box-shadow:0 1px 4px rgba(27,42,73,.06); }
.hiw-step:hover { border-color:rgba(184,149,106,.3) !important; background:#fff !important; box-shadow:0 4px 16px rgba(27,42,73,.1) }

/* Bio-badge dark background override */
.bio-badge { background:#fff !important; border-color:rgba(27,42,73,.08) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 1px 4px rgba(27,42,73,.06); }
.bio-badge:hover { border-color:rgba(184,149,106,.3) !important; background:#fff !important; box-shadow:0 4px 12px rgba(27,42,73,.1) }

/* Pricing-note dark background override */
.pricing-note { border-color:rgba(27,42,73,.1) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.pricing-note p { color:var(--ink-mid) !important; }

/* Contact form dark background override */
.contact-form { background:#fff !important; border-color:rgba(27,42,73,.1) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 1px 4px rgba(27,42,73,.06); }
.contact-form input, .contact-form textarea, .contact-form select { background:#f6f1ea !important; border-color:rgba(27,42,73,.15) !important; color:var(--navy-deep) !important; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:var(--ink-light) !important; }
.contact-form select option { background:#fff !important; color:var(--navy-deep) !important; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(184,149,106,.15) !important; background:#faf8f4 !important; }
.form-label { color:var(--navy-deep) !important; }

/* Contact card dark-background override */
.cp-card { background:#fff !important; border-color:rgba(27,42,73,.08) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 1px 4px rgba(27,42,73,.06); color:var(--navy-deep) !important; }
.cp-card:hover { border-color:rgba(184,149,106,.3) !important; background:#faf8f4 !important; box-shadow:0 3px 12px rgba(27,42,73,.1); }
.cp-icon { background:rgba(184,149,106,.12) !important; color:var(--navy-deep) !important; }
.cp-label { color:var(--ink-light) !important; opacity:.75 !important; }
.cp-val { color:var(--navy-deep) !important; }

/* Scroll progress bar cream override */
.scroll-progress-fill { background:linear-gradient(90deg,var(--gold),rgba(184,149,106,.7)) !important; box-shadow:none !important; }

/* Footer dark-background override */
.site-footer { background:#fff !important; border-top-color:rgba(27,42,73,.08) !important; margin-top:3rem !important; padding:2.5rem 0 2rem !important; color:var(--ink-mid) !important; }
.footer-inner { gap:1.2rem !important; }
.footer-nav a { color:var(--ink-mid) !important; opacity:.7; font-weight:400; }
.footer-nav a:hover { color:var(--gold) !important; opacity:1; }
.footer-tagline { color:var(--ink-light) !important; opacity:.65 !important; }
.footer-copy { font-size:.82rem !important; color:var(--ink-light) !important; opacity:.7 !important; letter-spacing:.04em !important; margin-top:.2rem !important; }

/* Modal dark-background override */
.modal-content { background:#fff !important; box-shadow:0 8px 40px rgba(27,42,73,.15) !important; color:var(--navy-deep) !important; }
.modal-text { color:var(--ink-mid) !important; }

/* Bio-info strong cream override (the .bb-info strong inside bio-badge) */
.bb-info strong { color:var(--navy-deep) !important; }

/* Section eyebrow for testimonials — dark purple bg→cream bg */
.testimonials-section > .container > .section-header .section-eyebrow { background:rgba(184,149,106,.12) !important; color:var(--navy-deep) !important; border-color:rgba(184,149,106,.25) !important; }

/* Fixed header cream override */
.site-header.scrolled { background:rgba(246,241,234,.92) !important; backdrop-filter:blur(16px) saturate(150%) !important; -webkit-backdrop-filter:blur(16px) saturate(150%) !important; border-bottom-color:rgba(27,42,73,.08) !important; }
.logo-label { opacity:.6 !important; color:var(--ink-mid) !important; }

/* Hero torn-note card cream override (already has cream colors — just remove dark-bg artifacts) */
.torn-note::before { background:linear-gradient(90deg,transparent,rgba(184,149,106,.5),transparent) !important; }

/* Lit-density note outer overrides (dark gradient bg → light cream) */
.note-outer.left { background: linear-gradient(160deg, #faf3ea, #e9d9d2); }
.note-outer.right { background: linear-gradient(160deg, #f4f0ea, #ece2d5); }

/* Scrollbar cream override */
::-webkit-scrollbar-track { background:#f6f1ea !important; }
::-webkit-scrollbar-thumb { background:rgba(184,149,106,.3) !important; }
::-webkit-scrollbar-thumb:hover { background:rgba(184,149,106,.5) !important; }

/* Selection cream override */
::selection { background:rgba(184,149,106,.3); color:var(--navy-deep); }

@media(min-width:780px) {
  .contact-split { grid-template-columns:420px 1fr; align-items:start; }
}
@media(max-width:560px) {
  .form-row { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr !important; gap:1rem !important; }
  .pricing-grid { grid-template-columns:1fr !important; gap:1.2rem !important; }
}

/* Nav wrapper — bare <nav class="nav"> (single definition, removed earlier duplicate) */
.nav-wrapper { display:flex !important; align-items:center !important; gap:clamp(1rem,2vw,2.2rem) !important; }

/* About lit-note cards */
.about-lit-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.6rem 0 2rem; }
.lit-card { position: relative; background: linear-gradient(155deg,#fdfaf4,#f0e8da); border: 1px solid rgba(27,42,73,.08); border-radius: 2px; padding: 1.15rem 1.2rem 1rem; box-shadow: 0 8px 22px rgba(27,42,73,.08); }
.lit-card::before { content: '\201C'; position: absolute; top: -6px; right: 12px; font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; line-height: 1; color: var(--gold); opacity: .22; }
.lit-card p { font-family: 'Cormorant Garamond', serif; font-size: .97rem; font-style: italic; line-height: 1.62; color: var(--navy) !important; margin: 0; }
.lit-card cite { display: block; margin-top: .7rem; font-family: 'Inter', sans-serif; font-style: normal; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold) !important; }

/* ============================================================
   Launch-prep additions
   ============================================================ */

/* [hidden] must actually hide. Section rules set display:block/flex, which
   would otherwise override the attribute — this keeps the placeholder
   testimonials section from shipping visible by accident. */
[hidden] { display: none !important; }

/* Contact form status line — the honest success/failure message that replaced
   the old "always show success" modal behaviour. */
.form-status {
  margin: .75rem 0 0;
  font-size: .92rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-mid, #5c534b);
  min-height: 1.25em;
}
.form-status.is-error { color: #b3261e; }

/* Respect the OS "reduce motion" setting across the whole site. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
}

/* Keyboard focus must stay visible for accessibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--purple-bright, #a78bfa);
  outline-offset: 2px;
}

/* ============================================================
   DARK LITERARY THEME — 2026-08-04
   Palette taken from the hero collage (img/hero-collage.jpg): warm near-black
   ground, parchment ink, aged-gold accent. This layer comes last so it wins
   over the earlier cream section without having to unpick its !important
   rules. Variable NAMES are kept and only their ROLES are re-pointed, so every
   downstream rule keeps working.
   ============================================================ */

:root {
  /* Ground: purple-black rather than neutral black — enough violet to read as
     a colour, still dark enough to sit under the collage. */
  --bg-deep: #0c0913; --bg-mid: #13101f;
  --purple-950: #171327;   /* card surface  */
  --purple-900: #1d1830;   /* raised panel  */
  --purple-700: #282140;   /* border/divider surface */

  /* Accent: aged gold from the collage lettering, nudged brighter so it holds
     its own against the violet ground. */
  --purple-600: #cdae85; --purple-500: #c2a37a;
  --purple-400: #d6bb94; --purple-300: #c2baac;
  --purple-bright: #f0e6d4;
  --amber-400: #cdae85; --amber-600: #b08f64;
  --amber-soft: #ecd8b4; --amber-glow: rgba(205,174,133,.2);

  /* Type: lifted well clear of muddy grey — near-white with a warm cast. */
  --white: #fbf8f2; --white-muted: #ece7dd; --white-dim: rgba(251,248,242,.74);

  /* Panels */
  --glass-bg: rgba(255,255,255,.055);
  --glass-border: rgba(240,232,214,.16);
  --glass-border-hover: rgba(240,232,214,.32);

  /* Named cream-theme tokens, re-pointed. These are text/accent colours only
     (verified — none are used as a background), so inverting them is safe. */
  --navy: #fbf8f2; --navy-deep: #ffffff;
  --gold: #cdae85; --ink-mid: #d6cfc2; --ink-light: #a79f92;

  --s-card: 0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.045);
  --s-card-hover: 0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}

html, body { background: var(--bg-deep) !important; color: var(--white-muted) !important; }

/* The retired dark-purple mesh must not tint the warm-black ground. */
.bg-layer, .bg-mesh { display: none !important; }

/* ---- Header / nav: solid, legible, high contrast ---- */
.site-header {
  background: rgba(12,9,19,.72) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid rgba(232,220,196,.10) !important;
}
.site-header.scrolled {
  background: rgba(12,9,19,.94) !important;
  border-bottom-color: rgba(205,174,133,.3) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,.5) !important;
}
.logo { color: var(--white) !important; }
.logo-rkt {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--gold) !important; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .02em;
}
.logo-dot { color: rgba(236,228,213,.45) !important; }
.logo-label { color: var(--white-muted) !important; opacity: .8 !important; letter-spacing: .18em; }

/* Nav links: parchment at rest (not dim), gold on hover — readable either way. */
.nav-link { color: rgba(236,228,213,.86) !important; letter-spacing: .02em; }
.nav-link:hover, .nav-link.active { color: var(--gold) !important; }
.nav-link::after { background: linear-gradient(90deg, var(--gold), transparent) !important; }
.nav-cta {
  background: transparent !important;
  border: 1px solid rgba(194,163,122,.55) !important;
  color: var(--gold) !important;
  letter-spacing: .04em;
}
.nav-cta:hover {
  background: var(--gold) !important; color: #16112a !important;
  border-color: var(--gold) !important; box-shadow: 0 0 24px rgba(194,163,122,.3) !important;
}
.hamburger-line { background: var(--white) !important; }

/* ---- Hero: the collage is the ground the theme wraps around ---- */
/* The collage leads the page as its own band, so the hero is a normal stacked
   block rather than a centred full-viewport panel with text over artwork. */
.hero {
  position: relative; isolation: isolate;
  display: block !important;
  min-height: 0 !important;
  padding-inline: 0 !important;
  text-align: center;
}

/* THE COLLAGE IS NEVER CROPPED.
   It is the argument of the page, not decoration, so every pin, quotation and
   spine has to be legible at every size. That rules out `object-fit: cover`,
   which by definition discards part of the frame. The banner runs the full
   width of the page at the image's own 3:2 ratio — edge to edge, unframed,
   and complete at every viewport. It scales; it never crops. */
.hero-media {
  margin: 0; position: relative;
  padding: 0;
  background: var(--bg-deep);
  line-height: 0;
}
.hero-media img {
  display: block;
  width: 100%; height: auto;
  /* Luminous whites: the source is a dark studio photograph and the pinned
     quotations are the point. Lifted so the paper reads as paper. */
  filter: brightness(1.34) contrast(1.14) saturate(1.06);
}
/* The banner carries no frame and no corner marks: it is left as the image
   alone. The ornament lives around the nameplate above it instead. */

/* ---- Nameplate: the company name, first and largest ---- */
.nameplate {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.9rem, 3vw, 2.4rem);
  padding: calc(68px + clamp(1.6rem, 5vh, 3.2rem)) 1.25rem clamp(1.4rem, 4vh, 2.4rem);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(58,34,104,.42) 0%, rgba(12,9,19,0) 70%),
    var(--bg-deep);
  text-align: center;
}
.np-star { color: var(--gold); font-size: clamp(.7rem, 1.4vw, 1rem); opacity: .8; flex: none; }
.np-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  font-weight: 600; line-height: 1; margin: 0;
  color: var(--white); letter-spacing: .02em;
  text-shadow: 0 0 60px rgba(160,110,255,.22);
}
.np-sub {
  margin: .9rem 0 0;
  font-size: clamp(.54rem, 1.15vw, .7rem);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.np-words { position: relative; }
.np-words::after {
  content: ''; display: block; width: 42%; height: 1px; margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(205,174,133,.5), transparent);
}

.hero-overlay { padding-top: clamp(7.5rem, 12vh, 7rem); padding-bottom:clamp(3rem,6vh,4.5rem); position:relative; z-index:2; max-width:820px; margin:0 auto; }

.hero-eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.32em; color:var(--purple-400); margin-bottom:1.6rem; opacity:.8; }
.hero-title { font-size:clamp(2.6rem,7vw,5.2rem); font-weight:900; line-height:1.18; letter-spacing:-.035em; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35),0 0 20px rgba(109,40,217,.25); margin-bottom:1.4rem; }
.hero-highlight { background:linear-gradient(135deg,var(--purple-bright),var(--amber-soft)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 2px 10px rgba(109,40,217,.4)); }
.hero-desc { color:rgba(240,231,255,.82) !important; max-width:640px; margin:0 auto 2.2rem; line-height:1.8; font-size:clamp(.95rem,1.3vw,1.1rem); }
.hero-desc strong { color:var(--purple-300); }

/* Trust badges row */
.hero-trust { display:flex; align-items:center; justify-content:center; gap:.7em; flex-wrap:wrap; margin-bottom:2.5rem; margin-left:-.4em; margin-right:-.4em; }
.trust-badge { display:inline-flex; align-items:center; gap:.35em; padding:.45em .9em; border-radius:999px; background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.18); font-size:.78rem; font-weight:600; color:var(--purple-300); }
.tb-icon { font-size:.95em; line-height:1; }
.trust-divider { width:1px; height:20px; background:rgba(124,58,237,.5); border-radius:1px; box-shadow:0 0 4px rgba(124,58,237,.3); }

.hero-actions { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }

.hero-overlay {
  position: relative; z-index: 2;
  padding-top: clamp(2rem, 5vh, 3.5rem) !important;
  padding-bottom: clamp(3rem, 7vh, 5rem) !important;
  padding-inline: 1.25rem;
}

.hero-title, .hero-title span {
  color: var(--white) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important; letter-spacing: -.01em !important;
  text-shadow: none !important;
  font-size: clamp(2.2rem, 5.4vw, 4.1rem) !important;
}
.hero-desc { color: rgba(236,228,213,.82) !important; text-shadow: none; }
.hero-eyebrow, .section-eyebrow {
  color: var(--gold) !important;
  background: rgba(194,163,122,.10) !important;
  border: 1px solid rgba(194,163,122,.22);
}
.trust-divider { background: rgba(232,220,196,.25) !important; }

@media (max-width: 640px) {
}

/* ---- Line icons replacing the emoji badges ---- */
.tb-icon, .bb-icon {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.bb-icon { width: 1.5rem; height: 1.5rem; }
.trust-badge {
  color: rgba(236,228,213,.88) !important;
  display: inline-flex; align-items: center; gap: .5em;
}
.bio-badge { display: flex; align-items: flex-start; gap: .8rem; }
.bio-badge .bb-icon { margin-top: .15rem; }
.bb-info strong { color: var(--white) !important; }
.bb-info span { color: var(--ink-light) !important; }

/* ---- Surfaces: everything the cream layer hard-coded to white/#f6f1ea ---- */
.faq-item, .faq-answer,
.price-card, .price-card.price-featured,
.sub-card, .test-card, .torn-note, .lit-card, .dens-note, .dens-center,
.cp-card, .bio-badge, .hiw-step, .contact-form {
  background: var(--purple-950) !important;
  background-image: none !important;
  border: 1px solid rgba(232,220,196,.12) !important;
  box-shadow: var(--s-card) !important;
  color: var(--white-muted) !important;
}
.price-card.price-featured {
  border-color: rgba(194,163,122,.55) !important;
  background: linear-gradient(180deg, #1c1813, #16130f) !important;
  box-shadow: 0 0 40px rgba(194,163,122,.10), 0 10px 30px rgba(0,0,0,.5) !important;
}
.sub-texts { background: rgba(255,255,255,.04) !important; border-left-color: var(--gold) !important; }
.faq-question:hover { background: rgba(194,163,122,.08) !important; }
.price-ribbon { color: #16112a !important; }
.sub-badges span, .sub-badge-row span {
  background: rgba(194,163,122,.14) !important;
  border-color: rgba(194,163,122,.3) !important;
  color: var(--amber-soft) !important;
}
.sub-badges { border-top-color: rgba(232,220,196,.10) !important; }

/* Price figure reads as gold, not an invisible gradient */
.price-val {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--gold) !important; font-weight: 700 !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* ---- Form fields ---- */
.contact-form input, .contact-form textarea, .contact-form select {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(232,220,196,.18) !important;
  color: var(--white) !important;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(236,228,213,.42) !important; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--gold) !important; background: rgba(255,255,255,.07) !important;
}
.form-label { color: var(--white-muted) !important; }
/* Native dropdown lists render with the OS palette — force dark options too. */
.contact-form select option { background: #16130f; color: #ece4d5; }

/* ---- Buttons ---- */
.btn-glow, .price-ribbon {
  background: linear-gradient(135deg, var(--gold), var(--amber-600)) !important;
  color: #16112a !important; border: none !important; font-weight: 600 !important;
}
.btn-glow:hover { box-shadow: 0 0 30px rgba(194,163,122,.4) !important; }
.btn-ghost, .btn-outline-full {
  background: transparent !important;
  border: 1px solid rgba(232,220,196,.3) !important;
  color: var(--white) !important;
}
.btn-ghost:hover, .btn-outline-full:hover {
  border-color: var(--gold) !important; color: var(--gold) !important;
  background: rgba(194,163,122,.08) !important;
}
.floating-cta-btn {
  background: linear-gradient(135deg, var(--gold), var(--amber-600)) !important;
  color: #16112a !important; font-weight: 600 !important;
}

/* ---- Footer + misc ---- */
.site-footer { background: #08060f !important; border-top: 1px solid rgba(232,220,196,.10) !important; }
.footer-logo, .fl-rkt { color: var(--gold) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.footer-nav a { color: rgba(236,228,213,.72) !important; }
.footer-nav a:hover { color: var(--gold) !important; }
.footer-copy, .footer-tagline { color: rgba(236,228,213,.55) !important; opacity: 1 !important; }
.lit-densities { background: linear-gradient(180deg, transparent, rgba(194,163,122,.05), transparent) !important; }
.scroll-progress-fill { background: linear-gradient(90deg, var(--gold), var(--amber-soft)) !important; }
.modal-content { background: var(--purple-900) !important; border: 1px solid rgba(194,163,122,.3) !important; color: var(--white-muted) !important; }
.modal-title { color: var(--white) !important; }
.hiw-number { color: var(--gold) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.text-glow { color: var(--gold) !important; }
::-webkit-scrollbar-thumb { background: rgba(194,163,122,.35); }
::-webkit-scrollbar-thumb:hover { background: rgba(194,163,122,.55); }

/* Retired quote-card decorations. The markup for the pinned sticky notes, the
   About quote cards and the standalone quote band has been removed; these
   rules are neutralised so nothing resurfaces if a stray class remains. */
.hero-notes, .about-lit-notes, .lit-densities, .torn-note, .lit-card, .dens-note {
  display: none !important;
}

/* ---- Typographic voice ------------------------------------------------
   The hero is set in Cormorant; leaving every section heading in heavy
   sans made the page read like a generic SaaS template rather than
   something literary. Headings now follow the hero. */
.section-title, .section-title span {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.9rem, 3.6vw, 3rem) !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  color: var(--white) !important;
}
.gradient-text {
  background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--gold) !important; font-style: italic;
}
.hiw-step h3, .sub-card-content h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important; font-weight: 600 !important;
  letter-spacing: 0 !important; color: var(--white) !important;
}
.sub-card-content h3 { font-size: 1.7rem !important; }
.section-subtitle { color: var(--ink-mid) !important; }

/* Step numerals: gold rule instead of the retired purple disc. */
.hiw-number {
  background: none !important; box-shadow: none !important;
  color: var(--gold) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.6rem !important; font-weight: 600 !important;
  border: 1px solid rgba(194,163,122,.4) !important;
}
.hiw-step:hover { border-color: rgba(194,163,122,.35) !important; box-shadow: 0 10px 30px rgba(0,0,0,.45) !important; }
.sub-card:hover, .price-card:hover { border-color: rgba(194,163,122,.35) !important; }
.sub-card-accent { background: linear-gradient(180deg, var(--gold), transparent) !important; }
.modal-icon circle, .modal-icon path { stroke: var(--gold) !important; }

/* Pricing card padding.
   styles.css puts the padding on `.price-card-inner`, but no such wrapper
   exists in index.html — the markup goes straight from .price-card to its
   children. The result was text sitting flush against the card border, which
   read as clipped ("Exam Prep Intensive" losing its first letters). Padding
   belongs on the card itself. */
.price-card { padding: 2.2rem 2rem 1.8rem; gap: .5rem; }
.price-card.price-featured { padding-top: 2.6rem; }
.price-label {
  font-size: .68rem !important; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-light) !important; font-weight: 600;
}
.price-desc { color: var(--ink-mid) !important; font-size: .88rem; }
.price-list li { color: var(--ink-mid) !important; font-size: .86rem; padding: .18em 0; list-style: none; }
.pf-ok { color: var(--gold) !important; }
.price-card > .btn:last-of-type { margin-top: auto; }

/* ============================================================
   HERMETIC LAYER — the media language of the site.
   Restrained occult-scholarly signals: ruled small-caps labels, a compass
   sigil, gilt hairlines, aged-paper grain. The register to hold is
   *initiatory*, not conspiratorial — this page is read by parents deciding
   where to spend money, so the promise is privileged knowledge, seriously
   taught, never mystification.
   ============================================================ */

/* ---- Ruled small-caps labels ---- */
.section-eyebrow, .hero-eyebrow {
  position: relative;
  font-size: .6rem !important;
  letter-spacing: .32em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  padding: .5em 1.4em !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(205,174,133,.3) !important;
  border-bottom: 1px solid rgba(205,174,133,.3) !important;
  border-radius: 0 !important;
  color: var(--gold) !important;
}

/* ---- Compass sigil ---- */
.sigil { display: block; width: 62px; margin: 0 auto 2rem; }
.sigil svg {
  width: 100%; height: auto; display: block;
  fill: none; stroke: var(--gold); stroke-width: 1;
  opacity: .75;
}
.sigil svg circle:first-child { stroke-dasharray: 3 5; opacity: .7; }

/* ---- Ethos band ---- */
.ethos {
  position: relative;
  padding: clamp(4rem, 10vh, 7rem) 0;
  border-top: 1px solid rgba(205,174,133,.14);
  border-bottom: 1px solid rgba(205,174,133,.14);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(58,34,104,.34) 0%, rgba(12,9,19,0) 72%),
    var(--bg-mid);
}
.ethos-inner { max-width: 760px; text-align: center; }
.ethos-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 600; font-style: italic;
  line-height: 1.16; color: var(--white);
  margin: 0 0 1.6rem;
}
.ethos-lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  line-height: 1.72; color: var(--white-muted);
  margin: 0 auto 1.15rem; max-width: 40em;
}
.ethos-lead em { color: var(--gold); font-style: italic; }
.ethos-close {
  margin: 2.2rem auto 0; padding-top: 1.6rem;
  max-width: 26em; position: relative;
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
/* Gilt rule with a lozenge at its centre. */
.ethos-close::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 260px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,174,133,.45), transparent);
}
.ethos-close::after {
  content: '◆'; position: absolute; top: -.52em; left: 50%;
  transform: translateX(-50%);
  font-size: .5rem; color: var(--gold); background: var(--bg-mid); padding: 0 .7em;
}

/* ---- Aged-paper grain over the whole page ----
   A single tiled SVG turbulence at very low opacity. Fixed and
   pointer-events:none so it never interferes with layout or input. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Gilt section rules ---- */
.section-title { position: relative; }
.subjects-section, .pricing-section, .faq-section { position: relative; }

/* Small caps + wider tracking on the subject tags, so they read as
   classifications rather than chips. */
.sub-tag {
  font-size: .58rem !important; letter-spacing: .3em !important;
  text-transform: uppercase; border-radius: 0 !important;
  border-width: 0 0 1px 0 !important; padding: 0 0 .4em !important;
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* ============================================================
   RESTRUCTURE — disciplines, fees, enquiry
   ============================================================ */

/* ---- FIX: cards flashed white on hover/press ----
   The cream layer left `.hiw-step:hover { background:#fff !important }`
   behind. On the dark theme that turned a card white while its text stayed
   near-white, making it unreadable for the duration of the hover — and on a
   touch screen the :hover state sticks after tapping. Held dark, with the
   gold border doing the work instead. */
.hiw-step,
.hiw-step:hover,
.hiw-step:focus-within,
.hiw-step:active {
  background: var(--purple-950) !important;
  background-image: none !important;
  color: var(--white-muted) !important;
}
.hiw-step {
  border: 1px solid rgba(232,220,196,.12) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  text-align: left;
  padding: 2rem 1.6rem 1.8rem;
}
.hiw-step:hover, .hiw-step:focus-within {
  border-color: rgba(205,174,133,.45) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 40px rgba(120,80,200,.1) !important;
}
.hiw-step h3, .hiw-step p, .hiw-step dt, .hiw-step dd { color: inherit; }
.hiw-step h3 { color: var(--white) !important; }

/* ---- The three disciplines ---- */
.disciplines-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.disciplines-grid .hiw-number {
  margin: 0 0 1.1rem; width: auto; height: auto;
  border: 0 !important; border-bottom: 1px solid rgba(205,174,133,.35) !important;
  border-radius: 0 !important; padding: 0 0 .3rem;
  display: inline-block; letter-spacing: .18em; font-size: 1.15rem !important;
}
.disc-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem !important; line-height: 1.6;
  color: var(--ink-mid) !important; font-style: italic;
  margin: 0 0 1.2rem; max-width: none !important;
}
.disc-list { margin: 0; }
.disc-list dt {
  font-size: .56rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-top: 1rem;
}
.disc-list dt:first-child { margin-top: 0; }
.disc-list dd {
  margin: .4rem 0 0; font-size: .82rem; line-height: 1.6;
  color: var(--white-muted); opacity: .92;
}
.disc-foot {
  margin: 2.6rem auto 0; max-width: 44em; text-align: center;
  font-size: .88rem; color: var(--ink-mid);
}
.disc-foot strong { color: var(--gold); font-weight: 600; }

/* ---- Fees ---- */
.fees-grid {
  display: grid; gap: 1.1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.fee-card {
  background: var(--purple-950);
  border: 1px solid rgba(232,220,196,.12);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.6rem;
  text-align: center;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.fee-card:hover { border-color: rgba(205,174,133,.45); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.fee-level {
  display: block; font-size: .6rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); font-weight: 600;
  margin-bottom: 1rem;
}
.fee-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3rem, 6vw, 4.2rem); font-weight: 600; line-height: 1;
  color: var(--white); margin: 0;
}
.fee-cur { font-size: .5em; vertical-align: .35em; color: var(--gold); margin-right: .04em; }
.fee-per { font-family: 'Inter', sans-serif; font-size: .82rem; color: var(--ink-light); font-weight: 400; }
.fee-poa {
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 1.7rem; color: var(--white); margin: 0;
}
.fee-note { font-size: .78rem; color: var(--ink-light); line-height: 1.55; margin: .9rem 0 0; }
.fee-card-quiet { background: transparent; border-style: dashed; }

.fees-contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 2.4rem;
}
.fees-email {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(205,174,133,.4); padding-bottom: .12em;
}
.fees-email:hover { color: var(--white); border-bottom-color: var(--white); }

/* ---- Enquiry block, folded into the fees section ---- */
.enquire-block {
  margin-top: clamp(4rem, 9vh, 6.5rem);
  padding-top: clamp(3rem, 7vh, 4.5rem);
  border-top: 1px solid rgba(205,174,133,.16);
  scroll-margin-top: 84px;
}
.enquire-block .contact-form-col { max-width: 720px; margin-inline: auto; }

/* ---- Hero, restated for the stripped-back masthead copy ---- */
.hero-title {
  font-size: clamp(1.45rem, 2.9vw, 2.35rem) !important;
  line-height: 1.42 !important;
  max-width: 30em; margin-inline: auto;
  color: var(--white-muted) !important;
}
.hero-actions { margin-top: 2.2rem; }

/* ---- Ethos closing marks ---- */
.ethos-marks {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.6rem, 5vw, 3.2rem); margin-top: 2.8rem;
  padding-top: 2.4rem; position: relative;
}
.ethos-marks::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 260px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,174,133,.45), transparent);
}
.ethos-marks svg {
  width: clamp(28px, 5vw, 38px); height: auto;
  fill: none; stroke: var(--gold); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; opacity: .72;
}

/* Role line under the tutor's name — was an inline style pointing at a
   retired variable. */
.about-role {
  display: block; margin-top: .5em;
  font-family: 'Inter', sans-serif;
  font-size: clamp(.58rem, 1.1vw, .7rem) !important;
  letter-spacing: .28em; text-transform: uppercase;
  font-weight: 500; color: var(--gold) !important;
}
.about-text-section .bio-badges { margin: 0 0 2.4rem; }

/* ============================================================
   TWEAKS: ornament, hover inversion, esoteric buttons
   ============================================================ */

/* ---- 2. Nameplate ornament ----
   The key and keyhole flank the company name; a small hexagram sigil sits
   above it. This is where the decoration lives now that the banner is bare. */
.nameplate { gap: clamp(1rem, 4vw, 3.4rem); }
.np-orn { flex: none; width: clamp(20px, 3vw, 30px); opacity: .62; }
.np-orn svg {
  width: 100%; height: auto; display: block;
  fill: none; stroke: var(--gold); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.np-orn-r { transform: scaleX(-1); }
.np-mark { display: block; width: clamp(26px, 3.4vw, 36px); margin: 0 auto 1.1rem; }
.np-mark svg {
  width: 100%; height: auto; display: block;
  fill: none; stroke: var(--gold); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; opacity: .8;
}
@media (max-width: 560px) { .np-orn { display: none; } }

/* ---- 1. Buttons: sigil-marked, letterspaced, gilt ---- */
.btn {
  position: relative;
  font-size: .7rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  padding: 1.05em 2.4em !important;
  border-radius: 2px !important;
}
/* Corner ticks, drawn on the button rather than the artwork. */
.btn::before, .btn::after {
  content: ''; position: absolute; width: 7px; height: 7px;
  border: 0 solid currentColor; opacity: .55;
  transition: opacity .25s ease, inset .25s ease;
}
.btn::before { top: 5px; left: 5px; border-top-width: 1px; border-left-width: 1px; }
.btn::after { bottom: 5px; right: 5px; border-bottom-width: 1px; border-right-width: 1px; }
.btn:hover::before, .btn:hover::after { opacity: 1; }
.btn-glow {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid rgba(205,174,133,.55) !important;
  box-shadow: inset 0 0 30px rgba(205,174,133,.07);
}
.btn-glow:hover {
  background: var(--gold) !important; color: #16112a !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 34px rgba(205,174,133,.32) !important;
}
.btn-ghost { border-color: rgba(240,232,214,.28) !important; }
.hero-actions { gap: 1rem; }

/* ---- 3. Hover inversion ----
   Cards invert on hover: the surface takes the parchment, and every piece of
   text inside takes the purple that was the surface. Stated explicitly for
   each child, because a single `color` on the card would be overridden by the
   more specific rules the elements already carry. */
.hiw-step, .bio-badge, .fee-card {
  transition: background-color .28s ease, border-color .28s ease,
              color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.hiw-step:hover, .hiw-step:focus-within,
.bio-badge:hover, .bio-badge:focus-within,
.fee-card:hover, .fee-card:focus-within {
  background: var(--white) !important;
  background-image: none !important;
  border-color: var(--white) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 40px rgba(205,174,133,.16) !important;
  transform: translateY(-3px);
}
.hiw-step:hover, .hiw-step:hover h3, .hiw-step:hover p,
.hiw-step:hover .disc-line, .hiw-step:hover .disc-list dd,
.hiw-step:focus-within, .hiw-step:focus-within h3, .hiw-step:focus-within p,
.hiw-step:focus-within .disc-line, .hiw-step:focus-within .disc-list dd,
.bio-badge:hover .bb-info strong, .bio-badge:hover .bb-info span,
.bio-badge:focus-within .bb-info strong, .bio-badge:focus-within .bb-info span,
.fee-card:hover .fee-price, .fee-card:hover .fee-poa, .fee-card:hover .fee-note,
.fee-card:focus-within .fee-price, .fee-card:focus-within .fee-poa {
  color: var(--purple-950) !important;
}
/* Gold details darken to stay legible on parchment. */
.hiw-step:hover .hiw-number, .hiw-step:focus-within .hiw-number,
.hiw-step:hover .disc-list dt, .hiw-step:focus-within .disc-list dt,
.fee-card:hover .fee-level, .fee-card:hover .fee-cur {
  color: #6b4a1f !important; border-bottom-color: rgba(107,74,31,.4) !important;
}
.bio-badge:hover .bb-icon, .bio-badge:focus-within .bb-icon,
.hiw-step:hover .bb-icon { stroke: #6b4a1f !important; }
.fee-card-quiet:hover { border-style: solid !important; }

/* ---- 5. The philosophy ---- */
.ethos-eyebrow { display: inline-block; margin-bottom: 1.6rem; }
.ethos-title { margin-bottom: 1.8rem; }
.ethos-attrib {
  margin: 2rem 0 0;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.ethos-attrib::before {
  content: ''; display: block; width: 34px; height: 1px;
  margin: 0 auto 1rem; background: rgba(205,174,133,.5);
}

/* ---- 6. Quiet ornament on the plainer sections ----
   A single hairline diamond above each section title. Subtle enough to read
   as printing rather than decoration. */
.how-it-works-section .section-header::before,
.about-section .section-header::before,
.fees-section .section-header::before,
.faq-section .section-header::before {
  content: '◆';
  display: block; margin: 0 auto .9rem;
  font-size: .42rem; color: var(--gold); opacity: .55;
}
/* Corner rules framing the FAQ and fees blocks. */
.faq-list, .fees-grid { position: relative; }
.faq-list::before, .faq-list::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,174,133,.4), transparent);
}
.faq-list::before { top: -1.6rem; }
.faq-list::after { bottom: -1.6rem; }

/* ---- FIX: FAQ answers had no padding ----
   styles.css styles `.faq-answer`, but the markup is
   `<details class="faq-item"><summary/><p>…</p></details>` with no such
   wrapper, so the answer paragraphs inherited padding 0 and ran flush into
   the card border on all three sides. That, not contrast, was what made them
   hard to read. Padding, measure and leading set on the paragraphs directly. */
.faq-item > p {
  margin: 0;
  padding: 0 clamp(1.2rem, 2.4vw, 1.6rem) 0;
  max-width: 68ch;
  font-size: .95rem !important;
  line-height: 1.8 !important;
  color: var(--white-muted) !important;
}
.faq-item > p:last-child { padding-bottom: clamp(1.2rem, 2.4vw, 1.5rem); }
.faq-item > p + p { padding-top: .85rem; }
/* A hairline between the question and its answer. */
.faq-item[open] .faq-question {
  border-bottom: 1px solid rgba(205,174,133,.18);
  margin-bottom: clamp(1rem, 2vw, 1.3rem);
}
.faq-question { font-weight: 600 !important; }
.faq-question strong { font-weight: 600 !important; letter-spacing: .01em; }
.faq-item { overflow: visible !important; }
.faq-item > p strong { color: var(--white) !important; font-weight: 600; }

/* The nameplate keys are gone; only the sigil remains above the name. */
.nameplate { gap: 0; }

/* FIX: opened FAQ cards turned white behind near-white text.
   The cream layer carries `.faq-item[open] { background:#fff !important }`,
   specificity (0,2,0), which outranked the dark surface rule matched on
   `.faq-item` (0,1,0). The card therefore inverted to pure white the moment a
   question was opened, putting #fbf8f2 text on #ffffff: a contrast ratio of
   about 1.05:1, effectively invisible. Matched specificity, held dark. */
.faq-item,
.faq-item[open] {
  background: var(--purple-950) !important;
  background-image: none !important;
  border: 1px solid rgba(232,220,196,.12) !important;
}
.faq-item[open] { border-color: rgba(205,174,133,.32) !important; }
.faq-item[open] .faq-question,
.faq-question { background: transparent !important; }

/* ============================================================
   SUBJECTS: bigger boxes, readable descriptions
   ============================================================ */

/* The subject description was set in Cormorant italic, which reads as
   cursive at body size and is genuinely hard to scan. Body text belongs in
   the sans face at a normal angle; the serif italic stays for display lines
   like the philosophy, where it is large enough to work. */
.disc-line {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
  color: var(--white-muted) !important;
  margin: 0 0 1.5rem !important;
}

/* Roomier boxes: fewer per row so each has space to breathe. */
.disciplines-grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
  gap: 1.4rem !important;
}
.disciplines-grid .hiw-step { padding: 2.4rem 2.1rem 2.2rem !important; }
.disciplines-grid .hiw-step h3 { font-size: 1.75rem !important; margin-bottom: .9rem !important; }
.disciplines-grid .hiw-number { font-size: 1.3rem !important; margin-bottom: 1.3rem !important; }
.disc-list dt { font-size: .6rem; margin-top: 1.3rem; }
.disc-list dd { font-size: .9rem; line-height: 1.7; }

/* ============================================================
   FAQ: question and answer clearly separated
   ============================================================ */

/* Previously both sat on one flat surface, so a question and its answer read
   as a single block of text. They are now two distinct registers: the
   question is a raised band in the serif face, the answer an inset panel on
   the darker ground with a gold rule down its edge. */
.faq-item,
.faq-item[open] {
  background: transparent !important;
  border: 1px solid rgba(232,220,196,.16) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.faq-item[open] { border-color: rgba(205,174,133,.36) !important; }

.faq-question {
  background: var(--purple-900) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--white) !important;
  padding: 1.15rem clamp(1.2rem, 2.4vw, 1.6rem) !important;
  margin: 0 !important;
  transition: background-color .22s ease, color .22s ease;
}
.faq-question strong {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600 !important;
}
.faq-question:hover { background: rgba(205,174,133,.13) !important; }

/* Open: the question band takes the gold, marking it as the live one. */
.faq-item[open] .faq-question {
  background: rgba(205,174,133,.15) !important;
  color: var(--amber-soft) !important;
  border-bottom: 1px solid rgba(205,174,133,.3) !important;
  margin-bottom: 0 !important;
}
.faq-chevron { color: var(--gold) !important; transition: transform .25s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

/* The answer sits inset, on the page ground rather than the card. */
.faq-item > p {
  background: var(--bg-deep);
  border-left: 2px solid rgba(205,174,133,.45);
  padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.2rem, 2.4vw, 1.6rem) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .93rem !important;
  line-height: 1.8 !important;
  color: var(--white-muted) !important;
  max-width: none;
}
.faq-item > p + p { padding-top: 0 !important; }
.faq-item > p:not(:last-child) { padding-bottom: .2rem !important; }

/* `.how-steps` caps its width at 960px, which was inherited from the old
   four-step row. With roomier subject boxes that left space for only two
   columns inside an 1140px container. Give the grid the full width and pin
   three equal columns on desktop. */
.disciplines-grid {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
}
@media (min-width: 1020px) {
  .disciplines-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 660px) and (max-width: 1019px) {
  .disciplines-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 659px) {
  .disciplines-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   UNIFORM INTERACTION + WORDMARK + BIGGER MYSTIC SUBHEADINGS
   ============================================================ */

/* ---- Wordmark: RKTutoring, initials carried in gold ---- */
.np-name { letter-spacing: .01em; }
.np-rkt, .logo-rkt, .fl-rkt {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  background: none !important;
}
.logo-rkt, .fl-rkt { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }
.logo-label, .fl-label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  opacity: 1 !important; color: var(--white) !important;
}
.logo { gap: 0 !important; align-items: baseline; }
.footer-logo { gap: 0 !important; }

/* ---- Every hover on the site behaves the same way ----
   Previously the primary and secondary buttons animated differently, and the
   nav call to action differently again. One rule now: the surface fills with
   gold, the label goes to the dark ground, the corner ticks brighten. Same
   easing and same lift everywhere. */
.btn, .nav-cta, .floating-cta-btn, .btn-glow, .btn-ghost, .btn-outline-full {
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.btn-glow, .btn-ghost, .btn-outline-full, .nav-cta, .floating-cta-btn {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid rgba(205,174,133,.55) !important;
  box-shadow: none !important;
}
.btn-glow:hover, .btn-ghost:hover, .btn-outline-full:hover,
.nav-cta:hover, .floating-cta-btn:hover,
.btn-glow:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible {
  background: var(--gold) !important;
  color: #16112a !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 30px rgba(205,174,133,.32) !important;
  transform: translateY(-2px);
}
/* The floating call to action stays filled, since it sits over content. */
.floating-cta-btn {
  background: var(--gold) !important; color: #16112a !important; font-weight: 600 !important;
}
.floating-cta-btn:hover { background: var(--amber-soft) !important; }

/* ---- Subheadings: larger, with mystic marks ---- */
.section-eyebrow, .hero-eyebrow {
  font-size: .72rem !important;
  letter-spacing: .34em !important;
  padding: .6em 0 !important;
  border: 0 !important;
  display: inline-flex; align-items: center; gap: 1.1em;
}
/* Alchemical marks either side of every section label. */
.section-eyebrow::before, .section-eyebrow::after {
  content: '✦';
  font-size: .62em; opacity: .8; color: var(--gold);
  transform: translateY(-.05em);
}
.section-title {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem) !important;
}
.section-subtitle { font-size: 1.02rem !important; line-height: 1.75 !important; }
.hiw-step h3, .disciplines-grid .hiw-step h3 { font-size: 1.9rem !important; }
.disc-list dt { font-size: .66rem !important; letter-spacing: .3em; }
.disc-list dd { font-size: .95rem !important; }
.fee-level { font-size: .66rem !important; letter-spacing: .3em; }

/* The lozenge above each heading becomes a small varied sigil. */
.how-it-works-section .section-header::before { content: '☿'; }
.about-section .section-header::before { content: '🜂'; }
.fees-section .section-header::before { content: '🜔'; }
.faq-section .section-header::before { content: '☾'; }
.how-it-works-section .section-header::before,
.about-section .section-header::before,
.fees-section .section-header::before,
.faq-section .section-header::before {
  font-size: 1.15rem !important; opacity: .6; margin-bottom: 1rem;
  line-height: 1; color: var(--gold);
}

/* ---- FAQ: the whole card changes colour when opened ---- */
.faq-item[open] {
  background: rgba(205,174,133,.07) !important;
  border-color: rgba(205,174,133,.45) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 30px rgba(205,174,133,.08) !important;
}
.faq-item[open] .faq-question {
  background: rgba(205,174,133,.24) !important;
  color: #fdf6e8 !important;
}
.faq-item[open] > p {
  background: rgba(12,9,19,.85) !important;
  border-left-color: var(--gold) !important;
}
.faq-question { font-size: 1.4rem !important; }

/* Older rules left stale `background-color` declarations on the secondary
   button (a faint gold tint) and the nav call to action (a purple tint).
   The `background` shorthand above already overrides both, so they never
   showed, but they made the three hover states differ on inspection. Setting
   background-color explicitly makes all interactive elements resolve to
   identical values. */
.btn-glow:hover, .btn-ghost:hover, .btn-outline-full:hover,
.nav-cta:hover, .floating-cta-btn:hover,
.btn-glow:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible {
  background-color: var(--gold) !important;
}

/* ============================================================
   LARGER SECTION HEADINGS AND SIGILS
   ============================================================ */

.section-eyebrow, .hero-eyebrow {
  font-size: .95rem !important;
  letter-spacing: .38em !important;
  gap: 1em;
  padding: .7em 0 !important;
}
.section-eyebrow::before, .section-eyebrow::after {
  font-size: .8em; opacity: .85;
}
.section-title {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important;
  line-height: 1.14 !important;
  margin-bottom: 1.3rem !important;
}
.ethos-title { font-size: clamp(2.4rem, 5.4vw, 4rem) !important; }
.ethos-eyebrow { font-size: .95rem !important; }
.section-subtitle { font-size: 1.08rem !important; }

/* The sigil above each section, given room to be seen. */
.how-it-works-section .section-header::before,
.about-section .section-header::before,
.fees-section .section-header::before,
.faq-section .section-header::before {
  font-size: 2.4rem !important;
  opacity: .55;
  margin-bottom: 1.2rem;
}
.sigil { width: 86px; margin-bottom: 2.2rem; }
.ethos-marks svg { width: clamp(36px, 6vw, 48px); }
.np-mark { width: clamp(34px, 4.2vw, 46px); }

/* The enquiry block sits inside the fees section and has no sigil of its own;
   give it one so it reads as a step in the same sequence. */
.enquire-block .section-header::before {
  content: '🜍'; display: block; font-size: 2.4rem; color: var(--gold);
  opacity: .55; margin: 0 auto 1.2rem; line-height: 1;
}

/* ============================================================
   SECTION RHYTHM
   Two grounds alternating, plus the philosophy as the single darkest
   moment. Enough separation to tell the sections apart while scrolling,
   not so much that the page reads as stripes. Each join is marked with a
   gold hairline.
   ============================================================ */
.how-it-works-section { background: var(--bg-deep); }
.about-section        { background: #13102180; }
.fees-section         { background: var(--bg-deep); }
.faq-section          { background: #13102180; }

.about-section, .fees-section, .faq-section, .how-it-works-section, .ethos {
  position: relative;
}
.about-section::before, .fees-section::before,
.faq-section::before, .how-it-works-section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 420px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,174,133,.32), transparent);
}

/* ============================================================
   SECTION RHYTHM, second pass
   The previous alternation put the hero and the subjects on the same ground,
   so the banner ran seamlessly into the first section with no boundary at
   all. Every join now carries a tonal step, the gap is wider than before,
   and the lifted sections take a faint hatch so they separate by texture as
   well as by lightness. The tutor/philosophy contrast is preserved as is.
   ============================================================ */

:root { --ground-base: #0c0913; --ground-lift: #15121f; }

.hero                 { background: var(--ground-base); }
.how-it-works-section { background: var(--ground-lift) !important; }
.about-section        { background: var(--ground-base) !important; }
.fees-section         { background: var(--ground-lift) !important; }
.faq-section          { background: var(--ground-base) !important; }

/* Faint hatch on the lifted sections. A 2% diagonal rule at 6px pitch: it
   reads as tone rather than pattern, and separates the section without
   spending any more contrast. */
.how-it-works-section::after,
.fees-section::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(205,174,133,.028) 0 1px,
    transparent 1px 6px
  );
}
.how-it-works-section > *, .fees-section > * { position: relative; z-index: 1; }

/* The banner needs a hard edge under it, since the image itself is busy. */
.hero-media { border-bottom: 1px solid rgba(205,174,133,.28); }

/* ============================================================
   HEADINGS: one face, one style
   The accent half of each heading was set in italic, which against the roman
   first half read as two different typefaces in one line: "Subjects
   /offered/", "One hour, one student, /undivided attention/", "Questions,
   /answered/". The accent now differs by colour alone.
   ============================================================ */
.section-title .gradient-text,
.gradient-text {
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Four credential boxes on an even grid, all the same height and aligned on
   a shared baseline. `align-items: stretch` matters because the first box
   wraps onto two lines where the others do not. */
.bio-badges {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
  align-items: stretch !important;
}
.bio-badge {
  padding: 1.15rem 1.3rem !important;
  border-radius: var(--r) !important;
  align-items: flex-start !important;
  min-height: 100%;
}
.bb-info { display: flex; flex-direction: column; gap: .2rem; }
.bb-info strong { font-size: .92rem; line-height: 1.35; }
.bb-info span { font-size: .74rem; line-height: 1.4; }
@media (max-width: 560px) { .bio-badges { grid-template-columns: 1fr !important; } }

/* ============================================================
   SECTION RHYTHM, third pass
   Measured luminance across every join gave +3.7, -3.7, +2.9, +0.8, -3.7.
   Philosophy into Fees was the odd one: the character changed (violet glow
   to diagonal hatch) while the tone barely moved, so the eye registered a
   change without being able to place the edge. That was the jarring join.
   Swapping the Fees and FAQ grounds restores an even ladder and leaves the
   Tutor/Philosophy contrast exactly as it was.
   ============================================================ */
.fees-section { background: var(--ground-base) !important; }
.faq-section  { background: var(--ground-lift) !important; }

/* The hatch follows the lifted ground. */
.fees-section::after { content: none !important; }
.faq-section { position: relative; }
.faq-section::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(205,174,133,.028) 0 1px,
    transparent 1px 6px
  );
}
.faq-section > * { position: relative; z-index: 1; }

/* ============================================================
   ENQUIRIES: a distinct panel, not a continuation of the fees
   It shares the fees section, so on one flat ground the two ran together.
   Now a lifted, bordered plinth sitting on the darker fees ground.
   ============================================================ */
.enquire-block {
  background: var(--ground-lift);
  border: 1px solid rgba(205,174,133,.22);
  border-radius: 6px;
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.25rem, 4vw, 3rem) clamp(2.4rem, 5vw, 3.4rem) !important;
  margin-top: clamp(4.5rem, 10vh, 7rem) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  position: relative;
}
/* A gold seam across the top edge of the plinth. */
.enquire-block::after {
  content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(70%, 380px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,174,133,.75), transparent);
}

/* The enquiry plinth and the FAQ section share the lifted tone, and only 48px
   of the darker fees ground sat between them, which read as a seam rather
   than a gap. Widened so the plinth clearly ends before the next section
   begins. */
.fees-section { padding-bottom: clamp(4.5rem, 10vh, 7rem) !important; }

/* ============================================================
   HEADINGS: one colour as well as one face
   The two halves already matched on family, size, weight and style; the
   remaining difference was colour, and that was enough. Near-white text on a
   dark ground blooms and reads heavier, while a mid-tone gold reads thinner
   at the same weight, so "Frequently Asked Questions" looked like two
   typefaces even though it was measurably one. Headings are now a single
   colour throughout. Gold is kept for section labels, sigils and prices,
   where it never sits inside a line of another colour.
   ============================================================ */
.section-title .gradient-text,
.section-title span,
.hero-title span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: none !important;
  background-image: none !important;
  font-style: normal !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

/* ============================================================
   FAQ: ease the widening
   The enquiry plinth is a narrow raised panel; the FAQ section directly
   below was the same tone but full width, so the colour appeared to jump
   outwards at the boundary. The plinth now sits a step above the FAQ ground
   so the two are not the same tone, and the FAQ fades in from the fees
   ground over its first 160px rather than starting on a hard edge.
   ============================================================ */
.enquire-block { background: #1c1830 !important; }

.faq-section {
  background:
    linear-gradient(180deg, var(--ground-base) 0, var(--ground-lift) 160px) !important;
}
/* The hairline stays, so the boundary is still marked. */
.faq-section::before { opacity: .8; }

/* Same rule applied to the fee cards: the gold currency symbol sat inside a
   near-white figure, and "Price on request" was italic where the other two
   cards were upright. Both were the same juxtaposition in miniature. The
   symbol keeps its smaller size, which is ordinary currency setting, but
   takes the colour of the figure. */
.fee-cur { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.fee-poa { font-style: normal !important; }

/* ============================================================
   FAQ into the footer
   The FAQ ground held at #15121f all the way to its bottom edge and the
   footer began at #08060f, the darkest tone on the page. The drop was
   instant, the hatch was cut off mid-stroke, and a hairline sat across the
   join, so the footer read as a stray dark band rather than the end of the
   page. The section now eases down into the footer colour over its last
   200px, and the hatch fades out with it.
   ============================================================ */
.faq-section {
  padding-bottom: clamp(5rem, 11vh, 8rem) !important;
  background: linear-gradient(
    180deg,
    var(--ground-base) 0,
    var(--ground-lift) 160px,
    var(--ground-lift) calc(100% - 200px),
    #08060f 100%
  ) !important;
}

/* Fade the hatch in at the top and out at the bottom so it never ends on a
   hard line. */
.faq-section::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 200px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 200px), transparent 100%);
}

/* With the tones now meeting, the divider is unnecessary and was the hard
   line itself. */
.site-footer { border-top: 0 !important; }

/* FIX: the dark band before the footer.
   `.site-footer` carried `margin-top: 48px`, so a 48px strip of the *body*
   background sat between the FAQ (by then faded to #08060f) and the footer
   (#08060f). The body is #0c0913, lighter than both, so the sequence ran
   dark, lighter, dark: a band with a hard edge at each end. Removing the
   margin lets the faded section meet the footer at the same value. */
.site-footer { margin-top: 0 !important; }
.faq-section { padding-bottom: clamp(3rem, 7vh, 4.5rem) !important; }

/* Subject cards: a short definition of the discipline, then the boards and
   texts, then the note about other syllabuses. The definition is set in the
   sans face upright, not the serif italic, because at this size italic reads
   as cursive and slows the eye. */
.disc-def {
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
  color: var(--white-muted) !important;
  margin: 0 0 1.6rem !important;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(205,174,133,.18);
  max-width: none !important;
}
.disc-note {
  margin: 1.5rem 0 0 !important;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(232,220,196,.1);
  font-size: .8rem !important;
  line-height: 1.6 !important;
  color: var(--ink-light) !important;
}
.disciplines-grid .hiw-step { display: flex; flex-direction: column; }
.disciplines-grid .hiw-step .disc-note { margin-top: auto !important; }
.disc-list dd { margin-left: 0; }

/* Inverted state must carry the new elements too. */
.hiw-step:hover .disc-def, .hiw-step:focus-within .disc-def,
.hiw-step:hover .disc-note, .hiw-step:focus-within .disc-note {
  color: var(--purple-950) !important;
}
.hiw-step:hover .disc-def, .hiw-step:focus-within .disc-def {
  border-bottom-color: rgba(107,74,31,.35) !important;
}
.hiw-step:hover .disc-note, .hiw-step:focus-within .disc-note {
  border-top-color: rgba(107,74,31,.25) !important;
}

/* The two hairlines inside each subject card are replaced by a small
   centred ornament. A rule spanning the full width read as a hard division
   in a card that is already bounded; a mark reads as a pause. */
.disc-def {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.disc-note {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: auto !important;
}
.disc-def::after,
.disc-note::before {
  content: '✦';
  display: block;
  text-align: center;
  color: var(--gold);
  font-size: .55rem;
  opacity: .65;
  line-height: 1;
}
.disc-def::after { margin: 1.5rem 0; }
.disc-note::before { margin: 1.5rem 0; }

/* The ornament follows the card into its inverted state. */
.hiw-step:hover .disc-def::after, .hiw-step:focus-within .disc-def::after,
.hiw-step:hover .disc-note::before, .hiw-step:focus-within .disc-note::before {
  color: #6b4a1f !important;
}

/* Subject cards centred. The earlier rule set `.hiw-step` left-aligned for
   the old four-step row; the definition lists need it explicitly since dt
   and dd carry their own alignment. */
.disciplines-grid .hiw-step,
.disciplines-grid .hiw-step h3,
.disciplines-grid .disc-def,
.disciplines-grid .disc-note,
.disciplines-grid .disc-list,
.disciplines-grid .disc-list dt,
.disciplines-grid .disc-list dd {
  text-align: center !important;
}
.disciplines-grid .disc-list dd { margin-inline: auto; }

/* The tutor's title carries both the role and the name, so it runs longer
   than the other section headings and does not need their scale. Same face
   and same colour as every other heading. */
.about-title {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem) !important;
  line-height: 1.35 !important;
  max-width: 22em;
  margin-inline: auto;
}

/* The surname is hyphenated, so it was breaking mid-name across two lines.
   The role and the name now sit on their own lines by design, with a
   non-breaking hyphen holding the surname together. */
.about-title .about-name { display: inline-block; }

/* Every section title shares one size and one style. The tutor's heading was
   set smaller because it carries a role and a name; it now matches the rest,
   with the role and the name on their own lines so the extra length is
   handled by the break rather than by shrinking the type. */
.about-title {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important;
  line-height: 1.14 !important;
  max-width: none !important;
}

/* The questions section now carries the compass in the header markup, so the
   glyph that used to be drawn there is no longer needed. */
.faq-section .section-header::before { content: none !important; }
.faq-section .section-header .sigil { margin-bottom: 1.4rem; }

/* The tutor's title is the longest on the site, and `.section-header` caps at
   680px of an 1140px container, so it was wrapping to five visual lines while
   the other titles take one or two. The type size is identical; the extra
   lines were what made it read as larger. Given the full width it settles to
   three. */
.about-section .section-header { max-width: none !important; }
.about-section .section-subtitle { max-width: 46em; margin-inline: auto; }