/* ============================================
   TEANECK HAND CAR WASH — MAIN STYLESHEET
   ============================================ */
/* Fonts loaded via HTML <link> tags with preconnect for performance */

/* --- Custom Properties --- */
:root {
  --blue: #0A4FA6;
  --blue-dark: #083d87;
  --yellow: #F5C800;
  --yellow-dark: #e0b400;
  --dark: #1A1A1A;
  --gray: #666E7A;
  --light: #F5F6F8;
  --white: #FFFFFF;
  --text: #374151;
  --border: #E5E7EB;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius: 8px;
  --shadow: 0 2px 16px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --max-w: 1100px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top keeps anchor targets (e.g. membership.html#join and the
   skip link's #main-content) clear of the 68px sticky header. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; scroll-padding-bottom: 84px; }

/* Body prose links: blue alone is only 1.52:1 against the surrounding grey
   text, so colour cannot be the sole cue (WCAG 1.4.1). Underline them. */
main p a:not([class]),
main li a:not([class]),
.contact-value a,
.faq-answer a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
main p a:not([class]):hover,
main p a:not([class]):focus-visible,
main li a:not([class]):hover,
main li a:not([class]):focus-visible { text-decoration-thickness: 2px; }

/* Restore paragraph spacing inside the legal pages. The global reset zeroes
   every margin and nothing restored it, so 23 paragraphs in the privacy
   policy and 17 in the terms ran together as one undifferentiated block. */
.legal-prose p { margin-bottom: 1.1em; }
.legal-prose p:last-child { margin-bottom: 0; }
body { font-family: var(--font-body); color: var(--text); line-height: 1.6; background: var(--white); animation: page-fade-in 0.2s ease-out both; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.15; color: var(--dark); }
h1 { font-size: clamp(28px, 5vw, 50px); }
h2 { font-size: clamp(22px, 3.5vw, 34px); }
h3 { font-size: clamp(16px, 2vw, 20px); }

/* --- Container --- */
.container { max-width: var(--max-w); margin: 0 auto; width: 100%; padding: 0 24px; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
  white-space: nowrap;
}
.btn-primary  { background: var(--yellow); color: var(--dark); border-color: var(--yellow); }
.btn-primary:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); }
.btn-outline  { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.8); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
/* Light-background counterpart to .btn-outline. .btn-outline is white-on-white
   and is ONLY safe on dark surfaces (.hero, .cta-banner). Use this one anywhere
   the background is light, or the button becomes invisible. */
.btn-outline-dark { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline-dark:hover { background: rgba(10,79,166,0.08); }
.btn-blue     { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-dark     { background: var(--dark); color: var(--white); border-color: var(--dark); }
.btn-lg { padding: 18px 36px; font-size: 17px; }
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-block { display: block; text-align: center; width: 100%; }

/* ============================================
   BADGE
   ============================================ */
.badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}

/* ============================================
   SECTION LAYOUTS
   ============================================ */
.section { padding: 72px 24px; }
.section-light { background: var(--light); }
.section-dark  { background: var(--dark); }
.section-blue  { background: var(--blue); }

.section-header { text-align: center; margin-bottom: 52px; }
.section-header h2 { margin-bottom: 10px; }
.section-header p  { font-size: 17px; color: var(--gray); max-width: 560px; margin: 0 auto; }
.section-header.left { text-align: left; }
.divider {
  width: 56px; height: 4px;
  background: var(--yellow);
  border-radius: 2px;
  margin: 14px auto 0;
}
.divider-left { margin-left: 0; }

/* ============================================
   GRIDS
   ============================================ */
.grid   { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--blue);
  border-bottom: 3px solid var(--yellow);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 24px;
  max-width: 1200px; margin: 0 auto;
}
.site-logo { display: flex; flex-direction: column; line-height: 1.2; }
.logo-name    { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--white); }
.logo-sub     { font-size: 10px; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 0.8px; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  color: rgba(255,255,255,0.95);
  font-family: var(--font-heading); font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 8px 10px; border-radius: 4px;
  transition: color 0.15s;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--yellow); }
.site-nav a.active:not(.nav-cta) {
  color: var(--yellow);
  border-bottom: 2px solid var(--yellow);
}
.site-nav .nav-cta {
  background: var(--yellow); color: var(--dark) !important;
  padding: 8px 16px !important; font-weight: 700 !important;
  margin-left: 8px; border-radius: var(--radius);
}
.site-nav .nav-cta:hover { background: var(--yellow-dark) !important; }

