/* FORTUCARE LTD, static landing page (v2), restyled 12 Oct 2026 after the Aldworth clinic hero
   and the Allia Health page (references only: no layouts, wording or images copied).
   Colours follow the Allia Health pattern: mint whites, mint-to-aqua gradients, deep teal text,
   an orange highlight column. Light colours only.
   Contrast (WCAG AA): heading, ink, muted and accent-deep pass on bg, surface, mist, tile and the
   hero gradient; only heading and ink text sit on the bright CTA band (6.9 or more); white and tint
   pass on the dark teal cards (5.08 or more); dark teal text on the orange column header 5.95 . */

/* ---------- Design tokens ---------- */
:root {
  /* Colour pattern after the Allia Health reference (owner request, 12 Oct 2026):
     mint whites, mint-to-aqua gradients, deep teal text and dark cards, orange highlight column. */
  --navy: #0F5E58;          /* dark card gradient, start */
  --navy-soft: #13675F;     /* dark card gradient, end */
  --accent: #12937E;        /* ticks, dots, lines, borders (non-text) */
  --accent-deep: #0B6E5F;   /* highlighted words and labels on light backgrounds */
  --accent-light: #A8EBD6;  /* labels and icons on dark teal */
  --highlight: #F9A04A;     /* comparison column header (logo-orange family) */
  --highlight-soft: #FFE6CB;/* comparison column cells */
  --highlight-text: #0E3B3A;
  --heading: #0E3B3A;
  --ink: #1D3433;
  --muted: #4A6260;
  --bg: #F3FAF7;
  --surface: #FFFFFF;
  --mist: #E3F5EE;
  --tile: #D3EFE5;
  --line: #D5E8E1;
  --tint: #D4F3EA;          /* secondary text on dark teal */
  --field: #6F8783;
  --footer: #0B2F2E;
  --primary-bg: #0E3B3A;
  --primary-bg-hover: #0F5E58;
  --primary-text: #FFFFFF;
  --glow-a: #BFEBDD;
  --glow-b: #DDF4E8;
  --glow-c: #EAF6E0;
  --glow-d: #CFEFF0;
  --band-a: #7FE0C2;
  --band-b: #4CCFC0;
  --band-c: #9BE7D6;
  --tint-a: #E6F7F0;
  --tint-b: #D4F1EA;
  --radius: 1.5rem;
  --shadow: 0 1px 2px rgb(14 59 58 / .05), 0 18px 40px -16px rgb(14 59 58 / .16);
  --shadow-lift: 0 1px 2px rgb(14 59 58 / .06), 0 26px 50px -18px rgb(14 59 58 / .28);
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}

/* Light colours only (owner, 12 Oct 2026): the Allia Health colour pattern is shown whatever the
   visitor's light or dark setting. */
:root { color-scheme: light; }

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

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

h1, h2, h3 {
  margin: 0 0 .5em;
  color: var(--heading);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); line-height: 1.04; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; }

p { margin: 0 0 1em; }
a { color: var(--heading); text-underline-offset: 4px; }
a:hover { color: var(--accent-deep); }

:focus-visible { outline: 3px solid var(--heading); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; border-radius: 999px;
  background: var(--primary-bg); color: var(--primary-text); font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 64rem) { .container { padding-inline: 2rem; } }

/* Mint, aqua and soft lime gradient behind the header and hero (Allia Health colour pattern). */
.page-glow {
  position: absolute; inset: 0 0 auto 0; height: 58rem; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 55%, var(--bg) 100%),
    linear-gradient(120deg, var(--glow-a) 0%, var(--glow-b) 35%, var(--glow-c) 65%, var(--glow-d) 100%);
}

