/* Olson Iron — v2 stylesheet (mobile-first) */

:root {
  /* v2.4.0D — Locked palette: Blue, Black, Gray, White only */
  /* Olson Blue (primary brand) */
  --blue-600: #1d4ed8;        /* canonical Olson Blue */
  --blue-700: #1e40af;        /* hover/active */
  --blue-100: #dbeafe;        /* soft tint backgrounds */
  --blue-50:  #dbeafe;        /* canonical pale blue tint (v2.4.0F) */
  /* Black */
  --ink-900: #0a0c10;         /* headstrips, deepest text */
  --ink-true: #000000;         /* thin overlays only */
  /* Gray scale */
  --gray-900: #0f1419;
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50:  #f9fafb;
  /* White */
  --white:    #ffffff;

  /* Legacy aliases mapped to locked palette (preserve cascade for unchanged selectors) */
  --ink: var(--gray-900);
  --ink-2: var(--gray-700);
  --paper: var(--white);
  --paper-2: var(--gray-50);
  --rule: var(--gray-200);
  --brand: var(--blue-600);
  --brand-2: var(--blue-700);
  --accent: var(--ink-900);
  --gold: var(--blue-600);   /* gold deprecated -> Olson Blue */
  --ok: var(--gray-700);     /* success uses neutral gray + checkmark glyph */
  --err: var(--gray-700);    /* error uses neutral gray text + blue underline + a11y label */

  --shadow: 0 6px 24px rgba(15, 20, 25, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 20, 25, 0.14);
  --radius: 8px;
  --maxw: 1160px;
  --stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--stack);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; color: var(--ink); margin: 0 0 .6em; }
h1 { font-size: 2rem; }

/* v2.4.0F — explicit error-state class for form fields
   Spec: gray text body, blue underline, screen-reader "error" label.
   Add .is-error to the wrapping field container; pair with <span class="sr-only">Error: </span> in markup. */
.is-error {
  color: var(--err);
}
.is-error input,
.is-error select,
.is-error textarea {
  border-color: var(--brand);
  border-bottom-width: 2px;
  outline: none;
}
.is-error .field-error {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--err);
  font-weight: 600;
}
.is-error .field-error::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 6px;
  vertical-align: middle;
}
.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;
}
h2 { font-size: 1.55rem; margin-top: 1.8em; }
h3 { font-size: 1.2rem; margin-top: 1.4em; }
p  { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* ---------- TOP BAR + HEADER ---------- */
/* v2.3.5 — Showroom-style header (sh-*) — tightened to match approved mockup.
   Three stacked bands: brand/showroom/call → trust → nav.
   Richer layered mesh background (diagonal weave + pinpoint highlights + vignette).
   Typography: Cinzel (SHOWROOM chrome wordmark), Oswald (condensed nav + trust + labels), Inter (address/phone).
   Palette locked to black/charcoal/blue/white/gray per global rule. */
/* v2.4.0 — Real woven iron-mesh photo texture under a dark tint + blue highlight */
.site-header.sh-showroom {
  position: sticky; top: 0; z-index: 40;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(29,78,216,0.22) 0%, rgba(29,78,216,0) 55%),
    linear-gradient(180deg, rgba(6,9,13,0.62) 0%, rgba(10,13,18,0.72) 100%),
    url('/v2/assets/img/mesh-texture.jpg');
  background-size: auto, auto, 260px 260px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center top, center top, center top;
  color: var(--white);
  border-bottom: 2px solid var(--blue-600);
  box-shadow: 0 2px 0 0 rgba(29,78,216,0.35), 0 10px 28px rgba(0,0,0,0.45);
}
.site-header.sh-showroom a { color: var(--white); }
.site-header.sh-showroom a:hover { text-decoration: none; }

/* Band 1 — brand / showroom / call */
.sh-brandband {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.sh-brandband::after {
  /* subtle blue underline accent at the bottom of the brand band */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(29,78,216,0.5) 50%, transparent 100%);
  pointer-events: none;
}
.sh-brandband-row {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 280px);
  align-items: center;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 12px;
  padding-right: 12px;
}
.sh-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  justify-self: start;
  margin-left: -4px; /* push harder to the left edge per mockup */
}
.sh-logo picture, .sh-logo img {
  display: block;
  height: auto;
  width: 220px; /* wider chrome oval — sized to sit cleanly inside the brand band */
  max-width: 100%;
  filter:
    drop-shadow(0 0 16px rgba(29,78,216,0.28))
    drop-shadow(0 4px 10px rgba(0,0,0,0.65));
}
.sh-showroom-block {
  text-align: center;
  min-width: 0;
  line-height: 1.05;
  padding: 2px 6px;
}
.sh-eyebrow {
  font-family: 'Oswald', 'Inter', var(--stack);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: none;
  color: rgba(255,255,255,0.92);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-wordmark {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(38px, 5.4vw, 72px);
  letter-spacing: 0.05em;
  line-height: 1;
  /* Mockup-matched chrome-to-royal-blue gradient */
  background:
    linear-gradient(180deg,
      #eaf2ff 0%,
      #8cb4ff 24%,
      #4b84ff 50%,
      #1e3faf 78%,
      #142d85 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.18),
    0 2px 14px rgba(29,78,216,0.30);
  margin: 4px 0 2px;
  text-transform: uppercase;
  -webkit-text-stroke: 0.5px rgba(29,78,216,0.35);
}
.sh-address {
  font-family: 'Oswald', var(--stack);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
.sh-address:hover { color: var(--blue-600); }
/* Mockup: short blue underline bar between SHOWROOM wordmark and address */
.sh-wordmark-bar {
  display: block;
  width: 220px;
  max-width: 60%;
  height: 2px;
  margin: 4px auto 6px;
  background: linear-gradient(90deg, rgba(29,78,216,0) 0%, var(--blue-600) 50%, rgba(29,78,216,0) 100%);
  box-shadow: 0 0 8px rgba(29,78,216,0.55);
}
.sh-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 8px;
  justify-self: end;
}
.sh-call-icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  /* Mockup: outlined blue ring, transparent interior, blue glyph */
  background: transparent;
  color: var(--blue-600);
  font-size: 22px;
  border: 2px solid var(--blue-600);
  box-shadow:
    0 0 0 3px rgba(29,78,216,0.12),
    0 0 14px rgba(29,78,216,0.35);
}
.sh-call-stack { display: inline-flex; flex-direction: column; line-height: 1.1; }
.sh-call-number {
  font-family: 'Oswald', var(--stack);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.03em;
  color: var(--white);
}
.sh-call-sub {
  font-family: 'Oswald', var(--stack);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.sh-call:hover .sh-call-icon { background: rgba(29,78,216,0.12); color: #cfe0ff; border-color: #6ea8f5; }

/* Band 2 — trust strip — tighter, more premium */
.sh-trust {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(29,78,216,0.35);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
}
.sh-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.sh-trust-star {
  color: var(--blue-600);
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(29,78,216,0.6);
}
.sh-trust-text {
  font-family: 'Oswald', var(--stack);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--white);
}
.sh-trust-since { color: var(--blue-600); font-weight: 700; }

/* Band 3 — nav row (rectangular dark buttons) — stronger, cleaner, more premium */
.sh-navband {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 100%);
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.sh-navband-row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 56px;
}
/* Nav toggle (mobile) inherits previous structure; restyle for dark band */
.site-header.sh-showroom .nav-toggle {
  background: transparent;
  border: 0;
  padding: 14px 4px;
  cursor: pointer;
  display: inline-flex; flex-direction: column; gap: 4px;
  align-self: center;
}
.site-header.sh-showroom .nav-toggle span {
  width: 26px; height: 2px; background: var(--white); display: block; border-radius: 2px;
}
.site-header.sh-showroom .site-nav.sh-nav { display: none; width: 100%; }
.site-header.sh-showroom .site-nav.sh-nav.open {
  display: block;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(10,12,16,0.98);
  border-top: 1px solid rgba(29,78,216,0.25);
  box-shadow: 0 18px 36px rgba(0,0,0,0.45);
  z-index: 41;
}
.site-header.sh-showroom .site-nav.sh-nav ul {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  display: block;
}
.site-header.sh-showroom .site-nav.sh-nav li { display: block; }
.site-header.sh-showroom .site-nav.sh-nav li a {
  display: block;
  padding: 14px 18px;
  color: var(--white);
  font-family: 'Oswald', var(--stack);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header.sh-showroom .site-nav.sh-nav li a:hover {
  background: rgba(29,78,216,0.18);
  color: var(--white);
  text-decoration: none;
}
.site-header.sh-showroom .site-nav.sh-nav a[aria-current="page"] {
  color: var(--blue-600);
  box-shadow: inset 0 -2px 0 0 var(--blue-600);
}
.site-header.sh-showroom .site-nav.sh-nav li.active > a { color: var(--blue-600); }

/* Desktop nav — rectangular buttons on dark band */
@media (min-width: 900px) {
  .site-header.sh-showroom .nav-toggle { display: none; }
  .site-header.sh-showroom .site-nav.sh-nav {
    display: block; position: static; box-shadow: none; border: 0; background: transparent;
    width: 100%;
  }
  .site-header.sh-showroom .site-nav.sh-nav ul {
    display: flex;
    gap: 4px;
    padding: 10px 0;
    margin: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }
  .site-header.sh-showroom .site-nav.sh-nav li {
    flex: 0 1 auto;
    display: flex;
    min-width: 0;
  }
  .site-header.sh-showroom .site-nav.sh-nav li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-family: 'Oswald', var(--stack);
    font-size: 13px;
    letter-spacing: 0.16em;
    font-weight: 600;
    text-transform: uppercase;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--white);
    text-align: center;
    white-space: nowrap;
    line-height: 1.1;
    transition: color 0.12s ease, background-color 0.12s ease;
  }
  .site-header.sh-showroom .site-nav.sh-nav li a:hover {
    color: #cfe0ff;
    background: transparent;
    text-decoration: none;
  }
  .site-header.sh-showroom .site-nav.sh-nav li a[aria-current="page"],
  .site-header.sh-showroom .site-nav.sh-nav li.active > a {
    color: #ffffff !important;
    background: var(--blue-600);
    box-shadow: none;
    font-weight: 700;
  }
  .site-header.sh-showroom .site-nav.sh-nav li a[aria-current="page"]:hover,
  .site-header.sh-showroom .site-nav.sh-nav li.active > a:hover {
    color: #ffffff !important;
    background: var(--blue-600);
  }
}

