/* ===========================================================================
   SGS TURF · DESIGN SYSTEM
   Reusable tokens + components for every page on the site.
   Extracted from the homepage and extended with a form system.

   LOAD ORDER: this file FIRST, then page-specific styles (e.g. style.css for
   homepage sections, place-order.css for any page-only overrides).

   No frameworks. No preprocessor. Single file.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */

:root {
  /* Brand */
  --sgs-orange:       #E89A2B;
  --sgs-orange-deep:  #C77A18;
  --sgs-orange-soft:  rgba(232, 154, 43, 0.12);
  --sgs-orange-ring:  rgba(232, 154, 43, 0.18);

  --sgs-ink:          #0F100E;
  --sgs-ink-soft:     #1A1B18;
  --sgs-forest:       #1A2B22;
  --sgs-forest-deep:  #0E1B14;

  --sgs-cream:        #F7F2EA;
  --sgs-cream-warm:   #EFE7DA;
  --sgs-paper:        #FBF8F2;

  /* Text */
  --sgs-text:         #1A1A1A;
  --sgs-text-muted:   #6B6B68;
  --sgs-text-light:   rgba(255, 255, 255, 0.72);
  --sgs-text-faint:   rgba(255, 255, 255, 0.52);

  /* Lines / borders */
  --line-dark:        rgba(15, 15, 14, 0.08);
  --line-dark-2:      rgba(15, 15, 14, 0.18);
  --line-light:       rgba(255, 255, 255, 0.10);

  /* Status */
  --sgs-error:        #C0392B;
  --sgs-error-soft:   rgba(192, 57, 43, 0.08);
  --sgs-success:      #2E7D4F;

  /* Type stacks */
  --display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --container:        1380px;
  --container-narrow: 1180px;
  --container-form:   880px;

  /* Motion */
  --ease:             cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);

  /* Form sizing */
  --input-h:          52px;
  --input-r:          4px;
  --input-pad-x:      16px;
}


/* ---------------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--body);
  color: var(--sgs-text);
  background: var(--sgs-cream);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; color: inherit; }


/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   --------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-orange);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--sgs-orange);
}
.eyebrow.center::before,
.eyebrow.bare::before { display: none; }

.display-xl {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 6.5vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.display-lg {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.display-md {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.display-sm {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
}

em.italic-accent, .italic-accent {
  font-style: italic;
  color: var(--sgs-orange);
  font-weight: 400;
}

.mono-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}


/* ---------------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sgs-orange-ring);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--sgs-orange);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 20px -8px rgba(232, 154, 43, 0.5);
}
.btn-primary:hover {
  background: var(--sgs-orange-deep);
  transform: translateY(-1px);
}

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.40);
}

.btn-ghost-dark {
  background: transparent;
  color: var(--sgs-ink);
  border-color: rgba(15, 15, 14, 0.18);
}
.btn-ghost-dark:hover {
  background: var(--sgs-ink);
  color: #fff;
  border-color: var(--sgs-ink);
}

.btn-text {
  color: var(--sgs-orange);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s var(--ease);
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
.btn-text:hover { gap: 12px; }

.btn-block { width: 100%; }


/* ---------------------------------------------------------------------------
   5. CONTAINERS + SECTION SHELLS
   --------------------------------------------------------------------------- */

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.container-form { max-width: var(--container-form); margin: 0 auto; padding: 0 32px; }

.section { padding: 120px 0; position: relative; }
.section-tight { padding: 96px 0; }
.section-compact { padding: 64px 0; }

.section-header { margin-bottom: 72px; max-width: 760px; }
.section-header.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-header .eyebrow { margin-bottom: 24px; }
.section-header h1,
.section-header h2 { margin-bottom: 20px; }
.section-header p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--sgs-text-muted);
  max-width: 580px;
}
.section-header.center p { margin-left: auto; margin-right: auto; }


/* ---------------------------------------------------------------------------
   6. CARDS (generic — usable across pages)
   --------------------------------------------------------------------------- */

.card {
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
}
.card-pad { padding: 28px 32px; }
.card-pad-lg { padding: 40px 44px; }

.card-divider {
  border-top: 1px solid var(--line-dark);
  margin: 24px 0;
}


/* ---------------------------------------------------------------------------
   7. FORM SYSTEM
   B2B order form — sections are CARDS with structure. Inputs look fillable.
   Labels are body-text, not tiny mono. Line-items have a header row and
   alternating hairlines so the table reads at a glance.
   --------------------------------------------------------------------------- */

/* ---------- Stack ---------- */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Layout ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
}
.form-grid-1 { grid-template-columns: 1fr; }
.form-grid .span-2 { grid-column: 1 / -1; }

/* ---------- Section ---------- */
/* Each section is a real card — paper bg, light border, generous padding.
   Brings back visible structure so fields feel contained. */
.form-section {
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 32px 36px 36px;
  margin: 0;
}

.form-section-header {
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 18px;
}
.form-section-header .step {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-orange);
  flex-shrink: 0;
}
.form-section-header h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--sgs-ink);
  margin: 0;
}
.form-section-header h2 em,
.form-section-header h2 .italic-accent {
  font-style: italic;
  color: var(--sgs-orange);
  font-weight: 400;
}
.form-section-header p {
  flex-basis: 100%;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sgs-text-muted);
  margin: 6px 0 0;
  max-width: 580px;
}

/* Inline note — slim alternative to a banner. */
.form-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sgs-ink);
  background: var(--sgs-orange-soft);
  border-left: 3px solid var(--sgs-orange);
  border-radius: 0 3px 3px 0;
  padding: 12px 16px;
  margin: 0;
}
.form-note strong { font-weight: 500; }

/* ---------- Field ---------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field label,
.form-field-label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgs-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.form-field label .req,
.form-field-label .req {
  color: var(--sgs-orange);
  font-size: 13px;
  line-height: 1;
}
.form-field label .opt,
.form-field-label .opt {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sgs-text-muted);
}

/* ---------- Inputs ----------
   Solid white bg, visible 1px border. Reads clearly as fillable. */
