/* ============================================================
   Dare To Be Me Coaching & Reiki
   Brand: #29083A plum, #3D174F royal plum, #A6A1C7 lavender,
          #53A1AF teal, #9FE5E5 aqua, #F1F1F1 soft, Montserrat
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --plum: #29083A;
  --plum-2: #3D174F;
  --lavender: #A6A1C7;
  --teal: #53A1AF;
  --aqua: #9FE5E5;
  --soft: #F1F1F1;
  --ink: #372b42;
  --ink-light: #6d6478;
  --white: #FFFFFF;
  --radius: 22px;
  --shadow: 0 18px 45px rgba(41, 8, 58, 0.10);
  --shadow-soft: 0 10px 30px rgba(41, 8, 58, 0.07);
  --container: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--teal); text-decoration: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 780px; }
.center { text-align: center; }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-weight: 500;
  color: var(--plum);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); margin-bottom: 22px; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 20px; }
h3 { font-size: 1.22rem; margin-bottom: 10px; }

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

/* Widow control: never leave a single word alone on the last line.
   balance = even line lengths for short display type,
   pretty = no orphan word at the end of body copy */
h1, h2, h3, h4,
.lead, .pull-question, .anchor-line, .strong-line,
.big-quote p, .quote-card p, .after-note, .hero-note, .eyebrow,
.offer-meta, .card-link, .footer-tag {
  text-wrap: balance;
}
p, li, blockquote, figcaption { text-wrap: pretty; }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}
.eyebrow.on-dark { color: var(--aqua); }

.lead {
  font-size: 1.22rem;
  color: var(--plum-2);
  font-weight: 500;
  margin-bottom: 18px;
}

.soft-em { font-style: normal; color: var(--plum-2); font-weight: 500; }

.hl {
  background-image: linear-gradient(transparent 64%, rgba(159, 229, 229, 0.75) 64%);
  background-repeat: no-repeat;
  padding: 0 2px;
}

.strong-line {
  font-weight: 500;
  color: var(--plum);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  margin-top: 22px;
}

/* Each sentence keeps its own line and never breaks mid-sentence, so the
   type is sized against the real column width (cqw), not the viewport */
.fit-lines { container-type: inline-size; }

.pull-question {
  font-size: min(clamp(1.25rem, 2.4vw, 1.6rem), 4.25cqw);
  font-weight: 500;
  color: var(--plum);
  line-height: 1.45;
  margin-top: 34px;
}
.pull-question .q-line { display: block; white-space: nowrap; }

.after-note {
  margin-top: 44px;
  color: var(--ink-light);
  font-size: 1.02rem;
}

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary {
  background: var(--plum);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(41, 8, 58, 0.22);
}
.btn-primary:hover {
  background: var(--plum-2);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(41, 8, 58, 0.28);
}

.btn-secondary {
  background: transparent;
  color: var(--plum);
  border: 1.5px solid var(--plum);
  padding: 13.5px 32px;
}
.btn-secondary:hover {
  background: var(--plum);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--white);
  color: var(--plum);
}
.btn-light:hover { background: var(--aqua); transform: translateY(-2px); }

