@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(inter-f11d729bb0.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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(inter-f11d729bb0.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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(inter-f11d729bb0.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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(inter-f11d729bb0.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:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(sora-779e9507b3.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:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(sora-779e9507b3.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:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(sora-779e9507b3.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:#b73475;--primary-hover:#9d2561;--primary-60:#cd709e;--primary-70:#d798b8;--primary-90:#f2e3eb;--cta:#b73475;--cta-hover:#9d2561;--cta-ink:#ffffff;--btn-light-hover:#e0e0e0;--black:#000000;--ink:#000000;--body:#1f2328;--muted:#5b636c;--line:#e5e7eb;--link:#b73475;--on-primary:#ffffff;--bg:#ffffff;--bg-alt:#f5f6f8;--surface:#ffffff;--wrap:1140px;--shadow:0 2px 6px rgba(0,0,0,.06);--r-sm:4px;--r-md:8px;--r-lg:18px;--r-xl:24px;--r-full:9999px;--r-btn:18px;--font-head:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--section-pad-d:60px;--section-pad-m:44px;--grid-gap:22px;--head-weight:700;--head-bold:700;--body-size:17px;--body-leading:1.5;--transition:.15s;--accent:#258354;--accent-soft:#e3f2eb;--accent-ink:#ffffff;--band-bg:#0b0b0c;--band-ink:#e5e7eb;--band-muted:#aab0b7;--n-50:#f9fafb;--n-300:#d1d5db;--n-800:#1f2937;--sh-lg:0 18px 44px rgba(0,0,0,.28);--h1:clamp(32px,4.6vw,50px);--h2:clamp(26px,3vw,36px);--h3:clamp(20px,1.6vw,22px);--h4:clamp(18px,1.4vw,20px);--heading-tracking:-0.01em;--measure:min(760px,68ch);--foot-brand:#6f2047}
*{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}
.utz__wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.utz__section{padding:var(--section-pad-d) 0}
.utz__section--alt{background:var(--bg-alt)}
.utz__section--dark{background:var(--band-bg);color:var(--band-ink)}
.utz__section--dark h2,.utz__section--dark 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. */
.utz__section .utz__eyebrow{margin:0 0 10px}
.utz__eyebrow + h2,.utz__eyebrow + h1{margin-top:0}
.utz__section h2 + .utz__lead,.utz__section h2 + p.utz__mw-760{margin-top:12px}
.utz__section .utz__lead + *:not(.utz__lead),.utz__section h2 + *:not(.utz__lead):not(p.utz__mw-760){margin-top:var(--head-gap)}
.utz__lead{font-size:var(--lead);line-height:1.55;color:var(--body)}
.utz__eyebrow{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-utz__eb=line] .utz__eyebrow::before{content:"";display:inline-block;width:26px;height:2px;
  background:currentColor;vertical-align:middle;margin-right:12px;opacity:.85}
[data-utz__eb=line] .utz__eyebrow::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-utz__eb=split] .utz__eyebrow .utz__eb-a{color:var(--link)}
[data-utz__eb=split] .utz__eyebrow .utz__eb-sep{color:var(--muted);margin:0 .1em}
[data-utz__eb=split] .utz__eyebrow .utz__eb-b{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 */
.utz__hero .utz__eyebrow .utz__eb-a{color:inherit}
.utz__hero .utz__eyebrow .utz__eb-sep,.utz__hero .utz__eyebrow .utz__eb-b{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 */
.utz__eyebrow.utz__hero-motto,.utz__hero .utz__eyebrow.utz__hero-motto{text-transform:none;letter-spacing:normal;
  font-size:var(--ui)}
/* the tagline under the footer wordmark */
.utz__footer-brandline .utz__footer-motto{margin:6px 0 0;font-weight:600}
.utz__center{text-align:center}
.utz__cta-row{margin-top:18px}
.utz__cta-row.utz__center{text-align:center}
.utz__skip{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)}
.utz__skip: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-utz__measure=compact]{--measure:min(700px,62ch);--measure-wide:min(840px,74ch)}
[data-utz__measure=roomy]{--measure:min(820px,74ch);--measure-wide:min(960px,86ch)}
.utz__mw-720{max-width:var(--measure);margin-left:auto;margin-right:auto}
.utz__mw-760{max-width:var(--measure);margin-left:auto;margin-right:auto}
.utz__lead-narrow{max-width:var(--measure)}
.utz__form-card--narrow{max-width:520px}
.utz__mw-640{max-width:640px;margin-left:auto;margin-right:auto}
.utz__mw-880{max-width:var(--measure-wide);margin-left:auto;margin-right:auto}
/* buttons */
.utz__btn{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){.utz__btn:hover{background:var(--cta-hover);text-decoration:none;color:var(--cta-ink)}}
.utz__btn--lg{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. */
.utz__btn--light{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.utz__btn--light:hover{background:var(--btn-light-hover);color:var(--ink)}}

/* header + nav */
.utz__site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  --utz__menu-top:64px}
.utz__header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 20px;max-width:var(--wrap);margin:0 auto}
.utz__brand{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){.utz__brand:hover{text-decoration:none}}
.utz__brand svg{display:block}
.utz__header-actions{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 .utz__nav-links 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. */
.utz__nav-cta{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){.utz__nav-cta:hover{border-bottom-color:var(--primary);text-decoration:none}}
/* every layout breaks the CTA out of .utz__nav-links, so only the tworow nav row
   ever needs to centre it as a flex item */
.utz__header-navrow .utz__nav-cta{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. */
.utz__nav-cta--arrow .utz__nav-cta-glyph{display:inline-flex;align-items:center;vertical-align:middle;
  margin-left:.35em;transition:transform .2s}
@media (hover:hover) and (pointer:fine){.utz__nav-cta--arrow:hover .utz__nav-cta-glyph{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. */
.utz__nav-cta--highlight{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){.utz__nav-cta--highlight:hover{background-size:100% 1.1em;
  background-position:0 calc(50% + .12em)}}
.utz__nav-cta--mark{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. */
.utz__nav-cta-mark{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){.utz__nav-cta--mark:hover .utz__nav-cta-mark{opacity:1}}
.utz__nav-cta--slide{position:relative;border-bottom:0}
.utz__nav-cta--slide::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){.utz__nav-cta--slide: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. */
.utz__nav-cta--boxed{border:1.5px solid var(--primary);border-radius:var(--r-btn);padding:8px 14px;margin:0 8px}
@media (hover:hover) and (pointer:fine){.utz__nav-cta--boxed:hover{background:var(--primary-90)}}
.utz__nav-cta-icon{display:inline-flex;vertical-align:middle;margin-left:.4em}
.utz__nav-cta-icon svg{display:block;width:14px;height:14px}
@media(prefers-reduced-motion:reduce){.utz__nav-cta--arrow .utz__nav-cta-glyph,.utz__nav-cta--slide::after,.utz__more .utz__glyph{transition:none}}
.utz__mainnav{--nav-surface:transparent;--nav-fg:var(--ink);--nav-fg-muted:var(--muted);
  background:var(--nav-surface)}
.utz__nav-inner{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;padding:0 12px}
.utz__nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.utz__nav-links 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}
.utz__nav-links a[aria-current=page]{text-decoration:none;
  color:var(--nav-fg);border-bottom-color:var(--primary)}
@media (hover:hover) and (pointer:fine){.utz__nav-links a:hover{text-decoration:none;
  color:var(--nav-fg);border-bottom-color:var(--primary)}}
.utz__menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px 10px;min-width:44px;min-height:44px}
.utz__menu-toggle 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 */
.utz__head--centered .utz__header-brand-row{justify-content:center;padding:16px 12px 10px;
  position:relative}
.utz__nav-cta--corner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.utz__head--centered .utz__nav-inner{justify-content:center}
.utz__head--centered .utz__nav-center{display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  justify-content:center}
.utz__head--centered .utz__nav-links a,.utz__head--centered .utz__nav-parent{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 .utz__site-header-scoped
   selectors outrank the head--* aria-current link styles on specificity, so
   the reset holds wherever it sits in the sheet. */
.utz__site-header .utz__nav-links .utz__nav-cta[aria-current],.utz__site-header .utz__nav-links .utz__nav-cta.utz__is-active,
.utz__nav-cta[aria-current],.utz__nav-cta.utz__is-active{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. */
.utz__head--brandcenter .utz__header-inner{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:12px;padding-top:18px;padding-bottom:18px}
.utz__head--brandcenter .utz__brand{grid-column:2;justify-self:center}
.utz__head--brandcenter .utz__hc-right{display:flex;align-items:center;justify-content:flex-end;
  gap:8px}
.utz__head--brandcenter .utz__header-actions{min-width:0}
.utz__head--brandcenter .utz__nav-inner{display:none}
.utz__head--brandcenter .utz__nav-links{flex-wrap:nowrap}
.utz__head--brandcenter .utz__nav-links a,.utz__head--brandcenter .utz__nav-parent{color:var(--ink);
  padding:8px 12px;border-bottom:0;white-space:nowrap}
.utz__head--brandcenter .utz__nav-links>li>a[aria-current=page],
.utz__head--brandcenter .utz__nav-parent.utz__is-active{color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.utz__head--brandcenter .utz__nav-links>li>a:hover{color:var(--primary);border-bottom:0}}
.utz__head--brandcenter .utz__header-actions .utz__menu-toggle{display:none}
@media(max-width:1020px){
  .utz__head--brandcenter .utz__header-inner{display:flex;justify-content:space-between}
  .utz__head--brandcenter .utz__nav-links{display:none}
  .utz__head--brandcenter .utz__header-actions .utz__menu-toggle{display:block}
  .utz__head--brandcenter .utz__nav-inner.utz__open{display:flex}
  .utz__head--brandcenter .utz__nav-inner.utz__open .utz__nav-links{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. */
.utz__head--centered .utz__header-actions .utz__nav-cta,.utz__head--centered .utz__header-actions .utz__menu-toggle{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 */
  .utz__head--centered{display:flex;flex-wrap:wrap;align-items:center}
  .utz__head--centered .utz__nav-cta--corner{display:none}
  .utz__head--centered .utz__header-brand-row{flex:1 1 0;min-width:0;padding-left:48px}
  .utz__head--centered .utz__header-actions{padding-right:12px}
  .utz__head--centered .utz__mainnav{flex:0 0 100%;order:3}
  .utz__head--centered .utz__nav-links{display:none}
  .utz__head--centered .utz__header-actions .utz__menu-toggle{display:block}
  .utz__head--centered .utz__nav-inner.utz__open{display:flex}
  .utz__head--centered .utz__nav-inner.utz__open .utz__nav-links{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). */
.utz__head--inline .utz__mainnav,.utz__head--split .utz__mainnav{--nav-surface:transparent;--nav-fg:var(--ink);
  --nav-fg-muted:var(--muted);background:var(--nav-surface)}
.utz__head--inline .utz__nav-inner,.utz__head--split .utz__nav-inner{padding:0;max-width:none;margin:0}
.utz__head--inline .utz__nav-links a,.utz__head--split .utz__nav-links a,
.utz__head--inline .utz__nav-parent,.utz__head--split .utz__nav-parent{color:var(--nav-fg);padding:8px 13px;
  border-bottom:0;white-space:nowrap}
.utz__head--inline .utz__nav-links>li>a[aria-current=page],.utz__head--split .utz__nav-links>li>a[aria-current=page],
.utz__head--inline .utz__nav-parent.utz__is-active,.utz__head--split .utz__nav-parent.utz__is-active{color:var(--primary);
  border-bottom:0}
@media (hover:hover) and (pointer:fine){.utz__head--inline .utz__nav-links>li>a:hover,
.utz__head--split .utz__nav-links>li>a:hover{color:var(--primary);
  border-bottom:0}}
/* inline: one row — brand | nav (fills the middle) | actions. */
.utz__head--inline .utz__mainnav{flex:1}
.utz__head--inline .utz__nav-inner{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.) */
.utz__head--split .utz__header-cluster{flex:1;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:20px}
.utz__head--split .utz__mainnav{justify-self:center}
.utz__head--split .utz__nav-inner{gap:2px}
/* header_layout: dual_end — brand | mid links | end-cluster (outline secondary
   + solid primary). Cluster sits OUTSIDE .utz__nav-links (R2 still forbids pills
   inside the link row; end-cluster dual buttons are OK). Mobile wave-1 shows
   a single primary in .utz__nav-cta-cluster--menu when the menu is open. */
.utz__head--dual_end .utz__header-inner{display:flex;align-items:center;gap:16px;
  justify-content:space-between}
.utz__head--dual_end .utz__mainnav{flex:1;min-width:0}
.utz__head--dual_end .utz__nav-inner{padding:0;max-width:none;margin:0;justify-content:center}
.utz__head--dual_end .utz__nav-links{flex-wrap:nowrap;justify-content:center}
.utz__head--dual_end .utz__nav-links a,.utz__head--dual_end .utz__nav-parent{color:var(--ink);
  padding:8px 12px;border-bottom:0;white-space:nowrap}
.utz__head--dual_end .utz__nav-links>li>a[aria-current=page],
.utz__head--dual_end .utz__nav-parent.utz__is-active{color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.utz__head--dual_end .utz__nav-links>li>a:hover{color:var(--primary);border-bottom:0}}
.utz__nav-cta-cluster{display:flex;align-items:center;gap:10px;flex-shrink:0}
.utz__nav-cta-cluster .utz__nav-cta{min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;box-sizing:border-box}
.utz__nav-cta-cluster .utz__nav-cta--boxed{margin:0}
.utz__nav-cta-cluster--menu{display:none}
.utz__head--dual_end .utz__header-actions .utz__nav-cta{display:none}
@media(max-width:680px){
  .utz__head--dual_end .utz__nav-cta-cluster:not(.utz__nav-cta-cluster--menu){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.utz__menu-open), 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. */
.utz__menu-head{display:none}
@media(max-width:1020px){
  html.utz__menu-open,html.utz__menu-open body{overflow:hidden;overscroll-behavior:none}
  .utz__site-header .utz__nav-inner.utz__open{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(--utz__menu-top,0px));
    max-height:calc(100dvh - var(--utz__menu-top,0px))}
  .utz__site-header .utz__nav-inner.utz__open>*{flex-shrink:0}
  .utz__site-header .utz__nav-inner.utz__open .utz__menu-head{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)}
  .utz__menu-close{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}
  .utz__menu-close svg{display:block;width:22px;height:22px}
  .utz__site-header .utz__nav-inner.utz__open .utz__nav-links{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). */
  .utz__site-header .utz__nav-inner.utz__open .utz__nav-links>li>a:not(.utz__nav-cta):not(.utz__btn),.utz__site-header .utz__nav-inner.utz__open .utz__nav-links>li>.utz__nav-parent{
    box-sizing:border-box;width:100%;text-align:left;padding:13px 20px;
    border-bottom:1px solid var(--line);border-radius:0;white-space:normal}
  .utz__site-header .utz__nav-inner.utz__open .utz__mega a:not(.utz__btn){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 */
  .utz__site-header .utz__nav-inner.utz__open .utz__nav-parent{justify-content:space-between;gap:12px}
  .utz__site-header .utz__nav-inner.utz__open .utz__nav-parent>[aria-hidden=true]{display:none}
  .utz__site-header .utz__nav-inner.utz__open .utz__nav-parent::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}
  .utz__site-header .utz__nav-inner.utz__open .utz__has-menu.utz__is-open>.utz__nav-parent::after{transform:rotate(-135deg);margin-top:3px}
  .utz__site-header .utz__nav-inner.utz__open .utz__mega{position:static;display:none;background:transparent;border:0;
    box-shadow:none;padding:0 0 6px;margin:0;min-width:0;--nav-surface:transparent}
  .utz__site-header .utz__nav-inner.utz__open .utz__has-menu.utz__is-open>.utz__mega{display:block}
  .utz__site-header .utz__nav-inner.utz__open .utz__has-menu:not(.utz__is-open)>.utz__mega{display:none}
  .utz__site-header .utz__nav-inner.utz__open .utz__mega a:not(.utz__btn)::after{display:none}
  .utz__site-header .utz__nav-inner.utz__open .utz__nav-cta-cluster--menu{display:flex;flex-direction:column;gap:10px}
  .utz__site-header .utz__nav-cta-cluster--menu{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))}
  .utz__nav-cta-cluster--menu .utz__nav-cta{width:100%;justify-content:center}
  /* drawer: a side panel sliding in from the right edge over a scrim */
  [data-utz__mobilemenu=drawer] .utz__nav-inner.utz__open{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:utz__mm-in-x .22s ease-out}
  /* overlay: the whole screen, large type, a plus/minus accordion glyph */
  [data-utz__mobilemenu=overlay] .utz__nav-inner.utz__open{top:0;bottom:0;width:100%;
    height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
    animation:utz__mm-in-fade .18s ease-out}
  [data-utz__mobilemenu=overlay] .utz__nav-inner.utz__open .utz__nav-links>li>a:not(.utz__nav-cta):not(.utz__btn),
  [data-utz__mobilemenu=overlay] .utz__nav-inner.utz__open .utz__nav-links>li>.utz__nav-parent{
    font-size:1.25rem;padding:16px 24px}
  [data-utz__mobilemenu=overlay] .utz__nav-inner.utz__open .utz__mega a:not(.utz__btn){padding:13px 40px;font-size:1rem}
  [data-utz__mobilemenu=overlay] .utz__nav-inner.utz__open .utz__menu-head{padding:0 14px}
  [data-utz__mobilemenu=overlay] .utz__nav-inner.utz__open .utz__nav-parent::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-utz__mobilemenu=overlay] .utz__nav-inner.utz__open .utz__has-menu.utz__is-open>.utz__nav-parent::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-utz__mobilemenu=sheet] .utz__nav-inner.utz__open{top:var(--utz__menu-top,64px);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    border-radius:0 0 var(--r-md) var(--r-md);animation:utz__mm-in-y .18s ease-out}
  [data-utz__mobilemenu=sheet] .utz__nav-inner.utz__open .utz__menu-head{min-height:48px}
  .utz__site-header[data-utz__mobilemenu=drawer]::after,.utz__site-header[data-utz__mobilemenu=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.utz__menu-open .utz__site-header[data-utz__mobilemenu=drawer]::after{display:block}
  html.utz__menu-open .utz__site-header[data-utz__mobilemenu=sheet]::after{display:block;top:var(--utz__menu-top,64px)}
}
@keyframes utz__mm-in-x{from{transform:translateX(100%)}to{transform:none}}
@keyframes utz__mm-in-fade{from{opacity:0}to{opacity:1}}
@keyframes utz__mm-in-y{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  [data-utz__mobilemenu] .utz__nav-inner.utz__open{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){
  .utz__site-header .utz__header-actions .utz__menu-toggle,.utz__site-header .utz__nav-inner .utz__menu-head{display:none}
  .utz__site-header .utz__nav-inner{display:flex;position:static;flex-direction:column;
    align-items:stretch;max-width:none;width:100%;padding:0}
  .utz__site-header .utz__nav-inner .utz__nav-links{display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:0}
  .utz__site-header .utz__nav-inner .utz__mega{position:static;display:block;border:0;box-shadow:none;
    background:transparent;padding:0 0 6px;min-width:0}
  .utz__site-header .utz__nav-inner .utz__nav-parent::after,
  .utz__site-header .utz__nav-inner .utz__nav-parent>[aria-hidden=true]{display:none}
  .utz__site-header .utz__nav-inner .utz__nav-cta-cluster--menu{display:flex;flex-direction:column;
    gap:10px;padding:12px 20px}
}
@media(max-width:680px){
  .utz__head--split .utz__header-cluster{gap:0;grid-template-columns:auto}
  .utz__head--split .utz__mainnav{justify-self:stretch}
  .utz__site-header{position:sticky}
}

/* hero (background varies by imagery strategy; filled by _hero_css via .utz__hero{position:relative;color:#fff;padding:72px 0 88px;background-color:var(--black);background-size:cover;background-position:center}
.utz__hero h1,.utz__hero .utz__lead,.utz__hero .utz__about-def,.utz__hero .utz__eyebrow{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.45)}
.utz__hero{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/home-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero-717x403.webp) type("image/webp") 1x,url(/img/home-hero.webp) type("image/webp") 2x,url(/img/home-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/home-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--services{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/services-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/services-hero-717x403.webp) type("image/webp") 1x,url(/img/services-hero.webp) type("image/webp") 2x,url(/img/services-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/services-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--areas{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/areas-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/areas-hero-717x403.webp) type("image/webp") 1x,url(/img/areas-hero.webp) type("image/webp") 2x,url(/img/areas-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/areas-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--resources{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/resources-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/resources-hero-717x403.webp) type("image/webp") 1x,url(/img/resources-hero.webp) type("image/webp") 2x,url(/img/resources-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/resources-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--splitrev{background-image:linear-gradient(90deg,rgba(17,10,10,.94) 0%,rgba(17,10,10,.72) 34%,rgba(17,10,10,0) 68%),url(/img/home-hero.jpg);background-image:linear-gradient(90deg,rgba(17,10,10,.94) 0%,rgba(17,10,10,.72) 34%,rgba(17,10,10,0) 68%),image-set(url(/img/home-hero-717x403.webp) type("image/webp") 1x,url(/img/home-hero.webp) type("image/webp") 2x,url(/img/home-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/home-hero.jpg) type("image/jpeg") 2x);background-position:left center,right center}
.utz__hero--boxed .utz__hero-box{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/home-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero-717x403.webp) type("image/webp") 1x,url(/img/home-hero.webp) type("image/webp") 2x,url(/img/home-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/home-hero.jpg) type("image/jpeg") 2x)}
@media (min-width:768px){.utz__hero{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero.webp) type("image/webp") 1x,url(/img/home-hero.jpg) type("image/jpeg") 1x)}.utz__hero--services{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/services-hero.webp) type("image/webp") 1x,url(/img/services-hero.jpg) type("image/jpeg") 1x)}.utz__hero--areas{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/areas-hero.webp) type("image/webp") 1x,url(/img/areas-hero.jpg) type("image/jpeg") 1x)}.utz__hero--resources{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/resources-hero.webp) type("image/webp") 1x,url(/img/resources-hero.jpg) type("image/jpeg") 1x)}.utz__hero--splitrev{background-image:linear-gradient(90deg,rgba(17,10,10,.94) 0%,rgba(17,10,10,.72) 34%,rgba(17,10,10,0) 68%),image-set(url(/img/home-hero.webp) type("image/webp") 1x,url(/img/home-hero.jpg) type("image/jpeg") 1x)}.utz__hero--boxed .utz__hero-box{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero.webp) type("image/webp") 1x,url(/img/home-hero.jpg) type("image/jpeg") 1x)}}) */
.utz__hero{position:relative;color:#fff;padding:72px 0 88px;background-color:var(--black);background-size:cover;background-position:center}
.utz__hero h1,.utz__hero .utz__lead,.utz__hero .utz__about-def,.utz__hero .utz__eyebrow{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.45)}
.utz__hero{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/home-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero-717x403.webp) type("image/webp") 1x,url(/img/home-hero.webp) type("image/webp") 2x,url(/img/home-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/home-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--services{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/services-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/services-hero-717x403.webp) type("image/webp") 1x,url(/img/services-hero.webp) type("image/webp") 2x,url(/img/services-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/services-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--areas{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/areas-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/areas-hero-717x403.webp) type("image/webp") 1x,url(/img/areas-hero.webp) type("image/webp") 2x,url(/img/areas-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/areas-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--resources{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/resources-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/resources-hero-717x403.webp) type("image/webp") 1x,url(/img/resources-hero.webp) type("image/webp") 2x,url(/img/resources-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/resources-hero.jpg) type("image/jpeg") 2x)}
.utz__hero--splitrev{background-image:linear-gradient(90deg,rgba(17,10,10,.94) 0%,rgba(17,10,10,.72) 34%,rgba(17,10,10,0) 68%),url(/img/home-hero.jpg);background-image:linear-gradient(90deg,rgba(17,10,10,.94) 0%,rgba(17,10,10,.72) 34%,rgba(17,10,10,0) 68%),image-set(url(/img/home-hero-717x403.webp) type("image/webp") 1x,url(/img/home-hero.webp) type("image/webp") 2x,url(/img/home-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/home-hero.jpg) type("image/jpeg") 2x);background-position:left center,right center}
.utz__hero--boxed .utz__hero-box{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),url(/img/home-hero.jpg);background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero-717x403.webp) type("image/webp") 1x,url(/img/home-hero.webp) type("image/webp") 2x,url(/img/home-hero-717x403.jpg) type("image/jpeg") 1x,url(/img/home-hero.jpg) type("image/jpeg") 2x)}
@media (min-width:768px){.utz__hero{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero.webp) type("image/webp") 1x,url(/img/home-hero.jpg) type("image/jpeg") 1x)}.utz__hero--services{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/services-hero.webp) type("image/webp") 1x,url(/img/services-hero.jpg) type("image/jpeg") 1x)}.utz__hero--areas{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/areas-hero.webp) type("image/webp") 1x,url(/img/areas-hero.jpg) type("image/jpeg") 1x)}.utz__hero--resources{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/resources-hero.webp) type("image/webp") 1x,url(/img/resources-hero.jpg) type("image/jpeg") 1x)}.utz__hero--splitrev{background-image:linear-gradient(90deg,rgba(17,10,10,.94) 0%,rgba(17,10,10,.72) 34%,rgba(17,10,10,0) 68%),image-set(url(/img/home-hero.webp) type("image/webp") 1x,url(/img/home-hero.jpg) type("image/jpeg") 1x)}.utz__hero--boxed .utz__hero-box{background-image:linear-gradient(rgba(183,52,117,0.45),rgba(20,12,12,0.55)),image-set(url(/img/home-hero.webp) type("image/webp") 1x,url(/img/home-hero.jpg) type("image/jpeg") 1x)}}
.utz__hero h1{color:#fff}
.utz__hero .utz__lead,.utz__hero .utz__about-def{color:var(--primary-90)}
.utz__hero .utz__eyebrow{color:var(--accent-soft)}
.utz__hero-grid{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 */
.utz__hero-grid--flip{grid-template-columns:.9fr 1.1fr}
.utz__why-head{margin-bottom:26px}
.utz__hero-copy{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. */
.utz__hero-proof{list-style:none;padding:0;margin:18px 0 22px;display:flex;flex-wrap:wrap;
  gap:9px 22px}
.utz__hero-proof li{position:relative;padding-left:26px;color:#f2ecec;font-weight:600;font-size:var(--small)}
.utz__hero-proof 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)}
.utz__hero-cta{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 */
.utz__hero .utz__lead,.utz__hero .utz__about-def{max-width:var(--measure)}
.utz__hero .utz__lead + .utz__hero-cta{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. */
.utz__btn--outline-light{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
@media (hover:hover) and (pointer:fine){.utz__btn--outline-light:hover{background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 2px #fff}}
.utz__btn--ghost{background:#fff;color:var(--black);
  box-shadow:inset 0 0 0 2px var(--black)}
@media (hover:hover) and (pointer:fine){.utz__btn--ghost: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. */
.utz__hero--splitrev .utz__hero-copy{max-width:540px}
/* strip: a full-width ticked proof band beneath the hero copy (banner + stack). */
.utz__hero-strip{margin-top:34px;border-top:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.14)}
.utz__hero-strip .utz__wrap{padding-top:20px;padding-bottom:20px}
.utz__hero--banner .utz__hero-strip{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. */
.utz__hero--has-strip,.utz__hero:has(> .utz__hero-strip){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. */
.utz__hero--fullbleed{min-height:min(72vh,680px);display:flex;flex-direction:column;
  justify-content:center;padding-top:72px;padding-bottom:72px}
.utz__hero--fullbleed>.utz__wrap{width:100%}
.utz__hero--fullbleed .utz__hero-copy{max-width:620px}
@media(max-width:680px){.utz__hero--fullbleed{min-height:0}}
.utz__hero-proof--strip{margin:0;justify-content:center;gap:12px 30px}
.utz__hero-proof--strip 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 .utz__hero-copy left heroes whose builders emit
   bare children (no .utz__hero-copy wrapper: area/service heroes) with a mixed
   left-heading/centred-body hero (operator rule: never a mix). */
[data-utz__halign=center] .utz__hero{text-align:center}
[data-utz__halign=center] .utz__hero .utz__hero-copy{margin-left:auto;margin-right:auto;text-align:center}
[data-utz__halign=center] .utz__hero .utz__wrap.utz__mw-760{text-align:center}
[data-utz__halign=center] .utz__hero .utz__hero-cta{justify-content:center}
/* eyebrow markers with rule pseudo-elements re-centre via their own rules;
   keep the eyebrow text centred with the heading */
[data-utz__halign=center] .utz__hero .utz__eyebrow{text-align:center}
/* a hero whose copy sits in a .utz__center 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) */
.utz__center .utz__hero-copy{margin-left:auto;margin-right:auto}
.utz__center .utz__hero-cta{justify-content:center}
.utz__center .utz__hero-proof{justify-content:center}
[data-utz__halign=center] .utz__hero .utz__lead,[data-utz__halign=center] .utz__hero .utz__about-def{margin-left:auto;margin-right:auto}
[data-utz__halign=center] .utz__hero .utz__hero-proof{justify-content:center}
@media (max-width:640px){[data-utz__halign=center] .utz__hero,[data-utz__halign=center] .utz__hero .utz__hero-copy,
[data-utz__halign=center] .utz__hero .utz__wrap.utz__mw-760,[data-utz__halign=center] .utz__hero .utz__eyebrow{text-align:left}
[data-utz__halign=center] .utz__hero .utz__hero-cta,[data-utz__halign=center] .utz__hero .utz__hero-proof{justify-content:flex-start}
[data-utz__halign=center] .utz__hero .utz__lead,[data-utz__halign=center] .utz__hero .utz__about-def{margin-left:0}
.utz__hero .utz__lead-more{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-utz__headcase=title] h1,[data-utz__headcase=title] h2,[data-utz__headcase=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 .utz__wrap. */
[data-utz__container=contained]{--wrap:1040px}
/* nav_caps: uppercase primary nav labels with tracking (default 'normal' = as-is). */
[data-utz__navcaps=upper] .utz__nav-links a,[data-utz__navcaps=upper] .utz__nav-parent,
[data-utz__navcaps=upper] .utz__nav-cta{--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 .utz__nav-links. */
.utz__nav-cta--solid{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){.utz__nav-cta--solid: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 .utz__btn grammar,
   never an outline box, an underline stroke or bare text. Placed after every
   .utz__nav-cta--<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). */
.utz__nav-cta--corner{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){.utz__nav-cta--corner:hover{background:var(--cta-hover);color:var(--cta-ink);text-decoration:none}}
.utz__nav-cta--corner.utz__nav-cta--boxed{border:0}
.utz__nav-cta--corner.utz__nav-cta--highlight{background-image:none}
.utz__nav-cta--corner.utz__nav-cta--slide::after,.utz__nav-cta--corner.utz__nav-cta--mark::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). */
.utz__footer-split{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:48px;padding:56px 0 32px}
.utz__footer-split-brand .utz__footer-tagline{margin:12px 0 0;max-width:420px}
.utz__footer-split-links{display:flex;flex-wrap:wrap;gap:28px 40px}
.utz__footer-split-links>div{flex:1 1 130px}
.utz__footer-split-links>div:has(li:nth-child(8)){flex:2 1 260px}
.utz__footer-split-links>div:has(li:nth-child(8)) ul{columns:2;column-gap:28px}
.utz__footer-split-links>div:has(li:nth-child(8)) li{break-inside:avoid}
/* footer_style: contactbar — three contact cells, one link row */
.utz__footer-cbar--two{grid-template-columns:1.2fr 1fr}
.utz__footer-cbar{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding:48px 0 28px;
  border-bottom:1px solid var(--n-800)}
.utz__footer-cell .utz__footer-tagline{margin:10px 0 0;max-width:380px}
.utz__footer-cell .utz__footer-addr,.utz__footer-cell .utz__footer-email{margin-top:0}
.utz__footer-nav--row{padding:22px 0 18px}
/* footer_style: sitemap — a grouped full-width index over the brand row */
.utz__footer-sitemap{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
   .utz__footer-grid--nap. */
.utz__footer-sitemap-groups{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px 32px}
.utz__footer-sitemap-brand{display:flex;flex-wrap:wrap;gap:8px 40px;align-items:flex-start;
  padding:22px 0 24px;border-top:1px solid var(--n-800)}
.utz__footer-sitemap-brand .utz__footer-addr,.utz__footer-sitemap-brand .utz__footer-email,
.utz__footer-sitemap-brand .utz__footer-phone{margin:0}
/* footer_style: minimal — one row */
.utz__footer-minimal{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px 28px;padding:30px 0 10px}
.utz__footer-minimal-contact .utz__footer-email,.utz__footer-minimal-contact .utz__footer-phone{margin:0;display:inline-block}
.utz__footer-minimal-contact .utz__footer-phone{margin-left:18px}
/* footer_style: boxed — the columns footer in a contained rounded panel */
.utz__footer--boxed{background:var(--bg-alt);padding:0 0 32px}
.utz__footer--boxed>.utz__wrap.utz__footer-box{background:var(--band-bg);border-radius:var(--r-xl);
  padding:8px 40px 10px}
.utz__footer--boxed .utz__footer-grid{padding:44px 0 28px}
@media(max-width:820px){
  .utz__footer-split{grid-template-columns:1fr;gap:30px}
  .utz__footer-cbar{grid-template-columns:1fr;gap:22px}
  .utz__footer-sitemap-groups{grid-template-columns:repeat(2,1fr)}
  .utz__footer--boxed>.utz__wrap.utz__footer-box{padding:8px 22px 10px;border-radius:var(--r-lg)}
}
@media(max-width:560px){.utz__footer-sitemap-groups{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 .utz__head--tworow too), the nav row
   closing on a filled CTA button with an icon, an outline secondary to its left */
.utz__head--tworow_button .utz__header-navrow .utz__nav-cta-cluster .utz__nav-cta{padding:9px 16px;margin:0}
.utz__head--tworow_button .utz__header-actions .utz__nav-cta{display:none}
.utz__nav-cta--solid .utz__nav-cta-icon{margin:0 0 0 .5em}
.utz__nav-cta--solid .utz__nav-cta-icon svg{width:16px;height:16px}
.utz__head--tworow .utz__header-top{padding-bottom:8px}
.utz__head--tworow .utz__header-top-contact{display:flex;gap:18px;font-size:var(--small);color:var(--muted)}
.utz__head--tworow .utz__header-top-contact a{color:var(--primary);display:inline-flex;align-items:center;min-height:44px}
.utz__head--tworow .utz__header-navrow{padding-top:4px;padding-bottom:4px;display:flex;align-items:center}
.utz__head--tworow .utz__mainnav{flex:1}
.utz__head--tworow .utz__nav-inner{padding:0;max-width:none;margin:0;justify-content:flex-start}
.utz__head--tworow .utz__nav-links a,.utz__head--tworow .utz__nav-parent{color:var(--ink);padding:10px 13px;
  border-bottom:0;white-space:nowrap}
.utz__head--tworow .utz__nav-links>li>a[aria-current=page],
.utz__head--tworow .utz__nav-parent.utz__is-active{color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.utz__head--tworow .utz__nav-links>li>a:hover{color:var(--primary);border-bottom:0}}
/* header_layout: pill — the links in a rounded track between brand and CTA */
.utz__head--pill .utz__mainnav{flex:1;display:flex;justify-content:center}
.utz__head--pill .utz__nav-inner{background:var(--bg-alt);border-radius:999px;padding:4px 8px;
  max-width:none;margin:0;gap:0}
.utz__head--pill .utz__nav-links a,.utz__head--pill .utz__nav-parent{padding:8px 14px;border-bottom:0;
  color:var(--ink);border-radius:999px;white-space:nowrap}
.utz__head--pill .utz__nav-links>li>a[aria-current=page],
.utz__head--pill .utz__nav-parent.utz__is-active{background:var(--surface);color:var(--primary);border-bottom:0}
@media (hover:hover) and (pointer:fine){.utz__head--pill .utz__nav-links>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){.utz__head--tworow .utz__mainnav{flex:1 1 0;min-width:0}
  .utz__head--tworow .utz__nav-links{flex-wrap:wrap}}
@media(min-width:681px) and (max-width:1100px){
  .utz__head--tworow_button .utz__nav-cta-cluster .utz__nav-cta--boxed{display:none}
  .utz__head--tworow .utz__nav-links a,.utz__head--tworow .utz__nav-parent{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) */
  .utz__head--tworow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .utz__head--tworow .utz__header-top-contact{display:none}
  .utz__head--tworow_button .utz__nav-cta-cluster:not(.utz__nav-cta-cluster--menu){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 */
  .utz__head--tworow .utz__header-top{flex:1 1 0;min-width:0;margin:0;padding-bottom:14px}
  .utz__head--tworow .utz__header-navrow{flex:0 0 auto;margin:0;padding-left:0;
    padding-top:14px;padding-bottom:14px}
  .utz__head--pill .utz__nav-inner{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) */
.utz__hero--boxed{background:var(--bg) !important;background-image:none !important;
  color:var(--ink);padding:26px 0}
.utz__hero--boxed .utz__hero-box{position:relative;color:#fff;border-radius:var(--r-xl);
  padding:56px 48px;overflow:hidden;background-size:cover;background-position:center;
  background-color:var(--black)}
.utz__hero--boxed.utz__hero--has-strip .utz__hero-box{padding-bottom:0}
.utz__hero--boxed .utz__hero-strip{margin:34px -48px 0}
.utz__hero--boxed .utz__hero-strip .utz__wrap{padding-left:48px;padding-right:48px}
/* hero_variant: media — light surface, copy | framed photo */
.utz__hero--media,.utz__hero--light{background:var(--bg-alt) !important;background-image:none !important;
  color:var(--ink)}
.utz__hero--light{background:var(--bg) !important;border-bottom:1px solid var(--line)}
.utz__hero--media h1,.utz__hero--light h1{color:var(--ink);text-shadow:none}
.utz__hero--media .utz__lead,.utz__hero--light .utz__lead,.utz__hero--media .utz__about-def,.utz__hero--light .utz__about-def{color:var(--body);text-shadow:none}
.utz__hero--media .utz__eyebrow,.utz__hero--light .utz__eyebrow{color:var(--primary);text-shadow:none}
.utz__hero--media .utz__hero-proof li,.utz__hero--light .utz__hero-proof li{color:var(--ink)}
.utz__hero--media .utz__hero-proof li::before,.utz__hero--light .utz__hero-proof li::before{border-color:var(--primary)}
.utz__hero--media .utz__btn--outline-light,.utz__hero--light .utz__btn--outline-light{color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover) and (pointer:fine){.utz__hero--media .utz__btn--outline-light:hover,.utz__hero--light .utz__btn--outline-light:hover{background:var(--ink);
  color:#fff;box-shadow:inset 0 0 0 2px var(--ink)}}
.utz__hero--media .utz__hero-strip,.utz__hero--light .utz__hero-strip{background:var(--surface);
  border-top:1px solid var(--line)}
.utz__hero-media-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.utz__hero-media 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){
  .utz__hero-media-grid{grid-template-columns:1fr;gap:26px}
  .utz__hero-media img{aspect-ratio:16/10}
  .utz__hero--boxed .utz__hero-box{padding:40px 22px}
  .utz__hero--boxed .utz__hero-strip{margin:30px -22px 0}
  .utz__hero--boxed .utz__hero-strip .utz__wrap{padding-left:22px;padding-right:22px}
}
/* cta_variant: inline — one tinted bar, copy left, button right */
.utz__cta-inline{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.utz__cta-inline-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 0}
.utz__cta-inline h2{margin:.2rem 0 6px}
.utz__cta-inline .utz__lead{margin:0;color:var(--body);max-width:60ch}
.utz__cta-inline-action{flex:0 0 auto}
/* G9: the in-column article CTA is a tinted panel with copy, not a bare
   button in a grey band */
.utz__cta-inline--in{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)}
.utz__cta-inline--in h3{margin:0 0 4px;font-size:var(--h3)}
.utz__cta-inline--in p{margin:0;color:var(--body)}
@media(max-width:640px){.utz__cta-inline--in{flex-direction:column;align-items:flex-start}}
/* cta_variant: strip — one brand band, heading + button on one row */
.utz__cta-strip{background:var(--primary);color:var(--on-primary);padding:34px 0}
.utz__cta-strip-inner{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px 32px}
.utz__cta-strip h2{margin:0;color:var(--on-primary)}
/* cta_variant: columns — copy | ticks | button on the page surface */
.utz__cta-cols{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.utz__cta-cols-inner{display:grid;grid-template-columns:1.4fr 1fr auto;gap:32px;align-items:center}
.utz__cta-cols-inner--two{grid-template-columns:1.4fr auto}
.utz__cta-cols-copy .utz__lead{margin:0;color:var(--body)}
.utz__cta-cols-ticks{color:var(--ink)}
.utz__cta-cols .utz__cta-ticks{display:block;margin:0;max-width:none;color:var(--ink)}
.utz__cta-cols-action{align-self:center}
@media (max-width:820px){.utz__cta-cols-inner,.utz__cta-cols-inner--two{grid-template-columns:1fr;gap:24px}}
/* cta_variant: minimal — centred sign-off on the page bg under a hairline */
.utz__cta-minimal{border-top:1px solid var(--line)}
.utz__cta-minimal .utz__eyebrow{color:var(--primary)}
.utz__cta-minimal .utz__cta-ticks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  max-width:none;color:var(--body)}
.utz__cta-minimal .utz__cta-ticks li{padding-bottom:0}
.utz__cta-minimal .utz__cta-ticks li::before{background:var(--primary)}
/* cta_variant: dark — the near-black band with the brand button */
.utz__cta-dark{background:var(--band-bg);color:var(--band-ink);padding:52px 0;text-align:center}
.utz__cta-dark h2{color:var(--band-ink)}
.utz__cta-dark .utz__eyebrow{color:var(--band-muted)}
.utz__cta-dark .utz__lead{color:var(--band-muted)}
.utz__cta-dark .utz__cta-ticks{color:var(--band-muted)}
.utz__cta-dark .utz__cta-ticks li::before{background:var(--primary-60)}
@media(max-width:820px){.utz__cta-inline-inner{flex-direction:column;align-items:flex-start;gap:18px;padding:30px 0}}
/* services_variant: rows — full-width ruled rows in a centred column */
.utz__svc-rows{margin:32px auto 0}
.utz__signs-stack{display:grid;gap:var(--grid-gap)}
/* intro_variant: panel — the prose in one tinted rounded panel */
.utz__intro-panel{background:var(--bg-alt);border-radius:var(--r-xl);padding:40px 44px}
.utz__intro-panel h2{margin:.2rem 0 .6rem;max-width:26ch}
.utz__intro-panel .utz__lead{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. */
.utz__contact-steps-row{list-style:none;padding:0;margin:0 0 30px;display:grid;
  grid-template-columns:1fr 1fr;gap:18px}
.utz__contact-steps-row li{display:flex;gap:14px;align-items:flex-start;background:var(--bg-alt);
  border-radius:var(--r-md);padding:18px 20px}
.utz__contact-steps-row .utz__cs-num{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)}
.utz__contact-steps-row p{margin:2px 0 0;color:var(--body)}
@media(min-width:821px){
  .utz__contact-steps-row:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .utz__contact-steps-row:has(li:nth-child(5)) li:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:820px){.utz__contact-steps-row{grid-template-columns:1fr}}
/* areas_shape: columns (alphabetical index) + tiles (wide tiles) */
.utz__area-cols{list-style:none;padding:0;margin:26px 0 0;columns:3;column-gap:36px}
.utz__area-cols li{break-inside:avoid;border-bottom:1px solid var(--line)}
.utz__area-cols a{display:flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.utz__area-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
.utz__area-tile{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){.utz__area-tile:hover{text-decoration:none;border-color:var(--n-300);box-shadow:var(--shadow)}}
.utz__area-tile 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
   .utz__area-tile centres both. Pinning the name to the top while the arrow
   stayed centred read as broken alignment (operator, R31). */
.utz__area-tiles--big{gap:24px}
.utz__area-tiles--big .utz__area-tile{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) */
.utz__hub-groups{align-items:start}
.utz__hub-groups .utz__hub-group{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. */
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group .utz__grid{grid-template-columns:1fr;max-width:none}
.utz__hub-groups--list .utz__hub-group .utz__grid{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"). */
.utz__hub-groups:not(.utz__hub-groups--list){row-gap:64px;column-gap:48px}
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group+.utz__hub-group{margin-top:0}
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group .utz__center{text-align:left;margin-left:0}
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group>.utz__lead{min-height:3.2em;margin-bottom:14px}
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group .utz__grid{gap:0;border-top:1px solid var(--line)}
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group .utz__card--link{padding:13px 4px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;background:none;min-height:0}
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group .utz__contact-email:first-of-type{margin-top:14px}
.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group .utz__reassure{margin-top:12px;color:var(--muted);font-size:var(--small)}
@media(max-width:820px){.utz__hub-groups:not(.utz__hub-groups--list) .utz__hub-group>.utz__lead{min-height:0}}
/* a town page's smaller nearby places: plain names, no page, so no link */
.utz__area-cols--plain span{display:flex;align-items:center;min-height:44px;color:var(--body)}
.utz__area-mentions-label{margin:26px 0 0;font-weight:600;color:var(--ink)}
.utz__area-mentions-label+.utz__pills{margin-top:12px}
.utz__area-mentions-label+.utz__area-cols{margin-top:8px}
.utz__area-mentions{margin:22px 0 0;color:var(--body)}
@media(max-width:820px){.utz__area-cols{columns:2}.utz__area-tiles{grid-template-columns:1fr}}
@media(max-width:560px){.utz__area-cols{columns:1}}

/* cards */
.utz__grid{display:grid;gap:var(--grid-gap)}
.utz__grid > .utz__card{min-width:0}
.utz__grid--single{max-width:420px;margin-left:auto;margin-right:auto}
.utz__grid-2{grid-template-columns:repeat(2,1fr)}
.utz__grid-3{grid-template-columns:repeat(3,1fr)}
.utz__grid-4{grid-template-columns:repeat(4,1fr)}
/* count-matched grids: 4 items read better as 2x2 than a 3+1 orphan row */
.utz__grid-2x2{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-utz__align=left] .utz__grid-2x2:not(.utz__wrap),section[data-utz__align=left] .utz__grid--single,section[data-utz__align=left] .utz__mw-720:not(.utz__wrap),section[data-utz__align=left] .utz__mw-760:not(.utz__wrap),
section[data-utz__align=left] .utz__mw-880:not(.utz__wrap),section[data-utz__align=left] .utz__mw-640:not(.utz__wrap),
section[data-utz__align=left] .utz__grid-2:not(.utz__wrap),section[data-utz__align=left] .utz__grid-3:not(.utz__wrap),section[data-utz__align=left] .utz__grid-4:not(.utz__wrap),
section[data-utz__align=left] .utz__svc-rows:not(.utz__wrap),section[data-utz__align=left] .utz__svc-list:not(.utz__wrap),
section[data-utz__align=left] .utz__signs-split:not(.utz__wrap),section[data-utz__align=left] .utz__signs-num:not(.utz__wrap),section[data-utz__align=left] .utz__signs-cols:not(.utz__wrap),
section[data-utz__align=left] .utz__steps:not(.utz__wrap),
section[data-utz__align=left] .utz__steps--timeline:not(.utz__wrap),section[data-utz__align=left] .utz__steps--cards:not(.utz__wrap),
section[data-utz__align=left] .utz__steps--diagram:not(.utz__wrap),section[data-utz__align=left] .utz__steps--chevrons:not(.utz__wrap),
section[data-utz__align=left] .utz__ticks-cols:not(.utz__wrap),section[data-utz__align=left] .utz__facts-table:not(.utz__wrap),
section[data-utz__align=left] .utz__promise-grid:not(.utz__wrap),section[data-utz__align=left] .utz__feature-row:not(.utz__wrap),section[data-utz__align=left] .utz__feature-stack:not(.utz__wrap),
section[data-utz__align=left] .utz__bento-grid:not(.utz__wrap),
section[data-utz__align=left] .utz__benefits-panel:not(.utz__wrap),section[data-utz__align=left] .utz__card--centered:not(.utz__wrap),section[data-utz__align=left] .utz__faq:not(.utz__wrap),
section[data-utz__align=left] .utz__feature-card:not(.utz__wrap),section[data-utz__align=left] .utz__feature-text:not(.utz__wrap),section[data-utz__align=left] .utz__hub-compact:not(.utz__wrap),
section[data-utz__align=left] .utz__signs-causes:not(.utz__wrap),section[data-utz__align=left] .utz__steps--alternate:not(.utz__wrap),section[data-utz__align=left] .utz__svc-centered:not(.utz__wrap),
section[data-utz__align=left] .utz__toolcard:not(.utz__wrap),section[data-utz__align=left] .utz__trust--3:not(.utz__wrap){margin-left:0}
/* One left edge per page (operator, Oct 2026): a section whose wrap is
   itself capped (.utz__wrap.utz__mw-760) 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-utz__align=left] > .utz__wrap.utz__mw-640,section[data-utz__align=left] > .utz__wrap.utz__mw-720,
section[data-utz__align=left] > .utz__wrap.utz__mw-760,section[data-utz__align=left] > .utz__wrap.utz__mw-880{max-width:var(--wrap)}
section[data-utz__align=left] > .utz__wrap.utz__mw-640 > *,section[data-utz__align=left] > .utz__wrap.utz__mw-720 > *,
section[data-utz__align=left] > .utz__wrap.utz__mw-760 > *,section[data-utz__align=left] > .utz__wrap.utz__mw-880 > *{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-utz__align=left] .utz__grid-2x2:not(.utz__wrap){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-utz__align=center] .utz__ticks-cols,section[data-utz__align=center] .utz__grid-2x2{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) */
.utz__grid-2 .utz__card--wide{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) */
.utz__promise-grid{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){
  .utz__promise-grid:has(li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .utz__promise-grid: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 */
.utz__promise-grid li{display:flex;gap:15px;align-items:center}
.utz__promise-grid .utz__p-ico{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)}
.utz__promise-grid .utz__p-ico svg{width:22px;height:22px}
.utz__promise-grid h3{margin:2px 0 .25rem;}
.utz__promise-grid p{margin:0;color:var(--body)}
@media(max-width:640px){.utz__promise-grid{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 .utz__grid/.utz__grid-2/... 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.) */
.utz__bento-grid{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 */
.utz__stat-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;display:flex;flex-direction:column}
.utz__stat-ico{color:var(--primary);width:22px;height:22px;margin-bottom:10px}
.utz__stat-ico svg{width:22px;height:22px}
.utz__stat-big{font-family:var(--font-head);font-size:var(--display);font-weight:var(--head-bold);
  color:var(--ink);line-height:1.12}
.utz__stat-label{font-size:var(--meta);text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;margin-top:4px}
.utz__stat-note{font-size:var(--small);color:var(--body);line-height:1.45;margin-top:8px}
/* pinned stat-card column counts (LOCATION_DATA['stat_cols']) */
.utz__stat-cols-2{grid-template-columns:repeat(2,1fr)}
.utz__stat-cols-4{grid-template-columns:repeat(4,1fr)}
.utz__stat-cols-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1020px){.utz__stat-cols-4,.utz__stat-cols-6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.utz__stat-cols-2,.utz__stat-cols-4,.utz__stat-cols-6{grid-template-columns:1fr}}
/* optional CTA pair under the facts */
.utz__loc-cta{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 */
.utz__loc-split{display:grid;grid-template-columns:1.1fr 1.9fr;gap:16px;align-items:stretch}
.utz__loc-hero{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}
.utz__loc-hero .utz__stat-label{margin-top:6px}
.utz__loc-hero .utz__stat-note{margin:8px 0 0}
.utz__loc-hero .utz__stat-what{display:block;margin-top:6px;color:var(--muted)}
.utz__loc-minis{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 26px;align-content:start}
.utz__loc-mini{padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--small);color:var(--body)}
.utz__loc-mini strong{color:var(--ink)}
@media(max-width:820px){.utz__loc-split{grid-template-columns:1fr}
  .utz__loc-minis{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. */
.utz__loc-rail{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:2px 52px}
.utz__loc-rail li{display:flex;gap:16px;padding:13px 0;
  color:var(--body)}
.utz__rail-num{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){.utz__loc-rail{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) */
.utz__spec-row{display:grid;grid-template-columns:auto 1fr minmax(280px,42%);
  gap:12px;align-items:baseline;padding:9px 0}
.utz__spec-label{font-weight:600;color:var(--ink);font-size:var(--small);white-space:nowrap}
.utz__spec-dots{border-bottom:1px dotted var(--muted);transform:translateY(-4px)}
.utz__spec-val{color:var(--body);font-size:var(--small);text-align:right}
.utz__spec-val strong{color:var(--ink)}
.utz__spec-rest{display:block;color:var(--muted)}
@media(max-width:640px){.utz__spec-row{grid-template-columns:auto 1fr}
  .utz__spec-dots{display:none}
  .utz__spec-val{text-align:left}}
.utz__bento-3{grid-template-columns:repeat(3,1fr)}
.utz__bento-2x2,.utz__bento-2{grid-template-columns:repeat(2,1fr)}
.utz__bento-grid > :last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:820px){.utz__bento-3,.utz__bento-2x2,.utz__bento-2{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 */
.utz__gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:8px 0 0}
.utz__gallery>figure:only-child{grid-column:1/-1}
.utz__gallery.utz__grid-3,.utz__pool-gallery .utz__gallery-grid.utz__grid-3{grid-template-columns:repeat(3,1fr)}
.utz__gallery.utz__grid-4,.utz__pool-gallery .utz__gallery-grid.utz__grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.utz__gallery>figure:last-child:nth-child(odd){grid-column:1/-1}
  .utz__gallery.utz__grid-3,.utz__gallery.utz__grid-4,.utz__pool-gallery .utz__gallery-grid.utz__grid-3,
  .utz__pool-gallery .utz__gallery-grid.utz__grid-4{grid-template-columns:repeat(2,1fr)}}
.utz__gallery figure{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden}
.utz__gallery img{width:100%;height:280px;object-fit:cover;display:block;background:var(--bg-alt)}
.utz__gallery figcaption{padding:14px 16px}
.utz__gallery figcaption p{margin:0;color:var(--body)}
p.utz__note{color:var(--muted);font-size:var(--small)}
@media(max-width:640px){.utz__gallery,.utz__gallery.utz__grid-3,.utz__gallery.utz__grid-4{grid-template-columns:1fr}.utz__gallery img{height:230px}}
/* Curated wizard media pool: the home photo band. */
.utz__pool-gallery .utz__gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;margin:8px 0 0}
@media(max-width:900px){.utz__pool-gallery .utz__gallery-grid>figure:last-child:nth-child(odd){grid-column:1/-1}}
.utz__pool-gallery .utz__gallery-grid figure{margin:0}
.utz__pool-gallery .utz__gallery-grid img{width:100%;height:220px;object-fit:cover;display:block;
  border-radius:var(--r-md);background:var(--bg-alt)}
@media(max-width:640px){.utz__pool-gallery .utz__gallery-grid{grid-template-columns:repeat(2,1fr)}
  .utz__pool-gallery .utz__gallery-grid img{height:150px}}
.utz__card{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.utz__card:hover,.utz__card:has(a):hover{text-decoration:none;border-color:var(--n-300);box-shadow:var(--shadow)}}
.utz__card h3{margin-bottom:.35rem;color:var(--black)}
.utz__card p{color:var(--body);margin-bottom:.5rem}
.utz__card .utz__fin-suits{font-weight:600;color:var(--black)}
.utz__card > :last-child{margin-bottom:0}
.utz__card .utz__more{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. */
.utz__card > img,.utz__card > picture{display:block;width:100%;margin:0 0 16px}
.utz__card > img,.utz__card > picture img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-sm);background:var(--bg-alt)}
.utz__grid-2 .utz__card--wide > img,.utz__grid-2 .utz__card--wide > picture img{aspect-ratio:3/1}
@media(max-width:820px){.utz__grid-2 .utz__card--wide > img,.utz__grid-2 .utz__card--wide > picture img{aspect-ratio:3/2}}
/* services_variant: centered = centred icon cells, no card chrome (ref: alignui). */
.utz__svc-centered .utz__card--centered{background:transparent;border:0;padding:20px 18px;
  text-align:center;display:flex;flex-direction:column;align-items:center}
@media (hover:hover) and (pointer:fine){.utz__svc-centered .utz__card--centered:hover{box-shadow:none;border:0}
.utz__svc-centered a.utz__card--centered:hover,.utz__svc-centered .utz__card--centered:has(a):hover{transform:translateY(-2px)}}
.utz__svc-centered .utz__card--centered .utz__icon{margin-left:auto;margin-right:auto}
.utz__svc-centered .utz__card--centered 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. */
.utz__svc-index{display:grid;grid-template-columns:0.82fr 1.18fr;gap:48px;align-items:start;
  margin-top:12px}
.utz__svc-index-copy h2{margin:.2rem 0 .7rem}
.utz__svc-index-copy .utz__lead{margin:0}
.utz__svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.utz__svc-row{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){.utz__svc-row: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) */
.utz__section p:has(> a.utz__more:only-child),.utz__prose p:has(> a.utz__more:only-child),
.utz__callout p:has(> a.utz__more:only-child){margin:26px 0 4px}
.utz__svc-row .utz__icon{margin:0;flex:0 0 auto}
.utz__svc-row-photo{width:96px;flex:0 0 auto}
.utz__svc-row-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
@media(max-width:680px){.utz__svc-row-photo{width:64px}}
.utz__svc-row-main{flex:1;min-width:0}
.utz__svc-row-main h3{margin:0;color:var(--black)}
.utz__svc-row-main p{margin:2px 0 0;color:var(--body)}
.utz__svc-row .utz__more{margin-left:auto;color:var(--primary);font-weight:500;
  flex:0 0 auto}
@media (hover:hover) and (pointer:fine){[data-utz__glyph=none] .utz__more: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. */
.utz__more{display:inline-flex;align-items:center;gap:.35em;font-weight:500;font-size:var(--ui)}
.utz__more .utz__glyph{line-height:1;font-size:var(--glyph,1.2rem);display:inline-block}
@media(max-width:820px){.utz__svc-index{grid-template-columns:1fr;gap:22px}}
/* faq_variant: aside = heading + prompt beside the accordion. */
.utz__faq-aside{display:grid;grid-template-columns:0.8fr 1.2fr;gap:48px;align-items:start;margin-top:8px}
.utz__faq-aside-copy h2{margin:.2rem 0 .7rem}
.utz__faq-aside-copy .utz__lead{margin:0}
/* signs_variant: split = prominent checklist + tinted causes panel. */
.utz__signs-split{display:grid;grid-template-columns:1.25fr 0.75fr;gap:26px;align-items:start}
.utz__card--tint{background:var(--bg-alt);border-color:transparent}
@media(max-width:820px){.utz__faq-aside{grid-template-columns:1fr;gap:22px}
  .utz__signs-split{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 */
.utz__signs-num{list-style:none;margin:26px auto 0;padding:0;max-width:880px}
.utz__signs-num li{display:flex;gap:18px;align-items:baseline;padding:14px 2px;
  border-bottom:1px solid var(--line)}
.utz__signs-num li:last-child{border-bottom:0}
.utz__signs-num .utz__sn{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}
.utz__signs-num li p{margin:0}
.utz__signs-causes{max-width:880px;margin:26px auto 0;background:var(--bg-alt);
  border-radius:var(--r-xl);padding:26px 28px}
.utz__signs-causes h3{margin-top:0}
.utz__signs-causes 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. */
.utz__ticks-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;max-width:var(--measure-wide)}
@media(max-width:680px){.utz__ticks-cols{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 */
.utz__signs-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 52px;align-items:start}
.utz__signs-cols>div:first-child{border-right:1px solid var(--line);padding-right:52px}
.utz__signs-cols h3{margin-top:0}
@media(max-width:820px){.utz__signs-cols{grid-template-columns:1fr}
  .utz__signs-cols>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 */
.utz__ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.utz__ps-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.utz__ps-col h3{margin-top:0}
.utz__ps-solution{background:var(--bg-alt)}
.utz__ps-list{margin:0;padding-left:1.2em}
.utz__ps-list li{padding:0 0 .6rem}
@media(max-width:820px){.utz__ps-grid{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 */
.utz__card--photo{padding:0;overflow:hidden}
.utz__card--photo>:not(.utz__svc-photo){margin-left:22px;margin-right:22px}
.utz__card.utz__card--photo>.utz__more{display:inline-flex;margin-bottom:22px}
.utz__svc-photo{position:relative;margin:0 0 16px}
.utz__svc-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--bg-alt)}
.utz__svc-num{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 */
.utz__cmp-badge{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). */
.utz__uses-split{display:flex;flex-direction:column;gap:34px;margin-top:28px}
.utz__uses-row{display:flex;gap:28px;align-items:center}
.utz__uses-row--rev{flex-direction:row-reverse}
.utz__uses-row--rev .utz__uses-copy{text-align:right}
.utz__uses-row .utz__uses-media .utz__icon{width:58px;height:58px}
.utz__uses-row .utz__uses-media .utz__icon svg{width:28px;height:28px}
.utz__uses-copy h3{margin:0 0 6px;color:var(--black)}
.utz__uses-copy p{margin:0;color:var(--body)}
@media(max-width:640px){.utz__uses-row,.utz__uses-row--rev{flex-direction:column;align-items:flex-start;gap:12px}
  .utz__uses-row--rev .utz__uses-copy{text-align:left}}
.utz__uses-ledger{list-style:none;margin:0;padding:0}
.utz__uses-ledger li{display:flex;gap:16px;align-items:flex-start;padding:14px 2px;
  border-bottom:1px solid var(--line)}
.utz__uses-ledger li:last-child{border-bottom:0}
.utz__uses-ledger .utz__icon{flex:0 0 auto;width:40px;height:40px}
.utz__uses-ledger .utz__icon svg{width:20px;height:20px}
.utz__uses-ledger h3{margin:0 0 4px;color:var(--black)}
.utz__uses-ledger p{margin:0;color:var(--body)}
.utz__uses-num{list-style:none;margin:26px 0 0;padding:0}
.utz__uses-num li{display:grid;grid-template-columns:2.2rem 1fr;gap:18px;align-items:baseline;padding:14px 2px;
  border-bottom:1px solid var(--line)}
.utz__uses-num li:last-child{border-bottom:0}
.utz__uses-num .utz__sn{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}
.utz__uses-num h3{margin:0 0 4px;color:var(--black)}
.utz__uses-num p{margin:0;color:var(--body)}
.utz__uses-acc{margin-top:26px}
.utz__uses-links{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.utz__uses-links p{margin:0 0 10px;font-weight:700;color:var(--black)}
.utz__uses-links .utz__pills{justify-content:flex-start;margin:0}
/* optional block: sticky_cta — mobile-only fixed quote/call bar. */
.utz__sticky-cta{display:none}
@media(max-width:680px){
  .utz__sticky-cta{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)}
  .utz__sticky-cta-btn{flex:1;text-align:center}
  .utz__sticky-cta-call{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.utz__menu-open .utz__sticky-cta{display:none}
}
/* optional block: author_box byline (sits in the resource hero, on dark). */
.utz__byline{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). */
.utz__toc-jump{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 20px;margin:0 0 1.8rem}
.utz__toc-jump-h{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)}
.utz__toc-jump ul{margin:0;padding-left:1.1em}
.utz__toc-jump--cols ul{columns:2;column-gap:24px}   /* toc_jump depth L2 */
.utz__toc-jump li{margin-bottom:.35rem}
/* expert_quote depth L2: a bordered "in short" box vs the plain L1 callout. */
.utz__callout--quote{background:var(--accent-soft)}
.utz__callout--quote > p:first-of-type{font-size:var(--lead);font-weight:600}
.utz__pullquote{margin:30px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.utz__pullquote blockquote{margin:0;font-size:var(--lead);font-weight:500}
.utz__pullquote figcaption{margin-top:8px;font-size:var(--small);color:var(--muted)}
.utz__lede{font-size:var(--lead);color:var(--muted)}
.utz__icon{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}
.utz__icon svg{width:24px;height:24px}
/* icon-style variants (icons draw in currentColor) */
[data-utz__icons=solid] .utz__icon{background:var(--primary);color:#fff}
[data-utz__icons=line] .utz__icon{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. */
.utz__section--alt.utz__section--flat{background-image:none}

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

.utz__signature{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 */
.utz__benefits-panel{background:var(--bg-alt);border-radius:var(--r-xl);padding:34px 38px}
.utz__benefits-panel .utz__prose p{max-width:70ch;margin-left:auto;margin-right:auto}
.utz__benefits-panel h2{margin-top:0}
/* promises_variant: cards = bordered card grid; numbered reuses the
   signs `numbered` grammar (ol.utz__signs-num) but must cancel the centred wrap */
.utz__promise-grid--cards{max-width:980px}
.utz__promise-grid--cards li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px 22px;align-items:flex-start}
.utz__promise-num{text-align:left}
.utz__promise-num li div{text-align:left}
.utz__promise-num li div h3{margin:.1rem 0 .3rem}

/* lists */
.utz__ticks{list-style:none;padding-left:0;margin:0}
.utz__ticks li{position:relative;padding:0 0 .6rem 30px}
.utz__ticks 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 */
.utz__ticks--cols{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
@media(max-width:700px){.utz__ticks--cols{grid-template-columns:1fr}}
.utz__steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:18px}
.utz__steps li{position:relative;padding-left:56px;counter-increment:s}
.utz__steps 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)}
.utz__steps li h3{margin:0 0 .3rem;min-height:38px;display:flex;align-items:center}
/* process-page layout variants (a per-site footprint knob) */
.utz__steps--timeline{position:relative}
.utz__steps--timeline::before{content:"";position:absolute;left:18px;top:10px;bottom:10px;
  width:2px;background:var(--line);z-index:0}
.utz__steps--timeline li{padding-bottom:6px}
.utz__steps--timeline li::before{z-index:1;box-shadow:0 0 0 4px var(--bg)}
.utz__steps--cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.utz__steps--cards li{padding:24px 20px 20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow)}
.utz__steps--cards li::before{position:static;margin-bottom:14px}
.utz__steps--cards 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). */
.utz__steps--alternate{display:block;position:relative;list-style:none;padding:0}
.utz__steps--alternate::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;
  width:2px;margin-left:-1px;background:var(--line);z-index:0}
.utz__steps--alternate li{width:calc(50% - 32px);position:relative;padding:26px 0}
.utz__steps--alternate .utz__steps-l{margin-right:auto;padding-right:76px}
.utz__steps--alternate .utz__steps-r{margin-left:auto;padding-left:76px}
.utz__steps--alternate li::before{top:26px}
.utz__steps--alternate .utz__steps-l::before{left:auto;right:-51px}
.utz__steps--alternate .utz__steps-r::before{left:-51px}
@media(max-width:700px){.utz__steps--alternate::before{left:18px;margin-left:0}
  .utz__steps--alternate li{width:auto;padding:22px 0 22px 56px}
  .utz__steps--alternate li::before{top:22px}
  .utz__steps--alternate .utz__steps-l{margin-right:0;padding-right:0}
  .utz__steps--alternate .utz__steps-l::before{right:auto;left:0}
  .utz__steps--alternate .utz__steps-r{margin-left:0;padding-left:56px}
  .utz__steps--alternate .utz__steps-r::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). */
.utz__steps--diagram{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px;position:relative;margin-top:8px}
.utz__widget-note{border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;background:var(--bg-alt)}
.utz__widget-note h3{margin:0 0 .6rem}
.utz__widget-note ul{margin:0;padding-left:1.1em}
.utz__steps--diagram li{padding:0;text-align:center;position:relative}
.utz__steps--diagram li::before{position:static;display:flex;margin:0 auto 16px;width:44px;height:44px;
  font-size:var(--lead);position:relative;z-index:1}
.utz__steps--diagram 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}
.utz__steps--diagram li:nth-child(2)::after{animation-delay:.15s}
.utz__steps--diagram li:nth-child(3)::after{animation-delay:.3s}
.utz__steps--diagram li:nth-child(4)::after{animation-delay:.45s}
.utz__steps--diagram li:nth-child(5)::after{animation-delay:.6s}
.utz__steps--diagram li:nth-child(6)::after{animation-delay:.75s}
.utz__steps--diagram li h3{min-height:auto;display:block;margin-bottom:.4rem}
.utz__steps--diagram li p{margin:0}
@keyframes flowline{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.utz__steps--diagram li::after{animation:none}}
/* process_layout=chevrons: an arrow strip of numbered titles, the body under
   each — the classic "how it works" ribbon */
.utz__steps--chevrons{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.utz__steps--chevrons li{padding:0}
.utz__steps--chevrons 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)}
.utz__steps--chevrons 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%)}
.utz__steps--chevrons li:first-child h3{padding-left:22px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.utz__steps--chevrons li p{margin:14px 6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.utz__avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block}
.utz__avatar--svg svg{width:56px;height:56px;display:block}
.utz__card--team{display:flex;gap:16px;align-items:flex-start;padding:22px 24px}
.utz__card--team h3{margin:0 0 2px;font-size:var(--h3)}
.utz__author-role{color:var(--muted);font-size:var(--small);margin:0 0 8px}
.utz__card--team 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. */
.utz__author-card{border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;background:var(--surface)}
.utz__author-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.utz__author-card-grid--one{grid-template-columns:1fr}
.utz__author-card-id{display:flex;gap:12px;align-items:center}
.utz__author-name{margin:0;font-weight:600}
.utz__author-role{margin:0;font-size:var(--small);color:var(--muted)}
.utz__author-bio{margin:12px 0 0}
.utz__author-links{font-size:var(--small)}
@media (max-width:640px){.utz__author-card-grid{grid-template-columns:1fr}}
.utz__team-grid{margin-top:var(--head-gap,28px)}
.utz__team-list{list-style:none;margin:var(--head-gap,28px) 0 0;padding:0}
.utz__team-row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line)}
.utz__team-row:first-child{border-top:0;padding-top:0}
.utz__team-row h3{margin:0 0 2px;font-size:var(--h3)}
.utz__team-row>div,.utz__card--team>div{flex:1;min-width:0}
.utz__team-row .utz__author-role,.utz__card--team .utz__author-role{margin:0 0 8px}
.utz__team-row p:not(.utz__author-role){max-width:68ch}
@media(max-width:640px){.utz__card--team{flex-direction:column;gap:12px}}
.utz__team-strip{display:flex;flex-wrap:wrap;gap:14px 32px;list-style:none;padding:0;margin:var(--head-gap,28px) 0 0}
.utz__team-strip li{display:flex;gap:12px;align-items:center}
.utz__team-strip .utz__avatar,.utz__team-strip .utz__avatar--svg svg{width:40px;height:40px}
.utz__team-strip .utz__author-role{display:block;margin:0}
/* team_block split / grid (E12): token colours, no accent borders. */
.utz__team-split{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;align-items:start;margin:var(--head-gap,28px) 0 0}
.utz__team-split .utz__prose{max-width:760px}
.utz__team-grid--lg .utz__card--team{display:block}
.utz__team-grid--lg .utz__avatar,.utz__team-grid--lg .utz__avatar--svg 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. */
.utz__team-spot{margin:var(--head-gap,28px) 0 4px}
.utz__team-spot .utz__avatar,.utz__team-spot .utz__avatar--svg svg{width:72px;height:72px}
.utz__team-spot+.utz__team-strip{margin-top:20px}
.utz__team-more{margin:22px 0 0}
@media(max-width:860px){.utz__team-split{grid-template-columns:1fr}}
/* About facts table: label over value on a phone, two columns from 641px. */
.utz__about-facts{margin:var(--head-gap,28px) 0 0}
.utz__about-facts .utz__af-row{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.utz__about-facts dt{color:var(--muted);font-weight:600}
.utz__about-facts 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. */
.utz__about-facts a{color:var(--link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.utz__about-facts a:hover{text-decoration-thickness:2px}}
.utz__about-facts-note{margin:12px 0 0;font-size:var(--small);color:var(--muted)}
@media(min-width:641px){.utz__about-facts .utz__af-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 24px}}
@media(max-width:820px){
  .utz__steps--diagram,.utz__steps--chevrons{grid-auto-flow:row;grid-auto-columns:auto}
  .utz__steps--diagram li{text-align:left;padding-left:56px}
  .utz__steps--diagram li::before{position:absolute;left:0;top:0;margin:0;width:38px;height:38px;font-size:var(--lead)}
  .utz__steps--diagram 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)}}
  .utz__steps--chevrons li h3{clip-path:none;border-radius:var(--r-md);padding:14px 18px}
  .utz__steps--chevrons li:first-child h3{clip-path:none;padding-left:18px}
}

/* breadcrumbs */
.utz__crumbs{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 */
.utz__crumbs--inhero,.utz__crumbs--ineyebrow{font-size:var(--small);color:var(--muted)}
.utz__crumbs a{color:var(--link)}
@media (hover:hover) and (pointer:fine){.utz__crumbs 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) */
.utz__crumbs span[aria-hidden]{margin:0 6px}
.utz__crumb-tri{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. */
.utz__prose a:not([class*='btn']):not(.utz__more),.utz__prose p a:not([class*='btn']):not(.utz__more),.utz__crumbs a,.utz__toc-jump-h,.utz__callout a:not([class*='btn']):not(.utz__more),.utz__gtable a,
.utz__lede a:not([class*='btn']):not(.utz__more),main p a:not([class*='btn']):not(.utz__more){color:var(--link);text-decoration:underline;text-underline-offset:.15em;
  text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.utz__prose a:not([class*='btn']):hover,.utz__prose p a:not([class*='btn']):hover,.utz__crumbs a:hover,
.utz__callout a:not([class*='btn']):hover,.utz__gtable a:hover,.utz__lede 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}
.utz__prose 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) */
.utz__prose .utz__cta-inline--in h3,.utz__cta-inline--in h3{margin:0 0 4px}
.utz__cta-inline--in .utz__cta-inline-copy>*:first-child{margin-top:0}
.utz__cta-inline--in .utz__cta-inline-copy>*:last-child{margin-bottom:0}
.utz__cta-inline-copy>*:first-child{margin-top:0}
.utz__cta-inline-copy>*:last-child{margin-bottom:0}
/* long unbreakable strings (emails, URLs) overflow the reading column on
   narrow viewports — break them instead of scrolling the page */
.utz__prose{overflow-wrap:break-word}
.utz__prose h3{margin-top:1.4em}
.utz__prose ul{padding-left:1.2em}
.utz__prose 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 */
.utz__prose>p+:is(ol,ul,.utz__steps,.utz__grid,.utz__callout,.utz__table-wrap,table,.utz__ticks),
.utz__prose>:is(ol,ul,.utz__steps,.utz__grid,.utz__callout,.utz__table-wrap,table)+p{margin-top:30px}
.utz__prose .utz__ticks{padding-left:0}
.utz__prose .utz__card h3{margin-top:0}
.utz__prose-ol{padding-left:1.2em}
.utz__prose-ol li{margin-bottom:.5rem}
.utz__table-wrap{overflow-x:auto;margin:1.2rem 0;max-width:100%}
.utz__prose table{width:100%}
.utz__ptable{width:100%;border-collapse:collapse;font-size:var(--small)}
.utz__ptable th,.utz__ptable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.utz__ptable thead th{background:var(--bg-alt);color:var(--black);font-family:var(--font-head);font-weight:var(--head-bold)}
.utz__ptable 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. */
.utz__calc-table{table-layout:fixed}
.utz__calc-table th,.utz__calc-table td,.utz__calc-table 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. */
.utz__gtable{width:100%;border-collapse:collapse;font-size:var(--small)}
.utz__gtable th,.utz__gtable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.utz__gtable thead th{background:var(--bg-alt);color:var(--black);font-family:var(--font-head);font-weight:var(--head-bold)}
.utz__gtable tbody th{color:var(--black);font-weight:600;background:none}
.utz__gtable 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. */
.utz__ctable{width:100%;border-collapse:collapse;font-size:var(--small)}
.utz__ctable th,.utz__ctable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.utz__ctable thead th{background:var(--bg-alt);color:var(--black);font-family:var(--font-head);font-weight:var(--head-bold)}
.utz__ctable tbody th{color:var(--black);font-weight:600;background:none}
.utz__cmp-mark{font-weight:700;margin-right:8px}
.utz__cmp-yes{color:var(--primary)}
.utz__cmp-no{color:var(--muted)}
.utz__cmp-note{color:var(--muted);font-size:var(--small)}
.utz__method-note{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 .utz__faq-item): --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.utz__py + the FAQ-PAD
   measurement in scripts/visual_qa.utz__py. */
.utz__faq{--faq-marker-slot:0px;--faq-marker-gap:0px;--faq-pad-x:20px;--faq-pad-y:18px}
.utz__faq--marker{--faq-marker-slot:1em;--faq-marker-gap:12px}
.utz__faq 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 */
.utz__faq 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 */
.utz__faq summary::before{content:"";display:inline-block;width:var(--faq-marker-slot);flex:0 0 auto}
.utz__faq summary::-webkit-details-marker{display:none}
.utz__faq summary::after{content:"+";font-size:var(--glyph);color:var(--primary);font-weight:400;
  margin-left:auto}
.utz__faq 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 */
.utz__faq .utz__ans{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 .utz__card > :last-child convention) */
.utz__faq .utz__ans>:last-child{margin-bottom:0}
.utz__faq .utz__ans a:not(.utz__more){color:var(--link);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.utz__faq .utz__ans 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 .utz__faq--marker on the container and keep the
   answer indent so it still lines up with its question. */
@media(max-width:680px){.utz__faq{--faq-pad-x:14px}.utz__faq:not(.utz__faq--marker) summary::before{display:none}
  .utz__faq:not(.utz__faq--marker) .utz__ans{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. */
.utz__faq--static .utz__faq-item{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) */
.utz__faq--static .utz__faq-q{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. */
.utz__faq-2col{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) */
.utz__faq-2col>*{display:flex;flex-direction:column;gap:14px;margin:0}
.utz__faq-2col details,.utz__faq-2col .utz__faq-item{margin-bottom:0}
@media(max-width:820px){.utz__faq-2col{grid-template-columns:1fr}}

/* pills / area links */
.utz__pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.utz__pills 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){.utz__pills a:hover{background:var(--primary);border-color:var(--primary);color:#fff;text-decoration:none}}
.utz__pills--plain 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 */
.utz__form-card{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);
  padding:28px;border:1px solid var(--line);color:var(--body)}
.utz__form-card h3{margin-top:0}
/* contact_variant: split = form beside a reassurance sidebar. */
.utz__contact-split{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:start}
.utz__contact-sidebar{background:var(--bg-alt);border-radius:var(--r-md);padding:26px}
.utz__contact-sidebar h3{margin-top:0}
.utz__contact-steps{margin:0 0 18px;padding-left:20px;color:var(--body)}
.utz__contact-steps li{margin-bottom:8px}
.utz__contact-sidebar .utz__ticks{list-style:none;padding:0;margin:0 0 18px}
.utz__contact-phone{margin:0 0 14px}
.utz__contact-phone 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) */
.utz__contact-details{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.utz__contact-details h4{font-size:var(--meta);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;font-family:var(--font-body)}
.utz__contact-detail{margin-bottom:14px}
.utz__contact-detail:last-child{margin-bottom:0}
/* address_block ships footer-styled (.utz__footer-addr is a light-on-dark value);
   inside the light contact sidebar it must read as body text */
.utz__contact-details .utz__footer-addr{color:var(--body);font-style:normal;font-size:var(--small);
  line-height:1.6;margin:0}
.utz__contact-details .utz__contact-email a{color:var(--primary);font-weight:600}
.utz__contact-phone 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). */
.utz__contact-split--rev{grid-template-columns:1fr 1.25fr}
.utz__contact-split--rev .utz__contact-details{margin-top:0;padding-top:0;border-top:0}
@media(max-width:900px){.utz__contact-split{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. */
.utz__contact-panel{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)}
.utz__contact-panel-side{background:var(--bg-alt);padding:30px 28px}
.utz__contact-panel-form{padding:30px 28px}
.utz__contact-lines{list-style:none;padding:0;margin:22px 0 0}
.utz__contact-lines li{padding:12px 0;border-top:1px solid var(--line)}
.utz__contact-line-label{display:block;font-size:var(--small);font-weight:600;color:var(--ink);margin:0 0 4px}
.utz__contact-lines p,.utz__contact-strip p{margin:0;overflow-wrap:anywhere}
@media(max-width:900px){.utz__contact-panel{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. */
.utz__contact-strip{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)}
.utz__contact-strip>div{padding:16px 18px 16px 0}
.utz__contact-strip>div+div{padding-left:18px;border-left:1px solid var(--line)}
.utz__contact-strip dt{font-size:var(--small);font-weight:600;color:var(--ink);margin:0 0 4px}
.utz__contact-strip dd{margin:0}
@media(max-width:820px){.utz__contact-strip{grid-auto-flow:row;grid-auto-columns:auto}
  .utz__contact-strip>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 .utz__contact-details */
.utz__contact-lines .utz__footer-addr,.utz__contact-strip .utz__footer-addr{color:var(--body);font-style:normal;
  font-size:var(--small);line-height:1.6;margin:0}
.utz__contact-lines .utz__contact-email a,.utz__contact-strip .utz__contact-email 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) */
.utz__email-box{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 8px;margin-top:22px;color:var(--body)}
.utz__contact-infocol>.utz__email-box:first-child,.utz__contact-side>.utz__email-box:first-child{margin-top:0}
.utz__email-box-h{font-weight:600;color:var(--ink);margin:0 0 6px}
.utz__email-box-intro{font-size:var(--small);margin:0 0 16px}
.utz__email-box .utz__contact-email{margin:0 0 14px}
.utz__mail-label{display:block;font-size:var(--small);color:var(--muted);margin:0 0 2px}
.utz__email-box .utz__contact-email a{color:var(--primary);font-weight:600}
.utz__side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 22px 6px;color:var(--body)}
.utz__side-panel{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 24px 4px;color:var(--body)}
.utz__side-panel-h{font-weight:600;color:var(--ink);margin:0 0 8px}
.utz__email-box--inset{background:none;border:0;border-radius:0;border-top:1px solid var(--line);
  padding:20px 0 4px}
.utz__email-box--open{background:none;border:0;border-radius:0;border-top:1px solid var(--line);
  padding:20px 0 0}
@media(max-width:480px){.utz__email-box{padding:18px 16px 6px}
  .utz__email-box--inset,.utz__email-box--open{padding-left:0;padding-right:0}.utz__email-box .utz__contact-email a{font-size:.94em}}
/* cards inside the dark hero must keep dark body text */
.utz__hero .utz__form-card,.utz__hero .utz__card{color:var(--body)}
.utz__hero .utz__form-card h3,.utz__hero .utz__card h3{color:var(--ink)}
.utz__field{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. */
.utz__lead-fields{container-type:inline-size}
.utz__field-row>.utz__field{min-width:0}
@container (min-width:440px){
  .utz__field-row--short{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .utz__field-row--short>.utz__field{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}}
@container (min-width:540px){
  .utz__field-row--question{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .utz__field-row--question>.utz__field{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}}
.utz__form-req{font-size:var(--meta);color:var(--muted);margin:0 0 14px}
.utz__req{color:var(--ink)}
.utz__field-error{margin:6px 0 0;font-size:var(--small);font-weight:600;color:var(--ink)}
.utz__field 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}
.utz__field-label{font-weight:600;color:var(--ink);margin-bottom:5px;font-size:var(--small)}
.utz__field input,.utz__field select,.utz__field 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). */
.utz__field 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-utz__caret=triangle] .utz__field 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}
.utz__field input:focus,.utz__field select:focus,.utz__field textarea:focus{
  outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.utz__field [aria-invalid=true]{border-color:var(--ink)}
.utz__field textarea{min-height:110px;resize:vertical}
/* checkbox + radio-row inputs: native controls, never full-width text inputs.
   These MUST sit below the generic .utz__field input rule (same specificity, so
   source order decides) — above it they lose and radios blow out to 100%. */
.utz__field-checkbox label{display:flex;align-items:flex-start;gap:8px;font-weight:500;margin-bottom:0}
.utz__field-checkbox input{width:auto;flex:none;margin:2px 0 0;padding:0;border:0;border-radius:0}
.utz__field-choice{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.utz__field-choice label{display:inline-flex;align-items:center;gap:8px;font-weight:500;margin-bottom:0;float:none}
.utz__field-choice input{width:auto;flex:none;margin:0;padding:0;border:0}
.utz__field input[type=file]{padding:10px;cursor:pointer}
/* free-type numeric inputs: no spinner arrows */
.utz__field input[type=number]{-moz-appearance:textfield}
.utz__field input[type=number]::-webkit-outer-spin-button,
.utz__field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.utz__form-note{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. */
.utz__field.utz__consent{margin:18px 0 14px}
.utz__consent-label{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}
.utz__consent-label 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. */
.utz__consent-label a{text-decoration:underline}
.utz__field input::placeholder,.utz__field textarea::placeholder{color:var(--muted);opacity:1}
.utz__hp{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. */
.utz__widget{padding:40px 0}
.utz__widget>.utz__wrap>h2{margin-bottom:.4rem}
/* breathing room below the tool form before the results heading/table that follows */
.utz__widget .utz__form-card{margin:8px 0 30px;padding:22px 24px}
.utz__widget .utz__form-card+h3{margin-top:0}
.utz__diag-q{border:0;margin:0 0 14px;padding:0}
.utz__diag-q:last-of-type{margin-bottom:8px}
.utz__widget .utz__form-card form{counter-reset:dq}
.utz__diag-q-legend{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 */
.utz__diag-q-legend::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}
.utz__diag-opt{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}
.utz__diag-opt:last-child{margin-bottom:0}
@media (hover:hover) and (pointer:fine){.utz__diag-opt: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 .utz__diag-opt, so they pick this up too) */
.utz__diag-opt: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)}
.utz__diag-opt:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.utz__diag-opt input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--primary)}
.utz__diag-q .utz__diag-opt+.utz__diag-opt{margin-top:0}
.utz__widget .utz__btn{margin-top:6px}
.utz__diag-out{margin-top:16px;padding:0}
.utz__diag-out: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. */
.utz__diag-out.utz__is-low:not(:empty){background:var(--bg-alt);font-weight:500}
.utz__diag-out.utz__is-mid:not(:empty){background:var(--primary-90)}
.utz__diag-out.utz__is-high:not(:empty){background:var(--ink);color:var(--bg)}
.utz__diag-out strong{display:block;margin-bottom:.15em}
.utz__widget .utz__ptable th,.utz__widget .utz__ptable 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 */
.utz__tool-levels{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.utz__tool-levels li{position:relative;padding:2px 0 2px 22px;color:var(--body);font-size:var(--small);line-height:1.55}
.utz__tool-levels li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;
  border-radius:999px;background:var(--primary);opacity:.35}
.utz__tool-levels .utz__lv-mid::before{opacity:.65}
.utz__tool-levels .utz__lv-high::before{opacity:1}
.utz__tool-levels .utz__lv-label{color:var(--ink)}
.utz__tool-levels li.utz__is-on{color:var(--ink)}
.utz__tool-levels li.utz__is-on::before{box-shadow:0 0 0 4px var(--primary-90)}
/* figures by job as a range bar chart (widgets.utz__range_chart) */
.utz__range-chart{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.utz__range-chart 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)}
.utz__range-chart .utz__rc-name{color:var(--ink);font-weight:600}
.utz__range-chart .utz__rc-track{position:relative;height:10px;border-radius:999px;background:var(--bg-alt)}
.utz__range-chart .utz__rc-bar{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--primary);opacity:.45}
.utz__range-chart li.utz__is-on .utz__rc-bar{opacity:1}
.utz__range-chart li.utz__is-on .utz__rc-name,.utz__range-chart li.utz__is-on .utz__rc-fig{color:var(--ink)}
.utz__range-chart .utz__rc-fig{font-variant-numeric:tabular-nums;white-space:nowrap}
.utz__range-chart .utz__rc-fig small{color:var(--muted)}
@media(max-width:640px){.utz__range-chart li{grid-template-columns:1fr auto}
  .utz__range-chart .utz__rc-track{grid-column:1/-1;grid-row:2}}
/* the select fields of a calculator sit two to a row on a wide card */
.utz__calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
@media(max-width:640px){.utz__calc-fields{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-utz__chart=slim] .utz__range-chart li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
[data-utz__chart=slim] .utz__range-chart .utz__rc-track{grid-column:1/-1;grid-row:2;height:6px}
[data-utz__chart=stacked] .utz__range-chart{gap:16px}
[data-utz__chart=stacked] .utz__range-chart li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
[data-utz__chart=stacked] .utz__range-chart .utz__rc-name{grid-column:1/-1}
[data-utz__chart=stacked] .utz__range-chart .utz__rc-track,[data-utz__chart=stacked] .utz__range-chart .utz__rc-bar{height:16px;border-radius:3px}
[data-utz__chart=ruled] .utz__range-chart{gap:0}
[data-utz__chart=ruled] .utz__range-chart li{padding:12px 0;border-bottom:1px solid var(--line)}
[data-utz__chart=ruled] .utz__range-chart .utz__rc-track{height:12px;background:none}
[data-utz__chart=ruled] .utz__range-chart .utz__rc-track::before{content:"";position:absolute;left:0;right:0;top:50%;
  border-top:1px dashed var(--line)}
[data-utz__chart=ruled] .utz__range-chart .utz__rc-bar{top:5px;bottom:auto;height:2px;opacity:1}
[data-utz__chart=ruled] .utz__range-chart .utz__rc-bar::before,[data-utz__chart=ruled] .utz__range-chart .utz__rc-bar::after{content:"";
  position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
[data-utz__chart=ruled] .utz__range-chart .utz__rc-bar::before{left:-5px}
[data-utz__chart=ruled] .utz__range-chart .utz__rc-bar::after{right:-5px}
[data-utz__chart=ruled] .utz__range-chart li:not(.utz__is-on) .utz__rc-bar{opacity:.5}
/* field_style: how every form and tool input is drawn (boxed is the base). */
[data-utz__fields=underline] .utz__field :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-utz__fields=underline] .utz__field textarea{border-width:2px;border-color:var(--line)}
[data-utz__fields=filled] .utz__field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  border-color:transparent;background-color:var(--bg-alt);border-radius:var(--r-md)}
[data-utz__fields=soft] .utz__field :is(input:not([type=checkbox]):not([type=radio]),select){border-radius:999px;
  padding-left:20px;border-color:var(--line)}
[data-utz__fields=soft] .utz__field textarea{border-radius:18px;border-color:var(--line);padding:14px 20px}
[data-utz__fields=soft] .utz__field select{padding-right:48px}
/* calculator_variant: slider = a live range slider driving a prominent figure. */
.utz__calc-slider-field input[type=range]{width:100%;margin-top:10px;accent-color:var(--primary)}
.utz__calc-figure{margin-top:20px;padding:18px 20px;border-radius:var(--r-md);
  background:var(--primary-90);text-align:center}
.utz__calc-figure-eyebrow{display:block;font-size:var(--meta);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.utz__calc-figure-out{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.utz__py quiz_style) ---- */
.utz__is-off{display:none!important}
.utz__diag-q-opts{display:block}
/* option_shape=chips: inline pills, the radio itself hidden, chosen chip filled */
.utz__diag-q--chips .utz__diag-q-opts{display:flex;flex-wrap:wrap;gap:8px}
.utz__diag-q--chips .utz__diag-opt,.utz__diag-q--cards .utz__diag-opt{position:relative}
.utz__diag-q--chips .utz__diag-opt input,.utz__diag-q--cards .utz__diag-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.utz__diag-q--chips .utz__diag-opt{display:inline-flex;margin:0;padding:8px 16px;border-radius:999px;
  font-size:var(--small)}
.utz__diag-q--chips .utz__diag-opt: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 */
.utz__diag-q--cards .utz__diag-q-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.utz__diag-q--cards .utz__diag-opt{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 */
.utz__diag-q--plain .utz__diag-opt{border:0;padding:4px 0;margin:0 0 4px;background:none!important;
  box-shadow:none!important;font-weight:500!important}
.utz__diag-q--plain .utz__diag-opt:has(input:checked){color:var(--ink)}
/* quiz_flow=steps: progress bar + counter above, Back / Next below */
.utz__quiz-top{margin:0 0 20px}
.utz__quiz-bar{height:6px;border-radius:999px;background:var(--bg-alt);overflow:hidden}
.utz__quiz-bar span{display:block;height:100%;width:0;background:var(--primary);transition:width .25s ease}
.utz__quiz-progress{font-size:var(--meta);color:var(--muted);margin:8px 0 0;font-weight:600}
.utz__quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 10px}
.utz__quiz-nav .utz__btn{margin-top:0}
.utz__quiz-nav-end{display:flex;gap:10px;margin-left:auto}
/* one question at a time: the numbered badge would read "1" on every step */
[data-utz__flow=steps] .utz__diag-q-legend::before{display:none}
.utz__quiz-nav .utz__btn[disabled]{opacity:.45;cursor:default}
.utz__diag-q.utz__is-missing .utz__diag-q-legend{color:var(--ink)}
.utz__diag-q.utz__is-missing::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 */
.utz__diag-out--prose:not(:empty){background:none;border-left:0;padding:16px 0 0;font-weight:400;
  font-size:var(--lead);color:var(--body)}
.utz__diag-out--prose p{margin:0}
.utz__diag-out--prose strong{display:inline;color:var(--ink)}
.utz__diag-out--prose.utz__is-high:not(:empty),.utz__diag-out--prose.utz__is-mid:not(:empty),
.utz__diag-out--prose.utz__is-low:not(:empty){background:none;color:var(--body)}
/* result_style=scale: every band on a strip, the matched one lit */
.utz__quiz-scale{list-style:none;display:flex;gap:6px;margin:18px 0 0;padding:0}
.utz__quiz-scale 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)}
.utz__quiz-scale li.utz__is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* result_style=replace: the questions give way to the result card */
.utz__quiz.utz__is-done fieldset,.utz__quiz.utz__is-done .utz__quiz-top,.utz__quiz.utz__is-done .utz__quiz-nav,.utz__quiz.utz__is-done>.utz__btn--lg{display:none}
.utz__diag-out--card:not(:empty){padding:24px 26px;border:1px solid var(--line);font-size:var(--lead)}
.utz__diag-out--card strong{font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--big);margin-bottom:.35em}
.utz__quiz.utz__is-done .utz__diag-out--card: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)}}
.utz__motion-fade .utz__is-anim:not(:empty),.utz__motion-count .utz__is-anim:not(:empty){animation:wfade .4s ease-out}
.utz__motion-rise .utz__is-anim:not(:empty){animation:wrise .45s ease-out}
@media(prefers-reduced-motion:reduce){.utz__is-anim{animation:none!important}.utz__quiz-bar span{transition:none}}
/* result_tone=mono: the brand held back on the tools */
.utz__tone-mono .utz__diag-q-legend::before{background:var(--bg-alt)}
@media (hover:hover) and (pointer:fine){.utz__tone-mono .utz__diag-opt:hover{border-color:var(--ink);background:var(--bg-alt)}}
.utz__tone-mono .utz__diag-opt:has(input:checked){border-color:var(--ink);background:var(--bg-alt);
  box-shadow:inset 0 0 0 1px var(--ink)}
.utz__tone-mono .utz__diag-q--chips .utz__diag-opt:has(input:checked){background:var(--ink);border-color:var(--ink);
  color:var(--bg);box-shadow:none}
.utz__tone-mono .utz__diag-opt input{accent-color:var(--ink)}
.utz__tone-mono .utz__quiz-bar span{background:var(--ink)}
.utz__tone-mono .utz__diag-out:not(:empty){background:var(--bg-alt)}
.utz__tone-mono .utz__diag-out.utz__is-low:not(:empty){background:var(--bg-alt);font-weight:500}
.utz__tone-mono .utz__diag-out.utz__is-mid:not(:empty){background:var(--bg-alt);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line)}
.utz__tone-mono .utz__diag-out.utz__is-high:not(:empty){background:var(--ink);color:var(--bg)}
.utz__tone-mono .utz__diag-out--prose:not(:empty),.utz__tone-mono .utz__diag-out--prose.utz__is-low:not(:empty),
.utz__tone-mono .utz__diag-out--prose.utz__is-mid:not(:empty),.utz__tone-mono .utz__diag-out--prose.utz__is-high:not(:empty){
  background:none;color:var(--body);box-shadow:none}
.utz__tone-mono .utz__calc-figure{background:var(--bg-alt)}
.utz__tone-mono .utz__form-card{border-top-color:var(--ink)}
.utz__sav-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.utz__sav-compare div{padding:14px 12px;border-radius:var(--r-md);background:var(--bg-alt);text-align:center}
.utz__sav-compare div:last-child{background:var(--primary-90)}
.utz__tone-mono .utz__sav-compare div:last-child{background:var(--ink);color:var(--bg)}
.utz__sav-compare small{display:block;font-size:var(--meta);text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;margin-bottom:4px}
.utz__tone-mono .utz__sav-compare div:last-child small{color:inherit;opacity:.8}
.utz__sav-compare strong{font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--big)}
@media(max-width:560px){.utz__sav-compare{grid-template-columns:1fr}}
/* tools hub cards */
.utz__toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:8px}
.utz__toolcard{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.utz__toolcard:hover{text-decoration:none;border-color:var(--n-300);box-shadow:var(--shadow)}}
.utz__toolcard h3{margin:.4rem 0 .1rem;color:var(--black)}
.utz__toolcard p{margin:0;color:var(--body)}
.utz__toolcard .utz__more{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 */
.utz__toolgrid--rows,.utz__toolgrid--feature{grid-template-columns:1fr;gap:12px}
.utz__toolgrid--rows .utz__toolcard,.utz__toolgrid--feature .utz__toolcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:18px;align-items:center;padding:18px 22px}
.utz__toolgrid--rows .utz__toolcard .utz__icon,.utz__toolgrid--feature .utz__toolcard .utz__icon{grid-row:1/3}
.utz__toolgrid--rows .utz__toolcard h3,.utz__toolgrid--feature .utz__toolcard h3{margin:0}
.utz__toolgrid--rows .utz__toolcard .utz__more,.utz__toolgrid--feature .utz__toolcard .utz__more{grid-column:3;grid-row:1/3;margin:0;padding:0}
.utz__toolgrid--feature .utz__toolcard:first-child{background:var(--primary-90);border-color:transparent;padding:30px 28px}
@media(max-width:640px){.utz__toolgrid--rows .utz__toolcard,.utz__toolgrid--feature .utz__toolcard{grid-template-columns:auto minmax(0,1fr)}
  .utz__toolgrid--rows .utz__toolcard .utz__more,.utz__toolgrid--feature .utz__toolcard .utz__more{grid-column:2;grid-row:auto;padding-top:6px}}
/* Eighth round: interior page composition pools (engine/blocks.utz__py). */
/* 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. */
.utz__hero--int{padding:56px 0 76px}
.utz__hero--utility{padding:44px 0 52px}
.utz__hero--tall{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 */
.utz__hero-grid--cta{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:40px}
.utz__hero-aside{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}
.utz__hero-aside-h{margin:0 0 14px;font-family:var(--font-head);font-weight:var(--head-bold);font-size:var(--lead);color:var(--ink)}
.utz__hero-aside .utz__hero-cta{margin-top:0;flex-direction:column;align-items:stretch;gap:10px}
.utz__hero-aside .utz__hero-cta .utz__btn{width:100%;text-align:center}
.utz__hero-aside .utz__btn--outline-light{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover) and (pointer:fine){.utz__hero-aside .utz__btn--outline-light:hover{background:var(--ink);color:var(--surface)}}
.utz__hero-aside-phone{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 .utz__toc-jump 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-utz__logo=compact]{--sticky-top:94px}
[data-utz__logo=large]{--sticky-top:98px}
[data-utz__logo=tall]{--sticky-top:102px}
[data-utz__header=tworow]{--sticky-top:150px}
[data-utz__header=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-utz__sticky=static] .utz__site-header{position:static}
[data-utz__sticky=static]{--sticky-top:16px}}
.utz__article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.utz__article-main{max-width:760px}
.utz__article-rail{position:sticky;top:var(--sticky-top);display:flex;flex-direction:column;gap:18px}
.utz__rail-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px}
.utz__rail-card .utz__eyebrow{margin-bottom:.4rem}
.utz__rail-card p{margin:0 0 .9rem;color:var(--body)}
.utz__rail-card h3{margin:0 0 .5rem;}
.utz__rail-card .utz__btn{display:block;text-align:center}
.utz__rail-links{list-style:none;margin:0;padding:0}
.utz__rail-links li{padding:7px 0;border-top:1px solid var(--line)}
/* links_shape=ruled: a single-column ruled list — town name left, site glyph right */
.utz__ruled-links{list-style:none;margin:0;padding:0}
.utz__ruled-links li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.utz__ruled-links li:first-child{border-top:0}
.utz__ruled-links a{font-weight:600;color:var(--ink);flex:1}
.utz__ruled-links .utz__glyph{color:var(--muted)}
.utz__rail-links li:first-child{border-top:0;padding-top:0}
.utz__standfirst{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 */
.utz__hub-rows{max-width:880px;margin:0 auto}
.utz__hub-row .utz__res-meta{margin:0 0 2px}
.utz__hub-row .utz__svc-row-main h3{margin:0}
.utz__card--feature{grid-column:1/-1;background:var(--bg-alt);border-color:transparent;padding:34px 36px}
.utz__card--feature h3{font-size:var(--h3)}
.utz__card--feature 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. */
.utz__prose-split{align-items:start}
.utz__prose-split .utz__svc-index-copy{position:sticky;top:var(--sticky-top)}
.utz__tool-panel p{max-width:none}
.utz__prose-split .utz__prose>:first-child{margin-top:0}
/* the pull-quote attribution sits on a tinted callout, not the hero: muted, never white */
.utz__callout .utz__byline{color:var(--muted)}
/* tool_layout: sidebar = tool beside a sticky rail; panel = tool in a tinted panel */
.utz__tool-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.utz__tool-main>h2{margin-top:0}
.utz__tool-rail{position:sticky;top:var(--sticky-top)}
.utz__tool-panel{background:var(--bg-alt);border-radius:var(--r-xl);padding:36px 40px}
.utz__tool-panel>h2{margin-top:0}
.utz__tool-panel .utz__form-card{background:var(--surface)}
/* article_layout: meta = editorial meta rail left of the column; boxed = the
   column as a white card on a tinted band */
.utz__article-meta-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.utz__article-meta{position:sticky;top:var(--sticky-top);padding-top:10px;border-top:1px solid var(--line)}
.utz__article-meta .utz__eyebrow{margin:14px 0 6px}
.utz__article-meta .utz__byline{margin:0 0 14px;color:var(--muted);font-size:var(--small)}
.utz__article-meta .utz__meta-h,.utz__author-card .utz__meta-h{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)}
.utz__author-card .utz__meta-h{margin-top:0}
.utz__article-box{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 */
.utz__hub-group+.utz__hub-group{margin-top:36px}
.utz__hub-group-h{max-width:880px;margin:0 auto 4px;font-size:var(--small);text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.utz__hub-compact{list-style:none;margin:0 auto;padding:0;max-width:880px;columns:2;column-gap:44px}
.utz__hub-compact li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--line)}
.utz__hub-compact li a{font-weight:700;color:var(--black)}
.utz__hub-compact li .utz__res-meta{display:block;margin:2px 0 0}
.utz__hub-ledger{list-style:none;margin:var(--head-gap,28px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.utz__hub-ledger li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.utz__hub-ledger li a{font-weight:600;color:var(--ink)}
.utz__hub-ledger li .utz__res-meta{margin:0;white-space:nowrap}
.utz__hub-mag-leads{margin-top:var(--head-gap,28px)}
.utz__hub-mag-leads .utz__card--feature h3{font-size:var(--h3)}
.utz__hub-mag-rest{margin-top:var(--grid-gap,24px)}
.utz__card--compact{padding:16px 18px}
.utz__card--compact p{display:none}
@media(max-width:720px){.utz__hub-ledger{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) */
.utz__tool-main,.utz__article-main,.utz__prose-split>*,.utz__article-meta-grid>*{min-width:0}
.utz__tool-band>.utz__wrap>h2{margin-bottom:22px}
.utz__tool-band .utz__form-card{background:var(--surface)}
/* use-case page: signs / factors shapes, related links */
.utz__uc-cards .utz__card p{margin:0;color:var(--ink);font-weight:600}
.utz__uc-steps li p{margin:0}
.utz__uc-callout h3{margin-bottom:.6rem}
.utz__uc-callout .utz__ticks{margin:0}
.utz__card--link{display:flex;align-items:center;gap:12px}
.utz__card--link h3{margin:0;flex:1}
.utz__card--link .utz__more .utz__glyph{font-size:var(--glyph)}
.utz__uc-panel--onalt{background:var(--surface);border:1px solid var(--line)}
@media(max-width:900px){
  .utz__hero-grid--cta{grid-template-columns:1fr}
  .utz__hero-aside{justify-self:stretch;max-width:none}
  .utz__article-grid,.utz__tool-grid,.utz__article-meta-grid{grid-template-columns:1fr}
  .utz__article-rail,.utz__tool-rail,.utz__prose-split .utz__svc-index-copy,.utz__article-meta{position:static}
  .utz__hub-compact{columns:1}
}
@media(max-width:680px){.utz__tool-panel{padding:24px 20px}.utz__card--feature{padding:24px 22px}
  .utz__article-box{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 `.utz__section .utz__center` / `.utz__pills` left. Gate:
   tests/test_operator_design_rules.utz__py TestBlockAlignmentConsistent. */
/* folio CTA: a quiet bordered card, centred at reading width (the left-flush
   card left a dead gap to the right) */
[data-utz__theme=folio] .utz__cta-plain .utz__cta-panel{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-utz__theme=folio] .utz__steps 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 */
.utz__fact-strip{display:grid;grid-template-columns:repeat(var(--fc, 3),1fr);
  gap:18px 30px;margin:0}
.utz__fact-cell{grid-column:span var(--fs, 1);border-top:1px solid var(--line);
  padding-top:10px;font-size:var(--small);color:var(--body)}
.utz__fact-cell .utz__fact-what{display:block;margin-top:4px;color:var(--muted)}
.utz__fact-label{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){.utz__fact-strip{grid-template-columns:repeat(2,1fr)}
  .utz__fact-cell{grid-column:auto}}
@media(max-width:560px){.utz__fact-strip{grid-template-columns:1fr}}
.utz__facts-table{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.utz__e. 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
   .utz__facts-table). Mobile relaxes the floor: single-column rows of empty
   space read as broken. */
.utz__facts-table tr{height:calc(4 * var(--body-leading, 1.5) * 0.95rem + 20px)}
.utz__facts-table 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}
.utz__facts-table 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. */
.utz__f-ico{display:inline-block;vertical-align:-4px;margin-right:9px;
  color:var(--primary)}
.utz__f-ico svg{width:17px;height:17px;display:block}
@media(max-width:640px){.utz__facts-table 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 .utz__btn on its own row, so no option rule doubles
   there either. */
[data-utz__menurules=hairline] .utz__mega-all,[data-utz__menurules=dotted] .utz__mega-all{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. */
.utz__more{align-items:center}
@media (hover:hover) and (pointer:fine){.utz__more:hover{text-decoration:none}}
.utz__more{color:var(--link)}
main p a.utz__more,.utz__faq-ask a.utz__more{text-decoration:none}
.utz__more .utz__more-text{text-decoration:none}
@media (hover:hover) and (pointer:fine){.utz__more:hover .utz__more-text{text-decoration:none}}
.utz__more .utz__glyph{display:inline-flex;align-items:center;line-height:1;font-size:var(--glyph);transition:transform .18s ease,color .18s ease}
.utz__more .utz__glyph svg{display:block;width:.8em;height:.8em}
.utz__nav-cta-glyph 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-utz__glyphhover=slide] .utz__more:hover .utz__glyph{transform:translateX(3px)}
[data-utz__glyphhover=tint] .utz__more:hover .utz__glyph{color:var(--primary)}
[data-utz__glyphhover=both] .utz__more:hover .utz__glyph{transform:translateX(3px);color:var(--primary)}}
.utz__faq-ask .utz__more{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 .utz__section vs bare split is folded away; late in the sheet so it wins). */
.utz__eyebrow,.utz__section .utz__eyebrow{margin:0 0 var(--eyebrow-gap,10px)}
.utz__eyebrow + h1,.utz__eyebrow + h2,.utz__eyebrow + h3{margin-top:0}
/* E7 (C5): the strip CTA is a --primary band, so its button inverts (white
   on brand) exactly like .utz__cta-band .utz__btn. */
.utz__cta-strip .utz__btn{background:#fff;color:var(--primary)}
@media (hover:hover) and (pointer:fine){.utz__cta-strip .utz__btn: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 `.utz__center` override is itself banned.) */
[data-utz__theme=basalt] .utz__cta-band--solid{text-align:left}
[data-utz__theme=basalt] .utz__cta-band .utz__cta-ticks,
[data-utz__theme=basalt] .utz__cta-band--solid .utz__cta-ticks{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-utz__theme=govpress]. The text
   rules skip a boxed hero: its photo panel keeps the base light text. */
[data-utz__theme=govpress] .utz__hero{background:var(--bg) !important;color:var(--ink)}
[data-utz__theme=govpress] .utz__hero::before,[data-utz__theme=govpress] .utz__hero::after{display:none}
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) h1{color:var(--ink);text-shadow:none}
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__lead,
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__about-def,
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__hero-proof li{color:var(--body);text-shadow:none}
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__hero-proof li::before{border-color:var(--primary)}
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__eyebrow,
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__eyebrow .utz__eb-a{color:inherit;text-shadow:none}
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__eyebrow .utz__eb-sep,
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__eyebrow .utz__eb-b{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
   .utz__section .utz__center / .utz__pills left-pulls for this theme. */
/* green button with the hard bottom edge (the GOV.utz__UK button signature) */
[data-utz__theme=govpress] .utz__btn{box-shadow:0 3px 0 var(--cta-hover)}
@media (hover:hover) and (pointer:fine){[data-utz__theme=govpress] .utz__btn:hover{background:var(--cta);box-shadow:0 1px 0 var(--cta-hover);
  transform:translateY(2px)}}
[data-utz__theme=govpress] .utz__hero:not(.utz__hero--boxed) .utz__btn--outline-light{box-shadow:inset 0 0 0 2px var(--line);color:var(--ink)}
[data-utz__theme=govpress] .utz__btn.utz__btn--outline-light{box-shadow:inset 0 0 0 2px var(--line), 0 3px 0 var(--n-300)}
@media (hover:hover) and (pointer:fine){[data-utz__theme=govpress] .utz__btn.utz__btn--outline-light: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-utz__theme=govpress] .utz__cta-plain-inner{border:1px solid var(--line);border-radius:0;
  background:var(--bg);padding-left:34px}
[data-utz__theme=govpress] .utz__benefit{border:1px solid var(--line);border-radius:0;
  background:var(--bg)}
[data-utz__theme=govpress] .utz__benefit .utz__icon{background:transparent;color:var(--primary)}
/* faq accordions read as GOV.utz__UK <details> */
[data-utz__theme=govpress] .utz__faq summary{list-style:none}
[data-utz__theme=govpress] .utz__faq summary::-webkit-details-marker{display:none}
[data-utz__theme=govpress] .utz__faq summary::before{content:"\25B8\2002";color:var(--primary)}
[data-utz__theme=govpress] .utz__faq 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-utz__theme=govpress] .utz__faq 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-utz__theme=govpress] .utz__crumbs{font-size:var(--lead);padding:12px 0;
  border-bottom:1px solid var(--line)}
[data-utz__theme=govpress] .utz__crumbs a{color:var(--link);text-decoration:underline;
  text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){[data-utz__theme=govpress] .utz__crumbs a:hover{color:var(--primary-hover)}}
[data-utz__theme=govpress] .utz__crumbs span[aria-hidden]{color:var(--muted)}
/* footer: black band, brand top rule */
[data-utz__theme=govpress] .utz__site-footer{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. */
.utz__loc-grid{display:grid;grid-template-columns:1fr;gap:18px}
.utz__loc-grid h2{margin:0}
/* optional eyebrow + high-level intro rendered with the heading */
.utz__loc-intro{margin-top:10px;color:var(--body);font-size:var(--lead)}
.utz__loc-body > :first-child{margin-top:0}
.utz__loc-body > :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 */
.utz__loc-body .utz__prose{columns:2;column-gap:44px}
.utz__loc-body .utz__prose p{margin:0 0 14px;break-inside:avoid;max-width:none}
@media(max-width:820px){.utz__loc-body .utz__prose{columns:1}}
/* 'list' presentation: one icon-led item per fact */
.utz__facts-list{list-style:none;margin:0;padding:0}
.utz__facts-list li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--body)}
.utz__facts-list 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 */
.utz__fact-diagram{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:28px;align-items:center;margin:0}
.utz__fd-art{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface)}
.utz__fd-sky{fill:var(--bg-alt)}
.utz__fd-ground{fill:var(--primary-90)}
.utz__fd-strata{fill:none;stroke:var(--line);stroke-width:1.5}
.utz__fd-water{fill:var(--primary);opacity:.35}
.utz__fd-tree{fill:var(--primary);opacity:.45}
.utz__fd-trunk{fill:var(--muted)}
.utz__fd-wall{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.utz__fd-roof{fill:var(--ink);opacity:.8}
.utz__fd-win{fill:var(--bg-alt);stroke:var(--ink);stroke-width:1}
.utz__fd-door{fill:var(--primary)}
.utz__fd-pin circle{fill:var(--primary);stroke:var(--surface);stroke-width:2}
.utz__fd-pin text{fill:var(--on-primary);font-size:11px;font-weight:var(--head-bold);font-family:var(--font-head)}
.utz__fd-key{list-style:none;margin:0;padding:0}
.utz__fd-key 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)}
.utz__fd-key li strong{color:var(--ink)}
.utz__fd-n{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){.utz__fact-diagram{grid-template-columns:1fr}}
/* footer */
/* conversion benefits grid (service pages): authored reassurance copy as
   substantive benefit cards, not bare ticks */
.utz__benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px;
  margin-top:26px}
.utz__benefit{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)}
.utz__benefit .utz__icon{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)}
.utz__benefit .utz__icon svg{width:18px;height:18px}
.utz__benefit strong{color:var(--ink)}
.utz__benefit > :last-child{margin-bottom:0}
.utz__benefit-ticks{font-size:var(--lead);max-width:820px}
.utz__benefit-ticks li{margin-bottom:12px}
.utz__benefit-ticks strong{color:var(--ink)}
@media(max-width:820px){.utz__benefit-grid{grid-template-columns:1fr}}
.utz__site-footer{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-utz__footer=brand] .utz__site-footer{--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-utz__footer=light] .utz__site-footer{--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-utz__footer=light] .utz__footer--boxed{background:var(--bg)}
[data-utz__footer=light] .utz__footer--boxed>.utz__wrap.utz__footer-box{border:1px solid var(--line)}
.utz__footer-grid{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. */
.utz__footer-grid--nap{grid-template-columns:1.5fr repeat(auto-fit,minmax(140px,1fr))}
.utz__footer-nap .utz__footer-wordmark{font-size:var(--big)}
.utz__footer-nap .utz__footer-addr{margin-top:10px}
.utz__footer-nap{min-width:0}
.utz__footer-nap .utz__footer-addr,.utz__footer-nap .utz__footer-email{margin-bottom:0}
.utz__site-footer h4{color:var(--foot-head,#fff);font-size:var(--lead);line-height:1.3;margin:0 0 14px;padding-top:.3rem}
.utz__footer-grid>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 */
.utz__site-footer a{color:var(--n-300);display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.utz__site-footer a:hover{color:var(--primary-60)}}
.utz__site-footer ul{list-style:none;padding:0;margin:0}
.utz__site-footer li{margin-bottom:0}
.utz__footer-brand svg{margin-bottom:12px}
.utz__footer-bottom{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)}
.utz__statutory-disclosure{flex-basis:100%;margin:0;color:var(--n-300)}
.utz__footer-legal{display:flex;flex-wrap:wrap;gap:0 18px}
.utz__footer-legal a{color:var(--n-300)}
@media (hover:hover) and (pointer:fine){.utz__footer-legal a:hover{color:var(--primary-60)}}
.utz__footer-addr{margin-top:10px;font-style:normal;font-size:var(--small);color:var(--n-300)}
.utz__footer-grid>*{min-width:0}
.utz__footer-email{margin-top:8px;font-size:var(--small)}
.utz__contact-email{overflow-wrap:anywhere}

/* trust bar (sits on a dark section) */
.utz__trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;align-items:stretch}
.utz__trust>*{min-width:0}
.utz__trust>div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22px 16px}
.utz__trust .utz__num--long{font-size:var(--big);line-height:1.15;padding-top:6px}
.utz__trust .utz__num{font-family:var(--font-head);font-size:var(--display);font-weight:var(--head-bold);
  color:var(--primary-60);line-height:1}
.utz__trust .utz__lbl{font-size:var(--small);color:var(--n-300);margin-top:4px}
.utz__section--dark .utz__trust .utz__num{color:#fff}
.utz__section--dark .utz__trust .utz__lbl{color:#b9bfc6}
/* metrics/trust as a branded colour block (per-site brand colour, not the same
   near-black on every site) */
.utz__trust-band{background:var(--primary);padding:36px 0}
.utz__trust-band .utz__trust .utz__num{color:#fff}
.utz__trust-band .utz__trust .utz__lbl{color:rgba(255,255,255,.85)}
.utz__trust--3{grid-template-columns:repeat(3,1fr);max-width:900px;margin-left:auto;margin-right:auto}
.utz__trust--panel.utz__trust--odd>div:first-child{grid-column:1/-1}
.utz__contact-trust .utz__price-line{margin:0 0 12px}
.utz__contact-infocol>.utz__contact-sidebar+.utz__contact-trust{margin-top:24px}
/* trust_stats=statement: a single prose line, no numbers */
.utz__trust-statement{font-family:var(--font-head);font-size:var(--lead);margin:0;text-align:center}
.utz__trust-band--statement .utz__trust-statement{color:var(--on-primary)}
.utz__trust-sec--statement .utz__trust-statement{color:var(--ink)}
.utz__section--dark .utz__trust-sec--statement .utz__trust-statement,.utz__section--dark .utz__trust-statement{color:inherit}
/* statement mode: the statement heads a compact inline row of the items —
   never a lone-sentence section */
.utz__trust-sec--statement .utz__trust-inline,.utz__trust-band--statement .utz__trust-inline{
  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 */
.utz__trust-inline{font-family:var(--font-head);font-size:var(--lead);margin:0;text-align:center;
  color:var(--ink)}
.utz__trust-inline 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) */
.utz__trust-band--statement .utz__trust-inline,.utz__trust-band--statement .utz__trust-inline strong{
  color:var(--on-primary)}
/* a dark band paints its own ink: no descendant keeps a page-surface colour (AA on the band) */
.utz__section--dark p,.utz__section--dark li,.utz__section--dark h2,.utz__section--dark h3,.utz__section--dark .utz__lead,
.utz__section--dark .utz__eyebrow,.utz__section--dark .utz__trust-inline,.utz__section--dark .utz__trust-statement,
.utz__section--dark strong,.utz__section--dark .utz__trust-inline strong{color:inherit}
.utz__ti-sep{color:var(--muted);margin:0 .35em}
/* trust_variant=splitpanel: statement copy left, a 2×2 stat grid right */
.utz__tp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.utz__tp-copy .utz__lead{margin-bottom:0}
.utz__trust--panel{grid-template-columns:repeat(2,1fr);gap:14px;text-align:left;
  max-width:none;margin:0}
.utz__trust--panel .utz__num{font-size:var(--display)}
.utz__trust--panel>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}
.utz__trust--panel .utz__num{color:var(--primary)}
.utz__trust--panel .utz__lbl{color:var(--muted)}
@media(max-width:820px){.utz__tp-grid{grid-template-columns:1fr;gap:26px}}

/* logo images (no filters, ever) */
.utz__brand 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. */
.utz__brand{min-width:0}
.utz__brand img{max-width:100%;height:auto;object-fit:contain;object-position:left}
.utz__footer-wordmark{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}
.utz__cta-ticks{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. */
.utz__cta-band{background:var(--primary);color:#fff}
.utz__cta-band .utz__eyebrow{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 */
.utz__cta-band .utz__eyebrow .utz__eb-a,.utz__cta-panel .utz__eyebrow .utz__eb-a,
.utz__cta-split-copy .utz__eyebrow .utz__eb-a{color:#fff}
.utz__cta-band .utz__eyebrow .utz__eb-sep,.utz__cta-band .utz__eyebrow .utz__eb-b,
.utz__cta-panel .utz__eyebrow .utz__eb-sep,.utz__cta-panel .utz__eyebrow .utz__eb-b,
.utz__cta-split-copy .utz__eyebrow .utz__eb-sep,.utz__cta-split-copy .utz__eyebrow .utz__eb-b{color:rgba(255,255,255,.75)}
.utz__cta-band h2{color:#fff}
.utz__cta-band .utz__lead{color:rgba(255,255,255,.92)}
.utz__cta-band .utz__cta-ticks{color:var(--on-primary)}
.utz__cta-band .utz__cta-ticks li::before{background:#fff}
.utz__cta-band .utz__btn{background:#fff;color:var(--primary)}
@media (hover:hover) and (pointer:fine){.utz__cta-band .utz__btn:hover{background:var(--primary-90);color:var(--primary)}}
.utz__cta-band--solid{padding:52px 0;text-align:center}
/* cta_variant: panel = a contained brand card (not full-bleed). */
.utz__cta-panel{background:var(--primary);color:var(--on-primary);border-radius:var(--r-lg);
  padding:44px 40px;box-shadow:var(--sh-lg)}
.utz__cta-panel .utz__eyebrow{color:rgba(255,255,255,.82)}
.utz__cta-panel h2{color:#fff}
.utz__cta-panel .utz__lead{color:inherit;margin-bottom:0}
.utz__cta-panel .utz__cta-ticks{color:var(--on-primary);margin:14px auto 22px}
.utz__cta-panel .utz__cta-ticks li::before{background:#fff}
.utz__cta-panel .utz__btn{background:#fff;color:var(--primary)}
@media (hover:hover) and (pointer:fine){.utz__cta-panel .utz__btn:hover{background:var(--primary-90);color:var(--primary)}}
/* cta_variant: split = two columns — copy left, a dedicated white action card right. */
.utz__cta-split{background:var(--primary);color:var(--on-primary)}
.utz__cta-split-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  padding:44px 0}
.utz__cta-split-copy .utz__eyebrow{color:rgba(255,255,255,.82)}
.utz__cta-split-copy h2{color:#fff}
.utz__cta-split-copy .utz__lead{color:rgba(255,255,255,.92)}
.utz__cta-split-copy .utz__cta-ticks{color:var(--on-primary)}
.utz__cta-split-copy .utz__cta-ticks li::before{background:#fff}
.utz__cta-split-action{background:#fff;border-radius:var(--r-lg);padding:28px 26px;text-align:center;
  box-shadow:var(--sh-lg)}
.utz__cta-split-h{margin:0 0 14px;font-family:var(--font-head);font-weight:var(--head-bold);color:var(--ink);
  font-size:var(--lead)}
.utz__cta-split-action .utz__btn{width:100%}
.utz__cta-split-fine{margin:14px 0 0;color:var(--muted);font-size:var(--small)}
@media(max-width:820px){.utz__cta-split-inner{grid-template-columns:1fr;gap:24px;padding:34px 0}}
/* cta_variant: plain = a light, brand-outlined sign-off (dark text on the page bg). */
.utz__cta-plain-inner{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}
.utz__cta-plain .utz__eyebrow{color:var(--primary)}
.utz__cta-plain h2{color:var(--ink)}
.utz__cta-plain .utz__lead{color:var(--body)}
.utz__cta-plain .utz__cta-ticks{color:var(--body);display:block;margin:16px 0 22px;max-width:none}
.utz__cta-plain .utz__cta-ticks li::before{background:var(--primary)}
/* trust_variant: cards + plain treatments (band is the default brand strip above). */
.utz__trust-sec{padding:40px 0}
.utz__trust-sec--plain .utz__trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0}
.utz__trust-sec--plain .utz__num,.utz__trust-sec--cards .utz__num{color:var(--primary)}
.utz__trust-sec--plain .utz__lbl,.utz__trust-sec--cards .utz__lbl{color:var(--muted)}
.utz__trust-sec--cards .utz__trust>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. */
.utz__intro-grid{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 */
.utz__intro-grid--action{grid-template-columns:1.15fr .85fr;align-items:center}
.utz__intro-action{background:var(--bg-alt);border-radius:var(--r-lg);padding:28px 30px}
.utz__intro-action p{margin:0 0 18px;color:var(--body)}
.utz__intro-action .utz__btn{width:100%}
.utz__intro-head h2{margin:.2rem 0 0}
.utz__intro-body .utz__lead{margin:0}
.utz__intro-rule{background:var(--bg-alt)}
.utz__intro-rule .utz__rule-accent{display:block;width:52px;height:4px;border-radius:var(--r-sm);
  background:var(--primary);margin:0 0 18px}
@media(max-width:820px){.utz__intro-grid{grid-template-columns:1fr;gap:16px}}
/* optional home block: how_we_work teaser — a compact numbered step grid. */
.utz__hw-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:22px 40px}
.utz__hw-steps li{display:flex;gap:15px;align-items:flex-start}
.utz__hw-steps .utz__hw-n{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}
.utz__hw-steps h3{margin:3px 0 .25rem;}
.utz__hw-steps p{margin:0;color:var(--body)}
@media(max-width:640px){.utz__hw-steps{grid-template-columns:1fr;gap:18px}}

/* mega-menus */
.utz__has-menu{position:relative}
/* dropdown parent: a non-navigating button styled like a nav link */
.utz__nav-parent{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}
.utz__nav-parent.utz__is-active,.utz__nav-parent:focus-visible,
.utz__has-menu.utz__is-open .utz__nav-parent{border-bottom-color:var(--primary)}
@media (hover:hover) and (pointer:fine){.utz__has-menu:hover .utz__nav-parent{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-utz__caret=...]); caret_motion (rotate|static)
   decides whether it turns at all — static only brightens to the link colour. */
.utz__caret{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%}
.utz__caret svg{display:block}
.utz__has-menu.utz__is-open .utz__caret{opacity:1}
@media (hover:hover) and (pointer:fine){.utz__has-menu:hover .utz__caret{opacity:1}}
[data-utz__caret-motion=rotate] .utz__has-menu.utz__is-open .utz__caret{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){[data-utz__caret-motion=rotate] .utz__has-menu:hover .utz__caret{transform:rotate(180deg)}}
[data-utz__caret-motion=rotate][data-utz__caret=plus] .utz__has-menu.utz__is-open .utz__caret{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){[data-utz__caret-motion=rotate][data-utz__caret=plus] .utz__has-menu:hover .utz__caret{transform:rotate(45deg)}}
[data-utz__caret=none] .utz__caret{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
   --utz__mega-drop 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. */
.utz__mega{--nav-surface:var(--surface);--nav-fg:var(--ink);--nav-fg-muted:var(--muted);
  position:absolute;top:calc(100% + var(--utz__mega-drop,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. */
.utz__mega 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){.utz__mega a:hover{background:var(--bg-alt);color:var(--primary);text-decoration:none}}
.utz__mega-all{color:var(--primary);font-weight:600;border-top:1px solid var(--line);margin-top:4px;padding-top:9px}
.utz__has-menu.utz__is-open>.utz__mega{display:block}
@media (hover:hover) and (pointer:fine){.utz__has-menu:hover>.utz__mega{display:block}}
.utz__mega::before{content:"";position:absolute;left:0;right:0;
  top:calc(-1 * var(--utz__mega-drop,0px));height:var(--utz__mega-drop,0px)}
/* menu_skin pool (rule: tokens only — nothing inside .utz__mega is a dark literal) */
[data-utz__menu=tinted] .utz__mega{background:var(--bg-alt)}
@media (hover:hover) and (pointer:fine){[data-utz__menu=tinted] .utz__mega a:hover{background:var(--surface);color:var(--primary)}}
[data-utz__menu=floating] .utz__mega{border:0;border-radius:var(--r-md);margin-top:8px;
  box-shadow:0 14px 36px rgba(0,0,0,.16)}
[data-utz__menu=ruled] .utz__mega a{border-bottom:1px solid var(--line);border-radius:0}
@media (hover:hover) and (pointer:fine){[data-utz__menu=ruled] .utz__mega 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 .utz__mega (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-utz__menucorners=square] .utz__mega{border-radius:0}
[data-utz__menucorners=soft] .utz__mega{border-radius:var(--r-sm)}
[data-utz__menucorners=bottom] .utz__mega{border-radius:0 0 var(--r-md) var(--r-md)}
[data-utz__menurules=none] .utz__mega a{border-bottom:0}
[data-utz__menurules=hairline] .utz__mega a{border-bottom:1px solid var(--line)}
[data-utz__menurules=dotted] .utz__mega a{border-bottom:1px dotted var(--line)}
[data-utz__menurules=inset] .utz__mega 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-utz__menurules=inset] .utz__mega a:not(:last-child):not(:has(+ .utz__mega-all))::after{content:"";position:absolute;
  left:12px;right:12px;bottom:0;border-bottom:1px solid var(--line)}
[data-utz__menushadow=none] .utz__mega{box-shadow:none}
[data-utz__menushadow=soft] .utz__mega{box-shadow:0 8px 24px rgba(0,0,0,.08)}
[data-utz__menushadow=hard] .utz__mega{box-shadow:0 12px 32px rgba(0,0,0,.16)}
[data-utz__menushadow=line] .utz__mega{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-utz__menu=floating] .utz__mega::before{top:calc(-8px - var(--utz__mega-drop,0px));
  height:calc(8px + var(--utz__mega-drop,0px))}
}
@media (min-width:901px) and (hover:hover) and (pointer:fine){[data-utz__menuhover=tint] .utz__mega a:not(.utz__btn):hover{background:var(--bg-alt);color:var(--primary)}
[data-utz__menuhover=ink] .utz__mega a:not(.utz__btn):hover{background:transparent;color:var(--primary)}
[data-utz__menuhover=underline] .utz__mega a:not(.utz__btn):hover{background:transparent;
  color:var(--primary);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.2em}
[data-utz__menuhover=bar] .utz__mega a:not(.utz__btn):hover{background:transparent;color:var(--primary);
  box-shadow:inset 3px 0 0 var(--primary);border-radius:0}}
/* R25 (C1.3): .utz__mega a and the ruled skin out-specify .utz__btn 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. */
.utz__mega a.utz__btn{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){.utz__mega a.utz__btn: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 */
.utz__crumbs.utz__crumbs--inhero,.utz__crumbs.utz__crumbs--ineyebrow{padding:0 0 18px;border:0;background:none;
  font-size:var(--meta,.82rem)}
.utz__crumbs.utz__crumbs--ineyebrow{padding-bottom:12px}
/* the hero's own text colour, softened: muted on a plain hero, white on a photo */
.utz__hero .utz__crumbs--inhero,.utz__hero .utz__crumbs--ineyebrow{color:inherit;opacity:.8}
.utz__hero .utz__crumbs--inhero a,.utz__hero .utz__crumbs--ineyebrow 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 .utz__mega link list below. */
/* footer variants */
.utz__footer--slim .utz__footer-slim{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;padding:34px 0 8px}
.utz__footer-nav{display:flex;flex-wrap:wrap;gap:0 18px}
.utz__footer-nav a{color:var(--n-300);font-size:var(--small)}
.utz__footer-nav--center{justify-content:center;margin:14px 0 4px}
.utz__footer--centered .utz__footer-centered{text-align:center;padding:40px 0 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.utz__footer-tagline{max-width:640px;margin:6px auto 4px}
.utz__footer-bottom.utz__center{justify-content:center;text-align:center}

/* resources / article */
.utz__res-meta{font-size:var(--meta);color:var(--muted);margin-bottom:6px}
.utz__article .utz__prose{max-width:var(--measure);margin:0 auto}
.utz__article .utz__lead{margin-bottom:1.4rem}
/* rich article furniture: hero image, figures, charts, callouts, takeaways */
.utz__article-hero{margin:0 0 1.6rem}
.utz__article-hero img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.utz__prose figure{margin:1.8rem 0}
.utz__prose figure img{width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--shadow)}
.utz__prose 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) */
.utz__callout{background:var(--primary-90);border-radius:var(--r-md);padding:16px 20px;margin:1.6rem 0}
.utz__callout h3,.utz__callout h4{margin:0 0 .4rem;color:var(--black)}
.utz__callout p{margin:0}
.utz__callout p+p{margin-top:.6rem}
.utz__key-takeaways{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 22px;margin:1.6rem 0}
.utz__key-takeaways h2,.utz__key-takeaways h3{margin:0 0 .6rem;font-size:var(--h3)}
.utz__key-takeaways ul{margin:0;padding-left:1.1em}
.utz__key-takeaways li{margin-bottom:.4rem}
.utz__diagram{margin:2rem 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.utz__diagram svg{width:100%;height:auto;display:block}
.utz__diagram figcaption{font-size:var(--meta);color:var(--muted);margin:.6rem 0 0}
/* inline SVG bar/comparison chart */
.utz__chart{margin:2rem 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface)}
.utz__chart-title{font-family:var(--font-head);font-weight:var(--head-bold);color:var(--black);margin:0 0 .3rem}
.utz__chart-sub{font-size:var(--meta);color:var(--muted);margin:0 0 .8rem}
.utz__barrow{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)}
.utz__chart .utz__barrow:last-of-type{border-bottom:0;padding-bottom:0}
.utz__barrow .utz__blabel{font-size:var(--small);color:var(--body);min-width:0;overflow-wrap:anywhere;line-height:1.3}
.utz__bartrack{background:var(--bg-alt);border-radius:var(--r-full);height:14px}
.utz__barfill{border-radius:var(--r-full);opacity:1;background:var(--primary);min-width:2px;height:14px}
.utz__barval{position:static;font-variant-numeric:tabular-nums;line-height:1;font-size:var(--meta);color:var(--body);min-width:3.5ch;text-align:right}
.utz__chart-note{font-size:var(--meta);color:var(--muted);margin:.6rem 0 0}
[data-utz__chart=slim] .utz__barrow{grid-template-columns:1fr auto;grid-template-areas:"label val" "track track"}
[data-utz__chart=slim] .utz__blabel{grid-area:label}
[data-utz__chart=slim] .utz__bartrack{grid-area:track;height:8px}
[data-utz__chart=slim] .utz__barval{grid-area:val}
[data-utz__chart=stacked] .utz__barrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "track val"}
[data-utz__chart=stacked] .utz__blabel{grid-area:label}
[data-utz__chart=stacked] .utz__bartrack{grid-area:track;height:12px}
[data-utz__chart=stacked] .utz__barval{grid-area:val}
[data-utz__chart=ruled] .utz__chart{border:0;padding:0;background:transparent}
[data-utz__chart=ruled] .utz__barrow{border-bottom:1px solid var(--line);padding-bottom:12px}
@media(max-width:560px){.utz__barrow{grid-template-columns:1fr}
  .utz__barrow .utz__blabel,.utz__bartrack,.utz__barval{grid-column:1}
  .utz__barval{text-align:left}}

/* responsive */
@media(max-width:900px){
  .utz__hero-grid{grid-template-columns:1fr;gap:30px}
  .utz__grid-3,.utz__grid-4{grid-template-columns:repeat(2,1fr)}
  .utz__footer-grid{grid-template-columns:1fr 1fr}
  .utz__trust{grid-template-columns:repeat(2,1fr);gap:26px}
  .utz__trust--3>div:first-child{grid-column:1/-1}
}
@media(max-width:680px){
  .utz__nav-inner{flex-direction:column;align-items:stretch;padding:0;display:none}
  .utz__nav-inner.utz__open{display:flex}
  .utz__nav-links{flex-direction:column;align-items:stretch;gap:0;padding:0;width:100%}
  .utz__nav-links>li>a,.utz__nav-links>li>.utz__nav-parent{color:var(--ink)}
  .utz__menu-toggle{display:block}
  .utz__caret{display:none}
  .utz__nav-cta--corner{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. */
  .utz__header-inner{gap:10px}
  .utz__brand img{max-width:60vw}
  .utz__header-actions .utz__nav-cta{display:none}
  /* keep the hero within a narrow viewport: never let the copy column, the proof row
     or the CTAs exceed the screen. */
  .utz__hero-copy{max-width:100%}
  .utz__hero .utz__hero-proof{width:auto;max-width:100%}
  .utz__hero-cta{width:100%}
  .utz__hero-cta .utz__btn{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. */
  .utz__mainnav .utz__mega{--nav-fg:var(--ink)}
  .utz__mega a{color:var(--nav-fg);font-weight:400}
  .utz__mega a.utz__btn{color:var(--cta-ink);background:var(--cta);padding:13px 28px;font-weight:600;border-bottom:0}
  .utz__mega-all{color:var(--ink);border-top:0}
  .utz__grid-2,.utz__grid-3,.utz__grid-4,.utz__grid-2x2{grid-template-columns:1fr}
  .utz__section{padding:var(--section-pad-m) 0}
  .utz__btn--lg{min-width:0;width:100%}
}
@media (max-width:680px) and (hover:hover) and (pointer:fine){
  .utz__mega a:hover{background:var(--bg-alt);color:var(--ink)}
  .utz__mega a.utz__btn:hover{background:var(--cta-hover);color:var(--cta-ink)}
}

[data-utz__headcase=upper] h1,[data-utz__headcase=upper] h2,[data-utz__headcase=upper] h3{text-transform:uppercase;letter-spacing:.02em}
@media (max-width:600px){[data-utz__headcase=upper] h1{font-size:min(var(--h1),7.2vw)}}
[data-utz__eb=pill] .utz__eyebrow{display:inline-block;max-width:100%;background:#f5f6f8;color:#b73475;border:1px solid var(--line);padding:4px 12px;border-radius:var(--r-full);line-height:1.4}
[data-utz__eb=pill] .utz__eyebrow.utz__center{display:table;margin-left:auto;margin-right:auto}