/* atlantagaragedoorpros.com | p08-steel-cyan + f09-figtree-rubik + cut/two-tone */
:root{--primary:#4361EE;--primary-ground:#4361EE;--primary-ink:#394dc3;--secondary:#d06868;--on-primary:#ffffff;--on-primary-muted:rgb(255 255 255 / .78);--font-head:"Figtree", ui-sans-serif, system-ui, sans-serif;--font-body:"Rubik", ui-sans-serif, system-ui, -apple-system, sans-serif;--h1-size:clamp(34px, 5.2vw, 60px);--h2-size:clamp(28px, 4vw, 42px);--body-size:17px;--radius:14px;--btn-radius:999px;--section-pad:80px;}
/* base.css */
/* base.css - reset, section shell, cross-cutting bits.
   The background palette lives in backgrounds.css; theme tokens are injected as
   a :root block ahead of this file in the bundle. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: var(--body-size, 16px);
  color: #16181d;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-head, inherit); line-height: 1.2; margin: 0 0 .4em; }

/* brand: logo + site name in the navbar */
.site-logo { height: 46px; width: auto; display: block; flex: none; image-rendering: -webkit-optimize-contrast; }
.site-brand-name { line-height: 1.12; }

/* section shell */
.sec {
  padding: var(--section-pad, 64px) 20px;
  /* Eyebrow pill tone - default (light section): dark translucent pill, dark
     text. Flipped to a light pill on dark/colored sections by the same
     selector list that flips the CTA button tone (backgrounds.css), so one
     eyebrow style stays legible regardless of the section's background. */
  --eyebrow-bg: rgba(15, 17, 21, .06);
  --eyebrow-fg: #16181d;
  --eyebrow-border: rgba(15, 17, 21, .08);
}
.sec-inner { max-width: 1080px; margin: 0 auto; }

/* Small uppercase eyebrow label used above hero/section titles - pill-shaped,
   translucent + blurred so it reads as a floating chip over any backdrop
   (photo, color, white card), with a brand-accent dot for a premium feel.
   Colors come from --eyebrow-* (above) so the same markup adapts to light or
   dark sections automatically. */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .07em; font-size: 12px; font-weight: 600;
  color: var(--eyebrow-fg);
  background: var(--eyebrow-bg);
  border: 1px solid var(--eyebrow-border);
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-ground, var(--primary, #0F62FE)); flex: none; }

/* breadcrumbs (emitted by any block with breadcrumb: true) -
   kept subtle: small, light weight, muted, reads as secondary metadata */
.breadcrumbs { font-size: 12px; font-weight: 500; line-height: 1.4; margin: 0 0 18px; letter-spacing: .01em; }
.breadcrumbs a { text-decoration: none; color: inherit; opacity: .85; }
.breadcrumbs a:hover { text-decoration: underline; opacity: 1; }
.crumb-sep { margin: 0 7px; opacity: .5; }
.crumb-current { font-weight: 500; opacity: 1; }

/* Bullet lists inside prose paragraphs - the builder promotes a paragraph to
   <ul><li> when every line starts with "- " (big_cards, cost, area_links,
   post_list, sections all funnel through the same paragraph renderer), so one
   generic style covers it regardless of which component/variant it lands in. */
.prose-list { margin: 0 0 12px; padding-left: 20px; }
.prose-list:last-child { margin-bottom: 0; }
.prose-list li { margin: 0 0 4px; }
.prose-list li:last-child { margin-bottom: 0; }

/* internal auto-links inserted into big_cards prose during build */
.il { color: var(--primary-ink, var(--primary, #0F62FE)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.il:hover { text-decoration-thickness: 2px; }

/* Photo row inside the sections (big_cards) block - three shots in one row. */
.bc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: 100%; }
.bc-gallery-frame { display: block; overflow: hidden; border-radius: 14px; box-shadow: 0 6px 24px rgba(16, 24, 40, .06); }
.bc-gallery-shot { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .4s ease; }
.bc-gallery-frame:hover .bc-gallery-shot { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .bc-gallery-shot { transition: none; } .bc-gallery-frame:hover .bc-gallery-shot { transform: none; } }
@media (max-width: 720px) { .bc-gallery { grid-template-columns: 1fr; } .bc-gallery-shot { height: 200px; } }

/* Hero trust badges live in assets/badges.css (variant styles v1-v4). */

/* Animated decorative shapes behind every CTA section. Pure-CSS transform
   drift (GPU, lightweight); the section's bg color is untouched, and the
   content layer stays above and static for readability. */
section[class*="cta-v"] { position: relative; overflow: hidden; }
section[class*="cta-v"] > .sec-inner { position: relative; z-index: 1; }
section[class*="cta-v"]::before,
section[class*="cta-v"]::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; will-change: transform;
}
section[class*="cta-v"]::before {
  width: 480px; height: 480px; top: -150px; left: -110px;
  background: radial-gradient(circle, rgb(90 150 255 / .28), transparent 66%);
  animation: cta-drift-a 18s ease-in-out infinite;
}
section[class*="cta-v"]::after {
  width: 400px; height: 400px; bottom: -150px; right: -90px;
  background: radial-gradient(circle, rgb(255 255 255 / .16), transparent 66%);
  animation: cta-drift-b 22s ease-in-out infinite;
}
@keyframes cta-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(90px, 60px) scale(1.18); } }
@keyframes cta-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-80px, -50px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  section[class*="cta-v"]::before, section[class*="cta-v"]::after { animation: none; }
}