.input,
.select,
.textarea {
  width: 100%;
  height: var(--input-h);
  padding: 0 var(--input-pad-x);
  background: #fff;
  border: 1px solid rgba(15, 15, 14, 0.16);
  border-radius: var(--input-r);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 400;
  color: var(--sgs-ink);
  line-height: 1.4;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 0 rgba(15, 15, 14, 0.02);
}
.input::placeholder,
.textarea::placeholder { color: var(--sgs-text-muted); opacity: 0.55; }

.input:hover,
.select:hover,
.textarea:hover {
  border-color: rgba(15, 15, 14, 0.32);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--sgs-orange);
  box-shadow: 0 0 0 3px var(--sgs-orange-ring);
}

.textarea {
  height: auto;
  min-height: 92px;
  padding: 12px var(--input-pad-x);
  resize: vertical;
  line-height: 1.55;
}

.input[type="date"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.4) sepia(1) saturate(2) hue-rotate(0deg);
  opacity: 0.7;
  cursor: pointer;
}

.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23E89A2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.select::-ms-expand { display: none; }
.select option { color: var(--sgs-ink); padding: 8px; }
.select optgroup {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sgs-orange);
}

/* Error */
.input.error,
.select.error,
.textarea.error {
  border-color: var(--sgs-error);
  background: var(--sgs-error-soft);
}
.input.error:focus,
.select.error:focus,
.textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.helper-text {
  font-size: 12.5px;
  color: var(--sgs-text-muted);
  line-height: 1.5;
}
.error-text {
  font-size: 12.5px;
  color: var(--sgs-error);
  line-height: 1.5;
  display: none;
}
.error-text::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sgs-error);
  margin-right: 8px;
  vertical-align: middle;
}
.form-field.has-error .helper-text { display: none; }
.form-field.has-error .error-text { display: block; }

.input-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.input-group.cols-2 { grid-template-columns: 1fr 1fr; }
.input-group.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Checks + radios ----------
   Bordered list — proper containment for choosing logistics or terms. */
.radio-group {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 15, 14, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sgs-ink);
  transition: background 0.15s var(--ease);
}
.check-row + .check-row { border-top: 1px solid var(--line-dark); }
.check-row:hover { background: var(--sgs-paper); }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }

.check-box,
.check-radio {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(15, 15, 14, 0.28);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all 0.15s var(--ease);
}
.check-box { border-radius: 3px; }
.check-radio { border-radius: 50%; }

.check-row:hover .check-box,
.check-row:hover .check-radio { border-color: var(--sgs-orange); }
.check-row input:focus-visible + .check-box,
.check-row input:focus-visible + .check-radio {
  border-color: var(--sgs-orange);
  box-shadow: 0 0 0 3px var(--sgs-orange-ring);
}

.check-box::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 0.15s var(--ease);
}
.check-row input:checked + .check-box {
  background: var(--sgs-orange);
  border-color: var(--sgs-orange);
}
.check-row input:checked + .check-box::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.check-radio::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sgs-orange);
  transform: scale(0);
  transition: transform 0.15s var(--ease);
}
.check-row input:checked + .check-radio { border-color: var(--sgs-orange); }
.check-row input:checked + .check-radio::after { transform: scale(1); }

.check-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check-title { font-weight: 500; }
.check-desc {
  font-size: 13px;
  color: var(--sgs-text-muted);
  line-height: 1.45;
}

/* ---------- Line items ----------
   Structured table-style. Header row labels the columns; rows alternate
   on a hairline. Reads as a list of orderable items. */
.line-items-table {
  background: #fff;
  border: 1px solid rgba(15, 15, 14, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.line-items-head {
  display: grid;
  grid-template-columns: 1fr 180px 48px;
  gap: 12px;
  padding: 10px 16px;
  background: var(--sgs-cream);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}
.line-items-head .col-trash { text-align: center; }

.line-items {
  display: flex;
  flex-direction: column;
}
.line-item {
  display: grid;
  grid-template-columns: 1fr 180px 48px;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
  background: transparent;
  transition: background 0.15s var(--ease), opacity 0.25s var(--ease), transform 0.25s var(--ease);
  position: relative;
}
.line-item + .line-item { border-top: 1px solid var(--line-dark); }
.line-item:focus-within { background: var(--sgs-paper); }
.line-item.removing {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.line-item-trash {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sgs-text-muted);
  border-radius: 50%;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
  cursor: pointer;
  margin: 8px auto 0;
}
.line-item-trash:hover {
  color: var(--sgs-error);
  background: rgba(192, 57, 43, 0.08);
}
.line-item-trash:disabled,
.line-item-trash[aria-disabled="true"] {
  opacity: 0.25;
  cursor: not-allowed;
}
.line-item-trash svg { width: 15px; height: 15px; }

.line-item-helper {
  grid-column: 1 / 3;
  font-size: 11.5px;
  color: var(--sgs-text-muted);
  line-height: 1.4;
  padding: 0;
  margin-top: -2px;
}

/* Footer row inside the line-items table — holds "+ Add another" */
.line-items-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 16px;
  background: var(--sgs-cream);
  border-top: 1px solid var(--line-dark);
}

.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: none;
  background: transparent;
  color: var(--sgs-orange);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.add-row-btn:hover {
  background: var(--sgs-orange-soft);
  color: var(--sgs-orange-deep);
}
.add-row-btn .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sgs-orange);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-family: var(--body);
  font-weight: 400;
}

/* ---------- Conditional sections ---------- */
.conditional {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease), margin 0.3s var(--ease);
  margin-top: 0;
}
.conditional.is-open {
  max-height: 800px;
  opacity: 1;
  margin-top: 20px;
}

/* ---------- Form-level inline alert ---------- */
.form-banner {
  display: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sgs-error);
  background: var(--sgs-error-soft);
  border-left: 3px solid var(--sgs-error);
  border-radius: 0 3px 3px 0;
  padding: 12px 16px;
  margin-top: 20px;
}
.form-banner.is-visible { display: block; }