/* ---------- Shared pieces ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem; padding: .375rem .875rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--heading); font-size: .9375rem; font-weight: 700;
}
.eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: 0 1.75rem; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-small { min-height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; }
.btn-primary { background: var(--primary-bg); color: var(--primary-text); box-shadow: 0 12px 24px -12px rgb(14 59 58 / .5); }
.btn-primary:hover { background: var(--primary-bg-hover); color: var(--primary-text); }
.btn-secondary { background: var(--surface); color: var(--heading); box-shadow: var(--shadow); }
.btn-secondary:hover { color: var(--heading); }
.btn-light { background: #FFFFFF; color: #0E3B3A; }
.btn-light:hover { color: #0E3B3A; }
.btn[disabled] { opacity: .6; cursor: progress; }

.text-link {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem;
  color: var(--heading); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}

.card { border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.card-dark {
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #FFFFFF; box-shadow: var(--shadow-lift);
}
.card-dark h3, .card-dark .card-title { color: #FFFFFF; }
.card-dark p { color: var(--tint); }
.card-dark :focus-visible, .card-dark:focus-visible { outline-color: #FFFFFF; }

.icon-tile {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 3rem; height: 3rem; border-radius: .875rem;
  background: var(--tile); color: var(--accent-deep);
}
.icon-tile .icon { width: 1.5rem; height: 1.5rem; }
.card-dark .icon-tile { background: rgb(255 255 255 / .12); color: var(--accent-light); }

.tick {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--accent); color: #FFFFFF;
}
.tick .icon { width: 1rem; height: 1rem; }

.card-title { margin: 0 0 .25rem; color: var(--heading); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.card-text { margin: 0; color: var(--muted); font-size: 1rem; }

/* Photo frames: a slightly enlarged image drifts inside (parallax) without showing an edge. */
.ph { position: relative; overflow: hidden; background: var(--tile); }
.ph img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; will-change: transform; }
.ph-rounded { aspect-ratio: 5 / 4; border-radius: 2rem; box-shadow: var(--shadow-lift); }
.ph-framed { aspect-ratio: 4 / 3; border: 4px solid var(--surface); border-radius: 1.5rem; box-shadow: var(--shadow-lift); }
.ph-square { aspect-ratio: 1; }
.ph-square img { object-position: 50% 30%; }

/* ---------- Sections ---------- */
.section { padding-block: 4.5rem; }
@media (min-width: 64rem) { .section { padding-block: 7.5rem; } }
.section-tint { background: linear-gradient(180deg, var(--tint-a) 0%, var(--tint-b) 100%); }
.section-white { background: var(--surface); }

.section-head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
.section-head p:not(.eyebrow) { color: var(--muted); }
.section-head-left { margin-inline: 0; text-align: left; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: background-color .2s ease, box-shadow .2s ease; }
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 12px 30px -20px rgb(14 59 58 / .4);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 4.75rem; }
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { width: auto; height: 2.75rem; }
@media (min-width: 64rem) { .brand img { height: 3.1rem; } }

.site-nav { display: none; }
.header-phone { display: none; margin-left: auto; }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-left: auto; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--heading); box-shadow: var(--shadow); cursor: pointer;
}
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu: a white card under the header. */
.site-nav.is-open {
  position: absolute; top: 100%; left: 1rem; right: 1rem;
  display: grid; gap: .25rem; padding: .75rem;
  border-radius: 1.25rem; background: var(--surface); box-shadow: var(--shadow-lift);
}
.site-nav.is-open a:not(.btn) {
  display: flex; align-items: center; min-height: 3rem; padding: 0 1rem; border-radius: .875rem;
  color: var(--heading); font-size: 1.125rem; text-decoration: none;
}
.site-nav.is-open a:not(.btn):hover { background: var(--mist); }
.site-nav.is-open .nav-cta { margin-top: .5rem; }

@media (min-width: 64rem) {
  .menu-toggle { display: none; }
  .site-nav { display: flex; align-items: center; gap: 2rem; margin-inline: auto; }
  .site-nav a:not(.btn) { color: var(--ink); font-size: 1rem; text-decoration: none; }
  .site-nav a:not(.btn):hover { color: var(--accent-deep); }
  .site-nav .nav-cta { display: none; }
  .header-phone { display: inline-flex; margin-left: 0; }
}

