:root {
  /* ── Colors ── */
  --color-primary: #1B2E5A;
  --color-primary-dark: #111D3A;
  --color-primary-light: #2A4478;
  --color-primary-hover: #182951;
  --color-primary-text: #FFFFFF;
  --color-secondary: #3A6EA5;
  --color-secondary-light: #7599c0;
  --color-accent: #C9A94E;
  --color-accent-dark: #aa8f42;
  --color-accent-light: #d3ba71;
  --color-accent-text: #FFFFFF;
  --color-text: #2E333B;
  --color-text-muted: #6c7075;
  --color-text-light: #96999d;
  --color-bg: #F7F5F0;
  --color-bg-card: #FFFFFF;
  --color-bg-muted: #f7f7f7;
  --color-bg-alt: #eceef1;
  --color-border: rgba(46,51,59,0.12);
  --color-border-light: rgba(46,51,59,0.06);

  /* ── Text color overrides (dark-mode aware) ── */
  --color-heading: var(--color-primary);
  --color-on-surface: var(--color-text);
  --color-on-card: var(--color-text);
  --color-link: var(--color-secondary);

  /* ── Page Header Banner ──
     The bg keeps its default: every header variant needs a surface, and the
     brand gradient is that surface.

     The two TEXT colours are emitted only when actually set. They used to
     default to near-white regardless, which asserted a choice nobody made
     (convention 8) and was simply wrong on the light header variant —
     rgba(255,255,255,0.85) on slim-bar's #EFEDE8 surface measures 1.14:1, far
     below the 4.5:1 AA floor. Left unset, each variant's own color declaration
     wins and stays readable on its own surface. */
  --page-header-bg: linear-gradient(135deg, #111D3A, #1B2E5A);

  --page-header-subtitle-color: #e3e3e3;


  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --heading-weight: 700;
  --heading-transform: none;
  --heading-tracking: -0.02em;
  --heading-line-height: 1.2;
  --body-line-height: 1.7;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* ── Spacing (standard) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --max-w: 1200px;
  --section-py: 4rem;
  --max-w-narrow: 800px;
  --max-w-prose: 65ch;
  --nav-height: 80px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ── Shadows (default) ── */
  --shadow: 0 1px 3px rgba(27,46,90,0.06), 0 4px 16px rgba(27,46,90,0.08);
  --shadow-md: 0 4px 12px rgba(27,46,90,0.1), 0 8px 32px rgba(27,46,90,0.08);
  --shadow-lg: 0 12px 48px rgba(27,46,90,0.14);

  /* ── Transitions ── */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
  --duration-slow: 0.6s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: var(--nav-height, 80px); }
/* Day/night backgrounds: the only rule that sets --bg-current, so it beats the
   element's inline background without !important. See utils/daypart.js. */
[data-daypart="night"] [data-bg-night] { --bg-current: var(--bg-night); }
body {
  font-family: var(--font-body); color: var(--color-text);
  line-height: var(--leading-relaxed); background: var(--color-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display); color: var(--color-heading, var(--color-primary));
  line-height: var(--heading-line-height, 1.2); letter-spacing: var(--heading-tracking, -0.02em); font-weight: var(--heading-weight, 700); text-transform: var(--heading-transform, none);
}
h1 { font-size: clamp(var(--text-3xl), 4.5vw, var(--text-4xl)); }
h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin-bottom: var(--space-4); max-width: var(--max-w-prose); }
strong { font-weight: 600; }
a { color: var(--color-link, var(--color-secondary)); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent); }
a:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; border-radius: var(--radius-sm); }
img { max-width: 100%; display: block; height: auto; }
.container { width: 90%; max-width: var(--max-w); margin: 0 auto; }
nav .container, .nav--minimal > .container, .nav--topbar .container, .nav--centered-logo > .container { max-width: max(var(--max-w), 1200px); }
section { padding: var(--section-py, var(--space-16)) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100%; left: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-primary); color: #fff; font-weight: 600; border-radius: var(--radius); z-index: 9999; }
.skip-link:focus { top: var(--space-2); }
.section-title { font-family: var(--font-display); font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); color: var(--color-heading, var(--color-primary)); margin-bottom: var(--space-2); text-align: center; }
.section-subtitle { color: var(--color-text-muted); margin-bottom: var(--space-8); font-size: var(--text-lg); text-align: center; max-width: none; }
.section-eyebrow { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-accent); margin-bottom: var(--space-3); text-align: center; max-width: none; }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  border: none; cursor: pointer; transition: all var(--transition);
  text-decoration: none; line-height: 1.4;
}
.btn:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-secondary { background: var(--color-bg-card); color: var(--color-heading, var(--color-primary)); border: 2px solid var(--color-heading, var(--color-primary)); }
.btn-secondary:hover { background: var(--color-heading, var(--color-primary)); color: var(--color-bg); }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }

/* Scoped to .js (set synchronously in head — see utils/js-flag.js). Without it
   these elements are simply visible: the reveal is an enhancement, not a
   precondition for reading the page. Unscoped, the opacity:0 below left the CTA
   band's heading, copy and both buttons permanently invisible with scripting
   off, and blank in any screenshot taken without scrolling the whole page. */
.js .fade-up { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
.js .fade-up.visible { opacity: 1; transform: translateY(0); }
/* Printing never scrolls, so the observer never fires for most of the page. */
@media print { .js .fade-up { opacity: 1 !important; transform: none !important; } }
.fade-up-d1 { transition-delay: 100ms; }
.fade-up-d2 { transition-delay: 200ms; }
.fade-up-d3 { transition-delay: 300ms; }
.fade-up-d4 { transition-delay: 400ms; }

/* ── Section Dividers ── */
.section-divider { margin: 0; padding: 0; line-height: 0; overflow: hidden; position: relative; z-index: 1; margin-top: -2px; margin-bottom: -2px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 80px; }
.section-divider--animated { overflow: hidden; }
.section-divider--animated svg { width: 200%; animation: wave-drift 15s linear infinite; }
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) { .section-divider svg { height: 100px; } }
@media (min-width: 1200px) { .section-divider svg { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .section-divider--animated svg { animation: none; width: 100%; } }

/* ── Dark mode global overrides ── */
body[data-dark] h1, body[data-dark] h2, body[data-dark] h3,
body[data-dark] h4, body[data-dark] h5, body[data-dark] h6 {
  color: var(--color-heading) !important;
}

body[data-dark] label,
body[data-dark] .form-label,
body[data-dark] .form-group label,
body[data-dark] legend {
  color: var(--color-on-surface) !important;
}

body[data-dark] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body[data-dark] textarea,
body[data-dark] select {
  background: var(--color-bg-card) !important;
  color: var(--color-on-card) !important;
  border-color: var(--color-border) !important;
}

body[data-dark] ::placeholder {
  color: var(--color-text-muted) !important;
}

body[data-dark] .accordion-header,
body[data-dark] summary {
  color: var(--color-heading) !important;
}

body[data-dark] a:hover,
body[data-dark] button:hover {
  color: var(--color-accent) !important;
}

body[data-dark] .checkbox-group label,
body[data-dark] .radio-group label {
  color: var(--color-on-surface) !important;
}

body[data-dark] .btn-secondary,
body[data-dark] .btn--outline {
  color: var(--color-heading) !important;
  border-color: var(--color-heading) !important;
}

/* ── Social Media Icons (shared) ── */
.social-icons {
  display: flex; gap: var(--space-3); align-items: center;
}
.social-icons--vertical {
  flex-direction: column; align-items: flex-start;
}
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: opacity 0.2s, transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.social-icon:hover { opacity: 0.85; transform: translateY(-2px); }
.social-icon svg { display: block; }

/* Filled style */
.social-icons--filled .social-icon {
  background: var(--color-heading); color: var(--color-bg);
  border-radius: 50%; padding: 8px;
}
.social-icons--filled .social-icon:hover {
  background: var(--color-accent); opacity: 1;
}

/* Outline style */
.social-icons--outline .social-icon {
  color: var(--color-heading);
  border: 1.5px solid var(--color-border);
  border-radius: 50%; padding: 7px;
}
.social-icons--outline .social-icon:hover {
  border-color: var(--color-accent);
  color: var(--color-accent); opacity: 1;
}

/* Sizes */
.social-icons--sm .social-icon svg { width: 16px; height: 16px; }
.social-icons--sm .social-icon { padding: 6px; }
.social-icons--md .social-icon svg { width: 20px; height: 20px; }
.social-icons--lg .social-icon svg { width: 28px; height: 28px; }
.social-icons--lg .social-icon { padding: 10px; }

/* Labels (shown with showLabels) */
.social-icons--filled .social-label,
.social-icons--outline .social-label { display: none; }
.social-label {
  font-size: 0.8rem; font-weight: 500; margin-left: var(--space-2);
  color: var(--color-on-surface, var(--color-text));
}
.social-icons--vertical.social-icons--outline .social-icon,
.social-icons--vertical.social-icons--filled .social-icon { border-radius: 999px; }
.social-icons--vertical .social-icon { justify-content: flex-start; }
.social-icons--vertical .social-label { display: inline; }

/* ── Footer (Part 2) ── */
.site-footer .social-icons { margin-top: var(--space-4); }
.site-footer .social-icons--filled .social-icon { background: rgba(255,255,255,0.9); color: var(--color-primary-dark); }
.site-footer .social-icons--filled .social-icon:hover { background: var(--color-accent); color: #fff; }

/* ── Content Block sidebar (Part 3) ── */
.cb-social {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-6); box-shadow: var(--shadow);
  position: sticky; top: calc(var(--space-16) + 64px);
}
.cb-social h3 {
  font-family: var(--font-display); color: var(--color-heading);
  margin-bottom: var(--space-4); font-size: 1.25rem;
}

/* ── CTA band (Part 4) — icons on a dark gradient ── */
.cta-social { margin-top: var(--space-6); display: flex; justify-content: center; }
.cta-social .social-icon { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.25); }
.cta-social .social-icon:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

/* ── Hero (Part 5) — icons on a dark gradient ── */
.hero-social { margin-top: var(--space-4); }
.hero-social .social-icon { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); }
.hero-social .social-icon:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.hero-social--below-cta { display: flex; justify-content: center; }
.hero-social--bottom-left { position: absolute; bottom: var(--space-6); left: var(--space-6); z-index: 2; margin-top: 0; }
.hero-social--bottom-right { position: absolute; bottom: var(--space-6); right: var(--space-6); z-index: 2; margin-top: 0; }

@media (max-width: 768px) {
  .hero-social--bottom-left, .hero-social--bottom-right { position: static; margin-top: var(--space-4); justify-content: center; display: flex; }
}


.form-group { margin-bottom: var(--space-5); }
.form-group label {
  display: block; font-weight: 600; font-size: var(--text-sm);
  color: var(--color-heading); margin-bottom: var(--space-1);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text); background: var(--color-bg-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(61,123,158,0.12);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; gap: var(--space-4); }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-msg {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius);
  margin-top: var(--space-4); font-size: var(--text-sm); font-weight: 500;
  animation: fadeUp 0.3s ease both;
}
.form-msg--success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.form-msg--error { background: #fce4ec; color: #c62828; border: 1px solid #ef9a9a; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.field-error { border-color: #c62828 !important; box-shadow: 0 0 0 3px rgba(198,40,40,0.12) !important; }
.field-error-msg { color: #c62828; font-size: var(--text-xs); margin-top: var(--space-1); font-weight: 500; }

@media (max-width: 768px) {
  .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
}

/* ── Page Header ── */
.page-section-wrap { margin: 0; padding: 0; }
.page-header {
  background: var(--page-header-bg, linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)));
  color: var(--page-header-color, #fff);
  padding: var(--space-12) 0 var(--space-10); margin: 0;
  overflow: hidden;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
  color: var(--page-header-heading-color, inherit);
  text-align: center; margin: 0 0 var(--space-2) 0;
}
.page-header p {
  /* Fallback is inherit, not near-white. Both header variants already soften
     their subtitle with opacity: 0.85, so the alpha baked into the old fallback
     was redundant on the dark variant and illegible on the light one — white at
     85% over slim-bar's #EFEDE8 measures 1.14:1. Inheriting takes each variant's
     own text colour, which is chosen to suit its own surface. */
  color: var(--page-header-subtitle-color, inherit);
  margin-top: var(--space-2); font-size: var(--text-lg); max-width: none; text-align: center;
}

/* ── Content Area ── */
.content-area { padding: var(--space-12) 0; }
.content-area p { margin-bottom: var(--space-4); max-width: var(--max-w-prose); }
/* Header parts are <p>: restore the max-width:none base gives them, which the
   prose rule above outranks. Margin-bottom above still applies by design. */
.content-area .section-eyebrow, .content-area .section-subtitle { max-width: none; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.two-col-wide { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }

/* ── Sidebar ── */
.sidebar-info {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-8); box-shadow: var(--shadow);
  border-top: 4px solid var(--color-accent);
}
.sidebar-info h3 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-4); }
.sidebar-info p { font-size: 0.875rem; margin-bottom: var(--space-2); }
.info-line {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2); font-size: 0.875rem;
}
.info-line .ico { color: var(--color-secondary); font-size: var(--text-lg); width: 24px; text-align: center; }
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-bottom: var(--space-6); font-weight: 600; font-size: 0.875rem; color: var(--color-secondary);
}

