/* ============================================================
   Super Grip — main.css
   Single-page tire-company landing page stylesheet
   ============================================================ */

/* ---------- THEME TOKENS ----------
   Dark is the only theme — these are the defaults; no [data-theme] needed. */
:root {
  --bg:#1e1b1c; --bg2:#242021; --bg3:#181516;
  --panel:#2a2527; --panel2:#322d2e; --line:#363031; --line2:#403b3c;
  --ink:#edeae8; --ink2:#ccc8c4; --muted:#d8d4d0; --dim:#605a5b;
  --card-bg:#242021; --header-bg:rgba(15,12,13,.97);
  --shadow:none; --shadow-hov:none;

  --red:#CC2229; --red-d:#a91b21; --black:#231F20;
  --disp:'Big Shoulders Display', sans-serif;
  --body:'Manrope', sans-serif;
}

/* ---------- SHARED CONTAINER ---------- */
.sg-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- GLOBAL RESET ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .35s ease, color .35s ease;
}

h1, h2, h3, h4, p, figure { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; }

input, select, textarea, button { font-family: inherit; }

/* ---------- TYPE HELPERS ---------- */
.mono { font-family: var(--body); }
.disp { font-family: var(--disp); }

/* ---------- SHARED CONTAINER ---------- */
.sg-header__inner,
.sg-apps__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   HEADER
   ============================================================ */
/* Sticky header — pinned to the top of the viewport on scroll. */
.sg-topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.sg-header {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color .35s ease, border-color .35s ease;
}

.sg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 80px;
}

/* Brand logos — Super Grip + TVS Eurogrip side by side */
.sg-header__logos {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sg-header__logo-link {
  display: flex;
  align-items: center;
}
.sg-logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.sg-header__logo-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.sg-header__eurogrip-logo {
  max-height: 22px;
  width: auto;
  max-width: 90px;
  display: block;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
@media (max-width: 768px) {
  .sg-header__eurogrip-logo { height: 28px; }
  .sg-header__logo-divider { height: 20px; }
}

/* Header quote CTA — sits on the right side of the header bar */
.sg-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
.sg-header__cta:hover {
  background: var(--red-d);
}

/* ============================================================
   HERO
   ============================================================ */
.sg-hero {
  position: relative;
  min-height: 48vh; /* shortened ~15% from 56vh per Matt */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* Background — full bleed, replace with real photo via background-image */
/* Base style for all hero bg layers. Per-layer image + animation-delay are set
   inline in front-page.php (they need PHP for the template-dir URL). */
.sg-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: sg-hero-fade 48s infinite;
}
@keyframes sg-hero-fade {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  18%   { opacity: 1; }
  22%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* Overlay — dramatic: dark left, fading to clear on the right, plus top/bottom vignette */
.sg-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Brightened ~15% (alpha ×0.85) per Matt's ask — more of the photo shows
     through. Worst-case WCAG AA verified across all 6 rotating photos at the
     text's right edge: h1 4.4:1 (large, ≥3) / lede 5.1:1 (normal, ≥4.5). On
     mobile this overlay is display:none (hero is solid #0d0b0b), so unaffected. */
  background:
    linear-gradient(
      100deg,
      rgba(0,0,0,.81) 0%,
      rgba(0,0,0,.72) 25%,
      rgba(0,0,0,.425) 48%,
      rgba(0,0,0,.13) 65%,
      rgba(0,0,0,0) 80%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.64) 0%,
      rgba(0,0,0,.255) 20%,
      transparent 45%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.34) 0%,
      transparent 15%
    );
}

/* Inner — full-height flex column, content vertically centered */
.sg-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100%;
  padding: 32px 60px; /* top/bottom trimmed 52→32 to shorten the hero ~15% (it's content-bound, so min-height alone doesn't shrink it on laptops) */
}

/* Hero brand content (full-width single column) */
.sg-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
}

.sg-hero__eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sg-hero h1 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(46px, 5.6vw, 88px);
  line-height: .88;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.sg-hero h1 em {
  font-style: normal;
  color: var(--red);
}

.sg-hero__lede {
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  max-width: 42ch;
  line-height: 1.65;
  margin-bottom: 0; /* was 28px — dead space below the last hero line; reclaimed to shorten the hero without cramping the padding */
}


/* Desktop default: the mobile-only hero image strip is hidden; the
   @media (max-width: 768px) block below reveals it as a scroll strip. */
.sg-hero__mobile-strip,
.sg-quote__mobile-strip { display: none; }

/* Hero responsive */
@media (max-width: 1024px) {
  .sg-hero__inner { padding: 60px 40px; }
  .sg-hero__lede { max-width: 100%; }
}
@media (max-width: 768px) {
  .sg-hero__inner { padding: 40px 20px; }
}

/* ============================================================
   HORIZONTAL FORM BAR
   ============================================================ */
.sg-formbar {
  background: #000000;
  padding: 0;
  position: relative;
  z-index: 10;
}

.sg-formbar__form {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  min-height: 64px;
}

.sg-formbar__field {
  flex: 1;
  border-left: none;
  display: flex;
  align-items: center;
}

.sg-formbar__field + .sg-formbar__field {
  border-left: 2px solid rgba(204,34,41,0.6);
}

.sg-formbar__field input,
.sg-formbar__field select {
  width: 100%;
  height: 64px;
  background: transparent;
  border: none;
  border-left: none;
  outline: none;
  padding: 0 20px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.sg-formbar__field input::placeholder {
  color: rgba(255,255,255,.55);
}

.sg-formbar__field input:focus,
.sg-formbar__field select:focus {
  background: rgba(255,255,255,.04);
}

.sg-formbar__field select {
  appearance: none;
  color: rgba(255,255,255,.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CC2229' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.sg-formbar__field select option {
  background: #231F20;
  color: #fff;
}

.sg-formbar__submit {
  flex-shrink: 0;
  padding: 0 40px;
  background: var(--red);
  border: none;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

.sg-formbar__submit:hover { background: var(--red-d); }

.sg-formbar__success {
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  color: #4caf50;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .sg-formbar__form {
    flex-wrap: wrap;
  }
  .sg-formbar__field {
    flex: 0 0 50%;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .sg-formbar__submit {
    width: 100%;
    height: 52px;
  }
}

@media (max-width: 768px) {
  .sg-formbar__field { flex: 0 0 100%; }
}

.sg-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

/* ============================================================
   SHOP BY APPLICATION
   ============================================================ */
.sg-apps {
  padding: 52px 0;
  background: #1a1617;
  border-bottom: 1px solid var(--line);
}

.sg-section-head {
  margin-bottom: 26px;
}

.sg-section-head h2 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink);
}

.sg-apps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: stretch; /* cards fill the full height of their row */
}

/* Card */
.sg-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* fill the grid row so every card in a row is equal height */
  margin: 0;    /* spacing comes only from the grid gap, never card margins */
  /* Card sits just above the section bg (#1a1617) with a stronger outline so
     each reads as one solid unit rather than blending into the section. */
  background: #211b1c;
  border: 1px solid var(--line2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.sg-card__img {
  height: 140px;
  position: relative;
  background-color: #2a2425;
  background-image: repeating-linear-gradient(
    -50deg,
    transparent, transparent 10px,
    rgba(255,255,255,.04) 10px,
    rgba(255,255,255,.04) 20px
  );
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line2);
  overflow: hidden;
}

/* Dark overlay keeps the chip label readable over real photos. */
.sg-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* "Coming Soon" badge — an industry with no products yet (e.g. Agriculture /
   Farm) on the /products/ + homepage "Shop by Industry" grids. Reuses the
   brand-red coming-soon visual language; the card stays visible and clickable
   (it still links to its archive, which renders a graceful empty state). */
.sg-card__coming-soon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.sg-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  flex: 1;
}

.sg-card__title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Linked industry cards (homepage + /products/ — any <a class="sg-card"> inside
   a Shop-by-Industry grid) lift on hover, with a photo zoom, a deeper image
   overlay, and the title shifting to brand red. The landing template's cards are
   static <article>s, so the a.sg-card selector intentionally excludes them. This
   restores the lift affordance the old drill-down JS used to provide — CSS only,
   no JS, and no drill-down. */
.sg-apps a.sg-card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: var(--shadow-hov);
}
.sg-apps a.sg-card .sg-card__img {
  transition: transform .35s ease;
}
.sg-apps a.sg-card:hover .sg-card__img {
  transform: scale(1.06);
}
.sg-apps a.sg-card .sg-card__img::after {
  transition: background .25s ease;
}
.sg-apps a.sg-card:hover .sg-card__img::after {
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.06) 100%);
}
.sg-apps a.sg-card:hover .sg-card__title {
  color: var(--red);
}

/* Hover lift on the CTA card. */
.sg-card--cta:hover {
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: var(--shadow-hov);
}

/* CTA card — solid red "Looking for something specific?" card */
.sg-card--cta {
  background: #CC2229;
  cursor: pointer;
}
.sg-card--cta .sg-card__img { display: none; }
.sg-card--cta .sg-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 28px;
  height: 100%;
  min-height: 180px;
  gap: 12px;
}
.sg-card--cta .sg-card__title {
  color: #fff;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.1;
}
.sg-card--cta .sg-card__desc {
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  font-family: var(--body);
  margin: 0;
}
.sg-card--cta-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  background: #fff;
  color: #CC2229;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.sg-card--cta-btn:hover {
  background: #231F20;
  color: #fff;
}

/* ============================================================
   WHY SUPER GRIP
   ============================================================ */
/* Why section wrapper */
.sg-why__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

.sg-why {
  padding: 72px 0;
  background: #1d1819;
  border-bottom: 1px solid var(--line);
}

/* Section header */
.sg-why__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.sg-why__header h2 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 52px);
  text-transform: uppercase;
  color: var(--ink);
  line-height: .9;
  margin-bottom: 14px;
}
.sg-why__header h2 em { font-style: normal; color: var(--red); }
.sg-why__header p { font-size: 17px; color: rgba(255,255,255,0.85); line-height: 1.68; }

/* Featured liner block */
.sg-why__featured {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* image column widened ~20% for callout legibility (Matt Batch-1 #4) */
  gap: 0;
  background: var(--black);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid var(--line);
}
.sg-why__featured-left {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sg-why__feat-badge {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 4px 10px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 16px;
  width: fit-content;
}
.sg-why__featured-left h3 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 44px);
  text-transform: uppercase;
  color: #fff;
  line-height: .9;
  margin-bottom: 16px;
}
.sg-why__featured-left > p {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 44ch;
}
.sg-why__feat-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.sg-why__feat-callout span {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px);
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.sg-why__feat-callout span strong {
  color: var(--red);
  font-weight: 900;
}
.sg-why__feat-divider {
  font-family: var(--disp);
  font-size: clamp(22px, 2.4vw, 34px);
  color: rgba(255,255,255,.2) !important;
}
.sg-why__feat-sub {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
}

/* Featured liner panel — interactive tread diagram */
.sg-why__featured-right {
  background: #080608;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  min-height: 380px;
}

.sg-tread-diagram {
  width: 100%;
  padding: 16px; /* trimmed from 32px so the enlarged tread image fills more of its column (Matt Batch-1 #4) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080608;
}
.sg-tread-wrap {
  position: relative;
  width: 100%;
  max-width: 580px;
}
.sg-tread-img {
  width: 100%;
  height: auto;
  display: block;
}
.sg-tread-headline {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
  margin-bottom: 12px;
  font-style: italic;
}

/* 3 bold feature tiles */
.sg-why__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 8px;
  align-items: stretch;
}
.sg-why__tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  padding: 36px 32px 40px;
  transition: background .18s;
  display: flex;
  flex-direction: column;
}
.sg-why__tile:hover { background: var(--panel2); }
.sg-why__tile h3 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 34px);
  text-transform: uppercase;
  color: #fff;
  line-height: .9;
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.sg-why__tile p {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  max-width: 36ch;
}
@media (max-width: 768px) {
  .sg-why__tiles { grid-template-columns: 1fr; }
}

/* Why responsive */
@media (max-width: 1024px) {
  .sg-why__featured { grid-template-columns: 1fr; }
  .sg-why__featured-right { min-height: 220px; }
}
@media (max-width: 768px) {
  .sg-why__wrap { padding: 0 20px; }
  .sg-why__featured-left { padding: 32px 24px; }
  .sg-why__feat-callout span { font-size: clamp(20px, 5vw, 28px); }
  .sg-why__feat-callout { gap: 8px; }
}

/* ============================================================
   QUOTE FORM — ALWAYS DARK
   ============================================================ */
.sg-quote {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}
.sg-quote__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.sg-quote__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(13,11,11,0.92) 0%, rgba(13,11,11,0.75) 45%, rgba(13,11,11,0.55) 100%);
  z-index: 1;
}
.sg-quote__wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 60px;
}
.sg-quote__head {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sg-quote__head h2 {
  font-family: var(--disp);
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 24px 0;
  text-transform: uppercase;
}
.sg-quote__head h2 em {
  color: var(--red);
  font-style: normal;
}
.sg-quote__head p {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  max-width: 460px;
  margin: 0 0 48px 0;
}
.sg-quote__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 3px solid var(--red);
  padding-left: 28px;
  margin-bottom: 48px;
}
.sg-quote__stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sg-quote__stat:last-child { border-bottom: none; }
.sg-quote__stat-num {
  font-family: var(--disp);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sg-quote__stat-label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.sg-quote__liner-callout {
  margin-top: 0;
  padding: 20px 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--red);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}
