/* ============================================================
   Assea — Self-Expression Coaching
   tokens → base → components → sections → motion → responsive
   ============================================================ */

/* ---------- Fonts (self-hosted) ----------
   Built by tools/build-fonts.sh from the pristine files in 00-inputs/fonts/.
   Cormorant is pinned to wght 600 (the only weight used); Inter stays variable
   across 400-700. Do not widen these ranges without rebuilding the woff2. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond.woff2?v=2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic.woff2?v=2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2?v=2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* No metric-override fallback @font-face here, deliberately. Measured on a
   600kbps/300ms profile: adding one removed the 0.0191 metrics shift but left the
   dominant 0.0655 shift untouched (the hero <h1> changes LINE COUNT when the font
   swaps -- on mobile its <br> is hidden so the headline wraps freely, and
   size-adjust is an average-width approximation that cannot guarantee identical
   wrapping). The local() lookups cost ~250ms of TBT on every load in exchange.
   Net: without it TBT is 0 and CLS is 0.000 on a normal mobile connection.
   If CLS on very slow links ever matters, fix the wrap, not the metrics. */

/* ---------- Tokens ---------- */
:root {
  --forest-950: #0a120d;
  --forest-900: #101f16;
  --forest-700: #1e3a2b;
  --forest-500: #3e6b4f;
  --mist: #b8c8bd;
  --paper: #f4f1ea;
  --gold: #c9a45c;
  --gold-bright: #e3c98a;
  --gold-deep: #9a7a3c;
  --ink-on-gold: #1a140a;

  --glass-bg: rgba(16, 26, 20, 0.5);
  --glass-brd: rgba(244, 241, 234, 0.16);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-24: 6rem;

  --radius-card: 24px;
  --radius-pill: 999px;

  --section-pad: clamp(4rem, 10vh, 8rem);
  --container: 72rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--paper);
  background: var(--forest-950);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 var(--space-4);
  letter-spacing: 0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

/* height:auto is required alongside the width/height attributes on <img>: without
   it the attribute's height wins as a presentational hint, and an element with both
   a width and a height ignores aspect-ratio. .bg-media img overrides it below. */
img { max-width: 100%; display: block; height: auto; }

[hidden] { display: none !important; }

a { color: var(--gold-bright); }

::selection { background: rgba(201, 164, 92, 0.35); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--space-4); top: -100%;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--forest-950);
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Layout helpers ---------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container.narrow { max-width: 46rem; }

/* Image-backed sections */
.img-section, .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bg-media, .bg-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.bg-media img { object-fit: cover; object-position: center; }

.scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(5, 10, 7, 0.62) 0%,
    rgba(5, 10, 7, 0.44) 45%,
    rgba(5, 10, 7, 0.72) 100%);
}
.scrim-hero {
  background: linear-gradient(180deg,
    rgba(5, 10, 7, 0.55) 0%,
    rgba(5, 10, 7, 0.30) 40%,
    rgba(5, 10, 7, 0.78) 100%);
}

/* ---------- Glass ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-card);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(14, 22, 17, 0.9); }
}

/* ---------- Type accents ---------- */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-4);
}
.gold-em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(115deg, var(--gold-bright) 20%, var(--gold) 60%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em; /* keep italic terminal inside the clipped box */
}
.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--mist);
  max-width: 34rem;
}
.section-sub {
  color: var(--mist);
  max-width: 38rem;
}

.gold-rule {
  width: 72px;
  height: 1px;
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  position: relative;
}
.gold-rule::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 0.875rem 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  color: var(--ink-on-gold);
  box-shadow: 0 4px 18px rgba(201, 164, 92, 0.28);
}
.btn-gold:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(201, 164, 92, 0.4);
}
.btn-gold:active { transform: translateY(0); }
.btn-ghost {
  color: var(--gold-bright);
  border: 1px solid rgba(201, 164, 92, 0.55);
  background: rgba(10, 18, 13, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--gold-bright);
  background: rgba(201, 164, 92, 0.12);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  padding-top: var(--space-6);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-indent: 0.42em; /* optically recenter tracked-out caps */
}
.hero-inner {
  flex: 1;
  display: flex;
  align-items: center;
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  padding: var(--space-12) 0 var(--space-16);
}
.hero-card {
  max-width: 40rem;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.cta-note {
  font-size: 0.875rem;
  color: var(--mist);
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.375rem;
  transform: translateX(-50%);
  color: rgba(244, 241, 234, 0.75);
  padding: var(--space-2);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: cue-bob 2.4s ease-in-out infinite; }
  @keyframes cue-bob {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50% { transform: translateY(6px); opacity: 1; }
  }
}

