:root {
  /* ── Colors ── */
  --color-primary: #2B5B84;
  --color-primary-dark: #224869;
  --color-primary-light: #406b90;
  --color-primary-hover: #265176;
  --color-primary-text: #FFFFFF;
  --color-secondary: #4A90C4;
  --color-secondary-light: #80b1d5;
  --color-accent: #E8A838;
  --color-accent-dark: #c58e2f;
  --color-accent-light: #ecb95f;
  --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: #efede8;
  --color-bg-alt: #eef1f5;
  --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, #224869, #2B5B84);



  /* ── 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: 100px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ── Shadows (default) ── */
  --shadow: 0 1px 3px rgba(43,91,132,0.06), 0 4px 16px rgba(43,91,132,0.08);
  --shadow-md: 0 4px 12px rgba(43,91,132,0.1), 0 8px 32px rgba(43,91,132,0.08);
  --shadow-lg: 0 12px 48px rgba(43,91,132,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], .page-section-wrap[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" */

/* Lighter/darker shades of the three brand colors. Mixed from the token, not
   baked to a hex, so they still follow a palette change. The mix ratios are
   mirrored by the editor's swatch preview (dashboard utils/richTextColors.js). */
.rt-color-primary-light   { color: color-mix(in srgb, var(--color-primary) 55%, #fff); }
.rt-color-primary-dark    { color: color-mix(in srgb, var(--color-primary) 65%, #000); }
.rt-color-secondary-light { color: color-mix(in srgb, var(--color-secondary) 55%, #fff); }
.rt-color-secondary-dark  { color: color-mix(in srgb, var(--color-secondary) 65%, #000); }
.rt-color-accent-light    { color: color-mix(in srgb, var(--color-accent) 55%, #fff); }
.rt-color-accent-dark     { color: color-mix(in srgb, var(--color-accent) 65%, #000); }

/* Neutrals. Fixed on purpose — black, white and gray mean the same on every
   site. */
.rt-color-black { color: #000; }
.rt-color-gray  { color: #6B7280; }
.rt-color-white { color: #fff; }

/* Font (the editor's Font menu). Theme heading/body follow the font pairing;
   the named fonts are css/font-library.js, and the site only downloads the ones
   its content uses. */
.rt-font-heading { font-family: var(--font-display); }
.rt-font-body    { font-family: var(--font-body); }
.rt-font-playfair-display { font-family: 'Playfair Display', Georgia, serif; }
.rt-font-merriweather { font-family: 'Merriweather', Georgia, serif; }
.rt-font-libre-baskerville { font-family: 'Libre Baskerville', Georgia, serif; }
.rt-font-lora { font-family: 'Lora', Georgia, serif; }
.rt-font-source-sans-3 { font-family: 'Source Sans 3', 'Segoe UI', sans-serif; }
.rt-font-open-sans { font-family: 'Open Sans', 'Segoe UI', sans-serif; }
.rt-font-lato { font-family: 'Lato', 'Segoe UI', sans-serif; }
.rt-font-roboto { font-family: 'Roboto', 'Segoe UI', sans-serif; }
.rt-font-noto-sans { font-family: 'Noto Sans', 'Segoe UI', sans-serif; }
.rt-font-montserrat { font-family: 'Montserrat', 'Segoe UI', sans-serif; }
.rt-font-raleway { font-family: 'Raleway', 'Segoe UI', sans-serif; }
.rt-font-poppins { font-family: 'Poppins', 'Segoe UI', sans-serif; }
.rt-font-nunito { font-family: 'Nunito', 'Segoe UI', sans-serif; }
.rt-font-dm-sans { font-family: 'DM Sans', 'Segoe UI', sans-serif; }
.rt-font-plus-jakarta-sans { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; }
.rt-font-outfit { font-family: 'Outfit', 'Segoe UI', sans-serif; }
.rt-font-oswald { font-family: 'Oswald', 'Arial Narrow', sans-serif; }
.rt-font-bebas-neue { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; }
.rt-font-dancing-script { font-family: 'Dancing Script', cursive; }
.rt-font-great-vibes { font-family: 'Great Vibes', cursive; }

/* 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. */
.rt-list      { padding-left: var(--space-5); }
ol.rt-list    { padding-left: var(--space-6); }  /* numbers need more room than discs */

/* Space after a list, the same as after a paragraph. The reset zeroes list
   margins and the sections only space their <p>s, so a paragraph BEFORE a list
   got its gap and the paragraph AFTER one sat flush against the last bullet.
   Operators worked around it with an extra return, a <p><br></p> a full line
   tall, which reads as too much. (The importer's empty <p></p> after a list
   has no height, so its margin happened to supply exactly this gap; margins
   collapse, so the two do not add up.)

   Not on a last child: nothing follows, and the sections zero their last <p>
   too. :where() keeps this at one class of specificity so a section that sets
   its own list rhythm (the FAQ answer's .faq__a ul) still wins. */
.rt-list:where(:not(:last-child)) { margin-bottom: var(--space-4); }

/* ── 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__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: rgba(255,255,255,0.9); text-decoration: none; }
.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: full-actions ── */
.mobile-bar--full {
  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-1) 0;
  padding-bottom: max(var(--space-1), env(safe-area-inset-bottom));
}
.mobile-bar--full a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex: 1; padding: var(--space-2);
  color: rgba(255,255,255,0.75); text-decoration: none;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; transition: color var(--transition-fast);
}
.mobile-bar--full a:active { color: #fff; transform: scale(0.95); }
.mobile-bar--full .mobile-bar__item--call { color: #fff; }

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

/* ── Hero: centered-cta ── */
.hero--centered {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
  color: #fff;
}
/* Background image mode */
.hero--centered.hero--has-image {
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
}
.hero--centered.hero--has-image .hero__bg {
  background: linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.55) 100%);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%),
    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='%23ffffff' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.hero--has-image .hero__bg {
  /* Override the pattern with just the dark overlay when we have an image */
  background:
    linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.55) 100%);
}
.hero__content {
  position: relative; z-index: 1;
  padding: var(--space-24) 0 var(--space-16);
  max-width: 780px; margin: 0 auto;
  text-align: center;
}
.hero__badge-wrap { text-align: center; margin-bottom: var(--space-6); }
.hero__badge {
  display: inline-block; padding: var(--space-2) var(--space-5);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full); font-size: var(--text-sm);
  font-weight: 500; letter-spacing: var(--tracking-wide);
  color: rgba(255,255,255,0.9);
}
.hero--has-image .hero__badge {
  background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
}
.hero--centered h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: var(--leading-tight);
  color: #fff; margin-bottom: var(--space-5); letter-spacing: var(--tracking-tight);
  text-align: center;
}
.hero--has-image h1 { text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.hero__sub {
  font-size: var(--text-lg); line-height: var(--leading-relaxed);
  opacity: 0.85; max-width: 600px; margin: 0 auto var(--space-8);
  font-weight: 300; text-align: center;
}
.hero--has-image .hero__sub { text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.hero__actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10);
}
.btn--outline-white {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: #fff;
}
.hero__trust-wrap { text-align: center; }
.hero__trust {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: var(--space-5) var(--space-8);
  background: rgba(255,255,255,0.07); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md);
}
.hero--has-image .hero__trust {
  background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.15);
}
.hero__trust-sep { width: 1px; height: 36px; background: rgba(255,255,255,0.15); }
.hero__trust-item { text-align: center; }
.hero__trust-num {
  display: block; font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; color: var(--color-accent); line-height: 1;
}
.hero__trust-label {
  display: block; font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  opacity: 0.7; margin-top: var(--space-1);
}

@media (max-width: 768px) {
  .hero__content { padding: var(--space-16) 0 var(--space-10); }
  .hero__trust { flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-6); }
  .hero__trust-sep { width: 60px; height: 1px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── 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-main { 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); }

/* Two widgets and no prose (main_type). Nothing to travel beside, so the
   sticky comes off: an image scrolling against a services list is motion
   without a reason, and the taller column drags the shorter one's card with
   it. */
.cb-grid--pair .cb-sidebar { position: static; }

/* 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; }
.cb-actions--center { justify-content: center; }
.cb-actions--right  { justify-content: flex-end; }

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

/* Image size: a share of the column. The caption is inside .cb-media, so it
   narrows with its photo. */
.cb-media--large  { width: 75%; margin-inline: auto; }
.cb-media--medium { width: 50%; margin-inline: auto; }
.cb-media--small  { width: 33%; min-width: 96px; margin-inline: auto; }
.cb-media--left   { margin-left: 0; margin-right: auto; }
.cb-media--right  { margin-left: auto; margin-right: 0; }
@media (max-width: 768px) {
  .cb-media--right { margin-left: auto; margin-right: auto; }
}
.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; }

/* Services list — the same card and the same rows as the typed checklist,
   because to a reader it is the same thing; only where the words come from
   differs. */
.cb-list-heading {
  font-family: var(--font-display); color: var(--color-heading);
  font-size: var(--text-lg); margin-bottom: var(--space-3);
}
/* Twenty services in one column is a very tall card beside a photo. Columns
   rather than a grid, so the list reads DOWN one side and then the other, the
   way a list is read. */
.cb-check-list--2col { column-count: 2; column-gap: var(--space-8); }
.cb-check-list--2col .cb-check-item { break-inside: avoid; }
/* A row that happens to be a link still has to look like a row, not like body
   copy that has turned blue. */
.cb-check-item--link {
  display: block; text-decoration: none;
  color: var(--color-on-card, var(--color-text));
  transition: color 0.15s ease;
}
.cb-check-item--link:hover { color: var(--color-accent); }

.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-main { order: 1; }
  .cb-grid--text-right .cb-sidebar { order: 2; }
  /* AFTER the text-right rules on purpose: identical specificity, so when a
     section sets both it is this one that wins. */
  .cb-grid--m-flip .cb-text,
  .cb-grid--m-flip .cb-main { order: 2; }
  .cb-grid--m-flip .cb-sidebar { order: 1; }
  .cb-sidebar { position: static; }
  /* Two columns of services is one column on a phone, like everything else. */
  .cb-check-list--2col { column-count: 1; }
}

/* ── Services: carousel ── */
.svc-carousel { position: relative; margin: 0 -var(--space-2); }
.svc-carousel__track {
  display: flex; gap: var(--space-6); overflow-x: auto; scroll-behavior: smooth;
  padding: var(--space-4) var(--space-2); scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
.svc-carousel__track::-webkit-scrollbar { display: none; }
.svc-carousel__card {
  flex: 0 0 calc(100% / var(--visible, 3) - var(--space-4));
  scroll-snap-align: start;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-bg-card);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none; color: inherit; display: block;
}
.svc-carousel__card:hover { transform: translateY(-4px); }
.svc-carousel__card--bordered { border: 1.5px solid var(--color-border); }
.svc-carousel__card--bordered:hover { border-color: var(--color-accent); }
.svc-carousel__card--shadow { box-shadow: var(--shadow); }
.svc-carousel__card--shadow:hover { box-shadow: var(--shadow-lg); }
.svc-carousel__card--flat { background: var(--color-bg-muted); }

.svc-carousel__icon {
  font-size: 2.5rem; padding: var(--space-6) var(--space-6) 0;
}
.svc-carousel__photo { height: 160px; overflow: hidden; }
.svc-carousel__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-carousel__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.svc-carousel__body h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-heading); margin-bottom: var(--space-2); }
.svc-carousel__body p { font-size: 0.875rem; color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.svc-carousel__link { font-size: 0.875rem; font-weight: 600; color: var(--color-link); }
.svc-carousel__card:hover .svc-carousel__link { color: var(--color-primary); }

/* Image-only: the photo IS the card, so the border, padding and background
   that frame a text card all come off. Fixed-height keeps a row of photos on
   one baseline whatever their aspect ratios are. */
.svc-carousel__card--image-only { padding: 0; border: none; background: none; box-shadow: none; overflow: hidden; }
.svc-carousel__card--image-only .svc-carousel__photo { height: 220px; margin: 0; }
.svc-carousel__card--image-only .svc-carousel__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-carousel__card--image-only .svc-carousel__icon { display: flex; align-items: center; justify-content: center; height: 220px; margin: 0; }
.svc-carousel__card--image-only:hover { border-color: transparent; box-shadow: none; }

.svc-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  font-size: 1.5rem; color: var(--color-heading); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: all var(--transition-fast);
}
.svc-carousel__arrow:hover { background: var(--color-primary); color: #fff; }
.svc-carousel__arrow--left { left: -16px; }
.svc-carousel__arrow--right { right: -16px; }

.svc-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-4); }

@media (max-width: 1024px) {
  .svc-carousel__card { flex: 0 0 calc(50% - var(--space-3)); }
}
@media (max-width: 768px) {
  .svc-carousel__card { flex: 0 0 calc(85%); }
  .svc-carousel__arrow { display: none; }
}

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

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

/* ── Hero: centered-cta ── */
.hero--centered {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
  color: #fff;
}
/* Background image mode */
.hero--centered.hero--has-image {
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
}
.hero--centered.hero--has-image .hero__bg {
  background: linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.55) 100%);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%),
    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='%23ffffff' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.hero--has-image .hero__bg {
  /* Override the pattern with just the dark overlay when we have an image */
  background:
    linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.55) 100%);
}
.hero__content {
  position: relative; z-index: 1;
  padding: var(--space-24) 0 var(--space-16);
  max-width: 780px; margin: 0 auto;
  text-align: center;
}
.hero__badge-wrap { text-align: center; margin-bottom: var(--space-6); }
.hero__badge {
  display: inline-block; padding: var(--space-2) var(--space-5);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full); font-size: var(--text-sm);
  font-weight: 500; letter-spacing: var(--tracking-wide);
  color: rgba(255,255,255,0.9);
}
.hero--has-image .hero__badge {
  background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
}
.hero--centered h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: var(--leading-tight);
  color: #fff; margin-bottom: var(--space-5); letter-spacing: var(--tracking-tight);
  text-align: center;
}
.hero--has-image h1 { text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.hero__sub {
  font-size: var(--text-lg); line-height: var(--leading-relaxed);
  opacity: 0.85; max-width: 600px; margin: 0 auto var(--space-8);
  font-weight: 300; text-align: center;
}
.hero--has-image .hero__sub { text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.hero__actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10);
}
.btn--outline-white {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: #fff;
}
.hero__trust-wrap { text-align: center; }
.hero__trust {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: var(--space-5) var(--space-8);
  background: rgba(255,255,255,0.07); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md);
}
.hero--has-image .hero__trust {
  background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.15);
}
.hero__trust-sep { width: 1px; height: 36px; background: rgba(255,255,255,0.15); }
.hero__trust-item { text-align: center; }
.hero__trust-num {
  display: block; font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; color: var(--color-accent); line-height: 1;
}
.hero__trust-label {
  display: block; font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  opacity: 0.7; margin-top: var(--space-1);
}

