/* ============================================================
   New Day Marriage

   Palette (brand, Oct 2026): deep teal #285C5B, sage green #8FA58A,
   dusty blue #8FAFC0, warm cream #F7F4ED, soft gold #C6A15B.
   Teal carries trust and permanence (the --forest tokens keep their
   names so nothing else changes), gold is the single accent and is
   reserved for CTAs and eyebrows so the eye always knows where the
   next action is. Sage tints the hairlines and the muted text on dark
   bands. Dusty blue is used once, on the tinted outcome cell.

   Radius rule (one system, applied everywhere):
     surfaces and panels  14px
     controls and inputs  10px
     badge                pill
     avatars              circle

   Motion: MOTION_INTENSITY 4. Entry reveal for hierarchy, press feedback
   for acknowledgement, hover for affordance. Nothing decorative.
   ============================================================ */

:root {
  color-scheme: light;

  --forest:      #285c5b;   /* deep teal */
  --forest-deep: #1e4746;
  --forest-mid:  #35706e;
  --amber:       #c6a15b;   /* soft gold */
  --amber-dark:  #b08c48;   /* button hover fill only */
  --amber-text:  #7e6128;   /* gold at text weight, WCAG AA on cream (5.3:1) */
  --amber-light: #e8cc8c;   /* gold at text weight on the teal band (AA) */
  --sage:        #8fa58a;
  --blue:        #8fafc0;   /* dusty blue */

  --paper:       #f7f4ed;   /* warm cream */
  --paper-2:     #efebe2;
  --surface:     #ffffff;
  --line:        #d3dacf;   /* sage-tinted hairline */

  --ink:         #172726;
  --ink-2:       #4e5f5d;

  --on-dark:     #f7f4ed;
  --on-dark-2:   #c2d1be;   /* sage-tinted, 4.75:1 on teal */
  --line-dark:   rgba(247, 244, 237, 0.16);

  --r-surface: 14px;
  --r-control: 10px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wrap: 1200px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1em; }
a { color: var(--ink); }

h1, h2, h3 {
  margin: 0 0 .45em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.02em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }
section { padding: 100px 0; }

.section-head { margin-bottom: 56px; max-width: 62ch; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-sub { color: var(--ink-2); font-size: 1.1rem; margin-bottom: 0; }
.lead-para { font-size: 1.12rem; }
.micro { font-size: .87rem; line-height: 1.55; color: var(--ink-2); }
.eyebrow {
  margin: 0 0 1.2em;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-text);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: 14px 20px; border-radius: var(--r-control); z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 2px solid var(--amber-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Buttons. Every CTA is an anchor. ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  font: inherit;
  font-size: .98rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease-out),
              background-color 160ms ease,
              border-color 160ms ease,
              color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 58px; padding: 17px 32px; font-size: 1.04rem; }
.btn-block { width: 100%; }

.btn-accent { background: var(--amber); color: #12211b; border-color: var(--amber); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet { background: transparent; color: var(--ink); border-color: transparent; padding: 14px 14px; }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: var(--line-dark); }

@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover { background: var(--amber-dark); border-color: var(--amber-dark); }
  .btn-outline:hover { border-color: var(--ink); }
  .btn-quiet:hover { color: var(--amber-text); border-color: var(--line); }
  .btn-ghost-light:hover { border-color: var(--amber); color: var(--amber); }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }

/* ---------- Nav. One line, 72px. ---------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  padding: 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 36px; height: 72px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { width: auto; height: 46px; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { font-size: .95rem; font-weight: 550; color: var(--ink-2); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-phone { font-size: .95rem; font-weight: 650; text-decoration: none; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover, .nav-phone:hover { color: var(--amber-text); }
}

/* ---------- Hero. Asymmetric split. ---------- */
.hero { padding: 76px 0 92px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: center;
}
.hero .sub {
  max-width: 30ch;
  margin-bottom: 0;
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.hero-media { display: flex; justify-content: flex-end; }
.hero-player {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  box-shadow: 0 20px 50px color-mix(in srgb, var(--forest) 20%, transparent);
}

/* ---------- Trust strip. ---------- */
.trust { padding: 0 0 88px; }
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 34px 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-row li { padding: 0 24px; border-left: 1px solid var(--line); }
.trust-row li:first-child { border-left: 0; padding-left: 0; }
.trust-row strong {
  display: block;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -.03em;
}
.trust-row span { font-size: .88rem; color: var(--ink-2); }

/* ---------- Stakes. Stacked rows, one hairline between. ---------- */
.stakes { background: var(--paper-2); }
.stack-rows { margin: 0; padding: 0; list-style: none; }
.stack-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.stack-row:last-child { border-bottom: 1px solid var(--line); }
.row-num { font-size: 1rem; font-weight: 700; color: var(--amber-text); letter-spacing: .04em; }
.row-body { max-width: 62ch; }
.row-body h3 { margin-bottom: .3em; }
.row-body p { margin: 0; color: var(--ink-2); }

.closing-line {
  max-width: 60ch;
  margin: 40px 0 0;
  font-size: 1.16rem;
  font-weight: 650;
  color: var(--ink);
}

/* Shared centred CTA, used by any section that needs one mid-page. */
.section-cta { margin-top: 48px; text-align: center; }
.section-cta .micro { margin: 16px 0 0; }

/* ---------- Mechanism. The spine of the argument. ---------- */
.mechanism { background: var(--paper-2); }
.mechanism p { color: var(--ink-2); }
.callout {
  margin-top: 40px;
  padding: 26px 30px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--surface);
}
.callout p { margin: 0; color: var(--ink); }

/* ---------- Cost of divorce. Plain numbers, no drama. ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 56px;
  padding: 34px 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-grid li { padding: 0 26px; border-left: 1px solid var(--line); }
.stat-grid li:first-child { border-left: 0; padding-left: 0; }
.stat-grid strong {
  display: block;
  margin-bottom: 8px;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
}
.stat-grid span { font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.cost-body { margin: 0; }
.cost-body p { color: var(--ink-2); font-size: 1.05rem; }
.cost-punch {
  margin: 30px 0;
  padding: 22px 26px;
  border-radius: var(--r-control);
  background: var(--forest);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--on-dark) !important;
}
.cost-body .section-cta { margin-top: 44px; }
.sources { margin-top: 40px; font-size: .84rem; font-style: italic; color: var(--ink-2); }

/* ---------- The differentiator, inside the about copy. ---------- */
.differentiator {
  margin: 28px 0 0;
  padding: 24px 26px;
  border-radius: var(--r-control);
  background: var(--paper-2);
}
.diff-lead { font-size: 1.1rem; font-weight: 700; color: var(--ink) !important; margin-bottom: .5em; }
.differentiator p:last-child { margin: 0; }

/* ---------- Limits. The Three A's. ---------- */
.limits { background: var(--paper-2); }
.limits-panel {
  padding: 52px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-surface);
  background: var(--surface);
}
.limits-copy { max-width: 72ch; }
.limits-copy p { color: var(--ink-2); }
.limits-copy strong { color: var(--ink); }
.limits-scope {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .92rem;
}

/* ---------- Scholarship. ---------- */
.scholarship p { color: var(--ink-2); }

/* ---------- Testimonials. A literal list, one .quote card per couple. ---------- */
.quote-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.quote blockquote p:last-child { margin-bottom: 0; }

