/* ==========================================================================
   Masina Funeral Service, global stylesheet
   Design register: brand (design is the product). Grief interface.
   Palette: strictly black, white and silver (neutral).
   OKLCH throughout.
   ========================================================================== */

/* --- Fonts (Google Fonts: Poppins + Dancing Script as signature) --------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@500;700&display=swap");

/* --- Design tokens ------------------------------------------------------- */
:root {
  /* Colour, strictly black, white and silver (neutral, chroma 0) */
  --snow: oklch(0.985 0 0);           /* body bg, pure neutral white */
  --snow-2: oklch(0.963 0 0);         /* faint section tint */
  --ink: oklch(0.22 0 0);             /* text + dark banners (near-black) */
  --ink-2: oklch(0.30 0 0);           /* raised ink surface */
  --slate: oklch(0.44 0 0);           /* secondary text, >=4.5:1 on snow */
  --mist: oklch(0.88 0 0);            /* borders / hairlines */
  --mist-2: oklch(0.93 0 0);          /* soft fills */
  /* Silver accent (token names kept as --gold* to avoid churn; values are silver) */
  --gold: oklch(0.74 0 0);            /* silver, thread, marks, decorative accents */
  --gold-ink: oklch(0.22 0 0);        /* accent text/links on light: near-black */
  --gold-soft: oklch(0.94 0 0);       /* light silver wash */
  --silver-line: oklch(0.80 0 0);     /* brighter silver for hairline details */
  --danger: oklch(0.50 0.15 27);      /* error text, >=4.5:1 on snow */
  --on-ink: oklch(0.98 0 0);          /* text on ink banners */
  --on-ink-soft: oklch(0.80 0 0);     /* secondary text on ink */

  /* Typography — Poppins throughout, Dancing Script for signature flourishes.
     To swap Dancing Script for the real Brittany Signature later, replace the
     @import line and this token. */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Dancing Script", "Brittany Signature", "Great Vibes", cursive;
  --step--1: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);   /* body >=17px */
  --step-1: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.36rem + 0.7vw, 2rem);
  --step-3: clamp(1.85rem, 1.6rem + 1.25vw, 2.75rem);
  --step-4: clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
  --step-5: clamp(2.7rem, 2.1rem + 3vw, 4.5rem);             /* display, <=6rem */
  --measure: 68ch;

  /* Spacing (fluid rhythm) */
  --space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem);
  --space-s: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
  --space-l: clamp(2.25rem, 2rem + 1.25vw, 3.25rem);
  --space-xl: clamp(3.5rem, 3rem + 2.5vw, 5.5rem);
  --space-2xl: clamp(5rem, 4rem + 4vw, 8rem);

  /* Section rhythm: three deliberate values, not one repeated everywhere.
     Roughly 64px / 96px / 160px at desktop. */
  --rhythm-close: clamp(2.5rem, 2.2rem + 1.2vw, 4rem);
  --rhythm-normal: clamp(3.5rem, 3rem + 2.5vw, 6rem);
  --rhythm-open: clamp(5rem, 3.8rem + 4.5vw, 10rem);

  /* Radius: one value plus pill. */
  --radius: 10px;
  --radius-pill: 999px;

  /* Shadow, single, defined, tinted to ink; never paired with 1px border */
  --shadow-1: 0 1px 2px oklch(0.22 0 0 / 0.06);
  --shadow-2: 0 6px 20px -8px oklch(0.22 0 0 / 0.16);

  /* Z-index scale (semantic) */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Layout */
  --container: 74rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.125rem, 0.9rem + 1.1vw, 2rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}

/* --- Reset / base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--snow);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: var(--gold-ink);
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}
a:hover {
  text-decoration-thickness: 0.09em;
}

/* Default icon sizing, contextual classes override where needed. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}
.eyebrow .icon {
  width: 1.1em;
  height: 1.1em;
}

/* --- Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}
h1 {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--step-3);
  font-weight: 600;
}
h3 {
  font-size: var(--step-2);
  font-weight: 600;
}
h4 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
}

/* Signature-script accent — short subheadings, pull-quotes, section eyebrows. */
.script {
  font-family: var(--font-script);
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  color: var(--ink);
}
.ink-band .script,
.on-ink .script { color: var(--on-ink); }
p,
li {
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose > * + * {
  margin-top: var(--space-s);
}
.prose h2,
.prose h3 {
  margin-top: var(--space-l);
  margin-bottom: calc(var(--space-s) * -0.4);
}
.prose ul,
.prose ol {
  padding-left: 1.35em;
  display: grid;
  gap: 0.5em;
}
.prose li {
  padding-left: 0.2em;
}
.prose strong {
  font-weight: 600;
}
.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--slate);
  max-width: 60ch;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.zulu {
  font-style: italic;
  color: var(--slate);
}