/* The .btn-secondary of dark sections: the quieter half of a pair on plum */
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  padding: 13.5px 32px;
}
.btn-outline-light:hover {
  background: var(--white);
  color: var(--plum);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn-nav { padding: 11px 24px; font-size: 0.88rem; }
.btn-sm { padding: 9px 20px; font-size: 0.82rem; }
.btn-secondary.btn-sm { padding: 7.5px 18px; }

.link-arrow {
  display: inline-block;
  font-weight: 500;
  color: var(--teal);
  font-size: 0.98rem;
  position: relative;
}
.link-arrow::after {
  content: '\2192';
  margin-left: 8px;
  transition: margin-left 0.25s ease;
}
.link-arrow:hover::after { margin-left: 13px; }

.cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hug-link { margin-top: 20px; }

/* Centered row of anchor links, used as an index on hub pages */
.jump-row { justify-content: center; gap: 12px; margin-top: 34px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(41, 8, 58, 0.07);
  transition: box-shadow 0.3s ease;
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would
   trap the fixed-position mobile nav overlay inside the header box */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(41, 8, 58, 0.08); }

.site-header .container { max-width: 1400px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  color: var(--plum);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-sub {
  color: var(--lavender);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { white-space: nowrap; }
.site-nav a:not(.btn) {
  color: var(--plum);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.site-nav a:not(.btn):hover { color: var(--teal); border-bottom-color: var(--aqua); }

/* ---------- Nav dropdowns (Reiki, About) ---------- */

.nav-item { position: relative; display: flex; align-items: center; }
.sub-parent::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  /* Transparent padding bridges the gap to the card so hover is not lost */
  padding-top: 18px;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 60;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.sub-menu-inner {
  display: flex;
  flex-direction: column;
  min-width: 186px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px 0;
}
.site-nav .sub-menu a:not(.btn) {
  padding: 9px 22px;
  border-bottom: none;
  white-space: nowrap;
}
.site-nav .sub-menu a:not(.btn):hover { color: var(--teal); background: var(--soft); }
.site-nav .sub-menu a.is-active:not(.btn) { color: var(--teal); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--plum);
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ---------- Hero ---------- */

.hero {
  padding: 84px 0 100px;
  background:
    radial-gradient(720px 520px at 88% 12%, rgba(159, 229, 229, 0.28), transparent 65%),
    radial-gradient(640px 480px at 8% 88%, rgba(166, 161, 199, 0.20), transparent 65%),
    var(--white);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-areas: "left photo";
  grid-template-columns: 1.15fr 0.85fr;
  column-gap: 64px;
  row-gap: 0;
  align-items: center;
}

.hero-left { grid-area: left; display: flex; flex-direction: column; }
.hero-photo { grid-area: photo; }
.hero-more > p:first-child { margin-top: 0; }
/* The lead is now the last paragraph in its block; keep its gap before the story
   (the global p:last-child rule would remove it). Phones reset it below. */
.hero-copy > .lead { margin-bottom: 18px; }

.hero-photo { position: relative; }
.hero-photo img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}
.photo-glow {
  position: absolute;
  inset: -36px -36px auto auto;
  width: 78%;
  height: 78%;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(159, 229, 229, 0.55), rgba(166, 161, 199, 0.45));
  z-index: 0;
}
.photo-glow.small { inset: auto auto -26px -26px; width: 62%; height: 55%; }

/* ---------- Sections ---------- */

.section { padding: 104px 0; position: relative; overflow: hidden; }
.bg-soft { background: var(--soft); }
.bg-aqua {
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(159, 229, 229, 0.35), transparent 70%),
    var(--soft);
}

.section-dark { background: var(--plum); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: rgba(255, 255, 255, 0.85); }

.section-plum { background: var(--plum); }
.section-plum h2 { color: var(--white); }
.section-plum .eyebrow { color: var(--aqua); }
.section-plum .after-note { color: rgba(255, 255, 255, 0.72); }

.bg-gold {
  background:
    radial-gradient(700px 480px at 10% 8%, rgba(166, 161, 199, 0.30), transparent 65%),
    radial-gradient(720px 520px at 92% 92%, rgba(159, 229, 229, 0.32), transparent 65%),
    #F5F4F9;
}

.watermark, .watermark-dark { overflow: hidden; }

.watermark::before,
.watermark-dark::before {
  content: '';
  position: absolute;
  right: -140px;
  bottom: -120px;
  width: 560px;
  height: 400px;
  background: url('images/logo/logo-lotus-plum.png') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}
.watermark-dark::before {
  background-image: url('images/logo/logo-lotus-white.png');
  opacity: 0.07;
}

.section-head { max-width: 760px; margin: 0 auto 56px; }
/* For headlines that should hold a single line on desktop */
.section-head.wide { max-width: 1040px; }

/* ---------- Card grids ---------- */

.card-grid { display: grid; gap: 26px; }
.card-grid.five { grid-template-columns: repeat(5, 1fr); }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }

.carry-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(41, 8, 58, 0.05);
  container-type: inline-size;
}
.carry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.carry-card img { height: 130px; object-fit: cover; }
/* Title scales with the card so two-word names stay on one line */
.carry-card h3 { font-size: clamp(0.8rem, 7cqw, 1rem); padding: 18px 15px 0; }
.carry-card p { font-size: 0.86rem; line-height: 1.6; color: var(--ink-light); padding: 8px 18px 0; flex: 1; }
.carry-card .card-link {
  display: inline-block;
  color: var(--teal);
  font-weight: 500;
  font-size: 0.84rem;
  padding: 14px 18px 20px;
}
.carry-card .card-link::after { content: '\2192'; margin-left: 6px; }

.offer-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.offer-card img { height: 210px; object-fit: cover; }
.offer-card img.img-face-top { object-position: center 16%; }
.offer-card img.img-lower { object-position: center 85%; transform: scale(1.1); transform-origin: 50% 65%; }
.offer-desc { flex: 1; }

.img-hands {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
}
.offer-body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.offer-body p { font-size: 0.95rem; }
.offer-body .link-arrow { margin-top: auto; padding-top: 12px; }

.offer-meta {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7d76a8;
  font-weight: 500;
  margin: 6px 0 14px;
}
.section-dark .offer-meta { color: var(--lavender); }

/* ---------- Split layouts ---------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}
.split.reverse { grid-template-columns: 0.85fr 1.15fr; }

.split-photo { position: relative; }
.split-photo img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}
.split-photo.portrait { max-width: 430px; }
/* A phone-shot video sitting in a photo slot (contact.html sanctuary tour) */
.split-photo .split-video {
  width: 100%;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--plum);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}