/* ── Cards (multi-page) ── */
.cards { display: grid; gap: var(--space-6); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-8); box-shadow: var(--shadow);
  border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card .card-icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); margin-bottom: var(--space-4);
}
.card h3 { font-family: var(--font-display); color: var(--color-primary); margin-bottom: var(--space-2); font-size: var(--text-lg); }
.card p { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0; }

/* ── Customer Portal ── */
.portal-list { max-width: 600px; margin: 0 auto; }
.portal-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); text-decoration: none;
  color: var(--color-text); transition: all var(--transition);
  background: var(--color-bg-card);
}
.portal-item:hover { border-color: var(--color-primary); background: var(--color-bg-muted); }
.portal-item .portal-icon { font-size: 24px; width: 40px; text-align: center; }
.portal-item .portal-label { font-size: var(--text-base); font-weight: 600; color: var(--color-primary); }
.portal-item .portal-desc { font-size: 0.8rem; color: var(--color-text-muted); }

/* ── Quote Pages ── */
.disclosure-box {
  background: var(--color-bg-muted); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-6);
}
.disclosure-box h3 { color: var(--color-primary); margin-bottom: var(--space-3); font-size: var(--text-base); }
.disclosure-box ul { list-style: disc; padding-left: var(--space-5); color: var(--color-text); }
.disclosure-box li { margin-bottom: var(--space-2); font-size: 0.875rem; line-height: var(--leading-relaxed); }
.option-cards { display: grid; gap: var(--space-5); }
.option-cards.cols-2 { grid-template-columns: 1fr 1fr; }
.option-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.option-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-bg-card); border: 2px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-8) var(--space-6);
  text-align: center; cursor: pointer; text-decoration: none;
  color: var(--color-primary); transition: all var(--transition);
}
.option-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.option-card .opt-icon { font-size: 2rem; margin-bottom: var(--space-3); }
.option-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.option-card p { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.product-card {
  background: var(--color-bg-card); border: 2px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6) var(--space-4);
  text-align: center; cursor: pointer; text-decoration: none;
  color: var(--color-primary); transition: all var(--transition);
}
.product-card:hover { border-color: var(--color-secondary); box-shadow: var(--shadow); }
.product-card .prod-icon { font-size: 2.5rem; margin-bottom: var(--space-2); }
.product-card h4 { font-size: 0.875rem; font-weight: 600; }
.form-section { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border-light); }
.form-section h3 { font-family: var(--font-display); color: var(--color-primary); font-size: var(--text-lg); margin-bottom: var(--space-4); }
.checkbox-group { display: flex; align-items: flex-start; gap: var(--space-2); }
.checkbox-group input[type="checkbox"] { margin-top: var(--space-1); accent-color: var(--color-primary); }

/* ── Team (multi-page) ── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.team-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-6); text-align: center;
  box-shadow: var(--shadow); border-top: 4px solid var(--color-primary);
}
.team-card .avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-3);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
  overflow: hidden;
}
.team-card .avatar--photo { background: var(--color-bg-alt); padding: 0; }
.team-card .avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-card h3 { color: var(--color-primary); font-size: var(--text-base); margin-bottom: var(--space-1); }
.team-card .team-title { font-size: 0.875rem; color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-2); }
.team-card .team-email { color: var(--color-secondary); font-size: 0.875rem; word-break: break-all; }
.team-card .team-phone { color: var(--color-text-muted); font-size: 0.875rem; }

/* ── Two-column about layout (location pages) ── */
.two-col-about { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: start; }
.back-link { font-size: 0.875rem; font-weight: 600; color: var(--color-secondary); text-decoration: none; }
.back-link:hover { color: var(--color-primary); }

/* ── Accordion (contact page locations) ── */
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); cursor: pointer;
  font-weight: 600; font-size: 0.875rem; color: var(--color-heading);
  background: var(--color-bg-card); transition: background var(--transition);
}
.accordion-header:hover { background: var(--color-bg-muted); }
.accordion-header .acc-arrow { transition: transform var(--transition); font-size: 0.8rem; color: var(--color-text-light); }
.accordion-item.open .acc-arrow { transform: rotate(180deg); }
.accordion-body {
  display: none; padding: 0 var(--space-4) var(--space-4);
  font-size: 0.875rem; line-height: var(--leading-relaxed); color: var(--color-text-muted);
}
.accordion-body p { margin-bottom: var(--space-1); }
.accordion-item.open .accordion-body { display: block; }

@media (max-width: 768px) {
  .page-header { padding: var(--space-8) 0 var(--space-6); }
  .two-col, .two-col-wide, .two-col-about { grid-template-columns: 1fr; gap: var(--space-8); }
  .option-cards.cols-2, .option-cards.cols-3 { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ── Alert Banner ── */
.alert-banner { width: 100%; }
.alert-banner--below-nav { position: relative; z-index: 1; }
.alert-banner[hidden] { display: none; }
.alert-banner__inner {
  width: 90%; max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-3) 0;
}
.alert-banner__text {
  margin: 0; font-size: var(--text-sm); font-weight: 600; text-align: center;
  max-width: none;
}
/* Size affects the bar's height and, for an uploaded banner, how tall the image
   is allowed to be. Standard reproduces the original values exactly, so a banner
   created before sizes existed renders unchanged. */
.alert-banner--compact .alert-banner__inner  { padding: var(--space-2) 0; }
.alert-banner--compact .alert-banner__text   { font-size: var(--text-xs); }
.alert-banner--compact .alert-banner__image  { max-height: 40px; }
.alert-banner--standard .alert-banner__inner { padding: var(--space-3) 0; }
.alert-banner--standard .alert-banner__text  { font-size: var(--text-sm); }
.alert-banner--standard .alert-banner__image { max-height: 72px; }
.alert-banner--tall .alert-banner__inner     { padding: var(--space-5) 0; }
.alert-banner--tall .alert-banner__text      { font-size: var(--text-base); }
.alert-banner--tall .alert-banner__image     { max-height: 120px; }
.alert-banner--full .alert-banner__inner     { padding: 0; width: 100%; max-width: var(--max-w); }
.alert-banner--full .alert-banner__text      { font-size: var(--text-base); padding: var(--space-3) 0; }
.alert-banner--full .alert-banner__image     { max-height: none; width: 100%; }
.alert-banner--full .alert-banner__imagelink { width: 100%; }
/* An uploaded banner carries its own artwork, so the coloured bar behind it is
   dropped — otherwise every image sits in a strip of brand colour it was never
   designed against. */
/* Doubled class for (0,2,0): the style rules below are single-class and defined
   later, so a single .alert-banner--image would lose the background on source
   order — which it did, silently, until this was rendered. */
.alert-banner.alert-banner--image { background: transparent; }
/* The style classes below set color:#fff for text on a coloured bar. With the
   bar dropped, that would leave an invisible white dismiss button on a light
   page, so it reverts to body text colour. */
.alert-banner--image .alert-banner__close { color: var(--color-text); }
.alert-banner--image .alert-banner__inner { padding-left: 0; padding-right: 0; }
.alert-banner__image { display: block; max-width: 100%; height: auto; }
.alert-banner__imagelink { display: block; line-height: 0; }
.alert-banner__link { text-decoration: underline; color: inherit; font-weight: 700; }
.alert-banner__link:hover { color: inherit; opacity: 0.85; }
.alert-banner__close {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: var(--text-xl); line-height: 1; padding: 0 var(--space-1);
  opacity: 0.7; flex-shrink: 0;
}
.alert-banner__close:hover { opacity: 1; }
.alert-banner--info    { background: var(--color-primary); color: #fff; }
.alert-banner--warning { background: var(--color-accent); color: var(--color-accent-text, #fff); }
.alert-banner--urgent  { background: #B3261E; color: #fff; }
@media (max-width: 768px) {
  .alert-banner__text { font-size: var(--text-xs); }
}


/* ── Rich-text content utilities (RichTextField, content profile) ── */
.rt-align-left   { text-align: left; }
.rt-align-center { text-align: center; }
.rt-align-right  { text-align: right; }

/* Theme-palette text color. The operator-facing label is on the left; note the
   two deliberate label→var renames so the picker reads "Body"/"Muted" while the
   underlying tokens stay --color-text / --color-text-muted. */
.rt-color-primary   { color: var(--color-primary); }
.rt-color-secondary { color: var(--color-secondary); }
.rt-color-accent    { color: var(--color-accent); }
.rt-color-heading   { color: var(--color-heading); }
.rt-color-body      { color: var(--color-text); }        /* label: "Body"  */
.rt-color-muted     { color: var(--color-text-muted); }  /* label: "Muted" */

/* Prose lists. Unlike the classes above this one is not authored — the content
   profile of the sanitizer stamps it on every ul/ol it emits.

   The reset in css/base.js zeroes padding on every element. That is right for
   the nav and footer link lists, which set list-style:none and lay themselves
   out, and wrong for prose: with padding-left 0 and the default marker position
   of "outside", the disc renders OUTSIDE the list's own box. Measured on a
   built page, the <li> text started at exactly the same x as the surrounding
   paragraphs — no indent at all — with the bullets hanging into the gutter.

   Restoring it here rather than as a bare "ul {}" rule is the whole point: the
   selector can only match markup that came through renderRichContent, so no
   chrome list can be caught by it, now or when a variant is added. Vertical
   rhythm is deliberately left alone — only the indent was wrong. */
.rt-list      { padding-left: var(--space-5); }
ol.rt-list    { padding-left: var(--space-6); }  /* numbers need more room than discs */

/* ── Team group headers (group_by: office | division) ── */
.team-group__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-heading);
  margin: var(--space-10) 0 var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border-light);
}
.team-group__label:first-of-type { margin-top: var(--space-4); }

/* ── Nav: top-bar ── */
.nav--topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-light);
  transition: box-shadow var(--transition);
}
.nav--topbar.scrolled { box-shadow: var(--shadow); }
.nav--topbar .header-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--header-util-font, var(--text-sm)); color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-light);
}
.nav--topbar .ht-address { font-weight: 500; }
.nav--topbar .ht-phone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-primary); color: #fff;
  font-weight: 700; font-size: var(--text-sm);
  text-decoration: none; transition: background var(--transition);
}
.nav--topbar .ht-phone:hover { background: var(--color-primary-hover); color: #fff; }
.nav--topbar .header-main {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0;
}
.nav--topbar .logo-group { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.nav--topbar .logo-circle {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-lg); font-family: var(--font-display); flex-shrink: 0;
}
/* Height-based sizing: inline max-height (= logo_size) drives height, width flows
   naturally so wide lockups render at full width instead of cramming into a square. */
.nav--topbar .logo-mark { flex-shrink: 0; }
.nav--topbar .logo-mark img { display: block; height: auto; width: auto; object-fit: contain; border-radius: var(--radius); }
.nav--topbar .logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav--topbar .logo-text strong { font-family: var(--font-display); font-size: 1.45rem; color: var(--color-heading); letter-spacing: 0.02em; }
.nav--topbar .logo-text span { font-size: var(--text-xs); font-weight: 600; color: var(--color-secondary); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.nav--topbar .main-nav ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; }
.nav--topbar .main-nav a {
  display: block; padding: var(--space-2) var(--space-3);
  font-weight: 600; font-size: 0.875rem; color: var(--nav-link-color, var(--color-heading)); border-radius: var(--radius);
  transition: background var(--transition-fast), color var(--transition-fast); text-decoration: none;
}
.nav--topbar .main-nav a:hover, .nav--topbar .main-nav a.active { background: var(--color-primary); color: var(--nav-link-active-color, #fff); }
.nav--topbar .nav-dropdown { position: relative; }
.nav--topbar .nav-dropdown > a::after { content: ' ▾'; font-size: 0.7em; }
.nav--topbar .nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 200;
  min-width: 240px; background: var(--color-bg-card);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--space-1) 0;
}
.nav--topbar .nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav--topbar .nav-dropdown-menu a { display: block; padding: var(--space-2) var(--space-4); font-size: 0.875rem; font-weight: 500; color: var(--color-heading); border-radius: 0; white-space: nowrap; }
.nav--topbar .nav-dropdown-menu a:hover { background: var(--color-bg-muted); color: var(--color-secondary); }
.nav--topbar .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); flex-direction: column; gap: 5px; }
.nav--topbar .nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--color-heading); border-radius: 2px; transition: all var(--transition); }

