/* ==========================================================================
   Coachable Labs — recreated stylesheet (v2, matched to live Framer build)
   Cream #fff9e0 page, teal #46bdc6 accents/panels, near-black #121111 text.
   Display serif: Instrument Serif. Sans: Inter / Figtree.
   ========================================================================== */

:root {
  --cream: #fff9e0;
  --cream-soft: rgba(255, 249, 224, 0.7);
  --teal: #46bdc6;
  --near-black: #121111;
  --black: #000000;
  --dark-card: #3b3a33;
  --gray-700: #565656;
  --gray-500: #777777;
  --gray-400: #9f9f9f;
  --form-bg: #f6f7ec;
  --line-dark: rgba(0, 0, 0, 0.85);
  --line-soft: rgba(18, 17, 17, 0.15);

  --font-serif: "Instrument Serif", serif;
  --font-sans: "Inter", "Figtree", sans-serif;

  --container: 1140px;
  --radius-btn: 10px;
  --radius-card: 16px;
  --radius-panel: 56px;
  --shadow-btn: 0 3px 8px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--near-black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.container.narrow { max-width: 820px; }
.center-col { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---------- Buttons & chips ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.18s ease, filter 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-black { background: var(--near-black); color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { display: flex; width: 100%; white-space: normal; text-align: center; }
.arrow { font-size: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.chip-black { background: var(--near-black); color: #fff; }
.chip-teal { background: var(--teal); color: #fff; border-radius: var(--radius-btn); box-shadow: var(--shadow-btn); }
.chip-block { border-radius: var(--radius-btn); justify-content: center; display: flex; margin: 12px 0 20px; padding: 11px 16px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--cream);
  padding: 28px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 249, 224, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 10px 35px rgba(18, 17, 17, 0.08);
  padding: 16px 0;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  color: var(--near-black);
  letter-spacing: -0.02em;
}
.logo-mark { width: 42px; height: 42px; object-fit: contain; }
.main-nav { display: flex; gap: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--near-black); display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 190px 0 170px;
  text-align: center;
  overflow: hidden;
}
.hero-swirl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-46%, -52%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; max-width: 900px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #222;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 5px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.hero-badge-chip {
  background: var(--teal);
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 14px;
  transform: scale(0.4) translateY(10px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
    opacity 0.4s ease 0.1s;
}
.hero-badge.is-visible .hero-badge-chip {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.hero-badge-text {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
  vertical-align: middle;
  transition: max-width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
.hero-badge.is-visible .hero-badge-text { max-width: var(--badge-text-w, 260px); }

.hero-badge-text-inner {
  display: inline-block;
  padding-left: 12px;
  transform: translateX(-16px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
    opacity 0.45s ease 0.55s;
}
.hero-badge.is-visible .hero-badge-text-inner {
  transform: translateX(0);
  opacity: 1;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 72px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--near-black);
  margin: 0 0 22px;
}
.hero-sub {
  font-size: 19px;
  color: var(--gray-700);
  max-width: 600px;
  margin: 0 auto 34px;
  line-height: 1.55;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; }

/* ---------- Teal panels (About / Benefits) ---------- */
.panel-wrap { padding: 40px 0; }
.teal-panel {
  max-width: 1110px;
  margin: 0 auto;
  background: var(--teal);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.07) 0px,
    rgba(255, 255, 255, 0.07) 1px,
    transparent 1px,
    transparent calc((100% - 5px) / 6 + 1px)
  );
  border-radius: var(--radius-panel);
  padding: 90px 60px;
  text-align: center;
}
.teal-panel .chip { margin-bottom: 24px; }

.serif-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 60px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 26px;
}
.serif-heading.cream { color: var(--cream); }
.serif-heading.dark { color: var(--near-black); }

.sans-display {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 50px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 26px;
}
.sans-display.cream { color: #fff; }
.sans-display.dark { color: var(--near-black); }

.panel-body {
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}
.panel-body-dark { color: var(--near-black); }
.panel-body + .panel-body { margin-top: 18px; }

/* ---------- About carousel ---------- */
.carousel { margin-top: 56px; position: relative; }
.carousel-track {
  display: flex;
  gap: 36px;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { scroll-snap-type: none; }

.photo-card {
  position: relative;
  flex: 0 0 310px;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  scroll-snap-align: center;
}
.photo-card img {
  width: 100%;
  height: 415px;
  object-fit: cover;
  display: block;
}
.photo-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 70px 22px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  font-family: var(--font-serif);
  font-size: 27px;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #fff;
  text-align: left;
}

.carousel-arrows {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}
.carousel-btn {
  background: rgba(0, 0, 0, 0.25);
  border: none;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.carousel-btn:hover { background: rgba(0, 0, 0, 0.45); }
.carousel-btn img { width: 26px; height: 26px; }

/* ---------- Generic sections ---------- */
.section { padding: 90px 0; }
.services-intro { padding-top: 110px; }

.body-text {
  font-size: 17px;
  color: var(--gray-700);
  line-height: 1.6;
  max-width: 640px;
}
.body-text.center { text-align: center; }

/* ---------- Split coaching sections ---------- */
.split-section { padding: 70px 0; }
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.split-copy .chip { margin-bottom: 22px; }

.sans-heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--near-black);
  margin: 0 0 22px;
}
.sans-heading strong { font-weight: 700; }

.split-lede {
  font-size: 16px;
  color: var(--near-black);
  margin: 0 0 6px;
}
.dot-list {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--near-black);
  font-size: 16px;
  line-height: 1.5;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tag-row .btn { cursor: default; }
.tag-row .btn:hover { transform: none; filter: none; }

/* ---------- Dark visual cards ---------- */
.dark-card {
  background: var(--dark-card);
  border-radius: var(--radius-card);
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.dark-card-photo {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
}

/* ---------- Widgets inside dark cards ---------- */
.widget {
  background: linear-gradient(160deg, #d8d6c6, #a9a795);
  border-radius: 12px;
  width: 100%;
  max-width: 360px;
  padding: 22px;
  color: #222;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.widget-chip {
  border: 1px solid #333;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  background: rgba(255,255,255,0.5);
}
.widget-title { font-size: 13px; font-weight: 600; }

.widget-rows { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.widget-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 10px 12px;
}
.widget-rows strong { display: block; font-size: 13px; }
.widget-rows small { font-size: 11px; color: #555; }
.widget-check {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  border: 1.5px solid #333;
  border-radius: 4px;
  position: relative;
}
.widget-check.checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.widget-greeting { margin-bottom: 14px; }
.widget-greeting strong { display: block; font-size: 15px; }
.widget-greeting small { font-size: 12px; color: #555; }
.widget-box {
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.widget-box-label { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.widget-progress-row strong { display: block; font-size: 13px; }
.widget-progress-row small { font-size: 11px; color: #555; }
.widget-progress-bar {
  height: 6px;
  background: rgba(0,0,0,0.15);
  border-radius: 99px;
  margin-top: 8px;
  overflow: hidden;
}
.widget-progress-bar div { height: 100%; background: var(--teal); border-radius: 99px; }
.widget-days {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #444;
  margin-bottom: 10px;
}
.widget-days .active {
  background: var(--teal);
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
}
.widget-events { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.widget-events li {
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
  padding: 8px 10px;
}
.widget-events strong { display: block; font-size: 12px; }
.widget-events small { font-size: 11px; color: #555; }

/* ---------- Benefits grid ---------- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 52px;
  text-align: left;
}
.benefit-card {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  padding: 26px;
  background:
    radial-gradient(120% 60% at 80% 110%, rgba(255,255,255,0.55), transparent 60%),
    rgba(255, 255, 255, 0.06);
}
.benefit-icon {
  display: inline-flex;
  color: var(--near-black);
  margin-bottom: 14px;
}
.benefit-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 12px;
}
.benefit-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--near-black);
  margin: 0;
}

/* ---------- Mechanism diagram ---------- */
.diagram-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 58px;
  /* Narrower than the default container so the two SVGs don't scale up huge. */
  max-width: 860px;
}
.diagram {
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 24px 26px 22px;
  background: rgba(255, 255, 255, 0.45);
}
.diagram-join {
  border-color: rgba(70, 189, 198, 0.55);
  background:
    radial-gradient(80% 60% at 85% 50%, rgba(70, 189, 198, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.45);
}
.diagram-cap {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.diagram-join .diagram-cap { color: #2a8f97; }
.diagram svg { width: 100%; height: auto; display: block; }
.dg-labels text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--near-black);
  text-anchor: end;
}
.dg-split path,
.dg-join path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.dg-split path { stroke: var(--gray-400); }
.dg-join path { stroke: var(--teal); }
.diagram.is-visible .dg-split path,
.diagram.is-visible .dg-join path { stroke-dashoffset: 0; }
.dg-join path:nth-child(2) { transition-delay: 0.08s; }
.dg-join path:nth-child(3) { transition-delay: 0.16s; }
.dg-join path:nth-child(4) { transition-delay: 0.24s; }
.dg-ends circle { fill: var(--gray-400); opacity: 0; transition: opacity 0.4s ease 0.7s; }
.diagram.is-visible .dg-ends circle { opacity: 1; }
.dg-hub { fill: var(--teal); }
.dg-hub-ring { fill: none; stroke: var(--teal); stroke-width: 2; opacity: 0.4; }
.dg-hub, .dg-hub-ring {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s;
}
.diagram.is-visible .dg-hub,
.diagram.is-visible .dg-hub-ring { transform: scale(1); }
.diagram-note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gray-700);
  margin: 14px 0 0;
}

/* ---------- Pull quotes ---------- */
.pullquote { padding: 60px 0; }
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--near-black);
  text-align: center;
  position: relative;
}
.pullquote blockquote::before {
  content: "\201C";
  color: var(--teal);
  font-size: 1.15em;
  line-height: 0;
  vertical-align: -0.08em;
  margin-right: 0.04em;
}
.pullquote blockquote::after {
  content: "\201D";
  color: var(--teal);
  font-size: 1.15em;
  line-height: 0;
  vertical-align: -0.08em;
  margin-left: 0.02em;
}
.pullquote-cite {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 22px 0 0;
}

/* ---------- Accordion (objections) ---------- */
.accordion { margin-top: 50px; }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-item:first-child { border-top: 1px solid var(--line-soft); }
.acc-item h3 { margin: 0; }
.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: 0;
  padding: 24px 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--near-black);
  transition: color 0.25s ease;
}
.acc-q:hover { color: #2a8f97; }
.acc-icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--teal);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-q[aria-expanded="true"] .acc-icon { transform: rotate(135deg); }
.acc-q[aria-expanded="true"] .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }
.acc-a {
  overflow: hidden;
  height: 0;
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.acc-a p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-700);
  margin: 0;
  padding: 0 46px 26px 4px;
}

/* ---------- Process steps ---------- */
.step-list {
  list-style: none;
  counter-reset: step;
  margin: 46px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step-list li {
  counter-increment: step;
  position: relative;
  padding: 22px 0 22px 62px;
  border-top: 1px solid var(--line-soft);
}
.step-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.step-list li > * { position: relative; z-index: 1; }

/* Scroll-driven spine. JS positions it between the first and last marker
   centres and drives the fill height from scroll progress. */
.step-wrap { position: relative; }
.step-spine {
  position: absolute;
  left: 16px;
  width: 2px;
  border-radius: 2px;
  background: rgba(70, 189, 198, 0.16);
  overflow: hidden;
  z-index: 0;
}
.step-spine-fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--teal), #2a8f97);
}

/* Marker: hollow until the spine reaches it, then it fills and pops. */
.step-list li::before {
  content: counter(step);
  position: absolute;
  z-index: 2;
  left: 0;
  top: 22px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cream);
  border: 2px solid rgba(70, 189, 198, 0.4);
  color: #2a8f97;
  font-size: 14px;
  font-weight: 700;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.5s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-list li.is-done::before {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(70, 189, 198, 0.13);
}
.step-list li.is-active::before {
  box-shadow: 0 0 0 9px rgba(70, 189, 198, 0.16);
}

/* Soft wash behind whichever step you are currently level with. */
.step-list li::after {
  content: "";
  position: absolute;
  inset: 6px -20px;
  z-index: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(70, 189, 198, 0.12), rgba(70, 189, 198, 0) 62%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.step-list li.is-active::after { opacity: 1; }

.step-list h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--near-black);
  margin: 0 0 8px;
}
.step-list p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0;
}
/* Heading and body stagger in behind the row itself. */
.step-list li h3,
.step-list li p {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.step-list li.is-visible h3 { opacity: 1; translate: 0 0; transition-delay: 0.12s; }
.step-list li.is-visible p { opacity: 1; translate: 0 0; transition-delay: 0.22s; }

.process-section { padding-top: 20px; }

/* ---------- Footnotes ---------- */
.fn-ref {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  color: var(--teal);
  font-weight: 700;
  padding: 0 1px;
}
.footnotes {
  list-style: none;
  counter-reset: fn;
  border-top: 1px solid var(--line-soft);
  padding: 22px 0 6px;
  margin: 0;
}
.footnotes li {
  counter-increment: fn;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-500);
  max-width: 780px;
}
.footnotes li::before {
  content: counter(fn) ". ";
  font-weight: 700;
  color: var(--gray-700);
}
.footnotes a { color: var(--gray-700); }

/* ---------- Packages ---------- */
.packages-section { padding-top: 30px; }
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
  align-items: start;
}
.package-card {
  position: relative;
  background:
    radial-gradient(90% 40% at 15% 108%, rgba(70,189,198,0.5), transparent 65%),
    var(--cream);
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}
.package-popular {
  background:
    radial-gradient(90% 45% at 85% -8%, rgba(70,189,198,0.55), transparent 60%),
    radial-gradient(90% 40% at 15% 108%, rgba(70,189,198,0.5), transparent 65%),
    var(--cream);
}
.popular-chip {
  position: absolute;
  top: 24px;
  right: 24px;
  margin: 0;
}
.package-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.package-icon { display: inline-flex; color: var(--near-black); }
.package-title h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0;
}
.package-popular .package-title h3 { max-width: 180px; }
.package-desc {
  font-size: 14.5px;
  color: var(--near-black);
  line-height: 1.55;
  margin: 0 0 20px;
}
.included-label { font-size: 15px; font-weight: 600; margin: 20px 0 12px; }
.included-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.included-list li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  line-height: 1.4;
}
.included-list li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0;
  font-weight: 700;
  color: var(--near-black);
}

