/* =========================================================================
   MaxCare Membership Direct Primary Care
   Stylesheet
   -------------------------------------------------------------------------
   Contents
   1.  Design tokens (custom properties)
   2.  Reset & base
   3.  Layout helpers
   4.  Buttons
   5.  Header / navigation
   6.  Hero
   7.  Section scaffolding
   8.  Mission / About
   9.  Credentials strip
   10. Our Approach (focus cards)
   11. Why MaxCare (feature grid)
   12. Locations
   13. Contact / form
   14. Footer
   15. Responsive breakpoints
   16. Reduced motion
   ========================================================================= */

/* ============================= 1. DESIGN TOKENS ============================= */
:root {
  /* Palette sampled from the MaxCare logo (deep navy/indigo mark) and hero
     image (steel blue frame, teal scrubs) for brand cohesion. */
  --navy:        #1b2749;   /* primary brand dark */
  --navy-700:    #24325c;
  --blue:        #35688f;   /* steel blue accent — links & CTAs */
  --blue-600:    #2c587a;
  --blue-tint:   #e8eef4;   /* soft blue wash for surfaces */
  --teal:        #5c8a80;   /* restrained secondary accent */

  --bg:          #faf8f4;   /* warm soft neutral background */
  --surface:     #ffffff;   /* cards */
  --surface-alt: #f2eee7;   /* alternating section wash */

  --ink:         #1c2433;   /* primary text */
  --ink-soft:    #4a5568;   /* body text */
  --muted:       #71798a;   /* supporting text */
  --line:        #e6e1d8;   /* hairline dividers */

  /* Typography */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Spacing & shape */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-lg:   24px;
  --shadow-sm:   0 1px 2px rgba(27, 39, 73, 0.05), 0 4px 12px rgba(27, 39, 73, 0.05);
  --shadow-md:   0 8px 30px rgba(27, 39, 73, 0.08);
  --shadow-lg:   0 20px 50px rgba(27, 39, 73, 0.12);

  --container:   1160px;
  --gutter:      1.5rem;
  --header-h:    76px;

  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Offset anchored sections so headings clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

p { margin: 0 0 1rem; }

a { color: var(--blue); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--blue-600); }

/* Visible, consistent focus styling for keyboard users (WCAG) */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Visually hidden (screen reader only). Used for the form spam honeypot. */
.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;
}

/* ============================= 3. LAYOUT HELPERS ============================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.section-eyebrow,
.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 0.9rem;
}

.section-title {
  font-size: clamp(1.9rem, 4.5vw, 2.85rem);
  margin: 0 0 0.65rem;
}

.section-sub {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0;
}

/* ============================= 4. BUTTONS ============================= */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--navy); }
.btn-primary:hover { --btn-bg: var(--navy-700); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border-color: var(--line);
  box-shadow: none;
}
.btn-ghost:hover { --btn-bg: #fff; border-color: var(--blue); }

.btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* ============================= 5. HEADER / NAV ============================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease);
}
/* .scrolled toggled by JS once the page is scrolled */
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px rgba(27, 39, 73, 0.05);
  background: rgba(250, 248, 244, 0.95);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 46px; width: auto; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  position: relative;
  padding-block: 0.25rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--blue);
  transition: width 0.25s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

/* Mobile toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================= 6. HERO =============================
   Balanced two column split contained within the page width. Left column holds
   the editorial copy; right column holds a composed head and shoulders portrait
   inside a soft, gently rounded panel. Squared with rounded corners, no circles.
   The whole composition is sized to fit a normal desktop viewport. */
.hero {
  position: relative;
  background:
    radial-gradient(820px 460px at 88% -6%, var(--blue-tint) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* balanced, roughly 52 / 48 */
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  min-height: min(84vh, 700px);
  padding-block: clamp(2.5rem, 6vh, 5rem);
}

/* Left: one considered vertical stack with clear, even spacing. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2vh, 1.5rem);
  max-width: 36rem;
  min-width: 0;
}
.hero .eyebrow { margin: 0; }
.hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.05;
  overflow-wrap: break-word;
}
.hero h1 em {
  font-style: normal;
  color: var(--blue); /* accent blue, consistent with the rest of the site */
}
.hero-lead {
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 34rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.25rem;
}

/* Right: Dr. Maxham as a transparent cutout figure standing directly on the
   hero, anchored to the bottom so he stands naturally in the space. No box,
   panel, or shadow behind him. The whole figure shows, never cropped, never
   upscaled past the optimized width. */
