/* ==========================================================================
   Goodday Care — styles.css
   The single stylesheet for gooddaycare.com.au
   --------------------------------------------------------------------------
   Foundation increment: design tokens, reset, base elements, layout
   utilities, buttons, and the shared Header + Footer components.
   (Page-level components — hero, cards, stats, timeline, FAQ, forms, CTA —
   are added in later increments; see docs/ui-guidelines.md.)

   Order:
     1. Design tokens (:root)
     2. Modern reset
     3. Base elements
     4. Layout utilities
     5. Buttons
     6. Skip link
     7. Header + Navigation
     8. Footer
     9. Reveal-on-scroll (progressive enhancement)
    10. Reduced motion
   All values come from docs/branding.md — no magic numbers.
   ========================================================================== */

/* ==========================================================================
   0. FONTS (self-hosted — see assets/fonts/README.md)
   Inter + Fraunces variable woff2 are vendored in assets/fonts/ (SIL OFL).
   If a file is missing the fallback stacks render (Fraunces → Georgia/serif,
   Inter → system sans). No third-party requests.
   ========================================================================== */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Colour: Blue (primary — from the Goodday Care logo) ---- */
  --color-blue-900: #0e2a5e; /* deepest navy — footer bg, strong contrast */
  --color-blue-800: #123472; /* headings on light, primary hover */
  --color-blue-700: #17439a; /* PRIMARY brand — buttons, links, key UI */
  --color-blue-600: #1e51b5; /* primary hover/active */
  --color-blue-500: #2c6bd4; /* royal — bright accents, icons */
  --color-blue-400: #4c8fe0; /* sky */
  --color-blue-300: #8fbaee; /* soft blue — decorative, footer titles */
  --color-blue-100: #deeafb; /* tint — section backgrounds, chips */
  --color-blue-50:  #eff5fe; /* lightest wash — subtle bands */

  /* ---- Colour: Gold / Amber (warm accent — pairs with navy) ---- */
  --color-gold-700: #8a5600; /* accessible amber text/links on white */
  --color-gold-600: #b06e12; /* accent hover */
  --color-gold-500: #e39a32; /* primary accent fill — dark ink text on top */
  --color-gold-300: #f3c579; /* soft accent — decorative */
  --color-gold-100: #fbebcb; /* tint — warm backgrounds, badges */

  /* ---- Colour: Neutrals (cool-balanced to suit the blue brand) ---- */
  --color-ink-900:  #14243d; /* headings, strongest text */
  --color-ink-700:  #223349; /* body text */
  --color-slate-500:#5a6b80;
  --color-slate-300:#9ba8b8;
  --color-line-200: #dde4ec;
  --color-cloud-100:#eef2f7;
  --color-canvas:   #f8fafd; /* page background (soft, airy) */
  --color-white:    #ffffff;

  /* ---- Colour: Semantic ---- */
  --color-success: #2e7d5b;
  --color-warning: #b7791f;
  --color-error:   #c0392b;
  --color-info:    #17439a;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 5vw, 4rem);
  --fs-h1:      clamp(2.25rem, 4vw, 3rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:      clamp(1.375rem, 2vw, 1.625rem);
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.125rem, 2vw, 1.375rem);
  --fs-body:    1.125rem; /* 18px base */
  --fs-small:   1rem;
  --fs-caption: 0.875rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  --section-gap: clamp(4rem, 8vw, 8rem);

  /* ---- Border radius ---- */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-pill:  999px;
  --radius-round: 50%;

  /* ---- Elevation (warm-tinted shadows) ---- */
  --shadow-xs: 0 1px 2px rgba(20, 36, 61, 0.06);
  --shadow-sm: 0 2px 8px rgba(20, 36, 61, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 36, 61, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 36, 61, 0.10);
  --shadow-focus: 0 0 0 3px rgba(23, 67, 154, 0.40);

  /* ---- Motion ---- */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-ui:   180ms;
  --dur-slow: 250ms;
  --dur-reveal: 600ms;

  /* ---- Layout ---- */
  --container-xl: 1280px;
  --container-lg: 1120px;
  --container-md: 880px;
  --container-sm: 640px;
  --container-prose: 68ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip: 300;

  /* ---- Component sizing ---- */
  --header-height: 88px;
  --header-height-scrolled: 72px;
  --tap-min: 44px; /* comfortable target; WCAG 2.2 AA min is 24px */
}

