/* ============================================================
   The Nurse Kay Experience — Master stylesheet
   ------------------------------------------------------------
   Single source of truth for every page.

   Structure
     01  Design tokens
     02  Reset & base
     03  Accessibility utilities
     04  Layout primitives (container / section rhythm)
     05  Typography system
     06  Buttons
     07  Navigation
     08  Footer
     09  Heroes
     10  Shared section patterns
     11  Cards (shared card language)
     12  Forms
     13  Home page
     14  About page
     15  Services page
     16  Contact page
     17  Policy pages
     18  404 page
     19  Media framing
     20  Motion
     21  Print

   Conventions
     - Every value that repeats lives in a token (section 01).
     - Four breakpoints only: 1200 / 1024 / 768 / 560, plus a
       min-width step at 1600 for ultrawide displays.
     - No !important, no negative-margin fixes, no per-device
       patches. Layout is fluid first; breakpoints only change
       structure (column counts), never paper over a bug.
   ============================================================ */

/* ===== 01. DESIGN TOKENS ===================================== */
@font-face {
  font-family: 'Oblata Display';
  src: url('assets/Oblata-Display-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* --- Brand palette (unchanged) --- */
  /* Flat accents stay bronze; luminous gold is reserved for the
     shared metallic gradient so the site never falls back to yellow. */
  --gold: #89632F;
  --gold-light: #A47A3F;
  --gold-bright: #C3A56A;
  --gold-dark: #8A5700;
  --gold-muted: rgba(92, 56, 32, 0.12);
  --green: #022E20;
  --green-accent: #022E20;
  --dark: #211A17;
  --dark2: #211A17;
  --dark3: #211A17;
  --darkest: #0F0501;
  --white: #FFFFFF;
  --ivory: #FFFFFF;
  --ivory2: #FFFFFF;
  --ivory3: #FFFFFF;
  --ivory4: #FFFFFF;

  /* --- Semantic surfaces --- */
  --surface: #FFFFFF;
  --surface-tint: #FFFDF5;
  --surface-dark: #211A17;
  --surface-darkest: #0F0501;

  /* --- Semantic text (all pass WCAG AA on their surface) --- */
  --text: #211A17;
  --text-mid: #211A17;
  --text-light: #211A17;
  --text-muted: rgba(33, 26, 23, 0.74);
  --text-subtle: rgba(33, 26, 23, 0.6);
  --text-dark-bg: #FFFDF5;
  --text-dark-bg-muted: rgba(255, 253, 245, 0.84);
  --status-green: #16704A;

  /* --- Hairlines & borders --- */
  --line-gold: rgba(92, 56, 32, 0.18);
  --line-gold-soft: rgba(92, 56, 32, 0.1);
  --line-gold-strong: rgba(92, 56, 32, 0.38);
  --line-dark: rgba(255, 253, 245, 0.14);

  /* --- Gold treatment (unchanged) --- */
  --metallic-gold:
    url('assets/gold-micrograin.svg'),
    radial-gradient(120% 180% at 55% -45%, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, 0) 58%),
    linear-gradient(115deg, #8A5700 0%, #D9A900 44%, #F2C230 61%, #B87900 100%);
  --metallic-gold-text:
    linear-gradient(115deg, #C99A32 0%, #F0CF72 48%, #B9851E 100%);
  --cool-metallic-gold-shadow:
    inset 0 1px 0 rgba(255, 250, 225, .58),
    inset 0 -2px 0 rgba(120, 101, 51, .72),
    inset 0 -18px 34px rgba(184, 159, 91, .18),
    0 14px 34px rgba(77, 65, 38, .22);
  --shadow-gold-btn:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(64, 43, 10, 0.2),
    0 10px 28px rgba(12, 10, 7, 0.14);
  --shadow-gold-btn-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(64, 43, 10, 0.16),
    0 14px 34px rgba(12, 10, 7, 0.2);

  /* --- Elevation --- */
  --shadow-sm: 0 2px 8px rgba(33, 26, 23, 0.04);
  --shadow-md: 0 12px 32px rgba(33, 26, 23, 0.08);
  --shadow-lg: 0 20px 52px rgba(33, 26, 23, 0.11);

  /* --- Radii --- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Typeface ------------------------------------------------ */
  --font-display: 'Oblata Display', serif;
  --font-display-italic: 'Oblata Display', serif;
  --font-body: 'Oblata Display', serif;
  --font-accent: 'Reserve', 'Oblata Display', serif;
  /* Second serif, already used by the footer, now also the shared
     face for paragraph copy inside card components (section 11). */
  --font-serif: "Times New Roman", Times, serif;

  /* --- Type scale ---------------------------------------------
     One fluid system for the whole site. Every ramp is solved
     between a 360px and a 1600px viewport, so type is still
     climbing right across the laptop range (1024–1440px) instead of
     hitting its ceiling early. Sized for a 15" laptop first: body
     lands near 17.8px and section headings near 33px at 1440. */
  --fs-hero-home: clamp(2.25rem, 1.916rem + 1.48vw, 3.4rem);         /* 36 → 54 */
  --fs-hero-page: clamp(1.875rem, 1.625rem + 1.11vw, 2.737rem);      /* 30 → 44 */
  --fs-hero-policy: clamp(1.75rem, 1.521rem + 1.02vw, 2.538rem);     /* 28 → 41 */
  --fs-section-heading: clamp(1.562rem, 1.376rem + 0.83vw, 2.206rem);/* 25 → 35 */
  --fs-subheading: clamp(1.25rem, 1.186rem + 0.28vw, 1.469rem);      /* 20 → 23.5 */
  --fs-card-title: clamp(1.125rem, 1.083rem + 0.19vw, 1.269rem);     /* 18 → 20 */
  --fs-price: clamp(2rem, 1.75rem + 1.11vw, 2.862rem);               /* 32 → 46 */
  --fs-quote: clamp(1.25rem, 1.167rem + 0.37vw, 1.538rem);           /* 20 → 24.5 */
  --fs-body-lg: clamp(1.094rem, 1.052rem + 0.19vw, 1.238rem);        /* 17.5 → 20 */
  --fs-body: clamp(1.031rem, 1rem + 0.14vw, 1.137rem);               /* 16.5 → 18 */
  --fs-card-body: clamp(1.062rem, 1.032rem + 0.14vw, 1.169rem);      /* 17 → 18.7 */
  --fs-body-sm: clamp(0.969rem, 0.949rem + 0.09vw, 1.038rem);        /* 15.5 → 16.6 */
  --fs-body-xs: clamp(0.906rem, 0.895rem + 0.05vw, 0.944rem);        /* 14.5 → 15 */
  --fs-label: clamp(0.875rem, 0.864rem + 0.05vw, 0.913rem);          /* 14 → 14.6 */
  --fs-btn: clamp(0.938rem, 0.916rem + 0.1vw, 1.012rem);             /* 15 → 16.2 */
  --fs-nav: clamp(1rem, 0.978rem + 0.1vw, 1.075rem);                 /* 16 → 17.2 */
  /* The footer sets its own ramp: it is the one region that has to
     hold four columns on a 320px phone. */
  /* Solved, not guessed. The widest unbreakable string in each of
     the four columns scales at a fixed rate per px of font size
     (the brand line, NAVIGATION, "Privacy Practices", the address).
     Their sum plus the column gaps is what one line of footer costs,
     so the largest type that lets all four columns fit a given
     screen is a straight line in viewport width. This ramp is that
     solution, re-derived for the tighter gaps: 9.75px on a 320px
     phone, reaching full size from ~480px up. The cap is 2px below
     where it was. */
--fs-footer-title: clamp(0.52rem, 0.02rem + 2.35vw, 0.75rem); /* 8.3px → 12px */
  /* Everything under a footer heading sits exactly 1px below it,
     derived rather than typed so the two can never drift apart. */
  --fs-footer-body: calc(var(--fs-footer-title) - 1px);
  --lh-footer: 1.15;

  /* --- Line heights ---
     Body copy was set solid (1.0), which is what made paragraphs
     read as cramped and visually smaller than they measured. */
  --lh-display: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --lh-loose: 1.75;
  --lh-snug: 1.25;
  --lh-tight: 1.4;

  /* --- Letter spacing --- */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-label: 0.1em;
  --ls-btn: 0.04em;

  /* --- Weights --- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* --- Button pair geometry: the gap and the inline padding
     tighten as the screen narrows, which is what lets a two-button
     row hold both labels on one line at 320px without the shared
     --fs-btn ever having to drop. --- */
  --pair-gap: clamp(0.4rem, 0.05rem + 1.25vw, 1.5rem);
  --pair-pad-inline: clamp(0.75rem, 0.25rem + 2.4vw, 2rem);

  /* --- Shared control geometry --- */
  --button-padding-block: 0.95rem;
  --button-padding-inline: clamp(0.9rem, 0.4rem + 2.2vw, 2rem);
  --space-9: 4rem;
  --space-10: 5rem;

  /* --- Section rhythm: every band uses one of these three --- */
  --section-y: clamp(3rem, 1.85rem + 3.8vw, 5.25rem);
  --section-y-sm: clamp(2rem, 1.45rem + 1.85vw, 3.25rem);
  --section-y-lg: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* --- Container & gutter --- */
  --site-gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem);
  --container: 1280px;
  --container-narrow: 940px;
  --measure: 68ch;          /* comfortable paragraph width */
  --measure-tight: 56ch;

  /* --- Footer grid: four equal columns at every width --- */
  /* Footer track proportions. The brand statement and the contact
     details are the two widest pieces of content, so they get the
     widest tracks; navigation holds four short words and gets the
     narrowest. */
  /* Tracks in the same proportion as those demands, so no column is
     starved and none is over-provisioned. */
  --footer-cols: minmax(0, 30fr) minmax(0, 19fr) minmax(0, 21fr) minmax(0, 30fr);
  /* Gaps close harder than before: narrower gutters between the
     columns are what buy back the width the smaller type needs. */
  --footer-gap: clamp(0.25rem, -0.75rem + 3.2vw, 2.25rem);
  --footer-pad-inline: clamp(0.5rem, 0.1rem + 1.4vw, 3.5rem);
  /* Rhythm inside and around the columns, all trimmed together. */
  --footer-item-gap: 0.05rem;
  --footer-pad-block: clamp(1.6rem, 1.05rem + 1.5vw, 3.25rem);   /* −25% */
  --footer-rule-gap: clamp(0.5rem, 0.35rem + 0.5vw, 0.85rem);

  /* --- Card padding: shared by every card component --- */
  --card-pad: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);
  --card-pad-sm: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);

  /* --- Controls --- */
  --tap-min: 44px;
  --control-h: 52px;
  --nav-height: 94px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 320ms;
  --dur-slow: 620ms;
}

