/* ==========================================================================
   Absolute Purity Care site stylesheet
   One file, no build step. Edit colors in :root to re-skin the whole site.

   Layout language follows the reference wireframe: cream ground, serif
   display headings over a geometric sans, square-cornered solid buttons,
   large square photography, full-bleed video and form bands.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from the logo.
     To switch the site to a different accent (e.g. teal), change --brand and
     --brand-deep and everything follows: bars, buttons, headings, icons. */
  --brand:       #17284a;
  --brand-deep:  #0f1c35;
  --brand-mid:   #2c4270;
  --steel:       #6b8bb0;
  --steel-light: #a8c0d8;
  --mist:        #d9e4ef;
  --mist-soft:   #edf3f9;

  /* Cream ground */
  --page:        #fdf8f2;
  --page-alt:    #f6ede2;
  --page-deep:   #f0e4d5;
  --white:       #ffffff;

  /* Accent */
  --gold:        #b8873f;
  --gold-ink:    #8a6420;
  --gold-soft:   #d9b478;

  /* Neutrals */
  --ink:         #22303f;
  --ink-soft:    #4d5b6b;
  --ink-mute:    #5c6673;
  --line:        #e4dbcf;
  --line-soft:   #efe7db;

  /* Type */
  --font-display: "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape — square-cornered, per the reference */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 0px;

  --shadow-sm: 0 1px 2px rgba(23, 40, 74, .05), 0 2px 8px rgba(23, 40, 74, .05);
  --shadow-md: 0 6px 18px rgba(23, 40, 74, .08), 0 18px 40px rgba(23, 40, 74, .07);
  --shadow-lg: 0 10px 30px rgba(23, 40, 74, .10), 0 34px 70px rgba(23, 40, 74, .12);

  /* Layout */
  --container: 1240px;
  --container-narrow: 800px;
  --gutter: clamp(20px, 5vw, 50px);
  --section-y: clamp(64px, 8.5vw, 120px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 4.6vw, 3.65rem); line-height: 1.18; }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.32; }
h4 { font-size: 1.08rem; line-height: 1.36; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-mid); text-underline-offset: 3px; }
a:hover { color: var(--brand); }

strong { font-weight: 600; color: var(--brand); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
}