/* ---------- Service area, the local SEO block. ---------- */
.service-area {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.service-area h3 { font-size: 1.1rem; }
.service-area p { font-size: .96rem; color: var(--ink-2); margin: 0; }

/* ---------- Value. Bento, 4 cells for 4 items. ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.cell {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
}
.cell-wide { grid-column: span 7; }
.cell-body { padding: 30px; }
.cell-body p { margin: 0; color: var(--ink-2); }
.cell-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 32%; }
.cell-tint { background: var(--blue); border-color: var(--blue); }
.cell-tint h3, .cell-tint p { color: #12211b; }

/* ---------- Mike and Sarah. Split, image left. ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 76px;
  align-items: center;
}
.about-media img {
  width: 100%;
  border-radius: var(--r-surface);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.about-copy p { color: var(--ink-2); }
.check-list { margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 30px;
  color: var(--ink);
}
.check-list li::before {
  content: "";
  position: absolute; left: 2px; top: .5em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--amber-text);
  border-bottom: 2px solid var(--amber-text);
  transform: rotate(-45deg);
}

/* ---------- Video. Mux player themed to the palette. ---------- */
.narrow-media { max-width: 900px; }
.video .section-head { margin-bottom: 40px; }
.video-frame {
  overflow: hidden;                    /* clips the player to the radius */
  border-radius: var(--r-surface);
  background: var(--forest);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--forest) 18%, transparent);
}
mux-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-surface);
  overflow: hidden;

  /* Playback UI, matched to the brand. Amber is the accent everywhere
     else on the page, so it is the scrubber and the play button here. */
  --media-accent-color: var(--amber);
  --media-primary-color: var(--on-dark);
  --media-secondary-color: color-mix(in srgb, var(--forest-deep) 78%, transparent);
  --controls-backdrop-color: color-mix(in srgb, var(--forest-deep) 34%, transparent);
  --media-font-family: var(--sans);
  --media-control-hover-background: color-mix(in srgb, var(--amber) 26%, transparent);
  --seek-backward-button: none;
  --seek-forward-button: none;
}
/* Before the script upgrades the element, hold the space so nothing shifts. */
mux-player:not(:defined) { background: var(--forest); }

/* ---------- Services. Three tiers, middle one dominant. ---------- */
.services { background: var(--paper-2); }
.services .section-head { max-width: 58ch; }
.tiers {
  display: grid;
  grid-template-columns: 1fr 1.14fr 1fr;
  /* .tiers-one below overrides this for the current single offer. */
  gap: 22px;
  align-items: start;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}
.tier {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
}
.tier-featured {
  padding: 38px 34px 42px;
  border: 2px solid var(--forest);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--forest) 14%, transparent);
}
.badge {
  align-self: flex-start;
  margin: 0 0 20px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--amber);
  color: #12211b;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tiers-one { grid-template-columns: minmax(0, 560px); justify-content: center; }
.tier-head { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.price-credit { margin: 6px 0 0; font-size: .88rem; font-weight: 650; color: var(--amber-text); }
.services-footnote {
  max-width: 62ch; margin: 22px auto 0; text-align: center;
  font-size: .86rem; color: var(--ink-2);
}
.reassurance { max-width: 54ch; margin: 0 auto 26px; color: var(--ink-2); }
.reassurance strong { color: var(--ink); }
.tier h3 { font-size: 1.42rem; }
.tier-featured h3 { font-size: 1.62rem; }
.tier-desc { margin: 22px 0 0; font-size: .98rem; color: var(--ink-2); }
.price { display: flex; flex-direction: column; margin: 0; }
.price-num { font-size: 2.4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.price-unit { margin-top: 5px; font-size: .84rem; color: var(--ink-2); }
.tier-features { margin: 0 0 30px; padding: 0; list-style: none; }
.tier-features li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 26px;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.tier-features li::before {
  content: "";
  position: absolute; left: 2px; top: .5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--amber-text);
  border-bottom: 2px solid var(--amber-text);
  transform: rotate(-45deg);
}
.tier .btn { margin-top: auto; }
/* How You Get There. Numbered like the plan's step markers, card-sized. */
.tier-path-head {
  margin: 0 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-text);
}
.tier-path { margin: 0 0 30px; padding: 0; list-style: none; counter-reset: path; }
.tier-path li { position: relative; margin-bottom: 16px; padding-left: 40px; counter-increment: path; }
.tier-path li:last-child { margin-bottom: 0; }
.tier-path li::before {
  content: counter(path);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-dark);
  font-size: .8rem;
  font-weight: 700;
}
.tier-path strong { display: block; font-size: .98rem; line-height: 1.6; }
.tier-path p { margin: 2px 0 0; font-size: .94rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- Plan. Process line, no boxes. ---------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
}
/* The rule connecting the three steps. Sits behind the numbers. */
.steps::before {
  content: "";
  position: absolute;
  top: 27px; left: 16%; right: 16%;
  height: 1px;
  background: var(--line);
}
.step { position: relative; text-align: center; }
.step-num {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-dark);
  font-size: 1.2rem;
  font-weight: 700;
}
.step p { margin: 0; color: var(--ink-2); }
.plan-cta { text-align: center; }
.plan-cta .micro { margin: 18px 0 0; }