/* --- Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  max-width: var(--container-narrow);
}
.section {
  padding-block: var(--rhythm-normal);
}
.section-tight {
  padding-block: var(--rhythm-close);
}
/* Deliberate rhythm variants. Use them, do not default everything to one. */
.section--open {
  padding-block: var(--rhythm-open);
}
.section--close {
  padding-block: var(--rhythm-close);
}
.section--top-0 {
  padding-top: 0;
}
.section--bottom-0 {
  padding-bottom: 0;
}
.section--tint {
  background: var(--snow-2);
}
.stack > * + * {
  margin-top: var(--space-s);
}
.stack-l > * + * {
  margin-top: var(--space-l);
}
.flow-m > * + * {
  margin-top: var(--space-m);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--on-ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus {
  top: 0.75rem;
}

/* --- Focus ------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-ink :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.btn:hover {
  background: var(--ink-2);
}
.btn:active {
  transform: translateY(1px);
}
/* Inverse / light button (white on dark banners). Class name kept for markup. */
.btn--gold {
  --btn-bg: var(--snow);
  --btn-fg: var(--ink);
  border-color: var(--snow);
}
.btn--gold:hover {
  background: oklch(0.9 0 0);
}
/* White + ink for use on dark/photo backgrounds (clearer naming) */
.btn--white {
  --btn-bg: #fff;
  --btn-fg: #1a1a1a;
  border-color: #fff;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.45);
}
.btn--white:hover {
  background: #f3f3f3;
  color: #1a1a1a;
}
/* Solid green WhatsApp pill, large variant. */
.btn--whatsapp {
  --btn-bg: #25D366;
  --btn-fg: #fff;
  border-color: #25D366;
  box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.55);
}
.btn--whatsapp:hover {
  background: #1ebe59;
  border-color: #1ebe59;
  color: #fff;
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--mist);
}
.btn--ghost:hover {
  background: var(--mist-2);
}
.on-ink .btn--ghost,
.aside-card .btn--ghost,
.ink-band .btn--ghost {
  --btn-fg: var(--on-ink);
  border-color: oklch(0.5 0 0);
}
.on-ink .btn--ghost:hover,
.aside-card .btn--ghost:hover,
.ink-band .btn--ghost:hover {
  background: oklch(0.32 0 0);
}
.btn--lg {
  min-height: 54px;
  font-size: var(--step-1);
  padding: 0.85rem 1.6rem;
}
.btn--block {
  width: 100%;
}
.btn .icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
  color: var(--gold-ink);
}
.link-arrow .icon {
  width: 1em;
  height: 1em;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* --- Header -------------------------------------------------------------- */
:root {
  --header-h: 68px;
  --logo-h: 40px;
}
@media (min-width: 62rem) {
  :root {
    --header-h: 84px;
    --logo-h: 52px;
  }
}
html[data-condensed="true"] {
  --header-h: 60px;
  --logo-h: 36px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in oklch, var(--snow) 96%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--mist);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  height: var(--header-h);
  transition: height 200ms var(--ease-out);
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  /* Guarantees the logo image can never exceed these dimensions, even if
     the global img rules load first or a cached stale CSS lingers. */
  height: var(--logo-h);
  flex: 0 0 auto;
}
.brand img {
  display: block !important;
  height: var(--logo-h) !important;
  width: auto !important;
  max-height: var(--logo-h) !important;
  max-width: none !important;
  object-fit: contain;
  transition: height 200ms var(--ease-out);
}
.footer-logo {
  display: inline-block;
  height: 72px;
  margin-bottom: var(--space-m);
}
.footer-logo img {
  display: block !important;
  height: 72px !important;
  width: auto !important;
  max-width: none !important;
  /* Logo is pure black on transparent; invert to white on dark footer. */
  filter: invert(1) brightness(1.05);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 3px;
}
.primary-nav {
  display: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Green call button, prominent in the header. Visible from 32rem+ so it
   stays reachable on all but the narrowest phones (which have the sticky
   bottom action bar). */
.header-call {
  display: none;
  background: #25D366;
  color: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 0.45rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px -4px rgba(37, 211, 102, 0.55);
  transition: transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.header-call:hover {
  background: #1ebe59;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px -4px rgba(37, 211, 102, 0.7);
}
.header-call .icon { width: 1.1em; height: 1.1em; flex: none; }
.header-call span { white-space: nowrap; }
@media (min-width: 32rem) {
  .header-call { display: inline-flex; }
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--step--1);
}
.nav-toggle .icon {
  width: 1.35em;
  height: 1.35em;
}

/* Mobile nav panel (native <dialog>-free, CSS + tiny JS) */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--snow);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility var(--dur);
}
.mobile-nav[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
}
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--mist);
}
.mobile-nav__list {
  list-style: none;
  padding: var(--space-m) var(--gutter);
  display: grid;
  gap: 0.35rem;
  overflow-y: auto;
}
.mobile-nav__list a:not(.btn) {
  display: block;
  padding: 0.85rem 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--mist-2);
}
.mobile-nav__list a:not(.btn)[aria-current="page"] {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.nav-close {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--mist);
  background: transparent;
  border-radius: var(--radius);
}

/* Desktop nav shows only on very wide screens so none of the long labels
   ("If someone has died", "Funeral plans", "Areas we serve") ever wrap.
   Below this width the hamburger menu is the sole navigation — cleaner. */
