/* ==========================================================================
   Primrose Conditioning, Heating and Plumbing — styles.css
   Single stylesheet. No build step, no external fonts, no frameworks.

   CONTENTS
   01. Design tokens (colors, type, spacing — edit these to restyle the site)
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Buttons
   06. Header & navigation
   07. Mobile action bar
   08. Hero
   09. Services (editorial rows)
   10. Trust band
   11. About
   12. Gallery ("Our Work")
   13. Reviews
   14. Service area
   15. Final CTA
   16. Forms
   17. Footer
   18. Interior page headers
   19. Motion & reveal
   20. Utilities & print
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Brand palette --- */
  --navy-900: #0a1727;
  --navy-800: #0f2135;
  --navy-700: #16314c;
  --navy-600: #1e4266;

  --ink: #14181e;
  --charcoal: #333942;
  --charcoal-soft: #565d69;

  --warm-white: #fcfaf7;
  --off-white: #f2ede6;
  --line: #e3dbcf;
  --line-soft: #ede7de;

  --blue: #4c7ba4;
  --blue-deep: #2f5a78;
  --blue-light: #a8c6e0;
  --blue-dim: rgba(168, 198, 224, 0.72);

  --white: #ffffff;

  /* --- Surfaces --- */
  --bg: var(--warm-white);
  --bg-alt: var(--off-white);
  --bg-dark: var(--navy-800);
  --bg-darkest: var(--navy-900);

  /* --- Type --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    "Inter", Roboto, Arial, "Noto Sans", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.625rem, 5.8vw, 4.5rem);
  --fs-h1: clamp(2.35rem, 5.6vw, 4.25rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.35rem);
  --fs-h3: clamp(1.4rem, 2.6vw, 2rem);
  --fs-h4: clamp(1.12rem, 1.7vw, 1.3rem);
  --fs-lead: clamp(1.06rem, 1.4vw, 1.24rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.68;

  --ls-display: -0.035em;
  --ls-head: -0.022em;
  --ls-eyebrow: 0.18em;

  /* --- Spacing --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 3.5rem;
  --s-9: 4.5rem;
  --s-10: 6rem;
  --s-11: 8rem;

  --section-y: clamp(4rem, 9vw, 8rem);
  --section-y-lg: clamp(5rem, 12vw, 10rem);

  /* --- Widths --- */
  --w-max: 1280px;
  --w-wide: 1480px;
  --w-narrow: 720px;
  --w-mid: 940px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  /* --- Radius (kept small & architectural on purpose) --- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.28s var(--ease);
  --t-slow: 0.6s var(--ease);

  /* --- Elevation (used sparingly) --- */
  --shadow-sm: 0 1px 2px rgba(10, 23, 39, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(10, 23, 39, 0.22);
  --shadow-lg: 0 28px 60px -24px rgba(10, 23, 39, 0.32);

  /* --- Chrome --- */
  --header-h: 76px;
  --mobilebar-h: 64px;
  --z-header: 100;
  --z-menu: 110;
  --z-bar: 90;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Keeps the sticky mobile action bar from covering the end of the page. */
@media (max-width: 899px) {
  body { padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px)); }
  /* Keep focused elements clear of the fixed bottom action bar. */
  html { scroll-padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}

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

/* <picture> is only a wrapper for the format/size candidates. display:contents
   removes its box entirely so the <img> inherits the parent's layout directly,
   and every rule written against `img` keeps working unchanged. */
picture { display: contents; }
img { height: auto; background-color: var(--navy-800); }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--blue-deep); text-decoration: none; }

/* A link sitting inside running text must be recognisable without colour
   vision. Buttons and nav links carry their own affordances; prose links
   get an underline. (WCAG 1.4.1; axe: link-in-text-block.) */
p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--navy-700); }

button { font: inherit; color: inherit; cursor: pointer; }

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

::selection { background: var(--navy-700); color: var(--warm-white); }

