/* Hills Electrolysis — luxury-editorial design system over the canvas
   scroll engine. The scroll-engine rules at the top of this file are
   load-bearing; do not move them. Everything below the Agent-2 divider
   is the design layer (typography, ornament, motion). */

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

:root {
  --cream: #F5ECD7;
  --cream-soft: rgba(245, 236, 215, 0.82);
  --cream-mute: rgba(245, 236, 215, 0.62);
  --cream-faint: rgba(245, 236, 215, 0.42);
  --amber: #C68B3A;
  --amber-warm: #D8A361;
  --ink: #1a1208;
  --ink-warm: #221809;
  --ink-deep: #120c05;
  --black: #000;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  /* Premium ease curve — exponential ease-out, not the browser default. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

html { scroll-behavior: smooth; }

html,
body {
  margin: 0;
  padding: 0;
  background: #0d0804 !important;
  min-height: 100%;
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { display: block; }

/* --- Hero: scroll driver -------------------------------------------------- */

#hero {
  position: relative;
}

/* The image is pinned to the viewport while #hero scrolls past it. */
.frame-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}

/* Two stacked canvases inside .frame-stage: canvas-a holds the lower
   neighbor frame, canvas-b the upper. The crossfade is driven by canvas-b's
   CSS opacity (set from JS each tick) — GPU-accelerated, no canvas2d alpha. */
.frame-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
}

#canvas-b {
  opacity: 0;
  will-change: opacity;
}

/* This is what gives the page its scroll length.
   800vh = 8 full viewports of vertical scroll mapped across 101 frames. */
.scroll-spacer {
  height: 800vh;
  width: 100%;
}

/* --- Loading screen ------------------------------------------------------- */

#loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 600ms ease;
}

#loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.loading-wordmark {
  font: italic 400 32px/1 var(--serif);
  color: var(--cream);
  letter-spacing: 0.01em;
}

.loading-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: rgba(245, 236, 215, 0.08);
  overflow: hidden;
}

.loading-bar-fill {
  width: 0;
  height: 100%;
  background: var(--amber);
  transition: width 200ms linear;
}

/* --- Hand-off to Agent 2: design system =================================== */

/* Wordmark — top-left, italic Playfair signature. */
.wordmark {
  position: fixed;
  top: 28px;
  left: 28px;
  z-index: 10;
  font: italic 400 22px/1 var(--serif);
  color: var(--cream);
  text-decoration: none;
  opacity: 0;
  animation: wordmark-fade 800ms ease 200ms forwards;
}

@keyframes wordmark-fade {
  to { opacity: 1; }
}

/* Section eyebrow tag — a small uppercase amber label that precedes major
   section headings. Adds editorial weight per high-end-visual-design's
   "Eyebrow Tag" pattern. Centered by default; About overrides to left. */
.section-eyebrow {
  font: 400 11px/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: center;
  margin: 0 0 24px;
}

/* Hero pen image — fixed centred overlay above the canvas, below the
   tagline/logo. Bottom edge is masked to bleed off-screen. Opacity is set
   from script.js per tick (shares the hero-text fade window). */
/* Pen image — the entire hero. Scales with viewport: ~62vw, capped at
   1200px on huge displays, floored at 600px so it's never timid. Bottom
   edge fades to transparent so the image bleeds off-screen on shorter
   viewports. Soft fade-in once the loader clears. */
.hero-pen {
  display: block;
  width: 1200px;
  max-width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  margin: 0 auto;
  flex-shrink: 0;
  pointer-events: none;
  /* Pen sits above all hero text. Stacking inside .hero-text: copy z-index 2,
     other text children z-index 1 (from `.hero-text > *`), pen z-index 6. */
  position: relative;
  z-index: 6;
  opacity: 0;
  transition: opacity 800ms ease 200ms;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

.hero-text.is-ready .hero-pen { opacity: 1; }

/* Logo — fixed-centred in the viewport while the user is still in the hero
   scroll. .is-revealed (set by script.js once frameExact ≥ 90) carries the
   1.5s ease-in fade. .is-flowing (set when #about enters viewport) switches
   the logo to absolute so it rides up the page with subsequent scroll. The
   absolute centre lands at heroBottom − 50vh, which is also where the fixed
   centre is at the boundary moment, so the switch produces no visual jump. */
.hero-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1500ms ease-in;
}