.hero-photo {
  align-self: end;           /* he stands at the bottom of the hero */
  justify-self: center;
  width: 100%;
  max-width: 440px;          /* well below the 900px optimized width: never upscaled */
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;              /* keep his real proportions */
  max-height: min(74vh, 640px); /* keep the whole hero within the viewport */
  object-fit: contain;       /* show the WHOLE figure, do not crop his face */
  object-position: bottom center;
}

/* ============================= 7 & 8. MISSION / ABOUT ============================= */
.about { background: var(--surface); border-block: 1px solid var(--line); }
.about-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.about-portrait { display: flex; justify-content: center; }
.about-portrait img {
  width: 100%;
  max-width: 280px;
  filter: drop-shadow(0 16px 32px rgba(27, 39, 73, 0.12));
}

.mission-quote {
  margin: 0;
  border-left: 3px solid var(--blue-tint);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.mission-quote p {
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.mission-quote p:first-of-type { font-size: 1.22rem; color: var(--ink); }
.mission-attrib {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mission-attrib cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}
.mission-attrib span { font-size: 0.92rem; color: var(--muted); }

/* ============================= 9. CREDENTIALS STRIP ============================= */
.credentials {
  background: var(--navy);
  color: #fff;
  padding-block: 1.75rem;
}
.cred-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cred-list li {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #eef2f8;
}

/* ============================= 10. OUR APPROACH ============================= */
.approach { background: var(--bg); }
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.focus-card { padding: 2.25rem 2rem; text-align: left; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--blue-tint);
  color: var(--blue);
  margin-bottom: 1.25rem;
}
.card-icon svg { width: 28px; height: 28px; }
.focus-card h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.focus-card p { margin: 0; color: var(--ink-soft); }

/* ============================= 11. WHY MAXCARE ============================= */
.why { background: var(--surface-alt); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
/* Let the first two features run wider so the 7 cards balance nicely. */
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-tint);
}
.feature h3 {
  font-size: 1.12rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feature h3::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.feature p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }

/* ============================= 12. LOCATIONS ============================= */
.locations { background: var(--bg); }
.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.location-card { overflow: hidden; display: flex; flex-direction: column; }