@media (min-width: 1600px) {
  :root {
    --container: 1440px;
    --site-gutter: 4rem;
  }
}
@media (max-width: 1200px) { :root { --nav-height: 86px; } }
@media (max-width: 768px)  { :root { --nav-height: 78px; } }

/* ===== 02. RESET & BASE ====================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  min-height: 100vh;
  overflow-x: hidden;      /* belt-and-braces against stray overflow */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.mobile-menu-open { overflow: hidden; }

::selection {
  background-color: rgba(2, 46, 32, 0.18);
  color: inherit;
}

img, video, svg, canvas, iframe {
  display: block;
  max-width: 100%;
}

img:not(.nav-logo img):not(.foot-logo img),
video {
  height: auto;
}

/* Nothing in a grid or flex layout may push past its track. */
[class*="grid"] > *,
[class*="inner"] > *,
main, main > *, section, section > *, footer, footer > * { min-width: 0; }

a, h1, h2, h3, h4, li, p, blockquote, cite, summary, label { overflow-wrap: break-word; }

ul, ol { list-style: none; }

table { width: 100%; max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  max-width: 100%;
}
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

/* ===== 03. ACCESSIBILITY UTILITIES =========================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  z-index: 2000;
  transform: translate(-50%, -120%);
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  background: var(--gold-light);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* One visible focus treatment for the entire site. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.pc.featured :focus-visible,
.custom-section :focus-visible,
.cta-band :focus-visible,
.pay-section :focus-visible,
.contact-banner :focus-visible,
footer :focus-visible,
nav .nav-links.open :focus-visible {
  outline-color: var(--gold-bright);
}

/* ===== 04. LAYOUT PRIMITIVES ================================= */
/* Every full-bleed band gets its gutter here; every inner wrapper
   gets the shared max width. This is what keeps the site aligned
   from 320px to ultrawide. */
.band,
.page-shell,
footer,
body > nav,
body > .hero,
body > .page-hero,
body.policy-page > .hero,
.intro,
.cta-band,
.pricing-section,
.custom-section,
.pay-section,
.sched-band,
.story-section,
.service-feature-band,
.qbanner-overlay,
.contact-banner,
.strip,
#home-trust-indicators,
.layout {
  padding-inline: var(--site-gutter);
}

/* Content wrapper for the text-led pages (about + policy pages). It
   supplies the gutter, vertical rhythm and max width that those
   sections do not carry themselves. */
.page-shell { padding-block: var(--section-y-sm); }
.page-shell > * {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.t-section-head,
.inner,
.hero-inner,
.intro-inner,
.pricing-inner,
.custom-inner,
.pay-inner,
.sched-inner,
.cta-inner,
.story-inner,
.t-section-head,
.bg-section,
.contact-banner-inner,
.qbanner-text,
.c-left-content,
.c-right-content,
.hero-content,
.policy-shell,
.service-feature-band,
.layout {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* Section vertical rhythm — three sizes, applied consistently. */
.intro,
.cta-band,
.pricing-section,
.custom-section,
.pay-section,
.story-section,
.contact-banner { padding-block: var(--section-y); }

.sched-band,
.strip { padding-block: var(--section-y-sm); }

/* ===== 05. TYPOGRAPHY SYSTEM ================================= */
/* Display family: headings, prices, pull quotes, initials.
   Body family: everything else. Declared once, here. */
h1, h2, h3, h4, h5, h6,
.hero-title, .ph-title, .story-title, .story-quote, .cta-title,
.t-section-title, .stitle, .policy-card h2, .contact-section h3,
.cred-item-value, .t-av, .ht-num, .sp-title, .icard-title,
.t-name, .form-hd, .pay-title, .cc-name, .pc-name, .pc-amount,
.qm, .contact-banner-quote,
.service-feature-quote blockquote, .qbanner-text blockquote,
.licensure-section h2, .t-stag, .t-text {
  font-family: var(--font-display);
}

body, p, li, a, button, input, select, textarea, label, cite, summary,
.btext, .sec-note, .icard-text, .ph-sub, .hero-sub, .cta-sub,
.nav-links a, .nav-cta, .btn-gold, .btn-ghost, .btn-light,
.footer-stack-title, .footer-stack a, .foot-copy, .footer-tagline,
.story-label, .cred-label, .cred-item-label, .ht-label, .slabel,
.flabel, .ci-label, .sched-opt, .cc-link, .cc-list li,
.pc-list li, .pc-period, .pc-sub, .pc-btn, .pay-name, .pay-desc,
.hs-l, .license-label, .license-value,
.resp-note, .form-sub {
  font-family: var(--font-body);
}

h1, .hero-title, .ph-title {
  font-size: var(--fs-hero-page);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

h2, .stitle, .cta-title, .t-section-title, .pay-title, .story-title {
  font-size: var(--fs-section-heading);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h4 {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

/* Italic display accents (the <em> treatment used site-wide). */
h1 em, h2 em, h3 em,
.hero-title em, .ph-title em, .story-title em, .cta-title em,
.stitle em, .t-section-title em, .pay-title em,
.contact-banner-quote em, .cl-title em, .story-quote {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: var(--fw-light);
}

.accent-reserve {
  font-family: var(--font-accent);
  padding-inline-end: 0.12em;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  -webkit-box-decoration-break: clone;
  -webkit-text-fill-color: transparent;
}

p { font-size: var(--fs-body); line-height: var(--lh-body); }
p, li { max-width: var(--measure); }
li { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Shared label typography. Capitalization follows the written copy. */
.slabel, .story-label, .cred-label, .cred-item-label, .ht-label,
.footer-stack-title, .sec-label,
.license-label, .pc-sub, .pc-period,
.pay-name, .sched-text strong {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
}

.eyebrow { color: var(--gold-dark); }

/* ===== 06. BUTTONS ========================================== */
/* Three variants, one geometry. Any button anywhere is one of these. */
.btn-gold, .btn-ghost, .btn-light, .pc-btn, .cc-link, .fsubmit, .nav-cta {
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-btn);
  line-height: 1.2;
  /* No call to action anywhere on the site breaks across two lines.
     Declared once here so it holds for every button, present and
     future, rather than being patched per component. */
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.btn-gold, .fsubmit, .pc-btn, .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap-min);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--radius-pill);
  text-align: center;
}

.btn-gold, .fsubmit, .pc-btn-gold, .nav-cta {
  color: var(--dark);
  background: var(--metallic-gold);
  box-shadow: var(--shadow-gold-btn);
}
.btn-gold, .fsubmit, .pc-btn-gold { border: 0; }
.btn-gold:hover, .fsubmit:hover, .pc-btn-gold:hover, .nav-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-btn-hover);
}
.btn-gold:active, .fsubmit:active, .pc-btn-gold:active, .nav-cta:active { transform: translateY(0); }

/* Outline button (used on service cards) */
.pc-btn:not(.pc-btn-gold) {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-gold-strong);
  box-shadow: none;
}
.pc-btn:not(.pc-btn-gold):hover {
  color: var(--gold-bright);
  background: var(--green);
  border-color: var(--green);
}
.pc.featured .pc-btn:not(.pc-btn-gold) { color: var(--text-dark-bg); }