@media (max-width: 768px) {
  .hero__content { padding: var(--space-16) 0 var(--space-10); }
  .hero__trust { flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-6); }
  .hero__trust-sep { width: 60px; height: 1px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── Services: icon-grid ── */
.section-services { background: var(--color-bg); }
.section-header { max-width: 600px; margin: 0 auto var(--space-12); }
.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);
}
/* ── Card size scale ── shared small/medium/large/xlarge vocabulary (see
   utils/card-size.js). Vars on the grid, card rules written once against them. */
.svc-grid--size-small { --svc-col-min: 210px; --svc-pad-y: var(--space-6); --svc-pad-x: var(--space-5); --svc-icon-box: 44px; --svc-icon-glyph: 1.375rem; --svc-photo-h: 130px; --svc-title: var(--text-base); --svc-desc: 0.8125rem; }
.svc-grid--size-medium { --svc-col-min: 250px; --svc-pad-y: var(--space-8); --svc-pad-x: var(--space-6); --svc-icon-box: 56px; --svc-icon-glyph: 1.75rem; --svc-photo-h: 160px; --svc-title: var(--text-lg); --svc-desc: 0.875rem; }
.svc-grid--size-large { --svc-col-min: 300px; --svc-pad-y: var(--space-10); --svc-pad-x: var(--space-8); --svc-icon-box: 68px; --svc-icon-glyph: 2.125rem; --svc-photo-h: 200px; --svc-title: var(--text-xl); --svc-desc: 0.9375rem; }
.svc-grid--size-xlarge { --svc-col-min: 360px; --svc-pad-y: var(--space-12); --svc-pad-x: var(--space-10); --svc-icon-box: 80px; --svc-icon-glyph: 2.5rem; --svc-photo-h: 240px; --svc-title: var(--text-2xl); --svc-desc: 1rem; }