.hero-logo.is-revealed { opacity: 1; }

.hero-logo.is-flowing {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-img {
  width: 500px;
  height: auto;
  display: block;
}

/* Hero text overlay — Apple-style centered hero copy shown before scroll.
   Sits above canvas (z 0) and tagline (z 5), below navbar (z 100) and
   loader (z 200). Entrance staggers in once the loader fades; fade-out is
   scroll-driven from the existing RAF tick (same pattern as .tagline-overlay).
   Vertical anchor pulled slightly above centre for Apple-style optical balance. */
.hero-text {
  /* Pinned to the viewport so it stays put while the canvas frame sequence
     animates underneath. JS fades opacity once the timber starts glowing. */
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Pen + pricing anchor to the bottom; the .hero-copy (absolute, top: 96px)
     stays separately at the top. Slim bottom padding so the pricing line
     sits low in the viewport. */
  justify-content: flex-end;
  text-align: center;
  padding: 0 32px 40px;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 300ms ease;
}

.hero-text.is-hidden { opacity: 0; }

.hero-text::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.hero-text > * {
  position: relative;
  z-index: 1;
}

/* Hero copy — heading on top, tagline + pricing below the pen. Each line
   fades in together when the loader clears (.is-ready), and inherits the
   parent's per-tick opacity for the scroll-driven fade-out. */
.hero-heading,
.hero-tagline,
.hero-pricing {
  margin: 0;
  opacity: 0;
  transition: opacity 800ms ease 200ms;
}

.hero-text.is-ready .hero-heading,
.hero-text.is-ready .hero-tagline,
.hero-text.is-ready .hero-pricing { opacity: 1; }

/* Heading block pinned to the top of the hero so the pen can centre below
   it without the text floating right against the image. */
.hero-copy {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-heading {
  font: italic 400 72px/1.0 var(--serif);
  color: var(--cream);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Tagline sits below the pen image. The gradient is applied to the inner
   <span> with display: inline-block so the gradient only spans the text
   width, not the full <p> width. */
.hero-tagline {
  font: italic 400 32px/1.2 var(--serif);
  color: var(--cream);
  margin-top: 32px;
}

.hero-tagline span {
  display: inline-block;
  background: linear-gradient(to right, #C68B3A, #F5ECD7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-pricing {
  font: 300 13px/1.5 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 236, 215, 0.7);
  margin-top: 18px;
}

/* Scroll-reveal — sections fade and drift up as they enter the viewport.
   JS adds .is-visible via IntersectionObserver. */
/* Slide-up entrance only — no opacity. Opacity-fading the section makes its
   solid background transparent for a split second during fast scroll, which
   exposes the fixed frame-stage canvas (still painting frame 100 = full amber
   glow ≈ cream) behind every content section and reads as a white flash. */
.reveal {
  transform: translateY(30px);
  transition: transform 600ms ease;
}
.reveal.is-visible {
  transform: translateY(0);
}

/* About / What is electrolysis ---------------------------------------------- */
#about {
  position: relative;
  z-index: 1;
  background: var(--ink);
  padding: 144px 24px;
  overflow: hidden;
}

#about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 15% 0%,
    rgba(198, 139, 58, 0.10) 0%,
    rgba(198, 139, 58, 0) 70%
  );
  pointer-events: none;
}

.about-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}

/* Left-align the eyebrow inside the About heading block (default is centred). */
.about-heading-block .section-eyebrow {
  text-align: left;
}

.about-heading {
  font: italic 400 52px/1.1 var(--serif);
  color: var(--cream);
  margin: 0;
  letter-spacing: -0.01em;
}

.about-body {
  font: 400 17px/1.85 var(--sans);
  color: var(--cream-soft);
  margin: 0;
}

