/* 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; }
@media (max-width:640px) {
  .spec-table thead { display: none; }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; width: 100%; border: 0; }
  .spec-table tr { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
  .spec-table td { border-bottom: 1px solid var(--rule); padding: 8px 12px; }
  .spec-table td:last-child { border-bottom: 0; }
  .spec-table td[data-label]::before { content: attr(data-label); display: block; color: var(--ink-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
}

/* ---------- 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 (Phase A 2026-04-28) ---------- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 0;
  background: var(--ink); color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta-bar a {
  flex: 1; padding: 14px 8px; text-align: center; color: #fff; font-weight: 700;
  font-size: 15px; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; min-height: 48px;
}
.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 !important; } }
body.has-mobile-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@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. */
/* v2.5.1 (2026-05-04) — typography-only readability fix:
   font-family ui-monospace -> Inter (matches the configurator design-id chip);
   font-weight 600 -> 700; color #d1d5db -> #fff for full WCAG contrast.
   Box, border, padding, size, position, and corner radius are intentionally unchanged. */
.gallery-grid .tile .design-chip {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,.78); color: #fff;
  border: 1px solid rgba(233,215,161,.35);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px; font-weight: 700; 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, 0.7fr) minmax(0, 1.3fr);
    gap: 36px;
    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; }
/* C2 — portrait variant for tall gate/door photos — shows full image without cropping top or bottom. */
.hero-split-photo--portrait { aspect-ratio: 3/4; }
/* C3 — composite variant for multi-photo hero stacks (e.g. Security Doors 100D/107D/112D).
   Photo panel stretches to fill the full hero frame height (align-self: stretch).
   The composite image fills 100% width; height is auto so the full image shows. */
.hero-split-photo--composite {
  aspect-ratio: auto;
  background: #0a0c10;
  align-self: stretch;   /* fill full hero frame height */
  width: 100%;
  border-radius: 0;      /* edge-to-edge on the right side */
  overflow: hidden;
}
.hero-split-photo--composite img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     /* fill the tall frame, doors are wide enough to not crop */
  object-position: center center;
  background: #0a0c10;
}
.hero-split-photo--composite::after { display: none; }
/* Remove hero inner padding when composite is present so photo bleeds to frame edge */
.hero-split:has(.hero-split-photo--composite) .hero-split-inner {
  padding-top: 0;
  padding-bottom: 0;
  align-items: stretch;
}
/* Fullbleed variant: image perimeter matches frame perimeter exactly (no rounded corners, no padding) */
.hero-split-photo--fullbleed {
  border-radius: 0;
  box-shadow: none;
}
.hero-split:has(.hero-split-photo--fullbleed) .hero-split-inner {
  padding: 0;
  align-items: stretch;
}
.hero-split-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
/* C2 portrait: use contain so the full photo is visible with no crop */
.hero-split-photo--portrait img {
  object-fit: contain;
  object-position: center center;
  background: #0a0c10;
}
.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;
}
/* ----- Hero photo overlay badges ----- */
/* Best Seller pill — top-right corner inside the photo frame */
.hero-photo-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--blue-600);
  color: #fff;
  font-family: 'Oswald', var(--stack);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(29,78,216,0.55), 0 1px 3px rgba(0,0,0,0.45);
  pointer-events: none;
  white-space: nowrap;
}
/* Design ID chip — bottom-left corner, matching gallery tile style */
.hero-photo-id {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(10,12,16,0.78);
  color: #fff;
  font-family: 'Oswald', var(--stack);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  white-space: nowrap;
}

/* ----- 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; }
  /* Homepage hero: taller frame on mobile so the full house fits without aggressive top/bottom crop */
  .hero-split-photo--home { aspect-ratio: 4/3; }
  .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): 2-row header ---
   Row 1 (top): ☰ hamburger (L) | SHOWROOM + address (C) | 702-873-9647 (R)
   Row 2 (below): Olson Iron original logo centered, as big as fits.
   Bo 2026-04-28: hamburger moves up to line up with phone, logo drops
   below SHOWROOM so the brand is the dominant mobile element.           */