.svc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--svc-col-min, 250px), 1fr));
  gap: var(--space-6);
}
.svc-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--svc-pad-y, var(--space-8)) var(--svc-pad-x, var(--space-6)); text-align: center;
  border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}
.svc-card__icon {
  width: var(--svc-icon-box, 56px); height: var(--svc-icon-box, 56px); margin: 0 auto var(--space-4);
  border-radius: var(--radius); font-size: var(--svc-icon-glyph, 1.75rem);
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
}
.svc-card__photo { margin-bottom: var(--space-4); border-radius: var(--radius); overflow: hidden; }
.svc-card__photo img { width: 100%; height: var(--svc-photo-h, 160px); object-fit: cover; display: block; }
.svc-card__title {
  font-family: var(--font-display); font-size: var(--svc-title, var(--text-lg));
  color: var(--color-heading); margin-bottom: var(--space-2);
}
.svc-card__desc {
  font-size: var(--svc-desc, 0.875rem); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); margin-bottom: var(--space-4);
}
.svc-card__link {
  font-size: 0.875rem; font-weight: 600;
  color: var(--color-link); text-decoration: none;
  transition: color var(--transition-fast);
}
.svc-card__link:hover { color: var(--color-primary); }

@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr; }
  /* Mobile step-down via the same vars — see quote-selector/horizontal.js for
     why this redeclares vars instead of overriding the card rule. */
