/* Holistic Leaders Consulting — design system
   Tokens pulled from Pamela's own client material (moon-phase worksheets):
   dusty sage, near-black, warm cream, black ampersand mark. One warm accent
   added for CTAs — everything else in her existing material is achromatic. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --void: #15170f;
  --void-2: #1d2016;
  --sage: #7c8a72;
  --sage-dim: #5f6b57;
  --cream: #f4efe4;
  --cream-dim: #cfc9ba;
  --ink: #1a1c14;
  --accent: #c08a4e;
  --accent-bright: #d9a768;

  --display: 'Fraunces', Georgia, serif;
  --body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --gap: clamp(1.5rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 10vw, 8rem);
  --measure: 62ch;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Fine grain over every dark ground — the thing that separates a $500
   template flat-fill from a designed surface. Cheap: one inline SVG noise
   filter, tiled, near-invisible on its own, felt everywhere at once. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- type scale — strict, per the design-pass rule ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(3rem, 8vw, 6.8rem); line-height: 0.98; font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; }

/* Gradient ink on the one word that should hit hardest per hero — applied via
   .ink-glow span in copy. Warm gold to bright cream, not a flat color: this
   is the "expensive" tell a flat accent color can't fake. */
.ink-glow {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-bright) 45%, var(--cream) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; }
.eyebrow {
  font-family: var(--body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright);
}
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lede { font-size: 1.2rem; color: var(--cream-dim); }

/* ---- layout ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3rem); }
.section { padding: var(--section-pad) 0; position: relative; z-index: 1; }
.nav, .footer { position: relative; z-index: 1; }
.section--sage { background: var(--sage); color: var(--ink); }
.section--sage h1, .section--sage h2, .section--sage h3 { color: var(--ink); }
.section--sage p { color: var(--ink); opacity: 0.82; }
.section--cream { background: var(--cream); color: var(--ink); }
.section--cream h1, .section--cream h2, .section--cream h3 { color: var(--ink); }
.section--cream p { color: var(--ink); opacity: 0.75; }

/* ---- the ampersand mark — her recurring brand device ---- */
.amp {
  /* UPRIGHT, not italic. Fraunces' italic ampersand swashes into something
     that reads as a script "E" at large sizes - Jason caught this against
     Pamela's actual signature, which uses a plain "&". The roman weight's
     glyph is the traditional et-form and is unambiguous at any size. */
  position: absolute;
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
  opacity: 0.9;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.amp--corner { font-size: clamp(3rem, 7vw, 6rem); top: clamp(1.5rem, 4vw, 3rem); left: clamp(1.5rem, 4vw, 3rem); z-index: 3; }

/* Giant watermark ampersand — the bold version of her mark, not the small
   corner one. Bled off the edge, near-transparent, huge. This is the
   "MotionSite" move: one oversized brand element doing the work three small
   ones can't. */
.amp--watermark {
  font-size: clamp(20rem, 44vw, 46rem);
  right: clamp(-8rem, -6vw, -4rem);
  top: 50%; transform: translateY(-50%);
  opacity: 0.11; z-index: 0;
  filter: blur(0.5px) drop-shadow(0 0 60px rgba(217,167,104,0.25));
  will-change: transform;
}

/* ---- aurora — celestial glow behind the hero. Pushed further after Jason's
   "still way too PG": bigger blooms, brighter, and — the actual difference
   between ambient CSS and a MotionSite section — REACTIVE TO SCROLL, not
   just looping on a timer. JS writes --sy (0-1 scroll progress through the
   header) and the transforms below read it. ---- */
.aurora {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
  --sy: 0;
}

/* ---- constellation — the actual differentiator. Jason, 2026-08-27: "what
   motionsites.ai have that yours don't is motion that is out of the norm...
   yours look like every other coaching site." A blurred gradient blob is a
   decoration; this is a live particle field, drawn every frame, connecting
   into constellation lines when points drift close and answering the
   cursor when one is present. It is the literal form of "moon phases and
   zodiac archetypes" her own material already leans on - stars, not a png
   of stars. ---- */
/* Jason, 2026-08-27: "all of the visual wow in the top, but the rest looks
   like a hamburger bun... the star constellation looks great though." Moved
   from a header-scoped effect to ONE page-wide fixed field, viewport-sized
   rather than section-sized, so it runs the full scroll rather than
   stopping after the hero. Every .section gets its own stacking context
   (below) so a sage/cream section's opaque background correctly occludes
   it, and a plain dark section shows it straight through - no per-section
   logic needed, just normal CSS stacking. */
.constellation {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}

/* ---- custom cursor — desktop/mouse only (see JS: disabled under
   pointer:coarse). A ring that eases toward the real cursor with lag, and a
   core dot that tracks it exactly - the gap between the two IS the motion. ---- */
.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid var(--accent-bright);
  opacity: 0.7; transition: width 220ms var(--ease), height 220ms var(--ease), opacity 220ms;
}
.cursor-dot {
  width: 5px; height: 5px; background: var(--accent-bright);
}
.cursor-ring.is-hover { width: 58px; height: 58px; opacity: 1; background: rgba(217,167,104,0.08); }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: none; }
@media (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none !important; }
}