/* Focus: visible, consistent, never removed. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible,
.section--dark :focus-visible { outline-color: var(--blue-light); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: 0.85rem 1.35rem;
  background: var(--navy-900);
  color: var(--warm-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-xs);
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: var(--s-4);
  color: var(--warm-white);
}

.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;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 600;
}
.h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: var(--ls-display); }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; }
.h4 { font-size: var(--fs-h4); line-height: 1.35; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--s-5);
  color: var(--blue-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }
.on-dark .eyebrow { color: var(--blue-light); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--charcoal);
}
.on-dark .lead { color: rgba(252, 250, 247, 0.82); }

p + p { margin-top: var(--s-4); }

.measure { max-width: 62ch; }
.measure-narrow { max-width: 52ch; }

.on-dark { color: rgba(252, 250, 247, 0.8); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--warm-white); }
.on-dark a { color: var(--blue-light); }
.on-dark a:hover { color: var(--white); }

/* Editorial index numeral used to mark sections/rows */
.index-num {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  font-weight: 400;
  color: var(--blue);
  opacity: 0.42;
  font-variant-numeric: lining-nums;
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--w-wide); }
.container--narrow { max-width: var(--w-narrow); }
.container--mid { max-width: var(--w-mid); }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); }
.section--darkest { background: var(--bg-darkest); }
.section--flush-top { padding-top: 0; }

.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head--split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.rule { height: 1px; background: var(--line); border: 0; }
.on-dark .rule { background: rgba(168, 198, 224, 0.22); }

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t),
    box-shadow var(--t);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--warm-white);
}
.btn--primary:hover {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--accent {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
}
.btn--accent:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--navy-800);
  background: var(--navy-800);
  color: var(--warm-white);
}

/* On dark backgrounds */
.btn--light {
  background: var(--warm-white);
  border-color: var(--warm-white);
  color: var(--navy-900);
}
.btn--light:hover {
  background: var(--blue-light);
  border-color: var(--blue-light);
  color: var(--navy-900);
}

.btn--ghost-light {
  background: transparent;
  border-color: rgba(252, 250, 247, 0.38);
  color: var(--warm-white);
}
.btn--ghost-light:hover {
  background: rgba(252, 250, 247, 0.1);
  border-color: var(--warm-white);
  color: var(--white);
}

.btn--block { width: 100%; }

/* `.on-dark a` (0,1,1) outranks the button variants (0,1,0), which would paint
   the CTA-band buttons in link colour. Restore each variant's own foreground.
   `.on-dark a` itself must stay — .cta-band__meta's mailto link depends on it. */
.on-dark a.btn--light,
.on-dark a.btn--light:hover { color: var(--navy-900); }
.on-dark a.btn--ghost-light { color: var(--warm-white); }
.on-dark a.btn--ghost-light:hover { color: var(--white); }
.on-dark a.btn--primary { color: var(--warm-white); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
@media (max-width: 419px) {
  .btn-row .btn { width: 100%; }
}

/* Text link with animated underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blue-deep);
  padding-block: 0.35rem;
}
.link-arrow svg {
  width: 16px; height: 16px;
  transition: transform var(--t);
}
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t);
  padding-bottom: 2px;
}
.link-arrow:hover span { background-size: 100% 1px; }
.on-dark .link-arrow { color: var(--blue-light); }

/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--warm-white);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
/* Homepage: header floats over the hero until the user scrolls. */
.header--overlay {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
}
.header--overlay .brand__name,
.header--overlay .nav__link,
.header--overlay .header__tel { color: var(--warm-white); }
.header--overlay .burger__line { background: var(--warm-white); }
.header--overlay .btn--primary {
  background: var(--warm-white);
  border-color: var(--warm-white);
  color: var(--navy-900);
}
.header--overlay .btn--primary:hover { background: var(--blue-light); border-color: var(--blue-light); }

.header.is-scrolled {
  background: rgba(252, 250, 247, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(10, 23, 39, 0.04);
}
.header.is-scrolled .brand__name,
.header.is-scrolled .nav__link,
.header.is-scrolled .header__tel { color: var(--ink); }
.header.is-scrolled .burger__line { background: var(--ink); }
.header.is-scrolled .btn--primary {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--warm-white);
}
.header.is-scrolled .btn--primary:hover { background: var(--navy-600); border-color: var(--navy-600); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* --- Brand --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  color: var(--ink);
}
/* Their own Fire / Water / Earth / Air mark — the four things C.H.P. covers.
   Colours are fixed rather than inherited, so it reads the same on the warm
   header, on the navy hero overlay and in the footer. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
}
.brand__glyph { width: 38px; height: 40px; display: block; }
.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  color: var(--ink);
  transition: color var(--t);
}
.brand__name b {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand__name span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.62;
  white-space: nowrap;
}

/* --- Desktop nav --- */
.nav { display: none; }
@media (min-width: 1040px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline: auto;
  }
}
/* Replaces an inline style="display:contents" — inline styles are blocked by
   the Content-Security-Policy in _headers once the site is deployed. */