.pc-btn svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  transition: transform var(--dur) var(--ease);
}
.pc-btn:hover svg { transform: translateX(3px); }

/* Underlined text buttons — arrow variants */
.btn-ghost, .btn-light, .cc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap-min);
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-weight: var(--fw-medium);
}
.btn-ghost::after, .btn-light::after, .cc-link::after {
  content: '→';
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.btn-ghost:hover::after, .btn-light:hover::after, .cc-link:hover::after { transform: translateX(4px); }

.btn-ghost { color: var(--text-dark-bg); border-bottom-color: rgba(164, 122, 63, 0.52); }
.btn-ghost:hover { color: var(--gold-bright); border-bottom-color: var(--gold-light); }

.btn-light { color: var(--gold-dark); border-bottom-color: rgba(138, 87, 0, 0.42); }
.btn-light:hover { color: var(--green); border-bottom-color: var(--green); }

.cc-link { color: var(--gold-light); border-bottom-color: rgba(164, 122, 63, 0.42); }
.cc-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* ===== 07. NAVIGATION ======================================= */
body > nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line-gold);
}

body > nav .nav-logo,
body > nav .nav-logo a { display: flex; align-items: center; }
body > nav .nav-logo a { border-radius: var(--radius-sm); }
body > nav .nav-logo img {
  width: auto;
  height: clamp(48px, 5.5vw, 78px);
  object-fit: contain;
}

body > nav .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  list-style: none;
}
body > nav .nav-links li { display: flex; align-items: center; }

body > nav .nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}
body > nav .nav-links a:not(.nav-cta) {
  padding: 0.65rem 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: transparent;
  background: var(--metallic-gold);
  border: 0;
  border-radius: 0;
  filter: brightness(0.78) saturate(0.9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body > nav .nav-links a:not(.nav-cta):hover {
  filter: brightness(0.9) saturate(0.95);
}
body > nav .nav-links a:not(.nav-cta).active,
body > nav .nav-links a:not(.nav-cta)[aria-current="page"] {
  filter: brightness(0.86) saturate(0.95);
}

body > nav .nav-cta {
  font-weight: var(--fw-semibold);
}
body > nav .nav-cta::after { display: none; }
body > nav .nav-cta[aria-current="page"] {
  color: var(--dark);
}

body > nav .hamburger { display: none; }

/* The fixed header is compensated for by the first section on
   every page, so no content ever hides beneath it. */
body > .hero,
body > .page-hero,
body.policy-page > .hero,
body.error-page > main { margin-top: var(--nav-height); }

@media (max-width: 768px) {
  body > nav .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: var(--tap-min);
    height: var(--tap-min);
    flex: 0 0 var(--tap-min);
    position: relative;
    z-index: 1002;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
  }
  body > nav .hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--green-accent);
    border-radius: 2px;
    transform-origin: center;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  body > nav .hamburger.is-open span:first-child { transform: translateY(7px) rotate(45deg); }
  body > nav .hamburger.is-open span:nth-child(2) { opacity: 0; }
  body > nav .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  body > nav .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    max-height: 0;
    padding-inline: var(--site-gutter);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--surface);
    border-bottom: 1px solid var(--line-gold);
    box-shadow: 0 18px 35px rgba(33, 26, 23, 0.12);
    transform: translateY(-8px);
    transition:
      max-height var(--dur-slow) var(--ease),
      padding var(--dur) var(--ease),
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      visibility var(--dur) var(--ease);
  }
  body > nav .nav-links.open {
    max-height: calc(100svh - var(--nav-height));
    padding-block: 0.5rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  body > nav .nav-links li {
    display: block;
    border: 0;
  }
  body > nav .nav-links a:not(.nav-cta) {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.75rem 1rem;
    font-size: var(--fs-nav);
    justify-content: flex-start;
  }
  body > nav .nav-links a.nav-cta {
    width: 100%;
    margin-top: var(--space-2);
    justify-content: center;
    text-align: center;
  }
}

/* ===== 08. FOOTER =========================================== */
/* Four columns at every width, in source order, never stacked and
   never split into two rows. The tracks are proportional to what
   each column actually has to hold, so the fourth is wide enough
   for the address and the third for "Privacy Practices".
   As the viewport narrows, the column gap, the inline padding, the
   heading tracking and the type all give way together — see the
   solved ramp on --fs-footer-title in section 01. Nothing wraps,
   nothing clips, and the row never exceeds the screen. */
footer {
  display: grid;
  grid-template-columns: var(--footer-cols);
  align-content: start;
  column-gap: var(--footer-gap);
  row-gap: var(--footer-rule-gap);
  align-items: start;
  padding-inline: max(var(--footer-pad-inline), calc((100% - var(--container)) / 2));
  padding-block: var(--footer-pad-block);
  font-family: var(--font-body);
  background: var(--surface-darkest);
  border-top: 1px solid var(--line-gold-soft);
  text-align: left;
}
/* Footer content shares the site container without extra markup. */
footer > * { max-width: none; }
footer::before,
footer::after { content: none; }

.footer-brand, .footer-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}
/* One small, even gap between items in a stack, rather than each
   link carrying its own loose padding. */
.footer-stack { gap: var(--footer-item-gap); }

/* Larger than the mark started at — +21% on a phone, +2% on a large
   screen — and still under the header logo, which is height-driven
   and renders 74px wide on a phone, 120px on a desktop.
   Width only, with height auto, so the SVG keeps its 741:483 ratio
   and is never stretched or cropped. `line-height: 0` on the block
   removes the inline leading under the image; the file itself has
   almost no transparent margin (2% at the left edge), so there is
   no other empty space to take out. */
.foot-logo { line-height: 0; }
.foot-logo img {
  width: clamp(68px, 8.2vw, 118px);
  height: auto;
}
.foot-logo a { display: block; border-radius: var(--radius-sm); }

/* The sentence wraps on its own — no hardcoded break. `balance`
   splits it into two even lines rather than a long one and an
   orphan, and the measure stops it going wider than the track. */
.footer-tagline {
  font-family: var(--font-serif);
  margin-top: 0.45rem;
  max-width: 26ch;
  font-size: var(--fs-footer-body);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-footer);
  color: var(--text-dark-bg-muted);
  text-wrap: balance;
}