@media (max-width: 768px) {
  .nav--topbar .header-top { display: none; }
  .nav--topbar .header-main { padding: var(--space-2) 0; }
  /* Clamp logo height on small screens so a tall logo can't blow out the bar.
     !important to override the inline per-size max-height (mirrors centered-logo). */
  .nav--topbar .logo-mark img { max-height: 48px !important; max-width: 70vw !important; }
  .nav--topbar .logo-text strong { font-size: var(--text-lg); }
  .nav--topbar .nav-toggle { display: flex; }
  .nav--topbar .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-card); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: var(--space-2); }
  .nav--topbar .main-nav.open { display: block; }
  .nav--topbar .main-nav ul { flex-direction: column; gap: 0; }
  .nav--topbar .main-nav a { padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
  .nav--topbar .nav-dropdown-menu { position: static; box-shadow: none; border: none; padding-left: var(--space-4); display: none; min-width: 0; }
  .nav--topbar .nav-dropdown.open > .nav-dropdown-menu { display: block; }
}

/* ── Footer: columns-dark ── */
.footer-logo { text-align: center; padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo__img { max-height: 60px; object-fit: contain; opacity: 0.9; }
.footer-logo__img:hover { opacity: 1; }
.footer-logo__circle { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); align-items: center; justify-content: center; font-size: var(--text-lg); font-weight: 700; font-family: var(--font-display); text-decoration: none; }
.footer-partner { margin-left: auto; }
.footer-partner__img { max-height: 40px; width: auto; opacity: 0.85; transition: opacity 0.2s; }
.footer-partner__img:hover { opacity: 1; }
.footer--columns {
  background: var(--color-primary-dark); color: rgba(255,255,255,0.75);
  padding: var(--space-12) 0 var(--space-6);
}
.footer--columns .footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-8); margin-bottom: var(--space-8);
}
.footer--columns .footer-col h4 {
  font-family: var(--font-display); color: var(--color-accent);
  margin-bottom: var(--space-4); font-size: var(--text-base);
}
.footer--columns .footer-col p,
.footer--columns .footer-col li { font-size: 0.875rem; line-height: var(--leading-relaxed); }
.footer--columns .footer-col ul { list-style: none; }
.footer--columns .footer-col li { margin-bottom: var(--space-1); }
.footer--columns .footer-col a { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); }
.footer--columns .footer-col a:hover { color: var(--color-accent); }
.footer--columns .footer-disclaimer {
  max-width: 70ch; margin: var(--space-5) auto 0; padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--text-xs); font-style: italic; line-height: 1.6;
  color: rgba(255,255,255,0.75); text-align: center;
}
.footer--columns .footer-disclaimer a { color: rgba(255,255,255,0.75); text-decoration: underline; }
.footer--columns .footer-disclaimer a:hover { color: var(--color-accent); }
.footer--columns .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-5);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2); font-size: 0.8rem;
}
.footer--columns .footer-bottom a { color: rgba(255,255,255,0.6); text-decoration: underline; }
.footer--columns .footer-bottom a:hover { color: var(--color-accent); }
/* Licensing sits ABOVE the rule, on the container's left edge — the same edge
   the Contact Us column starts on. It used to ride in .footer-bottom, whose
   justify-content: space-between pushed it to the far right of the copyright
   line, where it read as legal chrome rather than as agency information.
   display:block is what makes it a line of its own; the explicit font-size
   replaces the 0.8rem it used to inherit from .footer-bottom. */
.footer--columns .footer-states {
  display: block; text-align: left; font-style: italic; opacity: 0.65;
  font-size: 0.8rem; margin-bottom: var(--space-5);
}

@media (max-width: 768px) { .footer--columns .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ── Mobile Bar: phone-email-quote ── */
.mobile-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  background: var(--color-primary-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-2) 0;
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1; padding: var(--space-2) var(--space-3);
  color: rgba(255,255,255,0.8); text-decoration: none;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; transition: color var(--transition-fast);
}
.mobile-bar a:hover, .mobile-bar a:active { color: #fff; }
.mobile-bar__item--call { color: #fff; }
.mobile-bar__item--quote { color: var(--color-accent); }
.mobile-bar__item--quote:hover { color: var(--color-accent-light); }

@media (max-width: 768px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 68px; }
  .site-footer { padding-bottom: var(--space-16); }
}

/* ── Hero: if-then-cta ── */
.hero--ifthen {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 40%, var(--color-primary-light) 100%);
  color: #fff;
}
.hero--ifthen .hero__bg {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero--ifthen.hero--has-image .hero__bg {
  background-size: cover; background-position: center;
  filter: brightness(0.35);
}
.hero--ifthen .hero__content {
  position: relative; z-index: 1;
  padding: 4.5rem 0 4rem;
  text-align: center;
}
.hero--ifthen h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
  font-weight: 700; margin-bottom: var(--space-2); color: #fff;
  text-align: center;
}
.hero--ifthen__subtitle {
  font-size: clamp(0.875rem, 1.8vw, var(--text-lg));
  opacity: 0.85; max-width: 640px; margin: 0 auto var(--space-10);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-family: var(--font-body); color: #fff;
  line-height: var(--leading-normal);
  text-align: center;
}
.hero-cta-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  max-width: 680px; margin: 0 auto;
}
.hero-cta-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md); padding: var(--space-10) var(--space-6);
  text-align: center; text-decoration: none; color: #fff;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.hero-cta-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.14);
  border-color: var(--color-accent); color: #fff;
}
.hero-cta-card__icon { font-size: 2.5rem; margin-bottom: var(--space-3); color: #fff; }
.hero-cta-card h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  margin-bottom: var(--space-2); color: #fff;
}
.hero-cta-card p { font-size: 0.875rem; opacity: 0.75; margin-bottom: 0; }

@media (max-width: 768px) {
  .hero-cta-cards { grid-template-columns: 1fr; max-width: 360px; }
  .hero--ifthen .hero__content { padding: var(--space-10) 0 var(--space-8); }
}

/* ── Stats: horizontal-bar ── */
.stats-bar {
  background: var(--color-primary); color: #fff;
}
.stats-bar .container {
  display: flex; justify-content: space-around; flex-wrap: wrap;
  padding: var(--space-8) 0; text-align: center; gap: var(--space-6);
}
.stats-item__number {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--color-accent);
}
.stats-item__label {
  font-size: 1rem; color: rgba(255,255,255,0.9);
  margin-top: var(--space-1);
}

/* Icon mode */
.stats-item--icon { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.stats-item__icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 2px solid var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--color-accent);
}

/* Emphasis mode */
.stats-item--emphasis { text-align: center; }
.stats-item--emphasis .stats-item__number { font-size: 2.5rem; }
.stats-item__divider { width: 30px; height: 3px; background: var(--color-accent); margin: var(--space-2) auto; }

@media (max-width: 768px) {
  .stats-bar .container {
    flex-direction: column; align-items: center;
    gap: var(--space-6); padding: var(--space-6) 0;
  }
  .stats-item__number { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .stats-bar .container { gap: var(--space-4); }
}

/* ── Services: photo-grid ── */
.svc-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  margin-top: var(--space-8);
}
.svc-photo-bottom {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
  max-width: 67%; margin: var(--space-5) auto 0;
}
.svc-photo-card {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-bg-card);
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none; color: inherit; display: block;
}
.svc-photo-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

/* Photo card — image area */
.svc-photo-card__image {
  height: var(--photo-h, 200px); position: relative;
  background-size: cover; background-position: center;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.svc-photo-card:hover .svc-photo-card__image {
  transform: scale(1.05);
}
/* Wrapper to contain the zoom */
.svc-photo-card { overflow: hidden; }

/* Gradient overlay for text readability */
.svc-photo-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27,46,90,0.85) 0%, rgba(27,46,90,0.3) 50%, transparent 100%);
  display: flex; align-items: flex-end; padding: var(--space-4);
}
.svc-photo-card__label {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: #fff; margin: 0; width: 100%;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  text-align: center;
}

/* Icon fallback card */
.svc-photo-card--icon .svc-photo-card__icon-area {
  height: var(--photo-h, 200px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-bg) 100%);
  padding: var(--space-4);
}
.svc-photo-card__icon-circle {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: var(--space-3);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff;
}
.svc-photo-card__label--dark {
  color: var(--color-heading); text-shadow: none;
  align-self: stretch;
}

/* Description body */
.svc-photo-card__body {
  padding: var(--space-4); font-size: 0.875rem;
  color: var(--color-text-muted); line-height: var(--leading-relaxed);
  text-align: center;
}
.svc-photo-card__body p { max-width: none; margin: 0; }

@media (max-width: 768px) {
  .svc-photo-grid { grid-template-columns: 1fr; }
  .svc-photo-bottom { grid-template-columns: 1fr; max-width: 100%; }
}

/* ── Text-block: section-with-bg ── */
.section-bg {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: var(--space-16) 0;
}
.section-bg__content {
  max-width: 860px; margin: 0 auto;
}
.section-bg .section-title { color: var(--color-accent); }
.section-bg .section-subtitle { color: rgba(255,255,255,0.8); margin-bottom: var(--space-6); }
.section-bg p { color: rgba(255,255,255,0.9); margin-bottom: var(--space-4); max-width: none; }
.section-bg--reading p:not(.section-subtitle) { max-width: var(--max-w-prose); margin-left: auto; margin-right: auto; }
.section-bg__actions {
  display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-6);
}
.section-bg .btn-primary { background: var(--color-accent); color: var(--color-primary-dark); }
.section-bg .btn-primary:hover { background: var(--color-accent-light); }
.btn--outline-light {
  background: transparent; color: var(--color-accent);
  border: 2px solid var(--color-accent);
}
.btn--outline-light:hover { background: var(--color-accent); color: var(--color-primary-dark); }

/* Glass-morphism for cards inside section-bg */
.section-bg .card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15); color: #fff;
}
.section-bg .card h3 { color: var(--color-accent); }

@media (max-width: 768px) {
  .section-bg { background-attachment: scroll; }
}

/* ── Locations: card-grid ── */
.section-locations { background: var(--color-bg); }
.location-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.location-card {
  background: var(--color-bg-card); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}
.location-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.location-card__header {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
  color: #fff; padding: var(--space-3) var(--space-4);
  font-weight: 600; font-size: var(--text-base); font-family: var(--font-display);
}
.location-card__body {
  padding: var(--space-3) var(--space-4); font-size: 0.875rem;
  line-height: var(--leading-relaxed); color: var(--color-text-muted);
}
.location-card__row {
  display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-1);
}
.location-card__row:last-child { margin-bottom: 0; }
.location-card__icon { flex-shrink: 0; width: 18px; text-align: center; }
.location-card__row a { color: var(--color-link); text-decoration: none; }
.location-card__row a:hover { color: var(--color-primary); }
.location-card__footer {
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-light);
}
.location-card__footer a {
  font-size: 0.875rem; font-weight: 600; color: var(--color-link);
  text-decoration: none; display: flex; align-items: center; gap: var(--space-1);
  transition: color var(--transition-fast);
}
.location-card__footer a:hover { color: var(--color-primary); }

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

/* ── CTA: band ── */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: var(--space-16) 0; text-align: center;
}
.cta-band h2 { font-family: var(--font-display); color: var(--color-accent); font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); margin-bottom: var(--space-3); }
.cta-band p { font-size: var(--text-lg); opacity: 0.85; max-width: 540px; margin: 0 auto var(--space-8); }
.cta-band__actions { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.cta-band .btn--outline-white {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
}
.cta-band .btn--outline-white:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: #fff;
}
@media (max-width: 768px) {
  .cta-band__actions { flex-direction: column; align-items: center; }
  .cta-band__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ── Hero: if-then-cta ── */
.hero--ifthen {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 40%, var(--color-primary-light) 100%);
  color: #fff;
}
.hero--ifthen .hero__bg {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero--ifthen.hero--has-image .hero__bg {
  background-size: cover; background-position: center;
  filter: brightness(0.35);
}
.hero--ifthen .hero__content {
  position: relative; z-index: 1;
  padding: 4.5rem 0 4rem;
  text-align: center;
}
.hero--ifthen h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
  font-weight: 700; margin-bottom: var(--space-2); color: #fff;
  text-align: center;
}
.hero--ifthen__subtitle {
  font-size: clamp(0.875rem, 1.8vw, var(--text-lg));
  opacity: 0.85; max-width: 640px; margin: 0 auto var(--space-10);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-family: var(--font-body); color: #fff;
  line-height: var(--leading-normal);
  text-align: center;
}
.hero-cta-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  max-width: 680px; margin: 0 auto;
}
.hero-cta-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md); padding: var(--space-10) var(--space-6);
  text-align: center; text-decoration: none; color: #fff;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.hero-cta-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.14);
  border-color: var(--color-accent); color: #fff;
}
.hero-cta-card__icon { font-size: 2.5rem; margin-bottom: var(--space-3); color: #fff; }
.hero-cta-card h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  margin-bottom: var(--space-2); color: #fff;
}
.hero-cta-card p { font-size: 0.875rem; opacity: 0.75; margin-bottom: 0; }