.sg-qlc__badge {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.sg-qlc__text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}
.sg-qform {
  background: rgba(10,8,8,0.75);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 40px 36px;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sg-qform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sg-qform__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sg-qform__field label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.sg-qform__field input,
.sg-qform__field select,
.sg-qform__field textarea {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  resize: vertical;
  min-height: 46px;
}
.sg-qform__field input::placeholder,
.sg-qform__field textarea::placeholder {
  color: rgba(255,255,255,0.25);
}
.sg-qform__field input:focus,
.sg-qform__field select:focus,
.sg-qform__field textarea:focus {
  border-color: var(--red);
  background: rgba(0,0,0,0.7);
}
.sg-qform__field select {
  appearance: none;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CC2229' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.sg-qform__field select option { background: #1a1617; color: #fff; }
.sg-qform__submit {
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 16px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}
.sg-qform__submit:hover { background: var(--red-d); }
.sg-qform__success {
  background: rgba(76,175,80,0.15);
  border: 1px solid rgba(76,175,80,0.3);
  color: #4caf50;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
}
.sg-qform__error {
  background: rgba(204,34,41,0.15);
  border: 1px solid rgba(204,34,41,0.3);
  color: #ff6b6b;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 1100px) {
  .sg-quote__wrap { grid-template-columns: 1fr; gap: 48px; padding: 80px 40px; }
  .sg-quote__head h2 { font-size: clamp(40px, 6vw, 64px); }
  .sg-quote__stats { flex-direction: row; border-left: none; border-top: 3px solid var(--red); padding-left: 0; padding-top: 24px; gap: 0; }
  .sg-quote__stat { flex-direction: column; gap: 4px; flex: 1; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); padding: 0 24px; }
  .sg-quote__stat:last-child { border-right: none; }
}
@media (max-width: 768px) {
  /* Mobile restructure: drop the big background-image rotator (doesn't render
     well on phones), use a solid dark bg + a scrollable image strip like the hero. */
  .sg-quote { min-height: auto; background: #0d0b0b; flex-direction: column; }
  .sg-quote__bg { display: none; }
  .sg-quote__overlay { display: none; }
  .sg-quote__wrap { padding: 60px 20px; }
  .sg-qform { padding: 28px 20px; }
  .sg-qform__row { grid-template-columns: 1fr; }
  .sg-quote__stats { flex-direction: row; margin-bottom: 32px; }
  .sg-quote__stat { padding: 8px 0; }
  .sg-quote__stat-num { font-size: clamp(28px, 8vw, 40px); }
}
@media (max-width: 480px) {
  .sg-quote__stats { flex-direction: column; border-top: none; border-left: 3px solid var(--red); padding-left: 24px; }
  .sg-quote__stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 12px 0; }
}

/* ============================================================
   FOOTER — ALWAYS DARK
   ============================================================ */
.sg-footer {
  background: #0d0b0b;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sg-footer__main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 60px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.sg-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.sg-footer__logo-link { display: block; }
.sg-footer__logo-link .sg-footer__logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.sg-footer__tagline {
  font-family: var(--body);
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}
.sg-footer__eurogrip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.sg-footer__eurogrip-label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.sg-footer__eurogrip .sg-footer__eurogrip-logo {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.45;
}
.sg-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.sg-footer__contact-head {
  font-family: var(--disp);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}
.sg-footer__address {
  font-family: var(--body);
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0;
  font-style: normal;
}
.sg-footer__phone {
  font-family: var(--body);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.sg-footer__phone:hover { color: var(--red); }
.sg-footer__quote-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 24px;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.15s;
}
.sg-footer__quote-cta:hover { background: #a81b21; }

/* Footer navigation column */
.sg-footer__nav,
.sg-footer__products { display: flex; flex-direction: column; gap: 0; }
.sg-footer__nav-head {
  font-family: var(--disp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}
.sg-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-footer__nav-list a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 14px;
  font-family: var(--body);
  transition: color .2s;
}
.sg-footer__nav-list a:hover { color: #fff; }

/* Bottom bar — full-width band; .sg-footer__bar-inner is the centered row */
.sg-footer__bar {
  display: block;
  padding: 20px 60px;
  border-top: 1px solid rgba(255,255,255,0.07);
  align-items: center;
  font-family: var(--body);
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.sg-footer__bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
}
.sg-footer__bar a {
  color: rgba(255,255,255,0.3);
  text-decoration: none;
}
.sg-footer__bar a:hover { color: rgba(255,255,255,0.6); }
.sg-footer__copy {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-family: var(--body);
}
.sg-footer__credit {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-family: var(--body);
}
.sg-footer__credit-link {
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
}
.sg-footer__credit-link:hover { color: rgba(255,255,255,.75); }
@media (max-width: 768px) {
  .sg-footer__main { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px; }
  .sg-footer__bar-inner { padding: 16px 24px; flex-direction: column; gap: 8px; text-align: center; }
  .sg-footer__contact { align-items: flex-start; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].in,
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sg-apps__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE — consolidated breakpoint audit
   ============================================================ */
@media (max-width: 1024px) {
  /* Hero */
  .sg-hero { min-height: 37vh; } /* shortened ~15% from 44vh */
  .sg-hero__inner { padding: 30px 32px; } /* trimmed 44→30 to shorten hero ~15% (tablet) */
  .sg-hero h1 { font-size: clamp(40px, 6vw, 72px); }

  /* Form bar */
  .sg-formbar__form { flex-wrap: wrap; }
  .sg-formbar__field { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .sg-formbar__submit { width: 100%; height: 52px; flex-shrink: 0; }

  /* Why section */
  .sg-why__featured { grid-template-columns: 1fr; }
  .sg-why__featured-right { min-height: 280px; }
  .sg-why__tiles { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Header */
  .sg-header { padding: 0 16px; }
  .sg-header__inner { padding: 0 16px; height: 70px; }
  .sg-logo-img { height: 36px; }
  .sg-header__cta { display: none; }

  /* Hero — mobile restructure: solid dark bg, centered text, image strip below */
  .sg-hero { min-height: auto; background: #0d0b0b; }
  .sg-hero__bg { display: none; }
  .sg-hero__overlay { display: none; }
  .sg-hero__inner { padding: 48px 24px 40px; }
  .sg-hero__left { text-align: center; align-items: center; }
  .sg-hero__eyebrow { font-size: 12px; justify-content: center; }
  .sg-hero h1 { font-size: clamp(42px, 10vw, 64px); }
  .sg-hero__lede { font-size: 16px; }
  .sg-hero__mobile-strip,
  .sg-quote__mobile-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    width: 100%;
    height: 220px;
    scrollbar-width: none;
  }
  .sg-hero__mobile-strip::-webkit-scrollbar,
  .sg-quote__mobile-strip::-webkit-scrollbar { display: none; }
  .sg-hero__mobile-strip img,
  .sg-quote__mobile-strip img {
    flex-shrink: 0;
    width: 80vw;
    height: 220px;
    object-fit: cover;
    scroll-snap-align: start;
  }

  /* Form bar */
  .sg-formbar__field {
    flex: 0 0 100%;
    border-bottom: 1px solid rgba(204,34,41,0.4);
    border-left: none;
  }
  .sg-formbar__field:last-of-type { border-bottom: none; }
  /* Stacked fields show only the bottom divider: neutralise the desktop
     adjacent-sibling LEFT border, which out-specifies a plain border-left:none. */
  .sg-formbar__field + .sg-formbar__field { border-left: none; }
  .sg-formbar__field input,
  .sg-formbar__field select { height: 52px; }

  /* Apps grid */
  .sg-apps__grid { grid-template-columns: 1fr 1fr; }

  /* Why */
  .sg-why { padding: 48px 0; }
  .sg-why__wrap { padding: 0 20px; }
  .sg-why__header { margin-bottom: 32px; text-align: center; max-width: 100%; }

  /* Tread diagram */
  .sg-tread-diagram { padding: 16px; }

  /* Tiles */
  .sg-why__tiles { grid-template-columns: 1fr; }

  /* Mobile centering — section headers & quote head */
  .sg-section-head { text-align: center; }
  .sg-quote__head { text-align: center; align-items: center; }
  .sg-quote__head p { text-align: center; }

  /* Mobile red-text contrast bump (brighter than var(--red) on small screens) */
  .sg-hero h1 em,
  .sg-why__header h2 em,
  .sg-why__feat-callout span strong,
  .sg-quote__head h2 em {
    color: #e8343b;
  }
}

@media (max-width: 480px) {
  .sg-apps__grid { grid-template-columns: 1fr; }
  .sg-hero h1 { font-size: clamp(32px, 9vw, 48px); }
}

/* ============================================================
   FLUENT FORMS OVERRIDES — dark theme scoped to our sections
   ============================================================ */

/* ---- FORM BAR (horizontal strip) ---- */
.sg-formbar .ff-message-success,
.sg-formbar .ff-response-message { color: #4caf50; padding: 16px 24px; font-size: 13px; }

/* NOTE: .ff-el-form-control is Fluent Forms' class on the <input> elements
   themselves — hiding it would blank every field. Intentionally omitted:
   .sg-formbar .ff-el-form-control { display: none; } */
.sg-formbar .fluentform { width: 100%; }
.sg-formbar .ff-el-group { margin: 0; }

.sg-formbar .fluentform .ff-el-group,
.sg-formbar .fluentform .ff_submit_btn_wrapper {
  margin: 0;
  padding: 0;
  border: none;
}

/* The flex container must be the <form> inside the .fluentform wrapper div —
   flexing the wrapper would leave the field groups stacked. */
.sg-formbar .fluentform form {
  display: flex;
  align-items: stretch;
  min-height: 64px;
  width: 100%;
}

/* FF wraps all fields in a <fieldset> — the flex row must pass through it. */
.sg-formbar .fluentform form fieldset {
  display: flex;
  align-items: stretch;
  flex: 1;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
}

.sg-formbar .fluentform .ff-el-group {
  flex: 1;
  display: flex;
  align-items: center;
  border-left: none;
}

.sg-formbar .fluentform .ff-el-group + .ff-el-group {
  border-left: 2px solid rgba(204,34,41,0.6);
}

.sg-formbar .fluentform .ff-el-group label,
.sg-formbar .fluentform .ff-el-group .ff-el-form-label,
.sg-formbar .fluentform .ff-el-input--label { display: none; }
.sg-formbar .fluentform .ff-el-input--content { flex: 1; width: 100%; display: flex; align-items: center; }

.sg-formbar .fluentform input[type="text"],
.sg-formbar .fluentform input[type="email"],
.sg-formbar .fluentform select {
  width: 100%;
  height: 64px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 20px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
}

.sg-formbar .fluentform input[type="text"]::placeholder,
.sg-formbar .fluentform input[type="email"]::placeholder {
  color: rgba(255,255,255,0.7);
}

.sg-formbar .fluentform select {
  color: rgba(255,255,255,0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CC2229' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-color: transparent;
  cursor: pointer;
}

.sg-formbar .fluentform select option { background: #231F20; color: #fff; }

/* Real FF class is ff_submit_btn_wrapper; it also carries .ff-el-group, so
   neutralise the flex:1 + divider it would otherwise inherit. */
.sg-formbar .fluentform .ff_submit_btn_wrapper {
  flex: 0 0 auto;
  border-left: none;
}

.sg-formbar .fluentform .ff-btn-submit {
  height: 64px;
  padding: 0 40px;
  background: var(--red);
  border: none;
  border-radius: 0;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.sg-formbar .fluentform .ff-btn-submit:hover { background: var(--red-d); }

/* ---- MAIN QUOTE FORM ---- */
.sg-qform .fluentform form { display: flex; flex-direction: column; gap: 18px; }

.sg-qform .ff-el-group { margin-bottom: 0; }

.sg-qform .ff-el-form-label label,
.sg-qform .ff-el-group label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: block;
  margin-bottom: 7px;
}

.sg-qform .fluentform input[type="text"],
.sg-qform .fluentform input[type="email"],
.sg-qform .fluentform input[type="tel"],
.sg-qform .fluentform input[type="url"],
.sg-qform .fluentform select,
.sg-qform .fluentform textarea {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 13px 15px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  outline: none;
  width: 100%;
  box-shadow: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, background 0.15s;
}

.sg-qform .fluentform input::placeholder,
.sg-qform .fluentform textarea::placeholder { color: rgba(255,255,255,0.55); }

.sg-qform .fluentform input:focus,
.sg-qform .fluentform select:focus,
.sg-qform .fluentform textarea:focus {
  border-color: var(--red);
  background: rgba(0,0,0,0.7);
}

.sg-qform .fluentform select {
  color: rgba(255,255,255,0.85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CC2229' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: rgba(0,0,0,0.5);
  padding-right: 36px;
  cursor: pointer;
}

.sg-qform .fluentform select option { background: #1a1617; color: #fff; }

.sg-qform .fluentform textarea { resize: vertical; min-height: 100px; }

.sg-qform .fluentform .ff-btn-submit {
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 16px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}

.sg-qform .fluentform .ff-btn-submit:hover { background: var(--red-d); }

.sg-qform .ff-message-success { color: #4caf50; font-size: 14px; font-weight: 600; padding: 12px 0; }
.sg-qform .ff-el-is-error .ff-el-form-control { border-color: var(--red) !important; }
.sg-qform .error { color: #ff6b6b; font-size: 12px; margin-top: 4px; }

/* Force our red on the submit buttons, beating Fluent Forms' default theme. */
.sg-formbar .fluentform .ff-btn-submit,
.sg-qform .fluentform .ff-btn-submit {
  background: var(--red) !important;
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  border-radius: 3px !important;
}
.sg-formbar .fluentform .ff-btn-submit:hover,
.sg-qform .fluentform .ff-btn-submit:hover {
  background: var(--red-d) !important;
  background-color: var(--red-d) !important;
}

/* Typed-text + label brightness — beat Fluent Forms' default input color. */
.sg-formbar .fluentform input[type="text"],
.sg-formbar .fluentform input[type="email"] {
  color: #ffffff !important;
}
.sg-qform .fluentform input[type="text"],
.sg-qform .fluentform input[type="email"],
.sg-qform .fluentform input[type="tel"],
.sg-qform .fluentform input[type="url"],
.sg-qform .fluentform textarea {
  /* FF's `.ff-el-form-control:focus` sets a grey color (--fluentform-secondary,
     #606266) at specificity (0,3,0), out-ranking our base white and turning typed
     text grey while focused. !important forces white in every state. */
  color: #ffffff !important;
}
.sg-qform .ff-el-group label {
  color: rgba(255,255,255,0.85) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .sg-formbar .fluentform form { flex-direction: column; }
  .sg-formbar .fluentform form fieldset { flex-direction: column; }
  .sg-formbar .fluentform .ff-el-group {
    border-left: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    height: 52px;
    min-height: 52px;
  }
  .sg-formbar .fluentform .ff-el-group:last-child { border-bottom: none !important; }
  .sg-formbar .fluentform .ff-el-input--content { height: 52px; }
  .sg-formbar .fluentform input[type="text"],
  .sg-formbar .fluentform input[type="email"],
  .sg-formbar .fluentform select { height: 52px; }
  .sg-formbar .fluentform .ff-btn-submit { height: 52px; width: 100%; }
}

/* ============================================================
   HEADER — NAV, ACTIONS, SEARCH OVERLAY, MOBILE DRAWER
   ============================================================ */

/* Accessibility utility — visually hidden, available to screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  width: auto;
  height: auto;
  top: 5px;
  left: 5px;
  z-index: 100000;
  display: block;
  padding: 14px 22px;
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  line-height: normal;
  text-decoration: none;
}

/* ---------- LOGO CLUSTER ----------
   New header uses .sg-header__left; mirrors the old .sg-header__logos flex. */
.sg-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* ---------- PRIMARY NAVIGATION (desktop) ---------- */
.sg-header__nav {
  display: flex;
  align-self: stretch; /* fill the 80px bar so dropdowns anchor at its base */
}
.sg-nav__list {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-nav__list > li {
  position: relative;
  display: flex;
  align-items: stretch;
}
.sg-nav__list a {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s ease;
}
.sg-nav__list a:hover,
.sg-nav__list .current-menu-item > a,
.sg-nav__list .current-menu-parent > a {
  color: var(--red);
}

/* Submenu dropdown (depth 2) */
.sg-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 1001;
}
.sg-nav__list > li:hover > .sub-menu,
.sg-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sg-nav__list .sub-menu li { display: block; }
.sg-nav__list .sub-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .04em;
}

/* ---------- HEADER ACTIONS (search, cart, CTA, toggle) ---------- */
.sg-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Icon buttons — search + quote cart */
.sg-header__search-btn,
.sg-header__cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--ink);
  transition: color .15s ease, background .15s ease;
}
.sg-header__search-btn:hover,
.sg-header__cart-btn:hover {
  color: var(--red);
  background: rgba(255, 255, 255, .05);
}

/* Quote cart count badge */
.sg-header__cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 8px;
}

/* Find My Tire CTA — red button (mirrors the legacy .sg-header__cta) */
.sg-header__find-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  white-space: nowrap;
  transition: background .15s ease;
}
.sg-header__find-cta:hover { background: var(--red-d); }

/* ---------- MOBILE HAMBURGER TOGGLE ---------- */
.sg-header__mobile-toggle {
  display: none; /* shown via the responsive block below */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px 8px;
  background: transparent;
  border: none;
}
.sg-header__mobile-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
/* Bars morph into an X while the drawer is open */
.sg-header__mobile-toggle[aria-expanded="true"] .sg-header__mobile-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.sg-header__mobile-toggle[aria-expanded="true"] .sg-header__mobile-toggle-bar:nth-child(2) {
  opacity: 0;
}
.sg-header__mobile-toggle[aria-expanded="true"] .sg-header__mobile-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.sg-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18vh 24px 24px;
  background: rgba(13, 11, 11, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* [hidden] must win over the display:flex above so JS can toggle visibility. */
.sg-search-overlay[hidden] { display: none; }

.sg-search-overlay__inner {
  position: relative;
  width: 100%;
  max-width: 720px;
}
.sg-search-overlay__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
}
.sg-search-overlay__input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(24px, 5vw, 44px);
  text-transform: uppercase;
  color: #fff;
}
.sg-search-overlay__input::placeholder { color: rgba(255, 255, 255, .3); }
.sg-search-overlay__submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--red);
  border: none;
  border-radius: 3px;
  color: #fff;
  transition: background .15s ease;
}
.sg-search-overlay__submit:hover { background: var(--red-d); }
.sg-search-overlay__close {
  position: absolute;
  top: -64px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  transition: color .15s ease, border-color .15s ease;
}
.sg-search-overlay__close:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ============================================================
   HEADER RESPONSIVE — collapse nav into a drawer
   At <=1024px the bar shows logo + hamburger only; nav slides in
   from the right as an off-canvas drawer.
   ============================================================ */
.sg-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  display: none;
}

@media (max-width: 1024px) {
  /* Show hamburger; hide the desktop actions (search/cart/CTA). */
  .sg-header__mobile-toggle { display: flex; }
  .sg-header__search-btn,
  .sg-header__cart-btn,
  .sg-header__find-cta { display: none; }

  /* Off-canvas drawer */
  .sg-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 84vw);
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    padding: 88px 0 24px;
    background: var(--bg2);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
    z-index: 1500;
  }
  .sg-header__nav.is-open { transform: none; }

  .sg-nav__list {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 0;
    width: 100%;
  }
  .sg-nav__list > li {
    flex-direction: column;
    align-items: stretch;
  }
  .sg-nav__list a {
    height: auto;
    padding: 16px 24px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }

  /* Submenus render inline (expanded) inside the drawer */
  .sg-nav__list .sub-menu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    border: none;
    background: var(--bg3);
  }
  .sg-nav__list .sub-menu a {
    padding: 14px 24px 14px 40px;
    font-size: 13px;
  }

  /* Backdrop becomes active behind the open drawer */
  .sg-nav-backdrop { display: block; }
  .sg-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Lock body scroll while the drawer is open */
  body.sg-nav-open { overflow: hidden; }
}

/* Anchor offset — keep #find-my-tire clear of the sticky header
   when smooth-scrolled to from the CTA. */
#find-my-tire { scroll-margin-top: 120px; }
@media (max-width: 768px) {
  #find-my-tire { scroll-margin-top: 100px; }
}

/* Respect reduced-motion for the header's animated components, matching the
   site's existing prefers-reduced-motion handling for [data-reveal]. */
@media (prefers-reduced-motion: reduce) {
  .sg-header__nav,
  .sg-nav-backdrop,
  .sg-search-overlay,
  .sg-header__mobile-toggle-bar,
  .sg-nav__list .sub-menu {
    transition: none;
  }
}

/* ==========================================================================
   HOMEPAGE — sgh- namespace (DARK MODE)
   Matches the landing page design system. No JetBrains Mono.
   ========================================================================== */

/* ── Shared ── */
.sgh-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.sgh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 3px;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
}
.sgh-btn--primary { background: var(--red); color: #fff; border: 2px solid var(--red); }
.sgh-btn--primary:hover { background: var(--red-d); border-color: var(--red-d); }
.sgh-btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
.sgh-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ── Section 1: Hero ── */
.sgh-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.sgh-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.sgh-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.05) 78%),
    linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 40%);
}
.sgh-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 48px;
}
.sgh-hero__content { max-width: 600px; }
.sgh-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.sgh-hero__headline {
  font-family: var(--disp);
  font-size: clamp(44px, 6vw, 86px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: .9;
  letter-spacing: -.01em;
  margin: 0 0 22px;
}
.sgh-hero__headline em { font-style: normal; color: var(--red); }
.sgh-hero__sub {
  font-family: var(--body);
  font-size: 17px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 480px;
}
.sgh-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Section 2: Find Your Tire selector ── */
.sgh-finder {
  background: #000;
  position: relative;
  z-index: 10;
}
.sgh-finder__inner {
  display: flex;
  align-items: stretch;
  max-width: 100%;
}
.sgh-finder__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  background: var(--black);
  flex-shrink: 0;
}
.sgh-finder__label-sm {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.sgh-finder__label-lg {
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.sgh-finder__form {
  display: flex;
  align-items: stretch;
  flex: 1;
}
.sgh-finder__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.sgh-finder__field label {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 5px;
}
.sgh-finder__field select,
.sgh-finder__field input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  width: 100%;
}
.sgh-finder__field input { cursor: text; }
.sgh-finder__field input::placeholder { color: rgba(255,255,255,.45); }
.sgh-finder__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23CC2229' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 24px;
}
.sgh-finder__field select option { background: var(--black); color: #fff; }
.sgh-finder__submit {
  flex-shrink: 0;
  padding: 0 44px;
  background: var(--red);
  border: none;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}
.sgh-finder__submit:hover { background: var(--red-d); }

/* ── Section 3: Shop by Application ── */
.sgh-apps {
  background: #1a1617;
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}
.sgh-apps__inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.sgh-apps__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 24px;
}
.sgh-apps__title {
  font-family: var(--disp);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.sgh-apps__title em { font-style: normal; color: var(--red); }
.sgh-apps__viewall {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  transition: color .15s;
}
.sgh-apps__viewall:hover { color: var(--red); }
.sgh-apps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sgh-appcard {
  display: flex;
  flex-direction: column;
  background: #211b1c;
  border: 1px solid var(--line2);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.sgh-appcard:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}
.sgh-appcard__img {
  position: relative;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-color: #2a2425;
}
.sgh-appcard__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.sgh-appcard__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}
.sgh-appcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1;
}
.sgh-appcard__name {
  font-family: var(--disp);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  margin: 0;
}
.sgh-appcard__cta {
  margin-top: auto;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}