.svc-grid--size-small { --svc-pad-y: var(--space-5); --svc-pad-x: var(--space-4); }
.svc-grid--size-medium { --svc-pad-y: var(--space-6); --svc-pad-x: var(--space-6); }
.svc-grid--size-large { --svc-pad-y: var(--space-8); --svc-pad-x: var(--space-6); }
.svc-grid--size-xlarge { --svc-pad-y: var(--space-10); --svc-pad-x: var(--space-8); }
  .svc-card { padding: var(--svc-pad-y, var(--space-6)) var(--svc-pad-x, var(--space-6)); }
}

/* ── About: split-content ── */
.section-about { background: var(--color-bg-muted); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.about-image img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.about-image--large  { width: 75%; margin-inline: auto; }
.about-image--medium { width: 50%; margin-inline: auto; }
.about-image--small  { width: 33%; min-width: 96px; margin-inline: auto; }
.about-image--left   { margin-left: 0; margin-right: auto; }
.about-image--right  { margin-left: auto; margin-right: 0; }
@media (max-width: 768px) {
  .about-image--right { margin-left: auto; margin-right: auto; }
}
.about-text p { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); max-width: none; }
.about-highlights { display: flex; gap: var(--space-8); }
.about-highlight { text-align: center; }
.about-highlight__num {
  display: block; font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 700; color: var(--color-heading); line-height: 1;
}
.about-highlight__label { display: block; font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; margin-top: var(--space-1); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.about-values { display: flex; flex-direction: column; gap: var(--space-5); }
.value-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-6); border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.value-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--color-bg-alt); color: var(--color-heading);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.value-card h4 { font-family: var(--font-display); color: var(--color-heading); font-size: var(--text-base); margin-bottom: var(--space-2); }
.value-card p { font-size: 0.875rem; color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: 0; }

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-highlights { flex-direction: row; gap: var(--space-6); justify-content: center; }
}

/* ── Carriers: logo-row ── */
.section-carriers { background: var(--color-bg); }
.carrier-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-5);
}
.carrier-logo {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-5); border: 1px solid var(--color-border-light);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100px; gap: var(--space-2);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carrier-logo:hover {
  transform: translateY(-3px); box-shadow: var(--shadow);
  border-color: var(--color-secondary);
}
.carrier-logo img {
  max-width: 120px; height: auto; max-height: 40px; object-fit: contain;
  filter: grayscale(30%); transition: filter var(--transition);
}
.carrier-logo:hover img { filter: grayscale(0%); }
.carrier-logo__text {
  font-size: 0.875rem; font-weight: 600; color: var(--color-heading);
  text-align: center; font-family: var(--font-display);
}
.carrier-logo__name {
  font-size: 0.8rem; color: var(--color-text-muted);
  text-align: center; font-weight: 500;
}

@media (max-width: 768px) {
  .carrier-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
  .carrier-logo { padding: var(--space-3); min-height: 80px; }
}

/* ── 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: inline-form ── */
.contact-logo { margin-bottom: var(--space-4); }
.contact-logo__img { max-height: 80px; object-fit: contain; }
.section-contact { background: var(--color-bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.contact-info p { color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); }
.contact-details { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-detail { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.875rem; line-height: var(--leading-relaxed); }
.contact-detail strong { color: var(--color-heading); font-weight: 600; }
.contact-detail a { color: var(--color-link); text-decoration: none; }
.contact-detail a:hover { color: var(--color-primary); }
.contact-detail__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius); background: var(--color-bg-alt);
  color: var(--color-heading); display: flex; align-items: center; justify-content: center;
}
.contact-form-wrap {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-8); border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow);
}
.contact-form h3 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-6); font-size: var(--text-xl); }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .contact-form-wrap { padding: var(--space-6); }
}

/* ── 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: centered-cta ── */
.hero--centered {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
  color: #fff;
}
/* Background image mode */
.hero--centered.hero--has-image {
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
}
.hero--centered.hero--has-image .hero__bg {
  background: linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.55) 100%);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 50%),
    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='%23ffffff' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.hero--has-image .hero__bg {
  /* Override the pattern with just the dark overlay when we have an image */
  background:
    linear-gradient(160deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.55) 100%);
}
.hero__content {
  position: relative; z-index: 1;
  padding: var(--space-24) 0 var(--space-16);
  max-width: 780px; margin: 0 auto;
  text-align: center;
}
.hero__badge-wrap { text-align: center; margin-bottom: var(--space-6); }
.hero__badge {
  display: inline-block; padding: var(--space-2) var(--space-5);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-full); font-size: var(--text-sm);
  font-weight: 500; letter-spacing: var(--tracking-wide);
  color: rgba(255,255,255,0.9);
}
.hero--has-image .hero__badge {
  background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
}
.hero--centered h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: var(--leading-tight);
  color: #fff; margin-bottom: var(--space-5); letter-spacing: var(--tracking-tight);
  text-align: center;
}
.hero--has-image h1 { text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.hero__sub {
  font-size: var(--text-lg); line-height: var(--leading-relaxed);
  opacity: 0.85; max-width: 600px; margin: 0 auto var(--space-8);
  font-weight: 300; text-align: center;
}
.hero--has-image .hero__sub { text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.hero__actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10);
}
.btn--outline-white {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: #fff;
}
.hero__trust-wrap { text-align: center; }
.hero__trust {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: var(--space-5) var(--space-8);
  background: rgba(255,255,255,0.07); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md);
}
.hero--has-image .hero__trust {
  background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.15);
}
.hero__trust-sep { width: 1px; height: 36px; background: rgba(255,255,255,0.15); }
.hero__trust-item { text-align: center; }
.hero__trust-num {
  display: block; font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; color: var(--color-accent); line-height: 1;
}
.hero__trust-label {
  display: block; font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  opacity: 0.7; margin-top: var(--space-1);
}