/* Keeps the glow tied to the image when a caption sits below it */
.photo-frame { position: relative; }

.gold-split, .flow-split {
  grid-template-areas:
    "top photo"
    "rest photo";
  row-gap: 0;
}
.flow-split.reverse {
  grid-template-areas:
    "photo top"
    "photo rest";
}
.gs-top { grid-area: top; align-self: end; }
.gs-photo { grid-area: photo; }
.gs-rest { grid-area: rest; align-self: start; }
.gs-rest > p:first-child { margin-top: 16px; }

/* For the long narrative sections: the opening sits beside the photo, then the
   rest of the story runs the full width at a comfortable reading measure. Keeps
   a tall column of copy from staring across at a short photo. */
.flow-split.wide-rest {
  grid-template-areas:
    "top photo"
    "rest rest";
  align-items: start;
}
.flow-split.wide-rest.reverse {
  grid-template-areas:
    "photo top"
    "rest rest";
}
.flow-split.wide-rest .gs-top { align-self: start; }
/* The rest of the narrative starts at the container's left edge, under both
   columns, with a little extra air above it so it reads as a fresh beat
   rather than a continuation of the column it sits below. */
.flow-split.wide-rest .gs-rest { max-width: 860px; padding-top: 26px; }

/* ---------- Gold section ---------- */

.poem {
  border-left: 3px solid var(--aqua);
  padding: 6px 0 6px 24px;
  margin: 30px 0;
}
.poem p {
  margin-bottom: 6px;
  color: var(--plum-2);
  font-size: 1.05rem;
  line-height: 1.6;
}
.section-dark .poem p { color: rgba(255, 255, 255, 0.92); }
.section-dark .triad span {
  color: var(--aqua);
  border-top-color: rgba(159, 229, 229, 0.45);
}

.anchor-line {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--plum);
  margin-top: 26px;
}

.triad {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
}
.triad span {
  color: var(--plum);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: 2px solid var(--aqua);
  padding-top: 12px;
}

/* ---------- Testimonials ---------- */

.big-quote {
  max-width: 820px;
  margin: 0 auto 54px;
  text-align: center;
}
.big-quote.wide { max-width: 1000px; }
.big-quote p {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  color: var(--plum);
  font-weight: 500;
}
.big-quote cite,
.quote-card cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
}

.quote-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 30px 26px;
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--aqua);
}
.quote-card p { font-size: 0.97rem; color: var(--ink); }

/* ---------- Hug opt-in ---------- */

.hug-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-top: 44px;
  text-align: left;
}

.hug-media { position: relative; min-height: 260px; }
.hug-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(41, 8, 58, 0.3);
}
.play-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 18px solid var(--plum);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.hug-body { padding: 40px 40px 36px; }
.hug-body h3 { margin-bottom: 8px; }
.hug-body > p { font-size: 0.97rem; }

.hug-form { display: flex; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; }
.hug-form input[type="email"] {
  flex: 1;
  min-width: 210px;
  padding: 13px 22px;
  border: 1.5px solid var(--lavender);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.hug-form input[type="email"]:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(159, 229, 229, 0.35);
}
.hug-form .btn { padding: 13px 28px; }

.hug-success {
  margin-top: 20px;
  color: var(--teal);
  font-weight: 500;
}

.hug-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--ink-light);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Video ---------- */

.video-frame {
  margin-top: 44px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--plum);
}
.video-frame video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* hug.html delivers the lead magnet video, which was filmed vertically on a
   phone (1080x1920). At full column width that would render about 780x1387,
   so .portrait caps it to a phone-shaped player and centres it. The base
   16/9 + object-fit:cover rule above would have cropped Nina out of frame. */
.video-frame.portrait { max-width: 420px; margin-left: auto; margin-right: auto; }
.video-frame.portrait video { aspect-ratio: 9 / 16; height: auto; object-fit: contain; }

/* ---------- Book section ---------- */

.book-section { overflow: hidden; }
.book-bg {
  position: absolute;
  inset: 0;
  background: url('images/photos/nina-0783.jpg') right center / 175% no-repeat;
  opacity: 0.16;
}
.book-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(41, 8, 58, 0.72), rgba(41, 8, 58, 0.9));
}
.book-inner { position: relative; z-index: 1; }
.book-inner h2 { margin-bottom: 48px; }

.door-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  padding: 40px 36px;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
  display: flex;
  flex-direction: column;
}
.door-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.11); }
.door-card h3 { color: var(--aqua); margin-bottom: 12px; }
.door-card p { font-size: 0.95rem; }
.door-card .btn { margin-top: auto; align-self: center; }
.door-card .offer-meta { color: var(--lavender); }