.menu-toggle {
  display: none; background: none;
  border: none; border-radius: 4px;
  padding: 10px 12px; cursor: pointer; color: white; font-size: 20px; line-height: 1;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  min-height: 44px; min-width: 44px;
}
.mobile-nav { display: none; background: #0A3D82; border-top: 1px solid rgba(255,255,255,0.1); }
.mobile-nav a {
  display: block; color: rgba(255,255,255,0.95);
  font-family: var(--font-heading); font-weight: 600;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 15px 24px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.active:not(.nav-cta) { color: var(--yellow) !important; font-weight: 700; }
.mobile-nav .nav-cta {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  margin: 12px 16px 16px;
  border-radius: var(--radius);
  text-align: center;
  border-bottom: none !important;
}
/* The open panel is ~386px tall and lives inside .site-header, which is position:sticky
   top:0 (71px tall closed). On a landscape phone (e.g. 852x393) the sticky box exceeds the
   viewport, so sticky pins its TOP edge and everything below the fold — including the last
   item, the Call Us CTA — becomes permanently unreachable: the panel had no internal scroll
   of its own. Capping it to the space below the header and letting it scroll restores access.
   (Note: nothing in this codebase locks body scroll; the cause is the sticky pin.) */
/* .mobile-nav.open below creates a clipping context (overflow-y:auto), and the global
   :focus-visible ring uses outline-offset:3px — which would paint outside that box and be
   clipped, exactly as it was on .faq-item. Pull the ring inside for the nav links.
   EXCLUDE .nav-cta: it has `background: var(--yellow) !important` and the nav's focus ring is
   also yellow, so an inset ring would be yellow-on-yellow (1.00:1 — invisible) on the primary
   phone-call CTA. It also carries `margin: 12px 16px 16px`, so its outset ring fits inside the
   panel and was never clipped in the first place. Left at +3px, where it sits on the #0A3D82
   panel at 6.56:1. */
.mobile-nav a:not(.nav-cta):focus-visible { outline-offset: -3px; }

.mobile-nav.open {
  display: block;
  max-height: calc(100vh - 71px);   /* fallback for browsers without dvh */
  max-height: calc(100dvh - 71px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative; overflow: hidden;
  background: #082F6E;
  padding: 88px 24px 80px; text-align: center; color: white;
}
.hero h1 { color: white; margin-bottom: 18px; }
.hero-sub {
  font-size: clamp(15px, 2vw, 18px); color: rgba(255,255,255,0.85);
  max-width: 580px; margin: 0 auto 36px; line-height: 1.7;
}
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-trust {
  margin-top: 32px; display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.65);
}
.hero-trust-item { display: flex; align-items: center; gap: 6px; }
.hero-trust .dot { width: 4px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 50%; }

/* ============================================
   INFO BAR
   ============================================ */
.info-bar { background: var(--yellow); padding: 13px 24px; }
.info-bar-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--dark);
}
.info-bar-item { display: flex; align-items: center; gap: 7px; }

/* ============================================
   MEMBERSHIP SPOTLIGHT
   ============================================ */
.membership-intro {
  background: #0D1F3C; color: white; text-align: center;
  padding: 72px 24px;
}
.membership-intro h2 { color: white; margin-bottom: 10px; }
.membership-intro p { color: rgba(255,255,255,0.85); font-size: 17px; max-width: 560px; margin: 0 auto 48px; }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: white; border-radius: var(--radius);
  padding: 32px 24px; box-shadow: var(--shadow); text-align: center;
}
.card.featured { border: 2px solid var(--yellow); }
.card-icon { font-size: 40px; margin-bottom: 14px; }
.card-icon svg { display: block; margin: 0 auto; }
.card h3 { margin-bottom: 10px; }
.card p  { font-size: 14px; line-height: 1.65; color: var(--gray); }
.card .price {
  font-family: var(--font-heading); font-size: 32px;
  font-weight: 800; color: var(--blue); margin: 10px 0 12px;
}

/* ============================================
   PACKAGE CARDS (Wash tiers)
   ============================================ */