@media (min-width: 85rem) {
  .primary-nav {
    display: block;
  }
  .primary-nav ul {
    display: flex;
    gap: clamp(0.9rem, 0.4rem + 0.8vw, 1.5rem);
    list-style: none;
  }
  .primary-nav a {
    display: inline-block;
    padding: 0.5rem 0.15rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .primary-nav a:hover {
    border-bottom-color: var(--gold-accent);
    color: var(--gold-accent);
  }
  .primary-nav a[aria-current="page"] {
    border-bottom-color: var(--gold-accent);
    color: var(--ink);
  }
  .nav-toggle {
    display: none;
  }
}

/* --- Sticky mobile action bar (call + WhatsApp) -------------------------- */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gold);
  padding-top: 2px;
  box-shadow: 0 -6px 20px -12px oklch(0.22 0 0 / 0.5);
}
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.5rem;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--on-ink);
  background: var(--ink);
}
.action-bar a:active {
  background: var(--ink-2);
}
.action-bar .icon {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}
.action-bar__label small {
  display: block;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--on-ink-soft);
  letter-spacing: 0.02em;
}
body {
  padding-bottom: 56px; /* clear the fixed action bar on mobile */
}
@media (min-width: 62rem) {
  .action-bar {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* --- Ink banner (echoes the profile's reversed-black bands) -------------- */
.ink-band {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}
.ink-band h1,
.ink-band h2,
.ink-band h3 {
  color: var(--on-ink);
}
.ink-band .lede {
  color: var(--on-ink-soft);
}
.ink-band .eyebrow {
  color: var(--gold);
}
.on-ink {
  color: var(--on-ink);
}

/* --- Decorative bands (quiet, no tribal motif) --------------------------- */
.motif-band { display: none; }

/* Vertical journey thread — single hairline, no pattern. */
.journey { position: relative; }
.journey__thread {
  position: absolute;
  left: 22px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background-color: var(--mist);
}
.journey__stage {
  position: relative;
  padding-left: 4.25rem;
  padding-block: var(--space-m);
}
.journey__node {
  position: absolute;
  left: 14px;
  top: calc(var(--space-m) + 0.4rem);
  width: 18px;
  height: 18px;
  background: var(--ink);
  border: 3px solid var(--snow);
  box-shadow: 0 0 0 1px var(--ink);
  border-radius: 50%;
}
.journey__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--gold-ink);
  letter-spacing: 0.05em;
}
.journey__stage h3 {
  margin-top: 0.15rem;
}
.journey__services {
  list-style: none;
  padding: 0;
  margin-top: var(--space-s);
  display: grid;
  gap: 0.5rem;
}
.journey__services a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--snow);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  transition: border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.section--tint .journey__services a {
  background: var(--snow);
}
.journey__services a:hover {
  border-color: var(--gold);
  transform: translateX(2px);
}
.journey__services .icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--gold-ink);
  flex: none;
}
.journey__services span.sv-desc {
  display: block;
  font-weight: 400;
  color: var(--slate);
  font-size: 1.0625rem;
  line-height: 1.45;
  margin-top: 0.15rem;
}
.journey__services a {
  align-items: flex-start;
}
.journey__services .icon {
  margin-top: 0.3rem;
}

/* --- Hero ---------------------------------------------------------------
   Asymmetric: the text sits in roughly 7 of 12 columns and the H1 is the
   only genuinely large thing on the page. */
.hero {
  padding-block: clamp(2.25rem, 1.9rem + 1.8vw, 4.5rem);
}
@media (min-width: 60rem) {
  .hero {
    max-width: min(var(--container), 100%);
  }
  .hero__title,
  .hero__lede,
  .hero__hours {
    max-width: 58%;
  }
}
.hero__place {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--on-ink-soft);
  margin-bottom: 0.9rem;
}
.hero__place .icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--gold);
}
.hero__title {
  max-width: 17ch;
}
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-ink-soft);
  margin-top: 1rem;
}
.hero__actions {
  margin-top: 1.6rem;
}
.hero__hours {
  margin-top: 1.1rem;
  color: var(--on-ink-soft);
  font-size: 0.92rem;
}

/* --- Reasons (why choose): plain text blocks, no icons, no cards --------- */
.reasons {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 48rem) {
  .reasons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m) var(--space-l);
  }
}
.reason h3 {
  font-size: var(--step-1);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--ink);
}
.reason p {
  color: var(--slate);
  margin-top: 0.5rem;
  font-size: 1.0625rem;
}

/* --- Intent fork --------------------------------------------------------- */
.fork {
  display: grid;
  gap: var(--space-s);
}
@media (min-width: 40rem) {
  .fork {
    grid-template-columns: 1fr 1fr;
  }
}
.fork__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-m);
  background: var(--snow);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.fork__card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.fork__card h2 {
  font-size: var(--step-2);
  font-family: var(--font-display);
  max-width: 18ch;
}
.fork__card p {
  color: var(--slate);
  font-size: 1.0625rem;
}
.fork__card .link-arrow {
  margin-top: auto;
}
.fork__icon {
  width: 30px;
  height: 30px;
  color: var(--gold-ink);
}

/* --- Trust strip --------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-s) var(--space-m);
}
.trust__item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.trust__item .icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex: none;
  margin-top: 3px;
}
.trust__item strong {
  display: block;
  font-weight: 600;
}
.trust__item span {
  font-size: 0.92rem;
  color: var(--on-ink-soft);
}

/* --- Section heading ----------------------------------------------------- */
.section-head {
  max-width: 56ch;
  margin-bottom: var(--space-l);
}
.section-head p {
  color: var(--slate);
  margin-top: var(--space-xs);
  font-size: var(--step-1);
  line-height: 1.5;
}

/* --- Section opener variants ---------------------------------------------
   Three structurally different ways to open a section, so the page does not
   repeat one skeleton. Each is used where it fits, not in rotation. */

/* (a) Split: heading left, supporting text right. Breaks the stacked stack. */
.head-split {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
  align-items: end;
}
@media (min-width: 52rem) {
  .head-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-l);
  }
  .head-split > :first-child {
    max-width: 22ch;
  }
}
.head-split h2 {
  margin: 0;
}
.head-split p {
  color: var(--slate);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
}

