/* ==========================================================================
   Cortez Self Storage — REDESIGN OVERLAY (2026-05-21)
   --------------------------------------------------------------------------
   Loaded AFTER /css/styles.css. Non-destructive: every rule here either
   tightens or replaces a specific rule in the base stylesheet. Remove this
   single <link> from /includes/head.php to fully revert.

   Goals (in priority order):
     1. Fix the dark-on-dark trust strip (WCAG AA failure).
     2. Replace condensed-uppercase typography with a humanist nav voice.
     3. Calm the lime-saturated green into one operator green identity.
     4. Reshape header into logo · nav · utility cluster.
     5. Rebuild hero: single statement, single CTA, vertical scrim.
     6. Make body text deeper / more confident on white surfaces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NEW TOKENS — additive, no overwrites to existing brand vars.
   -------------------------------------------------------------------------- */
:root {
  /* Brand greens.
     #5BA847 (lime) is the SIGNATURE brand color — matches the building trim,
     the logo, the property signage. Stays as the primary CTA fill, eyebrow
     accent, and icon color. Per WCAG, lime fails 4.5:1 on white as text
     (2.85:1), so it is used as a FILL and paired with an ink-colored label.
     For text-on-white and hover/active states, the deeper #2F6B28 is used as
     a depth color — never a replacement. */
  --brand-lime: #5BA847;         /* PRIMARY brand color — buttons, accents */
  --brand-lime-hover: #4A8F39;   /* hover state for lime fills */
  --brand-green: #2F6B28;        /* depth color — text-on-white, focus rings */
  --brand-green-hover: #1F5018;  /* deepest green — pressed/active */
  --brand-green-tint: #EDF4EB;   /* soft fill — tinted backgrounds */

  /* Earth-toned trust accent — used sparingly for review stars / "locally owned" */
  --brass: #B08A3E;

  /* Body text tokens — deeper than the existing --charcoal #3A3A3A */
  --ink: #1B1F1A;        /* H1/H2 + key body */
  --ink-soft: #44504A;   /* secondary body — AA-safe on white at 8.5:1 */
  --paper: #F7F6F1;      /* off-white surfaces */
  --hairline: #E4E2DA;   /* subtle dividers */

  /* Type stack — humanist sans for UI, Oswald reserved for display only */
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, sans-serif;

  /* Geometry refinements — slightly taller header so the logo has the
     visual weight it had in the original design without feeling cramped. */
  --header-height-new: 86px;
  --radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY — replace condensed/uppercase voice in body & nav.
   -------------------------------------------------------------------------- */
body {
  font-family: 'Source Sans 3', var(--font-ui);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings stay Oswald but drop the universal uppercase. H3+ moves to Inter. */
h1, h2 {
  font-family: 'Oswald', var(--font-ui);
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }

h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink);
}
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.3; }
h4 { font-size: 1rem; }

/* Eyebrows — the one place uppercase is legitimate */
.eyebrow,
.eyebrow--light {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: 0.6rem;
  display: block;
}
.section--dark .eyebrow,
.eyebrow--light { color: #B7DCA9; } /* lighter green for dark sections, AA on charcoal */

.lead {
  font-family: 'Source Sans 3', var(--font-ui);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
}
.section--dark .lead,
.lead-light { color: #D2D7CF; }

/* Body links — calmer brand green, never lime.
   The :not(.btn) guard preserves button text colors — without it the
   dark-section link color paints over .btn--primary / .btn--inline labels,
   making them look faded. */
a:not(.btn) { color: var(--brand-green); }
a:not(.btn):hover { color: var(--brand-green-hover); }
.section--dark a:not(.btn) { color: #B7DCA9; }
.section--dark a:not(.btn):hover { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   3. BUTTONS — calm green, mixed case, generous tap area.
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.95rem 1.6rem;
  border-radius: 8px;
  min-height: 48px;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .15s ease,
              box-shadow .18s ease;
}
.btn--large, .btn--lg {
  font-size: 1.02rem;
  padding: 1.1rem 1.9rem;
  min-height: 54px;
}

/* Restore the ORIGINAL strong CTA: deep green fill, white text. Lime stays
   as the BRAND accent (eyebrows, icons, logo trim) — NOT as button fill.
   #3F7A33 white-on-green gives 5.0:1, the classic confident operator CTA. */
.btn--primary {
  background: var(--green-button);          /* #3F7A33 */
  border-color: var(--green-button);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(31,80,24,.55);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--green-button-hover);    /* #2F5F26 */
  border-color: var(--green-button-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(31,80,24,.6);
}

.btn--secondary {
  background: transparent;
  color: var(--brand-green);
  border-color: var(--brand-green);
}
.btn--secondary:hover {
  background: var(--brand-green);
  color: #fff;
  border-color: var(--brand-green);
}
.section--dark .btn--secondary,
.hero .btn--secondary,
.page-header .btn--secondary {
  color: #B7DCA9;
  border-color: #B7DCA9;
}
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover,
.page-header .btn--secondary:hover {
  background: #B7DCA9;
  color: var(--ink);
  border-color: #B7DCA9;
}

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
}
.btn--ghost-light:hover {
  background: rgba(255,255,255,.10);
  border-color: #fff;
  color: #fff;
}

/* --------------------------------------------------------------------------
   3b. GLOBAL OVERFLOW GUARD — nothing may create horizontal scrolling.
   -------------------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   4. HEADER — three-zone layout, calmer chrome, real utility cluster.
   -------------------------------------------------------------------------- */
.site-header {
  height: var(--header-height-new);
  background: #fff;
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--hairline);
  box-shadow: 0 4px 18px -8px rgba(0,0,0,.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
  padding: 0 var(--space-xl);
  max-width: 1240px;
}
.header-inner > .logo { margin-right: auto; }
.header-inner > .main-nav { margin-left: 0; }
.header-inner > .header-utility { margin-left: auto; }
/* nav-toggle is hidden on desktop; on mobile it sits to the right of the logo */
.header-inner > .nav-toggle { order: 99; }
@media (max-width: 900px) {
  .header-inner > .nav-toggle { margin-left: auto; order: 99; }
  .header-inner > .main-nav { order: 100; }
  .header-inner > .header-utility { margin-left: 0; order: 50; }
}

.logo img {
  height: 64px;            /* bumped from 54 — closer to the original 72 but */
  width: auto;             /* with breathing room in the 86px-tall header */
  filter: none;
  display: block;
}
.logo:hover img {
  filter: none;
  transform: none;
}

/* Primary nav — Inter, mixed case, no underlines */
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  justify-content: flex-end;
}
.main-nav a {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 0.55rem 0;
  position: relative;
}
.main-nav a:hover { color: var(--brand-green); }
.main-nav a[aria-current="page"],
.main-nav a.active {
  color: var(--brand-green);
}
.main-nav a[aria-current="page"]::after,
.main-nav a.active::after {
  background: var(--brand-green);
  height: 2px;
  bottom: -2px;
}

.nav-dropdown .dropdown-menu-inner {
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--brand-lime);
  padding: 0.5rem 0;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.18);
  border-radius: 0 0 6px 6px;
}
/* Keyboard support: open dropdown when focus enters it on desktop.
   Base CSS only opens on :hover, which keyboard users can't trigger. */