.package {
  border-radius: var(--radius); overflow: hidden;
  /* 2px to match .package.popular so cards in a row align to the same inner
     width — a 1px/2px mismatch shifted the popular card's edges by 1px. */
  border: 2px solid var(--border); display: flex; flex-direction: column;
}
.package.popular { border-color: var(--yellow); }
.package-header { padding: 28px 20px; text-align: center; }
.package-name { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: white; }
.package-price {
  font-family: var(--font-heading); font-size: 40px;
  font-weight: 800; color: white; margin: 8px 0 0; line-height: 1;
}
/* Sedan/SUV sub-line under a wash package price. SUVs are +$3 on every wash, which is a
   material price condition and has to appear with the price, not in a footnote. */
.package-price-note {
  /* Full white, not rgba(...,0.9): at 90% alpha this measured 4.27:1 on the Silver
     header (#6B7280), under the 4.5:1 WCAG 1.4.3 minimum for 13px text. Hierarchy
     comes from size and weight instead of opacity. Worst case is now 4.83:1. */
  font-size: 13px; font-weight: 600; color: #fff;
  margin-top: 6px; letter-spacing: 0.5px;
  white-space: nowrap;
}
.package-body { padding: 24px; background: white; flex: 1; }
.package-feature {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #f0f0f0;
  font-size: 14px; color: #444;
}
.package-feature:last-child { border-bottom: none; }
.package-feature::before { content: "✓"; color: var(--blue); font-weight: 800; flex-shrink: 0; }
.package-footer { padding: 0 24px 24px; background: white; }

/* ============================================
   MEMBERSHIP TIERS
   ============================================ */
.tier {
  border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--border); display: flex; flex-direction: column;
  background: white;
}
.tier.popular { border-color: var(--yellow); }
.tier-header { padding: 28px 20px; text-align: center; }
.tier-name { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: white; margin-bottom: 16px; }
.tier-prices { display: flex; gap: 20px; justify-content: center; }
.tier-price-group { text-align: center; }
.tier-price-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: white; margin-bottom: 2px; }
.tier-price-amount { font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: white; line-height: 1; }
.tier-body { padding: 20px 24px; flex: 1; }
.tier-feature {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #f0f0f0;
  font-size: 14px; color: #444;
}
.tier-feature:last-child { border-bottom: none; }
.tier-feature::before { content: "✓"; color: var(--blue); font-weight: 800; flex-shrink: 0; }
.tier-footer { padding: 0 24px 24px; }

/* ============================================
   PROMO STRIPS
   ============================================ */
.promo-item {
  background: white; border-left: 4px solid var(--yellow);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
}
.promo-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); font-weight: 600; margin-bottom: 4px; }
.promo-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--dark); margin-bottom: 6px; }
.promo-desc  { font-size: 14px; color: var(--gray); line-height: 1.55; }

/* ============================================
   WHY ITEMS
   ============================================ */
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-icon  { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 3px; }
.why-title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; margin-bottom: 5px; color: white; }
.why-desc  { font-size: 14px; color: rgba(255,255,255,0.68); line-height: 1.6; }

/* ============================================
   HOURS TABLE
   ============================================ */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td, .hours-table th { padding: 13px 4px; border-bottom: 1px solid #eee; font-size: 15px; font-weight: 400; text-align: left; }
.hours-table th[scope="row"] { font-family: var(--font-heading); font-weight: 600; color: var(--blue); }
.hours-table td:last-child { text-align: right; color: #444; }
.hours-table tr:last-child td, .hours-table tr:last-child th { border-bottom: none; }

/* ============================================
   CONTACT BLOCK
   ============================================ */
.contact-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.contact-item:last-child { margin-bottom: 0; }
.contact-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.contact-label { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--dark); margin-bottom: 3px; }
.contact-value { font-size: 14px; color: var(--gray); line-height: 1.6; }
.contact-value a { color: var(--blue); font-weight: 600; }

/* ============================================
   STAT BOX
   ============================================ */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stat-item { text-align: center; }
.stat-number { font-family: var(--font-heading); font-size: 40px; font-weight: 800; color: var(--blue); line-height: 1; }
.stat-label  { font-size: 11px; color: #5C6370; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }

/* ============================================
   MAP
   ============================================ */
.map-embed iframe { width: 100%; border: 0; border-radius: var(--radius); display: block; }

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner { background: var(--blue); color: white; text-align: center; padding: 72px 24px; }
.cta-banner h2 { color: white; margin-bottom: 12px; }
.cta-banner p  { color: rgba(255,255,255,0.85); font-size: 17px; margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { background: var(--dark); padding: 52px 24px 28px; }
.footer-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
  margin-bottom: 40px;
}
.footer-brand .logo-name { font-size: 18px; color: white; margin-bottom: 10px; display: block; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; }
.footer-col-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(255,255,255,0.72); margin-bottom: 16px;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.6); transition: color 0.15s; }
.footer-links a:hover { color: var(--yellow); }
.footer-bottom {
  max-width: var(--max-w); margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px; display: flex;
  justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.60);
}
.footer-bottom a { color: rgba(255,255,255,0.75); }
.footer-bottom a:hover { color: var(--yellow); }

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.page-hero {
  position: relative; overflow: hidden;
  background: #082F6E;
  padding: 60px 24px; text-align: center;
}
.page-hero h1 { color: white; margin-bottom: 12px; }
.page-hero p  { color: rgba(255,255,255,0.85); font-size: 17px; max-width: 520px; margin: 0 auto; }

