/* ==========================================================================
   Summit ROI — site.css
   Foundation only: tokens, reset, type scale, layout primitives, components.
   Section-specific styles go BELOW the marked line at the bottom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Every color, size, and space in this site comes from here. If you find
   yourself typing a hex value or a pixel margin anywhere else, stop — either
   the token exists and you missed it, or the design is off-system.
   -------------------------------------------------------------------------- */

:root {
  /* Color — see CLAUDE.md for the contrast rules. Short version:
     --gold on white fails accessibility. Use --bronze for gold text
     under 18px on light, --gold-deep for large numerals on light. */
  --black:        #1A1A1A;
  --black-deep:   #141414;
  --surface-dark: #1F1F1F;
  --border-dark:  #3A3A3A;
  --gold:         #C6A14B;
  --gold-deep:    #A88433;
  --bronze:       #7E6024;
  --cream:        #F4F1EA;
  --white:        #FFFFFF;
  --gray:         #6B6B6B;
  --gray-on-dark: #D8D8D8;
  --gray-mid:     #B9B9B9;
  --rule:         #E5E1D8;
  --error:        #B3402F;

  /* Type */
  --serif: "Source Serif 4", Cambria, Georgia, serif;
  --sans:  "Source Sans 3", Calibri, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing scale — 4/8/12/16/24/32/48/64/96/128.
     No arbitrary margins. If a gap isn't on this scale, the layout is wrong. */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur:  180ms;

  /* Layout */
  --wrap-max: 1120px;
  --radius:   10px;
  --radius-sm: 6px;
}

/* --------------------------------------------------------------------------
   2. RESET
   Not a full normalize.css — just the handful of browser defaults that
   actually cause layout bugs. Fewer rules means fewer things to debug.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;   /* padding counts inside width, not on top of it */
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;  /* stop iOS inflating text in landscape */
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;      /* kills the mystery 4px gap under inline images */
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

button,
input,
select,
textarea {
  font: inherit;       /* form controls don't inherit font by default */
  color: inherit;
}

ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   Fluid via clamp(): min, preferred (viewport-relative), max. One rule
   handles phone through desktop instead of three breakpoints per heading.
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(38px, 6vw, 68px); }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; }

h4 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

p { max-width: 62ch; }   /* readable line length, independent of container */

.lead {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--gray);
}

.sm    { font-size: 15px; }
.muted { color: var(--gray); }

/* The eyebrow. Bronze, never --gold: at this size gold on white is 2.4:1
   and fails WCAG AA. On dark sections .dark overrides it back to gold. */
.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bronze);
  margin-bottom: var(--s3);
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--s5);
}

/* Mobile-first: --s8 on phones, --s9 from 768px up.
   Every media query in this file is min-width. Never max-width — mixing the
   two is how you end up with rules that fight each other at one breakpoint. */
.sec {
  padding-block: var(--s8);
}

@media (min-width: 768px) {
  .sec { padding-block: var(--s9); }
  .wrap { padding-inline: var(--s6); }
}

.sec-head { margin-bottom: var(--s7); }
.sec-head .lead { margin-top: var(--s4); }

/* Dark sections. Applied as .sec.dark — flips text colors and the eyebrow. */
.dark {
  background: var(--black);
  color: var(--gray-on-dark);
}
.dark h1,
.dark h2,
.dark h3,
.dark h4 { color: var(--white); }
.dark .eyebrow { color: var(--gold); }
.dark .lead,
.dark .muted { color: var(--gray-mid); }

/* Grid. Single column on mobile, N columns from 768px.
   gap uses --s5; nothing here sets margins on children. */
.grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   5. COMPONENTS
   -------------------------------------------------------------------------- */

/* Cards. Cream fill IS the boundary — no border, no shadow anywhere on
   this site. Depth comes from surface color only. */
.card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--s5);
}

.dark .card {
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 34px;
  min-height: 44px;              /* touch target floor */
  border: 1px solid transparent;
  border-radius: 999px;          /* full pill */
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color      var(--dur) var(--ease),
              border     var(--dur) var(--ease);
}

