:root{
  --violet:#2342BE;--violet-deep:#1B3393;
  --pink-soft:#ECEAF6;--pink-deep:#332277;--ink:#1B213C;
  --bg:#FAFAFD;--surface:#EEF0F9;--border:#DADFF1;--body:#414762;--muted:#5D6584;
  --display:'IBM Plex Sans',system-ui,sans-serif;--sans:'IBM Plex Sans',system-ui,sans-serif;
  --radius:14px;--radius-sm:10px;--maxw:1100px;
  /* U215 PART 3 — the DERIVED token sheet. Ramps, spacing, type scale and elevation,
     all computed from the palette above. Nothing here is a designer's constant, so
     changing the brand model re-renders every page that reads these. */
  --color-neutral-100:#F4F5F5;--color-neutral-200:#E5E5E6;--color-neutral-300:#CACBCE;--color-neutral-400:#A4A6AD;--color-neutral-500:#787B87;--color-neutral-600:#60626C;--color-neutral-700:#4B4D53;--color-neutral-800:#36373B;--color-neutral-900:#222325;
  --color-accent-100:#F1F2F9;--color-accent-200:#DADFF1;--color-accent-300:#B2BDE6;--color-accent-400:#758ADB;--color-accent-500:#284BD7;--color-accent-600:#2640A6;--color-accent-700:#22347C;--color-accent-800:#1B2755;--color-accent-900:#131A34;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --text-xs:0.68rem;--text-sm:0.85rem;--text-base:1.063rem;--text-md:1.328rem;--text-lg:1.66rem;--text-xl:2.075rem;--text-2xl:2.594rem;--text-3xl:3.242rem;
  --radius-sm:10px;--radius-md:14px;--radius-lg:22px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(27,33,60,0.05);--shadow-md:0 4px 12px rgba(27,33,60,0.08);--shadow-lg:0 12px 32px rgba(27,33,60,0.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap,.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--violet-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.18;letter-spacing:-0.01em}
.spectrum{height:4px;background:linear-gradient(90deg,var(--violet),var(--violet-deep))}
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-name{white-space:nowrap}
.nav-links{display:flex;gap:20px;list-style:none;align-items:center}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:12px 22px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:var(--sans)}
.btn-primary{background:var(--violet);color:#fff!important}
.btn-primary:hover{text-decoration:none;transform:translateY(-1px)}
.nav-toggle{display:none}
.nav-group{position:relative}
.nav-group>summary{list-style:none;cursor:pointer;font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.nav-group[open]>summary,.nav-group>summary:hover{color:var(--ink)}
.nav-menu{position:absolute;right:0;top:calc(100% + 14px);min-width:260px;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 14px 30px rgba(0,0,0,.12);padding:8px;z-index:60}
.nav-menu a{padding:9px 12px;border-radius:8px;white-space:nowrap;color:var(--ink)!important}
.nav-menu a:hover{background:var(--surface)}
main{padding:0 0 20px}
.content{max-width:820px;padding-top:8px}
/* W18-12 (U318) — the WIDE page: the column aligns with the header (David: the header
   was 280px wider than the text below it, which read as squeezed), while running prose
   keeps a readable line. Grids, cards and tables take the full width. */
.content.content--wide{max-width:var(--maxw)}
.content--wide p,.content--wide .lede,.content--wide details,.content--wide .form-band,.content--wide .lead{max-width:76ch}
.breadcrumb{font-size:13px;color:var(--muted);margin:18px 0 0}
.content h1{font-size:clamp(30px,4.6vw,44px);margin:12px 0 4px;max-width:16ch}
.geo-answer{background:var(--surface);border-left:4px solid var(--violet);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:16px 20px;margin:20px 0;font-size:16.5px;color:var(--ink)}
.lede{font-size:18px;color:var(--body);margin:0 0 8px}
.content h2{font-size:26px;margin:38px 0 12px}
.content p{margin:0 0 16px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:18px 0 8px}
.feature{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px}
.feature h3{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px}
.feature p{font-size:14.5px;color:var(--body);margin:0}
.proof{background:var(--pink-soft);border-radius:var(--radius);padding:22px 26px;margin:24px 0}
.proof strong{color:var(--pink-deep)}
.proof p{color:var(--pink-deep)}
.faq{margin:34px 0}
.faq h2{font-size:24px;margin-bottom:8px}
.faq details{border-bottom:1px solid var(--border);padding:14px 0}
.faq summary{font-weight:600;color:var(--ink);cursor:pointer;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--violet-deep);font-weight:700;margin-right:10px}
.faq details[open] summary::before{content:"\2013"}
.faq details p{margin-top:10px}
.lead{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 26px 28px;margin:24px 0}
.lead h2{font-size:22px;margin-bottom:6px}
.lead .sub{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:15px;font-family:var(--sans);background:var(--bg)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.field-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink);margin:2px 0 12px;cursor:pointer}
.field-check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--violet)}
.field-check input:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead .btn-primary{width:100%;margin-top:4px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
.form-trust{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted);margin-top:10px;text-align:center}
.form-trust svg{flex:0 0 auto;color:var(--muted)}
.form-msg{font-size:14px;padding:11px 13px;border-radius:var(--radius-sm);margin-bottom:14px;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#E6F7EE;color:#1E7A48}
.form-msg.err{background:var(--pink-soft);color:var(--pink-deep)}
.cta-band{background:var(--ink);color:#fff;border-radius:var(--radius);padding:32px 28px;margin:34px 0;text-align:center}
.cta-band h2{color:#fff;font-size:24px;margin-bottom:10px}
.cta-band p{opacity:.85}
/* U217 — THE HOME SECTION LIBRARY (engine/sections/home-sections.ts). These carry the
   archetype-specific sections the multi-page factory now composes per business type.
   They live HERE, in the derived brand sheet, rather than as literal colours in the
   markup, so a section inherits the tenant's ramp, radius and rhythm exactly like every
   other element — the whole point of a derived system is that a NEW section cannot
   introduce an off-brand value. Shipped in the same commit as the sections themselves:
   markup without styling would render as bare lists, which is the "ship the label
   before the thing" defect these sections exist to end. */
/* W-21 — the hero image slot. object-fit:cover with a bounded height so an upload of any
   aspect ratio lands predictably instead of pushing the CTA below the fold; the width/
   height attributes on the tag reserve the space so nothing reflows as it loads. */
.hero-img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;
  border-radius:var(--radius-sm);margin:16px 0 4px}
@media(max-width:760px){.hero-img{max-height:220px}}
.ls-urgent{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  background:var(--violet-soft,var(--pink-soft));border:1px solid var(--border);border-left:4px solid var(--violet,var(--ink));
  border-radius:var(--radius-sm);padding:14px 18px;margin:22px 0}
.ls-urgent-txt{font-weight:600;color:var(--ink);font-size:15px}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;padding:0;margin:14px 0 0}
.trust-row li{display:flex;align-items:center;gap:8px;background:var(--surface,#fff);border:1px solid var(--border);
  border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600;color:var(--ink)}
.trust-row li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet,var(--ink));flex:0 0 auto}
.area-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0}
.area-chips li{background:var(--surface,#fff);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px 13px;font-size:14px;color:var(--body,var(--ink))}
/* Pre-existing and never styled: the cluster-pillar links the factory has always
   rendered on the home page as a bare <ul>. Found while checking the new sections. */
/* W18-15 (U318, David's walk: "the content chips mid-page are different sizes") — the
   platform's own E2/C3 rule carried to the generated site: every card in the grid is the
   SAME size whatever its label. grid-auto-rows:1fr equalises the rows; the link fills its
   cell (flex) so the visible card is the cell, not the text inside it. */
.services-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));grid-auto-rows:1fr;gap:10px;padding:0;margin:16px 0 0}
.services-list li{display:flex}
.services-list li a{flex:1;display:flex;align-items:center;min-height:58px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 16px;font-weight:600;text-decoration:none;color:var(--ink)}
.services-list li a:hover{border-color:var(--violet,var(--ink))}
/* U318 SLICE H — CUSTOM SECTIONS (.cx-*): our curated library. Tokens only; auto-fit grids. */
.cx{margin:34px 0}
.cx-steps{list-style:none;counter-reset:cx;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:0;margin:14px 0 0}
.cx-steps li{counter-increment:cx;border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;background:var(--surface,#fff)}
.cx-steps li::before{content:counter(cx);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--violet);color:var(--bg);font-weight:700;margin-bottom:8px}
.cx-steps b,.cx-time b{display:block;color:var(--ink)}
.cx-steps p,.cx-time p{margin:4px 0 0}
.cx-stats{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;padding:0;margin:14px 0 0}
.cx-stats li{border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;text-align:center}
.cx-stats b{display:block;font-family:var(--display);font-size:var(--text-2xl);color:var(--violet-deep)}
.cx-stats span{color:var(--muted)}
.cx-check{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px}
.cx-check li{padding-left:26px;position:relative}
.cx-check li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:7px;border-left:2.5px solid var(--violet);border-bottom:2.5px solid var(--violet);transform:rotate(-45deg)}
.cx-check span{color:var(--muted)}
.cx-time{list-style:none;padding:0 0 0 18px;margin:14px 0 0;border-left:2px solid var(--border)}
.cx-time li{position:relative;margin:0 0 14px;padding-left:10px}
.cx-time li::before{content:"";position:absolute;left:-25px;top:.4em;width:10px;height:10px;border-radius:50%;background:var(--violet)}
/* DESIGN STEP 0 — the bento services grid (home-sections "bento" variant). */
.bento .services-list{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));grid-auto-rows:minmax(92px,auto);gap:12px}
.bento .services-list li:nth-child(1){grid-column:span 2;grid-row:span 2}
.bento .services-list li:nth-child(1) a{font-size:21px;align-items:flex-end;padding:22px;background:linear-gradient(135deg,var(--surface,#fff),color-mix(in srgb,var(--violet) 12%,var(--surface,#fff)))}
.bento .services-list li:nth-child(4n+4){grid-column:span 2}
@media(max-width:760px){.bento .services-list{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.bento .services-list li:nth-child(4n+4){grid-column:span 1}}
/* DESIGN STEP 0 — pricing cards and the comparison table (rendered only from customer data). */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:14px}
.price-card{display:flex;flex-direction:column;gap:10px;background:var(--surface,#fff);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.price-card--pick{border:2px solid var(--violet);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.price-card h3{margin:0;font-size:17px}
.price-card .price{font-family:var(--display);font-size:30px;font-weight:700;margin:0;color:var(--ink)}
.price-card .price span{font-size:14px;font-weight:500;color:var(--muted)}
.price-card ul{list-style:none;padding:0;margin:0;flex:1}
.price-card li{padding:6px 0;border-top:1px solid var(--border);font-size:14.5px}
.compare-wrap{overflow-x:auto;margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.compare{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.compare th,.compare td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.compare thead th{background:var(--surface,#fff);font-weight:700}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* W18-14 — the grouped related block: topics in columns, each headed by its pillar. */
.related-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px 30px;margin-top:12px}
.related-group h3{font-size:15.5px;margin:0 0 6px;line-height:1.35}
.related-group ul{list-style:none;padding:0;margin:0}
.related-group li{margin:5px 0;font-size:14px;line-height:1.4}
/* U218 — THE SECTION VARIANTS (engine/sections/home-sections.ts). Shipped in the SAME
   commit as the markup, for the reason U217 learned the hard way: the new sections
   passed the 44-check gate and would have shipped UNSTYLED, because the gate measures
   structure and says nothing about whether a human would look at it. Every rule below
   reads the derived tokens, so a variant cannot introduce an off-brand value. */
/* hero — the variants move the same elements; none adds a colour of its own. */
.hero--centered .hero-in{text-align:center}
.hero--centered .hero-in .geo-answer{text-align:left;margin-top:22px}
.hero--centered .hero-img{margin-left:auto;margin-right:auto}
.hero--editorial .hero-in{padding-top:30px}
.hero--editorial .hero-eyebrow{margin:8px 0 2px;opacity:.9}
.hero--editorial h1{max-width:20ch}
.hero--action .lede{margin-bottom:2px}
/* FR-B9BDC0F7 (U309) — video-forward: the video/photo leads, centred and larger than
   the standard hero, everything else stacked and centred beneath it. */
.hero--video-forward .hero-in{text-align:center}
.hero--video-forward .hero-video,.hero--video-forward .hero-img{margin:0 auto 18px;max-width:720px}
.hero--video-forward .geo-answer{text-align:left;margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.hero-actions .btn{margin-top:0}
.btn-ghost{background:transparent;color:var(--violet-deep)!important;border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--violet);text-decoration:none}
.hero--band .btn-ghost,.hero--spotlight .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.5)}
/* urgent */
.ls-urgent--banner{justify-content:center;text-align:center;background:var(--violet);border-color:var(--violet);
  border-left-width:1px;border-radius:var(--radius);padding:18px 22px}
.ls-urgent--banner .ls-urgent-txt{color:#fff;font-size:16px}
.ls-urgent--banner .btn-primary{background:#fff;color:var(--violet-deep)!important}
.ls-urgent--card{flex-direction:column;align-items:flex-start;gap:8px;background:#fff;border-left-width:1px}
.ls-urgent-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
/* services */
.svc-cols{columns:2;column-gap:34px}
.svc-cols p{break-inside:avoid;margin:0 0 14px}
@media(max-width:760px){.svc-cols{columns:1}}
/* trust */
.trust-cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;padding:0;margin:14px 0 0}
.trust-cards li{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
  font-weight:600;color:var(--ink);font-size:15px}
.trust-inline{margin:12px 0 0;color:var(--body);font-size:15.5px}
.trust-inline span{color:var(--muted);margin:0 4px}
/* areas */
.area-cols{list-style:none;columns:3;column-gap:26px;padding:0;margin:14px 0 0}
.area-cols li{break-inside:avoid;padding:5px 0;font-size:14.5px;color:var(--body)}
@media(max-width:760px){.area-cols{columns:2}}
/* faq */
.faq--twocol .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.faq--twocol .faq-grid details{break-inside:avoid}
@media(max-width:760px){.faq--twocol .faq-grid{grid-template-columns:1fr}}
/* form */
.form-band{background:var(--surface);border-radius:var(--radius);padding:8px 22px 14px;margin:30px 0}
.form-band .lead{margin:16px 0;box-shadow:0 10px 30px rgba(0,0,0,.05)}
/* *** U218 / W-22 — WIDTH AND SPACING, PER SECTION. ***
   The generated page is <main><div class="container content">, where .container is
   max-width:var(--maxw) centred with 24px padding and .content is a LEFT-ALIGNED 820px
   measure inside it. That geometry is why these rules are arithmetic rather than a plain
   width:100% -- a child cannot exceed its 820px parent without being told exactly how
   far to reach.
     wide  -> out to the container's inner edge. Because .content is left-aligned at the
              container's left padding edge, a child of the container's INNER width
              starts at the same left edge and ends flush at its right one — no negative
              margins, no overflow, and it degrades to full width below --maxw.
     full  -> the viewport. The content box sits (100vw - min(--maxw,100vw))/2 + 24px
              from the viewport's left edge, so the pull-back is exactly the negative of
              that. Below --maxw it resolves to -24px, which is the padding. Correct at
              every width rather than at the one the author happened to test.
   C8 IS ENFORCED IN THE SECTION TABLE, NOT HERE -- full is refused on prose sections by
   FULL_BLEED_ALLOWED, so no CSS rule below can put a measure-bound column edge to edge. */
.sec{display:block}
.sec--narrow{max-width:640px}
/* *** THE ARITHMETIC HERE IS MEASURED, NOT ASSUMED — THE FIRST VERSION OVERFLOWED. ***
   The measure column is class="container content", so its max-width resolves to
   .content(820px), NOT --maxw(1100px), and .container{margin:0 auto} CENTRES it. The
   first attempt assumed 1100 and left-alignment and was wrong on both counts, which put
   a horizontal scrollbar on the page (1413px in a 1280px viewport).
   Because the parent IS centred, its centre coincides with the viewport centre, so
   margin-left:calc(50% - W/2) centres a child of width W on the viewport whatever the
   parent offset. W is capped at --maxw and at 100vw-48px: the second cap is what keeps
   it inside the LAYOUT width, since 100vw INCLUDES the scrollbar and the layout does not,
   and 48px is comfortably wider than any scrollbar. VERIFIED IN A BROWSER at 1280px. */
.sec--wide{--secw:min(var(--maxw),calc(100vw - 48px));width:var(--secw);max-width:none;
  margin-left:calc(50% - var(--secw) / 2)}
@media(max-width:760px){.sec--wide{--secw:100%;margin-left:0}}
/* *** FULL-BLEED, AND THE ~8px THAT USED TO MAKE IT IMPOSSIBLE. ***
   margin-inline:calc(50% - 50vw) is the correct centring, but 100vw INCLUDES the
   scrollbar while the layout width does not, so the band overshoots by half the
   scrollbar on each side and that overshoot is what produced a horizontal scrollbar.
   overflow-x:clip on main absorbs it. CLIP, NOT HIDDEN, deliberately: hidden creates
   a scroll container and would break position:sticky on the header; clip does not.
   What is clipped is a few pixels of a solid background band, which is invisible —
   and the alternative was not shipping the control at all. */
main{overflow-x:clip}
.sec--full{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.sec--full > .hero,.sec--full > .cta-band{border-radius:0}
.sec--full > .hero > .hero-in,.sec--full > .cta-band{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.sec--full > .ls-urgent{border-radius:0}
.sec--full > section > h2,.sec--full > section > .lede{max-width:820px}.sec--tight{margin-top:var(--space-3);margin-bottom:var(--space-3)}
.sec--airy{margin-top:var(--space-10);margin-bottom:var(--space-10)}
.sec--tight > *:first-child{margin-top:0}
.sec--airy > *:first-child{margin-top:0}
@media(max-width:760px){
  .sec--wide{width:100%}
  .sec--airy{margin-top:var(--space-6);margin-bottom:var(--space-6)}
}
/* U218 — the image slots beyond the hero. object-fit:cover with a fixed aspect box so a
   set of uploads at different aspect ratios lands in a tidy grid instead of a ragged
   one; the width/height attributes on each tag reserve the space so nothing reflows. */
.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0 0}
.img-grid figure{margin:0}
.img-grid-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface)}
.img-grid figcaption,.img-strip figcaption{font-size:13.5px;color:var(--muted);margin-top:7px}
.gallery-lead{margin:16px 0 0}
.gallery-lead .img-grid-img{aspect-ratio:16/9}
.gallery--showcase .img-grid{margin-top:14px}
.gallery--strip{margin:30px 0}
.team--row{margin:30px 0}
.img-strip{display:flex;gap:14px;overflow-x:auto;margin:16px 0 0;padding-bottom:6px;scroll-snap-type:x mandatory}
.img-strip figure{margin:0;flex:0 0 62%;max-width:340px;scroll-snap-align:start}
.img-strip .img-grid-img{aspect-ratio:4/3}
@media(min-width:761px){.img-strip figure{flex:1 1 0}}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin:16px 0 0}
.team-grid figure{margin:0;text-align:center}
.team-img{width:100%;max-width:180px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;margin:0 auto;background:var(--surface)}
.team-grid figcaption{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.team-grid figcaption strong{color:var(--ink);font-size:15px}
.team-grid figcaption span{color:var(--muted);font-size:13.5px}
.team-grid--row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.proof-band{margin:30px 0}
.proof-row{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;padding:0;margin:14px 0 0}
.proof-row li{display:flex;flex-direction:column;align-items:center;gap:6px}
.proof-img{height:52px;width:auto;max-width:150px;object-fit:contain}
.proof-row span{font-size:12.5px;color:var(--muted);text-align:center}
.proof-band--tint{background:var(--surface);border-radius:var(--radius);padding:22px 26px}
/* cta */
.cta-band--split{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;text-align:left}
.cta-band--split h2{margin-bottom:4px}
.cta-band--split .btn-primary{background:#fff;color:var(--ink)!important;flex:0 0 auto}
.cta-quiet{border-top:1px solid var(--border);margin:34px 0 10px;padding-top:18px}
.cta-quiet p{color:var(--body);margin:0}
.cta-quiet a{font-weight:600}
@media(max-width:760px){.ls-urgent{flex-direction:column;align-items:flex-start}}
footer{background:var(--ink);color:#fff;padding:38px 0 30px;margin-top:36px;font-size:14px}
footer p{opacity:.82}
footer .f-in{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
footer a{color:#fff;text-decoration:underline}
footer .f-family{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:13px;opacity:.75}
footer .f-legal{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:12.5px;opacity:.75}
footer .f-custom{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:12.5px;opacity:.75}
.foot-brand{display:flex;align-items:center;gap:9px;color:#fff;font-family:var(--display);font-weight:600}
.updated{font-size:12.5px;color:var(--muted)}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@media(max-width:760px){
  .nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;margin-left:8px;background:none;border:none;cursor:pointer;flex-shrink:0}
  .nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
  header.nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
  header.nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:8px 24px 18px;box-shadow:0 12px 24px rgba(0,0,0,.12)}
  header.nav.nav-open .nav-links{display:flex}
  .nav-links a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--border);width:100%}
  .nav-links a:last-of-type{border-bottom:none}
  .nav-links .btn{margin-top:10px;width:100%;text-align:center;border-bottom:none}
  .nav-group>summary{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--border)}
  .nav-menu{position:static;min-width:0;border:none;box-shadow:none;padding:0 0 0 14px;background:none}
  .nav-menu a{padding:11px 4px;border-radius:0;white-space:normal}
  .content h1{font-size:30px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
.hero{margin:18px 0 10px;border-radius:var(--radius);overflow:hidden}
.hero-in{padding:38px 32px}
.hero h1{margin:6px 0 4px}
.hero .btn-primary{margin-top:14px}
.hero-eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-deep)}
@media(max-width:760px){.hero-in{padding:26px 20px}}
.hero--wash{background:linear-gradient(135deg,var(--surface) 0%,var(--pink-soft) 100%)}