/* ============================================
   STEP CARDS (booking)
   ============================================ */
.step-card { background: white; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); margin-bottom: 16px; }
.step-card:last-child { margin-bottom: 0; }
.step-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.step-number {
  width: 42px; height: 42px; background: var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-heading); font-weight: 800; font-size: 18px;
  flex-shrink: 0;
}
.step-info strong { font-family: var(--font-heading); font-size: 16px; display: block; margin-bottom: 3px; }
.step-info span   { font-size: 14px; color: var(--gray); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* The desktop nav needs ~1044px (7 items + logo + padding, measured at the
   real font metrics). Switching to the hamburger only at 768px meant that
   between 769px and ~1044px the nav link text wrapped inside the fixed 68px
   header — which is every iPad in landscape and any narrowed laptop window. */
@media (max-width: 1060px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
}
/* Above the hamburger breakpoint the mobile panel must stay hidden even if it
   was left open — otherwise rotating a phone to landscape leaves the stacked
   menu on screen with no visible button to close it. */
@media (min-width: 1061px) {
  .mobile-nav,
  .mobile-nav.open { display: none; }
}

@media (max-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .section { padding: 52px 20px; }
  .section-header { margin-bottom: 36px; }
  .hero { padding: 60px 20px 52px; }
  .hero-trust { gap: 14px; }
  .info-bar-inner { gap: 12px; }
}
@media (max-width: 540px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-btns .btn { display: block; width: 100%; max-width: 300px; text-align: center; }
  .hero-btns { flex-direction: column; align-items: center; }
  .info-bar-inner { flex-direction: column; text-align: center; gap: 8px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .page-hero { padding: 48px 20px; }
}

/* .btn sets white-space:nowrap, which is correct on wider screens but forced the long
   "View All Membership Details" label to 332px — wider than the 320px and 360px
   viewports minus container padding — scrolling the whole homepage sideways and
   failing WCAG 1.4.10 Reflow. Allowing wrapping below 400px fixes it; buttons whose
   labels already fit are unaffected, since text only wraps when it must. */
@media (max-width: 400px) {
  /* .btn sets line-height:1, which is fine for a single line but makes wrapped
     lines collide, so restore leading here too. */
  .btn { white-space: normal; line-height: 1.25; }
  .btn-lg { padding: 16px 24px; }
}

/* ============================================
   PHOTO BACKGROUND SUPPORT
   ============================================ */
.hero-bg,
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
}
.hero-overlay,
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8,30,70,0.88) 0%, rgba(10,79,166,0.60) 100%);
  z-index: 1;
}
.hero > .container,
.page-hero > .container {
  position: relative;
  z-index: 2;
}

/* ============================================
   EXOTIC CAR PHOTO PROOF STRIP (Homepage)
   ============================================ */
.photo-proof { background: var(--light); }
.photo-proof-heading {
  text-align: center;
  padding: 40px 24px 22px;
}
.photo-proof-sub {
  color: var(--gray);
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.6;
}
.photo-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 300px;
  gap: 4px;
}
.photo-strip-item { position: relative; overflow: hidden; }
.photo-strip-item img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.5s ease; display: block;
}
.photo-strip-item:hover img { transform: scale(1.06); }
.photo-strip-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 32px 14px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  color: white; font-family: var(--font-heading);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  /* Always visible. These captions ("Ferrari 488, Hand Wash") are the proof
     the section exists to deliver; hiding them behind :hover meant most
     desktop visitors never saw them, and hover-only content is inaccessible
     to keyboard and touch users (WCAG 1.4.13). */
  opacity: 1; transition: opacity 0.25s;
}