.nav > ul { display: contents; }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-xs);
  color: var(--ink);
  font-size: 0.925rem;
  font-weight: 500;
  transition: color var(--t), background-color var(--t), opacity var(--t);
}
.nav__link:hover { opacity: 0.66; }
.nav__link[aria-current="page"] { font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem;
  bottom: 0.3rem;
  height: 1.5px;
  background: var(--blue);
  border-radius: 2px;
}
.nav__caret {
  width: 11px; height: 11px;
  opacity: 0.55;
  transition: transform var(--t);
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); }

/* Dropdown — opens on hover AND focus-within, so it is keyboard accessible
   with no JavaScript at all. */
.nav__menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 268px;
  padding: 0.5rem;
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item.is-open > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-xs);
  color: var(--ink);
  font-size: 0.925rem;
  font-weight: 500;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__menu a small {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--charcoal-soft);
  margin-top: 2px;
}
.nav__menu a:hover { background: var(--off-white); color: var(--navy-800); }
.nav__menu a[aria-current="page"] { font-weight: 600; color: var(--navy-800); }

/* --- Header actions --- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
}
.header__tel {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color var(--t), opacity var(--t);
}
.header__tel:hover { opacity: 0.68; }
.header__tel svg { width: 16px; height: 16px; opacity: 0.75; }
@media (min-width: 700px) { .header__tel { display: inline-flex; } }

.header__cta { display: none; }
@media (min-width: 900px) {
  .header__cta {
    display: inline-flex;
    min-height: 44px;
    padding: 0.65rem 1.3rem;
    font-size: 0.9rem;
  }
}

/* --- Burger --- */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: none;
  border: 0;
  border-radius: var(--r-xs);
}
@media (min-width: 1040px) { .burger { display: none; } }
.burger__line {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t), background-color var(--t);
}
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Mobile menu panel --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--navy-900);
  color: var(--warm-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid rgba(168, 198, 224, 0.18);
}
.mobile-menu__top .brand__name,
.mobile-menu__top .brand { color: var(--warm-white); }
.mobile-menu__close {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid rgba(168, 198, 224, 0.3);
  border-radius: var(--r-xs);
  color: var(--warm-white);
}
.mobile-menu__close svg { width: 20px; height: 20px; }
.mobile-menu__close:hover { background: rgba(168, 198, 224, 0.12); }

.mobile-menu__body {
  flex: 1;
  padding: var(--s-6) var(--gutter) var(--s-8);
}
.mobile-menu__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-light);
  margin: var(--s-6) 0 var(--s-3);
}
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(168, 198, 224, 0.16);
  color: var(--warm-white);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color var(--t), padding-left var(--t);
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible { color: var(--blue-light); padding-left: 6px; }
.mobile-nav__link[aria-current="page"] { color: var(--blue-light); }
.mobile-nav__link svg { width: 15px; height: 15px; opacity: 0.5; flex: none; }

.mobile-menu__foot {
  padding: var(--s-6) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(168, 198, 224, 0.18);
  background: rgba(0, 0, 0, 0.18);
  display: grid;
  gap: var(--s-3);
}
.mobile-menu__meta {
  font-size: var(--fs-sm);
  color: rgba(252, 250, 247, 0.62);
  margin-top: var(--s-2);
}

/* ==========================================================================
   07. MOBILE ACTION BAR (sticky bottom)
   ========================================================================== */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--navy-900);
  border-top: 1px solid rgba(168, 198, 224, 0.2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 900px) { .mobile-bar { display: none; } }