/* (b) Lead: one large statement carrying the section on its own. */
.head-lead {
  max-width: 34ch;
  margin-bottom: var(--space-l);
}
.head-lead h2 {
  font-size: var(--step-4);
  line-height: 1.06;
}

/* (c) Ruled label: a hairline and a small caption, for utility sections. */
.head-ruled {
  margin-bottom: var(--space-m);
  border-top: 1px solid var(--ink);
  padding-top: var(--space-s);
  display: grid;
  gap: 0.35rem;
}
.head-ruled span {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.ink-band .head-ruled {
  border-top-color: var(--gold);
}
.ink-band .head-ruled span {
  color: var(--on-ink-soft);
}
.head-ruled h2 {
  margin: 0;
}

/* Full-bleed media that runs off the right edge on wide screens. */
.bleed-right {
  margin-right: calc(var(--gutter) * -1);
}
@media (min-width: 74rem) {
  .bleed-right {
    margin-right: calc((100vw - var(--container)) / -2 - var(--gutter));
  }
}

/* --- Plans --------------------------------------------------------------- */
.plan-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: var(--space-s);
  background: var(--gold-soft);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.plan-note .icon {
  width: 20px;
  height: 20px;
  color: var(--gold-ink);
  flex: none;
  margin-top: 2px;
}

/* Mobile: stacked plan cards */
.plan-cards {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  background: var(--snow);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
}
.plan-card__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
}
.plan-card__price {
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.plan-card__price b {
  font-size: var(--step-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.plan-card__price span {
  color: var(--slate);
  font-size: 0.9rem;
}
.plan-card__daily {
  color: var(--gold-ink);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 0.15rem;
}
.plan-card dl {
  margin-top: var(--space-s);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  font-size: 0.95rem;
}
.plan-card dt {
  color: var(--slate);
}
.plan-card dd {
  font-weight: 600;
  text-align: right;
}
.plan-card ul {
  margin-top: var(--space-s);
  padding-left: 1.2em;
  display: grid;
  gap: 0.3rem;
  font-size: 0.92rem;
}
.plan-card .btn {
  margin-top: var(--space-m);
}

/* Desktop comparison table */
.plan-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.plan-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.plan-table caption {
  text-align: left;
  color: var(--slate);
  font-size: 0.9rem;
  margin-bottom: var(--space-s);
}
.plan-table {
  font-variant-numeric: tabular-nums;
}
.plan-table thead th {
  position: sticky;
  top: var(--header-h);
  z-index: 1;
}
.plan-table th,
.plan-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mist);
  vertical-align: top;
  font-size: 1.0625rem;
}
.plan-table thead th {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.plan-table thead th:first-child {
  background: var(--ink);
}
.plan-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--slate);
  font-family: var(--font-body);
  background: var(--snow-2);
  white-space: nowrap;
}
.plan-table td b {
  font-weight: 600;
}
.plan-table .row-price td,
.plan-table .row-price th {
  font-size: 1.05rem;
}
.hide-lt-768 {
  display: none;
}
.show-lt-768 {
  display: block;
}
@media (min-width: 48rem) {
  .hide-lt-768 {
    display: block;
  }
  .show-lt-768 {
    display: none;
  }
}

/* --- Inclusions list ----------------------------------------------------
   Every item in a scheme is included, so a tick beside each one carries no
   information. Hairline rows in columns instead. */
.inclusions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--mist);
}
@media (min-width: 34rem) {
  .inclusions {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-l);
  }
}
.inclusions li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--mist);
  font-size: 1.0625rem;
  max-width: none;
}

/* --- Plan-fit helper (progressive enhancement) --------------------------- */
.helper {
  padding: var(--space-m);
  background: var(--snow-2);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
}
.helper fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-m);
}
.helper legend {
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.helper__options {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.helper__options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: var(--snow);
  cursor: pointer;
  font-size: 0.95rem;
}
.helper__options input {
  accent-color: var(--gold-ink);
  width: 26px;
  height: 26px;
  flex: none;
}
.helper__options label:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.helper__result {
  margin-top: var(--space-s);
  padding: var(--space-s);
  border-radius: var(--radius);
  background: var(--gold-soft);
  font-weight: 600;
}
.helper__result[hidden] {
  display: none;
}

/* --- Cards used deliberately: service links on hub ----------------------- */
.svc-list {
  display: grid;
  gap: var(--space-s);
}
.svc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  background: var(--snow);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.svc-item:hover {
  border-color: var(--gold);
  transform: translateX(3px);
}
.svc-item__icon {
  width: 30px;
  height: 30px;
  color: var(--gold-ink);
  flex: none;
}
.svc-item h3 {
  font-size: var(--step-1);
  font-family: var(--font-display);
}
.svc-item p {
  color: var(--slate);
  font-size: 1.0625rem;
  margin-top: 0.2rem;
}
.svc-item .icon-arrow {
  width: 1.2em;
  height: 1.2em;
  color: var(--gold-ink);
}

/* --- Forms --------------------------------------------------------------- */
.field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: var(--space-s);
}
.field label {
  font-weight: 600;
  font-size: 0.96rem;
}
.field .req {
  color: var(--danger);
}
.field .hint {
  font-size: 0.85rem;
  color: var(--slate);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  background: var(--snow);
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  font-size: var(--step-0);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-ink);
}
.field .error {
  font-size: 0.85rem;
  color: var(--danger);
  font-weight: 600;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: var(--space-s);
  background: var(--snow-2);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  margin-bottom: var(--space-s);
}
.consent {
  min-height: 44px;
  align-items: center;
}
.consent input {
  width: 28px;
  height: 28px;
  flex: none;
  accent-color: var(--gold-ink);
}
.consent label {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.5;
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  padding: var(--space-s);
  border-radius: var(--radius);
  margin-bottom: var(--space-s);
  font-weight: 600;
}
.form-status[hidden] {
  display: none;
}
.form-status--ok {
  background: var(--gold-soft);
  color: var(--ink);
}
.form-status--err {
  background: oklch(0.93 0.05 27);
  color: var(--danger);
}