/* ---------- Testimonials. One featured plus two supporting. ---------- */
.testimonials { background: var(--paper-2); }
.quote-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: start; }
.quote-stack { display: grid; gap: 22px; }
.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
}
.quote blockquote { margin: 0 0 24px; font-size: 1.04rem; line-height: 1.6; }
.quote-featured { height: 100%; padding: 40px; background: var(--forest); border-color: var(--forest); }
.quote-featured blockquote { font-size: 1.34rem; line-height: 1.5; color: var(--on-dark); letter-spacing: -.015em; }
.quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote figcaption img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.quote figcaption span { display: flex; flex-direction: column; }
.quote figcaption b { font-size: .95rem; font-weight: 650; }
.quote figcaption small { font-size: .84rem; color: var(--ink-2); }
.quote-featured figcaption b { color: var(--on-dark); }
.quote-featured figcaption small { color: var(--on-dark-2); }

/* ---------- Lead generator. Bordered panel, stays in the light theme. ---------- */
.lead-panel {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
}
.lead-media img { width: 100%; border-radius: var(--r-control); aspect-ratio: 26 / 33; object-fit: cover; }
.lead-copy p { color: var(--ink-2); }
.lead-copy h2 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.lead-form { max-width: 480px; margin-top: 28px; }
.lead-form .micro { margin: 12px 0 0; }

/* ---------- Fields. Label above input, always. ---------- */
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label {
  display: block;
  margin-bottom: 6px;
  font-size: .89rem;
  font-weight: 650;
}
.opt { font-weight: 500; color: var(--ink-2); }
input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 160ms ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--amber-text); }
textarea { resize: vertical; }
.form-sub { margin: -14px 0 24px; font-size: .92rem; color: var(--ink-2); }
.help { margin: 6px 0 0; font-size: .84rem; color: var(--ink-2); }
.radio-set { margin: 0 0 16px; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: var(--r-control); }
.radio-set legend { padding: 0 6px; font-size: .89rem; font-weight: 650; color: var(--ink); }
.radio, .checkbox {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 10px; font-size: .95rem; font-weight: 400; cursor: pointer;
}
.radio:last-child, .checkbox:last-child { margin-bottom: 0; }
.radio input, .checkbox input { width: auto; margin: .35em 0 0; flex: none; accent-color: var(--amber-text); }
.radio-set .help { margin: 0 0 12px; }
.referral-branch {
  margin-top: 24px; padding: 28px;
  border: 2px solid var(--amber); border-radius: var(--r-control);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}
.referral-branch h3 { margin-bottom: .6em; }
.referral-branch p { font-size: .96rem; color: var(--ink-2); }
.referral-list { font-weight: 650; color: var(--ink) !important; }
.referral-crisis { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem; }
.form-note {
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--amber) 18%, var(--surface));
  font-size: .89rem;
  color: var(--ink);
}

/* ---------- Explanatory prose. ---------- */
.explain p { font-size: 1.06rem; color: var(--ink-2); }

/* ---------- FAQ. ---------- */
.faq { background: var(--paper-2); }
.faq .section-head { margin-bottom: 32px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  padding: 22px 44px 22px 0;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -.015em;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Chevron. Rotates to point up when the answer is open. */
.faq-list summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--amber-text);
  border-bottom: 2px solid var(--amber-text);
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-body p { margin: 0 0 24px; max-width: 66ch; color: var(--ink-2); }