@media (min-width: 901px) {
  .nav-dropdown:focus-within .dropdown-menu { display: block; }
}
.dropdown-menu a {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 0.55rem 1.1rem;
}
.dropdown-menu a:hover {
  background: var(--brand-green-tint);
  color: var(--brand-green-hover);
}

/* Utility cluster — phone + pay + rent, right-aligned */
.header-utility {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

/* Phone — promoted to first-class element with label stack */
.header-utility__call,
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  min-height: 44px;
  transition: background-color .18s ease, color .18s ease;
}
.header-utility__call svg,
.header-call svg {
  color: var(--brand-green);
  width: 18px; height: 18px;
}
.header-utility__call:hover,
.header-call:hover,
.header-utility__call:focus-visible,
.header-call:focus-visible {
  background: var(--brand-green-tint);
  color: var(--brand-green-hover);
}
.header-utility__call-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.header-utility__call-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.header-utility__call-number {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.header-utility__call:hover .header-utility__call-number,
.header-utility__call:focus-visible .header-utility__call-number {
  color: var(--brand-green-hover);
}

/* Pay Bill — equal visual weight to Call, NOT hidden */
.header-utility__pay,
.main-nav__pay {
  font-family: var(--font-ui) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  background: transparent;
  border: 1.5px solid var(--hairline) !important;
  border-radius: 6px;
  padding: 0.6rem 0.95rem !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.header-utility__pay:hover,
.main-nav__pay:hover,
.header-utility__pay:focus-visible,
.main-nav__pay:focus-visible {
  color: var(--brand-green-hover) !important;
  border-color: var(--brand-green) !important;
  background: var(--brand-green-tint);
}

/* Header Rent CTA — original strong dark-green/white system */
.header-utility__rent,
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--green-button);          /* #3F7A33 */
  color: #fff !important;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.7rem 1.15rem;
  border-radius: 6px;
  min-height: 44px;
  box-shadow: 0 6px 14px -8px rgba(31,80,24,.5);
}
.header-utility__rent:hover,
.header-cta:hover,
.header-utility__rent:focus-visible,
.header-cta:focus-visible {
  background: var(--green-button-hover);    /* #2F5F26 */
  color: #fff !important;
  transform: translateY(-1px);
}

/* Push hero down past taller header — base CSS uses --header-height (85px),
   we want --header-height-new (78px). Override the top margin. */
.hero,
.page-header,
.breadcrumbs {
  margin-top: var(--header-height-new);
}

/* Mobile-nav duplicates of utility actions live inside .main-nav so they
   appear when the hamburger opens. Hide them on desktop. */
.main-nav > .header-utility__pay,
.main-nav > .header-utility__rent {
  display: none;
}

/* --------------------------------------------------------------------------
   5. HEADER — mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 0 var(--space-md);
  }
  .main-nav { gap: 1.1rem; }
  .header-utility__call-stack { display: none; }
  .header-utility__pay { display: none; }
}

@media (max-width: 900px) {
  /* Re-hide the mobile nav. My desktop `.main-nav { display: flex }` rule
     (no media query) was winning over the base CSS mobile `display: none`
     because it loads later. Force-hide here and only show when .open is set. */
  .main-nav {
    display: none !important;
    position: absolute;
    top: var(--header-height-new) !important;
    left: 0;
    right: 0;
    width: auto;
    box-sizing: border-box;
    background: #14181A;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0;
    gap: 0;
    border-bottom: 3px solid var(--green);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
    max-height: calc(100vh - var(--header-height-new));
    overflow-y: auto;
    overflow-x: hidden;
  }
  .main-nav.open {
    display: flex !important;
  }

  /* Mobile menu items — full-width tappable rows, readable contrast. */
  .main-nav > a,
  .main-nav .nav-dropdown > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.95rem var(--space-md);
    border-bottom: 1px solid rgba(255,255,255,.07);
    min-height: 48px;
  }
  .main-nav > a:hover,
  .main-nav > a[aria-current="page"],
  .main-nav .nav-dropdown > a:hover,
  .main-nav .nav-dropdown > a[aria-current="page"] {
    color: var(--green-light);
    background: rgba(255,255,255,.04);
  }
  .main-nav .nav-dropdown { width: 100%; }
  .main-nav .nav-dropdown > a::after {
    content: '+';
    float: right;
    color: var(--green-light);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1;
  }
  .main-nav .nav-dropdown.open > a::after { content: '\2212'; }

  /* Dropdown submenu — indented, readable, slightly muted but not faded */
  .nav-dropdown .dropdown-menu-inner {
    background: rgba(0,0,0,.25);
    border: none;
    border-top: none;
    padding: 0.25rem 0 0.5rem;
    box-shadow: none;
  }
  .dropdown-menu a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #D2D7CF;
    font-family: var(--font-ui);
    font-size: 0.98rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.7rem var(--space-md) 0.7rem calc(var(--space-md) + 1rem);
    min-height: 44px;
  }
  .dropdown-menu a:hover,
  .dropdown-menu a[aria-current="page"] {
    color: #fff;
    background: rgba(255,255,255,.04);
  }

  /* In-menu Pay Bill + Rent CTAs — full-width tap buttons at the bottom */
  .main-nav.open > .header-utility__pay,
  .main-nav.open > .header-utility__rent {
    display: flex !important;
    width: auto;
    align-self: stretch;        /* fills container minus its own margins — never overflows */
    box-sizing: border-box;
    margin: 0.5rem var(--space-md) 0;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    min-height: 48px;
  }
  .main-nav.open > .header-utility__pay {
    color: #E5E8E2 !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
    background: transparent;
  }
  .main-nav.open > .header-utility__pay:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.5) !important;
    color: #fff !important;
  }
  .main-nav.open > .header-utility__rent {
    background: var(--green-button);
    color: #fff !important;
    margin-bottom: 1rem;
  }
  .main-nav.open > .header-utility__rent:hover {
    background: var(--green-button-hover);
    color: #fff !important;
  }

  /* (Removed a redundant `.main-nav.open .header-utility__*` descendant rule that
     set width:100% on top of the child rule's side margins — that combination
     pushed the buttons ~4rem past the viewport and caused the horizontal scroll.
     The direct-child rule above now owns sizing via align-self: stretch.) */

  /* Phone stays visible OUTSIDE the hamburger so customers in a hurry
     can tap it without opening the menu. Override base CSS's absolute
     positioning — we now sit in the flex flow of .header-inner. */
  .header-utility__call,
  .header-call {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    right: auto;
    top: auto;
    padding: 0.55rem 0.7rem;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .header-utility__call-stack,
  .header-call__text { display: none; }
  .header-utility__call svg,
  .header-call svg { width: 22px; height: 22px; }

  /* Hide the desktop Rent CTA outside the menu on mobile so we don't double up */
  .header-inner > .header-utility .header-utility__rent { display: none; }
}