/* ==========================================================================
   2. MODERN RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

:target {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* ==========================================================================
   3. BASE ELEMENTS
   ========================================================================== */
body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink-700);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Safety net against stray horizontal overflow, applied to the content
   siblings — NOT to <body>/<html>. Putting an overflow guard on an ancestor
   of the sticky header turns that ancestor into a scroll container in some
   engines (notably iOS Safari), which silently disables `position: sticky`
   on the header. Scoping the clip here keeps the header's ancestor chain
   overflow-visible so it stays sticky on every browser. `clip` (not `hidden`)
   avoids forcing overflow-y:auto. */
main,
.site-footer {
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--color-ink-900);
  letter-spacing: -0.01em;
}

h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-ink-900);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); }

p { max-width: var(--container-prose); }

a {
  color: var(--color-blue-700);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  transition: color var(--dur-ui) var(--ease-out-soft);
}

a:hover {
  color: var(--color-blue-800);
}

::selection {
  background-color: var(--color-blue-100);
  color: var(--color-ink-900);
}

/* Global focus-visible ring — never removed */
:focus-visible {
  outline: 2px solid transparent; /* fallback for forced-colors */
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-line-200);
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */
.u-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-container--lg { max-width: var(--container-lg); }
.u-container--md { max-width: var(--container-md); }
.u-container--sm { max-width: var(--container-sm); }

/* Screen-reader-only, per docs/accessibility.md §9 */
.u-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;
}

.u-no-scroll {
  overflow: hidden;
}

/* Inline SVG icon sizing helper */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out-soft),
              border-color var(--dur-ui) var(--ease-out-soft),
              color var(--dur-ui) var(--ease-out-soft),
              transform var(--dur-ui) var(--ease-out-soft),
              box-shadow var(--dur-ui) var(--ease-out-soft);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Primary — blue, white text */
.button--primary {
  background-color: var(--color-blue-700);
  color: var(--color-white);
}
.button--primary:hover {
  background-color: var(--color-blue-800);
  color: var(--color-white);
}

/* Secondary / accent — gold with dark ink text */
.button--secondary {
  background-color: var(--color-gold-500);
  color: var(--color-ink-900);
}
.button--secondary:hover {
  background-color: var(--color-gold-600);
  color: var(--color-ink-900);
}

/* Outline — blue border + blue text */
.button--outline {
  background-color: transparent;
  border-color: var(--color-blue-700);
  color: var(--color-blue-700);
}
.button--outline:hover {
  background-color: var(--color-blue-50);
  color: var(--color-blue-800);
}

/* Ghost — low emphasis */
.button--ghost {
  background-color: transparent;
  color: var(--color-blue-700);
  padding-inline: var(--space-3);
}
.button--ghost:hover {
  background-color: var(--color-blue-50);
}

/* On-dark — white on blue/photo backgrounds */
.button--on-dark {
  background-color: var(--color-white);
  color: var(--color-blue-900);
}
.button--on-dark:hover {
  background-color: var(--color-blue-50);
  color: var(--color-blue-900);
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   6. SKIP LINK
   ========================================================================== */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-blue-700);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-ui) var(--ease-out-soft);
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--color-white);
}