/* --- FAQ ----------------------------------------------------------------- */
.faq details {
  border-bottom: 1px solid var(--mist);
  padding: var(--space-s) 0;
}
.faq summary {
  min-height: 44px;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background: var(--gold-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center/contain no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin-top: var(--space-xs);
  color: var(--slate);
}

/* --- Breadcrumbs --------------------------------------------------------- */
.breadcrumbs {
  padding-block: var(--space-s);
  font-size: 0.88rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  color: var(--slate);
}
.breadcrumbs li {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--mist);
}
.breadcrumbs a {
  color: var(--slate);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--gold-ink);
}
.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* --- Image slots (placeholder treatment) --------------------------------- */
.slot {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--mist-2);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--slate);
}
.slot__label {
  position: relative;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
}
.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.ratio-4-3 {
  aspect-ratio: 4 / 3;
}
.ratio-3-2 {
  aspect-ratio: 3 / 2;
}
.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* --- Contact / info blocks ---------------------------------------------- */
.info-grid {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 48rem) {
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.info-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-s);
}
.info-list li {
  display: block;
  border-top: 1px solid var(--mist);
  padding-top: 0.75rem;
}
.info-list .icon {
  width: 22px;
  height: 22px;
  color: var(--gold-ink);
  margin-top: 3px;
  flex: none;
}
.info-list strong {
  display: block;
}
.info-list a {
  color: var(--ink);
  text-decoration: none;
}
.info-list a:hover {
  color: var(--gold-ink);
}
.map-embed {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
}

/* --- Two-column prose layout (guide, service, legal) --------------------- */
.doc {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 60rem) {
  .doc {
    grid-template-columns: 1fr 17rem;
    align-items: start;
  }
  .doc__aside {
    position: sticky;
    top: 90px;
  }
}
.aside-card {
  padding: var(--space-m);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius);
}
.aside-card h2,
.aside-card h3 {
  color: var(--on-ink);
  font-size: var(--step-1);
}
.aside-card p {
  color: var(--on-ink-soft);
  font-size: 1.0625rem;
  margin-top: 0.5rem;
}
.aside-card .btn {
  margin-top: var(--space-s);
}
.toc {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.toc a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.94rem;
  display: block;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--mist-2);
}
.toc a:hover {
  color: var(--gold-ink);
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-ink-soft);
}
.footer-grid {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-xl);
}
@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
.site-footer h2 {
  color: var(--on-ink);
  font-size: var(--step-0);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-s);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.site-footer a {
  color: var(--on-ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-footer a:hover {
  color: var(--gold);
}
.footer-brand p {
  color: var(--on-ink-soft);
  font-size: 0.95rem;
  margin-top: var(--space-s);
  max-width: 40ch;
}
.footer-legal {
  border-top: 1px solid oklch(0.34 0 0);
  padding-block: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-m);
  justify-content: space-between;
  font-size: 0.85rem;
}

/* --- Motion: one orchestrated moment ------------------------------------
   The homepage hero staggers in and the journey thread draws itself, once,
   on load. Nothing else on the site animates on entry. Content is never
   gated on a class, so everything is visible with JS disabled or reduced
   motion on. */
/* Gated on .js (set by main.js). Without JavaScript there is no animation and
   every element renders at its natural, fully visible state. */
@media (prefers-reduced-motion: no-preference) {
  .js .home-hero .photo-hero__eyebrow { animation: rise-in 0.6s var(--ease-out) both; }
  .js .home-hero .photo-hero__title { animation: rise-in 0.7s var(--ease-out) 120ms both; }
  .js .home-hero .photo-hero__lede { animation: rise-in 0.6s var(--ease-out) 240ms both; }
  .js .home-hero .photo-hero__actions { animation: rise-in 0.6s var(--ease-out) 340ms both; }
  .js .home-hero .photo-hero__feature { animation: rise-in 0.6s var(--ease-out) 440ms both; }
  .js .journey__thread { animation: thread-draw 1.1s var(--ease-out) 200ms both; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes thread-draw {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0% 0); }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Utilities ----------------------------------------------------------- */
.text-center {
  text-align: center;
}
.mt-l {
  margin-top: var(--space-l);
}
.mt-m {
  margin-top: var(--space-m);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.cluster--center {
  justify-content: center;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--mist-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate);
}
.pill .icon {
  width: 1em;
  height: 1em;
}

/* --- Photo hero (home) --------------------------------------------------
   Full-bleed cascading photograph with a dark gradient scrim for text.
   Replaces the old solid-black hero band on the homepage only. */
.photo-hero {
  position: relative;
  color: var(--on-ink);
  background: #0b0b0b;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(520px, 72vh, 760px);
  display: flex;
  align-items: flex-end;
}
.photo-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.photo-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Scrim: strong at the bottom, lighter at the top, so the headline reads */
.photo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.85) 100%);
}
.photo-hero .container {
  padding-block: var(--rhythm-normal) var(--rhythm-close);
  width: 100%;
}
.photo-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  color: var(--on-ink);
  margin-bottom: 0.3rem;
  line-height: 1;
}
.photo-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.6rem + 2.6vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  max-width: 20ch;
  margin: 0;
}
.photo-hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--on-ink-soft);
  margin-top: 1rem;
  max-width: 48ch;
}
.photo-hero__actions {
  margin-top: 1.75rem;
}
.photo-hero__feature {
  margin-top: var(--space-l);
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--on-ink);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  max-width: 32ch;
}
.photo-hero__feature small {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  font-weight: 600;
}
.photo-hero__feature strong {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--on-ink);
}
.photo-hero__feature a {
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* --- Closing portrait (above-footer image band) ------------------------
   Full-bleed photograph of a family moment. Reads as a human sign-off
   before the footer's utility content takes over. */
.closing-portrait {
  position: relative;
  min-height: clamp(420px, 60vh, 620px);
  display: flex;
  align-items: center;
  color: var(--on-ink);
  background: #0b0b0b;
  overflow: hidden;
  isolation: isolate;
}
.closing-portrait__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.closing-portrait__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.closing-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.15) 100%);
}
.closing-portrait .container {
  padding-block: var(--rhythm-normal);
  width: 100%;
}
.closing-portrait__script {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
  color: var(--on-ink);
  line-height: 1;
  margin-bottom: 0.4rem;
  display: block;
}
.closing-portrait__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--on-ink);
  margin: 0;
  max-width: 22ch;
}
.closing-portrait__body {
  color: var(--on-ink-soft);
  margin-top: 1rem;
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
}
.closing-portrait__actions {
  margin-top: 1.75rem;
}
@media (min-width: 48rem) {
  .closing-portrait__media img { object-position: center 20%; }
}