.footer-stack-title {
  margin-bottom: clamp(0.3rem, 0.55vw, 0.5rem);
  font-size: var(--fs-footer-title);
  line-height: var(--lh-footer);
  /* 0.04em rather than the shared 0.1em: the tracking on the longest
     heading is part of what the narrowest track has to pay for. */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Block, not inline-flex: a flex container lets its text run past
   its own edge instead of wrapping inside it. */
/* Every footer link is a single unbroken line: the address and the
   number in the fourth column, the policy titles in the third. Their
   widths are what set the type ramp in section 01, so none of them
   ever has to wrap.
   Block, not inline-flex: a flex container lets its text run past
   its own edge instead of wrapping inside it. */
.footer-stack a {
  display: block;
  font-family: var(--font-serif);
  padding-block: 0.04rem;
  font-size: var(--fs-footer-body);
  font-weight: 400;
  line-height: var(--lh-footer);
  color: var(--text-dark-bg-muted);
  text-decoration: none;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  transition: color var(--dur) var(--ease);
}
.footer-stack a:hover { color: var(--gold-light); }
.footer-stack a.legal-active,
.footer-stack a[aria-current="page"] { color: var(--gold-light); font-weight: 400; }
.foot-copy {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  grid-column: 1 / -1;
  /* The rule sits close to the columns above it and close to the
     line below, rather than floating between two large gaps. */
  margin-top: var(--footer-rule-gap);
  padding-top: var(--footer-rule-gap);
  border-top: 1px solid var(--line-dark);
  /* The copyright line sits a further 2px under the body text,
     derived from it for the same reason the body size is derived
     from the headings: one number to change, never two. */
  font-size: calc(var(--fs-footer-body) - 2px);
  font-weight: 300;
  line-height: var(--lh-footer);
  color: rgba(255, 253, 245, 0.66);
  text-align: center;
}

/* The copyright rule needs a little less air once the columns above
   it have tightened. */


/* ===== 09. HEROES =========================================== */
/* Shared hero chrome (used by home, page and policy heroes). */
body > .hero,
body > .page-hero,
body.policy-page > .hero {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: clip;
  background: var(--surface-dark);
}

.hero-grid,
.hero-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-grid {
  background-image:
    linear-gradient(rgba(92, 56, 32, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 56, 32, .018) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.38;
}

/* --- Home hero --- */
body > .hero {
  min-height: clamp(30rem, 66svh, 44rem);
  padding-block: var(--section-y-lg);
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.68;
  filter: brightness(0.96) contrast(1.08) saturate(1.24);
  mix-blend-mode: screen;
  z-index: 1;
}
.hero-visual { position: absolute; inset: 0; z-index: 0; }
.hero-main-image {
  width: 68%;
  height: 100%;
  margin-left: auto;
  object-fit: cover;
  object-position: center 32%;
  filter: saturate(0.9) contrast(1.02);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 10%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 10%, #000 34%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(24, 16, 11, .86) 0%,
    rgba(24, 16, 11, .74) 34%,
    rgba(24, 16, 11, .46) 56%,
    rgba(24, 16, 11, .1) 80%,
    transparent 100%);
}
.hero-inner { position: relative; z-index: 3; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 40rem; }

.hero-title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-hero-home);
  font-weight: var(--fw-regular);
  line-height: 1.06;
  color: var(--white);
  text-shadow: 0 0 40px rgba(164, 122, 63, 0.08), 0 4px 20px rgba(0, 0, 0, 0.3);
}
.hero-title em {
  display: block;
  font-style: italic;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.hero-line2 { font-size: 0.94em; }

.hero-sub {
  margin-bottom: var(--space-7);
  max-width: 34rem;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--text-dark-bg);
  text-align: left;
}

/* Button pairs.
   The hero pair stays side by side at every width, down to 320px.
   Getting there without wrapping a label means the gap, the inline
   padding and the label size all tighten together as the screen
   narrows — three fluid values rather than a breakpoint. Both items
   are stretched to the same height so the gold button and the
   underlined text action sit on a common baseline. */
.hero-actions, .cta-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--pair-gap);
}
.hero-actions > *, .cta-actions > * {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}
.hero-actions > .btn-gold,
.cta-actions > .btn-gold,
.hero-actions > .fsubmit,
.cta-actions > .fsubmit { padding-inline: var(--pair-pad-inline); }

/* The CTA band's labels are roughly twice the length of the hero's,
   so on a narrow phone that pair stacks instead — each button full
   width, its own label still on one line. */
@media (max-width: 560px) {
  .hero-actions,
  .cta-actions {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1.25rem, 5vw, 1.75rem);
  }

  .hero-actions > *,
  .cta-actions > * {
    flex: 0 0 auto;
    width: auto;
  }

  .hero-actions > .btn-gold,
  .cta-actions > .btn-gold {
    padding-inline: clamp(0.8rem, 3vw, 1.15rem);
  }

  .hero-actions .btn-gold,
  .hero-actions .btn-ghost,
  .cta-actions .btn-gold,
  .cta-actions .btn-ghost {
    font-size: clamp(0.62rem, 2.7vw, 0.78rem);
  }
}

/* Staged entrance for the hero copy. */
.hero-title, .hero-sub, .hero-actions {
  opacity: 0;
  animation: fadeUp 900ms var(--ease) forwards;
}
.hero-title { animation-delay: 120ms; }
.hero-sub { animation-delay: 260ms; }
.hero-actions { animation-delay: 400ms; }

.hero-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-5);
  max-width: 36rem;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-gold);
}
.ht-item { display: flex; flex-direction: column; }
.ht-num { font-size: var(--fs-subheading); font-weight: var(--fw-light); line-height: 1.1; color: var(--gold-bright); }
.ht-label { margin-top: 0.4rem; color: var(--text-dark-bg-muted); }

@media (max-width: 1024px) {
  .hero-main-image { width: 82%; }
}
@media (max-width: 768px) {
  body > .hero { min-height: clamp(28rem, 78svh, 36rem); align-items: flex-end; }
  .hero::before {
    background:
      linear-gradient(0deg,
        rgba(24, 16, 11, .95) 0%,
        rgba(24, 16, 11, .86) 42%,
        rgba(24, 16, 11, .26) 74%,
        rgba(24, 16, 11, .06) 100%),
      linear-gradient(90deg, rgba(24, 16, 11, .42), transparent);
  }
  .hero-main-image {
    width: 100%;
    object-position: 50% 22%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-copy { max-width: none; }
  .hero-sub { margin-bottom: var(--space-6); }
}
/* --- Interior page hero (services / about / contact) --- */
body > .page-hero {
  min-height: clamp(20rem, 42svh, 28rem);
  padding-block: var(--section-y);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.84;
  filter: brightness(0.68) contrast(1.06) saturate(0.96);
  z-index: 0;
}
body > .page-hero .hero-glow {
  background:
    linear-gradient(90deg, rgba(33, 26, 23, .8) 0, rgba(33, 26, 23, .6) 46%, rgba(33, 26, 23, .34) 100%),
    radial-gradient(ellipse 44% 62% at 82% 38%, rgba(92, 56, 32, .06) 0, transparent 66%);
}
body > .page-hero .hero-inner { position: relative; z-index: 2; }
.ph-title {
  max-width: 44rem;
  margin-bottom: var(--space-4);
  color: var(--white);
  animation: pageHeroCopyIn 800ms var(--ease) both;
}
.ph-title em { color: var(--gold-light); }
.ph-sub {
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-dark-bg);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .38);
  animation: pageHeroCopyIn 800ms var(--ease) 120ms both;
}
body > .page-hero + .layout,
body > .page-hero + .pricing-section,
body > .page-hero + .story-section,
body > .page-hero + main { margin-top: 0; }

@media (max-width: 768px) {
  body > .page-hero { min-height: clamp(14rem, 32svh, 19rem); }
  .page-hero-bg { object-position: center center; filter: brightness(0.6) contrast(1.04) saturate(0.92); }
  body > .page-hero .hero-glow {
    background:
      linear-gradient(0deg, rgba(33, 26, 23, .9) 0, rgba(33, 26, 23, .62) 58%, rgba(33, 26, 23, .4) 100%),
      radial-gradient(ellipse 60% 52% at 80% 30%, rgba(92, 56, 32, .05) 0, transparent 70%);
  }
}

/* --- Policy page hero --- */
body.policy-page > .hero {
  min-height: clamp(18rem, 38svh, 26rem);
  padding-block: var(--section-y);
  background:
    linear-gradient(90deg, rgba(15, 5, 1, .96) 0%, rgba(15, 5, 1, .88) 38%, rgba(15, 5, 1, .66) 66%, rgba(2, 46, 32, .4) 100%),
    url("assets/stethoscope-clinical-shadow.jpg") 66% 42% / cover no-repeat;
  border-bottom: 3px solid var(--green);
}
body.policy-page > .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 56% 70% at 22% 45%, rgba(92, 56, 32, .13) 0%, rgba(92, 56, 32, 0) 72%),
    linear-gradient(115deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
}
body.policy-page > .hero::after {
  content: "";
  position: absolute;
  left: var(--site-gutter);
  bottom: 0;
  width: clamp(86px, 12vw, 180px);
  height: 3px;
  background: url("assets/gold-micrograin.svg"), linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  pointer-events: none;
}
body.policy-page > .hero .hero-content { position: relative; z-index: 1; }
body.policy-page > .hero h1 {
  max-width: 44rem;
  margin-bottom: var(--space-4);
  font-size: var(--fs-hero-policy);
  color: var(--white);
}
body.policy-page > .hero p {
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-dark-bg);
}
@media (max-width: 768px) {
  body.policy-page > .hero {
    background:
      linear-gradient(0deg, rgba(15, 5, 1, .95) 0%, rgba(15, 5, 1, .84) 58%, rgba(2, 46, 32, .42) 100%),
      url("assets/stethoscope-clinical-shadow.jpg") 61% 40% / cover no-repeat;
  }
}