/* ==========================================================================
   7. HEADER + NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-slow) var(--ease-out-soft),
              border-color var(--dur-slow) var(--ease-out-soft);
}

/* The header's background + frosted-glass blur live on this ::before layer,
   NOT on .site-header itself. A backdrop-filter (like filter/transform) on the
   header would make it the containing block for the position:fixed mobile-nav
   panel nested inside it — so once .is-scrolled adds the blur, the panel would
   collapse to the header's height and page content would show through. A
   pseudo-element is not an ancestor of the panel, so the effect is preserved
   without that trap. Keeping backdrop-filter off the sticky element also
   avoids header flicker/disappearance seen on some mobile browsers. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-canvas);
  transition: background-color var(--dur-slow) var(--ease-out-soft);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-line-200);
}

.site-header.is-scrolled::before {
  background-color: rgba(253, 251, 247, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-height);
  transition: min-height var(--dur-slow) var(--ease-out-soft);
}

.site-header.is-scrolled .site-header__inner {
  min-height: var(--header-height-scrolled);
}

/* Brand / logo (real Goodday Care logo image) */
.site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-brand__logo {
  display: block;
  height: 120px;
  width: auto;
  transition: height var(--dur-slow) var(--ease-out-soft);
}
.site-header.is-scrolled .site-brand__logo { height: 56px; }

/* Primary navigation (desktop) */
.primary-nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: var(--tap-min);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-ink-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur-ui) var(--ease-out-soft),
              background-color var(--dur-ui) var(--ease-out-soft);
}
.nav__link:hover {
  color: var(--color-blue-700);
  background-color: var(--color-blue-50);
}
.nav__link[aria-current="page"] {
  color: var(--color-blue-700);
  font-weight: var(--fw-semibold);
}

/* Header actions (phone + enquiry CTA) */
.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--color-blue-700);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__phone:hover { color: var(--color-blue-800); }

/* Services dropdown */
.has-dropdown {
  position: relative;
}
.nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 18rem;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
}
.has-dropdown[data-open="true"] .nav__dropdown {
  display: block;
}
.nav__dropdown-link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink-700);
  text-decoration: none;
  font-size: var(--fs-small);
}
.nav__dropdown-link:hover {
  background-color: var(--color-blue-50);
  color: var(--color-blue-700);
}
.nav__caret {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-ui) var(--ease-out-soft);
}
.has-dropdown[data-open="true"] .nav__caret {
  transform: rotate(180deg);
}

/* Mobile nav toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  color: var(--color-ink-900);
  border-radius: var(--radius-sm);
}
.nav-toggle:hover { background-color: var(--color-blue-50); }
.nav-toggle__icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close { display: block; }

/* Mobile nav panel.
   The top offset tracks the header's *actual* current height (set as
   --header-h by main.js on open/resize), because the real header can be
   taller than --header-height when the full-size logo is showing and
   shorter once condensed on scroll. Falls back to the token if JS hasn't
   run yet. This keeps the first menu item flush below the header instead
   of hidden behind it. */
.mobile-nav {
  position: fixed;
  top: var(--header-h, var(--header-height));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-nav-panel);
  padding: var(--space-6) var(--gutter) var(--space-12);
  background-color: var(--color-canvas);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out-soft),
              visibility 0s linear var(--dur-slow);
}
.mobile-nav[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out-soft);
  margin-top: -1px;
}
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mobile-nav__link {
  display: block;
  padding: var(--space-4) var(--space-3);
  min-height: var(--tap-min);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink-900);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--color-line-200);
}
.mobile-nav__link:hover { background-color: var(--color-blue-50); }
.mobile-nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.mobile-nav__actions .button { width: 100%; }

/* Tablet (≥ 768px): keep the hamburger, but surface the enquiry CTA.
   The full horizontal nav needs more room than a tablet bar allows, so it
   stays in the mobile panel until desktop — avoids header overflow. */
@media (min-width: 768px) {
  .site-header__actions { display: flex; }
  .site-header__phone { display: none; } /* returns at desktop */
}

/* Desktop (≥ 1200px): full horizontal nav + phone; hide hamburger/panel.
   Set at 1200px (not 1024) so the brand + 6 links + phone + CTA never
   overflow — e.g. iPad Pro portrait (1024px) keeps the compact layout. */