/* ======================================================================
   JOIN CTA — gold gradient band above the footer, with watermark + figure
   Pattern inspired by the Ncanda Group "Switch to Ncanda Today" treatment,
   but palette-swapped from teal to warm gold on brand.
   ====================================================================== */
.join-cta {
  position: relative;
  overflow: visible;
  z-index: 2;
  color: #fff;
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  /* Tall enough to hold the family cutout with only a modest shoulder-
     level overlap sticking up into the dark cta-band above. The figure
     has its own bottom fade, so "flush" is achieved by the mask, not by
     cutting the image — no sharp edge, no gap. */
  min-height: clamp(460px, 56vh, 680px);
  display: flex;
  align-items: center;
  margin-bottom: 0;
  background:
    linear-gradient(135deg,
      #d5ad5b 0%,
      #b8893a 40%,
      #8a6422 100%);
}
/* Keep the footer below the join band in the stacking order so the cutout
   can visibly overlap into it. */
.site-footer { position: relative; z-index: 1; }
/* Expose the gradient as a reusable token for hover accents elsewhere */
:root {
  --gold-grad:
    linear-gradient(135deg, #d5ad5b 0%, #b8893a 40%, #8a6422 100%);
  --gold-grad-soft:
    linear-gradient(135deg, #f1dfae 0%, #e3c87f 60%, #c9a560 100%);
  --gold-accent: #b8893a;
}
/* Expose the gradient as a reusable token for hover accents elsewhere */
:root {
  --gold-grad:
    linear-gradient(135deg, #d5ad5b 0%, #b8893a 40%, #8a6422 100%);
  --gold-grad-soft:
    linear-gradient(135deg, #f1dfae 0%, #e3c87f 60%, #c9a560 100%);
  --gold-accent: #b8893a;
}
/* Soft radial highlight to give the gradient depth */
.join-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.22), transparent 55%);
  pointer-events: none;
}
/* The watermark mark (SVG symbol, no text) — large and quiet, sits
   behind the family cutout, centered within the band's right half. */
.join-cta__watermark {
  position: absolute;
  top: 50%;
  right: 14%;
  transform: translateY(-50%);
  width: clamp(220px, 32vw, 460px);
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  color: #fff;
  opacity: 0.14;
}
.join-cta__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Dot cluster patterns on the extreme edges — fine-grained decoration */
.join-cta__pattern {
  position: absolute;
  top: 50%;
  width: clamp(160px, 20vw, 280px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 1.5px, transparent 2px);
  background-size: 14px 14px;
  background-position: center;
  -webkit-mask: radial-gradient(circle, #000 0%, #000 55%, transparent 75%);
  mask: radial-gradient(circle, #000 0%, #000 55%, transparent 75%);
}
.join-cta__pattern--left { left: -6%; }
.join-cta__pattern--right { right: -6%; }

/* Content grid: text + figure.
   DO NOT set position: relative here — the figure is positioned
   relative to the parent .join-cta so its bottom: 0 aligns with the
   band's actual bottom edge. If this becomes positioned, the figure's
   containing block collapses to the text block's height. */
.join-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: center;
  text-align: center;
}
@media (min-width: 56rem) {
  .join-cta__inner {
    grid-template-columns: 1.4fr 1fr;
    text-align: center;
  }
}
.join-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
  position: relative;
  z-index: 2;
}
.join-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 16ch;
  margin: 0;
  text-shadow: 0 1px 20px rgba(0,0,0,0.15);
}
.join-cta__actions {
  gap: 0.9rem;
  justify-content: center;
}
.join-cta__fine {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  max-width: 50ch;
  text-align: center;
  margin: 0 auto;
}
.join-cta__fine a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.join-cta__fine a:hover {
  text-decoration-thickness: 2px;
}

/* Family cutout — feet flush at the gold band's bottom edge, head and
   shoulders overflowing up into the dark cta-band above by ~80–120px.
   The image's actual pixel content reaches the bottom edge (no padding
   in the file), so bottom: 0 lands the feet exactly on the band's
   bottom border. */
.join-cta__figure {
  display: none;
  position: absolute;
  right: clamp(1rem, 3vw, 4rem);
  bottom: 0;
  height: clamp(540px, 62vh, 760px);
  width: auto;
  z-index: 3;
  pointer-events: none;
}
.join-cta__figure img,
.join-cta__figure picture {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 20px 32px rgba(0,0,0,0.35));
}
@media (min-width: 56rem) {
  .join-cta__figure { display: block; }
  .join-cta__inner { grid-template-columns: 1.3fr 1fr; }
  .join-cta__text { align-items: flex-start; text-align: left; }
  .join-cta__title { max-width: 18ch; }
  .join-cta__fine { text-align: left; margin-inline: 0; }
  .join-cta__actions { justify-content: flex-start; }
}
@media (min-width: 80rem) {
  .join-cta__figure { height: clamp(600px, 66vh, 820px); }
  .join-cta__watermark { right: 24%; }
}

