/* ==========================================================================
   Liberty Mail Center — Shared Stylesheet
   Built by the Foundation Agent (Task Group A). Page agents: read-only.
   Order: reset -> :root -> base/type -> layout primitives -> components ->
          header -> footer -> focus/motion -> print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MODERN CSS RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* the off-canvas mobile nav is translated via transform;
    some engines still count its full off-screen box toward document scroll
    width, so this clips that without hiding any in-flow content */
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; text-align: inherit; }
ul, ol { list-style: none; padding: 0; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
fieldset { border: none; padding: 0; }

/* --------------------------------------------------------------------------
   2. CUSTOM PROPERTIES (verbatim — Section 1.3)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy:        #3D3D6A;  /* sampled directly from the client's logo file — do NOT substitute a "purer" navy */
  --navy-dark:   #2C2C4E;
  --navy-light:  #5A5A8C;
  --navy-tint:   #EAEAF2;

  /* Accent / CTA — LOCKED */
  --red:         #C8102E;
  --red-dark:    #A50D26;
  --red-tint:    #FBEAED;

  /* Review stars — matches the familiar Google review gold */
  --star-gold:   #FBBC04;

  /* Backgrounds */
  --white:       #FFFFFF;
  --bg-soft:     #F8F7F4;
  --bg-card:     #F1EDE6;  /* warm beige for cards & alternating sections */
  --border:      #E2DED6;
  --border-strong: #CFC9BE;

  /* Text */
  --text:        #1A1A1A;
  --text-muted:  #5A5A66;
  --text-invert: #FFFFFF;

  /* Radius */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm:   0 1px 2px rgba(26,26,26,.06), 0 1px 3px rgba(26,26,26,.08);
  --shadow-md:   0 4px 12px rgba(26,26,26,.08);
  --shadow-lg:   0 12px 32px rgba(26,26,26,.12);

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --container:   1200px;
  --gutter:      24px;

  /* Type */
  --font-head: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Supplementary tokens (Foundation Agent addition — not part of the verbatim
   brand block above, but kept in :root so every color/shadow stays token-driven). */
:root {
  --transition: 160ms ease;   /* neutralized to 0s under prefers-reduced-motion */
  --overlay: rgba(26,26,26,.85);
}

/* --------------------------------------------------------------------------
   3. BASE ELEMENT STYLES + TYPE SCALE (Section 1.4)
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
}
@media (min-width: 1024px) {
  body { font-size: 18px; }
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); }

h1, .hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
}
@media (min-width: 1024px) {
  h1, .hero__title { font-size: 52px; line-height: 1.1; }
}

h2, .section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  h2, .section-title { font-size: 38px; line-height: 1.15; }
}
/* A section title with no wrapping .section-head (e.g. a title immediately
   followed by a .section-sub, .steps, .faq, or a <form>) previously had zero
   space below it, since headings carry no margin by default under the global
   reset. When a title IS nested inside .section-head, this collapses with
   that wrapper's own bottom margin instead of stacking, so already-correct
   pages render unchanged. */
.section-title { margin-bottom: var(--space-4); }

h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  h3 { font-size: 24px; line-height: 1.25; }
}

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  h4 { font-size: 19px; }
}

p { font-size: inherit; line-height: 1.65; }

.hero__sub, .section-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
}
@media (min-width: 1024px) {
  .hero__sub, .section-sub { font-size: 20px; }
}
/* Same issue as .section-title above: on sections where the intro paragraph
   sits outside .section-head (compare, pricing, apply), it had zero space
   before whatever followed it — table, grid, or form all sat flush against
   the copy. Scoped to the .section-sub class only, so .hero__sub (a separate
   class sharing this type rule) is unaffected. */
.section-sub { margin-bottom: var(--space-6); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-2);
}

small, .form__help {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--text-muted);
}

a { color: var(--navy); }
a:hover { color: var(--red); }