@media (min-width: 1200px) {
  .primary-nav { display: block; }
  .site-header__phone { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-blue-900);
  color: var(--color-blue-100);
  padding-block: var(--space-20) var(--space-8);
  margin-top: var(--section-gap);
}

.site-footer a {
  color: var(--color-blue-100);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

/* Buttons inside the footer keep their own token colours (the generic
   footer-link rule above is more specific, so restore them explicitly). */
.site-footer a.button--on-dark,
.site-footer a.button--on-dark:hover {
  color: var(--color-blue-900);
  text-decoration: none;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-300);
  margin-bottom: var(--space-4);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col__list a {
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
}

.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

/* Footer logo on a white plate (logo art is dark; footer is navy) */
.footer-logo {
  display: inline-block;
  margin-bottom: var(--space-5);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
}
.footer-logo img { display: block; height: 120px; width: auto; }

/* Legal block (client-specified format) */
.footer-legal {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-blue-100);
}
.footer-legal strong { color: var(--color-white); font-weight: var(--fw-semibold); }

.footer-contact__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer-contact__item .icon { color: var(--color-blue-300); }

.footer-social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-round);
}
.footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.10);
  text-decoration: none;
}

.footer-acknowledgement {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-caption);
  color: var(--color-blue-100);
  max-width: var(--container-md);
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--color-blue-300);
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--space-12);
  }
}

/* ==========================================================================
   8b. PAGE COMPONENTS (Home increment)
   Sections, media placeholders, hero, trust bar, icon wells, service cards,
   feature grid, process, testimonial, split panels, CTA band.
   ========================================================================== */

/* ---- Section shell ---- */
.section { padding-block: var(--section-gap); }
.section--tinted { background-color: var(--color-blue-50); }
.section--white  { background-color: var(--color-white); }

.section__header {
  max-width: 46rem;
  margin-bottom: var(--space-12);
}
.section__header--center {
  margin-inline: auto;
  text-align: center;
}
.section__title { font-size: var(--fs-h2); }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-700);
  margin-bottom: var(--space-3);
}
.lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-700);
  margin-top: var(--space-4);
}
.section__header--center .lead { margin-inline: auto; }

/* ---- Media placeholder (until real photography is supplied) ---- */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-blue-800);
  background: linear-gradient(135deg, var(--color-blue-100), var(--color-gold-100));
  border-radius: var(--radius-lg);
}
.media-placeholder .icon { width: 2.5rem; height: 2.5rem; opacity: 0.75; }
.media-placeholder__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  opacity: 0.8;
}

/* ---- Icon well ---- */
.icon-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-round);
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}
.icon-well .icon { width: 1.75rem; height: 1.75rem; }
.icon-well--gold { background-color: var(--color-gold-100); color: var(--color-gold-700); }

/* ---- Chip (trust marker) ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-blue-700);
}
.chip .icon { color: var(--color-blue-600); }

/* ---- Hero ---- */
.hero { padding-block: var(--space-12) var(--section-gap); }
.hero__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
.hero__title { font-size: var(--fs-display); }
.hero__lead { max-width: 40ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero__media .media-placeholder { aspect-ratio: 5 / 6; }
.hero__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Generic framed content image (split panels, teasers) */
.media-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
}