/* ── Section 4: How the List Works ── */
.sgh-howlist {
  background: #1d1819;
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}
.sgh-howlist__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.sgh-howlist__title {
  font-family: var(--disp);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: .9;
  margin: 0 0 16px;
}
.sgh-howlist__title em { font-style: normal; color: var(--red); }
.sgh-howlist__lede {
  font-family: var(--body);
  font-size: 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 42ch;
}
.sgh-howlist__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.sgh-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  padding: 24px 28px;
}
.sgh-step__num {
  font-family: var(--disp);
  font-size: 28px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 10px;
}
.sgh-step__title {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
.sgh-step__body {
  font-family: var(--body);
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
}

/* ── Section 5: Why Super Grip ── */
.sgh-why {
  background: var(--bg);
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}
.sgh-why__inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.sgh-why__head { max-width: 600px; margin-bottom: 48px; }
.sgh-why__title {
  font-family: var(--disp);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  line-height: .9;
  margin: 0 0 14px;
}
.sgh-why__title em { font-style: normal; color: var(--red); }
.sgh-why__lede {
  font-family: var(--body);
  font-size: 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin: 0;
}
.sgh-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sgh-why__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 26px;
  transition: background .18s, transform .18s;
}
.sgh-why__card:hover { background: var(--panel2); transform: translateY(-3px); }
.sgh-why__card-num {
  font-family: var(--disp);
  font-size: 24px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 16px;
}
.sgh-why__card h3 {
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 10px;
}
.sgh-why__card p {
  font-family: var(--body);
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
}

/* ── Section 6: CTA Band ── */
.sgh-cta-band { background: var(--black); padding: 64px 0; }
.sgh-cta-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.sgh-cta-band__headline {
  font-family: var(--disp);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1;
}
.sgh-cta-band__sub {
  font-family: var(--body);
  font-size: 15px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}
.sgh-cta-band__actions { flex-shrink: 0; }

/* ── Homepage responsive ── */
@media (max-width: 1024px) {
  .sgh-apps__grid { grid-template-columns: repeat(2, 1fr); }
  .sgh-why__grid { grid-template-columns: repeat(2, 1fr); }
  .sgh-howlist__inner { grid-template-columns: 1fr; gap: 40px; }
  .sgh-finder__inner { flex-direction: column; }
  .sgh-finder__label { padding: 16px 24px; }
  .sgh-finder__form { flex-wrap: wrap; }
  .sgh-finder__field { flex: 0 0 50%; border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
  .sgh-finder__submit { width: 100%; padding: 16px; justify-content: center; }
  .sgh-cta-band__inner { flex-direction: column; text-align: center; align-items: flex-start; }
}

@media (max-width: 768px) {
  .sgh-hero { min-height: 60vh; }
  .sgh-hero__inner { padding: 48px 24px; }
  .sgh-apps { padding: 56px 0; }
  .sgh-apps__inner,
  .sgh-howlist__inner,
  .sgh-why__inner,
  .sgh-cta-band__inner { padding-left: 24px; padding-right: 24px; }
  .sgh-apps__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sgh-apps__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sgh-why { padding: 56px 0; }
  .sgh-why__grid { grid-template-columns: 1fr; }
  .sgh-finder__field { flex: 0 0 100%; }
  .sgh-howlist { padding: 56px 0; }
}

@media (max-width: 480px) {
  .sgh-apps__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sgh-appcard,
  .sgh-why__card { transition: none; }
}

/* ==========================================================================
   GLOBAL SIDEBAR LAYOUT (Option A — Amazon/catalog pattern)
   Fixed left sidebar on every page; top nav + content offset right.
   Dark mode throughout.
   ========================================================================== */

:root {
  --sg-sidebar-w: 256px;
  --sg-topbar-h: 64px;
}

/* ── Shell + main offset ── */
.sg-shell {
  position: relative;
}
.sg-main {
  margin-left: var(--sg-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Sidebar ── */
.sg-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sg-sidebar-w);
  background: var(--black);
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  z-index: 80;
}

.sg-sidebar__logo {
  flex-shrink: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.sg-sidebar__logo .sg-sidebar__logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.sg-sidebar__logo-powered {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-sidebar__logo-powered-label {
  font-family: var(--body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
}
.sg-sidebar__logo .sg-sidebar__logo-eurogrip {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: .7;
}

.sg-sidebar__search {
  flex-shrink: 0;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sg-sidebar__search-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  padding: 10px 12px;
  color: rgba(255,255,255,.4);
  cursor: text;
  transition: border-color .15s;
}
.sg-sidebar__search-box:hover { border-color: rgba(255,255,255,.3); }
.sg-sidebar__search-box span {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
}

.sg-sidebar__cat-head {
  flex-shrink: 0;
  padding: 16px 22px 8px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sg-sidebar__cat-head span { min-width: 0; }

.sg-sidebar__cats {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}
.sg-sidebar__cats::-webkit-scrollbar { width: 3px; }
.sg-sidebar__cats::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

.sg-sidebar__cat {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 22px 10px 18px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  border-left: 2px solid transparent;
  transition: color .13s, background .13s, border-color .13s;
}
.sg-sidebar__cat:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
  border-left-color: rgba(204,34,41,.6);
}
.sg-sidebar__cat.is-active {
  color: #fff;
  border-left-color: var(--red);
  background: rgba(204,34,41,.1);
}
/* Industry marker — small dot in place of the old 01–07 numerals.
   Muted grey by default, brand red on hover/active (mirrors the row text). */
.sg-sidebar__cat-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-left: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background .13s;
}
.sg-sidebar__cat:hover .sg-sidebar__cat-dot,
.sg-sidebar__cat.is-active .sg-sidebar__cat-dot { background: var(--red); }

.sg-sidebar__foot {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-sidebar__mylist {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  color: rgba(255,255,255,.8);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .14s;
}
.sg-sidebar__mylist:hover { background: rgba(255,255,255,.12); }
.sg-sidebar__mylist-count {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 7px;
}
.sg-sidebar__find {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  background: var(--red);
  border-radius: 5px;
  color: #fff;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .14s;
}
.sg-sidebar__find:hover { background: var(--red-d); }

/* ── Topbar (offset right of sidebar) ── */
.sg-topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.sg-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--sg-topbar-h);
  padding: 0 32px;
}

.sg-topbar__nav { display: flex; align-self: stretch; }
.sg-topbar__nav-list {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-topbar__nav-list > li {
  position: relative;
  display: flex;
  align-items: stretch;
}
.sg-topbar__nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s;
}
.sg-topbar__nav-list a:hover,
.sg-topbar__nav-list .current-menu-item > a,
.sg-topbar__nav-list .current-menu-parent > a { color: var(--red); }

.sg-topbar__nav-list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 71;
}
.sg-topbar__nav-list > li:hover > .sub-menu,
.sg-topbar__nav-list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sg-topbar__nav-list .sub-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .04em;
}