.mobile-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--mobilebar-h);
  color: var(--warm-white);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--t-fast);
}
.mobile-bar__btn svg { width: 17px; height: 17px; }
.mobile-bar__btn:hover { color: var(--warm-white); }
.mobile-bar__btn + .mobile-bar__btn { border-left: 1px solid rgba(168, 198, 224, 0.2); }
.mobile-bar__btn--accent { background: var(--blue-deep); }
.mobile-bar__btn--accent:active { background: var(--navy-600); }
.mobile-bar__btn--call:active { background: var(--navy-700); }

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(620px, 92vh, 900px);
  background: var(--navy-900);
  color: var(--warm-white);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two-layer scrim: a left-weighted wash for text contrast + a bottom fade. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10, 23, 39, 0.92) 0%, rgba(10, 23, 39, 0.72) 42%, rgba(10, 23, 39, 0.38) 100%),
    linear-gradient(to top, rgba(10, 23, 39, 0.9) 0%, rgba(10, 23, 39, 0.1) 46%);
}
.hero__inner {
  position: relative;
  width: 100%;
  padding-top: calc(var(--header-h) + var(--s-9));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero__title {
  font-size: var(--fs-display);
  line-height: 0.99;
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--warm-white);
  max-width: 16ch;
  text-wrap: balance;
}
.hero__sub {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(252, 250, 247, 0.84);
}
.hero__actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: rgba(252, 250, 247, 0.7);
}
.hero__note svg { width: 15px; height: 15px; flex: none; opacity: 0.8; margin-top: 0.32em; }

/* Hero footer strip — quick credibility facts */
.hero__strip {
  position: relative;
  border-top: 1px solid rgba(168, 198, 224, 0.22);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-5);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 800px) {
  .hero__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
}
.hero__fact b {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--warm-white);
  letter-spacing: -0.01em;
}
.hero__fact span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: rgba(252, 250, 247, 0.62);
  letter-spacing: 0.02em;
}

@media (max-width: 639px) {
  .hero { min-height: 600px; height: auto; }
  .hero__inner { padding-top: calc(var(--header-h) + var(--s-8)); }
}

/* ==========================================================================
   09. SERVICES — editorial alternating rows
   ========================================================================== */
.svc-row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--line);
}
.svc-row:first-of-type { border-top: 0; }
@media (min-width: 900px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  /* Alternate image side on even rows */
  .svc-row:nth-child(even) .svc-row__media { order: 2; }
}
.svc-row__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--navy-800);
}
.svc-row__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.svc-row:hover .svc-row__media img { transform: scale(1.035); }

.svc-row__body { max-width: 46ch; }
.svc-row__num {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--blue-deep);
}
.svc-row__title { margin-bottom: var(--s-4); }
.svc-row__text { color: var(--charcoal-soft); }
.svc-row__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--s-5) 0;
}
.svc-row__list li {
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--charcoal-soft);
  background: var(--warm-white);
}

/* ==========================================================================
   10. TRUST BAND
   ========================================================================== */
.trust-grid {
  display: grid;
  gap: 1px;
  background: rgba(168, 198, 224, 0.2);
  border: 1px solid rgba(168, 198, 224, 0.2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
@media (min-width: 640px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  /* Five items in a 2-up grid would leave a bordered empty sixth cell. */
  .trust-item:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1060px) {
  .trust-grid { grid-template-columns: repeat(5, 1fr); }
  .trust-item:last-child { grid-column: auto; }
}
.trust-item {
  background: var(--navy-800);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  transition: background-color var(--t);
}
.trust-item:hover { background: var(--navy-700); }
.trust-item__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--blue-light);
  opacity: 0.75;
  margin-bottom: var(--s-4);
}
.trust-item h3 {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--warm-white);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: var(--s-2);
}
.trust-item p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(252, 250, 247, 0.66);
}

/* ==========================================================================
   11. ABOUT
   ========================================================================== */
.about-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.about-media {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
}
.about-media figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--navy-800);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media figure:first-child { grid-column: 1 / -1; }
.about-media figure:first-child img { aspect-ratio: 16 / 10; }
.about-media figure:not(:first-child) img { aspect-ratio: 1 / 1; }

.stat-row {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.stat b {
  display: block;
  overflow-wrap: anywhere;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.stat span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--charcoal-soft);
}

/* ==========================================================================
   12. GALLERY — "Our Work"
   ========================================================================== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s-7);
}
.filter-btn {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--charcoal-soft);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.filter-btn:hover { border-color: var(--navy-600); color: var(--navy-800); }
.filter-btn[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--warm-white);
}

.gallery {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--navy-800);
  margin: 0;
}
/* Editorial rhythm — a couple of tiles are deliberately larger. */
@media (min-width: 720px) {
  .gallery__item--tall { grid-row: span 2; }
  .gallery__item--wide { grid-column: span 2; }
}
.gallery__item img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform var(--t-slow), opacity var(--t);
}
.gallery__item--tall img { aspect-ratio: 3 / 4; }
.gallery__item--wide img { aspect-ratio: 16 / 9; }
.gallery__item:hover img { transform: scale(1.04); }