@media (max-width: 768px) {
  .hero-cta-cards { grid-template-columns: 1fr; max-width: 360px; }
  .hero--ifthen .hero__content { padding: var(--space-10) 0 var(--space-8); }
}

/* ── Services: grid-3-2 ── */
.svc32-section { background: var(--color-bg-muted); padding: var(--space-16) 0; }
.svc32-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.svc32-card {
  text-align: center; text-decoration: none; color: inherit;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc32-card p { max-width: none; }
.svc32-card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.svc32-card .svc32-icon {
  margin: 0 auto var(--space-4);
  width: 58px; height: 58px; font-size: 1.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.svc32-photo { margin-bottom: var(--space-4); border-radius: var(--radius); overflow: hidden; }
.svc32-photo img { width: 100%; height: 140px; object-fit: cover; display: block; }
.svc32-bottom {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6); margin-top: var(--space-6);
  max-width: 67%; margin-left: auto; margin-right: auto;
}
.svc32-bottom .card {
  text-align: center; text-decoration: none; color: inherit;
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc32-bottom .card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.svc32-bottom .card .card-icon {
  margin: 0 auto var(--space-4);
  width: 58px; height: 58px; font-size: 1.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 768px) {
  .svc32-grid { grid-template-columns: 1fr; }
  .svc32-bottom { grid-template-columns: 1fr; max-width: 100%; }
}



/* ── Carriers: card-v2-detail ── */
.cc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.cc-card {
  background: var(--color-bg-card); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cc-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light);
}
.cc-logo {
  max-width: 120px; height: auto; max-height: 48px; border-radius: var(--radius);
  object-fit: contain; background: rgba(255,255,255,0.92);
  border: 1px solid var(--color-border-light); padding: 4px; flex-shrink: 0;
}
.cc-logo--wordmark {
  width: auto;
  max-width: 120px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 6px;
}
.cc-name { font-weight: 600; font-size: var(--text-base); color: var(--color-heading); font-family: var(--font-display); }
.cc-domain { font-size: 0.8rem; color: var(--color-text-muted); }
.cc-domain a { color: var(--color-link); }
.cc-info { padding: var(--space-3) var(--space-5); font-size: 0.875rem; color: var(--color-text-muted); }
.cc-val { color: var(--color-text); font-weight: 500; }
.cc-val--muted { font-style: italic; font-weight: 400; color: var(--color-text-light); }
.cc-actions { display: flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); }
.cc-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 600;
  text-decoration: none; text-align: center; transition: all var(--transition);
}
.cc-btn--claims {
  background: rgba(61,123,158,0.08); color: var(--color-link);
  border: 1px solid rgba(61,123,158,0.2);
}
.cc-btn--claims:hover { background: rgba(61,123,158,0.15); }
.cc-btn--payment {
  background: rgba(27,46,90,0.06); color: var(--color-heading);
  border: 1px solid rgba(27,46,90,0.15);
}
.cc-btn--payment:hover { background: rgba(27,46,90,0.12); }
.cc-btn--disabled { opacity: 0.4; pointer-events: none; }
/* Optional third action — see submitClaimButton(). css() takes no ctx, so these
   rules ship in every card-v2-detail stylesheet; they are inert until the
   section adds the class, which is what keeps the MARKUP byte-identical for
   sites that have not turned the button on.

   It SHARES the claims line rather than taking a row of its own, so the button
   lands exactly above "Online Payment" and the card reads as two button columns
   instead of three stacked rows. That alignment is the whole point of the
   request, which is why the gap and horizontal padding here must stay in step
   with .cc-actions below.

   GRID, not flex, and this is load-bearing — it shipped as flex and was 13px
   wrong. With the global 'box-sizing: border-box', a border-box width of 0
   cannot go below the element's own padding and border, so 'flex-basis: 0' on
   the button floors at 26px (12+12 padding, 1+1 border) while the bare text
   span floors at 0. Free space is then split evenly ON TOP of unequal bases:
   257 for the text, 283 for the button, which is why it hung 13px left of
   "Online Payment" and rendered 13px wider. Two flex items with identical
   'flex: 1' are only equal when their padding is identical, and here one side
   is a padded button and the other is bare text. '1fr 1fr' columns are
   measured from the container instead, so the padding cannot leak into the
   track size. Do not "simplify" this back to flex.

   Under 480px a card is too narrow to hold "Emergency: 800.527.3905" and a
   button side by side, so there it stacks — which is exactly the full-width
   row this used to be, kept as the small-screen case rather than the default. */
.cc-info--with-claim { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-2); }
.cc-info--with-claim .cc-info-text { min-width: 0; }

/* Filled, where the other two are tinted.
   With three actions on a card, Submit a Claim was wearing the same tint as the
   claims button beside it, so two of the three read as one thing. The answer is
   not a third tint — three competing tints is noise — but a hierarchy: ONE
   primary action, filled, above two secondary ones. Filing a claim is what this
   card exists for; Contact Agent and Online Payment are the alternates.

   Two-class selector on purpose. The button carries cc-btn--claims too, and
   (0,2,0) beats that rule wherever either sits in the stylesheet — this must not
   depend on source order. Palette tokens, not the hardcoded rgba() the two tints
   above still use, so it retunes with the agency's colours.

   Scoped to a class that exists only where the feature is switched on, so no
   site that has not asked for the button can be affected by any of it. */
.cc-btn--claims.cc-btn--submit-claim {
  background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
}
.cc-btn--claims.cc-btn--submit-claim:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

@media (max-width: 768px) { .cc-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .cc-info--with-claim { display: block; }
  .cc-info--with-claim .cc-btn--submit-claim { margin-top: var(--space-2); }
}

/* ── Team: card-grid ── */
.section-team { background: var(--color-bg-muted); }
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}
.team-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-8); text-align: center;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--color-primary);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-card__avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--space-4);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  letter-spacing: 1px; overflow: hidden;
}
.team-card__avatar--photo { background: var(--color-bg-alt); padding: 0; }
.team-card__avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-card__avatar--silhouette { background: none; padding: 0; }
.team-card__avatar--silhouette svg { width: 100%; height: 100%; border-radius: 50%; }
.team-card__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-heading); margin-bottom: var(--space-1); }
.team-card__role { font-size: 0.875rem; color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-3); }
.team-card__contact { display: flex; flex-direction: column; gap: var(--space-1); }
.team-card__email, .team-card__phone {
  font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none;
  transition: color var(--transition-fast);
}
.team-card__email:hover, .team-card__phone:hover { color: var(--color-secondary); }
.team-card__location {
  margin-top: var(--space-2); font-size: 0.8rem;
  color: var(--color-text-muted); font-weight: 500;
}

@media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } }

/* ── CTA: band ── */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: var(--space-16) 0; text-align: center;
}
.cta-band h2 { font-family: var(--font-display); color: var(--color-accent); font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); margin-bottom: var(--space-3); }
.cta-band p { font-size: var(--text-lg); opacity: 0.85; max-width: 540px; margin: 0 auto var(--space-8); }
.cta-band__actions { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.cta-band .btn--outline-white {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
}
.cta-band .btn--outline-white:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: #fff;
}
@media (max-width: 768px) {
  .cta-band__actions { flex-direction: column; align-items: center; }
  .cta-band__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ── Contact: two-col-form-accordion extras ── */
.map-embed {
  width: 100%; height: 280px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--color-border-light);
}
.map-embed iframe { width: 100%; height: 100%; border: none; }

/* ── Quote: inline-compact ── */
.section-quote {
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  padding: var(--space-20) 0;
}
.quote-wrap {
  max-width: 640px; margin: 0 auto;
}
.quote-header { text-align: center; margin-bottom: var(--space-8); }
.quote-form {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-8); box-shadow: var(--shadow-lg);
}
.quote-types { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.quote-type-option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition-fast); color: var(--color-text);
}
.quote-type-option:hover { border-color: var(--color-primary); color: var(--color-primary); }
.quote-type-option input { accent-color: var(--color-primary); }
.quote-type-option:has(input:checked) {
  background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600;
}
.quote-disclosure { font-size: 0.8rem; color: var(--color-text-light); margin-top: var(--space-4); margin-bottom: 0; line-height: var(--leading-relaxed); }

@media (max-width: 768px) {
  .quote-form { padding: var(--space-6); }
  .quote-types { gap: var(--space-2); }
}

/* ── Stats: horizontal-bar ── */
.stats-bar {
  background: var(--color-primary); color: #fff;
}
.stats-bar .container {
  display: flex; justify-content: space-around; flex-wrap: wrap;
  padding: var(--space-8) 0; text-align: center; gap: var(--space-6);
}
.stats-item__number {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--color-accent);
}
.stats-item__label {
  font-size: 1rem; color: rgba(255,255,255,0.9);
  margin-top: var(--space-1);
}

/* Icon mode */
.stats-item--icon { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.stats-item__icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 2px solid var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--color-accent);
}

/* Emphasis mode */
.stats-item--emphasis { text-align: center; }
.stats-item--emphasis .stats-item__number { font-size: 2.5rem; }
.stats-item__divider { width: 30px; height: 3px; background: var(--color-accent); margin: var(--space-2) auto; }

@media (max-width: 768px) {
  .stats-bar .container {
    flex-direction: column; align-items: center;
    gap: var(--space-6); padding: var(--space-6) 0;
  }
  .stats-item__number { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .stats-bar .container { gap: var(--space-4); }
}







/* ── Quote Selector: horizontal ── */
.quote-selector { padding: var(--space-16) 0; }
.quote-selector--horizontal { background: var(--color-bg); }

.qs-options { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }

/* ── Card size scale ── shared small/medium/large/xlarge vocabulary (see
   utils/card-size.js). The container class publishes the scale as custom
   properties; the card rules below are written once against those vars, so
   every size — and the mobile step-down — flows through one set of rules. */
.qs-options--size-small { --qs-icon-min: 100px; --qs-icon-pad-y: var(--space-4); --qs-icon-pad-x: var(--space-5); --qs-icon-glyph: 1.75rem; --qs-label: 0.8125rem; --qs-photo-w: 130px; --qs-photo-label: 0.75rem; --qs-pill-pad-y: var(--space-2); --qs-pill-pad-x: var(--space-4); --qs-pill-font: 0.8125rem; }
.qs-options--size-medium { --qs-icon-min: 120px; --qs-icon-pad-y: var(--space-5); --qs-icon-pad-x: var(--space-6); --qs-icon-glyph: 2rem; --qs-label: 0.875rem; --qs-photo-w: 160px; --qs-photo-label: 0.8rem; --qs-pill-pad-y: var(--space-2); --qs-pill-pad-x: var(--space-5); --qs-pill-font: 0.875rem; }
.qs-options--size-large { --qs-icon-min: 160px; --qs-icon-pad-y: var(--space-6); --qs-icon-pad-x: var(--space-8); --qs-icon-glyph: 2.5rem; --qs-label: 1rem; --qs-photo-w: 220px; --qs-photo-label: 0.9rem; --qs-pill-pad-y: var(--space-3); --qs-pill-pad-x: var(--space-6); --qs-pill-font: 1rem; }
.qs-options--size-xlarge { --qs-icon-min: 200px; --qs-icon-pad-y: var(--space-8); --qs-icon-pad-x: var(--space-10); --qs-icon-glyph: 3rem; --qs-label: 1.125rem; --qs-photo-w: 280px; --qs-photo-label: 1rem; --qs-pill-pad-y: var(--space-4); --qs-pill-pad-x: var(--space-8); --qs-pill-font: 1.125rem; }

/* Icon cards */
.qs-option--icon {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--qs-icon-pad-y, var(--space-6)) var(--qs-icon-pad-x, var(--space-8)); border-radius: var(--radius-md);
  background: var(--color-bg-card); border: 2px solid var(--color-border-light);
  cursor: pointer; transition: all 0.2s ease; min-width: var(--qs-icon-min, 160px); text-align: center;
}
.qs-option__icon { font-size: var(--qs-icon-glyph, 2.5rem); }
.qs-option__label { font-size: var(--qs-label, 1rem); font-weight: 600; color: var(--color-text); }
.qs-option--icon:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.qs-option--icon.active { border-color: var(--color-primary); background: var(--color-primary); }
.qs-option--icon.active .qs-option__label { color: #fff; }
.qs-option--icon.active .qs-option__icon { filter: brightness(10); }

/* Photo cards */
.qs-option--photo {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; width: var(--qs-photo-w, 220px); aspect-ratio: 4 / 3;
  border: 3px solid transparent; transition: all 0.2s ease;
}
.qs-option--photo img { width: 100%; height: 100%; object-fit: cover; }
.qs-option--photo .qs-option__label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff; font-size: var(--qs-photo-label, 0.9rem); font-weight: 600;
  padding: var(--space-4) var(--space-2) var(--space-2);
}
.qs-option--photo:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.qs-option--photo.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }

/* Pill buttons */
.qs-option--pill {
  padding: var(--qs-pill-pad-y, var(--space-3)) var(--qs-pill-pad-x, var(--space-6)); border-radius: var(--radius-full);
  background: var(--color-bg-muted); font-size: var(--qs-pill-font, 1rem); font-weight: 600;
  color: var(--color-text); cursor: pointer; transition: all 0.2s ease;
  border: 2px solid transparent;
}
.qs-option--pill:hover { background: var(--color-bg-card); border-color: var(--color-primary); }
.qs-option--pill.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Form container */
.qs-form-container {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease-out;
  background: var(--color-bg-card); border-radius: var(--radius-md);
}
.qs-form-container.open { overflow: visible; border: 1px solid var(--color-border-light); padding: var(--space-8); }

.qs-form h3 { font-family: var(--font-display); }

@media (max-width: 768px) {
  .qs-options { gap: var(--space-3); }
  /* Mobile step-down of the same scale. Redeclaring the vars (rather than
     overriding the card rules) keeps specificity out of it — a
     .qs-options--size-x .qs-option override would outrank the base rule here
     and defeat the step-down entirely. */
.qs-options--size-small { --qs-icon-min: 80px; --qs-icon-pad-y: var(--space-3); --qs-icon-pad-x: var(--space-3); --qs-icon-glyph: 1.375rem; --qs-photo-w: 100px; }
.qs-options--size-medium { --qs-icon-min: 90px; --qs-icon-pad-y: var(--space-3); --qs-icon-pad-x: var(--space-4); --qs-icon-glyph: 1.5rem; --qs-photo-w: 120px; }
.qs-options--size-large { --qs-icon-min: 120px; --qs-icon-pad-y: var(--space-4); --qs-icon-pad-x: var(--space-5); --qs-icon-glyph: 1.875rem; --qs-photo-w: 150px; }
.qs-options--size-xlarge { --qs-icon-min: 140px; --qs-icon-pad-y: var(--space-5); --qs-icon-pad-x: var(--space-6); --qs-icon-glyph: 2.125rem; --qs-photo-w: 170px; }
  /* Cap width so even xlarge stays 2-up inside the container rather than
     overflowing at phone width. */
  .qs-option--icon { min-width: min(var(--qs-icon-min, 120px), 42vw); }
  .qs-option--photo { width: min(var(--qs-photo-w, 150px), 42vw); }
  .qs-form-container.open { padding: var(--space-4); }
}

/* ── FAQ: accordion ── */
.faq { padding: var(--section-py) 0; }
.faq__list { max-width: 820px; margin: 0 auto; }

.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--color-primary); }

.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-heading);
  list-style: none;
}
/* The default disclosure marker, removed in both dialects. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { background: var(--color-bg-muted); }
.faq__q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.faq__q-text { flex: 1; }

/* Drawn rather than typed: a "+" glyph shifts baseline between fonts, and this
   section is one of the few a customer reads at length. */
.faq__icon {
  position: relative; flex-shrink: 0; width: 14px; height: 14px;
  transition: transform 0.2s ease;
}
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: var(--color-primary);
  top: 50%; left: 0; width: 14px; height: 2px; margin-top: -1px;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-body);
}
.faq__a p { margin: 0 0 var(--space-3); max-width: none; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul, .faq__a ol { margin: 0 0 var(--space-3) var(--space-5); }

@media (max-width: 600px) {
  .faq__q { padding: var(--space-3) var(--space-4); }
  .faq__a { padding: 0 var(--space-4) var(--space-4); }
}


/* ── Hero: if-then-cta ── */
.hero--ifthen {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 40%, var(--color-primary-light) 100%);
  color: #fff;
}
.hero--ifthen .hero__bg {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero--ifthen.hero--has-image .hero__bg {
  background-size: cover; background-position: center;
  filter: brightness(0.35);
}
.hero--ifthen .hero__content {
  position: relative; z-index: 1;
  padding: 4.5rem 0 4rem;
  text-align: center;
}
.hero--ifthen h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
  font-weight: 700; margin-bottom: var(--space-2); color: #fff;
  text-align: center;
}
.hero--ifthen__subtitle {
  font-size: clamp(0.875rem, 1.8vw, var(--text-lg));
  opacity: 0.85; max-width: 640px; margin: 0 auto var(--space-10);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-family: var(--font-body); color: #fff;
  line-height: var(--leading-normal);
  text-align: center;
}
.hero-cta-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  max-width: 680px; margin: 0 auto;
}
.hero-cta-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md); padding: var(--space-10) var(--space-6);
  text-align: center; text-decoration: none; color: #fff;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.hero-cta-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.14);
  border-color: var(--color-accent); color: #fff;
}
.hero-cta-card__icon { font-size: 2.5rem; margin-bottom: var(--space-3); color: #fff; }
.hero-cta-card h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  margin-bottom: var(--space-2); color: #fff;
}
.hero-cta-card p { font-size: 0.875rem; opacity: 0.75; margin-bottom: 0; }

@media (max-width: 768px) {
  .hero-cta-cards { grid-template-columns: 1fr; max-width: 360px; }
  .hero--ifthen .hero__content { padding: var(--space-10) 0 var(--space-8); }
}

/* ── Stats: horizontal-bar ── */
.stats-bar {
  background: var(--color-primary); color: #fff;
}
.stats-bar .container {
  display: flex; justify-content: space-around; flex-wrap: wrap;
  padding: var(--space-8) 0; text-align: center; gap: var(--space-6);
}
.stats-item__number {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--color-accent);
}
.stats-item__label {
  font-size: 1rem; color: rgba(255,255,255,0.9);
  margin-top: var(--space-1);
}

/* Icon mode */
.stats-item--icon { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.stats-item__icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 2px solid var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--color-accent);
}

/* Emphasis mode */
.stats-item--emphasis { text-align: center; }
.stats-item--emphasis .stats-item__number { font-size: 2.5rem; }
.stats-item__divider { width: 30px; height: 3px; background: var(--color-accent); margin: var(--space-2) auto; }

@media (max-width: 768px) {
  .stats-bar .container {
    flex-direction: column; align-items: center;
    gap: var(--space-6); padding: var(--space-6) 0;
  }
  .stats-item__number { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .stats-bar .container { gap: var(--space-4); }
}

/* ── Services: photo-grid ── */
.svc-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  margin-top: var(--space-8);
}
.svc-photo-bottom {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5);
  max-width: 67%; margin: var(--space-5) auto 0;
}
.svc-photo-card {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-bg-card);
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none; color: inherit; display: block;
}
.svc-photo-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

/* Photo card — image area */
.svc-photo-card__image {
  height: var(--photo-h, 200px); position: relative;
  background-size: cover; background-position: center;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.svc-photo-card:hover .svc-photo-card__image {
  transform: scale(1.05);
}
/* Wrapper to contain the zoom */
.svc-photo-card { overflow: hidden; }

/* Gradient overlay for text readability */
.svc-photo-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27,46,90,0.85) 0%, rgba(27,46,90,0.3) 50%, transparent 100%);
  display: flex; align-items: flex-end; padding: var(--space-4);
}
.svc-photo-card__label {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: #fff; margin: 0; width: 100%;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  text-align: center;
}

/* Icon fallback card */
.svc-photo-card--icon .svc-photo-card__icon-area {
  height: var(--photo-h, 200px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-bg-muted) 0%, var(--color-bg) 100%);
  padding: var(--space-4);
}
.svc-photo-card__icon-circle {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: var(--space-3);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff;
}
.svc-photo-card__label--dark {
  color: var(--color-heading); text-shadow: none;
  align-self: stretch;
}

/* Description body */
.svc-photo-card__body {
  padding: var(--space-4); font-size: 0.875rem;
  color: var(--color-text-muted); line-height: var(--leading-relaxed);
  text-align: center;
}
.svc-photo-card__body p { max-width: none; margin: 0; }

@media (max-width: 768px) {
  .svc-photo-grid { grid-template-columns: 1fr; }
  .svc-photo-bottom { grid-template-columns: 1fr; max-width: 100%; }
}

/* ── Text-block: section-with-bg ── */
.section-bg {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: var(--space-16) 0;
}
.section-bg__content {
  max-width: 860px; margin: 0 auto;
}
.section-bg .section-title { color: var(--color-accent); }
.section-bg .section-subtitle { color: rgba(255,255,255,0.8); margin-bottom: var(--space-6); }
.section-bg p { color: rgba(255,255,255,0.9); margin-bottom: var(--space-4); max-width: none; }
.section-bg--reading p:not(.section-subtitle) { max-width: var(--max-w-prose); margin-left: auto; margin-right: auto; }
.section-bg__actions {
  display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-6);
}
.section-bg .btn-primary { background: var(--color-accent); color: var(--color-primary-dark); }
.section-bg .btn-primary:hover { background: var(--color-accent-light); }
.btn--outline-light {
  background: transparent; color: var(--color-accent);
  border: 2px solid var(--color-accent);
}
.btn--outline-light:hover { background: var(--color-accent); color: var(--color-primary-dark); }

/* Glass-morphism for cards inside section-bg */
.section-bg .card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15); color: #fff;
}
.section-bg .card h3 { color: var(--color-accent); }

@media (max-width: 768px) {
  .section-bg { background-attachment: scroll; }
}

/* ── Locations: card-grid ── */
.section-locations { background: var(--color-bg); }
.location-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.location-card {
  background: var(--color-bg-card); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}
.location-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.location-card__header {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
  color: #fff; padding: var(--space-3) var(--space-4);
  font-weight: 600; font-size: var(--text-base); font-family: var(--font-display);
}
.location-card__body {
  padding: var(--space-3) var(--space-4); font-size: 0.875rem;
  line-height: var(--leading-relaxed); color: var(--color-text-muted);
}
.location-card__row {
  display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-1);
}
.location-card__row:last-child { margin-bottom: 0; }
.location-card__icon { flex-shrink: 0; width: 18px; text-align: center; }
.location-card__row a { color: var(--color-link); text-decoration: none; }
.location-card__row a:hover { color: var(--color-primary); }
.location-card__footer {
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-light);
}
.location-card__footer a {
  font-size: 0.875rem; font-weight: 600; color: var(--color-link);
  text-decoration: none; display: flex; align-items: center; gap: var(--space-1);
  transition: color var(--transition-fast);
}
.location-card__footer a:hover { color: var(--color-primary); }

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

/* ── CTA: band ── */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff; padding: var(--space-16) 0; text-align: center;
}
.cta-band h2 { font-family: var(--font-display); color: var(--color-accent); font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); margin-bottom: var(--space-3); }
.cta-band p { font-size: var(--text-lg); opacity: 0.85; max-width: 540px; margin: 0 auto var(--space-8); }
.cta-band__actions { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.cta-band .btn--outline-white {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
}
.cta-band .btn--outline-white:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: #fff;
}
@media (max-width: 768px) {
  .cta-band__actions { flex-direction: column; align-items: center; }
  .cta-band__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
}