@media (max-width: 900px) {
  /* OPTION #2 (Bo 2026-04-28): hide phone from mobile header to guarantee
     no overflow. Phone is reachable via the sticky bottom bar (Build & Buy /
     ☎ 702-873-9647) and the slide-out nav menu, so no functionality lost.
     Mobile header rows:
       Row 1: hamburger (L) | SHOWROOM (C) | (empty right) for visual balance
       Row 2: Diamond-plate logo, full-width centered                      */
  .site-header.sh-slim.sh-mockup .sh-top-inner {
    /* flex column: SHOWROOM first (order:1), logo second (order:2), hamburger
       absolutely positioned at left so it doesn't shift center content. */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    padding: 10px 14px 14px;
    text-align: center;
    overflow: hidden;
    max-width: 100vw;
    box-sizing: border-box;
    gap: 6px;
  }
  .site-header.sh-slim.sh-mockup .sh-showroom-inner { order: 1 !important; }
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-logo { order: 2 !important; }
  /* Phone hidden in header on mobile — lives in sticky bar + slide-out nav */
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-call {
    display: none !important;
  }
  /* Hamburger — absolute top-left so it doesn't shift the centered content */
  .site-header.sh-slim.sh-mockup .nav-toggle {
    position: absolute !important;
    top: 12px;
    left: 12px;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px; height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 5;
  }
  .site-header.sh-slim.sh-mockup .nav-toggle span {
    display: block; width: 22px; height: 2px; background: #fff; margin: 0 auto;
  }
  /* SHOWROOM — inline-block so it shrinks to content and centers via parent text-align */
  .site-header.sh-slim.sh-mockup .sh-showroom-inner {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100vw - 80px) !important;
    margin: 0 auto !important;
    text-align: center;
  }
  /* Diamond-plate logo — inline-block centered via parent text-align */
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-logo {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    float: none !important;
  }
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-logo picture {
    display: inline-block !important;
    margin: 0 !important;
  }
  .site-header.sh-slim.sh-mockup .sh-top-inner > .sh-logo img {
    width: clamp(200px, 60vw, 290px);
    height: auto;
    max-width: calc(100vw - 28px);
    display: inline-block !important;
    margin: 0 auto !important;
    float: none !important;
    position: static !important;
    inset: auto !important;
  }
  /* Nav band (slide-down) unchanged */
  .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);
}

/* v2.4.0X — Diamond-plate logo from live olsoniron.com is now the site-wide header logo.
   Old chrome-oval override REMOVED. Desktop uses the build.py width/height (302x206 native, 158px rendered).
   Mobile sizing is handled in the mobile header grid block above. */

/* 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;
}

/* Legacy three-band sh-showroom header (fallback only) — keep the mesh background */
.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;
}

/* 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);
}
/* v2.4.0X: Gallery Hero Standard — premium visual stage panel
   Stage = framed dark panel with blurred backdrop fill behind a fully-visible product photo.
   Works for portrait, square, and landscape gallery images using one shared system.
   Badges (design ID, BEST SELLER) anchor to the stage corners. */
/* Flexible: never use a fixed height on the hero or its inner wrappers.
   Only the .hero-photo-stage panel uses overflow: hidden (for blurred backdrop).
   All outer wrappers stay overflow: visible so nothing can ever be clipped. */
.hero.gallery-detail-hero { min-height: 460px; }
.hero-split.gallery-detail-hero { 
  min-height: 560px;
  height: auto;
  max-height: none;
  overflow: visible;
  margin-bottom: 40px;
  padding: 28px 24px 34px;
}
.hero-split.gallery-detail-hero .hero-split-inner {
  min-height: 500px;
  height: auto;
  overflow: visible;
  align-items: center;
}
.hero-split.gallery-detail-hero .hero-split-copy,
.hero-split.gallery-detail-hero .hero-split-photo {
  min-width: 0;
  height: auto;
  overflow: visible;
}
.hero-split.gallery-detail-hero .hero-split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.hero-split.gallery-detail-hero .hero-split-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* The stage IS the only element that uses overflow: hidden — needed so the
   blurred backdrop fill stays inside the framed panel. */
/* v2.4.0Z: clean image presentation — no stage box, no ring, no backdrop.
   The product photo sits naturally in the hero with only a soft drop shadow.
   The .hero-photo-frame is a relative-positioned wrapper sized to the image's
   intrinsic aspect ratio, so the design ID + BEST SELLER badges anchor cleanly
   to the actual visible image corners regardless of aspect ratio. */