/* Featured main office (Henderson): navy panel, sits beside the Las Vegas card. */
.location-featured {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  border-color: transparent;
  color: #fff;
}
.location-featured .location-body { padding: clamp(2rem, 4vw, 2.75rem); }
.location-featured h3 { color: #fff; }
/* Higher specificity than ".location-body address" so it is not overridden by
   the dark body color. Light grey that reads clearly on navy (AA), softer than
   the white headline. */
.location-featured .location-body address { color: #cdd7e6; }
.location-featured .location-body address a { color: #fff; }
.location-featured .location-tag { background: rgba(255, 255, 255, 0.14); color: #fff; }
.location-featured .location-days { color: #bcd0e6; }
.location-featured .location-link { color: #fff; }

/* Map banner sits at the top of a standard column card. */
.location-map {
  height: 200px;
  overflow: hidden;
}
.location-map a { display: block; height: 100%; }
.location-map img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.location-map:hover img { transform: scale(1.04); }

.location-body { padding: 2rem; }
.location-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  background: var(--blue-tint);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
/* Open days line under the tag (main office). */
.location-days {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--blue);
  margin-bottom: 0.9rem;
}
.location-body h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
.location-body address {
  font-style: normal;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.location-body p { color: var(--ink-soft); margin: 0 0 1.1rem; }
/* Coming soon card reads as a gentle placeholder. */
.location-tbd { border-style: dashed; background: transparent; }
.location-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
}
.location-link svg { transition: transform 0.2s var(--ease); }
.location-link:hover svg { transform: translateX(3px); }

/* Embedded Google map inside a location card (keyless output=embed iframe). */
.map-embed {
  margin-top: 1.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
  box-shadow: var(--shadow-sm);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  filter: saturate(1.02);
}
.location-featured .map-embed { border-color: rgba(255, 255, 255, 0.2); }

/* ===================== DIRECT / CUSTOM CARE ===================== */
.directcare { background: var(--surface); border-block: 1px solid var(--line); }
.dc-intro {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.dc-intro p { margin-bottom: 1.25rem; }

/* Signature quote band */
.quote-band {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto;
  max-width: 820px;
  text-align: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  box-shadow: var(--shadow-md);
}
.quote-band p {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.45;
  margin: 0 0 1rem;
}
.quote-band cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--blue-tint);
}
.dc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* ===================== MEMBERSHIP / PRICING ===================== */
.pricing { background: var(--bg); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: 1.5rem;
  align-items: start;
  padding-top: 0.85rem; /* room for the featured tier's badge */
}
.price-card {
  position: relative;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
}
.price-name {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.price-amount {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--navy);
  margin: 0 0 0.35rem;
}
.price-amount span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}
.price-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin: 0 0 1.25rem;
}
.price-features {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  flex: 1;
}
.price-features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.price-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
/* Featured tier stands out */
.price-card--featured {
  border-color: var(--blue);
  box-shadow: var(--shadow-lg);
}
.price-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--blue);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-foot {
  text-align: center;
  margin: 2rem auto 0;
  max-width: 620px;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ============================= 13. CONTACT / FORM ============================= */
.contact { background: var(--surface); border-top: 1px solid var(--line); }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-details .section-eyebrow,
.contact-details .section-title { text-align: left; }

.contact-list {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: none; padding-bottom: 0; }
.contact-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.contact-list a {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
}
.contact-list a:hover { color: var(--blue); }
.contact-call { margin-top: 0.5rem; }

/* Form card */
.contact-form-wrap {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.form-title { font-size: 1.4rem; margin-bottom: 1.25rem; }
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(53, 104, 143, 0.15);
}
.field textarea { resize: vertical; min-height: 110px; }

.form-status {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
}
.form-status.is-success {
  background: #e7f2ee;
  color: #1f5f4b;
  border: 1px solid #bfe0d4;
}
.form-status.is-error {
  background: #fbeceb;
  color: #8a2b23;
  border: 1px solid #f1cbc7;
}

/* ============================= 14. FOOTER ============================= */
.site-footer { background: var(--navy); color: #cdd6e5; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer-brand img {
  height: 46px;
  width: auto;
  /* The logo art is dark; lighten it to read on the navy footer. */
  background: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}
.footer-tagline { margin-top: 1rem; color: #9aa6bd; max-width: 26ch; }

.site-footer h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-contact address {
  font-style: normal;
  line-height: 1.8;
  color: #b6c0d4;
}
.footer-contact a { color: #fff; }
.footer-contact a:hover { color: var(--blue-tint); }

.social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #cdd6e5;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.social-list a:hover { color: #fff; }
.social-list svg { flex: none; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.footer-bottom p {
  margin: 0;
  font-size: 0.88rem;
  color: #8996af;
  font-family: var(--font-sans);
}
.footer-links {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
}
.footer-links a { color: #b6c0d4; }
.footer-links a:hover { color: #fff; }

/* ============================= 15. RESPONSIVE ============================= */

/* Tablet and below: collapse nav into a mobile drawer */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 1rem var(--gutter) 1.75rem;
    /* Hidden by default; slid in when .open is toggled by JS */
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease),
                visibility 0.3s var(--ease);
  }
  .primary-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a { display: block; padding: 0.95rem 0.25rem; font-size: 1.05rem; }
  .nav-links a::after { display: none; }

  .nav-cta { margin-top: 1.25rem; width: 100%; }
}

/* Grid reflow for medium screens */
@media (max-width: 860px) {
  /* Stack the hero: a reasonably sized, well framed portrait on top, copy below. */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(1.75rem, 6vw, 2.75rem);
    padding-block: clamp(2rem, 8vw, 3.5rem);
  }
  .hero-photo { order: -1; max-width: 320px; }
  .hero-copy { order: 1; max-width: 40rem; }
  /* Right-size the headline for phones so it wraps comfortably, not to the edge. */
  .hero h1 { font-size: clamp(1.9rem, 6.4vw, 2.75rem); }

  .about-inner { grid-template-columns: 1fr; }
  .about-portrait { order: -1; }
  .about-portrait img { max-width: 200px; }
  .mission-quote { border-left: none; padding-left: 0; }

  .cards-3 { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .dc-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }

  .contact-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* Phones */
@media (max-width: 560px) {
  :root { --gutter: 1.15rem; }
  .why-grid { grid-template-columns: 1fr; }
  .dc-grid { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: 1fr; }
  .map-embed iframe { height: 200px; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-actions .btn,
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
}

/* ============================= 16. REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}