/* --------------------------------------------------------------------------
   6. HERO — vertical scrim, tightened content, single CTA.
   -------------------------------------------------------------------------- */
.hero {
  min-height: min(720px, 88vh);
  background: #0F1411;
}

/* Strong top-down scrim — headline always lands on a dark band.
   Override base linear-gradient. */
.hero--photo::before {
  background:
    linear-gradient(
      180deg,
      rgba(8,10,9,.88) 0%,
      rgba(8,10,9,.72) 38%,
      rgba(8,10,9,.55) 70%,
      rgba(8,10,9,.78) 100%
    ),
    linear-gradient(
      90deg,
      rgba(8,10,9,.35) 0%,
      rgba(8,10,9,0) 55%
    );
}
@media (max-width: 768px) {
  .hero--photo::before {
    background:
      linear-gradient(
        180deg,
        rgba(8,10,9,.88) 0%,
        rgba(8,10,9,.82) 50%,
        rgba(8,10,9,.92) 100%
      );
  }
}

.hero__content {
  max-width: 640px;
  padding: var(--space-2xl) 0;
}

.hero h1 {
  color: #fff;
  font-family: 'Oswald', var(--font-ui);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0.4rem 0 1rem;
  text-shadow: 0 1px 24px rgba(0,0,0,.35);
}
/* No more inline "highlight" that competes with the headline — but if a page
   still uses .highlight, keep it a calm accent. */
.hero h1 .highlight {
  color: #C2E2B7;
  font-style: normal;
}

.hero .lead,
.hero__lead {
  color: rgba(255,255,255,.92);
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 1.5rem;
  max-width: 560px;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

/* Trust chips — reduced to 2, larger, more legible */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.20);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.hero__badge svg {
  color: #C2E2B7;
  width: 16px; height: 16px;
}