/* ---------------------------------------------------------------------------
   8. UTILITY HELPERS
   --------------------------------------------------------------------------- */

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

.text-muted { color: var(--sgs-text-muted); }
.text-orange { color: var(--sgs-orange); }
.mt-0 { margin-top: 0 !important; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0 !important; }


/* ---------------------------------------------------------------------------
   9. CATEGORY-PAGE SYSTEM
   Reusable patterns for /products/{category}/ landing pages. Built against
   the Landscape brief but generic — every class works for Pet, Golf, Sport,
   and Pavers/Stone/Rock without modification. If a category needs visual
   variation, extend with a modifier class, never a per-page class.
   --------------------------------------------------------------------------- */

/* ---------- Breadcrumb ----------
   Cream strip just below header. Mono label, last item is current. */
.breadcrumb {
  background: var(--sgs-cream);
  border-bottom: 1px solid var(--line-dark);
  padding: 24px 0;
}
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.breadcrumb-item {
  color: var(--sgs-text-muted);
  transition: color 0.15s var(--ease);
}
.breadcrumb-item:hover { color: var(--sgs-orange); }
.breadcrumb-item.is-current {
  color: var(--sgs-orange);
  cursor: default;
  pointer-events: none;
}
.breadcrumb-sep {
  color: var(--sgs-text-muted);
  opacity: 0.45;
}

/* ---------- Category hero ----------
   Compact split layout (60/40). Not full-screen — this sits under the
   breadcrumb and orients the visitor. */
.category-hero {
  background: var(--sgs-cream);
  padding: 96px 0;
  border-bottom: 1px solid var(--line-dark);
}
.category-hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: center;
}
.category-hero-text .eyebrow { margin-bottom: 24px; }
.category-hero-text h1 { margin-bottom: 24px; }
.category-hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--sgs-text-muted);
  max-width: 540px;
  margin-bottom: 40px;
}
.category-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.category-hero-stat {
  padding: 0 22px;
  border-right: 1px solid rgba(15, 15, 14, 0.18);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sgs-ink);
  white-space: nowrap;
}
.category-hero-stat:first-child { padding-left: 0; }
.category-hero-stat:last-child { border-right: none; padding-right: 0; }

.category-hero-image {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
  background: var(--sgs-cream-warm);
}
.category-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Series section (header + filter chips + grid) ---------- */
.series-section {
  background: var(--sgs-cream);
  padding: 120px 0;
}
.series-section-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.series-section-header .eyebrow { margin-bottom: 24px; }
.series-section-header h2 { margin: 0; max-width: 580px; }
.series-section-header h2 em,
.series-section-header h2 .italic-accent {
  color: var(--sgs-orange);
  font-style: italic;
}

/* Filter chip cluster — small inline pills, single-active radio behavior */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sgs-ink);
  background: transparent;
  border: 1px solid var(--line-dark-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
  white-space: nowrap;
}
.filter-chip:hover {
  border-color: var(--sgs-orange);
  color: var(--sgs-orange);
}
.filter-chip.is-active {
  background: var(--sgs-orange);
  border-color: var(--sgs-orange);
  color: #fff;
}
.filter-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sgs-orange-ring);
}

/* Series grid — 3 cols desktop, 2 tablet, 1 mobile.
   Auto-fills with whatever count you give it (2-7). */
.series-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.series-card {
  display: flex;
  flex-direction: column;
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  color: inherit;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.2s var(--ease);
}
.series-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(15, 15, 14, 0.18);
}
.series-card.is-hidden {
  display: none;
}

.series-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--sgs-cream-warm);
}
.series-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.series-card:hover .series-card-image img { transform: scale(1.04); }

.series-card-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(15, 15, 14, 0.88);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.series-card-tag.tag-bestseller { background: var(--sgs-orange); }

.series-card-body {
  padding: 26px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.series-card-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sgs-orange);
  margin-bottom: 14px;
}
.series-card-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.012em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--sgs-ink);
}
.series-card-tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 14.5px;
  color: var(--sgs-orange);
  margin-bottom: 14px;
  line-height: 1.4;
}
.series-card-desc {
  font-size: 14px;
  color: var(--sgs-text-muted);
  line-height: 1.55;
  margin-bottom: 22px;
  flex: 1;
}
.series-card-specs {
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding: 16px 0;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.series-card-specs .spec-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.series-card-specs .spec-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}
.series-card-specs .spec-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sgs-ink);
}
.series-card-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sgs-orange);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  transition: gap 0.3s var(--ease);
}
.series-card:hover .series-card-foot { gap: 12px; }
.series-card-foot svg { width: 14px; height: 14px; }

/* ---------- Application strip ----------
   4-col editorial divider. Sets up "what is this turf actually for". */
.application-strip {
  background: var(--sgs-cream-warm);
  padding: 80px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.application-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.application-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.application-cell .mono-label {
  color: var(--sgs-orange);
  margin-bottom: 4px;
}
.application-cell h3 {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--sgs-ink);
  margin: 0 0 4px;
}
.application-cell p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sgs-text-muted);
  max-width: 280px;
}

/* ---------- Trust block (forest-dark stat strip) ----------
   Echoes the homepage why-section but condensed. Header + 3 big stats. */
.trust-block {
  background: var(--sgs-forest);
  color: #fff;
  padding: 120px 0;
}
.trust-block .eyebrow { color: var(--sgs-orange); margin-bottom: 28px; }
.trust-block-header { max-width: 720px; margin-bottom: 64px; }
.trust-block-header h2 { color: #fff; margin-bottom: 20px; }
.trust-block-header h2 em,
.trust-block-header h2 .italic-accent {
  color: var(--sgs-orange);
  font-style: italic;
}
.trust-block-header p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--sgs-text-light);
  max-width: 600px;
}
.trust-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 40px;
}
.trust-stat {
  padding: 0 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.trust-stat:first-child { padding-left: 0; }
.trust-stat:last-child { border-right: none; padding-right: 0; }
.trust-stat-value {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}
.trust-stat-value em,
.trust-stat-value .accent {
  color: var(--sgs-orange);
  font-style: italic;
}
.trust-stat-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-text-faint);
}