::selection { background: var(--mist); color: var(--brand-deep); }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 999;
  background: var(--brand); color: #fff; padding: 12px 20px;
  font-weight: 500; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.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(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--sand { background: var(--page-alt); }
.section--mist { background: var(--page-alt); }
.section--navy { background: var(--brand); color: #d3ddec; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.stack > * + * { margin-top: 1.15em; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: 1.55fr .95fr; }
.split--wide-right { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 900px) {
  .split,
  .split--wide-left,
  .split--wide-right { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  /* Full-width portraits: a square box crops far less than a letterbox one. */
  .split__media .photo--tall { aspect-ratio: 1 / 1; min-height: 0; }
}

/* Section headers */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--gold-ink);
  margin: 0 0 1rem;
}
.section--navy .eyebrow { color: var(--gold-soft); }

.section-head { max-width: 700px; margin-bottom: clamp(38px, 4.5vw, 62px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 0; }
.section--navy .section-head p { color: #b5c6dc; }

.lead {
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  line-height: 1.68; color: var(--ink-soft); font-weight: 300;
}

/* --------------------------------------------------------------------------
   4. Buttons — square, solid, generous padding
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 19px 32px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .97rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.btn--gold { background: var(--gold-ink); color: #fff; border-color: var(--gold-ink); }
.btn--gold:hover { background: #6f4f18; border-color: #6f4f18; color: #fff; }

.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: #fff; }

.btn--light { background: #fff; color: var(--brand); border-color: #fff; }
.btn--light:hover { background: var(--page-alt); border-color: var(--page-alt); color: var(--brand); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: #fff; color: var(--brand); border-color: #fff; }

.btn--sm { padding: 13px 22px; font-size: .89rem; border-width: 2px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 500; font-size: .92rem; color: var(--brand);
  text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); line-height: 1; }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4b. Preview banner
   Shown only while SITE.PREVIEW is true in js/main.js. Deliberately loud —
   it exists so nobody mistakes a staging link for the live service.
   -------------------------------------------------------------------------- */
.preview-banner {
  background: var(--gold-ink);
  color: #fff;
  padding: 11px var(--gutter);
  font-size: .85rem; font-weight: 300; line-height: 1.5;
  text-align: center;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: baseline; justify-content: center;
}
.preview-banner strong {
  color: #fff; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; font-size: .72rem;
  border: 1px solid rgba(255,255,255,.5);
  padding: 3px 9px;
}
.preview-banner a { color: #fff; font-weight: 500; }
/* The header is sticky; the banner should scroll away above it. */
.is-preview .site-header { top: 0; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--brand);
  color: #c3d1e4;
  font-size: .855rem; font-weight: 300;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: center; gap: 10px 30px;
  min-height: 44px; flex-wrap: wrap;
}
.topbar a { color: #eaf1f9; text-decoration: none; font-weight: 400; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__group { display: flex; align-items: center; gap: 10px 30px; flex-wrap: wrap; justify-content: center; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { width: 15px; height: 15px; opacity: .85; flex: none; }
@media (max-width: 760px) { .topbar__hide-sm { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--page);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(23,40,74,.07); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 96px;
}

.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
  color: var(--brand); letter-spacing: .005em;
}

/* img/logo-mark.jpg is the circular emblem, pre-cropped at 168px. The full
   lock-up (img/logo.jpeg) is 1171x1505 and 144 KB; using it here meant every
   page downloaded 22x more pixels than a 52px mark can show. Replace the mark
   by re-cropping the lock-up, not by pointing this back at the big file. */
.brand__mark, .footer__mark {
  flex: none;
  border-radius: 50%;
  background-image: url("../img/logo-mark.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--mist);
}
.brand__mark { width: 52px; height: 52px; }
.footer__mark { width: 50px; height: 50px; }

@media (max-width: 420px) {
  .brand__mark { width: 46px; height: 46px; }
  .brand__name { font-size: 1.2rem; }
}
/* Smallest phones: the wordmark and the menu button have to share ~320px. */
@media (max-width: 400px) {
  .nav { gap: 12px; }
  .brand { gap: 10px; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__name { font-size: 1.05rem; }
  .nav__toggle { width: 46px; height: 46px; }
}

.nav__links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: 10px 11px;
  font-size: .87rem; font-weight: 400; color: var(--brand-mid);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__links a:hover { color: var(--brand); border-bottom-color: var(--steel-light); }
.nav__links a[aria-current="page"] { color: var(--brand); font-weight: 500; border-bottom-color: var(--brand); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }

.nav__toggle {
  display: none;
  width: 50px; height: 50px; padding: 0;
  background: var(--brand); border: 0;
  color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 1300px) {
  .nav__actions .btn--desktop { display: none; }
}
@media (max-width: 1140px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav { min-height: 78px; }
}

@media (max-width: 620px) {
  .nav__actions .btn { display: none; }
  .brand { min-width: 0; }
  .brand__text { min-width: 0; }
}

/* Mobile drawer */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--page);
  padding: 18px var(--gutter) 30px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0 0 18px; padding: 0; }
.mobile-nav li + li { border-top: 1px solid var(--line-soft); }
.mobile-nav a {
  display: block; padding: 14px 4px; font-size: 1rem; font-weight: 400;
  color: var(--ink); text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.mobile-nav .btn-row { flex-direction: column; }
@media (min-width: 1121px) { .mobile-nav { display: none !important; } }

/* --------------------------------------------------------------------------
   6. Photo slots
   Every photo slot looks like this:
     <div class="photo">
       <img src="img/photos/hero.jpg" alt="…" loading="lazy" onerror="this.remove()">
     </div>
   Drop the named file into img/photos/ and it appears. Until the file exists
   the <img> removes itself and a soft branded gradient shows instead — so a
   missing photo never leaves a broken image on the page.
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  isolation: isolate;
  background-color: var(--mist);
  background-image:
    linear-gradient(135deg, rgba(23,40,74,.08), transparent 55%),
    linear-gradient(140deg, var(--steel-light), var(--mist) 45%, var(--page-deep));
  overflow: hidden;
  min-height: 260px;
}
.photo > img, .photo > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.3), transparent 60%);
  pointer-events: none;
}
.photo--tall { min-height: clamp(360px, 48vw, 620px); }
/* Portrait slots hold photographs of people. When the column is wider than it
   is tall, object-fit: cover crops top and bottom — and the default centre
   position takes the top of the head with it. Bias the crop upward. */
.photo--tall > img { object-position: 50% 22%; }
.photo--wide { min-height: clamp(240px, 30vw, 400px); }
.photo--square { aspect-ratio: 1 / 1; min-height: 0; }
.photo--round { border-radius: 0; }

/* --------------------------------------------------------------------------
   7. Hero — full-bleed photograph with the copy set over it

   The scrim is a horizontal cream gradient: opaque behind the text on the
   left, clearing to reveal the photograph on the right. That keeps navy type
   on a cream ground (high contrast, on-brand) instead of resorting to white
   text on a darkened photo. On narrow screens it becomes a vertical wash so
   the copy stays readable wherever the subject of the photo happens to sit.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(500px, 66vh, 760px);
  padding-block: clamp(52px, 6vw, 96px);
  background: var(--page);
  overflow: hidden;
}

.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 32%;
}

.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    100deg,
    var(--page) 0%,
    var(--page) 44%,
    rgba(253, 248, 242, .92) 56%,
    rgba(253, 248, 242, .55) 70%,
    rgba(253, 248, 242, .12) 86%,
    rgba(253, 248, 242, 0) 100%
  );
}

/* Between the two-column threshold and roughly 1200px the copy column takes up
   most of the width, so the opaque part of the wash has to reach further right
   or the last few characters of a line drift onto the photograph. */
@media (min-width: 981px) and (max-width: 1200px) {
  .hero__scrim {
    background: linear-gradient(
      100deg,
      var(--page) 0%,
      var(--page) 60%,
      rgba(253, 248, 242, .92) 72%,
      rgba(253, 248, 242, .55) 84%,
      rgba(253, 248, 242, .10) 96%,
      rgba(253, 248, 242, 0) 100%
    );
  }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__copy { max-width: 620px; }

.hero h1 { font-size: clamp(2.15rem, 3.9vw, 3.15rem); margin-bottom: .4em; }
.hero__title-accent { color: var(--steel); display: block; }
.hero p.lead { max-width: 48ch; }
.hero .btn-row { margin-top: 2.1rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 2.3rem; padding-top: 1.7rem;
  border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--ink-mute);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 16px; height: 16px; color: var(--steel); flex: none; }

/* Below the two-column threshold the photo sits behind everything, so the
   wash has to cover the full width rather than just the left half. */
@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero__bg { object-position: 62% 28%; }
  .hero__scrim {
    background: linear-gradient(
      175deg,
      rgba(253, 248, 242, .93) 0%,
      rgba(253, 248, 242, .90) 55%,
      rgba(253, 248, 242, .82) 100%
    );
  }
  .hero__copy { max-width: none; }
}

/* Interior page hero */
.page-hero {
  padding-block: clamp(48px, 6vw, 88px) clamp(42px, 5vw, 70px);
  background: var(--page-alt);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin-bottom: .32em; }
.page-hero p { max-width: 64ch; color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 0; }
.page-hero .btn-row { margin-top: 2rem; }

.breadcrumb {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: .82rem; color: var(--ink-mute); margin-bottom: 1.1rem;
  list-style: none; padding: 0;
}
.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--steel-light); }
.breadcrumb li { display: inline-flex; align-items: center; }

/* --------------------------------------------------------------------------
   8. Stat band
   -------------------------------------------------------------------------- */
.stat-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 500; color: var(--brand); line-height: 1; margin-bottom: .4rem;
}
.stat__label {
  font-size: .84rem; color: var(--ink-mute); line-height: 1.4;
  letter-spacing: .04em;
}
.section--navy .stat__value { color: #fff; }
.section--navy .stat__label { color: #a9bbd2; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(26px, 2.6vw, 34px);
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--steel-light); }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--ink-soft); font-size: .96rem; }
.card .link-arrow { margin-top: auto; padding-top: 1.2rem; }