/* ---------- Hero ---------- */
.hero { padding: 1.5rem 0 4.5rem; }
@media (min-width: 64rem) { .hero { padding: 3.5rem 0 6rem; } }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } }

.hero h1 { margin-top: .5rem; text-wrap: balance; }
.accent-words { color: var(--accent-deep); }
.lead { max-width: 34rem; margin-top: 1.5rem; color: var(--muted); font-size: 1.25rem; line-height: 1.55; }
.actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 2.25rem; }
@media (min-width: 40rem) { .actions { flex-direction: row; flex-wrap: wrap; } }

.hero-cards { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .hero-cards { grid-template-columns: 1fr 1fr; } .hero-feature { grid-column: 1 / -1; } }
.hero-feature { display: block; overflow: hidden; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.hero-feature:hover { transform: translateY(-4px); }
.ph-hero { aspect-ratio: 16 / 8; background: var(--navy-soft); }
@media (min-width: 64rem) { .ph-hero { aspect-ratio: 16 / 7; } }
.hero-feature-body { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
@media (min-width: 64rem) { .hero-feature-body { padding: 1.75rem; } }
.hero-feature .card-title { font-size: 1.375rem; }
.hero-feature .card-text { color: var(--tint); }
.hero-feature .arrow { display: none; margin: .25rem 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--accent-light); }
@media (min-width: 40rem) { .hero-feature .arrow { display: block; } }
.mini-card { padding: 1.5rem; }
.mini-card .card-title { margin-top: 1rem; }

.tick-row {
  display: flex; flex-direction: column; gap: .25rem 2rem;
  margin: 3rem 0 0; padding: 0; list-style: none; color: var(--ink);
}
@media (min-width: 40rem) { .tick-row { flex-direction: row; flex-wrap: wrap; align-items: center; } }
@media (min-width: 64rem) { .tick-row { margin-top: 4rem; } }
.tick-row li { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; }
.tick-row a { font-weight: 700; }

/* ---------- Services ---------- */
.card-grid { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .card-grid { grid-template-columns: 1fr 1fr; } }
.service-card { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem; }
@media (min-width: 64rem) { .service-card { padding: 3rem; } }
.service-card .icon-tile { margin-bottom: 1.5rem; }
.card-tag { margin: 0 0 .5rem; color: var(--accent-light); font-weight: 700; }
.card-tag-light { color: var(--accent-deep); }
.card-lead { color: var(--heading); font-size: 1.15rem; font-weight: 700; }
.card-dark .card-lead { color: #FFFFFF; }
.service-card p:not(.card-tag):not(.card-lead) { color: var(--muted); }
.card-dark.service-card p:not(.card-tag):not(.card-lead) { color: var(--tint); }
.service-card .btn, .service-card .text-link { margin-top: auto; }
.service-card > p:last-of-type { margin-bottom: 2rem; }

/* ---------- Why: layered collage (Allia Health reference) ---------- */
.why-grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 64rem) { .why-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.collage { position: relative; padding: 0 14% 18% 0; }
.collage-small { position: absolute; top: 6%; right: 0; width: 28%; }
.collage-medium { position: absolute; right: 6%; bottom: 0; width: 46%; }
.why-list { display: grid; gap: 1rem; }
.why-item { display: flex; gap: 1rem; padding: 1.5rem; }
.why-item h3 { margin-bottom: .25rem; }
.why-item p { margin: 0; color: var(--muted); }
.statement {
  margin: 2rem 0 0; padding-left: 1.25rem; border-left: 3px solid var(--accent);
  color: var(--heading); font-size: 1.3rem; font-weight: 700; line-height: 1.35;
}

/* ---------- Comparison (highlighted column) ---------- */
.compare-card { max-width: 64rem; margin-inline: auto; overflow: hidden; }
.compare { width: 100%; border-collapse: collapse; text-align: left; }
.compare th, .compare td { padding: 1.25rem; vertical-align: top; }
@media (min-width: 64rem) { .compare th, .compare td { padding: 1.5rem 2rem; } }
.compare thead th { color: var(--heading); font-size: 1.3rem; vertical-align: bottom; }
.compare thead th.col-featured { background: var(--highlight); color: var(--highlight-text); }
.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody th { width: 22%; color: var(--heading); }
.compare tbody td { color: var(--muted); }
.compare tbody td.col-featured { background: var(--highlight-soft); color: var(--ink); }
/* Phones: the row label spans the full width, the two cells sit below it. */
@media (max-width: 39.99rem) {
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare .compare-corner { display: none; }
  .compare tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 0; }
  .compare thead th { font-size: 1.1rem; }
  .compare td { font-size: 1rem; }
}

/* ---------- How it works: timeline ---------- */
.steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .steps { position: relative; grid-template-columns: repeat(4, 1fr); padding-top: 3rem; }
  .steps::before {
    content: ""; position: absolute; top: .9375rem; left: 12.5%; right: 12.5%; height: 2px;
    border-radius: 2px; background: var(--accent); transform-origin: 0 50%;
  }
  .step::before {
    content: ""; position: absolute; top: -2.5rem; left: 50%; width: 1.125rem; height: 1.125rem;
    margin-left: -.5625rem; border: 3px solid var(--accent); border-radius: 999px; background: var(--surface);
  }
}
.step { position: relative; padding: 1.75rem; border-radius: var(--radius); background: var(--bg); }
.step-num { display: block; margin-bottom: 1.25rem; color: var(--accent-deep); font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.step p { margin: 0; color: var(--muted); }

/* ---------- Large photo band ---------- */
.photo-band { padding-inline: 1rem; }
.ph-band { max-width: 76rem; margin-inline: auto; aspect-ratio: 16 / 10; border-radius: 2rem; box-shadow: var(--shadow-lift); }
@media (min-width: 48rem) { .ph-band { aspect-ratio: 21 / 8; } }
@media (min-width: 64rem) { .photo-band { padding-inline: 2rem; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .faq-grid { grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; } }
.faq-list { display: grid; gap: .75rem; }
.faq-item { border-radius: 1.25rem; background: var(--surface); box-shadow: var(--shadow); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4rem; padding: 1rem 1.25rem; list-style: none; cursor: pointer;
  color: var(--heading); font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--tile); color: var(--accent-deep);
  transition: transform .25s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { max-width: 40rem; margin: 0; padding: 0 1.25rem 1.5rem; color: var(--muted); }

/* ---------- Location ---------- */
.location-grid { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .location-grid { grid-template-columns: 1fr 1.3fr; gap: 2rem; align-items: stretch; } }
.location-info { padding: 2rem; }
@media (min-width: 64rem) { .location-info { padding: 2.75rem; } }
.location-info address { margin-bottom: 1.5rem; font-style: normal; color: var(--ink); }
.contact-list { display: grid; gap: .75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.contact-list li { display: flex; align-items: center; gap: 1rem; }
.contact-list a:not(.text-link) { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.location-info > p a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.map-wrap { min-height: 22rem; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.map { width: 100%; height: 100%; min-height: 22rem; background: var(--tile); }
.map-fallback { margin: 0; padding: 2rem; color: var(--muted); }

/* ---------- Enquiry form ---------- */
.form-grid { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .form-grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; } }
.form-intro p:not(.eyebrow) { color: var(--muted); }
.tick-list { display: grid; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.tick-list li { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; }
.tick-list a { font-weight: 700; }

.enquiry-form { padding: 1.5rem; }
@media (min-width: 48rem) { .enquiry-form { padding: 2.5rem; } }
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .375rem; margin-bottom: 1.25rem; }
.field label { color: var(--heading); font-weight: 700; font-size: 1rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
  border: 1.5px solid var(--field); border-radius: .875rem;
  background: var(--surface); color: var(--ink); font: inherit;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--heading); }
.consent label { display: flex; align-items: flex-start; gap: .75rem; font-weight: 400; color: var(--ink); }
.consent input { width: 1.375rem; min-height: 1.375rem; height: 1.375rem; margin-top: .2rem; accent-color: var(--accent-deep); flex-shrink: 0; }
.enquiry-form .btn { width: 100%; }
@media (min-width: 40rem) { .enquiry-form .btn { width: auto; } }
.form-status { margin: 1rem 0 0; color: var(--heading); font-weight: 700; }
.form-status:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Final CTA: bright mint-to-aqua band (Allia Health colour pattern) ---------- */
.cta-band { padding-block: 0 4.5rem; }
@media (min-width: 64rem) { .cta-band { padding-bottom: 7.5rem; } }
.cta-inner {
  padding: 3rem 1.5rem; border-radius: 2rem; text-align: center;
  background: linear-gradient(120deg, var(--band-a) 0%, var(--band-b) 50%, var(--band-c) 100%);
}
@media (min-width: 64rem) { .cta-inner { padding: 5rem 4rem; } }
.cta-inner p { color: var(--ink); font-size: 1.2rem; }
.cta-inner .actions { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: var(--tint); }
.site-footer a { color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer a:hover { text-decoration: underline; color: #FFFFFF; }
.site-footer :focus-visible { outline-color: #FFFFFF; }
.footer-grid { display: grid; gap: 2rem; padding-block: 3.5rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-logo { width: auto; height: 3.25rem; margin-bottom: 1.25rem; }
.footer-heading { margin-bottom: .5rem; color: #FFFFFF; font-size: .9375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.footer-base { padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .9375rem; }
.footer-base p { margin: 0; }

/* ---------- Motion ----------
   Reveals and stagger are driven by main.js adding .is-visible. Without JavaScript, or with
   reduced motion, everything is visible and still. Dark cards scale in without fading, so their
   text keeps full contrast; the enquiry form never animates. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; translate: 0 32px;
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), translate .7s cubic-bezier(.2, .7, .2, 1), scale .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .reveal-scale { opacity: 1; translate: none; scale: .94; }
  .js .reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; }

  /* Step cards rise one after another; the timeline draws, then each dot pops in. */
  .js .steps .step {
    opacity: 0; translate: 0 28px;
    transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(.25s + var(--i, 0) * 140ms);
  }
  .js .steps.is-visible .step { opacity: 1; translate: 0 0; }
  .js .steps::before { scale: 0 1; transition: scale 1.1s cubic-bezier(.6, 0, .2, 1) .1s; }
  .js .steps.is-visible::before { scale: 1 1; }
  .js .step::before { scale: 0; transition: scale .4s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.35s + var(--i, 0) * 260ms); }
  .js .steps.is-visible .step::before { scale: 1; }

  /* Hero entrance on page load. */
  .hero-copy > * { animation: fc-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .14s; }
  .hero-copy > :nth-child(4) { animation-delay: .22s; }
  .hero-cards > * { animation: fc-slide .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .15s; }
  .hero-cards > :nth-child(2) { animation-delay: .28s; }
  .hero-cards > :nth-child(3) { animation-delay: .4s; }
  .tick-row li { animation: fc-rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .5s; }
  .tick-row li:nth-child(2) { animation-delay: .58s; }
  .tick-row li:nth-child(3) { animation-delay: .66s; }

  /* Highlighted headline words get an underline that draws in. */
  .accent-words {
    background: linear-gradient(rgb(18 147 126 / .25), rgb(18 147 126 / .25)) no-repeat 0 88% / 0% .2em;
    animation: fc-mark .7s .55s cubic-bezier(.6, 0, .2, 1) forwards;
  }

  .mini-card { transition: transform .25s ease, box-shadow .25s ease; }
  .mini-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .hero-feature:hover { box-shadow: 0 30px 60px -20px rgb(14 59 58 / .4); }
}

@keyframes fc-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
/* Slide only, no fade: the dark hero card holds text. */
@keyframes fc-slide { from { translate: 48px 0; } to { translate: 0 0; } }
@keyframes fc-mark { to { background-size: 100% .2em; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .hero-feature, .faq-icon { transition: none; }
  .btn:hover, .hero-feature:hover { transform: none; }
}