/* ---------- Cross-sell strip (other categories) ----------
   Smaller cards than series-card. Image + name + 1-line desc + arrow. */
.cross-sell-strip {
  background: var(--sgs-cream);
  padding: 80px 0;
}
.cross-sell-header { margin-bottom: 40px; max-width: 760px; }
.cross-sell-header .eyebrow { margin-bottom: 18px; }
.cross-sell-header h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.625rem, 2.5vw, 2rem);
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0;
}
.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cross-sell-card {
  display: flex;
  flex-direction: column;
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
  color: inherit;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cross-sell-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -20px rgba(15, 15, 14, 0.16);
}
.cross-sell-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--sgs-cream-warm);
}
.cross-sell-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cross-sell-card:hover .cross-sell-image img { transform: scale(1.04); }
.cross-sell-body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cross-sell-body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--sgs-ink);
}
.cross-sell-body p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sgs-text-muted);
  margin: 0 0 14px;
  flex: 1;
}
.cross-sell-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sgs-orange);
  font-size: 13px;
  font-weight: 500;
  transition: gap 0.3s var(--ease);
}
.cross-sell-card:hover .cross-sell-link { gap: 12px; }
.cross-sell-link svg { width: 13px; height: 13px; }

/* ---------- Final CTA strip (condensed) ----------
   Echoes homepage final-cta but slimmer. Centered, dark, two buttons + phones. */
.cta-strip {
  background: var(--sgs-ink);
  color: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(232, 154, 43, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(26, 43, 34, 0.5) 0%, transparent 55%);
  pointer-events: none;
}
.cta-strip-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-strip .eyebrow {
  color: var(--sgs-orange);
  justify-content: center;
  margin-bottom: 24px;
}
.cta-strip .eyebrow::before { display: none; }
.cta-strip h2 {
  color: #fff;
  margin-bottom: 18px;
}
.cta-strip h2 em,
.cta-strip h2 .italic-accent {
  color: var(--sgs-orange);
  font-style: italic;
}
.cta-strip-sub {
  font-size: 16px;
  color: var(--sgs-text-light);
  line-height: 1.55;
  margin: 0 auto 32px;
  max-width: 520px;
}
.cta-strip-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.cta-strip-phones {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 13px;
}
.cta-strip-phones a {
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color 0.2s;
}
.cta-strip-phones a:hover { color: var(--sgs-orange); }
.cta-strip-phones .region {
  color: var(--sgs-orange);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
   10. PRODUCT-DETAIL-PAGE SYSTEM
   Reusable patterns for /products/{category}/{slug}/ pages. Built against the
   Dune Dark Blend brief (face-weight variants) but generic — `.variant-selector`
   handles color variants too (Bender Board: Black / Teak), the `.spec-table`
   works for any spec list, the `.product-hero` handles any image set + form
   payload. Every class works for the other 40+ product pages without
   modification.

   Variant-data shape (fed via inline JSON in the page or a window global):
     {
       label:     "Face Weight" | "Color" | …       // selector heading
       variants: {
         "<key>": {
           buttonLabel:    "70"    | "Black"        // big number/word
           buttonSublabel: "94 oz" | ""             // small sub-text (optional)
           specs:          { pile, totalWeight, … } // matches data-spec rows
           images:         [src, src, …]            // gallery + thumbs
           sku:            "sgs-sage-70-dark"
           orderUrl:       "/place-order/?prefill=…"
           inStock:        true
         }
       }
     }
   --------------------------------------------------------------------------- */

/* ---------- Product hero shell ----------
   Asymmetric 55/45 split — the gallery owns the visual real estate, the
   form column stays narrow enough that the action buttons stay above
   the fold on a typical 13" laptop. Right column is sticky on desktop. */
.product-hero {
  background: var(--sgs-cream);
  padding: 56px 0 96px;
  border-bottom: 1px solid var(--line-dark);
}
.product-hero-grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 56px;
  align-items: start;
}

.product-hero-detail {
  position: sticky;
  top: 100px;            /* Sits below the fixed header — adjust if header height changes */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.product-hero-detail .eyebrow { margin-bottom: 0; }
.product-hero-detail h1 { margin: 0; }
.product-hero-tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--sgs-orange);
  margin: 0;
}
.product-hero-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--sgs-text-muted);
  margin: 0;
  max-width: 540px;
}

/* ---------- Image gallery ----------
   Primary image area + thumbnail strip below. Aspect-ratio is locked at 4:3
   so swapping variants doesn't reflow the layout. Click primary -> lightbox. */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-gallery-primary {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
  background: var(--sgs-cream-warm);
  cursor: zoom-in;
}
.product-gallery-primary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s var(--ease);
}
.product-gallery-primary img.is-fading { opacity: 0; }