/* ---- text scramble — headline resolves out of noise on first paint, not a
   fade. Feels built, not templated; the "AI" quality Jason is pointing at. ---- */
[data-scramble] { white-space: pre-wrap; }
/* Scroll parallax lives on two INNER wrappers, not ::before/::after directly —
   an animation's keyframes own the transform property outright while
   running, so a static transform on the same element would just be
   discarded. The wrappers shift with scroll; the blobs drift inside them. */
.aurora-blob { position: absolute; inset: 0; }
.aurora-blob--a { transform: translateY(calc(var(--sy, 0) * 70px)); }
.aurora-blob--b { transform: translateY(calc(var(--sy, 0) * -50px)); }
.aurora-blob--a::before {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
  width: 52vw; height: 52vw; left: -12vw; top: -16vw;
  background: radial-gradient(circle, var(--sage) 0%, transparent 68%);
  opacity: 0.75;
  animation: drift1 22s ease-in-out infinite alternate;
}
.aurora-blob--b::before {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
  width: 44vw; height: 44vw; right: -10vw; top: 4vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
  opacity: 0.5;
  animation: drift2 27s ease-in-out infinite alternate;
}
@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(7vw, 9vw) scale(1.18); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6vw, 6vw) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-blob--a::before, .aurora-blob--b::before { animation: none; }
  .aurora-blob--a, .aurora-blob--b { transform: none; }
}

/* ---- moon phase motif — thin arc, not literal clip-art ---- */
.moon-rule {
  display: flex; align-items: center; gap: 0.5rem; margin: 2.5rem 0;
}
.moon-rule span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-bright); opacity: 0.25;
}
.moon-rule span:nth-child(4) { opacity: 1; box-shadow: 0 0 14px var(--accent-bright); }

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.5rem, 5vw, 3rem);
  background: linear-gradient(to bottom, rgba(21,23,15,0.92), rgba(21,23,15,0));
  transition: background 300ms var(--ease);
}
.nav.is-scrolled { background: rgba(21,23,15,0.94); backdrop-filter: blur(10px); }
.brand { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.01em; }
.brand em { font-style: italic; color: var(--accent-bright); }
.nav-links { display: flex; gap: clamp(1.2rem, 3vw, 2.2rem); font-size: 0.92rem; }
.nav-links a { text-decoration: none; opacity: 0.85; transition: opacity 200ms; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; color: var(--accent-bright); }
.nav-cta {
  padding: 0.6rem 1.3rem; border: 1px solid var(--accent); border-radius: 999px;
  font-size: 0.88rem; text-decoration: none; white-space: nowrap;
  transition: background 200ms, color 200ms;
}
.nav-cta:hover { background: var(--accent); color: var(--void); }
.nav-toggle {
  display: none; background: none; border: none; padding: 0.4rem;
  width: 34px; height: 26px; position: relative; cursor: pointer; z-index: 60;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0.4rem; right: 0.4rem; height: 2px;
  background: var(--cream); transition: transform 260ms var(--ease), opacity 200ms;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-8px) rotate(-45deg); }