.about-divider {
  width: 72px;
  height: 1px;
  background: var(--amber);
  border: 0;
  margin: 36px 0 0;
}

/* Pricing / Services -------------------------------------------------------- */
#pricing {
  position: relative;
  z-index: 1;
  background: var(--ink-deep);
  padding: 144px 24px;
  overflow: hidden;
}

#pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 100%,
    rgba(198, 139, 58, 0.08) 0%,
    rgba(198, 139, 58, 0) 70%
  );
  pointer-events: none;
}

.pricing-heading {
  position: relative;
  font: italic 400 52px/1.1 var(--serif);
  color: var(--cream);
  text-align: center;
  margin: 0 0 64px;
  letter-spacing: -0.01em;
}

/* Editorial price list — replaces the 3-card grid. Hairline dividers between
   rows; service / areas / price as a 3-col baseline-aligned grid. No boxes,
   no borders around items — just rhythm. */
.pricing-list {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.pricing-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.4fr minmax(180px, auto);
  column-gap: 48px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid rgba(245, 236, 215, 0.08);
  transition: border-color 400ms var(--ease-out-quart);
}

.pricing-row:hover {
  border-bottom-color: rgba(198, 139, 58, 0.4);
}

.pricing-row:last-child {
  border-bottom: 0;
}

.pricing-name {
  font: italic 400 32px/1.1 var(--serif);
  color: var(--cream);
  margin: 0;
  letter-spacing: -0.005em;
}

.pricing-areas {
  font: 400 15px/1.6 var(--sans);
  color: var(--cream-mute);
  margin: 0;
}

.pricing-price {
  font: italic 400 24px/1.2 var(--serif);
  color: var(--amber-warm);
  margin: 0;
  text-align: right;
}

/* Inherits font/color from .pricing-price; the .is-done modifier (added by
   script.js when the count-up finishes) pulses on a soft amber glow. */
.count-up {
  transition: text-shadow 800ms ease-out;
}
.count-up.is-done {
  text-shadow: 0 0 30px rgba(198, 139, 58, 0.4);
}

.pricing-note {
  position: relative;
  text-align: center;
  font: 300 12px/1.6 var(--sans);
  color: var(--cream-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 64px 0 0;
}

/* Why choose us ------------------------------------------------------------- */
#why {
  position: relative;
  z-index: 1;
  background: var(--ink-warm);
  padding: 144px 24px;
  overflow: hidden;
}

#why::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 70% at 85% 50%,
    rgba(198, 139, 58, 0.07) 0%,
    rgba(198, 139, 58, 0) 70%
  );
  pointer-events: none;
}

.why-heading {
  position: relative;
  font: italic 400 52px/1.1 var(--serif);
  color: var(--cream);
  text-align: center;
  margin: 0 0 72px;
  letter-spacing: -0.01em;
}

.why-grid {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px 80px;
}

.why-block {
  text-align: left;
  max-width: 440px;
}

/* Italic numeral as the visual anchor — replaces the decorative ✦ icon. */
.why-number {
  display: block;
  font: italic 400 32px/1 var(--serif);
  color: var(--amber-warm);
  letter-spacing: 0;
  margin: 0 0 16px;
}

.why-title {
  font: italic 400 26px/1.25 var(--serif);
  color: var(--cream);
  margin: 0;
}

.why-body {
  font: 400 15px/1.85 var(--sans);
  color: var(--cream-mute);
  margin: 14px 0 0;
  max-width: 50ch;
}

/* FAQ ----------------------------------------------------------------------- */
#faq {
  position: relative;
  z-index: 1;
  background: var(--ink-deep);
  padding: 144px 24px;
}

.faq-heading {
  font: italic 400 52px/1.1 var(--serif);
  color: var(--cream);
  text-align: center;
  margin: 0 0 72px;
  letter-spacing: -0.01em;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid rgba(245, 236, 215, 0.08);
  transition: border-color 400ms ease;
}