.product-gallery-zoom-hint {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(15, 15, 14, 0.78);
  color: #fff;
  padding: 7px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.product-gallery-zoom-hint svg { width: 11px; height: 11px; }
.product-gallery-primary:hover .product-gallery-zoom-hint { opacity: 1; }

.product-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.product-gallery-thumb {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
  background: var(--sgs-cream-warm);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-gallery-thumb:hover { border-color: rgba(15, 15, 14, 0.32); }
.product-gallery-thumb.is-active {
  border: 2px solid var(--sgs-orange);
  box-shadow: 0 0 0 2px var(--sgs-orange-ring);
}
.product-gallery-thumb:focus-visible {
  outline: none;
  border-color: var(--sgs-orange);
  box-shadow: 0 0 0 3px var(--sgs-orange-ring);
}

/* ---------- Lightbox ----------
   No library. Fixed overlay, click outside / Esc / X to close. Arrow keys
   navigate. Activates with `.is-open` (added by sgs-product.js). */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 15, 14, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease);
  padding: 48px 64px;
}
.product-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.product-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 4px;
}
.product-lightbox-close,
.product-lightbox-prev,
.product-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s var(--ease);
}
.product-lightbox-close:hover,
.product-lightbox-prev:hover,
.product-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.18);
}
.product-lightbox-close { top: 24px; right: 24px; }
.product-lightbox-prev  { top: 50%; left: 24px;  transform: translateY(-50%); }
.product-lightbox-next  { top: 50%; right: 24px; transform: translateY(-50%); }
.product-lightbox-close svg,
.product-lightbox-prev svg,
.product-lightbox-next svg { width: 18px; height: 18px; }
.product-lightbox-counter {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Variant selector ----------
   Segmented buttons in a single row. Each button: big label + optional
   sub-label. Active gets a 2px orange bottom border + soft tint.
   Works for face-weight (3 buttons w/ sub-label) AND color (2 buttons w/o
   sub-label). Set --variant-count to 2/3/4 on .variant-buttons. */
.variant-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.variant-selector-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}
.variant-buttons {
  display: grid;
  grid-template-columns: repeat(var(--variant-count, 3), 1fr);
  gap: 8px;
}
.variant-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px 18px;
  background: #fff;
  border: 1px solid var(--line-dark);
  border-bottom: 2px solid var(--line-dark);  /* 2px so active state doesn't shift layout */
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  font-family: var(--mono);
  color: var(--sgs-ink);
  text-align: center;
}
.variant-button:hover:not(:disabled) {
  border-color: rgba(15, 15, 14, 0.28);
  background: var(--sgs-paper);
}
.variant-button.is-active {
  background: var(--sgs-orange-soft);
  border-color: var(--line-dark);
  border-bottom-color: var(--sgs-orange);
}
.variant-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sgs-orange-ring);
}
.variant-button-label {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--sgs-ink);
}
.variant-button.is-active .variant-button-label { color: var(--sgs-orange); }
.variant-button-sublabel {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: var(--sgs-text-muted);
  text-transform: uppercase;
}
.variant-button:disabled,
.variant-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      rgba(15, 15, 14, 0.06) 6px,
      rgba(15, 15, 14, 0.06) 7px
    ),
    #fff;
}
.variant-button-helper {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
  text-align: center;
  margin-top: 4px;
}

/* ---------- Spec table ----------
   2-column grid. Left: mono uppercase label. Right: mono value. Each row
   has a 1px bottom border. Variant-aware values get marked with
   data-spec="<key>" so the JS can swap them on variant change. */
.spec-table {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  border-top: 1px solid var(--line-dark);
}
.spec-row {
  display: contents;
}
.spec-row > .spec-key,
.spec-row > .spec-val {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
}
.spec-key {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
  align-self: center;
}
.spec-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--sgs-ink);
  align-self: center;
  transition: opacity 0.2s var(--ease);
}
.spec-val.is-fading { opacity: 0; }

/* Section heading inside a long spec table — used in the dark spec-sheet
   section. Spans both columns. */
.spec-section-head {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--sgs-orange);
  padding: 28px 0 8px;
  border-bottom: 1px solid var(--line-dark);
}
.spec-section-head:first-child { padding-top: 0; }

/* Dark variant — used inside the forest-deep spec-sheet section. */
.spec-table.dark { border-top-color: rgba(255, 255, 255, 0.18); }
.spec-table.dark .spec-row > .spec-key,
.spec-table.dark .spec-row > .spec-val {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.spec-table.dark .spec-key { color: var(--sgs-text-faint); }
.spec-table.dark .spec-val { color: #fff; }
.spec-table.dark .spec-section-head {
  color: var(--sgs-orange);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

/* ---------- Action cluster ----------
   Two side-by-side primary actions (Add to Quote · Add to Order).
   Below them, the inline "Add to Quote" form expands. Below that,
   the trust strip. */
.product-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
.product-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.product-actions .btn {
  width: 100%;
  padding: 16px 22px;
}

.product-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}
.product-trust-strip span { display: inline-flex; align-items: center; }
.product-trust-strip span + span::before {
  content: '·';
  color: var(--sgs-orange);
  margin-right: 16px;
  margin-left: 0;
  font-weight: 700;
}

/* ---------- Add-to-Order form + "Your Order" rail panel ----------
   Qty field + Add button share a row (wrapping to stack on a narrow rail);
   the panel below is a contained card that appears once items are added.
   The line list is a 3-col grid so the label and qty never run together. */
.product-order-input {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.product-order-input .form-field { flex: 1 1 140px; margin: 0; }
.product-order-input .btn { flex: 1 1 auto; width: auto; }

.product-order-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.product-order-notes > label {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--sgs-ink);
}
.product-order-notes > label .opt {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--sgs-text-muted);
}

.product-order-panel {
  display: none;
  margin-top: 16px;
  padding: 18px 20px 20px;
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark-2);
  border-radius: 10px;
}
.product-order-panel.is-visible { display: block; }

.product-order-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark);
}
.product-order-panel-head .label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}
.product-order-panel-head .label .count { color: var(--sgs-ink); font-weight: 700; }
.product-order-panel-head .clear {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
  transition: color 0.2s var(--ease);
}
.product-order-panel-head .clear:hover { color: var(--sgs-orange); }

.product-order-list { list-style: none; margin: 0; padding: 0; }
.order-line-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
}
.order-line-label {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sgs-ink);
}
.order-line-qty {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--sgs-text-muted);
}
.order-line-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--sgs-text-muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.order-line-remove svg { width: 15px; height: 15px; }
.order-line-remove:hover { color: var(--sgs-error); background: var(--sgs-error-soft); }

.product-order-panel-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
}
.product-order-panel-foot .btn {
  width: 100%;
  background: var(--sgs-forest);
  color: #fff;
  padding: 14px 22px;
}
.product-order-panel-foot .btn:hover { background: var(--sgs-forest-deep); transform: translateY(-1px); }
.product-order-panel-foot .helper {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}