.gallery__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgba(10, 23, 39, 0.86), rgba(10, 23, 39, 0));
  color: var(--warm-white);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gallery__item.is-hidden { display: none; }

/* Three-up photo strip on the service pages */
.work-strip {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .work-strip { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.work-strip .gallery__item img { aspect-ratio: 4 / 3; }

.gallery-note {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--warm-white);
  font-size: var(--fs-sm);
  color: var(--charcoal-soft);
}
.gallery-note strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   13. REVIEWS
   ========================================================================== */
.reviews {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.review {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.review__mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--blue);
  opacity: 0.34;
  margin-bottom: var(--s-4);
}
.review__body {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--charcoal-soft);
  font-style: italic;
}
.review__foot {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.review__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.review__badge svg { width: 14px; height: 14px; }

/* --- FAQ --- */
.faq {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 840px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq__item { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.faq__q {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.faq__a { font-size: var(--fs-sm); line-height: 1.7; color: var(--charcoal-soft); max-width: 48ch; }

/* ==========================================================================
   14. SERVICE AREA
   ========================================================================== */
.area-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) { .area-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.area-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.area-card__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: var(--s-4);
}
.area-primary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.area-primary b {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.area-primary span { font-size: var(--fs-sm); color: var(--charcoal-soft); }

.area-list { display: grid; gap: 0.5rem; }
.area-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--fs-body);
  color: var(--charcoal);
}
.area-list svg { width: 15px; height: 15px; color: var(--blue); flex: none; }

/* Visitor-facing explanatory note (e.g. how the request form works). */
.note-card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  border-radius: var(--r-sm);
  background: var(--warm-white);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--charcoal-soft);
}
.note-card strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: var(--s-2); }

/* Editable slot — marked for the owner, styled so it never looks broken. */
.editable-slot {
  padding: var(--s-5);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--off-white);
  font-size: var(--fs-sm);
  color: var(--charcoal-soft);
}
.editable-slot strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: var(--s-2); }
.editable-slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--warm-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xs);
  padding: 0.1em 0.4em;
}

/* ==========================================================================
   15. FINAL CTA
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--navy-900);
  color: var(--warm-white);
  overflow: hidden;
}
/* Subtle depth without an image or gradient "swoosh" */
.cta-band::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 60vw; height: 120%;
  background: radial-gradient(ellipse at center, rgba(76, 123, 164, 0.24), transparent 62%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: var(--section-y);
}
@media (min-width: 940px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.cta-band__title {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: var(--ls-display);
  color: var(--warm-white);
  max-width: 16ch;
}
.cta-band__text {
  margin-top: var(--s-5);
  max-width: 48ch;
  font-size: var(--fs-lead);
  color: rgba(252, 250, 247, 0.78);
}
.cta-band__actions { display: grid; gap: var(--s-3); }
@media (min-width: 460px) and (max-width: 939px) {
  .cta-band__actions { grid-template-columns: repeat(2, 1fr); }
}
.cta-band__meta {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: rgba(252, 250, 247, 0.6);
}

/* ==========================================================================
   16. FORMS
   ========================================================================== */
.form-shell {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 980px) {
  .form-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}

.form-card {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}

.field-grid {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 560px) {
  .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.field .req { color: var(--blue-deep); margin-left: 2px; }
.field .hint { font-size: var(--fs-xs); color: var(--charcoal-soft); font-weight: 400; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 140px; resize: vertical; padding-top: 0.9rem; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565d69' stroke-width='2' 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 0.95rem center;
  background-size: 17px;
  padding-right: 2.75rem;
  cursor: pointer;
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--charcoal-soft); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(47, 90, 120, 0.16);
}
/* Keyboard focus keeps a real outline here like everywhere else on the site;
   only the pointer-focus ring is suppressed. */
.input:focus:not(:focus-visible),
.select:focus:not(:focus-visible),
.textarea:focus:not(:focus-visible) { outline: none; }
.input::placeholder, .textarea::placeholder { color: #7d838e; }

/* Validation state — colour is never the only signal; an icon + text message
   is always rendered alongside. */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: #a3341f;
  background: #fdf7f5;
}
.field.has-error .input:focus,
.field.has-error .select:focus,
.field.has-error .textarea:focus { box-shadow: 0 0 0 3px rgba(163, 52, 31, 0.16); }

.field-error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #8f2d1b;
}
.field-error svg { width: 14px; height: 14px; flex: none; }
.field.has-error .field-error { display: flex; }