/* Primary — always the booking action. One per screen. */
.btn-p {
  background: var(--gold);
  color: var(--black);
}
.btn-p:hover { background: var(--gold-deep); }

/* Secondary on light */
.btn-s {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn-s:hover {
  background: var(--black);
  color: var(--white);
}

/* Secondary on dark */
.dark .btn-s {
  color: var(--gold);
  border-color: var(--gold);
}
.dark .btn-s:hover {
  background: var(--gold);
  color: var(--black);
}

/* Focus. Never remove this. :focus-visible shows the ring for keyboard
   users but not on mouse click, which is why it isn't :focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* Form fields */
.field { margin-bottom: var(--s4); }

.field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: var(--s2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.field input::placeholder { color: var(--gray); }

.field .help {
  font-size: 14px;
  color: var(--gray);
  margin-top: var(--s2);
}

.field .err {
  font-size: 14px;
  color: var(--error);
  margin-top: var(--s2);
}

/* Skip link — first focusable element on the page, hidden until focused.
   Required for keyboard users so they can jump past the nav. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--white);
  padding: var(--s3) var(--s4);
  z-index: 100;
}
.skip:focus {
  left: var(--s4);
  top: var(--s4);
}

/* --------------------------------------------------------------------------
   6. MOTION
   Scroll reveals are opt-in per element via .reveal, flipped to .is-in by
   IntersectionObserver. Hero content NEVER gets .reveal — the headline is
   visible on load, always.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Non-negotiable. If JS fails to load, .reveal elements would stay invisible
   forever — this block also means reduced-motion users always see content. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   SECTION STYLES BELOW THIS LINE
   Nothing above this line is section-specific. Keep it that way.
   ========================================================================== */
/* ==========================================================================
   APPEND EVERYTHING BELOW TO THE BOTTOM OF assets/css/site.css
   (below the "SECTION STYLES BELOW THIS LINE" banner)
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAV
   Transparent over the dark hero, solid white past 80px scroll.
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;          /* top/right/left 0, bottom auto */
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.nav.is-solid {
  background: var(--white);
  border-bottom-color: var(--rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 72px;
}

/* Logo swap. Both marks are in the DOM; CSS shows one. width/height are set
   on the <img> tags too — that reserves the space before the image loads,
   which is what keeps CLS at zero. */
.nav-logo { display: block; }
.nav-logo img { height: 34px; width: auto; }
.nav-logo .mark-on-light { display: none; }
.nav.is-solid .mark-on-dark { display: none; }
.nav.is-solid .mark-on-light  { display: block; }

.nav-links a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  transition: color var(--dur) var(--ease);
}

.nav.is-solid .nav-links a { color: var(--black); }

.nav-links .nav-cta,
.nav.is-solid .nav-links .nav-cta { color: var(--black); }

/* Hamburger. Three spans that rotate into an X. */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;              /* touch target floor */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: var(--white);
  transition: transform var(--dur) var(--ease),
              opacity   var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.nav.is-solid .nav-toggle span { background: var(--black); }
.nav-toggle.is-open span { background: var(--white); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* MOBILE: full-screen dark overlay, links in Source Serif at 20px,
   button pinned to the bottom. */
@media (max-width: 899px) {
  .nav-links {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s6);
    padding: var(--s10) var(--s5) var(--s8);
    background: var(--black);
    transform: translateX(100%);
    transition: transform 260ms var(--ease);
    visibility: hidden;
  }

  .nav-links.is-open {
    transform: none;
    visibility: visible;
  }

  .nav-links a {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--white);
  }

  .nav.is-solid .nav-links a { color: var(--white); }

  .nav-links .nav-cta {
    margin-top: auto;         /* pins the button to the bottom of the overlay */
    font-family: var(--sans);
    font-size: 13px;
  }

  .nav-toggle.is-open { position: relative; z-index: 1; }

  body.menu-open { overflow: hidden; }  /* stop the page scrolling behind */
}

/* DESKTOP: horizontal links, no hamburger. 900px because the four nav items
   plus the pill button stop fitting comfortably below that. */
@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--s6);
  }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;                 /* clips the watermark bleed */
  background: var(--black);
  color: var(--gray-on-dark);
  padding-top: calc(72px + var(--s9));   /* clears the fixed nav */
  padding-bottom: var(--s9);
  min-height: 100svh;               /* svh, not vh — see note below */
  display: flex;
  align-items: center;
}