.hero-split.gallery-detail-hero .hero-split-photo,
.hero-split.gallery-detail-hero .hero-split-photo--portrait,
.hero-split.gallery-detail-hero .hero-split-photo--square,
.hero-split.gallery-detail-hero .hero-split-photo--landscape {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto;
  overflow: visible;
  height: auto;
}
.hero-split.gallery-detail-hero .hero-split-photo::after { content: none; display: none; }
.hero-split.gallery-detail-hero .hero-photo-frame {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  /* Shrink-wrap to the rendered image so badges anchor to the actual visible image edges,
     regardless of aspect ratio (portrait, square, landscape). */
  height: auto;
  max-height: 540px;
  line-height: 0;
  background: transparent;
}
.hero-split.gallery-detail-hero .hero-photo-stage-img {
  display: block;
  height: auto;
  width: auto;
  max-height: 540px;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 14px 32px rgba(0,0,0,0.22));
  border: none;
  border-radius: 0;
}
/* Standard 2: solid black box with white letters for the design ID badge.
   Guarantees legibility against any background (sky, light walls, etc.). */
.hero-split.gallery-detail-hero .hero-photo-id {
  position: absolute;
  top: 14px;
  bottom: auto;
  left: 14px;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  /* Equal perimeter on all four sides — symmetric box around the text. */
  padding: 8px 10px;
  line-height: 1;
  font-family: 'Oswald', var(--stack);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  z-index: 10;
  pointer-events: none;
}
/* Standard 3: BEST SELLER as a blue box that visually mirrors the design ID box.
   Same shape, same padding, same white outline, same vertical line as the ID box. */
.hero-split.gallery-detail-hero .hero-photo-badge--bestseller {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-600);
  color: #fff;
  padding: 8px 10px;
  line-height: 1;
  font-family: 'Oswald', var(--stack);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}
@media (min-width: 900px) {
  .hero-split.gallery-detail-hero .hero-split-inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px;
  }
}
@media (max-width: 1100px) {
  .hero-split.gallery-detail-hero .hero-photo-frame { height: auto; max-height: 460px; }
  .hero-split.gallery-detail-hero .hero-photo-stage-img { max-height: 460px; }
}
@media (max-width: 900px) {
  /* Mobile/tablet: stack cleanly, scale stage down naturally, never clip */
  .hero-split.gallery-detail-hero { 
    min-height: auto; 
    padding: 24px 18px 30px;
  }
  .hero-split.gallery-detail-hero .hero-split-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero-split.gallery-detail-hero .hero-split-copy,
  .hero-split.gallery-detail-hero .hero-split-photo {
    width: 100%;
  }
  .hero-split.gallery-detail-hero .hero-photo-frame {
    margin: 0 auto;
    height: auto;
    max-height: 480px;
    max-width: 100%;
  }
  .hero-split.gallery-detail-hero .hero-photo-stage-img {
    height: auto;
    max-height: 480px;
    width: auto;
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .hero-split.gallery-detail-hero {
    padding: 20px 14px 26px;
  }
  .hero-split.gallery-detail-hero .hero-photo-frame {
    max-height: 380px;
  }
  .hero-split.gallery-detail-hero .hero-photo-stage-img {
    max-height: 380px;
  }
}


/* ================================================================
   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 !important;
  }

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

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

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

  .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;
}

/* v2.4.0V — Best Seller pill badge (blue/white, top-right of hub-card thumb) */
.hub-card-wrap .hub-card-imgwrap {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.hub-card-wrap .hub-best-seller {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  background: #1d4ed8;
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(11, 15, 23, 0.25);
  border: 1.5px solid #ffffff;
  pointer-events: none;
  white-space: nowrap;
}
.hub-card-wrap.hub-card-wrap--best .card.hub-card {
  border: 2px solid #1d4ed8;
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.18);
}
.hub-card-wrap.hub-card-wrap--best .card.hub-card:hover {
  box-shadow: 0 12px 32px rgba(29, 78, 216, 0.28);
}
@media (max-width: 600px) {
  .hub-card-wrap .hub-best-seller {
    font-size: 10px;
    padding: 5px 9px;
    top: 8px;
    right: 8px;
  }
}

.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}
}


/* =========================================================================
   PHASE D — MOBILE HOMEPAGE SIMPLIFICATION (Bo 2026-04-28)
   All rules below are scoped to (max-width: 900px). Desktop layout (≥901px)
   is byte-identical to before this block was added.
   Goal: reduce mobile homepage scroll from ~4000px to ~2400px without
   changing any HTML and without touching the LOCKED 6-tile block structure.
   ========================================================================= */