/* Tight mobile: stack brand band into two rows (logo+call on top, showroom below) */
@media (max-width: 900px) {
  .sh-brandband-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    gap: 8px 12px;
    padding-top: 12px;
    padding-bottom: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .sh-logo {
    order: 1;
    margin-left: 0;
    flex: 0 0 auto;
    grid-area: auto;
  }
  .sh-call {
    order: 2;
    justify-self: auto;
    flex: 0 0 auto;
    padding: 2px 4px;
    gap: 6px;
    grid-area: auto;
  }
  .sh-showroom-block {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    text-align: center;
    padding-top: 6px;
    grid-area: auto;
  }
  .sh-logo picture, .sh-logo img { width: 140px; }
  /* Hide the eyebrow line on tablet/mobile; the H1 below already states the same thing. */
  .sh-eyebrow { display: none; }
  .sh-wordmark { font-size: 34px; letter-spacing: 0.04em; margin: 0 0 4px; }
  .sh-address { font-size: 11.5px; white-space: normal; letter-spacing: 0.08em; }
  .sh-call-icon { width: 36px; height: 36px; font-size: 17px; box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 3px 8px rgba(29,78,216,0.4); }
  .sh-call-number { font-size: 16px; letter-spacing: 0.02em; font-weight: 700; }
  .sh-call-sub { display: none; }
  .sh-trust-text { font-size: 11px; letter-spacing: 0.22em; }
  .sh-trust-row { gap: 14px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 520px) {
  .sh-logo picture, .sh-logo img { width: 118px; }
  .sh-wordmark { font-size: 30px; }
}

/* Very narrow phones (≤ 380px) — hide "Call Us Today" subtext, keep number only */
@media (max-width: 380px) {
  .sh-call-sub { display: none; }
  .sh-wordmark { font-size: 26px; }
  .sh-eyebrow { font-size: 9px; }
  .sh-address { font-size: 10px; }
}

/* Legacy topbar/site-header rules preserved below for any old emit paths. */
.topbar {
  background: var(--ink);
  color: #e5e7eb;
  font-size: 14px;
}
.topbar .container {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; padding-bottom: 8px; gap: 12px;
}
.topbar a { color: #fff; font-weight: 600; }
.topbar .trust { display: none; }
@media (min-width: 768px) {
  .topbar .trust { display: block; opacity: .9; }
}
/* TOPBAR showroom address (D1.2) — desktop shows full city, mid-mobile drops city, narrow-mobile hides */
.topbar .topbar-address .short { display: none; }
.topbar .topbar-address .full { display: inline; }
@media (max-width: 640px) {
  .topbar .topbar-address .full { display: none; }
  .topbar .topbar-address .short { display: inline; }
}
@media (max-width: 420px) {
  .topbar .topbar-address { display: none; }
  .topbar .topbar-address + * { display: none; } /* hides the &middot; separator after the address */
}

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 4px;
  background: var(--ink); color: var(--paper-2);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  letter-spacing: .02em;
}
.brand-name { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); }
.brand-name span { color: var(--brand); }