/* Why 100svh and not 100vh: on mobile Safari, 100vh means the viewport with
   the URL bar HIDDEN, so a 100vh hero is taller than what you can actually
   see and the button gets pushed below the fold. svh is the small viewport
   height — the visible area with browser chrome showing. This single unit
   is the difference between the CTA being above the fold at 375px or not. */

.hero-inner {
  position: relative;
  z-index: 1;                       /* above the watermark */
}

.hero .eyebrow { color: var(--gold); }

.hero h1 { color: var(--white); }

.hero-lead {
  color: var(--gray-mid);
  margin-top: var(--s5);
  margin-bottom: var(--s7);
}

.hero-watermark {
  position: absolute;
  right: -8%;
  bottom: -12%;
  width: 560px;
  max-width: 90%;
  opacity: 0.09;                    /* spec range is 7–12% */
  pointer-events: none;
  user-select: none;
}

@media (min-width: 768px) {
  .hero-watermark { width: 680px; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--black-deep);
  color: var(--gray-mid);
  padding-block: var(--s8);
}

.footer img { height: 36px; width: auto; }

.footer-tag {
  font-family: var(--serif);
  color: var(--gray-on-dark);
  margin-top: var(--s4);
}

.footer-top {
  display: grid;
  gap: var(--s7);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--border-dark);
}

.footer address {
  font-style: normal;
  line-height: 1.8;
}

.footer a {
  color: var(--gray-on-dark);
  text-decoration: none;
}

.footer a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s5);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  font-size: 15px;
}

@media (min-width: 768px) {
  .footer-top { grid-template-columns: 1fr auto; }
}
/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   Sections 02 and 03.
   ========================================================================== */

/* Sections 02 and 03 are both light, which the guide allows (never MORE than
   two consecutive in one mode). To stop them reading as one long white slab,
   03 sits on cream. That's the only difference — no border, no shadow. */
.sec-alt {
  background: var(--cream);
}

/* Cards inside a cream section can't be cream, or they vanish. Flip to white. */
.sec-alt .card {
  background: var(--white);
}

/* --------------------------------------------------------------------------
   PILLARS — section 03
   Deliberately NOT .card. Section 02's three cream cards and section 03's
   three items would otherwise look identical, and the reader would skim past
   the second set. Pillars are open — icon, heading, text, no container.
   -------------------------------------------------------------------------- */

.pillar-icon {
  width: 32px;
  height: 32px;
  /* currentColor on the SVG means this one line colors the whole icon.
     Deep Gold, not Summit Gold — at 32px on cream, --gold is legible as a
     non-text element, but --gold-deep holds up better in daylight and keeps
     the icon consistent with the numerals elsewhere on light sections. */
  color: var(--gold-deep);
  margin-bottom: var(--s4);
}

.pillar h3 {
  margin-bottom: var(--s3);
}

/* Card headings need the same treatment — the reset stripped all margins,
   so every gap on this site is set deliberately, from the scale. */
.card h3 {
  margin-bottom: var(--s3);
}

/* --------------------------------------------------------------------------
   REVEAL STAGGER
   Cards in a grid all cross the viewport threshold at the same instant, so
   without a stagger they pop in as one block, which reads as a glitch rather
   than an animation. 80ms apart is enough to feel intentional and short
   enough that nobody waits for it.

   These delays are overridden to 0 by the prefers-reduced-motion block in
   the foundation — no extra work needed here.
   -------------------------------------------------------------------------- */

.grid .reveal:nth-child(2) { transition-delay: 80ms; }
.grid .reveal:nth-child(3) { transition-delay: 160ms; }
/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   Section 04 — numbered step cards.
   ========================================================================== */

/* Step cards. Same cream fill and radius as .card, plus the numeral.
   Kept as a separate class rather than a .card modifier because the number
   is structural here, not decoration — this is the only place on the site
   where numbered markers are allowed. */