@media (max-width: 900px) {
  /* --- Hero compress --- */
  /* Lede paragraph repeats what the H1 already says — drop on mobile. */
  .hero-split .hero-split-lede { display: none !important; }
  /* The three trust badges live in the header trust strip too — drop here on mobile. */
  .hero-split .hero-split-badges { display: none !important; }
  /* Tighten hero vertical padding on mobile. */
  .hero-split .hero-split-inner { padding-top: 18px; padding-bottom: 18px; }
  .hero-split .hero-split-h1 {
    font-size: clamp(28px, 6.5vw, 36px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
  }
  .hero-split .hero-split-ctas { margin-top: 14px; gap: 10px; }

  /* --- Quick-paths row (4 CTA chips) --- */
  /* Redundant with the 6-tile "What We Build" block right below. Drop on mobile. */
  .quick-paths { display: none !important; }

  /* --- "What We Build" 6-tile block (LOCKED HTML, mobile styling only) --- */
  /* Tighter aspect on tile thumbs to save vertical space. */
  section[data-locked="homepage-what-we-build"] .product-card .thumb {
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
  }
  section[data-locked="homepage-what-we-build"] .product-card .thumb-img {
    width: 100%; height: 100%; object-fit: cover;
  }
  /* Tile description: clamp to 2 lines on mobile so each tile is shorter. */
  section[data-locked="homepage-what-we-build"] .product-card .body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
  }
  /* Tile body: tighter padding. */
  section[data-locked="homepage-what-we-build"] .product-card .body {
    padding: 10px 12px 14px;
  }
  /* Tile body H3: slightly smaller on mobile. */
  section[data-locked="homepage-what-we-build"] .product-card .body h3 {
    font-size: 17px !important;
    margin: 0 0 4px 0 !important;
  }
  /* Section heading vertical padding tightened. */
  section[data-locked="homepage-what-we-build"] {
    padding-top: 22px; padding-bottom: 22px;
  }
}