/* ===== 10. SHARED SECTION PATTERNS ========================== */
.slabel, .sec-label, .story-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--space-4);
  color: var(--gold-dark);
}
.slabel::before {
  content: '';
  flex-shrink: 0;
  width: 32px; height: 1px;
  background: currentColor;
  opacity: 0.75;
}
.sec-label { justify-content: center; }
.sec-label::before, .sec-label::after {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.75;
}

/* Section intro block: heading + supporting note. */
.sec-intro {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-8);
  text-align: center;
}
.sec-intro h2, .sec-intro .stitle { margin-bottom: var(--space-4); }
.sec-note {
  margin-inline: auto;
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.stitle { margin-bottom: var(--space-5); color: var(--text); }
.stitle em { color: var(--gold-dark); }
.stitle-light, .stitle-light em { color: var(--text-dark-bg); }
.stitle-light em { color: var(--gold-light); }

.btext {
  margin-bottom: var(--space-4);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.btext-light { color: var(--text-dark-bg); }
.btext:last-child { margin-bottom: 0; }

/* Gold strip */
.strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  background: var(--metallic-gold);
}
.strip-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--dark);
}
.strip-item svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--dark); fill: none; opacity: 0.85; }

/* ===== 11. SHARED CARD LANGUAGE ============================= */
/* Every card on the site inherits this: same padding token, same
   radius, same border, same hover. Variants only change colour. */
.icard, .policy-card, .pc, .cc, .pay-item, .license-item,
.cred-card, .feature-card, .tc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

/* Paragraph typography inside reusable card components.
   This is the only place card body copy is sized or given a face —
   the individual card sections below set colour and spacing only,
   so the treatment can never drift apart from page to page.
   `.icard-text`, `.pay-desc` and `.t-text` are the same paragraph
   role written as elements without a <p>. */
.icard p, .icard-text,
.policy-card p,
.pc p,
.cc p,
.pay-item p, .pay-desc,
.license-item p,
.cred-card p,
.feature-card p:not(.feature-title),
.tc p, .t-text {
  font-family: var(--font-serif);
  font-size: var(--fs-card-body);
  line-height: var(--lh-body);
}

.card-lift:hover,
.icard:hover, .policy-card:hover, .pc:hover, .license-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Card title / body inside any card */
.icard-title, .cc-name, .pc-name, .policy-card h2 {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* ===== 12. FORMS ============================================ */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fg { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }

.form-hd { margin-bottom: 0.35rem; font-size: var(--fs-subheading); color: var(--text); }
.form-sub {
  margin-bottom: var(--space-5);
  max-width: var(--measure);
  font-size: var(--fs-body);
  color: var(--text-muted);
}

.flabel {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: none;
  color: #000;
}

/* Never below 1rem, which is what stops iOS Safari zooming on focus. */
.finput, .fsel, .ftarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: #000;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: var(--radius-sm);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.finput::placeholder, .ftarea::placeholder {
  color: rgba(0, 0, 0, 0.56);
}
.finput:hover, .fsel:hover, .ftarea:hover { border-color: #000; }
.finput:focus-visible, .fsel:focus-visible, .ftarea:focus-visible {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.14);
  outline: none;
}
.finput:user-invalid, .ftarea:user-invalid, .fsel:user-invalid {
  border-color: #A8341C;
  box-shadow: 0 0 0 3px rgba(168, 52, 28, 0.16);
}

/* Native select needs its own chevron once appearance is stripped. */
.fsel {
  cursor: pointer;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #000 50%),
    linear-gradient(135deg, #000 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) center, calc(100% - 0.85rem) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.fsel option { color: var(--text); background: var(--surface); }
.ftarea { resize: vertical; min-height: 8rem; padding-top: 0.9rem; line-height: var(--lh-body); }

.fsubmit { align-self: flex-start; margin-top: var(--space-2); }

.ferror {
  display: none;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: #8C2A16;
}
.ferror.is-visible { display: block; }

.fsuccess {
  display: none;
  padding: var(--card-pad-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
  color: var(--text);
  background: rgba(92, 56, 32, 0.08);
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius-sm);
}
.fsuccess.is-visible { display: block; }

@media (max-width: 560px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .fsubmit { align-self: stretch; }
}

/* ===== 13. HOME PAGE ======================================== */
/* --- Trust indicators --- */
#home-trust-indicators {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-block: clamp(0.45rem, 0.8vw, 0.65rem);
  background: var(--surface);
  border-block: 1px solid var(--line-gold);
}
.feature-card {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.22rem, 0.5vw, 0.35rem);
  padding: clamp(0.25rem, 0.5vw, 0.4rem) clamp(0.2rem, 1vw, 0.65rem);
  text-align: center;
}
.feature-card + .feature-card { border-inline-start: 1px solid var(--line-gold); }
.feature-title {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

@media (max-width: 560px) {
  .feature-title {
    font-size: clamp(0.5rem, 2.1vw, 0.65rem);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* --- Intro --- */
.intro-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: start;
}
.intro .btext {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  font-weight: var(--fw-light);
  color: var(--text);
}
.intro .btn-gold { margin-top: var(--space-3); }

.intro-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.icard {
  padding: var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.icard::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-dark) 0%, var(--green) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.icard:hover::after { opacity: 1; }
.icard-title { margin-bottom: 0.6rem; color: var(--text); transition: color var(--dur) var(--ease); }
.icard:hover .icard-title { color: var(--gold-dark); }
.icard-text { color: var(--text-muted); }

@media (max-width: 1024px) {
  .intro-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 560px) {
  .intro-cards { grid-template-columns: minmax(0, 1fr); }
}

/* --- CTA band --- */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(42, 23, 11, .88) 0%, rgba(33, 17, 7, .74) 50%, rgba(42, 23, 11, .88) 100%),
    url('assets/nursekay-healing-deserves.png') center 48% / cover no-repeat;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}
.cta-inner { max-width: var(--container-narrow); }
.cta-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.cta-ornament-line { flex: 1; max-width: 60px; height: 1px; }
.cta-ornament-line:first-child { background: linear-gradient(to right, transparent, var(--gold-dark)); }
.cta-ornament-line:last-child { background: linear-gradient(to left, transparent, var(--gold-dark)); }
.cta-ornament svg { width: 22px; height: 22px; stroke: var(--gold-light); fill: none; opacity: 0.85; }
.cta-title { margin-bottom: var(--space-4); color: var(--white); }
.cta-title em { color: var(--gold-bright); }
.cta-sub {
  margin: 0 auto var(--space-6);
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--text-dark-bg);
}
.cta-actions { justify-content: center; }
/* --- Testimonials --- */
.t-section {
  position: relative;
  padding-top: var(--space-5);
  background: var(--surface);
}
.t-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold-strong), transparent);
}
.t-section-head {
  padding-inline: var(--site-gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.t-section-title { color: var(--text); }
.t-section-title em { color: var(--gold-dark); }
.t-section-stats { display: flex; gap: var(--space-7); flex-shrink: 0; }
.t-section-divider { width: 1px; background: var(--line-gold); }
.hs-i { text-align: center; }
.hs-n { font-size: var(--fs-subheading); font-weight: var(--fw-light); line-height: 1.1; color: var(--green); }
.hs-l { margin-top: 0.4rem; font-size: var(--fs-body-xs); line-height: var(--lh-tight); color: var(--text-muted); }

/* The testimonial rail is a real scroll container, not a CSS
   animation. navigation.js advances scrollLeft frame by frame, so
   the drift stops the moment a pointer enters and the rail can be
   dragged, swiped, wheel-scrolled or arrowed through at any time,
   then resumes on its own. It is full-bleed by design: its section
   carries no gutter, so the track fills the width outright. */
.carousel-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-gold-strong) transparent;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.carousel-viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.carousel-viewport::-webkit-scrollbar { height: 6px; }
.carousel-viewport::-webkit-scrollbar-thumb {
  background: var(--line-gold-strong);
  border-radius: var(--radius-pill);
}
/* Equal-height cards: without stretch each card is only as tall as
   its own quote, which is what left the author rows sitting at
   different heights across the rail. */
.carousel-track {
  display: flex;
  align-items: stretch;
  gap: 1px;
  width: max-content;
}

.tc {
  width: min(23rem, 82vw);
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: var(--card-pad);
  background: var(--surface);
  border-inline-end: 1px solid var(--line-gold-soft);
}
.tc:hover { background: rgba(92, 56, 32, 0.06); }
.tc.accent { background: rgba(92, 56, 32, 0.035); }
.qm { display: block; margin-bottom: var(--space-2); font-size: 3.5rem; line-height: 0.6; color: var(--green); opacity: 0.2; }
.stars {
  margin-bottom: 0.7rem;
  letter-spacing: 0.15em;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.t-stag {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--green);
}
.t-text {
  flex: 1;
  margin-bottom: var(--space-5);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--text);
}
.t-author { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; }
.t-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  background: var(--metallic-gold);
  border-radius: 50%;
}
.t-name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--text);
}