@media (max-width: 768px) {
  .hero__content { padding: var(--space-16) 0 var(--space-10); }
  .hero__trust { flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-6); }
  .hero__trust-sep { width: 60px; height: 1px; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── 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-main { 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); }

/* Two widgets and no prose (main_type). Nothing to travel beside, so the
   sticky comes off: an image scrolling against a services list is motion
   without a reason, and the taller column drags the shorter one's card with
   it. */
.cb-grid--pair .cb-sidebar { position: static; }

/* 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; }
.cb-actions--center { justify-content: center; }
.cb-actions--right  { justify-content: flex-end; }

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

/* Image size: a share of the column. The caption is inside .cb-media, so it
   narrows with its photo. */
.cb-media--large  { width: 75%; margin-inline: auto; }
.cb-media--medium { width: 50%; margin-inline: auto; }
.cb-media--small  { width: 33%; min-width: 96px; margin-inline: auto; }
.cb-media--left   { margin-left: 0; margin-right: auto; }
.cb-media--right  { margin-left: auto; margin-right: 0; }
@media (max-width: 768px) {
  .cb-media--right { margin-left: auto; margin-right: auto; }
}
.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; }

/* Services list — the same card and the same rows as the typed checklist,
   because to a reader it is the same thing; only where the words come from
   differs. */
.cb-list-heading {
  font-family: var(--font-display); color: var(--color-heading);
  font-size: var(--text-lg); margin-bottom: var(--space-3);
}
/* Twenty services in one column is a very tall card beside a photo. Columns
   rather than a grid, so the list reads DOWN one side and then the other, the
   way a list is read. */
.cb-check-list--2col { column-count: 2; column-gap: var(--space-8); }
.cb-check-list--2col .cb-check-item { break-inside: avoid; }
/* A row that happens to be a link still has to look like a row, not like body
   copy that has turned blue. */
.cb-check-item--link {
  display: block; text-decoration: none;
  color: var(--color-on-card, var(--color-text));
  transition: color 0.15s ease;
}
.cb-check-item--link:hover { color: var(--color-accent); }

.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-main { order: 1; }
  .cb-grid--text-right .cb-sidebar { order: 2; }
  /* AFTER the text-right rules on purpose: identical specificity, so when a
     section sets both it is this one that wins. */
  .cb-grid--m-flip .cb-text,
  .cb-grid--m-flip .cb-main { order: 2; }
  .cb-grid--m-flip .cb-sidebar { order: 1; }
  .cb-sidebar { position: static; }
  /* Two columns of services is one column on a phone, like everything else. */
  .cb-check-list--2col { column-count: 1; }
}

/* ── Services: carousel ── */
.svc-carousel { position: relative; margin: 0 -var(--space-2); }
.svc-carousel__track {
  display: flex; gap: var(--space-6); overflow-x: auto; scroll-behavior: smooth;
  padding: var(--space-4) var(--space-2); scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
.svc-carousel__track::-webkit-scrollbar { display: none; }
.svc-carousel__card {
  flex: 0 0 calc(100% / var(--visible, 3) - var(--space-4));
  scroll-snap-align: start;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-bg-card);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none; color: inherit; display: block;
}
.svc-carousel__card:hover { transform: translateY(-4px); }
.svc-carousel__card--bordered { border: 1.5px solid var(--color-border); }
.svc-carousel__card--bordered:hover { border-color: var(--color-accent); }
.svc-carousel__card--shadow { box-shadow: var(--shadow); }
.svc-carousel__card--shadow:hover { box-shadow: var(--shadow-lg); }
.svc-carousel__card--flat { background: var(--color-bg-muted); }

.svc-carousel__icon {
  font-size: 2.5rem; padding: var(--space-6) var(--space-6) 0;
}
.svc-carousel__photo { height: 160px; overflow: hidden; }
.svc-carousel__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-carousel__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.svc-carousel__body h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-heading); margin-bottom: var(--space-2); }
.svc-carousel__body p { font-size: 0.875rem; color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.svc-carousel__link { font-size: 0.875rem; font-weight: 600; color: var(--color-link); }
.svc-carousel__card:hover .svc-carousel__link { color: var(--color-primary); }

/* Image-only: the photo IS the card, so the border, padding and background
   that frame a text card all come off. Fixed-height keeps a row of photos on
   one baseline whatever their aspect ratios are. */
.svc-carousel__card--image-only { padding: 0; border: none; background: none; box-shadow: none; overflow: hidden; }
.svc-carousel__card--image-only .svc-carousel__photo { height: 220px; margin: 0; }
.svc-carousel__card--image-only .svc-carousel__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-carousel__card--image-only .svc-carousel__icon { display: flex; align-items: center; justify-content: center; height: 220px; margin: 0; }
.svc-carousel__card--image-only:hover { border-color: transparent; box-shadow: none; }

.svc-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  font-size: 1.5rem; color: var(--color-heading); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: all var(--transition-fast);
}
.svc-carousel__arrow:hover { background: var(--color-primary); color: #fff; }
.svc-carousel__arrow--left { left: -16px; }
.svc-carousel__arrow--right { right: -16px; }

.svc-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-4); }

@media (max-width: 1024px) {
  .svc-carousel__card { flex: 0 0 calc(50% - var(--space-3)); }
}
@media (max-width: 768px) {
  .svc-carousel__card { flex: 0 0 calc(85%); }
  .svc-carousel__arrow { display: none; }
}

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

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