.sg-topbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.sg-topbar__search-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .15s;
}
.sg-topbar__search-btn:hover { color: var(--red); }
.sg-topbar__mylist {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .15s;
}
.sg-topbar__mylist:hover { color: var(--red); }
.sg-topbar__mylist-count {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 7px;
}
.sg-topbar__find {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 22px;
  background: var(--red);
  color: #fff;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background .15s;
}
.sg-topbar__find:hover { background: var(--red-d); }

/* Mobile sidebar toggle hidden on desktop */
.sg-topbar__sb-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px 8px;
  background: transparent;
  border: none;
}
.sg-topbar__sb-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}

/* ── Responsive: sidebar becomes off-canvas drawer <=1024px ── */
@media (max-width: 1024px) {
  .sg-main { margin-left: 0; }

  .sg-sidebar {
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1500;
  }
  .sg-sidebar.is-open { transform: none; }

  .sg-topbar__sb-toggle { display: flex; }

  /* Hide the inline topbar search label text on smaller screens, keep nav */
  .sg-topbar__inner { padding: 0 20px; }

  /* Sidebar backdrop */
  .sg-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s, visibility .28s;
  }
  .sg-sidebar-backdrop.is-open { opacity: 1; visibility: visible; }

  body.sg-sidebar-open { overflow: hidden; }
}

@media (max-width: 768px) {
  .sg-topbar__nav { display: none; }
  .sg-topbar__search-btn span,
  .sg-topbar__mylist span:not(.sg-topbar__mylist-count) { display: none; }
  .sg-topbar__find { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-sidebar,
  .sg-sidebar-backdrop,
  .sg-topbar__nav-list .sub-menu { transition: none; }
}

/* ── WordPress admin bar accommodation ──
   Logged-in users get a fixed admin bar (32px desktop / 46px ≤782px) and WP
   pushes <html> down by that height. The position:fixed sidebar and
   position:sticky topbar are viewport-anchored, so they must be offset manually
   by the admin-bar height — otherwise the sidebar logo and the topbar slide
   under the admin bar on scroll.
   (Visitors see no admin bar, so the base offsets already suit production.) */
.admin-bar .sg-sidebar { top: 32px; }
.admin-bar .sg-topbar  { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .sg-sidebar { top: 46px; }
  .admin-bar .sg-topbar  { top: 46px; }
}

/* ════════════════════════════════════════════════════════
   CATALOG ARCHIVE  —  taxonomy-product_cat.php
   Classes: .sg-cat-*  /  .sg-prod-card*
════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.sg-cat {
  padding: 40px 48px 80px;
  max-width: 1400px;
}

/* ── Breadcrumb ── */
.sg-cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(237,234,232,.45);
}
.sg-cat-breadcrumb__link {
  color: var(--red);
  text-decoration: none;
}
.sg-cat-breadcrumb__link:hover { text-decoration: underline; }
.sg-cat-breadcrumb__sep { color: rgba(237,234,232,.25); }
.sg-cat-breadcrumb__current { color: var(--ink); }

/* ── Term header ── */
.sg-cat-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  /* Hero banner: controlled height (clamp), title anchored to the lower-left.
     Taller than a thin strip so `cover` crops each photo less aggressively
     (the thin band was magnifying the subject and reading as "too zoomed"). */
  min-height: clamp(240px, 30vw, 380px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* Brand base = graceful fallback. When an industry has no photo (--cat-img
     unset → ::before paints nothing) the hero degrades to a solid brand-black
     banner with the name only — never a broken image. */
  background-color: var(--black);
}
/* Full-bleed industry photo (the same sg_category_images() source as the
   /products/ cards). Only paints when --cat-img is set. */
.sg-cat-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--cat-img, none);
  background-size: cover;
  /* Bias the focal point slightly above centre — these are landscape action
     shots whose equipment/horizon reads better just above the midline than on
     a dead-centre crop. Per-industry --cat-pos can override (see below). */
  background-position: var(--cat-pos, center 38%);
}
/* Brand-dark (#231F20) gradient over the photo: heaviest at the lower-left where
   the title sits, fading up and to the right so the photo still reads. This
   guarantees the overlaid name/description stay legible on any image. */
.sg-cat-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(35,31,32,0.92) 0%, rgba(35,31,32,0.45) 55%, rgba(35,31,32,0.15) 100%),
    linear-gradient(to right, rgba(35,31,32,0.80) 0%, rgba(35,31,32,0.30) 60%, rgba(35,31,32,0.05) 100%);
}
.sg-cat-header__title,
.sg-cat-header__desc,
.sg-cat-header__count {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sg-cat-header__title {
  font-family: var(--disp);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 10px;
  max-width: 70%;
}
.sg-cat-header__desc {
  font-family: var(--body);
  font-size: .975rem;
  color: rgba(255,255,255,0.85);
  margin: 0 0 14px;
  max-width: 60%;
  line-height: 1.6;
}
/* term_description() wraps the text in a <p>; reset its default margins so the
   inner paragraph sits flush inside the styled wrapper. */
.sg-cat-header__desc p { margin: 0; }
.sg-cat-header__desc p + p { margin-top: .6em; }
.sg-cat-header__count {
  /* align-self overrides the hero's flex-column `align-items: stretch`, which
     was forcing this inline-block to span the full container width (it read as
     a broken input bar). flex-start makes the pill hug its own text. */
  align-self: flex-start;
  display: inline-block;
  width: auto;
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink2);
  background: rgba(35,31,32,.6);
  border: 1px solid var(--line2);
  border-radius: 20px;
  padding: 4px 14px;
}
/* Narrow screens: shorter hero, tighter padding, and let the title/description
   use the full width instead of the desktop dark-zone cap. */
@media (max-width: 768px) {
  .sg-cat-header {
    min-height: clamp(200px, 46vw, 280px);
    padding: 24px 22px;
  }
  .sg-cat-header__title,
  .sg-cat-header__desc { max-width: 100%; }
}

/* ── Application sub-nav pills ── */
.sg-cat-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.sg-cat-subnav__pill {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--line2);
  color: rgba(237,234,232,.6);
  background: transparent;
  transition: color .18s, border-color .18s, background .18s;
}
.sg-cat-subnav__pill:hover {
  color: var(--ink);
  border-color: var(--red);
}
.sg-cat-subnav__pill--active {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.sg-cat-subnav__pill--active:hover { background: var(--red-d); border-color: var(--red-d); }

/* ── Equipment narrowing chips (archive) — pill row above the product grid,
   reusing the application sub-nav pill language (transparent → red active). ── */
.sg-cat-equip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-cat-equip__chip {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--line2);
  color: rgba(237,234,232,.6);
  background: transparent;
  transition: color .18s, border-color .18s, background .18s;
}
.sg-cat-equip__chip:hover {
  color: var(--ink);
  border-color: var(--red);
}
.sg-cat-equip__chip.is-active {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.sg-cat-equip__chip.is-active:hover { background: var(--red-d); border-color: var(--red-d); }

/* ── Two-column body ── */
.sg-cat-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Filter rail placeholder ── */
.sg-cat-filters {
  position: sticky;
  top: calc(var(--sg-topbar-h, 64px) + 24px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 20px;
}
.sg-cat-filters__head {
  font-family: var(--disp);
  font-size: .9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 0 0 12px;
}
.sg-cat-filters__placeholder {
  font-family: var(--body);
  font-size: .8rem;
  color: rgba(237,234,232,.35);
  margin: 0;
  font-style: italic;
}

/* ── Product grid ── */
.sg-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Product card ── */
.sg-prod-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, border-color 0.4s ease;
  text-decoration: none;
}
.sg-prod-card:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(204,34,41,0.15);
}

/* Card image */
.sg-prod-card__img {
  aspect-ratio: 4/3;
  background: var(--bg3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-prod-card__img img,
.sg-prod-card__img .wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  display: block;
  /* White backing on REAL images only — matches the PDP stage (.sg-pdp__media
     #F5F3F0) so tires sit on clean white everywhere. Set on the <img>, not the
     container, so the imageless .sg-prod-card__img-placeholder keeps its dark
     hatch + "Image Coming Soon" badge (the container bg below is unchanged). */
  background: #F5F3F0;
}
.sg-prod-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--bg3),
    var(--bg3) 4px,
    var(--panel2) 4px,
    var(--panel2) 8px
  );
  opacity: .4;
}

/* Card body */
.sg-prod-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  gap: 8px;
}

/* Chip */
.sg-prod-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-prod-card__chip {
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(204,34,41,.12);
  border-radius: 3px;
  padding: 3px 8px;
}

/* Title */
.sg-prod-card__name {
  font-family: var(--disp);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}

/* Excerpt */
.sg-prod-card__excerpt {
  font-family: var(--body);
  font-size: .85rem;
  color: rgba(237,234,232,.55);
  line-height: 1.5;
  flex: 1;
}
.sg-prod-card__excerpt p { margin: 0; }

/* CTA */
.sg-prod-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  margin-top: 4px;
  transition: gap .18s;
}
.sg-prod-card__cta:hover { gap: 10px; }

/* ── Empty state ── */
.sg-cat-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 40px;
  text-align: center;
}
.sg-cat-empty__msg {
  font-family: var(--body);
  font-size: 1rem;
  color: rgba(237,234,232,.45);
  margin: 0;
}
.sg-cat-empty__link {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
}
.sg-cat-empty__link:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sg-cat { padding: 32px 32px 60px; }
  .sg-cat-body { grid-template-columns: 180px 1fr; gap: 28px; }
  .sg-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 768px) {
  .sg-cat { padding: 24px 20px 48px; }
  .sg-cat-body { grid-template-columns: 1fr; }
  .sg-cat-filters { position: static; }
  .sg-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .sg-cat-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   CONTACT  —  page-contact.php
   Classes: .sg-contact / .sg-contact-*
   Reuses .sg-qform (see CATALOG/QUOTE form styling) for the embedded
   Fluent Form so fields inherit the dark theme automatically.
════════════════════════════════════════════════════════ */

/* ── Page wrapper (mirrors .sg-cat) ── */
.sg-contact {
  padding: 40px 48px 80px;
  max-width: 1400px;
}

/* ── Hero ── */
.sg-contact-hero {
  margin-bottom: 44px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.sg-contact-hero__title {
  font-family: var(--disp);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.sg-contact-hero__sub {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(237,234,232,.6);
  max-width: 640px;
}

/* ── Two-column body ── */
.sg-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr; /* info narrower, form wider */
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}

/* Shared column heading */
.sg-contact__col-head {
  font-family: var(--disp);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0 0 24px;
}

/* ── Info column ── */
.sg-contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
}
.sg-contact-item:first-child { padding-top: 0; }
.sg-contact-item + .sg-contact-item { border-top: 1px solid var(--line); }
.sg-contact-item__icon {
  flex-shrink: 0;
  display: flex;
  padding-top: 2px;
  color: var(--red);
}
.sg-contact-item__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sg-contact-item__label {
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(237,234,232,.45);
}
.sg-contact-item__value {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 600;
  font-style: normal; /* reset <address> italics */
  line-height: 1.45;
  color: var(--ink);
}
a.sg-contact-item__value--link { transition: color .15s ease; }
a.sg-contact-item__value--link:hover { color: var(--red); }

/* ── Form column ── (.sg-qform supplies the dark card + Fluent Form styling) */
.sg-contact-form-col { min-width: 0; }

/* ── Full-width map placeholder ── */
.sg-contact-map { margin-top: 8px; }
/* Full-width map: container spans the content column with no horizontal
   padding; the iframe fills it. Rounded border kept to match the dark theme. */
.sg-contact__map {
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden; /* clip the iframe corners to the radius */
}
.sg-contact__map iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sg-contact { padding: 32px 32px 60px; }
  .sg-contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .sg-contact { padding: 24px 20px 48px; }
  .sg-contact__map iframe { height: 340px; }
}