.nav-toggle {
  background: transparent; border: 0; padding: 8px; cursor: pointer;
  display: inline-flex; flex-direction: column; gap: 4px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

.site-nav { display: none; }
.site-nav.open {
  display: block;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.site-nav ul { list-style: none; padding: 8px 0; margin: 0; }
.site-nav li a {
  display: block; padding: 14px 18px; color: var(--ink); font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.site-nav li a:hover { background: var(--paper-2); text-decoration: none; }
/* v2.4.0F — active nav state: slim blue underline on the current page */
.site-nav a[aria-current="page"] {
  color: var(--brand);
  box-shadow: inset 0 -2px 0 0 var(--brand);
}
.site-nav li.active > a { color: var(--brand); }
.header-cta { display: none; }
.header-call {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff; padding: 9px 14px;
  border-radius: 6px; font-weight: 700; font-size: 14px;
}
.header-call:hover { background: var(--brand-2); color: #fff; text-decoration: none; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; box-shadow: none; border-bottom: 0; }
  .site-nav ul { display: flex; gap: 4px; padding: 0; }
  .site-nav li a { border-bottom: 0; padding: 10px 12px; font-size: 15px; }
  .site-nav li a:hover { color: var(--brand); background: transparent; }
  .header-cta { display: inline-flex; gap: 10px; align-items: center; }
  .header-call { font-size: 15px; padding: 10px 16px; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 6px; font-weight: 700;
  font-size: 16px; text-align: center; border: 0; cursor: pointer;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
  min-height: 48px; /* tap target */
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* v2.4.0D: primary CTA visual dominance — Olson Blue must be visually strongest on every surface */
.btn-primary {
  background: var(--blue-600);
  color: var(--white);
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(29,78,216,.35), 0 1px 0 rgba(0,0,0,.04);
  border: 1px solid var(--blue-600);
}
.btn-primary:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: var(--white);
  box-shadow: 0 8px 22px rgba(29,78,216,.45), 0 2px 0 rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.btn-primary:focus-visible {
  outline: 3px solid var(--blue-100);
  outline-offset: 2px;
}
.btn-dark    { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-ghost   { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-lg { font-size: 17px; padding: 16px 26px; min-height: 54px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .btn { flex: 1 1 auto; min-width: 180px; }

/* ---------- HERO ---------- */
.hero {
  position: relative; color: #fff;
  background:
    linear-gradient(135deg, rgba(15,20,25,.82), rgba(15,20,25,.55)),
    linear-gradient(180deg, #0f1419, #0f1419);
  padding: 48px 0 54px;
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.hero h1 { color: #fff; font-size: 2.1rem; margin-bottom: .3em; }
.hero .eyebrow {
  display: inline-block; padding: 4px 10px;
  background: var(--brand); color: #fff; font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 3px; margin-bottom: 14px;
}
.hero .lede { font-size: 1.1rem; max-width: 62ch; opacity: .96; margin-bottom: 22px; }
/* On dark hero/headstrip surfaces, primary CTA gets a brighter rim so it never recedes */
.hero .cta-row .btn-primary {
  background: var(--blue-600);
  border-color: var(--white);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 8px 22px rgba(29,78,216,.55);
}
.hero .cta-row .btn-primary:hover {
  background: var(--blue-700);
  border-color: var(--white);
  box-shadow: 0 0 0 2px rgba(255,255,255,.28), 0 12px 28px rgba(29,78,216,.6);
}
.hero .cta-row .btn-ghost { color: #fff; border-color: #fff; }
.hero .cta-row .btn-ghost:hover { background: #fff; color: var(--ink); }
.hero .trust-strip {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 18px;
  font-size: 14px; opacity: .92;
}
.hero .trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.hero .trust-strip span::before {
  content: '★'; color: var(--gold);
}
@media (min-width: 768px) {
  .hero { padding: 80px 0; }
  .hero h1 { font-size: 2.8rem; }
  .hero .lede { font-size: 1.25rem; }
}

/* ---------- SECTIONS ---------- */
section { padding: 42px 0; }
section.tight { padding: 28px 0; }
section.dark { background: var(--ink); color: #fff; }
section.dark h2, section.dark h3 { color: #fff; }
section.soft { background: var(--paper-2); }
section h2.section-title { margin-top: 0; text-align: left; }
section .kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 6px;
}

/* ---------- PRODUCT GRID (homepage) ---------- */
.product-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.product-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.product-card .thumb {
  aspect-ratio: 4/3; background: var(--paper-2) center/cover no-repeat;
  border-bottom: 1px solid var(--rule);
}
.product-card .body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.product-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.product-card p  { color: var(--ink-2); margin-bottom: 14px; }
.product-card .more {
  margin-top: auto; color: var(--brand); font-weight: 700; font-size: 14px;
}

/* ---------- FEATURE LIST ---------- */
.feature-list { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .feature-list { grid-template-columns: repeat(3, 1fr); } }
.feature {
  padding: 20px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.feature h3 { margin-top: 0; font-size: 1.05rem; }
.feature p  { color: var(--ink-2); margin: 0; }

/* ---------- TABLE ---------- */
.spec-table {
  width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px;
}
.spec-table th, .spec-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left;
  vertical-align: top;
}
.spec-table th { background: var(--paper-2); font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 6px; }
.faq details {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0 16px;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 0; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; color: var(--brand); }
.faq details[open] summary::after { content: '−'; }
.faq details[open] { box-shadow: var(--shadow); }
.faq .faq-body { padding: 0 0 16px; color: var(--ink-2); }

/* ---------- TESTIMONIAL STRIP ---------- */
.testimonials {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: var(--paper); padding: 22px; border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.testimonial .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 8px; }
.testimonial blockquote { margin: 0 0 10px; font-style: italic; color: var(--ink); }
.testimonial cite { color: var(--ink-2); font-style: normal; font-size: 14px; }

/* ---------- TRUST BAR ---------- */
.trust-bar {
  background: var(--paper-2);
  padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.trust-bar ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--ink);
}
.trust-bar li::before { content: '✓  '; color: var(--ok); font-weight: 900; }

/* ---------- BREADCRUMBS ---------- */
.breadcrumbs { font-size: 14px; color: var(--ink-2); padding: 14px 0 0; }
.breadcrumbs a { color: var(--ink-2); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs span + span::before { content: '›'; margin: 0 8px; color: var(--rule); }

/* ---------- GALLERY ---------- */
.gallery-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid .tile {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  border-radius: 0; background: #000;
}
.gallery-grid .tile img { width: 100%; height: 100%; object-fit: contain; background:#000; transition: transform .3s; }
.gallery-grid .tile:hover img { transform: scale(1.04); }
.gallery-grid .tile .quote-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(15,20,25,.9), rgba(15,20,25,0));
  color: #fff; padding: 28px 10px 10px;
  font-size: 13px; font-weight: 700;
  opacity: 0; transition: opacity .2s;
}
.gallery-grid .tile:hover .quote-cta,
.gallery-grid .tile:focus-within .quote-cta { opacity: 1; }
.gallery-grid .tile .quote-cta a { color: #fff; text-decoration: underline; }

.gallery-hub-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .gallery-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery-hub-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-hub-grid .card {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; background: var(--ink); color: #fff; aspect-ratio: 4/3;
  box-shadow: var(--shadow);
}
.gallery-hub-grid .card img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .2s, transform .3s; }
.gallery-hub-grid .card:hover img { opacity: .55; transform: scale(1.03); }
.gallery-hub-grid .card .label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px; font-weight: 700; font-size: 18px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.gallery-hub-grid .card .label small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }

/* ---------- QUOTE FLOW ---------- */
.stepper {
  display: flex; gap: 8px; margin-bottom: 26px; font-size: 13px;
  color: var(--ink-2);
}
.stepper .step {
  flex: 1; padding: 10px 10px; border-radius: 6px;
  background: var(--paper-2); border: 1px solid var(--rule); text-align: center;
}
.stepper .step.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.stepper .step.done { background: var(--ok); color: #fff; border-color: var(--ok); }
.stepper .step strong { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.form-card {
  background: var(--paper); padding: 22px; border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 600px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-row label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--rule); border-radius: 6px; background: #fff;
  font-family: inherit; min-height: 48px;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,78,216,.18);
}
.hp { position: absolute; left: -9999px; opacity: 0; }

.product-picker {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .product-picker { grid-template-columns: repeat(4, 1fr); } }
.product-picker .pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  padding: 18px 12px; border: 2px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; background: var(--paper); transition: all .15s;
  font-weight: 700; font-size: 14px; color: var(--ink);
  min-height: 110px;
}
.product-picker .pick:hover { border-color: var(--ink); }
.product-picker .pick.selected { border-color: var(--brand); background: #dbeafe; }
.product-picker .pick .icn { font-size: 26px; line-height: 1; }

/* ---------- STICKY MOBILE CTA BAR ---------- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 0;
  background: var(--ink); color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
.mobile-cta-bar a {
  flex: 1; padding: 14px 8px; text-align: center; color: #fff; font-weight: 700;
  font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none;
}
.mobile-cta-bar a.primary { background: var(--brand); }
.mobile-cta-bar a.primary:hover { background: var(--brand-2); }
.mobile-cta-bar a + a { border-left: 1px solid rgba(255,255,255,.12); }
@media (min-width: 900px) { .mobile-cta-bar { display: none; } }
body.has-mobile-bar { padding-bottom: 64px; }
@media (min-width: 900px) { body.has-mobile-bar { padding-bottom: 0; } }

/* ---------- FOOTER ---------- */
footer.site-foot {
  background: var(--ink); color: #d1d5db; padding: 44px 0 22px; margin-top: 20px;
}
.foot-grid {
  display: grid; gap: 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-grid h4 { color: #fff; font-family: var(--stack); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.foot-grid a { color: #d1d5db; }
.foot-grid a:hover { color: #fff; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.foot-legal {
  border-top: 1px solid #374151; padding-top: 16px; margin-top: 26px;
  font-size: 12px; color: #6b7280; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}
.foot-legal a { color: #6b7280; }

/* ---------- UTILITY ---------- */
.prose p, .prose li { color: var(--ink-2); }
.prose blockquote {
  border-left: 3px solid var(--brand); padding: 6px 16px; margin: 14px 0;
  color: var(--ink); font-style: italic; background: var(--paper-2);
}
.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;
}
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  background: #dbeafe; color: var(--brand); font-size: 12px; font-weight: 700;
}

.hero-art {
  background-image: linear-gradient(135deg, rgba(15,20,25,.85), rgba(15,20,25,.55)),
    url('/v2/assets/img/hero-home.jpg');
  background-size: cover; background-position: center;
}


/* ---------- Contact page grid ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 60px; }
}
.contact-block {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
}
.contact-block strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 2px;
}
.contact-block a { color: #0f1419; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brand-2); }
.contact-block a:hover { color: var(--brand-2); }

/* Social links in footer */
.social-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.social-links a:hover { border-color: var(--brand-2); color: #fff; }

/* Honeypot field - keep invisible */
.hp { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; overflow: hidden; }


/* ============== v1.5 real hero images + photo thumbs ============== */
.hero.has-img > picture {
  position: absolute; inset: 0; display: block; z-index: 0;
}
.hero.has-img > picture img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.05) contrast(1.02);
}
.hero.has-img::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,20,25,.55) 0%, rgba(15,20,25,.78) 60%, rgba(15,20,25,.88) 100%),
    linear-gradient(90deg, rgba(29,78,216,.10), rgba(15,20,25,0) 45%);
  pointer-events: none;
}
.hero.has-img > .container { position: relative; z-index: 2; }

/* Product card real-photo thumbnails */
.product-card .thumb { position: relative; overflow: hidden; }
.product-card .thumb .thumb-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .35s ease;
  display: block;
}
.product-card:hover .thumb-img { transform: scale(1.04); }

/* Gallery hub cards with real images */
.gallery-hub .card img,
.gallery-hub-grid .card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  display: block;
}

/* Gallery tiles now wrap an anchor */
.gallery-grid .tile a {
  display: block; position: relative;
  width: 100%; height: 100%;
  text-decoration: none;
}
.gallery-grid .tile a .quote-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78));
  color: #fff; font-weight: 600; font-size: .9rem;
  opacity: 0; transition: opacity .25s;
  text-align: left;
}
.gallery-grid .tile a:hover .quote-cta,
.gallery-grid .tile a:focus-visible .quote-cta { opacity: 1; }
@media (max-width: 600px) {
  .gallery-grid .tile a .quote-cta {
    opacity: 1; font-size: .82rem; padding: 8px 10px;
  }
}


/* ---------- Header brand logo (v1.7.2) ---------- */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; padding: 2px 0; }
.brand-logo picture, .brand-logo img { display: block; }
.brand-logo img {
  height: 44px;          /* mobile */
  width: auto;
  max-width: 180px;
  object-fit: contain;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .brand-logo img { height: 52px; max-width: 220px; }
}
@media (min-width: 1100px) {
  .brand-logo img { height: 58px; max-width: 240px; }
}


/* ============================================================
   Showroom Section (Variant B: Split Card with Map Pin)
   ============================================================ */
.showroom-section { padding: 28px 0 40px; }
.showroom-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 20, 25, 0.08);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.showroom-card:hover {
  box-shadow: 0 14px 36px rgba(15, 20, 25, 0.14);
  border-color: var(--brand);
  transform: translateY(-1px);
  text-decoration: none;
}
.showroom-info { padding: 36px 40px; }
.showroom-eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--stack);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 12px;
}
.showroom-title {
  margin: 0 0 10px;
  font: 700 clamp(26px, 3.6vw, 40px)/1.15 var(--serif);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.showroom-title em { font-style: normal; color: var(--brand); }
.showroom-addr {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.showroom-sub { color: #374151; margin: 0 0 20px; max-width: 52ch; }
.showroom-ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.showroom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
}
.showroom-btn.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.showroom-card:hover .showroom-btn.btn-primary { background: var(--brand-2); border-color: var(--brand-2); }
.showroom-btn.btn-outline { background: #fff; color: var(--ink); border-color: var(--ink); }
.showroom-btn.btn-outline:hover { background: var(--ink); color: #fff; }

.showroom-map {
  background: linear-gradient(135deg, #0f1419 0%, #0f1419 100%);
  min-height: 280px;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showroom-map::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 38px 38px;
}
.showroom-pin { position: relative; text-align: center; padding: 0 16px; }
.showroom-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 0 0 8px rgba(29, 78, 216, 0.28);
}
.showroom-pin-lbl { font-weight: 700; font-size: 18px; color: #fff; }
.showroom-pin-sub { color: #d1d5db; font-size: 14px; margin-top: 2px; }
.showroom-pin-hours { color: #dbeafe; font-size: 13px; margin-top: 10px; letter-spacing: 0.02em; }

@media (max-width: 780px) {
  .showroom-card { grid-template-columns: 1fr; }
  .showroom-info { padding: 26px 22px; }
  .showroom-map { min-height: 200px; order: -1; }
  .showroom-addr { font-size: 18px; }
}


/* ============================================================
   Showroom Section - Premium Dark Full-Width Banner (v1.7.6)
   ============================================================ */
.sr-dark {
  position: relative;
  background:
    radial-gradient(900px 380px at 85% 0%, rgba(29,78,216,.28), transparent 60%),
    radial-gradient(700px 320px at 10% 100%, rgba(29,78,216,.18), transparent 60%),
    linear-gradient(180deg, #0a0c10 0%, #0f1419 60%, #0a0c10 100%);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  isolation: isolate;
  margin: 28px 0 40px;
}
.sr-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .10;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}
.sr-dark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #1d4ed8 20%, #1d4ed8 50%, #1d4ed8 80%, transparent 100%);
}
.sr-inner {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto; padding: 56px 28px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center;
}

/* Logo - white chip background (approved mockup style) */
.sr-logo {
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sr-logo:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,.32); }
.sr-logo img { display: block; width: 280px; height: auto; max-width: 100%; }
.sr-logo picture { display: block; }

/* Content column */
.sr-content { min-width: 0; }
.sr-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--stack, Inter, system-ui, sans-serif);
  letter-spacing: .18em; text-transform: uppercase;
  color: #dbeafe; margin: 0 0 14px;
}
.sr-eyebrow::before { content: ""; width: 28px; height: 2px; background: #1d4ed8; }

.sr-title {
  margin: 0 0 18px; color: #fff;
  font: 800 clamp(28px, 4vw, 44px)/1.05 var(--stack, Inter, system-ui, sans-serif);
  letter-spacing: -0.02em;
}
.sr-title strong {
  font-weight: 900;
  background: linear-gradient(180deg, #fff 0%, #dbeafe 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* CTAs placed directly under headline (moved up per user tweak) */
.sr-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.sr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 8px;
  font: 700 15px/1 var(--stack, Inter, system-ui, sans-serif);
  text-decoration: none; border: 1px solid transparent;
  transition: all .15s ease; cursor: pointer;
}
.sr-btn .arrow { font-size: 18px; }
.sr-btn-primary { background: #1d4ed8; color: #fff; border-color: #1d4ed8; box-shadow: 0 6px 18px rgba(29,78,216,.45); }
.sr-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; transform: translateY(-1px); color: #fff; text-decoration: none; }
.sr-btn-ghost { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.3); }
.sr-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.sr-btn-quote { background: #fff; color: #0f1419; border-color: #fff; }
.sr-btn-quote:hover { background: #dbeafe; color: #0f1419; text-decoration: none; }
.sr-btn-reviews {
  padding: 9px 14px; font-size: 13px;
  background: rgba(255,255,255,.04); color: #fff; border: 1px solid rgba(255,255,255,.3);
}
.sr-btn-reviews:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }

/* Meta strip */
.sr-meta { display: flex; flex-wrap: wrap; gap: 22px 36px; margin: 0; color: #e5e7eb; }
.sr-meta .item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sr-meta .item .ico {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(29,78,216,.2); border: 1px solid rgba(29,78,216,.55);
  display: flex; align-items: center; justify-content: center;
  color: #dbeafe; font-size: 18px; flex: 0 0 auto;
}
.sr-meta .item .lab { font: 700 11px/1 var(--stack, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin: 2px 0 4px; }
.sr-meta .item .val { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; }
.sr-meta .item .val a { color: #fff; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.25); }
.sr-meta .item .val a:hover { border-bottom-color: #dbeafe; color: #fff; }

/* Right trust column */
.sr-side {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  padding-left: 28px; border-left: 1px solid rgba(255,255,255,.12);
}
.sr-since { font: 700 11px/1 var(--stack, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; color: #dbeafe; }
.sr-stars { color: #1d4ed8; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.sr-reviewlbl { font-size: 13px; color: #d1d5db; text-align: right; }

/* Mobile responsive */
@media (max-width: 960px) {
  .sr-inner { grid-template-columns: 1fr; gap: 24px; padding: 40px 22px; }
  .sr-logo { justify-self: start; padding: 12px 14px; }
  .sr-logo img { width: 220px; }
  .sr-side {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12);
    gap: 14px 18px;
  }
  .sr-reviewlbl { text-align: left; }
  .sr-title { font-size: 30px; }
  .sr-meta { gap: 16px 26px; }
  .sr-meta .item .val { font-size: 16px; }
  .sr-ctas .sr-btn { padding: 12px 18px; font-size: 14px; }
}
@media (max-width: 520px) {
  .sr-inner { padding: 34px 18px; }
  .sr-logo img { width: 200px; }
  .sr-meta { flex-direction: column; gap: 14px; }
  .sr-meta .item .val { font-size: 17px; }
  .sr-ctas { flex-direction: column; align-items: stretch; }
  .sr-ctas .sr-btn { justify-content: center; width: 100%; }
}


/* ---------- v1.7.8 Home hero tuning for new luxury-home photo ---------- */
/* Keeps the house and balcony visible while ensuring H1/CTA contrast. */
body.home .hero.has-img { min-height: 520px; }
body.home .hero.has-img > picture img {
  object-position: center 40%; /* slightly favor balcony/upper area */
}
body.home .hero.has-img::before {
  background:
    linear-gradient(90deg, rgba(12,16,22,.82) 0%, rgba(12,16,22,.55) 46%, rgba(12,16,22,.10) 72%, rgba(12,16,22,0) 100%),
    linear-gradient(180deg, rgba(12,16,22,.30) 0%, rgba(12,16,22,.15) 55%, rgba(12,16,22,.55) 100%);
}
@media (max-width: 767px) {
  body.home .hero.has-img { min-height: 560px; }
  body.home .hero.has-img > picture img {
    object-position: center 35%;
  }
  body.home .hero.has-img::before {
    background:
      linear-gradient(180deg, rgba(12,16,22,.35) 0%, rgba(12,16,22,.55) 45%, rgba(12,16,22,.85) 100%);
  }
}
@media (min-width: 1200px) {
  body.home .hero.has-img { min-height: 620px; }
}


/* ---------- v1.7.8 Mobile hero headline safety ---------- */
/* Hard guard against any horizontal overflow on small viewports. */
html, body { overflow-x: hidden; }
.hero h1, .hero .lede, .hero .container {
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
}
@media (max-width: 600px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: clamp(1.45rem, 6.4vw, 1.95rem); line-height: 1.2; }
  .hero .lede { font-size: clamp(.95rem, 4vw, 1.1rem); }
  .hero .cta-row { flex-wrap: wrap; gap: 10px; }
  .hero .cta-row .btn-primary,
  .hero .cta-row .btn-ghost { width: 100%; justify-content: center; max-width: none; }
  .hero .trust-strip { font-size: 13px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 1.4rem; }
}


/* ============ Quick product paths strip (below hero) ============ */
.quick-paths{background:#0f1419;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:14px 0}
.quick-paths .qp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick-paths .qp-card{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.quick-paths .qp-card:hover{background:rgba(29,78,216,.18);border-color:rgba(29,78,216,.55);transform:translateY(-1px);text-decoration:none}
.quick-paths .qp-lab{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;font-weight:600}
.quick-paths .qp-val{font-size:1.06rem;font-weight:700;color:#fff;line-height:1.2}
@media (max-width:720px){ .quick-paths .qp-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .quick-paths .qp-row{grid-template-columns:1fr} }


/* v1.9.0 — sub-collection honest banner */
.gallery-note {
  background: #0a0c10;
  color: #d1d5db;
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  border-radius: 2px;
}


/* Step A (v2.1.0) — Gallery design-ID chip + Build This CTA + lightbox. Additive. */
.gallery-grid .tile .design-chip {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,.78); color: #d1d5db;
  border: 1px solid rgba(233,215,161,.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 2px; pointer-events: none; user-select: none;
}
.gallery-grid .tile img[data-design-id] { cursor: zoom-in; }
.gallery-grid .tile .build-this-cta {
  position: absolute; top: auto; left: 8px; right: 8px; bottom: 8px;
  width: auto; height: auto; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  /* v2.5.0A button-contrast rule (2026-04-25): blue bg requires white text. */
  padding: 9px 12px; background: var(--gold, #1d4ed8); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: .02em;
  border-radius: 3px; opacity: 0; pointer-events: none;
  transition: opacity .2s, filter 140ms ease, transform 140ms ease;
}
.gallery-grid .tile:hover .build-this-cta,
.gallery-grid .tile:focus-within .build-this-cta { opacity: 1; pointer-events: auto; }
.gallery-grid .tile .build-this-cta:hover,
.gallery-grid .tile .build-this-cta:focus-visible {
  filter: brightness(1.06); transform: translateY(-1px); text-decoration: none; outline: none;
}
.gallery-grid .tile .build-this-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(183,134,40,.5); opacity: 1;
}
@media (max-width: 700px) { .gallery-grid .tile .build-this-cta { opacity: 1; pointer-events: auto; } }

body.olb-lock { overflow: hidden; }
.olson-lightbox {
  position: fixed; inset: 0; z-index: 9990;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.88); padding: 24px; opacity: 0;
  transition: opacity 160ms ease;
}
.olson-lightbox.is-open { display: flex; opacity: 1; }
.olson-lightbox .olb-fig {
  margin: 0; max-width: min(80vw, 1280px); max-height: 88vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.olson-lightbox .olb-img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  object-fit: contain; border-radius: 2px; background: #0a0c10;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.olson-lightbox .olb-cap {
  color: #d1d5db; font-size: 13px; line-height: 1.4; text-align: center;
  max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.olson-lightbox .olb-chip {
  display: inline-block; background: rgba(233,215,161,.12);
  border: 1px solid rgba(233,215,161,.45); color: #d1d5db;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 2px;
}
.olson-lightbox .olb-alt { color: #d1d5db; font-size: 13px; }
.olson-lightbox button {
  position: absolute; background: rgba(0,0,0,.55); color: #d1d5db;
  border: 1px solid rgba(233,215,161,.35); border-radius: 2px;
  font-size: 28px; line-height: 1; width: 44px; height: 44px; cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.olson-lightbox button:hover,
.olson-lightbox button:focus-visible { background: rgba(0,0,0,.85); outline: none; }
.olson-lightbox button:focus-visible { box-shadow: 0 0 0 3px rgba(233,215,161,.5); }
.olson-lightbox .olb-close { top: 16px; right: 16px; font-size: 22px; }
.olson-lightbox .olb-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.olson-lightbox .olb-next  { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .olson-lightbox { padding: 12px; }
  .olson-lightbox .olb-fig { max-width: 100vw; }
  .olson-lightbox .olb-img { max-height: 70vh; }
  .olson-lightbox .olb-close { top: 10px; right: 10px; }
  .olson-lightbox .olb-prev  { left: 6px; }
  .olson-lightbox .olb-next  { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .olson-lightbox { transition: none; }
  .gallery-grid .tile .build-this-cta { transition: none; }
}

/* v2.3.0 — Premium empty-state for borrow-mode sub-collection pages
   with zero category-pure tiles (Option B). Renders a clean panel
   with heading, honest copy and parent-gallery CTA. No placeholders. */
.gallery-empty{
  background: linear-gradient(180deg, #0a0c10 0%, #0a0c10 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 48px 28px;
  text-align: center;
  max-width: 820px;
  margin: 28px auto 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px rgba(0,0,0,0.35);
  color: #e5e7eb;
}
.gallery-empty__title{
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: 0.2px;
  color: #f9fafb;
}
.gallery-empty__copy{
  color: #d1d5db;
  max-width: 60ch;
  margin: 0 auto 26px;
  line-height: 1.65;
  font-size: 1.02rem;
}
.gallery-empty__actions{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.gallery-empty__actions .btn{ min-width: 240px; }
.gallery-empty__actions .btn-ghost{ color:#fff; border-color:#fff; }
.gallery-empty__actions .btn-ghost:hover{ background:#fff; color:var(--ink); }
@media (max-width: 520px){
  .gallery-empty{ padding: 32px 18px; }
  .gallery-empty__title{ font-size: 1.35rem; }
  .gallery-empty__actions .btn{ min-width: 0; width: 100%; }
}

/* ===== v2.3.1: Windows-gallery-only presentation overrides ===== */
/* Scope: ONLY .gallery-grid.gallery-windows (injected by gallery_detail when
   slug == 'security-screens-windows'). No other gallery is affected. */
.gallery-grid.gallery-windows .tile img {
  object-fit: cover;          /* fill the 1:1 tile box */
  background: transparent;    /* no black sidebars on portrait photos */
}
.gallery-grid.gallery-windows .tile {
  background: var(--paper-2, #f9fafb);
}

/* Finish-reference section heading + note (Windows only; emitted inline in
   the gallery body between the install group and the finish-reference group). */
.gallery-section-title {
  margin: 28px 0 6px 0;
  font-size: 22px;
  letter-spacing: 0.2px;
  color: var(--ink, #0a0c10);
}
.gallery-section-note {
  margin: 0 0 14px 0;
  color: var(--ink-2, #374151);
  font-size: 14.5px;
}
/* Slightly different tile background behind the finish references so the
   divider reads visually too, not just via the heading. Still Windows-scoped. */
.gallery-grid.gallery-windows--finish .tile {
  background: #f3f4f6; /* soft gray letterbox so finish-frame reads on mobile */
}
/* v2.5.0A windows-mobile-fix: portrait finish-reference photos are taller than
   the 1:1 tile box. Use 'contain' (not 'cover') so the WHOLE window is visible
   on mobile, not just the dark mesh center. Scoped strictly to Windows finish
   tiles; no other gallery affected. */
.gallery-grid.gallery-windows--finish .tile img {
  object-fit: contain;
  background: #f3f4f6;
}

   v2.4.0B — Multi-design quote bundle
   ============================================================ */

/* Builder Step 7 third button (Add to bundle). */
.bld-btn.outline {
  background: #fff;
  color: #0a0c10;
  border: 1.5px solid #0a0c10;
  font-weight: 600;
}
.bld-btn.outline:hover { background: #f3f4f6; }
.bld-btn.outline:disabled {
  background: #f9fafb;
  color: #374151;
  border-color: #e5e7eb;
  cursor: default;
}

/* Floating bundle banner (gold pill, bottom-right) */
.oi-bundle-banner {
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0) + 76px);
  z-index: 60;
  text-decoration: none;
  display: inline-block;
  border-radius: 999px;
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
  color: #0a0c10;
  font-weight: 700;
  padding: 10px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.oi-bundle-banner:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.1); }
.oi-bundle-banner .oi-bundle-pill { display: inline-flex; gap: 4px; align-items: center; font-size: 14px; line-height: 1.2; }
.oi-bundle-banner .oi-bundle-count { font-variant-numeric: tabular-nums; }
.oi-bundle-banner .oi-bundle-cta { margin-left: 4px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .oi-bundle-banner { right: 12px; bottom: calc(env(safe-area-inset-bottom, 0) + 84px); padding: 9px 14px; font-size: 13px; }
}

/* Bundle review on /v2/quote/ */
.oi-bundle-review {
  border-top: 4px solid #1e40af;
  background: #dbeafe;
}
.oi-bundle-review h2 { font-size: 1.4rem; }
.oi-bundle-list { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.oi-bundle-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #d1d5db;
}
.oi-bundle-thumb img,
.oi-bundle-imgph {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  background: #f3f4f6;
  display: block;
}
.oi-bundle-meta { min-width: 0; }
.oi-bundle-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  color: #0a0c10;
}
.oi-bundle-chip {
  background: #0a0c10;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.oi-bundle-summary {
  margin-top: 4px;
  color: #6b7280;
  font-size: 14px;
  word-break: break-word;
}
.oi-bundle-rm {
  background: transparent;
  border: 1px solid #374151;
  color: #374151;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.oi-bundle-rm:hover { background: #374151; color: #fff; }
.oi-bundle-actions { margin-top: 14px; display: flex; justify-content: flex-end; }

@media (max-width: 640px) {
  .oi-bundle-row { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; }
  .oi-bundle-rm  { grid-column: 2; justify-self: end; }
  .oi-bundle-thumb img,
  .oi-bundle-imgph { width: 64px; height: 64px; }
}


/* ================================================================
   v2.4.0 — SPLIT HERO LAYOUT
   Left: eyebrow / H1 / star divider / lede / CTAs / 3 trust badges
   Right: whole-house category photo
   Mobile: stacks with photo above copy
   ================================================================ */
.hero-split {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(29,78,216,0.22) 0%, rgba(29,78,216,0) 55%),
    linear-gradient(180deg, rgba(6,9,13,0.96) 0%, rgba(12,16,22,0.98) 100%),
    url('/v2/assets/img/mesh-texture.jpg');
  background-size: auto, auto, 220px 220px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center top;
  color: var(--white);
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--blue-600);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) inset;
}
.hero-split::after {
  /* subtle blue vignette on the right edge behind the photo panel */
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(12,16,22,0) 55%, rgba(29,78,216,0.08) 85%, rgba(12,16,22,0) 100%);
  pointer-events: none;
}
.hero-split-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-top: 34px;
  padding-bottom: 40px;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  .hero-split-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 44px;
    padding-top: 48px;
    padding-bottom: 56px;
    align-items: center;
  }
}
.hero-split-copy { min-width: 0; }
.hero-split-copy .breadcrumbs { margin-bottom: 14px; opacity: .85; }
.hero-split-copy .breadcrumbs a { color: rgba(255,255,255,.85); }
.hero-split-copy .breadcrumbs { color: rgba(255,255,255,.7); }

.hero-split-eyebrow {
  display: inline-block;
  font-family: 'Oswald', var(--stack);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #6ea8f5;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}
.hero-split-h1 {
  color: var(--white);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.85rem, 3.25vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
  max-width: 22ch;
  font-style: normal;
}
.hero-split-h1 em, .hero-split-h1 strong { color: #6ea8f5; font-style: normal; font-weight: 900; }

.hero-split-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  max-width: 420px;
}
.hero-split-rule::before, .hero-split-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--blue-600) 50%, rgba(255,255,255,0) 100%);
}
.hero-split-rule-star {
  color: var(--blue-600);
  font-size: 14px;
  text-shadow: 0 0 10px rgba(29,78,216,0.8);
  line-height: 1;
}

.hero-split-lede {
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  max-width: 58ch;
  margin: 0 0 26px;
}
.hero-split-lede strong { color: var(--white); }

.hero-split-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 28px;
}
.hero-split-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: 'Oswald', var(--stack);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hero-split-btn em {
  font-style: normal;
  font-size: 18px;
  transition: transform .15s ease;
}
.hero-split-btn:hover em { transform: translateX(3px); }
.hero-split-btn--primary {
  background: linear-gradient(180deg, var(--blue-600) 0%, var(--blue-700) 100%);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 10px 26px rgba(29,78,216,0.55);
}
.hero-split-btn--primary:hover {
  background: linear-gradient(180deg, #2a63d8 0%, var(--blue-700) 100%);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.18),
    0 14px 32px rgba(29,78,216,0.65);
}
.hero-split-btn--ghost {
  background: rgba(255,255,255,0.04);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.35);
}
.hero-split-btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border-color: var(--white);
}

.hero-split-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.sh-badge {
  display: flex; align-items: flex-start; gap: 10px;
}
.sh-badge-ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a63d8 0%, var(--blue-700) 70%, #0f3ba8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 10px rgba(29,78,216,0.55);
  position: relative;
}
.sh-badge-ico::before {
  content: ''; position: absolute; inset: 0;
  background-position: center; background-repeat: no-repeat; background-size: 20px 20px;
}
.sh-badge-ico--shield::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/><path d='m9 12 2 2 4-4'/></svg>");
}
.sh-badge-ico--ribbon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='6'/><path d='m8 13-2 8 6-3 6 3-2-8'/></svg>");
}
.sh-badge-ico--house::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/></svg>");
}
.sh-badge-text {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  line-height: 1.25;
}
.sh-badge-text b {
  font-family: 'Oswald', var(--stack);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.sh-badge-text span {
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
}

/* ----- Photo panel ----- */
.hero-split-photo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0c10;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 24px 48px rgba(0,0,0,0.55);
  aspect-ratio: 4/3;
}
/* C1 — taller-frame variant (Iron Gates hero, owner-approved override §1.7.5/§1.7.6 on 2026-04-25). */
.hero-split-photo--square { aspect-ratio: 1/1; }
.hero-split-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
.hero-split-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,16,22,0) 60%, rgba(12,16,22,0.35) 100%),
    linear-gradient(90deg, rgba(12,16,22,0.08) 0%, rgba(12,16,22,0) 30%);
  pointer-events: none;
}

/* ----- Mobile / tablet ----- */
@media (max-width: 899px) {
  .hero-split-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 22px;
    padding-bottom: 28px;
  }
  .hero-split-photo { aspect-ratio: 16/10; order: -1; }
  .hero-split-photo--square { aspect-ratio: 1/1; }
  .hero-split-h1 { font-size: clamp(1.55rem, 6.2vw, 2.1rem); }
  .hero-split-lede { font-size: 1rem; }
  .hero-split-btn { width: 100%; justify-content: center; }
  .hero-split-badges {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 420px) {
  .hero-split-eyebrow { font-size: 11px; letter-spacing: 0.16em; padding: 5px 9px; }
  .sh-badge-ico { width: 32px; height: 32px; }
  .sh-badge-ico::before { background-size: 17px 17px; }
}


/* ============================================================
   v2.4.0I — Slim single-row header (Option B)
   Replaces the 3-band sh-showroom layout with one row:
   logo (L) + nav (C) + phone (R) on woven-iron-mesh background.
   ============================================================ */
.site-header.sh-slim {
  position: relative;
  /* Paint-job v2.4.0J: real security-screen mesh photo, dense repeat, neutral dark overlay */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.62) 100%),
    url('/v2/assets/img/mesh-texture.jpg') center/120px 120px repeat,
    #0a0a0a;
  border-bottom: 1px solid rgba(29,78,216,0.55);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 4px 16px rgba(0,0,0,0.4);
}
.site-header.sh-slim .sh-slim-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  min-height: 108px;
}
.site-header.sh-slim .sh-logo {
  display: inline-flex;
  align-items: center;
  grid-column: 1;
}
.site-header.sh-slim .sh-logo img {
  height: 82px;
  width: 122px;
  max-width: 122px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(96,165,250,0.28));
}
.site-header.sh-slim .site-nav.sh-nav {
  grid-column: 2;
  justify-self: center;
}
.site-header.sh-slim .site-nav.sh-nav ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.site-header.sh-slim .site-nav.sh-nav li {
  display: flex;
}
.site-header.sh-slim .site-nav.sh-nav li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-family: 'Oswald', var(--stack);
  font-size: 13.5px;
  letter-spacing: 0.10em;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.site-header.sh-slim .site-nav.sh-nav li a:hover {
  color: #cfe0ff;
  background: transparent;
  text-decoration: none;
}
.site-header.sh-slim .site-nav.sh-nav li a[aria-current="page"],
.site-header.sh-slim .site-nav.sh-nav li.active > a {
  color: #ffffff !important;
  background: var(--blue-600);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
  font-weight: 700;
  border-radius: 6px;
}
.site-header.sh-slim .site-nav.sh-nav li a[aria-current="page"]:hover,
.site-header.sh-slim .site-nav.sh-nav li.active > a:hover {
  color: #ffffff !important;
  background: var(--blue-600);
}
.site-header.sh-slim .sh-call {
  grid-column: 3;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 0;
  align-items: center;
  padding: 6px 4px 6px 4px;
  border: 0;
  background: transparent;
  color: #ffffff;
  text-decoration: none;
  font-family: var(--stack);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.12s ease;
}
/* Icon spans both rows on the left */
.site-header.sh-slim .sh-call .sh-call-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
/* Phone number on row 1 of the right column */
.site-header.sh-slim .sh-call .sh-call-number {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 1px;
}
/* CALL US TODAY caption appended via pseudo-element on the link, placed in row 2 of the right column */
.site-header.sh-slim .sh-call::after {
  content: "CALL US TODAY";
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-family: 'Oswald', var(--stack);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  line-height: 1;
}
.site-header.sh-slim .sh-call:hover {
  opacity: 0.88;
  background: transparent;
  border: 0;
}
.site-header.sh-slim .sh-call-icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(29,78,216,0.95);
  color: var(--blue-600);
  font-size: 18px;
  line-height: 1;
  background: rgba(29,78,216,0.08);
  flex-shrink: 0;
}
.site-header.sh-slim .sh-call-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.site-header.sh-slim .sh-call-number {
  font-family: var(--stack);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  line-height: 1.05;
}
.site-header.sh-slim .sh-call-sub {
  display: inline-block;
  font-family: 'Oswald', var(--stack);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}
.site-header.sh-slim .nav-toggle {
  display: none;
}
@media (max-width: 900px) {
  .site-header.sh-slim .sh-slim-row {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 10px 14px;
    min-height: 60px;
  }
  .site-header.sh-slim .sh-logo img { height: 44px; }
  .site-header.sh-slim .site-nav.sh-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(0,0,0,0.96);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: none;
    z-index: 50;
  }
  .site-header.sh-slim .site-nav.sh-nav.open { display: block; }
  .site-header.sh-slim .site-nav.sh-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
  }
  .site-header.sh-slim .site-nav.sh-nav li { width: 100%; }
  .site-header.sh-slim .site-nav.sh-nav li a {
    width: 100%;
    border-radius: 0;
    padding: 14px 20px;
    justify-content: flex-start;
  }
  .site-header.sh-slim .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px; height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    order: 3;
  }
  .site-header.sh-slim .nav-toggle span {
    display: block; width: 22px; height: 2px; background: #fff; margin: 0 auto;
  }
  .site-header.sh-slim .sh-call {
    padding: 6px 10px;
    font-size: 13px;
    gap: 6px;
  }
  .site-header.sh-slim .sh-call-sub { display: none; }
  .site-header.sh-slim .sh-call-icon { width: 22px; height: 22px; font-size: 12px; }
}