/* ── Services: icon-grid ── */
.section-services { background: var(--color-bg); }
.section-header { max-width: 600px; margin: 0 auto var(--space-12); }
.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);
}
/* ── Card size scale ── shared small/medium/large/xlarge vocabulary (see
   utils/card-size.js). Vars on the grid, card rules written once against them. */
.svc-grid--size-small { --svc-col-min: 210px; --svc-pad-y: var(--space-6); --svc-pad-x: var(--space-5); --svc-icon-box: 44px; --svc-icon-glyph: 1.375rem; --svc-photo-h: 130px; --svc-title: var(--text-base); --svc-desc: 0.8125rem; }
.svc-grid--size-medium { --svc-col-min: 250px; --svc-pad-y: var(--space-8); --svc-pad-x: var(--space-6); --svc-icon-box: 56px; --svc-icon-glyph: 1.75rem; --svc-photo-h: 160px; --svc-title: var(--text-lg); --svc-desc: 0.875rem; }
.svc-grid--size-large { --svc-col-min: 300px; --svc-pad-y: var(--space-10); --svc-pad-x: var(--space-8); --svc-icon-box: 68px; --svc-icon-glyph: 2.125rem; --svc-photo-h: 200px; --svc-title: var(--text-xl); --svc-desc: 0.9375rem; }
.svc-grid--size-xlarge { --svc-col-min: 360px; --svc-pad-y: var(--space-12); --svc-pad-x: var(--space-10); --svc-icon-box: 80px; --svc-icon-glyph: 2.5rem; --svc-photo-h: 240px; --svc-title: var(--text-2xl); --svc-desc: 1rem; }

.svc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--svc-col-min, 250px), 1fr));
  gap: var(--space-6);
}
.svc-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--svc-pad-y, var(--space-8)) var(--svc-pad-x, var(--space-6)); text-align: center;
  border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}
.svc-card__icon {
  width: var(--svc-icon-box, 56px); height: var(--svc-icon-box, 56px); margin: 0 auto var(--space-4);
  border-radius: var(--radius); font-size: var(--svc-icon-glyph, 1.75rem);
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
}
.svc-card__photo { margin-bottom: var(--space-4); border-radius: var(--radius); overflow: hidden; }
.svc-card__photo img { width: 100%; height: var(--svc-photo-h, 160px); object-fit: cover; display: block; }
.svc-card__title {
  font-family: var(--font-display); font-size: var(--svc-title, var(--text-lg));
  color: var(--color-heading); margin-bottom: var(--space-2);
}
.svc-card__desc {
  font-size: var(--svc-desc, 0.875rem); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); margin-bottom: var(--space-4);
}
.svc-card__link {
  font-size: 0.875rem; font-weight: 600;
  color: var(--color-link); text-decoration: none;
  transition: color var(--transition-fast);
}
.svc-card__link:hover { color: var(--color-primary); }

@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr; }
  /* Mobile step-down via the same vars — see quote-selector/horizontal.js for
     why this redeclares vars instead of overriding the card rule. */
.svc-grid--size-small { --svc-pad-y: var(--space-5); --svc-pad-x: var(--space-4); }
.svc-grid--size-medium { --svc-pad-y: var(--space-6); --svc-pad-x: var(--space-6); }
.svc-grid--size-large { --svc-pad-y: var(--space-8); --svc-pad-x: var(--space-6); }
.svc-grid--size-xlarge { --svc-pad-y: var(--space-10); --svc-pad-x: var(--space-8); }
  .svc-card { padding: var(--svc-pad-y, var(--space-6)) var(--svc-pad-x, var(--space-6)); }
}

/* ── About: split-content ── */
.section-about { background: var(--color-bg-muted); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.about-image img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.about-image--large  { width: 75%; margin-inline: auto; }
.about-image--medium { width: 50%; margin-inline: auto; }
.about-image--small  { width: 33%; min-width: 96px; margin-inline: auto; }
.about-image--left   { margin-left: 0; margin-right: auto; }
.about-image--right  { margin-left: auto; margin-right: 0; }
@media (max-width: 768px) {
  .about-image--right { margin-left: auto; margin-right: auto; }
}
.about-text p { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); max-width: none; }
.about-highlights { display: flex; gap: var(--space-8); }
.about-highlight { text-align: center; }
.about-highlight__num {
  display: block; font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 700; color: var(--color-heading); line-height: 1;
}
.about-highlight__label { display: block; font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; margin-top: var(--space-1); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.about-values { display: flex; flex-direction: column; gap: var(--space-5); }
.value-card {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-6); border: 1px solid var(--color-border-light);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.value-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--color-bg-alt); color: var(--color-heading);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.value-card h4 { font-family: var(--font-display); color: var(--color-heading); font-size: var(--text-base); margin-bottom: var(--space-2); }
.value-card p { font-size: 0.875rem; color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: 0; }

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-highlights { flex-direction: row; gap: var(--space-6); justify-content: center; }
}

/* ── Team: circle-grid ── */
.circle-grid {
  display: grid; gap: var(--space-8);
  justify-items: center; text-align: center;
  overflow: visible;
}
.circle-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.circle-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.circle-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.circle-card {
  position: relative; cursor: pointer;
  transition: transform var(--transition-fast);
}
.circle-card:hover { transform: scale(1.05); }
.circle-card__img {
  border-radius: 50%; overflow: hidden; margin: 0 auto var(--space-3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow var(--transition);
}
.circle-card:hover .circle-card__img { box-shadow: 0 8px 24px rgba(0,0,0,0.14); }
.circle-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.circle-card__avatar {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff;
  font-family: var(--font-display);
}
.circle-card__name { font-family: var(--font-display); font-weight: 600; color: var(--color-heading); font-size: 0.875rem; margin-bottom: var(--space-1); }
.circle-card__title { font-size: 0.8rem; color: var(--color-text-muted); }

/* Click-to-expand popover */
.circle-card__popover {
  display: none; position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 8px); z-index: 10;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg); min-width: 220px;
  flex-direction: column; gap: var(--space-2);
  font-size: 0.8rem; text-align: left;
}
.circle-card__popover a, .circle-card__popover span {
  display: block; color: var(--color-text-muted); text-decoration: none;
  white-space: nowrap;
}
.circle-card__popover a:hover { color: var(--color-primary); }
.circle-card:focus, .circle-card:focus-within { z-index: 20; position: relative; }
.circle-card:focus .circle-card__popover,
.circle-card:focus-within .circle-card__popover {
  display: flex;
}
/* Arrow */
.circle-card__popover::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-bg-card);
}