/* ======================================================================
   PILL BUTTONS (Ncanda-style capsule CTAs for the join band)
   ====================================================================== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.25);
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.35); }
.btn-pill:active { transform: translateY(0); }
.btn-pill .icon { width: 1.1em; height: 1.1em; flex: none; }
.btn-pill--light {
  background: #fff;
  color: #1a1a1a;
}
.btn-pill--light:hover { background: #f3f3f3; }
.btn-pill--whatsapp {
  background: #25D366;
  color: #fff;
}
.btn-pill--whatsapp:hover { background: #1ebe59; }
.btn-pill--dark {
  background: var(--ink);
  color: var(--on-ink);
}
.btn-pill--dark:hover { background: #000; }

/* ======================================================================
   HERO v2 — full-viewport photographic hero
   ====================================================================== */
.hero-v2 {
  position: relative;
  color: var(--on-ink);
  background: #0a0a0a;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(560px, 86vh, 920px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-xl);
}
.hero-v2__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: brightness(0.78);
}
.hero-v2__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0.25) 35%,
      rgba(0,0,0,0.75) 100%);
}
.hero-v2__content {
  position: relative;
  z-index: 1;
}
.hero-v2__script {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1;
  color: var(--on-ink);
  margin-bottom: 0.4rem;
  opacity: 0.95;
}
.hero-v2__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.6rem + 3.8vw, 5rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--on-ink);
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}
.hero-v2__lede {
  margin: 1.4rem auto 0;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  max-width: 54ch;
}
.hero-v2__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.hero-v2__cta .btn { min-width: 220px; }
@media (max-width: 32rem) {
  .hero-v2__cta .btn { width: 100%; }
}
.hero-v2__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 44px;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  display: block;
  text-decoration: none;
  z-index: 1;
}
.hero-v2__scroll span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50% { transform: translate(-50%, 10px); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2__scroll span { animation: none; }
}

/* Entry animation hook (gated on .js via main.js) */
@media (prefers-reduced-motion: no-preference) {
  .js .home-hero .hero-v2__script { animation: rise-in 0.7s var(--ease-out) both; }
  .js .home-hero .hero-v2__title { animation: rise-in 0.8s var(--ease-out) 120ms both; }
  .js .home-hero .hero-v2__lede { animation: rise-in 0.7s var(--ease-out) 260ms both; }
  .js .home-hero .hero-v2__cta { animation: rise-in 0.7s var(--ease-out) 380ms both; }
}

/* ======================================================================
   WORK STRIP — three photographs on the home page, link to gallery
   ====================================================================== */
.work-strip {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .work-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .work-strip__item--wide { grid-column: span 3; }
}
@media (min-width: 72rem) {
  .work-strip {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .work-strip__item--wide { grid-column: auto; }
}
.work-strip__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 4 / 3;
  background: var(--mist-2);
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.work-strip__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(184, 137, 58, 0.4);
}
.work-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.work-strip__item:hover img { transform: scale(1.04); }
.work-strip__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-m) var(--space-m) var(--space-s);
  color: #fff;
  font-weight: 600;
  font-size: 0.98rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 10%, rgba(0,0,0,0));
  display: block;
}

/* ======================================================================
   GALLERY — grid of photographs with hover accent and captions
   ====================================================================== */
.gallery {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 72rem) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 2; }
}
.gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mist-2);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.08);
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(184, 137, 58, 0.4);
}
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gallery__item--tall img { aspect-ratio: 3 / 4; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-m) var(--space-m) var(--space-s);
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  pointer-events: none;
}

.gallery-cta {
  margin-top: var(--space-xl);
  padding: var(--space-l) var(--space-m);
  text-align: center;
  background: var(--snow-2);
  border-radius: var(--radius);
}
.gallery-cta__script {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  color: var(--gold-accent);
  margin-bottom: 0.3rem;
  display: block;
}
.gallery-cta__body {
  color: var(--slate);
  max-width: 50ch;
  margin-inline: auto;
}

/* ======================================================================
   PAGE HERO V2 — dark band used at the top of every non-home page
   ====================================================================== */