/* Mobile order FAB + bottom sheet — not used. The inline "Your Order" panel
   above already works on mobile, so these are removed from every product page
   (without CSS they were rendering unstyled at the bottom of the page). */
.order-fab,
.order-sheet,
.order-sheet-backdrop { display: none !important; }

/* ---------- Inline quick-quote form ----------
   Expands below the Add to Quote button. Borrows .conditional behavior
   from the form system but tuned for a one-line + textarea micro form. */
.product-quick-form {
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease), padding 0.3s var(--ease);
}
.product-quick-form.is-open {
  max-height: 360px;
  opacity: 1;
  padding: 18px 18px 20px;
}
.product-quick-form .form-stack { gap: 12px; }
.product-quick-form .form-quick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.product-quick-form .input,
.product-quick-form .textarea {
  height: 44px;
  font-size: 14px;
}
.product-quick-form .textarea {
  height: auto;
  min-height: 64px;
}
.product-quick-form-feedback {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sgs-success);
  padding-top: 4px;
}
.product-quick-form-feedback.is-visible { display: block; }

/* ---------- Section: about + applications ----------
   Two-column long-form description. Mirrors `.faq-grid` proportions but
   inverted (60/40 instead of 40/60). */
.product-about {
  background: var(--sgs-cream);
  padding: 96px 0;
}
.product-about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}
.product-about-text .eyebrow { margin-bottom: 24px; }
.product-about-text h2 { margin: 0 0 28px; }
.product-about-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sgs-text-muted);
  margin: 0;
}
.product-about-text p + p { margin-top: 18px; }

.product-about-side .eyebrow { margin-bottom: 24px; }

.application-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.application-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sgs-ink);
}
.application-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sgs-orange);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
}
.application-list-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--sgs-text-muted);
}
.application-list-note a {
  color: var(--sgs-orange);
  border-bottom: 1px solid var(--sgs-orange-soft);
}
.application-list-note a:hover { border-bottom-color: var(--sgs-orange); }

/* ---------- Section: full spec sheet (dark) ----------
   Forest-deep background; uses .spec-table.dark inside. */
.product-specsheet {
  background: var(--sgs-forest-deep);
  color: #fff;
  padding: 96px 0;
}
.product-specsheet-header { margin-bottom: 56px; max-width: 720px; }
.product-specsheet-header .eyebrow { color: var(--sgs-orange); margin-bottom: 24px; }
.product-specsheet-header h2 { color: #fff; margin: 0; }
.product-specsheet-header h2 em,
.product-specsheet-header h2 .italic-accent {
  color: var(--sgs-orange);
  font-style: italic;
}
.product-specsheet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
}
.product-specsheet-foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.product-specsheet-foot a {
  color: var(--sgs-orange);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s var(--ease);
}
.product-specsheet-foot a:hover { gap: 12px; }
.product-specsheet-foot a svg { width: 14px; height: 14px; }

/* ---------- Section: product FAQ ----------
   Reuses the homepage `.faq` accordion exactly. The `.product-faq` wrapper
   sits in cream so we have a hook to scope a tweak later if needed; today
   it's a no-op pass-through to the homepage `.faq` system. */
.product-faq { background: var(--sgs-cream); padding: 96px 0; }


/* ---------------------------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .series-section-header { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .filter-chips { justify-content: flex-start; }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .application-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .cross-sell-grid { grid-template-columns: 1fr; }
  .trust-stats { grid-template-columns: 1fr; gap: 0; padding-top: 32px; }
  .trust-stat { padding: 24px 0; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .trust-stat:last-child { border-bottom: none; }

  /* Product hero: stack the columns; release the sticky form. */
  .product-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-hero-detail { position: static; top: auto; }
  .product-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-specsheet-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .container, .container-narrow, .container-form { padding: 0 24px; }

  .category-hero { padding: 64px 0; }
  .category-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .category-hero-image { aspect-ratio: 16 / 10; max-width: 600px; }
  .category-hero-stats { gap: 0; }
  .category-hero-stat { padding: 0 16px; font-size: 10.5px; }
}