/* Generic Lucide icon default (component classes below override sizing) */
svg.lucide {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  flex-shrink: 0;
  vertical-align: -4px;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-7);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--space-9); }
}
.section--tight { padding-block: calc(var(--space-7) / 2); }
@media (min-width: 1024px) {
  .section--tight { padding-block: calc(var(--space-9) / 2); }
}
.section--soft  { background: var(--bg-soft); }
.section--beige { background: var(--bg-card); }
.section--navy  { background: var(--navy); color: var(--text-invert); }
.section--navy a:not(.btn) { color: var(--navy-tint); }
.section--navy a:not(.btn):hover { color: var(--white); }
.section--navy .eyebrow { color: var(--navy-tint); }
.section--navy .section-sub,
.section--navy .hero__sub { color: var(--navy-tint); }
/* Headings inherit color from their nearest direct rule (h1-h4 default to --text), not from
   an ancestor's background color, so navy sections need an explicit override or titles render
   as near-black text on navy. */
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--text-invert); }

.section-head {
  max-width: 700px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.grid--2, .grid--3, .grid--4 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
  .split--reverse .split__content { order: 2; }
  .split--reverse .split__media { order: 1; }
  /* Asymmetric variant — used where the media column holds a small graphic
     rather than a full-height photo, so a 50/50 split leaves it looking
     undersized and stranded next to a taller text column (e.g. the homepage
     "Why Neighbors Choose" section). */
  .split--60-40 { grid-template-columns: 3fr 2fr; }
}
.split__media img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
}
.split__content p + p { margin-top: var(--space-4); }
/* Shows the full, uncropped graphic — no cropping or distortion, since
   height is auto — but now sized to fill its column instead of being
   shrunk to 65% and centered with empty margin on both sides, and given
   its own card treatment (shadow + border) so it reads as an intentional
   framed graphic rather than a photo floating on the beige background. */
.split__media--framed img {
  width: 100%;
  display: block;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.text-center { text-align: center; }
.grid + .text-center { margin-top: var(--space-6); }

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--navy);
  color: var(--text-invert);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 2000;
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--space-4);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--red); }

.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.info-list__item,
.info-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.info-list svg.lucide,
.info-list__item svg.lucide {
  color: var(--navy);
  margin-top: 3px;
}

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.map-embed img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  white-space: normal;
}

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--text-invert);
}
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--text-invert); }

.btn-secondary {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--text-invert); }

.btn-white {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.btn-white:hover { background: var(--navy-tint); border-color: var(--navy-tint); color: var(--navy-dark); }

/* Ghost button for dark photo backgrounds (e.g. the homepage hero) — a solid
   .btn-white would compete with the primary red button for attention here. */
.btn-outline-white {
  background: transparent;
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}
.btn-outline-white:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

.btn-sm { padding: 8px 18px; font-size: 14px; min-height: 44px; }
.btn-lg { padding: 16px 32px; font-size: 18px; }
.btn-block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   6. CARDS / SERVICE CARDS / FEATURES
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card svg.lucide:first-child {
  width: 32px;
  height: 32px;
  color: var(--navy);
  margin-bottom: var(--space-3);
}
.card h3 { margin-bottom: var(--space-2); }
.card > p { margin-bottom: var(--space-3); }

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--navy-tint);
  color: var(--navy);
  margin-bottom: var(--space-4);
}
svg.lucide.service-card__icon { width: 56px; height: 56px; }
.service-card__title { margin-bottom: var(--space-2); }
.service-card__body { color: var(--text-muted); margin-bottom: var(--space-4); flex-grow: 1; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--red);
  font-weight: 700;
  margin-top: auto;
}
.service-card__link svg.lucide { width: 16px; height: 16px; transition: transform var(--transition); }
.service-card__link:hover svg.lucide { transform: translateX(3px); }

.feature {
  display: flex;
  flex-direction: column;
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--navy-tint);
  color: var(--navy);
  margin-bottom: var(--space-4);
}
svg.lucide.feature__icon { width: 56px; height: 56px; }
.feature__title { margin-bottom: var(--space-2); }
.feature__body { color: var(--text-muted); }
.feature__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--red);
  font-weight: 700;
  margin-top: var(--space-3);
}
.feature__link svg.lucide { width: 16px; height: 16px; transition: transform var(--transition); }
.feature__link:hover svg.lucide { transform: translateX(3px); }
.feature > .btn { margin-top: var(--space-3); align-self: flex-start; }

/* Feature list — a single-column icon-left row layout, used where a 2x2 icon
   grid feels disconnected floating next to a tall image (e.g. the homepage
   "Why Neighbors Choose" section). */
