/* ============================================================
   SITE CHROME — header + footer + body background, shared
   ============================================================ */

/* BODY · crystalline glass background (fixed, with parallax) ----- */
html, body { margin: 0; padding: 0; }
body {
  position: relative;
  min-height: 100vh;
  background: #f1f1f1;
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed; inset: -10vh 0 -10vh 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("crystal-texture.svg");
  background-repeat: repeat;
  background-size: 600px 600px;
  background-position: 0 var(--bg-shift, 0px);
  opacity: 0.85;
  mix-blend-mode: multiply;
  will-change: background-position;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.45;
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

/* MAIN NAV · frosted-glass on top of the texture ------------------
   !important on background so inline page rules don't replace the frost */
.nav {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%);
          backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 0 !important;
  position: sticky;
  top: 0;
  z-index: 50;
}
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .nav { background: rgba(255, 255, 255, 0.94) !important; }
}

/* COLLAPSED NAV LAYOUT  (≤1050px viewport)
   Nav links disappear when they would crowd the Simply Stereo logo
   (raised from 900px so the Shop link can't sit within ~50px of the logo),
   replaced by a hamburger icon sitting at the far right (next to Cart). */
@media (max-width: 1050px) {
  #ss-hamburger-btn { display: inline-flex !important; }
}
.nav .container {
  max-width: 1320px;
  /* FLUID gutter — total horizontal margin smoothly transitions from 64px
     (32px each side, desktop) down to 32px (16px each side, mobile) as the
     viewport narrows. No abrupt snap at 800px. */
  width: calc(100% - clamp(32px, calc(4.7vw + 4px), 64px));
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.nav-logo { flex-shrink: 0; display: block; text-decoration: none; }
/* Fluid logo height — 56px on wide desktop, shrinks smoothly as the viewport
   narrows, settles at 40px on mobile (about 30% smaller than desktop, 10%
   smaller than the previous mobile size). No size jump at any breakpoint. */
.nav-logo img { height: clamp(40px, 4.5vw, 56px); width: auto; max-width: none; display: block; }
/* Text wordmark variant — Yanone Kaffeesatz at weight 560 */
.nav-logo.nav-logo-text { line-height: 1; color: var(--ink, #1a1a1a); }
.nav-logo .nav-logo-word {
  font-family: "Yanone Kaffeesatz", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 560;
  font-size: 38px;
  letter-spacing: 0;
  line-height: 1;
  color: inherit;
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .nav-logo .nav-logo-word { font-size: 30px; }
}
.nav-links {
  display: flex;
  gap: 32px;
  font-size: 13px;
  color: var(--ink, #1a1a1a);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.nav-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-links a:hover,
.nav-links a.current { color: var(--brand-lime, #32CD32); }
.nav-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 14px;
  color: var(--ink, #1a1a1a);
  flex-shrink: 0;
}
.nav-cart {
  background: var(--brand-lime, #32CD32);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.nav-cart:hover { background: var(--ink, #1a1a1a); }

/* Account icon — circle outline, person silhouette inside.
   Sits next to the cart in the top-right of every page. */
.nav-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.nav-account svg { width: 18px; height: 18px; display: block; }
.nav-account:hover {
  background: var(--brand-lime, #32CD32);
  border-color: var(--brand-lime, #32CD32);
  color: #fff;
}

/* Instagram/Facebook icons in the header are HIDDEN at every viewport.
   They live in the hamburger drawer footer and the page footer instead. */
.nav-social { display: none !important; }

/* Social icons in the footer */
.footer-newsletter .socials { gap: 10px !important; align-items: center; }
.footer-newsletter .socials a.social-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg, #ffffff);
  border: 1px solid var(--border, #e8e8e8);
  color: var(--ink, #1a1a1a);
  transition: all 0.15s ease;
}
.footer-newsletter .socials a.social-icon svg { width: 18px; height: 18px; display: block; }
.footer-newsletter .socials a.social-icon:hover {
  background: var(--brand-lime, #32CD32);
  border-color: var(--brand-lime, #32CD32);
  color: #ffffff;
  transform: translateY(-1px);
}

/* FOOTER — BENTO GRID --------------------------------------- */
footer.ss-footer {
  padding: 56px 0 20px;
  background: transparent;
}
footer.ss-footer .ss-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
footer.ss-footer .ss-card {
  background: rgba(255, 255, 255, 0.27);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
          backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
footer.ss-footer .ss-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 20% -10%, rgba(255,255,255,0.45), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  pointer-events: none;
}
footer.ss-footer .ss-card > * { position: relative; z-index: 1; }
footer.ss-footer .ss-card h4 {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--brand-lime, #32CD32); margin: 0 0 14px; font-weight: 700;
}
footer.ss-footer .ss-card .ss-big {
  font-family: inherit;
  font-size: 18px; font-weight: 600; letter-spacing: -0.2px;
  line-height: 1.4; color: var(--ink, #1a1a1a); margin: 0 0 14px;
}
footer.ss-footer .ss-card p {
  font-size: 13.5px; color: var(--ink-soft, #555);
  line-height: 1.65; margin: 0 0 6px;
}
footer.ss-footer .ss-card a { color: var(--ink, #1a1a1a); text-decoration: none; }
footer.ss-footer .ss-card a:hover { color: var(--brand-lime, #32CD32); }
footer.ss-footer .ss-card .ss-hours {
  margin-top: 14px; font-size: 12.5px; color: var(--ink-mute, #888);
  line-height: 1.7; letter-spacing: 0.2px;
}
footer.ss-footer .ss-card .ss-hours strong { color: var(--ink, #1a1a1a); }

/* Visit card — spans both rows on the left */
footer.ss-footer .ss-card-visit {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  display: flex; flex-direction: column;
}
footer.ss-footer .ss-card-visit .ss-visit-logo {
  margin-bottom: 22px;
  display: inline-block;
}
footer.ss-footer .ss-card-visit .ss-visit-logo img {
  width: 110px !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  border-radius: 0;
}

/* Link columns inside Shop / Discover / Help */
footer.ss-footer .ss-links-col a {
  display: block; padding: 6px 0; font-size: 13.5px; color: var(--ink-soft, #555);
}
footer.ss-footer .ss-links-col a:hover { color: var(--brand-lime, #32CD32); }

/* Stay in touch — form + socials */
footer.ss-footer .ss-card-stay form {
  display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap;
}
footer.ss-footer .ss-card-stay input[type="email"] {
  flex: 1; min-width: 0;
  padding: 10px 14px; font-size: 13px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: var(--ink, #1a1a1a);
  font-family: inherit;
  box-sizing: border-box;
}
footer.ss-footer .ss-card-stay input[type="email"]:focus {
  outline: none;
  border-color: var(--brand-lime, #32CD32);
  background: rgba(255,255,255,0.9);
}
footer.ss-footer .ss-card-stay button {
  padding: 10px 18px; border: none;
  background: var(--brand-lime, #32CD32); color: #fff;
  border-radius: 999px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
footer.ss-footer .ss-card-stay button:hover { background: var(--ink, #1a1a1a); }
footer.ss-footer .ss-card-stay .ss-socials {
  display: flex; gap: 10px; margin-top: 16px;
}
footer.ss-footer .ss-card-stay .ss-socials a {
  width: 32px; height: 32px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink, #1a1a1a);
  transition: all 0.2s;
}
footer.ss-footer .ss-card-stay .ss-socials a:hover {
  background: var(--brand-lime, #32CD32);
  border-color: var(--brand-lime, #32CD32);
  color: #fff;
}
footer.ss-footer .ss-card-stay .ss-socials svg {
  width: 14px; height: 14px; display: block;
}

/* Bottom legal + credit strip */
footer.ss-footer .ss-footer-bottom {
  max-width: 1280px; margin: 32px auto 0; padding: 18px 32px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11px; letter-spacing: 0.5px; color: var(--ink-mute, #888);
}
footer.ss-footer .ss-footer-bottom a { color: var(--ink-mute, #888); text-decoration: none; }
footer.ss-footer .ss-footer-bottom a:hover { color: var(--brand-lime, #32CD32); }
footer.ss-footer .ss-footer-bottom .ss-credit a { color: var(--ink, #1a1a1a); font-weight: 600; }
footer.ss-footer .ss-footer-bottom .ss-credit a:hover { color: var(--brand-lime, #32CD32); }

/* Tablet (3 cols → 2 cols, Visit spans full width) */
@media (max-width: 980px) {
  footer.ss-footer { padding: 48px 0 20px; }
  footer.ss-footer .ss-footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }
  footer.ss-footer .ss-card { padding: 24px; }
  footer.ss-footer .ss-card-visit {
    grid-column: 1 / -1; grid-row: auto;
  }
  footer.ss-footer .ss-card .ss-big { font-size: 17px; }
}

/* Mobile — single-column stack */
@media (max-width: 600px) {
  footer.ss-footer { padding: 40px 0 16px; }
  footer.ss-footer .ss-footer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 20px;
  }
  footer.ss-footer .ss-card { padding: 22px 20px; border-radius: 16px; }
  footer.ss-footer .ss-card h4 { margin-bottom: 12px; }
  footer.ss-footer .ss-card .ss-big { font-size: 16px; }
  footer.ss-footer .ss-card-visit .ss-visit-logo img { width: 90px !important; height: auto !important; }
  footer.ss-footer .ss-card-stay form { flex-wrap: nowrap; }
  footer.ss-footer .ss-card-stay input[type="email"] { font-size: 14px; }
  footer.ss-footer .ss-footer-bottom {
    margin-top: 24px;
    padding: 16px 20px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 10.5px;
  }
}

/* ============================================================
   GLOBAL FROSTED-GLASS CARDS — Ultra-transparent + frost wisp recipe.
   Barely-there white tint, 32px backdrop blur, and a layered diagonal
   wisp painted via ::before so the card looks like actual frozen glass
   independent of what's behind it.
   ============================================================ */
.product-card,
.card,
.brand-card,
.brand-tile,
.testimonial-card,
.editorial-card,
.promo-card,
.journal-card,
.category-tile,
.team-card,
.feature-card,
.cat-card,
.svc-card,
.faq-card,
.spec-card,
.price-card,
.process-step,
.service,
.direction,
.info-grid,
.map-block,
.map-card,
.appt-form,
.getting-here-cta,
.faq-item,
.lineup-card,
.cta-block,
.why-card,
.format-card,
.value-note,
.step,
.terms {
  position: relative;
  background: rgba(255, 255, 255, 0.27) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%);
          backdrop-filter: blur(32px) saturate(200%);
  /* Softer edge: lower-opacity border + gentler inset highlights so the
     card silhouette fades into the body texture instead of having a hard
     white outline. */
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  /* No outer drop shadow — keeps just the soft inset highlights so the
     cards feel like frosted glass set INTO the page (a window) rather
     than floating above it. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

/* The painted frost-wisp overlay — soft white smears layered over the
   blurred backdrop. This is what makes the glass look frosted even when
   the body behind it is plain. */
.product-card::before,
.card::before,
.brand-card::before,
.brand-tile::before,
.testimonial-card::before,
.editorial-card::before,
.promo-card::before,
.journal-card::before,
.category-tile::before,
.team-card::before,
.feature-card::before,
.cat-card::before,
.svc-card::before,
.faq-card::before,
.spec-card::before,
.price-card::before,
.process-step::before,
.service::before,
.direction::before,
.info-grid::before,
.map-block::before,
.map-card::before,
.appt-form::before,
.getting-here-cta::before,
.faq-item::before,
.lineup-card::before,
.cta-block::before,
.why-card::before,
.format-card::before,
.value-note::before,
.step::before,
.terms::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 20% -10%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(80% 50% at 90% 110%, rgba(255, 255, 255, 0.30), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 40%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Card content must sit above the wisp overlay */
.product-card > *,
.card > *,
.brand-card > *,
.brand-tile > *,
.testimonial-card > *,
.editorial-card > *,
.promo-card > *,
.journal-card > *,
.category-tile > *,
.team-card > *,
.feature-card > *,
.cat-card > *,
.svc-card > *,
.faq-card > *,
.spec-card > *,
.price-card > *,
.process-step > *,
.service > *,
.direction > *,
.info-grid > *,
.map-block > *,
.map-card > *,
.appt-form > *,
.getting-here-cta > *,
.faq-item > *,
.lineup-card > *,
.cta-block > *,
.why-card > *,
.format-card > *,
.value-note > *,
.step > *,
.terms > * {
  position: relative;
  z-index: 1;
}

@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .product-card,
  .card,
  .brand-card,
  .brand-tile,
  .testimonial-card,
  .editorial-card,
  .promo-card,
  .journal-card,
  .category-tile,
  .team-card,
  .feature-card,
  .cat-card,
  .svc-card,
  .faq-card,
  .spec-card,
  .price-card,
  .process-step,
  .service,
  .direction,
  .info-grid,
  .map-block,
  .map-card,
  .appt-form,
  .getting-here-cta,
  .faq-item,
  .lineup-card,
  .cta-block {
    background: rgba(255, 255, 255, 0.9) !important;
  }
}

/* Brand tile override — the brand carousel uses an overflow:hidden mask
   on each row, which clips drop shadows mid-stroke and looks broken.
   Strip the outer shadow on brand tiles so the bottom doesn't cut off. */
.brand-tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Section-level light wrappers that should NOT cover the body texture.
   Make them transparent so the body texture shows through and the cards
   inside provide the frosted contrast. body. prefix on .editorial-hero
   bumps specificity to beat the inline `!important` set on those pages. */
.svc-section.alt,
.process,
.numbers,
.space-section,
.faq-section,
.what-to-expect,
.team,
.features-section,
.pullquote,
body .editorial-hero {
  background: transparent !important;
  border-color: transparent !important;
}

/* Keep media areas inside cards untouched — they need to keep their own
   background-image (the product photo, brand logo, etc.). */
.product-card .img,
.brand-card .logo,
.brand-tile img,
.editorial-card .img,
.promo-card .img,
.journal-card .img,
.category-tile .category-tile-img,
.team-card .photo {
  background-color: transparent !important;
}

@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   GLOBAL BUTTON STYLES — ONE consistent look across the entire site.

   LIGHT BACKGROUND (default):
     Default: GREEN pill, WHITE text
     Hover:   BLACK pill, WHITE text

   DARK BACKGROUND (.spotlight, .on-dark wrapper):
     Default: WHITE pill, BLACK text
     Hover:   GREEN pill, WHITE text

   Uses !important to win against per-page rules.
   ============================================================ */
.all-link,
.cta-block .primary,
.cta-block .secondary,
.closing-cta .primary,
.closing-cta .secondary,
.cta-section .cta,
.testimonials-cta a,
.svc-body .cta,
.appt-form button,
.empty-filtered button,
.getting-here-cta .cta,
a.btn,
button.btn,
.btn-primary,
.btn-secondary,
.cta-link {
  background: var(--brand-lime, #32CD32) !important;
  color: #ffffff !important;
  border: 2px solid var(--brand-lime, #32CD32) !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.all-link:hover,
.cta-block .primary:hover,
.cta-block .secondary:hover,
.closing-cta .primary:hover,
.closing-cta .secondary:hover,
.cta-section .cta:hover,
.testimonials-cta a:hover,
.svc-body .cta:hover,
.appt-form button:hover,
.empty-filtered button:hover,
.getting-here-cta .cta:hover,
a.btn:hover,
button.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.cta-link:hover {
  background: var(--ink, #1a1a1a) !important;
  color: #ffffff !important;
  border-color: var(--ink, #1a1a1a) !important;
}

/* Cart button in the header — same recipe (green / white → black / white). */
.nav-cart {
  background: var(--brand-lime, #32CD32) !important;
  color: #ffffff !important;
  border: 0 !important;
}
.nav-cart:hover {
  background: var(--ink, #1a1a1a) !important;
  color: #ffffff !important;
}

/* DARK-BACKGROUND BUTTONS — buttons on a black / ink section.
   Default flips to WHITE with black text so the button stands out
   against the dark backdrop. Hover then becomes the brand green. */
.spotlight a,
.on-dark .all-link,
.on-dark .primary,
.on-dark .secondary,
.on-dark .cta,
.on-dark a.btn,
.on-dark button.btn {
  background: #ffffff !important;
  color: var(--ink, #1a1a1a) !important;
  border: 2px solid #ffffff !important;
}
.spotlight a:hover,
.on-dark .all-link:hover,
.on-dark .primary:hover,
.on-dark .secondary:hover,
.on-dark .cta:hover,
.on-dark a.btn:hover,
.on-dark button.btn:hover {
  background: var(--brand-lime, #32CD32) !important;
  color: #ffffff !important;
  border-color: var(--brand-lime, #32CD32) !important;
}

/* ============================================================
   GLOBAL PAGE HEADER SYSTEM
   Unifies the page header block on every subpage: same spacing
   from the nav, same kicker / h1 / body typography, all
   LEFT-aligned. Covers .page-head, .page-hero, .about-hero,
   and any subpage .hero (excluding the homepage's .home-hero).
   ============================================================ */
.page-head,
.page-hero,
.about-hero,
section.hero:not(.home-hero) {
  padding: 64px 32px 48px !important;
  border-bottom: none !important;
  text-align: left !important;
}
/* Light-themed page headers get transparent background (override
   any page-local solid bg). Services keeps its dark treatment. */
.page-head,
.page-hero,
.about-hero {
  background: transparent !important;
}
.page-head .container,
.page-hero .container,
.about-hero .container,
section.hero:not(.home-hero) .container {
  text-align: left !important;
  padding: 0 !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* Kicker (small green eyebrow) */
.page-head .kicker,
.page-hero .kicker,
.about-hero .kicker,
section.hero:not(.home-hero) .kicker {
  display: block !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--brand-lime, #32CD32) !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
}

/* H1 — full container width, no narrow cap */
.page-head h1,
.page-hero h1,
.about-hero h1,
section.hero:not(.home-hero) h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  color: var(--ink, #1a1a1a);
}

/* Lead paragraph — full container width */
.page-head > .container > p,
.page-hero > .container > p,
.about-hero > .container > p,
section.hero:not(.home-hero) > .container > p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--ink-soft, #555);
  max-width: 100% !important;
  margin: 0 !important;
}

/* Brands page extra body paragraphs — full container width */
.page-head .page-head-body,
.page-hero .page-head-body,
.about-hero .page-head-body {
  max-width: 100% !important;
  margin: 24px 0 0 !important;
  text-align: left !important;
}
.page-head .page-head-body p,
.page-hero .page-head-body p,
.about-hero .page-head-body p {
  font-size: 16px !important;
  color: var(--ink-soft, #555);
  line-height: 1.7 !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
}
.page-head .page-head-body p:last-child,
.page-hero .page-head-body p:last-child {
  margin-bottom: 0 !important;
}

/* FAQ uses .deck instead of .container > p */
.page-head .deck {
  font-size: 17px !important;
  color: var(--ink-soft, #555) !important;
  line-height: 1.6 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Mobile sizing */
@media (max-width: 700px) {
  .page-head,
  .page-hero,
  .about-hero,
  section.hero:not(.home-hero) {
    padding: 48px 20px 40px !important;
  }
  .page-head h1,
  .page-hero h1,
  .about-hero h1,
  section.hero:not(.home-hero) h1 {
    font-size: 32px !important;
    letter-spacing: -0.5px !important;
  }
  .page-head > .container > p,
  .page-hero > .container > p,
  .about-hero > .container > p,
  section.hero:not(.home-hero) > .container > p,
  .page-head .deck {
    font-size: 15px !important;
  }
}

/* ============================================================
   Section titles — Oswald (condensed sans), ALL CAPS, site-wide.
   Applied to page/section H1 and H2 titles.
   ============================================================ */
.page-head h1,
.page-hero h1,
.about-hero h1,
section.hero:not(.home-hero) h1,
section h2,
.section-title,
.section-head h2,
.home-hero h1,
.preowned-title,
.brands-featured-title {
  font-family: "Oswald", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Fluid sizes — scale smoothly with viewport using clamp() */
.page-head h1,
.page-hero h1,
.about-hero h1,
section.hero:not(.home-hero) h1 {
  font-size: clamp(36px, 5vw, 72px) !important;
  line-height: 1.05 !important;
}
section h2,
.section-title,
.section-head h2,
.preowned-title,
.brands-featured-title {
  font-size: clamp(36px, 4.5vw, 56px) !important;
  line-height: 1.1 !important;
}