/* ============================================================
   v2.4.0K — Showroom info band + Built Strong trust strip
   These two bands sit ABOVE the v2.4.0J slim row inside the
   same .site-header.sh-slim container, so they inherit the
   security-screen mesh background and the bottom blue rule.
   Palette locked: blue / black / gray / white only.
   ============================================================ */

/* --- Band 1: SHOWROOM info ------------------------------- */
.site-header.sh-slim .sh-showroom-band {
  position: relative;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header.sh-slim .sh-showroom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.site-header.sh-slim .sh-showroom-tagline {
  margin: 0;
  font-family: 'Oswald', var(--stack);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #e5edff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.site-header.sh-slim .sh-showroom-word {
  margin: 2px 0 0;
  font-family: 'Oswald', var(--stack);
  font-weight: 700;
  font-size: clamp(54px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  /* Saturated royal→deep-navy chrome gradient to match mockup */
  background: linear-gradient(180deg, #4a90ff 0%, #1d4ed8 30%, #0b2a78 70%, #051744 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Chrome bevel: white inner highlight + dark deep shadow + soft glow */
  filter:
    drop-shadow(0 -1px 0 rgba(180,210,255,0.85))
    drop-shadow(0 1px 0 rgba(255,255,255,0.35))
    drop-shadow(0 3px 6px rgba(0,0,0,0.75))
    drop-shadow(0 0 18px rgba(29,78,216,0.45));
}
.site-header.sh-slim .sh-showroom-rule {
  width: clamp(220px, 36%, 480px);
  height: 2px;
  margin: 6px 0 4px;
  background: linear-gradient(90deg, rgba(29,78,216,0) 0%, #1d4ed8 50%, rgba(29,78,216,0) 100%);
  border: 0;
}
.site-header.sh-slim .sh-showroom-address {
  margin: 0;
  font-family: 'Oswald', var(--stack);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* --- Band 2: BUILT STRONG. BUILT SECURE. SINCE 1999 ------ */
.site-header.sh-slim .sh-trust-strip {
  position: relative;
  padding: 8px 18px;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(29,78,216,0.35);
  border-bottom: 1px solid rgba(29,78,216,0.35);
}
.site-header.sh-slim .sh-trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.site-header.sh-slim .sh-trust-rule {
  flex: 0 0 180px;
  height: 1px;
  background: linear-gradient(90deg, rgba(29,78,216,0) 0%, #1d4ed8 60%, rgba(29,78,216,0.95) 100%);
}
.site-header.sh-slim .sh-trust-inner > .sh-trust-rule:last-child {
  background: linear-gradient(90deg, rgba(29,78,216,0.95) 0%, #1d4ed8 40%, rgba(29,78,216,0) 100%);
}
.site-header.sh-slim .sh-trust-star {
  color: #1d4ed8;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 6px rgba(29,78,216,0.55);
}
.site-header.sh-slim .sh-trust-text {
  font-family: 'Oswald', var(--stack);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: clamp(13px, 1.15vw, 16px);
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header.sh-slim .sh-trust-since {
  color: #1d4ed8;
  margin-left: 6px;
}

/* --- Mobile adjustments for the new bands --------------- */
@media (max-width: 720px) {
  .site-header.sh-slim .sh-showroom-band {
    padding: 10px 12px 12px;
  }
  .site-header.sh-slim .sh-showroom-tagline {
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.25;
  }
  .site-header.sh-slim .sh-showroom-word {
    font-size: clamp(40px, 12vw, 64px);
  }
  .site-header.sh-slim .sh-showroom-address {
    font-size: 12px;
  }
  .site-header.sh-slim .sh-trust-strip {
    padding: 6px 10px;
  }
  .site-header.sh-slim .sh-trust-inner { gap: 8px; }
  .site-header.sh-slim .sh-trust-rule { max-width: 60px; }
  .site-header.sh-slim .sh-trust-text {
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: normal;
    text-align: center;
  }
}


/* ============================================================
   v2.4.0L — Mockup-faithful 3-band header
   - Band 1 (.sh-top-band): logo (L) | showroom block (C) | phone (R)
   - Band 2 (.sh-trust-strip): unchanged from K
   - Band 3 (.sh-nav-band): nav links only, centered
   - Background: existing security-screen mesh + mockup wire-grid depth
     (showroom-depth.png) overlay layered on top band only.
   Palette locked: blue / black / gray / white.
   ============================================================ */

/* --- Band 1: top band (3 columns) ------------------------ */
.site-header.sh-slim.sh-mockup .sh-top-band {
  position: relative;
  /* Depth: mockup wire-grid (top), security-screen mesh (mid), darken (bottom) */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.74) 100%),
    url('/v2/assets/img/showroom-depth.png') center/140px 140px repeat,
    url('/v2/assets/img/mesh-texture.jpg') center/120px 120px repeat,
    #050608;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header.sh-slim.sh-mockup .sh-top-inner {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr minmax(220px, auto);
  align-items: center;
  gap: 18px;
  padding: 14px 20px 16px;
  min-height: 168px;
}

/* Logo column (left) */
.site-header.sh-slim.sh-mockup .sh-top-inner > .sh-logo {
  grid-column: 1;
  justify-self: start;
}
.site-header.sh-slim.sh-mockup .sh-top-inner > .sh-logo img {
  height: 158px;
  width: auto;
  max-width: 270px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7))
          drop-shadow(0 0 28px rgba(96,165,250,0.36));
}

/* Showroom column (center) */
.site-header.sh-slim.sh-mockup .sh-showroom-inner {
  grid-column: 2;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.site-header.sh-slim.sh-mockup .sh-showroom-tagline {
  margin: 0;
  font-family: 'Oswald', var(--stack);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.site-header.sh-slim.sh-mockup .sh-showroom-word {
  margin: 2px 0 0;
  font-family: 'Oswald', var(--stack);
  font-weight: 700;
  font-size: clamp(54px, 7.8vw, 104px);
  line-height: 0.95;
  letter-spacing: 0.025em;
  background: linear-gradient(180deg,
              #6fa6ff 0%,
              #2a6df0 22%,
              #1d4ed8 48%,
              #0a2a82 78%,
              #051744 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(190,215,255,0.9))
    drop-shadow(0 1px 0 rgba(255,255,255,0.45))
    drop-shadow(0 3px 6px rgba(0,0,0,0.8))
    drop-shadow(0 0 22px rgba(29,78,216,0.55));
}
.site-header.sh-slim.sh-mockup .sh-showroom-rule {
  width: clamp(220px, 36%, 460px);
  height: 2px;
  margin: 4px 0 4px;
  background: linear-gradient(90deg, rgba(29,78,216,0) 0%, #1d4ed8 50%, rgba(29,78,216,0) 100%);
  border: 0;
}
.site-header.sh-slim.sh-mockup .sh-showroom-address {
  margin: 0;
  font-family: 'Oswald', var(--stack);
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* Phone column (right) */
.site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call {
  grid-column: 3;
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 0;
  align-items: center;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  color: #ffffff;
  text-decoration: none;
  font-family: var(--stack);
  white-space: nowrap;
}
.site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call .sh-call-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 999px;
  border: 2.5px solid rgba(29,78,216,0.95);
  color: var(--blue-600);
  font-size: 22px;
  background: rgba(29,78,216,0.10);
}
.site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call .sh-call-number {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 1px;
  font-family: var(--stack);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  line-height: 1.05;
}
.site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call::after {
  content: "CALL US TODAY";
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-family: 'Oswald', var(--stack);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}
.site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call:hover { opacity: 0.9; }

/* --- Band 3: nav-only band ------------------------------ */
.site-header.sh-slim.sh-mockup .sh-nav-band {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%),
    url('/v2/assets/img/mesh-texture.jpg') center/120px 120px repeat,
    #050608;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(29,78,216,0.55);
  padding: 4px 0 6px;
}
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
}
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-family: 'Oswald', var(--stack);
  font-size: 14px;
  letter-spacing: 0.10em;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li a:hover {
  color: #cfe0ff;
  background: transparent;
}
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li a[aria-current="page"],
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li.active > a {
  color: #ffffff !important;
  background: var(--blue-600);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
  font-weight: 700;
  border-radius: 6px;
}

/* --- Mobile (≤900px): collapse top band, keep nav ----- */
@media (max-width: 900px) {
  .site-header.sh-slim.sh-mockup .sh-top-inner {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 10px 14px;
    min-height: 64px;
  }
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-logo img { height: 44px; max-width: 86px; }
  /* Center showroom block: only show wordmark + address on mobile */
  .site-header.sh-slim.sh-mockup .sh-showroom-tagline { display: none; }
  .site-header.sh-slim.sh-mockup .sh-showroom-word { font-size: clamp(28px, 9vw, 44px); letter-spacing: 0.02em; }
  .site-header.sh-slim.sh-mockup .sh-showroom-rule { width: clamp(120px, 50%, 220px); margin: 2px 0; }
  .site-header.sh-slim.sh-mockup .sh-showroom-address { font-size: 11px; letter-spacing: 0.02em; }
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call .sh-call-icon { width: 30px; height: 30px; font-size: 14px; border-width: 2px; }
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call .sh-call-number { font-size: 14px; }
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call::after { font-size: 9px; letter-spacing: 0.18em; }
  .site-header.sh-slim.sh-mockup .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px; height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    order: 4;
  }
  .site-header.sh-slim.sh-mockup .nav-toggle span {
    display: block; width: 22px; height: 2px; background: #fff; margin: 0 auto;
  }
  .site-header.sh-slim.sh-mockup .sh-nav-band {
    display: none;
  }
  .site-header.sh-slim.sh-mockup .sh-nav-band.open { display: block; }
  .site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
  }
  .site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li { width: 100%; }
  .site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li a {
    width: 100%;
    border-radius: 0;
    padding: 14px 20px;
    justify-content: flex-start;
  }
}


/* =====================================================================
   v2.4.0L SAMPLE — homepage-only override
   - New AI-extracted transparent chrome oval logo
   - Single seamless security-screen mesh top-band background
   Scoped strictly to body.home so other 5 pages stay on v2.4.0L baseline.
   ===================================================================== */

/* v2.4.0M — extend the seamless mesh from the top band straight through the
   trust strip as ONE continuous piece. Put the mesh on the parent header and
   make both the top band and trust strip share it; the nav band stays solid. */
.site-header.sh-slim.sh-mockup{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(29,78,216,0.18) 0%, rgba(29,78,216,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.42) 100%),
    url('/v2/assets/img/showroom-band-tile.png') left top / 240px 240px repeat,
    #050505;
}
.site-header.sh-slim.sh-mockup .sh-top-band{
  background: transparent;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.45);
}
/* Trust strip: drop its dark fill so the parent mesh shows through perfectly aligned */
.site-header.sh-slim .sh-trust-strip,
.site-header.sh-slim.sh-mockup .sh-trust-strip{
  background: transparent;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow:
    inset 0 0 0 9999px rgba(0,0,0,0.18),
    inset 0 0 30px rgba(0,0,0,0.35);
}
/* v2.4.0O — Nav band transparent and borderless; mesh flows straight through. */
.site-header.sh-slim.sh-mockup .sh-nav-band{
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow:
    inset 0 0 0 9999px rgba(0,0,0,0.22),
    inset 0 0 40px rgba(0,0,0,0.45);
}

/* Logo swap: use the new transparent chrome oval and let it breathe a touch larger */
.site-header.sh-slim.sh-mockup .sh-logo img{
  content: url('/v2/assets/img/header-logo-chrome-v2-cut.png');
  height: auto;
  width: 240px;
  max-width: none;
  filter:
    drop-shadow(0 0 14px rgba(29,78,216,0.25))
    drop-shadow(0 3px 8px rgba(0,0,0,0.65));
}

/* Slight extra left/right padding so the new logo doesn't kiss the edge */
.site-header.sh-slim.sh-mockup .sh-top-band > .sh-inner{
  padding-left: 28px;
  padding-right: 28px;
}

/* Mobile: shrink the new logo to fit the collapsed header */
@media (max-width: 900px){
  .site-header.sh-slim.sh-mockup .sh-logo img{
    width: 150px;
    height: auto;
  }
}

/* Also apply to legacy three-band sh-showroom header in case homepage uses it */
.site-header.sh-showroom{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.32) 100%),
    url('/v2/assets/img/showroom-band-bg.png') center/cover no-repeat,
    #050505 !important;
}
.site-header.sh-showroom .sh-logo img{
  content: url('/v2/assets/img/header-logo-chrome-v2-cut.png');
  width: 240px !important;
  height: auto !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)) !important;
}
@media (max-width: 900px){
  .site-header.sh-showroom .sh-logo img{
    width: 150px !important;
  }
}