/* buttons (Phase 6 replaces these with the btn variant families) */
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--btn-radius, 999px);
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}
.btn-primary { background: var(--primary-ground, var(--primary, #0F62FE)); color: var(--on-primary, #fff); }
.btn-secondary { background: transparent; color: inherit; border: 1px solid currentColor; }

/* Shared button hover (used by the CTA "Request a quote"/"Call" buttons and any
   section that renders a plain .btn). Variant-specific buttons that define their
   own :hover keep it -- these only fill the gap where none existed. */
.btn { transition: transform .16s ease, box-shadow .2s ease, filter .16s ease, background-color .16s ease, border-color .16s ease; }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--primary, #0F62FE) 55%, transparent); }
.btn-secondary:hover { background: color-mix(in srgb, currentColor 10%, transparent); transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .28); }
.btn-primary:active, .btn-secondary:active { transform: translateY(0); }

/* Per-site hero primary-button hover shadow. A `herofx-N` class on <body>
   selects one of ten styles so the fleet varies. Higher specificity than the
   hero variants' own button :hover, so it wins the shadow. */
.herofx-1 [class*="-btn-call"]:hover  { transform: translateY(1px);  box-shadow: 0 16px 22px -10px rgba(0,0,0,.30); }                                                     /* slippy */
.herofx-2 [class*="-btn-call"]:hover  { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(0,0,0,.26); }                                                     /* soft lift */
.herofx-3 [class*="-btn-call"]:hover  { transform: translateY(-4px); box-shadow: 0 26px 50px -16px rgba(0,0,0,.40); }                                                     /* deep float */
.herofx-4 [class*="-btn-call"]:hover  { transform: translateY(-2px); box-shadow: 0 8px 30px -4px color-mix(in srgb, var(--primary,#0F62FE) 60%, transparent); }           /* glow */
.herofx-5 [class*="-btn-call"]:hover  { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.10), 0 8px 16px -4px rgba(0,0,0,.14), 0 18px 34px -12px rgba(0,0,0,.20); } /* layered */
.herofx-6 [class*="-btn-call"]:hover  { transform: translateY(1px);  box-shadow: inset 0 3px 8px rgba(0,0,0,.30), 0 4px 10px -6px rgba(0,0,0,.24); }                      /* pressed reverse */
.herofx-7 [class*="-btn-call"]:hover  { transform: translateY(-2px); box-shadow: 0 22px 60px -18px rgba(0,0,0,.32); }                                                     /* luxury blur */
.herofx-8 [class*="-btn-call"]:hover  { transform: translateY(-2px); box-shadow: 15px 16px 30px -14px rgba(0,0,0,.34); }                                                  /* directional */
.herofx-9 [class*="-btn-call"]:hover  { transform: translateY(-2px); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary,#0F62FE) 14%, transparent), 0 10px 24px -12px rgba(0,0,0,.22); } /* halo */
.herofx-10 [class*="-btn-call"]:hover { transform: translateY(-3px); box-shadow: 0 10px 18px -6px rgba(0,0,0,.42); }                                                      /* sharp lift */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-secondary:hover, [class*="-btn-call"]:hover { transform: none !important; }
}

/* nav dropdown item icons - small, inherit the link colour */
.nav-ico { width: 16px; height: 16px; flex: none; opacity: .8; }
a:hover > .nav-ico { opacity: 1; }

/* brand name wraps to two balanced lines for long company names */
.site-brand-name { display: flex; flex-direction: column; }
.site-brand-line { display: block; }

/* ============================================================================
   Mobile sticky Call Now bar - phone screens only. A premium, high-intent
   conversion element pinned to the bottom of the viewport.
   ========================================================================== */
.callbar { display: none; }

@media (max-width: 640px) {
  .callbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    text-decoration: none;
    color: #fff;
    background:
      linear-gradient(135deg,
        var(--primary-ground, var(--primary, #0F62FE)),
        color-mix(in srgb, var(--primary-ground, var(--primary, #0F62FE)) 68%, #000));
    box-shadow: 0 -10px 34px rgb(0 0 0 / .26);
    border-top: 1px solid rgb(255 255 255 / .16);
    animation: callbar-rise .5s cubic-bezier(.2, .7, .3, 1) both;
  }
  /* a slow sheen sweep for a premium feel */
  .callbar::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%,
      rgb(255 255 255 / .18) 48%, transparent 62%);
    background-size: 220% 100%;
    background-position: 140% 0;
    pointer-events: none;
    animation: callbar-sheen 4.5s ease-in-out 1.2s infinite;
  }
  .callbar:active { filter: brightness(.96); }

  .callbar-ico {
    position: relative; flex: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / .18);
  }
  .callbar-ico svg { width: 22px; height: 22px; fill: #fff; }
  .callbar-ico::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(255 255 255 / .5);
    animation: callbar-pulse 2s ease-out infinite;
  }
  .callbar-txt { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
  .callbar-txt strong {
    font-family: var(--font-head, inherit);
    font-size: 17px; font-weight: 800; letter-spacing: .01em;
  }
  .callbar-txt small { font-size: 13.5px; opacity: .9; font-variant-numeric: tabular-nums; }
  .callbar-cue {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 12px; font-weight: 600; opacity: .82;
    white-space: nowrap;
  }
  .callbar-cue svg { width: 16px; height: 16px; }

  /* keep page content clear of the bar */
  body { padding-bottom: 74px; }

  /* while the hamburger menu is open, the Call Now bar steps aside. Uses
     opacity + visibility (not transform) so the entrance animation, which owns
     the transform, cannot override the hide. */
  body.nav-open .callbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }
}

@keyframes callbar-pulse { to { box-shadow: 0 0 0 15px rgb(255 255 255 / 0); } }
@keyframes callbar-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes callbar-sheen { 0%, 55% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .callbar, .callbar::after, .callbar-ico::before { animation: none; }
}

/* backgrounds.css */
/* backgrounds.css - the full section background palette.
   Every `bg` class a recipe can name must exist here (validated in Phase 5). */

.section-bg-light-v1 { background: #ffffff; }
.section-bg-light-v2 { background: #f6f7f9; }
.section-bg-light-v3 { background: #eef1f5; }
.section-bg-light-v4 { background: #f4f1ea; }
.section-bg-light-v5 { background: #eef4f1; }

/* Shades of white -- warm, neutral off-whites for the light rhythm. Flat
   fills, picked for a paper/fabric feel rather than a cold grey; the more
   saturated shades in this family (beige, cornsilk, cream, navajo white,
   peach, vanilla) read as distinctly yellow/green/orange rather than
   neutral next to the rest of this set, so they were left out. */
.section-bg-light-v6  { background: #edeade; }  /* alabaster */
.section-bg-light-v8  { background: #f9f6ee; }  /* bone white */
.section-bg-light-v9  { background: #f0ead6; }  /* eggshell */
.section-bg-light-v10 { background: #fffff0; }  /* ivory */
.section-bg-light-v11 { background: #e9dcc9; }  /* linen */
.section-bg-light-v12 { background: #faf9f6; }  /* off white */
.section-bg-light-v13 { background: #fcf5e5; }  /* parchment */
.section-bg-light-v14 { background: #e2dfd2; }  /* pearl */
.section-bg-light-v15 { background: #fff5ee; }  /* seashell */

/* Same family, as soft two-stop gradients -- still light enough for dark
   body text, just with a touch more depth than a flat fill. */
.section-bg-light-grad-v1 { background: linear-gradient(135deg, #fffff0, #fcf5e5); }  /* ivory -> parchment */
.section-bg-light-grad-v2 { background: linear-gradient(135deg, #fff5ee, #f9f6ee); }  /* seashell -> bone white */
.section-bg-light-grad-v3 { background: linear-gradient(135deg, #faf9f6, #e2dfd2); }  /* off white -> pearl */
.section-bg-light-grad-v4 { background: linear-gradient(135deg, #edeade, #e9dcc9); }  /* alabaster -> linen */

/* --- Premium hero backgrounds -------------------------------------------------
   Light, dark-text-safe grounds for heroes with no full-bleed cover photo. Each
   is a layered composition -- mesh gradients (soft colour orbs) plus a fine
   pattern (dot grid, hatch, grid lines or film grain) -- so it reads as premium
   and intentional, not a flat wash. Each site is assigned one deterministically
   so the fleet varies. */

/* 1 - Cool aurora mesh: three soft orbs (sky, lilac, mint) */
.section-bg-light-hero-1 { background:
    radial-gradient(58% 55% at 14% 16%, #dde9ff 0%, transparent 60%),
    radial-gradient(52% 55% at 90% 8%, #ece2fb 0%, transparent 62%),
    radial-gradient(66% 62% at 78% 100%, #dff3ec 0%, transparent 60%),
    #f5f8fd; }

/* 2 - Warm dawn mesh: peach + rose orbs on cream */
.section-bg-light-hero-2 { background:
    radial-gradient(60% 55% at 8% 6%, #fde2cf 0%, transparent 60%),
    radial-gradient(58% 58% at 94% 22%, #fbdde8 0%, transparent 62%),
    radial-gradient(62% 60% at 60% 108%, #fdeede 0%, transparent 60%),
    linear-gradient(180deg, #fdf6f0, #faf3ec); }

/* 3 - Mint / teal mesh + fine dot grid */
.section-bg-light-hero-3 { background:
    radial-gradient(rgba(15,80,60,.055) 1px, transparent 1.5px) 0 0 / 24px 24px,
    radial-gradient(60% 58% at 88% 90%, #d3f0e2 0%, transparent 60%),
    radial-gradient(55% 55% at 8% 10%, #dcefff 0%, transparent 62%),
    #f3f9f6; }

/* 4 - Brand aurora (per-site --primary orbs) */
.section-bg-light-hero-4 { background:
    radial-gradient(62% 60% at 100% 0%, color-mix(in srgb, var(--primary, #0F62FE) 26%, #ffffff) 0%, transparent 58%),
    radial-gradient(58% 58% at 0% 100%, color-mix(in srgb, var(--primary, #0F62FE) 14%, #ffffff) 0%, transparent 60%),
    radial-gradient(45% 45% at 60% 40%, color-mix(in srgb, var(--primary, #0F62FE) 7%, #ffffff) 0%, transparent 62%),
    #f6f8fb; }

/* 5 - Lavender mesh + subtle grid lines */
.section-bg-light-hero-5 { background:
    linear-gradient(rgba(30,20,60,.04) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(30,20,60,.04) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(60% 58% at 82% 12%, #e8dffb 0%, transparent 60%),
    radial-gradient(55% 55% at 8% 92%, #e2e8ff 0%, transparent 62%),
    #f7f6fd; }

/* 6 - Aurora mesh + film grain */
.section-bg-light-hero-6 { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") 0 0 / 140px 140px,
    radial-gradient(62% 60% at 8% 6%, #dfeaff 0%, transparent 58%),
    radial-gradient(64% 66% at 96% 100%, #fadfec 0%, transparent 60%),
    radial-gradient(50% 50% at 70% 20%, #e6f6f0 0%, transparent 60%),
    #f6f8fb; }

/* 7 - Cool slate mesh + fine diagonal hatch (premium, was flat) */
.section-bg-light-hero-7 { background:
    repeating-linear-gradient(135deg, rgba(24,36,60,.028) 0 1px, transparent 1px 20px),
    radial-gradient(70% 68% at 86% 8%, #e3ebf7 0%, transparent 60%),
    radial-gradient(60% 60% at 4% 96%, #e9edf6 0%, transparent 62%),
    radial-gradient(50% 50% at 50% 50%, #f3f6fb 0%, transparent 70%),
    linear-gradient(160deg, #eef2f9, #f7fafd); }

/* 8 - Sky mesh with an overhead highlight */
.section-bg-light-hero-8 { background:
    radial-gradient(85% 70% at 50% -12%, #d7e9fe 0%, transparent 55%),
    radial-gradient(55% 55% at 92% 96%, #e3f0ff 0%, transparent 60%),
    radial-gradient(50% 50% at 6% 60%, #eaf4ff 0%, transparent 62%),
    linear-gradient(180deg, #ecf4ff, #f8fbff); }

/* 9 - Champagne / sand mesh + fine dot grid */
.section-bg-light-hero-9 { background:
    radial-gradient(rgba(120,90,40,.05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    radial-gradient(68% 62% at 88% 12%, #f4e8d1 0%, transparent 60%),
    radial-gradient(58% 58% at 6% 96%, #f6ede0 0%, transparent 62%),
    linear-gradient(165deg, #f6efe4, #fdf9f2); }

/* 10 - Peach-lilac-blue aurora mesh */
.section-bg-light-hero-10 { background:
    radial-gradient(56% 55% at 0% 0%, #dfeaff 0%, transparent 58%),
    radial-gradient(60% 60% at 100% 26%, #f4dff0 0%, transparent 60%),
    radial-gradient(60% 60% at 58% 106%, #fde6d8 0%, transparent 60%),
    radial-gradient(46% 46% at 40% 46%, #eee6fb 0%, transparent 62%),
    #f6f5fb; }

.section-bg-dark-v1  { background: #1f2430; color: #fff; }
.section-bg-dark-v2  { background: #16181d; color: #fff; }

.section-bg-primary  { background: var(--primary-ground, var(--primary, #0F62FE)); color: var(--on-primary, #fff); }

/* Colored hero backgrounds - brand-driven, white text (mainly for heroes). */
.section-bg-primary-grad   { background: linear-gradient(135deg, var(--primary, #0F62FE), color-mix(in srgb, var(--primary, #0F62FE) 62%, #000)); color: #fff; }
/* Primary blended into near-black - reads as a dark background but carries the
   brand hue (tracks --primary). */
.section-bg-primary-dark   { background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #0F62FE) 42%, #0a0a0b), #0a0a0b); color: #fff; }
.section-bg-secondary      { background: var(--secondary, #0B8A5F); color: #fff; }
.section-bg-secondary-grad { background: linear-gradient(135deg, var(--secondary, #0B8A5F), color-mix(in srgb, var(--secondary, #0B8A5F) 60%, #000)); color: #fff; }
.section-bg-brand-grad     { background: linear-gradient(135deg, var(--primary, #0F62FE), var(--secondary, #0B8A5F)); color: #fff; }

/* Standalone color hero backgrounds - distinct hues independent of --primary. */
.section-bg-teal   { background: linear-gradient(135deg, #0e7490, #0c4a6e); color: #fff; }
.section-bg-indigo { background: linear-gradient(135deg, #4338ca, #312e81); color: #fff; }
.section-bg-plum   { background: linear-gradient(135deg, #a21caf, #701a75); color: #fff; }
.section-bg-amber  { background: linear-gradient(135deg, #b45309, #7c2d12); color: #fff; }
.section-bg-rose   { background: linear-gradient(135deg, #be123c, #881337); color: #fff; }
.section-bg-slate  { background: linear-gradient(135deg, #334155, #0f172a); color: #fff; }
.section-bg-emerald  { background: linear-gradient(135deg, #047857, #064e3b); color: #fff; }
.section-bg-ocean    { background: linear-gradient(135deg, #0369a1, #082f49); color: #fff; }
.section-bg-violet   { background: linear-gradient(135deg, #6d28d9, #4c1d95); color: #fff; }
.section-bg-fuchsia  { background: linear-gradient(135deg, #c026d3, #86198f); color: #fff; }
.section-bg-grape    { background: linear-gradient(135deg, #7e22ce, #3b0764); color: #fff; }
.section-bg-forest   { background: linear-gradient(135deg, #166534, #14532d); color: #fff; }
.section-bg-wine     { background: linear-gradient(135deg, #7f1d1d, #450a0a); color: #fff; }
.section-bg-copper   { background: linear-gradient(135deg, #9a3412, #7c2d12); color: #fff; }
.section-bg-charcoal { background: linear-gradient(135deg, #374151, #111827); color: #fff; }
.section-bg-midnight { background: linear-gradient(135deg, #1e293b, #020617); color: #fff; }
.section-bg-cobalt   { background: linear-gradient(135deg, #2563eb, #1e3a8a); color: #fff; }
.section-bg-crimson  { background: linear-gradient(135deg, #dc2626, #7f1d1d); color: #fff; }
.section-bg-steel    { background: linear-gradient(135deg, #475569, #1e293b); color: #fff; }
.section-bg-graphite { background: linear-gradient(135deg, #4b5563, #1f2937); color: #fff; }
.section-bg-obsidian { background: linear-gradient(135deg, #27272a, #09090b); color: #fff; }
/* duotone / multi-stop - bolder statement heroes */
.section-bg-sunset   { background: linear-gradient(135deg, #ea580c, #be185d); color: #fff; }
.section-bg-aurora   { background: linear-gradient(135deg, #7c3aed, #2563eb 55%, #0891b2); color: #fff; }
.section-bg-nebula   { background: linear-gradient(135deg, #6366f1, #ec4899); color: #fff; }

/* CTA gradient backgrounds - all dark linear gradients, varied hue/angle. */
.cta-bg-dark-v1  { background: linear-gradient(135deg, #1e2230 0%, #0d0f14 100%); color: #fff; }  /* graphite */
.cta-bg-dark-v2  { background: linear-gradient(135deg, #0b1f3a 0%, #05070d 100%); color: #fff; }  /* deep navy */
.cta-bg-dark-v3  { background: linear-gradient(120deg, #241a12 0%, #0d0a07 100%); color: #fff; }  /* espresso */
.cta-bg-dark-v4  { background: linear-gradient(160deg, #14302c 0%, #07100e 100%); color: #fff; }  /* dark teal */
.cta-bg-dark-v5  { background: linear-gradient(135deg, #241633 0%, #0d0812 100%); color: #fff; }  /* dark plum */
.cta-bg-dark-v6  { background: linear-gradient(135deg, #2b2f3a 0%, #0f1116 100%); color: #fff; }  /* steel */
.cta-bg-dark-v7  { background: linear-gradient(120deg, #2a0f14 0%, #0d0507 100%); color: #fff; }  /* dark crimson */
.cta-bg-dark-v8  { background: linear-gradient(150deg, #12271a 0%, #060d09 100%); color: #fff; }  /* forest */
.cta-bg-dark-v9  { background: linear-gradient(135deg, #1a2740 0%, #0a0d16 50%, #05060a 100%); color: #fff; }  /* midnight */
.cta-bg-dark-v10 { background: linear-gradient(120deg, #262112 0%, #0c0a06 100%); color: #fff; }  /* bronze */

/* Muted text inside dark / primary sections stays legible. */
.section-bg-dark-v1 .text-v1-p,
.section-bg-dark-v2 .text-v1-p,
[class*="cta-bg-"] .text-v1-p,
.section-bg-primary .hero-v1-subtitle,
.section-bg-primary .hero-v1-meta { color: inherit; opacity: .9; }

/* CTA button tone - lets a hero/header sit on a light OR dark background.
   The bg class the section carries flips these tokens; the hero buttons read
   them, so the same variant is legible either way.
   Default (light section): solid primary call + dark outline quote. */
.sec {
  --cta-call-bg: var(--primary-ground, var(--primary, #0F62FE));
  --cta-call-fg: var(--on-primary, #fff);
  --cta-outline-fg: #16181d;
  --cta-outline-border: rgba(0, 0, 0, .22);
}
/* Dark / primary / gradient sections: white call + light outline quote. */
.section-bg-dark-v1, .section-bg-dark-v2, .section-bg-primary,
.section-bg-primary-grad, .section-bg-secondary, .section-bg-secondary-grad,
.section-bg-brand-grad, .section-bg-teal, .section-bg-indigo, .section-bg-plum,
.section-bg-amber, .section-bg-rose, .section-bg-slate, .section-bg-emerald,
.section-bg-ocean, .section-bg-violet, .section-bg-fuchsia, .section-bg-grape,
.section-bg-forest, .section-bg-wine, .section-bg-copper, .section-bg-charcoal,
.section-bg-midnight, .section-bg-sunset, .section-bg-aurora, .section-bg-cobalt,
.section-bg-crimson, .section-bg-steel, .section-bg-graphite, .section-bg-obsidian,
.section-bg-nebula, .section-bg-primary-dark, [class*="cta-bg-"] {
  --cta-call-bg: #fff;
  --cta-call-fg: var(--primary-ink, var(--primary, #0F62FE));
  --cta-outline-fg: #fff;
  --cta-outline-border: rgba(255, 255, 255, .65);
  --eyebrow-bg: rgba(255, 255, 255, .14);
  --eyebrow-fg: #fff;
  --eyebrow-border: rgba(255, 255, 255, .22);
}

/* shapes.css */
/* shapes.css - button & card shape variants.
   A site picks one button shape and one card shape in its theme
   (theme.shape.btn_shape / theme.shape.card_shape); theme.py turns those into
   the body classes .btnshape-<name> / .cardshape-<name> used below.

   Buttons read --btn-radius (already set everywhere) + --btn-clip; cards are
   overridden with body-scoped rules (2-class specificity) so they win over the
   component's own single-class radius. */

/* ---- button shape plumbing ------------------------------------------------
   Every button reads --btn-clip here; --btn-radius is consumed by the button
   components themselves. Component CSS never sets clip-path, so this stands. */
:is(.btn, .hero-v1-btn, .hero-v2-btn, .hero-v3-btn, .hero-v4-btn, .hero-v5-btn,
    .article-header-v1-btn, .cta-v9-primary,
    .footer-v2-cta, .footer-v3-cta, .footer-v4-cta, .footer-v5-cta, .footer-v6-cta,
    .footer-v7-cta, .footer-v8-cta, .footer-v9-cta, .footer-v10-cta, .footer-v11-cta
    ) { clip-path: var(--btn-clip, none); }

/* radius-only button shapes (multi-value radius passes straight through) */
.btnshape-pill         { --btn-radius: 999px;        --btn-clip: none; }
.btnshape-rounded-16   { --btn-radius: 16px;         --btn-clip: none; }
.btnshape-soft-8       { --btn-radius: 8px;          --btn-clip: none; }
.btnshape-sharp        { --btn-radius: 0;            --btn-clip: none; }
.btnshape-squircle     { --btn-radius: 22px;         --btn-clip: none; }  /* iOS-ish */
.btnshape-corner-tl-br { --btn-radius: 16px 0 16px 0; --btn-clip: none; } /* TL + BR */
.btnshape-corner-tr-bl { --btn-radius: 0 16px 0 16px; --btn-clip: none; } /* TR + BL */

/* clipped button shapes */
.btnshape-cut     { --btn-radius: 0; --btn-clip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btnshape-hexagon { --btn-radius: 0; --btn-clip: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }
.btnshape-hexagon :is(.btn, .hero-v1-btn, .hero-v2-btn, .hero-v3-btn, .hero-v4-btn, .hero-v5-btn, .article-header-v1-btn, .cta-v9-primary, .footer-v2-cta, .footer-v3-cta, .footer-v4-cta, .footer-v5-cta, .footer-v6-cta, .footer-v7-cta, .footer-v8-cta, .footer-v9-cta, .footer-v10-cta, .footer-v11-cta) { padding-left: 34px; padding-right: 34px; }

/* parallelogram: skew the button, counter-skew its label so text stays upright */
.btnshape-parallelogram { --btn-radius: 0; }
.btnshape-parallelogram :is(.btn, .hero-v1-btn, .hero-v2-btn, .hero-v3-btn, .hero-v4-btn, .hero-v5-btn, .article-header-v1-btn) { transform: skewX(-10deg); }
.btnshape-parallelogram :is(.hero-v1-btn, .hero-v2-btn, .hero-v3-btn, .hero-v4-btn, .hero-v5-btn, .article-header-v1-btn) > * { transform: skewX(10deg); }

/* ---- card shapes ----------------------------------------------------------
   Body-scoped so they override each card component's own border-radius.
   :is(...) keeps specificity at (body-class + card-class) = 2 classes.
   Borders/rings are drawn with box-shadow (not the `border` property) so a
   component's own border - e.g. the big_cards-v4 top strip - survives. */

/* v1 - sharp rectangle + clean 1px outer border, minimal shadow */
.cardshape-sharp :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 0; clip-path: none; box-shadow: 0 0 0 1px #dfe3e8, 0 1px 2px rgba(16, 24, 40, .05); }
/* v2 - 8px rounded, no prominent border, soft elevated shadow */
.cardshape-soft-8 :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 8px; clip-path: none; box-shadow: 0 12px 28px rgba(16, 24, 40, .11); }
/* v3 - 24px rounded, double border (thin outer + subtle inset ring) */
.cardshape-large-rounded :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 24px; clip-path: none; box-shadow: 0 0 0 1px #e3e6ea, inset 0 0 0 6px rgba(15, 23, 42, .035), 0 10px 26px rgba(16, 24, 40, .07); }
/* v4 - pill/capsule + one clearly defined outline, minimal surface */
.cardshape-pill :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 40px; clip-path: none; box-shadow: 0 0 0 2px #c3c8ce; }
/* v5 - Apple squircle + inset inner border + subtle outer shadow */
.cardshape-squircle :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 28px; clip-path: none; box-shadow: inset 0 0 0 5px #f2f5f8, 0 8px 20px rgba(16, 24, 40, .06); }
/* v6 - TL+BR rounded + offset secondary shadow (layered edge) */
.cardshape-corner-tl-br :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 28px 0 28px 0; clip-path: none; box-shadow: 0 0 0 1px #e6e8ec, 7px 7px 0 0 color-mix(in srgb, var(--primary, #CA8A04) 16%, #fff); }
/* v7 - TR+BL rounded + double outline (two thin layers with a gap) */
.cardshape-corner-tr-bl :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 0 28px 0 28px; clip-path: none; box-shadow: 0 0 0 1px #d7dbe0, 0 0 0 4px #fff, 0 0 0 5px #d7dbe0; }
/* v8 - 45deg cut corners + accent bottom edge (inset, so clip keeps it) */
.cardshape-cut :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 0; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); box-shadow: inset 0 0 0 1px #e6e8ec, inset 0 -4px 0 0 var(--primary, #CA8A04); }
/* v9 - asymmetric bottom + prominent bottom accent line following the shape */
.cardshape-two-tone :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 0 0 10px 5px; clip-path: none; box-shadow: inset 0 0 0 1px #e6e8ec, inset 0 -4px 0 0 var(--primary, #CA8A04), 0 8px 20px rgba(16, 24, 40, .07); }
/* v10 - glassmorphism + inner highlight border (best over image/dark bg) */
.cardshape-glass :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v5-card, .big-cards-v6-card, .content-card-v1-card, .post-list-v1-card, .related-v1-card, .services-v1-card) { border-radius: 16px; clip-path: none; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, .20), inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 1px 1px rgba(255, 255, 255, .5); }

/* badges.css */
/* badges.css - hero trust-badge shared base.
   The badge DESIGN is fixed per hero layout: each hero variant styles its own
   .hero-vN .hero-badge in its component CSS. currentColor = the hero text
   colour, so badges adapt to any light or dark hero background; the checkmark
   uses the brand primary. */

.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; line-height: 1; font-size: 14px; }
.hero-badge-ico { flex: none; width: 15px; height: 15px; fill: var(--primary, #CA8A04); }

/* watermarks.css */
/* watermarks.css -- faint decorative shapes behind some section grounds, for a
   more premium, considered look. Rendered in a ::before at z-index:-1 inside a
   stacking context on the section, so it sits above the flat ground colour but
   below all the section's content. Applied only to dark and brand-tinted
   grounds (never photo heroes or the sticky-image split), so most light bands
   stay clean and the effect reads as an accent, not wallpaper. */

/* establish the stacking context + clip only where a watermark is drawn */
.sec[class*="section-bg-"]:not([class*="section-bg-light"]):not([class*="hero-"]):not([class*="split-"]),
.sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="split-"]) {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* dark & brand-tinted grounds: soft light bubbles + a faint ring cluster */
.sec[class*="section-bg-"]:not([class*="section-bg-light"]):not([class*="hero-"]):not([class*="split-"])::before,
.sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="split-"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right -60px top -80px, left -80px bottom -100px, center;
  background-size: 420px 420px, 360px 360px, cover;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .07), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5'%3E%3Ccircle cx='120' cy='300' r='70'/%3E%3Ccircle cx='150' cy='330' r='30'/%3E%3Ccircle cx='560' cy='90' r='96'/%3E%3Ccircle cx='600' cy='130' r='44'/%3E%3Ccircle cx='330' cy='60' r='22'/%3E%3Ccircle cx='470' cy='330' r='16'/%3E%3C/g%3E%3C/svg%3E");
}

/* one light band per rhythm gets a whisper of the brand colour, so the light
   sections are not entirely flat either */
.sec.section-bg-light-v3:not([class*="hero-"]):not([class*="split-"]) {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.sec.section-bg-light-v3:not([class*="hero-"]):not([class*="split-"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right -40px top -70px, left -70px bottom -80px;
  background-size: 380px 380px, 300px 300px;
  background-image:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--primary, #059669) 9%, transparent), transparent 62%),
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--primary, #059669) 6%, transparent), transparent 60%);
}

@media (prefers-reduced-motion: no-preference) {
  /* the tinted/dark watermark drifts very slowly, so a long page feels alive */
  .sec[class*="section-bg-"]:not([class*="section-bg-light"]):not([class*="hero-"]):not([class*="split-"])::before,
  .sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="split-"])::before {
    animation: wm-drift 26s ease-in-out infinite alternate;
  }
}

@keyframes wm-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-14px, 10px, 0) scale(1.04); }
}

/* animations.css */
/* animations.css -- motion that ships on every site.
   1. on-scroll reveal for page sections (opt-in via a .reveal class the shipped
      JS adds, so nothing is hidden when JS is off)
   2. the mobile nav opening: items fly in one-by-one from the right
   All of it is gated behind prefers-reduced-motion. */

/* -- 1. scroll reveal ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .sec.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, .8, .3, 1),
                transform .7s cubic-bezier(.16, .8, .3, 1);
    will-change: opacity, transform;
  }
  .sec.reveal.in {
    opacity: 1;
    transform: none;
  }
  /* a gentle inner stagger: the first row of a revealed section's grid/flow
     children lifts in just behind the section itself, for a layered feel */
  .sec.reveal > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.16, .8, .3, 1);
  }
  .sec.reveal.in > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > * {
    opacity: 1;
    transform: none;
  }
  .sec.reveal.in > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > :nth-child(1)  { transition-delay: .06s; }
  .sec.reveal.in > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > :nth-child(2)  { transition-delay: .12s; }
  .sec.reveal.in > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > :nth-child(3)  { transition-delay: .18s; }
  .sec.reveal.in > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > :nth-child(4)  { transition-delay: .24s; }
  .sec.reveal.in > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > :nth-child(5)  { transition-delay: .30s; }
  .sec.reveal.in > * > :is(.grid, [class*="-grid"], [class*="-cards"], ul, .row) > :nth-child(n+6) { transition-delay: .36s; }
}

/* -- 2. mobile nav: items enter one-by-one from the right ---------------- */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* longhands (no animation-delay) so the per-item delay rules below are not
     reset to 0 by an `animation:` shorthand that outweighs them on specificity */
  body.nav-open [class*="navbar-"][class*="-nav"].is-open
    [class*="navbar-"][class*="-item"],
  body.nav-open [class*="navbar-"][class*="-nav"].is-open [class*="navbar-"][class*="-cta"] {
    animation-name: nav-item-in-right;
    animation-duration: .42s;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
    animation-fill-mode: both;
    /* pin these too: the CTA also carries `animation: <glow> ... infinite` as a
       shorthand, whose iteration-count/direction would otherwise leak in and
       make this entrance loop forever. */
    animation-iteration-count: 1;
    animation-direction: normal;
  }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(1)  { animation-delay: .04s; }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(2)  { animation-delay: .09s; }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(3)  { animation-delay: .14s; }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(4)  { animation-delay: .19s; }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(5)  { animation-delay: .24s; }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(6)  { animation-delay: .29s; }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(7)  { animation-delay: .34s; }
  body.nav-open [class*="-nav"].is-open [class*="-item"]:nth-child(n+8) { animation-delay: .39s; }
  /* the CTA button at the foot of the menu rides in last */
  body.nav-open [class*="-nav"].is-open [class*="-cta"] { animation-delay: .34s; }
}

@keyframes nav-item-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}

/* navbar/v7 */
.navbar-v7 { position: sticky; top: 0; z-index: 50; background: var(--nav-bg, #fff); color: var(--nav-fg, #16181d); border-bottom: var(--nav-border, 1px solid #e6e8ec); }
.navbar-v7-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: var(--nav-h, 64px); display: flex; align-items: center; gap: 24px; }
.navbar-v7-brand { font-weight: 800; font-size: 17px; text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.navbar-v7-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.navbar-v7-list { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.navbar-v7-item { position: relative; }
.navbar-v7-item > a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 0; display: inline-block; color: inherit; }
.navbar-v7-item > a:hover { color: var(--primary-ink, var(--primary, #0F62FE)); }
.navbar-v7-toplink { cursor: pointer; }
.navbar-v7-sub { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--nav-sub-bg, #fff); color: var(--nav-sub-fg, #16181d); border: 1px solid var(--nav-sub-border, #e6e8ec); border-radius: var(--radius, 12px); box-shadow: 0 12px 30px rgb(0 0 0 / .10); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .14s, transform .14s, visibility .14s; }
.navbar-v7-item.has-sub:hover .navbar-v7-sub, .navbar-v7-item.has-sub:focus-within .navbar-v7-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.navbar-v7-sub a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; color: inherit; }
.navbar-v7-sub a .nav-ico { color: var(--primary, #0F62FE); flex: none; opacity: .85; }
.navbar-v7-sub a:hover { background: var(--nav-sub-hover, #f2f5f9); color: var(--primary-ink, var(--primary, #0F62FE)); }
.navbar-v7-sub-index a { font-weight: 700; }
.navbar-v7-sub-index { border-bottom: 1px solid var(--nav-sub-border, #eef1f5); margin-bottom: 4px; padding-bottom: 4px; }
.navbar-v7-sub li { opacity: 0; transform: translateY(-8px) scale(.97); }
.navbar-v7-item.has-sub:hover .navbar-v7-sub li, .navbar-v7-item.has-sub:focus-within .navbar-v7-sub li, .navbar-v7-item.has-sub.is-open .navbar-v7-sub li { animation-name: navbar-v7-reveal; animation-duration: .38s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-fill-mode: forwards; }
.navbar-v7-sub li:nth-child(1)  { animation-delay: .015s; }
.navbar-v7-sub li:nth-child(2)  { animation-delay: .03s; }
.navbar-v7-sub li:nth-child(3)  { animation-delay: .045s; }
.navbar-v7-sub li:nth-child(4)  { animation-delay: .06s; }
.navbar-v7-sub li:nth-child(5)  { animation-delay: .075s; }
.navbar-v7-sub li:nth-child(6)  { animation-delay: .09s; }
.navbar-v7-sub li:nth-child(7)  { animation-delay: .105s; }
.navbar-v7-sub li:nth-child(8)  { animation-delay: .12s; }
.navbar-v7-sub li:nth-child(9)  { animation-delay: .135s; }
.navbar-v7-sub li:nth-child(10) { animation-delay: .15s; }
.navbar-v7-sub li:nth-child(11) { animation-delay: .165s; }
.navbar-v7-sub li:nth-child(12) { animation-delay: .18s; }
.navbar-v7-sub li:nth-child(13) { animation-delay: .195s; }
.navbar-v7-sub li:nth-child(14) { animation-delay: .21s; }
.navbar-v7-sub li:nth-child(n+15) { animation-delay: .225s; }
@keyframes navbar-v7-reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .navbar-v7-sub li { opacity: 1; transform: none; animation: none !important; }
}
.navbar-v7-cta { padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; }
.navbar-v7-cta-icon { width: 16px; height: 16px; fill: currentColor; flex: none; display: inline-block; }
.navbar-v7-caret { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 4px 2px 4px 5px; margin-left: 1px; cursor: pointer; color: inherit; }
.navbar-v7-chev { display: none; }
/* the dropdown chevron, shown on every screen: a small glyph that flips
   up when the menu opens. On desktop the menu also opens on hover/focus
   so the chevron follows that; on the mobile accordion there is no hover
   state, so it flips only on open/close. */
.navbar-v7-caret::before { content: "▾"; font-size: 12px; line-height: 1; color: currentColor; display: inline-block; transition: transform .18s ease; }
.navbar-v7-item.has-sub.is-open > .navbar-v7-caret::before { transform: rotate(180deg); }
@media (min-width: 861px) {
  .navbar-v7-item.has-sub:hover > .navbar-v7-caret::before,
  .navbar-v7-item.has-sub:focus-within > .navbar-v7-caret::before { transform: rotate(180deg); }
}
.navbar-v7-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; margin-left: auto; color: inherit; }
.navbar-v7-toggle span { width: 24px; height: 2px; background: currentColor; display: block; transition: transform .22s, opacity .22s; }
.navbar-v7-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-v7-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-v7-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 861px) {
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub {
    display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 3px 8px;
    padding: 16px; min-width: 520px; max-width: min(800px, calc(100vw - 32px));
    max-height: 78vh; overflow-y: auto; overflow-x: hidden;
    border-radius: calc(var(--radius, 12px) + 6px);
    box-shadow: 0 24px 60px rgb(0 0 0 / .16), 0 4px 14px rgb(0 0 0 / .06);
  }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub::before {
    content: ""; position: sticky; top: 0; left: 0; right: 0;
    display: block; height: 3px; margin: -16px -16px 13px;
    background: linear-gradient(90deg, var(--primary, #0F62FE),
      color-mix(in srgb, var(--primary, #0F62FE) 35%, #fff));
    border-radius: calc(var(--radius, 12px) + 6px) calc(var(--radius, 12px) + 6px) 0 0;
    grid-column: 1 / -1;
  }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub-index {
    grid-column: 1 / -1; margin: 0 0 10px; padding: 0; border-bottom: 0;
  }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub-index a {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; padding: 12px 14px;
    border-radius: calc(var(--radius, 12px) - 2px);
    background: color-mix(in srgb, var(--primary, #0F62FE) 8%, var(--nav-sub-bg, #fff));
    color: var(--primary-ink, var(--primary, #0F62FE));
  }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub-index a:hover {
    background: color-mix(in srgb, var(--primary, #0F62FE) 15%, var(--nav-sub-bg, #fff));
  }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub-index a::after { content: "\2192"; margin-left: auto; opacity: .7; }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub-index a .nav-ico { width: 18px; height: 18px; flex: none; }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub > li:not(.navbar-v7-sub-index) .nav-ico { width: 15px; height: 15px; flex: none; opacity: .8; }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub > li:not(.navbar-v7-sub-index) a {
    padding: 9px 12px; border-radius: calc(var(--radius, 12px) - 4px); font-size: 14.5px;
    transition: background .14s ease, color .14s ease, transform .14s ease;
  }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub > li:not(.navbar-v7-sub-index) a:hover { transform: translateX(2px); }
}
@media (min-width: 1180px) {
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub { grid-template-columns: repeat(3, minmax(190px, 1fr)); min-width: 680px; }
}
@media (min-width: 861px) {
  .navbar-v7-item.has-sub.is-wide.is-single .navbar-v7-sub {
    grid-template-columns: 1fr; min-width: 260px; max-width: 320px;
  }
}
@media (min-width: 861px) {
  .navbar-v7-item.is-right .navbar-v7-sub { left: auto; right: 0; }
  .navbar-v7-item.has-sub.is-wide .navbar-v7-sub {
    left: 50%; right: auto; transform: translateX(-50%) translateY(6px);
  }
  .navbar-v7-item.has-sub.is-wide:hover .navbar-v7-sub,
  .navbar-v7-item.has-sub.is-wide:focus-within .navbar-v7-sub { transform: translateX(-50%) translateY(0); }
}
@media (max-width: 860px) {
  .navbar-v7-toggle { display: flex; }
  .navbar-v7-brand { margin-left: 0 !important; padding-left: 0 !important; background: none !important; color: inherit !important; position: static !important; transform: none !important; }
  .navbar-v7-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--nav-bg, #fff); border-bottom: 1px solid #e6e8ec; padding: 8px 20px 20px; display: none; }
  .navbar-v7-nav.is-open { display: flex; max-height: calc(100vh - 56px); overflow-y: auto; }
  .navbar-v7-list { flex-direction: column; gap: 0; }
  .navbar-v7-item { position: static; }
  .navbar-v7-item.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .navbar-v7-item.has-sub > a { flex: 1; }
  .navbar-v7-item > a { padding: 12px 0; display: block; border-bottom: 1px solid rgba(128,128,128,.18); }
  .navbar-v7-caret { display: block; }
  .navbar-v7-caret::before { content: "\25be"; font-size: 14px; color: currentColor; display: inline-block; transition: transform .15s; }
  .navbar-v7-item.has-sub.is-open .navbar-v7-caret::before { transform: rotate(180deg); }
  .navbar-v7-sub { flex-basis: 100%; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; min-width: 0; grid-template-columns: 1fr; max-height: 0; overflow: hidden; padding: 0 0 0 12px; transition: max-height .22s ease; }
  .navbar-v7-item.has-sub.is-open .navbar-v7-sub { max-height: 320px; overflow-y: auto; padding: 4px 0 10px 12px; }
  .navbar-v7-cta { margin: 14px 0 0; justify-content: center; }
  .navbar-v7-cta-icon { display: inline-block; }
}

/* Split Navigation - logo left, nav center, CTA right */
.navbar-v7-nav { margin-left: 0; flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.navbar-v7-list { justify-content: center; }
@media (max-width: 860px) { .navbar-v7-nav { display: none; } .navbar-v7-nav.is-open { display: flex; } }

/* --- chevron (unified with navbar-v1): a real <i> element is used because a
   <button>'s ::before does not transform reliably in this renderer. The glyph
   the component shipped is dropped, and the <i> flips on open/close. The
   hover/focus flip is desktop-only; the mobile accordion flips on open/close. */
.navbar-v7-caret::before { display: none !important; content: none !important; }
.navbar-v7-caret { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 4px 4px 4px 5px; margin-left: 1px; cursor: pointer; color: inherit; }
.navbar-v7-chev { display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; opacity: .85; }
.navbar-v7-item.has-sub.is-open > .navbar-v7-caret .navbar-v7-chev { transform: translateY(2px) rotate(-135deg); }
@media (min-width: 861px) {
  .navbar-v7-item.has-sub:hover > .navbar-v7-caret .navbar-v7-chev,
  .navbar-v7-item.has-sub:focus-within > .navbar-v7-caret .navbar-v7-chev { transform: translateY(2px) rotate(-135deg); }
}
@media (max-width: 860px) {
  .navbar-v7-caret { display: block; padding: 12px; }
  .navbar-v7-chev { width: 9px; height: 9px; }
}

/* Premium navbar CTA + animated glow */
.navbar-v7-cta { position: relative; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary,#0F62FE) 55%, transparent); transition: transform .18s ease, box-shadow .22s ease, filter .18s ease; animation: navbar-v7-cta-glow 2.8s ease-in-out infinite; }
.navbar-v7-cta:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--primary,#0F62FE) 78%, transparent); }
.navbar-v7-cta:active { transform: translateY(0); }
.navbar-v7-cta-icon { transition: transform .2s ease; }
.navbar-v7-cta:hover .navbar-v7-cta-icon { transform: rotate(-8deg) scale(1.08); }
@keyframes navbar-v7-cta-glow { 0%,100% { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--primary,#0F62FE) 46%, transparent); } 50% { box-shadow: 0 11px 30px -6px color-mix(in srgb, var(--primary,#0F62FE) 76%, transparent); } }
@media (prefers-reduced-motion: reduce) { .navbar-v7-cta { animation: none; } .navbar-v7-cta:hover { transform: none; } }

/* footer/v8 */
.footer-v8 { background: linear-gradient(165deg, color-mix(in srgb, var(--primary, #0F62FE) 22%, #0a0c11) 0%, #0a0c11 74%); color: rgb(255 255 255 / .8); }
.footer-v8 a { color: inherit; text-decoration: none; }
.footer-v8 a:hover { color: #fff; }
.footer-v8-inner { max-width: 1180px; margin: 0 auto; padding: 60px 24px 34px; }
.footer-v8-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: #fff; }
.footer-v8 .site-logo { height: 42px; background: #fff; border-radius: 6px; padding: 4px; }
.footer-v8-desc { font-size: 14px; line-height: 1.65; color: rgb(255 255 255 / .58); margin: 14px 0 0; max-width: 40ch; }
.footer-v8-line { margin: 0 0 7px; font-size: 14px; }
.footer-v8-line a:hover { text-decoration: underline; }
.footer-v8-hours { opacity: .62; }
.footer-v8-h { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.footer-v8-list { list-style: none; margin: 0; padding: 0; }
.footer-v8-list li { margin: 0 0 9px; }
.footer-v8-list a { font-size: 14px; color: rgb(255 255 255 / .68); }
.footer-v8-viewall { margin-top: 4px; }
.footer-v8-viewall a { color: #6ea8ff; font-weight: 700; }
.footer-v8-viewall a:hover { color: #fff; }
.footer-v8-colw { grid-column: span 2; }
.footer-v8-areas-band { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .1); }
.footer-v8-arearow { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
.footer-v8-arearow a { font-size: 14px; color: rgb(255 255 255 / .68); }
.footer-v8-arearow a:hover { color: #fff; }
.footer-v8 .footer-v8-cta{ display: inline-block; background: var(--primary-ground, var(--primary, #0F62FE)); color: var(--on-primary, #fff); padding: 12px 24px; border-radius: var(--btn-radius, 999px); font-weight: 600; font-size: 14px; margin-top: 4px; }
.footer-v8 .footer-v8-cta:hover { filter: brightness(1.08); color: #fff; }
.footer-v8-bottom { border-top: 1px solid rgb(255 255 255 / .12); padding: 22px 24px; text-align: center; font-size: 13px; color: rgb(255 255 255 / .5); }
@media (max-width: 560px) { .footer-v8-colw { grid-column: auto; } }
.footer-v8-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 34px; align-items: start; }
.footer-v8-contact { margin-top: 16px; }
.footer-v8-primary .footer-v8-h { font-size: 16px; }
.footer-v8-primary .footer-v8-list a { font-size: 15px; color: rgb(255 255 255 / .82); }
@media (max-width: 980px) { .footer-v8-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-v8-brandcol { grid-column: 1 / -1; } }
@media (max-width: 620px) { .footer-v8-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .footer-v8-grid { grid-template-columns: 1fr; } }

.footer-v8-primary { border-top: 2px solid var(--primary, #0F62FE); padding-top: 14px; }
/* hero/v13 */
.hero-v13-eyebrow { margin: 0 0 16px; }
.hero-v13-title { font-family: var(--font-head); font-size: clamp(34px, 4.4vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; }
.hero-v13-title-hl { color: inherit; -webkit-text-fill-color: var(--primary-ink, var(--primary, #0F62FE)); -webkit-text-stroke: 1.2px currentColor; paint-order: stroke fill; }
.hero-v13-subtitle { font-size: 19px; opacity: .92; margin: 0 0 10px; max-width: 46ch; }
.hero-v13-meta { font-size: 15px; opacity: .82; margin: 0; }
.hero-v13-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-v13-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 0 26px; border-radius: var(--btn-radius, 999px); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; transition: transform .16s ease, box-shadow .18s ease, filter .16s ease, background-color .16s ease, border-color .16s ease; }
.hero-v13-btn:hover { transform: translateY(-2px); }
.hero-v13-btn:active { transform: translateY(0); }
.hero-v13-btn-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.hero-v13-btn-call { background: var(--cta-call-bg); color: var(--cta-call-fg); }
.hero-v13-btn-call:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.hero-v13-btn-quote { background: transparent; color: var(--cta-outline-fg); border: 2px solid var(--cta-outline-border); }
.hero-v13-btn-quote:hover { border-color: var(--cta-outline-fg); background: color-mix(in srgb, currentColor 14%, transparent); }
.hero-v13-btn-quote::after { content: "\2192"; margin-left: 2px; font-size: 17px; transition: transform .16s ease; }
.hero-v13-btn-quote:hover::after { transform: translateX(3px); }
.hero-v13-rating { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.hero-v13-stars { color: #ffcf4d; font-size: 13px; letter-spacing: 2px; line-height: 1; }
.hero-v13-rating-text { font-size: 13px; font-weight: 600; }
.hero-v13 .hero-badge { padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); font-weight: 600; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .hero-v13-btn:hover, .hero-v13-btn:active { transform: none; } }

.hero-v13 { padding: 72px 20px; }
/* Two-column editorial hero: copy on the left, a layered image collage on the
   right. Trust badges sit as a hairline-topped row under the copy, not in a
   thin middle column. */
.hero-v13-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 64px); align-items: center; }
.hero-v13-content { min-width: 0; }
.hero-v13-content .hero-v13-rating { margin-top: 22px; }
/* badge row under the copy */
.hero-v13 .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.hero-v13-collage { position: relative; min-width: 0; min-height: 480px; }
.hero-v13-img-a { position: absolute; top: 0; right: 0; width: 88%; height: 86%; object-fit: cover; border-radius: calc(var(--radius, 14px) + 8px); box-shadow: 0 30px 64px -18px rgba(0,0,0,.38); }
.hero-v13-img-b { position: absolute; left: 0; bottom: 0; width: 50%; height: 52%; object-fit: cover; object-position: 40% 60%; border-radius: calc(var(--radius, 14px) + 2px); box-shadow: 0 26px 54px -14px rgba(0,0,0,.44); border: 5px solid var(--bg, #fff); }
@media (max-width: 980px) { .hero-v13-grid { grid-template-columns: 1fr; gap: 30px; } .hero-v13-collage { min-height: 340px; } }

.hero-v13-rating-av { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 12px; }
.hero-v13-avatars { display: inline-flex; }
.hero-v13-av { width: 34px; height: 34px; border-radius: 50%; margin-left: -10px; border: 2px solid rgba(255,255,255,.92); background-repeat: no-repeat; background-position: center 74%; background-size: 64%; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffffff'%3E%3Ccircle%20cx='12'%20cy='9'%20r='3.6'/%3E%3Cpath%20d='M4.5%2020.5c0-4.2%203.4-6.5%207.5-6.5s7.5%202.3%207.5%206.5z'/%3E%3C/svg%3E"); }
.hero-v13-av:first-child { margin-left: 0; }
.hero-v13-av.a1 { background-color: #f59e0b; }
.hero-v13-av.a2 { background-color: #3b82f6; }
.hero-v13-av.a3 { background-color: #10b981; }
.hero-v13-av.a4 { background-color: #ef4444; }
.hero-v13-av.a5 { background-color: #8b5cf6; }
.hero-v13-rating-info { display: flex; flex-direction: column; line-height: 1.25; }
.hero-v13-rating-top { display: inline-flex; align-items: center; gap: 8px; }
.hero-v13-rating-av .hero-v13-stars { font-size: 15px; }
.hero-v13-rating-val { font-weight: 800; font-size: 15px; }
.hero-v13-rating-sub { font-size: 12.5px; opacity: .82; }

/* premium headline polish */
.hero-v13-title { font-weight: 800; letter-spacing: -.03em; line-height: 1.03; text-wrap: balance; }

/* features/v5 */
/* features/v5 - a deep-ink statement strip. The section paints its OWN
   sophisticated near-black ground (never the site's saturated brand colour),
   so the stats read as a deliberate, quiet-luxury band regardless of the
   rhythm around it. Numbers in white over a thin brand tick and muted labels. */

.features-v5 { position: relative; }
.features-v5-band {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--primary, #0F62FE) 20%, transparent), transparent 55%),
    linear-gradient(135deg, #191b21 0%, #0c0d11 100%);
}
.features-v5 .sec-inner { position: relative; z-index: 1; }

/* eyebrow pill reads on the dark band (pin the shared tokens) */
.features-v5 {
  --eyebrow-bg: rgb(255 255 255 / .1);
  --eyebrow-fg: #fff;
  --eyebrow-border: rgb(255 255 255 / .2);
}
.features-v5-eyebrow { display: flex; width: fit-content; margin: 0 auto 14px; }
.features-v5-title {
  font-family: var(--font-head, inherit);
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 10px; text-align: center; color: #fff;
}
.features-v5-sub {
  font-size: 17px; line-height: 1.6; color: rgb(255 255 255 / .72);
  max-width: 60ch; margin: 0 auto 44px; text-align: center;
}

.features-v5-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 34px 28px;
}
.features-v5-stat { min-width: 0; }
.features-v5-tick {
  display: block; width: 30px; height: 2px; margin: 0 0 18px;
  background: color-mix(in srgb, var(--primary, #0F62FE) 70%, #fff);
  border-radius: 2px;
}
.features-v5-num {
  font-family: var(--font-head, inherit);
  font-size: clamp(40px, 2.6vw + 24px, 60px);
  font-weight: 800; line-height: .92; letter-spacing: -.03em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.features-v5-label {
  margin-top: 14px; font-size: 14.5px; line-height: 1.5;
  color: rgb(255 255 255 / .66);
}

/* services/v1 */
.services-v1-eyebrow { margin: 0 0 10px; display: flex; margin-left: auto; margin-right: auto; }
.services-v1-title { font-size: var(--h2-size, clamp(28px, 4vw, 42px)); font-weight: 700; margin: 0 0 28px; text-align: center; }
.services-v1-sub { font-size: 17px; line-height: 1.55; color: inherit; opacity: .82; margin: -6px 0 22px; max-width: 62ch; text-align: center; margin-left: auto; margin-right: auto; }
.services-v1-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.services-v1-card {
  display: block;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.services-v1-card:hover { border-color: var(--primary-ink, var(--primary, #0F62FE)); transform: translateY(-2px); }
.services-v1-card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.services-v1-card-body { display: block; padding: 20px 22px; }
.services-v1-card-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.services-v1-card-text { display: block; margin: 0 0 14px; color: #3a3f47; font-size: 15px; }
.services-v1-card-more { font-size: 14px; font-weight: 600; color: var(--primary-ink, var(--primary, #0F62FE)); }

/* big_cards/v2 */
.big-cards-v2-eyebrow { margin: 0 0 10px; display: flex; margin-left: auto; margin-right: auto; }
.big-cards-v2-title { font-size: var(--h2-size, clamp(28px, 4vw, 42px)); font-weight: 700; margin: 0 0 30px; text-align: center; }
.big-cards-v2-sub { font-size: 17px; line-height: 1.55; color: inherit; opacity: .82; margin: -6px 0 22px; max-width: 62ch; text-align: center; margin-left: auto; margin-right: auto; }
.big-cards-v2-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.big-cards-v2-card {
  width: 100%; background: #fff; border: 1px solid #e6e8ec;
  border-left: 5px solid var(--primary, #0F62FE);
  border-radius: calc(var(--radius, 12px) + 2px); padding: 32px 36px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.big-cards-v2-card-eyebrow { margin: 0 0 10px; }
.big-cards-v2-card-title { font-size: 24px; font-weight: 800; margin: 0 0 14px; line-height: 1.2; }
.big-cards-v2-card-text { margin: 0 0 12px; color: #3a3f47; font-size: 16px; line-height: 1.65; }
.big-cards-v2-card-text:last-child { margin-bottom: 0; }
.big-cards-v2-footnote { margin: 20px 2px 0; font-size: 13px; color: inherit; opacity: .65; text-align: center; }

/* steps/v1 */
/* steps/v1 - refined responsive grid of numbered blocks. Each step is a free
   block led by a filled circular number badge; auto-numbered via CSS counters.
   A quiet boundary callout closes the section. Light + dark grounds supported. */

.steps-v1-eyebrow { display: flex; width: fit-content; margin: 0 auto 12px; }
.steps-v1-title {
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 10px; text-align: center;
}
.steps-v1-sub {
  font-size: 17px; line-height: 1.6; opacity: .82;
  max-width: 62ch; margin: 0 auto 36px; text-align: center;
}

.steps-v1-list {
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 26px;
}
.steps-v1-item { counter-increment: step; position: relative; padding-top: 56px; }
.steps-v1-item::before {
  content: counter(step); position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--primary-ground, var(--primary, #0F62FE)); color: var(--on-primary, #fff);
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary, #0F62FE) 30%, transparent);
}
.steps-v1-item::after {
  content: ""; position: absolute; top: 20px; left: 54px; right: 0; height: 1px;
  background: rgb(15 17 21 / .08);
}
.steps-v1-item-title { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }
.steps-v1-item-text { margin: 0; color: inherit; opacity: .82; font-size: 15px; line-height: 1.65; }
.steps-v1-item-examples {
  margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
}
.steps-v1-item-examples li {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #0F62FE) 8%, #fff);
  border: 1px solid rgb(15 17 21 / .07);
  color: var(--primary-ink, var(--primary, #0F62FE));
}

.steps-v1-boundary {
  margin-top: 40px; padding: 24px 28px;
  border: 1px solid rgb(15 17 21 / .1); border-left: 3px solid var(--primary, #0F62FE);
  border-radius: var(--radius, 12px);
  background: color-mix(in srgb, var(--primary, #0F62FE) 4%, #fff);
}
.steps-v1-boundary-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.steps-v1-boundary-list { margin: 0 0 8px; padding-left: 20px; font-size: 14px; opacity: .82; line-height: 1.6; }
.steps-v1-boundary-list li { margin: 0 0 4px; }
.steps-v1-boundary-text { margin: 0; font-size: 14px; opacity: .68; line-height: 1.6; }

/* Coloured / dark section ground */
[class*="section-bg-"]:not([class*="light"]) .steps-v1-item::after { background: rgb(255 255 255 / .16); }
[class*="section-bg-"]:not([class*="light"]) .steps-v1-item-examples li {
  background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .2); color: #fff;
}
[class*="section-bg-"]:not([class*="light"]) .steps-v1-boundary {
  background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2);
  border-left-color: #fff;
}

/* split/v3 */
/* split/v3 - copy set OVER a full-width faint media band, with the aside
   "list card" overlapping the band's lower edge. The band is the image laid
   behind the whole grid with a dark scrim, so copy reads light-on-image.
   When there is no image the band is absent, so copy falls back to the
   section ground colour (inherit) and the aside becomes a plain card.
   :has() drives the band-present adjustments. */

.split-v3-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: end;
  padding: clamp(26px, 4vw, 52px);
}
.split-v3-copy { position: relative; z-index: 1; min-width: 0; max-width: 60ch; }

/* single column (no image, no aside): copy spans on the section ground */
.split-v3-grid--single { grid-template-columns: minmax(0, 1fr); padding: 0; }
.split-v3-grid--single .split-v3-copy { max-width: 72ch; }

/* aside-only (no band): keep two columns but no overlap / no band inset */
.split-v3-grid:not(:has(.split-v3-media)) { padding: 0; align-items: start; }
.split-v3-grid:not(:has(.split-v3-media)) .split-v3-copy { max-width: none; }

/* image present but no aside: let the copy breathe wider over the band */
.split-v3-grid:has(.split-v3-media):not(:has(.split-v3-aside)) .split-v3-copy {
  grid-column: 1 / -1;
  max-width: 62ch;
}

/* band present: give the composition real height and light copy */
.split-v3-grid:has(.split-v3-media) { min-height: clamp(400px, 46vw, 520px); }
.split-v3-grid:has(.split-v3-media) .split-v3-copy { color: #fff; }
.split-v3-grid:has(.split-v3-media) .split-v3-title { color: #fff; }

.split-v3-eyebrow { margin: 0 0 16px; }
.split-v3-title {
  font-family: var(--font-head);
  font-size: var(--h2-size, clamp(28px, 4vw, 44px));
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.split-v3-body { font-size: 17px; line-height: 1.72; }
.split-v3-body p { margin: 0 0 1.05em; }
.split-v3-body p:last-child { margin-bottom: 0; }
.split-v3-cta { display: inline-flex; margin-top: 26px; }

/* the faint media band: fills the whole grid, scrimmed for legibility */
.split-v3-media {
  margin: 0;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: calc(var(--radius, 12px) + 10px);
}
.split-v3-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.split-v3-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(12 14 18 / .82) 0%, rgb(12 14 18 / .55) 46%, rgb(12 14 18 / .28) 100%),
    linear-gradient(0deg, rgb(12 14 18 / .55) 0%, rgb(12 14 18 / 0) 55%);
}
.split-v3-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  display: grid;
  gap: 3px;
  padding: 13px 17px;
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .28);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: var(--radius, 12px);
  max-width: 60%;
}
.split-v3-badge strong { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.split-v3-badge span { font-size: 12.5px; opacity: .88; line-height: 1.35; }

/* aside "list card": a solid elevated card overlapping the band edge */
.split-v3-aside {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: end;
  transform: translateY(clamp(14px, 2.4vw, 30px));
  padding: 30px;
  background: #fff;
  color: #16181d;
  border: 1px solid rgb(15 17 21 / .08);
  border-radius: calc(var(--radius, 12px) + 4px);
  box-shadow: 0 22px 50px rgb(15 17 21 / .16);
}
/* no band: don't yank the card off the baseline */
.split-v3-grid:not(:has(.split-v3-media)) .split-v3-aside { transform: none; align-self: start; }
.split-v3-aside-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: #16181d;
}
.split-v3-aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.split-v3-aside-item {
  position: relative;
  padding-left: 27px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #3f454e;
}
.split-v3-aside-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary, #0F62FE) 14%, #fff);
}
.split-v3-aside-item::after {
  content: "";
  position: absolute;
  left: 5px;
  top: .52em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--primary-ground, var(--primary, #0F62FE));
}

@media (max-width: 900px) {
  .split-v3-grid { grid-template-columns: 1fr; gap: 0; }
  .split-v3-grid:has(.split-v3-media) { min-height: 0; }
  .split-v3-copy { max-width: none; }
  .split-v3-grid:has(.split-v3-media) .split-v3-copy { padding-bottom: 30px; }
  .split-v3-aside { transform: translateY(18px); margin-top: 0; }
  .split-v3-grid:has(.split-v3-media):not(:has(.split-v3-aside)) .split-v3-copy { grid-column: 1; }
}

/* aside is already a self-painted light card, so it stays correct on dark
   grounds. On dark grounds soften its shadow to sit on the darker field. */
[class*="section-bg-"]:not([class*="light"]) .split-v3-aside {
  box-shadow: 0 22px 50px rgb(0 0 0 / .34);
  border-color: rgb(15 17 21 / .04);
}

@media (prefers-reduced-motion: reduce) {
  .split-v3-cta { transition: none; }
}

/* profile/v4 */
/* profile/v4 - bento: prose on the left, a bento of stats on the right where the
   first stat is a large filled feature tile (white number on the brand ground)
   and the rest are smaller solid supporting tiles, 2-up. Solid surfaces only. */

.profile-v4-grid {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 56px;
  align-items: start;
}
.profile-v4-copy { min-width: 0; }
.profile-v4-eyebrow { margin: 0 0 16px; }
.profile-v4-title {
  font-family: var(--font-head);
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 700; margin: 0 0 20px; line-height: 1.12; letter-spacing: -.02em;
}
.profile-v4-body { font-size: 17px; line-height: 1.72; color: inherit; }
.profile-v4-body p { margin: 0 0 1.05em; }
.profile-v4-body p:last-child { margin-bottom: 0; }

.profile-v4-bento {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(min(150px, 100%), 1fr));
  gap: 14px;
}
.profile-v4-stat {
  position: relative;
  padding: 24px 22px;
  background: #ffffff;
  border: 1px solid rgb(15 17 21 / .08);
  border-radius: calc(var(--radius, 12px) + 4px);
  box-shadow: 0 8px 24px rgb(15 17 21 / .05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.profile-v4-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(15 17 21 / .12); }

/* the feature tile - large, filled with the brand ground, white numerals */
.profile-v4-stat:first-child {
  grid-column: 1 / -1;
  padding: 34px 30px;
  background: var(--primary-ground, var(--primary, #0F62FE));
  border-color: transparent;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--primary, #0F62FE) 30%, transparent);
}
.profile-v4-num {
  font-size: clamp(28px, 1.4vw + 20px, 38px);
  font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--primary-ink, var(--primary, #0F62FE));
  font-variant-numeric: tabular-nums;
}
.profile-v4-stat:first-child .profile-v4-num {
  color: var(--on-primary, #fff);
  font-size: clamp(40px, 3vw + 22px, 60px);
}
.profile-v4-label { margin-top: 10px; font-size: 14px; line-height: 1.45; color: #4a5058; }
.profile-v4-stat:first-child .profile-v4-label {
  margin-top: 12px; font-size: 15px;
  color: color-mix(in srgb, var(--on-primary, #fff) 82%, transparent);
}

/* supporting tiles flip to solid deep-tint on coloured / dark grounds; the
   feature tile keeps its brand ground on every background */
[class*="section-bg-"]:not([class*="light"]) .profile-v4-stat {
  background: rgb(255 255 255 / .10); border-color: rgb(255 255 255 / .22);
  box-shadow: 0 12px 30px rgb(0 0 0 / .18);
}
[class*="section-bg-"]:not([class*="light"]) .profile-v4-num { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .profile-v4-label { color: rgb(255 255 255 / .9); }
[class*="section-bg-"]:not([class*="light"]) .profile-v4-stat:first-child {
  background: var(--primary-ground, var(--primary, #0F62FE)); border-color: transparent;
}

@media (max-width: 880px) {
  .profile-v4-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 440px) {
  .profile-v4-bento { grid-template-columns: 1fr; }
  .profile-v4-stat:first-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-v4-stat { transition: none; }
  .profile-v4-stat:hover { transform: none; }
}

/* area_links/v11 */
/* area_links/v11 - image/map beside a covered-areas link grid.
   Text colours are set explicitly on the link grid and headings so the section
   reads correctly on a light OR a coloured/dark ground (the aside card and
   pins keep their own contrast regardless of the section background). */

.area-links-v11-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 52px;
  align-items: start;
}
.area-links-v11-media { margin: 0; position: relative; min-width: 0; }
.area-links-v11-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius, 12px) + 8px);
  display: block;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.area-links-v11-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: grid;
  gap: 2px;
  padding: 14px 20px;
  background: #fff;
  color: #16181d;
  border-radius: var(--radius, 12px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}
.area-links-v11-badge strong {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-ink, var(--primary, #0F62FE));
}
.area-links-v11-badge span { font-size: 13px; color: #545a63; }

.area-links-v11-body { min-width: 0; }
.area-links-v11-eyebrow { margin: 0 0 14px; }
.area-links-v11-title {
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.15;
}
.area-links-v11-intro { margin: 0 0 24px; }
.area-links-v11-intro p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.7; opacity: .9; }
.area-links-v11-intro p:last-child { margin-bottom: 0; }

.area-links-v11-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 20px;
}
.area-links-v11-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: color .16s ease, transform .16s ease;
}
.area-links-v11-item a:hover { color: var(--primary-ink, var(--primary, #0F62FE)); transform: translateX(3px); }
.area-links-v11-pin { width: 15px; height: 15px; flex: none; fill: var(--primary, #0F62FE); opacity: .85; }

/* On a coloured or dark section ground the whole section flips to light text
   (backgrounds.css); the pins follow so they stay visible. */
.section-bg-dark-v1 .area-links-v11-pin,
.section-bg-dark-v2 .area-links-v11-pin,
[class*="section-bg-"]:not([class*="light"]) .area-links-v11-pin { fill: currentColor; opacity: .8; }
[class*="section-bg-"]:not([class*="light"]) .area-links-v11-item a:hover { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .area-links-v11-badge strong { color: var(--primary, #0F62FE); }

@media (max-width: 900px) {
  .area-links-v11-grid { grid-template-columns: 1fr; gap: 34px; }
  .area-links-v11-media { order: -1; }
}

/* sticky image: travels down the section as the taller column scrolls */
.area-links-v11-media {
  position: sticky;
  top: 96px;
  align-self: start;
}
@media (max-width: 900px) { .area-links-v11-media { position: relative; top: auto; } }

/* faq/v6 */
.faq-v6-eyebrow { display: flex; margin-left: auto; margin-right: auto; margin-bottom: 10px; }
.faq-v6-title { font-size: var(--h2-size, clamp(28px, 4vw, 42px)); font-weight: 700; margin: 0 0 12px; text-align: center; }
.faq-v6-sub { color: inherit; opacity: .82; font-size: 17px; line-height: 1.6; margin: 0 auto 26px; max-width: 60ch; text-align: center; }
.faq-v6-inner { max-width: 880px; }
.faq-v6-list { counter-reset: faq6; display: flex; flex-direction: column; gap: 36px; }
.faq-v6-item { counter-increment: faq6; position: relative; padding-left: 66px; }
.faq-v6-item::before { content: counter(faq6, decimal-leading-zero); position: absolute; left: 0; top: -4px; font-size: 34px; font-weight: 800; line-height: 1; color: var(--primary-ink, var(--primary, #0F62FE)); opacity: .28; font-variant-numeric: tabular-nums; }
.faq-v6-q { font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.faq-v6-a { margin: 0; color: inherit; opacity: .82; line-height: 1.7; max-width: 72ch; }
@media (max-width: 520px) { .faq-v6-item { padding-left: 0; } .faq-v6-item::before { position: static; display: block; margin-bottom: 6px; } }

/* cta/v4 */
.cta-v4-eyebrow { margin: 0 0 12px; }
.cta-v4-title { font-size: var(--h2-size, clamp(28px, 4vw, 42px)); font-weight: 700; line-height: 1.15; margin: 0 0 12px;  max-width: none; }
.cta-v4-sub { font-size: 18px; opacity: .9; margin: 0 0 24px;  max-width: 56ch; }
.cta-v4-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; text-align: left; }
.cta-v4-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-v4-text { flex: 1; }
.cta-v4-text .cta-v4-sub { margin-bottom: 0; }
.cta-v4-note { margin: 12px 0 0; font-size: 13px; opacity: .7; }
.cta-v4-actions { flex: none; }
@media (max-width: 760px) { .cta-v4-inner { flex-direction: column; align-items: flex-start; } }

/* split/v1 */
/* split/v1 - copy-left, supporting column right (image OR list card).
   Refined: asymmetric measure, sticky media that travels with the taller
   copy column, a floating stat badge on the image, and a hairline aside
   "list card". The aside paints its own light ground, so its text colours
   are set explicitly and flipped on dark section grounds at the bottom. */

.split-v1-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.split-v1-copy { min-width: 0; }
/* with nothing beside it, the copy takes the full measure rather
   than leaving half the row empty */
.split-v1-grid--single { grid-template-columns: minmax(0, 1fr); }
.split-v1-grid--single .split-v1-body { max-width: 72ch; }

.split-v1-eyebrow { margin: 0 0 16px; }
.split-v1-title {
  font-family: var(--font-head);
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  line-height: 1.12;
}
.split-v1-body { font-size: 17px; line-height: 1.72; }
.split-v1-body p { margin: 0 0 1.05em; }
.split-v1-body p:last-child { margin-bottom: 0; }
.split-v1-cta { display: inline-flex; margin-top: 28px; }

/* sticky image: travels down the section as the taller column scrolls */
.split-v1-media {
  margin: 0;
  position: sticky;
  top: 96px;
  align-self: start;
  min-width: 0;
}
.split-v1-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius, 12px) + 6px);
  display: block;
}
.split-v1-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  background: #fff;
  color: #16181d;
  border-radius: var(--radius, 12px);
  box-shadow: 0 14px 34px rgb(0 0 0 / .22);
  max-width: 78%;
}
.split-v1-badge strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary-ink, var(--primary, #0F62FE));
}
.split-v1-badge span { font-size: 13px; color: #545a63; line-height: 1.35; }

.split-v1-aside {
  min-width: 0;
  padding: 32px;
  background: #fff;
  color: #16181d;
  border: 1px solid rgb(15 17 21 / .08);
  border-radius: calc(var(--radius, 12px) + 4px);
  box-shadow: 0 10px 30px rgb(15 17 21 / .06);
}
.split-v1-aside-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: #16181d;
}
.split-v1-aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.split-v1-aside-item {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #3f454e;
}
.split-v1-aside-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary-ground, var(--primary, #0F62FE));
}

@media (max-width: 900px) {
  .split-v1-grid { grid-template-columns: 1fr; gap: 32px; }
  .split-v1-media { order: -1; position: relative; top: auto; }
  .split-v1-aside { padding: 24px; }
}

/* dark / coloured section grounds: the white aside card would otherwise
   render as a bright block; make it a translucent glass panel instead. */
[class*="section-bg-"]:not([class*="light"]) .split-v1-aside {
  background: rgb(255 255 255 / .08);
  border-color: rgb(255 255 255 / .20);
  box-shadow: 0 14px 34px rgb(0 0 0 / .18);
}
[class*="section-bg-"]:not([class*="light"]) .split-v1-aside-title { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .split-v1-aside-item { color: rgb(255 255 255 / .82); }

@media (prefers-reduced-motion: reduce) {
  .split-v1-cta { transition: none; }
}

/* split/v2 */
/* split/v2 - reversed: supporting column LEFT, copy RIGHT. A larger, inset
   media frame (padded mat + hairline) with a corner-inset stat badge that
   overlaps the frame's top-right. The aside variant becomes a bordered panel
   in the same left slot. Copy leads on the right with generous measure. */

.split-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.split-v2-copy { min-width: 0; order: 2; }
/* single column: copy uses the full measure, nothing sits beside it */
.split-v2-grid--single { grid-template-columns: minmax(0, 1fr); }
.split-v2-grid--single .split-v2-copy { order: 0; }
.split-v2-grid--single .split-v2-body { max-width: 72ch; }

.split-v2-eyebrow { margin: 0 0 16px; }
.split-v2-title {
  font-family: var(--font-head);
  font-size: var(--h2-size, clamp(28px, 4vw, 44px));
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 20px;
}
.split-v2-body { font-size: 17px; line-height: 1.72; }
.split-v2-body p { margin: 0 0 1.05em; }
.split-v2-body p:last-child { margin-bottom: 0; }
.split-v2-cta { display: inline-flex; margin-top: 28px; }

/* media: a padded "mat" frame with a hairline, badge inset at the corner */
.split-v2-media {
  margin: 0;
  order: 1;
  position: relative;
  min-width: 0;
}
.split-v2-frame {
  padding: 14px;
  background: #fff;
  border: 1px solid rgb(15 17 21 / .08);
  border-radius: calc(var(--radius, 12px) + 10px);
  box-shadow: 0 18px 44px rgb(15 17 21 / .08);
}
.split-v2-frame img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius, 12px);
  display: block;
}
.split-v2-badge {
  position: absolute;
  top: -18px;
  right: -14px;
  display: grid;
  gap: 3px;
  padding: 15px 20px;
  background: var(--primary-ground, var(--primary, #0F62FE));
  color: var(--on-primary, #fff);
  border-radius: var(--radius, 12px);
  box-shadow: 0 16px 36px rgb(15 17 21 / .22);
  max-width: 72%;
}
.split-v2-badge strong {
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.split-v2-badge span { font-size: 12.5px; opacity: .9; line-height: 1.35; }

/* aside variant occupies the same left slot as the frame */
.split-v2-aside {
  order: 1;
  min-width: 0;
  padding: 34px;
  background: #fff;
  color: #16181d;
  border: 1px solid rgb(15 17 21 / .08);
  border-radius: calc(var(--radius, 12px) + 10px);
  box-shadow: 0 18px 44px rgb(15 17 21 / .08);
}
.split-v2-aside-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  color: #16181d;
}
.split-v2-aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.split-v2-aside-item {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #3f454e;
}
.split-v2-aside-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary, #0F62FE) 12%, #fff);
}
.split-v2-aside-item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-ground, var(--primary, #0F62FE));
}

@media (max-width: 900px) {
  .split-v2-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-v2-copy { order: 2; }
  .split-v2-media, .split-v2-aside { order: 1; }
  .split-v2-badge { right: 8px; }
  .split-v2-aside { padding: 24px; }
}

/* dark / coloured section grounds: flip the white surfaces to glass */
[class*="section-bg-"]:not([class*="light"]) .split-v2-frame,
[class*="section-bg-"]:not([class*="light"]) .split-v2-aside {
  background: rgb(255 255 255 / .08);
  border-color: rgb(255 255 255 / .20);
  box-shadow: 0 18px 44px rgb(0 0 0 / .22);
}
[class*="section-bg-"]:not([class*="light"]) .split-v2-aside-title { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .split-v2-aside-item { color: rgb(255 255 255 / .82); }
[class*="section-bg-"]:not([class*="light"]) .split-v2-aside-item::before {
  background: rgb(255 255 255 / .16);
}

@media (prefers-reduced-motion: reduce) {
  .split-v2-cta { transition: none; }
}

/* area_links/v4 */
.area-links-v4-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--primary-ink, var(--primary, #0F62FE)); margin: 0 0 10px; }
.area-links-v4-title { font-size: var(--h2-size, clamp(28px, 4vw, 42px)); font-weight: 800; letter-spacing: -.01em; margin: 0 0 18px; }
.area-links-v4-intro { max-width: none; margin: 0 0 30px; }
.area-links-v4-intro p { margin: 0 0 15px; font-size: 16.5px; line-height: 1.75; color: #454b54; }
.area-links-v4-intro p:first-child { font-size: 19px; line-height: 1.65; color: #23272e; font-weight: 500; }
.area-links-v4-intro p:last-child { margin-bottom: 0; padding-top: 4px; font-size: 15px; color: #737a83; }
.area-links-v4-intro .il { font-weight: 600; text-underline-offset: 3px; }
.area-links-v4-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.area-links-v4-item a { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #eef3ff; background: color-mix(in srgb, var(--primary, #0F62FE) 8%, #fff); text-decoration: none; color: inherit; font-weight: 700; font-size: 15px; }
.area-links-v4-item a:hover { background: color-mix(in srgb, var(--primary, #0F62FE) 16%, #fff); }
.area-links-v4-pin { width: 18px; height: 18px; fill: var(--primary, #0F62FE); flex: none; }

/* On a coloured / dark section ground the section flips to light text; the
   light pill would then be white-on-white. Give the pills a translucent panel
   with light text so they stay legible. */
[class*="section-bg-"]:not([class*="light"]) .area-links-v4-item a {
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .2);
  color: #fff;
}
[class*="section-bg-"]:not([class*="light"]) .area-links-v4-item a:hover {
  background: rgb(255 255 255 / .2);
}
[class*="section-bg-"]:not([class*="light"]) .area-links-v4-eyebrow { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .area-links-v4-intro p,
[class*="section-bg-"]:not([class*="light"]) .area-links-v4-intro p:first-child,
[class*="section-bg-"]:not([class*="light"]) .area-links-v4-intro p:last-child { color: rgb(255 255 255 / .9); }

/* split/v4 */
/* split/v4 - editorial. An oversized heading spans the full width, then a
   two-part row underneath: running body copy on the left, and a supporting
   column on the right that is either a portrait image or a bordered
   "index/ledger" list (numbered rows divided by hairlines). Falls back to a
   single measured column when nothing sits beside the copy. */

.split-v4-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: clamp(32px, 5vw, 64px);
  row-gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.split-v4-head {
  grid-column: 1 / -1;
  padding-bottom: clamp(20px, 3vw, 34px);
  border-bottom: 1px solid rgb(15 17 21 / .1);
}
.split-v4-body-col { grid-column: 1; min-width: 0; }
.split-v4-media, .split-v4-aside { grid-column: 2; min-width: 0; }

/* single column: heading + measured body, nothing beside it */
.split-v4-grid--single { grid-template-columns: minmax(0, 1fr); }
.split-v4-grid--single .split-v4-body { max-width: 68ch; }

.split-v4-eyebrow { margin: 0 0 18px; }
.split-v4-title {
  font-family: var(--font-head);
  font-size: clamp(34px, 6vw, 66px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 0;
  max-width: 18ch;
}
.split-v4-body { font-size: 17px; line-height: 1.75; max-width: 58ch; }
.split-v4-body p { margin: 0 0 1.1em; }
.split-v4-body p:last-child { margin-bottom: 0; }
.split-v4-cta { display: inline-flex; margin-top: 26px; }

/* portrait media on the right */
.split-v4-media { margin: 0; position: relative; }
.split-v4-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--radius, 12px) + 4px);
  display: block;
}
.split-v4-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: grid;
  gap: 3px;
  padding: 13px 17px;
  background: #fff;
  color: #16181d;
  border-radius: var(--radius, 12px);
  box-shadow: 0 14px 34px rgb(0 0 0 / .22);
  max-width: 82%;
}
.split-v4-badge strong {
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary-ink, var(--primary, #0F62FE));
}
.split-v4-badge span { font-size: 12.5px; color: #545a63; line-height: 1.35; }

/* the "index" ledger: a bordered list, numbered, divided by hairlines */
.split-v4-aside {
  border: 1px solid rgb(15 17 21 / .12);
  border-radius: calc(var(--radius, 12px) + 2px);
  padding: 8px 22px 10px;
  background: transparent;
}
.split-v4-aside-title {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 18px 0 4px;
  color: var(--primary-ink, var(--primary, #0F62FE));
}
.split-v4-aside-list { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.split-v4-aside-item {
  counter-increment: idx;
  position: relative;
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: inherit;
  border-top: 1px solid rgb(15 17 21 / .1);
}
.split-v4-aside-item:first-child { border-top: 0; }
.split-v4-aside-item::before {
  content: counter(idx, decimal-leading-zero);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary-ink, var(--primary, #0F62FE));
  min-width: 2ch;
}

@media (max-width: 860px) {
  .split-v4-grid { grid-template-columns: 1fr; }
  .split-v4-body-col, .split-v4-media, .split-v4-aside { grid-column: 1; }
  .split-v4-title { max-width: none; }
  .split-v4-body { max-width: none; }
}

/* dark / coloured section grounds: lighten the hairlines and index borders,
   and keep the ledger numbers readable against the dark field */
[class*="section-bg-"]:not([class*="light"]) .split-v4-head {
  border-bottom-color: rgb(255 255 255 / .18);
}
[class*="section-bg-"]:not([class*="light"]) .split-v4-aside {
  border-color: rgb(255 255 255 / .22);
}
[class*="section-bg-"]:not([class*="light"]) .split-v4-aside-item {
  border-top-color: rgb(255 255 255 / .16);
}
[class*="section-bg-"]:not([class*="light"]) .split-v4-aside-title,
[class*="section-bg-"]:not([class*="light"]) .split-v4-aside-item::before {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .split-v4-cta { transition: none; }
}

/* hero/v16 */
/* hero/v16 - centred, image-free hero on a soft geometric pattern. Built for
   guide/resource pages: calm, brand-tinted, no photo. Self-contained
   background so it reads intentionally on whatever section ground it lands. */

.hero-v16 {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 8vw, 104px) 20px;
  background:
    radial-gradient(1100px 380px at 50% -12%,
      color-mix(in srgb, var(--primary, #0F62FE) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--primary, #0F62FE) 4%, #fff);
  text-align: center;
  overflow: hidden;
}
/* the dot-grid pattern layer */
.hero-v16-pattern {
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(
    color-mix(in srgb, var(--primary, #0F62FE) 22%, transparent) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  opacity: .5;
}
.hero-v16-inner { max-width: 60rem; margin-inline: auto; position: relative; }
.hero-v16-eyebrow { margin: 0 auto 18px; }
.hero-v16-title {
  font-size: var(--h1-size, clamp(34px, 5vw, 58px));
  font-weight: 800; line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 16px; color: var(--heading, #16181d); text-wrap: balance;
}
.hero-v16-title-hl { color: var(--primary-ink, var(--primary, #0F62FE)); }
.hero-v16-subtitle {
  font-size: 19px; line-height: 1.6; margin: 0 auto; max-width: 52ch;
  color: #3f454e;
}
.hero-v16-meta { margin: 12px auto 0; font-size: 14.5px; color: #6a7178; }

.hero-v16-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.hero-v16-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; min-height: 52px; box-sizing: border-box;
  border-radius: var(--btn-radius, 999px);
  font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none;
}
.hero-v16-btn-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.hero-v16-btn-call { background: var(--primary-ground, var(--primary, #0F62FE)); color: #fff; }
.hero-v16-btn-quote {
  background: #fff; color: var(--heading, #16181d);
  border: 2px solid color-mix(in srgb, var(--heading, #16181d) 16%, transparent);
}
.hero-v16-btn-quote:hover { border-color: var(--primary, #0F62FE); color: var(--primary-ink, var(--primary, #0F62FE)); }

.hero-v16 .hero-badges { justify-content: center; margin-top: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-v16-btn { transition: transform .16s ease, box-shadow .2s ease; }
  .hero-v16-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(0 0 0 / .14); }
}

/* text/v3 */
/* text v3 — left rail: a narrow sticky kicker/heading column sits to the left,
   the prose column to the right, divided by a single hairline vertical rule
   with a short brand accent at its top. Stacks to one column on mobile. */
.text-v3-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 860px) {
  .text-v3-grid {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 56px; align-items: start;
  }
}
.text-v3-rail { position: relative; }
@media (min-width: 860px) {
  .text-v3-rail { position: sticky; top: 24px; }
}
.text-v3-eyebrow { margin: 0 0 14px; display: inline-flex; }
.text-v3-title {
  font-family: var(--font-head, inherit);
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.14; margin: 0 0 12px;
}
.text-v3-sub {
  font-size: 15.5px; line-height: 1.55; color: inherit; opacity: .78; margin: 0;
}
.text-v3-body {
  font-family: var(--font-body, inherit);
  font-size: 17px; line-height: 1.75; color: inherit; max-width: 68ch;
}
/* Hairline rule between rail and body on wide screens. */
@media (min-width: 860px) {
  .text-v3-body {
    padding-left: 56px; margin-left: -56px;
    border-left: 1px solid rgb(15 17 21 / .10);
    position: relative;
  }
  .text-v3-body::before {
    content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 40px;
    background: var(--primary, #0F62FE);
  }
}
.text-v3-p { margin: 0 0 1.2em; }
.text-v3-p:last-child { margin-bottom: 0; }
/* Dark-ground: lift the hairline and accent so the rule stays visible. */
[class*="section-bg-"]:not([class*="light"]) .text-v3-body {
  border-left-color: rgb(255 255 255 / .18);
}

/* quote_form/v3 */
/* quote_form/v3 - a single centered form card floating on a subtle branded
   band, with a centered header above and a three-up row of trust points below.
   Token-driven; adapts to light + dark section grounds. */

.quote-form-v3-band {
  display: flex; flex-direction: column; align-items: center;
  max-width: 760px;
}
.quote-form-v3-head { text-align: center; max-width: 60ch; margin: 0 auto 28px; }
.quote-form-v3-eyebrow { margin: 0 auto 16px; }
.quote-form-v3-title {
  font-family: var(--font-head, inherit);
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 12px;
}
.quote-form-v3-intro { font-size: 17px; line-height: 1.65; opacity: .84; margin: 0 auto; max-width: 52ch; }

/* centered form card */
.quote-form-v3-form {
  width: 100%; display: grid; gap: 16px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid rgb(15 17 21 / .09);
  border-radius: calc(var(--radius, 12px) + 12px);
  box-shadow: 0 24px 56px rgb(15 17 21 / .1);
}
.quote-form-v3-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-form-v3-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.quote-form-v3-field label { font-size: 13.5px; font-weight: 700; color: #333a42; }
.quote-form-v3-field label span { color: var(--primary-ink, var(--primary, #0F62FE)); }
.quote-form-v3-field input,
.quote-form-v3-field select,
.quote-form-v3-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px; min-height: 46px;
  font: inherit; font-size: 15px; color: #16181d;
  background: #f7f9fb;
  border: 1.5px solid #e2e7ec;
  border-radius: var(--radius, 12px);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.quote-form-v3-field textarea { resize: vertical; min-height: 104px; }
.quote-form-v3-field input::placeholder,
.quote-form-v3-field textarea::placeholder { color: #9aa2ab; }
.quote-form-v3-field input:focus,
.quote-form-v3-field select:focus,
.quote-form-v3-field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--primary, #0F62FE);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0F62FE) 18%, transparent);
}
.quote-form-v3-submit {
  margin-top: 4px; padding: 15px 30px; min-height: 54px;
  border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
  background: var(--primary-ground, var(--primary, #0F62FE)); color: var(--on-primary, #fff);
  border-radius: var(--btn-radius, 999px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.quote-form-v3-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--primary, #0F62FE) 32%, transparent); }
.quote-form-v3-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #0F62FE) 55%, transparent); outline-offset: 3px; }
.quote-form-v3-note { margin: 0; font-size: 13px; color: #6a7178; text-align: center; }
.quote-form-v3-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* trust points row */
.quote-form-v3-trust {
  list-style: none; margin: 30px 0 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.quote-form-v3-trust li { display: flex; gap: 12px; align-items: flex-start; }
.quote-form-v3-trust svg {
  width: 24px; height: 24px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--primary-ink, var(--primary, #0F62FE)); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.quote-form-v3-trust span { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.5; color: #5a626b; }
.quote-form-v3-trust strong { color: #16181d; font-size: 14.5px; margin-bottom: 2px; }

.quote-form-v3-callline {
  margin: 26px 0 0; font-size: 14px; color: #6a7178; text-align: center;
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; align-items: baseline;
}
.quote-form-v3-callline a { color: var(--primary-ink, var(--primary, #0F62FE)); font-weight: 800; text-decoration: none; }
.quote-form-v3-callline a:hover { text-decoration: underline; }
.quote-form-v3-addr { color: #6a7178; }

/* dark / coloured section ground */
[class*="section-bg-"]:not([class*="light"]) .quote-form-v3-intro { color: rgb(255 255 255 / .88); opacity: 1; }
[class*="section-bg-"]:not([class*="light"]) .quote-form-v3-trust span { color: rgb(255 255 255 / .8); }
[class*="section-bg-"]:not([class*="light"]) .quote-form-v3-trust strong { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .quote-form-v3-trust svg { stroke: #fff; }
[class*="section-bg-"]:not([class*="light"]) .quote-form-v3-callline { color: rgb(255 255 255 / .8); }
[class*="section-bg-"]:not([class*="light"]) .quote-form-v3-callline a { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .quote-form-v3-addr { color: rgb(255 255 255 / .7); }

@media (prefers-reduced-motion: reduce) {
  .quote-form-v3-submit { transition: none; }
  .quote-form-v3-submit:hover { transform: none; }
}

@media (max-width: 720px) {
  .quote-form-v3-trust { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 520px) {
  .quote-form-v3-row { grid-template-columns: 1fr; }
  .quote-form-v3-form { padding: 22px; }
  .quote-form-v3-submit { width: 100%; text-align: center; }
}

/* effects */
/* ============================================================================
   Ink Spread / Liquid Fill - main-button hover
   A pool of colour grows from the centre of the button and floods the shape,
   like ink spreading through it. Pure CSS: an expanding radial-gradient layer
   over the button's own background. This file is bundled LAST, so its
   background-image longhand wins over each component's `background:` shorthand.
   ========================================================================== */

.btn-primary,
[class*="-btn-call"],
[class$="-cta"] {
  position: relative;
  isolation: isolate;
  background-image: radial-gradient(circle at center,
    var(--ink-fill, currentColor) 0 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0% 0%;
  transition:
    background-size .55s cubic-bezier(.22, .61, .36, 1),
    color .3s ease,
    transform .16s ease,
    box-shadow .2s ease,
    border-color .16s ease;
  will-change: background-size;
}

.btn-primary:hover,
[class*="-btn-call"]:hover,
[class$="-cta"]:hover {
  background-size: 260% 260%;
  transform: translateY(-2px);
}
.btn-primary:active,
[class*="-btn-call"]:active,
[class$="-cta"]:active { transform: translateY(0); }

/* filled brand buttons keep their white label; the pool is a deeper brand tone */
.btn-primary,
[class$="-cta"] {
  --ink-fill: color-mix(in srgb,
    var(--primary-ground, var(--primary, #0F62FE)) 74%, #000);
  color: var(--on-primary, #fff);
}

/* Call buttons carry a white label on a brand-green ground (hero-v2 is
   normalised to match), so they take the same dark-flood ink as the primary
   buttons: a deeper green pool spreads under white text -- readable from the
   first frame to the last, no white-on-white and no muddy crossover. */
/* light section: the call button is green with a white label; the ink pool is a
   deeper green -- dramatic, white label readable throughout. */
[class*="-btn-call"] {
  --ink-fill: color-mix(in srgb,
    var(--cta-call-bg, var(--primary-ground, var(--primary, #0F62FE))) 76%, #000);
}
/* dark / coloured section: the call button is white with a dark brand label; a
   deeper pool would push the label through white-on-white then muddy, so the
   pool is a PALE brand tint and the dark label stays crisp start to finish. */
[class*="section-bg-"]:not([class*="light"]) [class*="-btn-call"] {
  --ink-fill: color-mix(in srgb, var(--primary, #0F62FE) 15%, #fff);
}
[class*="-btn-call"]:hover { box-shadow: 0 10px 26px rgb(0 0 0 / .18); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, [class*="-btn-call"], [class$="-cta"] {
    transition: color .2s ease, box-shadow .2s ease, border-color .16s ease;
  }
  .btn-primary:hover, [class*="-btn-call"]:hover, [class$="-cta"]:hover {
    background-size: 260% 260%; transform: none;
  }
}