.step {
  position: relative;          /* needed so cards sit above the connector line */
  z-index: 1;
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--s5);
}

.step .sn {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold-deep);     /* Deep Gold on light — Summit Gold would fail contrast */
  margin-bottom: var(--s3);
}

.step h3 { margin-bottom: var(--s3); }

/* Card 06 inverts. Colors are set explicitly rather than reusing .dark,
   because .dark is a section-level class and nesting it inside a light
   section would cascade into anything added here later. */
.step.black {
  background: var(--black-deep);
  color: var(--white);
}
.step.black .sn    { color: var(--gold); }
.step.black h3     { color: var(--white); }
.step.black .muted { color: var(--gray-on-dark); }

/* --------------------------------------------------------------------------
   THE CONNECTOR LINE — mobile only
   The guide asks for a vertical line when these stack, so the six cards keep
   reading as ONE flow rather than six separate claims. That distinction is
   the whole point of the section.

   How it works: a 1px line runs the full height of the grid, behind the
   cards (z-index 0 vs the cards' 1). Because the cards have solid fills, the
   line is only visible in the --s5 gaps between them. The result looks like
   deliberate connectors without needing an element per gap.

   Hidden at 768px and up, where the cards sit in a 3x2 grid and a vertical
   line would connect the wrong pairs.
   -------------------------------------------------------------------------- */

.steps {
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule);
  z-index: 0;
}

@media (min-width: 768px) {
  .steps::before { display: none; }
}

/* Six cards means the :nth-child(2)/(3) stagger from round 2 leaves cards
   4-6 with no delay. Extend it so the whole grid staggers evenly.
   These are overridden to instant by prefers-reduced-motion in the
   foundation — nothing extra needed here. */
.grid .reveal:nth-child(4) { transition-delay: 240ms; }
.grid .reveal:nth-child(5) { transition-delay: 320ms; }
.grid .reveal:nth-child(6) { transition-delay: 400ms; }
/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   Section 07 — comparison panel.
   ========================================================================== */

.compare-col {
  padding: var(--s5);
  border-radius: var(--radius);
}

/* The left column gets no fill — it's the status quo, and it should feel
   flatter than the right one. The right column gets --surface-dark plus a
   hairline, which is the guide's only permitted way to create depth on a
   dark section. No shadows anywhere on this site. */
.compare-col-yes {
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
}

.compare-h {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s5);
}

.dark .compare-col .compare-h     { color: var(--gray-mid); }
.dark .compare-col-yes .compare-h { color: var(--gold); }

/* --------------------------------------------------------------------------
   TICK LISTS
   Markers are drawn in CSS rather than added as elements or SVGs. Two
   reasons: the markup stays a plain <ul>, which is what a screen reader
   should hear, and there's no per-item icon to keep in sync.

   The list items carry no semantic "yes"/"no" meaning for assistive tech —
   the column headings do that work. Decorative markers should never be the
   only thing carrying meaning.
   -------------------------------------------------------------------------- */

.ticks li {
  position: relative;
  padding-left: 34px;
  padding-block: var(--s3);
  font-size: 15px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border-dark);
}

.ticks li:last-child { border-bottom: none; }

/* Negative column: a thin dash, deliberately quiet. A red X here would
   read as an error state and make the section feel like an attack ad. */
.ticks-no li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 26px;
  width: 12px;
  height: 1px;
  background: var(--gray-mid);
}

/* Positive column: the gold circle checkmark — per the guide, the only
   place on the site where an icon sits inside a colored badge.
   Built from two rotated borders on a pseudo-element: ::before is the
   filled circle, ::after is the tick. */
.ticks-yes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
}

.ticks-yes li::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 22px;
  width: 4px;
  height: 8px;
  border: solid var(--black);
  border-width: 0 1.5px 1.5px 0;   /* only right + bottom edges = an L shape */
  transform: rotate(45deg);        /* rotated 45deg, an L becomes a checkmark */
}

/* On mobile the two columns stack, so give them air between. */
.compare-col + .compare-col { margin-top: var(--s2); }