@media (max-width: 900px) and (min-width: 600px) {
  /* Tablet / large-phone landscape: 2-column tile grid (saves stacked height). */
  section[data-locked="homepage-what-we-build"] .product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 900px) {
  /* --- Lower sections (Why / Reviews / Showroom): tighter padding, smaller titles --- */
  .sr-dark, .soft, .dark {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .sr-dark .section-title,
  .soft .section-title,
  .dark .section-title {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    margin-bottom: 12px !important;
  }
  .sr-dark p, .soft p, .dark p { font-size: 15px !important; line-height: 1.5 !important; }
}

/* End of PHASE D block. */


/* =========================================================================
   PHASE E — CONFIGURATOR MOBILE POLISH (Bo 2026-04-28)
   Sticky horizontally-scrolling category chip-row on mobile so a customer
   doesn't have to scroll 9 accordions to find their product.
   Tap a chip → opens that accordion + smooth-scrolls to it.
   Hidden on desktop (>=901px) so the desktop configurator is byte-identical.
   ========================================================================= */

/* Desktop: chip-row hidden entirely */
.cfg-chips { display: none; }

/* Mobile: horizontal scroll strip, sticky at top of configurator */
@media (max-width: 900px) {
  .cfg-chips {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    margin: -6px -14px 14px -14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 20;
    scrollbar-width: none;
  }
  .cfg-chips::-webkit-scrollbar { display: none; }
  .cfg-chip {
    flex: 0 0 auto;
    border: 1.5px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    font-family: 'Oswald', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    min-height: 38px;
  }
  .cfg-chip:active,
  .cfg-chip:focus-visible {
    outline: none;
    border-color: #1d4ed8;
    background: #eff6ff;
  }
  .cfg-chip.is-active {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #ffffff;
  }
}

/* End of PHASE E block. */

/* ── Banner Hero (full-width photo top, text below) ─────────────────────── */
.hero-banner { background: #0a0c10; }
.hero-banner-photo { width: 100%; line-height: 0; }
.hero-banner-photo img { width: 100%; height: auto; display: block; }
.hero-banner-body { padding: 32px 20px 40px; }
.hero-banner-body .hero-split-eyebrow { display: block; margin-bottom: 8px; }
.hero-banner-body .hero-split-h1 { margin-top: 0; }
.hero-banner-body .hero-split-lede { max-width: 720px; }
.hero-banner-body .hero-split-ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .hero-banner-body { padding: 40px 0 48px; }
}


/* v3 Parent Category Landing — Design ID badge for parent-page preview tiles only.
   Locked palette: Black/Blue/Gray/White. Off by default; only emitted when
   gallery_tiles_html(... show_did_badge=True) is called from a parent landing. */
.gallery-grid .tile .design-id {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: #000; color: #fff;
  border: 1px solid #1d4ed8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 2px;
  pointer-events: none; user-select: none;
}
/* v3 Parent Category Landing — Subgroup section + Owner Design Tiles Needed block. */
.parent-subgroup-section { margin-top: 36px; }
.parent-subgroup-intro { margin: 0 0 14px; color: #374151; font-size: 16px; line-height: 1.6; }
.parent-subgroup-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.owner-tiles-needed { background: #f9fafb; border: 1px solid #d1d5db; border-left: 4px solid #1d4ed8; border-radius: 4px; padding: 18px 20px; margin: 12px 0 18px; color: #1f2937; }
.owner-tiles-needed h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #000; }
.owner-tiles-needed p { margin: 0 0 12px; color: #374151; font-size: 15px; line-height: 1.55; }
.owner-tiles-needed p:last-child { margin-bottom: 0; }

/* ============================================================
   BRAND-STORY-SHOWROOM-POLISH PASS
   New section styles: brand story, about, showroom, gallery, callout band
   ============================================================ */

.oi-callout-band {
  background: #0f172a;
  border-top: 2px solid #1d4ed8;
  border-bottom: 2px solid #1d4ed8;
  padding: 18px 0;
}
.oi-callout-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #cbd5e1;
  max-width: 80ch;
}
.oi-callout-text strong { color: #fff; font-weight: 700; }

.brand-story-section {
  background: #f8fafc;
  padding: 60px 0;
  border-top: 1px solid #e2e8f0;
}
.brand-story-body { max-width: 72ch; }
.brand-story-body p { font-size: 16px; line-height: 1.7; color: #374151; margin: 0 0 18px; }
.brand-story-showroom-note { font-size: 14px !important; color: #6b7280 !important; font-style: italic; }
.brand-story-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.about-owner-message { background: #0f172a; padding: 60px 0; }
.about-owner-message .kicker { color: #60a5fa; }
.about-owner-message .section-title { color: #fff; }
.owner-message-body { max-width: 68ch; }
.owner-message-body p { font-size: 16px; line-height: 1.75; color: #cbd5e1; margin: 0 0 20px; }
.owner-quote { font-size: 17px !important; font-style: italic; color: #e2e8f0 !important; border-left: 3px solid #1d4ed8; padding-left: 18px; margin-left: 0 !important; }
.owner-sig { font-size: 14px !important; color: #94a3b8 !important; font-style: normal; margin-top: 24px !important; letter-spacing: 0.02em; }

.about-valley { background: #fff; padding: 60px 0; border-top: 1px solid #e2e8f0; }
.about-valley-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.showroom-qr-section { background: #f8fafc; padding: 60px 0; border-top: 1px solid #e2e8f0; }
.showroom-qr-section p { font-size: 16px; line-height: 1.7; color: #374151; max-width: 68ch; margin: 0 0 18px; }
.showroom-qr-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.showroom-expansion { background: #0f172a; padding: 60px 0; }
.showroom-expansion .kicker { color: #60a5fa; }
.showroom-expansion .section-title { color: #fff; }
.showroom-expansion p { font-size: 16px; line-height: 1.7; color: #cbd5e1; max-width: 68ch; margin: 0 0 18px; }
.showroom-expansion-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.showroom-videos, .about-videos { padding: 60px 0; background: #1e293b; }
.showroom-videos .kicker, .about-videos .kicker { color: #60a5fa; }
.showroom-videos .section-title, .about-videos .section-title { color: #fff; }

.video-placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 28px; }
.video-placeholder { background: #0f172a; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.video-placeholder-screen { aspect-ratio: 16/9; background: #070d1a; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.06); }
.video-placeholder-icon { font-size: 40px; color: rgba(255,255,255,0.2); }
.video-placeholder-label { font-size: 14px; font-weight: 600; color: #e2e8f0; margin: 14px 16px 4px; }
.video-placeholder-note { font-size: 12px; color: #64748b; margin: 0 16px 14px; font-style: italic; }

@media (max-width: 640px) {
  .brand-story-ctas, .about-valley-ctas, .showroom-qr-ctas, .showroom-expansion-ctas { flex-direction: column; }
  .brand-story-ctas .btn, .about-valley-ctas .btn, .showroom-qr-ctas .btn, .showroom-expansion-ctas .btn { width: 100%; text-align: center; }
  .brand-story-section, .about-owner-message, .about-videos, .about-valley, .showroom-qr-section, .showroom-expansion, .showroom-videos { padding: 40px 0; }
}
/* END brand-story-showroom-polish CSS */

/* === Stage A: Showroom nav + homepage CTA additions === */
.sr-btn-showroom { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:#1d4ed8; color:#fff; border-radius:6px; font-size:14px; font-weight:600; text-decoration:none; transition:background .2s; }
.sr-btn-showroom:hover { background:#1e40af; }
/* END Stage A CSS */

/* === Facebook video embed (showroom page) === */
.video-embed-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-embed-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
  margin: 0;
  padding-top: 4px;
}


/* ============================================================
   VISUAL FRAMEWORK PASS — About & Showroom Photo Sections
   Added: visual-framework-pass
   ============================================================ */

/* --- About: The Crew --- */
.about-crew {
  padding: 72px 0 56px;
  background: #fff;
}
.about-crew .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1a56db;
  margin-bottom: 10px;
}
.about-crew .section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #0b1020;
  margin: 0 0 16px;
}
.about-crew > .container > p {
  max-width: 680px;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 40px;
}
.crew-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .crew-grid { grid-template-columns: 1fr; }
}
.crew-card {
  border-radius: 12px;
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}
.crew-photo-wrap img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.crew-info {
  padding: 20px 22px 24px;
}
.crew-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0b1020;
  margin: 0 0 2px;
}
.crew-role {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a56db;
  margin: 0 0 10px;
}
.crew-bio {
  font-size: .9rem;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}
.crew-action-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .crew-action-strip { grid-template-columns: 1fr; }
}
.crew-action-photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* --- About: The Family --- */
.about-family {
  padding: 72px 0 56px;
  background: #f9fafb;
}
.about-family .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1a56db;
  margin-bottom: 10px;
}
.about-family .section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #0b1020;
  margin: 0 0 16px;
}
.about-family > .container > p {
  max-width: 720px;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 40px;
}
.family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .family-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .family-grid { grid-template-columns: 1fr; }
}
.family-photo-card {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
}
.family-photo-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.family-caption {
  padding: 12px 16px;
  font-size: .82rem;
  font-weight: 700;
  color: #374151;
  margin: 0;
  text-align: center;
  letter-spacing: .04em;
}
.family-wide-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .family-wide-photos { grid-template-columns: 1fr; }
}
.family-wide-photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* --- About: Life Outside the Shop (Dunes) --- */
.about-dunes {
  padding: 72px 0 64px;
  background: #0b1020;
  color: #fff;
}
.about-dunes .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 10px;
}
.about-dunes .section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}
.about-dunes > .container > p {
  max-width: 720px;
  color: #9ca3af;
  line-height: 1.75;
  margin-bottom: 16px;
}
.about-dunes > .container > p:last-of-type {
  margin-bottom: 40px;
}
.dunes-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .dunes-masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dunes-masonry { grid-template-columns: 1fr; }
}
.dunes-photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform .25s ease;
}
.dunes-photo img:hover {
  transform: scale(1.02);
}

/* --- Showroom: Photo Gallery --- */
.showroom-photo-gallery {
  padding: 72px 0 64px;
  background: #fff;
}
.showroom-photo-gallery .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1a56db;
  margin-bottom: 10px;
}
.showroom-photo-gallery .section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #0b1020;
  margin: 0 0 16px;
}
.showroom-photo-gallery > .container > p {
  max-width: 680px;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 36px;
}
.showroom-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
@media (max-width: 900px) {
  .showroom-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .showroom-gallery-grid { grid-template-columns: 1fr; }
}
.showroom-gallery-photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform .25s ease;
}
.showroom-gallery-photo img:hover {
  transform: scale(1.02);
}
.showroom-gallery-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ============================================================
   VISUAL FRAMEWORK PASS — About & Showroom Photo Galleries
   ============================================================ */

/* --- Crew Section --- */
.about-crew {
  padding: 4rem 0;
  background: #fff;
}
.about-crew .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.crew-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2.5rem 0;
}
.crew-card {
  text-align: center;
}
.crew-card img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.crew-card img:hover { opacity: 0.85; }
.crew-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: .75rem 0 .25rem;
  color: #111;
}
.crew-role {
  font-size: .9rem;
  color: #666;
  margin: 0;
}
.crew-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.crew-action-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.crew-action-grid img:hover { opacity: 0.85; }
.shop-photos {
  margin-top: 3rem;
}
.section-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.shop-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 700px;
}
.shop-photo-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.shop-photo-item img:hover { opacity: 0.85; }
.shop-caption {
  font-size: .85rem;
  color: #666;
  margin: .5rem 0 0;
}

/* --- Family Section --- */
.about-family {
  padding: 4rem 0;
  background: #f8f8f8;
}
.about-family .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.family-portrait-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0;
}
.family-photo-card {
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
.family-photo-card img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
  display: block;
  transition: opacity 0.2s ease;
}
.family-photo-card img:hover { opacity: 0.85; }
.family-caption {
  font-size: .85rem;
  color: #555;
  margin: .5rem 0 0;
  font-weight: 600;
}
.family-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.family-photo-grid img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.family-photo-grid img:hover { opacity: 0.85; }

/* --- Dunes / Lifestyle Section --- */
.about-dunes {
  padding: 4rem 0;
  background: #111;
  color: #fff;
}
.about-dunes .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.about-dunes .section-title {
  color: #fff;
}
.about-dunes .section-lede {
  color: #ccc;
  max-width: 760px;
}
.dunes-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.dunes-photo-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.dunes-photo-grid img:hover { opacity: 0.85; }

/* --- Showroom Photo Gallery Section --- */
.showroom-photo-gallery {
  padding: 4rem 0;
  background: #fff;
}
.showroom-photo-gallery .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.showroom-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.showroom-gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  transition: transform .2s ease;
}
.showroom-gallery-grid img:hover {
  transform: scale(1.02);
}
.showroom-gallery-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* --- Mobile Responsive --- */
@media (max-width: 900px) {
  .crew-cards { grid-template-columns: repeat(3, 1fr); }
  .crew-action-grid { grid-template-columns: repeat(2, 1fr); }
  .family-portrait-row { grid-template-columns: repeat(2, 1fr); }
  .family-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .dunes-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .showroom-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .crew-cards { grid-template-columns: 1fr 1fr; }
  .crew-action-grid { grid-template-columns: 1fr 1fr; }
  .crew-action-grid img { height: 160px; }
  .family-portrait-row { grid-template-columns: 1fr 1fr; }
  .family-photo-grid { grid-template-columns: 1fr 1fr; }
  .dunes-photo-grid { grid-template-columns: 1fr 1fr; }
  .dunes-photo-grid img { height: 150px; }
  .showroom-gallery-grid { grid-template-columns: 1fr 1fr; }
  .showroom-gallery-grid img { height: 160px; }
  .shop-photo-grid { grid-template-columns: 1fr; max-width: 100%; }
  .showroom-gallery-cta { flex-direction: column; }
}

/* =====================================================================
   v2.4.0T-B — Split tap target: nav-item-link + nav-caret-btn
   Category text (.nav-item-link) = plain anchor, navigates to category.
   Caret button (.nav-caret-btn) = toggles submenu accordion only.
   Desktop: visually identical to the old .nav-item-trigger.
   Mobile: link fills most of the row; caret button is a 44px tap target
   on the right edge.
   ===================================================================== */

/* ---- Desktop: .nav-item-link styles the category text link ---- */
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-item-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 4px 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 > .nav-item-link:hover,
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item:focus-within > .nav-item-link {
  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 > .nav-item-link {
  color: #ffffff;
  border-bottom-color: #1e6cd6;
}

/* ---- Desktop: .nav-caret-btn is the small chevron toggle ---- */
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px 14px 4px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #ffffff;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  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 > .nav-caret-btn:hover,
.site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item:focus-within > .nav-caret-btn {
  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 > .nav-caret-btn {
  color: #ffffff;
  border-bottom-color: #1e6cd6;
}

/* ---- Mobile (<=899px): full-width row layout ---- */
@media (max-width: 899px) {
  /* The li becomes a flex row: link takes all space, caret is right-aligned */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.nav-item--has-mega {
    display: flex;
    align-items: stretch;
  }
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-item-link {
    flex: 1 1 auto;
    width: auto;
    padding: 14px 8px 14px 18px;
    border-bottom: none;
    justify-content: flex-start;
  }
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-caret-btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-bottom: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    justify-content: center;
  }
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-caret-btn:hover {
    background: rgba(30, 108, 214, 0.15);
  }
}

/* ================================================================
   v2.4.0U -- MOBILE NAV DRAWER FIX
   Root cause: .sh-nav-band.open was display:block but had no
   position:fixed, z-index, overflow-y, so it pushed page content
   down and desktop flex-wrap:wrap caused multi-row grid rendering.
   Fix: proper fixed-position full-screen drawer, z-index 200,
   strict vertical column nav-primary, bottom padding for CTA bar.
   Scope: max-width 899px only -- desktop nav unchanged.
   ================================================================ */
@media (max-width: 899px) {

  /* 1. Nav-band: full-screen fixed drawer overlay */
  .site-header.sh-slim.sh-mockup .sh-nav-band {
    display: none;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 200 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(5, 5, 5, 0.98) !important;
    padding-top: 8px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band.open {
    display: block !important;
  }

  /* 1b. Site-nav inside nav-band: override position:absolute from base .site-nav.open rule */
  .site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* 2. Nav-primary: strict vertical column, no wrapping */
  .site-header.sh-slim.sh-mockup .sh-nav-band .site-nav.sh-nav .nav-primary,
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
  }

  /* 3. Each nav item: full-width row */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    position: relative;
  }

  /* Items with mega-menu: flex row so link + caret sit side by side */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.nav-item--has-mega {
    display: flex !important;
    align-items: stretch;
  }

  /* 4. Plain nav links (no submenu) -- full-width tap target */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > a:not(.nav-item-link):not(.nav-caret-btn) {
    display: block;
    width: 100%;
    padding: 16px 20px;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: none;
    background: transparent;
    box-sizing: border-box;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > a:not(.nav-item-link):not(.nav-caret-btn):hover {
    background: rgba(30, 108, 214, 0.15);
    color: #cfe0ff;
  }

  /* 5. Split-tap: nav-item-link fills the row */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-item-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 16px 8px 16px 20px;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: none;
    background: transparent;
    box-sizing: border-box;
    min-width: 0;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-item-link:hover {
    background: rgba(30, 108, 214, 0.15);
    color: #cfe0ff;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.active > .nav-item-link {
    color: #cfe0ff;
  }

  /* 6. Caret button: 48px tap target on the right */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-caret-btn {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    font-size: 13px;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item > .nav-caret-btn:hover {
    background: rgba(30, 108, 214, 0.18);
    color: #cfe0ff;
  }

  /* Rotate caret when submenu is open */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.mm-open > .nav-caret-btn .nav-caret {
    transform: rotate(180deg);
    display: inline-block;
  }

  /* 7. Mega-menu accordion panel: full-width, below parent item */
  .site-header.sh-slim.sh-mockup .sh-nav-band .mega-menu,
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item .mega-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.mm-open .mega-menu {
    display: block !important;
  }

  /* Submenu links — !important overrides base rule: color: #0b0f17 !important */
  .site-header.sh-slim.sh-mockup .sh-nav-band .mega-menu .mm-sub-link {
    color: #e5e7eb !important;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600 !important;
    text-transform: none !important;
    background: transparent !important;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .mega-menu .mm-sub-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .mega-menu .mm-foot {
    padding: 10px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .mega-menu .mm-foot-all {
    color: #93c5fd !important;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;
  }

  .site-header.sh-slim.sh-mockup .sh-nav-band .mega-menu .mm-foot-build {
    display: block;
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* 8. Sticky mobile CTA bar: stays above page but below nav drawer */
  .mobile-cta-bar {
    z-index: 100 !important;
  }

  /* 9. Prevent desktop hover mega-menu from firing on mobile */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-item--has-mega:hover .mega-menu,
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-item--has-mega:focus-within .mega-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
  }

  /* But mm-open class (set by JS) always wins */
  .site-header.sh-slim.sh-mockup .sh-nav-band .nav-primary > li.nav-item.mm-open .mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
/* END v2.4.0U -- mobile nav drawer fix */