/* =============================================================
   Illustrious Title — one-page custom styles
   Brand: warm charcoal + gold + warm ivory. Playfair + Inter.
   ============================================================= */

:root {
  --gold: #C9A84C;
  --gold-bright: #E0C36B;
  --gold-deep: #9C7F32;
  --charcoal: #221F1C;
  --charcoal-lift: #3A3633;
  --near-black: #0A0908;
  --cream: #EFE8D6;
  --warm-white: #F5F0E8;
  --warm-ink: #6B625E;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; background: var(--warm-white); }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }
[x-cloak] { display: none !important; }

/* Offset in-page anchors for the fixed header */
section[id] { scroll-margin-top: 84px; }

/* ---------- Signature details ---------- */
.eyebrow {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
}
.wordmark {
  font-family: 'Inter', sans-serif; font-weight: 300;
  letter-spacing: 0.3em; text-transform: uppercase;
}
/* Engraved certificate hairline */
.rule-gold {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.85) 50%, transparent 100%);
}
.rule-gold-left {
  height: 1px; width: 56px; border: 0;
  background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0));
}
/* Large engraved index numeral */
.index-num {
  font-family: 'Playfair Display', serif; font-style: italic;
  line-height: 1; color: var(--gold);
}

/* ---------- Reveal on scroll (ease-out-expo, no bounce) ---------- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Legacy fade-in (kept for any retained markup) */
.fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */
.hero-overlay {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(201,168,76,0.10) 0%, rgba(201,168,76,0) 55%),
    linear-gradient(180deg, rgba(10,9,8,0.78) 0%, rgba(34,31,28,0.62) 45%, rgba(10,9,8,0.94) 100%);
}

/* ---------- Accordion (grid-template-rows, not height) ---------- */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out-expo); }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-panel > .acc-inner { overflow: hidden; }

/* ---------- Form fields ---------- */
.field {
  width: 100%; background: #fff; color: var(--charcoal);
  border: 1px solid rgba(34,31,28,0.16); border-radius: 8px;
  padding: 0.8rem 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.22); }

/* ---------- Animated gold underline for nav links ---------- */
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: var(--gold); transition: width 0.35s var(--ease-out-expo);
}
.navlink:hover::after, .navlink.active::after { width: 100%; }

/* Quote mark flourish */
.quote-mark {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 5rem; line-height: 0.5; color: var(--gold); opacity: 0.5;
}