/* v2.4.0S - Commercial Storefronts landing photo grid */
.storefront-photo-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:16px;margin:24px 0 8px;}
.storefront-photo{margin:0;overflow:hidden;border-radius:8px;background:#111;aspect-ratio:4/3;}
.storefront-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
.storefront-photo:hover img{ transform:scale(1.02); }
@media (max-width: 640px){.storefront-photo-grid{ grid-template-columns:1fr; }}


/* =====================================================================
   v2.4.0T — IP Shield, Trust Strip, Try-It-On, Hero standardization
   ===================================================================== */

/* ----- Footer copyright (IP shield notice) ----- */
.foot-legal{display:flex;flex-direction:column;gap:8px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;margin-top:18px}
.foot-copyright{color:#cfd6e2;font-size:12px;line-height:1.55;max-width:980px;font-weight:500}
.foot-license{color:#94a3b8;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
@media(min-width: 900px){
  .foot-legal{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px}
  .foot-copyright{max-width:78%}
  .foot-license{text-align:right;white-space:nowrap}
}

/* ----- Global Trust Strip (renders under category hero) ----- */
.trust-strip{
  background:#0b0f17;color:#fff;
  padding:14px 0;border-top:3px solid var(--blue-600,#1d4ed8);border-bottom:1px solid rgba(255,255,255,.08);
}
.trust-strip__inner{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 28px;
  font-family:'Oswald','Bebas Neue',Impact,sans-serif;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  font-size:14px;
}
.trust-strip__item{display:inline-flex;align-items:center;gap:10px;color:#fff}
.trust-strip__item:not(:last-child)::after{content:'';display:inline-block;width:6px;height:6px;background:var(--blue-600,#1d4ed8);border-radius:999px;margin-left:18px;vertical-align:middle}
@media(max-width:640px){
  .trust-strip__inner{gap:6px 16px;font-size:12.5px}
  .trust-strip__item:not(:last-child)::after{margin-left:8px;width:4px;height:4px}
}

/* ----- Standardized Hero: left copy / right photo ----- */
.std-hero{padding:48px 0 36px;background:linear-gradient(180deg,#0b0f17 0%,#101826 100%);color:#fff}
.std-hero__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:42px;align-items:center}
.std-hero__copy h1{font-size:clamp(28px,4vw,46px);line-height:1.1;margin:0 0 14px;font-weight:800;letter-spacing:-.01em;color:#fff;font-family:var(--serif)}
.std-hero__copy h1 strong{color:#9bb9ff}
.std-hero__copy .sub{color:#cfd9e6;font-size:17px;line-height:1.55;margin:0 0 22px;max-width:560px}
.std-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.std-hero__reassure{color:#94a3b8;font-size:13px;letter-spacing:.02em}
.std-hero__photo{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.45);aspect-ratio:4/3;background:#101826}
.std-hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:880px){
  .std-hero__grid{grid-template-columns:1fr;gap:24px}
  .std-hero__photo{aspect-ratio:4/3}
}

/* ----- Try-It-On lead-magnet UI ----- */
.tryiton{background:#0b0f17;color:#fff;padding:54px 0}
.tryiton__card{max-width:760px;margin:0 auto;background:#101826;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:28px}
.tryiton__title{font-size:26px;margin:0 0 6px;font-weight:800;color:#fff}
.tryiton__sub{color:#cfd9e6;margin:0 0 18px;font-size:15px}
.tryiton__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.tryiton__row.full{grid-template-columns:1fr}
.tryiton input[type=text],.tryiton input[type=email],.tryiton input[type=tel],.tryiton input[type=file]{
  width:100%;padding:12px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:#0b0f17;color:#fff;font:inherit
}
.tryiton__instruction{display:block;margin-top:6px;color:#9bb9ff;font-size:13px}
.tryiton__cta{margin-top:8px}
.tryiton__legal{margin-top:14px;color:#94a3b8;font-size:12px;line-height:1.5}
.tryiton__render{margin-top:24px;border-radius:12px;overflow:hidden;background:#000;position:relative}
.tryiton__render img{width:100%;height:auto;display:block}
.tryiton__render::after{content:'OLSON IRON \00B7 AI PREVIEW';position:absolute;right:12px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font:600 11px/1 'Oswald',sans-serif;letter-spacing:.08em;padding:6px 10px;border-radius:6px;pointer-events:none}
@media(max-width:640px){.tryiton__row{grid-template-columns:1fr}}

/* ----- Courtyard builder: lock-toggle + reach-through warning ----- */
.lock-toggle{margin-top:14px;padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:#f7f9fc}
.lock-toggle legend{font-weight:700;font-size:14px;color:#1f2937;padding:0 6px}
.lock-toggle__opt{display:flex;align-items:flex-start;gap:10px;padding:8px 0;cursor:pointer}
.lock-toggle__opt input{margin-top:3px}
.lock-toggle__opt strong{display:block;color:#0b0f17;font-size:14px}
.lock-toggle__opt span{display:block;color:#374151;font-size:13px;margin-top:2px}
.lock-warning{margin-top:10px;padding:10px 12px;border-left:4px solid var(--blue-600,#1d4ed8);background:#dbeafe;color:#1f2937;font-size:13px;border-radius:0 8px 8px 0}
.lock-warning strong{color:#0b0f17}

/* ----- Parts catalog ----- */
.parts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:24px 0}
.part-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(15,22,35,.05)}
.part-card__img{aspect-ratio:1/1;background:#f3f4f6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.part-card__img img{width:100%;height:100%;object-fit:cover}
.part-card__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.part-card__name{font-size:18px;font-weight:800;color:#0b0f17;margin:0}
.part-card__sub{color:#374151;font-size:13.5px;margin:0}
.part-card__desc{color:#374151;font-size:14px;line-height:1.55;margin:0}
.part-card__row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid #f3f4f6}
.part-card__price{font-family:'Oswald',sans-serif;font-size:24px;font-weight:700;color:#0b0f17}
.part-card__cta{padding:10px 18px;background:var(--blue-600,#1d4ed8);color:#fff;border-radius:8px;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.02em}
.part-card__cta:hover{background:var(--blue-700,#1e40af);color:#fff;text-decoration:none}

/* ----- Mandatory file-upload styling ----- */
input[type=file].is-required{border-color:#1d4ed8 !important;border-width:2px !important}
.upload-help{display:block;color:#1f2937;font-size:13px;margin:6px 0 0;line-height:1.5}
.upload-help strong{color:#0b0f17}

/* ----- About Us two-layer ----- */
.about-layer{padding:56px 0}
.about-layer--heritage{background:#fff}
.about-layer--offroad{background:#0b0f17;color:#fff}
.about-layer--offroad h2{color:#fff}
.about-layer--offroad p{color:#cfd9e6}
.about-layer__divider{height:6px;background:linear-gradient(90deg,#1d4ed8 0%,#0b0f17 50%,#1d4ed8 100%)}
.about-layer__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.about-layer__photo{aspect-ratio:4/3;border-radius:12px;background:#1f2937;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px;text-align:center;padding:20px}
.about-layer__photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:880px){.about-layer__grid{grid-template-columns:1fr}}

/* ----- Fortress Bundle / Frequently Bought Together (v2.4.0T-A) ----- */
.fortress-bundle{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;box-shadow:0 6px 18px rgba(15,22,35,.05)}
.fortress-bundle__title{margin:0 0 6px;font-size:1.4rem;color:#0b0f17}
.fortress-bundle__sub{margin:0 0 18px;color:#374151}
.fortress-bundle__row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.fortress-bundle__item{display:flex;flex-direction:column;align-items:center;gap:6px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;min-width:160px}
.fortress-bundle__item img{width:120px;height:120px;object-fit:cover;border-radius:8px;background:#f3f4f6}
.fortress-bundle__name{font-weight:700;color:#0b0f17;font-size:14px;text-align:center}
.fortress-bundle__price{font-family:'Oswald',sans-serif;font-size:18px;color:#374151}
.fortress-bundle__plus,.fortress-bundle__eq{font-size:28px;color:#6b7280;font-weight:700;font-family:'Oswald',sans-serif}
.fortress-bundle__total{display:flex;flex-direction:column;align-items:center;gap:6px;background:#0b0f17;color:#fff;border-radius:12px;padding:18px 22px;min-width:160px}
.fortress-bundle__total-label{font-size:13px;color:#cfe0ff;text-transform:uppercase;letter-spacing:.06em}
.fortress-bundle__total-price{font-family:'Oswald',sans-serif;font-size:32px;font-weight:700}
.fortress-bundle__savings{display:inline-block;background:#1d4ed8;color:#fff;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}
.fortress-bundle__total .btn{margin-top:6px}
@media(max-width:680px){
  .fortress-bundle__row{flex-direction:column}
  .fortress-bundle__plus,.fortress-bundle__eq{transform:rotate(90deg)}
}


/* v2.4.0T-A: Gallery-detail hero adjustments
   Bo: "that hero image is horrible" — replaced 436w hero with 914G (IMG_4203
   tall arched modern horizontal-bar courtyard entry). Now we need to:
   1) lighten the dark gradient so the photo can breathe
   2) shift object-position so the arch top + stone columns are visible (the
      photo is portrait; default center crops out both ends)
   3) add a subtle text-shadow for title legibility instead of a flat dark wash
*/
.hero.gallery-detail-hero > picture img {
  object-position: center 25%;
  filter: saturate(1.08) contrast(1.05) brightness(1.02);
}
.hero.gallery-detail-hero::before {
  background:
    linear-gradient(180deg, rgba(15,20,25,.42) 0%, rgba(15,20,25,.55) 55%, rgba(15,20,25,.72) 100%),
    linear-gradient(90deg, rgba(15,20,25,.55) 0%, rgba(15,20,25,0) 50%);
}
.hero.gallery-detail-hero h1,
.hero.gallery-detail-hero .lede,
.hero.gallery-detail-hero .eyebrow {
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
@media (min-width: 900px) {
  .hero.gallery-detail-hero { min-height: 460px; }
}


/* ================================================================
   v2.4.0T-A — MEGA-MENU (drop-down navigation)
   Desktop: hover/focus reveals panel beneath top-level item.
   Mobile: nav-toggle opens stacked accordion with sub-cats inline.
   Palette: blue / black / gray / white only (locked).
   ================================================================ */

/* ---------- Top-level list reset (override flat-link defaults) ---------- */
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav .nav-primary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item {
  position: relative;
  list-style: none;
}

.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > a,
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-item-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > a:hover,
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-item-trigger:hover,
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item:focus-within > a,
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item:focus-within > .nav-item-trigger {
  color: #cfe0ff;
  border-bottom-color: #1e6cd6;
  background: rgba(30, 108, 214, 0.10);
}

.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.active > a,
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.active > .nav-item-trigger {
  color: #ffffff;
  border-bottom-color: #1e6cd6;
}

.nav-caret {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transform: translateY(1px);
  opacity: 0.85;
}

/* ---------- Mega-menu drop-down panel ---------- */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px;
  max-width: 420px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(11, 15, 23, 0.22), 0 2px 6px rgba(11, 15, 23, 0.08);
  border: 1px solid #e5e7eb;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 1000;
}

.mega-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 18px; /* invisible bridge so the cursor doesn't lose hover */
}

.nav-item--has-mega:hover .mega-menu,
.nav-item--has-mega:focus-within .mega-menu,
.mega-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.mm-inner {
  padding: 12px 14px 14px;
}

.mm-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mm-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border-radius: 6px;
}

.mm-sub:hover {
  background: #f3f4f6;
}

.site-header .mega-menu .mm-sub-link,
.site-header.sh-slim .mega-menu .mm-sub-link,
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li .mm-sub-link {
  display: block;
  flex: 1 1 auto;
  padding: 11px 12px;
  color: #0b0f17 !important;
  background: transparent;
  font-family: var(--stack);
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  line-height: 1.25;
  text-decoration: none;
  white-space: normal;
  border: 0;
}

.site-header .mega-menu .mm-sub-link:hover,
.site-header .mega-menu .mm-sub-link:focus,
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li .mm-sub-link:hover,
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li .mm-sub-link:focus {
  color: #1554a8 !important;
  background: transparent;
  text-decoration: none;
}

.site-header .mega-menu .mm-sub-build,
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li .mm-sub-build {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 7px 11px !important;
  margin-right: 6px;
  font-family: var(--stack);
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #0b3a78 !important;
  background: #dde9fb !important;
  border: 1px solid #1554a8 !important;
  border-radius: 4px !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-header .mega-menu .mm-sub-build:hover,
.site-header .mega-menu .mm-sub-build:focus {
  background: #1e6cd6 !important;
  color: #ffffff !important;
}

.mm-sub-build:hover {
  background: #1e6cd6;
  color: #ffffff;
  text-decoration: none;
}

.mm-foot {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-header .mega-menu .mm-foot-all,
.site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav li .mm-foot-all {
  color: #1f2937 !important;
  background: transparent;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0 !important;
  border: 0;
}

.site-header .mega-menu .mm-foot-all:hover,
.site-header .mega-menu .mm-foot-all:focus {
  color: #1554a8 !important;
  text-decoration: none;
}

.mm-foot-build.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background: #1e6cd6;
  color: #ffffff !important;
  border: 1px solid #1554a8;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
}

.mm-foot-build.btn:hover {
  background: #1554a8;
  color: #ffffff !important;
}

/* ---------- Mobile (≤ 900px): hide hover panels, render as accordion ---------- */
@media (max-width: 899px) {
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary {
    flex-direction: column;
    align-items: stretch;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > a,
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-item-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: none;
  }

  .mega-menu {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    box-shadow: none;
    max-width: 100%;
    min-width: 0;
    border-radius: 0;
    display: none;
    transition: none;
  }

  .nav-item--has-mega.mm-open > .mega-menu {
    display: block;
  }

  .mm-sub-link {
    color: #e5e7eb;
  }

  .mm-sub-link:hover {
    color: #ffffff;
  }

  .mm-sub:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .mm-foot-all {
    color: #cfe0ff;
  }

  .mega-menu::before {
    display: none;
  }
}


/* ================================================================
   v2.4.0T-A — REBUILT GALLERY HUB
   Two-tier card grid: top categories (lg) + sub-categories (sm).
   Every card carries a Build CTA button beneath the photo.
   ================================================================ */

.gallery-hub-grid.hub-grid--lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin: 6px 0 0;
}

.gallery-hub-grid.hub-grid--sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 6px 0 0;
}

.hub-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hub-card-wrap .card.hub-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(11, 15, 23, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  background: #ffffff;
}

.hub-card-wrap .card.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(11, 15, 23, 0.16);
}

.hub-card-wrap.hub-card--lg .card.hub-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.hub-card-wrap.hub-card--sm .card.hub-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.hub-card-wrap .card.hub-card .label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 14px;
  background: #ffffff;
  color: #1f2937;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
}

.hub-card-wrap .card.hub-card .label small {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6b7280;
  text-transform: uppercase;
}

.hub-card-wrap .hub-card-build {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #1e6cd6;
  color: #ffffff !important;
  border: 1px solid #1554a8;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 11px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.hub-card-wrap .hub-card-build:hover {
  background: #1554a8;
  color: #ffffff !important;
  text-decoration: none;
}

.hub-subgroup {
  margin-bottom: 28px;
}

.hub-subgroup-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1f2937;
  letter-spacing: 0.01em;
}


/* ============================================================
   v2.4.0T-A: part-card photo gallery (thumbs + caption)
   ============================================================ */
.part-card__gallery{padding:10px 14px 0;display:flex;flex-direction:column;gap:8px;background:#fff}
.part-card__caption{font-size:13px;color:#1f2937;font-weight:600;line-height:1.4;min-height:18px}
.part-card__thumbs{display:flex;gap:8px;flex-wrap:wrap}
.part-card__thumb{
  flex:0 0 auto;width:64px;height:64px;padding:0;background:#fff;
  border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;cursor:pointer;
  transition:border-color .12s ease, transform .12s ease;
}
.part-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.part-card__thumb:hover{border-color:#1d4ed8;transform:translateY(-1px)}
.part-card__thumb.is-active{border-color:#0a3a8c;box-shadow:0 0 0 2px rgba(10,58,140,.15)}
.part-card__thumb:focus-visible{outline:2px solid #0a3a8c;outline-offset:2px}
@media (max-width:640px){
  .part-card__thumb{width:56px;height:56px}
}