.contact-line { margin-top: 44px; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.contact-line a { color: var(--aqua); }

/* ---------- Footer ---------- */

.site-footer { background: var(--plum); padding: 72px 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 48px;
  padding-bottom: 52px;
}

.footer-logo { width: 190px; margin-bottom: 20px; }
.footer-tag { color: var(--lavender); font-size: 0.95rem; }

/* Social links under the footer tagline. Icon plus handle, because Nina runs two
   Instagram accounts and two identical icons alone would not tell them apart. */
.footer-social { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  transition: color 0.25s ease;
}
.footer-social a:hover { color: var(--aqua); }
.footer-social-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  transition: background 0.25s ease;
}
.footer-social-ico svg { width: 15px; height: 15px; fill: currentColor; }
.footer-social a:hover .footer-social-ico { background: rgba(159, 229, 229, 0.18); }

.footer-col h4 {
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col a, .footer-col p {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  margin-bottom: 10px;
  transition: color 0.25s ease;
}
.footer-col a:hover { color: var(--aqua); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  padding-bottom: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; margin: 0; }

.footer-credit { text-align: center; padding-bottom: 26px; }
.footer-credit p { color: rgba(255, 255, 255, 0.32); font-size: 0.72rem; margin: 0; }
.footer-credit a { color: rgba(255, 255, 255, 0.5); }
.footer-credit a:hover { color: var(--aqua); }

/* ---------- Inner pages ---------- */

.page-hero {
  background: var(--plum);
  padding: 92px 0 78px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  color: var(--white);
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  margin-bottom: 14px;
}
.page-hero .eyebrow { color: var(--aqua); }
.page-hero .lead { color: var(--aqua); }
.page-hero p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}
.page-hero .lead { max-width: 58rem; }
.page-hero .btn { margin-top: 24px; }
.hero-note { font-size: 0.85rem; margin-top: 18px; }
.page-hero .hero-note,
.section-dark .hero-note { color: var(--lavender); }

.card-grid.four { grid-template-columns: repeat(4, 1fr); }

.epic-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px 26px;
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--aqua);
}
.epic-letter {
  display: block;
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 10px;
}
.epic-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.epic-card p { font-size: 0.9rem; color: var(--ink-light); margin: 0; }

.walkaway {
  list-style: none;
  columns: 2;
  column-gap: 48px;
  margin-top: 10px;
}
.walkaway li {
  padding: 0.55em 0 0.55em 1.7em;
  position: relative;
  break-inside: avoid;
  font-size: 0.98rem;
}
.walkaway li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  top: 0.5em;
  color: var(--teal);
  font-size: 0.9em;
}

.price-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 42px 36px 38px;
  box-shadow: var(--shadow-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.price-amount {
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--plum);
  margin: 4px 0 2px;
}
.price-card .offer-meta { margin-bottom: 16px; }
/* Four across leaves less room for the title, so tighten it a touch */
.card-grid.four .price-card { padding: 40px 28px 36px; }
.card-grid.four .price-card h3 { font-size: 1.1rem; }
.price-card p { font-size: 0.95rem; }
.price-card .btn { margin-top: auto; align-self: center; }

.after-note.tight { margin-top: 16px; }

/* Published street address inside a copy column */
.address-line { margin-top: 8px; }
.address-line strong { font-weight: 500; color: var(--plum); }

/* Two booking formats side by side at the foot of a price card */
.btn-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.btn-pair .btn { min-width: 216px; text-align: center; }
.price-card .btn-pair .btn { margin-top: 0; }
/* Four across leaves less than 216px inside a card, so let the pair fill the
   card instead of overflowing it */
.card-grid.four .price-card .btn-pair { align-self: stretch; }
.card-grid.four .price-card .btn-pair .btn {
  min-width: 0;
  width: 100%;
  padding-left: 14px;
  padding-right: 14px;
}

/* Returning-client shortcut: quieter than the two cards above it */
.returning {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 36px 32px 32px;
  text-align: center;
  border: 1px solid var(--lavender);
  border-radius: var(--radius);
}
.returning h3 { margin-bottom: 12px; }
.returning p { color: var(--ink-light); }
.returning .cta-row { margin-top: 26px; }

/* Quiet aside under the EPIC rates for the caregiver sliding scale */
.sliding-scale {
  max-width: 760px;
  margin: 30px auto 0;
  padding: 26px 30px;
  background: var(--white);
  border-left: 3px solid var(--aqua);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-soft);
}
.sliding-scale p { color: var(--ink-light); font-size: 0.98rem; }
.sliding-scale strong { color: var(--plum); font-weight: 500; }

.site-nav a.is-active:not(.btn) { border-bottom-color: var(--aqua); color: var(--teal); }