.page-hero-v2 {
  padding-block: clamp(4rem, 3rem + 3vw, 7rem);
  position: relative;
  overflow: hidden;
}
.page-hero-v2__script {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1;
  color: var(--on-ink);
  opacity: 0.92;
  margin-bottom: 0.5rem;
}
.page-hero-v2__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero-v2__lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin-top: 1.2rem;
  max-width: 58ch;
}
.page-hero-v2__cta { margin-top: 2rem; gap: 0.75rem; }

/* ======================================================================
   PROMISE — mission statement band
   ====================================================================== */
.promise { text-align: center; }
.promise__script {
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--slate);
}
.promise__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 32ch;
}
.promise__body {
  margin: var(--space-m) auto 0;
  color: var(--slate);
  font-size: var(--step-1);
  line-height: 1.65;
  max-width: 58ch;
}
.promise p { max-width: 58ch; margin-inline: auto; }
.promise__divider {
  width: 60px;
  height: 2px;
  background: var(--ink);
  margin: var(--space-l) auto 0;
  opacity: 0.9;
}

/* ======================================================================
   FORK — premium cards
   ====================================================================== */
.fork__card--premium {
  padding: var(--space-l);
  background: var(--snow);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.fork__card--premium:hover {
  transform: translateY(-3px);
  border-color: var(--gold-accent);
  box-shadow: 0 20px 40px -24px rgba(184, 137, 58, 0.35);
}
.fork__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.fork__card--premium h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  max-width: 18ch;
}
.fork__card--premium p {
  color: var(--slate);
  margin-top: 0.1rem;
}
.fork__card--premium .link-arrow {
  margin-top: var(--space-s);
  color: var(--ink);
  font-weight: 600;
}

/* ======================================================================
   SERVICES — grid of cards
   ====================================================================== */
.svc-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  background: var(--snow);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-accent);
  box-shadow: 0 18px 40px -24px rgba(184, 137, 58, 0.35);
}
.svc-card:hover .svc-card__icon {
  background: var(--gold-grad);
}
.svc-card__icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-s);
  transition: background var(--dur) var(--ease-out);
}
.svc-card__icon .icon { width: 18px; height: 18px; }
.svc-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.svc-card p {
  margin-top: 0.5rem;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.55;
  max-width: none;
}
.svc-card__cta {
  margin-top: auto;
  padding-top: var(--space-s);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.svc-card__cta .icon { width: 1em; height: 1em; transition: transform var(--dur) var(--ease-out); }
.svc-card:hover .svc-card__cta .icon { transform: translateX(3px); }

/* ======================================================================
   PLANS v2 — premium pricing cards
   ====================================================================== */
.plan-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.plan-card-v2 {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  background: var(--snow);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.plan-card-v2:hover {
  transform: translateY(-3px);
  border-color: var(--gold-accent);
  box-shadow: 0 18px 40px -24px rgba(184, 137, 58, 0.35);
}
.plan-card-v2:hover .plan-card-v2__amount {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-card-v2__head {
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--mist);
}
.plan-card-v2__scheme {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.plan-card-v2__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 0.35rem;
  color: var(--ink);
}
.plan-card-v2__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.plan-card-v2__amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.plan-card-v2__per { color: var(--slate); font-size: 0.95rem; }
.plan-card-v2__daily {
  color: var(--slate);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: var(--space-m);
}
.plan-card-v2__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  padding-block: var(--space-s);
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}
.plan-card-v2__meta div { display: flex; flex-direction: column; gap: 0.1rem; }
.plan-card-v2__meta dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); }
.plan-card-v2__meta dd { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.plan-card-v2 .btn { margin-top: auto; }

/* ======================================================================
   CTA BAND — large dark call to action.
   Extra bottom padding reserves a safe zone for the join-cta family
   cutout to overlap into, without colliding with the buttons on the
   right. The size of this reserve is tied to the figure overlap above. */
.cta-band {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--rhythm-normal) clamp(6rem, 3rem + 10vw, 14rem);
  position: relative;
}
/* Make sure the figure's overlap sits above the dark band in the stack
   so it isn't clipped by any background above. */
.cta-band + .join-cta .join-cta__figure { z-index: 4; }
.cta-band__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 56rem) {
  .cta-band__inner { grid-template-columns: 1.3fr 1fr; }
}
.cta-band__script {
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
  color: var(--on-ink);
  display: block;
  margin-bottom: 0.4rem;
  opacity: 0.9;
}
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  margin: 0;
  max-width: 20ch;
}
.cta-band__body {
  color: rgba(255,255,255,0.75);
  margin-top: 0.9rem;
  max-width: 50ch;
}
.cta-band__cta { justify-content: flex-start; }
@media (min-width: 56rem) {
  .cta-band__cta { justify-content: flex-end; }
}
.cta-band .btn--ghost {
  border-color: rgba(255,255,255,0.45);
  color: var(--on-ink);
}
.cta-band .btn--ghost:hover { background: rgba(255,255,255,0.1); }

/* ======================================================================
   SECTION HEAD polish — eyebrow + title + subtitle
   ====================================================================== */
.section-head .eyebrow {
  color: var(--slate);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: inline-block;
}
.section-head h2 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 24ch;
}
.section-head.text-center { margin-inline: auto; }
.section-head.text-center h2 { margin-inline: auto; }

/* ======================================================================
   HOME BODY — remove bottom padding so sticky action bar is accounted for
   ====================================================================== */
.page-home .site-footer { margin-top: 0; }