/* ============================================
   WHY-US PHOTO BACKGROUND
   ============================================ */
.why-us-section { position: relative; overflow: hidden; }
.why-us-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  z-index: 0;
}
.why-us-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.82); z-index: 1;
}
.why-us-section > .container { position: relative; z-index: 2; }

/* ============================================
   SERVICE INLINE PHOTOS
   ============================================ */
.service-photo {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-top: 36px;
}
.service-photo img { width: 100%; height: 300px; object-fit: cover; display: block; }
.service-photo-caption {
  background: var(--light); padding: 11px 16px;
  font-size: 13px; color: var(--gray); font-style: italic;
}

/* ============================================
   ABOUT PAGE PHOTO GALLERY
   ============================================ */
.about-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px; height: 280px;
  margin: 44px 0;
}
.about-gallery-item { border-radius: var(--radius); overflow: hidden; }
.about-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.about-gallery-item:hover img { transform: scale(1.04); }

/* ============================================
   GIFT CARD WIDGET
   ============================================ */
.gift-card-widget {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  max-width: 980px; margin: 0 auto;
}
.gift-card-visual {
  background: linear-gradient(135deg, #1155BB 0%, #0A4FA6 40%, #082F6E 75%, #051A44 100%);
  border-radius: 18px; padding: 32px 28px;
  aspect-ratio: 1.586;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 28px 64px rgba(8,47,110,0.42), 0 4px 20px rgba(0,0,0,0.2);
  position: relative; overflow: hidden; color: white;
  transform: rotate(-1.5deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gift-card-visual:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 36px 80px rgba(8,47,110,0.5);
}
.gc-shine {
  position: absolute; top: -50px; right: -30px;
  width: 160px; height: 260px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.11) 0%, transparent 60%);
  transform: rotate(20deg); pointer-events: none;
}
.gc-logo-text { font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: white; }
.gc-sub-text {
  font-size: 9px; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px;
}
.gc-center { text-align: center; }
.gc-value-label {
  font-size: 9px; color: rgba(255,255,255,0.55);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px;
}
.gc-amount-display {
  font-family: var(--font-heading); font-weight: 800;
  /* clamp() prevents the card's fixed aspect-ratio + overflow:hidden from
     clipping the phone number off the bottom on narrow phones. */
  font-size: clamp(28px, 9vw, 56px); color: var(--yellow); line-height: 1;
  transition: all 0.2s ease;
}
.gc-bottom-text {
  font-size: 10px; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.7px; line-height: 1.7;
}

/* min-width:0 stops this grid item keeping its default min-width:auto, which let the
   Call-to-Order button force the item wider than its track and scroll the page
   sideways at 320px. */
.gift-selector { min-width: 0; }
.gift-selector h3 { margin-bottom: 6px; }
.gift-selector-sub { font-size: 16px; color: var(--gray); margin-bottom: 28px; line-height: 1.65; }

/* RESTORED 2026-08-22. A dead-CSS sweep deleted these two rules while both classes were
   still in use in gift-cards.html, so the page's only CTA rendered as plain body text
   (display:inline, no background, and no underline because a{text-decoration:none}).
   Returning visitors kept seeing a button from cache, which is why it went unnoticed.
   Do not remove these without first grepping the HTML for the class. */
.gift-purchase-btn {
  display: block; width: 100%;
  padding: 18px; text-align: center;
  background: var(--yellow); color: var(--dark);
  border: none; border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.gift-purchase-btn:hover { background: var(--yellow-dark); }
.gift-note { font-size: 14px; color: var(--gray); margin-top: 16px; line-height: 1.6; }

/* ============================================
   MOBILE STICKY CTA BAR
   ============================================ */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: white; border-top: 2px solid var(--border);
  /* env(safe-area-inset-bottom) keeps the call button clear of the iPhone
     home indicator, which otherwise overlaps the primary tap target. */
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}
.mobile-cta-bar .btn { min-height: 44px; min-width: 44px; flex: 1; }

/* ============================================
   RESPONSIVE — PHOTO & GIFT CARD SECTIONS
   ============================================ */