/* Radio group styled as selectable chips (large tap targets) */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.choice {
  position: relative;
  display: inline-flex;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--charcoal);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.choice input:hover + span { border-color: var(--charcoal-soft); }
.choice input:checked + span {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--warm-white);
}
.field.has-error .choice span { border-color: #a3341f; background: #fdf7f5; }
.choice input:focus-visible + span {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.form-actions {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 560px) { .form-actions { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }

.form-help {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--off-white);
  border-left: 2px solid var(--blue);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--charcoal-soft);
}
.form-help a { font-weight: 600; }

/* Live status region for submit / copy feedback */
.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.form-status.is-shown { display: flex; }
.form-status svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.form-status--ok { background: #eef4ee; border: 1px solid #cbdfcd; color: #2c5732; }
.form-status--warn { background: #fdf6ec; border: 1px solid #ead9bd; color: #6d4c17; }
.form-status--err { background: #fdf1ee; border: 1px solid #eccdc4; color: #8f2d1b; }

/* Contact detail list beside the form */
.contact-list { display: grid; gap: var(--s-2); }
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-row:first-child { border-top: 1px solid var(--line-soft); }
.contact-row__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--blue-deep);
}
.contact-row__icon svg { width: 18px; height: 18px; }
.contact-row__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin-bottom: 3px;
}
.contact-row__value {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
a.contact-row__value:hover { color: var(--blue-deep); }
.contact-row__note { font-size: var(--fs-sm); color: var(--charcoal-soft); margin-top: 2px; }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.footer {
  background: var(--navy-900);
  border-top: 1px solid rgba(168, 198, 224, 0.18);
  color: rgba(252, 250, 247, 0.72);
  padding-top: var(--section-y);
}
.footer__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--s-9);
}
@media (min-width: 800px) { .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer__top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }

.footer .brand__name, .footer .brand { color: var(--warm-white); }

.footer__blurb {
  margin-top: var(--s-5);
  max-width: 38ch;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(252, 250, 247, 0.62);
}
.footer__contact { margin-top: var(--s-6); display: grid; gap: var(--s-2); }
.footer__contact a, .footer__contact span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: rgba(252, 250, 247, 0.82);
}
.footer__contact a:hover { color: var(--blue-light); }
.footer__contact svg { width: 15px; height: 15px; opacity: 0.6; flex: none; }

.footer__title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: var(--s-5);
}
.footer__links { display: grid; gap: 0.15rem; }
.footer__links a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--fs-sm);
  color: rgba(252, 250, 247, 0.72);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer__links a:hover { color: var(--warm-white); padding-left: 4px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid rgba(168, 198, 224, 0.18);
  font-size: var(--fs-xs);
  color: rgba(252, 250, 247, 0.55);
}
.footer__bottom a { color: rgba(252, 250, 247, 0.72); }
.footer__bottom a:hover { color: var(--warm-white); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
@media (max-width: 899px) { .footer__bottom { padding-bottom: var(--s-7); } }

/* ==========================================================================
   18. INTERIOR PAGE HEADERS
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--navy-900);
  color: var(--warm-white);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 23, 39, 0.94) 0%, rgba(10, 23, 39, 0.78) 48%, rgba(10, 23, 39, 0.5) 100%);
}
.page-hero__inner {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.page-hero__title {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--warm-white);
  max-width: 18ch;
}
.page-hero__text {
  margin-top: var(--s-5);
  max-width: 54ch;
  font-size: var(--fs-lead);
  color: rgba(252, 250, 247, 0.8);
}
.page-hero__actions { margin-top: var(--s-7); }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--s-5);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: rgba(252, 250, 247, 0.6);
}
.crumbs a { color: rgba(252, 250, 247, 0.78); }
.crumbs a:hover { color: var(--warm-white); }
.crumbs svg { width: 12px; height: 12px; opacity: 0.5; }

/* Generic content blocks used on interior pages */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .split--media-right .split__media { order: 2; }
}
.split__media {
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--navy-800);
}
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.check-list { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body);
  color: var(--charcoal);
}
.check-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.check-list svg { width: 19px; height: 19px; color: var(--blue-deep); flex: none; margin-top: 2px; }
.check-list b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 1px; }
.check-list span { font-size: var(--fs-sm); color: var(--charcoal-soft); }
.on-dark .check-list li { color: rgba(252, 250, 247, 0.78); border-bottom-color: rgba(168, 198, 224, 0.18); }
.on-dark .check-list svg { color: var(--blue-light); }
.on-dark .check-list b { color: var(--warm-white); }
.on-dark .check-list span { color: rgba(252, 250, 247, 0.6); }

