@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(fraunces-48642176d9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(fraunces-48642176d9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(fraunces-48642176d9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fraunces-48642176d9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url(fraunces-48642176d9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:500;font-display:swap;src:url(literata-a9e1489afb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url(literata-a9e1489afb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:700;font-display:swap;src:url(literata-a9e1489afb.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--primary:#000000;--primary-hover:#201d1d;--primary-60:#bd7f7f;--primary-70:#cda2a2;--primary-90:#f0e6e6;--cta:#efefef;--cta-hover:#d3d3d3;--cta-ink:#000000;--btn-light-hover:#e0e0e0;--black:#050505;--ink:#000000;--body:#000000;--muted:#595959;--line:#e6e0e0;--link:#000000;--on-primary:#ffffff;--bg:#ffffff;--bg-alt:#f6f4f4;--surface:#ffffff;--wrap:1180px;--shadow:0 2px 6px rgba(0,0,0,.06);--r-sm:6px;--r-md:14px;--r-lg:28px;--r-xl:36px;--r-full:9999px;--r-btn:0px;--font-head:"Literata",Georgia,"Times New Roman",serif;--font-body:"Fraunces",Georgia,"Times New Roman",serif;--section-pad-d:72px;--section-pad-m:48px;--grid-gap:20px;--head-weight:700;--head-bold:700;--body-size:17px;--body-leading:1.55;--transition:.1s;--accent:#efefef;--accent-soft:#f2e9e9;--accent-ink:#111111;--band-bg:#000000;--band-ink:#f5f6f7;--band-muted:#acacad;--n-50:#faf9f9;--n-300:#d0c8c8;--n-800:#372f2f;--sh-lg:0 8px 24px rgba(26,26,26,.12);--h1:clamp(34px,4.4vw,52px);--h2:clamp(26px,3vw,36px);--h3:clamp(19px,1.9vw,22px);--h4:16px;--heading-tracking:0;--measure:min(640px,68ch);--foot-brand:#000000}
*{box-sizing:border-box}
/* scrollbar-gutter:stable — expanding an accordion/FAQ must not grow the page
   into scrollbar territory and shove the whole layout sideways (operator rule) */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;font-family:var(--font-body);color:var(--body);background:var(--bg);
  line-height:var(--body-leading);font-size:var(--body-size);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.15;
  margin:0 0 .5em;letter-spacing:var(--heading-tracking)}
h1{font-size:var(--h1);font-weight:var(--head-weight)}
/* last resort: a word wider than the column breaks, never runs off the page */
h1,h2{overflow-wrap:break-word}
h2{font-size:var(--h2);font-weight:var(--head-weight)}
h3{font-size:var(--h3);font-weight:var(--head-weight)}
h4{font-size:var(--h4);font-weight:var(--head-weight)}
p{margin:0 0 1rem}
a{color:var(--primary);text-decoration:none}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration:underline}}
img{max-width:100%;height:auto}
.vgg_wrap_xj4{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.vgg_section_xj4{padding:var(--section-pad-d) 0}
.vgg_section--alt_xj4{background:var(--bg-alt)}
.vgg_section--dark_xj4{background:var(--band-bg);color:var(--band-ink)}
.vgg_section--dark_xj4 h2,.vgg_section--dark_xj4 h3{color:#fff}
/* Head → content rhythm (rule 39): ONE gap from a section's head to its
   content everywhere; hero and CTA blocks keep their own rules. */
.vgg_section_xj4 .vgg_eyebrow_xj4{margin:0 0 10px}
.vgg_eyebrow_xj4 + h2,.vgg_eyebrow_xj4 + h1{margin-top:0}
.vgg_section_xj4 h2 + .vgg_lead_xj4,.vgg_section_xj4 h2 + p.vgg_mw-760_xj4{margin-top:12px}
.vgg_section_xj4 .vgg_lead_xj4 + *:not(.vgg_lead_xj4),.vgg_section_xj4 h2 + *:not(.vgg_lead_xj4):not(p.vgg_mw-760_xj4){margin-top:var(--head-gap)}
.vgg_lead_xj4{font-size:var(--lead);line-height:1.55;color:var(--body)}
.vgg_eyebrow_xj4{text-transform:uppercase;letter-spacing:.08em;font-size:var(--meta);
  font-family:var(--font-head);font-weight:var(--head-bold);color:var(--primary);margin:0 0 .6rem}
/* two-part eyebrow variants (marker + label); inline-block keeps centring intact */
[data-vgg_eb_xj4=line] .vgg_eyebrow_xj4::before{content:"";display:inline-block;width:26px;height:2px;
  background:currentColor;vertical-align:middle;margin-right:12px;opacity:.85}
[data-vgg_eb_xj4=line] .vgg_eyebrow_xj4::after{content:"";display:inline-block;width:26px;height:2px;
  background:currentColor;vertical-align:middle;margin-left:12px;opacity:.85}
/* split: two-part 'PRIMARY / secondary' (brand label + muted descriptor) */
[data-vgg_eb_xj4=split] .vgg_eyebrow_xj4 .vgg_eb-a_xj4{color:var(--link)}
[data-vgg_eb_xj4=split] .vgg_eyebrow_xj4 .vgg_eb-sep_xj4{color:var(--muted);margin:0 .1em}
[data-vgg_eb_xj4=split] .vgg_eyebrow_xj4 .vgg_eb-b_xj4{color:var(--muted)}
/* the hero's surface is theme-owned (light, brand or dark): the kicker keeps the
   hero's own ink and reads as a kicker by weight alone, so it is AA on any surface */
.vgg_hero_xj4 .vgg_eyebrow_xj4 .vgg_eb-a_xj4{color:inherit}
.vgg_hero_xj4 .vgg_eyebrow_xj4 .vgg_eb-sep_xj4,.vgg_hero_xj4 .vgg_eyebrow_xj4 .vgg_eb-b_xj4{color:rgba(255,255,255,.6)}
/* the site's tagline above a hero H1 (hero_motto): the eyebrow's slot and ink,
   read as a sentence rather than a label */
.vgg_eyebrow_xj4.vgg_hero-motto_xj4,.vgg_hero_xj4 .vgg_eyebrow_xj4.vgg_hero-motto_xj4{text-transform:none;letter-spacing:normal;
  font-size:var(--ui)}
/* the tagline under the footer wordmark */
.vgg_footer-brandline_xj4 .vgg_footer-motto_xj4{margin:6px 0 0;font-weight:600}
.vgg_center_xj4{text-align:center}
.vgg_cta-row_xj4{margin-top:18px}
.vgg_cta-row_xj4.vgg_center_xj4{text-align:center}
.vgg_skip_xj4{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:var(--r-md);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.vgg_skip_xj4:focus{left:8px}
main{display:block}
/* measure (skin, 14th round): every reading column on a site shares ONE
   measure and one wide sibling — blocks were wide, narrow and everywhere in
   between. mw-640 stays a form column. */
:root{--measure:min(760px,68ch);--measure-wide:min(880px,80ch);--meta:.82rem;--small:.92rem;--ui:.96rem;--lead:1.125rem;--big:1.35rem;--display:1.9rem;--glyph:1.2rem;--head-gap:28px;--eyebrow-gap:10px}
[data-vgg_measure_xj4=compact]{--measure:min(700px,62ch);--measure-wide:min(840px,74ch)}
[data-vgg_measure_xj4=roomy]{--measure:min(820px,74ch);--measure-wide:min(960px,86ch)}
.vgg_mw-720_xj4{max-width:var(--measure);margin-left:auto;margin-right:auto}
.vgg_mw-760_xj4{max-width:var(--measure);margin-left:auto;margin-right:auto}
.vgg_lead-narrow_xj4{max-width:var(--measure)}
.vgg_form-card--narrow_xj4{max-width:520px}
.vgg_mw-640_xj4{max-width:640px;margin-left:auto;margin-right:auto}
.vgg_mw-880_xj4{max-width:var(--measure-wide);margin-left:auto;margin-right:auto}
/* buttons */
.vgg_btn_xj4{display:inline-block;background:var(--cta);color:var(--cta-ink);font-family:var(--font-body);
  font-weight:600;padding:11px 20px;min-height:44px;line-height:22px;border-radius:var(--r-btn);
  border:0;cursor:pointer;font-size:16px;text-align:center;transition:background var(--transition) ease}
@media (hover:hover) and (pointer:fine){.vgg_btn_xj4:hover{background:var(--cta-hover);text-decoration:none;color:var(--cta-ink)}}
.vgg_btn--lg_xj4{padding:13px 28px;font-size:var(--lead);min-width:220px;min-height:48px}
/* btn--light: the hero primary when the brand CTA can't clear 3:1 against the
   hero backdrop (_hero_backdrop models the brand panel, the dark band and the
   scrim over any photo). White fill, ink text. */
.vgg_btn--light_xj4{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.vgg_btn--light_xj4:hover{background:var(--btn-light-hover);color:var(--ink)}}

/* header + nav */
.vgg_site-header_xj4{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  --vgg_menu-top_xj4:64px}
.vgg_header-inner_xj4{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 20px;max-width:var(--wrap);margin:0 auto}
.vgg_brand_xj4{display:flex;align-items:center;gap:10px;font-family:var(--font-head);
  font-weight:var(--head-bold);font-size:var(--big)}
@media (hover:hover) and (pointer:fine){.vgg_brand_xj4:hover{text-decoration:none}}
.vgg_brand_xj4 svg{display:block}
.vgg_header-actions_xj4{display:flex;align-items:center;gap:12px}
/* header CTA: a colour-differentiated LINK in the link row — the brand
   colour and a heavier weight set it apart, nothing else. Operator (13th
   round): a tinted pill in the nav bar "just looks wrong" — when the CTA
   sits among the links it is styled as a link, never a button. */
/* nav_cta_style=link: the CTA is EXACTLY a nav link — same weight, size and
   box as .vgg_nav-links_xj4 a; the brand colour is the only difference. */
/* The header CTA is a one-line control. An inline-flex row centres the label
   and any leading glyph on the same vertical axis. A plain inline anchor put
   the glyph's box on the text baseline, so the arrow rode high and the label
   sat low (operator). The padding and line-height still carry the link
   metrics. */
.vgg_nav-cta_xj4{display:inline-flex;align-items:center;min-height:44px;color:var(--primary);font-weight:600;
  font-size:var(--ui);padding:13px 16px;
  border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none;
  line-height:1.4;transition:color var(--transition) ease}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta_xj4:hover{border-bottom-color:var(--primary);text-decoration:none}}
/* every layout breaks the CTA out of .vgg_nav-links_xj4, so only the tworow nav row
   ever needs to centre it as a flex item */
.vgg_header-navrow_xj4 .vgg_nav-cta_xj4{align-self:center}
/* nav_cta_style violators: the CTA broken out of the link row with ONE
   distinctive treatment — never a filled pill. The glyph centres itself, so
   the arrow holds the label's midline even if a future rule drops the
   anchor's inline-flex. */
.vgg_nav-cta--arrow_xj4 .vgg_nav-cta-glyph_xj4{display:inline-flex;align-items:center;vertical-align:middle;
  margin-left:.35em;transition:transform .2s}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta--arrow_xj4:hover .vgg_nav-cta-glyph_xj4{transform:translateX(3px)}}
/* highlight: a marker band behind the lower half of the LABEL. The anchor is a
   44px tap target with the label centred in it, so a band sized to the box
   (the old 58%-of-box gradient) hung below the words; this one is sized in
   em and placed from the box centre, so it tracks the text at any height. */
.vgg_nav-cta--highlight_xj4{background:linear-gradient(var(--primary-90),var(--primary-90)) no-repeat;
  background-size:100% .62em;background-position:0 calc(50% + .32em);
  border-bottom:0;padding:8px 6px;margin:0 10px;transition:background-size .2s ease}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta--highlight_xj4:hover{background-size:100% 1.1em;
  background-position:0 calc(50% + .12em)}}
.vgg_nav-cta--mark_xj4{position:relative;border-bottom:0}
/* the mark and slide rules span exactly the label: inset by the anchor's
   16px side padding, less the trailing letter-spacing. The mark is an svg,
   which keeps its viewBox ratio unless given an explicit width. */
.vgg_nav-cta-mark_xj4{position:absolute;left:16px;width:calc(100% - 32px - var(--nav-track,0px));bottom:8px;height:6px;
  color:var(--primary);opacity:.8}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta--mark_xj4:hover .vgg_nav-cta-mark_xj4{opacity:1}}
.vgg_nav-cta--slide_xj4{position:relative;border-bottom:0}
.vgg_nav-cta--slide_xj4::after{content:"";position:absolute;left:16px;right:calc(16px + var(--nav-track,0px));bottom:9px;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .25s}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta--slide_xj4:hover::after{transform:scaleX(1)}}
/* R24: the outline CTA follows the build's button radius (--r-btn) — a
   hard-coded square (or full) corner beside rounded page buttons read as a
   different site's chrome; `pill` (hard-coded full radius) is retired. */
.vgg_nav-cta--boxed_xj4{border:1.5px solid var(--primary);border-radius:var(--r-btn);padding:8px 14px;margin:0 8px}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta--boxed_xj4:hover{background:var(--primary-90)}}
.vgg_nav-cta-icon_xj4{display:inline-flex;vertical-align:middle;margin-left:.4em}
.vgg_nav-cta-icon_xj4 svg{display:block;width:14px;height:14px}
@media(prefers-reduced-motion:reduce){.vgg_nav-cta--arrow_xj4 .vgg_nav-cta-glyph_xj4,.vgg_nav-cta--slide_xj4::after,.vgg_more_xj4 .vgg_glyph_xj4{transition:none}}
.vgg_mainnav_xj4{--nav-surface:transparent;--nav-fg:var(--ink);--nav-fg-muted:var(--muted);
  background:var(--nav-surface)}
.vgg_nav-inner_xj4{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;padding:0 12px}
.vgg_nav-links_xj4{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.vgg_nav-links_xj4 a{display:flex;align-items:center;min-height:44px;color:var(--nav-fg);font-weight:600;font-size:var(--ui);
  padding:13px 16px;border-bottom:3px solid transparent;line-height:1.4}
.vgg_nav-links_xj4 a[aria-current=page]{text-decoration:none;
  color:var(--nav-fg);border-bottom-color:var(--primary)}
@media (hover:hover) and (pointer:fine){.vgg_nav-links_xj4 a:hover{text-decoration:none;
  color:var(--nav-fg);border-bottom-color:var(--primary)}}
.vgg_menu-toggle_xj4{display:none;background:none;border:0;cursor:pointer;padding:6px 10px;min-width:44px;min-height:44px}
.vgg_menu-toggle_xj4 span{display:block;width:24px;height:2px;background:var(--black);margin:5px 0}
/* header_layout: centered — brand centred on its own row, one centred link row
   with the CTA as its last item; no left/right split at all */
.vgg_head--centered_xj4 .vgg_header-brand-row_xj4{justify-content:center;padding:16px 12px 10px;
  position:relative}
.vgg_nav-cta--corner_xj4{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.vgg_head--centered_xj4 .vgg_nav-inner_xj4{justify-content:center}
.vgg_head--centered_xj4 .vgg_nav-center_xj4{display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  justify-content:center}
.vgg_head--centered_xj4 .vgg_nav-links_xj4 a,.vgg_head--centered_xj4 .vgg_nav-parent_xj4{padding:10px 14px}
/* I1 (R20): the nav CTA is a conversion control, never a page in the nav —
   it must never pick up the active-page marker. The .vgg_site-header-scoped_xj4
   selectors outrank the head--* aria-current link styles on specificity, so
   the reset holds wherever it sits in the sheet. */
.vgg_site-header_xj4 .vgg_nav-links_xj4 .vgg_nav-cta_xj4[aria-current],.vgg_site-header_xj4 .vgg_nav-links_xj4 .vgg_nav-cta_xj4.vgg_is-active_xj4,
.vgg_nav-cta_xj4[aria-current],.vgg_nav-cta_xj4.vgg_is-active_xj4{text-decoration:none;border-bottom:0;background:none}
/* header_layout: brandcenter — ONE row: links left, the brand dead-centre
   (the mark-above stacked lockup when the site ships one), About + CTA right.
   The side columns are minmax(0,1fr), NOT bare 1fr: a bare 1fr column has an
   implicit min-width of its content, so a five-link left group grew past its
   half and shoved the brand right of centre (operator: a logo drifting right
   reads as broken; centred is fine). Equal zero-min columns pin the brand to
   the true centre; _header_layout_fits offers this layout only when the left
   group fits inside its half. */
.vgg_head--brandcenter_xj4 .vgg_header-inner_xj4{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:12px;padding-top:18px;padding-bottom:18px}
.vgg_head--brandcenter_xj4 .vgg_brand_xj4{grid-column:2;justify-self:center}
.vgg_head--brandcenter_xj4 .vgg_hc-right_xj4{display:flex;align-items:center;justify-content:flex-end;
  gap:8px}
.vgg_head--brandcenter_xj4 .vgg_header-actions_xj4{min-width:0}
.vgg_head--brandcenter_xj4 .vgg_nav-inner_xj4{display:none}
.vgg_head--brandcenter_xj4 .vgg_nav-links_xj4{flex-wrap:nowrap}
.vgg_head--brandcenter_xj4 .vgg_nav-links_xj4 a,.vgg_head--brandcenter_xj4 .vgg_nav-parent_xj4{color:var(--ink);
  padding:8px 12px;border-bottom:0;white-space:nowrap}
.vgg_head--brandcenter_xj4 .vgg_nav-links_xj4>li>a[aria-current=page],
.vgg_head--brandcenter_xj4 .vgg_nav-parent_xj4.vgg_is-active_xj4{color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.vgg_head--brandcenter_xj4 .vgg_nav-links_xj4>li>a:hover{color:var(--primary);border-bottom:0}}
.vgg_head--brandcenter_xj4 .vgg_header-actions_xj4 .vgg_menu-toggle_xj4{display:none}
@media(max-width:1020px){
  .vgg_head--brandcenter_xj4 .vgg_header-inner_xj4{display:flex;justify-content:space-between}
  .vgg_head--brandcenter_xj4 .vgg_nav-links_xj4{display:none}
  .vgg_head--brandcenter_xj4 .vgg_header-actions_xj4 .vgg_menu-toggle_xj4{display:block}
  .vgg_head--brandcenter_xj4 .vgg_nav-inner_xj4.vgg_open_xj4{display:flex}
  .vgg_head--brandcenter_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-links_xj4{display:flex}
}
/* centered: the actions block exists for the mobile toggle — the CTA already
   lives in the centred link row, so both actions controls hide at desktop and
   the toggle appears at mobile exactly as brandcenter's does. */
.vgg_head--centered_xj4 .vgg_header-actions_xj4 .vgg_nav-cta_xj4,.vgg_head--centered_xj4 .vgg_header-actions_xj4 .vgg_menu-toggle_xj4{display:none}
@media(max-width:1020px){
  /* one row: the centred brand, the toggle at its right edge (the nav drawer
     wraps full-width beneath); the brand row's left pad balances the toggle.
     The corner CTA goes with the links (the menu holds it): beside the toggle
     it would cover the brand */
  .vgg_head--centered_xj4{display:flex;flex-wrap:wrap;align-items:center}
  .vgg_head--centered_xj4 .vgg_nav-cta--corner_xj4{display:none}
  .vgg_head--centered_xj4 .vgg_header-brand-row_xj4{flex:1 1 0;min-width:0;padding-left:48px}
  .vgg_head--centered_xj4 .vgg_header-actions_xj4{padding-right:12px}
  .vgg_head--centered_xj4 .vgg_mainnav_xj4{flex:0 0 100%;order:3}
  .vgg_head--centered_xj4 .vgg_nav-links_xj4{display:none}
  .vgg_head--centered_xj4 .vgg_header-actions_xj4 .vgg_menu-toggle_xj4{display:block}
  .vgg_head--centered_xj4 .vgg_nav-inner_xj4.vgg_open_xj4{display:flex}
  .vgg_head--centered_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-links_xj4{display:flex}
}
/* (header_layout `drawer` — nav behind a hamburger at EVERY width — is
   retired: operator rule, a hamburger menu never appears on desktop. The
   toggle is a mobile-only control; every desktop layout shows its links.) */

/* header_layout: inline & split move the nav onto the white bar (links are
   dark-on-white; the historical dark `stacked` bar is retired). */
.vgg_head--inline_xj4 .vgg_mainnav_xj4,.vgg_head--split_xj4 .vgg_mainnav_xj4{--nav-surface:transparent;--nav-fg:var(--ink);
  --nav-fg-muted:var(--muted);background:var(--nav-surface)}
.vgg_head--inline_xj4 .vgg_nav-inner_xj4,.vgg_head--split_xj4 .vgg_nav-inner_xj4{padding:0;max-width:none;margin:0}
.vgg_head--inline_xj4 .vgg_nav-links_xj4 a,.vgg_head--split_xj4 .vgg_nav-links_xj4 a,
.vgg_head--inline_xj4 .vgg_nav-parent_xj4,.vgg_head--split_xj4 .vgg_nav-parent_xj4{color:var(--nav-fg);padding:8px 13px;
  border-bottom:0;white-space:nowrap}
.vgg_head--inline_xj4 .vgg_nav-links_xj4>li>a[aria-current=page],.vgg_head--split_xj4 .vgg_nav-links_xj4>li>a[aria-current=page],
.vgg_head--inline_xj4 .vgg_nav-parent_xj4.vgg_is-active_xj4,.vgg_head--split_xj4 .vgg_nav-parent_xj4.vgg_is-active_xj4{color:var(--primary);
  border-bottom:0}
@media (hover:hover) and (pointer:fine){.vgg_head--inline_xj4 .vgg_nav-links_xj4>li>a:hover,
.vgg_head--split_xj4 .vgg_nav-links_xj4>li>a:hover{color:var(--primary);
  border-bottom:0}}
/* inline: one row — brand | nav (fills the middle) | actions. */
.vgg_head--inline_xj4 .vgg_mainnav_xj4{flex:1}
.vgg_head--inline_xj4 .vgg_nav-inner_xj4{justify-content:space-between;gap:18px}
/* split: one row — brand left, the nav CENTRED in the free middle, CTA pinned
   right. (It used to cluster nav + CTA on the right, which was a near
   duplicate of inline; the centred link row is a genuinely different header.) */
.vgg_head--split_xj4 .vgg_header-cluster_xj4{flex:1;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:20px}
.vgg_head--split_xj4 .vgg_mainnav_xj4{justify-self:center}
.vgg_head--split_xj4 .vgg_nav-inner_xj4{gap:2px}
/* header_layout: dual_end — brand | mid links | end-cluster (outline secondary
   + solid primary). Cluster sits OUTSIDE .vgg_nav-links_xj4 (R2 still forbids pills
   inside the link row; end-cluster dual buttons are OK). Mobile wave-1 shows
   a single primary in .vgg_nav-cta-cluster--menu_xj4 when the menu is open. */
.vgg_head--dual_end_xj4 .vgg_header-inner_xj4{display:flex;align-items:center;gap:16px;
  justify-content:space-between}
.vgg_head--dual_end_xj4 .vgg_mainnav_xj4{flex:1;min-width:0}
.vgg_head--dual_end_xj4 .vgg_nav-inner_xj4{padding:0;max-width:none;margin:0;justify-content:center}
.vgg_head--dual_end_xj4 .vgg_nav-links_xj4{flex-wrap:nowrap;justify-content:center}
.vgg_head--dual_end_xj4 .vgg_nav-links_xj4 a,.vgg_head--dual_end_xj4 .vgg_nav-parent_xj4{color:var(--ink);
  padding:8px 12px;border-bottom:0;white-space:nowrap}
.vgg_head--dual_end_xj4 .vgg_nav-links_xj4>li>a[aria-current=page],
.vgg_head--dual_end_xj4 .vgg_nav-parent_xj4.vgg_is-active_xj4{color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.vgg_head--dual_end_xj4 .vgg_nav-links_xj4>li>a:hover{color:var(--primary);border-bottom:0}}
.vgg_nav-cta-cluster_xj4{display:flex;align-items:center;gap:10px;flex-shrink:0}
.vgg_nav-cta-cluster_xj4 .vgg_nav-cta_xj4{min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;box-sizing:border-box}
.vgg_nav-cta-cluster_xj4 .vgg_nav-cta--boxed_xj4{margin:0}
.vgg_nav-cta-cluster--menu_xj4{display:none}
.vgg_head--dual_end_xj4 .vgg_header-actions_xj4 .vgg_nav-cta_xj4{display:none}
@media(max-width:680px){
  .vgg_head--dual_end_xj4 .vgg_nav-cta-cluster_xj4:not(.vgg_nav-cta-cluster--menu_xj4){display:none}
}
/* Mobile menu (the mobile_menu pool: drawer | overlay | sheet). Every variant
   shares one panel contract: it scrolls by itself (overflow-y:auto,
   overscroll-behavior:contain, a max-height in 100dvh with a 100vh fallback),
   the page behind it is locked while it is open (html.vgg_menu-open_xj4), a close
   button sits in a sticky head row and the CTA sticks to the foot, so the last
   link and the button are always reachable on a 320x568 phone. A parent with
   children is an accordion (button + aria-expanded + aria-controls). Surfaces
   are tokens only: nav chrome is never dark. */
.vgg_menu-head_xj4{display:none}
@media(max-width:1020px){
  html.vgg_menu-open_xj4,html.vgg_menu-open_xj4 body{overflow:hidden;overscroll-behavior:none}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4{box-sizing:border-box;display:flex;flex-direction:column;
    align-items:stretch;justify-content:flex-start;position:fixed;z-index:3;
    left:0;right:0;margin:0;max-width:none;width:auto;
    --nav-surface:var(--surface);--nav-fg:var(--ink);--nav-fg-muted:var(--muted);
    background:var(--nav-surface);padding:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    max-height:calc(100vh - var(--vgg_menu-top_xj4,0px));
    max-height:calc(100dvh - var(--vgg_menu-top_xj4,0px))}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4>*{flex-shrink:0}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_menu-head_xj4{display:flex;align-items:center;justify-content:flex-end;
    position:sticky;top:0;z-index:2;min-height:56px;padding:0 8px;
    background:var(--nav-surface)}
  .vgg_menu-close_xj4{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border:0;border-radius:var(--r-sm);
    background:none;color:var(--ink);cursor:pointer}
  .vgg_menu-close_xj4 svg{display:block;width:22px;height:22px}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-links_xj4{flex-direction:column;align-items:stretch;gap:0;width:100%}
  /* Every row is even whatever the header layout, menu skin or rule style:
     one left edge for the top rows, one deeper edge for the child rows, one
     hairline under each (the template check's MENU-INDENT). */
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-links_xj4>li>a:not(.vgg_nav-cta_xj4):not(.vgg_btn_xj4),.vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-links_xj4>li>.vgg_nav-parent_xj4{
    box-sizing:border-box;width:100%;text-align:left;padding:13px 20px;
    border-bottom:1px solid var(--line);border-radius:0;white-space:normal}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_mega_xj4 a:not(.vgg_btn_xj4){padding:11px 34px;border-bottom:1px solid var(--line);
    border-radius:0;white-space:normal}
  /* accordion: a parent opens its own list in flow; the glyph is drawn here so
     it never depends on the caret knob */
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-parent_xj4{justify-content:space-between;gap:12px}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-parent_xj4>[aria-hidden=true]{display:none}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-parent_xj4::after{content:"";flex:none;width:8px;height:8px;
    margin:-3px 4px 0 0;border:solid currentColor;border-width:0 2px 2px 0;
    transform:rotate(45deg);transition:transform .2s ease}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_has-menu_xj4.vgg_is-open_xj4>.vgg_nav-parent_xj4::after{transform:rotate(-135deg);margin-top:3px}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_mega_xj4{position:static;display:none;background:transparent;border:0;
    box-shadow:none;padding:0 0 6px;margin:0;min-width:0;--nav-surface:transparent}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_has-menu_xj4.vgg_is-open_xj4>.vgg_mega_xj4{display:block}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_has-menu_xj4:not(.vgg_is-open_xj4)>.vgg_mega_xj4{display:none}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_mega_xj4 a:not(.vgg_btn_xj4)::after{display:none}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-cta-cluster--menu_xj4{display:flex;flex-direction:column;gap:10px}
  .vgg_site-header_xj4 .vgg_nav-cta-cluster--menu_xj4{position:sticky;bottom:0;z-index:2;margin-top:auto;
    background:var(--nav-surface);border-top:1px solid var(--line);
    padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}
  .vgg_nav-cta-cluster--menu_xj4 .vgg_nav-cta_xj4{width:100%;justify-content:center}
  /* drawer: a side panel sliding in from the right edge over a scrim */
  [data-vgg_mobilemenu_xj4=drawer] .vgg_nav-inner_xj4.vgg_open_xj4{top:0;bottom:0;left:auto;right:0;
    width:min(86vw,360px);height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
    border-left:1px solid var(--line);box-shadow:var(--shadow);
    animation:vgg_mm-in-x_xj4 .22s ease-out}
  /* overlay: the whole screen, large type, a plus/minus accordion glyph */
  [data-vgg_mobilemenu_xj4=overlay] .vgg_nav-inner_xj4.vgg_open_xj4{top:0;bottom:0;width:100%;
    height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
    animation:vgg_mm-in-fade_xj4 .18s ease-out}
  [data-vgg_mobilemenu_xj4=overlay] .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-links_xj4>li>a:not(.vgg_nav-cta_xj4):not(.vgg_btn_xj4),
  [data-vgg_mobilemenu_xj4=overlay] .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-links_xj4>li>.vgg_nav-parent_xj4{
    font-size:1.25rem;padding:16px 24px}
  [data-vgg_mobilemenu_xj4=overlay] .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_mega_xj4 a:not(.vgg_btn_xj4){padding:13px 40px;font-size:1rem}
  [data-vgg_mobilemenu_xj4=overlay] .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_menu-head_xj4{padding:0 14px}
  [data-vgg_mobilemenu_xj4=overlay] .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_nav-parent_xj4::after{content:"+";width:auto;height:auto;
    margin:0 2px 0 0;border:0;transform:none;font-size:1.5rem;line-height:1;font-weight:400}
  [data-vgg_mobilemenu_xj4=overlay] .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_has-menu_xj4.vgg_is-open_xj4>.vgg_nav-parent_xj4::after{content:"\2212";
    margin:0 2px 0 0;transform:none}
  /* sheet: drops down from the foot of the header, full width, under a scrim */
  [data-vgg_mobilemenu_xj4=sheet] .vgg_nav-inner_xj4.vgg_open_xj4{top:var(--vgg_menu-top_xj4,64px);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    border-radius:0 0 var(--r-md) var(--r-md);animation:vgg_mm-in-y_xj4 .18s ease-out}
  [data-vgg_mobilemenu_xj4=sheet] .vgg_nav-inner_xj4.vgg_open_xj4 .vgg_menu-head_xj4{min-height:48px}
  .vgg_site-header_xj4[data-vgg_mobilemenu_xj4=drawer]::after,.vgg_site-header_xj4[data-vgg_mobilemenu_xj4=sheet]::after{
    content:"";display:none;position:fixed;left:0;right:0;bottom:0;top:0;z-index:2;
    background:rgba(0,0,0,.4)}
  html.vgg_menu-open_xj4 .vgg_site-header_xj4[data-vgg_mobilemenu_xj4=drawer]::after{display:block}
  html.vgg_menu-open_xj4 .vgg_site-header_xj4[data-vgg_mobilemenu_xj4=sheet]::after{display:block;top:var(--vgg_menu-top_xj4,64px)}
}
@keyframes vgg_mm-in-x_xj4{from{transform:translateX(100%)}to{transform:none}}
@keyframes vgg_mm-in-fade_xj4{from{opacity:0}to{opacity:1}}
@keyframes vgg_mm-in-y_xj4{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  [data-vgg_mobilemenu_xj4] .vgg_nav-inner_xj4.vgg_open_xj4{animation:none}
}
/* No script: nothing can open the menu, so the links sit open in the page flow
   under the header row and every group lists its links (no accordion). */
@media(max-width:1020px) and (scripting:none){
  .vgg_site-header_xj4 .vgg_header-actions_xj4 .vgg_menu-toggle_xj4,.vgg_site-header_xj4 .vgg_nav-inner_xj4 .vgg_menu-head_xj4{display:none}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4{display:flex;position:static;flex-direction:column;
    align-items:stretch;max-width:none;width:100%;padding:0}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4 .vgg_nav-links_xj4{display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:0}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4 .vgg_mega_xj4{position:static;display:block;border:0;box-shadow:none;
    background:transparent;padding:0 0 6px;min-width:0}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4 .vgg_nav-parent_xj4::after,
  .vgg_site-header_xj4 .vgg_nav-inner_xj4 .vgg_nav-parent_xj4>[aria-hidden=true]{display:none}
  .vgg_site-header_xj4 .vgg_nav-inner_xj4 .vgg_nav-cta-cluster--menu_xj4{display:flex;flex-direction:column;
    gap:10px;padding:12px 20px}
}
@media(max-width:680px){
  .vgg_head--split_xj4 .vgg_header-cluster_xj4{gap:0;grid-template-columns:auto}
  .vgg_head--split_xj4 .vgg_mainnav_xj4{justify-self:stretch}
  .vgg_site-header_xj4{position:sticky}
}

/* hero (background varies by imagery strategy; filled by _hero_css via .vgg_hero_xj4{position:relative;color:var(--band-ink);padding:72px 0 88px;background-color:var(--band-bg);background-size:cover;background-position:center}
.vgg_hero--boxed_xj4 .vgg_hero-box_xj4{background-color:var(--band-bg)}) */
.vgg_hero_xj4{position:relative;color:var(--band-ink);padding:72px 0 88px;background-color:var(--band-bg);background-size:cover;background-position:center}
.vgg_hero--boxed_xj4 .vgg_hero-box_xj4{background-color:var(--band-bg)}
.vgg_hero_xj4 h1{color:#fff}
.vgg_hero_xj4 .vgg_lead_xj4,.vgg_hero_xj4 .vgg_about-def_xj4{color:var(--primary-90)}
.vgg_hero_xj4 .vgg_eyebrow_xj4{color:var(--accent-soft)}
.vgg_hero-grid_xj4{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
/* flipped two-column: media card first (left), copy right — used by the
   per-town "why" section rotation so location pages don't all share one shape */
.vgg_hero-grid--flip_xj4{grid-template-columns:.9fr 1.1fr}
.vgg_why-head_xj4{margin-bottom:26px}
.vgg_hero-copy_xj4{max-width:680px}
/* hero proof points: a tidy inline ticked row (brand ticks), not a tall stacked
   checklist crammed into the hero copy. Wraps to as many lines as it needs. */
.vgg_hero-proof_xj4{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-wrap:wrap;
  gap:9px 22px}
.vgg_hero-proof_xj4 li{position:relative;padding-left:26px;color:#f2ecec;font-weight:600;font-size:var(--small)}
.vgg_hero-proof_xj4 li::before{content:"";position:absolute;left:2px;top:3px;width:7px;height:12px;
  border:solid var(--primary-70);border-width:0 3px 3px 0;transform:rotate(42deg)}
.vgg_hero-cta_xj4{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
/* interior heroes now use the full wrap (left edges match the home hero);
   cap the lead at the theme's reading measure so it stays a column, not a banner */
.vgg_hero_xj4 .vgg_lead_xj4,.vgg_hero_xj4 .vgg_about-def_xj4{max-width:var(--measure)}
.vgg_hero_xj4 .vgg_lead_xj4 + .vgg_hero-cta_xj4{margin-top:22px}
/* outline buttons draw their ring with an INSET box-shadow, not a border:
   a border adds 4px to the box, which is why the secondary hero button always
   stood taller than the primary beside it. The inset ring changes nothing
   about layout, so outline and solid share the exact same geometry — for good. */
.vgg_btn--outline-light_xj4{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
@media (hover:hover) and (pointer:fine){.vgg_btn--outline-light_xj4:hover{background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 2px #fff}}
.vgg_btn--ghost_xj4{background:#fff;color:var(--black);
  box-shadow:inset 0 0 0 2px var(--black)}
@media (hover:hover) and (pointer:fine){.vgg_btn--ghost_xj4:hover{background:var(--black);color:#fff}}
/* hero_variant: structural home-hero layouts (AC-1.1). `stack` needs no rule.
   (The retired `split` container's aside-card CSS is gone with it.) */
/* splitrev: copy sits left over the directional scrim from _hero_css, so cap the
   copy column to keep the right half carrying the photo. */
.vgg_hero--splitrev_xj4 .vgg_hero-copy_xj4{max-width:540px}
/* strip: a full-width ticked proof band beneath the hero copy (banner + stack). */
.vgg_hero-strip_xj4{margin-top:34px;border-top:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.14)}
.vgg_hero-strip_xj4 .vgg_wrap_xj4{padding-top:20px;padding-bottom:20px}
.vgg_hero--banner_xj4 .vgg_hero-strip_xj4{margin-top:40px}
/* a hero ending in the USP strip must not leave dead hero below it (stack
   variant kept its bottom padding, which read as a huge empty bar). ONLY a
   hero that actually carries the strip drops its bottom padding — the old
   unconditional banner zero-padding rule left the CTA buttons flush
   against the hero's bottom edge whenever the banner had no strip (operator
   complaint: "no padding after the CTA buttons"). The class is set by the
   builder; the :has() rule is the belt to that brace. */
.vgg_hero--has-strip_xj4,.vgg_hero_xj4:has(> .vgg_hero-strip_xj4){padding-bottom:0}
/* fullbleed: a tall poster — the hero fills most of the viewport with the copy
   over the photo. (It used to carry no rule at all, so it rendered
   byte-identical to `stack`.) Needs a photo hero: _hero_variant_fits keeps it
   out of the draw for a typographic site. The copy is centred in
   the poster, NOT anchored to the bottom edge: bottom-anchoring left a deep
   gap above the eyebrow and the CTA buttons hugging the hero's bottom edge
   (operator: reads as broken). Hero padding is never tighter below the CTAs
   than above the copy — rule 27. */
.vgg_hero--fullbleed_xj4{min-height:min(72vh,680px);display:flex;flex-direction:column;
  justify-content:center;padding-top:72px;padding-bottom:72px}
.vgg_hero--fullbleed_xj4>.vgg_wrap_xj4{width:100%}
.vgg_hero--fullbleed_xj4 .vgg_hero-copy_xj4{max-width:620px}
@media(max-width:680px){.vgg_hero--fullbleed_xj4{min-height:0}}
.vgg_hero-proof--strip_xj4{margin:0;justify-content:center;gap:12px 30px}
.vgg_hero-proof--strip_xj4 li{margin:0}

/* --- Footprint knobs (per-site variance, set via body data-attributes) --- */
/* hero_align: centre every hero's copy (default left needs no rule). Centres the
   copy column, its text, the USP list and the CTA row so the whole hero reads as
   deliberately centred rather than a left block nudged over. */
/* hero_align=center must centre the WHOLE hero grammar — eyebrow, H1, lead and
   CTA rows together. Centring only .vgg_hero-copy_xj4 left heroes whose builders emit
   bare children (no .vgg_hero-copy_xj4 wrapper: area/service heroes) with a mixed
   left-heading/centred-body hero (operator rule: never a mix). */
[data-vgg_halign_xj4=center] .vgg_hero_xj4{text-align:center}
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_hero-copy_xj4{margin-left:auto;margin-right:auto;text-align:center}
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_wrap_xj4.vgg_mw-760_xj4{text-align:center}
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_hero-cta_xj4{justify-content:center}
/* eyebrow markers with rule pseudo-elements re-centre via their own rules;
   keep the eyebrow text centred with the heading */
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_eyebrow_xj4{text-align:center}
/* a hero whose copy sits in a .vgg_center_xj4 container keeps copy, buttons + proof
   aligned with the text (left halign + centered copy used to leave the copy
   block hugging the left edge and the CTA row adrift) */
.vgg_center_xj4 .vgg_hero-copy_xj4{margin-left:auto;margin-right:auto}
.vgg_center_xj4 .vgg_hero-cta_xj4{justify-content:center}
.vgg_center_xj4 .vgg_hero-proof_xj4{justify-content:center}
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_lead_xj4,[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_about-def_xj4{margin-left:auto;margin-right:auto}
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_hero-proof_xj4{justify-content:center}
@media (max-width:640px){[data-vgg_halign_xj4=center] .vgg_hero_xj4,[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_hero-copy_xj4,
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_wrap_xj4.vgg_mw-760_xj4,[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_eyebrow_xj4{text-align:left}
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_hero-cta_xj4,[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_hero-proof_xj4{justify-content:flex-start}
[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_lead_xj4,[data-vgg_halign_xj4=center] .vgg_hero_xj4 .vgg_about-def_xj4{margin-left:0}
.vgg_hero_xj4 .vgg_lead-more_xj4{display:none}}
details>div{max-width:var(--measure)}
/* heading_case: title-case sites capitalise section headings for a formal look;
   sentence-case sites leave headings as authored. The <title> tag is never touched
   (it is set server-side, not via this rule). Applied to content headings only. */
[data-vgg_headcase_xj4=title] h1,[data-vgg_headcase_xj4=title] h2,[data-vgg_headcase_xj4=title] h3{text-transform:capitalize}
/* container: 'contained' narrows the shared max-column for a tighter, editorial feel;
   'full' (default via :root --wrap) reads wider. Set on body so it cascades to .vgg_wrap_xj4. */
[data-vgg_container_xj4=contained]{--wrap:1040px}
/* nav_caps: uppercase primary nav labels with tracking (default 'normal' = as-is). */
[data-vgg_navcaps_xj4=upper] .vgg_nav-links_xj4 a,[data-vgg_navcaps_xj4=upper] .vgg_nav-parent_xj4,
[data-vgg_navcaps_xj4=upper] .vgg_nav-cta_xj4{--nav-track:.04em;
  text-transform:uppercase;letter-spacing:var(--nav-track);font-size:var(--ui)}
/* R23 (C1): every rendered CTA carries nav-cta--<style> (`link` is retired);
   `solid` is a filled brand button that never renders inside .vgg_nav-links_xj4. */
.vgg_nav-cta--solid_xj4{background:var(--cta,var(--primary));color:var(--cta-ink,var(--bg,#fff));border-bottom:0;
  border-radius:var(--r-btn,var(--r-full));padding:8px 16px;font-weight:600}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta--solid_xj4:hover{background:var(--cta-hover,var(--primary-hover));color:var(--cta-ink,var(--bg,#fff))}}
/* R25 (C1.2): a corner CTA is the build's PRIMARY button — the .vgg_btn_xj4 grammar,
   never an outline box, an underline stroke or bare text. Placed after every
   .vgg_nav-cta--_xj4<style> rule so it wins on equal specificity; the text-only
   decorations (highlight gradient, slide stroke, mark) are reset on the
   corner so it never carries them even transiently. The 3px link underline
   border is dropped too: it is transparent on a text link but adds 3px under
   a filled button and pushes the label off centre (operator). */
.vgg_nav-cta--corner_xj4{background:var(--cta);color:var(--cta-ink);border-bottom:0;
  border-radius:var(--r-btn);padding:11px 20px;font-weight:600;min-height:44px;
  line-height:22px}
@media (hover:hover) and (pointer:fine){.vgg_nav-cta--corner_xj4:hover{background:var(--cta-hover);color:var(--cta-ink);text-decoration:none}}
.vgg_nav-cta--corner_xj4.vgg_nav-cta--boxed_xj4{border:0}
.vgg_nav-cta--corner_xj4.vgg_nav-cta--highlight_xj4{background-image:none}
.vgg_nav-cta--corner_xj4.vgg_nav-cta--slide_xj4::after,.vgg_nav-cta--corner_xj4.vgg_nav-cta--mark_xj4::after{content:none}

/* ---- deepened variant pools (Sep 2026): footer / header / hero / CTA /
   services / intro / contact / areas structures. Theme tokens only. ---- */
/* footer_style: split — brand half | 2x2 link groups */
/* The link groups share one row (auto-fit), and a long list runs in two
   short columns: a fixed 2-up grid dropped the third group under the
   others and left a tall empty block (operator, Oct 2026). */
.vgg_footer-split_xj4{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:48px;padding:56px 0 32px}
.vgg_footer-split-brand_xj4 .vgg_footer-tagline_xj4{margin:12px 0 0;max-width:420px}
.vgg_footer-split-links_xj4{display:flex;flex-wrap:wrap;gap:28px 40px}
.vgg_footer-split-links_xj4>div{flex:1 1 130px}
.vgg_footer-split-links_xj4>div:has(li:nth-child(8)){flex:2 1 260px}
.vgg_footer-split-links_xj4>div:has(li:nth-child(8)) ul{columns:2;column-gap:28px}
.vgg_footer-split-links_xj4>div:has(li:nth-child(8)) li{break-inside:avoid}
/* footer_style: contactbar — three contact cells, one link row */
.vgg_footer-cbar--two_xj4{grid-template-columns:1.2fr 1fr}
.vgg_footer-cbar_xj4{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding:48px 0 28px;
  border-bottom:1px solid var(--n-800)}
.vgg_footer-cell_xj4 .vgg_footer-tagline_xj4{margin:10px 0 0;max-width:380px}
.vgg_footer-cell_xj4 .vgg_footer-addr_xj4,.vgg_footer-cell_xj4 .vgg_footer-email_xj4{margin-top:0}
.vgg_footer-nav--row_xj4{padding:22px 0 18px}
/* footer_style: sitemap — a grouped full-width index over the brand row */
.vgg_footer-sitemap_xj4{padding:48px 0 24px}
/* auto-fit, not repeat(4,1fr): the Explore column is empty on a site with
   no guides / tools / use cases, and a fixed 4-track grid left a quarter of
   the wrap dead on the right (the R22/A8 complaint). Same pattern as
   .vgg_footer-grid--nap_xj4. */
.vgg_footer-sitemap-groups_xj4{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 32px}
.vgg_footer-sitemap-brand_xj4{display:flex;flex-wrap:wrap;gap:8px 40px;align-items:flex-start;
  padding:22px 0 24px;border-top:1px solid var(--n-800)}
.vgg_footer-sitemap-brand_xj4 .vgg_footer-addr_xj4,.vgg_footer-sitemap-brand_xj4 .vgg_footer-email_xj4,
.vgg_footer-sitemap-brand_xj4 .vgg_footer-phone_xj4{margin:0}
/* footer_style: minimal — one row */
.vgg_footer-minimal_xj4{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px 28px;padding:30px 0 10px}
.vgg_footer-minimal-contact_xj4 .vgg_footer-email_xj4,.vgg_footer-minimal-contact_xj4 .vgg_footer-phone_xj4{margin:0;display:inline-block}
.vgg_footer-minimal-contact_xj4 .vgg_footer-phone_xj4{margin-left:18px}
/* footer_style: boxed — the columns footer in a contained rounded panel */
.vgg_footer--boxed_xj4{background:var(--bg-alt);padding:0 0 32px}
.vgg_footer--boxed_xj4>.vgg_wrap_xj4.vgg_footer-box_xj4{background:var(--band-bg);border-radius:var(--r-xl);
  padding:8px 40px 10px}
.vgg_footer--boxed_xj4 .vgg_footer-grid_xj4{padding:44px 0 28px}
@media(max-width:820px){
  .vgg_footer-split_xj4{grid-template-columns:1fr;gap:30px}
  .vgg_footer-cbar_xj4{grid-template-columns:1fr;gap:22px}
  .vgg_footer-sitemap-groups_xj4{grid-template-columns:repeat(2,1fr)}
  .vgg_footer--boxed_xj4>.vgg_wrap_xj4.vgg_footer-box_xj4{padding:8px 22px 10px;border-radius:var(--r-lg)}
}
@media(max-width:560px){.vgg_footer-sitemap-groups_xj4{grid-template-columns:1fr}}
/* header_layout: tworow — brand + contact row over a left-aligned nav row, no
   rule between the rows (operator, Oct 2026: a hairline above the links looked odd) */
/* tworow_button: the same rows (it carries .vgg_head--tworow_xj4 too), the nav row
   closing on a filled CTA button with an icon, an outline secondary to its left */
.vgg_head--tworow_button_xj4 .vgg_header-navrow_xj4 .vgg_nav-cta-cluster_xj4 .vgg_nav-cta_xj4{padding:9px 16px;margin:0}
.vgg_head--tworow_button_xj4 .vgg_header-actions_xj4 .vgg_nav-cta_xj4{display:none}
.vgg_nav-cta--solid_xj4 .vgg_nav-cta-icon_xj4{margin:0 0 0 .5em}
.vgg_nav-cta--solid_xj4 .vgg_nav-cta-icon_xj4 svg{width:16px;height:16px}
.vgg_head--tworow_xj4 .vgg_header-top_xj4{padding-bottom:8px}
.vgg_head--tworow_xj4 .vgg_header-top-contact_xj4{display:flex;gap:18px;font-size:var(--small);color:var(--muted)}
.vgg_head--tworow_xj4 .vgg_header-top-contact_xj4 a{color:var(--primary);display:inline-flex;align-items:center;min-height:44px}
.vgg_head--tworow_xj4 .vgg_header-navrow_xj4{padding-top:4px;padding-bottom:4px;display:flex;align-items:center}
.vgg_head--tworow_xj4 .vgg_mainnav_xj4{flex:1}
.vgg_head--tworow_xj4 .vgg_nav-inner_xj4{padding:0;max-width:none;margin:0;justify-content:flex-start}
.vgg_head--tworow_xj4 .vgg_nav-links_xj4 a,.vgg_head--tworow_xj4 .vgg_nav-parent_xj4{color:var(--ink);padding:10px 13px;
  border-bottom:0;white-space:nowrap}
.vgg_head--tworow_xj4 .vgg_nav-links_xj4>li>a[aria-current=page],
.vgg_head--tworow_xj4 .vgg_nav-parent_xj4.vgg_is-active_xj4{color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.vgg_head--tworow_xj4 .vgg_nav-links_xj4>li>a:hover{color:var(--primary);border-bottom:0}}
/* header_layout: pill — the links in a rounded track between brand and CTA */
.vgg_head--pill_xj4 .vgg_mainnav_xj4{flex:1;display:flex;justify-content:center}
.vgg_head--pill_xj4 .vgg_nav-inner_xj4{background:var(--bg-alt);border-radius:999px;padding:4px 8px;
  max-width:none;margin:0;gap:0}
.vgg_head--pill_xj4 .vgg_nav-links_xj4 a,.vgg_head--pill_xj4 .vgg_nav-parent_xj4{padding:8px 14px;border-bottom:0;
  color:var(--ink);border-radius:999px;white-space:nowrap}
.vgg_head--pill_xj4 .vgg_nav-links_xj4>li>a[aria-current=page],
.vgg_head--pill_xj4 .vgg_nav-parent_xj4.vgg_is-active_xj4{background:var(--surface);color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.vgg_head--pill_xj4 .vgg_nav-links_xj4>li>a:hover{background:var(--surface);color:var(--primary);border-bottom:0}}
/* tablet widths: the nav row never runs off the page. The links wrap onto a
   second line beside the CTA (which keeps its place at the right); the links
   tighten and the outline secondary steps aside first so one row holds longer. */
@media(min-width:681px){.vgg_head--tworow_xj4 .vgg_mainnav_xj4{flex:1 1 0;min-width:0}
  .vgg_head--tworow_xj4 .vgg_nav-links_xj4{flex-wrap:wrap}}
@media(min-width:681px) and (max-width:1100px){
  .vgg_head--tworow_button_xj4 .vgg_nav-cta-cluster_xj4 .vgg_nav-cta--boxed_xj4{display:none}
  .vgg_head--tworow_xj4 .vgg_nav-links_xj4 a,.vgg_head--tworow_xj4 .vgg_nav-parent_xj4{padding-left:9px;padding-right:9px}}
@media(max-width:680px){
  /* tworow collapses to ONE row on mobile: brand left, toggle right (the
     nav row must never sit alone under the brand as a bare hamburger) */
  .vgg_head--tworow_xj4{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .vgg_head--tworow_xj4 .vgg_header-top-contact_xj4{display:none}
  .vgg_head--tworow_button_xj4 .vgg_nav-cta-cluster_xj4:not(.vgg_nav-cta-cluster--menu_xj4){display:none}
  /* flex-basis 0 + min-width 0: the brand row shrinks, so the 44px menu toggle
     stays on the logo's row at 320px instead of wrapping under it */
  .vgg_head--tworow_xj4 .vgg_header-top_xj4{flex:1 1 0;min-width:0;margin:0;padding-bottom:14px}
  .vgg_head--tworow_xj4 .vgg_header-navrow_xj4{flex:0 0 auto;margin:0;padding-left:0;
    padding-top:14px;padding-bottom:14px}
  .vgg_head--pill_xj4 .vgg_nav-inner_xj4{border-radius:0;background:var(--surface);padding:8px 0 14px}
}
/* hero_variant: boxed — an inset rounded photo panel on the page background,
   with the same gap above and below it (R41: flush on the next band, the
   panel read as cut off) */
.vgg_hero--boxed_xj4{background:var(--bg) !important;background-image:none !important;
  color:var(--ink);padding:26px 0}
.vgg_hero--boxed_xj4 .vgg_hero-box_xj4{position:relative;color:#fff;border-radius:var(--r-xl);
  padding:56px 48px;overflow:hidden;background-size:cover;background-position:center;
  background-color:var(--black)}
.vgg_hero--boxed_xj4.vgg_hero--has-strip_xj4 .vgg_hero-box_xj4{padding-bottom:0}
.vgg_hero--boxed_xj4 .vgg_hero-strip_xj4{margin:34px -48px 0}
.vgg_hero--boxed_xj4 .vgg_hero-strip_xj4 .vgg_wrap_xj4{padding-left:48px;padding-right:48px}
/* hero_variant: media — light surface, copy | framed photo */
.vgg_hero--media_xj4,.vgg_hero--light_xj4{background:var(--bg-alt) !important;background-image:none !important;
  color:var(--ink)}
.vgg_hero--light_xj4{background:var(--bg) !important;border-bottom:1px solid var(--line)}
.vgg_hero--media_xj4 h1,.vgg_hero--light_xj4 h1{color:var(--ink);text-shadow:none}
.vgg_hero--media_xj4 .vgg_lead_xj4,.vgg_hero--light_xj4 .vgg_lead_xj4,.vgg_hero--media_xj4 .vgg_about-def_xj4,.vgg_hero--light_xj4 .vgg_about-def_xj4{color:var(--body);text-shadow:none}
.vgg_hero--media_xj4 .vgg_eyebrow_xj4,.vgg_hero--light_xj4 .vgg_eyebrow_xj4{color:var(--primary);text-shadow:none}
.vgg_hero--media_xj4 .vgg_hero-proof_xj4 li,.vgg_hero--light_xj4 .vgg_hero-proof_xj4 li{color:var(--ink)}
.vgg_hero--media_xj4 .vgg_hero-proof_xj4 li::before,.vgg_hero--light_xj4 .vgg_hero-proof_xj4 li::before{border-color:var(--primary)}
.vgg_hero--media_xj4 .vgg_btn--outline-light_xj4,.vgg_hero--light_xj4 .vgg_btn--outline-light_xj4{color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover) and (pointer:fine){.vgg_hero--media_xj4 .vgg_btn--outline-light_xj4:hover,.vgg_hero--light_xj4 .vgg_btn--outline-light_xj4:hover{background:var(--ink);
  color:#fff;box-shadow:inset 0 0 0 2px var(--ink)}}
.vgg_hero--media_xj4 .vgg_hero-strip_xj4,.vgg_hero--light_xj4 .vgg_hero-strip_xj4{background:var(--surface);
  border-top:1px solid var(--line)}
.vgg_hero-media-grid_xj4{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.vgg_hero-media_xj4 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--r-xl);box-shadow:var(--sh-lg)}
@media(max-width:820px){
  .vgg_hero-media-grid_xj4{grid-template-columns:1fr;gap:26px}
  .vgg_hero-media_xj4 img{aspect-ratio:16/10}
  .vgg_hero--boxed_xj4 .vgg_hero-box_xj4{padding:40px 22px}
  .vgg_hero--boxed_xj4 .vgg_hero-strip_xj4{margin:30px -22px 0}
  .vgg_hero--boxed_xj4 .vgg_hero-strip_xj4 .vgg_wrap_xj4{padding-left:22px;padding-right:22px}
}
/* cta_variant: inline — one tinted bar, copy left, button right */
.vgg_cta-inline_xj4{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vgg_cta-inline-inner_xj4{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 0}
.vgg_cta-inline_xj4 h2{margin:.2rem 0 6px}
.vgg_cta-inline_xj4 .vgg_lead_xj4{margin:0;color:var(--body);max-width:60ch}
.vgg_cta-inline-action_xj4{flex:0 0 auto}
/* G9: the in-column article CTA is a tinted panel with copy, not a bare
   button in a grey band */
.vgg_cta-inline--in_xj4{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;margin:34px 0;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md)}
.vgg_cta-inline--in_xj4 h3{margin:0 0 4px;font-size:var(--h3)}
.vgg_cta-inline--in_xj4 p{margin:0;color:var(--body)}
@media(max-width:640px){.vgg_cta-inline--in_xj4{flex-direction:column;align-items:flex-start}}
/* cta_variant: strip — one brand band, heading + button on one row */
.vgg_cta-strip_xj4{background:var(--primary);color:var(--on-primary);padding:34px 0}
.vgg_cta-strip-inner_xj4{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px 32px}
.vgg_cta-strip_xj4 h2{margin:0;color:var(--on-primary)}
/* cta_variant: columns — copy | ticks | button on the page surface */
.vgg_cta-cols_xj4{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vgg_cta-cols-inner_xj4{display:grid;grid-template-columns:1.4fr 1fr auto;gap:32px;align-items:center}
.vgg_cta-cols-inner--two_xj4{grid-template-columns:1.4fr auto}
.vgg_cta-cols-copy_xj4 .vgg_lead_xj4{margin:0;color:var(--body)}
.vgg_cta-cols-ticks_xj4{color:var(--ink)}
.vgg_cta-cols_xj4 .vgg_cta-ticks_xj4{display:block;margin:0;max-width:none;color:var(--ink)}
.vgg_cta-cols-action_xj4{align-self:center}
@media (max-width:820px){.vgg_cta-cols-inner_xj4,.vgg_cta-cols-inner--two_xj4{grid-template-columns:1fr;gap:24px}}
/* cta_variant: minimal — centred sign-off on the page bg under a hairline */
.vgg_cta-minimal_xj4{border-top:1px solid var(--line)}
.vgg_cta-minimal_xj4 .vgg_eyebrow_xj4{color:var(--primary)}
.vgg_cta-minimal_xj4 .vgg_cta-ticks_xj4{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  max-width:none;color:var(--body)}
.vgg_cta-minimal_xj4 .vgg_cta-ticks_xj4 li{padding-bottom:0}
.vgg_cta-minimal_xj4 .vgg_cta-ticks_xj4 li::before{background:var(--primary)}
/* cta_variant: dark — the near-black band with the brand button */
.vgg_cta-dark_xj4{background:var(--band-bg);color:var(--band-ink);padding:52px 0;text-align:center}
.vgg_cta-dark_xj4 h2{color:var(--band-ink)}
.vgg_cta-dark_xj4 .vgg_eyebrow_xj4{color:var(--band-muted)}
.vgg_cta-dark_xj4 .vgg_lead_xj4{color:var(--band-muted)}
.vgg_cta-dark_xj4 .vgg_cta-ticks_xj4{color:var(--band-muted)}
.vgg_cta-dark_xj4 .vgg_cta-ticks_xj4 li::before{background:var(--primary-60)}
@media(max-width:820px){.vgg_cta-inline-inner_xj4{flex-direction:column;align-items:flex-start;gap:18px;padding:30px 0}}
/* services_variant: rows — full-width ruled rows in a centred column */
.vgg_svc-rows_xj4{margin:32px auto 0}
.vgg_signs-stack_xj4{display:grid;gap:var(--grid-gap)}
/* intro_variant: panel — the prose in one tinted rounded panel */
.vgg_intro-panel_xj4{background:var(--bg-alt);border-radius:var(--r-xl);padding:40px 44px}
.vgg_intro-panel_xj4 h2{margin:.2rem 0 .6rem;max-width:26ch}
.vgg_intro-panel_xj4 .vgg_lead_xj4{margin:0;max-width:70ch}
/* contact_variant: stacked — numbered steps row above a full-width form card */
/* Count-matched columns (the promise-grid rule): 2-up, so four steps read
   2x2; three read 3-up; a fifth spans the row. No lone cell at any count. */
.vgg_contact-steps-row_xj4{list-style:none;padding:0;margin:0 0 30px;display:grid;
  grid-template-columns:1fr 1fr;gap:18px}
.vgg_contact-steps-row_xj4 li{display:flex;gap:14px;align-items:flex-start;background:var(--bg-alt);
  border-radius:var(--r-md);padding:18px 20px}
.vgg_contact-steps-row_xj4 .vgg_cs-num_xj4{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-full);
  background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:var(--head-bold)}
.vgg_contact-steps-row_xj4 p{margin:2px 0 0;color:var(--body)}
@media(min-width:821px){
  .vgg_contact-steps-row_xj4:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .vgg_contact-steps-row_xj4:has(li:nth-child(5)) li:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:820px){.vgg_contact-steps-row_xj4{grid-template-columns:1fr}}
/* areas_shape: columns (alphabetical index) + tiles (wide tiles) */
.vgg_area-cols_xj4{list-style:none;padding:0;margin:26px 0 0;columns:3;column-gap:36px}
.vgg_area-cols_xj4 li{break-inside:avoid;border-bottom:1px solid var(--line)}
.vgg_area-cols_xj4 a{display:flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.vgg_area-tiles_xj4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.vgg_area-tile_xj4{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 26px;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.vgg_area-tile_xj4:hover{text-decoration:none;border-color:var(--n-300);box-shadow:var(--shadow)}}
.vgg_area-tile_xj4 h3{margin:0}
/* a hub with only a handful of towns (<= 4) takes big two-up tiles so the
   index never reads as a thin row of chips (operator, 13th round). The name
   and its arrow are ONE row sharing a single vertical axis: the base
   .vgg_area-tile_xj4 centres both. Pinning the name to the top while the arrow
   stayed centred read as broken alignment (operator, R31). */
.vgg_area-tiles--big_xj4{gap:24px}
.vgg_area-tiles--big_xj4 .vgg_area-tile_xj4{padding:32px 32px;min-height:150px}
/* hub groups align to the top row: a shorter group must not vertically
   centre and drop its H3 below the others (operator, R27) */
.vgg_hub-groups_xj4{align-items:start}
.vgg_hub-groups_xj4 .vgg_hub-group_xj4{align-self:start}
/* A group sitting in a hub column holds its links as one stacked list: a
   3- or 4-up card grid inside a half-width cell squeezed each card below
   its words, so names spilled out of their boxes (operator, Oct 2026). The
   stacked list layout keeps a flowing grid, since its groups run full width. */
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4 .vgg_grid_xj4{grid-template-columns:1fr;max-width:none}
.vgg_hub-groups--list_xj4 .vgg_hub-group_xj4 .vgg_grid_xj4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:none}
/* Hub columns read as tidy link lists, not stacks of big cards: the groups
   share one top line (the stacked-group margin is for the list layout only),
   their headings sit left over their own column, rows of groups get room to
   breathe, and each link is a slim row (operator, Oct 2026: "a hodge podge of
   grids"). */
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4){row-gap:64px;column-gap:48px}
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4+.vgg_hub-group_xj4{margin-top:0}
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4 .vgg_center_xj4{text-align:left;margin-left:0}
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4>.vgg_lead_xj4{min-height:3.2em;margin-bottom:14px}
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4 .vgg_grid_xj4{gap:0;border-top:1px solid var(--line)}
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4 .vgg_card--link_xj4{padding:13px 4px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;background:none;min-height:0}
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4 .vgg_contact-email_xj4:first-of-type{margin-top:14px}
.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4 .vgg_reassure_xj4{margin-top:12px;color:var(--muted);font-size:var(--small)}
@media(max-width:820px){.vgg_hub-groups_xj4:not(.vgg_hub-groups--list_xj4) .vgg_hub-group_xj4>.vgg_lead_xj4{min-height:0}}
/* a town page's smaller nearby places: plain names, no page, so no link */
.vgg_area-cols--plain_xj4 span{display:flex;align-items:center;min-height:44px;color:var(--body)}
.vgg_area-mentions-label_xj4{margin:26px 0 0;font-weight:600;color:var(--ink)}
.vgg_area-mentions-label_xj4+.vgg_pills_xj4{margin-top:12px}
.vgg_area-mentions-label_xj4+.vgg_area-cols_xj4{margin-top:8px}
.vgg_area-mentions_xj4{margin:22px 0 0;color:var(--body)}
@media(max-width:820px){.vgg_area-cols_xj4{columns:2}.vgg_area-tiles_xj4{grid-template-columns:1fr}}
@media(max-width:560px){.vgg_area-cols_xj4{columns:1}}

/* cards */
.vgg_grid_xj4{display:grid;gap:var(--grid-gap)}
.vgg_grid_xj4 > .vgg_card_xj4{min-width:0}
.vgg_grid--single_xj4{max-width:420px;margin-left:auto;margin-right:auto}
.vgg_grid-2_xj4{grid-template-columns:repeat(2,1fr)}
.vgg_grid-3_xj4{grid-template-columns:repeat(3,1fr)}
.vgg_grid-4_xj4{grid-template-columns:repeat(4,1fr)}
/* count-matched grids: 4 items read better as 2x2 than a 3+1 orphan row */
.vgg_grid-2x2_xj4{grid-template-columns:repeat(2,1fr);max-width:860px;margin-left:auto;margin-right:auto}
/* A4: a capped container under a LEFT head hugs the left edge of the wrap;
   under a centred head it stays centred (one width + one alignment per block) */
/* B3 (R23): EVERY capped / auto-centred container hugs the left edge under a
   left head — not just the 2x2 grid and the mw-* measures. */
section[data-vgg_align_xj4=left] .vgg_grid-2x2_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_grid--single_xj4,section[data-vgg_align_xj4=left] .vgg_mw-720_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_mw-760_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_mw-880_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_mw-640_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_grid-2_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_grid-3_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_grid-4_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_svc-rows_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_svc-list_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_signs-split_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_signs-num_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_signs-cols_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_steps_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_steps--timeline_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_steps--cards_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_steps--diagram_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_steps--chevrons_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_ticks-cols_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_facts-table_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_promise-grid_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_feature-row_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_feature-stack_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_bento-grid_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_benefits-panel_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_card--centered_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_faq_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_feature-card_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_feature-text_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_hub-compact_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_signs-causes_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_steps--alternate_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_svc-centered_xj4:not(.vgg_wrap_xj4),
section[data-vgg_align_xj4=left] .vgg_toolcard_xj4:not(.vgg_wrap_xj4),section[data-vgg_align_xj4=left] .vgg_trust--3_xj4:not(.vgg_wrap_xj4){margin-left:0}
/* One left edge per page (operator, Oct 2026): a section whose wrap is
   itself capped (.vgg_wrap_xj4.vgg_mw-760_xj4) used to centre that narrow column, so under
   a left head its text started 220px right of the full-width sections around
   it and the page zig-zagged between narrow and wide. Under a left head the
   wrap keeps the page's width and only its content takes the measure. */
section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-640_xj4,section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-720_xj4,
section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-760_xj4,section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-880_xj4{max-width:var(--wrap)}
section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-640_xj4 > *,section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-720_xj4 > *,
section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-760_xj4 > *,section[data-vgg_align_xj4=left] > .vgg_wrap_xj4.vgg_mw-880_xj4 > *{max-width:var(--measure);margin-left:0}
/* A8 (R27): a card grid under a left head spans the wrap; the 860px cap
   is only for centred heads */
section[data-vgg_align_xj4=left] .vgg_grid-2x2_xj4:not(.vgg_wrap_xj4){max-width:none}
/* A5: under a centred head a capped two-column list container is centred
   as a block; its text stays left inside (left sections keep hugging left) */
section[data-vgg_align_xj4=center] .vgg_ticks-cols_xj4,section[data-vgg_align_xj4=center] .vgg_grid-2x2_xj4{max-width:var(--measure-wide);margin-left:auto;margin-right:auto}
/* grid-2 closing card of an odd method count spans the row (no orphan cell) */
.vgg_grid-2_xj4 .vgg_card--wide_xj4{grid-column:1/-1}
/* promise list: an icon + text row grid (distinct from bordered cards, so it can
   sit next to a card grid without the page reading as two identical blocks) */
.vgg_promise-grid_xj4{list-style:none;padding:0;margin:30px auto 0;max-width:880px;
  display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;text-align:left}
/* three items: three even columns (a 2+1 split reads lopsided). 5+ items:
   2x2 + full-width tail (the last odd item spans both columns) — a lone
   orphan cell in the bottom-right is exactly the AI-template tell the
   visual QA gate flags. Desktop only — mobile collapses to one column. */
@media(min-width:821px){
  .vgg_promise-grid_xj4:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .vgg_promise-grid_xj4:has(li:nth-child(5)) li:last-child:nth-child(odd){grid-column:1/-1}
}
/* single-line items: icon + text centre-aligned (flex-start made short labels
   float at the top of the row next to the icon); multi-line wraps still read fine */
.vgg_promise-grid_xj4 li{display:flex;gap:15px;align-items:center}
.vgg_promise-grid_xj4 .vgg_p-ico_xj4{flex:0 0 auto;width:42px;height:42px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;background:var(--primary-90);color:var(--primary)}
.vgg_promise-grid_xj4 .vgg_p-ico_xj4 svg{width:22px;height:22px}
.vgg_promise-grid_xj4 h3{margin:2px 0 .25rem;}
.vgg_promise-grid_xj4 p{margin:0;color:var(--body)}
@media(max-width:640px){.vgg_promise-grid_xj4{grid-template-columns:1fr}}
/* location fact grid: replaces the plain two-column facts table */
/* fact cards: column count comes from the item count via the count-matched
   grid classes (see _grid_cls) — auto-fit produced ragged 4+2 rows on six
   facts. Odd tails span the full width so no row is left half-empty.
   NOTE: no grid-template-columns here (the .vgg_grid_xj4/.vgg_grid-2_xj4/... classes own the
   columns; a later rule would silently override them at every width). */
/* Fact-card grid (codified): the shared count-matched grid container behind
   the 'stats' facts_layout presentation. Layout rule is server-side and
   explicit: bento-3 (n%3==0, 3 cols), bento-2x2 (n==4), bento-2 otherwise,
   with the odd tail spanning the full width — never a ragged row. (The
   labelled fact-card 'bento'/'cards' presentation that used to share this
   grid is retired: known AI-design tell, operator, Sep 2026.) */
.vgg_bento-grid_xj4{display:grid;gap:16px;margin:22px 0 0}
/* 'stats' presentation: infographic stat cards — a big key figure or phrase
   per fact (authored t['fact_stats'][key] wins; otherwise derived from the
   value's leading phrase), label, icon, and the sentence as support text */
.vgg_stat-card_xj4{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;display:flex;flex-direction:column}
.vgg_stat-ico_xj4{color:var(--primary);width:22px;height:22px;margin-bottom:10px}
.vgg_stat-ico_xj4 svg{width:22px;height:22px}
.vgg_stat-big_xj4{font-family:var(--font-head);font-size:var(--display);font-weight:var(--head-bold);
  color:var(--ink);line-height:1.12}
.vgg_stat-label_xj4{font-size:var(--meta);text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;margin-top:4px}
.vgg_stat-note_xj4{font-size:var(--small);color:var(--body);line-height:1.45;margin-top:8px}
/* pinned stat-card column counts (LOCATION_DATA['stat_cols']) */
.vgg_stat-cols-2_xj4{grid-template-columns:repeat(2,1fr)}
.vgg_stat-cols-4_xj4{grid-template-columns:repeat(4,1fr)}
.vgg_stat-cols-6_xj4{grid-template-columns:repeat(6,1fr)}
@media(max-width:1020px){.vgg_stat-cols-4_xj4,.vgg_stat-cols-6_xj4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.vgg_stat-cols-2_xj4,.vgg_stat-cols-4_xj4,.vgg_stat-cols-6_xj4{grid-template-columns:1fr}}
/* optional CTA pair under the facts */
.vgg_loc-cta_xj4{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:18px}
/* 'split' presentation: the first fact as a hero card, the rest as a
   two-column mini list beside it */
.vgg_loc-split_xj4{display:grid;grid-template-columns:1.1fr 1.9fr;gap:16px;align-items:stretch}
.vgg_loc-hero_xj4{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px 24px;display:flex;
  flex-direction:column;align-items:flex-start}
.vgg_loc-hero_xj4 .vgg_stat-label_xj4{margin-top:6px}
.vgg_loc-hero_xj4 .vgg_stat-note_xj4{margin:8px 0 0}
.vgg_loc-hero_xj4 .vgg_stat-what_xj4{display:block;margin-top:6px;color:var(--muted)}
.vgg_loc-minis_xj4{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 26px;align-content:start}
.vgg_loc-mini_xj4{padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--small);color:var(--body)}
.vgg_loc-mini_xj4 strong{color:var(--ink)}
@media(max-width:820px){.vgg_loc-split_xj4{grid-template-columns:1fr}
  .vgg_loc-minis_xj4{grid-template-columns:1fr}}
/* 'rail' presentation: numbered facts, two columns, big muted numerals.
   The numerals take the muted text colour at full strength: a faded brand
   colour fails the a11y contrast check on a light brand. */
.vgg_loc-rail_xj4{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:2px 52px}
.vgg_loc-rail_xj4 li{display:flex;gap:16px;padding:13px 0;
  color:var(--body)}
.vgg_rail-num_xj4{font-family:var(--font-head);font-size:var(--display);font-weight:var(--head-bold);
  color:var(--muted);line-height:1.15;min-width:2ch}
@media(max-width:820px){.vgg_loc-rail_xj4{grid-template-columns:1fr}}
/* 'spec' presentation: compact spec sheet — label, dotted leader, value in a
   fixed right column so values share one right edge; the sentence remainder
   wraps as a muted line under the value (never inline after the leader,
   which read as ragged noise) */
.vgg_spec-row_xj4{display:grid;grid-template-columns:auto 1fr minmax(280px,42%);
  gap:12px;align-items:baseline;padding:9px 0}
.vgg_spec-label_xj4{font-weight:600;color:var(--ink);font-size:var(--small);white-space:nowrap}
.vgg_spec-dots_xj4{border-bottom:1px dotted var(--muted);transform:translateY(-4px)}
.vgg_spec-val_xj4{color:var(--body);font-size:var(--small);text-align:right}
.vgg_spec-val_xj4 strong{color:var(--ink)}
.vgg_spec-rest_xj4{display:block;color:var(--muted)}
@media(max-width:640px){.vgg_spec-row_xj4{grid-template-columns:auto 1fr}
  .vgg_spec-dots_xj4{display:none}
  .vgg_spec-val_xj4{text-align:left}}
.vgg_bento-3_xj4{grid-template-columns:repeat(3,1fr)}
.vgg_bento-2x2_xj4,.vgg_bento-2_xj4{grid-template-columns:repeat(2,1fr)}
.vgg_bento-grid_xj4 > :last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:820px){.vgg_bento-3_xj4,.vgg_bento-2x2_xj4,.vgg_bento-2_xj4{grid-template-columns:1fr}}
/* gallery: real photos with captions */
/* columns follow the photo count (_gallery_cls, the _grid_cls rule), so no
   photo sits alone on the last row; at two columns an odd last photo spans */
.vgg_gallery_xj4{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:8px 0 0}
.vgg_gallery_xj4>figure:only-child{grid-column:1/-1}
.vgg_gallery_xj4.vgg_grid-3_xj4,.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4.vgg_grid-3_xj4{grid-template-columns:repeat(3,1fr)}
.vgg_gallery_xj4.vgg_grid-4_xj4,.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4.vgg_grid-4_xj4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.vgg_gallery_xj4>figure:last-child:nth-child(odd){grid-column:1/-1}
  .vgg_gallery_xj4.vgg_grid-3_xj4,.vgg_gallery_xj4.vgg_grid-4_xj4,.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4.vgg_grid-3_xj4,
  .vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4.vgg_grid-4_xj4{grid-template-columns:repeat(2,1fr)}}
.vgg_gallery_xj4 figure{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.vgg_gallery_xj4 img{width:100%;height:280px;object-fit:cover;display:block;background:var(--bg-alt)}
.vgg_gallery_xj4 figcaption{padding:14px 16px}
.vgg_gallery_xj4 figcaption p{margin:0;color:var(--body)}
p.vgg_note_xj4{color:var(--muted);font-size:var(--small)}
@media(max-width:640px){.vgg_gallery_xj4,.vgg_gallery_xj4.vgg_grid-3_xj4,.vgg_gallery_xj4.vgg_grid-4_xj4{grid-template-columns:1fr}.vgg_gallery_xj4 img{height:230px}}
/* Curated wizard media pool: the home photo band. */
.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4{display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;margin:8px 0 0}
@media(max-width:900px){.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4>figure:last-child:nth-child(odd){grid-column:1/-1}}
.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4 figure{margin:0}
.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4 img{width:100%;height:220px;object-fit:cover;display:block;
  border-radius:var(--r-md);background:var(--bg-alt)}
@media(max-width:640px){.vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4{grid-template-columns:repeat(2,1fr)}
  .vgg_pool-gallery_xj4 .vgg_gallery-grid_xj4 img{height:150px}}
.vgg_card_xj4{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px;transition:border-color var(--transition) ease,box-shadow var(--transition) ease,
  transform var(--transition) ease}
/* A card that holds a link shows a hover; a plain card stays still (a hover on
   something that cannot be clicked suggests it can). */
@media (hover:hover) and (pointer:fine){a.vgg_card_xj4:hover,.vgg_card_xj4:has(a):hover{text-decoration:none;border-color:var(--n-300);box-shadow:var(--shadow)}}
.vgg_card_xj4 h3{margin-bottom:.35rem;color:var(--black)}
.vgg_card_xj4 p{color:var(--body);margin-bottom:.5rem}
.vgg_card_xj4 .vgg_fin-suits_xj4{font-weight:600;color:var(--black)}
.vgg_card_xj4 > :last-child{margin-bottom:0}
.vgg_card_xj4 .vgg_more_xj4{color:var(--primary);font-weight:500}
/* A photo at the top of a card: every card in a grid crops to one shape, so a
   row of cards never shows photos of different heights (operator). A wide
   (spanning) card keeps the same height with a wider crop. */
.vgg_card_xj4 > img,.vgg_card_xj4 > picture{display:block;width:100%;margin:0 0 16px}
.vgg_card_xj4 > img,.vgg_card_xj4 > picture img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-sm);background:var(--bg-alt)}
.vgg_grid-2_xj4 .vgg_card--wide_xj4 > img,.vgg_grid-2_xj4 .vgg_card--wide_xj4 > picture img{aspect-ratio:3/1}
@media(max-width:820px){.vgg_grid-2_xj4 .vgg_card--wide_xj4 > img,.vgg_grid-2_xj4 .vgg_card--wide_xj4 > picture img{aspect-ratio:3/2}}
/* services_variant: centered = centred icon cells, no card chrome (ref: alignui). */
.vgg_svc-centered_xj4 .vgg_card--centered_xj4{background:transparent;border:0;padding:20px 18px;
  text-align:center;display:flex;flex-direction:column;align-items:center}
@media (hover:hover) and (pointer:fine){.vgg_svc-centered_xj4 .vgg_card--centered_xj4:hover{box-shadow:none;border:0}
.vgg_svc-centered_xj4 a.vgg_card--centered_xj4:hover,.vgg_svc-centered_xj4 .vgg_card--centered_xj4:has(a):hover{transform:translateY(-2px)}}
.vgg_svc-centered_xj4 .vgg_card--centered_xj4 .vgg_icon_xj4{margin-left:auto;margin-right:auto}
.vgg_svc-centered_xj4 .vgg_card--centered_xj4 p{margin-left:auto;margin-right:auto;max-width:34ch}
/* services_variant: list = two-column index (heading + lead | scannable rows), so the
   rows sit in a sensible column with context beside them, not a bare full-width list.
   The copy sits at the top of the list: centred beside a tall list it floated. */
.vgg_svc-index_xj4{display:grid;grid-template-columns:0.82fr 1.18fr;gap:48px;align-items:start;
  margin-top:12px}
.vgg_svc-index-copy_xj4 h2{margin:.2rem 0 .7rem}
.vgg_svc-index-copy_xj4 .vgg_lead_xj4{margin:0}
.vgg_svc-list_xj4{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.vgg_svc-row_xj4{display:flex;align-items:center;gap:18px;padding:22px 24px;
  border-bottom:1px solid var(--line);color:var(--body)}
@media (hover:hover) and (pointer:fine){.vgg_svc-row_xj4:hover{text-decoration:none;background:var(--bg-alt)}}
/* a closing "… →" link at the bottom of a block gets its own breathing room:
   it used to sit tight under the list / prose it closes (operator: poor padding) */
.vgg_section_xj4 p:has(> a.vgg_more_xj4:only-child),.vgg_prose_xj4 p:has(> a.vgg_more_xj4:only-child),
.vgg_callout_xj4 p:has(> a.vgg_more_xj4:only-child){margin:26px 0 4px}
.vgg_svc-row_xj4 .vgg_icon_xj4{margin:0;flex:0 0 auto}
.vgg_svc-row-photo_xj4{width:96px;flex:0 0 auto}
.vgg_svc-row-photo_xj4 img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
@media(max-width:680px){.vgg_svc-row-photo_xj4{width:64px}}
.vgg_svc-row-main_xj4{flex:1;min-width:0}
.vgg_svc-row-main_xj4 h3{margin:0;color:var(--black)}
.vgg_svc-row-main_xj4 p{margin:2px 0 0;color:var(--body)}
.vgg_svc-row_xj4 .vgg_more_xj4{margin-left:auto;color:var(--primary);font-weight:500;
  flex:0 0 auto}
@media (hover:hover) and (pointer:fine){[data-vgg_glyph_xj4=none] .vgg_more_xj4:hover{text-decoration:underline}}
/* Closing-link grammar (rule 39): the glyph rides in its own span, vertically
   centred by inline-flex; the anchor text stays at the UI size, never --glyph. */
.vgg_more_xj4{display:inline-flex;align-items:center;gap:.35em;font-weight:500;font-size:var(--ui)}
.vgg_more_xj4 .vgg_glyph_xj4{line-height:1;font-size:var(--glyph,1.2rem);display:inline-block}
@media(max-width:820px){.vgg_svc-index_xj4{grid-template-columns:1fr;gap:22px}}
/* faq_variant: aside = heading + prompt beside the accordion. */
.vgg_faq-aside_xj4{display:grid;grid-template-columns:0.8fr 1.2fr;gap:48px;align-items:start;margin-top:8px}
.vgg_faq-aside-copy_xj4 h2{margin:.2rem 0 .7rem}
.vgg_faq-aside-copy_xj4 .vgg_lead_xj4{margin:0}
/* signs_variant: split = prominent checklist + tinted causes panel. */
.vgg_signs-split_xj4{display:grid;grid-template-columns:1.25fr 0.75fr;gap:26px;align-items:start}
.vgg_card--tint_xj4{background:var(--bg-alt);border-color:transparent}
@media(max-width:820px){.vgg_faq-aside_xj4{grid-template-columns:1fr;gap:22px}
  .vgg_signs-split_xj4{grid-template-columns:1fr}}
/* signs_variant: numbered — an editorial numbered checklist (no cards), the
   causes demoted to a slim tinted footnote panel with a two-column tick list */
.vgg_signs-num_xj4{list-style:none;margin:26px auto 0;padding:0;max-width:880px}
.vgg_signs-num_xj4 li{display:flex;gap:18px;align-items:baseline;padding:14px 2px;
  border-bottom:1px solid var(--line)}
.vgg_signs-num_xj4 li:last-child{border-bottom:0}
.vgg_signs-num_xj4 .vgg_sn_xj4{font-family:var(--font-head);font-weight:var(--head-bold);color:var(--primary);
  font-size:var(--lead);min-width:36px;font-variant-numeric:tabular-nums}
.vgg_signs-num_xj4 li p{margin:0}
.vgg_signs-causes_xj4{max-width:880px;margin:26px auto 0;background:var(--bg-alt);
  border-radius:var(--r-xl);padding:26px 28px}
.vgg_signs-causes_xj4 h3{margin-top:0}
.vgg_signs-causes_xj4 p{margin-bottom:.9rem}
/* J: the engine's balanced two-list grid. CSS multi-column fills by height and
   leaves one column heavy, so the renderer splits the items explicitly. */
.vgg_ticks-cols_xj4{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;max-width:var(--measure-wide)}
@media(max-width:680px){.vgg_ticks-cols_xj4{grid-template-columns:1fr}}
/* signs_variant: columns — two plain lists split by a vertical rule; no card
   chrome at all, so the section reads editorial rather than boxed */
.vgg_signs-cols_xj4{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;align-items:start}
.vgg_signs-cols_xj4>div:first-child{border-right:1px solid var(--line);padding-right:52px}
.vgg_signs-cols_xj4 h3{margin-top:0}
@media(max-width:820px){.vgg_signs-cols_xj4{grid-template-columns:1fr}
  .vgg_signs-cols_xj4>div:first-child{border-right:0;padding-right:0;padding-bottom:18px;
    border-bottom:1px solid var(--line);margin-bottom:18px}}
/* signs_variant: problem_solution — the problems as a bullet list in a card,
   the solutions as a tick list on a tinted card beside it */
.vgg_ps-grid_xj4{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.vgg_ps-col_xj4{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.vgg_ps-col_xj4 h3{margin-top:0}
.vgg_ps-solution_xj4{background:var(--bg-alt)}
.vgg_ps-list_xj4{margin:0;padding-left:1.2em}
.vgg_ps-list_xj4 li{padding:0 0 .6rem}
@media(max-width:820px){.vgg_ps-grid_xj4{grid-template-columns:1fr}}
/* services_variant: photo — the service's photo leads the card, with a
   two-digit number on a surface chip in its corner */
.vgg_card--photo_xj4{padding:0;overflow:hidden}
.vgg_card--photo_xj4>:not(.vgg_svc-photo_xj4){margin-left:22px;margin-right:22px}
.vgg_card_xj4.vgg_card--photo_xj4>.vgg_more_xj4{display:inline-flex;margin-bottom:22px}
.vgg_svc-photo_xj4{position:relative;margin:0 0 16px}
.vgg_svc-photo_xj4 img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--bg-alt)}
.vgg_svc-num_xj4{position:absolute;left:14px;top:14px;min-width:40px;padding:4px 10px;
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);text-align:center;
  font-family:var(--font-head);font-weight:var(--head-bold);font-variant-numeric:tabular-nums}
/* the service comparison's recommended option: a text badge, never colour alone */
.vgg_cmp-badge_xj4{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--r-full);
  background:var(--primary);color:var(--on-primary);font-size:var(--meta);font-weight:600;
  vertical-align:middle}
/* svc_uses block: six structural archetypes over the same authored `uses`
   data. Icons are decorative chips drawn in currentColor (icon_style themed). */
.vgg_uses-split_xj4{display:flex;flex-direction:column;gap:34px;margin-top:28px}
.vgg_uses-row_xj4{display:flex;gap:28px;align-items:center}
.vgg_uses-row--rev_xj4{flex-direction:row-reverse}
.vgg_uses-row--rev_xj4 .vgg_uses-copy_xj4{text-align:right}
.vgg_uses-row_xj4 .vgg_uses-media_xj4 .vgg_icon_xj4{width:58px;height:58px}
.vgg_uses-row_xj4 .vgg_uses-media_xj4 .vgg_icon_xj4 svg{width:28px;height:28px}
.vgg_uses-copy_xj4 h3{margin:0 0 6px;color:var(--black)}
.vgg_uses-copy_xj4 p{margin:0;color:var(--body)}
@media(max-width:640px){.vgg_uses-row_xj4,.vgg_uses-row--rev_xj4{flex-direction:column;align-items:flex-start;gap:12px}
  .vgg_uses-row--rev_xj4 .vgg_uses-copy_xj4{text-align:left}}
.vgg_uses-ledger_xj4{list-style:none;margin:0;padding:0}
.vgg_uses-ledger_xj4 li{display:flex;gap:16px;align-items:flex-start;padding:14px 2px;
  border-bottom:1px solid var(--line)}
.vgg_uses-ledger_xj4 li:last-child{border-bottom:0}
.vgg_uses-ledger_xj4 .vgg_icon_xj4{flex:0 0 auto;width:40px;height:40px}
.vgg_uses-ledger_xj4 .vgg_icon_xj4 svg{width:20px;height:20px}
.vgg_uses-ledger_xj4 h3{margin:0 0 4px;color:var(--black)}
.vgg_uses-ledger_xj4 p{margin:0;color:var(--body)}
.vgg_uses-num_xj4{list-style:none;margin:26px 0 0;padding:0}
.vgg_uses-num_xj4 li{display:grid;grid-template-columns:2.2rem 1fr;gap:18px;align-items:baseline;padding:14px 2px;
  border-bottom:1px solid var(--line)}
.vgg_uses-num_xj4 li:last-child{border-bottom:0}
.vgg_uses-num_xj4 .vgg_sn_xj4{font-family:var(--font-head);font-weight:var(--head-bold);color:var(--primary);
  font-size:var(--lead);min-width:36px;font-variant-numeric:tabular-nums}
.vgg_uses-num_xj4 h3{margin:0 0 4px;color:var(--black)}
.vgg_uses-num_xj4 p{margin:0;color:var(--body)}
.vgg_uses-acc_xj4{margin-top:26px}
.vgg_uses-links_xj4{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.vgg_uses-links_xj4 p{margin:0 0 10px;font-weight:700;color:var(--black)}
.vgg_uses-links_xj4 .vgg_pills_xj4{justify-content:flex-start;margin:0}
/* optional block: sticky_cta — mobile-only fixed quote/call bar. */
.vgg_sticky-cta_xj4{display:none}
@media(max-width:680px){
  .vgg_sticky-cta_xj4{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;
    padding:10px 14px;background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(0,0,0,.12)}
  .vgg_sticky-cta-btn_xj4{flex:1;text-align:center}
  .vgg_sticky-cta-call_xj4{flex:0 0 auto;display:flex;align-items:center;padding:11px 16px;
    border:2px solid var(--cta);color:var(--cta);border-radius:var(--r-btn);font-weight:700}
  body{padding-bottom:64px}
  /* the open phone menu carries its own CTA; hide the bar so it never covers it */
  html.vgg_menu-open_xj4 .vgg_sticky-cta_xj4{display:none}
}
/* optional block: author_box byline (sits in the resource hero, on dark). */
.vgg_byline_xj4{color:rgba(255,255,255,.72);font-size:var(--small);margin:.6rem 0 0;font-weight:600}
/* optional block: legal toc_jump (in prose, on light). */
.vgg_toc-jump_xj4{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 20px;margin:0 0 1.8rem}
.vgg_toc-jump-h_xj4{margin:0 0 .5rem;font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--meta);
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.vgg_toc-jump_xj4 ul{margin:0;padding-left:1.1em}
.vgg_toc-jump--cols_xj4 ul{columns:2;column-gap:24px}   /* toc_jump depth L2 */
.vgg_toc-jump_xj4 li{margin-bottom:.35rem}
/* expert_quote depth L2: a bordered "in short" box vs the plain L1 callout. */
.vgg_callout--quote_xj4{background:var(--accent-soft)}
.vgg_callout--quote_xj4 > p:first-of-type{font-size:var(--lead);font-weight:600}
.vgg_pullquote_xj4{margin:30px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vgg_pullquote_xj4 blockquote{margin:0;font-size:var(--lead);font-weight:500}
.vgg_pullquote_xj4 figcaption{margin-top:8px;font-size:var(--small);color:var(--muted)}
.vgg_lede_xj4{font-size:var(--lead);color:var(--muted)}
.vgg_icon_xj4{width:46px;height:46px;border-radius:var(--r-md);background:var(--primary-90);
  color:var(--primary);border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.vgg_icon_xj4 svg{width:24px;height:24px}
/* icon-style variants (icons draw in currentColor) */
[data-vgg_icons_xj4=solid] .vgg_icon_xj4{background:var(--primary);color:#fff}
[data-vgg_icons_xj4=line] .vgg_icon_xj4{background:transparent;border-color:var(--primary);color:var(--primary)}
/* subtle section motif (footprint variance); only on alt sections, low contrast */
/* B2 (R23): texture never sits directly behind prose — a text-only alt band
   keeps its tint but drops the pattern. */
.vgg_section--alt_xj4.vgg_section--flat_xj4{background-image:none}

/* About-page signature sign-off (script font, optional) */
.vgg_signature_xj4{font-family:"Caveat",cursive;font-size:var(--display);line-height:1;color:var(--primary);
  margin:30px 0 0}
.vgg_signature-img_xj4{height:56px;width:auto;margin:30px auto 0;display:block}

.vgg_signature_xj4{font-family:var(--font-head);font-size:var(--display);color:var(--primary);margin-top:26px}

/* benefits_variant: panel = the benefits copy in one tinted panel;
   centered = narrow centred prose */
.vgg_benefits-panel_xj4{background:var(--bg-alt);border-radius:var(--r-xl);padding:34px 38px}
.vgg_benefits-panel_xj4 .vgg_prose_xj4 p{max-width:70ch;margin-left:auto;margin-right:auto}
.vgg_benefits-panel_xj4 h2{margin-top:0}
/* promises_variant: cards = bordered card grid; numbered reuses the
   signs `numbered` grammar (ol.vgg_signs-num_xj4) but must cancel the centred wrap */
.vgg_promise-grid--cards_xj4{max-width:980px}
.vgg_promise-grid--cards_xj4 li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px 22px;align-items:flex-start}
.vgg_promise-num_xj4{text-align:left}
.vgg_promise-num_xj4 li div{text-align:left}
.vgg_promise-num_xj4 li div h3{margin:.1rem 0 .3rem}

/* lists */
.vgg_ticks_xj4{list-style:none;padding-left:0;margin:0}
.vgg_ticks_xj4 li{position:relative;padding:0 0 .6rem 30px}
.vgg_ticks_xj4 li::before{content:"";position:absolute;left:0;top:.4em;width:12px;height:12px;
  border-radius:50%;background:var(--primary)}
/* ticks--cols: the same ticks in two columns (long tick lists in a single
   column read as a wall); collapses to one column on narrow screens */
.vgg_ticks--cols_xj4{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
@media(max-width:700px){.vgg_ticks--cols_xj4{grid-template-columns:1fr}}
.vgg_steps_xj4{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:18px}
.vgg_steps_xj4 li{position:relative;padding-left:56px;counter-increment:s}
.vgg_steps_xj4 li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;
  background:var(--accent);color:var(--accent-ink);border-radius:var(--r-full);display:flex;
  align-items:center;justify-content:center;font-family:var(--font-head);font-weight:var(--head-bold)}
.vgg_steps_xj4 li h3{margin:0 0 .3rem;min-height:38px;display:flex;align-items:center}
/* process-page layout variants (a per-site footprint knob) */
.vgg_steps--timeline_xj4{position:relative}
.vgg_steps--timeline_xj4::before{content:"";position:absolute;left:18px;top:10px;bottom:10px;
  width:2px;background:var(--line);z-index:0}
.vgg_steps--timeline_xj4 li{padding-bottom:6px}
.vgg_steps--timeline_xj4 li::before{z-index:1;box-shadow:0 0 0 4px var(--bg)}
.vgg_steps--cards_xj4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.vgg_steps--cards_xj4 li{padding:24px 20px 20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow)}
.vgg_steps--cards_xj4 li::before{position:static;margin-bottom:14px}
.vgg_steps--cards_xj4 li h3{min-height:auto;display:block}
/* process_layout=alternate: steps zig-zag either side of a centre line, the
   number node sitting on the line at each item's inner edge; one column on
   phones (the line moves to 18px like the timeline). */
.vgg_steps--alternate_xj4{display:block;position:relative;list-style:none;padding:0}
.vgg_steps--alternate_xj4::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;
  width:2px;margin-left:-1px;background:var(--line);z-index:0}
.vgg_steps--alternate_xj4 li{width:calc(50% - 32px);position:relative;padding:26px 0}
.vgg_steps--alternate_xj4 .vgg_steps-l_xj4{margin-right:auto;padding-right:76px}
.vgg_steps--alternate_xj4 .vgg_steps-r_xj4{margin-left:auto;padding-left:76px}
.vgg_steps--alternate_xj4 li::before{top:26px}
.vgg_steps--alternate_xj4 .vgg_steps-l_xj4::before{left:auto;right:-51px}
.vgg_steps--alternate_xj4 .vgg_steps-r_xj4::before{left:-51px}
@media(max-width:700px){.vgg_steps--alternate_xj4::before{left:18px;margin-left:0}
  .vgg_steps--alternate_xj4 li{width:auto;padding:22px 0 22px 56px}
  .vgg_steps--alternate_xj4 li::before{top:22px}
  .vgg_steps--alternate_xj4 .vgg_steps-l_xj4{margin-right:0;padding-right:0}
  .vgg_steps--alternate_xj4 .vgg_steps-l_xj4::before{right:auto;left:0}
  .vgg_steps--alternate_xj4 .vgg_steps-r_xj4{margin-left:0;padding-left:56px}
  .vgg_steps--alternate_xj4 .vgg_steps-r_xj4::before{left:0}}
/* process_layout=diagram: a horizontal flow — numbered nodes joined by a
   connector, the title and body under each node; stacks vertically on
   phones. The connector draws in on load (off under reduced motion). */
.vgg_steps--diagram_xj4{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px;position:relative;margin-top:8px}
.vgg_widget-note_xj4{border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;background:var(--bg-alt)}
.vgg_widget-note_xj4 h3{margin:0 0 .6rem}
.vgg_widget-note_xj4 ul{margin:0;padding-left:1.1em}
.vgg_steps--diagram_xj4 li{padding:0;text-align:center;position:relative}
.vgg_steps--diagram_xj4 li::before{position:static;display:flex;margin:0 auto 16px;width:44px;height:44px;
  font-size:var(--lead);position:relative;z-index:1}
.vgg_steps--diagram_xj4 li:not(:last-child)::after{content:"";position:absolute;top:21px;left:calc(50% + 30px);
  width:calc(100% - 40px);height:2px;background:var(--line);transform-origin:left;
  animation:flowline .7s ease-out both}
.vgg_steps--diagram_xj4 li:nth-child(2)::after{animation-delay:.15s}
.vgg_steps--diagram_xj4 li:nth-child(3)::after{animation-delay:.3s}
.vgg_steps--diagram_xj4 li:nth-child(4)::after{animation-delay:.45s}
.vgg_steps--diagram_xj4 li:nth-child(5)::after{animation-delay:.6s}
.vgg_steps--diagram_xj4 li:nth-child(6)::after{animation-delay:.75s}
.vgg_steps--diagram_xj4 li h3{min-height:auto;display:block;margin-bottom:.4rem}
.vgg_steps--diagram_xj4 li p{margin:0}
@keyframes flowline{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.vgg_steps--diagram_xj4 li::after{animation:none}}
/* process_layout=chevrons: an arrow strip of numbered titles, the body under
   each — the classic "how it works" ribbon */
.vgg_steps--chevrons_xj4{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.vgg_steps--chevrons_xj4 li{padding:0}
.vgg_steps--chevrons_xj4 li::before{position:static;display:inline-flex;width:30px;height:30px;font-size:var(--small);
  margin-right:10px;vertical-align:middle;background:var(--surface);color:var(--ink)}
.vgg_steps--chevrons_xj4 li h3{min-height:64px;display:flex;align-items:center;margin:0;padding:12px 18px 12px 26px;
  background:var(--bg-alt);color:var(--ink);font-size:var(--small);line-height:1.3;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.vgg_steps--chevrons_xj4 li:first-child h3{padding-left:22px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.vgg_steps--chevrons_xj4 li p{margin:14px 6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vgg_avatar_xj4{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block}
.vgg_avatar--svg_xj4 svg{width:56px;height:56px;display:block}
.vgg_card--team_xj4{display:flex;gap:16px;align-items:flex-start;padding:22px 24px}
.vgg_card--team_xj4 h3{margin:0 0 2px;font-size:var(--h3)}
.vgg_author-role_xj4{color:var(--muted);font-size:var(--small);margin:0 0 8px}
.vgg_card--team_xj4 p:last-child{margin:0}
/* Author card (byline_variant=author-card, R21): a bordered card in the
   reading column; the reviewer sits as a second grid column. */
.vgg_author-card_xj4{border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;background:var(--surface)}
.vgg_author-card-grid_xj4{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.vgg_author-card-grid--one_xj4{grid-template-columns:1fr}
.vgg_author-card-id_xj4{display:flex;gap:12px;align-items:center}
.vgg_author-name_xj4{margin:0;font-weight:600}
.vgg_author-role_xj4{margin:0;font-size:var(--small);color:var(--muted)}
.vgg_author-bio_xj4{margin:12px 0 0}
.vgg_author-links_xj4{font-size:var(--small)}
@media (max-width:640px){.vgg_author-card-grid_xj4{grid-template-columns:1fr}}
.vgg_team-grid_xj4{margin-top:var(--head-gap,28px)}
.vgg_team-list_xj4{list-style:none;margin:var(--head-gap,28px) 0 0;padding:0}
.vgg_team-row_xj4{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.vgg_team-row_xj4:first-child{border-top:0;padding-top:0}
.vgg_team-row_xj4 h3{margin:0 0 2px;font-size:var(--h3)}
.vgg_team-row_xj4>div,.vgg_card--team_xj4>div{flex:1;min-width:0}
.vgg_team-row_xj4 .vgg_author-role_xj4,.vgg_card--team_xj4 .vgg_author-role_xj4{margin:0 0 8px}
.vgg_team-row_xj4 p:not(.vgg_author-role_xj4){max-width:68ch}
@media(max-width:640px){.vgg_card--team_xj4{flex-direction:column;gap:12px}}
.vgg_team-strip_xj4{display:flex;flex-wrap:wrap;gap:14px 32px;list-style:none;padding:0;margin:var(--head-gap,28px) 0 0}
.vgg_team-strip_xj4 li{display:flex;gap:12px;align-items:center}
.vgg_team-strip_xj4 .vgg_avatar_xj4,.vgg_team-strip_xj4 .vgg_avatar--svg_xj4 svg{width:40px;height:40px}
.vgg_team-strip_xj4 .vgg_author-role_xj4{display:block;margin:0}
/* team_block split / grid (E12): token colours, no accent borders. */
.vgg_team-split_xj4{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;align-items:start;margin:var(--head-gap,28px) 0 0}
.vgg_team-split_xj4 .vgg_prose_xj4{max-width:760px}
.vgg_team-grid--lg_xj4 .vgg_card--team_xj4{display:block}
.vgg_team-grid--lg_xj4 .vgg_avatar_xj4,.vgg_team-grid--lg_xj4 .vgg_avatar--svg_xj4 svg{width:72px;height:72px;margin:0 0 14px}
/* team_block spotlight: lead card over a compact remainder; team-more is the
   closing hub link shared by every capped About layout. */
.vgg_team-spot_xj4{margin:var(--head-gap,28px) 0 4px}
.vgg_team-spot_xj4 .vgg_avatar_xj4,.vgg_team-spot_xj4 .vgg_avatar--svg_xj4 svg{width:72px;height:72px}
.vgg_team-spot_xj4+.vgg_team-strip_xj4{margin-top:20px}
.vgg_team-more_xj4{margin:22px 0 0}
@media(max-width:860px){.vgg_team-split_xj4{grid-template-columns:1fr}}
/* About facts table: label over value on a phone, two columns from 641px. */
.vgg_about-facts_xj4{margin:var(--head-gap,28px) 0 0}
.vgg_about-facts_xj4 .vgg_af-row_xj4{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.vgg_about-facts_xj4 dt{color:var(--muted);font-weight:600}
.vgg_about-facts_xj4 dd{margin:0;color:var(--body);overflow-wrap:anywhere}
/* axe link-in-text-block: a link inside a fact value (the "+N" areas link
   beside the town names, the contact links) sits in a run of text, so it
   takes the same underline and link colour as other in-text links. */
.vgg_about-facts_xj4 a{color:var(--link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.vgg_about-facts_xj4 a:hover{text-decoration-thickness:2px}}
.vgg_about-facts-note_xj4{margin:12px 0 0;font-size:var(--small);color:var(--muted)}
@media(min-width:641px){.vgg_about-facts_xj4 .vgg_af-row_xj4{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 24px}}
@media(max-width:820px){
  .vgg_steps--diagram_xj4,.vgg_steps--chevrons_xj4{grid-auto-flow:row;grid-auto-columns:auto}
  .vgg_steps--diagram_xj4 li{text-align:left;padding-left:56px}
  .vgg_steps--diagram_xj4 li::before{position:absolute;left:0;top:0;margin:0;width:38px;height:38px;font-size:var(--lead)}
  .vgg_steps--diagram_xj4 li:not(:last-child)::after{top:44px;left:18px;width:2px;height:calc(100% - 30px);
    transform-origin:top;animation-name:flowline-v}
  @keyframes flowline-v{from{transform:scaleY(0)}}
  .vgg_steps--chevrons_xj4 li h3{clip-path:none;border-radius:var(--r-md);padding:14px 18px}
  .vgg_steps--chevrons_xj4 li:first-child h3{clip-path:none;padding-left:18px}
}

/* breadcrumbs */
.vgg_crumbs_xj4{font-size:var(--small);color:var(--body);padding:14px 0}
/* hero / eyebrow placement: a small muted trail above the H1, with no bar
   chrome — it reads as part of the page, not a utility strip */
.vgg_crumbs--inhero_xj4,.vgg_crumbs--ineyebrow_xj4{font-size:var(--small);color:var(--muted)}
.vgg_crumbs_xj4 a{color:var(--link)}
@media (hover:hover) and (pointer:fine){.vgg_crumbs_xj4 a:hover{text-decoration-thickness:2px}}
/* margin only on the separators, so spacing is even (the current-page span,
   which has no aria-hidden, must not add its own margin) */
.vgg_crumbs_xj4 span[aria-hidden]{margin:0 6px}
.vgg_crumb-tri_xj4{display:inline-block;vertical-align:.06em;opacity:.75}

/* prose */
/* R23 A2: in-text links get a non-colour cue (underline) plus the AA-safe
   --link token, so link-in-text-block and color-contrast stay fixed at the
   token level. Nav, buttons, cards, pills and footer column links are NOT
   text-block links and keep their own styling. */
.vgg_prose_xj4 a:not([class*='btn']):not(.vgg_more_xj4),.vgg_prose_xj4 p a:not([class*='btn']):not(.vgg_more_xj4),.vgg_crumbs_xj4 a,.vgg_toc-jump-h_xj4,.vgg_callout_xj4 a:not([class*='btn']):not(.vgg_more_xj4),.vgg_gtable_xj4 a,
.vgg_lede_xj4 a:not([class*='btn']):not(.vgg_more_xj4),main p a:not([class*='btn']):not(.vgg_more_xj4){color:var(--link);text-decoration:underline;text-underline-offset:.15em;
  text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.vgg_prose_xj4 a:not([class*='btn']):hover,.vgg_prose_xj4 p a:not([class*='btn']):hover,.vgg_crumbs_xj4 a:hover,
.vgg_callout_xj4 a:not([class*='btn']):hover,.vgg_gtable_xj4 a:hover,.vgg_lede_xj4 a:not([class*='btn']):hover,main p a:not([class*='btn']):hover{text-decoration-thickness:2px}}
/* links inside dark chrome keep the surface's ink: --link is tuned for the page surfaces */
[class*='--dark'] p a,footer p a{color:inherit}
.vgg_prose_xj4 h2{margin-top:1.8em}
/* inline CTA copy sits flush in its box: the prose rhythm rules above must
   not push the copy up against the centred button (operator, R27) */
.vgg_prose_xj4 .vgg_cta-inline--in_xj4 h3,.vgg_cta-inline--in_xj4 h3{margin:0 0 4px}
.vgg_cta-inline--in_xj4 .vgg_cta-inline-copy_xj4>*:first-child{margin-top:0}
.vgg_cta-inline--in_xj4 .vgg_cta-inline-copy_xj4>*:last-child{margin-bottom:0}
.vgg_cta-inline-copy_xj4>*:first-child{margin-top:0}
.vgg_cta-inline-copy_xj4>*:last-child{margin-bottom:0}
/* long unbreakable strings (emails, URLs) overflow the reading column on
   narrow viewports — break them instead of scrolling the page */
.vgg_prose_xj4{overflow-wrap:break-word}
.vgg_prose_xj4 h3{margin-top:1.4em}
.vgg_prose_xj4 ul{padding-left:1.2em}
.vgg_prose_xj4 li{margin-bottom:.4rem}
/* in-block rhythm (14th round): a list, step list, grid, callout or table
   that follows a paragraph gets a clear gap, and so does the paragraph that
   follows one — the process intro used to butt straight onto step 1 */
.vgg_prose_xj4>p+:is(ol,ul,.vgg_steps_xj4,.vgg_grid_xj4,.vgg_callout_xj4,.vgg_table-wrap_xj4,table,.vgg_ticks_xj4),
.vgg_prose_xj4>:is(ol,ul,.vgg_steps_xj4,.vgg_grid_xj4,.vgg_callout_xj4,.vgg_table-wrap_xj4,table)+p{margin-top:30px}
.vgg_prose_xj4 .vgg_ticks_xj4{padding-left:0}
.vgg_prose_xj4 .vgg_card_xj4 h3{margin-top:0}
.vgg_prose-ol_xj4{padding-left:1.2em}
.vgg_prose-ol_xj4 li{margin-bottom:.5rem}
.vgg_table-wrap_xj4{overflow-x:auto;margin:1.2rem 0;max-width:100%}
.vgg_prose_xj4 table{width:100%}
.vgg_ptable_xj4{width:100%;border-collapse:collapse;font-size:var(--small)}
.vgg_ptable_xj4 th,.vgg_ptable_xj4 td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.vgg_ptable_xj4 thead th{background:var(--bg-alt);color:var(--black);font-family:var(--font-head);font-weight:var(--head-bold)}
.vgg_ptable_xj4 td:last-child{font-weight:600;color:var(--black);white-space:nowrap}
/* Cost-calculator result table: job names and ranges wrap inside their cells
   instead of forcing the wrapper into horizontal scroll on a narrow screen.
   table-layout:fixed keeps the two columns from stretching the wrapper. */
.vgg_calc-table_xj4{table-layout:fixed}
.vgg_calc-table_xj4 th,.vgg_calc-table_xj4 td,.vgg_calc-table_xj4 td:last-child{white-space:normal;overflow-wrap:anywhere}
/* Guide tables (article/insurance bodies, _normalise_tables): the FIRST
   column is the row header; no bold last column, no nowrap emphasis. */
.vgg_gtable_xj4{width:100%;border-collapse:collapse;font-size:var(--small)}
.vgg_gtable_xj4 th,.vgg_gtable_xj4 td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.vgg_gtable_xj4 thead th{background:var(--bg-alt);color:var(--black);font-family:var(--font-head);font-weight:var(--head-bold)}
.vgg_gtable_xj4 tbody th{color:var(--black);font-weight:600;background:none}
.vgg_gtable_xj4 td{font-weight:400;color:var(--body)}
/* Head-to-head comparison table (svc_comparison): deliberately neutral —
   no bold last column, no thick side borders; the verdict is the explicit
   tick/cross mark, never a colour tint alone. */
.vgg_ctable_xj4{width:100%;border-collapse:collapse;font-size:var(--small)}
.vgg_ctable_xj4 th,.vgg_ctable_xj4 td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.vgg_ctable_xj4 thead th{background:var(--bg-alt);color:var(--black);font-family:var(--font-head);font-weight:var(--head-bold)}
.vgg_ctable_xj4 tbody th{color:var(--black);font-weight:600;background:none}
.vgg_cmp-mark_xj4{font-weight:700;margin-right:8px}
.vgg_cmp-yes_xj4{color:var(--primary)}
.vgg_cmp-no_xj4{color:var(--muted)}
.vgg_cmp-note_xj4{color:var(--muted);font-size:var(--small)}
.vgg_method-note_xj4{display:block;margin-top:2px;font-weight:400;color:var(--muted)}

/* FAQ */
/* the marker slot is OPT-IN: only shells that draw a ::before marker
   (govpress chevron) reserve it, so every other shell has symmetric
   accordion padding (operator: padding left of the text and right of the
   icon must be equal). */
/* the card's VERTICAL rhythm is ONE token shared by BOTH accordion grammars
   (the <details> card and the always-visible .vgg_faq-item_xj4): --faq-pad-y is the
   space above the question, the space between question and answer, and the
   space under the answer, so an expanded card reads symmetric top to bottom.
   Nothing else may add a second bottom space. The static card used to pad
   18px under an answer that ALREADY carried a 1rem last-line margin and the
   panel's own 4px, so 19px above the question sat under 44px of dead band
   below it, and the card read as broken (operator, a local build). Gates:
   contract F7 — rule 40 in tests/test_operator_design_rules.vgg_py_xj4 + the FAQ-PAD
   measurement in scripts/visual_qa.vgg_py_xj4. */
.vgg_faq_xj4{--faq-marker-slot:0px;--faq-marker-gap:0px;--faq-pad-x:20px;--faq-pad-y:18px}
.vgg_faq--marker_xj4{--faq-marker-slot:1em;--faq-marker-gap:12px}
.vgg_faq_xj4 details{border:1px solid var(--line);border-radius:var(--r-md);
  padding:0 var(--faq-pad-x);margin-bottom:12px;background:var(--n-50)}
/* flex-start + auto-margin on the "+" (never space-between): themes that add a
   ::before marker (govpress chevron) would otherwise make the question text a
   middle flex item and render it centred — questions always read left-aligned */
.vgg_faq_xj4 summary{cursor:pointer;font-family:var(--font-head);font-weight:var(--head-bold);color:var(--black);
  padding:var(--faq-pad-y) 0;list-style:none;display:flex;justify-content:flex-start;
  align-items:center;gap:var(--faq-marker-gap)}
/* the open/closed markers (triangle/chevron glyphs) differ in width — without a
   reserved slot the question text shifted a pixel or two on toggle */
.vgg_faq_xj4 summary::before{content:"";display:inline-block;width:var(--faq-marker-slot);flex:0 0 auto}
.vgg_faq_xj4 summary::-webkit-details-marker{display:none}
.vgg_faq_xj4 summary::after{content:"+";font-size:var(--glyph);color:var(--primary);font-weight:400;
  margin-left:auto}
.vgg_faq_xj4 details[open] summary::after{content:"\2212"}
/* no rule under an open summary — a hairline between question and answer read as
   a hard separator mid-prose; spacing alone separates them */
.vgg_faq_xj4 .vgg_ans_xj4{padding:0 0 var(--faq-pad-y) calc(var(--faq-marker-slot) + var(--faq-marker-gap))}
/* the answer's last block never carries its own bottom margin — the card pad
   is the whole space under the text (the .vgg_card_xj4 > :last-child convention) */
.vgg_faq_xj4 .vgg_ans_xj4>:last-child{margin-bottom:0}
.vgg_faq_xj4 .vgg_ans_xj4 a:not(.vgg_more_xj4){color:var(--link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.vgg_faq_xj4 .vgg_ans_xj4 a:hover{text-decoration-thickness:2px}}
/* external attribution links (credits, licences) sit in text: underline + AA link colour */
main a[rel*='nofollow']{color:var(--link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
/* mobile: tighter card padding and no marker slot; shells that draw a ::before
   marker (govpress chevron) set .vgg_faq--marker_xj4 on the container and keep the
   answer indent so it still lines up with its question. */
@media(max-width:680px){.vgg_faq_xj4{--faq-pad-x:14px}.vgg_faq_xj4:not(.vgg_faq--marker_xj4) summary::before{display:none}
  .vgg_faq_xj4:not(.vgg_faq--marker_xj4) .vgg_ans_xj4{padding-left:0}}
/* faq_static: on = the same cards as plain, always-visible Q&A (no toggle, no
   hidden content). Items share the details card chrome. There is no marker
   slot to zero: the static rows carry no <summary>, so no shell draws a
   ::before marker on them, and accordion_cls() never pairs faq--static with
   faq--marker. */
.vgg_faq--static_xj4 .vgg_faq-item_xj4{border:1px solid var(--line);border-radius:var(--r-md);
  padding:0 var(--faq-pad-x);margin-bottom:12px;background:var(--n-50)}
/* the same box as an open <details>: the question pads top AND bottom, so the
   static card and the accordion card measure identically (never a card that
   pads its bottom edge on top of the answer's own space) */
.vgg_faq--static_xj4 .vgg_faq-q_xj4{font-family:var(--font-head);font-weight:var(--head-bold);color:var(--black);
  font-size:var(--h4);padding:var(--faq-pad-y) 0;margin:0}
/* faq_variant: two-col = 4+ short FAQs in a 2-column grid (server-gated;
   fewer items render the full-width stack). Cards drop their bottom margin
   inside the grid so rows read evenly. */
.vgg_faq-2col_xj4{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px;
  align-items:start}
/* each column is its own stack, so opening a question moves only the
   questions under it, never the other column (operator, Oct 2026) */
.vgg_faq-2col_xj4>*{display:flex;flex-direction:column;gap:14px;margin:0}
.vgg_faq-2col_xj4 details,.vgg_faq-2col_xj4 .vgg_faq-item_xj4{margin-bottom:0}
@media(max-width:820px){.vgg_faq-2col_xj4{grid-template-columns:1fr}}

/* pills / area links */
.vgg_pills_xj4{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.vgg_pills_xj4 a{display:inline-flex;align-items:center;min-height:44px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 16px;font-weight:600;font-size:var(--small);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.vgg_pills_xj4 a:hover{background:var(--primary);border-color:var(--primary);color:#fff;text-decoration:none}}
.vgg_pills--plain_xj4 span{display:inline-flex;align-items:center;min-height:44px;border:1px dashed var(--line);
  border-radius:var(--r-sm);padding:8px 16px;font-size:var(--small);color:var(--body)}

/* form */
.vgg_form-card_xj4{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);
  padding:28px;border:1px solid var(--line);color:var(--body)}
.vgg_form-card_xj4 h3{margin-top:0}
/* contact_variant: split = form beside a reassurance sidebar. */
.vgg_contact-split_xj4{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:start}
.vgg_contact-sidebar_xj4{background:var(--bg-alt);border-radius:var(--r-md);padding:26px}
.vgg_contact-sidebar_xj4 h3{margin-top:0}
.vgg_contact-steps_xj4{margin:0 0 18px;padding-left:20px;color:var(--body)}
.vgg_contact-steps_xj4 li{margin-bottom:8px}
.vgg_contact-sidebar_xj4 .vgg_ticks_xj4{list-style:none;padding:0;margin:0 0 18px}
.vgg_contact-phone_xj4{margin:0 0 14px}
.vgg_contact-phone_xj4 a{font-weight:700;font-size:var(--lead);color:var(--ink)}
/* labelled direct-details block in the contact sidebar (email/address used to
   render as bare orphans below the ticks) */
.vgg_contact-details_xj4{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.vgg_contact-details_xj4 h4{font-size:var(--meta);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;font-family:var(--font-body)}
.vgg_contact-detail_xj4{margin-bottom:14px}
.vgg_contact-detail_xj4:last-child{margin-bottom:0}
/* address_block ships footer-styled (.vgg_footer-addr_xj4 is a light-on-dark value);
   inside the light contact sidebar it must read as body text */
.vgg_contact-details_xj4 .vgg_footer-addr_xj4{color:var(--body);font-style:normal;font-size:var(--small);
  line-height:1.6;margin:0}
.vgg_contact-details_xj4 .vgg_contact-email_xj4 a{color:var(--primary);font-weight:600}
.vgg_contact-phone_xj4 a{font-weight:700;font-size:var(--lead);color:var(--ink)}
/* contact_variant: splitrev — mirrored split, the details column left of the
   form. Narrower info column; the details block drops its sidebar top rule.
   Sits ABOVE the 900px collapse so phones still get one column (equal
   specificity: source order decides). */
.vgg_contact-split--rev_xj4{grid-template-columns:1fr 1.25fr}
.vgg_contact-split--rev_xj4 .vgg_contact-details_xj4{margin-top:0;padding-top:0;border-top:0}
@media(max-width:900px){.vgg_contact-split_xj4{grid-template-columns:1fr}}
/* contact_variant: panel — one bordered box split inside: a tinted side pane
   (the trust block, then hairline-ruled contact lines) beside the form pane.
   One column under 900px, the pane first. */
.vgg_contact-panel_xj4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);overflow:hidden;color:var(--body)}
.vgg_contact-panel-side_xj4{background:var(--bg-alt);padding:30px 28px}
.vgg_contact-panel-form_xj4{padding:30px 28px}
.vgg_contact-lines_xj4{list-style:none;padding:0;margin:22px 0 0}
.vgg_contact-lines_xj4 li{padding:12px 0;border-top:1px solid var(--line)}
.vgg_contact-line-label_xj4{display:block;font-size:var(--small);font-weight:600;color:var(--ink);margin:0 0 4px}
.vgg_contact-lines_xj4 p,.vgg_contact-strip_xj4 p{margin:0;overflow-wrap:anywhere}
@media(max-width:900px){.vgg_contact-panel_xj4{grid-template-columns:1fr}}
/* contact_variant: strip — the direct details as one ruled row of labelled
   cells (a <dl>) above the form; a cell per detail, so no cell is stranded.
   The cells stack under 820px. */
.vgg_contact-strip_xj4{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  margin:0 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vgg_contact-strip_xj4>div{padding:16px 18px 16px 0}
.vgg_contact-strip_xj4>div+div{padding-left:18px;border-left:1px solid var(--line)}
.vgg_contact-strip_xj4 dt{font-size:var(--small);font-weight:600;color:var(--ink);margin:0 0 4px}
.vgg_contact-strip_xj4 dd{margin:0}
@media(max-width:820px){.vgg_contact-strip_xj4{grid-auto-flow:row;grid-auto-columns:auto}
  .vgg_contact-strip_xj4>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
/* address_block ships footer-styled; in the light pane and strip it reads
   as body text, as it does in .vgg_contact-details_xj4 */
.vgg_contact-lines_xj4 .vgg_footer-addr_xj4,.vgg_contact-strip_xj4 .vgg_footer-addr_xj4{color:var(--body);font-style:normal;
  font-size:var(--small);line-height:1.6;margin:0}
.vgg_contact-lines_xj4 .vgg_contact-email_xj4 a,.vgg_contact-strip_xj4 .vgg_contact-email_xj4 a{color:var(--primary);font-weight:600}
/* the email box beside the form: the site's heading and intro, then each
   address under its own label (a tint and a hairline, no stripe) */
.vgg_email-box_xj4{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 8px;margin-top:22px;color:var(--body)}
.vgg_contact-infocol_xj4>.vgg_email-box_xj4:first-child,.vgg_contact-side_xj4>.vgg_email-box_xj4:first-child{margin-top:0}
.vgg_email-box-h_xj4{font-weight:600;color:var(--ink);margin:0 0 6px}
.vgg_email-box-intro_xj4{font-size:var(--small);margin:0 0 16px}
.vgg_email-box_xj4 .vgg_contact-email_xj4{margin:0 0 14px}
.vgg_mail-label_xj4{display:block;font-size:var(--small);color:var(--muted);margin:0 0 2px}
.vgg_email-box_xj4 .vgg_contact-email_xj4 a{color:var(--primary);font-weight:600}
.vgg_side-card_xj4{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 6px;color:var(--body)}
.vgg_side-panel_xj4{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 24px 4px;color:var(--body)}
.vgg_side-panel-h_xj4{font-weight:600;color:var(--ink);margin:0 0 8px}
.vgg_email-box--inset_xj4{background:none;border:0;border-radius:0;border-top:1px solid var(--line);
  padding:20px 0 4px}
.vgg_email-box--open_xj4{background:none;border:0;border-radius:0;border-top:1px solid var(--line);
  padding:20px 0 0}
@media(max-width:480px){.vgg_email-box_xj4{padding:18px 16px 6px}
  .vgg_email-box--inset_xj4,.vgg_email-box--open_xj4{padding-left:0;padding-right:0}.vgg_email-box_xj4 .vgg_contact-email_xj4 a{font-size:.94em}}
/* cards inside the dark hero must keep dark body text */
.vgg_hero_xj4 .vgg_form-card_xj4,.vgg_hero_xj4 .vgg_card_xj4{color:var(--body)}
.vgg_hero_xj4 .vgg_form-card_xj4 h3,.vgg_hero_xj4 .vgg_card_xj4 h3{color:var(--ink)}
.vgg_field_xj4{margin-bottom:14px}
/* form_columns: two neighbours share a row only when the form itself is wide
   enough (a container query, so a form in a narrow column or on a phone
   stays one field per row). The pair's labels, boxes and error lines share
   grid rows, so the two boxes start on one line whatever the labels do.
   The container holds the fields only: the consent tick and the button sit
   outside it, so a contrast check reads the button on its own fill. */
.vgg_lead-fields_xj4{container-type:inline-size}
.vgg_field-row_xj4>.vgg_field_xj4{min-width:0}
@container (min-width:440px){
  .vgg_field-row--short_xj4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .vgg_field-row--short_xj4>.vgg_field_xj4{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}}
@container (min-width:540px){
  .vgg_field-row--question_xj4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .vgg_field-row--question_xj4>.vgg_field_xj4{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}}
.vgg_form-req_xj4{font-size:var(--meta);color:var(--muted);margin:0 0 14px}
.vgg_req_xj4{color:var(--ink)}
.vgg_field-error_xj4{margin:6px 0 0;font-size:var(--small);font-weight:600;color:var(--ink)}
.vgg_field_xj4 label{display:block;font-weight:600;color:var(--ink);margin-bottom:5px;font-size:var(--small)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
.vgg_field-label_xj4{font-weight:600;color:var(--ink);margin-bottom:5px;font-size:var(--small)}
.vgg_field_xj4 input,.vgg_field_xj4 select,.vgg_field_xj4 textarea{width:100%;padding:12px 14px;
  border:1px solid var(--muted);border-radius:var(--r-sm);font-size:16px;
  font-family:var(--font-body);color:var(--ink);background:var(--surface)}
/* A drawn arrow set in from the edge, not the browser's own one hard against
   the border. Its shape follows the site's caret knob (chevron or triangle). */
.vgg_field_xj4 select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 17px) 52%;
  background-size:5px 5px;background-repeat:no-repeat}
[data-vgg_caret_xj4=triangle] .vgg_field_xj4 select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(-45deg,transparent 50%,var(--ink) 50%);
  background-position:calc(100% - 23px) 50%,calc(100% - 17px) 50%;background-size:6px 6px}
.vgg_field_xj4 input:focus,.vgg_field_xj4 select:focus,.vgg_field_xj4 textarea:focus{
  outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.vgg_field_xj4 [aria-invalid=true]{border-color:var(--ink)}
.vgg_field_xj4 textarea{min-height:110px;resize:vertical}
/* checkbox + radio-row inputs: native controls, never full-width text inputs.
   These MUST sit below the generic .vgg_field_xj4 input rule (same specificity, so
   source order decides) — above it they lose and radios blow out to 100%. */
.vgg_field-checkbox_xj4 label{display:flex;align-items:flex-start;gap:8px;font-weight:500;margin-bottom:0}
.vgg_field-checkbox_xj4 input{width:auto;flex:none;margin:2px 0 0;padding:0;border:0;border-radius:0}
.vgg_field-choice_xj4{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.vgg_field-choice_xj4 label{display:inline-flex;align-items:center;gap:8px;font-weight:500;margin-bottom:0;float:none}
.vgg_field-choice_xj4 input{width:auto;flex:none;margin:0;padding:0;border:0}
.vgg_field_xj4 input[type=file]{padding:10px;cursor:pointer}
/* free-type numeric inputs: no spinner arrows */
.vgg_field_xj4 input[type=number]{-moz-appearance:textfield}
.vgg_field_xj4 input[type=number]::-webkit-outer-spin-button,
.vgg_field_xj4 input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vgg_form-note_xj4{font-size:var(--meta);color:var(--muted);margin:8px 0 0}
/* The MANDATORY consent tick, directly above the submit button. Reads as a
   real choice: full-size box, generous tap target, text at body size. */
.vgg_field_xj4.vgg_consent_xj4{margin:18px 0 14px}
.vgg_consent-label_xj4{display:flex;gap:10px;align-items:flex-start;font-size:var(--small);line-height:1.45;color:var(--body);cursor:pointer;min-height:44px;padding:2px 0}
.vgg_consent-label_xj4 input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--primary)}
/* axe link-in-text-block: a link inside a run of text must not be
   distinguishable by colour alone, so the policy link inside the
   consent statement is underlined. */
.vgg_consent-label_xj4 a{text-decoration:underline}
.vgg_field_xj4 input::placeholder,.vgg_field_xj4 textarea::placeholder{color:var(--muted);opacity:1}
.vgg_hp_xj4{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* scored tools (condition-diagnostic + urgency-triage). The question groups render as
   tidy bordered option rows rather than raw fieldsets, and the result reads as a clear
   callout. Both tools share this base; a per-tool accent (below) tells them apart. */
.vgg_widget_xj4{padding:40px 0}
.vgg_widget_xj4>.vgg_wrap_xj4>h2{margin-bottom:.4rem}
/* breathing room below the tool form before the results heading/table that follows */
.vgg_widget_xj4 .vgg_form-card_xj4{margin:8px 0 30px;padding:22px 24px}
.vgg_widget_xj4 .vgg_form-card_xj4+h3{margin-top:0}
.vgg_diag-q_xj4{border:0;margin:0 0 14px;padding:0}
.vgg_diag-q_xj4:last-of-type{margin-bottom:8px}
.vgg_widget_xj4 .vgg_form-card_xj4 form{counter-reset:dq}
.vgg_diag-q-legend_xj4{display:block;float:none;width:100%;font-weight:600;color:var(--ink);
  font-size:var(--body-size);line-height:1.45;margin:0 0 8px;padding:0}
/* numbered-question badge: gives the checklist a sense of progress without JS */
.vgg_diag-q-legend_xj4::before{counter-increment:dq;content:counter(dq);display:inline-flex;
  align-items:center;justify-content:center;width:1.5em;height:1.5em;margin-right:.55em;
  border-radius:999px;background:var(--primary-90);color:var(--ink);
  font-size:.8em;font-weight:700;vertical-align:1px}
.vgg_diag-opt_xj4{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;margin:0 0 6px;
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;
  color:var(--body);font-size:var(--small);line-height:1.4;transition:border-color .12s,background .12s}
.vgg_diag-opt_xj4:last-child{margin-bottom:0}
@media (hover:hover) and (pointer:fine){.vgg_diag-opt_xj4:hover{border-color:var(--primary);background:var(--bg-alt)}}
/* the chosen answer reads as chosen: tinted card + heavier border (and contact-form
   radio rows share .vgg_diag-opt_xj4, so they pick this up too) */
.vgg_diag-opt_xj4:has(input:checked){border-color:var(--primary);background:var(--primary-90);
  color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--primary)}
.vgg_diag-opt_xj4:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.vgg_diag-opt_xj4 input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--primary)}
.vgg_diag-q_xj4 .vgg_diag-opt_xj4+.vgg_diag-opt_xj4{margin-top:0}
.vgg_widget_xj4 .vgg_btn_xj4{margin-top:6px}
.vgg_diag-out_xj4{margin-top:16px;padding:0}
.vgg_diag-out_xj4:not(:empty){padding:14px 16px;border-radius:var(--r-md);
  background:var(--primary-90);color:var(--ink);font-weight:600;line-height:1.5}
/* severity: the result band colours the outcome by TINT, never an accent
   stripe. low = quiet/neutral, mid = brand tint, high = strong ink panel. */
.vgg_diag-out_xj4.vgg_is-low_xj4:not(:empty){background:var(--bg-alt);font-weight:500}
.vgg_diag-out_xj4.vgg_is-mid_xj4:not(:empty){background:var(--primary-90)}
.vgg_diag-out_xj4.vgg_is-high_xj4:not(:empty){background:var(--ink);color:var(--bg)}
.vgg_diag-out_xj4 strong{display:block;margin-bottom:.15em}
.vgg_widget_xj4 .vgg_ptable_xj4 th,.vgg_widget_xj4 .vgg_ptable_xj4 td{vertical-align:top}
/* the levels a quiz can return, as short paragraphs on a scale that deepens
   from the first to the last; the result lights its level up */
.vgg_tool-levels_xj4{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vgg_tool-levels_xj4 li{position:relative;padding:2px 0 2px 22px;color:var(--body);font-size:var(--small);line-height:1.55}
.vgg_tool-levels_xj4 li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;
  border-radius:999px;background:var(--primary);opacity:.35}
.vgg_tool-levels_xj4 .vgg_lv-mid_xj4::before{opacity:.65}
.vgg_tool-levels_xj4 .vgg_lv-high_xj4::before{opacity:1}
.vgg_tool-levels_xj4 .vgg_lv-label_xj4{color:var(--ink)}
.vgg_tool-levels_xj4 li.vgg_is-on_xj4{color:var(--ink)}
.vgg_tool-levels_xj4 li.vgg_is-on_xj4::before{box-shadow:0 0 0 4px var(--primary-90)}
/* figures by job as a range bar chart (widgets.vgg_range_chart_xj4) */
.vgg_range-chart_xj4{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vgg_range-chart_xj4 li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:14px;
  align-items:center;font-size:var(--small);color:var(--body)}
.vgg_range-chart_xj4 .vgg_rc-name_xj4{color:var(--ink);font-weight:600}
.vgg_range-chart_xj4 .vgg_rc-track_xj4{position:relative;height:10px;border-radius:999px;background:var(--bg-alt)}
.vgg_range-chart_xj4 .vgg_rc-bar_xj4{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--primary);opacity:.45}
.vgg_range-chart_xj4 li.vgg_is-on_xj4 .vgg_rc-bar_xj4{opacity:1}
.vgg_range-chart_xj4 li.vgg_is-on_xj4 .vgg_rc-name_xj4,.vgg_range-chart_xj4 li.vgg_is-on_xj4 .vgg_rc-fig_xj4{color:var(--ink)}
.vgg_range-chart_xj4 .vgg_rc-fig_xj4{font-variant-numeric:tabular-nums;white-space:nowrap}
.vgg_range-chart_xj4 .vgg_rc-fig_xj4 small{color:var(--muted)}
@media(max-width:640px){.vgg_range-chart_xj4 li{grid-template-columns:1fr auto}
  .vgg_range-chart_xj4 .vgg_rc-track_xj4{grid-column:1/-1;grid-row:2}}
/* the select fields of a calculator sit two to a row on a wide card */
.vgg_calc-fields_xj4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
@media(max-width:640px){.vgg_calc-fields_xj4{grid-template-columns:1fr}}
/* chart_style also draws the cost range chart, so siblings' charts differ:
   slim puts the name and figure on one line over a thin full-width track;
   stacked puts a square-ended track under the name with the figure beside
   it; ruled draws each range as a line between two dots on ruled rows. */
[data-vgg_chart_xj4=slim] .vgg_range-chart_xj4 li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
[data-vgg_chart_xj4=slim] .vgg_range-chart_xj4 .vgg_rc-track_xj4{grid-column:1/-1;grid-row:2;height:6px}
[data-vgg_chart_xj4=stacked] .vgg_range-chart_xj4{gap:16px}
[data-vgg_chart_xj4=stacked] .vgg_range-chart_xj4 li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
[data-vgg_chart_xj4=stacked] .vgg_range-chart_xj4 .vgg_rc-name_xj4{grid-column:1/-1}
[data-vgg_chart_xj4=stacked] .vgg_range-chart_xj4 .vgg_rc-track_xj4,[data-vgg_chart_xj4=stacked] .vgg_range-chart_xj4 .vgg_rc-bar_xj4{height:16px;border-radius:3px}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4{gap:0}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 li{padding:12px 0;border-bottom:1px solid var(--line)}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 .vgg_rc-track_xj4{height:12px;background:none}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 .vgg_rc-track_xj4::before{content:"";position:absolute;left:0;right:0;top:50%;
  border-top:1px dashed var(--line)}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 .vgg_rc-bar_xj4{top:5px;bottom:auto;height:2px;opacity:1}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 .vgg_rc-bar_xj4::before,[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 .vgg_rc-bar_xj4::after{content:"";
  position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 .vgg_rc-bar_xj4::before{left:-5px}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 .vgg_rc-bar_xj4::after{right:-5px}
[data-vgg_chart_xj4=ruled] .vgg_range-chart_xj4 li:not(.vgg_is-on_xj4) .vgg_rc-bar_xj4{opacity:.5}
/* field_style: how every form and tool input is drawn (boxed is the base). */
[data-vgg_fields_xj4=underline] .vgg_field_xj4 :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  border-width:0 0 2px;border-radius:0;background-color:transparent;padding-left:2px}
[data-vgg_fields_xj4=underline] .vgg_field_xj4 textarea{border-width:2px;border-color:var(--line)}
[data-vgg_fields_xj4=filled] .vgg_field_xj4 :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  border-color:transparent;background-color:var(--bg-alt);border-radius:var(--r-md)}
[data-vgg_fields_xj4=soft] .vgg_field_xj4 :is(input:not([type=checkbox]):not([type=radio]),select){border-radius:999px;
  padding-left:20px;border-color:var(--line)}
[data-vgg_fields_xj4=soft] .vgg_field_xj4 textarea{border-radius:18px;border-color:var(--line);padding:14px 20px}
[data-vgg_fields_xj4=soft] .vgg_field_xj4 select{padding-right:48px}
/* calculator_variant: slider = a live range slider driving a prominent figure. */
.vgg_calc-slider-field_xj4 input[type=range]{width:100%;margin-top:10px;accent-color:var(--primary)}
.vgg_calc-figure_xj4{margin-top:20px;padding:18px 20px;border-radius:var(--r-md);
  background:var(--primary-90);text-align:center}
.vgg_calc-figure-eyebrow_xj4{display:block;font-size:var(--meta);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.vgg_calc-figure-out_xj4{font-family:var(--font-head);font-size:var(--display);font-weight:var(--head-bold);
  color:var(--ink);margin-top:4px;min-height:1.2em;font-variant-numeric:tabular-nums}
/* (the tools once carried a coloured top rule on their form card to tell the
   two apart — removed: a thick top accent on a card reads as generated; the
   tools live on separate pages and the site's tone knob carries the accent) */
/* (the triage's former ink-only overrides are the `tone-mono` option now —
   one tone per site, seeded, instead of one tool permanently mono) */
/* ---- eleventh round: tool composition (engine/widgets.vgg_py_xj4 quiz_style) ---- */
.vgg_is-off_xj4{display:none!important}
.vgg_diag-q-opts_xj4{display:block}
/* option_shape=chips: inline pills, the radio itself hidden, chosen chip filled */
.vgg_diag-q--chips_xj4 .vgg_diag-q-opts_xj4{display:flex;flex-wrap:wrap;gap:8px}
.vgg_diag-q--chips_xj4 .vgg_diag-opt_xj4,.vgg_diag-q--cards_xj4 .vgg_diag-opt_xj4{position:relative}
.vgg_diag-q--chips_xj4 .vgg_diag-opt_xj4 input,.vgg_diag-q--cards_xj4 .vgg_diag-opt_xj4 input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.vgg_diag-q--chips_xj4 .vgg_diag-opt_xj4{display:inline-flex;margin:0;padding:8px 16px;border-radius:999px;
  font-size:var(--small)}
.vgg_diag-q--chips_xj4 .vgg_diag-opt_xj4:has(input:checked){background:var(--primary);border-color:var(--primary);
  color:var(--on-primary);box-shadow:none}
/* option_shape=cards: a tile grid, centred labels */
.vgg_diag-q--cards_xj4 .vgg_diag-q-opts_xj4{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.vgg_diag-q--cards_xj4 .vgg_diag-opt_xj4{margin:0;padding:16px 14px;justify-content:center;text-align:center;
  align-items:center;border-width:2px;min-height:64px}
/* option_shape=plain: native radios, no box */
.vgg_diag-q--plain_xj4 .vgg_diag-opt_xj4{border:0;padding:4px 0;margin:0 0 4px;background:none!important;
  box-shadow:none!important;font-weight:500!important}
.vgg_diag-q--plain_xj4 .vgg_diag-opt_xj4:has(input:checked){color:var(--ink)}
/* quiz_flow=steps: progress bar + counter above, Back / Next below */
.vgg_quiz-top_xj4{margin:0 0 20px}
.vgg_quiz-bar_xj4{height:6px;border-radius:999px;background:var(--bg-alt);overflow:hidden}
.vgg_quiz-bar_xj4 span{display:block;height:100%;width:0;background:var(--primary);transition:width .25s ease}
.vgg_quiz-progress_xj4{font-size:var(--meta);color:var(--muted);margin:8px 0 0;font-weight:600}
.vgg_quiz-nav_xj4{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 10px}
.vgg_quiz-nav_xj4 .vgg_btn_xj4{margin-top:0}
.vgg_quiz-nav-end_xj4{display:flex;gap:10px;margin-left:auto}
/* one question at a time: the numbered badge would read "1" on every step */
[data-vgg_flow_xj4=steps] .vgg_diag-q-legend_xj4::before{display:none}
.vgg_quiz-nav_xj4 .vgg_btn_xj4[disabled]{opacity:.45;cursor:default}
.vgg_diag-q_xj4.vgg_is-missing_xj4 .vgg_diag-q-legend_xj4{color:var(--ink)}
.vgg_diag-q_xj4.vgg_is-missing_xj4::after{content:"Please choose an answer to continue";display:block;
  font-size:var(--meta);color:var(--muted);margin-top:8px}
/* result_style=prose: a sentence, not a panel */
.vgg_diag-out--prose_xj4:not(:empty){background:none;border-left:0;padding:16px 0 0;font-weight:400;
  font-size:var(--lead);color:var(--body)}
.vgg_diag-out--prose_xj4 p{margin:0}
.vgg_diag-out--prose_xj4 strong{display:inline;color:var(--ink)}
.vgg_diag-out--prose_xj4.vgg_is-high_xj4:not(:empty),.vgg_diag-out--prose_xj4.vgg_is-mid_xj4:not(:empty),
.vgg_diag-out--prose_xj4.vgg_is-low_xj4:not(:empty){background:none;color:var(--body)}
/* result_style=scale: every band on a strip, the matched one lit */
.vgg_quiz-scale_xj4{list-style:none;display:flex;gap:6px;margin:18px 0 0;padding:0}
.vgg_quiz-scale_xj4 li{flex:1;text-align:center;font-size:var(--meta);font-weight:600;padding:9px 6px;
  border-radius:var(--r-md);background:var(--bg-alt);color:var(--muted);border:1px solid var(--line)}
.vgg_quiz-scale_xj4 li.vgg_is-on_xj4{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* result_style=replace: the questions give way to the result card */
.vgg_quiz_xj4.vgg_is-done_xj4 fieldset,.vgg_quiz_xj4.vgg_is-done_xj4 .vgg_quiz-top_xj4,.vgg_quiz_xj4.vgg_is-done_xj4 .vgg_quiz-nav_xj4,.vgg_quiz_xj4.vgg_is-done_xj4>.vgg_btn--lg_xj4{display:none}
.vgg_diag-out--card_xj4:not(:empty){padding:24px 26px;border:1px solid var(--line);font-size:var(--lead)}
.vgg_diag-out--card_xj4 strong{font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--big);margin-bottom:.35em}
.vgg_quiz_xj4.vgg_is-done_xj4 .vgg_diag-out--card_xj4:not(:empty){margin-top:0}
/* result_motion: quiet arrivals, all off under reduced motion */
@keyframes wfade{from{opacity:0}}
@keyframes wrise{from{opacity:0;transform:translateY(10px)}}
.vgg_motion-fade_xj4 .vgg_is-anim_xj4:not(:empty),.vgg_motion-count_xj4 .vgg_is-anim_xj4:not(:empty){animation:wfade .4s ease-out}
.vgg_motion-rise_xj4 .vgg_is-anim_xj4:not(:empty){animation:wrise .45s ease-out}
@media(prefers-reduced-motion:reduce){.vgg_is-anim_xj4{animation:none!important}.vgg_quiz-bar_xj4 span{transition:none}}
/* result_tone=mono: the brand held back on the tools */
.vgg_tone-mono_xj4 .vgg_diag-q-legend_xj4::before{background:var(--bg-alt)}
@media (hover:hover) and (pointer:fine){.vgg_tone-mono_xj4 .vgg_diag-opt_xj4:hover{border-color:var(--ink);background:var(--bg-alt)}}
.vgg_tone-mono_xj4 .vgg_diag-opt_xj4:has(input:checked){border-color:var(--ink);background:var(--bg-alt);
  box-shadow:inset 0 0 0 1px var(--ink)}
.vgg_tone-mono_xj4 .vgg_diag-q--chips_xj4 .vgg_diag-opt_xj4:has(input:checked){background:var(--ink);border-color:var(--ink);
  color:var(--bg);box-shadow:none}
.vgg_tone-mono_xj4 .vgg_diag-opt_xj4 input{accent-color:var(--ink)}
.vgg_tone-mono_xj4 .vgg_quiz-bar_xj4 span{background:var(--ink)}
.vgg_tone-mono_xj4 .vgg_diag-out_xj4:not(:empty){background:var(--bg-alt)}
.vgg_tone-mono_xj4 .vgg_diag-out_xj4.vgg_is-low_xj4:not(:empty){background:var(--bg-alt);font-weight:500}
.vgg_tone-mono_xj4 .vgg_diag-out_xj4.vgg_is-mid_xj4:not(:empty){background:var(--bg-alt);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line)}
.vgg_tone-mono_xj4 .vgg_diag-out_xj4.vgg_is-high_xj4:not(:empty){background:var(--ink);color:var(--bg)}
.vgg_tone-mono_xj4 .vgg_diag-out--prose_xj4:not(:empty),.vgg_tone-mono_xj4 .vgg_diag-out--prose_xj4.vgg_is-low_xj4:not(:empty),
.vgg_tone-mono_xj4 .vgg_diag-out--prose_xj4.vgg_is-mid_xj4:not(:empty),.vgg_tone-mono_xj4 .vgg_diag-out--prose_xj4.vgg_is-high_xj4:not(:empty){
  background:none;color:var(--body);box-shadow:none}
.vgg_tone-mono_xj4 .vgg_calc-figure_xj4{background:var(--bg-alt)}
.vgg_tone-mono_xj4 .vgg_form-card_xj4{border-top-color:var(--ink)}
.vgg_sav-compare_xj4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.vgg_sav-compare_xj4 div{padding:14px 12px;border-radius:var(--r-md);background:var(--bg-alt);text-align:center}
.vgg_sav-compare_xj4 div:last-child{background:var(--primary-90)}
.vgg_tone-mono_xj4 .vgg_sav-compare_xj4 div:last-child{background:var(--ink);color:var(--bg)}
.vgg_sav-compare_xj4 small{display:block;font-size:var(--meta);text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;margin-bottom:4px}
.vgg_tone-mono_xj4 .vgg_sav-compare_xj4 div:last-child small{color:inherit;opacity:.8}
.vgg_sav-compare_xj4 strong{font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--big)}
@media(max-width:560px){.vgg_sav-compare_xj4{grid-template-columns:1fr}}
/* tools hub cards */
.vgg_toolgrid_xj4{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:8px}
.vgg_toolcard_xj4{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:24px 22px}
@media (hover:hover) and (pointer:fine){a.vgg_toolcard_xj4:hover{text-decoration:none;border-color:var(--n-300);box-shadow:var(--shadow)}}
.vgg_toolcard_xj4 h3{margin:.4rem 0 .1rem;color:var(--black)}
.vgg_toolcard_xj4 p{margin:0;color:var(--body)}
.vgg_toolcard_xj4 .vgg_more_xj4{margin-top:auto;color:var(--primary);font-weight:500;font-size:var(--small);padding-top:10px}
/* tools hub layouts (_tools_hub): rows = one wide row per tool; feature = the
   first tool as a tinted panel over rows for the rest */
.vgg_toolgrid--rows_xj4,.vgg_toolgrid--feature_xj4{grid-template-columns:1fr;gap:12px}
.vgg_toolgrid--rows_xj4 .vgg_toolcard_xj4,.vgg_toolgrid--feature_xj4 .vgg_toolcard_xj4{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:18px;align-items:center;padding:18px 22px}
.vgg_toolgrid--rows_xj4 .vgg_toolcard_xj4 .vgg_icon_xj4,.vgg_toolgrid--feature_xj4 .vgg_toolcard_xj4 .vgg_icon_xj4{grid-row:1/3}
.vgg_toolgrid--rows_xj4 .vgg_toolcard_xj4 h3,.vgg_toolgrid--feature_xj4 .vgg_toolcard_xj4 h3{margin:0}
.vgg_toolgrid--rows_xj4 .vgg_toolcard_xj4 .vgg_more_xj4,.vgg_toolgrid--feature_xj4 .vgg_toolcard_xj4 .vgg_more_xj4{grid-column:3;grid-row:1/3;margin:0;padding:0}
.vgg_toolgrid--feature_xj4 .vgg_toolcard_xj4:first-child{background:var(--primary-90);border-color:transparent;padding:30px 28px}
@media(max-width:640px){.vgg_toolgrid--rows_xj4 .vgg_toolcard_xj4,.vgg_toolgrid--feature_xj4 .vgg_toolcard_xj4{grid-template-columns:auto minmax(0,1fr)}
  .vgg_toolgrid--rows_xj4 .vgg_toolcard_xj4 .vgg_more_xj4,.vgg_toolgrid--feature_xj4 .vgg_toolcard_xj4 .vgg_more_xj4{grid-column:2;grid-row:auto;padding-top:6px}}
/* Eighth round: interior page composition pools (engine/blocks.vgg_py_xj4). */
/* Interior hero sizes (blk_hero, rule 30): the gap UNDER the CTA row is never
   tighter than the gap above the copy — the buttons never hug the hero's foot. */
.vgg_hero--int_xj4{padding:56px 0 76px}
.vgg_hero--utility_xj4{padding:44px 0 52px}
.vgg_hero--tall_xj4{padding:80px 0 92px}
/* hero_layout=ctaright (interior) and hero_variant=ctaright (home): the CTA
   row broken out into a light card top right of the copy */
.vgg_hero-grid--cta_xj4{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:40px}
.vgg_hero-aside_xj4{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);
  padding:24px 26px;box-shadow:var(--sh-lg);justify-self:end;width:100%;max-width:380px;text-align:center}
.vgg_hero-aside-h_xj4{margin:0 0 14px;font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--lead);color:var(--ink)}
.vgg_hero-aside_xj4 .vgg_hero-cta_xj4{margin-top:0;flex-direction:column;align-items:stretch;gap:10px}
.vgg_hero-aside_xj4 .vgg_hero-cta_xj4 .vgg_btn_xj4{width:100%;text-align:center}
.vgg_hero-aside_xj4 .vgg_btn--outline-light_xj4{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover) and (pointer:fine){.vgg_hero-aside_xj4 .vgg_btn--outline-light_xj4:hover{background:var(--ink);color:var(--surface)}}
.vgg_hero-aside-phone_xj4{display:block;margin-top:14px;font-weight:700;color:var(--ink);text-align:center}
/* article_layout: rail = reading column beside a sticky side rail; lede = the
   lead as a standfirst over the column; toc uses the .vgg_toc-jump_xj4 grammar. */
:root{--sticky-top:96px}
/* logo_size (D1): --sticky-top follows the picked mark height; the taller
   tworow header below overrides it (later rule, same weight). */
[data-vgg_logo_xj4=compact]{--sticky-top:94px}
[data-vgg_logo_xj4=large]{--sticky-top:98px}
[data-vgg_logo_xj4=tall]{--sticky-top:102px}
[data-vgg_header_xj4=tworow]{--sticky-top:150px}
[data-vgg_header_xj4=tworow_button]{--sticky-top:150px}
/* C1.1 (R25): a static header scrolls away with the page; the mobile open
   menu is pinned below the header row and relies on the sticky header at
   small widths, so the static override and its small anchor offset are
   desktop-scoped only. */
@media(min-width:901px){[data-vgg_sticky_xj4=static] .vgg_site-header_xj4{position:static}
[data-vgg_sticky_xj4=static]{--sticky-top:16px}}
.vgg_article-grid_xj4{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.vgg_article-main_xj4{max-width:760px}
.vgg_article-rail_xj4{position:sticky;top:var(--sticky-top);display:flex;flex-direction:column;gap:18px}
.vgg_rail-card_xj4{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px}
.vgg_rail-card_xj4 .vgg_eyebrow_xj4{margin-bottom:.4rem}
.vgg_rail-card_xj4 p{margin:0 0 .9rem;color:var(--body)}
.vgg_rail-card_xj4 h3{margin:0 0 .5rem;}
.vgg_rail-card_xj4 .vgg_btn_xj4{display:block;text-align:center}
.vgg_rail-links_xj4{list-style:none;margin:0;padding:0}
.vgg_rail-links_xj4 li{padding:7px 0;border-top:1px solid var(--line)}
/* links_shape=ruled: a single-column ruled list — town name left, site glyph right */
.vgg_ruled-links_xj4{list-style:none;margin:0;padding:0}
.vgg_ruled-links_xj4 li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.vgg_ruled-links_xj4 li:first-child{border-top:0}
.vgg_ruled-links_xj4 a{font-weight:600;color:var(--ink);flex:1}
.vgg_ruled-links_xj4 .vgg_glyph_xj4{color:var(--muted)}
.vgg_rail-links_xj4 li:first-child{border-top:0;padding-top:0}
.vgg_standfirst_xj4{font-size:var(--big);line-height:1.55;color:var(--ink);margin:0 0 2rem;
  padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
/* hub_list_variant: list rows (services rows grammar) and the featured lead card */
.vgg_hub-rows_xj4{max-width:880px;margin:0 auto}
.vgg_hub-row_xj4 .vgg_res-meta_xj4{margin:0 0 2px}
.vgg_hub-row_xj4 .vgg_svc-row-main_xj4 h3{margin:0}
.vgg_card--feature_xj4{grid-column:1/-1;background:var(--bg-alt);border-color:transparent;padding:34px 36px}
.vgg_card--feature_xj4 h3{font-size:var(--h3)}
.vgg_card--feature_xj4 p{max-width:70ch}
/* prose_page_variant + use_case_layout: the split grammar top-aligns for long
   prose (a centred lead beside a long body would float mid-page); panel = the
   lead in a tinted panel over the column. */
.vgg_prose-split_xj4{align-items:start}
.vgg_prose-split_xj4 .vgg_svc-index-copy_xj4{position:sticky;top:var(--sticky-top)}
.vgg_tool-panel_xj4 p{max-width:none}
.vgg_prose-split_xj4 .vgg_prose_xj4>:first-child{margin-top:0}
/* the pull-quote attribution sits on a tinted callout, not the hero: muted, never white */
.vgg_callout_xj4 .vgg_byline_xj4{color:var(--muted)}
/* tool_layout: sidebar = tool beside a sticky rail; panel = tool in a tinted panel */
.vgg_tool-grid_xj4{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.vgg_tool-main_xj4>h2{margin-top:0}
.vgg_tool-rail_xj4{position:sticky;top:var(--sticky-top)}
.vgg_tool-panel_xj4{background:var(--bg-alt);border-radius:var(--r-xl);padding:36px 40px}
.vgg_tool-panel_xj4>h2{margin-top:0}
.vgg_tool-panel_xj4 .vgg_form-card_xj4{background:var(--surface)}
/* article_layout: meta = editorial meta rail left of the column; boxed = the
   column as a white card on a tinted band */
.vgg_article-meta-grid_xj4{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.vgg_article-meta_xj4{position:sticky;top:var(--sticky-top);padding-top:10px;border-top:1px solid var(--line)}
.vgg_article-meta_xj4 .vgg_eyebrow_xj4{margin:14px 0 6px}
.vgg_article-meta_xj4 .vgg_byline_xj4{margin:0 0 14px;color:var(--muted);font-size:var(--small)}
.vgg_article-meta_xj4 .vgg_meta-h_xj4,.vgg_author-card_xj4 .vgg_meta-h_xj4{margin:18px 0 6px;font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--meta);
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.vgg_author-card_xj4 .vgg_meta-h_xj4{margin-top:0}
.vgg_article-box_xj4{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:44px 48px;box-shadow:var(--shadow)}
/* hub_list_variant: grouped / compact */
.vgg_hub-group_xj4+.vgg_hub-group_xj4{margin-top:36px}
.vgg_hub-group-h_xj4{max-width:880px;margin:0 auto 4px;font-size:var(--small);text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.vgg_hub-compact_xj4{list-style:none;margin:0 auto;padding:0;max-width:880px;columns:2;column-gap:44px}
.vgg_hub-compact_xj4 li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--line)}
.vgg_hub-compact_xj4 li a{font-weight:700;color:var(--black)}
.vgg_hub-compact_xj4 li .vgg_res-meta_xj4{display:block;margin:2px 0 0}
.vgg_hub-ledger_xj4{list-style:none;margin:var(--head-gap,28px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.vgg_hub-ledger_xj4 li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.vgg_hub-ledger_xj4 li a{font-weight:600;color:var(--ink)}
.vgg_hub-ledger_xj4 li .vgg_res-meta_xj4{margin:0;white-space:nowrap}
.vgg_hub-mag-leads_xj4{margin-top:var(--head-gap,28px)}
.vgg_hub-mag-leads_xj4 .vgg_card--feature_xj4 h3{font-size:var(--h3)}
.vgg_hub-mag-rest_xj4{margin-top:var(--grid-gap,24px)}
.vgg_card--compact_xj4{padding:16px 18px}
.vgg_card--compact_xj4 p{display:none}
@media(max-width:720px){.vgg_hub-ledger_xj4{grid-template-columns:1fr}}
/* tool_layout: band = tool in a tinted band under a centred heading */
/* grid items default to min-width:auto (their content's min-content width):
   a tool form or a long word inside a split / rail column must never widen
   the column past the viewport (visual QA: mobile overflow) */
.vgg_tool-main_xj4,.vgg_article-main_xj4,.vgg_prose-split_xj4>*,.vgg_article-meta-grid_xj4>*{min-width:0}
.vgg_tool-band_xj4>.vgg_wrap_xj4>h2{margin-bottom:22px}
.vgg_tool-band_xj4 .vgg_form-card_xj4{background:var(--surface)}
/* use-case page: signs / factors shapes, related links */
.vgg_uc-cards_xj4 .vgg_card_xj4 p{margin:0;color:var(--ink);font-weight:600}
.vgg_uc-steps_xj4 li p{margin:0}
.vgg_uc-callout_xj4 h3{margin-bottom:.6rem}
.vgg_uc-callout_xj4 .vgg_ticks_xj4{margin:0}
.vgg_card--link_xj4{display:flex;align-items:center;gap:12px}
.vgg_card--link_xj4 h3{margin:0;flex:1}
.vgg_card--link_xj4 .vgg_more_xj4 .vgg_glyph_xj4{font-size:var(--glyph)}
.vgg_uc-panel--onalt_xj4{background:var(--surface);border:1px solid var(--line)}
@media(max-width:900px){
  .vgg_hero-grid--cta_xj4{grid-template-columns:1fr}
  .vgg_hero-aside_xj4{justify-self:stretch;max-width:none}
  .vgg_article-grid_xj4,.vgg_tool-grid_xj4,.vgg_article-meta-grid_xj4{grid-template-columns:1fr}
  .vgg_article-rail_xj4,.vgg_tool-rail_xj4,.vgg_prose-split_xj4 .vgg_svc-index-copy_xj4,.vgg_article-meta_xj4{position:static}
  .vgg_hub-compact_xj4{columns:1}
}
@media(max-width:680px){.vgg_tool-panel_xj4{padding:24px 20px}.vgg_card--feature_xj4{padding:24px 22px}
  .vgg_article-box_xj4{padding:26px 22px}}

/* folio: NOTE (operator rule, alignment): the theme used to pull the centred
   section heads (eyebrow / h2 / intro) left while leaving the lead paragraph
   and link line centred — a left heading over centred body copy in the same
   block (the about teaser, signs, coverage). A block is centred or left as a
   whole; no theme may pull `.vgg_section_xj4 .vgg_center_xj4` / `.vgg_pills_xj4` left. Gate:
   tests/test_operator_design_rules.vgg_py_xj4 TestBlockAlignmentConsistent. */
/* folio CTA: a quiet bordered card, centred at reading width (the left-flush
   card left a dead gap to the right) */
[data-vgg_theme_xj4=folio] .vgg_cta-plain_xj4 .vgg_cta-panel_xj4{margin-left:auto;margin-right:auto}

/* folio: process-step markers are neutral outlined numerals, not accent-filled
   discs — the filled circle in a rotated brand hue reads as a stray blob on the
   paper canvas (operator feedback), and a hairline numeral suits the folio */
[data-vgg_theme_xj4=folio] .vgg_steps_xj4 li::before{background:transparent;color:var(--ink);
  border:1px solid var(--line);font-weight:500}

/* 'strip' presentation: quiet fact sheet — small uppercase label over the
   value in a balanced grid (column count + tail spans come from the renderer
   via --fc/--fs), a top rule per cell, no pill chrome */
.vgg_fact-strip_xj4{display:grid;grid-template-columns:repeat(var(--fc, 3),1fr);
  gap:18px 30px;margin:0}
.vgg_fact-cell_xj4{grid-column:span var(--fs, 1);border-top:1px solid var(--line);
  padding-top:10px;font-size:var(--small);color:var(--body)}
.vgg_fact-cell_xj4 .vgg_fact-what_xj4{display:block;margin-top:4px;color:var(--muted)}
.vgg_fact-label_xj4{display:block;font-size:var(--meta);text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:4px}
@media(max-width:820px){.vgg_fact-strip_xj4{grid-template-columns:repeat(2,1fr)}
  .vgg_fact-cell_xj4{grid-column:auto}}
@media(max-width:560px){.vgg_fact-strip_xj4{grid-template-columns:1fr}}
.vgg_facts-table_xj4{width:100%;border-collapse:collapse;font-size:var(--small)}
/* Uniform row height: every row gets the same floor — sized to hold a
   4-line fact (4 lines at .95rem x --body-leading + the 10px+10px cell
   padding), i.vgg_e_xj4. the natural height of the tallest typical row — so a
   one-line fact no longer sits squashed beside a tall one. tr height acts
   as a minimum in table layout; a longer fact still grows its row. Lives
   in the base sheet, so every theme inherits it (no theme pack restyles
   .vgg_facts-table_xj4). Mobile relaxes the floor: single-column rows of empty
   space read as broken. */
.vgg_facts-table_xj4 tr{height:calc(4 * var(--body-leading, 1.5) * 0.95rem + 20px)}
.vgg_facts-table_xj4 th{text-align:left;color:var(--muted);font-weight:600;width:220px;
  padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.vgg_facts-table_xj4 td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--body);
  vertical-align:middle}
/* fact icon: one global rule — every fact presentation (table rows, list
   items, mini tiles, stat cards) shares the same sized inline icon. Scoped
   duplicates let bare contexts (split tiles) inherit an unsized svg that
   blew up to container width. */
.vgg_f-ico_xj4{display:inline-block;vertical-align:-4px;margin-right:9px;
  color:var(--primary)}
.vgg_f-ico_xj4 svg{width:17px;height:17px;display:block}
@media(max-width:640px){.vgg_facts-table_xj4 tr{height:auto}}

/* -- nav / link / spacing fixes (operator review, two local builds) -- */
/* E1: the "all …" link draws its own full-width top rule. A full-width
   row-rules axis (hairline, dotted) already draws that separator under the
   last option, so zero the all-link's rule there and keep one line at the
   seam. The inset axis draws inside the row and the none axis draws nothing,
   so both keep the all-link's rule. No surface skin special-cases this; the
   panel_menu all-link is a .vgg_btn_xj4 on its own row, so no option rule doubles
   there either. */
[data-vgg_menurules_xj4=hairline] .vgg_mega-all_xj4,[data-vgg_menurules_xj4=dotted] .vgg_mega-all_xj4{border-top:0}
/* E3: closing links — no underline on the text (an underline stops at the
   glyph box and reads as two links); hover feedback lives on the arrow per
   link_glyph_hover. Link_glyph=none keeps the classic hover underline. */
.vgg_more_xj4{align-items:center}
@media (hover:hover) and (pointer:fine){.vgg_more_xj4:hover{text-decoration:none}}
.vgg_more_xj4{color:var(--link)}
main p a.vgg_more_xj4,.vgg_faq-ask_xj4 a.vgg_more_xj4{text-decoration:none}
.vgg_more_xj4 .vgg_more-text_xj4{text-decoration:none}
@media (hover:hover) and (pointer:fine){.vgg_more_xj4:hover .vgg_more-text_xj4{text-decoration:none}}
.vgg_more_xj4 .vgg_glyph_xj4{display:inline-flex;align-items:center;line-height:1;font-size:var(--glyph);transition:transform .18s ease,color .18s ease}
.vgg_more_xj4 .vgg_glyph_xj4 svg{display:block;width:.8em;height:.8em}
.vgg_nav-cta-glyph_xj4 svg{display:block;width:1em;height:1em}
/* link_glyph_hover pool: hover feedback lives on the arrow only. Motion
   honours reduced-motion (see the media query with the nav-cta rule). */
@media (hover:hover) and (pointer:fine){[data-vgg_glyphhover_xj4=slide] .vgg_more_xj4:hover .vgg_glyph_xj4{transform:translateX(3px)}
[data-vgg_glyphhover_xj4=tint] .vgg_more_xj4:hover .vgg_glyph_xj4{color:var(--primary)}
[data-vgg_glyphhover_xj4=both] .vgg_more_xj4:hover .vgg_glyph_xj4{transform:translateX(3px);color:var(--primary)}}
.vgg_faq-ask_xj4 .vgg_more_xj4{display:inline-flex;align-items:center}
/* E4: jump links clear the sticky header instead of landing under it. */
[id]{scroll-margin-top:calc(var(--sticky-top) + 12px)}
/* E5: one eyebrow markup, one gap — a single rule set for every ancestor
   (the .vgg_section_xj4 vs bare split is folded away; late in the sheet so it wins). */
.vgg_eyebrow_xj4,.vgg_section_xj4 .vgg_eyebrow_xj4{margin:0 0 var(--eyebrow-gap,10px)}
.vgg_eyebrow_xj4 + h1,.vgg_eyebrow_xj4 + h2,.vgg_eyebrow_xj4 + h3{margin-top:0}
/* E7 (C5): the strip CTA is a --primary band, so its button inverts (white
   on brand) exactly like .vgg_cta-band_xj4 .vgg_btn_xj4. */
.vgg_cta-strip_xj4 .vgg_btn_xj4{background:#fff;color:var(--primary)}
@media (hover:hover) and (pointer:fine){.vgg_cta-strip_xj4 .vgg_btn_xj4:hover{background:var(--primary-90);color:var(--primary)}}

/* basalt: the centred solid CTA band is pulled left to match its split-hero
   grammar. (The about-teaser left-pull is removed: it left a narrow
   left-flush column with dead space to its right — a banned stranded-left
   block — and the theme-level `.vgg_center_xj4` override is itself banned.) */
[data-vgg_theme_xj4=basalt] .vgg_cta-band--solid_xj4{text-align:left}
[data-vgg_theme_xj4=basalt] .vgg_cta-band_xj4 .vgg_cta-ticks_xj4,
[data-vgg_theme_xj4=basalt] .vgg_cta-band--solid_xj4 .vgg_cta-ticks_xj4{display:inline-block;text-align:left}

/* govpress: civic design-system world. Flat, square, no shadows, no photo
   scrims — a white hero with black type, green CTA with the hard bottom edge,
   blue links, inset-rule callouts. Scoped to [data-vgg_theme_xj4=govpress]. The text
   rules skip a boxed hero: its photo panel keeps the base light text. */
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4{background:var(--bg) !important;color:var(--ink)}
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4::before,[data-vgg_theme_xj4=govpress] .vgg_hero_xj4::after{display:none}
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) h1{color:var(--ink);text-shadow:none}
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_lead_xj4,
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_about-def_xj4,
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_hero-proof_xj4 li{color:var(--body);text-shadow:none}
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_hero-proof_xj4 li::before{border-color:var(--primary)}
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_eyebrow_xj4,
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_eyebrow_xj4 .vgg_eb-a_xj4{color:inherit;text-shadow:none}
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_eyebrow_xj4 .vgg_eb-sep_xj4,
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_eyebrow_xj4 .vgg_eb-b_xj4{color:var(--muted)}
/* left grammar everywhere: the legacy centred section heads and pill rows are
   pulled left to match the hero (no centred islands — deep-theme learning) */
/* NOTE (operator rule, "fix the areas section once and for all"): the civic
   theme used to force the centred section heads and pill rows left ("left
   grammar everywhere"). That fought the centred areas-we-cover and FAQ
   blocks on every page — the centred grammar wins; do not re-add the
   .vgg_section_xj4 .vgg_center_xj4 / .vgg_pills_xj4 left-pulls for this theme. */
/* green button with the hard bottom edge (the GOV.vgg_UK_xj4 button signature) */
[data-vgg_theme_xj4=govpress] .vgg_btn_xj4{box-shadow:0 3px 0 var(--cta-hover)}
@media (hover:hover) and (pointer:fine){[data-vgg_theme_xj4=govpress] .vgg_btn_xj4:hover{background:var(--cta);box-shadow:0 1px 0 var(--cta-hover);
  transform:translateY(2px)}}
[data-vgg_theme_xj4=govpress] .vgg_hero_xj4:not(.vgg_hero--boxed_xj4) .vgg_btn--outline-light_xj4{box-shadow:inset 0 0 0 2px var(--line);color:var(--ink)}
[data-vgg_theme_xj4=govpress] .vgg_btn_xj4.vgg_btn--outline-light_xj4{box-shadow:inset 0 0 0 2px var(--line), 0 3px 0 var(--n-300)}
@media (hover:hover) and (pointer:fine){[data-vgg_theme_xj4=govpress] .vgg_btn_xj4.vgg_btn--outline-light_xj4:hover{background:var(--bg-alt);
  box-shadow:inset 0 0 0 2px var(--line), 0 1px 0 var(--n-300);
  transform:translateY(2px)}}
/* govpress CTA + why cards: plain flat cards (operator rule: cards never carry
   a thick vertical border on the left — no accent-bar card chrome) */
[data-vgg_theme_xj4=govpress] .vgg_cta-plain-inner_xj4{border:1px solid var(--line);border-radius:0;
  background:var(--bg);padding-left:34px}
[data-vgg_theme_xj4=govpress] .vgg_benefit_xj4{border:1px solid var(--line);border-radius:0;
  background:var(--bg)}
[data-vgg_theme_xj4=govpress] .vgg_benefit_xj4 .vgg_icon_xj4{background:transparent;color:var(--primary)}
/* faq accordions read as GOV.vgg_UK_xj4 <details> */
[data-vgg_theme_xj4=govpress] .vgg_faq_xj4 summary{list-style:none}
[data-vgg_theme_xj4=govpress] .vgg_faq_xj4 summary::-webkit-details-marker{display:none}
[data-vgg_theme_xj4=govpress] .vgg_faq_xj4 summary::before{content:"\25B8\2002";color:var(--primary)}
[data-vgg_theme_xj4=govpress] .vgg_faq_xj4 details[open] summary::before{content:"\25BE\2002"}
/* chevron LEFT or plus RIGHT — never both (operator rule): the chevron carries
   the open/closed state, so the base "+" marker is dropped */
[data-vgg_theme_xj4=govpress] .vgg_faq_xj4 summary::after{content:none}
/* breadcrumbs: the civic design-system grammar — a full-width bar with the
   header hairline, underlined blue trail links, grey chevrons, plain current
   page (the engine default's muted non-underlined links read as off-system) */
[data-vgg_theme_xj4=govpress] .vgg_crumbs_xj4{font-size:var(--lead);padding:12px 0;
  border-bottom:1px solid var(--line)}
[data-vgg_theme_xj4=govpress] .vgg_crumbs_xj4 a{color:var(--link);text-decoration:underline;
  text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){[data-vgg_theme_xj4=govpress] .vgg_crumbs_xj4 a:hover{color:var(--primary-hover)}}
[data-vgg_theme_xj4=govpress] .vgg_crumbs_xj4 span[aria-hidden]{color:var(--muted)}
/* footer: black band, brand top rule */
[data-vgg_theme_xj4=govpress] .vgg_site-footer_xj4{border-top:6px solid var(--primary)}

/* Every location-data presentation stacks: heading block on top, the facts
   filling the full column beneath (operator feedback — right-column layouts
   left dead space, and the prose measure read as a fixed-width rag).
   Rhythm is fixed here in the base sheet: grid gap owns the space between
   the header block and the facts, and the facts' own component margins are
   zeroed at the container edges so the spacing is identical across themes. */
.vgg_loc-grid_xj4{display:grid;grid-template-columns:1fr;gap:18px}
.vgg_loc-grid_xj4 h2{margin:0}
/* optional eyebrow + high-level intro rendered with the heading */
.vgg_loc-intro_xj4{margin-top:10px;color:var(--body);font-size:var(--lead)}
.vgg_loc-body_xj4 > :first-child{margin-top:0}
.vgg_loc-body_xj4 > :last-child{margin-bottom:0}
/* prose mode: label-led fact paragraphs flow as a two-column fact box, so
   the text fills the width a single measure would leave empty */
.vgg_loc-body_xj4 .vgg_prose_xj4{columns:2;column-gap:44px}
.vgg_loc-body_xj4 .vgg_prose_xj4 p{margin:0 0 14px;break-inside:avoid;max-width:none}
@media(max-width:820px){.vgg_loc-body_xj4 .vgg_prose_xj4{columns:1}}
/* 'list' presentation: one icon-led item per fact */
.vgg_facts-list_xj4{list-style:none;margin:0;padding:0}
.vgg_facts-list_xj4 li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--body)}
.vgg_facts-list_xj4 li strong{color:var(--ink)}
/* 'diagram' presentation: a drawing of a home with a numbered marker on the
   part each fact bears on, beside a numbered key that prints each fact */
.vgg_fact-diagram_xj4{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:28px;align-items:center;margin:0}
.vgg_fd-art_xj4{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface)}
.vgg_fd-sky_xj4{fill:var(--bg-alt)}
.vgg_fd-ground_xj4{fill:var(--primary-90)}
.vgg_fd-strata_xj4{fill:none;stroke:var(--line);stroke-width:1.5}
.vgg_fd-water_xj4{fill:var(--primary);opacity:.35}
.vgg_fd-tree_xj4{fill:var(--primary);opacity:.45}
.vgg_fd-trunk_xj4{fill:var(--muted)}
.vgg_fd-wall_xj4{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.vgg_fd-roof_xj4{fill:var(--ink);opacity:.8}
.vgg_fd-win_xj4{fill:var(--bg-alt);stroke:var(--ink);stroke-width:1}
.vgg_fd-door_xj4{fill:var(--primary)}
.vgg_fd-pin_xj4 circle{fill:var(--primary);stroke:var(--surface);stroke-width:2}
.vgg_fd-pin_xj4 text{fill:var(--on-primary);font-size:11px;font-weight:var(--head-bold);font-family:var(--font-head)}
.vgg_fd-key_xj4{list-style:none;margin:0;padding:0}
.vgg_fd-key_xj4 li{display:grid;grid-template-columns:auto auto 1fr;gap:0 10px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line);color:var(--body)}
.vgg_fd-key_xj4 li strong{color:var(--ink)}
.vgg_fd-n_xj4{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:var(--small);
  font-weight:700}
@media(max-width:820px){.vgg_fact-diagram_xj4{grid-template-columns:1fr}}
/* footer */
/* conversion benefits grid (service pages): authored reassurance copy as
   substantive benefit cards, not bare ticks */
.vgg_benefit-grid_xj4{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px;
  margin-top:26px}
.vgg_benefit_xj4{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;
  color:var(--body)}
.vgg_benefit_xj4 .vgg_icon_xj4{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-90);color:var(--primary)}
.vgg_benefit_xj4 .vgg_icon_xj4 svg{width:18px;height:18px}
.vgg_benefit_xj4 strong{color:var(--ink)}
.vgg_benefit_xj4 > :last-child{margin-bottom:0}
.vgg_benefit-ticks_xj4{font-size:var(--lead);max-width:820px}
.vgg_benefit-ticks_xj4 li{margin-bottom:12px}
.vgg_benefit-ticks_xj4 strong{color:var(--ink)}
@media(max-width:820px){.vgg_benefit-grid_xj4{grid-template-columns:1fr}}
.vgg_site-footer_xj4{background:var(--band-bg);color:var(--band-muted);font-size:max(15px,var(--small))}
/* footer_surface: the near-black band, a deep shade of the brand colour, or a light
   footer on the tinted surface. Each one re-points the band tokens. */
[data-vgg_footer_xj4=brand] .vgg_site-footer_xj4{--band-bg:var(--foot-brand);--band-muted:rgba(255,255,255,.8);--n-300:rgba(255,255,255,.86);--n-800:rgba(255,255,255,.18);--primary-60:#fff}
[data-vgg_footer_xj4=light] .vgg_site-footer_xj4{--band-bg:var(--bg-alt);--band-muted:var(--body);--n-300:var(--body);--n-800:var(--line);--primary-60:var(--link);--foot-head:var(--ink);border-top:1px solid var(--line)}
[data-vgg_footer_xj4=light] .vgg_footer--boxed_xj4{background:var(--bg)}
[data-vgg_footer_xj4=light] .vgg_footer--boxed_xj4>.vgg_wrap_xj4.vgg_footer-box_xj4{border:1px solid var(--line)}
.vgg_footer-grid_xj4{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;padding:56px 0 32px}
/* footer_style: nap — contact-card footer, NAP details dominant left, link
   columns right (the local-business footer; structurally distinct from the
   link-columns default). Degrades to the base grid on narrow screens. */
.vgg_footer-grid--nap_xj4{grid-template-columns:1.5fr repeat(auto-fit,minmax(140px,1fr))}
.vgg_footer-nap_xj4 .vgg_footer-wordmark_xj4{font-size:var(--big)}
.vgg_footer-nap_xj4 .vgg_footer-addr_xj4{margin-top:10px}
.vgg_footer-nap_xj4{min-width:0}
.vgg_footer-nap_xj4 .vgg_footer-addr_xj4,.vgg_footer-nap_xj4 .vgg_footer-email_xj4{margin-bottom:0}
.vgg_site-footer_xj4 h4{color:var(--foot-head,#fff);font-size:var(--lead);line-height:1.3;margin:0 0 14px;padding-top:.3rem}
.vgg_footer-grid_xj4>div>h4:first-child{padding-top:.3rem}
/* a footer link is a 44px tap target; the list rows and gaps below give no extra space */
.vgg_site-footer_xj4 a{color:var(--n-300);display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.vgg_site-footer_xj4 a:hover{color:var(--primary-60)}}
.vgg_site-footer_xj4 ul{list-style:none;padding:0;margin:0}
.vgg_site-footer_xj4 li{margin-bottom:0}
.vgg_footer-brand_xj4 svg{margin-bottom:12px}
.vgg_footer-bottom_xj4{border-top:1px solid var(--n-800);padding:18px 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 18px;font-size:var(--meta)}
.vgg_statutory-disclosure_xj4{flex-basis:100%;margin:0;color:var(--n-300)}
.vgg_footer-legal_xj4{display:flex;flex-wrap:wrap;gap:0 18px}
.vgg_footer-legal_xj4 a{color:var(--n-300)}
@media (hover:hover) and (pointer:fine){.vgg_footer-legal_xj4 a:hover{color:var(--primary-60)}}
.vgg_footer-addr_xj4{margin-top:10px;font-style:normal;font-size:var(--small);color:var(--n-300)}
.vgg_footer-grid_xj4>*{min-width:0}
.vgg_footer-email_xj4{margin-top:8px;font-size:var(--small)}
.vgg_contact-email_xj4{overflow-wrap:anywhere}

/* trust bar (sits on a dark section) */
.vgg_trust_xj4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;align-items:stretch}
.vgg_trust_xj4>*{min-width:0}
.vgg_trust_xj4>div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22px 16px}
.vgg_trust_xj4 .vgg_num--long_xj4{font-size:var(--big);line-height:1.15;padding-top:6px}
.vgg_trust_xj4 .vgg_num_xj4{font-family:var(--font-head);font-size:var(--display);font-weight:var(--head-bold);
  color:var(--primary-60);line-height:1}
.vgg_trust_xj4 .vgg_lbl_xj4{font-size:var(--small);color:var(--n-300);margin-top:4px}
.vgg_section--dark_xj4 .vgg_trust_xj4 .vgg_num_xj4{color:#fff}
.vgg_section--dark_xj4 .vgg_trust_xj4 .vgg_lbl_xj4{color:#b9bfc6}
/* metrics/trust as a branded colour block (per-site brand colour, not the same
   near-black on every site) */
.vgg_trust-band_xj4{background:var(--primary);padding:36px 0}
.vgg_trust-band_xj4 .vgg_trust_xj4 .vgg_num_xj4{color:#fff}
.vgg_trust-band_xj4 .vgg_trust_xj4 .vgg_lbl_xj4{color:rgba(255,255,255,.85)}
.vgg_trust--3_xj4{grid-template-columns:repeat(3,1fr);max-width:900px;margin-left:auto;margin-right:auto}
.vgg_trust--panel_xj4.vgg_trust--odd_xj4>div:first-child{grid-column:1/-1}
.vgg_contact-trust_xj4 .vgg_price-line_xj4{margin:0 0 12px}
.vgg_contact-infocol_xj4>.vgg_contact-sidebar_xj4+.vgg_contact-trust_xj4{margin-top:24px}
/* trust_stats=statement: a single prose line, no numbers */
.vgg_trust-statement_xj4{font-family:var(--font-head);font-size:var(--lead);margin:0;text-align:center}
.vgg_trust-band--statement_xj4 .vgg_trust-statement_xj4{color:var(--on-primary)}
.vgg_trust-sec--statement_xj4 .vgg_trust-statement_xj4{color:var(--ink)}
.vgg_section--dark_xj4 .vgg_trust-sec--statement_xj4 .vgg_trust-statement_xj4,.vgg_section--dark_xj4 .vgg_trust-statement_xj4{color:inherit}
/* statement mode: the statement heads a compact inline row of the items —
   never a lone-sentence section */
.vgg_trust-sec--statement_xj4 .vgg_trust-inline_xj4,.vgg_trust-band--statement_xj4 .vgg_trust-inline_xj4{
  list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:6px 18px;font-family:var(--font-body);
  font-size:var(--ui);text-align:center}
/* trust_variant=inline: one centred sentence with bold figures — no boxes */
.vgg_trust-inline_xj4{font-family:var(--font-head);font-size:var(--lead);margin:0;text-align:center;
  color:var(--ink)}
.vgg_trust-inline_xj4 strong{color:var(--primary);font-weight:700}
/* on the brand band the items take the band's own ink: a primary-coloured
   figure on the primary band was invisible (R41, a reseeded real site) */
.vgg_trust-band--statement_xj4 .vgg_trust-inline_xj4,.vgg_trust-band--statement_xj4 .vgg_trust-inline_xj4 strong{
  color:var(--on-primary)}
/* a dark band paints its own ink: no descendant keeps a page-surface colour (AA on the band) */
.vgg_section--dark_xj4 p,.vgg_section--dark_xj4 li,.vgg_section--dark_xj4 h2,.vgg_section--dark_xj4 h3,.vgg_section--dark_xj4 .vgg_lead_xj4,
.vgg_section--dark_xj4 .vgg_eyebrow_xj4,.vgg_section--dark_xj4 .vgg_trust-inline_xj4,.vgg_section--dark_xj4 .vgg_trust-statement_xj4,
.vgg_section--dark_xj4 strong,.vgg_section--dark_xj4 .vgg_trust-inline_xj4 strong{color:inherit}
.vgg_ti-sep_xj4{color:var(--muted);margin:0 .35em}
/* trust_variant=splitpanel: statement copy left, a 2×2 stat grid right */
.vgg_tp-grid_xj4{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.vgg_tp-copy_xj4 .vgg_lead_xj4{margin-bottom:0}
.vgg_trust--panel_xj4{grid-template-columns:repeat(2,1fr);gap:14px;text-align:left;
  max-width:none;margin:0}
.vgg_trust--panel_xj4 .vgg_num_xj4{font-size:var(--display)}
.vgg_trust--panel_xj4>div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;display:flex;flex-direction:column;
  justify-content:center;align-items:center}
.vgg_trust--panel_xj4 .vgg_num_xj4{color:var(--primary)}
.vgg_trust--panel_xj4 .vgg_lbl_xj4{color:var(--muted)}
@media(max-width:820px){.vgg_tp-grid_xj4{grid-template-columns:1fr;gap:26px}}

/* logo images (no filters, ever) */
.vgg_brand_xj4 img{width:auto;display:block}
/* a flex-squeezed wordmark distorts when the box shrinks but the inline height
   stays (glyphs overlap into unreadability). The brand link must be allowed to
   shrink (min-width:0 — the width attribute would otherwise pin it) and the img
   letterboxes inside whatever box is left via object-fit:contain. */
.vgg_brand_xj4{min-width:0}
.vgg_brand_xj4 img{max-width:100%;height:auto;object-fit:contain;object-position:left}
.vgg_footer-wordmark_xj4{font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--big);color:var(--foot-head,#fff);
  display:block;line-height:1.3}
.vgg_cta-ticks_xj4{display:inline-block;text-align:left;margin:18px auto 24px;max-width:520px;color:var(--n-300)}
/* CTA band: a branded call-to-action that stands apart from the dark footer. */
.vgg_cta-band_xj4{background:var(--primary);color:#fff}
.vgg_cta-band_xj4 .vgg_eyebrow_xj4{color:rgba(255,255,255,.82)}
/* split-eyebrow spans inherit --primary/--muted, which vanishes on the branded
   (primary-coloured) CTA surfaces — pin every part to light tones there */
.vgg_cta-band_xj4 .vgg_eyebrow_xj4 .vgg_eb-a_xj4,.vgg_cta-panel_xj4 .vgg_eyebrow_xj4 .vgg_eb-a_xj4,
.vgg_cta-split-copy_xj4 .vgg_eyebrow_xj4 .vgg_eb-a_xj4{color:#fff}
.vgg_cta-band_xj4 .vgg_eyebrow_xj4 .vgg_eb-sep_xj4,.vgg_cta-band_xj4 .vgg_eyebrow_xj4 .vgg_eb-b_xj4,
.vgg_cta-panel_xj4 .vgg_eyebrow_xj4 .vgg_eb-sep_xj4,.vgg_cta-panel_xj4 .vgg_eyebrow_xj4 .vgg_eb-b_xj4,
.vgg_cta-split-copy_xj4 .vgg_eyebrow_xj4 .vgg_eb-sep_xj4,.vgg_cta-split-copy_xj4 .vgg_eyebrow_xj4 .vgg_eb-b_xj4{color:rgba(255,255,255,.75)}
.vgg_cta-band_xj4 h2{color:#fff}
.vgg_cta-band_xj4 .vgg_lead_xj4{color:rgba(255,255,255,.92)}
.vgg_cta-band_xj4 .vgg_cta-ticks_xj4{color:var(--on-primary)}
.vgg_cta-band_xj4 .vgg_cta-ticks_xj4 li::before{background:#fff}
.vgg_cta-band_xj4 .vgg_btn_xj4{background:#fff;color:var(--primary)}
@media (hover:hover) and (pointer:fine){.vgg_cta-band_xj4 .vgg_btn_xj4:hover{background:var(--primary-90);color:var(--primary)}}
.vgg_cta-band--solid_xj4{padding:52px 0;text-align:center}
/* cta_variant: panel = a contained brand card (not full-bleed). */
.vgg_cta-panel_xj4{background:var(--primary);color:var(--on-primary);border-radius:var(--r-lg);
  padding:44px 40px;box-shadow:var(--sh-lg)}
.vgg_cta-panel_xj4 .vgg_eyebrow_xj4{color:rgba(255,255,255,.82)}
.vgg_cta-panel_xj4 h2{color:#fff}
.vgg_cta-panel_xj4 .vgg_lead_xj4{color:inherit;margin-bottom:0}
.vgg_cta-panel_xj4 .vgg_cta-ticks_xj4{color:var(--on-primary);margin:14px auto 22px}
.vgg_cta-panel_xj4 .vgg_cta-ticks_xj4 li::before{background:#fff}
.vgg_cta-panel_xj4 .vgg_btn_xj4{background:#fff;color:var(--primary)}
@media (hover:hover) and (pointer:fine){.vgg_cta-panel_xj4 .vgg_btn_xj4:hover{background:var(--primary-90);color:var(--primary)}}
/* cta_variant: split = two columns — copy left, a dedicated white action card right. */
.vgg_cta-split_xj4{background:var(--primary);color:var(--on-primary)}
.vgg_cta-split-inner_xj4{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  padding:44px 0}
.vgg_cta-split-copy_xj4 .vgg_eyebrow_xj4{color:rgba(255,255,255,.82)}
.vgg_cta-split-copy_xj4 h2{color:#fff}
.vgg_cta-split-copy_xj4 .vgg_lead_xj4{color:rgba(255,255,255,.92)}
.vgg_cta-split-copy_xj4 .vgg_cta-ticks_xj4{color:var(--on-primary)}
.vgg_cta-split-copy_xj4 .vgg_cta-ticks_xj4 li::before{background:#fff}
.vgg_cta-split-action_xj4{background:#fff;border-radius:var(--r-lg);padding:28px 26px;text-align:center;
  box-shadow:var(--sh-lg)}
.vgg_cta-split-h_xj4{margin:0 0 14px;font-family:var(--font-head);font-weight:var(--head-bold);color:var(--ink);
  font-size:var(--lead)}
.vgg_cta-split-action_xj4 .vgg_btn_xj4{width:100%}
.vgg_cta-split-fine_xj4{margin:14px 0 0;color:var(--muted);font-size:var(--small)}
@media(max-width:820px){.vgg_cta-split-inner_xj4{grid-template-columns:1fr;gap:24px;padding:34px 0}}
/* cta_variant: plain = a light, brand-outlined sign-off (dark text on the page bg). */
.vgg_cta-plain-inner_xj4{border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);padding:34px 34px 30px;
  max-width:820px;margin-left:auto;margin-right:auto}
.vgg_cta-plain_xj4 .vgg_eyebrow_xj4{color:var(--primary)}
.vgg_cta-plain_xj4 h2{color:var(--ink)}
.vgg_cta-plain_xj4 .vgg_lead_xj4{color:var(--body)}
.vgg_cta-plain_xj4 .vgg_cta-ticks_xj4{color:var(--body);display:block;margin:16px 0 22px;max-width:none}
.vgg_cta-plain_xj4 .vgg_cta-ticks_xj4 li::before{background:var(--primary)}
/* trust_variant: cards + plain treatments (band is the default brand strip above). */
.vgg_trust-sec_xj4{padding:40px 0}
.vgg_trust-sec--plain_xj4 .vgg_trust_xj4{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0}
.vgg_trust-sec--plain_xj4 .vgg_num_xj4,.vgg_trust-sec--cards_xj4 .vgg_num_xj4{color:var(--primary)}
.vgg_trust-sec--plain_xj4 .vgg_lbl_xj4,.vgg_trust-sec--cards_xj4 .vgg_lbl_xj4{color:var(--muted)}
.vgg_trust-sec--cards_xj4 .vgg_trust_xj4>div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px 16px}
/* intro_variant: split = heading beside the lead; rule = left with a brand accent. */
.vgg_intro-grid_xj4{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:start}
/* intro_variant form: prose left, a tinted action panel (nudge + CTA) right */
.vgg_intro-grid--action_xj4{grid-template-columns:1.15fr .85fr;align-items:center}
.vgg_intro-action_xj4{background:var(--bg-alt);border-radius:var(--r-lg);padding:28px 30px}
.vgg_intro-action_xj4 p{margin:0 0 18px;color:var(--body)}
.vgg_intro-action_xj4 .vgg_btn_xj4{width:100%}
.vgg_intro-head_xj4 h2{margin:.2rem 0 0}
.vgg_intro-body_xj4 .vgg_lead_xj4{margin:0}
.vgg_intro-rule_xj4{background:var(--bg-alt)}
.vgg_intro-rule_xj4 .vgg_rule-accent_xj4{display:block;width:52px;height:4px;border-radius:var(--r-sm);
  background:var(--primary);margin:0 0 18px}
@media(max-width:820px){.vgg_intro-grid_xj4{grid-template-columns:1fr;gap:16px}}
/* optional home block: how_we_work teaser — a compact numbered step grid. */
.vgg_hw-steps_xj4{list-style:none;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:22px 40px}
.vgg_hw-steps_xj4 li{display:flex;gap:15px;align-items:flex-start}
.vgg_hw-steps_xj4 .vgg_hw-n_xj4{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--primary-90);color:var(--primary);font-family:var(--font-head);
  font-weight:var(--head-bold);display:flex;align-items:center;justify-content:center}
.vgg_hw-steps_xj4 h3{margin:3px 0 .25rem;}
.vgg_hw-steps_xj4 p{margin:0;color:var(--body)}
@media(max-width:640px){.vgg_hw-steps_xj4{grid-template-columns:1fr;gap:18px}}

/* mega-menus */
.vgg_has-menu_xj4{position:relative}
/* dropdown parent: a non-navigating button styled like a nav link */
.vgg_nav-parent_xj4{background:none;border:0;cursor:pointer;color:var(--nav-fg);font-family:inherit;
  font-weight:600;font-size:var(--ui);line-height:1.4;padding:13px 16px;min-height:44px;
  border-bottom:3px solid transparent;display:flex;align-items:center}
.vgg_nav-parent_xj4.vgg_is-active_xj4,.vgg_nav-parent_xj4:focus-visible,
.vgg_has-menu_xj4.vgg_is-open_xj4 .vgg_nav-parent_xj4{border-bottom-color:var(--primary)}
@media (hover:hover) and (pointer:fine){.vgg_has-menu_xj4:hover .vgg_nav-parent_xj4{border-bottom-color:var(--primary)}}
/* caret: an inline SVG glyph inside a fixed 14px box, drawn symmetric about
   its centre so the open-state rotation about the box centre never shifts or
   wobbles it (the old translated+rotated pseudo-element did). The glyph is a
   per-site variance knob ([data-vgg_caret_xj4=...]); caret_motion (rotate|static)
   decides whether it turns at all — static only brightens to the link colour. */
.vgg_caret_xj4{display:inline-flex;align-items:center;justify-content:center;width:14px;
  height:14px;margin-left:6px;vertical-align:middle;opacity:.7;
  transition:transform .2s ease,opacity .2s ease;transform-origin:50% 50%}
.vgg_caret_xj4 svg{display:block}
.vgg_has-menu_xj4.vgg_is-open_xj4 .vgg_caret_xj4{opacity:1}
@media (hover:hover) and (pointer:fine){.vgg_has-menu_xj4:hover .vgg_caret_xj4{opacity:1}}
[data-vgg_caret-motion_xj4=rotate] .vgg_has-menu_xj4.vgg_is-open_xj4 .vgg_caret_xj4{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){[data-vgg_caret-motion_xj4=rotate] .vgg_has-menu_xj4:hover .vgg_caret_xj4{transform:rotate(180deg)}}
[data-vgg_caret-motion_xj4=rotate][data-vgg_caret_xj4=plus] .vgg_has-menu_xj4.vgg_is-open_xj4 .vgg_caret_xj4{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){[data-vgg_caret-motion_xj4=rotate][data-vgg_caret_xj4=plus] .vgg_has-menu_xj4:hover .vgg_caret_xj4{transform:rotate(45deg)}}
[data-vgg_caret_xj4=none] .vgg_caret_xj4{display:none}
/* dark menu, squared at the top so it reads as connected to the dark nav bar.
   The panel hangs from the header's foot, not from the link's foot: the link
   row sits inside the header's padding and above its bottom rule, so top:100%
   alone put the panel's top over that rule (operator). The site script sets
   --vgg_mega-drop_xj4 on each parent to the distance down to the header's foot; the
   ::before bridge spans that gap so the hover holds on the way down. */
.vgg_mega_xj4{--nav-surface:var(--surface);--nav-fg:var(--ink);--nav-fg-muted:var(--muted);
  position:absolute;top:calc(100% + var(--vgg_mega-drop_xj4,0px));left:0;min-width:250px;background:var(--nav-surface);
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:var(--shadow);padding:8px;display:none;z-index:60}
/* NB: dropdown panels carry their OWN surface (light), so nothing inside may
   use dark-panel literals (#fff text, rgba(255,255,255,…) borders/hovers) —
   white-on-white links are exactly what that produced (operator rule). Every
   dropdown colour is a theme token, so any panel surface stays legible. */
.vgg_mega_xj4 a{display:block;color:var(--nav-fg);padding:9px 12px;border-radius:var(--r-sm);
  font-weight:600;font-size:var(--small);border-bottom:0}
@media (hover:hover) and (pointer:fine){.vgg_mega_xj4 a:hover{background:var(--bg-alt);color:var(--primary);text-decoration:none}}
.vgg_mega-all_xj4{color:var(--primary);font-weight:600;border-top:1px solid var(--line);margin-top:4px;padding-top:9px}
.vgg_has-menu_xj4.vgg_is-open_xj4>.vgg_mega_xj4{display:block}
@media (hover:hover) and (pointer:fine){.vgg_has-menu_xj4:hover>.vgg_mega_xj4{display:block}}
.vgg_mega_xj4::before{content:"";position:absolute;left:0;right:0;
  top:calc(-1 * var(--vgg_mega-drop_xj4,0px));height:var(--vgg_mega-drop_xj4,0px)}
/* menu_skin pool (rule: tokens only — nothing inside .vgg_mega_xj4 is a dark literal) */
[data-vgg_menu_xj4=tinted] .vgg_mega_xj4{background:var(--bg-alt)}
@media (hover:hover) and (pointer:fine){[data-vgg_menu_xj4=tinted] .vgg_mega_xj4 a:hover{background:var(--surface);color:var(--primary)}}
[data-vgg_menu_xj4=floating] .vgg_mega_xj4{border:0;border-radius:var(--r-md);margin-top:8px;
  box-shadow:0 14px 36px rgba(0,0,0,.16)}
[data-vgg_menu_xj4=ruled] .vgg_mega_xj4 a{border-bottom:1px solid var(--line);border-radius:0}
@media (hover:hover) and (pointer:fine){[data-vgg_menu_xj4=ruled] .vgg_mega_xj4 a:hover{background:var(--bg-alt)}}
/* Round 26: five INDEPENDENT seeded axes over the menu_skin surface family —
   corners, row rules, hover, shadow, pointer. Desktop only (the mobile overlay
   under 900px keeps its own rules). Tokens only inside .vgg_mega_xj4 (no dark
   literals); hover changes colour/decoration only, never layout. The axes
   are stamped on <body> and out-specify the surface family, so the rules
   axis wins over the ruled skin's own hairline. */
@media (min-width:901px){
[data-vgg_menucorners_xj4=square] .vgg_mega_xj4{border-radius:0}
[data-vgg_menucorners_xj4=soft] .vgg_mega_xj4{border-radius:var(--r-sm)}
[data-vgg_menucorners_xj4=bottom] .vgg_mega_xj4{border-radius:0 0 var(--r-md) var(--r-md)}
[data-vgg_menurules_xj4=none] .vgg_mega_xj4 a{border-bottom:0}
[data-vgg_menurules_xj4=hairline] .vgg_mega_xj4 a{border-bottom:1px solid var(--line)}
[data-vgg_menurules_xj4=dotted] .vgg_mega_xj4 a{border-bottom:1px dotted var(--line)}
[data-vgg_menurules_xj4=inset] .vgg_mega_xj4 a{position:relative;border-bottom:0}
/* Inset draws its rule inside the row, so skip the option directly above the
   all-link: the all-link's own full-width top rule is the single rule at
   that seam (E1 keeps it for this axis). */
[data-vgg_menurules_xj4=inset] .vgg_mega_xj4 a:not(:last-child):not(:has(+ .vgg_mega-all_xj4))::after{content:"";position:absolute;
  left:12px;right:12px;bottom:0;border-bottom:1px solid var(--line)}
[data-vgg_menushadow_xj4=none] .vgg_mega_xj4{box-shadow:none}
[data-vgg_menushadow_xj4=soft] .vgg_mega_xj4{box-shadow:0 8px 24px rgba(0,0,0,.08)}
[data-vgg_menushadow_xj4=hard] .vgg_mega_xj4{box-shadow:0 12px 32px rgba(0,0,0,.16)}
[data-vgg_menushadow_xj4=line] .vgg_mega_xj4{box-shadow:none;border:1px solid var(--line);border-top:0}
/* Floating skin floats the panel 8px below the header; margin is not
   hoverable, so the bridge grows by those 8px. */
[data-vgg_menu_xj4=floating] .vgg_mega_xj4::before{top:calc(-8px - var(--vgg_mega-drop_xj4,0px));
  height:calc(8px + var(--vgg_mega-drop_xj4,0px))}
}
@media (min-width:901px) and (hover:hover) and (pointer:fine){[data-vgg_menuhover_xj4=tint] .vgg_mega_xj4 a:not(.vgg_btn_xj4):hover{background:var(--bg-alt);color:var(--primary)}
[data-vgg_menuhover_xj4=ink] .vgg_mega_xj4 a:not(.vgg_btn_xj4):hover{background:transparent;color:var(--primary)}
[data-vgg_menuhover_xj4=underline] .vgg_mega_xj4 a:not(.vgg_btn_xj4):hover{background:transparent;
  color:var(--primary);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.2em}
[data-vgg_menuhover_xj4=bar] .vgg_mega_xj4 a:not(.vgg_btn_xj4):hover{background:transparent;color:var(--primary);
  box-shadow:inset 3px 0 0 var(--primary);border-radius:0}}
/* R25 (C1.3): .vgg_mega_xj4 a and the ruled skin out-specify .vgg_btn_xj4 on the "All
   services" button — restore the primary button skin AFTER them so it never
   renders as black text on the brand blue with square corners. */
.vgg_mega_xj4 a.vgg_btn_xj4{display:inline-block;color:var(--cta-ink);background:var(--cta);
  border-radius:var(--r-btn);border-bottom:0;padding:13px 28px;font-weight:600}
@media (hover:hover) and (pointer:fine){.vgg_mega_xj4 a.vgg_btn_xj4:hover{background:var(--cta-hover);color:var(--cta-ink)}}
/* menu_skin=header retired (R31): its label strip only repeated the dropdown
   trigger, so a simple dropdown never restates its trigger as a header. */
/* breadcrumb placement post-pass shapes */
.vgg_crumbs_xj4.vgg_crumbs--inhero_xj4,.vgg_crumbs_xj4.vgg_crumbs--ineyebrow_xj4{padding:0 0 18px;border:0;background:none;
  font-size:var(--meta,.82rem)}
.vgg_crumbs_xj4.vgg_crumbs--ineyebrow_xj4{padding-bottom:12px}
/* the hero's own text colour, softened: muted on a plain hero, white on a photo */
.vgg_hero_xj4 .vgg_crumbs--inhero_xj4,.vgg_hero_xj4 .vgg_crumbs--ineyebrow_xj4{color:inherit;opacity:.8}
.vgg_hero_xj4 .vgg_crumbs--inhero_xj4 a,.vgg_hero_xj4 .vgg_crumbs--ineyebrow_xj4 a{color:inherit;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
/* nav_style rich/panel (the full-width mega panel) are retired: a Services
   parent that may hold as few as three items never needed a promo grid, and
   Locations stayed a plain dropdown throughout (operator, Sep 2026). Every
   nav dropdown is now the plain .vgg_mega_xj4 link list below. */
/* footer variants */
.vgg_footer--slim_xj4 .vgg_footer-slim_xj4{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;padding:34px 0 8px}
.vgg_footer-nav_xj4{display:flex;flex-wrap:wrap;gap:0 18px}
.vgg_footer-nav_xj4 a{color:var(--n-300);font-size:var(--small)}
.vgg_footer-nav--center_xj4{justify-content:center;margin:14px 0 4px}
.vgg_footer--centered_xj4 .vgg_footer-centered_xj4{text-align:center;padding:40px 0 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.vgg_footer-tagline_xj4{max-width:640px;margin:6px auto 4px}
.vgg_footer-bottom_xj4.vgg_center_xj4{justify-content:center;text-align:center}

/* resources / article */
.vgg_res-meta_xj4{font-size:var(--meta);color:var(--muted);margin-bottom:6px}
.vgg_article_xj4 .vgg_prose_xj4{max-width:var(--measure);margin:0 auto}
.vgg_article_xj4 .vgg_lead_xj4{margin-bottom:1.4rem}
/* rich article furniture: hero image, figures, charts, callouts, takeaways */
.vgg_article-hero_xj4{margin:0 0 1.6rem}
.vgg_article-hero_xj4 img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.vgg_prose_xj4 figure{margin:1.8rem 0}
.vgg_prose_xj4 figure img{width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--shadow)}
.vgg_prose_xj4 figcaption{margin-top:.5rem;font-size:var(--meta);color:var(--muted);text-align:center}
/* a callout is a tinted panel — never an accent stripe down its left edge
   (operator: thick left / top accent borders on cards read as generated) */
.vgg_callout_xj4{background:var(--primary-90);border-radius:var(--r-md);padding:16px 20px;margin:1.6rem 0}
.vgg_callout_xj4 h3,.vgg_callout_xj4 h4{margin:0 0 .4rem;color:var(--black)}
.vgg_callout_xj4 p{margin:0}
.vgg_callout_xj4 p+p{margin-top:.6rem}
.vgg_key-takeaways_xj4{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 22px;margin:1.6rem 0}
.vgg_key-takeaways_xj4 h2,.vgg_key-takeaways_xj4 h3{margin:0 0 .6rem;font-size:var(--h3)}
.vgg_key-takeaways_xj4 ul{margin:0;padding-left:1.1em}
.vgg_key-takeaways_xj4 li{margin-bottom:.4rem}
.vgg_diagram_xj4{margin:2rem 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.vgg_diagram_xj4 svg{width:100%;height:auto;display:block}
.vgg_diagram_xj4 figcaption{font-size:var(--meta);color:var(--muted);margin:.6rem 0 0}
/* inline SVG bar/comparison chart */
.vgg_chart_xj4{margin:2rem 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface)}
.vgg_chart-title_xj4{font-family:var(--font-head);font-weight:var(--head-bold);color:var(--black);margin:0 0 .3rem}
.vgg_chart-sub_xj4{font-size:var(--meta);color:var(--muted);margin:0 0 .8rem}
.vgg_barrow_xj4{display:grid;grid-template-columns:minmax(140px,36%) minmax(0,1fr) auto;gap:12px;align-items:center;
  margin:10px 0;padding-bottom:10px;border-bottom:1px solid var(--line)}
.vgg_chart_xj4 .vgg_barrow_xj4:last-of-type{border-bottom:0;padding-bottom:0}
.vgg_barrow_xj4 .vgg_blabel_xj4{font-size:var(--small);color:var(--body);min-width:0;overflow-wrap:anywhere;line-height:1.3}
.vgg_bartrack_xj4{background:var(--bg-alt);border-radius:var(--r-full);height:14px}
.vgg_barfill_xj4{border-radius:var(--r-full);opacity:1;background:var(--primary);min-width:2px;height:14px}
.vgg_barval_xj4{position:static;font-variant-numeric:tabular-nums;line-height:1;font-size:var(--meta);color:var(--body);min-width:3.5ch;text-align:right}
.vgg_chart-note_xj4{font-size:var(--meta);color:var(--muted);margin:.6rem 0 0}
[data-vgg_chart_xj4=slim] .vgg_barrow_xj4{grid-template-columns:1fr auto;grid-template-areas:"label val" "track track"}
[data-vgg_chart_xj4=slim] .vgg_blabel_xj4{grid-area:label}
[data-vgg_chart_xj4=slim] .vgg_bartrack_xj4{grid-area:track;height:8px}
[data-vgg_chart_xj4=slim] .vgg_barval_xj4{grid-area:val}
[data-vgg_chart_xj4=stacked] .vgg_barrow_xj4{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "track val"}
[data-vgg_chart_xj4=stacked] .vgg_blabel_xj4{grid-area:label}
[data-vgg_chart_xj4=stacked] .vgg_bartrack_xj4{grid-area:track;height:12px}
[data-vgg_chart_xj4=stacked] .vgg_barval_xj4{grid-area:val}
[data-vgg_chart_xj4=ruled] .vgg_chart_xj4{border:0;padding:0;background:transparent}
[data-vgg_chart_xj4=ruled] .vgg_barrow_xj4{border-bottom:1px solid var(--line);padding-bottom:12px}
@media(max-width:560px){.vgg_barrow_xj4{grid-template-columns:1fr}
  .vgg_barrow_xj4 .vgg_blabel_xj4,.vgg_bartrack_xj4,.vgg_barval_xj4{grid-column:1}
  .vgg_barval_xj4{text-align:left}}

/* responsive */
@media(max-width:900px){
  .vgg_hero-grid_xj4{grid-template-columns:1fr;gap:30px}
  .vgg_grid-3_xj4,.vgg_grid-4_xj4{grid-template-columns:repeat(2,1fr)}
  .vgg_footer-grid_xj4{grid-template-columns:1fr 1fr}
  .vgg_trust_xj4{grid-template-columns:repeat(2,1fr);gap:26px}
  .vgg_trust--3_xj4>div:first-child{grid-column:1/-1}
}
@media(max-width:680px){
  .vgg_nav-inner_xj4{flex-direction:column;align-items:stretch;padding:0;display:none}
  .vgg_nav-inner_xj4.vgg_open_xj4{display:flex}
  .vgg_nav-links_xj4{flex-direction:column;align-items:stretch;gap:0;padding:0;width:100%}
  .vgg_nav-links_xj4>li>a,.vgg_nav-links_xj4>li>.vgg_nav-parent_xj4{color:var(--ink)}
  .vgg_menu-toggle_xj4{display:block}
  .vgg_caret_xj4{display:none}
  .vgg_nav-cta--corner_xj4{display:none}
  /* keep the header row within a narrow viewport: cap the wordmark, and drop the
     header CTA button (its label length varies and would overflow) — the hamburger
     menu, the hero CTA and the optional sticky bar all keep a conversion path on
     mobile, so the header stays brand + menu toggle only. */
  .vgg_header-inner_xj4{gap:10px}
  .vgg_brand_xj4 img{max-width:60vw}
  .vgg_header-actions_xj4 .vgg_nav-cta_xj4{display:none}
  /* keep the hero within a narrow viewport: never let the copy column, the proof row
     or the CTAs exceed the screen. */
  .vgg_hero-copy_xj4{max-width:100%}
  .vgg_hero_xj4 .vgg_hero-proof_xj4{width:auto;max-width:100%}
  .vgg_hero-cta_xj4{width:100%}
  .vgg_hero-cta_xj4 .vgg_btn_xj4{flex:1 1 100%;min-width:0}
  /* Drawer is a light surface now (dark nav bars are banned) — dark text,
     hairline separators, mega children inherit the light nav fg. */
  .vgg_mainnav_xj4 .vgg_mega_xj4{--nav-fg:var(--ink)}
  .vgg_mega_xj4 a{color:var(--nav-fg);font-weight:400}
  .vgg_mega_xj4 a.vgg_btn_xj4{color:var(--cta-ink);background:var(--cta);padding:13px 28px;font-weight:600;border-bottom:0}
  .vgg_mega-all_xj4{color:var(--ink);border-top:0}
  .vgg_grid-2_xj4,.vgg_grid-3_xj4,.vgg_grid-4_xj4,.vgg_grid-2x2_xj4{grid-template-columns:1fr}
  .vgg_section_xj4{padding:var(--section-pad-m) 0}
  .vgg_btn--lg_xj4{min-width:0;width:100%}
}
@media (max-width:680px) and (hover:hover) and (pointer:fine){
  .vgg_mega_xj4 a:hover{background:var(--bg-alt);color:var(--ink)}
  .vgg_mega_xj4 a.vgg_btn_xj4:hover{background:var(--cta-hover);color:var(--cta-ink)}
}
[data-vgg_tex_xj4=corner] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4),[data-vgg_tex_xj4=side] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4){position:relative;isolation:isolate;overflow:clip}
[data-vgg_tex_xj4=corner] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4)::before,[data-vgg_tex_xj4=side] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4)::before{content:"";position:absolute;pointer-events:none;z-index:-1;aspect-ratio:1;background:var(--primary);opacity:.1;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M86 101.4 C86 87.4 108.4 84.6 114 97.2 S104.2 114.7 86 101.4Z%22/%3E%3Cpath d=%22M70 103.0 C70 73.0 118.0 67.0 130 94.0 S109.0 131.5 70 103.0Z%22/%3E%3Cpath d=%22M52 104.8 C52 56.8 128.8 47.199999999999996 148 90.4 S114.4 150.4 52 104.8Z%22/%3E%3Cpath d=%22M32 106.8 C32 38.8 140.8 25.19999999999999 168 86.4 S120.4 171.4 32 106.8Z%22/%3E%3Cpath d=%22M10 109.0 C10 19.0 154.0 0.9999999999999858 190 82.0 S127.0 194.5 10 109.0Z%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M86 101.4 C86 87.4 108.4 84.6 114 97.2 S104.2 114.7 86 101.4Z%22/%3E%3Cpath d=%22M70 103.0 C70 73.0 118.0 67.0 130 94.0 S109.0 131.5 70 103.0Z%22/%3E%3Cpath d=%22M52 104.8 C52 56.8 128.8 47.199999999999996 148 90.4 S114.4 150.4 52 104.8Z%22/%3E%3Cpath d=%22M32 106.8 C32 38.8 140.8 25.19999999999999 168 86.4 S120.4 171.4 32 106.8Z%22/%3E%3Cpath d=%22M10 109.0 C10 19.0 154.0 0.9999999999999858 190 82.0 S127.0 194.5 10 109.0Z%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
[data-vgg_tex_xj4=corner] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4)::before{right:-48px;top:-48px;width:min(42vw,460px)}
[data-vgg_tex_xj4=side] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4)::before{right:-110px;top:50%;width:min(34vw,380px);transform:translateY(-50%)}
@media (max-width:640px){[data-vgg_tex_xj4=corner] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4)::before,[data-vgg_tex_xj4=side] .vgg_section--alt_xj4:not(.vgg_section--flat_xj4)::before{width:52vw;opacity:.07}}