/* ---------- Contact ---------- */
.contact-section { padding-top: 110px; }
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 764px;
  margin: 44px auto 0;
}
.contact-card {
  background: var(--teal);
  border-radius: 10px;
  padding: 20px 28px;
  color: var(--near-black);
}
.contact-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}
.contact-card a { font-size: 16px; }

.contact-form {
  max-width: 700px;
  margin: 26px auto 0;
  background: var(--form-bg);
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  padding: 30px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 15px; font-weight: 600; color: var(--near-black); }
.form-field input,
.form-field textarea {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--near-black);
}
.form-field textarea::placeholder { color: #444; }
.form-field input,
.form-field textarea { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(70, 189, 198, 0.22);
}
.form-status { text-align: center; font-size: 14px; color: var(--near-black); margin: 12px 0 0; min-height: 1em; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 2px solid var(--black);
  padding-top: 64px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 70px;
}
.footer-name {
  color: var(--teal);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.footer-desc { font-size: 15px; line-height: 1.55; color: var(--near-black); margin: 0; }
.footer-cols { display: flex; gap: 64px; }
.footer-col-title { font-weight: 700; font-size: 16px; margin: 0 0 14px; }
.footer-col a {
  display: block;
  font-size: 15px;
  color: var(--teal);
  margin-bottom: 10px;
}
.footer-col a.footer-social { color: var(--near-black); }
.footer-bottom { border-top: 1px solid var(--line-soft); }
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  color: var(--gray-700);
}

/* ---------- Floating CTA ---------- */
.floating-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  padding: 12px 20px;
  font-size: 15px;
  translate: 0 160%;
  opacity: 0;
  transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.floating-cta.is-shown { translate: 0 0; opacity: 1; }

/* ---------- Scroll reveal (blur + rise + settle) ---------- */
.reveal {
  opacity: 0;
  translate: 0 30px;
  scale: 0.98;
  filter: blur(7px);
  transition:
    opacity 0.8s ease,
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
}
.reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }

/* ==========================================================================
   Motion & fluid design layer
   ========================================================================== */

::selection { background: var(--teal); color: #fff; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: rgba(70, 189, 198, 0.65);
  border-radius: 99px;
  border: 3px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

section, .panel-wrap { scroll-margin-top: 84px; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, var(--teal), #2ea6af);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Ambient drifting blobs ---------- */
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}
.blob-a {
  width: 480px; height: 480px;
  left: -140px; top: 12%;
  background: radial-gradient(circle, rgba(70, 189, 198, 0.4), transparent 70%);
  animation: blob-drift-a 26s ease-in-out infinite alternate;
}
.blob-b {
  width: 560px; height: 560px;
  right: -180px; top: 45%;
  background: radial-gradient(circle, rgba(255, 214, 90, 0.32), transparent 70%);
  animation: blob-drift-b 32s ease-in-out infinite alternate;
}
.blob-c {
  width: 420px; height: 420px;
  left: 30%; bottom: -160px;
  background: radial-gradient(circle, rgba(70, 189, 198, 0.28), transparent 70%);
  animation: blob-drift-c 38s ease-in-out infinite alternate;
}
@keyframes blob-drift-a { to { transform: translate(120px, 90px) scale(1.15); } }
@keyframes blob-drift-b { to { transform: translate(-140px, -70px) scale(0.9); } }
@keyframes blob-drift-c { to { transform: translate(90px, -110px) scale(1.2); } }

/* ---------- Header details: 5-blade iris shutter over the logo mark ----------
   The source artwork is 5 irregular teal blade shapes (a pinwheel, not even
   wedges) plus a separate map-pin shape sitting in the gap between them. Each
   was extracted from the real PNG (connected-component analysis) into its
   own transparent sprite: logo-blade-1..5.png keep each blade's exact drawn
   silhouette; logo-pin.png is the pin alone, sitting underneath.
   Each blade's transform-origin is solved so that rotating it sweeps its own
   inner tip through the true center — a single hinge point per blade, like a
   real lens diaphragm. At REST every blade sits at rotate(0) — the original,
   untouched logo. On hover/intro, that same hinge first swings to
   --close-deg (converging all 5 tips over the pin — shutter CLOSED, pin
   hidden), then swings the other way to -30deg (pulling every blade back to
   the rim, opening a clean pentagon aperture — shutter OPEN, pin revealed),
   then returns to rest — real printed pieces rotating in and out around a
   real hinge, not an overlay. */
.logo {
  position: relative;
  z-index: 1;
}
.logo:hover { z-index: 5; }
.logo-frame {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .logo-frame,
.logo.intro-play .logo-frame { transform: scale(1.75); }
.logo-frame .logo-mark { width: 100%; height: 100%; opacity: 0; }

.logo-text {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .logo-text,
.logo.intro-play .logo-text { transform: translateX(16px); }

.logo-shutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.logo-pin,
.blade {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.logo-pin { background-image: url("../assets/images/logo-pin.png"); }

.blade { transform: rotate(0deg); }
.blade-1 {
  background-image: url("../assets/images/logo-blade-1.png");
  transform-origin: 46.69% 40.67%;
  --close-deg: 139.72deg;
}
.blade-2 {
  background-image: url("../assets/images/logo-blade-2.png");
  transform-origin: 58.21% 45.18%;
  --close-deg: 136.62deg;
}
.blade-3 {
  background-image: url("../assets/images/logo-blade-3.png");
  transform-origin: 38.47% 50.41%;
  --close-deg: 146.93deg;
}
.blade-4 {
  background-image: url("../assets/images/logo-blade-4.png");
  transform-origin: 58.10% 58.18%;
  --close-deg: 135.31deg;
}
.blade-5 {
  background-image: url("../assets/images/logo-blade-5.png");
  transform-origin: 45.59% 62.03%;
  --close-deg: 142.12deg;
}

.logo:hover .blade,
.logo.intro-play .blade { animation: blade-in-out 1.8s cubic-bezier(0.65, 0, 0.35, 1); }
.logo:hover .blade-1, .logo.intro-play .blade-1 { animation-delay: 0s; }
.logo:hover .blade-2, .logo.intro-play .blade-2 { animation-delay: 0.06s; }
.logo:hover .blade-3, .logo.intro-play .blade-3 { animation-delay: 0.12s; }
.logo:hover .blade-4, .logo.intro-play .blade-4 { animation-delay: 0.18s; }
.logo:hover .blade-5, .logo.intro-play .blade-5 { animation-delay: 0.24s; }

@keyframes blade-in-out {
  0%   { transform: rotate(0deg) scale(1); }
  38%  { transform: rotate(var(--close-deg)) scale(1.7); }
  70%  { transform: rotate(-30deg) scale(1); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Thin curved radial seams, like the dividing lines between real iris
   blades — each a gentle bezier sweeping outward with the same pinwheel
   twist as the blade artwork, never tracing the outer rim, so the outside
   of the circle stays clean solid teal. Shown only at the closed instant. */
.logo-seams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.seam {
  fill: none;
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.logo:hover .seam,
.logo.intro-play .seam { animation: seam-flash 1.8s cubic-bezier(0.65, 0, 0.35, 1); }

@keyframes seam-flash {
  0%   { stroke: rgba(255, 255, 255, 0); }
  38%  { stroke: rgba(255, 255, 255, 0.85); }
  70%  { stroke: rgba(255, 255, 255, 0); }
  100% { stroke: rgba(255, 255, 255, 0); }
}

/* Real blade coverage never tiles perfectly at any scale (irregular shapes),
   so this solid disc — the logo's own teal — eases in right at the closed
   peak to guarantee a clean, fully-filled circle. The blades still visibly
   grow and rotate around it; this just backstops any gap between them. */
.logo-choke {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--teal);
  transform: scale(0);
  opacity: 0;
}
.logo:hover .logo-choke,
.logo.intro-play .logo-choke { animation: choke-pulse 1.8s cubic-bezier(0.65, 0, 0.35, 1); }

@keyframes choke-pulse {
  0%   { transform: scale(0);    opacity: 0; }
  38%  { transform: scale(1.08); opacity: 1; }
  70%  { transform: scale(0);    opacity: 0; }
  100% { transform: scale(0);    opacity: 0; }
}

.nav-toggle span { transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero motion ---------- */
.hero-swirl {
  transform: translate(-46%, -52%) translateY(var(--py, 0px));
  /* Breathing holds off until the intro has settled. */
  animation: swirl-breathe 9s ease-in-out 2.6s infinite;
}
@keyframes swirl-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }

/* Hero swirl: the arcs sweep themselves into existence on load, then drift.
   Intro and ambient spin live on separate nested <g> elements so the two
   rotations compose instead of overwriting each other. */
.hero-swirl svg g {
  transform-box: view-box;
  transform-origin: center;
}
.swirl-intro { animation: swirl-intro 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.swirl-intro-2 { animation: swirl-intro-2 3s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
.swirl-spin { animation: swirl-spin 34s linear infinite; }
.swirl-spin-r { animation: swirl-spin-r 26s linear infinite; }

@keyframes swirl-intro {
  0% { transform: rotate(-165deg) scale(0.5); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
@keyframes swirl-intro-2 {
  0% { transform: rotate(150deg) scale(0.35); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: rotate(0deg) scale(1); opacity: 1; }
}
@keyframes swirl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes swirl-spin-r { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Resting state is fully drawn, so with animations off the arcs still render. */
.swirl-arc-1 {
  stroke-dasharray: 800 362;
  stroke-dashoffset: 0;
  animation: swirl-draw-1 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.swirl-arc-2 {
  stroke-dasharray: 500 330;
  stroke-dashoffset: 0;
  animation: swirl-draw-2 2.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
/* r=185 -> circumference 1162; r=132 -> 829. Arc 2 sweeps the other way. */
@keyframes swirl-draw-1 { from { stroke-dashoffset: 1162; } to { stroke-dashoffset: 0; } }
@keyframes swirl-draw-2 { from { stroke-dashoffset: -829; } to { stroke-dashoffset: 0; } }

.hero-badge.reveal {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: none;
}
.hero-badge.is-visible { animation: badge-bob 5s ease-in-out infinite 1.1s; }
@keyframes badge-bob { 50% { transform: translateY(-5px); } }

/* ---------- Masked word-by-word heading reveal ---------- */
.reveal.words { opacity: 1; translate: none; scale: none; filter: none; }
.words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.words .word-inner {
  display: inline-block;
  transform: translateY(115%) rotate(2.5deg);
  transform-origin: 0 100%;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.words.is-visible .word-inner { transform: translateY(0) rotate(0deg); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 0;
  margin: 0 0 30px;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 42px;
  padding-right: 42px;
}
.marquee-group span {
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--near-black);
  white-space: nowrap;
}
.marquee-group .star { color: var(--teal); font-size: 20px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Button shine, ripple, magnetism ---------- */
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::before { animation: btn-shine 0.9s ease; }
.tag-row .btn::before { display: none; }
@keyframes btn-shine { to { left: 130%; } }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  opacity: 0.8;
  animation: ripple 0.65s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

.magnetic { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.18s ease; }
.floating-cta.magnetic {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

/* ---------- 3D tilt + cursor spotlight ---------- */
.tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:
    transform 0.25s ease-out,
    box-shadow 0.35s ease,
    opacity 0.8s ease,
    translate 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
}
.package-card.tilt:hover { box-shadow: 0 24px 60px rgba(18, 17, 17, 0.14); }
.benefit-card.tilt:hover { box-shadow: 0 24px 55px rgba(0, 0, 0, 0.18); }
.dark-card.tilt:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25); }
.contact-card.tilt:hover { box-shadow: 0 18px 45px rgba(18, 17, 17, 0.16); }

.benefit-card::after,
.package-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.benefit-card::after {
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.28), transparent 65%);
}
.package-card::after {
  background: radial-gradient(300px circle at var(--sx, 50%) var(--sy, 50%), rgba(70, 189, 198, 0.16), transparent 65%);
}
.benefit-card:hover::after,
.package-card:hover::after { opacity: 1; }

.benefit-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.benefit-card:hover .benefit-icon { transform: scale(1.25) rotate(-8deg); }

.popular-chip { animation: chip-pulse 2.6s ease-in-out infinite; }
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 17, 17, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(18, 17, 17, 0); }
}

/* ---------- Carousel: drag + hover zoom ---------- */
.carousel-track { cursor: grab; }
.carousel-track.dragging { scroll-behavior: auto; cursor: grabbing; }
.carousel-track.dragging .photo-card { pointer-events: none; }
.photo-card img {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}
.photo-card:hover img { transform: scale(1.07); }
.photo-card figcaption { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.photo-card:hover figcaption { transform: translateY(-6px); }

/* ---------- Parallax photos & widgets ---------- */
.dark-card-photo { will-change: transform; }
.widget-progress-bar div { transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.widget-days .active { animation: day-glow 3s ease-in-out infinite; }
@keyframes day-glow { 50% { box-shadow: 0 0 0 4px rgba(70, 189, 198, 0.3); } }

/* ---------- Footer link underlines ---------- */
.footer-col a { position: relative; width: fit-content; }
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}
.footer-col a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Form status pop ---------- */
.form-status.pop { animation: status-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes status-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.9); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: none; scale: none; filter: none; }
  .words .word-inner { transform: none; }
  .floating-cta { translate: 0 0; opacity: 1; }
  .hero-badge-chip { opacity: 1; transform: none; }
  .hero-badge-text { max-width: none; }
  .hero-badge-text-inner { opacity: 1; transform: none; }
  .step-list li h3, .step-list li p { opacity: 1; translate: none; }
  .step-list li::before {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
  }
  .step-spine-fill { height: 100% !important; }
  .swirl-intro, .swirl-intro-2 { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 32px;
    flex-direction: column;
    background: var(--cream);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }
  .main-nav.is-open { display: flex; }
  .nav-toggle { display: flex; }

  .hero { padding: 110px 0 110px; }
  .hero-title { font-size: 42px; }
  .serif-heading { font-size: 38px; }
  .sans-display { font-size: 32px; }
  .sans-heading { font-size: 26px; }

  .teal-panel { border-radius: 32px; padding: 60px 24px; margin: 0 16px; }
  .carousel-track { justify-content: flex-start; }

  .split-grid { grid-template-columns: 1fr; gap: 44px; }
  .split-grid-reverse .split-copy { order: 0; }
  .split-grid-reverse .dark-card { order: 1; }
  .dark-card { min-height: 0; padding: 28px; }
  .dark-card-photo { height: 280px; }

  .benefits-grid { grid-template-columns: 1fr; }
  .packages-grid { grid-template-columns: 1fr; }
  .diagram-wrap { grid-template-columns: 1fr; gap: 20px; }
  .pullquote { padding: 42px 0; }
  .pullquote blockquote { font-size: 30px; }
  .acc-q { font-size: 17px; padding: 20px 2px; }
  .acc-a p { padding-right: 8px; }
  .step-list li { padding-left: 54px; }
  .contact-cards { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; }
  .footer-cols { flex-wrap: wrap; gap: 36px; }
  .floating-cta { right: 12px; bottom: 12px; font-size: 13px; padding: 10px 14px; }

  .marquee-group { gap: 28px; padding-right: 28px; }
  .marquee-group span { font-size: 22px; }
  .blob { filter: blur(50px); opacity: 0.4; }
}