/* ---------- Quote ---------- */
.quote-section {
  background:
    radial-gradient(58rem 30rem at 50% 0%, rgba(201, 164, 92, 0.07), transparent 65%),
    var(--forest-950);
  padding: var(--section-pad) 0;
  text-align: center;
}
.pull-quote {
  margin: var(--space-8) 0;
}
.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.45;
  color: var(--gold-bright);
  margin-bottom: var(--space-6);
}
.pull-quote cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ---------- Sections with image + glass card ---------- */
.img-section { padding: var(--section-pad) 0; }
.text-card {
  max-width: 42rem;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.portrait {
  margin: 0;
  max-width: 26rem;
  justify-self: end;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid rgba(201, 164, 92, 0.35);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
}

/* ---------- The Work: three layers ---------- */
.layers-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.layer-card {
  position: relative;
  overflow: hidden;
}
.layer-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--glass-brd);
}
.layer-num {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gold-bright);
  background: rgba(10, 18, 13, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 164, 92, 0.4);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
}
.layer-body { padding: var(--space-6); }
.layer-body h3 { margin-bottom: var(--space-3); }
.layer-body p { color: var(--mist); font-size: 0.9875rem; }
.layers-note {
  margin-top: var(--space-8);
  font-size: 0.875rem;
  color: rgba(184, 200, 189, 0.75);
}

/* ---------- Dark sections (method / how) ---------- */
.dark-section {
  background:
    radial-gradient(50rem 26rem at 85% 15%, rgba(201, 164, 92, 0.05), transparent 60%),
    linear-gradient(180deg, var(--forest-950), var(--forest-900) 55%, var(--forest-950));
  padding: var(--section-pad) 0;
}
.section-head { margin-bottom: var(--space-12); max-width: 44rem; }

.method-grid, .how-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}
.method-grid { grid-template-columns: repeat(3, 1fr); }
.method-card {
  padding: var(--space-8) var(--space-6);
  position: relative;
}
.method-num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-4);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.method-card h3 { margin-bottom: var(--space-3); }
.method-card p { color: var(--mist); font-size: 0.9875rem; }

/* How it works */
.how-section { padding-top: 0; }
.how-grid { grid-template-columns: repeat(3, 1fr); }
.how-step { position: relative; padding-left: 4rem; }
.how-num {
  position: absolute;
  left: 0; top: 0.125rem;
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--gold-bright);
  border: 1px solid rgba(201, 164, 92, 0.5);
  border-radius: 50%;
  background: rgba(201, 164, 92, 0.07);
}
.how-step h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.how-step p { color: var(--mist); font-size: 0.9875rem; }

/* ---------- Booking ---------- */
.book-section .container { display: flex; justify-content: center; }
.book-card {
  width: 100%;
  max-width: 46rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.book-card .section-sub { margin-inline: auto; }
#booking-slot {
  margin-top: var(--space-8);
  min-height: 180px;
}
#booking-slot.has-calendly { min-height: 680px; display: grid; }
#booking-slot.has-calendly .booking-fallback {
  justify-content: center; /* center the loading note in the reserved embed space */
}
/* The Calendly embed is light (see mountCalendly in main.js for why). Matching the
   container to its paper background, with the same radius and border language as
   .glass, makes it read as an intentional inset panel rather than a theme break. */
#booking-slot .calendly-inline-widget {
  min-width: 280px;
  height: 680px;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid rgba(201, 164, 92, 0.45);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.booking-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) 0;
  border: 1px dashed rgba(201, 164, 92, 0.35);
  border-radius: 16px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--forest-950);
  border-top: 1px solid rgba(244, 241, 234, 0.08);
  text-align: center;
  padding: var(--space-16) var(--space-6);
}
.footer .wordmark { font-size: 1.125rem; }
.footer-tag {
  color: var(--gold);
  font-size: 0.8125rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: var(--space-4) 0 var(--space-2);
}
.footer-legal {
  color: rgba(184, 200, 189, 0.6);
  font-size: 0.8125rem;
}

/* ---------- Floating CTA ---------- */
.floating-cta {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Reveal motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    transition-delay: var(--reveal-delay, 0s);
  }
  .js .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 56rem) {
  .method-grid, .how-grid { grid-template-columns: 1fr; }
  .layers-grid { grid-template-columns: 1fr; }
  .layer-card { max-width: 26rem; margin-inline: auto; width: 100%; }
  .how-grid { gap: var(--space-8); }
  .about-grid { grid-template-columns: 1fr; }
  .portrait { justify-self: center; width: min(100%, 22rem); }
  .about-section .text-card { margin-inline: auto; }
}
@media (max-width: 40rem) {
  .hero-inner { align-items: flex-end; }
  .hero-card { text-align: left; }
  .hero-card h1 br { display: none; } /* let the headline wrap naturally on narrow screens */
  .cta-row { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .btn { width: 100%; text-align: center; }
  .topbar .btn { width: auto; }
  .floating-cta { width: auto; }
  #booking-slot .calendly-inline-widget { height: 760px; }
  #booking-slot.has-calendly { min-height: 760px; }
}