/* ════════════════════════════════════════════════════════
   INTERIOR PAGES — shared shell
   Used by: page-about.php, page-careers.php, page-faq.php,
   page-motorsports.php. Classes: .sg-pg / .sg-pg-*
════════════════════════════════════════════════════════ */

.sg-pg {
  padding: 40px 48px 80px;
  max-width: 1400px;
}

/* ── Hero ── */
.sg-pg-hero {
  margin-bottom: 44px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.sg-pg-hero__title {
  font-family: var(--disp);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 16px;
}
.sg-pg-hero__sub {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(237,234,232,.6);
  max-width: 680px;
}

/* ── Generic section ── */
.sg-pg-section { margin-bottom: 56px; }
.sg-pg-section__head {
  font-family: var(--disp);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.sg-pg-prose {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(237,234,232,.72);
  max-width: 760px;
}
.sg-pg-prose em { font-style: normal; color: var(--red); }

/* ── Dark band ── */
.sg-pg-band {
  background: #1a1617;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 44px 40px;
}
.sg-pg-band .sg-pg-section__head { margin-bottom: 14px; }

/* ── 3-column card grid ── */
.sg-pg-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.sg-pg-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 26px;
  transition: border-color .15s ease, background .15s ease;
}
.sg-pg-card:hover { border-color: var(--line2); background: var(--panel); }
.sg-pg-card__title {
  font-family: var(--disp);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.sg-pg-card__body {
  font-family: var(--body);
  font-size: .97rem;
  line-height: 1.6;
  color: rgba(237,234,232,.68);
}

/* ── CTA band ── */
.sg-pg-ctaband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #241f20 0%, #1a1617 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  padding: 36px 40px;
}
.sg-pg-ctaband__text {
  font-family: var(--disp);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
}
.sg-pg-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--red);
  color: #fff;
  padding: 15px 30px;
  border-radius: 3px;
  font-family: var(--body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .15s ease;
}
.sg-pg-cta-btn:hover { background: var(--red-d); }

/* ── Interior-page responsive ── */
@media (max-width: 1024px) {
  .sg-pg { padding: 32px 32px 60px; }
  .sg-pg-cards { grid-template-columns: 1fr; }
  .sg-pg-band { padding: 36px 28px; }
}
@media (max-width: 600px) {
  .sg-pg { padding: 24px 20px 48px; }
  .sg-pg-ctaband { padding: 28px 24px; }
}

/* ════════════════════════════════════════════════════════
   ABOUT  —  page-about.php visual upgrade
   Photo-backed hero / mission / CTA bands (var(--hero-img) is
   set inline per section in the template) + numbered, red-accented
   Why-Choose cards. Everything is scoped under .sg-about so the
   shared .sg-pg-* interior base (used by every other page) is
   left untouched.
════════════════════════════════════════════════════════ */

/* About hero photo treatment moved to the reusable .sg-pg-hero--photo template
   (search "REUSABLE PHOTO HERO"). About uses the --reveal modifier. */

/* Mission band — let the photo show through the dark band subtly. */
.sg-about .sg-pg-band {
  position: relative;
  overflow: hidden;
}
.sg-about .sg-pg-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}
.sg-about .sg-pg-band > * {
  position: relative;
  z-index: 1;
}

/* Why-Choose cards — big red number, red top accent, hover lift. */
.sg-about .sg-pg-card {
  border-top: 3px solid var(--red);
  transition: border-color .15s ease, background .15s ease, transform .3s ease;
}
.sg-about .sg-pg-card:hover { transform: translateY(-4px); }
.sg-about .sg-pg-card__num {
  display: block;
  font-family: var(--disp);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--red);
  margin: 0 0 10px;
}

/* ── Legal / utility pages (page-privacy-policy.php) — prose only ── */
.sg-pg-effective {
  font-family: var(--body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(237,234,232,.5);
  margin: 2px 0 0;
}
/* Prose links (mailto/tel etc.) — none existed before, so default to red. */
.sg-pg-prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sg-pg-prose a:hover { color: var(--red-d); }
.sg-privacy__contact {
  font-style: normal;
  line-height: 1.8;
  margin-top: 14px;
}

/* ════════════════════════════════════════════════════════
   CAREERS  —  page-careers.php
════════════════════════════════════════════════════════ */

.sg-jobs__empty {
  background: var(--card-bg);
  border: 1px dashed var(--line2);
  border-radius: 6px;
  padding: 36px 32px;
  text-align: center;
}
.sg-jobs__empty-text {
  font-family: var(--body);
  font-size: 1rem;
  color: rgba(237,234,232,.6);
  margin: 0;
}
.sg-jobs__empty a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sg-jobs__empty a:hover { color: var(--red-d); }

/* Light mode — page-careers.php carries .sg-light. The empty-state / coming-soon
   box flips to a white dashed card on the warm bg, mirroring the light .sg-pg-card
   surface (heading + body text are handled by the base .sg-light h2/p rules). */
.sg-light .sg-jobs__empty {
  background: #FFFFFF;
  border-color: #CBC6C0;
}

/* ════════════════════════════════════════════════════════
   FAQ  —  page-faq.php  (accessible accordion)
════════════════════════════════════════════════════════ */

.sg-faq__list { max-width: 860px; }
.sg-faq__item { border-bottom: 1px solid var(--line); }
.sg-faq__item:first-child { border-top: 1px solid var(--line); }
.sg-faq__q { margin: 0; }
.sg-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.sg-faq__q-text { transition: color .15s ease; }
.sg-faq__trigger:hover .sg-faq__q-text { color: var(--red); }
.sg-faq__trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sg-faq__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--red);
  transition: transform .3s ease;
}
.sg-faq__item.is-open .sg-faq__icon { transform: rotate(180deg); }
.sg-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.sg-faq__item.is-open .sg-faq__panel { grid-template-rows: 1fr; }
/* visibility:hidden also removes collapsed answers from the a11y tree + tab
   order (keeps aria-expanded="false" honest); preserved through the grid-rows
   transition because it is not display:none. */
.sg-faq__panel-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility .3s ease; }
.sg-faq__item.is-open .sg-faq__panel-inner { visibility: visible; }
.sg-faq__answer {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(237,234,232,.68);
  margin: 0;
  padding: 0 4px 24px;
  max-width: 760px;
}
@media (prefers-reduced-motion: reduce) {
  .sg-faq__panel, .sg-faq__panel-inner, .sg-faq__icon, .sg-faq__q-text { transition: none; }
}

/* Light mode — page-faq.php carries .sg-light. The row dividers + trigger text
   are built for the dark theme; re-skin them for the warm #F5F3F0 bg. Answers
   are <p> (handled by the base .sg-light p rule); the chevron icon + hover state
   stay brand-red. Scoped under .sg-light .sg-faq__* — affects this page only. */
.sg-light .sg-faq__item,
.sg-light .sg-faq__item:first-child { border-color: #E0DDD9; }
.sg-light .sg-faq__trigger { color: #231F20; }

/* ════════════════════════════════════════════════════════
   MOTORSPORTS  —  page-motorsports.php
════════════════════════════════════════════════════════ */

/* Event sponsor cards (2-up, responsive) */
.sg-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sg-sponsor-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px 26px;
  transition: border-color .15s ease;
}
.sg-sponsor-card:hover { border-color: var(--line2); }
.sponsor-logo-placeholder {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.sponsor-logo-placeholder::after {
  content: 'LOGO';
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(237,234,232,.3);
}
.sg-sponsor-card__title {
  font-family: var(--disp);
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.05;
}
.sg-sponsor-card__tag {
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}

/* Off-road racers */
.sg-racers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.sg-racer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
  font-family: var(--disp);
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}

/* Jr. drag racer callout */
.sg-jr-racer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  background: #1a1617;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 22px 26px;
}
.sg-jr-racer__label {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.sg-jr-racer__name {
  font-family: var(--disp);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}

/* Sponsors responsive */
@media (max-width: 900px) {
  .sg-sponsor-grid { grid-template-columns: 1fr; }
  .sg-racers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sg-racers { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   MOTORSPORTS (visual upgrade)  —  page-motorsports.php
   Photo hero, premium event-sponsor cards, and a two-column racer
   roster. Scoped under .sg-sponsors so the shared base styles above
   (and other pages) are unaffected.
════════════════════════════════════════════════════════ */

/* Motorsports hero photo treatment moved to the reusable .sg-pg-hero--photo
   template (search "REUSABLE PHOTO HERO"). Motorsports uses the --spotlight
   modifier. */

/* Event sponsor cards — premium: red-tint border, red top bar, lift. */
.sg-sponsors .sg-sponsor-card {
  border: 1px solid rgba(204,34,41,0.3);
  border-top: 4px solid var(--red);
  border-radius: 8px;
  padding: 30px;
  transition: border-color .2s ease, transform .3s ease;
}
.sg-sponsors .sg-sponsor-card:hover {
  border-color: var(--red);
  transform: translateY(-4px);
}
.sg-sponsors .sg-sponsor-card__title { font-size: 1.35rem; }

/* Off-road racers — two-column roster cards, left red border, lift. */
.sg-sponsors .sg-racers {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sg-sponsors .sg-racer {
  background: #1a1617;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 18px 22px;
  color: #fff;
  transition: transform .3s ease, background .15s ease, border-color .15s ease;
}
.sg-sponsors .sg-racer:hover {
  transform: translateY(-4px);
  background: var(--panel);
}

/* Keep the roster single-column on small screens — the .sg-sponsors
   scope outranks the shared .sg-racers media rule above. */
@media (max-width: 480px) {
  .sg-sponsors .sg-racers { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   PDP — single-product.php
   Classes: .sg-pdp / .sg-pdp__* / .sg-chip / .sg-badge /
            .sg-spec-table / .sg-feature-card
════════════════════════════════════════════════════════ */

.sg-pdp {
  padding: 40px 48px 80px;
  max-width: 1400px;
}

/* ── Breadcrumb (mirrors .sg-cat-breadcrumb) ── */
.sg-pdp__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(237,234,232,.45);
}
.sg-pdp__breadcrumb-link { color: var(--red); }
.sg-pdp__breadcrumb-link:hover { text-decoration: underline; }
.sg-pdp__breadcrumb-sep { color: rgba(237,234,232,.25); }
.sg-pdp__breadcrumb-current { color: var(--ink); }

/* ── Hero ── */
.sg-pdp__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 64px;
}
.sg-pdp__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #F5F3F0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 32px rgba(35,31,32,0.3);
  overflow: hidden;
}
.sg-pdp__img,
.sg-pdp__media .wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px;
}
.sg-pdp__img-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--bg3),
    var(--bg3) 6px,
    var(--panel2) 6px,
    var(--panel2) 12px
  );
  opacity: .4;
}

/* "Image coming soon" overlay — emitted in PHP only when a product has NO
   featured image (has_post_thumbnail() === false), on top of the existing
   hatched placeholder. Keys purely on the missing image, so it vanishes the
   moment a real featured image is set. Centered brand-red pill; never wider
   than its container, so it stays inside the card/PDP at any width. */
.sg-prod-card__img,
.sg-pdp__media { position: relative; }
.sg-img-coming-soon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: calc(100% - 16px);
  text-align: center;
  background: #CC2229;
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
}
.sg-img-coming-soon--pdp {
  font-size: 15px;
  padding: 9px 18px;
  letter-spacing: .1em;
}

/* ── PDP image gallery — thumbnail strip + click-to-swap ──
   The wrapper is the hero's first grid column; .sg-pdp__media keeps its 4/3
   white stage, with the strip stacked beneath. The strip lives OUTSIDE
   .sg-pdp__media on purpose so the main image keeps its float animation +
   white-stage hover glow and the thumbnails stay static. Markup is emitted
   only when a featured image plus 1+ distinct gallery image exist, so
   single-image / imageless products are visually unchanged (no strip). */
.sg-pdp__gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.sg-pdp__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-pdp__thumb-item { margin: 0; }
.sg-pdp__thumb {
  display: block;
  width: 72px;
  height: 72px;
  padding: 6px;
  background: #F5F3F0;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.sg-pdp__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sg-pdp__thumb:hover,
.sg-pdp__thumb:focus-visible {
  border-color: var(--red);
  outline: none;
}
.sg-pdp__thumb.is-active {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(204,34,41,0.25);
}
@media (max-width: 600px) {
  .sg-pdp__thumbs { gap: 10px; }
  .sg-pdp__thumb { width: 64px; height: 64px; }
}

.sg-pdp__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 6px;
}
.sg-pdp__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Chip (reusable spec chip) ── */
.sg-chip {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(204,34,41,.12);
  border: 1px solid rgba(204,34,41,.25);
  border-radius: 3px;
  padding: 5px 11px;
}

.sg-pdp__title {
  font-family: var(--disp);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
}