.faq-item:hover {
  border-bottom-color: rgba(198, 139, 58, 0.4);
}

.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font: italic 400 20px/1.35 var(--serif);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: color 300ms ease;
}

.faq-question:hover {
  color: var(--amber-warm);
}

.faq-question:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

/* Hairline plus glyph (CSS-drawn) — rotates 45° to become × on open. */
.faq-icon {
  flex: 0 0 auto;
  position: relative;
  width: 14px;
  height: 14px;
  font-size: 0;
  color: transparent;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--amber);
  top: 50%;
  left: 50%;
}
.faq-icon::before {
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
  transition: opacity 400ms ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(90deg);
}
.faq-question[aria-expanded="true"] .faq-icon::after {
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer-inner {
  padding: 4px 0 28px;
  font: 400 15px/1.85 var(--sans);
  color: var(--cream-soft);
  max-width: 90%;
}

/* Contact (was #cta-section) ----------------------------------------------- */
#contact {
  position: relative;
  z-index: 1;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 144px;
  overflow: hidden;
}

#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
}

.cta-rule {
  width: 60px;
  height: 1px;
  background: var(--amber);
  border: 0;
  margin: 0 auto 48px;
}

.cta-heading {
  font: italic 400 56px/1.1 var(--serif);
  color: var(--cream);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.cta-subheading {
  font: 400 17px/1.7 var(--sans);
  color: var(--cream-soft);
  margin: 0 0 56px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  color: var(--amber);
  text-decoration: none;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 22px 18px 32px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  transition:
    background-color 400ms var(--ease-out-quart),
    color 400ms var(--ease-out-quart),
    transform 400ms var(--ease-out-quart),
    box-shadow 400ms var(--ease-out-quart);
}

.cta-button:hover {
  background: var(--amber);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 18px 50px -20px rgba(198, 139, 58, 0.6);
}

.cta-button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(245, 236, 215, 0.06);
  font-size: 14px;
  letter-spacing: 0;
  transition:
    transform 400ms var(--ease-out-quart),
    background 400ms var(--ease-out-quart);
}

.cta-button:hover .cta-button-arrow {
  background: rgba(26, 18, 8, 0.18);
  transform: translate(2px, -1px);
}

.cta-button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.contact-trust {
  font: 400 11px/1.8 var(--sans);
  color: var(--cream-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 40px 0 0;
}

/* Footer ------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--ink-deep);
  padding: 56px 24px;
  border-top: 1px solid rgba(198, 139, 58, 0.15);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.footer-brand {
  font: italic 400 22px/1 var(--serif);
  color: var(--cream);
  letter-spacing: 0.005em;
}

.footer-meta {
  font: 400 12px/1.5 var(--sans);
  color: var(--cream-mute);
  letter-spacing: 0.04em;
}

.footer-copy {
  font: 400 11px/1.5 var(--sans);
  color: var(--cream-faint);
}

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Wordmark sits inside the full-width mobile navbar pill — hide on mobile;
     the brand still surfaces in the loader, the page <title>, and the
     mobile menu overlay. */
  .wordmark { display: none; }

  /* Hero overlay — copy block higher up, pen wider + heading drops to 48px. */
  .hero-text { padding: 0 16px 24px; }
  .hero-copy { top: 88px; }
  .hero-heading { font-size: 44px; }
  .hero-tagline { font-size: 22px; }
  /* Tighter tracking on mobile so "Consultation available · From $45 per
     session" doesn't wrap and clip on a 390-wide viewport. */
  .hero-pricing { font-size: 13px; letter-spacing: 0.08em; }
  .hero-pen { width: 600px; max-height: 70vh; }
  .hero-logo-img { width: 300px; }

  /* Sections */
  #about,
  #why,
  #faq { padding: 80px 24px; }
  #pricing { padding: 96px 24px; }
  .about-heading,
  .pricing-heading,
  .why-heading,
  .faq-heading { font-size: 32px; }
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  /* Pricing rows stack to single column on mobile — name on top, areas
     below, price at the bottom (left-aligned to match the stack). */
  .pricing-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 8px;
    padding: 28px 0;
  }
  .pricing-name { font-size: 28px; }
  .pricing-price { text-align: left; font-size: 20px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* Contact + button + footer */
  .cta-heading { font-size: 32px; }
  .cta-subheading { font-size: 12px; margin-bottom: 36px; }
  .cta-button { display: block; width: 100%; padding: 18px 24px; }
  .contact-trust { margin-top: 40px; }
  #contact { padding: 80px 24px; }
  .site-footer { padding: 40px 24px; }
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .loading-wordmark { font-size: 16px; }
}