@media (max-width: 768px) {
  .t-section-head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: var(--space-4);
  }

  .t-section-title {
    width: 100%;
    text-align: center;
  }

  .t-section-stats {
    width: 100%;
    justify-content: center;
    gap: var(--space-6);
  }
  .tc {
    width: min(20rem, 86vw);
    padding: var(--space-5);
  }
  .qm { margin-bottom: var(--space-1); }
  .stars { margin-bottom: var(--space-2); }
  .t-stag { margin-bottom: var(--space-3); }
  .t-text { margin-bottom: var(--space-4); }
  .t-author { gap: var(--space-3); }
}

/* ===== 14. ABOUT PAGE ======================================= */
.story-section { background: var(--surface); }
.story-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
}
.story-label { color: var(--gold-dark); }
.story-title { margin-bottom: var(--space-5); color: var(--text); }
.story-title em { color: var(--gold-dark); }
.story-body {
  margin-bottom: var(--space-4);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.story-quote {
  margin-block: var(--space-6);
  padding-left: var(--space-5);
  max-width: var(--measure);
  font-family: var(--font-accent);
  font-size: var(--fs-quote);
  font-style: italic;
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  color: var(--gold-dark);
  border-left: 3px solid var(--green);
}

.portrait-wrap {
  width: 100%;
  max-width: 32rem;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-xs);
}
.portrait-wrap img { width: 100%; height: auto; }

.cred-card {
  margin-top: var(--space-5);
  padding: var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.cred-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--green);
}
.cred-label { margin-bottom: var(--space-5); color: var(--gold-dark); }
.cred-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.cred-item { display: flex; flex-direction: column; min-width: 0; }
.cred-item-label { margin-bottom: 0.3rem; color: var(--text-muted); }
.cred-item-value { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-tight); color: var(--text); }
.cred-item-value.status { color: var(--status-green); font-weight: var(--fw-bold); }
.cred-item-value.status::before { content: '● '; }

.bg-section {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: var(--section-y-sm);
}
.bg-copy h2 { margin-bottom: var(--space-5); }
.credential-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}
.credential-group {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
}
.credential-group:nth-child(even) {
  padding-inline: var(--space-5) 0;
  border-left: 1px solid var(--line-gold);
}
.credential-group:nth-child(n + 3) {
  border-top: 1px solid var(--line-gold);
}
.credential-group h3 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-body);
  color: var(--gold-dark);
}
.credential-group p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
}
.bg-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
}
.bg-image::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 4px;
  background: var(--green);
}
.bg-image img { width: 100%; height: auto; }

@media (max-width: 1024px) {
  .story-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .portrait-wrap { max-width: none; }
  .bg-section { grid-template-columns: minmax(0, 1fr); }
  .bg-image { order: -1; max-width: 32rem; margin-inline: auto; }
}
@media (max-width: 560px) {
  .cred-grid { grid-template-columns: minmax(0, 1fr); }
  .credential-summary { grid-template-columns: minmax(0, 1fr); }
  .credential-group,
  .credential-group:nth-child(even) {
    padding: var(--space-4) 0;
    border-left: 0;
  }
  .credential-group:nth-child(n + 2) {
    border-top: 1px solid var(--line-gold);
  }
}

/* ===== 15. SERVICES PAGE ==================================== */
.pricing-section { background: var(--surface); }
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  background: transparent;
}
.pc {
  padding: var(--card-pad);
  background:
    radial-gradient(circle at 50% 8%, rgba(92, 56, 32, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(92, 56, 32, 0.045), rgba(92, 56, 32, 0.015)),
    var(--surface);
  box-shadow:
    inset 0 0 42px rgba(92, 56, 32, 0.045),
    0 18px 44px rgba(72, 43, 27, 0.12);
  border-radius: var(--radius-md);
}
.pc:hover {
  z-index: 2;
  box-shadow:
    inset 0 0 48px rgba(92, 56, 32, 0.06),
    0 24px 58px rgba(72, 43, 27, 0.18);
}
.pc.featured {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.075), transparent 48%),
    var(--green);
  box-shadow: 0 22px 58px rgba(2, 46, 32, 0.22);
}
.pc.featured:hover { box-shadow: 0 28px 68px rgba(2, 46, 32, 0.3); }

.pc-badge {
  align-self: flex-start;
  order: -1;
  margin-bottom: var(--space-4);
  padding: 0.4rem 0.95rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: none;
  color: var(--dark);
  background: var(--metallic-gold);
  border-radius: var(--radius-pill);
}
.pc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pc:hover .pc-icon { border-color: var(--gold-dark); background: rgba(92, 56, 32, 0.08); }
.pc.featured .pc-icon {
  border-color: transparent;
  background: var(--metallic-gold);
  box-shadow: var(--shadow-gold-btn);
}
.pc-icon svg { width: 22px; height: 22px; stroke: var(--gold-dark); fill: none; }
.pc.featured .pc-icon svg { stroke: var(--green); }

.pc-name { margin-bottom: 0.2rem; color: var(--text); }
.pc.featured .pc-name { color: var(--text-dark-bg); }
.pc-sub {
  margin-bottom: var(--space-4);
  font-family: var(--font-accent);
  color: var(--gold-dark);
}
.pc.featured .pc-sub,
.pc.featured .pc-amount,
.pc.featured .pc-details summary > span:first-child {
  color: transparent;
  background: var(--metallic-gold-text);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pc-amount {
  font-size: var(--fs-price);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--text);
}
.pc-period {
  margin-top: 0.45rem;
  font-family: var(--font-accent);
  color: var(--text-muted);
}
.pc.featured .pc-period { color: var(--text-dark-bg-muted); }
.pc-div { height: 1px; margin-block: var(--space-4); background: var(--line-gold); }
.pc.featured .pc-div { background: var(--metallic-gold); }

.pc-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: var(--space-5); }
.pc-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
}
.pc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
}
.pc.featured .pc-list li { color: var(--text-dark-bg); }
.pc.featured .pc-list li::before { background: var(--metallic-gold); }

.pc-details {
  margin-bottom: var(--space-5);
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold-soft);
}
.pc-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding-block: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: none;
  color: var(--gold-dark);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.pc-details summary::-webkit-details-marker { display: none; }
.pc-details summary:hover { color: var(--green); }
.pc.featured .pc-details summary { color: var(--gold-light); }
.pc.featured .pc-details summary:hover { color: var(--gold-bright); filter: brightness(1.1); }
.pc-details-icon { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.pc-details-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pc-details-plus { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transform-origin: center; }
.pc-details[open] .pc-details-plus { opacity: 0; transform: scaleY(0); }
.pc-details > *:not(summary) { animation: fadeIn var(--dur) var(--ease) both; }
.pc-details p {
  margin-block: 0.5rem 0.75rem;
  color: var(--text-muted);
}
.pc.featured .pc-details p { color: var(--text-dark-bg-muted); }
.pc .pc-btn { margin-top: auto; align-self: stretch; }

@media (max-width: 1024px) {
  .price-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}

/* --- Custom services --- */
.custom-section {
  position: relative;
  background:
    linear-gradient(135deg, rgba(15, 5, 1, 0.72), rgba(15, 5, 1, 0.58)),
    url('assets/stethoscope-clinical-shadow.jpg') center / cover no-repeat;
}
.custom-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold-strong), transparent);
}
.custom-intro { margin-bottom: var(--space-7); }
.custom-intro .stitle { color: var(--white); margin-bottom: var(--space-4); }
.custom-intro .stitle em { color: var(--gold-light); }
.custom-note {
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: rgba(255, 253, 245, 0.94);
}
.custom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: transparent;
}
.cc {
  padding: clamp(1rem, 1.8vw, 1.5rem);
  background: rgba(5, 17, 13, 0.88);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #8A5700, #D9A900, #F2C230, #B87900) 1;
}
.cc:hover { background: rgba(5, 17, 13, 0.82); }
.cc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--metallic-gold);
  box-shadow: var(--shadow-gold-btn);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cc:hover .cc-icon { filter: brightness(1.06); }
.cc-icon svg {
  width: 19px;
  height: 19px;
  stroke: var(--darkest);
  fill: none;
}