/* ---- Trust bar ---- */
.trust-bar {
  background-color: var(--color-white);
  border-block: 1px solid var(--color-line-200);
}
.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
}
.trust-bar__item { display: flex; align-items: center; gap: var(--space-3); }
.trust-bar__item .icon { color: var(--color-blue-600); flex: none; }
.trust-bar__label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-ink-900);
}
@media (min-width: 768px) {
  .trust-bar__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Card grid ---- */
.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ---- Service card (whole card is a link via ::after overlay) ---- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background-color: var(--color-white);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-ui) var(--ease-out-soft),
              box-shadow var(--dur-ui) var(--ease-out-soft);
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.service-card:focus-within { box-shadow: var(--shadow-md); }
.service-card__title { margin-bottom: var(--space-2); }
.service-card__title a { color: var(--color-ink-900); text-decoration: none; }
.service-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.service-card__title a:hover { color: var(--color-blue-700); }
.service-card__text { font-size: var(--fs-small); color: var(--color-ink-700); }
.service-card__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-slate-500);
}
.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  color: var(--color-blue-700);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}
.service-card__more .icon { transition: transform var(--dur-ui) var(--ease-out-soft); }
.service-card:hover .service-card__more .icon { transform: translateX(3px); }

/* ---- Feature grid (why us) ---- */
.feature-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.feature__title { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.feature__text { font-size: var(--fs-small); color: var(--color-ink-700); }

/* ---- Process / timeline ---- */
.process__list {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  counter-reset: step;
}
.process__step { counter-increment: step; }
.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-round);
  background-color: var(--color-blue-700);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
}
.process__num::before { content: counter(step); }
.process__title { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.process__text { font-size: var(--fs-small); color: var(--color-ink-700); }
@media (min-width: 768px) {
  .process__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

/* ---- Testimonial ---- */
.testimonial { max-width: 48rem; margin-inline: auto; text-align: center; }
.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--space-5);
  color: var(--color-gold-500);
}
.testimonial__stars .icon { fill: currentColor; width: 1.25rem; height: 1.25rem; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--color-ink-900);
}
.testimonial__cite {
  display: block;
  margin-top: var(--space-6);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--color-slate-500);
}
.placeholder-note {
  display: inline-block;
  margin-top: var(--space-5);
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--color-slate-300);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  color: var(--color-slate-500);
}

/* ---- Split panel (teasers) ---- */
.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--reverse .split__media { order: 2; }
}

/* ---- CTA band ---- */
.cta-section { padding-block: var(--section-gap); }
.cta-band {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  background-color: var(--color-blue-700);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  text-align: center;
}
.cta-band__title { color: var(--color-white); font-size: var(--fs-h2); }
.cta-band__text {
  max-width: 44ch;
  margin-inline: auto;
  margin-top: var(--space-4);
  color: var(--color-blue-100);
  font-size: var(--fs-lead);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

/* Outline button variant for dark backgrounds (CTA band). */
.button--outline-dark {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}
.button--outline-dark:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

/* Generic content stack spacing */
.stack > * + * { margin-top: var(--space-4); }

/* ==========================================================================
   8c. SUB-PAGE COMPONENTS (breadcrumb, page hero, forms, notices, contact)
   ========================================================================== */

/* ---- Breadcrumb ---- */
.breadcrumb { padding-block: var(--space-5) 0; }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-slate-500);
}
.breadcrumb__list li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb a { color: var(--color-slate-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-blue-700); text-decoration: underline; }
.breadcrumb__sep { color: var(--color-slate-300); }
.breadcrumb [aria-current="page"] { color: var(--color-ink-700); font-weight: var(--fw-semibold); }

/* ---- Page hero (sub-pages) ---- */
.page-hero { padding-block: var(--space-8) var(--space-12); }
.page-hero__title { font-size: var(--fs-h1); }
.page-hero__lead { max-width: 60ch; }

/* ---- Contact layout ---- */
.contact-layout { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 1.3fr 0.7fr; gap: var(--space-16); }
}

/* ---- Forms ---- */
.form { max-width: 40rem; }
.field { margin-bottom: var(--space-6); }
.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-ink-900);
}
.field__req { font-weight: var(--fw-regular); color: var(--color-slate-500); }