/* ---------- Reveal animation ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .card-grid.five { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1480px) {
  .site-nav { gap: 15px; }
  .site-nav a:not(.btn) { font-size: 0.84rem; }
  .btn-nav { padding: 10px 20px; font-size: 0.84rem; }
}

@media (max-width: 1240px) {
  .site-nav {
    position: fixed;
    inset: 0;
    /* Fully opaque: at 0.98 the page behind stayed visible through the overlay,
       because the header's backdrop-filter layer composites the alpha. */
    background: var(--white);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    padding: 96px 24px 48px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }
  .site-nav.open { transform: translateX(0); }
  .site-nav a:first-child { margin-top: auto; }
  .site-nav a:last-child { margin-bottom: auto; }
  .site-nav a:not(.btn) { font-size: 1.15rem; }
  /* In the overlay the dropdown is always open: About with its pages listed
     under it, so nothing needs a second tap to reach. */
  .nav-item { flex-direction: column; gap: 20px; }
  .sub-parent::after { display: none; }
  .sub-menu {
    position: static;
    padding-top: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .sub-menu-inner {
    min-width: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    gap: 18px;
    align-items: center;
  }
  .site-nav .sub-menu a:not(.btn) { font-size: 0.98rem; color: var(--ink-light); padding: 0; }
  .site-nav .sub-menu a:not(.btn):hover { background: none; }
  .nav-toggle { display: block; position: relative; z-index: 60; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 900px) {
  .section { padding: 76px 0; }
  .hero { padding: 56px 0 72px; }
  .hero-grid, .split, .split.reverse { grid-template-columns: 1fr; gap: 44px; }
  .hero-grid {
    grid-template-areas:
      "copy"
      "photo"
      "more"
      "actions";
  }
  /* Phone order: headline, photo, then the story. The left column dissolves so
     its three blocks become grid items of their own. */
  .hero-left { display: contents; }
  .hero-copy { grid-area: copy; }
  .hero-more { grid-area: more; }
  .hero-actions { grid-area: actions; }
  .hero-copy > :last-child, .hero-more > :last-child { margin-bottom: 0; }
  .hero-actions .cta-row { margin-top: 0; }
  .hero-actions { text-align: center; }
  .hero-actions .cta-row { justify-content: center; }
  .gold-split, .flow-split, .flow-split.reverse,
  .flow-split.wide-rest, .flow-split.wide-rest.reverse {
    grid-template-areas:
      "top"
      "photo"
      "rest";
    row-gap: 40px;
  }
  .flow-split.wide-rest .gs-rest { max-width: none; padding-top: 0; }
  .gs-rest > p:first-child { margin-top: 0; }
  .hero-photo { max-width: 420px; margin: 0 auto; }
  .split-photo.portrait { margin: 0 auto; }
  .footer-grid { text-align: center; }
  .footer-logo { margin-left: auto; margin-right: auto; }
  /* One centred block with the icons in a straight column, not four centred rows */
  .footer-social { display: inline-flex; align-items: flex-start; text-align: left; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .split.form-split { grid-template-columns: 1fr; }
  .form-card { padding: 32px 24px 30px; }
  .card-grid.three, .card-grid.two { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .card-grid.five { grid-template-columns: repeat(2, 1fr); }
  .card-grid.four { grid-template-columns: repeat(2, 1fr); }
  .walkaway { columns: 1; }
  .carry-card img { height: 165px; }
  .offer-card img { height: 260px; }
  /* More breathing room between stacked cards */
  .card-grid { gap: 36px; }
  /* Even the whitespace above a photo with the space below it */
  .hero-photo,
  .gs-photo,
  .split:not(.reverse) > .split-photo { margin-top: 16px; }
  /* Reversed splits that lead with a photo on desktop still read copy-first on mobile */
  .copy-first > .split-copy { order: -1; }
  .copy-first > .split-photo { margin-top: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .hug-card { grid-template-columns: 1fr; }
  .hug-media { min-height: 220px; }
}

@media (max-width: 480px) {
  /* Let headlines shrink a little on small phones rather than break badly */
  h2 { font-size: clamp(1.5rem, 6.9vw, 1.8rem); }
}

@media (max-width: 560px) {
  .card-grid.five { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .card-grid.four { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .carry-card img { height: 185px; }
  .brand-text { display: none; }
}

/* ============================================================
   Added for About / Testimonials / Resources / Events / Book
   ============================================================ */

/* ---------- Shared helpers ---------- */

.cta-lede { max-width: 42rem; margin: 0 auto 26px; }
.center-row { justify-content: center; }
.section-dark .strong-line,
.section-dark .anchor-line { color: var(--aqua); }
.epic-card .link-arrow { display: inline-block; margin-top: 14px; }

/* Honest empty state: a calendar with no dates, a feature not yet live */
.notice {
  border: 1.5px dashed var(--lavender);
  border-radius: var(--radius);
  padding: 46px 40px 42px;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
}
.notice h2 { margin-bottom: 14px; }
.notice p { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ---------- Ladder (About) ---------- */

.ladder { list-style: none; margin: 30px 0 8px; }
.ladder li { position: relative; padding: 0 0 20px 40px; }
.ladder li:last-child { padding-bottom: 4px; }
.ladder li::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--aqua);
  border: 2px solid var(--teal);
  box-sizing: border-box;
}
/* The line that makes five separate lines read as one climb */
.ladder li::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 23px;
  bottom: 3px;
  width: 1px;
  background: rgba(83, 161, 175, 0.35);
}
.ladder li:last-child::after { display: none; }
.rung { display: block; font-weight: 500; color: var(--plum); font-size: 1.05rem; }
.rung-note { display: block; color: var(--ink-light); font-size: 0.9rem; margin-top: 2px; }

/* ---------- Numbered steps (Book) ---------- */

.steps {
  counter-reset: step;
  list-style: none;
  margin-top: 42px;
  display: grid;
  gap: 34px;
}
.steps li { position: relative; padding-left: 76px; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -3px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1.5px solid var(--aqua);
  box-shadow: var(--shadow-soft);
  color: var(--teal);
  font-weight: 500;
  font-size: 1.15rem;
}
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: 0.97rem; margin: 0; }

/* ---------- Article list (Resources) ---------- */

.article-list { list-style: none; margin-top: 26px; }
.article-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid rgba(41, 8, 58, 0.10);
}
.article-list li:last-child { border-bottom: 1px solid rgba(41, 8, 58, 0.10); }
.article-title { color: var(--plum); font-weight: 500; font-size: 0.98rem; line-height: 1.45; }
.tag {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--teal);
  border: 1px solid rgba(83, 161, 175, 0.45);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ---------- Social (Resources) ---------- */

/* ---------- Contact form ---------- */

.split.form-split { grid-template-columns: 1.15fr 0.85fr; align-items: start; }

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 38px 36px;
  box-shadow: var(--shadow-soft);
}
.form-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
.form-lede { color: var(--ink-light); font-size: 0.96rem; margin: 10px 0 30px; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 8px;
}
.field .optional {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-light);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid rgba(41, 8, 58, 0.16);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2329083A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
  background-size: 11px;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(109, 100, 120, 0.7); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(83, 161, 175, 0.18);
}
.form-card .btn { margin-top: 6px; }
.form-note { font-size: 0.86rem; color: var(--ink-light); margin-top: 16px; }
/* Shown only when the form endpoint is not wired, so nothing is lost silently */
.form-status {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(159, 229, 229, 0.3);
  border-left: 3px solid var(--teal);
  font-size: 0.93rem;
  color: var(--plum);
}