.cc-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.cc-name { margin-bottom: var(--space-4); color: var(--white); }
.cc-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-4); }
.cc-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: rgba(255, 253, 245, 0.94);
}
.cc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--metallic-gold);
  border-radius: 50%;
}
.cc .cc-link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--text-dark-bg);
  background: transparent;
  border-bottom-color: transparent;
  border-image: linear-gradient(90deg, #8A5700, #D9A900, #F2C230, #B87900) 1;
  -webkit-text-fill-color: currentColor;
}

@media (max-width: 1200px) {
  .custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .custom-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Service feature band --- */
.service-feature-band {
  display: grid;
  grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding-block: var(--section-y);
  background: var(--surface);
}
.service-feature-media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--surface-dark);
  border-right: 2px solid transparent;
  border-image: linear-gradient(180deg, #8A5700, #D9A900, #F2C230, #B87900) 1;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: 0 22px 48px rgba(33, 26, 23, 0.16);
}
.service-feature-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
}
.service-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2.75rem);
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.12), transparent 46%),
    linear-gradient(105deg, rgba(2, 46, 32, 0.98) 0%, rgba(10, 66, 48, 0.90) 58%, rgba(30, 85, 66, 0.74) 100%),
    var(--green);
  border: 1px solid rgba(164, 122, 63, 0.38);
  border-left: 0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: 0 22px 52px rgba(2, 46, 32, 0.18);
}
.service-feature-copy h3 {
  margin-bottom: var(--space-5);
  font-size: var(--fs-section-heading);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  color: var(--text-dark-bg);
  text-wrap: balance;
}
.service-feature-copy h3 em { color: var(--gold-dark); }
.service-feature-copy p {
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: rgba(255, 253, 245, 0.92);
}
.service-feature-quote {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #8A5700, #D9A900, #F2C230, #B87900) 1;
}
.service-feature-quote blockquote {
  margin-bottom: 0.6rem;
  font-family: var(--font-accent);
  font-size: var(--fs-quote);
  font-style: italic;
  line-height: var(--lh-heading);
  color: var(--text-dark-bg);
}
.service-feature-quote cite {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--fs-label);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: none;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1024px) {
  .service-feature-band { grid-template-columns: minmax(0, 1fr); }
  .service-feature-media,
  .service-feature-copy {
    width: min(100%, 28rem);
    margin-inline: auto;
  }
  .service-feature-media {
    border-right: 0;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #8A5700, #D9A900, #F2C230, #B87900) 1;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .service-feature-copy {
    border-top: 0;
    border-left: 1px solid rgba(164, 122, 63, 0.38);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* --- Payment --- */
.pay-section {
  background:
    linear-gradient(rgba(15, 5, 1, 0.58), rgba(15, 5, 1, 0.7)),
    url("assets/accepted-payment-methods-bg.png") center / cover no-repeat;
}
.pay-title { margin-bottom: var(--space-7); color: var(--white); text-align: center; }
.pay-title em { color: var(--gold-light); }
.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(92, 56, 32, 0.1);
}
.pay-item {
  align-items: center;
  padding: var(--card-pad);
  text-align: center;
  background: rgba(15, 5, 1, 0.58);
  backdrop-filter: blur(2px);
}
.pay-item:hover { background: rgba(15, 5, 1, 0.7); }
.pay-item svg {
  width: 30px; height: 30px;
  margin-bottom: var(--space-4);
  stroke: var(--gold-light);
  fill: none;
}
.pay-name { margin-bottom: 0.5rem; color: var(--text-dark-bg); }
.pay-desc {
  max-width: 30ch;
  color: var(--text-dark-bg-muted);
}
@media (max-width: 768px) {
  .pay-section { background-position: center, 84% center; }
  .pay-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .pay-desc { max-width: none; }
}

/* --- Scheduling band --- */
.sched-band { background: var(--surface-tint); border-top: 1px solid var(--line-gold-soft); }
.sched-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.sched-content {
  display: contents;
}
.sched-content .btn-gold {
  flex: 0 0 auto;
}
.sched-text { min-width: min(100%, 20rem); flex: 1 1 22rem; }
.sched-text strong { display: block; margin-bottom: 0.5rem; color: var(--gold-dark); }
.sched-text p { max-width: 34rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.sched-opts {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  align-items: center;
}
.sched-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(0.7rem, 1.5vw, 1.2rem);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sched-opt + .sched-opt { border-inline-start: 1px solid var(--line-gold-strong); }

@media (max-width: 1024px) {
  .sched-opts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
  .sched-opt { padding-inline: 0.35rem; }
}
@media (max-width: 560px) {
  .sched-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sched-opt:nth-child(3) { border-inline-start: 0; }
  .sched-opt:nth-child(n + 3) { border-top: 1px solid var(--line-gold-strong); }
  .sched-content .btn-gold { flex: 1 1 100%; }
}

/* --- Quote banner --- */
.qbanner { position: relative; min-height: clamp(15rem, 28vw, 20rem); overflow: hidden; }
.qbanner > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.78);
}
.qbanner-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  padding-block: var(--section-y-sm);
  text-align: center;
  background: linear-gradient(135deg, rgba(33, 26, 23, 0.84), rgba(33, 26, 23, 0.62));
}
.qbanner-text { max-width: 44rem; }
.qbanner-text blockquote {
  margin-bottom: var(--space-4);
  font-size: var(--fs-quote);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-heading);
  color: var(--white);
}
.qbanner-text cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: none;
  color: var(--gold-light);
}

/* ===== 16. CONTACT PAGE ===================================== */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.c-left, .c-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-block: var(--section-y);
  background: var(--surface);
}
/* Both panes sit inside the one shared container, so the divider lands on
   the grid line rather than at the viewport edge. */
.c-left { padding-right: clamp(1.5rem, 3vw, 3rem); border-right: 1px solid var(--line-gold); }
.c-right { padding-left: clamp(1.5rem, 3vw, 3rem); }
.c-left-bg { display: none; }
.c-left-content, .c-right-content { max-width: none; }

.portrait-mini {
  position: relative;
  width: min(100%, 34rem);
  margin-inline: auto;
  margin-bottom: var(--space-6);
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.portrait-mini img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 46%;
}

.c-list { display: flex; flex-direction: column; }
.c-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  max-width: none;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text);
  border-bottom: 1px solid var(--line-gold-soft);
}
.c-list li:first-child { border-top: 1px solid var(--line-gold-soft); }
.c-list a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.c-list a:hover { color: #000; border-bottom-color: #000; }
.ci-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.ci-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
}
.ci-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: none;
  color: #000;
}

.divider-line { width: 56px; height: 1px; margin-block: var(--space-6); background: var(--line-gold-strong); }
.resp-note {
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.resp-note strong {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.contact-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(19rem, 34vw, 24rem);
  overflow: hidden;
  background: var(--surface) url("assets/book-now-stethoscope-heart.jpg") 38% 58% / 108% auto no-repeat;
  border-top: 1px solid var(--line-gold-soft);
}
.contact-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 250, 248, 0.08) 0%, rgba(255, 250, 248, 0.4) 45%, rgba(255, 250, 248, 0.94) 68%, rgba(255, 250, 248, 0.98) 100%);
}
.contact-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
.contact-banner-copy-block {
  width: min(46%, 38rem);
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 2px solid var(--gold-dark);
}
.contact-banner .slabel,
.contact-banner-quote em {
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-banner .slabel {
  margin-bottom: var(--space-5);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  filter: none;
}
.contact-banner-quote {
  max-width: 18ch;
  margin-bottom: var(--space-5);
  font-size: var(--fs-hero-page);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  color: var(--text);
}
.contact-banner-copy {
  max-width: 34rem;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text);
}

@media (max-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .c-left {
    padding-right: 0;
    padding-bottom: var(--section-y-sm);
    border-right: 0;
    border-bottom: 1px solid var(--line-gold);
  }
  .c-right { padding-left: 0; padding-top: var(--section-y-sm); }
  .contact-banner {
    align-items: flex-end;
    background-position: 38% 46%;
    background-size: auto 112%;
  }
  .contact-banner::before {
    background: linear-gradient(0deg, rgba(255, 250, 248, 0.98) 0%, rgba(255, 250, 248, 0.92) 46%, rgba(255, 250, 248, 0.12) 78%);
  }
  .contact-banner-inner {
    padding-top: clamp(10rem, 36vw, 15rem);
  }
  .contact-banner-copy-block {
    width: 100%;
    padding: var(--space-5) 0 0;
    border-left: 0;
    border-top: 2px solid var(--gold-dark);
  }
}

