/* chicopeegaragedoorpros.com | p12-violet-slate + f08-playfair-lato + parallelogram/corner-tr-bl */
:root{--primary:#0F172A;--primary-ground:#0F172A;--primary-ink:#0F172A;--secondary:#0d9488;--on-primary:#ffffff;--on-primary-muted:rgb(255 255 255 / .78);--font-head:"Playfair Display", ui-serif, Georgia, serif;--font-body:"Lato", 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; }

  /* ---- v2 / v3: two equal action halves (Call | Get a quote) --------------
     They reuse the shared .callbar shell (fixed, full-width, rise-in, hides for
     the menu) but drop its single-ground padding/gradient/sheen and split into
     two flush halves, each its own tappable link. */
  .callbar-v2, .callbar-v3 { padding: 0; gap: 0; background: none; align-items: stretch; }
  .callbar-v2::after, .callbar-v3::after { content: none; }
  .callbar-half {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 10px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    color: #fff;
    text-decoration: none;
    font-family: var(--font-head, inherit);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
  }
  .callbar-half svg { width: 20px; height: 20px; fill: #fff; flex: none; }
  .callbar-half:active { filter: brightness(.93); }
  .callbar-call {
    background: linear-gradient(135deg,
      var(--primary-ground, var(--primary, #0F62FE)),
      color-mix(in srgb, var(--primary-ground, var(--primary, #0F62FE)) 66%, #000));
  }
  .callbar-quote { background: linear-gradient(135deg, #262e3c, #141922); }
  /* premium sheen sweep, on the brand (call) half only */
  .callbar-call::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;
  }
  /* v2: straight divider -- a hairline of light where the two grounds meet */
  .callbar-v2 .callbar-quote { box-shadow: inset 1px 0 0 rgb(255 255 255 / .14); }
  /* v3: ~25deg diagonal divider -- the quote half overlaps the call half and is
     clipped so its left edge slants; a matching skewed hairline defines the seam */
  .callbar-v3 .callbar-call { padding-right: 24px; }
  .callbar-v3 .callbar-quote {
    margin-left: -26px;
    padding-left: 42px;
    clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%);
  }
  .callbar-v3::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px;
    background: rgb(255 255 255 / .22);
    transform: skewX(-25deg);
    transform-origin: top;
    z-index: 2;
    pointer-events: none;
  }

  /* keep page content clear of the bar. The dark background matches the footer's
     solid bottom colour so this reserved strip reads as an extension of the footer
     instead of a white gap under it (body/html are otherwise transparent). */
  body { padding-bottom: 74px; background: #0a0c11; }

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

/* --- Mobile drawer CTA: span the drawer and centre the label, on every navbar
   variant (desktop bar is unaffected). ------------------------------------- */
@media (max-width: 860px) {
  a[class*="navbar-"][class*="-cta"] { width: 100%; justify-content: center; text-align: center; }
}

/* --- Footer contact icons: a phone glyph before the number and a location pin
   before the address, in every footer variant. Sized in em so they scale with
   the line, and fill:currentColor so they match the footer's text colour. --- */
.footer-ico {
  width: 1.05em; height: 1.05em; margin-right: .5em; vertical-align: -.15em;
  fill: currentColor; opacity: .82; flex: none; display: inline-block;
}

/* --- Nav dropdown / mega-menu scrollbars ---------------------------------
   When a "Service areas" panel lists every town it can overflow and scroll.
   Keep that scrollbar slim and inset from the panel's rounded corners so it
   doesn't square off the top-right / bottom-right radius. `currentColor` on the
   thumb adapts to light or dark panels. Applies to every navbar variant's sub
   panel (`navbar-vN-sub`). */
[class*="navbar-"][class*="-sub"] { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 30%, transparent) transparent; }
[class*="navbar-"][class*="-sub"]::-webkit-scrollbar { width: 10px; }
[class*="navbar-"][class*="-sub"]::-webkit-scrollbar-track { background: transparent; margin: 14px 6px 14px 0; }
[class*="navbar-"][class*="-sub"]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: padding-box;
}
[class*="navbar-"][class*="-sub"]:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, currentColor 40%, transparent); }

/* Animated primary glow for the DARK mega-menu look (see navbar dark variants). */
@keyframes mm-glow {
  0%, 100% { box-shadow: 0 24px 60px rgb(0 0 0 / .45), 0 0 18px -6px color-mix(in srgb, var(--primary, #0F62FE) 50%, transparent); }
  50%      { box-shadow: 0 26px 64px rgb(0 0 0 / .50), 0 0 34px 1px color-mix(in srgb, var(--primary, #0F62FE) 65%, transparent); }
}

/* ===== FAQ shared enhancements ============================================
   These sit in base.css (always loaded) but are scoped through each variant's
   own list class so they outrank the per-variant component CSS bundled after. */

/* 1) A small brand "?" badge before the question, for the variants that don't
   already lead with a marker (v2 leads with a "+", v6 with a number). The badge
   is self-contained (solid brand disc + white glyph), so it stays legible on any
   ground. Toggle variants keep their +/- pushed to the right. */
.faq-v1-list .faq-v1-q, .faq-v4-list .faq-v4-q { display: flex; align-items: flex-start; gap: 12px; }
.faq-v3-list .faq-v3-q, .faq-v5-list .faq-v5-q, .faq-v7-list .faq-v7-q { justify-content: flex-start; }
.faq-v3-list .faq-v3-q::after, .faq-v5-list .faq-v5-q::after, .faq-v7-list .faq-v7-q::after { margin-left: auto; }
.faq-v1-list .faq-v1-q::before, .faq-v3-list .faq-v3-q::before, .faq-v4-list .faq-v4-q::before,
.faq-v5-list .faq-v5-q::before, .faq-v7-list .faq-v7-q::before {
  content: "?";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--primary-ground, var(--primary, #0F62FE));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

/* 2) Dark / brand-tinted FAQ grounds: elements coloured with --primary-ink
   (dark) vanish into the ground -- flip them to a light brand tone. The "?"
   badge above is left alone (it carries its own disc). v7's items are their own
   white cards, so its toggle stays dark and is not flipped. */
.sec[class*="section-bg-"]:not([class*="section-bg-light"]) .faq-v6-item::before,
.sec[class*="cta-bg-dark"] .faq-v6-item::before {
  color: color-mix(in srgb, var(--primary, #0F62FE) 60%, #fff);
  opacity: .55;
}
.sec[class*="section-bg-"]:not([class*="section-bg-light"]) .faq-v3-q::after,
.sec[class*="section-bg-"]:not([class*="section-bg-light"]) .faq-v5-q::after,
.sec[class*="cta-bg-dark"] .faq-v3-q::after,
.sec[class*="cta-bg-dark"] .faq-v5-q::after {
  color: color-mix(in srgb, var(--primary, #0F62FE) 62%, #fff);
}

/* 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: linear-gradient(135deg, #faf8f4 0%, #ece7dc 100%); }  /* warm ivory -> soft greige */
.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, #f7f9fb 0%, #e6ecf3 100%); }  /* porcelain -> soft slate blue */

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

/* Premium dark hero grounds for photo-less heroes that opt into a dark bar.
   Five variants, each a brand-tinted dark gradient with its OWN pattern (dot
   grid / diagonal hatch / graph grid / topographic rings / argyle) and glow, so
   no two look alike. All keep white text; hero title/subtitle/meta are flipped
   light (wildcard rule below) so a light-designed hero variant stays legible. */
.section-bg-hero-dark-1 {                         /* dot grid + top glow */
  color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 24px 24px,
    radial-gradient(1200px 520px at 50% -18%,
      color-mix(in srgb, var(--primary, #0F62FE) 32%, transparent), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--primary, #0F62FE) 22%, #14171f), #0c0e14 82%);
}
.section-bg-hero-dark-2 {                         /* diagonal hatch + top-right glow */
  color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 16px),
    radial-gradient(900px 620px at 100% 0%,
      color-mix(in srgb, var(--primary, #0F62FE) 34%, transparent), transparent 58%),
    linear-gradient(135deg, #101827,
      color-mix(in srgb, var(--primary, #0F62FE) 16%, #0b1018) 60%, #070a10);
}
.section-bg-hero-dark-3 {                         /* graph-paper grid + bottom glow */
  color: #fff;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(1000px 560px at 50% 118%,
      color-mix(in srgb, var(--primary, #0F62FE) 30%, transparent), transparent 60%),
    linear-gradient(180deg, #12141c, color-mix(in srgb, var(--primary, #0F62FE) 18%, #0a0c12));
}
.section-bg-hero-dark-4 {                         /* topographic rings + centre vignette */
  color: #fff;
  background:
    repeating-radial-gradient(circle at 50% 42%, transparent 0 26px,
      color-mix(in srgb, var(--primary, #0F62FE) 13%, transparent) 26px 27.5px, transparent 27.5px 54px),
    radial-gradient(720px 720px at 50% 42%,
      color-mix(in srgb, var(--primary, #0F62FE) 26%, transparent), transparent 62%),
    radial-gradient(130% 130% at 50% 50%, #14161d, #08090d);
}
.section-bg-hero-dark-5 {                         /* argyle crosshatch + two-tone diagonal */
  color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 26px),
    linear-gradient(120deg, color-mix(in srgb, var(--primary, #0F62FE) 30%, #0e1220) 0%,
      #0a0d15 55%, color-mix(in srgb, var(--primary, #0F62FE) 14%, #06080d) 100%);
}
[class*="section-bg-hero-dark-"] [class*="hero-"][class*="-title"] { color: #fff; }
[class*="section-bg-hero-dark-"] [class*="hero-"][class*="-title-hl"] { color: color-mix(in srgb, var(--primary, #0F62FE) 45%, #fff); }
[class*="section-bg-hero-dark-"] [class*="hero-"][class*="-subtitle"],
[class*="section-bg-hero-dark-"] [class*="hero-"][class*="-intro"],
[class*="section-bg-hero-dark-"] [class*="hero-"][class*="-meta"] { color: rgba(255, 255, 255, .84); }

.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*="section-bg-hero-dark-"] .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. */
[class*="section-bg-hero-dark-"],
.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,
    .hero-v6-btn, .hero-v7-btn, .hero-v8-btn, .hero-v9-btn, .hero-v10-btn, .hero-v11-btn,
    .hero-v12-btn, .hero-v13-btn, .hero-v14-btn, .hero-v15-btn, .hero-v16-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, .hero-v6-btn, .hero-v7-btn, .hero-v8-btn, .hero-v9-btn, .hero-v10-btn, .hero-v11-btn, .hero-v12-btn, .hero-v13-btn, .hero-v14-btn, .hero-v15-btn, .hero-v16-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, .hero-v6-btn, .hero-v7-btn, .hero-v8-btn, .hero-v9-btn, .hero-v10-btn, .hero-v11-btn, .hero-v12-btn, .hero-v13-btn, .hero-v14-btn, .hero-v15-btn, .hero-v16-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, .hero-v6-btn, .hero-v7-btn, .hero-v8-btn, .hero-v9-btn, .hero-v10-btn, .hero-v11-btn, .hero-v12-btn, .hero-v13-btn, .hero-v14-btn, .hero-v15-btn, .hero-v16-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); }

/* ---- hover lift for big-cards variants that ship without their own hover -----
   v5 already animates on hover, so it is left out. The elevation is a
   drop-shadow (not box-shadow) so it follows each cardshape's clip-path/radius
   and layers OVER its outline instead of replacing it. */
:is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v6-card) {
  transition: transform .24s cubic-bezier(.22, .61, .36, 1), filter .24s ease;
}
:is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v6-card):hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 16px 22px rgba(16, 24, 40, .20));
}
@media (prefers-reduced-motion: reduce) {
  :is(.big-cards-v1-card, .big-cards-v2-card, .big-cards-v3-card, .big-cards-v4-card, .big-cards-v6-card):hover { transform: none; }
}

/* 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 geometry behind section grounds, for a
   more premium, considered look. Two layers, both painted in section pseudo-
   elements at z-index:-1 (above the flat ground colour, below all content):
     ::before -- soft radial GLOWS (dark / brand-tinted grounds only; they drift).
     ::after  -- a per-site SHAPE motif (--wm-shape) placed at the section's
                 corners/edges at several sizes, on EVERY ground (light too). */

/* stacking context on every ground that carries a watermark, so the pseudo-
   elements' z-index:-1 sits above the ground colour but below the content.
   overflow-x:clip contains the watermark/bubble when their animations translate
   or scale them a few px past the band's edge -- without it, that overflow adds
   horizontal page scroll on light bands (which have no overflow:hidden). `clip`
   (not `hidden`) is deliberate: it does NOT create a scroll container, so it
   never re-breaks the sticky area-links image. */
.sec[class*="section-bg-"]:not([class*="hero-"]),
.sec[class*="cta-bg-dark"]:not([class*="hero-"]) {
  position: relative;
  z-index: 0;
  overflow-x: clip;
}

/* -- GLOWS: dark & brand-tinted grounds only. They drift, so the section clips
   them; sticky-image sections (split / area-links) are excluded so the clip
   never traps their position:sticky media. -------------------------------- */
.sec[class*="section-bg-"]:not([class*="section-bg-light"]):not([class*="hero-"]):not([class*="split-"]):not([class*="area-links-"]),
.sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="split-"]):not([class*="area-links-"]) {
  overflow: hidden;
}
.sec[class*="section-bg-"]:not([class*="section-bg-light"]):not([class*="hero-"]):not([class*="split-"]):not([class*="area-links-"])::before,
.sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="split-"]):not([class*="area-links-"])::before {
  content: "";
  position: absolute;
  /* explicit 100%/100% rather than inset:0 -- an absolutely-positioned pseudo
     with left+right:0 and width:auto collapses to a ~400px default box in this
     layout, which would cram every background layer into the left of the
     section. width/height:100% pins it to the full section box. */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right -60px top -80px, left -80px bottom -100px;
  background-size: 420px 420px, 360px 360px;
  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%);
}
@media (prefers-reduced-motion: no-preference) {
  .sec[class*="section-bg-"]:not([class*="section-bg-light"]):not([class*="hero-"]):not([class*="split-"]):not([class*="area-links-"])::before,
  .sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="split-"]):not([class*="area-links-"])::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); }
}

/* -- SHAPES: EVERY ground (light + dark). One motif (--wm-shape) placed as just
   THREE background layers in an asymmetric diagonal -- a large one bleeding off
   the top-right, a medium off the bottom-left, and a small accent on the right
   edge -- so it reads as a considered accent with lots of negative space, never
   a cluttered grid of shapes. All three sit in the OUTER margins (bleeding off
   the edges), so a centered card doesn't cover them. The backgrounds self-clip
   to the ::after box, so this needs NO overflow:hidden and never traps a sticky
   child. --------------------------------------------------------------------- */
.sec[class*="section-bg-"]:not([class*="hero-"]):not([class*="features-"])::after,
.sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="features-"])::after {
  content: "";
  position: absolute;
  /* full section box, not inset:0 -- see the note on the glow ::before above. */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  /* neutralise any animation the ground already put on this ::after -- e.g.
     base.css animates section[class*="cta-v"]::after with an 80px `cta-drift-b`
     drift, which would otherwise fling the watermark shapes. The nth-of-type
     rules below re-enable a gentle wm-* motion on the bands that should move. */
  animation: none;
  background-repeat: no-repeat;
  background-image: var(--wm-shape), var(--wm-shape), var(--wm-shape);
  /* the three placements come from --wp1/2/3 (with a default arrangement as the
     fallback); the nth-of-type rules below hand different sections different
     arrangements, so adjacent bands don't share the same layout. The stats
     band (features-*) is excluded above -- it carries no shape.
     IMPORTANT: shapes only ever bleed off the LEFT/RIGHT edges; their top/bottom
     offsets stay POSITIVE (inside the band). A shape crossing the top or bottom
     edge would meet the shape of the section stacked above/below it and read as
     one merged shape -- keeping the vertical extent inside prevents that. */
  background-position: var(--wp1, right -40px top 32px),
                       var(--wp2, left -34px bottom 34px),
                       var(--wp3, left 28% top 52%);
  background-size: var(--ws1, 198px), var(--ws2, 148px), var(--ws3, 56px);
}
/* the CTA band uses only mid + small shapes -- no large one. Every layer is
   sized down (the "large" slot becomes a mid), so the CTA reads calmer. */
.sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="features-"])::after {
  background-size: 120px, 96px, 54px;
}
/* per-section arrangements -- cycled by the section's index on the page. Every
   shape bleeds off a LEFT/RIGHT edge only; top/bottom offsets stay positive so
   nothing crosses a horizontal band boundary (no merging with the next band). */
main > section:nth-of-type(5n+2) {
  --wp1: left -40px bottom 30px; --wp2: right -34px top 34px; --wp3: right 30% top 42%;
  --ws1: 200px; --ws2: 144px; --ws3: 58px;
}
main > section:nth-of-type(5n+3) {
  /* --wp3 moved to the RIGHT so the small shape clears the left-side bubble that
     these bands (5n+3 / 5n+5) carry. */
  --wp1: right -42px bottom 30px; --wp2: left -34px top 34px; --wp3: right 16% top 48%;
  --ws1: 202px; --ws2: 146px; --ws3: 56px;
}
main > section:nth-of-type(5n+4) {
  --wp1: left -40px top 32px; --wp2: right -34px bottom 34px; --wp3: right 30% bottom 44px;
  --ws1: 196px; --ws2: 150px; --ws3: 58px;
}
main > section:nth-of-type(5n+5) {
  /* --wp3 on the RIGHT (mid) to clear the left-side bubble on these bands. */
  --wp1: right -36px top 40px; --wp2: left -40px bottom 30px; --wp3: right 14% top 54%;
  --ws1: 178px; --ws2: 166px; --ws3: 58px;
}
/* light grounds: the motif is white, so flip it to dark to show on a light
   ground (currentColor can't reach a background SVG -- invert the render). */
.sec[class*="section-bg-light"]:not([class*="hero-"]):not([class*="features-"])::after {
  filter: invert(1);
  opacity: .3;
}

/* -- gentle continuous motion on SOME bands (never all -- skill: don't animate
   everything). Cycled by section index alongside the layout variants: 5n+1
   drifts sideways, 5n+2 breathes, 5n+4 orbits a small radius; 5n+3 / 5n+5 stay
   still. Amplitudes are tiny and TRANSLATE/small-scale only, so an animated
   shape never travels far enough to cross a band edge (no re-merging). All of
   it is behind prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .sec[class*="section-bg-"]:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+1)::after,
  .sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+1)::after {
    animation: wm-bob 6s ease-in-out infinite;
  }
  .sec[class*="section-bg-"]:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+2)::after,
  .sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+2)::after {
    animation: wm-pulse 5s ease-in-out infinite;
  }
  .sec[class*="section-bg-"]:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+4)::after,
  .sec[class*="cta-bg-dark"]:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+4)::after {
    animation: wm-orbit 13s linear infinite;
  }
}
@keyframes wm-pulse { 0%, 100% { transform: scale(1); }      50% { transform: scale(1.055); } }
@keyframes wm-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
/* true circular orbit, adapted from the classic rotate -> translate -> counter-
   rotate "circle" technique: the shapes travel a small 16px-radius circle while
   staying upright (the two opposite rotations cancel, leaving pure orbit). */
@keyframes wm-orbit {
  from { transform: rotate(0deg)   translateX(20px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

/* -- orbiting BUBBLE: a soft brand-colour circle that runs a small circular
   path, painted in the free .sec-inner::before. It's added to the bands that
   carry NO shape animation (5n+3 / 5n+5) so those still feel alive. It orbits a
   55px radius while staying vertically centred, so even at the top/bottom of the
   circle (centre +-55, plus the 42px half-bubble) it stays inside any band
   taller than ~200px -- which every content band is.
   (Adapted from the provided .bubble1 / `circle` snippet -- brand tint instead
   of a fixed green, and a much smaller radius so it can't spill into a
   neighbour.) */
@media (prefers-reduced-motion: no-preference) {
  main > section:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+3) > .sec-inner::before,
  main > section:not([class*="hero-"]):not([class*="features-"]):nth-of-type(5n+5) > .sec-inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 84px;
    height: 84px;
    left: 11%;
    top: calc(50% - 42px);
    border-radius: 50%;
    background: var(--primary, #0F62FE);
    opacity: .15;
    animation: wm-circle 13s linear infinite;
  }
}
@keyframes wm-circle {
  from { transform: rotate(0deg)   translateX(55px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(55px) rotate(-360deg); }
}

/* ---- per-site shape motif (body.wm-1 .. wm-6) -----------------------------
   Each --wm-shape is ONE 100x100 white geometric motif (filled facets/planes at
   layered opacities); the ::after above scatters it across the ground. One wm-N
   class is put on <body> per site (deterministic hash in theming.py). */
body.wm-1 { /* Faceted gem -- a low-poly crystal split into shaded facets */
  --wm-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='0.6'%3E%3Cpolygon points='50,6 90,36 50,50' fill-opacity='0.085'/%3E%3Cpolygon points='90,36 75,88 50,50' fill-opacity='0.045'/%3E%3Cpolygon points='75,88 25,88 50,50' fill-opacity='0.085'/%3E%3Cpolygon points='25,88 10,36 50,50' fill-opacity='0.05'/%3E%3Cpolygon points='10,36 50,6 50,50' fill-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
}
body.wm-2 { /* Isometric cube -- a 3D block, each face shaded */
  --wm-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='0.6'%3E%3Cpolygon points='50,12 84,31 50,50 16,31' fill-opacity='0.09'/%3E%3Cpolygon points='16,31 50,50 50,88 16,69' fill-opacity='0.045'/%3E%3Cpolygon points='50,50 84,31 84,69 50,88' fill-opacity='0.065'/%3E%3C/g%3E%3C/svg%3E");
}
body.wm-3 { /* Rotated squares -- two squares spun into an 8-point rosette */
  --wm-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='0.6'%3E%3Crect x='12' y='12' width='76' height='76' fill-opacity='0.05'/%3E%3Crect x='12' y='12' width='76' height='76' fill-opacity='0.065' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E");
}
body.wm-4 { /* Concentric target -- soft disc + ring + core */
  --wm-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='44' fill='%23ffffff' fill-opacity='0.035'/%3E%3Ccircle cx='50' cy='50' r='29' fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='1.1'/%3E%3Ccircle cx='50' cy='50' r='12' fill='%23ffffff' fill-opacity='0.09'/%3E%3C/svg%3E");
}
body.wm-5 { /* Hexagon -- outer hex + inner rotated hex, faceted */
  --wm-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='0.6'%3E%3Cpolygon points='50,6 88,28 88,72 50,94 12,72 12,28' fill-opacity='0.04'/%3E%3Cpolygon points='78,50 64,74 36,74 22,50 36,26 64,26' fill-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
}
body.wm-6 { /* Hexagram star -- two overlapping triangles */
  --wm-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='0.6'%3E%3Cpolygon points='50,8 87,72 13,72' fill-opacity='0.055'/%3E%3Cpolygon points='50,92 13,28 87,28' fill-opacity='0.055'/%3E%3C/g%3E%3C/svg%3E");
}

/* 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) {
  /* The section CONTAINER is never hidden -- only its inner content elements
     are, and they reveal one-by-one as the section enters the viewport
     (eyebrow -> heading -> paragraph -> buttons / cards / images). The shipped
     JS tags each element in DOM order with .reveal-item and sets a small
     staggered transition-delay. Subtle fade + short upward move. */
  .sec.reveal .reveal-item { opacity: 0; }
  /* Revealed with an ANIMATION, not a transition -- a transition on `.reveal-item`
     would overwrite each element's own `transition` and break hover effects that
     rely on it (the button ink-fill's background-size, card lifts, etc.). The JS
     removes .reveal-item once it finishes so the `both`-filled transform doesn't
     pin any :hover transform. */
  .sec.reveal.in .reveal-item {
    animation: sec-reveal-up .62s cubic-bezier(.16, .8, .3, 1) both;
    animation-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  @keyframes sec-reveal-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

/* -- 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/v8 */
.navbar-v8 { position: sticky; top: 0; z-index: 50; background: var(--nav-bg, #fff); color: var(--nav-fg, #16181d); border-bottom: var(--nav-border, 1px solid var(--primary, #0F62FE)); }
.navbar-v8-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: var(--nav-h, 64px); display: flex; align-items: center; gap: 24px; }
.navbar-v8-brand { font-weight: 800; font-size: 17px; text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.navbar-v8-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.navbar-v8-list { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.navbar-v8-item { position: relative; }
.navbar-v8-item > a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 0; display: inline-block; color: inherit; }
.navbar-v8-item > a:hover { color: var(--primary-ink, var(--primary, #0F62FE)); }
.navbar-v8-toplink { cursor: pointer; }
.navbar-v8-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-v8-item.has-sub:hover .navbar-v8-sub, .navbar-v8-item.has-sub:focus-within .navbar-v8-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.navbar-v8-sub a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; color: inherit; }
.navbar-v8-sub a .nav-ico { color: var(--primary, #0F62FE); flex: none; opacity: .85; }
.navbar-v8-sub a:hover { background: var(--nav-sub-hover, #f2f5f9); color: var(--primary-ink, var(--primary, #0F62FE)); }
.navbar-v8-sub-index a { font-weight: 700; }
.navbar-v8-sub-index { border-bottom: 1px solid var(--nav-sub-border, #eef1f5); margin-bottom: 4px; padding-bottom: 4px; }
.navbar-v8-sub li { opacity: 0; transform: translateY(-8px) scale(.97); }
.navbar-v8-item.has-sub:hover .navbar-v8-sub li, .navbar-v8-item.has-sub:focus-within .navbar-v8-sub li, .navbar-v8-item.has-sub.is-open .navbar-v8-sub li { animation-name: navbar-v8-reveal; animation-duration: .38s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-fill-mode: forwards; }
.navbar-v8-sub li:nth-child(1)  { animation-delay: .015s; }
.navbar-v8-sub li:nth-child(2)  { animation-delay: .03s; }
.navbar-v8-sub li:nth-child(3)  { animation-delay: .045s; }
.navbar-v8-sub li:nth-child(4)  { animation-delay: .06s; }
.navbar-v8-sub li:nth-child(5)  { animation-delay: .075s; }
.navbar-v8-sub li:nth-child(6)  { animation-delay: .09s; }
.navbar-v8-sub li:nth-child(7)  { animation-delay: .105s; }
.navbar-v8-sub li:nth-child(8)  { animation-delay: .12s; }
.navbar-v8-sub li:nth-child(9)  { animation-delay: .135s; }
.navbar-v8-sub li:nth-child(10) { animation-delay: .15s; }
.navbar-v8-sub li:nth-child(11) { animation-delay: .165s; }
.navbar-v8-sub li:nth-child(12) { animation-delay: .18s; }
.navbar-v8-sub li:nth-child(13) { animation-delay: .195s; }
.navbar-v8-sub li:nth-child(14) { animation-delay: .21s; }
.navbar-v8-sub li:nth-child(n+15) { animation-delay: .225s; }
@keyframes navbar-v8-reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .navbar-v8-sub li { opacity: 1; transform: none; animation: none !important; }
}
.navbar-v8-cta { padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; }
.navbar-v8-cta-icon { width: 16px; height: 16px; fill: currentColor; flex: none; display: inline-block; }
.navbar-v8-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-v8-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-v8-caret::before { content: "▾"; font-size: 12px; line-height: 1; color: currentColor; display: inline-block; transition: transform .18s ease; }
.navbar-v8-item.has-sub.is-open > .navbar-v8-caret::before { transform: rotate(180deg); }
@media (min-width: 861px) {
  .navbar-v8-item.has-sub:hover > .navbar-v8-caret::before,
  .navbar-v8-item.has-sub:focus-within > .navbar-v8-caret::before { transform: rotate(180deg); }
}
.navbar-v8-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; margin-left: auto; color: inherit; }
.navbar-v8-toggle span { width: 24px; height: 2px; background: currentColor; display: block; transition: transform .22s, opacity .22s; }
.navbar-v8-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-v8-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-v8-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 861px) {
  .navbar-v8-item.has-sub.is-wide .navbar-v8-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-v8-item.has-sub.is-wide .navbar-v8-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-v8-item.has-sub.is-wide .navbar-v8-sub-index {
    grid-column: 1 / -1; margin: 0 0 10px; padding: 0; border-bottom: 0;
  }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-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-v8-item.has-sub.is-wide .navbar-v8-sub-index a:hover {
    background: color-mix(in srgb, var(--primary, #0F62FE) 15%, var(--nav-sub-bg, #fff));
  }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub-index a::after { content: "\2192"; margin-left: auto; opacity: .7; }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub-index a .nav-ico { width: 18px; height: 18px; flex: none; }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub > li:not(.navbar-v8-sub-index) .nav-ico { width: 15px; height: 15px; flex: none; opacity: .8; }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub > li:not(.navbar-v8-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-v8-item.has-sub.is-wide .navbar-v8-sub > li:not(.navbar-v8-sub-index) a:hover { transform: translateX(2px); }
}
@media (min-width: 1180px) {
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub { grid-template-columns: repeat(3, minmax(190px, 1fr)); min-width: 680px; }
}
@media (min-width: 861px) {
  .navbar-v8-item.has-sub.is-wide.is-single .navbar-v8-sub {
    grid-template-columns: 1fr; min-width: 260px; max-width: 320px;
  }
}
@media (min-width: 861px) {
  .navbar-v8-item.is-right .navbar-v8-sub { left: auto; right: 0; }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub {
    left: 50%; right: auto; transform: translateX(-50%) translateY(6px);
  }
  .navbar-v8-item.has-sub.is-wide:hover .navbar-v8-sub,
  .navbar-v8-item.has-sub.is-wide:focus-within .navbar-v8-sub { transform: translateX(-50%) translateY(0); }
}
@media (max-width: 860px) {
  .navbar-v8-toggle { display: flex; }
  .navbar-v8-brand { margin-left: 0 !important; padding-left: 0 !important; background: none !important; color: inherit !important; position: static !important; transform: none !important; }
  .navbar-v8-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-v8-nav.is-open { display: flex; max-height: calc(100vh - 56px); overflow-y: auto; }
  .navbar-v8-list { flex-direction: column; gap: 0; }
  .navbar-v8-item { position: static; }
  .navbar-v8-item.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .navbar-v8-item.has-sub > a { flex: 1; }
  .navbar-v8-item > a { padding: 12px 0; display: block; border-bottom: 1px solid rgba(128,128,128,.18); }
  .navbar-v8-caret { display: block; }
  .navbar-v8-caret::before { content: "\25be"; font-size: 14px; color: currentColor; display: inline-block; transition: transform .15s; }
  .navbar-v8-item.has-sub.is-open .navbar-v8-caret::before { transform: rotate(180deg); }
  .navbar-v8-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-v8-item.has-sub.is-open .navbar-v8-sub { max-height: 320px; overflow-y: auto; padding: 4px 0 10px 12px; }
  .navbar-v8-cta { margin: 14px 0 0; justify-content: center; }
  .navbar-v8-cta-icon { display: inline-block; }
}

/* Bold CTA Navbar */
.navbar-v8-item > a { font-weight: 500; }
.navbar-v8-cta { padding: 14px 30px; font-size: 16px; font-weight: 800; box-shadow: 0 6px 16px rgba(15, 98, 254, .28); }

/* --- 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-v8-caret::before { display: none !important; content: none !important; }
.navbar-v8-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-v8-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-v8-item.has-sub.is-open > .navbar-v8-caret .navbar-v8-chev { transform: translateY(2px) rotate(-135deg); }
@media (min-width: 861px) {
  .navbar-v8-item.has-sub:hover > .navbar-v8-caret .navbar-v8-chev,
  .navbar-v8-item.has-sub:focus-within > .navbar-v8-caret .navbar-v8-chev { transform: translateY(2px) rotate(-135deg); }
}
@media (max-width: 860px) {
  .navbar-v8-caret { display: block; padding: 12px; }
  .navbar-v8-chev { width: 9px; height: 9px; }
}

/* Premium navbar CTA + animated glow */
.navbar-v8-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-v8-cta-glow 2.8s ease-in-out infinite; }
.navbar-v8-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-v8-cta:active { transform: translateY(0); }
.navbar-v8-cta-icon { transition: transform .2s ease; }
.navbar-v8-cta:hover .navbar-v8-cta-icon { transform: rotate(-8deg) scale(1.08); }
@keyframes navbar-v8-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-v8-cta { animation: none; } .navbar-v8-cta:hover { transform: none; } }


/* Primary-tinted frosted glass background — brand-coloured blur (appended so it
   wins over the component's own bar background). Dark nav text stays readable
   because the tint is kept light. */
body.navbg-frost .navbar-v8 {
  background: color-mix(in srgb, var(--primary, #0F62FE) 22%, rgba(255, 255, 255, .66));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.navbg-frost .navbar-v8 { background: color-mix(in srgb, var(--primary, #0F62FE) 18%, #fff); }
}


/* Neutral glass background (body.navbg-glass): a mostly-opaque neutral bar with
   a soft saturated blur and a hairline border -- unlike navbg-frost's primary
   tint. --c-bg/--c-border fall back to the system neutrals when unset. */
body.navbg-glass .navbar-v8 {
  background: color-mix(in srgb, var(--c-bg, #fff) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--primary, #0F62FE);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.navbg-glass .navbar-v8 { background: var(--c-bg, #fff); }
}

/* === MEGA-LOOK: TINTED (v8) — crisp 4px corners, faint tint, dark text, flat shadow === */
.navbar-v8-sub {
  background: color-mix(in srgb, var(--primary, #0F62FE) 5%, #fff);
  color: #16181d;
  border-color: color-mix(in srgb, var(--primary, #0F62FE) 20%, #fff);
  border-radius: 4px;
}
.navbar-v8-sub a:hover { background: color-mix(in srgb, var(--primary, #0F62FE) 12%, #fff); color: #16181d; }
@media (min-width: 861px) {
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub {
    border-radius: 4px;
    box-shadow: 0 8px 22px rgb(0 0 0 / .08);
  }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub::before { display: none; }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub-index a {
    background: #fff; color: var(--primary-ink, var(--primary, #0F62FE));
    border-left: 3px solid var(--primary, #0F62FE); border-radius: 3px; box-shadow: 0 1px 4px rgb(0 0 0 / .05);
  }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub > li:not(.navbar-v8-sub-index) a { color: #2a2f37; border-radius: 3px; }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub > li:not(.navbar-v8-sub-index) .nav-ico { color: var(--primary, #0F62FE); opacity: .9; }
  .navbar-v8-item.has-sub.is-wide .navbar-v8-sub > li:not(.navbar-v8-sub-index) a:hover {
    background: color-mix(in srgb, var(--primary, #0F62FE) 12%, #fff); color: var(--primary, #0F62FE);
  }
}

/* === MEGA-BAR-SOLID (v8) — while a dropdown/mega is open, solidify the (frost/glass/floating)
   bar so the menu area shows no glass or see-through opacity; frosted at rest. === */
@media (min-width: 861px) {
  .navbar-v8:has(.navbar-v8-item.has-sub:hover),
  .navbar-v8:has(.navbar-v8-item.has-sub:focus-within),
  .navbar-v8:has(.navbar-v8-item.has-sub.is-open) {
    background: var(--nav-bg, #fff) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* 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); }
/* Premium service-area chips: glass pills that light up in the brand colour */
.footer-v8-arearow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-v8-arearow a {
  font-size: 13px; line-height: 1; color: rgb(255 255 255 / .74);
  padding: 7px 13px; border-radius: 999px;
  background: rgb(255 255 255 / .045);
  border: 1px solid rgb(255 255 255 / .1);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.footer-v8-arearow a:hover {
  color: #fff;
  background: color-mix(in srgb, var(--primary, #0F62FE) 24%, transparent);
  border-color: color-mix(in srgb, var(--primary, #0F62FE) 58%, transparent);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .footer-v8-arearow a:hover { transform: none; } }
.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/v3 */
.hero-v3 { padding: 80px 20px; }
.hero-v3-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hero-v3-media { position: relative; margin: 0; }
.hero-v3-media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.hero-v3-float { position: absolute; left: -18px; bottom: 26px; background: #fff; color: #16181d; border-radius: 14px; padding: 16px 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); display: flex; flex-direction: column; gap: 2px; border-left: 4px solid var(--primary, #0F62FE); }
.hero-v3-float-big { font-weight: 800; font-size: 20px; color: var(--primary-ink, var(--primary, #0F62FE)); }
.hero-v3-float-sub { font-size: 13px; color: #3a3f47; }
.hero-v3-eyebrow { margin: 0 0 16px; }
.hero-v3-title { font-size: var(--h1-size, clamp(34px, 5vw, 58px)); font-weight: 700; margin: 0 0 16px; max-width: 18ch; }
.hero-v3-subtitle { font-size: 20px; opacity: .92; margin: 0 0 10px; max-width: 42ch; }
.hero-v3-meta { font-size: 15px; opacity: .85; margin: 0; }
.hero-v3-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-v3-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--btn-radius, 999px); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; }
.hero-v3-btn-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.hero-v3-btn-call { background: var(--cta-call-bg); color: var(--cta-call-fg); }
.hero-v3-btn-call:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.hero-v3-btn-quote { background: transparent; color: var(--cta-outline-fg); border: 2px solid var(--cta-outline-border); }
.hero-v3-btn-quote:hover { border-color: var(--cta-outline-fg); }
@media (max-width: 820px) { .hero-v3-inner { grid-template-columns: 1fr; gap: 32px; } .hero-v3-float { left: 14px; } }

/* Hover effects for the two hero buttons (lift + shadow / subtle fill). */
.hero-v3-btn { transition: transform .16s ease, box-shadow .18s ease, background-color .16s ease, border-color .16s ease, filter .16s ease; will-change: transform; }
.hero-v3-btn:hover { transform: translateY(-2px); }
.hero-v3-btn:active { transform: translateY(0); }
.hero-v3-btn-call:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
@media (prefers-reduced-motion: reduce) { .hero-v3-btn, .hero-v3-btn:hover, .hero-v3-btn:active { transform: none; transition: box-shadow .16s ease, background-color .16s ease, border-color .16s ease; } }
/* Trust badges - minimal inline with dividers */
.hero-v3 .hero-badges { gap: 8px 0; }
.hero-v3 .hero-badge { padding: 2px 16px; font-size: 14.5px; position: relative; }
.hero-v3 .hero-badge:first-child { padding-left: 0; }
.hero-v3 .hero-badge::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: color-mix(in srgb, currentColor 28%, transparent); }
.hero-v3 .hero-badge:last-child::after { display: none; }
.hero-v3 .hero-badge-ico { width: 16px; height: 16px; }

/* --- Premium polish -------------------------------------------------------- */
.hero-v3-title { line-height: 1.03; letter-spacing: -.02em; }
.hero-v3-media img { border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .30); }
/* Floating rating card (top-right; the "Same-day" card sits bottom-left). */
.hero-v3-rating { position: absolute; right: 16px; top: 16px; z-index: 2; display: grid; gap: 2px; text-align: right; background: #fff; color: #16181d; border-radius: 14px; padding: 10px 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.hero-v3-rating-stars { color: #f5a623; letter-spacing: 2px; font-size: 12px; line-height: 1; }
.hero-v3-rating-val { font-weight: 800; font-size: 13px; }
.hero-v3-rating-count { font-size: 11px; color: #6b7280; }
.hero-v3-btn { min-height: 52px; box-sizing: border-box; padding: 0 26px; }
.hero-v3-btn-quote::after { content: "\2192"; margin-left: 2px; font-size: 17px; line-height: 1; transition: transform .16s ease; }
.hero-v3-btn-quote:hover::after { transform: translateX(3px); }

/* Highlighted portion of the headline (TITLE_HIGHLIGHT slot). */
.hero-v3-title-hl { font-weight: 800; color: var(--primary-ink, var(--primary, #0F62FE)); }
.hero-v3-title-hl { color: inherit; -webkit-text-fill-color: var(--primary-ink, var(--primary, #0F62FE)); -webkit-text-stroke: 2px currentColor; }

/* --- Typography persona: Premium/Luxury (editorial sans + serif-italic accent) --- */
.hero-v3-title { font-size: clamp(36px, 4.4vw, 58px); font-weight: 600; letter-spacing: -.008em; line-height: 1.12; }
.hero-v3-title-hl { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600; letter-spacing: 0; color: var(--primary-ink, var(--primary, #0F62FE)); -webkit-text-fill-color: var(--primary-ink, var(--primary, #0F62FE)); -webkit-text-stroke: 0; }
/* Legibility outline (thin) for accent on primary-similar backgrounds. */
.hero-v3-title-hl { color: inherit; -webkit-text-stroke: 1px currentColor; paint-order: stroke fill; }
/* Accent word uses an elegant serif display italic (Playfair Display). */
.hero-v3-title-hl { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600; }

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

/* Two-column hero: the copy sits in a narrower column beside the image, so the
   title and lede are eased down slightly to avoid crowding the split. */
.hero-v3-title { font-size: clamp(33px, 4.0vw, 52px); }
.hero-v3-subtitle { font-size: 18px; }

/* features/v3 */
/* features/v3 - display numerals. The number is the whole design: very large,
   tightly set, with a short brand underline stroke and a restrained label.
   No cards, no dividers -- gallery-style whitespace does the work. */

.features-v3-eyebrow { display: flex; width: fit-content; margin: 0 auto 14px; }
.features-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 10px; text-align: center;
}
.features-v3-sub {
  font-size: 17px; line-height: 1.6; opacity: .82;
  max-width: 60ch; margin: 0 auto 48px; text-align: center;
}

.features-v3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr));
  gap: 44px 32px;
}
.features-v3-item { text-align: center; }
.features-v3-num {
  font-family: var(--font-head, inherit);
  /* one line for short numeric stats; longer worded titles (this tile is
     reused for text-label cards) wrap inside the card instead of overflowing. */
  font-size: clamp(24px, 13cqi, 40px);
  white-space: normal; overflow-wrap: break-word; word-break: normal;
  font-weight: 800; line-height: 1.08; letter-spacing: -.04em;
  color: var(--heading, #16181d);
  font-variant-numeric: tabular-nums;
}
.features-v3-underline {
  display: block; width: 40px; height: 3px; margin: 20px auto 0;
  border-radius: 3px; background: var(--primary, #0F62FE);
}
.features-v3-label {
  margin: 16px auto 0; max-width: 22ch;
  font-size: 14.5px; line-height: 1.5; color: #55606b;
}

/* coloured / dark ground */
[class*="section-bg-"]:not([class*="light"]) .features-v3-num { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .features-v3-underline { background: #fff; }
[class*="section-bg-"]:not([class*="light"]) .features-v3-label { color: rgb(255 255 255 / .82); }
.features-v3-grid > * { min-width: 0; container-type: inline-size; }

/* A title-less stat strip (just the row of numbers, no heading) was floating in
   the full section band's top/bottom whitespace, which read as too much padding
   around such short content. Tighten the band when there is no title or
   subtitle; sections that carry a heading keep the full room. `:has()` is
   already relied on elsewhere (hero-trustbar). */
.features-v3:not(:has(.features-v3-title)):not(:has(.features-v3-sub)) {
  padding-top: 44px; padding-bottom: 44px;
}

/* 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: 100ch; 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)); }

/* Inner image zooms on card hover. The card already clips via overflow:hidden,
   so the scaled image crops cleanly at the card edge. */
.services-v1-card-img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .services-v1-card:hover .services-v1-card-img { transform: scale(1.07); }
}

/* area_groups/v3 */
/* area_groups/v3 - numbered zone cards with a left accent rule. Each group is a
   zone with an auto-incrementing brand numeral chip and a thin left border rule.
   Two-up on desktop, stacks on mobile. Numbering is pure CSS counters (no logic). */

.area-groups-v3-grid { counter-reset: agv3; }

.area-groups-v3-head { max-width: 66ch; margin: 0 0 30px; }
.area-groups-v3-eyebrow { display: inline-flex; margin: 0 0 14px; }
.area-groups-v3-title {
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 10px;
}
.area-groups-v3-intro { font-size: 17px; line-height: 1.65; opacity: .84; margin: 0; max-width: 60ch; }

.area-groups-v3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 20px;
}
.area-groups-v3-zone {
  counter-increment: agv3;
  background: #ffffff;
  border: 1px solid rgb(15 17 21 / .08);
  border-left: 3px solid var(--primary, #0F62FE);
  border-radius: calc(var(--radius, 12px) + 2px);
  padding: 26px 28px;
  box-shadow: 0 8px 24px rgb(15 17 21 / .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.area-groups-v3-zone:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(15 17 21 / .11); }

.area-groups-v3-zone-head { display: flex; align-items: flex-start; gap: 16px; }
.area-groups-v3-num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--primary-ground, var(--primary, #0F62FE)); color: var(--on-primary, #fff);
  font-family: var(--font-head, inherit);
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.area-groups-v3-num::before { content: counter(agv3, decimal-leading-zero); }
.area-groups-v3-zone-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 0; }
.area-groups-v3-zone-text { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #4a5058; }

.area-groups-v3-links {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgb(15 17 21 / .09);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.area-groups-v3-links li a, .area-groups-v3-links li span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #0F62FE) 9%, #fff);
  font-size: 13.5px; font-weight: 600; color: var(--primary-ink, var(--primary, #0F62FE));
  text-decoration: none; transition: background-color .16s ease, transform .16s ease;
}
.area-groups-v3-links li a:hover { background: color-mix(in srgb, var(--primary, #0F62FE) 18%, #fff); transform: translateY(-1px); }
.area-groups-v3-links li a:focus-visible {
  outline: 2px solid var(--primary-ink, var(--primary, #0F62FE)); outline-offset: 2px;
}

/* coloured / dark ground: translucent cards, light text, translucent chips */
[class*="section-bg-"]:not([class*="light"]) .area-groups-v3-zone {
  background: rgb(255 255 255 / .10); border-color: rgb(255 255 255 / .2);
  border-left-color: var(--primary, #0F62FE);
  box-shadow: 0 14px 34px rgb(0 0 0 / .18);
}
[class*="section-bg-"]:not([class*="light"]) .area-groups-v3-zone-text { color: rgb(255 255 255 / .84); }
[class*="section-bg-"]:not([class*="light"]) .area-groups-v3-links { border-top-color: rgb(255 255 255 / .2); }
[class*="section-bg-"]:not([class*="light"]) .area-groups-v3-links li a,
[class*="section-bg-"]:not([class*="light"]) .area-groups-v3-links li span {
  background: rgb(255 255 255 / .14); color: #fff;
}
[class*="section-bg-"]:not([class*="light"]) .area-groups-v3-links li a:hover { background: rgb(255 255 255 / .24); }

@media (prefers-reduced-motion: reduce) {
  .area-groups-v3-zone, .area-groups-v3-links li a { transition: none; }
  .area-groups-v3-zone:hover { transform: none; }
}

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

/* Image sticks only on big (desktop) screens; static on mid + small
   (the section stays two-column down to 900px, image just no longer travels). */
@media (max-width: 1024px) { .split-v1-media { position: relative; top: auto; } }

/* steps/v5 */
/* steps/v5 - alternating two-column zigzag. Steps alternate left/right off a
   continuous center spine; each hangs from a big numbered node. Auto-numbered
   via CSS counters. Collapses to a single left-rail stack on mobile. Light+dark. */

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

.steps-v5-list {
  list-style: none; counter-reset: step; margin: 0 auto; padding: 0;
  max-width: 960px; position: relative;
}
/* center spine */
.steps-v5-list::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary, #0F62FE) 60%, transparent),
    var(--primary, #0F62FE),
    color-mix(in srgb, var(--primary, #0F62FE) 25%, transparent));
  border-radius: 2px;
}
.steps-v5-item {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: center; margin-bottom: 30px;
}
.steps-v5-item:last-child { margin-bottom: 0; }
.steps-v5-node {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 1;
  width: 56px; height: 56px; 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: 20px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary, #0F62FE) 12%, #fff),
              0 8px 20px color-mix(in srgb, var(--primary, #0F62FE) 32%, transparent);
}
.steps-v5-node::before { content: counter(step); }
.steps-v5-card {
  grid-row: 1;
  padding: 22px 26px; background: #ffffff;
  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);
  transition: transform .2s ease, box-shadow .2s ease;
}
.steps-v5-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgb(15 17 21 / .13); }
/* odd steps sit left of the spine, even steps sit right */
.steps-v5-item:nth-child(odd) .steps-v5-card { grid-column: 1; text-align: right; }
.steps-v5-item:nth-child(even) .steps-v5-card { grid-column: 3; text-align: left; }
.steps-v5-item:nth-child(odd) .steps-v5-item-examples { justify-content: flex-end; }

.steps-v5-item-title { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; color: #14171b; }
.steps-v5-item-text { margin: 0; font-size: 15px; line-height: 1.65; color: #4a5058; }
.steps-v5-item-examples {
  margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
}
.steps-v5-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-v5-boundary {
  margin: 40px auto 0; max-width: 760px; 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-v5-boundary-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.steps-v5-boundary-list { margin: 0 0 8px; padding-left: 20px; font-size: 14px; opacity: .82; line-height: 1.6; }
.steps-v5-boundary-list li { margin: 0 0 4px; }
.steps-v5-boundary-text { margin: 0; font-size: 14px; opacity: .68; line-height: 1.6; }

/* Mobile: collapse the zigzag to a single left-rail stack */
@media (max-width: 720px) {
  .steps-v5-list::before { left: 27px; }
  .steps-v5-item {
    grid-template-columns: 54px minmax(0, 1fr); align-items: start;
    column-gap: 18px; margin-bottom: 22px;
  }
  .steps-v5-node { grid-column: 1; width: 44px; height: 44px; font-size: 16px; justify-self: start; }
  .steps-v5-item:nth-child(odd) .steps-v5-card,
  .steps-v5-item:nth-child(even) .steps-v5-card { grid-column: 2; text-align: left; }
  .steps-v5-item:nth-child(odd) .steps-v5-item-examples { justify-content: flex-start; }
}

/* Coloured / dark section ground */
[class*="section-bg-"]:not([class*="light"]) .steps-v5-node {
  box-shadow: 0 0 0 6px rgb(255 255 255 / .12), 0 8px 20px rgb(0 0 0 / .3);
}
[class*="section-bg-"]:not([class*="light"]) .steps-v5-card {
  background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .22);
  box-shadow: 0 14px 34px rgb(0 0 0 / .18);
}
[class*="section-bg-"]:not([class*="light"]) .steps-v5-item-title { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .steps-v5-item-text { color: rgb(255 255 255 / .88); }
[class*="section-bg-"]:not([class*="light"]) .steps-v5-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-v5-boundary {
  background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2); border-left-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .steps-v5-card { transition: none; }
  .steps-v5-card:hover { transform: none; }
}

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

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

/* 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-col {
  position: sticky;
  top: 96px;
  align-self: start;
}
/* Image sticks only on big (desktop) screens; static on mid + small. */
@media (max-width: 1024px) { .area-links-v11-media-col { position: static; top: auto; } }

/* faq/v1 */
.faq-v1-eyebrow { display: flex; margin-left: auto; margin-right: auto; margin-bottom: 10px; }
.faq-v1-title {
  font-size: var(--h2-size, clamp(28px, 4vw, 42px));
  font-weight: 700;
  margin: 0 0 12px;
  text-align: center;
}
.faq-v1-sub { color: inherit; opacity: .82; font-size: 17px; line-height: 1.6; margin: 0 auto 28px; max-width: 60ch; text-align: center; }
.faq-v1-list { display: grid; gap: 16px; }
.faq-v1-item {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: var(--radius, 12px);
  padding: 20px 22px;
}
.faq-v1-q { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.faq-v1-a { margin: 0; color: #3a3f47; }

/* cta/v9 */
.cta-v9 { padding: 128px 20px; }
.cta-v9-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.cta-v9-eyebrow { margin: 0 0 18px; }
.cta-v9-title { font-size: clamp(36px, 5.6vw, 60px); font-weight: 700; letter-spacing: -.022em; line-height: 1.06; margin: 0 auto 18px; max-width: 16ch; }
.cta-v9-sub { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .62); margin: 0 auto 38px; max-width: 34em; }
.cta-v9-actions { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cta-v9-primary { background: var(--primary-ground, var(--primary, #0F62FE)); color: var(--on-primary, #fff); border-radius: var(--btn-radius, 980px); padding: 15px 32px; font-size: 16px; font-weight: 600; text-decoration: none; transition: filter .15s, transform .15s; }
.cta-v9-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta-v9-link { color: #4d94ff; font-size: 16px; font-weight: 600; text-decoration: none; }
.cta-v9-link:hover { text-decoration: underline; }
@media (max-width: 560px) { .cta-v9 { padding: 88px 20px; } }
.cta-v9-note { margin: 22px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }

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

/* 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 background pattern layer -- five brand-tinted patterns, one chosen per
   site by the `heropat-N` body class (theming._hero_pattern_class) so photo-less
   topic/policy heroes vary from one site to the next. Base positioning + fade
   mask are shared; each pattern sets its own background. */
.hero-v16-pattern {
  position: absolute; inset: 0; z-index: -1;
  -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;
}
/* 1 -- dot grid (the original) */
body.heropat-1 .hero-v16-pattern {
  background-image: radial-gradient(
    color-mix(in srgb, var(--primary, #0F62FE) 22%, transparent) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
}
/* 2 -- fine diagonal hatch */
body.heropat-2 .hero-v16-pattern {
  background-image: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--primary, #0F62FE) 15%, transparent) 0 1.5px,
    transparent 1.5px 15px);
  opacity: .6;
}
/* 3 -- graph-paper grid */
body.heropat-3 .hero-v16-pattern {
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary, #0F62FE) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary, #0F62FE) 12%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
}
/* 4 -- soft topographic rings */
body.heropat-4 .hero-v16-pattern {
  background-image: repeating-radial-gradient(circle at 50% -8%,
    transparent 0 26px,
    color-mix(in srgb, var(--primary, #0F62FE) 15%, transparent) 26px 27.5px,
    transparent 27.5px 54px);
  opacity: .55;
}
/* 5 -- argyle / diamond crosshatch */
body.heropat-5 .hero-v16-pattern {
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--primary, #0F62FE) 13%, transparent) 0 1.2px, transparent 1.2px 22px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--primary, #0F62FE) 13%, transparent) 0 1.2px, transparent 1.2px 22px);
  opacity: .6;
}
.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); }
}

/* hero-v16 carries its own LIGHT pattern background. On a dark-hero site the
   section also gets a dark ground class, which flips the heading text light --
   giving white text on hero-v16's light bg (unreadable). When hero-v16 lands on
   any dark ground, override its background to a premium dark gradient so the
   dark bg matches the light text. The compound selector (.hero-v16 + the dark
   class) outranks hero-v16's own single-class background rule. */
.hero-v16[class*="section-bg-hero-dark-"],
.hero-v16.section-bg-dark-v1,
.hero-v16.section-bg-dark-v2 {
  background:
    radial-gradient(1100px 420px at 50% -12%,
      color-mix(in srgb, var(--primary, #0F62FE) 28%, transparent), transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--primary, #0F62FE) 20%, #14171f), #0c0e14 82%);
}
/* keep the dot pattern subtle and light so it reads on the dark ground */
.hero-v16[class*="section-bg-hero-dark-"] .hero-v16-pattern,
.hero-v16.section-bg-dark-v1 .hero-v16-pattern,
.hero-v16.section-bg-dark-v2 .hero-v16-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: 1;
}

/* hero-v16's call button stays solid primary with white text even on a dark
   ground. The generic "dark section" rule sets its hover ink-fill to a light
   tint (it assumes a white button), which would wash the white text out on
   hover. Keep the fill dark here so the hover darkens the button instead. */
.hero-v16[class*="section-bg-hero-dark-"] .hero-v16-actions .hero-v16-btn-call,
.hero-v16.section-bg-dark-v1 .hero-v16-actions .hero-v16-btn-call,
.hero-v16.section-bg-dark-v2 .hero-v16-actions .hero-v16-btn-call {
  --ink-fill: color-mix(in srgb, var(--primary, #0F62FE) 78%, #000);
}

/* hero-v16's title, subtitle and meta are coloured dark for the light pattern
   ground it normally sits on. On a dark ground they must flip to light. The
   backgrounds.css wildcard only covers `section-bg-hero-dark-*`, so the guide
   and policy pages that land on `section-bg-dark-v1`/`-v2` were left with a
   dark title on a dark ground (unreadable). Flip every text element here; the
   compound selector (.hero-v16 + dark class + element) outranks the base
   single-class colour rules. */
.hero-v16[class*="section-bg-hero-dark-"] .hero-v16-title,
.hero-v16.section-bg-dark-v1 .hero-v16-title,
.hero-v16.section-bg-dark-v2 .hero-v16-title { color: #fff; }

.hero-v16[class*="section-bg-hero-dark-"] .hero-v16-title-hl,
.hero-v16.section-bg-dark-v1 .hero-v16-title-hl,
.hero-v16.section-bg-dark-v2 .hero-v16-title-hl {
  color: color-mix(in srgb, var(--primary, #0F62FE) 45%, #fff);
}

.hero-v16[class*="section-bg-hero-dark-"] .hero-v16-subtitle,
.hero-v16.section-bg-dark-v1 .hero-v16-subtitle,
.hero-v16.section-bg-dark-v2 .hero-v16-subtitle { color: rgba(255, 255, 255, .82); }

.hero-v16[class*="section-bg-hero-dark-"] .hero-v16-meta,
.hero-v16.section-bg-dark-v1 .hero-v16-meta,
.hero-v16.section-bg-dark-v2 .hero-v16-meta { color: rgba(255, 255, 255, .6); }

/* policy_doc/v1 */
/* policy_doc - a two-column document layout for the short policy pages
   (accessibility, privacy, terms). A sticky sidebar carries a contact card
   (address + phone with icons) and an "on this page" index; the main column
   holds the sections as a clean, evenly-spaced document. Replaces the old
   stack of full-width alternating-colour bands, which read as sparse and
   chaotic when each section held only a paragraph or two. */

.policy-doc-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 900px) {
  .policy-doc-inner {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

/* ---- sidebar ---- */
.policy-doc-aside { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .policy-doc-aside { position: sticky; top: 96px; }
}

.policy-doc-card {
  padding: 22px 22px 24px;
  border-radius: calc(var(--radius, 12px) + 6px);
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--primary, #0F62FE) 9%, #fff),
    color-mix(in srgb, var(--primary, #0F62FE) 3%, #fff));
  border: 1px solid color-mix(in srgb, var(--primary, #0F62FE) 18%, #fff);
}
.policy-doc-card-name {
  font-family: var(--font-head, inherit);
  font-weight: 800; font-size: 17px; line-height: 1.25;
  margin: 0 0 14px; color: var(--heading, #16181d);
}
.policy-doc-card-row {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #3f454e;
}
.policy-doc-card-row:last-child { margin-bottom: 0; }
.policy-doc-ico {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  fill: var(--primary-ink, var(--primary, #0F62FE));
}
.policy-doc-card-tel {
  display: flex; align-items: flex-start; gap: 11px;
  color: inherit; text-decoration: none; font-weight: 600;
}
.policy-doc-card-tel:hover { color: var(--primary-ink, var(--primary, #0F62FE)); }

.policy-doc-index {
  padding: 4px 2px;
  border-left: 2px solid color-mix(in srgb, var(--primary, #0F62FE) 20%, transparent);
  padding-left: 16px;
}
.policy-doc-index-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6a7178; margin: 0 0 12px;
}
.policy-doc-index a {
  display: block; margin: 0 0 9px; font-size: 14.5px; line-height: 1.4;
  color: #3f454e; text-decoration: none; transition: color .15s ease;
}
.policy-doc-index a:last-child { margin-bottom: 0; }
.policy-doc-index a:hover { color: var(--primary-ink, var(--primary, #0F62FE)); }

/* ---- main document ---- */
.policy-doc-main { min-width: 0; max-width: 72ch; }
.policy-doc-block { padding: 0 0 30px; }
.policy-doc-block + .policy-doc-block {
  padding-top: 30px;
  border-top: 1px solid rgb(15 17 21 / .08);
}
.policy-doc-block:last-child { padding-bottom: 0; }
.policy-doc-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-ink, var(--primary, #0F62FE)); margin: 0 0 8px;
}
.policy-doc-h {
  font-family: var(--font-head, inherit);
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.01em;
  line-height: 1.2; margin: 0 0 14px; scroll-margin-top: 100px;
  color: var(--heading, #16181d);
}
.policy-doc-prose {
  font-family: var(--font-body, inherit);
  font-size: 16px; line-height: 1.72; color: #3a3f47;
}
.policy-doc-prose p { margin: 0 0 1em; }
.policy-doc-prose p:last-child { margin-bottom: 0; }

/* On a dark/coloured ground (rare for these pages) keep text readable. */
[class*="section-bg-"]:not([class*="light"]) .policy-doc-card-name,
[class*="section-bg-"]:not([class*="light"]) .policy-doc-h { color: #fff; }
[class*="section-bg-"]:not([class*="light"]) .policy-doc-card-row,
[class*="section-bg-"]:not([class*="light"]) .policy-doc-prose,
[class*="section-bg-"]:not([class*="light"]) .policy-doc-index a { color: rgb(255 255 255 / .85); }

/* contact_map/v5 */
.contact-map-v5-head { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.contact-map-v5-eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--primary-ink, var(--primary, #0F62FE)); margin: 0 0 12px; }
.contact-map-v5-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #0F62FE); }
.contact-map-v5-title { font-size: var(--h2-size, clamp(28px, 4vw, 42px)); font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; }
.contact-map-v5-intro { margin: 0; }
.contact-map-v5-intro p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.7; color: #454b54; }
.contact-map-v5-intro p:last-child { margin-bottom: 0; }
.contact-map-v5-body { display: grid; grid-template-columns: 0.85fr 1.6fr; gap: 30px; align-items: stretch; }
.contact-map-v5-details { display: flex; flex-direction: column; gap: 14px; }
.contact-map-v5-card { display: flex; align-items: center; gap: 15px; padding: 20px; background: #fff; border: 1px solid #eceef1; border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .16s, box-shadow .16s, transform .16s; }
.contact-map-v5-card:hover { border-color: var(--primary, #0F62FE); box-shadow: 0 10px 24px rgba(16, 24, 40, .08); transform: translateY(-1px); }
.contact-map-v5-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--primary, #0F62FE) 12%, #fff); color: var(--primary-ink, var(--primary, #0F62FE)); }
.contact-map-v5-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-map-v5-ct { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-map-v5-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8a9099; font-weight: 700; }
.contact-map-v5-value { font-size: 17px; font-weight: 700; color: #1f2530; word-break: break-word; }
.contact-map-v5-map { border-radius: 18px; overflow: hidden; border: 1px solid #e6e8ec; box-shadow: 0 18px 40px -20px rgba(16, 24, 40, .3); min-height: 340px; }
.contact-map-v5-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
@media (max-width: 860px) {
  .contact-map-v5-body { grid-template-columns: 1fr; gap: 22px; }
  .contact-map-v5-map, .contact-map-v5-map iframe { min-height: 280px; }
}

/* text/v2 */
/* text v2 — magazine two-column: left-aligned header, a full-width lead
   paragraph with a drop-cap opener, then the remaining prose flowing in two
   balanced columns on wide screens (collapses to one column on mobile). */
.text-v2-head { max-width: 68ch; margin: 0 0 30px; }
.text-v2-eyebrow { margin: 0 0 14px; display: inline-flex; }
.text-v2-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.08; margin: 0 0 14px;
}
.text-v2-sub {
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: inherit; opacity: .82;
  margin: 0; max-width: 60ch;
}
.text-v2-body {
  font-family: var(--font-body, inherit);
  font-size: 16.5px; line-height: 1.72; color: inherit;
  column-gap: 48px; column-fill: balance;
}
@media (min-width: 900px) {
  .text-v2-body { column-count: 2; }
}
.text-v2-p { margin: 0 0 1.15em; break-inside: avoid-column; }
.text-v2-p:last-child { margin-bottom: 0; }
/* Lead paragraph spans both columns and carries the drop cap. */
.text-v2-p:first-child {
  column-span: all; font-size: clamp(18px, 1.8vw, 20px); line-height: 1.62;
  margin-bottom: 1.3em; break-inside: auto;
}
.text-v2-p:first-child::first-letter {
  float: left; font-family: var(--font-head, inherit); font-weight: 800;
  font-size: 3.4em; line-height: .82; padding: 4px 12px 0 0;
  color: var(--primary-ink, var(--primary, #0F62FE));
}
/* Dark-ground: use the brighter brand hue for the drop cap. */
[class*="section-bg-"]:not([class*="light"]) .text-v2-p:first-child::first-letter {
  color: var(--primary, #0F62FE);
}

/* quote_form/v4 */
.quote-form-v4-wrap { max-width: 760px; margin-inline: auto; }
.quote-form-v4-head { text-align: center; margin: 0 0 28px; }
.quote-form-v4-eyebrow { display: inline-flex; margin: 0 0 14px; }
.quote-form-v4-title { 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-v4-intro { font-size: 17px; line-height: 1.6; opacity: .85; margin: 0 auto; max-width: 58ch; }
.quote-form-v4-embed { position: relative; min-height: 900px; background: #fff; border: 1px solid rgb(15 17 21 / .08); border-radius: 16px; box-shadow: 0 12px 34px rgb(15 17 21 / .07); overflow: hidden; }
.quote-form-v4-embed iframe { display: block; width: 100%; min-height: 900px; border: 0; }
.quote-form-v4-call { text-align: center; margin: 18px 0 0; font-size: 15px; color: inherit; opacity: .85; }
.quote-form-v4-call a { color: var(--primary-ink, var(--primary, #0F62FE)); font-weight: 700; text-decoration: none; }
.quote-form-v4-call a:hover { text-decoration: underline; }
.quote-form-v4-addr { opacity: .8; }

/* --- shared skeleton loader (shown while the iframe loads) --- */
.qf-skel { position: absolute; inset: 0; z-index: 2; background: #fff; padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; }
.qf-embed:not([data-loading]) .qf-skel { display: none; }
.qf-skel-line { display: block; border-radius: 8px; background: linear-gradient(90deg, #ececf0 25%, #f6f7f9 37%, #ececf0 63%); background-size: 400% 100%; animation: qf-shimmer 1.4s ease infinite; }
.qf-skel-lbl { width: 120px; height: 12px; margin-top: 8px; }
.qf-skel-input { width: 100%; height: 46px; }
.qf-skel-btn { width: 100%; height: 50px; margin-top: 14px; border-radius: 10px; }
@keyframes qf-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .qf-skel-line { animation: none; } }

/* coloured / dark ground */
[class*="section-bg-"]:not([class*="light"]) .quote-form-v4-embed { border-color: rgb(255 255 255 / .18); box-shadow: 0 18px 40px rgb(0 0 0 / .22); }

@media (max-width: 640px) {
  .quote-form-v4-embed, .quote-form-v4-embed iframe { min-height: 1120px; }
}

/* 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),
    /* the label colour tracks the fill 1:1 (same duration + easing) so on an
       inverted button -- where the label flips colour -- text and pool cross
       together: no frame where the reverting label sits on a matching pool
       (the brief "text vanishes on un-hover" flash). */
    color .55s cubic-bezier(.22, .61, .36, 1),
    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); }

/* NB: the label colour is deliberately NOT flipped on hover here. A filled
   button already carries a contrasting label (white on brand), so the pool
   spreads under it and it stays readable at every frame -- in AND out. An
   INVERTED button (white/outline surface with a dark or light label) instead
   picks a pool that keeps its OWN label readable (a pale pool under a dark
   label, or a brand pool under a white label), scoped in its own component
   CSS -- see cta-v8. Flipping the label caused it to crossfade through a
   muddy midpoint against the spatially-receding pool on hover-out. */

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

/* ============================================================================
   Per-site primary/CTA hover-fill variants  (body.btnfx-1 .. btnfx-10)
   Same ink pool colour (--ink-fill) and timing as above; only the fill's
   ORIGIN and DIRECTION change, so each site's primary/call/CTA buttons animate
   differently. One btnfx-N class is put on <body> per site (deterministic hash).
   btnfx-1 matches the default centre bloom.
   ========================================================================== */
.btnfx-1  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: radial-gradient(circle at center, var(--ink-fill) 0 100%); background-position: center;        background-size: 0% 0%; }
.btnfx-1  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 260% 260%; }

.btnfx-2  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(90deg,  var(--ink-fill) 0 100%); background-position: left center;   background-size: 0% 100%; }
.btnfx-2  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 100% 100%; }   /* left -> right wipe */

.btnfx-3  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(270deg, var(--ink-fill) 0 100%); background-position: right center;  background-size: 0% 100%; }
.btnfx-3  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 100% 100%; }   /* right -> left wipe */

.btnfx-4  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(0deg,   var(--ink-fill) 0 100%); background-position: center bottom; background-size: 100% 0%; }
.btnfx-4  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 100% 100%; }   /* rise (bottom -> up) */

.btnfx-5  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(180deg, var(--ink-fill) 0 100%); background-position: center top;    background-size: 100% 0%; }
.btnfx-5  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 100% 100%; }   /* drop (top -> down) */

.btnfx-6  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(135deg, var(--ink-fill) 0 100%); background-position: top left;      background-size: 0% 0%; }
.btnfx-6  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 240% 240%; }   /* diagonal TL -> BR */

.btnfx-7  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: radial-gradient(circle at center, var(--ink-fill) 0 100%); background-position: bottom left; background-size: 0% 0%; }
.btnfx-7  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 300% 300%; }   /* corner bloom (bottom-left) */

.btnfx-8  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(90deg,  var(--ink-fill) 0 100%); background-position: center;        background-size: 0% 100%; }
.btnfx-8  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 100% 100%; }   /* horizontal curtain (centre -> out) */

.btnfx-9  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(0deg,   var(--ink-fill) 0 100%); background-position: center;        background-size: 100% 0%; }
.btnfx-9  :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 100% 100%; }   /* vertical curtain (centre -> out) */

.btnfx-10 :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]) { background-image: linear-gradient(315deg, var(--ink-fill) 0 100%); background-position: bottom right;   background-size: 0% 0%; }
.btnfx-10 :is(.btn-primary,[class*="-btn-call"],[class*="-btn-quote"],.btn-secondary,[class$="-cta"]):hover { background-size: 240% 240%; }   /* diagonal BR -> TL */

/* ============================================================================
   Hero "Request a quote" OUTLINE buttons  ([class*="-btn-quote"])
   These were transparent outline buttons with only a faint wash on hover. Give
   them the same ink-spread fill as the call/primary buttons: the pool is the
   outline colour (--cta-outline-fg: dark on light heroes, white on dark heroes)
   and on hover the label flips to --cta-call-fg -- the exact contrasting colour
   in both cases -- so the button reads as a SOLID button once filled. The fill
   DIRECTION follows the site's btnfx variant (added to the :is() lists above).
   ========================================================================== */
:is([class*="-btn-quote"], .btn-secondary) {
  position: relative;
  isolation: isolate;
  --ink-fill: var(--cta-outline-fg, currentColor);
  background-image: radial-gradient(circle at center, var(--ink-fill) 0 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0% 0%;
  transition:
    /* .55s + easing IDENTICAL to the primary/call buttons so a quote/secondary
       button's ink spreads in and out on exactly the same clock as the call
       button beside it. */
    background-size .55s cubic-bezier(.22, .61, .36, 1),
    color .55s cubic-bezier(.22, .61, .36, 1),
    border-color .16s ease,
    transform .16s ease;
  will-change: background-size;
}
:is([class*="-btn-quote"], .btn-secondary):hover {
  background-color: transparent;
  background-size: 260% 260%;
  color: var(--cta-call-fg, #fff);
  border-color: var(--cta-outline-fg);
  transform: translateY(-2px);
}
:is([class*="-btn-quote"], .btn-secondary):active { transform: translateY(0); }
/* the trailing arrow rides the label colour, so it flips with the fill */
:is([class*="-btn-quote"], .btn-secondary):hover::after { color: var(--cta-call-fg, #fff); }

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

/* hero-trustbar */
/* hero-trustbar.css -- the trust strip under the hero (icons + short promises).
   It is now a full-width band that is a direct child of the hero <section>,
   dropped in after the content grid, so it spans the FULL hero width and sits
   flush at the hero's bottom edge (no leftover section padding under it).

   Structure (blocks.badges_html, relocated in each hero section.html):
     section.sec.hero-vN
       .sec-inner ...hero content...
       .hero-trustbar                 <- full-width band, carries the bar look
         .sec-inner                   <- re-centres the items to the container
           .hero-badges
             .hero-badge > (.hero-badge-ico) + .hero-badge-txt(<b.lead> + text)

   A site draws one skin via body.herobar-N (theming._hero_bar_class). Loaded
   after the component CSS so it overrides any per-hero badge styling. */

/* ---- the strip: a full-page-width band right under the hero -------------- */
/* Rendered as a block sibling right after the hero <section>, so it spans the
   full page width edge-to-edge regardless of the hero's own flex/grid layout,
   and re-centres its items with the inner .sec-inner. */
.hero-trustbar { width: 100%; margin-top: 0; position: relative; z-index: 2; }
.hero-trustbar > .sec-inner { width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
/* The band is flush against the hero (margin-top:0). The breathing room below
   the buttons is the hero's OWN bottom padding -- inside the section, so it's
   painted by the hero's background/image, never a white page-coloured gap. */
.sec:has(+ .hero-trustbar) { padding-bottom: 40px; }
/* hero-v5 seats its image + services card flush to the bottom edge, so the
   trust strip sits directly under it with no gap. */
.hero-v5.sec:has(+ .hero-trustbar) { padding-bottom: 0; }
/* hero-v4 likewise seats flush against the trust strip -- no bottom gap. */
.hero-v4.sec:has(+ .hero-trustbar) { padding-bottom: 0; }

/* ---- shared row reset (wipes the per-hero badge look) -------------------- */
body[class*="herobar-"] .hero-badges {
  display: flex; flex-wrap: wrap; align-items: stretch;
  margin: 0; padding: 0; border: 0; gap: 0; list-style: none; width: 100%;
}
body[class*="herobar-"] .hero-badge {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  margin: 0; padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 14px; line-height: 1.15;
}
body[class*="herobar-"] .hero-badge::before,
body[class*="herobar-"] .hero-badge::after { content: none; display: none; }
body[class*="herobar-"] .hero-badge-ico { flex: none; width: 17px; height: 17px; }
body[class*="herobar-"] .hero-badge-txt { font-weight: 500; }
body[class*="herobar-"] .hero-badge-lead { font-weight: 800; }

/* =========================================================================
   1 -- SOLID PRIMARY BAND  (the reference)
   ====================================================================== */
body.herobar-1 .hero-trustbar { background: var(--primary, #0891B2); }
body.herobar-1 .hero-trustbar > .sec-inner { padding-top: 15px; padding-bottom: 15px; }
body.herobar-1 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 10px; padding: 4px 22px; color: #fff; }
body.herobar-1 .hero-badge + .hero-badge { border-left: 1px solid rgba(255,255,255,.24); }
body.herobar-1 .hero-badge-ico { fill: #fff; opacity: .95; }
body.herobar-1 .hero-badge-lead { color: #fff; }
body.herobar-1 .hero-badge-txt { color: rgba(255,255,255,.84); }

/* =========================================================================
   2 -- GRADIENT BAND  (primary -> deep ink, filled icon chips)
   ====================================================================== */
body.herobar-2 .hero-trustbar {
  background: linear-gradient(100deg, var(--primary, #0891B2),
              color-mix(in srgb, var(--primary, #0891B2) 42%, #0b1220));
}
body.herobar-2 .hero-trustbar > .sec-inner { padding-top: 14px; padding-bottom: 14px; }
body.herobar-2 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 11px; padding: 4px 18px; color: #fff; }
body.herobar-2 .hero-badge-ico {
  width: 30px; height: 30px; padding: 7px; box-sizing: border-box;
  border-radius: 9px; background: rgba(255,255,255,.16); fill: #fff;
}
body.herobar-2 .hero-badge-lead { color: #fff; }
body.herobar-2 .hero-badge-txt { color: rgba(255,255,255,.82); }

/* =========================================================================
   3 -- DARK SLAB  (near-black bar, brand-coloured icons)
   ====================================================================== */
body.herobar-3 .hero-trustbar { background: color-mix(in srgb, #0b1220 88%, var(--primary, #0891B2)); }
body.herobar-3 .hero-trustbar > .sec-inner { padding-top: 15px; padding-bottom: 15px; }
body.herobar-3 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 10px; padding: 4px 20px; color: #eef2f9; }
body.herobar-3 .hero-badge + .hero-badge { border-left: 1px solid rgba(255,255,255,.12); }
body.herobar-3 .hero-badge-ico { width: 18px; height: 18px; fill: color-mix(in srgb, var(--primary, #0891B2) 55%, #fff); }
body.herobar-3 .hero-badge-lead { color: #fff; }
body.herobar-3 .hero-badge-txt { color: rgba(238,242,249,.72); }

/* =========================================================================
   4 -- BRAND TINT BAND  (soft tint, hairline top+bottom, adapts to ground)
   ====================================================================== */
body.herobar-4 .hero-trustbar {
  background: color-mix(in srgb, var(--primary, #0891B2) 9%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--primary, #0891B2) 32%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--primary, #0891B2) 24%, transparent);
}
body.herobar-4 .hero-trustbar > .sec-inner { padding-top: 15px; padding-bottom: 15px; }
body.herobar-4 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 9px; padding: 2px 20px; color: currentColor; }
body.herobar-4 .hero-badge + .hero-badge { border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
body.herobar-4 .hero-badge-ico { fill: var(--primary-ink, var(--primary, #0891B2)); }
body.herobar-4 .hero-badge-txt { opacity: .82; }

/* =========================================================================
   5 -- ICON TILES  (contained; each promise a light card)
   ====================================================================== */
/* 5 -- LIGHT BAR  (white surface, brand icon chips) */
body.herobar-5 .hero-trustbar {
  background: #fff;
  border-top: 1px solid rgba(15,23,42,.09);
  box-shadow: 0 16px 32px -26px rgba(2,6,23,.5);
}
body.herobar-5 .hero-trustbar > .sec-inner { padding-top: 13px; padding-bottom: 13px; }
body.herobar-5 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 11px; padding: 4px 18px; color: #0f172a; }
body.herobar-5 .hero-badge + .hero-badge { border-left: 1px solid rgba(15,23,42,.09); }
body.herobar-5 .hero-badge-ico {
  width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 8px;
  background: color-mix(in srgb, var(--primary, #0891B2) 14%, #fff);
  fill: var(--primary-ground, var(--primary, #0891B2));
}
body.herobar-5 .hero-badge-lead { color: #0f172a; }
body.herobar-5 .hero-badge-txt { color: #475569; }

/* =========================================================================
   6 -- ACCENT-LINE BAR  (brand rule on top, soft tint, dividers)
   ====================================================================== */
body.herobar-6 .hero-trustbar {
  background: color-mix(in srgb, var(--primary, #0891B2) 6%, #fff);
  border-top: 2px solid var(--primary, #0891B2);
}
body.herobar-6 .hero-trustbar > .sec-inner { padding-top: 14px; padding-bottom: 14px; }
body.herobar-6 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 9px; padding: 2px 18px; color: #0f172a; }
body.herobar-6 .hero-badge + .hero-badge { border-left: 1px solid color-mix(in srgb, var(--primary, #0891B2) 20%, transparent); }
body.herobar-6 .hero-badge-ico { fill: var(--primary-ink, var(--primary, #0891B2)); }
body.herobar-6 .hero-badge-txt { color: #475569; }

/* =========================================================================
   7 -- BRAND WASH BAR  (light brand tint, brand-toned text)
   ====================================================================== */
body.herobar-7 .hero-trustbar {
  background: color-mix(in srgb, var(--primary, #0891B2) 12%, #fff);
  border-top: 1px solid color-mix(in srgb, var(--primary, #0891B2) 26%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--primary, #0891B2) 15%, transparent);
}
body.herobar-7 .hero-trustbar > .sec-inner { padding-top: 13px; padding-bottom: 13px; }
body.herobar-7 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 9px; padding: 3px 18px; color: #0f172a; }
body.herobar-7 .hero-badge + .hero-badge { border-left: 1px solid color-mix(in srgb, var(--primary, #0891B2) 22%, transparent); }
body.herobar-7 .hero-badge-ico { width: 16px; height: 16px; fill: var(--primary-ground, var(--primary, #0891B2)); }
body.herobar-7 .hero-badge-lead { color: color-mix(in srgb, var(--primary-ground, var(--primary, #0891B2)) 88%, #000); }
body.herobar-7 .hero-badge-txt { color: #475569; }

/* =========================================================================
   8 -- GLASS BAR  (translucent full-bleed bar, adapts to ground)
   ====================================================================== */
body.herobar-8 .hero-trustbar {
  background: color-mix(in srgb, currentColor 7%, transparent);
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.herobar-8 .hero-trustbar > .sec-inner { padding-top: 14px; padding-bottom: 14px; }
body.herobar-8 .hero-badge { flex: 1 1 auto; justify-content: center; gap: 9px; padding: 3px 20px; color: currentColor; }
body.herobar-8 .hero-badge + .hero-badge { border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
body.herobar-8 .hero-badge-ico { fill: var(--primary, #0891B2); }
body.herobar-8 .hero-badge-txt { opacity: .82; }

/* ---- responsive: every full-width bar stacks on narrow screens ----------- */
@media (max-width: 640px) {
  body[class*="herobar-"] .hero-badges { flex-direction: column; align-items: stretch; }
  body[class*="herobar-"] .hero-badge {
    justify-content: flex-start; padding: 9px 4px; border-left: 0 !important;
  }
  body[class*="herobar-"] .hero-badge + .hero-badge {
    border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) { body[class*="herobar-"] .hero-badge { transition: none; } }

/* ---- v14 renders its badges as an overlay ON the image, not a bottom bar.
   These win over the per-site herobar-N skin (loaded here, last, at end). ---- */
:is(.hero-v14-trust, .hero-v9-trust) .hero-badges { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
:is(.hero-v14-trust, .hero-v9-trust) .hero-badge {
  flex: 1 1 auto !important; justify-content: center !important; gap: 9px !important;
  padding: 4px 16px !important; color: #fff !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; font-size: 14px !important;
}
:is(.hero-v14-trust, .hero-v9-trust) .hero-badge + .hero-badge { border-left: 1px solid rgba(255, 255, 255, .22) !important; }
:is(.hero-v14-trust, .hero-v9-trust) .hero-badge-ico {
  width: 17px !important; height: 17px !important; padding: 0 !important;
  background: none !important; fill: #fff !important; border-radius: 0 !important;
}
:is(.hero-v14-trust, .hero-v9-trust) .hero-badge-lead { color: #fff !important; }
:is(.hero-v14-trust, .hero-v9-trust) .hero-badge-txt { color: rgba(255, 255, 255, .82) !important; }
@media (max-width: 640px) {
  :is(.hero-v14-trust, .hero-v9-trust) .hero-badges { flex-direction: column; align-items: stretch; }
  :is(.hero-v14-trust, .hero-v9-trust) .hero-badge { justify-content: flex-start !important; padding: 8px 4px !important; border-left: 0 !important; }
  :is(.hero-v14-trust, .hero-v9-trust) .hero-badge + .hero-badge { border-top: 1px solid rgba(255, 255, 255, .18) !important; }
}