@media (max-width: 720px) {
  .section { padding: 80px 0; }
  .section-tight { padding: 64px 0; }
  .section-compact { padding: 48px 0; }
  .section-header { margin-bottom: 48px; }

  .form-section { padding: 24px 22px 28px; border-radius: 4px; }
  .form-section-header { margin-bottom: 20px; padding-bottom: 14px; }

  .line-items-head { grid-template-columns: 1fr 44px; padding: 8px 12px; }
  .line-items-head .col-qty { display: none; }
  .line-item {
    grid-template-columns: 1fr 44px;
    gap: 8px 12px;
    padding: 12px;
  }
  .line-item .select { grid-column: 1 / -1; grid-row: 1; }
  .line-item .input { grid-column: 1 / 2; grid-row: 2; }
  .line-item .line-item-trash { grid-column: 2 / 3; grid-row: 2; margin: 0; }
  .line-item .line-item-helper { grid-column: 1 / -1; grid-row: 3; }
  .line-items-foot { padding: 8px 12px; }

  .input-group.cols-3-mobile-stack {
    grid-template-columns: 1fr;
  }

  .breadcrumb { padding: 18px 0; }
  .breadcrumb-trail { gap: 8px; font-size: 10.5px; }

  .category-hero { padding: 56px 0; }
  .category-hero-grid { gap: 32px; }
  .category-hero-text h1 { margin-bottom: 18px; }
  .category-hero-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .category-hero-stat {
    padding: 12px 0;
    border-right: none;
    border-bottom: 1px solid var(--line-dark);
    width: 100%;
  }
  .category-hero-stat:last-child { border-bottom: none; }

  .series-section { padding: 80px 0; }
  .series-section-header { margin-bottom: 40px; }
  .series-grid { grid-template-columns: 1fr; gap: 18px; }

  .series-card-body { padding: 22px 22px 24px; }
  .series-card-name { font-size: 24px; }
  .series-card-specs { gap: 8px; }
  .series-card-specs .spec-label { font-size: 9px; }
  .series-card-specs .spec-value { font-size: 12px; }

  .application-strip { padding: 56px 0; }
  .application-grid { grid-template-columns: 1fr; gap: 28px; }

  .trust-block { padding: 80px 0; }
  .trust-block-header { margin-bottom: 40px; }

  .cross-sell-strip { padding: 56px 0; }
  .cross-sell-header { margin-bottom: 28px; }

  .cta-strip { padding: 72px 0; }
  .cta-strip-actions { flex-direction: column; gap: 12px; }
  .cta-strip-actions .btn { width: 100%; }
  .cta-strip-phones { flex-direction: column; gap: 14px; align-items: center; }

  /* Product page — mobile tightening */
  .product-hero { padding: 32px 0 64px; }
  .product-hero-grid { gap: 28px; }
  .product-hero-detail { gap: 18px; }
  .product-hero-tagline { font-size: 19px; }
  .product-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .variant-buttons { gap: 6px; }
  .variant-button { padding: 14px 8px 16px; }
  .variant-button-label { font-size: 16px; }
  .variant-button-sublabel { font-size: 10.5px; }

  /* The Add-to-Quote / Add-to-Order row stays side-by-side at 375px;
     the buttons themselves shrink padding to fit. If the device is
     narrower than 360px the row stacks. */
  .product-actions .btn { padding: 14px 16px; font-size: 13.5px; }
  .product-trust-strip { font-size: 9.5px; gap: 6px 12px; }
  .product-trust-strip span + span::before { margin-right: 12px; }

  .product-about { padding: 56px 0; }
  .product-about-text h2 { margin-bottom: 22px; }
  .product-about-grid { gap: 32px; }

  .product-specsheet { padding: 64px 0; }
  .product-specsheet-header { margin-bottom: 36px; }
  .product-specsheet-foot { margin-top: 32px; padding-top: 22px; }

  .product-faq { padding: 56px 0; }

  .product-lightbox { padding: 24px; }
  .product-lightbox-close,
  .product-lightbox-prev,
  .product-lightbox-next { width: 38px; height: 38px; }
  .product-lightbox-prev  { left: 12px; }
  .product-lightbox-next  { right: 12px; }
}

@media (max-width: 380px) {
  /* Below 380px, the action buttons are too cramped side-by-side; stack. */
  .product-actions-row { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   12. TRUST-PAGES SYSTEM
   Reusable patterns for low-interactivity content pages — About, Contact,
   Warranty, Privacy, Terms, Locations, Service Area. Editorial typography,
   phone-first contact treatment, legal-text formatting.

   Built against the trust-pages bundle (About + Contact + Warranty) but
   generic — every class works for the other content-heavy pages without
   modification.
   --------------------------------------------------------------------------- */

/* ---------- Compact hero ----------
   240px tall strip (180px mobile) with dark ink bg + optional image overlay.
   Smaller than .hero (88vh) and .category-hero (96px padding split layout) —
   sits under the breadcrumb on trust pages, orients the visitor in one beat,
   gets out of the way. */
.compact-hero {
  position: relative;
  background: var(--sgs-ink);
  color: #fff;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-light);
}
.compact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.compact-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.compact-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(15, 16, 14, 0.88) 0%, rgba(15, 16, 14, 0.55) 60%, rgba(15, 16, 14, 0.30) 100%);
}
.compact-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 56px 0 48px;
  max-width: 880px;
}
.compact-hero .eyebrow { color: var(--sgs-orange); margin-bottom: 22px; }
.compact-hero h1 {
  color: #fff;
  margin: 0 0 16px;
}
.compact-hero h1 em,
.compact-hero h1 .italic-accent {
  color: var(--sgs-orange);
  font-style: italic;
}
.compact-hero-sub {
  color: var(--sgs-text-light);
  font-size: 16.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

/* ---------- Phone card ----------
   Oversized tappable phone card. The whole card is a tel: link.
   Used on Contact (CA + TX side-by-side) and reusable on Locations or
   Service-Area pages. Hover lifts the card 2px. */
.phone-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.phone-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line-dark-2);
  border-radius: 4px;
  padding: 28px 32px 30px;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  cursor: pointer;
}
.phone-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 15, 14, 0.28);
  box-shadow: 0 16px 32px -20px rgba(15, 15, 14, 0.18);
}
.phone-card:focus-visible {
  outline: none;
  border-color: var(--sgs-orange);
  box-shadow: 0 0 0 3px var(--sgs-orange-ring);
}
.phone-card-region {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
}
.phone-card-number {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--sgs-orange);
  margin: 0;
}
.phone-card-hours {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--sgs-text-muted);
}

/* ---------- Editorial document body ----------
   Long-form legal/policy text. Max-width capped at 720px for readability.
   Bullet lists use mono `▸` markers, section dividers between coverage /
   exclusions / refund policy. Reused on Privacy + Terms when those land. */
.doc-body {
  max-width: 720px;
}
.doc-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--sgs-text);
  margin: 0;
}
.doc-body p + p { margin-top: 16px; }
.doc-body p strong { font-weight: 500; color: var(--sgs-ink); }

.doc-body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--sgs-ink);
  margin: 36px 0 14px;
}
.doc-body h3:first-child { margin-top: 0; }
.doc-body h3 em,
.doc-body h3 .italic-accent { color: var(--sgs-orange); font-style: italic; }

.doc-body ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.doc-body ul + p,
.doc-body p + ul { margin-top: 16px; }
.doc-body ul li {
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sgs-text);
}
.doc-body ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sgs-orange);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
}

.doc-divider {
  border: 0;
  border-top: 1px solid var(--line-dark);
  margin: 36px 0;
}

/* Sub-block intro line — used between the headline and the bullet list. */
.doc-lead {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--sgs-orange);
  margin: 0 0 12px;
}

