/* ============================================================
   HOPE & STRENGTH COACHING — LANDING PAGE
   BUILD V27 · 14 Aug 2026 · see CHANGELOG.md
   Palette:  Sage #8FAF9B · Beige #DCCDBE · Warm White #FAFAF3
             Taupe #A99B8C · Charcoal #3F4340 (text only)
   Fonts:    Playfair Display · Montserrat · Lora · Great Vibes
   Approach: Mobile-first, one breakpoint up at 720, then 1120.
============================================================ */

:root {
  --sage: #8FAF9B;
  --sage-deep: #56705F;
  --sage-darker: #48604F;
  --beige: #DCCDBE;
  --beige-warm: #F2ECE2;
  --cream: #FAFAF3;
  --cream-warm: #F5F0E7;
  --taupe: #A99B8C;
  --taupe-deep: #8E7A5F;
  --charcoal: #3F4340;
  --gold: #B08B5C;
  --line: rgba(169, 155, 140, 0.35);
  --line-strong: rgba(169, 155, 140, 0.55);

  --f-serif: 'Playfair Display', Georgia, serif;
  --f-sans: Montserrat, Arial, sans-serif;
  --f-read: Lora, Georgia, serif;
  --f-script: 'Great Vibes', cursive;

  --wrap: 1280px;
  --wrap-narrow: 720px;

  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- resets ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip` (not `hidden`) contains the decorative sprigs WITHOUT
     creating a scroll container — `hidden` here silently breaks
     position:sticky on the booking rail. */
  overflow-x: clip;
}

/* Fallback for browsers without overflow:clip (pre-Safari 16):
   hide the bleed with hidden, accepting the sticky trade-off. */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
img { display: block; max-width: 100%; }
a { color: var(--taupe-deep); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--sage-deep); }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 500; letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background: var(--beige); color: var(--charcoal); }

/* ---------- utility ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--taupe-deep);
  margin: 0 0 14px;
}
.script { font-family: var(--f-script); color: var(--sage-deep); line-height: 1.35; }
.read { font-family: var(--f-read); }
.center { text-align: center; }

.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.section-head .eyebrow { text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.14;
  color: var(--charcoal);
  margin: 0 0 18px;
}
.section-head p {
  font-family: var(--f-read);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.75;
  color: rgba(63, 67, 64, .82);
  max-width: 60ch;
  margin: 0 auto;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .02em; line-height: 1.3;
  border: 1.5px solid transparent;
  overflow: hidden;
  transition: transform .3s var(--ease-out), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn.-primary {
  background: linear-gradient(160deg, #9AB9A7, #7FA48D);
  color: #2E3830;
}
.btn.-primary:hover {
  background: linear-gradient(160deg, #7FA48D, var(--sage-deep));
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -16px rgba(86, 112, 95, .55);
}
.btn.-outline {
  background: transparent;
  border-color: var(--taupe);
  color: var(--charcoal);
}
.btn.-outline:hover {
  background: var(--beige);
  border-color: var(--beige);
  transform: translateY(-2px);
}
.btn.-outline-light {
  background: transparent;
  border-color: rgba(250, 250, 243, .6);
  color: var(--cream);
}
.btn.-outline-light:hover {
  background: rgba(250, 250, 243, .14);
  color: var(--cream);
  transform: translateY(-2px);
}
.btn.-outline-sage {
  background: transparent;
  border-color: var(--sage);
  color: var(--charcoal);
}
.btn.-outline-sage:hover {
  background: var(--sage);
  color: var(--charcoal);
  transform: translateY(-2px);
}
.btn.-full { width: 100%; white-space: normal; }

/* shimmer sweep on primary + outline */
.btn.-primary::after,
.btn.-outline-sage::after,
.btn.-outline::after,
.btn.-outline-light::after {
  content: "";
  position: absolute; top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .55) 45%, transparent 90%);
  transform: skewX(-18deg);
  transition: left .8s var(--ease-out);
  pointer-events: none;
}
.btn.-primary:hover::after,
.btn.-outline-sage:hover::after,
.btn.-outline:hover::after,
.btn.-outline-light:hover::after { left: 140%; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 250, 243, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.hdr.is-scrolled { box-shadow: 0 8px 24px -18px rgba(63, 67, 64, .35); }
.hdr__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.hdr__brand {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.hdr__brand img {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.hdr__brand:hover img { transform: rotate(-8deg) scale(1.05); }
.hdr__brand span { line-height: 1; }
.hdr__brand .name {
  display: block;
  font-family: var(--f-serif); font-size: 18px;
  color: var(--charcoal); letter-spacing: .04em;
}
.hdr__brand .tag {
  display: block;
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--taupe); margin-top: 3px;
}
.hdr__nav { display: none; }
.hdr__nav a {
  position: relative;
  font-size: 13px;
  color: rgba(63, 67, 64, .85);
  white-space: nowrap;
  padding: 4px 0;
}
.hdr__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.hdr__nav a:hover { color: var(--charcoal); }
.hdr__nav a:hover::after { transform: scaleX(1); }
.hdr__cta { display: none; }
.hdr__toggle {
  background: none; border: none; padding: 8px;
  color: var(--charcoal);
  display: flex; align-items: center;
}
.hdr__toggle svg { width: 22px; height: 22px; }
.hdr__mobile {
  display: none;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 12px 20px 20px;
}
.hdr__mobile.-open { display: block; }
.hdr__mobile a {
  display: block;
  padding: 12px 4px;
  color: var(--charcoal); font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.hdr__mobile a:last-of-type { border-bottom: none; }
.hdr__mobile .btn { margin-top: 14px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 30%;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(250, 250, 243, .97) 0%,
      rgba(250, 250, 243, .92) 34%,
      rgba(220, 205, 190, .5) 62%,
      rgba(86, 112, 95, .25) 100%);
}
.hero__sprig-r {
  position: absolute; top: -40px; right: -30px;
  width: 200px; opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: sway 9s ease-in-out infinite alternate;
  transform-origin: 50% 0%;
}
.hero__inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px 20px;
  width: 100%;
}
.hero__body { max-width: 640px; }
.hero__seal {
  width: 78px; height: 78px; border-radius: 50%;
  object-fit: cover;
  margin-bottom: 22px;
  animation: gentle-float 6s ease-in-out infinite;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.05;
  color: var(--charcoal);
  margin: 0 0 22px;
  max-width: 14ch;
  text-wrap: pretty;
}
.hero__lede {
  font-family: var(--f-read);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.75;
  color: rgba(63, 67, 64, .85);
  margin: 0 0 30px;
  max-width: 54ch;
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 18px;
}
.hero__meta {
  font-size: 12.5px; letter-spacing: .06em;
  color: rgba(63, 67, 64, .6);
  margin: 0;
}

/* ---------- trust strip ---------- */
.trust {
  background: linear-gradient(180deg, #F1EADF, #EAE2D6);
  border-bottom: 1px solid var(--line);
}
.trust__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 0;
  text-align: center;
}
.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 14px;
}
/* thin, quiet dividers between equal columns */
.trust__item + .trust__item { border-left: 1px solid var(--beige); }
.trust__item:nth-child(odd) { border-left: 0; }

.trust__lead {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--sage-deep);
  line-height: 1.25;
}
.trust__sub {
  font-family: var(--f-read);
  font-size: 12.5px;
  letter-spacing: .01em;
  color: rgba(63, 67, 64, .78);
  line-height: 1.3;
}

@media (min-width: 720px) {
  .trust__inner {
    grid-template-columns: repeat(4, 1fr);
    min-height: 102px;
    align-items: center;
    padding: 20px 24px;
    gap: 0;
  }
  .trust__item { padding: 0 20px; }
  .trust__item + .trust__item { border-left: 1px solid var(--beige); }
  .trust__item:nth-child(odd) { border-left: 1px solid var(--beige); }
  .trust__item:first-child { border-left: 0; }
  .trust__lead { font-size: 12px; }
  .trust__sub { font-size: 13px; }
}

/* ---------- reassurance ---------- */
.reassure {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}
.reassure__quote {
  font-family: var(--f-script);
  font-size: clamp(28px, 4.2vw, 40px);
  color: var(--sage-deep);
  text-align: center;
  max-width: 34ch;
  margin: 0 auto 44px;
  line-height: 1.35;
  text-wrap: balance;
}
.reassure__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  text-align: center;
}

/* ---------- icon badge ---------- */
.badge {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.badge svg {
  width: 26px; height: 26px;
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.badge.-sage { background: linear-gradient(160deg, #9AB9A7, #7FA48D); }
.badge.-sage svg { stroke: var(--cream); }
.badge.-cream { background: var(--cream); border: 1.5px solid var(--sage); }
.badge.-cream svg { stroke: #7FA48D; }
.badge.-beige { background: linear-gradient(160deg, #E4D8CB, #C9B7A4); }
.badge.-beige svg { stroke: var(--cream); }
.badge.-image {
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px;
}
.badge.-image img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.pillar:hover .badge,
.feat:hover .badge {
  transform: rotate(360deg) scale(1.06);
  box-shadow: 0 12px 24px -14px rgba(63, 67, 64, .35);
}

.pillar h3, .feat h3 {
  font-size: 19px;
  color: var(--charcoal);
  margin: 0 0 8px;
}
.pillar p, .feat p {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(63, 67, 64, .78);
  margin: 0;
}

/* ---------- recognition ---------- */
.reco {
  padding: 72px 0;
  background: #F3ECE4;
}
.reco__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.reco__card {
  padding: 24px;
  background: linear-gradient(160deg, var(--cream), #F4EEE5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage);
  border-radius: 16px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease;
}
.reco__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(63, 67, 64, .28);
  border-left-color: var(--sage-deep);
}
.reco__card:nth-child(3),
.reco__card:nth-child(4) { border-left-color: var(--taupe); }
.reco__card h3 {
  font-size: 18px;
  color: var(--charcoal);
  margin: 0 0 10px;
}
.reco__card p {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(63, 67, 64, .78);
  margin: 0;
}
.reco__coda {
  font-family: var(--f-read);
  font-style: italic;
  font-size: 16.5px;
  color: rgba(63, 67, 64, .85);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}

/* ---------- how i help ---------- */
.help {
  padding: 72px 0;
  scroll-margin-top: 96px;
}
.help__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 40px;
}
.feat { text-align: left; }
.feat__row {
  display: flex; gap: 16px;
  align-items: flex-start;
}
.feat .badge { margin: 0; flex-shrink: 0; }
.help__note {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, #F4EEE5, #EFE7DA);
  padding: 22px 26px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(63, 67, 64, .85);
  max-width: 780px;
  margin: 0 auto;
}

/* ---------- who i support ---------- */
.who {
  padding: 72px 0;
  background: #F3ECE4;
  scroll-margin-top: 96px;
}
.who__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 34px;
}
.who__card {
  padding: 28px;
  background: linear-gradient(170deg, var(--cream), #F2ECE2);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.who__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(63, 67, 64, .28);
}
.who__card h3 {
  font-size: 19px;
  color: var(--charcoal);
  margin: 0 0 12px;
}
.who__card p {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(63, 67, 64, .78);
  margin: 0;
}
.who__footer {
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  text-align: center;
}
.who__footer p {
  font-family: var(--f-read);
  font-style: italic;
  font-size: 16.5px;
  color: rgba(63, 67, 64, .85);
  margin: 0;
  max-width: 44ch;
}

/* ---------- your first step ---------- */
.first {
  padding: 72px 0;
  scroll-margin-top: 96px;
}
.first__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 34px;
}
.step {
  display: flex; gap: 16px;
}
.step__num {
  font-family: var(--f-serif);
  font-size: 34px;
  line-height: 1;
  color: rgba(176, 139, 92, .6);
  flex-shrink: 0;
}
.step__body h3 {
  font-size: 17px;
  color: var(--charcoal);
  margin: 2px 0 8px;
}
.step__body p {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(63, 67, 64, .78);
  margin: 0;
}
.first__coda {
  font-family: var(--f-read);
  font-style: italic;
  font-size: 16.5px;
  color: rgba(63, 67, 64, .85);
  text-align: center;
  max-width: 62ch;
  margin: 0 auto;
}

/* ---------- what happens next ---------- */
.next {
  position: relative;
  margin: 60px 20px 0;
  border-radius: 24px;
  overflow: hidden;
  padding: 56px 28px;
  background: linear-gradient(155deg, #F0E8D8 0%, #E7DCC6 46%, #DCCEB2 100%);
}
.next__sprig {
  position: absolute; top: -40px; right: -40px;
  width: 180px; opacity: .35;
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: sway 11s ease-in-out infinite alternate;
  transform-origin: 100% 0%;
}
.next .section-head { position: relative; }
.next__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.next .step__num { color: var(--sage-deep); font-size: 32px; }
.next .step__body h3 { font-size: 17px; }
.next__coda {
  position: relative;
  font-family: var(--f-script);
  font-size: clamp(26px, 3.6vw, 32px);
  color: var(--charcoal);
  text-align: center;
  margin: 40px 0 0;
}

/* ---------- journeys ---------- */
.jrn {
  padding: 72px 0;
  scroll-margin-top: 96px;
}
.jrn__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.jrn__card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.jrn__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -26px rgba(63, 67, 64, .35);
}
.jrn__card.-featured {
  border: 2px solid var(--sage);
  box-shadow: 0 24px 46px -28px rgba(63, 67, 64, .3);
}
.jrn__head {
  padding: 26px 22px;
  text-align: center;
  min-height: 140px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.jrn__head.-sage { background: linear-gradient(160deg, #6F927D, #55735E); }
.jrn__head.-deep { background: linear-gradient(160deg, var(--sage-deep), var(--sage-darker)); }
.jrn__head.-rose { background: linear-gradient(160deg, #A2766F, #87615B); }
.jrn__ribbon {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--beige);
}
.jrn__name {
  font-family: var(--f-script);
  font-size: 36px;
  color: var(--cream);
  line-height: 1.1;
  margin: 0 0 4px;
}
.jrn__label {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(250, 250, 243, .85);
}
.jrn__body { padding: 24px 22px; display: flex; flex-direction: column; flex: 1; }
.jrn__tag {
  font-family: var(--f-read);
  font-style: italic;
  font-size: 14.5px;
  color: rgba(63, 67, 64, .7);
  margin: 0 0 14px;
}
.jrn__blurb {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(63, 67, 64, .82);
  margin: 0 0 20px;
}
.jrn__includes {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--taupe-deep);
  margin: 0 0 12px;
}
.jrn__list { display: grid; gap: 9px; margin: 0 0 20px; }
.jrn__list li {
  display: flex; gap: 10px;
  font-size: 14px;
  color: rgba(63, 67, 64, .85);
}
.jrn__list li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 7px;
  flex-shrink: 0;
}
.jrn__card.-featured .jrn__list li::before { background: var(--sage-deep); }
.jrn__quote {
  font-family: var(--f-script);
  font-size: 22px;
  line-height: 1.4;
  color: var(--sage-deep);
  margin: auto 0 18px;
  min-height: 62px;
  text-align: center;
}
.jrn__card.-rose-tone .jrn__quote { color: #7A5751; }
.jrn__body .btn {
  min-height: 54px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* ---------- every journey includes ---------- */
.every {
  padding: 64px 0;
  background: #F3ECE4;
}
.every__panel {
  position: relative;
  padding: 48px 24px;
  border-radius: 24px;
  background: linear-gradient(170deg, #F3ECE2, #EAE1D4);
  border: 1px solid var(--line);
  overflow: hidden;
}
.every__sprig {
  position: absolute; bottom: -80px; left: -60px;
  width: 180px; opacity: .45;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: sway 13s ease-in-out infinite alternate;
  transform-origin: 0% 100%;
}
.every__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  text-align: center;
}
.pillar .badge { margin: 0 auto 14px; }
.pillar h3 { font-size: 17px; margin: 0 0 7px; }
.pillar p { font-size: 14px; line-height: 1.7; }

/* ---------- meet vineca (timeline) ---------- */
.meet {
  padding: 72px 0;
  scroll-margin-top: 96px;
}
.meet__intro {
  max-width: 640px;
  margin: 0 auto 34px;
  text-align: center;
}
.meet__intro .eyebrow { text-align: center; }
.meet__intro h2 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  color: var(--charcoal);
  margin: 0;
  text-wrap: pretty;
}
.meet__card {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 24px;
  padding: 22px;
  margin: 0 auto 40px;
  max-width: 780px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--cream-warm), #EFE7DA);
}
.meet__portrait {
  flex: 0 0 160px;
  width: 160px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 100px 100px 16px 16px;
}
.meet__meta { flex: 1 1 240px; min-width: 0; }
.meet__meta .eyebrow { margin: 0 0 10px; }
.meet__meta h3 {
  font-size: clamp(22px, 3vw, 28px);
  color: var(--charcoal);
  margin: 0 0 10px;
}
.meet__meta p {
  font-size: 14.5px; line-height: 1.75;
  color: rgba(63, 67, 64, .82);
}
.tl {
  border-left: 1px solid var(--line-strong);
  padding-left: 26px;
  display: grid; gap: 38px;
  max-width: 780px;
  margin: 0 auto;
}
.tl__item { position: relative; }
.tl__item::before {
  content: "";
  position: absolute; left: -34px; top: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--cream); border: 2px solid var(--sage);
}
.tl__item.-key::before { background: var(--gold); border-color: var(--gold); }
.tl__year {
  font-family: var(--f-serif);
  font-size: 22px;
  color: var(--gold);
  margin: 0 0 8px;
  line-height: 1;
}
.tl__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 12px;
}
.tl__body {
  font-family: var(--f-read);
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(63, 67, 64, .85);
  margin: 0 0 14px;
}
.tl__body strong { color: var(--charcoal); font-weight: 600; }
.tl__pull {
  font-family: var(--f-serif);
  font-size: clamp(22px, 3.4vw, 26px);
  line-height: 1.32;
  color: var(--charcoal);
  margin: 4px 0 18px;
  max-width: 32ch;
}
.tl__script {
  font-family: var(--f-script);
  font-size: clamp(30px, 5.5vw, 42px);
  color: var(--sage-deep);
  margin: 0 0 14px;
  line-height: 1.15;
}
.tl__mission {
  border-radius: 18px;
  background: linear-gradient(160deg, #F3ECE2, #E9E0D2);
  border: 1px solid var(--line);
  padding: 24px;
  margin: 8px 0 20px;
}
.tl__mission h4 {
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.28;
  color: var(--charcoal);
  margin: 0 0 12px;
}
.tl__mission p {
  font-family: var(--f-read);
  font-size: 15px;
  line-height: 1.85;
  color: rgba(63, 67, 64, .85);
  margin: 0;
}
.tl__coda {
  font-family: var(--f-read);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(63, 67, 64, .9);
  margin: 4px 0 24px;
}

/* ---------- testimonial ---------- */
.test {
  padding: 72px 0;
  background: #F3ECE4;
}
.test__card {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 26px;
  border-radius: 24px;
  background: linear-gradient(165deg, #F2ECE2, #E7DECF);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.test__emblem {
  position: absolute; top: 18px; right: 22px;
  width: 52px; opacity: .55;
  mix-blend-mode: multiply;
}
.test blockquote {
  font-family: var(--f-read);
  font-style: italic;
  font-size: clamp(16px, 2.1vw, 18.5px);
  line-height: 1.75;
  color: rgba(63, 67, 64, .9);
  margin: 0 auto 22px;
  max-width: 60ch;
  text-wrap: pretty;
}
.test cite {
  font-style: normal;
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(63, 67, 64, .6);
}

/* ---------- faq ---------- */
.faq {
  padding: 72px 0;
  scroll-margin-top: 96px;
}
.faq__list {
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid var(--line-strong);
}
.faq details {
  border-bottom: 1px solid var(--line-strong);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  font-family: var(--f-serif);
  font-size: clamp(16px, 2.4vw, 19px);
  color: var(--charcoal);
  transition: color .25s ease;
}
.faq summary:hover { color: var(--sage-deep); }
.faq summary::after {
  content: "+";
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  transition: transform .35s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__panel {
  padding: 0 0 22px;
  max-width: 64ch;
}
.faq__panel p {
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(63, 67, 64, .82);
  margin: 0 0 12px;
}
.faq__panel p:last-child { margin: 0; }

/* ---------- final cta band ---------- */
.finalcta {
  position: relative;
  padding: 84px 20px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, #6F927D 0%, var(--sage-deep) 45%, var(--sage-darker) 100%);
  color: var(--cream);
}
/* Two large botanical flourishes framing the closing CTA */
.finalcta__flora {
  position: absolute;
  bottom: -40px;
  width: 190px;
  opacity: .30;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
  animation: sway 13s ease-in-out infinite alternate;
}
.finalcta__flora.-left  { left: -34px;  transform-origin: 0% 100%; }
.finalcta__flora.-right { right: -34px; transform-origin: 100% 100%; animation-delay: -6s; }
.finalcta__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}

.finalcta h2 {
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.16;
  color: var(--cream);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.finalcta p {
  font-family: var(--f-read);
  font-size: clamp(15px, 2vw, 17.5px);
  line-height: 1.75;
  color: rgba(250, 250, 243, .88);
  margin: 0 0 30px;
}
.finalcta__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}
.finalcta__meta {
  font-size: 12.5px; letter-spacing: .08em;
  color: rgba(250, 250, 243, .7);
}

/* ---------- inquiry form ---------- */
.inq {
  padding: 84px 20px;
  scroll-margin-top: 96px;
}
.inq__inner { max-width: 720px; margin: 0 auto; }
.inq__head { text-align: center; margin-bottom: 38px; }
.inq__seal {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
}
.inq__head h2 {
  font-size: clamp(26px, 4vw, 38px);
  color: var(--charcoal);
  margin: 0 0 12px;
}
.inq__head p {
  font-family: var(--f-read);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.75;
  color: rgba(63, 67, 64, .82);
}
.inq__form {
  display: grid; gap: 18px;
  padding: 30px 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(170deg, var(--cream-warm), #EFE7DA);
}
.inq__row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.inq label {
  display: block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(63, 67, 64, .75);
  margin-bottom: 7px;
}
.inq input, .inq select, .inq textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid #C6B9A9;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--f-sans);
  font-size: 14.5px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.inq textarea { resize: vertical; }
.inq input:focus, .inq select:focus, .inq textarea:focus {
  outline: none;
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(143, 175, 155, .25);
}
.inq__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(63, 67, 64, .6);
  margin: 6px 0 0;
}
.inq__check {
  display: flex; gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(63, 67, 64, .82);
}
.inq__check input {
  width: 16px; height: 16px;
  margin-top: 4px; padding: 0;
  accent-color: var(--sage-deep);
  flex-shrink: 0;
}

/* ---------- desktop sticky rail ---------- */
.rail { display: none; }

/* ---------- closing script ---------- */
.closing {
  padding: 60px 20px;
  text-align: center;
}
.closing p {
  font-family: var(--f-script);
  font-size: clamp(30px, 5.2vw, 44px);
  line-height: 1.35;
  color: var(--sage-deep);
  max-width: 20ch;
  margin: 0 auto;
}

/* ---------- footer ---------- */
.ftr {
  position: relative;
  overflow: hidden;
  padding: 60px 20px 96px;
  background:
    radial-gradient(ellipse 1000px 600px at 8% -20%, rgba(255, 250, 240, .35), transparent 55%),
    radial-gradient(ellipse 900px 700px at 105% 115%, rgba(20, 18, 14, .45), transparent 55%),
    linear-gradient(155deg, #B9A88E 0%, #9C8B70 42%, #6B5C46 100%);
  color: var(--cream);
}
.ftr::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .45;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.ftr > * { position: relative; }
.ftr__brand span,
.ftr__tag,
.ftr__block h4 { color: var(--cream); }
.ftr__tagline,
.ftr__contact p,
.ftr__block li a,
.ftr__contact a { color: rgba(250, 250, 243, .88); }
.ftr__block li a:hover,
.ftr__contact a:hover { color: #FFFDF5; }
.ftr__copy { color: rgba(250, 250, 243, .72); border-top-color: rgba(250, 250, 243, .25); }
/* Full-height botanical flourishes down both edges of the footer */
/* Full-height botanical flourishes down both edges of the footer.
   height:100% + object-fit:cover lets the vine span top to bottom
   while the width stays under control, so it frames the columns
   instead of washing across them. */
.ftr__flora {
  position: absolute;
  top: 0;
  height: 100%;
  width: 120px;
  object-fit: cover;
  object-position: center;
  opacity: .15;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.ftr__flora.-left  { left: -30px; }
.ftr__flora.-right { right: -30px; }

@media (min-width: 720px) {
  .ftr__flora { width: 180px; opacity: .16; }
  .ftr__flora.-left  { left: -34px; }
  .ftr__flora.-right { right: -34px; }
}
@media (min-width: 1120px) {
  .ftr__flora { width: 250px; opacity: .17; }
  .ftr__flora.-left  { left: -30px; }
  .ftr__flora.-right { right: -30px; }
}
.ftr__inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
}
.ftr__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin-bottom: 34px;
}
.ftr__brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ftr__brand img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ftr__brand span { font-family: var(--f-serif); font-size: 18px; color: var(--charcoal); }
.ftr__block h4 {
  font-family: var(--f-sans);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(63, 67, 64, .8);
  margin: 0 0 6px;
}
.ftr__block .rule {
  width: 26px; height: 1px;
  background: var(--gold);
  margin-bottom: 14px;
}
.ftr__block ul { display: grid; gap: 9px; }
.ftr__block li a { color: var(--charcoal); font-size: 14px; }
.ftr__block li a:hover { color: var(--cream); }
.ftr__contact p { font-size: 14px; color: var(--charcoal); margin: 0 0 8px; }
.ftr__contact a { color: var(--charcoal); }
.ftr__contact a:hover { color: var(--cream); }
.ftr__tag {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(63, 67, 64, .8);
  margin: 0 0 4px;
}
.ftr__tagline {
  font-family: var(--f-read); font-style: italic;
  font-size: 14.5px; color: var(--charcoal);
  margin: 0 0 18px;
}
.ftr__social { display: flex; gap: 10px; margin-bottom: 20px; }
.ftr__social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(250, 250, 243, .85);
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal); font-size: 13px; font-weight: 700;
  transition: transform .3s var(--ease-out), background .3s ease;
}
.ftr__social a:hover { background: var(--cream); transform: translateY(-3px); }
.ftr__copy {
  border-top: 1px solid rgba(250, 250, 243, .4);
  padding-top: 22px;
  text-align: center;
  font-size: 13px;
  color: rgba(63, 67, 64, .8);
}

/* ---------- fixed mobile bar: two quick actions ---------- */
.mobar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  background: rgba(250, 250, 243, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 9px;
}
.mobar__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 50px;
  padding: 12px 10px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  text-align: center;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.mobar__btn svg {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.mobar__btn.-primary { flex: 1.45 1 0; background: var(--sage); color: var(--charcoal); }
.mobar__btn.-primary:active { background: var(--sage-deep); color: var(--cream); transform: scale(.985); }
.mobar__btn.-call {
  flex: 1 1 0;
  background: transparent;
  color: var(--charcoal);
  border: 1.5px solid var(--sage-deep);
}
.mobar__btn.-call:active { background: var(--sage-deep); color: var(--cream); transform: scale(.985); }

/* very narrow phones: drop the labels' second word pressure */
@media (max-width: 374px) {
  .mobar__btn { font-size: 13px; gap: 5px; padding: 12px 7px; }
  .mobar__btn svg { width: 15px; height: 15px; }
}

/* =====================================================
   REVEAL-ON-SCROLL
===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }

/* =====================================================
   KEYFRAMES
===================================================== */
@keyframes sway {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes seal-pulse {
  0% { box-shadow: 0 0 0 0 rgba(143, 175, 155, .35); }
  100% { box-shadow: 0 0 0 22px rgba(143, 175, 155, 0); }
}
@keyframes shimmer-bg {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.hero__seal {
  animation: gentle-float 6s ease-in-out infinite, seal-pulse 3.4s ease-out .8s 1;
}

/* =====================================================
   BREAKPOINTS
   Mobile-first everything above; enhance at 720 and 1120.
===================================================== */

/* ---------- 720px+ (tablet) ---------- */
@media (min-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 32px; }

  .hdr__inner { padding: 14px 32px; }
}

/* Show inline nav only when there's real room */
@media (min-width: 1000px) {
  .hdr__nav {
    display: flex; flex-wrap: nowrap;
    align-items: center; gap: 22px;
  }
  .hdr__nav a { white-space: nowrap; }
  .hdr__cta { display: inline-flex; }
  .hdr__toggle { display: none; }
}

@media (min-width: 720px) {

  .hero__inner { padding: 84px 32px 100px; }
  .hero__seal { width: 92px; height: 92px; }

  .trust__sep { display: block; }
  .trust__inner { padding: 22px 32px; gap: 12px 32px; }

  .reassure { padding: 76px 0; }
  .reassure__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }

  .reco { padding: 84px 0; }
  .reco__cards { grid-template-columns: 1fr 1fr; gap: 18px; }

  .help { padding: 84px 0; }
  .help__grid { grid-template-columns: 1fr 1fr; gap: 34px 30px; }

  .who { padding: 84px 0; }
  .who__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .who__footer { flex-direction: row; justify-content: center; }

  .first { padding: 84px 0; }
  .first__grid { grid-template-columns: 1fr 1fr; gap: 30px 34px; }

  .next { margin: 76px 32px 0; padding: 68px 44px; }
  .next__grid { grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }

  .jrn { padding: 84px 0; }
  .jrn__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

  .every { padding: 84px 0; }
  .every__panel { padding: 66px 44px; }
  .every__grid { grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }

  .meet { padding: 96px 0; }
  .meet__card { padding: 28px; gap: 30px; }
  .meet__portrait { flex: 0 0 200px; width: 200px; }

  .test { padding: 84px 0; }
  .test__card { padding: 56px 46px; }

  .faq { padding: 84px 0; }

  .finalcta { padding: 100px 40px; }

  .inq { padding: 100px 40px; }
  .inq__form { padding: 36px; }
  .inq__row { grid-template-columns: 1fr 1fr; }

  .ftr { padding: 76px 40px 40px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }

  /* mobile CTA bar not needed once nav CTA is present */
  .mobar { display: none; }
  body { padding-bottom: 0; }
}

@media (max-width: 999px) {
  .mobar { display: flex; }
  body { padding-bottom: 84px; }
}

/* ---------- 1120px+ (desktop) ---------- */
@media (min-width: 1120px) {
  .wrap { padding: 0 40px; }
  .hdr__inner { padding: 14px 40px; }
  .trust__inner { padding: 24px 40px; gap: 12px 40px; }

  /* Two-column shell with sticky booking rail */
  .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 60px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 40px;
  }
  .shell > main { min-width: 0; }
  .shell > .rail { display: block; }

  .rail {
    position: sticky;
    top: 100px;
    align-self: start;
    padding: 40px 0 60px;
    /* The form can be taller than a laptop viewport. Cap it and let
       it scroll internally so the submit button is always reachable. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .rail::-webkit-scrollbar { width: 6px; }
  .rail::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 3px;
  }
  .rail__card {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(170deg, var(--cream), #F2ECE2);
    box-shadow: 0 24px 48px -30px rgba(63, 67, 64, .4);
    overflow: hidden;
  }
  .rail__head {
    background: linear-gradient(160deg, var(--sage-deep), var(--sage-darker));
    padding: 22px 22px 20px;
    text-align: center;
    color: var(--cream);
  }
  .rail__head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; }
  .rail__head h4 {
    font-family: var(--f-serif);
    font-size: 20px; color: var(--cream);
    margin: 0 0 4px;
  }
  .rail__head p {
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(250, 250, 243, .85);
    margin: 0;
  }
  .rail__form {
    padding: 22px 22px 20px;
    display: grid; gap: 12px;
  }
  .rail__form label {
    display: block;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(63, 67, 64, .7);
    margin-bottom: 5px;
  }
  .rail__form input, .rail__form select, .rail__form textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid #C6B9A9;
    background: var(--cream);
    color: var(--charcoal);
    font-family: var(--f-sans);
    font-size: 13.5px;
  }
  .rail__form textarea { resize: vertical; min-height: 60px; }
  .rail__form button { margin-top: 4px; }
  .rail__contact {
    border-top: 1px solid var(--line);
    padding: 14px 22px;
    display: grid; gap: 6px;
    font-size: 13px;
    color: rgba(63, 67, 64, .8);
  }
  .rail__contact a { color: var(--sage-deep); font-weight: 600; }
  .rail__quote {
    font-family: var(--f-script);
    font-size: 24px; line-height: 1.35;
    color: var(--sage-deep);
    text-align: center;
    margin: 18px 6px 0;
  }

  /* When rail is visible, sections no longer need the outer wrap */
  .shell .reassure,
  .shell .reco,
  .shell .help,
  .shell .who,
  .shell .first,
  .shell .jrn,
  .shell .every,
  .shell .meet,
  .shell .test,
  .shell .faq,
  .shell .next {
    padding-left: 0; padding-right: 0;
  }
  .shell .reco, .shell .who, .shell .every, .shell .test {
    background: transparent; /* backgrounds moved to a wrapper in main content flow */
  }
  .shell section > .wrap { padding: 0; }

  /* hero + trust + finalcta + footer keep full-width outside the shell */

  .hero__inner { padding: 96px 40px 110px; }
  .hero h1 { max-width: 15ch; }

  .meet__portrait { flex: 0 0 220px; width: 220px; }

  .ftr { padding: 84px 40px 44px; }
  .ftr__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
  .ftr__block { border-left: 1px solid rgba(250, 250, 243, .4); padding-left: 26px; }
  .ftr__contact { border-left: none; padding-left: 0; }

  .finalcta { padding: 108px 40px; }
}

/* Very wide viewports: nudge the shell a little wider */
@media (min-width: 1440px) {
  .wrap { max-width: 1320px; }
  .shell { max-width: 1320px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__sprig-r, .next__sprig, .every__sprig, .finalcta__flora,
  .hero__seal { animation: none !important; }
  .btn::after { display: none; }
  .badge, .btn, .jrn__card, .reco__card, .who__card { transition: none !important; }
  .btn:hover, .jrn__card:hover, .reco__card:hover, .who__card:hover,
  .badge:hover, .pillar:hover .badge, .feat:hover .badge {
    transform: none !important;
  }
}

/* ============================================================
   NARROW-SCREEN SAFEGUARDS (≤374px: iPhone SE 1st gen, Galaxy
   Fold cover, and any browser at heavy zoom)
   Buttons are nowrap by default, which is right on normal
   phones but forces a horizontal overflow inside the timeline
   at 320px. Allow wrapping and tighten padding only here.
   ============================================================ */
@media (max-width: 374px) {
  .btn {
    white-space: normal;
    padding: 14px 18px;
    text-align: center;
  }
  .hero__ctas .btn,
  .finalcta__ctas .btn { width: 100%; }
}

/* Defensive: grid/flex children default to min-width:auto and
   refuse to shrink below their content. Let them shrink. */
.tl__item,
.jrn__card,
.reco__card,
.who__card,
.pillar,
.feat { min-width: 0; }

/* Long unbroken strings (emails, URLs) must never push a column wide */
.tl__body, .ftr a, .meet__meta p, .faq__a p { overflow-wrap: break-word; }

/* ============================================================
   JOURNEY CARD HEADER ALIGNMENT FIXES
   1. "Signature Journey" ribbon wrapped to two lines and
      collided with the script title. Keep it on one line and
      reserve consistent space for it in every card head.
   2. Card heads were content-sized (150 / 150 / 140px), so the
      three cards' images and body copy started at different
      heights. Give every head the same reserved space so the
      row lines up.
   ============================================================ */
.jrn__ribbon {
  white-space: nowrap;
  letter-spacing: .18em;
}
.jrn__head { padding-top: 42px; }

@media (min-width: 720px) {
  .jrn__head { min-height: 172px; }
}

/* ============================================================
   TABLET: three journey cards side-by-side is too tight below
   1024px (cards drop to ~220px, every list item wraps to two
   lines and the buttons run to three). Use two columns and
   centre the third card until there's room for a real 3-up.
   ============================================================ */
@media (min-width: 720px) and (max-width: 1023px) {
  .jrn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jrn__card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 11px);
    justify-self: center;
  }
}

/* ============================================================
   MOBILE HERO LEGIBILITY
   The hero scrim is a 100deg gradient tuned for the wide
   desktop layout (copy left, portrait right). On a narrow
   viewport that gradient clears the cream by ~34%, leaving the
   lede and eyebrow sitting directly on the photograph at poor
   contrast. Use a vertical scrim below 720px so the copy stays
   readable while the portrait still reads as a soft backdrop.
   ============================================================ */
@media (max-width: 719px) {
  .hero__overlay {
    background:
      linear-gradient(178deg,
        rgba(250, 250, 243, .97) 0%,
        rgba(250, 250, 243, .95) 52%,
        rgba(250, 250, 243, .88) 74%,
        rgba(233, 222, 208, .74) 100%);
  }
  .hero__img { object-position: 72% center; }
}

/* ============================================================
   MOBILE MENU CTA
   `.hdr__mobile a` (specificity 0,1,1) beats `.btn` (0,1,0), so
   the drawer's consultation button inherited display:block and
   the nav-link padding — losing its centred text and pill shape.
   Restore the button treatment inside the drawer.
   ============================================================ */
.hdr__mobile .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px 24px;
  border-bottom: none;
}

/* ============================================================
   FOOTER CONTRAST FIX
   The footer gradient ran #B9A88E → #6B5C46 (light to dark),
   while conflicting rules left most footer text charcoal. That
   measured 3.04:1 mid-gradient and 1.55:1 at the bottom —
   well below the WCAG AA 4.5:1 minimum, and visibly muddy.
   Lighten the taupe gradient so charcoal type (the brand's
   only text colour) clears AA across the whole panel, and
   unify every footer element onto charcoal.
   Darkest stop #BEB098 measures 4.72:1 against charcoal.
   ============================================================ */
.ftr {
  background:
    radial-gradient(ellipse 1000px 600px at 8% -20%, rgba(255, 252, 245, .5), transparent 55%),
    radial-gradient(ellipse 900px 700px at 105% 115%, rgba(90, 76, 56, .16), transparent 55%),
    linear-gradient(155deg, #D6CCBB 0%, #C9BCA8 45%, #BEB098 100%);
  color: var(--charcoal);
}
.ftr::before { opacity: .3; }

.ftr__brand span,
.ftr__tag,
.ftr__block h4 { color: var(--charcoal); }

.ftr__tagline,
.ftr__contact p,
.ftr__block li a,
.ftr__contact a { color: rgba(63, 67, 64, .88); }

.ftr__block li a:hover,
.ftr__contact a:hover { color: var(--charcoal); text-decoration: underline; }

.ftr__copy {
  color: rgba(63, 67, 64, .8);
  border-top: 1px solid rgba(63, 67, 64, .22);
}

/* Social chips: light cream pill on light taupe had no edge — give it one */
.ftr__social a {
  background: rgba(250, 250, 243, .92);
  border: 1px solid rgba(63, 67, 64, .12);
  color: var(--charcoal);
}
.ftr__social a:hover { background: #FFFDF5; }

/* Decorative sprig needs a different blend on a light panel */

/* Footer logo: the light/knockout variant disappeared on the
   lightened panel, and a 56px circular crop was cutting the
   stacked lockup in half. Show the stacked mark at full width. */
.ftr__brand img {
  width: 132px;
  height: auto;
  border-radius: 0;
  object-fit: contain;
}

/* ============================================================
   STICKY RAIL — COMPACT FORM (removes the inner scrollbar)
   The booking card measured 803px tall, so on any laptop under
   roughly 1000px of viewport height it scrolled inside itself
   and showed an ugly inner scrollbar. Tighten the spacing and
   pair the two short fields so the whole card fits on screen
   without losing a single field.
   ============================================================ */
@media (min-width: 1120px) {
  /* header: smaller seal, tighter padding */
  .rail__head { padding: 16px 20px 14px; }
  .rail__head img { width: 38px; height: 38px; margin: 0 auto 7px; }
  .rail__head h4 { font-size: 18px; margin: 0 0 3px; }
  .rail__head p { font-size: 10px; letter-spacing: .12em; }

  /* form: tighter rhythm */
  .rail__form { padding: 16px 20px 16px; gap: 9px; }
  .rail__form label { font-size: 10px; margin-bottom: 3px; }
  .rail__form input,
  .rail__form select,
  .rail__form textarea { padding: 9px 12px; font-size: 13px; border-radius: 9px; }
  .rail__form textarea { min-height: 46px; }
  .rail__form button { margin-top: 2px; padding: 13px 22px; }

  /* two short fields share a row */
  .rail__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* contact strip */
  .rail__contact { padding: 11px 20px; gap: 4px; font-size: 12.5px; }

  /* Scrollbar is now a fallback for very short windows only, and
     stays out of the way until the pointer is over the card. */
  .rail { scrollbar-width: none; }
  .rail::-webkit-scrollbar { width: 0; }
  .rail:hover { scrollbar-width: thin; }
  .rail:hover::-webkit-scrollbar { width: 5px; }
}

/* Rail wrapper: the card is sticky at top:100, so the generous
   40/60 padding was pure dead weight pushing the card past the
   fold. Tighten it, and drop the decorative pull-quote on short
   windows so the form itself never needs to scroll. */
@media (min-width: 1120px) {
  .rail { padding: 8px 0 16px; }
  .rail__quote { margin: 10px 6px 0; }
}
@media (min-width: 1120px) and (max-height: 859px) {
  .rail__quote { display: none; }
}

/* Reclaim vertical room for the sticky card: the site header is
   81px tall but the rail was offset 100px with a 120px total
   reserve, wasting ~20px. Tighten the offset to sit just under
   the header and shave a few more pixels off the form so the
   card clears short laptop viewports (down to ~700px) without
   an inner scrollbar. */
@media (min-width: 1120px) {
  .rail {
    top: 90px;
    max-height: calc(100vh - 102px);
  }
  .rail__head { padding: 14px 20px 12px; }
  .rail__form { padding: 14px 20px 14px; gap: 8px; }
  .rail__form textarea { min-height: 40px; }
  .rail__form button { padding: 12px 22px; }
  .rail__contact { padding: 9px 20px; }
}

/* Final few pixels so ~700px-tall viewports also clear cleanly */
@media (min-width: 1120px) {
  .rail { padding: 4px 0 8px; }
  .rail__form label { margin-bottom: 2px; }
  .rail__form input,
  .rail__form select,
  .rail__form textarea { padding: 8px 12px; }
}

/* ============================================================
   "WHAT HAPPENS NEXT" — STEP GRID SPACING
   Two problems:
   1. Step titles wrap to one or two lines depending on length
      ("Talk With Vineca" is one line, the rest are two), so the
      body copy beneath started at different heights across a
      row — the ragged look. Reserve two lines for every title.
   2. Fixed 3 columns squeezed the paragraph measure down to
      ~138px at 768 and ~145px at 1180 (where the sticky rail
      takes width), about 20 characters per line. Let the grid
      choose 2 or 3 columns based on the room available.
   ============================================================ */
@media (min-width: 720px) {
  .next__grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 40px 32px;
  }
}

/* Reserve two lines for the step title so body copy lines up
   across each row. "Choose the Right Coaching Journey" wraps to
   two lines at 768 and 1180 (where the sticky rail narrows the
   column) while the others stay on one, which is what threw the
   row out of alignment. Margin is dropped to 0 so the reserved
   space reads as breathing room rather than a gap. */
@media (min-width: 720px) {
  .next .step__body h3 { min-height: 3.2em; margin-bottom: 0; }
}

/* ============================================================
   FEATURED JOURNEY CARD — RAISED / TALLER
   The signature card should read as the recommended option, so
   it extends above and below its neighbours rather than sitting
   flush with them. Only applied where the cards sit side by
   side; on a single-column stack it stays inline.
   ============================================================ */
@media (min-width: 1024px) {
  .jrn__grid { align-items: stretch; }
  .jrn__card.-featured {
    margin-top: -26px;
    margin-bottom: -26px;
    position: relative;
    z-index: 2;
    box-shadow: 0 30px 60px -30px rgba(63, 67, 64, .42);
  }
  /* a little more internal room so the extra height reads as
     breathing space rather than a stretched gap */
  .jrn__card.-featured .jrn__head { padding-top: 54px; padding-bottom: 30px; }
  .jrn__card.-featured .jrn__body { padding-bottom: 30px; }
}

/* Closing CTA flourishes scale with the viewport */
@media (min-width: 720px) {
  .finalcta__flora { width: 250px; bottom: -50px; }
  .finalcta__flora.-left  { left: -40px; }
  .finalcta__flora.-right { right: -40px; }
}
@media (min-width: 1120px) {
  .finalcta__flora { width: 330px; bottom: -60px; opacity: .32; }
  .finalcta__flora.-left  { left: -30px; }
  .finalcta__flora.-right { right: -30px; }
}

/* On a narrow screen there is no side margin, so the flourishes
   drift behind the copy and lighten the sage enough to hurt
   contrast for the cream text. Shrink them, fade them back and
   push them mostly off-canvas so they read as a hint at the
   edges rather than a texture behind the words. */
@media (max-width: 719px) {
  .finalcta__flora { width: 132px; opacity: .16; bottom: -30px; }
  .finalcta__flora.-left  { left: -48px; }
  .finalcta__flora.-right { right: -48px; }
}

/* ============================================================
   "WHAT HAPPENS NEXT" — INNER PADDING + STEP TEXT ALIGNMENT
   1. The panel had `padding: 68px 0` — zero left/right — so the
      numbers sat flush on the panel's left edge and the second
      column's text ran flush to the right edge, while the
      centred heading looked comfortably inset. Add horizontal
      padding so the steps share the heading's breathing room.
   2. `.step__num` was auto-width, and the serif numerals render
      at slightly different widths ("01" vs "03" vs "05"), so
      each text block started 1–2px off from the one above it.
      Fix the number to a set width so every title and paragraph
      starts on the same vertical line, column to column.
   ============================================================ */
.next { padding-left: 24px; padding-right: 24px; }

.next .step__num {
  width: 46px;
  flex: 0 0 46px;
  text-align: left;
}
.next .step { gap: 12px; }

@media (min-width: 720px) {
  .next { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 1120px) {
  .next { padding-left: 64px; padding-right: 64px; }
}

/* `.shell .next` zeroes horizontal padding for sections inside the
   shell — right for plain sections that get their inset from .wrap,
   but wrong for .next, which is a panel with its own background and
   needs real padding inside it. Restore it at shell widths. */
@media (min-width: 1120px) {
  .shell .next { padding-left: 64px; padding-right: 64px; }
}

/* ============================================================
   TIMELINE: DOTS FILL IN AS YOU SCROLL
   Each milestone dot starts hollow and fills deep sage once the
   entry scrolls into view, so the timeline reads as progress
   down the page. The "turning point" milestone keeps its gold
   treatment as the emphasis moment.
   ============================================================ */
.tl__item::before {
  transition: background-color .5s var(--ease-out),
              border-color .5s var(--ease-out),
              transform .5s var(--ease-out),
              box-shadow .5s var(--ease-out);
}
.tl__item.is-reached::before {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(86, 112, 95, .16);
}
.tl__item.-key.is-reached::before {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.3);
  box-shadow: 0 0 0 5px rgba(176, 139, 92, .2);
}

/* the connecting rail fills to match */
.tl__item::after {
  content: "";
  position: absolute;
  left: -27.5px;
  top: 21px;
  width: 2px;
  height: calc(100% - 6px);
  background: var(--sage-deep);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .7s var(--ease-out);
  opacity: .55;
}
.tl__item:last-child::after { display: none; }
.tl__item.is-reached::after { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .tl__item::before,
  .tl__item::after { transition: none; }
  .tl__item.is-reached::before { transform: none; }
}

/* ============================================================
   STACKED LOCKUP: SHOW IT WHOLE, NOT CIRCLE-CROPPED
   `logo-stacked.png` is a rectangular lockup (emblem over
   "HOPE & STRENGTH / COACHING" plus the tagline). Forcing it
   into a 72–78px circle with object-fit:cover sliced the
   wordmark and tagline off at the edges, which is why it read
   as cut off. Show it at its natural aspect instead, and give
   it enough size for the small tagline line to be legible.
   ============================================================ */
.inq__seal {
  width: 122px;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  display: block;
  margin: 0 auto 22px;
}
.hero__seal {
  width: 150px;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  display: block;
  margin-bottom: 22px;
}

@media (min-width: 720px) {
  .inq__seal { width: 156px; }
  .hero__seal { width: 178px; }
}

/* The rail seal was shrunk to 38px during the V12 compaction, which
   left the round lockup's lettering unreadable. Give it back enough
   size to read, and trim a little padding around it so the card
   height stays where it was. */
@media (min-width: 1120px) {
  .rail__head img { width: 54px; height: 54px; margin: 0 auto 5px; }
  .rail__head { padding-top: 11px; padding-bottom: 10px; }
}

/* reclaim the last few px so 700px-tall viewports stay scroll-free */
@media (min-width: 1120px) {
  .rail__form { gap: 7px; padding-bottom: 12px; }
  .rail__contact { padding-top: 8px; padding-bottom: 8px; }
}

/* Brief highlight when the header CTA points at the booking card, so
   it is obvious where the click landed (the card is already on screen
   at these widths, so nothing would visibly move otherwise). */
.rail__card { transition: box-shadow .4s ease, transform .4s ease; }
.rail__card.is-called {
  box-shadow: 0 0 0 3px rgba(143, 175, 155, .55), 0 22px 44px -22px rgba(63, 67, 64, .4);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .rail__card { transition: none; }
  .rail__card.is-called { transform: none; }
}

/* ============================================================
   BOOKING MODAL
   The sticky booking card only exists at >=1120px. Below that,
   consultation CTAs open this dialog instead of jumping to a
   hidden element or throwing the visitor to the bottom of the page.
   ============================================================ */
.bookm[hidden] { display: none; }
.bookm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bookm__scrim {
  position: absolute; inset: 0;
  background: rgba(46, 56, 48, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: bookm-fade .25s ease both;
}
.bookm__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  animation: bookm-rise .32s var(--ease-out) both;
}
@keyframes bookm-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bookm-rise { from { transform: translateY(26px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.bookm__close {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(250, 250, 243, .9);
  border: 1px solid rgba(63, 67, 64, .14);
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal);
  z-index: 2;
  cursor: pointer;
}
.bookm__close svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round;
}

.bookm__head {
  background: linear-gradient(160deg, #6F927D, var(--sage-deep));
  color: var(--cream);
  text-align: center;
  padding: 22px 22px 18px;
  border-radius: 22px 22px 0 0;
}
.bookm__head img { width: 54px; height: 54px; margin: 0 auto 8px; display: block; }
.bookm__head h4 {
  font-family: var(--f-serif);
  font-size: 21px; margin: 0 0 4px; color: var(--cream);
}
.bookm__head p {
  margin: 0; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250, 250, 243, .8);
}

.bookm__form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px 18px;
}
.bookm__form label {
  display: block;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(63, 67, 64, .72);
  margin-bottom: 5px;
}
.bookm__form input,
.bookm__form select,
.bookm__form textarea {
  width: 100%;
  padding: 12px 13px;
  font-family: var(--f-sans);
  font-size: 16px;               /* 16px minimum: anything smaller makes iOS zoom in on focus */
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
}
.bookm__form input:focus,
.bookm__form select:focus,
.bookm__form textarea:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
  border-color: transparent;
}
.bookm__form textarea { resize: vertical; min-height: 74px; }

.bookm__contact {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 22px 6px;
  text-align: center;
  font-size: 13.5px;
}
.bookm__contact a { color: var(--sage-deep); font-weight: 600; }

body.bookm-open { overflow: hidden; }

@media (min-width: 560px) {
  .bookm { align-items: center; padding: 24px; }
  .bookm__panel { border-radius: 22px; padding-bottom: 18px; }
  .bookm__head { border-radius: 22px 22px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bookm__scrim, .bookm__panel { animation: none; }
}

/* On mobile the hero portrait sits directly behind the copy, so the
   decorative sprig lands across her face. Hide it below 720px —
   the botanical accents elsewhere on the page carry the motif. */
@media (max-width: 719px) {
  .hero__sprig-r { display: none; }
}

/* The sticky bar duplicates CTAs the hero already shows, so it stays
   out of the way until the hero is scrolled past. JS adds .is-shown. */
.mobar {
  transform: translateY(105%);
  opacity: 0;
  visibility: hidden;
  transition: transform .35s var(--ease-out), opacity .3s ease, visibility .3s;
}
.mobar.is-shown {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .mobar { transition: none; }
}

/* ============================================================
   LEGAL PAGES (privacy, terms, coaching agreement, disclaimer)
   Shares the landing page's shell, type and colour system.
   ============================================================ */
.legal-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 20px 44px;
  text-align: center;
  background: linear-gradient(160deg, #F4EEE3 0%, #EDE4D5 55%, #E4D9C6 100%);
  border-bottom: 1px solid var(--line);
}
.legal-hero__seal { width: 132px; height: auto; margin: 0 auto 18px; display: block; }
.legal-hero .eyebrow { margin-bottom: 10px; }
.legal-hero h1 {
  font-family: var(--f-serif);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12;
  color: var(--charcoal);
  margin: 0 0 12px;
}
.legal-hero p {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(63, 67, 64, .8);
  font-size: 15.5px;
  line-height: 1.7;
}
.legal-hero__updated {
  margin-top: 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-deep);
}

.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 54px 20px 78px;
}

/* draft banner — deliberately loud, this is not reviewed copy */
.legal-note {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border: 1px solid var(--gold);
  background: rgba(176, 139, 92, .09);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 42px;
}
.legal-note svg {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.legal-note p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(63, 67, 64, .88); }
.legal-note strong { color: var(--charcoal); }

.legal-toc {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 44px;
  background: rgba(255, 253, 247, .7);
}
.legal-toc h2 {
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 12px;
}
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 7px; font-size: 14.5px; }
.legal-toc a { color: var(--charcoal); }
.legal-toc a:hover { color: var(--sage-deep); text-decoration: underline; }

.legal-body h2 {
  font-family: var(--f-serif);
  font-size: 23px;
  color: var(--charcoal);
  margin: 42px 0 6px;
  scroll-margin-top: 92px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h2 + .rule { margin-bottom: 16px; }
.legal-body h3 {
  font-size: 15px; font-weight: 600;
  color: var(--charcoal);
  margin: 24px 0 8px;
}
.legal-body p,
.legal-body li {
  font-family: var(--f-read);
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(63, 67, 64, .86);
}
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--gold); }
.legal-body strong { color: var(--charcoal); font-weight: 600; }
.legal-body a { color: var(--sage-deep); text-decoration: underline; }

.legal-callout {
  border-left: 3px solid var(--sage);
  background: rgba(143, 175, 155, .1);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin: 22px 0 26px;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-cta {
  margin-top: 54px;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.legal-cta h2 {
  font-family: var(--f-serif);
  font-size: 25px; color: var(--charcoal);
  margin: 0 0 8px;
}
.legal-cta p { color: rgba(63, 67, 64, .8); margin: 0 0 20px; font-size: 15px; }
.legal-cta .btn { margin: 0 5px 10px; }

.legal-other {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.legal-other a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--charcoal);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.legal-other a:hover {
  border-color: var(--sage);
  background: rgba(143, 175, 155, .08);
  transform: translateX(3px);
}
.legal-other svg { width: 16px; height: 16px; fill: none; stroke: var(--sage-deep); stroke-width: 1.7; }

@media (min-width: 720px) {
  .legal-hero { padding: 84px 24px 58px; }
  .legal-wrap { padding: 66px 24px 92px; }
  .legal-other { grid-template-columns: 1fr 1fr; }
}

/* Mobile: hide the modal's inner scrollbar. The panel still scrolls —
   the visible track just looked like a stray element pinned to the
   edge of the sheet. Also give it a little more height so less
   scrolling is needed in the first place. */
@media (max-width: 719px) {
  .bookm__panel {
    max-height: 94vh;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
  }
  .bookm__panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
}