/* ---- buttons — the ONE repeated action ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.9rem; border-radius: 999px;
  font-family: var(--body); font-size: 0.95rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
  transition: transform 220ms var(--ease), background 220ms, box-shadow 220ms;
}
.btn--primary { background: var(--accent); color: var(--void); }
.btn--primary:hover { background: var(--accent-bright); transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(192,138,78,0.5); }
.btn--ghost { border-color: currentColor; opacity: 0.85; }
.btn--ghost:hover { opacity: 1; transform: translateY(-2px); }
.btn--on-sage { background: var(--ink); color: var(--cream); }
.btn--on-sage:hover { background: #000; }

/* ---- liquid glass card — her named reference ---- */
/* Liquid glass — her named reference, taken seriously. A flat translucent
   card with a thin border reads as "CSS demo." Real liquid glass needs three
   things at once: a bright top edge catching light, a gradient border that
   implies curvature, and a highlight that answers the cursor. */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(244,239,228,0.10), rgba(244,239,228,0.03));
  border: 1px solid transparent;
  background-clip: padding-box;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 0 0 1px rgba(244,239,228,0.12),
    0 30px 70px -30px rgba(0,0,0,0.65);
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
  overflow: hidden;
}
.glass::before {
  /* the top-edge light catch */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.16) 0%, transparent 28%);
  pointer-events: none;
}
.glass::after {
  /* cursor-following highlight, set via JS custom properties --mx/--my */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%),
              rgba(217,167,104,0.16), transparent 60%);
  opacity: 0; transition: opacity 300ms;
}
.glass:hover::after { opacity: 1; }
.glass:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 0 0 1px rgba(217,167,104,0.3),
    0 40px 90px -30px rgba(0,0,0,0.75);
}

/* ---- reveal on scroll — settles fast, never strands content dim ---- */
.reveal {
  opacity: 0; transform: translateY(22px) scale(0.98);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  transition-delay: calc(var(--stagger, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- grid helpers ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

/* ---- testimonial slider ---- */
.t-slider { position: relative; overflow: hidden; }
.t-track { display: flex; transition: transform 500ms var(--ease); }
.t-slide { flex: 0 0 100%; padding: 0 clamp(0, 4vw, 2rem); }
.t-quote { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.4; max-width: 46ch; }
.t-dots { display: flex; gap: 0.5rem; margin-top: 2rem; }
.t-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: var(--cream-dim); opacity: 0.35; cursor: pointer;
}
.t-dots button.is-active { opacity: 1; background: var(--accent-bright); }

/* ---- footer ---- */
.footer {
  background: var(--void-2); padding: clamp(3rem, 8vw, 5rem) 0 2rem;
  border-top: 1px solid rgba(244,239,228,0.08);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap); }
.footer small { display: block; margin-top: 3rem; opacity: 0.45; font-size: 0.8rem; }
.footer a { text-decoration: none; opacity: 0.75; }
.footer a:hover { opacity: 1; color: var(--accent-bright); }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }

/* ---- mobile — 375px checked, per Phase 4 ---- */
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px);
    flex-direction: column; gap: 0; padding: 6.5rem 2rem 2rem;
    background: rgba(21,23,15,0.98); backdrop-filter: blur(20px);
    transform: translateX(100%); transition: transform 360ms var(--ease);
    z-index: 50;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { padding: 0.9rem 0; font-size: 1.15rem; border-bottom: 1px solid rgba(244,239,228,0.08); }
  .nav-cta { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
  .brand { font-size: 1rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .amp--corner { font-size: 2.4rem; }
  .amp--watermark { display: none; }
}