.prompt-block {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(41, 8, 58, 0.12);
}
.prompt-block .walkaway { margin-top: 4px; }
.walkaway.single { columns: 1; }

.contact-methods { display: grid; gap: 24px; margin: 30px 0 34px; }
.contact-method { display: flex; gap: 16px; align-items: flex-start; }
.contact-method .ico {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
}
.contact-method .ico svg { width: 18px; height: 18px; fill: var(--plum); }
.contact-method h3 { font-size: 0.95rem; margin-bottom: 2px; }
.contact-method p,
.contact-method a { font-size: 0.96rem; color: var(--ink-light); }
.contact-method a:hover { color: var(--teal); }

.social-row { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }
.social-link {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, background 0.25s ease;
}
.social-link svg { width: 21px; height: 21px; fill: var(--plum); transition: fill 0.25s ease; }
.social-link:hover { transform: translateY(-3px); background: var(--plum); }
.social-link:hover svg { fill: var(--aqua); }

/* ---------- Invite card (Testimonials) ---------- */

.quote-card.invite {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed var(--lavender);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.quote-card.invite h3 { margin-bottom: 10px; }
.quote-card.invite p { color: var(--ink-light); font-size: 0.93rem; }
.quote-card.invite .link-arrow { margin-top: 14px; }

/* ---------- Rate table (Book) ---------- */

.rate-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.rate-table tr { border-bottom: 1px solid rgba(41, 8, 58, 0.10); }
.rate-table tr:first-child { border-top: 1px solid rgba(41, 8, 58, 0.10); }
.rate-table th {
  text-align: left;
  font-weight: 500;
  color: var(--plum);
  font-size: 1rem;
  padding: 20px 18px 20px 0;
}
.rate-table td { color: var(--ink-light); font-size: 0.92rem; padding: 20px 18px 20px 0; }
.rate-table td.rate {
  text-align: right;
  padding-right: 0;
  color: var(--plum);
  font-weight: 500;
  font-size: 1.15rem;
  white-space: nowrap;
}
.rate-table .per { font-size: 0.7rem; color: var(--ink-light); letter-spacing: 0.06em; }

/* ---------- Left-aligned price card (Book) ---------- */

.price-card.left { text-align: left; }
.price-card.left .btn { align-self: flex-start; }
.price-card .strong-line { font-size: 1rem; margin-top: 18px; margin-bottom: 24px; }
.price-card .hug-note { margin-top: 14px; }

/* ---------- Responsive for the above ---------- */

@media (max-width: 900px) {
  .notice { padding: 36px 26px 34px; }
  .steps li { padding-left: 64px; }
  .steps li::before { width: 44px; height: 44px; font-size: 1.05rem; }
}

@media (max-width: 640px) {
  /* A three-column table has nowhere to go on a phone, so each row becomes a block */
  .rate-table,
  .rate-table tbody,
  .rate-table tr,
  .rate-table th,
  .rate-table td { display: block; width: 100%; }
  .rate-table tr { padding: 18px 0; }
  .rate-table tr:first-child { border-top: none; }
  .rate-table th { padding: 0 0 4px; }
  .rate-table td { padding: 0; }
  .rate-table td.rate { text-align: left; margin-top: 10px; }
  .article-list li { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* A full-width block that continues the section under a .split above it */
.split-below { margin-top: 62px; }

/* Uneven quote lengths left dead space at the bottom of the taller cards */
.quote-card { display: flex; flex-direction: column; justify-content: center; }

/* Keeps the closing link on the baseline across a row of cards */
.epic-card { display: flex; flex-direction: column; }
.epic-card .link-arrow { margin-top: auto; padding-top: 14px; }

@media (max-width: 900px) {
  .split-below { margin-top: 44px; }
}

/* ---------- Flodesk opt-in embeds ---------- */
/* The three opt-ins (home hug, resources hug, resources newsletter) are
   Flodesk embeds. Flodesk ships its own scoped stylesheet, so most of what
   follows exists to undo it and match the site's pill fields and buttons.
   !important is needed throughout: Flodesk's selectors are highly specific
   and its stylesheet loads after ours.

   DO NOT write any rule that changes the display of .fd-form-group or the
   __field wrappers. Flodesk hides four decoy fields with deliberately
   misspelled CSS ("dislpay: none", "display: nonee") as an anti-bot measure,
   and the live email input is whichever one the misspelling fails on. The
   field name is randomised on every page load. Touching field visibility
   would either expose the honeypots or hide the real input. */

.fd-embed { margin-top: 20px; }

/* The inline template keeps a title and a subtitle even after they are
   emptied in Flodesk's editor, and on the hug form they still carry the
   default "Join our mailing list" / "new arrivals, sales, exclusive offers"
   copy. Invisible on screen, but announced by screen readers, so remove them
   from the layout properly. They are the only children of the form element
   without a data-ff-el attribute, which makes them safe to target without
   hard-coding a form id. */
.fd-embed [data-ff-el="form"] > div:not([data-ff-el]) { display: none !important; }

.fd-embed [data-ff-el="root"] { font-family: inherit !important; }

.fd-embed .fd-form-control {
  border: 1.5px solid var(--lavender) !important;
  border-radius: 999px !important;
  padding: 13px 22px !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  color: var(--ink) !important;
  background: var(--white) !important;
}
.fd-embed .fd-form-control:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(159, 229, 229, 0.35) !important;
}

.fd-embed [data-ff-el="submit"] {
  background: var(--plum) !important;
  color: var(--white) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 10px 24px rgba(41, 8, 58, 0.22) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.fd-embed [data-ff-el="submit"]:hover {
  background: var(--plum-2) !important;
  transform: translateY(-2px);
}

.fd-embed [data-ff-el="success"] { color: var(--teal) !important; font-weight: 500 !important; }
.fd-embed [data-ff-el="error"] { color: #a33 !important; font-size: 0.85rem !important; }

/* Flodesk wraps the form in a container and wrapper div that carry their own
   background, padding and margins, which punched white boxes and big gaps
   into our sections. Neither has a data-ff-el attribute, but the config div
   beside them does, so :not([data-ff-el]) isolates them without hard-coding
   a form id. */
.fd-embed [data-ff-el="root"] > div:not([data-ff-el]),
.fd-embed [data-ff-el="root"] > div:not([data-ff-el]) > div,
.fd-embed [data-ff-el="form"],
.fd-embed [data-ff-el="content"],
.fd-embed [data-ff-el="fields"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fd-embed { max-width: 420px; }
.fd-embed .fd-form-control { width: 100% !important; }
.fd-embed [data-ff-el="footer"] {
  background: transparent !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
}
.fd-embed [data-ff-el="submit"] { width: 100% !important; }
/* ---------- Reiki intake (reiki-intake.html) ---------- */

.form-narrow { max-width: 860px; }
.form-card.intake { padding: 46px 48px 42px; }
.page-hero .hero-note a { color: var(--aqua); text-decoration: none; border-bottom: 1px solid rgba(159, 229, 229, 0.5); }
.page-hero .hero-note a:hover { border-bottom-color: var(--aqua); }

/* Long questions read better in sentence case than the tracked uppercase
   labels the short contact form uses. */
.form-card.intake .field label,
.form-card.intake .field .label {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--plum);
  line-height: 1.45;
  margin-bottom: 9px;
}
.form-card.intake .field .optional { font-weight: 400; }
.field-help {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-light);
  margin: -3px 0 10px;
}
.form-card.intake .field textarea.short { min-height: 104px; }
.form-card.intake .field { margin-bottom: 24px; }

/* display: contents strips the fieldset box, so the legend behaves like a
   normal block and the section divider can sit above it instead of through it. */
.form-group { display: contents; }
.form-group + .form-group legend {
  margin-top: 16px;
  padding-top: 34px;
  border-top: 1px solid rgba(41, 8, 58, 0.10);
}
.form-group legend {
  display: block;
  width: 100%;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 0;
  margin-bottom: 22px;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

/* Pill radios */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; margin: 0; cursor: pointer; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.choice span {
  display: inline-block;
  padding: 11px 18px;
  border: 1.5px solid rgba(41, 8, 58, 0.16);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.choice:hover span { border-color: var(--teal); }
.choice input:checked + span {
  border-color: var(--teal);
  background: rgba(159, 229, 229, 0.3);
  color: var(--plum);
}
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(83, 161, 175, 0.18); }

/* Agreements */
.agree-block + .agree-block { margin-top: 28px; }
.agree-block h3 { font-size: 1.08rem; margin-bottom: 10px; }
.agree-text {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 14px;
}
.agree {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(241, 241, 241, 0.75);
  cursor: pointer;
}
.agree input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--teal);
}
.agree span { font-size: 0.96rem; font-weight: 500; color: var(--plum); }

.gotcha { display: none; }

/* Post-submit state */
.form-done h2 { margin: 6px 0 14px; }
.form-done p { margin-bottom: 14px; }
.form-done .btn { margin-top: 6px; }

/* Preparation notes below the list */
#prepare .walkaway { margin-top: 24px; }
#prepare .hug-note { font-size: 0.93rem; margin-top: 22px; max-width: 44rem; }
#prepare .hug-note strong { color: var(--plum); font-weight: 500; }

@media (max-width: 900px) {
  .form-card.intake { padding: 34px 26px 30px; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .choices { flex-direction: column; align-items: stretch; }
  .choice span { display: block; text-align: center; }
  .form-card.intake { padding: 28px 20px 26px; }
}

/* ---------- Caregiver form (caregivers.html) ---------- */

/* "Select any that apply" lists. The options are full sentences, so they sit
   as checkbox rows rather than the pill radios used for short answers. The
   extra specificity beats .form-card.intake .field label. */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-card.intake .field .check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid rgba(41, 8, 58, 0.14);
  border-radius: 14px;
  background: var(--white);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
}
.check span { font-size: 0.95rem; line-height: 1.45; color: var(--ink); }
.form-card.intake .field .check:hover { border-color: var(--teal); }
.form-card.intake .field .check:has(input:checked) {
  border-color: var(--teal);
  background: rgba(159, 229, 229, 0.3);
}
.check:has(input:checked) span { color: var(--plum); }
#respite-room .container.narrow .offer-meta { margin-top: 18px; }
#respite-room .cta-row { margin-top: 26px; }

/* The Respite Room card on the Events page, plus the caregiver links that
   point at the form from Work With Nina and the Coaching reduced-rate note. */
.respite-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.respite-card .walkaway { margin-bottom: 26px; }
.respite-card .form-note { margin-top: 18px; }
#respite-room .link-arrow { display: inline-block; margin-top: 10px; }
.caregiver-cta { margin-top: 24px; }
.sliding-scale a, .path-note a { border-bottom: 1px solid rgba(83, 161, 175, 0.45); }
.sliding-scale a:hover, .path-note a:hover { border-bottom-color: var(--teal); }

@media (max-width: 700px) {
  .checks { grid-template-columns: 1fr; }
}

/* ---------- Work With Nina: dual offering links + caregiving list ---------- */

.link-pair { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 22px; }
.link-pair .link-arrow { margin-top: 0; }
.walkaway.lead-in li strong { color: var(--plum); font-weight: 500; }
.walkaway.lead-in { margin-top: 4px; margin-bottom: 8px; }
.path-note { font-size: 0.95rem; color: var(--ink-light); margin-top: 18px; }
#two-paths .section-head p { margin-top: 12px; }

/* ---------- Calendly thank-you pages ---------- */

/* Both the in-person and virtual notes are in the markup; script.js hides the
   one that does not apply. When both show (no Calendly details), space them. */
#where [data-mode] + [data-mode]:not([hidden]) { margin-top: 34px; }
#thanksWhen { color: var(--aqua); font-weight: 500; }

/* ---------- Mobile menu: keep Book a Session on screen ---------- */

/* Two dropdowns now list five sub-pages in the overlay. On phone-height
   screens the looser spacing pushed the Book a Session button below the fold. */
@media (max-width: 1240px) and (max-height: 880px) {
  .site-nav { gap: 19px; padding: 78px 24px 30px; }
  .nav-item { gap: 13px; }
  .sub-menu-inner { gap: 12px; }
}

/* Two contact lines stacked under a dark CTA button: keep the second one close */
.contact-line + .contact-line { margin-top: 10px; }