/* ── Carriers: card-v2-detail ── */
.cc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.cc-card {
  background: var(--color-bg-card); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cc-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light);
}
.cc-logo {
  max-width: 120px; height: auto; max-height: 48px; border-radius: var(--radius);
  object-fit: contain; background: rgba(255,255,255,0.92);
  border: 1px solid var(--color-border-light); padding: 4px; flex-shrink: 0;
}
.cc-logo--wordmark {
  width: auto;
  max-width: 120px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 6px;
}
.cc-name { font-weight: 600; font-size: var(--text-base); color: var(--color-heading); font-family: var(--font-display); }
.cc-domain { font-size: 0.8rem; color: var(--color-text-muted); }
.cc-domain a { color: var(--color-link); }
.cc-info { padding: var(--space-3) var(--space-5); font-size: 0.875rem; color: var(--color-text-muted); }
.cc-val { color: var(--color-text); font-weight: 500; }
.cc-val--muted { font-style: italic; font-weight: 400; color: var(--color-text-light); }
.cc-actions { display: flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); }
.cc-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 600;
  text-decoration: none; text-align: center; transition: all var(--transition);
}
.cc-btn--claims {
  background: rgba(61,123,158,0.08); color: var(--color-link);
  border: 1px solid rgba(61,123,158,0.2);
}
.cc-btn--claims:hover { background: rgba(61,123,158,0.15); }
.cc-btn--payment {
  background: rgba(27,46,90,0.06); color: var(--color-heading);
  border: 1px solid rgba(27,46,90,0.15);
}
.cc-btn--payment:hover { background: rgba(27,46,90,0.12); }
.cc-btn--disabled { opacity: 0.4; pointer-events: none; }
/* Optional third action — see submitClaimButton(). css() takes no ctx, so these
   rules ship in every card-v2-detail stylesheet; they are inert until the
   section adds the class, which is what keeps the MARKUP byte-identical for
   sites that have not turned the button on.

   It SHARES the claims line rather than taking a row of its own, so the button
   lands exactly above "Online Payment" and the card reads as two button columns
   instead of three stacked rows. That alignment is the whole point of the
   request, which is why the gap and horizontal padding here must stay in step
   with .cc-actions below.

   GRID, not flex, and this is load-bearing — it shipped as flex and was 13px
   wrong. With the global 'box-sizing: border-box', a border-box width of 0
   cannot go below the element's own padding and border, so 'flex-basis: 0' on
   the button floors at 26px (12+12 padding, 1+1 border) while the bare text
   span floors at 0. Free space is then split evenly ON TOP of unequal bases:
   257 for the text, 283 for the button, which is why it hung 13px left of
   "Online Payment" and rendered 13px wider. Two flex items with identical
   'flex: 1' are only equal when their padding is identical, and here one side
   is a padded button and the other is bare text. '1fr 1fr' columns are
   measured from the container instead, so the padding cannot leak into the
   track size. Do not "simplify" this back to flex.

   Under 480px a card is too narrow to hold "Emergency: 800.527.3905" and a
   button side by side, so there it stacks — which is exactly the full-width
   row this used to be, kept as the small-screen case rather than the default. */
.cc-info--with-claim { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-2); }
.cc-info--with-claim .cc-info-text { min-width: 0; }

/* Filled, where the other two are tinted.
   With three actions on a card, Submit a Claim was wearing the same tint as the
   claims button beside it, so two of the three read as one thing. The answer is
   not a third tint — three competing tints is noise — but a hierarchy: ONE
   primary action, filled, above two secondary ones. Filing a claim is what this
   card exists for; Contact Agent and Online Payment are the alternates.

   Two-class selector on purpose. The button carries cc-btn--claims too, and
   (0,2,0) beats that rule wherever either sits in the stylesheet — this must not
   depend on source order. Palette tokens, not the hardcoded rgba() the two tints
   above still use, so it retunes with the agency's colours.

   Scoped to a class that exists only where the feature is switched on, so no
   site that has not asked for the button can be affected by any of it. */
.cc-btn--claims.cc-btn--submit-claim {
  background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
}
.cc-btn--claims.cc-btn--submit-claim:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

@media (max-width: 768px) { .cc-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .cc-info--with-claim { display: block; }
  .cc-info--with-claim .cc-btn--submit-claim { margin-top: var(--space-2); }
}

/* ── Team: card-grid ── */
.section-team { background: var(--color-bg-muted); }
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}
.team-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-8); text-align: center;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--color-primary);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-card__avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--space-4);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  letter-spacing: 1px; overflow: hidden;
}
.team-card__avatar--photo { background: var(--color-bg-alt); padding: 0; }
.team-card__avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-card__avatar--silhouette { background: none; padding: 0; }
.team-card__avatar--silhouette svg { width: 100%; height: 100%; border-radius: 50%; }
.team-card__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-heading); margin-bottom: var(--space-1); }
.team-card__role { font-size: 0.875rem; color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-3); }
.team-card__contact { display: flex; flex-direction: column; gap: var(--space-1); }
.team-card__email, .team-card__phone {
  font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none;
  transition: color var(--transition-fast);
}
.team-card__email:hover, .team-card__phone:hover { color: var(--color-secondary); }
.team-card__location {
  margin-top: var(--space-2); font-size: 0.8rem;
  color: var(--color-text-muted); font-weight: 500;
}

@media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } }

/* ── Contact: two-col-form-accordion extras ── */
.map-embed {
  width: 100%; height: 280px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--color-border-light);
}
.map-embed iframe { width: 100%; height: 100%; border: none; }



/* ── Quote-flow: inline-option-cards ── */
.qf-panel .card { border-top: 3px solid var(--color-accent); }



/* ── Page Header: banner-block ── */
.page-header--banner-block {
  background: var(--ph-bg, var(--color-primary-dark));
  color: var(--ph-text, #fff);
  text-align: var(--ph-align, center);
  padding: var(--space-12) 0;
}
.page-header__content {
  max-width: 800px;
  margin: 0 auto;
}
.page-header--banner-block .page-header__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 700;
  /* inherit is the FALLBACK, not the value: this rule is (0,2,0) and beat
     .page-header h1 (0,1,1), so page_header_heading_color emitted a token that
     could never win and the control did nothing. The token is only emitted when
     the operator sets it, so unset still inherits --ph-text as before. */
  color: var(--page-header-heading-color, inherit);
  margin: 0;
  line-height: 1.2;
}
.page-header--banner-block .page-header__subtitle {
  font-size: var(--text-lg);
  opacity: 0.85;
  margin-top: var(--space-3);
  margin-bottom: 0;
  line-height: var(--leading-relaxed);
}

/* Alignment variants */
.page-header--banner-block[style*="--ph-align:left"] .page-header__content {
  margin-left: 0;
  text-align: left;
}
.page-header--banner-block[style*="--ph-align:right"] .page-header__content {
  margin-right: 0;
  text-align: right;
}

@media (max-width: 768px) {
  .page-header--banner-block { padding: var(--space-8) 0; }
}

/* ── Content Block: split-layout ── */
.content-block { background: var(--color-bg); }
.cb-head { text-align: center; margin-bottom: var(--space-8); }
.cb-grid {
  display: grid; gap: var(--space-8); align-items: start;
}
.cb-grid--text-left { grid-template-columns: 2fr 1fr; }
.cb-grid--text-right { grid-template-columns: 1fr 2fr; }
.cb-grid--text-right .cb-text { order: 2; }
.cb-grid--text-right .cb-sidebar { order: 1; }
.cb-grid--half { grid-template-columns: 1fr 1fr; }

/* The sticky lives HERE, on the whole column — not on the widget inside it.
   Every sidebar type can have a CTA button underneath (see sidebar_cta_text),
   and that button is a static sibling of the widget. With the widget sticky and
   the button not, scrolling slid the widget down over its own button: measured
   43.6px of cover on a 44px button, i.e. it disappeared entirely, in Chrome,
   Firefox and Vivaldi alike, because it is what the spec asks for. A sticky
   element is positioned, so it also paints ON TOP of the static sibling rather
   than behind it.

   Sticking the column instead keeps the pair together, which is what the
   "image with a button under it" case always meant. It works because .cb-grid
   is align-items:start, so .cb-sidebar is content-height rather than stretched
   and therefore has somewhere to travel. If that ever becomes stretch, the
   column fills its row and the sticky silently stops moving. */
.cb-sidebar { position: sticky; top: calc(var(--space-16) + 64px); }

/* One column, centred, held to a reading measure. Full container width would
   run a paragraph to ~1100px, which is roughly twice what anyone reads
   comfortably — the point of dropping the sidebar is a better line length, not
   a longer one. */
.cb-grid--full { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; }

/* The measure is set by the COLUMN, so the paragraphs must not set one too.

   The .content-area p rule caps every paragraph on an inner page at 65ch, which
   measures 517px. That is narrower than the column in every layout this variant
   has, so the text stops short of the column it lives in and the sidebar reads
   as detached, marooned against the right edge. Measured on an imported
   services page at 1280px: a 738px text column holding 493px of text, with
   277px of dead space before the quote card.

   Two class names, to outrank .content-area p deterministically rather than
   relying on which stylesheet the build happens to emit last.

   Blast radius, measured rather than assumed: across the six permanent sites
   exactly one live section uses this variant with a sidebar, and it is a half
   layout whose column is 553px — so the cap barely applies and its text is
   short enough not to reach it. Before and after in a browser: painted width,
   line count and height all identical, only the box changes 517px → 553px. */
.cb-grid .cb-text p { max-width: none; }

.cb-text p {
  font-size: 1rem; line-height: var(--body-line-height, 1.7);
  color: var(--color-text); margin-bottom: var(--space-4);
}

.cb-cta {
  margin-top: var(--space-4);
}

/* Two actions side by side, wrapping rather than overflowing on a narrow
   column. Only ever applied when a second button exists, so a one-button
   section keeps the bare <a> it has always rendered. */
.cb-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Under the sidebar — full width, because it sits beneath an image or a
   checklist that is already the column's width and a half-width button under
   one reads as a mistake. */
.cb-sidebar-cta { display: block; width: 100%; text-align: center; margin-top: var(--space-4); }

/* Sidebar elements */
.cb-img {
  width: 100%; height: auto; border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

/* Sidebar image shape.
   Without one of these the image keeps its own proportions, which is why a
   portrait photo towered over one page and a landscape one sat squat on the
   next — the sidebar column changed height with whatever the agency happened
   to upload. Picking a ratio makes the column the same shape page to page.

   object-fit: cover is what stops that being a distortion: the box is the
   chosen ratio and the photo is cropped to fill it, never stretched. Emitted
   only when a ratio is chosen, so an untouched section is byte-identical. */
.cb-img--1-1  { aspect-ratio: 1 / 1;  object-fit: cover; }
.cb-img--4-3  { aspect-ratio: 4 / 3;  object-fit: cover; }
.cb-img--3-2  { aspect-ratio: 3 / 2;  object-fit: cover; }
.cb-img--16-9 { aspect-ratio: 16 / 9; object-fit: cover; }
.cb-img--3-4  { aspect-ratio: 3 / 4;  object-fit: cover; }
.cb-caption {
  font-size: 0.8rem; color: var(--color-text-muted);
  text-align: center; margin-top: var(--space-2);
}

.cb-form-wrap {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-6); box-shadow: var(--shadow);
}
.cb-form-wrap h3 {
  font-family: var(--font-display); color: var(--color-heading);
  margin-bottom: var(--space-4); font-size: 1.25rem;
}

.cb-cta-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-6); box-shadow: var(--shadow);
  border-top: 4px solid var(--color-accent);
}
.cb-cta-card h3 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-3); }
.cb-cta-card p { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-4); }

.cb-checklist {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-6); box-shadow: var(--shadow);
}
.cb-check-item {
  padding: var(--space-2) 0; font-size: 0.875rem;
  color: var(--color-on-card, var(--color-text));
  border-bottom: 1px solid var(--color-border-light);
}
.cb-check-item:last-child { border-bottom: none; }

.cb-embed {
  width: 100%; border-radius: var(--radius-md); overflow: hidden;
  max-height: 60vh;
}
.cb-embed iframe { width: 100%; min-height: 300px; max-height: 60vh; border: none; }

/* Map sidebar. Self-contained rather than relying on the contact section's
   .map-embed rules — the build only emits CSS for variants a site uses, so a
   site with this sidebar and no contact section would get a bare iframe. */
.cb-map h3 {
  font-family: var(--font-display); color: var(--color-heading);
  font-size: var(--text-lg); margin-bottom: var(--space-3);
}
.cb-map .map-embed {
  width: 100%; height: 320px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--color-border-light);
}
.cb-map .map-embed iframe { width: 100%; height: 100%; border: none; }

@media (max-width: 768px) {
  .cb-grid--text-left,
  .cb-grid--text-right,
  .cb-grid--half {
    grid-template-columns: 1fr;
  }
  .cb-grid--text-right .cb-text { order: 1; }
  .cb-grid--text-right .cb-sidebar { order: 2; }
  .cb-sidebar { position: static; }
}

/* ── Text Block ── */
.section-text { padding: var(--space-16) 0; }
.section-text--muted { background: var(--color-bg-muted); }
.section-text--primary {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
}
.section-text--primary .section-title { color: var(--color-accent); }
.section-text--primary .section-text__body { color: rgba(255,255,255,0.85); }
.section-text .section-title { margin-bottom: var(--space-6); }
.section-text__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed); color: var(--color-text-muted);
}
/* Full-width by default: scoped override of the global p { max-width: 65ch } cap,
   so prose in other sections keeps its readability width. */
.section-text__body p { margin-bottom: var(--space-4); max-width: none; }
.section-text__body p:last-child { margin-bottom: 0; }
/* Reading width: re-apply the 65ch cap and center the column within the container. */
.section-text--reading .section-text__body { max-width: var(--max-w-prose); margin-left: auto; margin-right: auto; }