@media (min-width: 768px) {
  .compare-col + .compare-col { margin-top: 0; }
}
/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   Section 08 — pricing close.
   ========================================================================== */

/* The closing block. Centered because it's a full stop at the end of a
   six-card grid — left-aligning it would read as a seventh item. This is
   the only centered text block on the page, which is what makes it land. */
.pricing-close {
  margin-top: var(--s7);
  text-align: center;
}

.pricing-close .lead {
  /* p has max-width:62ch from the foundation, and margin-inline:auto is what
     actually centers a max-width block — text-align alone won't move the box. */
  margin-inline: auto;
  margin-bottom: var(--s5);
}

/* The nth-child stagger from earlier rounds only runs to :nth-child(6),
   which covers this grid exactly. Nothing to add. */
/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   Section 09 — FAQ accordion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Built on native <details>/<summary>, not a JS accordion.

   What that buys, for free and with zero code:
     - keyboard operable (Enter/Space toggles, Tab moves between)
     - correct screen reader announcement of expanded/collapsed state
     - Ctrl+F finds text inside CLOSED panels in modern browsers
     - works if JavaScript fails entirely

   A hand-rolled JS accordion has to reimplement all of that correctly, and
   most don't. Reach for the native element first; only replace it when you
   need behavior it can't do (like closing siblings automatically).
   -------------------------------------------------------------------------- */

.faq {
  max-width: 760px;   /* narrower than .wrap — long single-column text needs it */
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  /* Removes the default disclosure triangle. Needs both properties:
     list-style for Firefox, ::-webkit-details-marker for Safari. */
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: var(--s5) 44px var(--s5) 0;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* The chevron. Same two-border-and-rotate trick as the checkmarks in
   section 07 — an L shape rotated 45deg. Here it's rotated again when the
   panel opens, and the transition makes it flip rather than jump. */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border: solid var(--gold-deep);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

/* Focus ring sits on the summary, which is the actual interactive element.
   The foundation's :focus-visible rule doesn't cover <summary>, so it's
   declared here rather than left to fail silently. */
.faq-item summary:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.faq-a {
  padding-bottom: var(--s5);
}

.faq-a p { margin-bottom: 0; }

/* Placeholder answers are flagged in the browser so they can't ship
   unnoticed. DELETE THIS RULE once AJ's real copy is in. */
/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   Section 10 — booking CTA.
   ========================================================================== */

.book {
  position: relative;
  overflow: hidden;      /* clips the watermark where it bleeds off the corner */
  text-align: center;
}

.book-inner {
  position: relative;
  z-index: 1;            /* keeps content above the watermark */
}

/* Watermark. Guide spec: the mark at 500-700px, 7-12% opacity, bleeding off
   a bottom corner, dark sections only, max two per page (hero + this one).
   It must never reduce text contrast — 8% on near-black is well under the
   threshold where it could. */
.book-watermark {
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 560px;
  max-width: none;       /* overrides the global img max-width:100% */
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.book-mark {
  width: 48px;
  height: auto;
  margin: 0 auto var(--s5);
  opacity: 0.9;
}

.book h2 { margin-bottom: var(--s5); }

.book .lead {
  margin-inline: auto;   /* text-align alone won't center a max-width block */
  margin-bottom: var(--s2);
}

/* --------------------------------------------------------------------------
   THE EMBED SLOT

   min-height is reserved BEFORE the iframe exists. This is the single most
   important line in this file for the performance spec.

   An iframe with no reserved height renders at 0px, then jumps to ~700px
   when the third-party script loads. Everything below it shifts down. That
   is Cumulative Layout Shift, the spec floor is 0.1, and a single unreserved
   embed will blow past it on its own.

   Reserving the space means the iframe loads into a hole that's already the
   right shape and nothing moves.
   -------------------------------------------------------------------------- */

.book-embed {
  margin: var(--s7) auto 0;
  max-width: 760px;
  min-height: 640px;     /* GHL calendars run tall on mobile */
}

@media (min-width: 768px) {
  .book-embed { min-height: 700px; }
}

/* The iframe itself, once AJ's code is pasted in. Width 100% and a border
   radius to match every other surface on the site. */
.book-embed iframe {
  width: 100%;
  min-height: inherit;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);   /* stops a black flash before the embed paints */
}

/* Placeholder state. Delete this rule and the .book-embed-ph markup once
   the real embed is in. */
.book-embed-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  min-height: inherit;
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius);
  color: var(--gray-mid);
}