/* Numbered process / info cards */
.card-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.info-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.info-card:hover { border-color: var(--navy-600); box-shadow: var(--shadow-md); }
.info-card__num {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--blue-deep);
  display: block;
  margin-bottom: var(--s-4);
}
.info-card h3 { font-size: 1.1rem; margin-bottom: var(--s-3); letter-spacing: -0.015em; }
.info-card p { font-size: var(--fs-sm); color: var(--charcoal-soft); line-height: 1.65; }

/* Prose block for privacy / long-form copy */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  letter-spacing: -0.02em;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--s-4); color: var(--charcoal); }
.prose ul { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.prose ul li {
  display: flex;
  gap: 0.75rem;
  color: var(--charcoal);
}
.prose ul li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 0.72em;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}
.prose strong { color: var(--ink); font-weight: 600; }

/* 404 */
.error-page {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--header-h));
  padding-block: var(--section-y);
  text-align: center;
  background: var(--navy-900);
  color: var(--warm-white);
}
.error-page__code {
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 16vw, 10rem);
  line-height: 0.9;
  color: var(--blue-light);
  /* 0.55, not lower: at 0.4 the numeral measured 2.58:1 against the dark
     ground — under the 3:1 WCAG floor for large text. 0.55 measures 3.89:1
     and keeps the muted look. Verified arithmetically, not by eye. */
  opacity: 0.55;
  margin-bottom: var(--s-5);
}
.error-page h1 { color: var(--warm-white); font-size: var(--fs-h2); letter-spacing: var(--ls-display); }
.error-page p { margin: var(--s-5) auto 0; max-width: 46ch; color: rgba(252, 250, 247, 0.74); }
.error-page .btn-row { justify-content: center; margin-top: var(--s-7); }
/* The global link colour is tuned for light ground (7.06:1 there) but
   measures only 2.45:1 on this dark page. --blue-light measures 10.15:1. */
.error-page__links a { color: var(--blue-light); }

.error-page__links {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(168, 198, 224, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   19. MOTION & REVEAL
   ========================================================================== */
/* The reveal animates position only, never opacity. Content is therefore always
   painted and always readable: it cannot be left invisible by a missed observer,
   it does not delay Largest Contentful Paint, and a contrast checker never sees a
   half-faded colour blended into the background. */
[data-reveal] {
  transform: translateY(16px);
  transition: transform 0.6s var(--ease);
}
[data-reveal].is-visible { transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }

/* Without JS the sections simply sit in their final position. */
.no-js [data-reveal] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { transform: none !important; }
  .svc-row:hover .svc-row__media img,
  .gallery__item:hover img { transform: none; }
}

/* ==========================================================================
   20. UTILITIES & PRINT
   ========================================================================== */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.text-center { text-align: center; }
.mt-btn { margin-top: 1.25rem; }
.eyebrow--light { color: var(--blue-light); }
.form-status--flush { margin-top: 0; margin-bottom: var(--s-5); }
.fieldset-reset { border: 0; padding: 0; margin: 0; }
.legend-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.55rem;
}
.mx-auto { margin-inline: auto; }

@media print {
  .header, .mobile-bar, .mobile-menu, .skip-link, .hero__media,
  .cta-band, .btn { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* Narrow phones: keep the header (and the menu's copy of it) inside 320px. */
@media (max-width: 420px) {
  .header__inner { gap: 0.75rem; }
  .header .brand, .mobile-menu__top .brand { gap: 0.5rem; }
  .header .brand__name span, .mobile-menu__top .brand__name span { font-size: 0.56rem; letter-spacing: 0.06em; }
}
@media (max-width: 350px) {
  .header .brand__mark, .mobile-menu__top .brand__mark { width: 32px; height: 32px; }
  .header .brand__glyph, .mobile-menu__top .brand__glyph { width: 32px; height: 34px; }
  .header .brand__name b, .mobile-menu__top .brand__name b { font-size: 0.98rem; }
  .header .brand__name span, .mobile-menu__top .brand__name span { font-size: 0.5rem; letter-spacing: 0.02em; }
}