/* ── Page Header: banner-block ── */
.page-header--banner-block {
  background: var(--ph-bg, var(--color-primary-dark));
  color: var(--ph-text, #fff);
  text-align: var(--ph-align, center);
  padding: var(--space-12) 0;
}
.page-header__content {
  max-width: 800px;
  margin: 0 auto;
}
.page-header--banner-block .page-header__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 700;
  /* inherit is the FALLBACK, not the value: this rule is (0,2,0) and beat
     .page-header h1 (0,1,1), so page_header_heading_color emitted a token that
     could never win and the control did nothing. The token is only emitted when
     the operator sets it, so unset still inherits --ph-text as before. */
  color: var(--page-header-heading-color, inherit);
  margin: 0;
  line-height: 1.2;
}
.page-header--banner-block .page-header__subtitle {
  font-size: var(--text-lg);
  opacity: 0.85;
  margin-top: var(--space-3);
  margin-bottom: 0;
  line-height: var(--leading-relaxed);
}

/* Alignment variants */
.page-header--banner-block[style*="--ph-align:left"] .page-header__content {
  margin-left: 0;
  text-align: left;
}
.page-header--banner-block[style*="--ph-align:right"] .page-header__content {
  margin-right: 0;
  text-align: right;
}

@media (max-width: 768px) {
  .page-header--banner-block { padding: var(--space-8) 0; }
}

/* ── Page Header: slim-bar ── */
.page-header--slim-bar {
  background: var(--ph-bg, var(--color-bg-muted));
  color: var(--ph-text, var(--color-primary));
  text-align: var(--ph-align, left);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.page-header--slim-bar .page-header__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  /* See banner-block: inherit is the FALLBACK, so an unset control still
     inherits --ph-text (dark, on this variant's light surface). */
  color: var(--page-header-heading-color, inherit);
  margin: 0;
  line-height: 1.3;
}
.page-header--slim-bar .page-header__subtitle {
  /* base.js caps every p at --max-w-prose, which would pin this to the left of a
     prose-width box and make --ph-align look broken on centre/right. */
  max-width: none;
  font-size: var(--text-sm);
  opacity: 0.85;
  margin: var(--space-1) 0 0;
  line-height: var(--leading-snug);
}

@media (max-width: 768px) {
  .page-header--slim-bar { padding: var(--space-4) 0; }
  .page-header--slim-bar .page-header__title { font-size: var(--text-lg); }
}

/* ── Visually-hidden H1 fallback ── */
.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;
}

/* ── Featured nav item ──
   Emitted AFTER the nav variants so it wins on source order. The variant rules
   are (0,2,1) and their .active rules (0,3,1); this is (0,3,1) and later, so a
   featured item stays featured even when it is the current page — which is the
   whole point of a call to action. */
.site-header .main-nav a.nav-featured {
  background: var(--nav-featured-bg, var(--color-accent));
  color: var(--nav-featured-text, #fff);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
}
.site-header .main-nav a.nav-featured:hover {
  background: var(--nav-featured-bg, var(--color-accent));
  color: var(--nav-featured-text, #fff);
  filter: brightness(1.08);
}


/* ── Form Renderer: additional styles ── */
.req { color: #c62828; font-weight: 400; }
fieldset { border: none; padding: 0; margin: 0; }
fieldset legend { font-weight: 600; font-size: 0.875rem; margin-bottom: var(--space-2); color: var(--color-text); }
.checkbox-group-list {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.checkbox-label {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full, 999px);
  cursor: pointer; font-size: 0.875rem;
  transition: all 0.2s ease;
  background: var(--color-bg-muted, #f0f0f0);
  user-select: none;
}
.checkbox-label:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--color-primary);
  flex-shrink: 0;
}
.checkbox-label:has(input:checked) {
  background: var(--color-primary); color: #fff;
}
.checkbox-label:has(input:checked) input[type="checkbox"] {
  accent-color: #fff;
}
.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.radio-group label {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 400; cursor: pointer; font-size: 0.875rem;
}
.radio-group input[type="radio"] { accent-color: var(--color-primary); }
.form-consent { margin-top: var(--space-4); }
.consent-row {
  display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4);
  border: 1px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-muted, #f7f7f7);
}
/* 18px, not the 16px the option pills use: this one is a legal agreement and
   is the hardest control on the form to hit accurately on a phone. */
.consent-row input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--color-primary); flex-shrink: 0; cursor: pointer;
}
/* (0,3,0) on purpose. The consent statement is a <label>, so it is also matched
   by .form-group label - which is (0,2,0) and sets colour AND weight, painting
   a paragraph of legal wording in heading maroon at 600. A (0,1,0) rule loses
   that outright, and matching (0,2,0) would only win on source order. */
.form-group.form-consent .consent-text {
  flex: 1; min-width: 0; cursor: pointer;
  font-size: var(--text-xs, 0.8125rem); line-height: 1.5;
  font-weight: 400; color: var(--color-text-muted, #555);
  display: block; margin-bottom: 0;
}
.form-group.form-consent .consent-lead { color: var(--color-text); font-weight: 700; }
.form-group.form-consent .consent-text a { color: var(--color-primary); text-decoration: underline; }
.consent-note { display: block; margin-top: var(--space-2); font-style: italic; }
/* The row is a flex line; without this the error message tries to sit as a
   third column beside the checkbox and the wording. */
.consent-row .field-error-msg { flex-basis: 100%; }
/* A group error hangs on the fieldset, not on one option, so it needs its own
   look: .field-error paints a border and a ring, which on a borderless
   fieldset shows as a ring around nothing. */
fieldset.field-error { box-shadow: none !important; border-color: transparent !important; }
fieldset.field-error legend { color: #c62828; }
fieldset > .field-error-msg { margin-top: var(--space-2); }
.consent-row:has(input.field-error) { border-color: #c62828; }
.form-conditional { transition: all 0.2s ease; }
.form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .form-row.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .form-row.cols-4 { grid-template-columns: 1fr; } }


/* ── Service Detail Pages ── */
.svc-detail__hero {
  height: 300px; background-size: cover; background-position: center;
  position: relative; display: flex; align-items: flex-end;
}
.svc-detail__hero-overlay {
  width: 100%; padding: var(--space-8) var(--space-6);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.svc-detail__hero h1 { color: #fff; font-family: var(--font-display); margin: 0; font-size: var(--text-3xl); }
.svc-detail { max-width: var(--max-w-narrow); margin: 0 auto; }
.svc-detail__body { margin-bottom: var(--space-8); }
.svc-detail__body p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-muted); max-width: none; }
.svc-detail__why { margin-bottom: var(--space-8); }
.svc-detail__why h2 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-3); }
.svc-detail__why p { line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.svc-detail__coverage { margin-bottom: var(--space-8); }
.svc-detail__coverage h2 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-4); }
.svc-detail__coverage-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6);
  list-style: none; padding: 0;
}
.svc-detail__coverage-list li {
  padding: var(--space-2) 0; padding-left: var(--space-5);
  position: relative; font-size: 0.875rem; color: var(--color-text);
}
.svc-detail__coverage-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--color-accent); font-weight: 700;
}
.svc-detail__form, .svc-detail__cta {
  background: var(--color-bg-muted); border-radius: var(--radius-md);
  padding: var(--space-8); margin-bottom: var(--space-8);
}
.svc-detail__form h2, .svc-detail__cta h2 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-2); }
.svc-detail__form p, .svc-detail__cta p { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.svc-detail__related { margin-bottom: var(--space-8); }
.svc-detail__related h2 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-4); }
.svc-detail__related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.svc-detail__related-card {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4); background: var(--color-bg-card);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-link); font-weight: 600; font-size: 0.875rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.svc-detail__related-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow); }

@media (max-width: 768px) {
  .svc-detail__hero { height: 200px; }
  .svc-detail__coverage-list { grid-template-columns: 1fr; }
  .svc-detail__related-grid { grid-template-columns: 1fr; }
}