.book-tagline {
  margin-top: var(--s7);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}
/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   404 page, legal pages, and the centering fix on the booking tagline.
   ========================================================================== */

/* --- FIX: booking tagline was left-aligned -------------------------------
   p has max-width:62ch from the foundation. text-align:center centers text
   INSIDE a box; it doesn't center the box. margin-inline:auto does that.
   Any time something looks "sort of centered but shifted left," this is why. */
.book-tagline {
  margin-inline: auto;
}

/* --- 404 ----------------------------------------------------------------- */

.page-404 {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--s10);
}

.page-404 h1 { margin-bottom: var(--s5); }
.page-404 .lead { margin-inline: auto; margin-bottom: var(--s7); }

.page-404-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

@media (min-width: 600px) {
  .page-404-actions { flex-direction: row; justify-content: center; }
}

/* --- LEGAL PAGES ---------------------------------------------------------
   These pages sit under the fixed nav with no dark hero above them, so they
   need top padding the homepage doesn't. Without it the H1 hides behind
   the nav bar — a bug you only see on interior pages. */

.legal-head {
  padding-top: calc(72px + var(--s8));   /* nav height + normal section padding */
  padding-bottom: var(--s6);
}

/* Long-form prose. Narrower than .wrap because 62ch is the readable limit
   and legal text is the one place people actually read every line. */
.legal {
  max-width: 720px;
}

.legal h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-top: var(--s7);
  margin-bottom: var(--s4);
}

.legal h2:first-child { margin-top: 0; }

.legal h3 {
  font-size: 19px;
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}

.legal p,
.legal li {
  margin-bottom: var(--s4);
  font-size: 16px;
}

/* Legal lists need visible markers — the global reset strips them, which is
   right for nav and card grids and wrong here. */
.legal ul,
.legal ol {
  margin: 0 0 var(--s4) var(--s5);
}

.legal ul li { list-style: disc; }
.legal ol li { list-style: decimal; }
.legal li { margin-bottom: var(--s2); }

.legal a {
  color: var(--bronze);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-date { color: var(--gray); }
/* --- Interior pages: nav must start solid --------------------------------
   The nav is transparent until 80px of scroll because it's designed to sit
   over the dark hero. Pages with no dark hero get white links on a white
   background — the nav is present and invisible.

   Done in CSS rather than JS deliberately: a JS-dependent fix would leave
   the nav unusable if the script failed to load. This can't fail. */

body.page-light .nav {
  background: var(--white);
  border-bottom-color: var(--rule);
}

body.page-light .nav .mark-on-dark  { display: none; }
body.page-light .nav .mark-on-light { display: block; }

body.page-light .nav-toggle span         { background: var(--black); }
body.page-light .nav-toggle.is-open span { background: var(--white); }

/* Desktop only. Below 900px the links sit inside the dark full-screen
   overlay, where white is already correct — forcing black there would make
   them invisible against the overlay. Same bug, opposite direction. */
@media (min-width: 900px) {
  body.page-light .nav-links a { color: var(--black); }
}/* ==========================================================================
   APPEND TO THE BOTTOM OF assets/css/site.css
   Section 04b — Who it's for.
   ========================================================================== */

/* Vertical labels as pills.

   flex-wrap rather than grid on purpose: the items are different widths and
   there's no meaning in column alignment here. Grid would force equal
   columns and leave awkward gaps after the short labels. Flex-wrap lets
   each pill size to its own text and flow to the next line naturally —
   which also means adding or removing a vertical needs no CSS change. */

.verticals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.verticals li {
  padding: var(--s3) var(--s5);
  background: var(--white);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* This section sits on cream (.sec-alt), so the pills are white — same
   one-step contrast the cards use. No border, no shadow, consistent with
   every other surface on the site. */

.verticals-note {
  margin-top: var(--s5);
}