.feature-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
}
.feature-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-5);
}
.feature-row + .feature-row { border-top: 1px solid var(--border-strong); }
.feature-row:first-child { padding-top: 0; }
.feature-row__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.feature-row__icon svg.lucide { width: 22px; height: 22px; }
.feature-row__title { margin-bottom: var(--space-1); }
.feature-row__body { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   7. TRUST BAR
   -------------------------------------------------------------------------- */
.trust-bar {
  background: var(--navy);
  color: var(--text-invert);
  padding-block: var(--space-6);
}
.trust-bar > .container > p {
  text-align: center;
  margin-bottom: var(--space-5);
  font-weight: 600;
}
.trust-bar__carriers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
/* Carrier logos are provided as square brand badges (each carrier's own
   background color — navy for USPS, yellow for DHL, white for FedEx/UPS),
   not transparent wordmarks, so .trust-bar__chip is a rounded square that
   the badge image fills edge-to-edge, rather than a white pill with a mark
   floating inside it. */
.trust-bar__chip {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.trust-bar__chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trust-bar__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: center;
}
@media (min-width: 768px) {
  .trust-bar__benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .trust-bar__benefits { grid-template-columns: repeat(4, 1fr); }
}
.trust-bar__benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.trust-bar__benefit svg.lucide {
  width: 28px;
  height: 28px;
}
.trust-bar__benefit span { font-weight: 600; font-size: 15px; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  background: var(--bg-soft);
  padding-block: var(--space-7);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--space-9); }
}
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .hero__inner {
    display: grid;
    grid-template-columns: 11fr 9fr;
    gap: var(--space-8);
    align-items: center;
  }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero__content .eyebrow { margin-top: 0; }
.hero__content .hero__sub { margin-top: var(--space-4); }
.hero__content .info-list { margin-top: var(--space-5); }
.hero__media img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-lg);
}

.hero--page {
  padding-block: var(--space-6);
}
@media (min-width: 1024px) {
  .hero--page { padding-block: var(--space-7); }
}
.hero--page .hero__title {
  font-size: 28px;
}
@media (min-width: 1024px) {
  .hero--page .hero__title { font-size: 44px; }
}

.hero--text .hero__inner {
  display: block;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.hero--text .hero__actions { justify-content: center; }
.hero--text .breadcrumb { justify-content: center; }

/* Homepage hero — full-bleed storefront photo with a gradient scrim so the
   headline reads on top of it, instead of the photo sitting in its own card
   beside the text. */
.hero--home {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-8);
  background: var(--navy-dark);
}
@media (min-width: 1024px) {
  .hero--home {
    padding-block: var(--space-9);
    min-height: 620px;
    display: flex;
    align-items: center;
  }
  /* .hero__inner is also .container (max-width + auto margins) — as a flex item
     it would otherwise shrink to fit its content and get centered by its own
     auto margins, pulling the text column in from the edge instead of letting
     it sit at the container's normal left inset. */
  .hero--home .hero__inner { width: 100%; }
}
.hero--home .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero--home .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
}
@media (max-width: 1023.98px) {
  .hero--home .hero__bg img { object-position: 30% center; }
}
.hero--home .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20,20,46,.96) 0%, rgba(24,24,52,.94) 30%, rgba(30,30,60,.82) 50%, rgba(44,44,78,.5) 68%, rgba(44,44,78,.22) 88%);
}
@media (max-width: 1023.98px) {
  .hero--home .hero__scrim {
    background: linear-gradient(195deg, rgba(20,20,46,.55) 0%, rgba(24,24,52,.94) 45%, rgba(30,30,60,.97) 100%);
  }
}
.hero--home .hero__inner { display: block; }
.hero--home .hero__content { max-width: 620px; }
.hero--home .eyebrow { color: var(--white); }
.hero--home .hero__title,
.hero--home .hero__sub,
.hero--home .info-list { color: var(--white); }
.hero--home .hero__sub { color: rgba(255,255,255,.85); }
.hero--home .info-list svg.lucide { color: var(--white); }