@media (max-width: 1024px) {
  .circle-grid--cols-5 { grid-template-columns: repeat(3, 1fr); }
  .circle-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .circle-grid--cols-5, .circle-grid--cols-4, .circle-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .circle-card__popover { position: static; transform: none; margin-top: var(--space-2); display: none; box-shadow: none; border: none; padding: var(--space-2); text-align: center; }
  .circle-card:focus .circle-card__popover { display: flex; align-items: center; }
}

/* ── Contact: inline-form ── */
.contact-logo { margin-bottom: var(--space-4); }
.contact-logo__img { max-height: 80px; object-fit: contain; }
.section-contact { background: var(--color-bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.contact-info p { color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); }
.contact-details { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-detail { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.875rem; line-height: var(--leading-relaxed); }
.contact-detail strong { color: var(--color-heading); font-weight: 600; }
.contact-detail a { color: var(--color-link); text-decoration: none; }
.contact-detail a:hover { color: var(--color-primary); }
.contact-detail__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius); background: var(--color-bg-alt);
  color: var(--color-heading); display: flex; align-items: center; justify-content: center;
}
.contact-form-wrap {
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--space-8); border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow);
}
.contact-form h3 { font-family: var(--font-display); color: var(--color-heading); margin-bottom: var(--space-6); font-size: var(--text-xl); }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .contact-form-wrap { padding: var(--space-6); }
}

/* ── Carriers: card-v2-large ── */
.cc-lg-grid { display: flex; flex-direction: column; gap: var(--space-5); }
.cc-lg-grid--two { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.cc-lg-card {
  display: flex; gap: var(--space-6); padding: var(--space-6);
  background: var(--color-bg-card); border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); transition: border-color var(--transition), box-shadow var(--transition);
}
.cc-lg-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); }
/* The logo may never be wider than its column. It used to be allowed 200px in a
   160px column, so every wide wordmark overhung by 40px and sat 4px from the
   carrier name instead of the card's 24px gap (BSH: 10 of 14 logos). */
.cc-lg-card__logo {
  flex-shrink: 0; width: 180px; display: flex; align-items: center; justify-content: center;
}
.cc-lg-card__logo img { max-width: 100%; height: auto; max-height: 64px; object-fit: contain; }
.cc-lg-card__placeholder {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-size: 2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cc-lg-card__info { flex: 1; }
.cc-lg-card__name {
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--color-heading); margin-bottom: var(--space-1);
}
.cc-lg-card__website { margin-bottom: var(--space-2); }
.cc-lg-card__website a { color: var(--color-link); text-decoration: none; font-size: 0.875rem; }
.cc-lg-card__website a:hover { text-decoration: underline; }
.cc-lg-card__phones { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); font-size: 0.875rem; }
.cc-lg-card__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cc-lg-card__actions .btn { font-size: 0.875rem; padding: var(--space-2) var(--space-4); }
.btn--disabled { opacity: 0.4; pointer-events: none; }

/* Two-column cards: the buttons share the info column so its right edge lines
   up with the card's padding rather than leaving a ragged strip. Desktop only;
   on a phone the info column is only as wide as its text, and splitting it
   wraps "Online Payment" onto two lines. */
@media (min-width: 769px) {
  .cc-lg-grid--two .cc-lg-card__actions .btn { flex: 1 1 0; }
}

@media (max-width: 768px) {
  .cc-lg-grid--two { grid-template-columns: 1fr; }
  .cc-lg-card { flex-direction: column; align-items: center; text-align: center; }
  .cc-lg-card__phones { justify-content: center; }
  .cc-lg-card__actions { justify-content: center; }
}