/* ── Feature badges ── */
.sg-pdp__badges { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.sg-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 6px;
}
.sg-badge__title {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.sg-badge__desc {
  font-family: var(--body);
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(237,234,232,.6);
}

/* ── Action buttons ── */
.sg-pdp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.sg-pdp__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sg-pdp__btn--primary { background: var(--red); color: #fff; }
.sg-pdp__btn--primary:hover { background: var(--red-d); }
.sg-pdp__btn--secondary { background: transparent; color: var(--ink); border-color: var(--line2); }
.sg-pdp__btn--secondary:hover { border-color: var(--red); color: var(--red); }

/* ── PDP DETAIL (right-column spec summary + application + feature pills) ──
   Fills the void below the action buttons so the info column balances the tire
   stage on the left. Divider-separated label/value rows, then compact pills. */
.sg-pdp__detail {
  width: 100%;
  margin-top: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sg-pdp__detail-list {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.sg-pdp__detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.sg-pdp__detail-row:first-child { padding-top: 0; }
.sg-pdp__detail-row:last-child { border-bottom: none; padding-bottom: 0; }
.sg-pdp__detail-label {
  margin: 0;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(237,234,232,.45);
  white-space: nowrap;
}
.sg-pdp__detail-value {
  margin: 0;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
/* Compact pills — distinct from the big .sg-feature-card band further down. */
.sg-pdp__detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-pdp__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 20px;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
}
.sg-pdp__pill-check {
  color: var(--red);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1;
}

/* ── Spec table ── */
/* Overview — the product's post_content (the_content), shown between hero and
   specs. Comfortable reading measure; matches the dark PDP body rhythm. */
.sg-pdp__overview { margin-bottom: 64px; }
.sg-pdp__overview-body {
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(237,234,232,.82);
  max-width: 70ch;
}
.sg-pdp__overview-body > :first-child { margin-top: 0; }
.sg-pdp__overview-body > :last-child { margin-bottom: 0; }
.sg-pdp__overview-body p { margin: 0 0 1em; }

.sg-pdp__specs { margin-bottom: 64px; }
.sg-pdp__h2 {
  font-family: var(--disp);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 22px;
}
.sg-pdp__table-wrap {
  overflow-x: auto;             /* horizontal scroll only — wide multi-column tables.
                                   No max-height / vertical scroll box: spec tables
                                   render at full height (Task 5). */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sg-spec-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-family: var(--body);
  font-size: .9rem;
}
.sg-spec-table thead th {
  text-align: left;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(237,234,232,.55);
  background: var(--panel);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  /* box-shadow draws the header divider (a border-bottom can drop out under
     border-collapse). The header is NOT vertically sticky: Task 5 removed the
     capped-height scroll box, and keeping overflow-x:auto on the wrap (needed for
     horizontal scroll + the sticky first column) would trap a sticky <thead>
     inside the wrap anyway. The first column stays horizontally sticky below. */
  box-shadow: inset 0 -1px 0 var(--line);
}
.sg-spec-table tbody td {
  white-space: nowrap;
  padding: 13px 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.sg-spec-table tbody tr:last-child td { border-bottom: none; }
.sg-spec-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.sg-spec-table tbody td:first-child { font-weight: 700; }
/* Size-only table — a tidy narrow list instead of one column stretched to the
   8-column min-width. (Dynamic-column tables drop the min-width via this too.) */
.sg-spec-table--single { min-width: 0; }
.sg-pdp__table-wrap--single { max-width: 340px; }

/* Spec-table scroll host — wraps .sg-pdp__table-wrap. --single keeps the host as
   narrow as the size-only box. (Task 5 removed the bottom "more below" fade and
   its capped-height scroll box — tables render at full height, so the fade that
   washed out the final data row is gone.) */
.sg-pdp__table-scroll { position: relative; }
.sg-pdp__table-scroll--single { max-width: 340px; }

/* ── Task 4: multi-table spec rendering — captions, section dividers, footnote
   markers, footnotes, and a sticky first column for the now-exercised horizontal
   scroll. Single-column "Size"-only tables keep their existing narrow treatment
   (all new rules are scoped away from .sg-spec-table--single). ── */

/* Caption above each table (multi-table products only; single-table caption ""). */
.sg-pdp__caption {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink2);
  margin: 28px 0 12px;
}
.sg-pdp__specs > .sg-pdp__caption:first-of-type { margin-top: 6px; }
/* Separate consecutive tables that have no caption between them. */
.sg-pdp__table-scroll + .sg-pdp__table-scroll { margin-top: 30px; }

/* Full-width section divider row (BLACK / NON-MARKING / Road Compound …). Set
   apart from data rows as in the source images. Higher specificity than the
   zebra rule so even-positioned dividers (e.g. NON-MARKING) keep the panel fill. */
.sg-spec-table tbody tr.sg-spec-table__section td {
  background: var(--panel2);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 800;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  padding: 9px 16px;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}

/* Footnote marker appended to a row's last cell. */
.sg-spec-table__note {
  color: var(--red);
  font-weight: 700;
  margin-left: 2px;
}

/* Footnote lines below the last table. */
.sg-pdp__footnote {
  font-family: var(--body);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
}
.sg-pdp__footnote + .sg-pdp__footnote { margin-top: 4px; }

/* Sticky first column (Tire Size / Size) so it stays visible while wide
   multi-column tables scroll sideways. Excludes single-column tables (nothing to
   scroll) and divider rows. The <thead> is NOT vertically sticky (Task 5 removed
   the capped-height scroll box), so this pins on the horizontal axis only. Pinned
   cells get an opaque fill so scrolled columns don't bleed through, plus a right
   divider. */
.sg-spec-table:not(.sg-spec-table--single) thead th:first-child,
.sg-spec-table:not(.sg-spec-table--single) tbody tr:not(.sg-spec-table__section) td:first-child {
  position: sticky;
  left: 0;
}
.sg-spec-table:not(.sg-spec-table--single) tbody tr:not(.sg-spec-table__section) td:first-child {
  z-index: 1;
  background: var(--bg);
  box-shadow: inset -1px 0 0 var(--line);
}
/* Keep the zebra tint on the pinned column (composite over the opaque base). */
.sg-spec-table:not(.sg-spec-table--single) tbody tr:not(.sg-spec-table__section):nth-child(even) td:first-child {
  background: linear-gradient(rgba(255,255,255,.015), rgba(255,255,255,.015)), var(--bg);
}
.sg-spec-table:not(.sg-spec-table--single) thead th:first-child {
  z-index: 4; /* pinned column's header cell — above the header cells that scroll under it. (thead is no longer vertically sticky, so there is no separate sticky header layer to stack against; 4 is higher than needed but harmless.) */
  box-shadow: inset 0 -1px 0 var(--line), inset -1px 0 0 var(--line);
}

.sg-pdp__specs-empty {
  margin: 0;
  padding: 28px;
  font-family: var(--body);
  font-size: .95rem;
  color: rgba(237,234,232,.5);
  background: var(--card-bg);
  border: 1px dashed var(--line2);
  border-radius: 8px;
}

/* ── Features band ── */
.sg-pdp__features { margin-bottom: 64px; }
.sg-pdp__features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sg-feature-card {
  padding: 28px 26px;
  background: #1a1617;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 8px;
}
.sg-feature-card__title {
  font-family: var(--disp);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.sg-feature-card__body {
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(237,234,232,.68);
}

/* ── Quote CTA band (mirrors .sg-quote: bg image + overlay + display head) ── */
.sg-pdp__cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sg-pdp__cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.sg-pdp__cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(13,11,11,.93) 0%, rgba(13,11,11,.78) 50%, rgba(13,11,11,.6) 100%);
  z-index: 1;
}
.sg-pdp__cta-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 48px 44px;
}
.sg-pdp__cta-head {
  font-family: var(--disp);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: #fff;
  margin: 0;
}
.sg-pdp__cta-head em { font-style: normal; color: var(--red); }

/* ── PDP responsive ── */
@media (max-width: 1024px) {
  .sg-pdp { padding: 32px 32px 60px; }
  .sg-pdp__hero { grid-template-columns: 1fr; gap: 28px; }
  .sg-pdp__features-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sg-pdp { padding: 24px 20px 48px; }
  .sg-pdp__actions { flex-direction: column; align-items: stretch; }
  .sg-pdp__btn { justify-content: center; }
  .sg-pdp__cta-wrap { padding: 36px 24px; }
}

/* ============================================================
   QUOTE CART  (/quote/ — page-quote.php)
   Client-side tire list + quote request form. Reuses the
   interior-page base (.sg-pg) and the .sg-qform form styles.
   ============================================================ */

/* Constrain the cart column for readability; the hero keeps .sg-pg width. */
.sg-quote-cart__body { max-width: 860px; }

/* The [hidden] attribute must win over the display:flex panels below — the
   empty/success states default to hidden and are revealed by JS, and an
   author `display` rule otherwise beats the UA `[hidden] { display:none }`. */
.sg-quote-cart [hidden] { display: none !important; }

.sg-quote-cart__noscript {
  background: rgba(204,34,41,0.12);
  border: 1px solid rgba(204,34,41,0.3);
  color: #ff6b6b;
  padding: 16px 18px;
  border-radius: 6px;
  font-size: .95rem;
}

/* ── Empty + success states (shared centered panel) ── */
.sg-quote-cart__empty,
.sg-quote-cart__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: #1a1617;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 64px 40px;
}
.sg-quote-cart__success { border-top: 3px solid var(--red); }

.sg-quote-cart__empty-icon,
.sg-quote-cart__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--dim);
}
.sg-quote-cart__success-icon {
  color: #4caf50;
  border-color: rgba(76,175,80,0.4);
  background: rgba(76,175,80,0.1);
}

.sg-quote-cart__empty-msg,
.sg-quote-cart__success-msg {
  font-family: var(--disp);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
}
.sg-quote-cart__empty-sub,
.sg-quote-cart__success-sub {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(237,234,232,.6);
  max-width: 440px;
  margin: 0 0 14px;
}

/* ── Populated: items header (title + Clear List) ── */
.sg-quote-cart__items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.sg-quote-cart__items-title {
  font-family: var(--disp);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  margin: 0;
}
.sg-quote-cart__clear {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--ink2);
  border-radius: 3px;
  padding: 8px 16px;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sg-quote-cart__clear:hover {
  border-color: var(--red);
  color: #fff;
  background: rgba(204,34,41,0.12);
}

/* ── Items list (e-commerce-style line rows) ── */
.sg-quote-cart__items {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sg-quote-cart__item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  transition: border-color .15s ease;
}
.sg-quote-cart__item:hover { border-color: var(--line2); }

/* Thumbnail — square stage, featured image contained; doubles as a PDP link.
   Imageless tires reuse the shared .sg-img-coming-soon badge (scaled down)
   over the same striped placeholder used on the product cards. */
.sg-quote-cart__item-thumb {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.sg-quote-cart__item-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}
.sg-quote-cart__item-thumb-ph {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--bg3),
    var(--bg3) 4px,
    var(--panel2) 4px,
    var(--panel2) 8px
  );
  opacity: .4;
}
/* Shrink the shared Coming Soon badge to fit the small cart thumbnail. */
.sg-quote-cart__item-thumb .sg-img-coming-soon {
  font-size: 8px;
  padding: 4px 7px;
  letter-spacing: .04em;
  border-radius: 2px;
}

/* Info — model name + spec subline. */
.sg-quote-cart__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-quote-cart__item-name {
  font-family: var(--disp);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere; /* a long unbroken model name wraps instead of overflowing the row on narrow phones */
}
a.sg-quote-cart__item-name:hover { color: var(--red); }
.sg-quote-cart__item-spec {
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink2);
}

.sg-quote-cart__item-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--line2);
  border-radius: 50%;
  color: var(--ink2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sg-quote-cart__item-remove:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

/* ── Quote form (extends .sg-qform) ── */
.sg-quote-cart__feedback { margin-top: 4px; }
.sg-quote-cart__submit.is-loading { opacity: .7; cursor: progress; }

/* ── "Add to My List" confirmation state (PDP button) ── */
.sg-add-to-list.is-added { border-color: #4caf50; color: #4caf50; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .sg-quote-cart__empty,
  .sg-quote-cart__success { padding: 48px 24px; }
  .sg-quote-cart__items-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Rows stay single-line [thumb][info][remove]; just tighten the scale so the
     thumbnail, name, and remove button all stay legible/reachable on phones. */
  .sg-quote-cart__item { gap: 12px; padding: 12px; }
  .sg-quote-cart__item-thumb { width: 68px; height: 68px; }
  .sg-quote-cart__item-name { font-size: 1.1rem; }
  .sg-quote-cart__item-spec { font-size: .78rem; }
}

/* ════════════════════════════════════════════════════════
   CATALOG GRID  —  FacetWP pagination + empty state (taxonomy-product_cat.php)
   The filter bar (.sg-facets: tire size / equipment / construction / compound /
   tread) was removed — Phase 2 feature, to be rebuilt later. Only the grid's
   pager + zero-results styles remain here; the FacetWP config (functions.php)
   and every other page are unchanged.
   ════════════════════════════════════════════════════════ */

/* ── Pagination ── */
.sg-facets-pager { margin-top: 4px; }
.sg-facets-pager .facetwp-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sg-facets-pager .facetwp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 3px;
  font-family: var(--body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sg-facets-pager .facetwp-page:hover { color: #fff; background: var(--panel2); }
.sg-facets-pager .facetwp-page.active {
  background: var(--red);            /* #CC2229 active accent */
  border-color: var(--red);
  color: #fff;
  cursor: default;
}

/* When the category has zero products, the empty state spans the full grid width. */
.sg-cat-grid.facetwp-template .sg-cat-empty { grid-column: 1 / -1; }

/* ════════════════════════════════════════════════════════
   PRODUCTS PAGE  —  page-products.php
   The /products/ index reuses the homepage "Shop by Industry" grid
   (.sg-apps / .sg-card, full-width band) and the dark quote band
   (.sg-quote) directly — both defined far above. The only addition is
   a tight, single-column variant of the quote band used as the closing
   CTA strip (no 100vh, no two-column form).
   ════════════════════════════════════════════════════════ */

.sg-quote--strip { min-height: auto; }
.sg-quote--strip .sg-quote__wrap {
  grid-template-columns: 1fr;
  max-width: 820px;
  padding: 96px 40px;          /* tight — well under 120px top/bottom */
  gap: 0;
  text-align: center;
  justify-items: center;
}
.sg-quote--strip .sg-quote__head { align-items: center; }
.sg-quote--strip .sg-quote__head h2 {
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 14px;
}
.sg-quote--strip .sg-quote__head p {
  max-width: 560px;
  margin: 0 0 28px;
}
@media (max-width: 600px) {
  .sg-quote--strip .sg-quote__wrap { padding: 64px 20px; }
}

/* ════════════════════════════════════════════════════════
   ANIMATIONS
   Reveal stagger, card/hover motion, and ambient loops. The
   [data-reveal] base + reduced-motion handling live in the
   SCROLL REVEAL section near the top; the always-on loops
   (float, pulse) are disabled under prefers-reduced-motion
   at the foot of this block.
   ════════════════════════════════════════════════════════ */

/* Reveal stagger delays — applied to [data-reveal] children of a
   [data-reveal-group] by main.js (assignGroupDelays), or set by hand. */
[data-reveal][data-delay="100"] { transition-delay: 0.1s; }
[data-reveal][data-delay="200"] { transition-delay: 0.2s; }
[data-reveal][data-delay="300"] { transition-delay: 0.3s; }
[data-reveal][data-delay="400"] { transition-delay: 0.4s; }
[data-reveal][data-delay="500"] { transition-delay: 0.5s; }

/* Product card — image zoom on hover (the lift + red shadow live in the
   .sg-prod-card rules above; the image container already clips overflow). */
.sg-prod-card__img img,
.sg-prod-card__img .wp-post-image {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sg-prod-card:hover .sg-prod-card__img img,
.sg-prod-card:hover .sg-prod-card__img .wp-post-image {
  transform: scale(1.04);
}

/* PDP tire image — more pronounced infinite float with a slight wobble. */
@keyframes sg-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-14px) rotate(-1deg); }
  75% { transform: translateY(-6px) rotate(0.5deg); }
}
.sg-pdp__media img {
  animation: sg-float 5s ease-in-out infinite;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.4));
  transition: filter .3s ease;
}
/* Hover the white stage → red-tinted drop shadow glow. */
.sg-pdp__media:hover img {
  filter: drop-shadow(0 24px 32px rgba(204,34,41,0.2));
}