/* ---------- Highlight callout ----------
   Boxed highlight inside .doc-body — used for "Pickup window" call-out on
   the Warranty page, also fits on Privacy/Terms when a clause needs to
   stand out. NOT a yellow CMS info box — same editorial language as the
   rest of the page, just framed. */
.doc-callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  margin: 24px 0;
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark-2);
  border-left: 3px solid var(--sgs-orange);
  border-radius: 0 3px 3px 0;
}
.doc-callout-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-orange);
}
.doc-callout-body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sgs-ink);
  margin: 0;
}
.doc-callout-body strong { font-weight: 500; }

/* ---------- Proration timeline ----------
   Editorial spec table — clean two-column row for the 16-yr proration on
   the Warranty page. Uses .spec-table tokens but a tighter, presentational
   variant. Three rows fits inside 320px wide. */
.proration-table {
  border: 1px solid var(--line-dark-2);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.proration-table-head {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-text-muted);
  padding: 14px 22px;
  background: var(--sgs-cream);
  border-bottom: 1px solid var(--line-dark);
}
.proration-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 16px 22px;
}
.proration-row + .proration-row { border-top: 1px solid var(--line-dark); }
.proration-years {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sgs-ink);
}
.proration-pct {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.625rem, 2.5vw, 2rem);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--sgs-orange);
}

/* ---------- Section pad helpers used across trust pages ----------
   Default trust-page section is .section-tight (96px / 64px mobile).
   When a trust page needs a forest-deep CTA (warranty close, contact
   close), it uses .cta-strip from §9. No new section types. */

/* ---------- Editorial 2-col text + image (About sections) ----------
   60/40 split, image on the right. Mirrors the homepage "contractor"
   section ratio but sits inside a section-tight padding. Used on the
   About page for "The Company" — fits any narrative+image pattern on
   future pages. */
.editorial-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: center;
}
.editorial-grid .eyebrow { margin-bottom: 22px; }
.editorial-grid h2 { margin: 0 0 24px; }
.editorial-grid h2 em,
.editorial-grid h2 .italic-accent { color: var(--sgs-orange); font-style: italic; }
.editorial-grid p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--sgs-text-muted);
  margin: 0;
  max-width: 620px;
}
.editorial-grid p + p { margin-top: 18px; }
.editorial-image {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  overflow: hidden;
  background: var(--sgs-cream-warm);
}
.editorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Catalog tile (used on About) ----------
   4-up category card: name + 1-line spec + arrow link. Slimmer than
   .cross-sell-card (no image), sits between editorial sections. */
.trust-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.trust-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  padding: 24px 24px 22px;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  min-height: 180px;
}
.trust-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 15, 14, 0.18);
  box-shadow: 0 16px 36px -20px rgba(15, 15, 14, 0.16);
}
.trust-tile-meta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sgs-orange);
  margin-bottom: 8px;
}
.trust-tile-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--sgs-ink);
  margin: 0 0 6px;
}
.trust-tile-spec {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sgs-text-muted);
  margin: 0;
}
.trust-tile-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sgs-orange);
  font-size: 13px;
  font-weight: 500;
  transition: gap 0.3s var(--ease);
}
.trust-tile:hover .trust-tile-foot { gap: 12px; }
.trust-tile-foot svg { width: 13px; height: 13px; }

.trust-tile-foot-line {
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sgs-text-muted);
}
.trust-tile-foot-line a {
  color: var(--sgs-orange);
  border-bottom: 1px solid var(--sgs-orange-soft);
  transition: border-bottom-color 0.2s var(--ease);
}
.trust-tile-foot-line a:hover { border-bottom-color: var(--sgs-orange); }

/* ---------- Form success state ---------- */
.form-success {
  display: none;
  background: var(--sgs-paper);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 36px 36px 32px;
  text-align: left;
}
.form-success.is-visible { display: block; }
.form-success .eyebrow { color: var(--sgs-success); margin-bottom: 18px; }
.form-success h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--sgs-ink);
  margin: 0 0 12px;
}
.form-success p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--sgs-text-muted);
  margin: 0;
}
.form-success p + p { margin-top: 10px; }
.form-success a {
  color: var(--sgs-orange);
  border-bottom: 1px solid var(--sgs-orange-soft);
}
.form-success a:hover { border-bottom-color: var(--sgs-orange); }

/* Captcha slot — placeholder where Turnstile/hCaptcha mounts. Sits between
   the last input and the submit button. Has a min-height so the layout
   doesn't jump when the widget loads. */
.captcha-slot {
  min-height: 78px;
  display: flex;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   12.R RESPONSIVE — TRUST-PAGES OVERRIDES
   Scoped overrides for §12 classes. Kept here (not in §11) so the trust-pages
   system stays self-contained — copy/paste this whole §12 block and it works.
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .editorial-grid { grid-template-columns: 1fr; gap: 40px; }
  .editorial-image { max-width: 540px; aspect-ratio: 4 / 3; }
  .trust-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 720px) {
  .compact-hero { min-height: 180px; }
  .compact-hero-inner { padding: 40px 0 36px; }
  .compact-hero-sub { font-size: 15px; }

  .phone-card-grid { grid-template-columns: 1fr; gap: 14px; }
  .phone-card { padding: 22px 22px 24px; }
  .phone-card-number { font-size: clamp(1.625rem, 7vw, 2.25rem); }

  .editorial-grid { gap: 32px; }
  .editorial-grid p { font-size: 15.5px; }

  .trust-tile-grid { grid-template-columns: 1fr; gap: 12px; }
  .trust-tile { min-height: 0; padding: 22px 22px 20px; }

  .doc-body p { font-size: 15.5px; }
  .doc-body ul li { font-size: 15px; }
  .doc-body h3 { font-size: 20px; margin-top: 28px; }
  .doc-callout { padding: 18px 20px; }
  .doc-callout-body { font-size: 14.5px; }

  .proration-table-head { padding: 12px 18px; }
  .proration-row { padding: 14px 18px; }

  .form-success { padding: 28px 24px 24px; }
}