@media (max-width: 900px) {
  .gift-card-widget { grid-template-columns: 1fr; gap: 40px; max-width: 500px; }
  .gift-card-visual { transform: none; max-width: 420px; margin: 0 auto; width: 100%; }
  .about-gallery { grid-template-columns: 1fr 1fr; height: auto; }
  .about-gallery-item:first-child { grid-column: 1 / -1; height: 240px; }
  .about-gallery-item:not(:first-child) { height: 180px; }
}
@media (max-width: 768px) {
  .photo-strip-grid { grid-template-columns: repeat(2, 1fr); height: 380px; }
  .photo-strip-caption { opacity: 1; }
  .service-photo img { height: 220px; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 74px; }
}
@media (max-width: 540px) {
  .about-gallery { grid-template-columns: 1fr; height: auto; }
  .about-gallery-item { height: 200px !important; }
  .about-gallery-item:first-child { grid-column: auto; height: 220px !important; }
  .photo-strip-grid { grid-template-columns: 1fr 1fr; height: 300px; }
}

/* ============================================
   ADDON GRID (Services page)
   ============================================ */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}
.addon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 14px;
}
.addon-name { font-weight: 600; color: var(--dark); }
.addon-price {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--blue);
  font-size: 14px;
  white-space: nowrap;
  margin-left: 8px;
}

/* ============================================
   MEMBERSHIP SIGNUP FORM
   ============================================ */
.membership-form {
  max-width: 640px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 44px 40px;
  box-shadow: var(--shadow-lg);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: var(--dark);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--dark);
  background: white;
  transition: border-color 0.15s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--blue);
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--blue); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-submit-btn {
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--yellow);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  color: var(--dark);
  transition: background 0.15s;
  margin-top: 8px;
}
.form-submit-btn:hover { background: var(--yellow-dark); }
.form-note {
  text-align: center;
  font-size: 13px;
  color: var(--gray);
  margin-top: 16px;
  line-height: 1.6;
}
.form-note a { color: var(--blue); font-weight: 600; }

/* ============================================
   GOOGLE REVIEWS PLACEHOLDER
   ============================================ */
.reviews-placeholder {
  text-align: center;
  padding: 40px 24px;
  background: var(--light);
  border-radius: var(--radius);
  color: var(--gray);
  font-size: 15px;
  border: 2px dashed var(--border);
}
.reviews-placeholder a { color: var(--blue); font-weight: 600; }

@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .membership-form { padding: 32px 24px; }
  .addon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .addon-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.faq-item summary {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--dark);
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--blue);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-answer {
  padding: 20px 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray);
  margin: 0;
}

/* ============================================
   SKIP NAVIGATION LINK (accessibility)
   ============================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 24px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.1s;
}
.skip-link:focus { top: 8px; }

/* ============================================
   FOCUS STYLES (keyboard navigation)
   ============================================ */
/* Default ring is BLUE. Yellow (#F5C800) only reaches 1.60:1 on white and
   1.48:1 on --light, so on the body of the site the old yellow ring was
   effectively invisible — WCAG 1.4.11 requires 3:1. Blue is 7.83:1 on white
   and 7.24:1 on --light. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the dark chrome, keep the yellow ring — there it scores 4.90:1–10.89:1
   and blue would be the invisible one. */
.site-header :focus-visible,
.mobile-nav :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.cta-banner :focus-visible,
.membership-intro :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--yellow);
}
/* The skip link sits ON yellow, so it needs a dark ring plus a white halo
   to separate it from the chip beneath. */
.skip-link:focus-visible {
  outline: 3px solid var(--dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--white);
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================
   SCREEN READER ONLY UTILITY
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   FAQ FOCUS STYLE (Firefox compatibility)
   ============================================ */
/* The ring here must be BLUE, not yellow: .faq-item has a white background, where
   yellow measures 1.60:1 and WCAG 1.4.11 requires 3:1 — the same reason the global
   ring was changed to blue above. A negative outline-offset is also required because
   .faq-item sets overflow:hidden, which clips any ring drawn outside the summary box. */
.faq-item summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
  border-radius: 4px;
}

/* ============================================
   PAGE ENTRY FADE (prevents flash on navigation)
   ============================================ */
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================
   REDUCED MOTION (vestibular / motion sensitivity)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body {
    animation: none;
    opacity: 1;
  }
}