/* Category hero — faint CSS-only grain layered over the photo/gradient. */
.sg-cat-header {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Primary CTA — subtle red pulse. (.sg-btn--primary is reserved for any
   future generic primary button; the live primary CTAs are the PDP and
   interior-page red buttons.) */
@keyframes sg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,34,41,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(204,34,41,0); }
}
.sg-btn--primary,
.sg-pdp__btn--primary,
.sg-pg-cta-btn {
  animation: sg-pulse 3s ease-in-out infinite;
}

/* Disable the always-on loops for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .sg-pdp__media img,
  .sg-btn--primary,
  .sg-pdp__btn--primary,
  .sg-pg-cta-btn {
    animation: none;
  }
  .sg-prod-card__img img,
  .sg-prod-card__img .wp-post-image {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════
   LIGHT MODE PAGES  —  .sg-light
   Applied to <main> on page-about.php and page-motorsports.php.
   Flips the interior content area to a warm light palette. Scoped to
   .sg-light and appended LAST so it wins source-order ties against the
   dark .sg-about / .sg-sponsors rules above. The header/topbar/sidebar/
   footer chrome lives outside <main>, so it stays dark and untouched.
════════════════════════════════════════════════════════ */

.sg-light {
  background: #F5F3F0;
  color: #231F20;
}

/* All headings inside light pages */
.sg-light h1,
.sg-light h2,
.sg-light h3,
.sg-light h4 {
  color: #231F20;
}

.sg-light p,
.sg-light li,
.sg-light address {
  color: #3D3535;
}

/* Hero — keep dark for contrast; drop the photo + gradient pseudo-elements. */
.sg-light .sg-pg-hero {
  background: #231F20;
  color: #ffffff;
}
.sg-light .sg-pg-hero h1,
.sg-light .sg-pg-hero p {
  color: #ffffff;
}
.sg-light .sg-pg-hero::before {
  display: none;
}
.sg-light .sg-pg-hero::after {
  display: none;
}

/* TEXT-ONLY (no-photo) light heroes — Privacy, Careers, FAQ. The photo heroes
   get their frame from .sg-pg-hero--photo (padding 44px + radius); a bare
   .sg-pg-hero would render the dark band flush to the text on three sides. Give
   it the same comfortable frame + a red left accent (matching the .sg-pg-ctaband)
   so it reads as an intentional dark title card. Each selector is page-scoped
   (.sg-privacy / .sg-careers / .sg-faq) — affects only those pages, no bleed. */
.sg-light.sg-privacy .sg-pg-hero,
.sg-light.sg-careers .sg-pg-hero,
.sg-light.sg-faq .sg-pg-hero {
  padding: 40px 44px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 8px;
}

/* ════════════════════════════════════════════════════════
   REUSABLE PHOTO HERO  —  .sg-pg-hero--photo  (+ per-page modifiers)
   One shared frame + type for the About & Motorsports title boxes (clear
   siblings). Per-page knobs are CSS custom properties set by the modifier
   class, so each photo gets a flattering crop, gradient direction, and title
   anchor without compromising the other:
     --spotlight (Motorsports): strong full-bleed photo, bottom-anchored
                  gradient, title low-left — keeps the dragster / flames /
                  SUPERGRIP banner clear at the top.
     --reveal (About): the photo contained on the right with a slanted-left
                  gradient and a centred title — flatters the mud-tyre shot.
   Scoped under .sg-light (both consumers are light pages) and placed AFTER the
   .sg-light .sg-pg-hero base so it out-ranks the base "drop the photo" rules. */