/* ── Team Member Detail Pages ── */
.tm-detail { max-width: var(--max-w-narrow); margin: 0 auto; }
.tm-detail__head {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--space-8);
  align-items: start; margin-bottom: var(--space-8);
}
.tm-detail__photo, .tm-detail__avatar {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); object-fit: cover;
}
.tm-detail__avatar {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; font-weight: 700; color: #fff; font-family: var(--font-display);
}
.tm-detail__name { font-family: var(--font-display); color: var(--color-heading); font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.tm-detail__title { font-size: 0.9rem; color: var(--color-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.tm-detail__office { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.tm-detail__contact { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tm-detail__link { font-size: 0.9rem; color: var(--color-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.tm-detail__link:hover { color: var(--color-primary); }
.tm-detail__bio { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.tm-detail__bio p { margin-bottom: var(--space-4); }
.tm-detail__bio p:last-child { margin-bottom: 0; }
.tm-detail__bio a { color: var(--color-link); }

/* Team index link-through (name links to detail page) */
.team-card__name a, .bio-card__name a, .circle-card__name a,
.stagger-card__name a, .team-grid h3 a {
  color: inherit; text-decoration: none;
}
.team-card__name a:hover, .bio-card__name a:hover, .circle-card__name a:hover,
.stagger-card__name a:hover, .team-grid h3 a:hover {
  color: var(--color-primary); text-decoration: underline;
}

@media (max-width: 768px) {
  .tm-detail__head { grid-template-columns: 1fr; }
  .tm-detail__image { max-width: 220px; margin: 0 auto; }
  .tm-detail__meta { text-align: center; }
  .tm-detail__contact { align-items: center; }
}

@media (max-width: 768px) {
  section { padding: var(--space-10) 0; }
  .container { width: 92%; }
  .section-header { margin-bottom: var(--space-8); }
}

@media (max-width: 480px) {
  .container { width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .btn, .cta-band, .section-quote { display: none; }
  body { color: #000; background: #fff; padding-top: 0 !important; }
  a { color: #000; text-decoration: underline; }
  section { padding: 1rem 0; }
}

/* ── Section style: sec_1ebkg4t ── */
#sec_1ebkg4t h1, [data-style-id="sec_1ebkg4t"] h1, #sec_1ebkg4t h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_1ebkg4t"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_1ebkg4t .section-title, [data-style-id="sec_1ebkg4t"] .section-title, #sec_1ebkg4t .section-eyebrow, [data-style-id="sec_1ebkg4t"] .section-eyebrow, #sec_1ebkg4t .hero__badge-wrap, [data-style-id="sec_1ebkg4t"] .hero__badge-wrap, #sec_1ebkg4t .hero__trust-wrap, [data-style-id="sec_1ebkg4t"] .hero__trust-wrap { text-align: center; }
#sec_1ebkg4t .section-subtitle, [data-style-id="sec_1ebkg4t"] .section-subtitle, #sec_1ebkg4t .page-header p, [data-style-id="sec_1ebkg4t"] .page-header p, #sec_1ebkg4t .hero__sub, [data-style-id="sec_1ebkg4t"] .hero__sub, #sec_1ebkg4t .hero--ifthen__subtitle, [data-style-id="sec_1ebkg4t"] .hero--ifthen__subtitle { text-align: center; }
#sec_1ebkg4t .section-subtitle, [data-style-id="sec_1ebkg4t"] .section-subtitle, #sec_1ebkg4t .page-header p, [data-style-id="sec_1ebkg4t"] .page-header p, #sec_1ebkg4t .hero__sub, [data-style-id="sec_1ebkg4t"] .hero__sub, #sec_1ebkg4t .hero--ifthen__subtitle, [data-style-id="sec_1ebkg4t"] .hero--ifthen__subtitle { max-width: none; }
#sec_1ebkg4t#sec_1ebkg4t, [data-style-id="sec_1ebkg4t"][data-style-id="sec_1ebkg4t"] { background: linear-gradient(rgba(27,46,90,0.78), rgba(27,46,90,0.72)), url('https://steps-website-builder-api.steps-90e.workers.dev/media/heroes/1776968281557-InsuranceFactors_AS.jpg') center/cover no-repeat; }
#sec_1ebkg4t#sec_1ebkg4t h2:not(.svc-photo-card__label), [data-style-id="sec_1ebkg4t"][data-style-id="sec_1ebkg4t"] h2:not(.svc-photo-card__label), #sec_1ebkg4t#sec_1ebkg4t .section-title, [data-style-id="sec_1ebkg4t"][data-style-id="sec_1ebkg4t"] .section-title { color: #C9A94E; }
#sec_1ebkg4t#sec_1ebkg4t p, [data-style-id="sec_1ebkg4t"][data-style-id="sec_1ebkg4t"] p { color: rgba(255,255,255,0.9); }
/* ── Section style: sec_j6xlmz ── */
#sec_j6xlmz h1, [data-style-id="sec_j6xlmz"] h1, #sec_j6xlmz h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_j6xlmz"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_j6xlmz .section-title, [data-style-id="sec_j6xlmz"] .section-title, #sec_j6xlmz .section-eyebrow, [data-style-id="sec_j6xlmz"] .section-eyebrow, #sec_j6xlmz .hero__badge-wrap, [data-style-id="sec_j6xlmz"] .hero__badge-wrap, #sec_j6xlmz .hero__trust-wrap, [data-style-id="sec_j6xlmz"] .hero__trust-wrap { text-align: center; }
#sec_j6xlmz .section-subtitle, [data-style-id="sec_j6xlmz"] .section-subtitle, #sec_j6xlmz .page-header p, [data-style-id="sec_j6xlmz"] .page-header p, #sec_j6xlmz .hero__sub, [data-style-id="sec_j6xlmz"] .hero__sub, #sec_j6xlmz .hero--ifthen__subtitle, [data-style-id="sec_j6xlmz"] .hero--ifthen__subtitle { text-align: center; }
#sec_j6xlmz .section-subtitle, [data-style-id="sec_j6xlmz"] .section-subtitle, #sec_j6xlmz .page-header p, [data-style-id="sec_j6xlmz"] .page-header p, #sec_j6xlmz .hero__sub, [data-style-id="sec_j6xlmz"] .hero__sub, #sec_j6xlmz .hero--ifthen__subtitle, [data-style-id="sec_j6xlmz"] .hero--ifthen__subtitle { max-width: none; }
#sec_j6xlmz p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_j6xlmz"] p:not(.section-subtitle):not(.section-eyebrow) { text-align: center; }
#sec_j6xlmz p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_j6xlmz"] p:not(.section-subtitle):not(.section-eyebrow) { max-width: none; }
#sec_j6xlmz h3, [data-style-id="sec_j6xlmz"] h3, #sec_j6xlmz .card h3, [data-style-id="sec_j6xlmz"] .card h3, #sec_j6xlmz .team-card__name, [data-style-id="sec_j6xlmz"] .team-card__name, #sec_j6xlmz .circle-card__name, [data-style-id="sec_j6xlmz"] .circle-card__name, #sec_j6xlmz .cc-name, [data-style-id="sec_j6xlmz"] .cc-name, #sec_j6xlmz .carrier-logo__name, [data-style-id="sec_j6xlmz"] .carrier-logo__name, #sec_j6xlmz .testi-card__name, [data-style-id="sec_j6xlmz"] .testi-card__name, #sec_j6xlmz .svc-photo-card__label, [data-style-id="sec_j6xlmz"] .svc-photo-card__label { text-align: center; }
#sec_j6xlmz, [data-style-id="sec_j6xlmz"] { border-bottom: 1px solid var(--color-border-light); }
#sec_j6xlmz, [data-style-id="sec_j6xlmz"] { font-size: calc(1em * 1.2); }
/* ── Section style: sec_989cqn ── */
#sec_989cqn h1, [data-style-id="sec_989cqn"] h1, #sec_989cqn h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_989cqn"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_989cqn .section-title, [data-style-id="sec_989cqn"] .section-title, #sec_989cqn .section-eyebrow, [data-style-id="sec_989cqn"] .section-eyebrow, #sec_989cqn .hero__badge-wrap, [data-style-id="sec_989cqn"] .hero__badge-wrap, #sec_989cqn .hero__trust-wrap, [data-style-id="sec_989cqn"] .hero__trust-wrap { text-align: center; }
#sec_989cqn p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_989cqn"] p:not(.section-subtitle):not(.section-eyebrow) { text-align: center; }
#sec_989cqn p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_989cqn"] p:not(.section-subtitle):not(.section-eyebrow) { max-width: none; }
/* ── Section style: sec_1lql5p3 ── */
#sec_1lql5p3 .section-subtitle, [data-style-id="sec_1lql5p3"] .section-subtitle, #sec_1lql5p3 .page-header p, [data-style-id="sec_1lql5p3"] .page-header p, #sec_1lql5p3 .hero__sub, [data-style-id="sec_1lql5p3"] .hero__sub, #sec_1lql5p3 .hero--ifthen__subtitle, [data-style-id="sec_1lql5p3"] .hero--ifthen__subtitle { text-align: center; }
#sec_1lql5p3 .section-subtitle, [data-style-id="sec_1lql5p3"] .section-subtitle, #sec_1lql5p3 .page-header p, [data-style-id="sec_1lql5p3"] .page-header p, #sec_1lql5p3 .hero__sub, [data-style-id="sec_1lql5p3"] .hero__sub, #sec_1lql5p3 .hero--ifthen__subtitle, [data-style-id="sec_1lql5p3"] .hero--ifthen__subtitle { max-width: none; }
/* ── Section style: sec_1b6ijry ── */
#sec_1b6ijry .btn, [data-style-id="sec_1b6ijry"] .btn { border: 2px solid #ffffff; }
/* ── Section style: sec_1aqeoed ── */
#sec_1aqeoed#sec_1aqeoed, [data-style-id="sec_1aqeoed"][data-style-id="sec_1aqeoed"] { padding-top: calc(var(--section-py) * 1.5); }
#sec_1aqeoed#sec_1aqeoed > .content-area, [data-style-id="sec_1aqeoed"][data-style-id="sec_1aqeoed"] > .content-area { padding-top: 0; }
/* ── Section style: sec_qwr6xq ── */
#sec_qwr6xq h1, [data-style-id="sec_qwr6xq"] h1, #sec_qwr6xq h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_qwr6xq"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_qwr6xq .section-title, [data-style-id="sec_qwr6xq"] .section-title, #sec_qwr6xq .section-eyebrow, [data-style-id="sec_qwr6xq"] .section-eyebrow, #sec_qwr6xq .hero__badge-wrap, [data-style-id="sec_qwr6xq"] .hero__badge-wrap, #sec_qwr6xq .hero__trust-wrap, [data-style-id="sec_qwr6xq"] .hero__trust-wrap { text-align: left; }
#sec_qwr6xq .section-subtitle, [data-style-id="sec_qwr6xq"] .section-subtitle, #sec_qwr6xq .page-header p, [data-style-id="sec_qwr6xq"] .page-header p, #sec_qwr6xq .hero__sub, [data-style-id="sec_qwr6xq"] .hero__sub, #sec_qwr6xq .hero--ifthen__subtitle, [data-style-id="sec_qwr6xq"] .hero--ifthen__subtitle { text-align: left; }
#sec_qwr6xq p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_qwr6xq"] p:not(.section-subtitle):not(.section-eyebrow) { text-align: left; }
#sec_qwr6xq h3, [data-style-id="sec_qwr6xq"] h3, #sec_qwr6xq .card h3, [data-style-id="sec_qwr6xq"] .card h3, #sec_qwr6xq .team-card__name, [data-style-id="sec_qwr6xq"] .team-card__name, #sec_qwr6xq .circle-card__name, [data-style-id="sec_qwr6xq"] .circle-card__name, #sec_qwr6xq .cc-name, [data-style-id="sec_qwr6xq"] .cc-name, #sec_qwr6xq .carrier-logo__name, [data-style-id="sec_qwr6xq"] .carrier-logo__name, #sec_qwr6xq .testi-card__name, [data-style-id="sec_qwr6xq"] .testi-card__name, #sec_qwr6xq .svc-photo-card__label, [data-style-id="sec_qwr6xq"] .svc-photo-card__label { text-align: left; }
/* ── Section style: sec_15j69z7 ── */
#sec_15j69z7 h1, [data-style-id="sec_15j69z7"] h1, #sec_15j69z7 h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_15j69z7"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_15j69z7 .section-title, [data-style-id="sec_15j69z7"] .section-title, #sec_15j69z7 .section-eyebrow, [data-style-id="sec_15j69z7"] .section-eyebrow, #sec_15j69z7 .hero__badge-wrap, [data-style-id="sec_15j69z7"] .hero__badge-wrap, #sec_15j69z7 .hero__trust-wrap, [data-style-id="sec_15j69z7"] .hero__trust-wrap { text-align: center; }
#sec_15j69z7 .section-subtitle, [data-style-id="sec_15j69z7"] .section-subtitle, #sec_15j69z7 .page-header p, [data-style-id="sec_15j69z7"] .page-header p, #sec_15j69z7 .hero__sub, [data-style-id="sec_15j69z7"] .hero__sub, #sec_15j69z7 .hero--ifthen__subtitle, [data-style-id="sec_15j69z7"] .hero--ifthen__subtitle { text-align: center; }
#sec_15j69z7 .section-subtitle, [data-style-id="sec_15j69z7"] .section-subtitle, #sec_15j69z7 .page-header p, [data-style-id="sec_15j69z7"] .page-header p, #sec_15j69z7 .hero__sub, [data-style-id="sec_15j69z7"] .hero__sub, #sec_15j69z7 .hero--ifthen__subtitle, [data-style-id="sec_15j69z7"] .hero--ifthen__subtitle { max-width: none; }
#sec_15j69z7 p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_15j69z7"] p:not(.section-subtitle):not(.section-eyebrow) { text-align: center; }
#sec_15j69z7 p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_15j69z7"] p:not(.section-subtitle):not(.section-eyebrow) { max-width: none; }
#sec_15j69z7 h3, [data-style-id="sec_15j69z7"] h3, #sec_15j69z7 .card h3, [data-style-id="sec_15j69z7"] .card h3, #sec_15j69z7 .team-card__name, [data-style-id="sec_15j69z7"] .team-card__name, #sec_15j69z7 .circle-card__name, [data-style-id="sec_15j69z7"] .circle-card__name, #sec_15j69z7 .cc-name, [data-style-id="sec_15j69z7"] .cc-name, #sec_15j69z7 .carrier-logo__name, [data-style-id="sec_15j69z7"] .carrier-logo__name, #sec_15j69z7 .testi-card__name, [data-style-id="sec_15j69z7"] .testi-card__name, #sec_15j69z7 .svc-photo-card__label, [data-style-id="sec_15j69z7"] .svc-photo-card__label { text-align: center; }
#sec_15j69z7 h1, [data-style-id="sec_15j69z7"] h1, #sec_15j69z7 h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_15j69z7"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_15j69z7 .section-title, [data-style-id="sec_15j69z7"] .section-title { color: #1B2E5A; }
#sec_15j69z7#sec_15j69z7, [data-style-id="sec_15j69z7"][data-style-id="sec_15j69z7"] { background: #f7f5f0; }
/* ── Section style: sec_105ycp ── */
#sec_105ycp h1, [data-style-id="sec_105ycp"] h1, #sec_105ycp h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_105ycp"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_105ycp .section-title, [data-style-id="sec_105ycp"] .section-title, #sec_105ycp .section-eyebrow, [data-style-id="sec_105ycp"] .section-eyebrow, #sec_105ycp .hero__badge-wrap, [data-style-id="sec_105ycp"] .hero__badge-wrap, #sec_105ycp .hero__trust-wrap, [data-style-id="sec_105ycp"] .hero__trust-wrap { text-align: center; }
#sec_105ycp .section-subtitle, [data-style-id="sec_105ycp"] .section-subtitle, #sec_105ycp .page-header p, [data-style-id="sec_105ycp"] .page-header p, #sec_105ycp .hero__sub, [data-style-id="sec_105ycp"] .hero__sub, #sec_105ycp .hero--ifthen__subtitle, [data-style-id="sec_105ycp"] .hero--ifthen__subtitle { text-align: center; }
#sec_105ycp .section-subtitle, [data-style-id="sec_105ycp"] .section-subtitle, #sec_105ycp .page-header p, [data-style-id="sec_105ycp"] .page-header p, #sec_105ycp .hero__sub, [data-style-id="sec_105ycp"] .hero__sub, #sec_105ycp .hero--ifthen__subtitle, [data-style-id="sec_105ycp"] .hero--ifthen__subtitle { max-width: none; }
#sec_105ycp p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_105ycp"] p:not(.section-subtitle):not(.section-eyebrow) { text-align: center; }
#sec_105ycp p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_105ycp"] p:not(.section-subtitle):not(.section-eyebrow) { max-width: none; }
#sec_105ycp h3, [data-style-id="sec_105ycp"] h3, #sec_105ycp .card h3, [data-style-id="sec_105ycp"] .card h3, #sec_105ycp .team-card__name, [data-style-id="sec_105ycp"] .team-card__name, #sec_105ycp .circle-card__name, [data-style-id="sec_105ycp"] .circle-card__name, #sec_105ycp .cc-name, [data-style-id="sec_105ycp"] .cc-name, #sec_105ycp .carrier-logo__name, [data-style-id="sec_105ycp"] .carrier-logo__name, #sec_105ycp .testi-card__name, [data-style-id="sec_105ycp"] .testi-card__name, #sec_105ycp .svc-photo-card__label, [data-style-id="sec_105ycp"] .svc-photo-card__label { text-align: center; }
#sec_105ycp h1, [data-style-id="sec_105ycp"] h1, #sec_105ycp h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_105ycp"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_105ycp .section-title, [data-style-id="sec_105ycp"] .section-title { color: #1B2E5A; }