/* CTA row — one primary button, then a text-link phone fallback */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
}
.hero__ctas .btn--primary {
  min-height: 56px;
  font-size: 1.05rem;
  padding: 1.05rem 1.9rem;
  background: var(--green-button);
  border-color: var(--green-button);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.55);
}
.hero__ctas .btn--primary:hover,
.hero__ctas .btn--primary:focus-visible {
  background: var(--green-button-hover);
  border-color: var(--green-button-hover);
  color: #fff;
}
/* Demote the secondary button into a calm text link with phone icon */
.hero__ctas .hero__phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 0.6rem;     /* was 0.6rem 0.4rem — now ≥44px tap target */
  min-height: 44px;
  border-radius: 6px;
  text-decoration: none;
  background: rgba(255,255,255,.12);   /* resting fill so the button reads
                                          on the hero photo, not just on hover */
  border: 1.5px solid rgba(255,255,255,.6);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero__phone-link svg { width: 18px; height: 18px; color: #C2E2B7; transition: color .15s ease; }
.hero__ctas .hero__phone-link {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hero__phone-link:hover,
.hero__phone-link:focus-visible {
  color: var(--brand-green-hover);
  background: #fff;
  border-color: #fff;
  text-shadow: none;
}
.hero__phone-link:hover svg,
.hero__phone-link:focus-visible svg {
  color: var(--brand-green-hover);
}

.hero__reassurance {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  max-width: 520px;
}

@media (max-width: 600px) {
  .hero { min-height: 78vh; }
  .hero__content { padding: var(--space-xl) 0 var(--space-2xl); }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn--primary { width: 100%; }
  .hero__ctas .hero__phone-link {
    justify-content: center;
    padding: 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   7. TRUST STRIP — moved to LIGHT surface, fixes the AA failure.
   -------------------------------------------------------------------------- */
.trust-bar {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.75rem 0;
  box-shadow: none;
}
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 1.5rem;
  justify-items: stretch;
  align-items: center;
}
.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  padding: 0.25rem 0;
}
.trust-bar__item svg {
  width: 26px; height: 26px;
  color: var(--brand-green);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Override the broken --rich variant text colors */
.trust-bar--rich .trust-bar__item {
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
  color: var(--ink-soft);
}
.trust-bar--rich .trust-bar__item span {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}
.trust-bar--rich .trust-bar__item span strong {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
  letter-spacing: -0.005em;
}

/* Hide the 5th item — phone is already in the header */
.trust-bar__item.trust-bar__item--hide-on-redesign { display: none; }

@media (max-width: 900px) {
  .trust-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 480px) {
  .trust-bar__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. SECTION SURFACES — warmer paper, deeper ink.
   -------------------------------------------------------------------------- */
.section--off-white { background: var(--paper); }
.section--gray { background: #F1EFE8; }

p { color: var(--ink); }
.section--dark p { color: #D2D7CF; }
.section--dark strong { color: #fff; }

/* Make table-of-contents-style facts more readable */
.manager-block__facts li { color: var(--ink); }
.manager-block__facts strong { color: var(--ink); }
.manager-block__facts li a { color: var(--brand-green); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. FACILITY TOUR — more breathing room, cleaner captions.
   -------------------------------------------------------------------------- */
.facility-figure {
  border-radius: 10px;
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 24px -16px rgba(0,0,0,.25);
}
.facility-figure figcaption {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%);
}

/* --------------------------------------------------------------------------
   10. REVIEWS STRIP — calmer surface.
   -------------------------------------------------------------------------- */
.reviews-strip__stars { color: var(--brass); }

/* --------------------------------------------------------------------------
   11. PRICING TABLE — keep the existing structure, just calmer green.
   -------------------------------------------------------------------------- */
.unit-table .price,
.section--dark .unit-table .price { color: #C2E2B7; }

/* --------------------------------------------------------------------------
   12. CTA BLOCK — replace neon green with operator green.
   -------------------------------------------------------------------------- */
.cta-block { background: var(--brand-green); }

/* --------------------------------------------------------------------------
   13. ACCESSIBILITY — reduced motion, focus rings, skip link.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .header-utility__rent:hover,
  .header-cta:hover { transform: none !important; }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.main-nav a:focus-visible {
  outline: 3px solid #C2E2B7;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Bulletproof skip-link hide: collapse to 1x1 invisible pixel until focused.
   This is the WCAG-recommended visually-hidden pattern — it cannot be
   defeated by any property collision (no green stripe poking through). */
.skip-link {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: absolute !important;
  top: 0.5rem !important;
  left: 0.5rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0.85rem 1.4rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  z-index: 10001;
  background: var(--green) !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px !important;
  outline: 3px solid #fff !important;
  outline-offset: -3px;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   14. FOOTER — calmer green accent.
   -------------------------------------------------------------------------- */
.site-footer { border-top-color: var(--brand-green); }
.site-footer a:hover,
.footer-col a:hover { color: #B7DCA9; }

/* --------------------------------------------------------------------------
   15. CARDS — deeper text, calmer borders.
   -------------------------------------------------------------------------- */
.card { border-color: var(--hairline); }
.card--bordered-green { border-left-color: var(--brand-green); }
.card h3, .card h4 { color: var(--ink); }
.card p { color: var(--ink-soft); }

/* ==========================================================================
   EXECUTION PASS 2 (2026-05-21) — interior surfaces.
   Header / hero / trust strip were done in Pass 1. This pass takes every
   other section on the homepage and brings it into the new design language:
   calmer green, deeper ink, mixed case, more breathing room, real CTAs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16. SECTION RHYTHM — open up vertical space, refine surfaces.
   -------------------------------------------------------------------------- */
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section--gray { background: #F1EFE8; }
.section--off-white { background: var(--paper); }
.section--dark { background: #181B1A; color: #D2D7CF; }
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }

.text-center.mb-3 { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   17. QUICK-PRICE STRIP — answers "how much?" without scrolling.
   New component. Sits between trust strip and reviews.
   -------------------------------------------------------------------------- */
.price-strip {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
  padding: 1.25rem 0;
}
.price-strip__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem 2rem;
}
.price-strip__label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-green);
  white-space: nowrap;
}
.price-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  align-items: baseline;
  list-style: none;
  padding: 0;
  margin: 0;
}
.price-strip__list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.96rem;
  color: var(--ink-soft);
  font-weight: 400;
}
.price-strip__list b {
  font-weight: 600;
  color: var(--ink);
}
.price-strip__list .price-strip__amt {
  font-family: 'Oswald', var(--font-ui);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--brand-green);
  letter-spacing: -0.005em;
}
.price-strip__cta {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-green);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.price-strip__cta:hover { color: var(--brand-green-hover); }
@media (max-width: 900px) {
  .price-strip__inner { grid-template-columns: 1fr; gap: 0.7rem; }
  .price-strip__list { gap: 0.3rem 1.2rem; }
}

/* --------------------------------------------------------------------------
   18. REVIEWS STRIP — calmer surface, stronger trust signal.
   -------------------------------------------------------------------------- */
.reviews-strip {
  background: var(--paper);
}
.reviews-strip__inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.reviews-strip__stars {
  color: var(--brass);
  font-size: 1.75rem;
  letter-spacing: 3px;
  margin-bottom: 0.5rem;
}
.reviews-strip p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}
.reviews-strip .btn {
  background: #fff;
  color: var(--green-button-hover);
  border: 1.5px solid var(--green-button);
  font-weight: 700;
}
.reviews-strip .btn:hover,
.reviews-strip .btn:focus-visible {
  background: var(--green-button);
  color: #fff;
  border-color: var(--green-button);
}

/* --------------------------------------------------------------------------
   19. MANAGER BLOCK — deeper typography, more confident proportions.
   -------------------------------------------------------------------------- */
.manager-block { background: #fff; }
.manager-block__grid { gap: clamp(2rem, 5vw, 4rem); }
.manager-block__photo img {
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
  border: 1px solid var(--hairline);
}
.manager-block h2 {
  font-family: 'Oswald', var(--font-ui);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
}
.manager-block__quote {
  border-left: 3px solid var(--brand-green);
  background: var(--paper);
  padding: 1.25rem 1.4rem;
  margin: 1.25rem 0 1.5rem;
  border-radius: 0 6px 6px 0;
}
.manager-block__quote p {
  font-family: 'Source Sans 3', var(--font-ui);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 0.5rem;
}
.manager-block__quote cite {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-style: normal;
}
.manager-block__facts {
  border-top: 1px solid var(--hairline);
  margin: 1.25rem 0;
  padding: 0;
}
.manager-block__facts li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.98rem;
  color: var(--ink);
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.manager-block__facts li strong {
  color: var(--ink);
  min-width: 110px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   20. HOW IT WORKS — number marks, clearer rhythm.
   -------------------------------------------------------------------------- */
.steps { gap: clamp(1.5rem, 3vw, 2.5rem); }
.step {
  padding-top: 0;
  padding-left: 0;
}
.step::before {
  position: static;
  display: inline-block;
  width: 44px;
  height: 44px;
  background: var(--brand-green-tint);
  color: var(--brand-green);
  border-radius: 50%;
  font-family: 'Oswald', var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  line-height: 44px;
  opacity: 1;
  margin-bottom: 1rem;
}
.step h3 {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.step p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   21. SECURITY BLOCK — calmer green-light accent, better grid.
   -------------------------------------------------------------------------- */
.security-block__grid { gap: clamp(2rem, 5vw, 4rem); }
.security-block__pillars {
  margin: 1.75rem 0 1.25rem;
  gap: 1.5rem 1.75rem;
}
.security-block__pillars li h3 {
  color: #B7DCA9;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.security-block__pillars li p {
  color: #C2C9BD;
  font-size: 0.95rem;
  line-height: 1.55;
}
.security-photo {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.security-photo__caption {
  background: rgba(15,17,16,.94);
  padding: 1rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
}
.security-photo__caption strong {
  color: #B7DCA9;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.security-photo__caption span { color: #C2C9BD; }

/* --------------------------------------------------------------------------
   22. PRICING TABLE — feel like a menu, not a spreadsheet.
   -------------------------------------------------------------------------- */
.section--dark .unit-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.section--dark .unit-table thead { display: none; } /* Cleaner without column labels — sizes/types are inline */
.section--dark .unit-table td {
  padding: 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
  color: #D2D7CF;
  font-size: 1rem;
}
.section--dark .unit-table tr:last-child td { border-bottom: none; }
.section--dark .unit-table td.size {
  font-family: 'Oswald', var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  width: 18%;
}
.section--dark .unit-table td.price {
  font-family: 'Oswald', var(--font-ui);
  font-size: 1.85rem;
  font-weight: 600;
  color: #C2E2B7;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}
.section--dark .unit-table td.price span {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: #C2C9BD;
  margin-left: 0.15rem;
}
.section--dark .unit-table tr:hover td { background: rgba(255,255,255,.025); }

/* Small/inline button modifier (replaces inline-style buttons in pricing table) */
.btn--small {
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  min-height: 40px;
  border-radius: 6px;
}
/* Small inline button used inside .unit-table rows (dark section).
   Stays readable in all states. Doubled-class + !important so the
   .section--dark link-color cascade can never re-paint these labels. */
.btn--inline.btn--inline {
  background: #fff !important;
  color: var(--green-button-hover) !important;   /* #2F5F26 deep green */
  border-color: #fff !important;
  font-weight: 700 !important;
}
.btn--inline.btn--inline:hover,
.btn--inline.btn--inline:focus-visible {
  background: var(--green-button) !important;    /* #3F7A33 — solid dark green */
  color: #fff !important;                        /* white text — no fade */
  border-color: var(--green-button) !important;
}

/* Mobile pricing cards — refined */
.unit-cards {
  gap: 1rem;
  grid-template-columns: 1fr;
}
.unit-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 1.25rem 1.35rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  align-items: center;
}
.unit-card__name {
  grid-column: 1;
  font-family: 'Oswald', var(--font-ui);
  font-size: 1.15rem;
  color: #fff;
  font-weight: 600;
}
.unit-card__size {
  grid-column: 1;
  font-size: 0.9rem;
  color: #C2C9BD;
}
.unit-card__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: 'Oswald', var(--font-ui);
  font-size: 1.85rem;
  font-weight: 600;
  color: #C2E2B7;
  text-align: right;
  letter-spacing: -0.01em;
}
.unit-card__price span {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: #C2C9BD;
}
.unit-card .btn {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
}

/* Pricing footer reassurance */
.pricing-reassurance {
  margin-top: 2rem;
  text-align: center;
}
.pricing-reassurance p {
  color: #C2C9BD;
  font-size: 0.95rem;
  margin: 0;
}
.pricing-reassurance p + p {
  color: #B7DCA9;
  font-weight: 600;
  margin-top: 0.4rem;
}
.pricing-reassurance .btn { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   23. STORAGE-TYPES & LOCATIONS — proper link-card treatment.
   Replaces the inline `text-decoration:none;color:inherit` patterns.
   -------------------------------------------------------------------------- */
.link-card {
  display: block;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: border-color .18s ease, box-shadow .25s ease,
              transform .25s ease;
}
.link-card:hover {
  border-color: var(--brand-green);
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.22);
  transform: translateY(-2px);
  color: var(--ink);
}
.link-card h3 {
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.link-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.link-card--accent {
  border-left: 4px solid var(--brand-green);
  padding-left: 1.4rem;
}
.link-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-green);
}
.link-card:hover .link-card__arrow { color: var(--brand-green-hover); }
.link-card--center { text-align: center; }
.link-card--center h3 { font-size: 1rem; }

/* --------------------------------------------------------------------------
   24. WHY-LOCAL COMPARISON — replace ✕/✓ inline-style mess with proper rows.
   -------------------------------------------------------------------------- */
.compare-card {
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
}
.compare-card + .compare-card { margin-top: 1.25rem; }
.compare-card--negative {
  background: #1F2220;
  border: 1px solid rgba(255,255,255,.06);
  color: #C2C9BD;
}
.compare-card--positive {
  background: #fff;
  border: 1.5px solid var(--brand-green);
}
.compare-card h4 {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.compare-card--negative h4 { color: #B7DCA9; }
.compare-card--positive h4 { color: var(--brand-green); }
.compare-list { padding: 0; margin: 0; list-style: none; }
.compare-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.compare-list li::before {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-ui);
}
.compare-card--negative .compare-list li { color: #C2C9BD; }
.compare-card--negative .compare-list li::before {
  content: '×';
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
}
.compare-card--positive .compare-list li { color: var(--ink); }
.compare-card--positive .compare-list li::before {
  content: '✓';
  background: var(--brand-green-tint);
  color: var(--brand-green);
  font-size: 0.78rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   25. RECENTLY UPGRADED — cleaner cards, calmer icon treatment.
   -------------------------------------------------------------------------- */
.recently-upgraded__list { gap: 1rem; }
.recently-upgraded__list li {
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand-green);
  border-radius: 8px;
  padding: 1.15rem 1.35rem;
  box-shadow: none;
}
.recently-upgraded__icon {
  width: 38px;
  height: 38px;
  background: var(--brand-green-tint);
  color: var(--brand-green);
  border-radius: 50%;
}
.recently-upgraded__list h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.recently-upgraded__list p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   26. FAQ (homepage + location + storage-type pages — .faq-item accordion)
   Renders as discrete white cards with proper internal padding, calmer
   borders, and a green accent on the open state.

   NOTE: styles.css has TWO competing .faq-item rules (line 657 zero-padding
   row-divider style, line 1080 grid-card style with green top border). Both
   have same specificity. To guarantee my rules win regardless of cascade
   surprises, I use the doubled-class trick (.faq-item.faq-item raises
   specificity from (0,0,1,0) → (0,0,2,0)) plus a few !important guards on
   the properties most likely to leak through.
   -------------------------------------------------------------------------- */
.faq-item.faq-item {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  border-top: 1px solid var(--hairline) !important;   /* defeat line 1080's 3px green */
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 0.75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.faq-item.faq-item:first-of-type { border-top: 1px solid var(--hairline) !important; }
.faq-item.faq-item:hover { border-color: #cdd2c4 !important; }
.faq-item.faq-item.open {
  border-color: var(--green-button) !important;
  box-shadow: 0 10px 24px -18px rgba(0,0,0,.18);
}
.faq-question {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.4;
  padding-right: 1.5rem;
}
.faq-question::after {
  font-size: 1.6rem;
  color: var(--green);                /* signature lime accent for the +/- */
  line-height: 1;
  font-weight: 300;
}
.faq-answer { padding-top: 0; }
.faq-item.open .faq-answer { padding-top: 0.85rem; }
.faq-answer p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0.6rem;
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--green-button-hover); font-weight: 600; }
.faq-answer a:hover { color: var(--green-button); }

/* --------------------------------------------------------------------------
   27. CLOSING CTA BLOCK — operator green, refined typography.
   -------------------------------------------------------------------------- */
/* Closing CTA — confident lime brand block with high-contrast white primary */
.cta-block {
  background: var(--green);                 /* signature lime #5BA847 */
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.cta-block h2 {
  color: #fff;
  font-family: 'Oswald', var(--font-ui);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  line-height: 1.1;
  text-transform: none;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.cta-block p {
  color: rgba(255,255,255,.95);
  font-size: 1.1rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
/* Primary CTA inside lime block — white button with deep-green label */
.cta-block__actions .btn--white {
  background: #fff;
  color: var(--green-button-hover);         /* #2F5F26 — deep readable green */
  border-color: #fff;
  font-weight: 700;
  min-height: 54px;
  padding: 1.05rem 1.9rem;
  font-size: 1.02rem;
}
.cta-block__actions .btn--white:hover,
.cta-block__actions .btn--white:focus-visible {
  background: var(--charcoal-dark);
  color: #fff;
  border-color: var(--charcoal-dark);
  transform: translateY(-1px);
}
.cta-block__actions .btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.75);
  font-weight: 600;
  min-height: 54px;
  padding: 1.05rem 1.9rem;
  font-size: 1.02rem;
}
.cta-block__actions .btn--ghost:hover,
.cta-block__actions .btn--ghost:focus-visible {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  color: #fff;
}

/* --------------------------------------------------------------------------
   28. FOOTER — calmer typography, refined hierarchy.
   -------------------------------------------------------------------------- */
.site-footer {
  background: #0F1411;
  color: #9AA29A;
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
}
.footer-brand img {
  height: 44px;
  opacity: 0.95;
  margin-bottom: 1.25rem;
}
.footer-brand p {
  color: #9AA29A;
  line-height: 1.65;
  margin-bottom: 0.85rem;
}
.footer-brand strong {
  color: #E5E8E2;
  font-weight: 600;
}
.footer-brand a {
  color: #B7DCA9;
  font-weight: 500;
}
.footer-brand a:hover { color: #fff; }

.footer-brand__address { margin-top: 1.25rem; }
.footer-brand__contact { margin-top: 0.25rem; line-height: 1.85; }
.footer-brand__hours,
.footer-brand__access {
  margin-top: 1rem;
  font-size: 0.9rem;
}
.footer-brand__hours span { color: #9AA29A; }
.footer-brand__access strong { display: inline; }
.footer-brand__access span { color: #B7DCA9; }
.footer-brand__social { margin-top: 1rem; }
.footer-brand__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: #9AA29A;
}
.footer-brand__social a:hover { color: #B7DCA9; }

.footer-col h4 {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E5E8E2;
  margin-bottom: 1rem;
}
.footer-col__h4-stack { margin-top: 1.5rem; }
.footer-col a {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 400;
  color: #9AA29A;
  padding: 0.35rem 0;
  display: block;
}
.footer-col a:hover { color: #B7DCA9; }
.footer-col__pay {
  margin-top: 0.85rem;
  color: #B7DCA9 !important;
  font-weight: 600;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #9AA29A;       /* was #7C8480 — bumped to clear AA on #0F1411 (6.05:1) */
}
.footer-bottom p { margin-bottom: 0; }
.footer-bottom a { color: #B7DCA9; }
.footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   29. MOBILE STICKY CTA — match new design language.
   -------------------------------------------------------------------------- */
.mobile-cta {
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,.18);
}
.mobile-cta a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  gap: 0.5rem;
  min-height: 60px;
}
.mobile-cta a svg {
  width: 18px;
  height: 18px;
}
.mobile-cta__rent {
  background: var(--green-button);
  color: #fff;
  font-weight: 700;
}
.mobile-cta__rent:hover,
.mobile-cta__rent:focus-visible {
  background: var(--green-button-hover);
  color: #fff;
}
.mobile-cta__call {
  background: #fff;
  color: var(--ink);
  border-left: 1px solid var(--hairline);
}
.mobile-cta__call:hover,
.mobile-cta__call:focus-visible {
  background: var(--brand-green-tint);
  color: var(--brand-green-hover);
}
@media (max-width: 900px) {
  body.has-sticky-cta { padding-bottom: 64px; }
  /* Make sure the hero phone link sits above the sticky bar on mobile */
  .hero { padding-bottom: 1rem; }
}

/* --------------------------------------------------------------------------
   30. BREADCRUMBS — calmer surface.
   -------------------------------------------------------------------------- */
.breadcrumbs {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding: 0.85rem 0;
}
.breadcrumbs ol { font-size: 0.85rem; color: var(--ink-soft); }
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--brand-green); }
.breadcrumbs li::after { color: var(--hairline); }

/* --------------------------------------------------------------------------
   31. PAGE HEADER (inner pages) — match the new tone.
   -------------------------------------------------------------------------- */
.page-header {
  background: #181B1A;
  /* Tightened ~30% from clamp(3rem,5vw,4rem)/clamp(2rem,4vw,3rem) so interior
     heroes feel conversion-focused rather than oversized. Homepage .hero is
     untouched (it is a separate component). */
  padding: clamp(2rem, 3.5vw, 2.75rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.page-header::after { background: var(--brand-green); }
/* Cap the hero text block for readability + balance against the 1200px page
   container; elements stay left-aligned with the content sections below. */
.page-header h1 {
  color: #fff;
  text-transform: none;
  max-width: 880px;
  margin-bottom: 1rem;   /* breathing room: h1 line-height is 1.08, so the
                            lead needs a real gap or it touches the heading */
}
.page-header .lead,
.page-header > .container > p { max-width: 720px; }
.page-header .lead { color: #D2D7CF; margin-top: 0; }

/* --------------------------------------------------------------------------
   32. Reduce inline-style fallout — universal cleanups for stranded patterns.
   These class-based selectors are safe to apply when the markup still has
   inline styles (the inline wins for that element only; other elements pick
   these up).
   -------------------------------------------------------------------------- */
/* The "lead" inline style="max-width:600px" pattern: keep behavior but
   give it the right color now that --gray-500 is gone. */
.section--dark .lead[style*="color:var(--gray-300)"] { color: #D2D7CF !important; }

/* --------------------------------------------------------------------------
   32b. WHY-LOCAL GRID — vertically centered, generous gap.
   -------------------------------------------------------------------------- */
.why-local__grid {
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   33. UTILITIES — small helpers used by the cleaned-up markup.
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.u-center { text-align: center; }
.u-stack-2xl { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   34. INNER-PAGE UTILITIES — used by the rewritten location & service pages.
   -------------------------------------------------------------------------- */

/* Plain check-mark serve list — replaces inline-styled ✓ lists across pages */
.serve-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.serve-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.75rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--hairline);
}
.serve-list li:last-child { border-bottom: 0; }
.serve-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 16px;
  height: 16px;
  background: var(--brand-green-tint);
  border-radius: 50%;
}
.serve-list li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.05rem;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--brand-green);
  border-bottom: 2px solid var(--brand-green);
  transform: rotate(-45deg);
}

/* Info card — used for "Find us" address blocks on inner pages */
.info-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--brand-lime);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
}
.info-card h3 {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  color: var(--ink);
}
.info-card p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.info-card p a {
  color: var(--brand-green);
  font-weight: 700;
  font-size: 1.1rem;
}
.info-card__meta {
  font-size: 0.88rem !important;
  color: var(--ink-soft) !important;
  border-top: 1px solid var(--hairline);
  padding-top: 0.85rem;
}
.info-card__meta strong { color: var(--ink); }
.info-card__btn {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
}

/* Dark-section variant of link-card — solid charcoal with lime accent so the
   cards read as substantial elements integrated INTO the section, not as
   ghost overlays floating ON TOP of it. */
.link-card--dark {
  background: #1F2422;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--green);
  color: #E5E8E2;
  transition: background .15s ease, border-color .15s ease,
              transform .2s ease, box-shadow .2s ease;
}
.link-card--dark:hover,
.link-card--dark:focus-visible {
  background: #252A28;
  border-color: rgba(255,255,255,.14);
  border-left-color: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.55);
}
.link-card--dark h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.link-card--dark p {
  color: #C2C9BD;
}
.link-card--dark .link-card__arrow {
  color: var(--green-light);
}
.link-card--dark:hover .link-card__arrow {
  color: #fff;
}

/* Inline pricing card — used on storage-type pages with a price-tile sidebar */
.price-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--brand-lime);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
}
.price-card h3 {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--ink);
}
.price-card__row {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
}
.price-card__row:last-of-type { border-bottom: 0; }
.price-card__row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.price-card__row-head strong {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.price-card__row-head .amt {
  font-family: 'Oswald', var(--font-ui);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--brand-green);
  letter-spacing: -0.005em;
}
.price-card__row-head .amt span {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 0.15rem;
}
.price-card__row p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}
.price-card__note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
  margin: 0.5rem 0 1rem;
}
.price-card .btn {
  display: block;
  text-align: center;
  width: 100%;
}

/* Service-page hero — calmer dark surface replacing the old .hero-rv / .hero-boat */
.service-hero {
  background: #181B1A;
  color: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  margin-top: var(--header-height-new);
  border-bottom: 4px solid var(--brand-lime);
}
.service-hero .eyebrow {
  color: #B7DCA9;
}
.service-hero h1 {
  font-family: 'Oswald', var(--font-ui);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: none;
  color: #fff;
  margin: 0.4rem 0 1rem;
}
.service-hero p {
  font-size: 1.1rem;
  line-height: 1.55;
  color: #D2D7CF;
  max-width: 640px;
  margin-bottom: 1.5rem;
}
.service-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
}
.service-hero__ctas .btn--secondary {
  color: #B7DCA9;
  border-color: #B7DCA9;
}
.service-hero__ctas .btn--secondary:hover {
  background: #B7DCA9;
  color: var(--ink);
  border-color: #B7DCA9;
}

/* "Other areas / Explore more" cross-link grids */
.cross-links { gap: 1rem; }

/* Contact info stack — replaces emoji icons + inline-styled email/phone block */
.contact-info { display: block; }
.contact-info__row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
}
.contact-info__row:first-of-type { padding-top: 0; }
.contact-info__row:last-of-type { border-bottom: 0; }
.contact-info__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-green-tint);
  color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-info__row h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.contact-info__row p {
  margin: 0 0 0.35rem;
  color: var(--ink);
  line-height: 1.55;
}
.contact-info__row p a {
  color: var(--brand-green);
  font-weight: 600;
}
.contact-info__big {
  font-size: 1.4rem;
  font-weight: 700;
}
.contact-info__meta {
  color: var(--ink-soft) !important;
  font-size: 0.88rem !important;
  margin-top: 0.25rem;
}

/* Stacked page-header CTAs (location + service page headers) */
.page-header__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Page-header is intentionally dark (#181B1A from rule 31 above).
   Make sure the lead paragraph reads against that dark background. */
.page-header h1 { color: #fff; text-transform: none; }
.page-header p { color: #D2D7CF; }
.page-header .lead { color: #D2D7CF; }
.page-header .eyebrow { color: #B7DCA9; }

/* Map embed container */
.map-embed {
  border-radius: 10px;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.5);
}

/* Stack utilities */
.u-stack-md { margin-top: 1rem; }
.u-stack-lg { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   35. RESOURCE-PAGE COMPONENTS — used by size-guide, costs, how-to,
   what-to-expect, climate-controlled. These were missing CSS.
   -------------------------------------------------------------------------- */

/* Native <details>-based FAQ list used by the informational resource pages.
   Renders as discrete cards (not just bordered rows) so they read as
   intentional, not unfinished. Two variants based on surface: light pages
   get white cards with hairline borders; dark sections get charcoal cards
   with white headings and a lime accent on the icon. */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-list details {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-list details:hover {
  border-color: #cdd2c4;
}
.faq-list details[open] {
  border-color: var(--green-button);
  box-shadow: 0 10px 24px -18px rgba(0,0,0,.18);
}
.faq-list details summary {
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 2rem;
  outline: none;
  line-height: 1.4;
}
.faq-list details summary::-webkit-details-marker { display: none; }
.faq-list details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -0.1rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--green);                    /* signature lime accent */
  line-height: 1;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list details > p,
.faq-list details > div {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.faq-list details > p a,
.faq-list details > div a {
  color: var(--green-button-hover);
  font-weight: 600;
}
.faq-list details summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Dark-section variant — dark charcoal card, white heading, soft-gray body,
   lime accent icon. Triggers automatically when .faq-list sits inside
   .section--dark. */
.section--dark .faq-list details {
  background: #1F2422;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--green);
}
.section--dark .faq-list details:hover {
  background: #232826;
  border-color: rgba(255,255,255,.12);
  border-left-color: var(--green);
}
.section--dark .faq-list details[open] {
  background: #232826;
  border-color: rgba(255,255,255,.14);
  border-left-color: var(--green);
  box-shadow: 0 14px 32px -22px rgba(0,0,0,.6);
}
.section--dark .faq-list details summary {
  color: #fff;
}
.section--dark .faq-list details summary::after {
  color: var(--green-light);              /* lighter lime so it pops on charcoal */
}
.section--dark .faq-list details > p,
.section--dark .faq-list details > div {
  color: #C2C9BD;
}
.section--dark .faq-list details > p a,
.section--dark .faq-list details > div a {
  color: var(--green-light);
}
.section--dark .faq-list details > p a:hover,
.section--dark .faq-list details > div a:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   36. SIZE-GUIDE CARDS — replaces the inline-styled "Best for:" cards that
   were unreadable (gray-on-white and white-on-white) because the inline
   colors were tuned for a dark section the cards no longer sit in.
   -------------------------------------------------------------------------- */
.size-card-grid {
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.size-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 30px -22px rgba(0,0,0,.18);
}
.size-card--popular {
  border: 2px solid var(--green);
  padding-top: 2.25rem;
}
.size-card__badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.3rem 0.85rem;
  border-radius: 0 0 4px 4px;
  white-space: nowrap;
}
.size-card__head {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.size-card__name {
  font-family: 'Oswald', var(--font-ui);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green-button);              /* deep green for AA on white */
  line-height: 1;
  letter-spacing: -0.01em;
}
.size-card__dims {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 0.45rem;
}
.size-card__price {
  font-family: 'Oswald', var(--font-ui);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.6rem;
  letter-spacing: -0.005em;
}
.size-card__price span {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 0.15rem;
}
.size-card__label {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);                       /* readable on white */
  margin-bottom: 0.6rem;
}
.size-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.size-card__list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);                       /* darker than ink-soft so it reads well */
}
.size-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 14px;
  height: 14px;
  background: var(--brand-green-tint);
  border-radius: 50%;
}
.size-card__list li::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.85rem;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--green-button);
  border-bottom: 2px solid var(--green-button);
  transform: rotate(-45deg);
}
.size-card__note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.size-card__cta {
  width: 100%;
  margin-top: auto;
}

/* Outdoor-lot mini-cards in the same page */
.outdoor-lot-grid {
  max-width: 760px;
  margin: 0 auto;
  gap: 1.25rem;
}
.outdoor-lot {
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  text-align: center;
}
.outdoor-lot__price {
  font-family: 'Oswald', var(--font-ui);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green-button);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.outdoor-lot__price span {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 0.2rem;
}
.outdoor-lot h3 {
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.outdoor-lot p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 1.1rem;
}
/* When outdoor-lot is inside a dark section, swap to dark card */
.section--dark .outdoor-lot {
  background: #1F2422;
  border-color: rgba(255,255,255,.08);
  border-left-color: var(--green);
}
.section--dark .outdoor-lot h3 { color: #fff; }
.section--dark .outdoor-lot p { color: #C2C9BD; }

/* Cost-page pricing table (different from .unit-table) */
.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1rem 0;
}
.pricing-table th,
.pricing-table td {
  padding: 0.9rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.96rem;
  vertical-align: middle;
}
.pricing-table thead th {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--hairline);
}
.pricing-table tbody tr:hover td { background: var(--paper); }
.pricing-table td strong { color: var(--ink); }

/* End of redesign overlay (Pass 2) */