.card--flat { background: transparent; border: 0; padding: 0; }
.card--sand { background: var(--page-alt); border-color: var(--line); }

.icon-badge {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist-soft); color: var(--brand);
  margin-bottom: 1.2rem; flex: none;
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge--gold { background: #f8efe0; color: var(--gold-ink); }
.icon-badge--round { border-radius: 50%; }

/* Feature list */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist-soft); color: var(--brand-mid);
}
.feature__icon svg { width: 21px; height: 21px; }
.feature h3 { font-size: 1.05rem; margin-bottom: .3em; }
.feature p { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.section--navy .feature__icon { background: rgba(255,255,255,.1); color: #cddcee; }
.section--navy .feature p { color: #aec0d6; }

/* Square-photo feature block ("What Sets Us Apart" pattern) */
.square-feature { display: flex; flex-direction: column; }
.square-feature .photo { aspect-ratio: 1/1; min-height: 0; margin-bottom: 1.5rem; }
.square-feature h3 { margin-bottom: .4em; }
.square-feature p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.square-feature--center { text-align: center; }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.checklist li { position: relative; padding-left: 34px; color: var(--ink-soft); font-size: .98rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 21px; height: 21px;
  background: var(--mist-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317284a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.checklist--gold li::before { background-color: #f8efe0; }
.section--navy .checklist li { color: #c0cfe2; }
.section--navy .checklist li::before {
  background-color: rgba(255,255,255,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   10. Process steps
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 2.5vw, 34px); counter-reset: step; }
.step { position: relative; padding-top: 28px; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--line);
}
.step__num {
  counter-increment: step;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--brand); color: #fff;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  margin-bottom: 1.1rem;
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.12rem; margin-bottom: .35em; }
.step p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.step:first-child::before { background: var(--gold-soft); }

/* --------------------------------------------------------------------------
   11. Full-bleed video band
   -------------------------------------------------------------------------- */
.video-band {
  position: relative;
  min-height: clamp(420px, 52vw, 700px);
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--brand-deep);
  text-align: center;
}
.video-band__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Shown when no video file has been added yet. */
.video-band__fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 90% at 20% 10%, rgba(107,139,176,.55), transparent 60%),
    radial-gradient(80% 80% at 85% 90%, rgba(184,135,63,.28), transparent 60%),
    linear-gradient(150deg, var(--brand-deep), var(--brand-mid) 70%, #3d5a86);
  background-color: var(--brand-deep);
}
.video-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,28,53,.62), rgba(15,28,53,.72));
}
.video-band__inner {
  position: relative; z-index: 2;
  padding: clamp(60px, 8vw, 110px) var(--gutter);
  max-width: 860px; margin-inline: auto;
}
.video-band h2, .video-band h1 { color: #fff; margin-bottom: .4em; }
.video-band p { color: #cfdaea; font-size: clamp(1.02rem, 1.5vw, 1.18rem); margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   12. Callout / CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--brand);
  color: #d3ddec;
  padding: clamp(38px, 5vw, 70px);
}
.cta-band__inner { position: relative; display: grid; grid-template-columns: 1.4fr auto; gap: 34px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .4em; }
.cta-band p { color: #b8c8dd; margin-bottom: 0; max-width: 54ch; }
@media (max-width: 840px) { .cta-band__inner { grid-template-columns: 1fr; } }

.callout {
  background: var(--page-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  padding: 22px 26px;
  font-size: .95rem;
  color: var(--ink-soft);
}
.callout strong { display: block; margin-bottom: .3em; color: var(--brand); font-size: 1rem; }
.callout--info { background: var(--mist-soft); border-color: var(--mist); border-left-color: var(--steel); }

/* --------------------------------------------------------------------------
   13. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer;
  padding: 23px 46px 23px 0; position: relative;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 500; color: var(--brand);
  line-height: 1.35;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 13px; height: 13px; margin-top: -7px;
  border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.accordion summary:hover { color: var(--brand-mid); }
.accordion__body { padding: 0 46px 26px 0; color: var(--ink-soft); font-size: .98rem; }
.accordion__body > *:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(26px, 3.4vw, 46px);
}

.form-section + .form-section { margin-top: 2.4rem; padding-top: 2.2rem; border-top: 1px solid var(--line-soft); }
.form-section__title {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 500; color: var(--brand);
  margin: 0 0 .3em;
}
.form-section__note { font-size: .89rem; color: var(--ink-mute); margin: 0 0 1.6rem; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label, .fieldset__legend {
  font-size: .855rem; font-weight: 500; color: var(--brand);
}
.field .hint { font-size: .8rem; color: var(--ink-mute); font-weight: 300; }
.req { color: var(--gold-ink); font-weight: 600; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="url"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit; font-size: .95rem; font-weight: 300;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7684' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
  padding-right: 40px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel-light); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(44,66,112,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #8a94a1; }

.field input[type="file"] { padding: 11px 13px; background: var(--mist-soft); cursor: pointer; }
.field input[type="file"]::file-selector-button {
  font: inherit; font-size: .86rem; font-weight: 500;
  margin-right: 12px; padding: 9px 16px;
  border: 0; border-radius: 0;
  background: var(--brand); color: #fff; cursor: pointer;
}

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset__legend { display: block; margin-bottom: 12px; padding: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.choice {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  background: var(--page); cursor: pointer;
  font-size: .92rem; color: var(--ink-soft);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.choice:hover { border-color: var(--steel-light); background: #fff; }
.choice input { margin: 2px 0 0; accent-color: var(--brand); width: 21px; height: 21px; flex: none; }
.choice:has(input:checked) { border-color: var(--brand-mid); background: var(--mist-soft); color: var(--ink); }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .89rem; color: var(--ink-soft); line-height: 1.55;
}
/* The whole label is the click target, so this is not a WCAG target-size
   issue. It is sized up because the people ticking these boxes are often
   older adults or a family member filling a form under stress. */
.consent input { margin: 2px 0 0; accent-color: var(--brand); width: 21px; height: 21px; flex: none; }

.form-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-actions .note { font-size: .84rem; color: var(--ink-mute); }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-status {
  margin-top: 1.2rem; padding: 15px 18px;
  font-size: .92rem; display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: #eef6ef; border: 1px solid #cbe3ce; color: #2c5b34; }
.form-status--err { background: #fdf0ee; border: 1px solid #f2d3ce; color: #8c3323; }

.privacy-note {
  font-size: .86rem; color: var(--ink-mute);
  background: var(--mist-soft); border: 1px solid var(--mist);
  padding: 16px 18px; margin-bottom: 1.8rem;
}
.privacy-note strong { color: var(--brand); }

/* Full-bleed form band: background photo + light scrim + centered card */
.form-band {
  position: relative;
  padding-block: clamp(56px, 7vw, 110px);
  background-color: var(--page-alt);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.form-band__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.form-band__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(253, 248, 242, .82); }
.form-band .container { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   15. Contact details block
   -------------------------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list .icon-badge { width: 46px; height: 46px; margin: 0; }
.contact-list .icon-badge svg { width: 20px; height: 20px; }
.contact-list dt, .contact-list .label {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 4px;
}
.contact-list li > div { min-width: 0; }
/* The email address is one long unbreakable token — let it wrap on narrow phones. */
.contact-list .value { font-size: 1.02rem; color: var(--brand); font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.contact-list .value a { color: var(--brand); text-decoration: none; }
.contact-list .value a:hover { text-decoration: underline; }
.contact-list .sub { font-size: .86rem; color: var(--ink-mute); }

.map-frame { border: 1px solid var(--line); overflow: hidden; background: var(--mist-soft); }
.map-frame iframe { display: block; width: 100%; height: clamp(280px, 40vw, 440px); border: 0; }

/* --------------------------------------------------------------------------
   16. Misc content pieces
   -------------------------------------------------------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: var(--mist-soft); border: 1px solid var(--mist);
  font-size: .84rem; font-weight: 400; color: var(--brand-mid);
}

.quote {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.5; color: var(--brand); font-weight: 400;
  border-left: 3px solid var(--gold-soft); padding-left: clamp(20px, 3vw, 32px);
  margin: 0;
}
.quote footer { margin-top: 1.1rem; font-family: var(--font-body); font-size: .92rem; color: var(--ink-mute); font-weight: 300; }
.section--navy .quote footer { color: #b5c6dc; }

.prose h2 { margin-top: 2.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--ink-soft); }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--steel); }

.toc { background: var(--mist-soft); border: 1px solid var(--mist); padding: 22px 26px; margin-bottom: 2.6rem; }
.toc h2 { font-size: 1rem; margin: 0 0 .8em; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: .93rem; }
.toc li { margin-bottom: .35em; }

.service-block { scroll-margin-top: 130px; }
.service-block + .service-block { margin-top: clamp(48px, 6vw, 90px); padding-top: clamp(48px, 6vw, 90px); border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--page-alt); color: var(--ink-soft); font-size: .93rem; border-top: 1px solid var(--line); }
.site-footer a { color: var(--brand-mid); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }

.footer__top { padding-block: clamp(48px, 6vw, 80px); }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 3.5vw, 50px);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 1.2rem; text-decoration: none; }
.footer__brand span { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--brand); line-height: 1.15; }
.footer__about { max-width: 34ch; color: var(--ink-soft); }
.footer__brand small { font-family: var(--font-body); font-size: .6rem; letter-spacing: .2em; color: var(--ink-mute); }
.footer__contact small { color: var(--ink-mute); }

.footer__title {
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--brand); margin: 0 0 1.1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.footer__contact { display: grid; gap: 13px; }
.footer__contact div { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact svg { width: 17px; height: 17px; margin-top: 4px; color: var(--steel); flex: none; }

.footer__cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 1.7rem; }
.site-footer .btn--gold, .site-footer .btn--gold:hover { color: #fff; }
.site-footer .btn--outline { color: var(--brand); }
.site-footer .btn--outline:hover { color: #fff; }

.footer__bottom {
  background: var(--brand);
  color: #b0c1d6;
}
.footer__bottom-inner {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  align-items: center; justify-content: space-between;
  padding-block: 20px; font-size: .84rem;
}
.footer__bottom a { color: #dde7f3; }
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }

/* Sticky mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 0; padding: 0 0 env(safe-area-inset-bottom);
  background: var(--page);
  border-top: 1px solid var(--line);
}
.callbar .btn { flex: 1; padding: 16px 12px; font-size: .9rem; border-width: 0; }
.callbar .btn--outline { background: var(--page); color: var(--brand); }
.callbar .btn--outline:hover { background: var(--brand); color: #fff; }
@media (max-width: 720px) {
  .callbar { display: flex; }
  body { padding-bottom: 60px; }
}

/* --------------------------------------------------------------------------
   18. Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .site-footer, .callbar, .mobile-nav, .cta-band, .video-band { display: none !important; }
  body { padding: 0; font-size: 12pt; color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}