.sg-light .sg-pg-hero--photo {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-h, 306px);   /* was 360 — interior hero shortened ~15% (cont. 14) */
  display: flex;
  flex-direction: column;
  justify-content: var(--hero-anchor, center);
  align-items: flex-start;
  padding: 32px;                       /* was 44 — reclaims height on the content-bound About hero */
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #231F20;
}
.sg-light .sg-pg-hero--photo::before {   /* photo layer */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background-image: var(--hero-img, none);
  background-size: var(--hero-size, cover);
  background-position: var(--hero-pos, center);
  background-repeat: no-repeat;
  transform: var(--hero-flip, none);
}
.sg-light .sg-pg-hero--photo::after {    /* gradient layer (direction per-page) */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: var(--hero-grad, linear-gradient(to top, rgba(15,12,13,.9), rgba(15,12,13,0) 70%));
}
.sg-light .sg-pg-hero--photo > * { position: relative; z-index: 2; max-width: var(--hero-textw, 640px); }
.sg-light .sg-pg-hero--photo .sg-pg-hero__title,
.sg-light .sg-pg-hero--photo .sg-pg-hero__sub,
.sg-light .sg-pg-hero--photo .sg-pg-prose { color: #ffffff; }
.sg-light .sg-pg-hero--photo .sg-pg-hero__title,
.sg-light .sg-pg-hero--photo .sg-pg-hero__sub,
.sg-light .sg-pg-hero--photo .sg-pg-prose,
.sg-light .sg-pg-hero--photo .sg-eyebrow { text-shadow: 0 2px 6px rgba(0,0,0,0.6); }

/* Motorsports — SPOTLIGHT: let the strong drag photo carry it. Full-bleed cover,
   biased up so the SUPERGRIP banner + dragster + flames stay in frame; a
   bottom-anchored gradient darkens only the lower strip where the title sits. */
.sg-light .sg-pg-hero--spotlight {
  --hero-h: 272px;         /* was 320 — interior hero shortened ~15% (cont. 14) */
  /* --hero-anchor defaults to center — the L→R gradient seats the title on the dark left */
  --hero-size: 122%;       /* zoom in to FEATURE the dragster, not the wide pit-line scene */
  --hero-pos: 30% 56%;     /* low x pushes the centre-left flames + engine rightward into the clear zone; drops the top SUPERGRIP banner */
  --hero-textw: 470px;     /* keep the eyebrow/title/sub within the dark left */
  /* Refined left→right fade (matched to the flat brand-black sidebar's smoothness):
     a near-opaque brand-dark plateau backs ALL the title text through ~46%, then a
     gentle multi-stop ease to fully transparent by 90% so the dragster + flames read
     vividly on the right — no hard solid edge or banding, text stays AA-legible.
     Overlay brightened ~10% (alphas ×0.90) cont. 14 — desktop has huge AA headroom. */
  --hero-grad: linear-gradient(to right,
      rgba(35,31,32,0.87) 0%,
      rgba(35,31,32,0.85) 32%,
      rgba(35,31,32,0.77) 46%,
      rgba(35,31,32,0.47) 62%,
      rgba(35,31,32,0.18) 76%,
      rgba(35,31,32,0) 90%);
}
/* About — REVEAL: the mirrored mud-tyre shot filling the frame (cover, no
   letterbox), with a refined left→right fade so the tyre emerges on the right and
   blends with no hard seam — matched to the flat brand-black sidebar's smoothness.
   A near-opaque brand-dark plateau backs the title through ~56%, then a gentle
   multi-stop ease carries it to transparent by 100% (no solid wall / hard edge /
   banding); the text side stays dark enough to keep the headline AA-legible. */
.sg-light .sg-pg-hero--reveal {
  --hero-size: cover;
  --hero-pos: 70% center;    /* (post-flip) seats the tyre's tread on the right */
  --hero-flip: scaleX(-1);
  /* Overlay brightened ~10% (alphas ×0.90) cont. 14 — About has large AA headroom. */
  --hero-grad: linear-gradient(to right,
      rgba(35,31,32,0.87) 0%,
      rgba(35,31,32,0.86) 38%,
      rgba(35,31,32,0.79) 56%,
      rgba(35,31,32,0.54) 72%,
      rgba(35,31,32,0.25) 86%,
      rgba(35,31,32,0) 100%);
}

/* Mobile: near-square boxes — cover fills cleanly without letterbox bars. */
@media (max-width: 600px) {
  .sg-light .sg-pg-hero--photo { --hero-size: cover; }
  .sg-light .sg-pg-hero--spotlight {
    --hero-h: 256px;       /* was 300 — interior hero shortened ~15% (cont. 14) */
    --hero-pos: 60% 58%;
    /* Narrow box: the subhead runs to ~83% width over the bright dragster/smoke,
       so hold a strong dark plateau through ~86% (legibility wins on mobile), then
       a short gentle fade lets only the far-right edge of the photo peek.
       The mobile subhead is the AA binding case (it runs ~7-93% over the bright
       dragster). A canvas contrast audit showed a naive ~10% brighten fails it, so
       this instead brightens the plateau ~10% AND HOLDS it through 90% (past the
       subhead) before the fade — keeping the subhead at ~5.1:1 (cont. 14). */
    --hero-grad: linear-gradient(to right,
        rgba(35,31,32,0.87) 0%,
        rgba(35,31,32,0.83) 62%,
        rgba(35,31,32,0.77) 90%,
        rgba(35,31,32,0.52) 95%,
        rgba(35,31,32,0) 100%);
  }
  .sg-light .sg-pg-hero--reveal {
    --hero-pos: center;
    /* refined diagonal ease; stays darker overall to hold legibility on the small
       box where text overlaps more of the photo. Brightened ~10% (×0.90) cont. 14. */
    --hero-grad: linear-gradient(115deg,
        rgba(35,31,32,0.86) 0%,
        rgba(35,31,32,0.81) 46%,
        rgba(35,31,32,0.63) 72%,
        rgba(35,31,32,0.41) 100%);
  }
}

/* Section bands — warm gray */
.sg-light .sg-pg-band {
  background: #EDEBE8;
  color: #231F20;
}
.sg-light .sg-pg-band::before,
.sg-light .sg-pg-band::after {
  display: none;
}
.sg-light .sg-pg-band h2 {
  color: #231F20;
}
.sg-light .sg-pg-band p {
  color: #3D3535;
}

/* Cards — white on warm bg. Re-assert the red top accent AFTER the border
   shorthand (which would otherwise reset it), matching the dark why-choose
   cards and the light sponsor cards so all cards keep the red bar. */
.sg-light .sg-pg-card {
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  border-top: 3px solid #CC2229;
  box-shadow: 0 2px 12px rgba(35,31,32,0.06);
  color: #231F20;
}
.sg-light .sg-pg-card h3 {
  color: #231F20;
}
.sg-light .sg-pg-card p {
  color: #3D3535;
}
/* Keep red number accent */
.sg-light .sg-pg-card__num {
  color: #CC2229;
}

/* CTA band — keep dark for contrast */
.sg-light .sg-pg-ctaband {
  background: #231F20;
  color: #ffffff;
}
.sg-light .sg-pg-ctaband::before,
.sg-light .sg-pg-ctaband::after {
  display: none;
}
.sg-light .sg-pg-ctaband h2,
.sg-light .sg-pg-ctaband p {
  color: #ffffff;
}

/* Eyebrow labels */
.sg-light .sg-eyebrow {
  color: #CC2229;
}

/* Links (excluding the red CTA / homepage buttons) */
.sg-light a:not(.sg-pg-cta-btn):not(.sg-btn) {
  color: #CC2229;
}

/* ── SPONSORS-specific light mode ── */

/* Event sponsor cards */
.sg-light .sg-sponsor-card {
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  border-top: 4px solid #CC2229;
  box-shadow: 0 2px 12px rgba(35,31,32,0.06);
  color: #231F20;
}
.sg-light .sg-sponsor-card h3 {
  color: #231F20;
}
.sg-light .sg-sponsor-card:hover {
  border-color: #CC2229;
  box-shadow: 0 8px 24px rgba(204,34,41,0.12);
}

/* Filled event-sponsor logo tiles. The four league/event logos are
   transparent-background PNGs with dark/colored artwork, so each sits on a clean
   white chip (overrides the dark empty-state placeholder). object-fit: contain
   over the trimmed artwork keeps the mixed aspect ratios (a square-ish badge vs.
   a wide wordmark) reading as a cohesive, uniformly-sized row. */
.sg-light .sponsor-logo-placeholder {
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  padding: 8px;
}
.sg-light .sponsor-logo-placeholder::after { display: none; } /* drop the "LOGO" stand-in */
.sg-sponsor-card .sponsor-logo-placeholder img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Racer roster — the live markup uses .sg-racer (there is no .sg-racer-card),
   so the light rules target .sg-racer. The :hover also re-asserts a white bg,
   otherwise the dark-mode hover (background: var(--panel)) would flash dark. */
.sg-light .sg-racers {
  background: transparent;
}
.sg-light .sg-racer {
  background: #FFFFFF;
  border-left: 3px solid #CC2229;
  border-top: 1px solid #E0DDD9;
  border-right: 1px solid #E0DDD9;
  border-bottom: 1px solid #E0DDD9;
  box-shadow: 0 2px 8px rgba(35,31,32,0.04);
  color: #231F20;
}
.sg-light .sg-racer:hover {
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(204,34,41,0.1);
  transform: translateY(-2px);
}

/* Jr racer section — the __name <span> also carries its own dark-mode colour. */
.sg-light .sg-jr-racer {
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  color: #231F20;
}
.sg-light .sg-jr-racer__name {
  color: #231F20;
}

/* Small uppercase accent labels — keep them brand-red explicitly under the
   light scope (rather than relying on the dark scope's color leaking through),
   so they stay correct if these cards' backgrounds ever change. */
.sg-light .sg-jr-racer__label,
.sg-light .sg-sponsor-card__tag {
  color: #CC2229;
}

/* ── Contact page (page-contact.php) light mode ──
   .sg-contact carries its own dark-scoped colors (var(--ink) text, var(--line)
   borders) and embeds the dark .sg-qform Fluent Form. Adding `sg-light` to its
   <main> flips the base via the rules above; these overrides re-skin the parts
   the base .sg-light rules don't reach (spans, borders, the form) for #F5F3F0.
   Info-column selectors are scoped under .sg-contact-info so they out-rank the
   generic `.sg-light a { color:#CC2229 }` link rule by source order, no
   !important; the form fields DO need !important to beat the dark form's own
   !important declarations (see ~lines 1580–1608). */
.sg-light .sg-contact-hero,
.sg-light .sg-contact-item + .sg-contact-item { border-color: #E0DDD9; }
.sg-light .sg-contact-hero__sub { color: rgba(35,31,32,.62); }
.sg-light .sg-contact-info .sg-contact-item__label { color: #6a6763; } /* ~5:1 on #F5F3F0 — clears WCAG AA */
.sg-light .sg-contact-info .sg-contact-item__value,
.sg-light .sg-contact-info a.sg-contact-item__value { color: #231F20; }
.sg-light .sg-contact-info a.sg-contact-item__value--link:hover { color: var(--red); }
.sg-light .sg-contact__map { border-color: #E0DDD9; }

/* Buyer-redirect callout above the contact form — light grey card + red
   accent — diverts order/pricing intent to /products/. */
.sg-contact-redirect {
  margin: 0 0 24px;
  padding: 12px 16px;
  background: #EDEBE8;
  border-left: 3px solid var(--red);
  border-radius: 4px;
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.5;
  color: #3D3535;
}
.sg-contact-redirect a { font-weight: 700; color: var(--red); white-space: nowrap; }
.sg-contact-redirect a:hover { color: var(--red-d); }

/* Embedded Fluent Form → light card + light fields, dark text. */
.sg-light .sg-qform {
  background: #FFFFFF;
  border-color: #E0DDD9;
}
.sg-light .sg-qform .ff-el-form-label label,
.sg-light .sg-qform .ff-el-group label {
  color: #3D3535 !important;
}
.sg-light .sg-qform .fluentform input[type="text"],
.sg-light .sg-qform .fluentform input[type="email"],
.sg-light .sg-qform .fluentform input[type="tel"],
.sg-light .sg-qform .fluentform input[type="url"],
.sg-light .sg-qform .fluentform select,
.sg-light .sg-qform .fluentform textarea {
  background: #FFFFFF !important;
  border-color: #D8D4CF !important;
  color: #231F20 !important;
}
.sg-light .sg-qform .fluentform input::placeholder,
.sg-light .sg-qform .fluentform textarea::placeholder { color: rgba(35,31,32,.4); }
.sg-light .sg-qform .fluentform input:focus,
.sg-light .sg-qform .fluentform select:focus,
.sg-light .sg-qform .fluentform textarea:focus {
  background: #FFFFFF !important;
  border-color: var(--red) !important;
}
.sg-light .sg-qform .fluentform select { background-color: #FFFFFF; }
.sg-light .sg-qform .fluentform select option { background: #FFFFFF; color: #231F20; }

/* ── About page (page-about.php) rebuild ──
   Reuses the .sg-pg-* interior system + the homepage .sg-quote__stats band.
   Only two things have no light-page precedent and need new rules: the
   sentence-case hero H1 (the shared hero title force-uppercases) and the
   stat band's dark-bg label/divider colors. */

/* S1 — the hero H1 is a full sentence, not a short title: undo the shared
   .sg-pg-hero__title uppercase and relax its single-line line-height. */
.sg-about .sg-pg-hero__title { text-transform: none; line-height: 1.06; }

/* S6 — reuse .sg-quote__stats on #F5F3F0. Numbers already use var(--red);
   labels + row dividers are built for a dark bg, so re-skin them here.
   Drop the band's own bottom margin (the .sg-pg-section wrapper spaces it). */
.sg-about .sg-quote__stats { margin-bottom: 0; }
.sg-light .sg-quote__stat { border-bottom-color: rgba(0,0,0,.1); }
.sg-light .sg-quote__stat-label { color: #3D3535; }

/* S7 — the closing ctaband carries a heading + body (base ctaband is one
   line + button). The copy stacks; text stays white via the existing
   .sg-light .sg-pg-ctaband h2,p override. */
.sg-pg-ctaband__copy { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.sg-pg-ctaband__sub { font-family: var(--body); font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════════════════════
   HOMEPAGE  —  front-page.php
   The homepage reuses the marketing section classes (.sg-hero, .sg-formbar,
   .sg-apps/.sg-card, .sg-why, .sg-quote) that already live above, rendered
   inside the standard chrome (.sg-main, with the sidebar) rather than as a
   full-bleed landing page. Those classes already constrain their inner
   wrappers (max-width + auto margins) and the hero is already 80vh, so no
   width/breakout overrides are required. Scope homepage-only tweaks under
   body.home so the standalone "Landing Page" template (page-landing.php) is
   unaffected.
   ════════════════════════════════════════════════════════ */

/* The homepage industry cards share the linked-card hover treatment defined in
   the card component section above (.sg-apps a.sg-card:hover — lift, photo zoom,
   overlay darken, red title), so the homepage and /products/ grids stay in sync. */

/* ════════════════════════════════════════════════════════
   INDUSTRY GRID — surviving bits of the retired Find-My-Tire selector
   The 2-step FMT selector (JS: initFindMyTire) was retired; only these two
   rules remain, now used by the unified industry-card grid (sg_render_industry_grid):
   the red "N equipment types" hint and the industry card cursor.
   ════════════════════════════════════════════════════════ */
.sg-fmt__hint {
  font-family: var(--body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
}
.sg-fmt__industry { cursor: pointer; }

/* ════════════════════════════════════════════════════════
   MOTORSPORTS body — LIGHT mode (Pass 2, supersedes the dark .sg-moto body)
   The page is .sg-light (like About / Contact); these sections reuse that
   white-card-on-#F5F3F0 language (border #E0DDD9, soft shadow, red accents;
   heads via .sg-light .sg-pg-section__head, red .sg-eyebrow, #3D3535 prose).
   Scoped under .sg-sponsors so the shared interior base is untouched.
════════════════════════════════════════════════════════ */

/* ── Logo cards: Sanctioning row (NASCAR + NHRA). Logos are dark/colored
   artwork → they read cleanly on the white cards. ── */
.sg-sponsors .moto-logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 26px;
}
.sg-sponsors .moto-logo-row .moto-logocard { flex: 0 1 300px; }
.sg-sponsors .moto-logocard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(35,31,32,.06);
  padding: 26px 28px;
  min-height: 150px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .3s ease;
}
.sg-sponsors .moto-logocard:hover {
  border-color: #CC2229;
  box-shadow: 0 8px 24px rgba(204,34,41,.12);
  transform: translateY(-3px);
}
.sg-sponsors .moto-logocard__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 84px;
}
.sg-sponsors .moto-logocard__plate img {
  max-height: 74px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ── Thunder Valley title-sponsor feature (light band + real dragster photo) ── */
.sg-sponsors .moto-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  border-left: 4px solid #CC2229;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(35,31,32,.07);
  margin-top: 26px;
}
.sg-sponsors .moto-feature__media { position: relative; min-height: 300px; background: #231F20; }
.sg-sponsors .moto-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sg-sponsors .moto-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 44px;
}
.sg-sponsors .moto-feature__plate { display: inline-flex; margin-bottom: 18px; }
.sg-sponsors .moto-feature__plate img { height: 80px; width: auto; object-fit: contain; display: block; }
.sg-sponsors .moto-feature__body .sg-pg-section__head { font-size: clamp(1.45rem, 2.5vw, 2rem); margin-bottom: 12px; }

/* ── Motorsports body responsive ── */
@media (max-width: 1024px) {
  .sg-sponsors .moto-feature { grid-template-columns: 1fr; }
  .sg-sponsors .moto-feature__media { min-height: 240px; }
}
@media (max-width: 460px) {
  .sg-sponsors .moto-logo-row .moto-logocard { flex-basis: 100%; }
}


/* ════════════════════════════════════════════════════════
   ABOUT — VISUAL-FIRST SECTIONS  (page-about.php body)
   The /about/ body: a Local→Global geo element, a scannable 3-up of
   icon-led value blocks, and a prominent animated count-up stat band.
   Scoped as BEM elements of the .sg-about page block; type / layout /
   icons / motion only — no photography. The count-up is driven by
   initCountUp() in main.js (keys on [data-countup]).
════════════════════════════════════════════════════════ */

/* Count-up numbers never reflow mid-animation (tabular figures). */
.sg-about [data-countup] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ── Local → Global geo element ── */
.sg-about__geo {
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(35,31,32,0.06);
  padding: 40px 44px 36px;
}
.sg-about__geo-track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}
.sg-about__geo-node { display: flex; flex-direction: column; gap: 4px; }
.sg-about__geo-node--global { text-align: right; align-items: flex-end; }
.sg-about__geo-place {
  font-family: var(--disp);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #231F20;
}
.sg-about__geo-meta {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6B6360;
}
.sg-about__geo-arc { width: 100%; height: 72px; display: block; }
/* Gentle dashed "flow" from Piney Flats → global. Motion-light; off under
   prefers-reduced-motion (see the guard at the end of this section). */
.sg-about__geo-dash { animation: sg-about-geo-flow 1.4s linear infinite; }
@keyframes sg-about-geo-flow { to { stroke-dashoffset: -11; } }
.sg-about__geo-callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #ECE9E5;
}
.sg-about__callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid #CC2229;
  padding-left: 14px;
}
.sg-about__callout-num {
  font-family: var(--disp);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 900;
  line-height: 1;
  color: #CC2229;
  letter-spacing: -.01em;
}
.sg-about__callout-lbl {
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  color: #3D3535;
}
/* Closing headline + relocated paragraph at the bottom of the geo card
   (replaces the old single-line tagline). Both DARK-on-LIGHT to read on the
   white card — the paragraph was moved up from the dark CTA band, so it must
   NOT carry that band's white text. */
.sg-about__geo-headline {
  margin: 32px 0 0;
  font-family: var(--disp);
  /* Closing headline: larger than the old tagline (max 1.5rem), smaller than
     the original section H2 (max 2.25rem). Dial this clamp if needed. */
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #231F20;
}
.sg-about__geo-body {
  margin: 12px 0 0;
  max-width: 72ch;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: #3D3535;
}

/* ── Icon-led feature blocks (3-up) ── */
.sg-about__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sg-about__feature {
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  border-top: 3px solid #CC2229;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(35,31,32,0.06);
  padding: 30px 28px;
}
.sg-about__feature-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(204,34,41,0.08);
  color: #CC2229;
  margin-bottom: 18px;
}
.sg-about__feature-icon svg { width: 26px; height: 26px; }
.sg-about__feature-title {
  font-family: var(--disp);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #231F20;
  margin: 0 0 10px;
}
.sg-about__feature-line {
  font-family: var(--body);
  font-size: .98rem;
  line-height: 1.6;
  color: #3D3535;
  margin: 0;
}

/* ── Prominent animated stat band (white panel, big red numerals) ── */
.sg-about__statband {
  background: #FFFFFF;
  border: 1px solid #E0DDD9;
  border-top: 4px solid #CC2229;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(35,31,32,0.06);
  padding: 36px 24px;
}
.sg-about__statband .sg-quote__stats {
  flex-direction: row;
  border-left: none;
  padding-left: 0;
  margin-bottom: 0;
  gap: 0;
}
.sg-about__statband .sg-quote__stat {
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  border-bottom: none;
  border-right: 1px solid #ECE9E5;
  padding: 6px 24px;
}
.sg-about__statband .sg-quote__stat:last-child { border-right: none; }
.sg-about__statband .sg-quote__stat-num { font-size: clamp(42px, 5vw, 64px); }
.sg-about__statband .sg-quote__stat-label {
  color: #3D3535;
  text-align: center;
  max-width: 22ch;
}

@media (max-width: 900px) {
  .sg-about__features { grid-template-columns: 1fr; }
  .sg-about__geo-callouts { grid-template-columns: 1fr; gap: 16px; }
  .sg-about__statband .sg-quote__stats { flex-direction: column; gap: 22px; }
  .sg-about__statband .sg-quote__stat {
    border-right: none;
    border-bottom: 1px solid #ECE9E5;
    padding: 16px 0;
  }
  .sg-about__statband .sg-quote__stat:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  .sg-about__geo { padding: 28px 22px; }
  .sg-about__geo-track { gap: 10px; }
  .sg-about__geo-place { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-about__geo-dash { animation: none; }
}