/* === Navbar ============================================================== */

.navbar {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.navbar-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: calc(100% - 32px);
  max-width: 520px;
  padding: 12px 20px 12px 28px;
  background: rgba(26, 18, 8, 0.75);
  border: 1px solid rgba(198, 139, 58, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.navbar-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  font: 400 13px/1 var(--sans);
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.08em;
  display: inline-block;
  opacity: 0;
  transform: translateY(-8px);
  animation: nav-fade-down 600ms ease forwards;
  transition: color 400ms var(--ease-out-quart), transform 400ms var(--ease-out-quart);
}
.navbar-links li:nth-child(1) .navbar-link { animation-delay: 100ms; }
.navbar-links li:nth-child(2) .navbar-link { animation-delay: 180ms; }
.navbar-links li:nth-child(3) .navbar-link { animation-delay: 260ms; }
.navbar-links li:nth-child(4) .navbar-link { animation-delay: 340ms; }

.navbar-link:hover {
  color: var(--amber);
  transform: scale(1.05);
}
.navbar-link:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 2px;
}

@keyframes nav-fade-down {
  to { opacity: 1; transform: translateY(0); }
}

.navbar-cta {
  font: 400 13px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transform: translateX(20px);
  animation: nav-slide-in 600ms ease 500ms forwards;
  transition: background-color 400ms var(--ease-out-quart), color 400ms var(--ease-out-quart), transform 400ms var(--ease-out-quart);
}
.navbar-cta:hover {
  background: var(--amber);
  color: var(--ink);
  transform: scale(1.05);
}
.navbar-cta:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

@keyframes nav-slide-in {
  to { opacity: 1; transform: translateX(0); }
}

/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle-line {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--cream);
  transition: transform 300ms ease, opacity 300ms ease;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile slide-in overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 400ms ease,
    visibility 0s linear 400ms;
}
.nav-overlay.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 400ms ease,
    visibility 0s linear 0s;
}

.nav-close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-close span {
  position: absolute;
  width: 22px;
  height: 1px;
  background: var(--cream);
}
.nav-close span:first-child { transform: rotate(45deg); }
.nav-close span:last-child  { transform: rotate(-45deg); }

.nav-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 320px;
  padding: 0 24px;
}
.nav-mobile-link {
  font: italic 400 28px/1 var(--serif);
  color: var(--cream);
  text-decoration: none;
  transition: color 300ms ease;
}
.nav-mobile-link:hover { color: var(--amber); }

.nav-mobile-cta {
  margin-top: 16px;
  width: 100%;
  text-align: center;
  font: 400 13px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  padding: 18px 24px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  transition: background-color 300ms ease, color 300ms ease;
}
.nav-mobile-cta:hover { background: var(--amber); color: var(--ink); }

/* Collapse the navbar to a hamburger sooner than the typography breakpoint
   (1023 vs 768). Below 1024px the pill would otherwise overlap the wordmark
   in the top-left; collapsing earlier frees that space cleanly. */
@media (max-width: 1023px) {
  .navbar { top: 16px; }
  .navbar-pill {
    padding: 10px 12px 10px 20px;
    gap: 12px;
    max-width: calc(100% - 32px);
  }
  .navbar-links,
  .navbar-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* On wide screens, hide the mobile overlay even if `.is-open` lingers from
   a stale resize — keeps the page clean. */
@media (min-width: 1024px) {
  .nav-overlay,
  .nav-overlay.is-open {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
}