/* ===== 17. POLICY PAGES ===================================== */
.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.policy-grid-single { grid-template-columns: minmax(0, 1fr); }
.policy-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
}
.policy-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--green);
}
.policy-card:hover { border-color: var(--line-gold-strong); box-shadow: 0 16px 48px rgba(92, 56, 32, 0.12); }
.policy-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--card-pad-sm) var(--card-pad-sm) var(--space-4);
  border-bottom: 1px solid rgba(2, 46, 32, 0.12);
}
.policy-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  color: var(--dark);
  background: var(--metallic-gold);
  border-radius: 50%;
}
.policy-card-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.policy-card-icon-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.policy-card-icon-contain {
  object-fit: contain;
  padding: 0.45rem;
  background: var(--green);
}
.policy-card h2 { color: var(--text); }
.policy-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--card-pad-sm);
}
.policy-card p {
  margin-bottom: var(--space-4);
  max-width: var(--measure);
  color: var(--text);
}
.policy-card p:last-child { margin-bottom: 0; }
.policy-card ul { display: flex; flex-direction: column; gap: 0.55rem; margin-top: var(--space-4); }
.policy-card ul:first-child { margin-top: 0; }
.policy-card li {
  position: relative;
  padding-left: 1.6rem;
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.policy-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
}

.contact-section {
  position: relative;
  margin-top: var(--section-y-sm);
  padding: var(--section-y-sm) var(--card-pad);
  overflow: hidden;
  text-align: center;
  color: var(--text-dark-bg);
  background: var(--surface-darkest);
  border-top: 4px solid var(--green);
  border-radius: var(--radius-sm);
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(92, 56, 32, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.contact-section > * { position: relative; z-index: 1; }
.contact-section h3 {
  margin-bottom: var(--space-4);
  font-size: var(--fs-subheading);
  font-weight: var(--fw-regular);
  color: var(--white);
}
.contact-section p {
  margin-inline: auto;
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-dark-bg);
}
.contact-section a {
  color: var(--gold-light);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgba(164, 122, 63, 0.45);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-section a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

.contact-section.about-cta {
  min-height: clamp(18rem, 28vw, 23rem);
  display: grid;
  align-content: center;
  text-align: left;
  color: var(--text);
  background: var(--surface) url("assets/caduceus-medical-logo.jpg") 91% center / clamp(22rem, 36vw, 32rem) auto no-repeat;
  border-top-color: var(--gold-dark);
}
.contact-section.about-cta::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.98) 48%, rgba(255, 255, 255, 0.75) 64%, rgba(255, 255, 255, 0.08) 100%);
}
.contact-section.about-cta h3 {
  max-width: 18ch;
  margin-bottom: var(--space-4);
  font-size: var(--fs-hero-page);
  line-height: var(--lh-display);
  color: var(--text);
}
.contact-section.about-cta h3 span {
  display: block;
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-section.about-cta p {
  max-width: 38rem;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-body-lg);
  color: var(--text);
}
.about-cta-copy {
  display: grid;
  justify-items: start;
  width: min(56%, 40rem);
}
.about-cta .btn-gold {
  margin-bottom: var(--space-5);
  color: var(--text);
  border-bottom: 0;
}
.about-cta-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: var(--fs-body-sm);
}

/* Licensure block (terms of service) */
.licensure-section {
  position: relative;
  margin-block: var(--section-y-sm);
  padding: var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
}
.licensure-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--green);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.licensure-section h2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  font-size: var(--fs-subheading);
  font-weight: var(--fw-regular);
  color: var(--text);
}
.licensure-section h2::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  color: var(--dark);
  background: var(--metallic-gold);
  border-radius: 50%;
}
.licensure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.license-item {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--card-pad-sm);
  background: var(--surface);
  border: 1px solid var(--line-gold-soft);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
}
.license-item:hover { box-shadow: 0 8px 24px rgba(92, 56, 32, 0.12); transform: none; }
.license-label {
  font-family: var(--font-accent);
  color: transparent;
  background: var(--metallic-gold);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.license-value { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-tight); color: var(--text); }
.license-status { color: var(--green); font-weight: var(--fw-bold); }

@media (max-width: 1024px) {
  .policy-grid { grid-template-columns: minmax(0, 1fr); }
  .licensure-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .license-item { grid-template-columns: minmax(0, 1fr); }
  .licensure-section h2 { flex-direction: column; align-items: flex-start; }
  .contact-section.about-cta {
    min-height: 31rem;
    align-content: end;
    text-align: center;
    background-position: center 12%;
    background-size: min(82vw, 20rem) auto;
  }
  .contact-section.about-cta::before {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.96) 42%, rgba(255, 255, 255, 0.18) 78%);
  }
  .contact-section.about-cta h3,
  .contact-section.about-cta p {
    margin-inline: auto;
  }
  .about-cta-copy {
    justify-items: center;
    width: 100%;
  }
  .about-cta-contact { justify-content: center; }
}

/* ===== 18. 404 PAGE ========================================= */
body.error-page > main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--nav-height));
  padding: var(--section-y) var(--site-gutter);
  text-align: center;
}
body.error-page h1 {
  margin-bottom: var(--space-3);
  font-size: clamp(4.5rem, 16vw, 9rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--gold-dark);
}
body.error-page h2 {
  margin-bottom: var(--space-4);
  font-size: var(--fs-section-heading);
  font-weight: var(--fw-light);
  color: var(--text);
}
body.error-page p {
  margin: 0 auto var(--space-7);
  max-width: 34rem;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
body.error-page .nf-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
}
body.error-page .nf-links a {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-btn);
  color: var(--gold-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 87, 0, 0.4);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.error-page .nf-links a:hover { color: var(--green); border-bottom-color: var(--green); }

/* ===== 19. MEDIA FRAMING ==================================== */
/* Every framed image crops from its centre of interest and never
   distorts: object-fit does the work, aspect-ratio reserves the
   space so nothing shifts as images load. */
.portrait-wrap, .portrait-mini, .bg-image { background: var(--surface); }
/* Overlay bands keep a dark base so light copy stays legible even if the
   photograph behind it fails to load. */
.qbanner { background: var(--surface-dark); }

.portrait-wrap img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.bg-image img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }

@media (max-width: 1024px) {
  .portrait-wrap img { aspect-ratio: 16 / 11; }
  .bg-image img { aspect-ratio: 16 / 10; }
}

/* ===== 20. MOTION =========================================== */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}
.reveal { transform: translateY(28px); }
.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .reveal-left, .reveal-right { transform: translateY(28px); }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes pageHeroCopyIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.hero-title em { animation: shimmer 6s ease-in-out infinite; }

/* Honour the OS setting: no motion, no marquee, nothing hidden. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
  .hero-title, .hero-sub, .hero-actions, .ph-title, .ph-sub { opacity: 1; animation: none; }
  /* The rail does not drift on its own here; it stays scrollable,
     and snapping makes it easier to step through by hand. */
  .carousel-viewport { scroll-snap-type: x proximity; }
}

/* ===== 21. PRINT ============================================ */
@media print {
  body > nav, .skip-link, .hero-bg-video, .page-hero-bg,
  .carousel-viewport, .cta-band, .qbanner { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .contact-section, footer, .pay-section, .custom-section, .pc.featured {
    color: #000;
    background: #fff;
    border: 1px solid #999;
  }
  .contact-section a, .footer-stack a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .policy-card, .pc, .cc { break-inside: avoid; }
}

/* Decorative hero videos must never behave like media players */
.hero,
.page-hero {
  position: relative;
  overflow: hidden;
}

.hero-bg-video,
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.hero-bg-video::-webkit-media-controls,
.hero-bg-video::-webkit-media-controls-panel,
.hero-bg-video::-webkit-media-controls-play-button,
.hero-bg-video::-webkit-media-controls-start-playback-button,
.page-hero-bg::-webkit-media-controls,
.page-hero-bg::-webkit-media-controls-panel,
.page-hero-bg::-webkit-media-controls-play-button,
.page-hero-bg::-webkit-media-controls-start-playback-button {
  display: none;
  -webkit-appearance: none;
}

/* Home service card icons */
.icard-icon {
  width: clamp(3rem, 7vw, 4.4rem);
  height: auto;
  display: block;
  margin-bottom: 0.9rem;
  object-fit: contain;
}

.icard-title {
  font-weight: 700;
}

@media (max-width: 768px) {
  .icard-icon {
    width: clamp(2.8rem, 12vw, 3.8rem);
    margin-bottom: 0.8rem;
  }
}