/* ---------- Booking. The one dark moment, at the conversion point. ---------- */
.book { background: var(--forest); color: var(--on-dark-2); }
.book h2, .book h3 { color: var(--on-dark); }
.book .eyebrow { color: var(--amber-light); }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.book-copy p { color: var(--on-dark-2); }
.contact-details { margin: 28px 0 30px; padding: 0; list-style: none; }
.contact-details li { margin-bottom: 10px; color: var(--on-dark-2); }
.contact-details a { color: var(--on-dark); font-weight: 650; text-decoration: none; }
.map {
  width: 100%; height: 240px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-surface);
}
.map-toned {
  filter: grayscale(1) contrast(0.92) brightness(1.02);
}
.book-form {
  padding: 36px;
  border-radius: var(--r-surface);
  background: var(--surface);
  color: var(--ink);
}
.book-form h3 { margin-bottom: 22px; color: var(--ink); }
.book-form .btn { margin-top: 22px; }
.book-form .micro { margin: 14px 0 0; }

@media (hover: hover) and (pointer: fine) {
  .contact-details a:hover { color: var(--amber); }
}

/* ---------- Footer. Continues the dark band. ---------- */
.footer { padding: 76px 0 32px; background: var(--forest-deep); color: var(--on-dark-2); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 46px;
}
.footer-logo { width: 100%; max-width: 260px; height: auto; margin-bottom: 20px; }
.footer-brand-col .micro { margin-bottom: 24px; max-width: 36ch; }
.footer-head {
  margin-bottom: 18px;
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.footer nav { display: grid; gap: 12px; align-content: start; }
.footer a:not(.btn) { color: var(--on-dark-2); font-size: .94rem; text-decoration: none; }
.footer .micro { color: var(--on-dark-2); }
.footer-bottom { padding-top: 26px; border-top: 1px solid var(--line-dark); }
.scope { max-width: 92ch; margin-bottom: 14px; opacity: .78; }
.footer-legal {
  display: flex; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 22px;
}
.footer-legal p { margin: 0; }
.footer-legal nav { display: flex; gap: 24px; }

@media (hover: hover) and (pointer: fine) {
  .footer a:not(.btn):hover { color: var(--amber); }
}

/* ---------- Reveal on scroll. Hierarchy, nothing more. ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.stack-row:nth-child(2) { transition-delay: 60ms; }
.stack-row:nth-child(3) { transition-delay: 120ms; }
.bento .cell:nth-child(2) { transition-delay: 50ms; }
.bento .cell:nth-child(3) { transition-delay: 100ms; }
.bento .cell:nth-child(4) { transition-delay: 150ms; }
.tiers .tier:nth-child(2) { transition-delay: 60ms; }
.tiers .tier:nth-child(3) { transition-delay: 120ms; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1060px) {
  .nav-links { gap: 22px; }
  .nav-phone { display: none; }
  .hero-grid, .about-grid, .book-grid { gap: 44px; }
  .lead-panel { gap: 40px; padding: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  section { padding: 64px 0; }
  html { scroll-padding-top: 76px; }

  .nav-inner { height: 64px; gap: 14px; }
  .brand-logo { height: 38px; }
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn { min-height: 44px; padding: 10px 16px; font-size: .88rem; }

  .hero { padding: 44px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero .sub { max-width: none; }
  .cta-row .btn { width: 100%; }

  .trust { padding-bottom: 60px; }
  /* One column: at 360px three columns wrap "XO Marriage" and the labels. */
  .trust-row { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .trust-row li { padding: 0; border-left: 0; }

  .stack-row { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }

  .bento { grid-template-columns: 1fr; }
  .cell, .cell-wide { grid-column: auto; }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-media { max-width: 420px; }

  .tiers, .tiers-one { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .stat-grid li { padding: 0 16px; }
  .stat-grid li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .limits-panel { padding: 30px 24px; }
  .quote { padding: 26px 22px; }
  .hero-media { justify-content: center; }
  .hero-player { max-width: 280px; }
  .tier-featured { order: -1; }

  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
  .plan-cta .btn { width: 100%; }

  .section-cta .btn { width: 100%; }

  .quote-grid { grid-template-columns: 1fr; }
  .quote-featured { padding: 32px; }

  .lead-panel { grid-template-columns: 1fr; padding: 30px 24px; }
  .lead-media { max-width: 240px; }

  .book-grid { grid-template-columns: 1fr; gap: 40px; }
  .book-form { padding: 28px 22px; }
  .field-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media print {
  .nav, .map { display: none; }
  .reveal { opacity: 1; transform: none; }
}