.field__control {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body);
  color: var(--color-ink-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur-ui) var(--ease-out-soft),
              box-shadow var(--dur-ui) var(--ease-out-soft);
}
.field__control::placeholder { color: var(--color-slate-500); }
.field__control:focus,
.field__control:focus-visible {
  outline: none;
  border-color: var(--color-blue-600);
  box-shadow: var(--shadow-focus);
}
textarea.field__control { min-height: 8rem; resize: vertical; line-height: 1.5; }

select.field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2317439a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1.1rem;
}

.field__hint {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-slate-500);
}
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-error);
}
.field__error .icon { width: 1rem; height: 1rem; flex: none; }
.field.is-invalid .field__error { display: flex; }
.field.is-invalid .field__control { border-color: var(--color-error); }
.field.is-invalid .field__control:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.28); }

/* Checkbox (consent) */
.checkbox-field { display: flex; align-items: flex-start; gap: var(--space-3); }
.checkbox-field input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--color-blue-700);
}
.checkbox-field label { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--color-ink-700); }

/* Honeypot — hidden from everyone; real users never fill it */
.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions { margin-top: var(--space-8); }
.form__actions .button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Form status banners (success / error live regions) */
.form-status {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.form-status[hidden] { display: none; }
.form-status--success {
  background-color: rgba(46, 125, 91, 0.10);
  border: 1px solid rgba(46, 125, 91, 0.35);
  color: var(--color-success);
}
.form-status--error {
  background-color: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.35);
  color: var(--color-error);
}

/* ---- Notice / callout (e.g. emergency) ---- */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-gold-100);
  border: 1px solid var(--color-gold-300);
  color: var(--color-ink-900);
  font-size: var(--fs-small);
}
.notice .icon { color: var(--color-gold-700); flex: none; }
.notice strong { display: block; }

/* ---- Contact aside ---- */
.contact-card {
  padding: var(--space-8);
  background-color: var(--color-white);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.contact-detail { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail .icon { color: var(--color-blue-600); flex: none; margin-top: 2px; }
.contact-detail__label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--color-ink-900);
  margin-bottom: 2px;
}
.contact-detail__value { font-size: var(--fs-small); color: var(--color-ink-700); }
.contact-detail__value a { font-size: var(--fs-small); }

/* ==========================================================================
   8d. SERVICE-PAGE COMPONENTS (prose, panel, checklist, FAQ, related)
   ========================================================================== */

/* ---- Prose (long-form body) ---- */
.prose { max-width: var(--container-prose); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); font-size: var(--fs-h3); }
.prose h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-10); }
.prose h3 + * { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }

/* ---- Panel (highlighted block, e.g. "who it's for") ---- */
.panel {
  padding: var(--space-8);
  background-color: var(--color-blue-50);
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-lg);
}
.panel--gold { background-color: var(--color-gold-100); border-color: var(--color-gold-300); }
.panel__title { font-size: var(--fs-h4); margin-bottom: var(--space-4); }

/* ---- Checklist ("what's included") ---- */
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); }
.checklist .icon { color: var(--color-blue-600); flex: none; margin-top: 1px; }
@media (min-width: 640px) {
  .checklist { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-8); }
}

/* ---- Two-column content (text + aside) ---- */
.content-split { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 900px) {
  .content-split { grid-template-columns: 1.4fr 0.6fr; gap: var(--space-16); }
}

/* ---- FAQ (native details/summary) ---- */
.faq { max-width: var(--container-md); }
.faq__item { border-bottom: 1px solid var(--color-line-200); }
.faq__item:first-child { border-top: 1px solid var(--color-line-200); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-900);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-blue-700); }
.faq__icon { color: var(--color-blue-600); flex: none; transition: transform var(--dur-ui) var(--ease-out-soft); }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--space-5); }
.faq__a p { max-width: none; color: var(--color-ink-700); }

/* ==========================================================================
   9. REVEAL-ON-SCROLL (progressive enhancement)
   Content is visible by default; JS adds [data-reveal] behaviour only when
   IntersectionObserver + motion are available.
   ========================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out-soft),
              transform var(--dur-reveal) var(--ease-out-soft);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}