/* --------------------------------------------------------------------------
   9. PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.step {
  display: flex;
  flex-direction: column;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--text-invert);
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.step__title { margin-bottom: var(--space-2); }
.step__body { color: var(--text-muted); }
@media (max-width: 767.98px) {
  /* .steps is single-column below 768px (see rule above) — center the
     numbered badge and copy in that stacked layout. Applies sitewide to
     every step process (mailbox rental, packing & shipping, printing). */
  .step {
    align-items: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   10. PRICING
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .price-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Same "adjacent-sibling spacing" pattern used for .grid elsewhere (see
   Layout Primitives), extended to .price-grid so the TBD badge above the
   cards and the disclaimer note / CTA button below them aren't flush
   against the card row. */
.text-center + .price-grid { margin-top: var(--space-5); }
.price-grid + .form-note,
.price-grid + .text-center { margin-top: var(--space-6); }
.price-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card--featured {
  border-top: 4px solid var(--red);
  box-shadow: var(--shadow-lg);
}
.price-card__name { margin-bottom: var(--space-2); }
.price-card__note { color: var(--text-muted); font-size: 15px; margin-bottom: var(--space-3); }
.price-card__amount {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 34px;
  color: var(--navy);
  margin-bottom: var(--space-2);
}
.price-card__term { font-size: 16px; font-weight: 400; color: var(--text-muted); }
.price-card__terms {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.price-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.price-card__list svg.lucide { color: var(--navy); margin-top: 3px; }
.price-card .availability { margin-bottom: var(--space-3); }
.price-card .btn { margin-top: auto; }

.availability { font-size: 15px; color: var(--text-muted); }
.availability--low { color: var(--red); font-weight: 600; }

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge--red { background: var(--red); color: var(--text-invert); }
.badge--tbd { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* "Page in progress" banner — internal review flag, not client-approved copy/styling.
   Applied to pages that haven't been through a feedback round yet. Remove per-page
   once that page is reviewed and confirmed final. TODO: confirm wording before launch. */
.construction-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(251, 188, 4, .14);
  border-bottom: 1px solid rgba(251, 188, 4, .45);
  color: var(--navy-dark);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.construction-tag .lucide { color: #B8860B; flex-shrink: 0; width: 16px; height: 16px; }
.construction-tag strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   11. TESTIMONIALS & REVIEWS
   -------------------------------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .testimonials { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .testimonials { grid-template-columns: repeat(3, 1fr); }
}
.testimonial {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--star-gold);
  margin-bottom: var(--space-3);
}
.testimonial__stars svg.lucide { width: 16px; height: 16px; fill: var(--star-gold); }
.testimonial__quote { margin-bottom: var(--space-4); }
.testimonial__name { font-weight: 700; }
.testimonial__meta { color: var(--text-muted); font-size: 15px; }

.reviews-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  text-align: center;
  max-width: 380px;
  margin-inline: auto;
}
.grid + .reviews-widget, .testimonials + .reviews-widget { margin-top: var(--space-7); }
/* Reviews stat card used as a grid cell (e.g. homepage testimonials 2x3 grid)
   instead of a standalone centered widget — undo the centering/max-width and
   match it to the surrounding .testimonial cards' sizing. */
.reviews-widget--tile {
  max-width: none;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.reviews-widget__score { margin-bottom: var(--space-2); }
.reviews-widget__number {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 34px;
  color: var(--navy);
  display: block;
}
.reviews-widget__stars { color: var(--star-gold); font-size: 20px; display: block; margin: var(--space-1) 0; }
.reviews-widget__count { display: block; color: var(--text-muted); font-size: 15px; }
.reviews-widget__note { font-size: 14px; color: var(--text-muted); margin: var(--space-3) 0; }
.footer__col--reviews .reviews-widget {
  background: var(--navy-dark);
  border-color: var(--navy-light);
}
.footer__col--reviews .reviews-widget__number { color: var(--white); }
.footer__col--reviews .reviews-widget__count,
.footer__col--reviews .reviews-widget__note { color: var(--navy-tint); }
.footer__col--reviews .reviews-widget .btn-secondary {
  border-color: var(--white);
  color: var(--white);
}
.footer__col--reviews .reviews-widget .btn-secondary:hover {
  background: var(--white);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form[hidden] {
  /* the shared stubSubmit helper sets formEl.hidden = true on success;
     without this the .form's own display:flex would defeat the native
     [hidden] behavior since author-origin CSS always beats the UA
     stylesheet regardless of specificity ties. */
  display: none;
}
.form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .form__row { flex-direction: row; }
  .form__row > .form__group { flex: 1; }
}
.form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form__label { font-weight: 600; }
.required { color: var(--red); margin-left: 2px; }

.form__input,
.form__select,
.form__textarea,
.form__file {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color var(--transition);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus,
.form__file:focus { border-color: var(--navy); }
.form__textarea { resize: vertical; min-height: 100px; }
.form__select { appearance: auto; }

.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.form__check input[type="checkbox"],
.form__check input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--navy);
  flex-shrink: 0;
}
.form__check label { line-height: 1.4; }

.form__legend {
  font-weight: 700;
  font-family: var(--font-body);
  margin-bottom: var(--space-3);
  padding: 0;
}

.form-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}
.grid + .form-note,
.split + .form-note { margin-top: var(--space-6); }
.form-note + .text-center { margin-top: var(--space-5); }

.form-success {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-success svg.lucide {
  width: 48px;
  height: 48px;
  color: var(--navy);
  margin: 0 auto var(--space-4);
}
.form-success h3 { margin-bottom: var(--space-3); }
.form-success p { margin-bottom: var(--space-4); max-width: 560px; margin-inline: auto; }

/* Radio / checkbox groups arranged with the fieldset legend above; the
   options themselves stack as .form__check rows or are laid out by page CSS
   scoping (choice cards use .choice-grid below, plain radio groups just
   stack .form__check rows with this gap). */
fieldset.form__group { display: flex; flex-direction: column; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   13. MULTI-STEP FORM
   -------------------------------------------------------------------------- */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.stepper__item {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}
.stepper__item--active { color: var(--red); }
.stepper__item--done { color: var(--navy); }

.form-step { display: none; }
.form-step--active { display: block; }
.form-step h3 { margin-bottom: var(--space-4); }

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.form-actions:has(> :only-child) { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   14. CHOICE CARDS
   -------------------------------------------------------------------------- */
.choice {
  position: relative; /* containing block for the visually-hidden, absolutely-positioned .choice__input */
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.choice__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.choice__label {
  display: block;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-4);
  cursor: pointer;
  background: var(--white);
  transition: border-color var(--transition), background-color var(--transition);
}
.choice__input:checked + .choice__label {
  border-color: var(--red);
  background: var(--red-tint);
}
.choice__input:focus-visible + .choice__label {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.choice__title { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.choice__meta { display: block; font-size: 14px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   15. BOOKING WIDGET
   -------------------------------------------------------------------------- */
.booking {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .booking {
    display: grid;
    grid-template-columns: 11fr 9fr;
    gap: var(--space-6);
    align-items: start;
  }
}
.booking__cal {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.booking__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  font-family: var(--font-head);
  font-weight: 700;
}
.booking__month button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--navy);
}
.booking__month button:disabled { color: var(--border-strong); cursor: not-allowed; }
.booking__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  text-align: center;
}
.booking__grid > span[aria-hidden] {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  padding-block: var(--space-2);
}
.booking__day {
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  transition: background-color var(--transition), color var(--transition);
}
.booking__day--muted {
  color: var(--border-strong);
  cursor: not-allowed;
}
.booking__day--available {
  background: var(--navy-tint);
  color: var(--navy);
  font-weight: 600;
}
.booking__day--available:hover { background: var(--navy); color: var(--text-invert); }
.booking__day--selected {
  background: var(--red);
  color: var(--text-invert);
  font-weight: 700;
}
.booking__slots {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.booking__slots h3 { margin-bottom: var(--space-4); }
.booking__slots > div,
.booking__slots .slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .booking__slots > div,
  .booking__slots .slot-grid { grid-template-columns: repeat(3, 1fr); }
}
.slot {
  padding: var(--space-3);
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.slot:hover { border-color: var(--navy); }
.slot--taken {
  color: var(--border-strong);
  text-decoration: line-through;
  cursor: not-allowed;
  background: var(--bg-soft);
}
.slot--taken:hover { border-color: var(--border-strong); }
.slot--selected {
  background: var(--red);
  border-color: var(--red);
  color: var(--text-invert);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  text-align: left;
}
.faq__q svg.lucide { transition: transform var(--transition); flex-shrink: 0; }
.faq__item.is-open .faq__q svg.lucide { transform: rotate(180deg); }
.faq__a {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-muted);
}
.faq__item.is-open .faq__a { display: block; }
.faq__group-title { margin-bottom: var(--space-5); }

/* --------------------------------------------------------------------------
   17. GALLERY / LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-6);
}
.gallery-filter__btn {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.gallery-filter__btn:hover { border-color: var(--navy); }
.gallery-filter__btn--active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--text-invert);
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
.gallery.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .gallery.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .gallery.grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.gallery__item {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.gallery__item[hidden] {
  /* the shared gallery-filter behavior sets item.hidden = true to hide
     filtered-out tiles; without this override this rule's own display:block
     would defeat that (see the .form[hidden] note above for why). */
  display: none;
}
.gallery__img { width: 100%; height: auto; }
.gallery__caption {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.lightbox[hidden] {
  /* the shared lightbox behavior toggles the hidden attribute; without this
     override this rule's own display:flex would defeat that (see the
     .form[hidden] note above for why) and the lightbox would stay visible
     and swallow clicks across the whole page even when "closed". */
  display: none;
}
.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius);
  margin: 0 auto;
}
.lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-dark);
  color: var(--text-invert);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   18. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.compare {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* .compare__table below has min-width:640px so it can stay readable and
     scroll horizontally within this box on narrow screens — that's the
     intended behavior. But without `contain: layout`, Chrome lets the
     table's 640px intrinsic width leak past this wrapper's own (correctly
     constrained, ~342px on mobile) box and inflate the whole document's
     scrollWidth, so the entire page scrolled sideways instead of just this
     table. `contain: layout` walls the table's layout off from affecting
     anything outside .compare, which is exactly what a scroll wrapper is
     supposed to do; the internal horizontal scroll on the table itself is
     unaffected. */
  contain: layout;
}
.compare__table {
  min-width: 640px;
}
.compare__table th,
.compare__table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.compare__table thead th {
  background: var(--navy-tint);
  font-family: var(--font-body);
  font-weight: 700;
}
.compare__table tbody th {
  font-weight: 700;
  background: var(--bg-soft);
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: none; }
.compare__yes, .compare__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare__yes { color: var(--navy); }
.compare__no { color: var(--red); }
.compare + .text-center { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   19. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.cta-band__title {
  font-size: 26px;
  margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
  .cta-band__title { font-size: 34px; }
}
.cta-band__sub { margin-bottom: var(--space-6); }
.cta-band .hero__actions,
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.cta-band__actions .btn { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .cta-band__actions .btn { width: 100%; }
}
/* CTA band button wrappers aren't consistent across pages (.cta-band__actions,
   .text-center, an unclassed div, or no wrapper at all) — this margin-based
   fallback spaces buttons out regardless of which pattern a given page uses.
   .cta-band__actions already spaces its buttons via flex gap above, so it's
   zeroed out here to avoid double spacing. */
.cta-band .btn + .btn { margin-left: var(--space-4); }
.cta-band__actions .btn + .btn { margin-left: 0; }
@media (max-width: 479.98px) {
  .cta-band .btn + .btn { margin-left: 0; margin-top: var(--space-3); }
}

/* --------------------------------------------------------------------------
   20. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--white);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.utility-bar {
  background: var(--navy-dark);
  color: var(--navy-tint);
  font-size: 13px;
}
.utility-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.utility-bar__link,
.utility-bar__item {
  align-items: center;
  gap: var(--space-1);
  color: var(--navy-tint);
}
.utility-bar__item,
.utility-bar__link:not(.utility-bar__link--phone) {
  display: none;
}
.utility-bar__link--phone {
  display: flex;
  width: 100%;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
}
.utility-bar__link:hover { color: var(--white); }
@media (min-width: 1024px) {
  .utility-bar__item,
  .utility-bar__link:not(.utility-bar__link--phone) { display: inline-flex; }
  .utility-bar__link--phone { width: auto; }
  .utility-bar__inner > *:not(:first-child) {
    border-left: 1px solid rgba(255,255,255,.25);
    padding-left: var(--space-3);
  }
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.site-header.is-scrolled .nav-bar { padding-block: var(--space-2); }

.brand {
  display: inline-flex;
  align-items: center;
}
.brand__logo {
  width: 80px;
  height: 46px;
}
@media (min-width: 1024px) {
  .brand__logo { width: 112px; height: 64px; }
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--navy);
  /* Must sit above .nav (the sliding mobile menu panel, z-index:950) —
     without this, the panel's fixed top:0/right:0 box physically covers
     this button once open, so the visible "X" icon looks clickable but
     isn't actually reachable and the menu can't be closed by tapping it. */
  position: relative;
  z-index: 960;
}
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-5) var(--space-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 950;
}
.nav.is-open { transform: translateX(0); }
.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  font-weight: 600;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.nav__link:hover { color: var(--red); }
.nav__link.active { color: var(--red); }
.nav__toggle {
  width: 100%;
  justify-content: space-between;
}
.nav__toggle.active { color: var(--red); }
.nav__sub {
  display: block;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav__sublink {
  display: block;
  padding: var(--space-2);
  color: var(--text-muted);
  font-weight: 600;
}
.nav__sublink:hover { color: var(--red); }
.nav__sublink.active { color: var(--red); }
.nav__cta {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Track a Package / Client Login inside the mobile slide-out menu — the
   utility bar these links normally live in is hidden below 1024px (by
   design, see .utility-bar__item rules above), so without this the two
   links weren't reachable at all on mobile short of scrolling to the
   footer. Styled as secondary/muted rather than matching .nav__link, to
   keep them visually distinct from the main page links above them.
   Hidden again at desktop, where the utility bar already covers them. */
.nav__utility {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.nav__utility-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}
.nav__utility-link:hover { color: var(--red); }

@media (min-width: 1024px) {
  .nav {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    transform: none;
    transition: none;
  }
  .nav__utility { display: none; }
  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .nav__link {
    padding: var(--space-2) var(--space-3);
    font-size: 15px;
    white-space: nowrap;
  }
  .nav__item--has-sub { position: relative; }
  .nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub.is-open .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__sublink { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
  .nav__sublink:hover { background: var(--bg-soft); }
  .nav__cta { margin-top: 0; width: auto; margin-left: var(--space-3); }
}
@media (min-width: 1280px) {
  .nav__link { padding: var(--space-2) var(--space-4); font-size: 16px; }
}

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-dark);
  color: var(--text-invert);
  padding-block: var(--space-8) var(--space-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (max-width: 767.98px) {
  /* Brand and Reviews stay full-width; Services and Company (the two
     plain .footer__col link lists) fall into the resulting 2-col grid
     side by side instead of stacking as a 4-tall list on phones. */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-5);
  }
  .footer__col--brand,
  .footer__col--reviews {
    grid-column: 1 / -1;
  }
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}
.footer__col {
  display: flex;
  flex-direction: column;
}
.footer__col--brand {
  max-width: 380px;
}
.footer__logo { width: 126px; height: 72px; margin-bottom: var(--space-4); }
.footer__tagline { color: var(--navy-tint); margin-bottom: var(--space-5); }
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.footer__contact svg.lucide { margin-top: 3px; color: var(--navy-tint); }
.footer__contact a { color: var(--text-invert); }
.footer__contact a:hover { color: var(--navy-tint); }

.footer__heading {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-4);
}
.footer__heading--social { margin-top: var(--space-6); }
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__links a { color: var(--navy-tint); }
.footer__links a:hover { color: var(--white); }

.footer__social {
  display: flex;
  gap: var(--space-3);
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-dark);
  color: var(--white);
  transition: background-color var(--transition);
}
.footer__social a:hover { background: var(--navy-light); }

.footer__bar {
  border-top: 1px solid var(--navy-light);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
}
.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  color: var(--navy-tint);
  font-size: 14px;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__legal a { color: var(--navy-tint); }
.footer__legal a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   22. FOCUS-VISIBLE + REDUCED MOTION
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.section--navy :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0s;
  }
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   23. PRINT STYLESHEET
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link,
  .lightbox, .gallery-filter, .booking__month button { display: none; }
  body { color: var(--text); background: var(--white); }
  a { color: var(--text); text-decoration: underline; }
  .section--navy { background: var(--white); color: var(--text); }
  .btn { border: 1px solid var(--text); color: var(--text); background: var(--white); }
}