/* ── 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_3i2zu1 ── */
#sec_3i2zu1, [data-style-id="sec_3i2zu1"] { border-bottom: 1px solid var(--color-border-light); }
/* ── Section style: sec_j6xlmz ── */
#sec_j6xlmz .card, [data-style-id="sec_j6xlmz"] .card, #sec_j6xlmz .svc-card, [data-style-id="sec_j6xlmz"] .svc-card, #sec_j6xlmz .svc32-card, [data-style-id="sec_j6xlmz"] .svc32-card, #sec_j6xlmz .svc-photo-card, [data-style-id="sec_j6xlmz"] .svc-photo-card, #sec_j6xlmz .svc-carousel__card, [data-style-id="sec_j6xlmz"] .svc-carousel__card, #sec_j6xlmz .alt-row, [data-style-id="sec_j6xlmz"] .alt-row, #sec_j6xlmz .cc-card, [data-style-id="sec_j6xlmz"] .cc-card, #sec_j6xlmz .cc-lg-card, [data-style-id="sec_j6xlmz"] .cc-lg-card, #sec_j6xlmz .cc-crs__card, [data-style-id="sec_j6xlmz"] .cc-crs__card, #sec_j6xlmz .cc-wall__item, [data-style-id="sec_j6xlmz"] .cc-wall__item, #sec_j6xlmz .carrier-logo, [data-style-id="sec_j6xlmz"] .carrier-logo, #sec_j6xlmz .team-card, [data-style-id="sec_j6xlmz"] .team-card, #sec_j6xlmz .bio-card, [data-style-id="sec_j6xlmz"] .bio-card, #sec_j6xlmz .circle-card, [data-style-id="sec_j6xlmz"] .circle-card, #sec_j6xlmz .stagger-card, [data-style-id="sec_j6xlmz"] .stagger-card, #sec_j6xlmz .tcc-card, [data-style-id="sec_j6xlmz"] .tcc-card, #sec_j6xlmz .location-card, [data-style-id="sec_j6xlmz"] .location-card, #sec_j6xlmz .testi-card, [data-style-id="sec_j6xlmz"] .testi-card, #sec_j6xlmz .option-card, [data-style-id="sec_j6xlmz"] .option-card { box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: none; }
#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_1bqhr5w ── */
#sec_1bqhr5w#sec_1bqhr5w, [data-style-id="sec_1bqhr5w"][data-style-id="sec_1bqhr5w"] { 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/banners/1782487521965-goodwin-cta-band.jpg') center/cover no-repeat; }
#sec_1bqhr5w#sec_1bqhr5w h2:not(.svc-photo-card__label), [data-style-id="sec_1bqhr5w"][data-style-id="sec_1bqhr5w"] h2:not(.svc-photo-card__label), #sec_1bqhr5w#sec_1bqhr5w .section-title, [data-style-id="sec_1bqhr5w"][data-style-id="sec_1bqhr5w"] .section-title { color: #E8A838; }
#sec_1bqhr5w#sec_1bqhr5w p, [data-style-id="sec_1bqhr5w"][data-style-id="sec_1bqhr5w"] p, #sec_1bqhr5w#sec_1bqhr5w .rt-list li, [data-style-id="sec_1bqhr5w"][data-style-id="sec_1bqhr5w"] .rt-list li { color: rgba(255,255,255,0.9); }
/* ── Section style: sec_1ajzdyj ── */
#sec_1ajzdyj h1, [data-style-id="sec_1ajzdyj"] h1, #sec_1ajzdyj h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_1ajzdyj"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_1ajzdyj .section-title, [data-style-id="sec_1ajzdyj"] .section-title, #sec_1ajzdyj .section-eyebrow, [data-style-id="sec_1ajzdyj"] .section-eyebrow, #sec_1ajzdyj .hero__badge-wrap, [data-style-id="sec_1ajzdyj"] .hero__badge-wrap, #sec_1ajzdyj .hero__trust-wrap, [data-style-id="sec_1ajzdyj"] .hero__trust-wrap { text-align: left; }
#sec_1ajzdyj .section-subtitle, [data-style-id="sec_1ajzdyj"] .section-subtitle, #sec_1ajzdyj .page-header p, [data-style-id="sec_1ajzdyj"] .page-header p, #sec_1ajzdyj .hero__sub, [data-style-id="sec_1ajzdyj"] .hero__sub, #sec_1ajzdyj .hero--ifthen__subtitle, [data-style-id="sec_1ajzdyj"] .hero--ifthen__subtitle { text-align: left; }
#sec_1ajzdyj p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_1ajzdyj"] p:not(.section-subtitle):not(.section-eyebrow) { text-align: left; }
/* ── 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: left; }
#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: left; }
#sec_105ycp p:not(.section-subtitle):not(.section-eyebrow), [data-style-id="sec_105ycp"] p:not(.section-subtitle):not(.section-eyebrow) { text-align: left; }
#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 .tcc-card__name, [data-style-id="sec_105ycp"] .tcc-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: left; }
/* ── Section style: sec_18eue46 ── */
#sec_18eue46 h1, [data-style-id="sec_18eue46"] h1, #sec_18eue46 h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), [data-style-id="sec_18eue46"] h2:not(.hero--ifthen__subtitle):not(.svc-photo-card__label), #sec_18eue46 .section-title, [data-style-id="sec_18eue46"] .section-title, #sec_18eue46 .section-eyebrow, [data-style-id="sec_18eue46"] .section-eyebrow, #sec_18eue46 .hero__badge-wrap, [data-style-id="sec_18eue46"] .hero__badge-wrap, #sec_18eue46 .hero__trust-wrap, [data-style-id="sec_18eue46"] .hero__trust-wrap { text-align: center; }
#sec_18eue46 .section-subtitle, [data-style-id="sec_18eue46"] .section-subtitle, #sec_18eue46 .page-header p, [data-style-id="sec_18eue46"] .page-header p, #sec_18eue46 .hero__sub, [data-style-id="sec_18eue46"] .hero__sub, #sec_18eue46 .hero--ifthen__subtitle, [data-style-id="sec_18eue46"] .hero--ifthen__subtitle { text-align: center; }
#sec_18eue46 .section-subtitle, [data-style-id="sec_18eue46"] .section-subtitle, #sec_18eue46 .page-header p, [data-style-id="sec_18eue46"] .page-header p, #sec_18eue46 .hero__sub, [data-style-id="sec_18eue46"] .hero__sub, #sec_18eue46 .hero--ifthen__subtitle, [data-style-id="sec_18eue46"] .hero--ifthen__subtitle { max-width: none; }
#sec_18eue46 h3, [data-style-id="sec_18eue46"] h3, #sec_18eue46 .card h3, [data-style-id="sec_18eue46"] .card h3, #sec_18eue46 .team-card__name, [data-style-id="sec_18eue46"] .team-card__name, #sec_18eue46 .circle-card__name, [data-style-id="sec_18eue46"] .circle-card__name, #sec_18eue46 .tcc-card__name, [data-style-id="sec_18eue46"] .tcc-card__name, #sec_18eue46 .cc-name, [data-style-id="sec_18eue46"] .cc-name, #sec_18eue46 .carrier-logo__name, [data-style-id="sec_18eue46"] .carrier-logo__name, #sec_18eue46 .testi-card__name, [data-style-id="sec_18eue46"] .testi-card__name, #sec_18eue46 .svc-photo-card__label, [data-style-id="sec_18eue46"] .svc-photo-card__label { text-align: center; }