@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-v25-latin-ext-var.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-v25-latin-var.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: "Archivo";
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-v25-latin-ext-italic-var.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-v25-latin-italic-var.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: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-v23-latin-ext-var.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-v23-latin-var.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 {
  --wb-colour-primary: #B04C10;
  --wb-colour-secondary: #16345A;
  --wb-colour-accent: #B04C10;
  --wb-colour-background: #FBF9F5;
  --wb-colour-surface: #FFFFFF;
  --wb-colour-text: #1A1511;
  --wb-colour-muted: #57504A;
  --wb-colour-on-primary: #ffffff;
  --wb-colour-on-surface: #1A1511;
  --wb-colour-on-surface-muted: #57504A;
  --wb-colour-panel: #FFFFFF;
  --wb-font-heading: 'Archivo', -apple-system, 'Segoe UI', Arial, sans-serif;
  --wb-font-body: 'Archivo', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wb-radius-sm: 6px;
  --wb-radius-md: 10px;
  --wb-radius-lg: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--wb-font-body);
  color: var(--wb-colour-text);
  background: var(--wb-colour-background);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--wb-colour-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--wb-colour-primary);
  outline-offset: 2px;
}
h1, h2, h3, h4 { font-family: var(--wb-font-heading); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
p { margin: 0 0 1rem; }
.wb-container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.wb-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.wb-section:nth-of-type(even) { background: var(--wb-colour-surface); }
/* ── dark-surface support. The zebra band keeps --wb-colour-surface as its
   background; TEXT on the band uses the derived --wb-colour-on-surface tokens
   (rootVariables) so a dark brand surface gets light copy while a light one
   resolves to the normal text/muted values (no visual change). The colour
   rules are scoped ".wb-main >" (top-level bands only): sections nested in a
   tabs panel are transparent (theme-polish) and must inherit their OUTER
   context's colour, not restyle themselves. ─────────────────────────────── */
.wb-main > .wb-section:nth-of-type(even) { color: var(--wb-colour-on-surface); }
/* Muted copy sitting DIRECTLY on the band flips with it. Cover heroes are
   excluded: their sub-copy is forced white over the image overlay (theme-ext)
   and this higher-specificity rule must not override that. */
.wb-main > .wb-section:nth-of-type(even):not(.wb-hero-cover) :is(.wb-section-sub,
  .wb-hero-sub, .wb-faq-a, .wb-form-status, .wb-bloglist-empty, .wb-post-meta,
  .wb-chart-legend-value) { color: var(--wb-colour-on-surface-muted); }
/* Two-card calculator pieces (schedule / comparison table) span the band
   OUTSIDE the light input/results cards — their muted copy flips too. The
   plain single-card layout keeps everything inside the light card, where the
   base muted rules still apply. */
.wb-main > .wb-section:nth-of-type(even) .wb-calc--two-card :is(.wb-calc-note,
  .wb-calc-schedule-count, .wb-calc-cmp thead th) { color: var(--wb-colour-on-surface-muted); }
/* First-party SVG chart text on the band (fill, not color — no inheritance). */
.wb-main > .wb-section:nth-of-type(even) .wb-chart-value { fill: var(--wb-colour-on-surface); }
.wb-main > .wb-section:nth-of-type(even) .wb-chart-label { fill: var(--wb-colour-on-surface-muted); }
/* REGRESSION GUARD: components that render as LIGHT cards/panels on the band
   (their own background is --wb-colour-background or a light literal) must NOT
   inherit the on-surface colour — they explicitly re-assert the normal text
   colour. Their muted children keep their own explicit muted rules. Form
   fields ride along: their control background stays light (UA default /
   --wb-colour-background) whatever the band behind them. */
.wb-main > .wb-section:nth-of-type(even) :is(.wb-feature, .wb-team-member,
  .wb-testimonial, .wb-blog-card, .wb-calc-plain,
  .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results,
  .wb-calc-reco, .wb-chat-panel, .wb-field input, .wb-field textarea,
  .wb-field select) { color: var(--wb-colour-text); }
.wb-section-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.wb-section-sub { color: var(--wb-colour-muted); font-size: 1.125rem; }
.wb-main { display: block; }
.wb-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--wb-radius-sm, 0.5rem);
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.wb-button:hover { filter: brightness(0.94); text-decoration: none; }
.wb-button-lg { padding: 0.9rem 2rem; font-size: 1.0625rem; }
/* The copy-column measure clamps the inner copy div only: renderHero puts
   wb-hero on the <section> too (stacked and cover), which stays full width. */
.wb-hero:not(.wb-hero-cover, .wb-section) { text-align: center; max-width: 52rem; margin: 0 auto; }
.wb-hero.wb-align-left { text-align: left; margin: 0; }
.wb-hero-media { margin-bottom: 2rem; }
.wb-hero-sub { font-size: 1.25rem; color: var(--wb-colour-muted); margin-bottom: 1.75rem; }
.wb-rich { max-width: 46rem; margin: 0 auto; }
.wb-steps {
  list-style: none;
  counter-reset: wb-step;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  text-align: left;
}
.wb-steps li { counter-increment: wb-step; position: relative; padding-left: 3.25rem; min-height: 2.5rem; }
.wb-steps li::before {
  content: counter(wb-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.wb-features-grid, .wb-team-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.wb-gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.wb-feature, .wb-team-member {
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--wb-radius-md, 0.75rem);
  padding: 1.5rem;
}
.wb-feature-icon {
  color: var(--wb-colour-primary);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.wb-feature-icon-svg { display: block; width: 2rem; height: 2rem; }
.wb-feature-desc, .wb-team-bio { color: var(--wb-colour-muted); margin-bottom: 0; }
.wb-team-photo { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; margin-bottom: 1rem; }
.wb-team-role { color: var(--wb-colour-primary); font-weight: 600; margin-bottom: 0.5rem; }
.wb-gallery-item { margin: 0; }
.wb-gallery-item img { border-radius: var(--wb-radius-sm, 0.5rem); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
/* div-scoped: wbSection stamps wb-cta on the SECTION too, and the max-width
   must constrain only the inner copy column — a constrained section would
   shrink the even band's surface background to a floating box (glaring on a
   dark brand surface; subtly wrong on a light one). */
div.wb-cta { text-align: center; max-width: 42rem; margin: 0 auto; }
.wb-faq-item {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--wb-radius-sm, 0.5rem);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.wb-faq-q { font-weight: 600; cursor: pointer; }
.wb-faq-a { color: var(--wb-colour-muted); padding-top: 0.75rem; }
.wb-form-wrap { max-width: 38rem; margin: 0 auto; }
.wb-form { display: grid; gap: 1rem; }
.wb-form-inline { grid-template-columns: 1fr auto; align-items: end; }
.wb-field { display: grid; gap: 0.35rem; font-weight: 600; }
.wb-field input, .wb-field textarea {
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: var(--wb-radius-sm, 0.5rem);
  width: 100%;
}
.wb-form-status { color: var(--wb-colour-muted); margin: 0; min-height: 1.2em; }
.wb-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.wb-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.wb-site-header { border-bottom: 1px solid rgba(15, 23, 42, 0.08); background: var(--wb-colour-background); }
.wb-header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
/* inline-flex so a mark + site-name lockup (logoLockup themes) sits on one
   baseline-centred line; single-child brands (img OR text) are unaffected. */
.wb-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--wb-font-heading); font-weight: 700; font-size: 1.25rem; color: var(--wb-colour-text); }
/* overflow:visible rescues STORED lockups whose viewBox was under-estimated:
   a root <svg> clips to its viewBox and sliced the last letter off the brand
   name. Why the estimate was short: domain/branding/logo-svg.ts. */
.wb-logo { max-height: 40px; width: auto; overflow: visible; }
/* Genesis logomarks are square renders — keep the lockup's mark compact. */
.wb-logo + .wb-logo-text { white-space: nowrap; }
.wb-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.wb-nav a { color: var(--wb-colour-text); font-weight: 600; }
.wb-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  margin: -0.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.wb-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--wb-colour-text);
}
/* The footer is a surface band like the even sections — its text rides the
   derived on-surface tokens (identical to text/muted on a light surface).
   Links stay brand-primary. */
.wb-site-footer {
  background: var(--wb-colour-surface);
  color: var(--wb-colour-on-surface);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding: 2.5rem 0;
}
.wb-site-footer a { color: var(--wb-colour-primary); }
.wb-footer-text { font-weight: 600; margin-bottom: 0.25rem; }
.wb-footer-copy { color: var(--wb-colour-on-surface-muted); font-size: 0.9rem; margin: 0.75rem 0 0; }
.wb-footer-links, .wb-footer-block .wb-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
.wb-chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2147483000; }
.wb-chat-launcher {
  border: 0; cursor: pointer; font: inherit; font-weight: 600;
  padding: 0.8rem 1.4rem; border-radius: 999px;
  background: var(--wb-colour-primary); color: var(--wb-colour-on-primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
.wb-chat-panel {
  position: absolute; right: 0; bottom: 3.5rem; width: min(360px, calc(100vw - 2.5rem));
  display: flex; flex-direction: column; max-height: 70vh;
  background: var(--wb-colour-background); border-radius: var(--wb-radius-md, 0.85rem); overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28); border: 1px solid rgba(15, 23, 42, 0.1);
}
.wb-chat-panel[hidden] { display: none; } /* display: flex above outranks the UA [hidden] rule */
.wb-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem; background: var(--wb-colour-primary); color: var(--wb-colour-on-primary); font-weight: 600;
}
.wb-chat-close { background: transparent; border: 0; color: inherit; font-size: 1.25rem; cursor: pointer; }
.wb-chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: 0.6rem; align-content: start; }
.wb-chat-msg { padding: 0.55rem 0.8rem; border-radius: var(--wb-radius-md, 0.7rem); max-width: 85%; }
/* Bot bubbles use the panel var, never the band surface (unreadable on dark brands). */
.wb-chat-bot { background: var(--wb-colour-panel); justify-self: start; }
.wb-chat-user { background: var(--wb-colour-primary); color: var(--wb-colour-on-primary); justify-self: end; }
.wb-chat-form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid rgba(15, 23, 42, 0.1); }
.wb-chat-input { flex: 1; font: inherit; padding: 0.6rem 0.75rem; border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--wb-radius-sm, 0.5rem); }
.wb-bloglist { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wb-blog-card { border: 1px solid rgba(15, 23, 42, 0.1); border-radius: var(--wb-radius-md, 0.75rem); overflow: hidden; }
.wb-blog-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.wb-blog-card h3, .wb-blog-card p { padding: 0 1rem; }
.wb-blog-card h3 { padding-top: 1rem; }
.wb-bloglist-empty { color: var(--wb-colour-muted); }
@media (max-width: 640px) {
  .wb-form-inline { grid-template-columns: 1fr; }
  .wb-header-inner { flex-wrap: wrap; gap: 0.75rem; }
  /* Hamburger disclosure — enabled only once the runtime stamps wb-js on
     <html> (progressive enhancement: no JS = the nav stays visible and wraps,
     exactly the pre-hamburger behaviour). runtime.ts wireNav drives
     aria-expanded on the button + wb-nav-open on the header. */
  .wb-js .wb-nav-toggle { display: inline-flex; }
  .wb-js .wb-nav { display: none; }
  .wb-js .wb-nav-open .wb-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-bottom: 0.5rem;
  }
  .wb-js .wb-nav-open .wb-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }
}

/* FAQ question h3 (blocks-content.ts faqEntry) renders as the summary's own
   text. :not(#wb-faq-q) lifts it to id specificity so theme.typography tokens
   (theme-typography.ts) and kit heading rules do not restyle it. */
.wb-faq-q-text:not(#wb-faq-q) {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* Portal door (nav.ts portalDoor) — the brochure site's sign-in entrance.
   Outlined, not filled: it must read as a deliberate destination without
   out-shouting the page's own primary CTA, which is a solid .wb-button. Sits
   OUTSIDE .wb-nav so it survives the mobile disclosure collapsing the nav —
   which is exactly when a returning client is hunting for sign-in. min-height
   44px matches the pointer-target floor .wb-nav-toggle already sets. */
.wb-portal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 1.25rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--wb-colour-primary);
  border-radius: var(--wb-radius-sm, 0.5rem);
  color: var(--wb-colour-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.wb-portal-link:hover, .wb-portal-link:focus-visible {
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
}
.wb-button-secondary {
  background: transparent;
  color: var(--wb-colour-primary);
  box-shadow: inset 0 0 0 2px var(--wb-colour-primary);
}
.wb-hero-ctas { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.wb-hero.wb-align-left .wb-hero-ctas { justify-content: flex-start; }
.wb-hero-cover {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(70vh, 640px);
}
.wb-hero-cover-media { position: absolute; inset: 0; z-index: 0; }
.wb-hero-cover-media video, .wb-hero-cover-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.wb-hero-cover-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(10, 10, 12, 0.55); }
.wb-hero-cover .wb-container { position: relative; z-index: 2; }
.wb-hero-cover .wb-hero-heading { color: #ffffff; }
.wb-hero-cover .wb-hero-sub { color: rgba(255, 255, 255, 0.88); }
/* The ghost button, over cover media. Everything else inside a cover already
   switches to white ink — heading, sub, and the cta band's pair in
   theme-motion.ts — but .wb-button-secondary kept painting its label and its
   ring in --wb-colour-primary, a colour the palette engine proved against
   --wb-colour-background, which is the one ground it never stands on here.
   Live on wash-rite-northland: #005c99 on the scrim (rgba(10,10,12,0.55) at its
   LIGHTEST, before the photograph under it) measures about 1.3:1, and "Ask for
   a Callback" read as an empty rectangle beside a perfectly legible solid CTA.
   The solid .wb-button needs nothing — it brings its own ground.

   Two selectors, and the hover one is not redundant. The base hover rule and
   the offset-shadow hover kit both set box-shadow, which is a REPLACEMENT, not
   an addition — so a single rest-state rule would restore the ring and then
   lose it again the moment the pointer arrived. Naming both .wb-button and
   .wb-button-secondary carries the hover form to four classes, above the
   hovkit's three, so it wins wherever the kit sheets are emitted; the kit's
   transform still applies, so the lift survives and only the shadow is
   overridden. */
:is(.wb-hero-cover, .wb-cta-cover) .wb-button.wb-button-secondary,
:is(.wb-hero-cover, .wb-cta-cover) .wb-button.wb-button-secondary:is(:hover, :focus-visible) {
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}
.wb-feature-image {
  border-radius: var(--wb-radius-sm, 0.5rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  margin-bottom: 1rem;
}
.wb-feature-link { display: inline-block; margin-top: 0.75rem; font-weight: 600; }
.wb-cta-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.wb-testimonials-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.wb-testimonial {
  margin: 0;
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--wb-radius-md, 0.75rem);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.wb-stars { display: flex; gap: 2px; color: var(--wb-colour-accent); margin-bottom: 0.75rem; }
.wb-testimonial-quote { margin: 0 0 1rem; font-style: italic; flex: 1; }
.wb-testimonial-by { display: flex; align-items: center; gap: 0.6rem; }
.wb-testimonial-avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; }
.wb-testimonial-author { font-weight: 700; }
.wb-testimonial-role { color: var(--wb-colour-muted); font-size: 0.9rem; }
.wb-post { max-width: 46rem; margin: 0 auto; }
.wb-post-back { display: inline-block; margin-bottom: 1.25rem; font-weight: 600; }
.wb-post-title { margin-bottom: 0.75rem; }
.wb-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
  color: var(--wb-colour-muted); margin-bottom: 1.5rem;
}
/* Category chip: a small light PANEL on the page (never the band surface — a
   dark brand surface would turn it into a black pill), with its own explicit
   text colour so it never inherits the band's on-surface/muted treatment. */
.wb-post-category {
  background: var(--wb-colour-panel);
  color: var(--wb-colour-text);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 0.15rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.wb-post-hero { margin-bottom: 2rem; }
.wb-post-hero img { border-radius: var(--wb-radius-md, 0.75rem); width: 100%; }
.wb-blog-card { display: flex; flex-direction: column; background: var(--wb-colour-background); }
.wb-blog-card-meta { padding: 0 1rem; color: var(--wb-colour-muted); font-size: 0.85rem; margin: 0.35rem 0 0.5rem; }
.wb-blog-card h3 a { color: var(--wb-colour-text); }
.wb-blog-more { display: inline-block; margin: auto 1rem 1rem; font-weight: 600; }
.wb-blog-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.75rem; }
.wb-blog-chip {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 0.35rem 1rem; border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: var(--wb-colour-background); color: var(--wb-colour-text);
}
.wb-blog-chip.is-active { background: var(--wb-colour-primary); color: var(--wb-colour-on-primary); border-color: transparent; }
.wb-nav-item { position: relative; display: inline-flex; }
/* The parent link sits above the dropdown's hover bridge (::before below) so
   its bottom edge stays clickable while the dropdown is open. */
.wb-nav-item > a { display: inline-flex; align-items: center; gap: 0.4rem; position: relative; z-index: 61; }
.wb-nav-item > a::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.65;
}
.wb-nav-sub {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 220px;
  padding: 0.5rem 0;
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--wb-radius-sm, 0.5rem);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
/* Invisible bridge over the gap between the parent link and the panel so the
   pointer can travel down without the dropdown snapping shut. */
.wb-nav-sub::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.wb-nav-item:hover .wb-nav-sub, .wb-nav-item:focus-within .wb-nav-sub {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  /* Fade/slide open; on close a short delay forgives brief pointer exits. */
  .wb-nav-sub {
    transition: opacity 0.16s ease 0.08s, transform 0.16s ease 0.08s, visibility 0s linear 0.24s;
  }
  .wb-nav-item:hover .wb-nav-sub, .wb-nav-item:focus-within .wb-nav-sub { transition-delay: 0s; }
}
.wb-nav-sub a { display: block; padding: 0.45rem 1rem; }
.wb-field select {
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: var(--wb-radius-sm, 0.5rem);
  width: 100%;
  background: var(--wb-colour-background);
}
.wb-calc-schedule { margin-top: 1.5rem; }
.wb-calc-schedule-table { max-height: 24rem; overflow: auto; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: var(--wb-radius-sm, 0.5rem); }
.wb-calc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.wb-calc-table th, .wb-calc-table td {
  padding: 0.5rem 0.75rem;
  text-align: right;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}
.wb-calc-table th:first-child, .wb-calc-table td:first-child { text-align: left; }
/* Sticky header is a light PANEL over the scrolling rows (panel var + its own
   text colour: on a dark band the table inherits light on-surface text, which
   would vanish on this light strip). */
.wb-calc-table thead th { position: sticky; top: 0; background: var(--wb-colour-panel); color: var(--wb-colour-text); }
.wb-calc-note { color: var(--wb-colour-muted); font-size: 0.85rem; padding: 0.5rem 0.75rem; margin: 0; }
@media (max-width: 640px) {
  /* Inside the mobile disclosure the dropdown renders inline, indented. */
  .wb-js .wb-nav-open .wb-nav .wb-nav-item { display: block; position: static; }
  .wb-js .wb-nav-open .wb-nav .wb-nav-sub {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    position: static;
    min-width: 0;
    padding: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .wb-js .wb-nav-open .wb-nav .wb-nav-sub::before { display: none; }
}

/* Segmented control: equal-width buttons inside a rounded pill bar (the pfsg
   calculator tab strip) rather than free-floating pills. */
.wb-tabs-bar {
  display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center;
  /* The pill strip is a light PANEL container (its .wb-tab children set their
     own muted/text colours) — never the band surface, which may be dark. */
  background: var(--wb-colour-panel);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px; padding: 0.3rem;
  max-width: 760px; margin: 0 auto;
}
.wb-tab {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  flex: 1 1 auto;
  text-align: center;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--wb-colour-muted);
}
.wb-tab:hover { color: var(--wb-colour-text); }
.wb-tab.is-active { background: var(--wb-colour-primary); color: #111827; border-color: transparent; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12); }
/* Panels are all visible without JS; the runtime's wb-js stamp enables the
   one-at-a-time behaviour (progressive enhancement, mirrors the nav). */
.wb-js .wb-tab-panel:not(.is-active) { display: none; }
/* Nested block sections inside a panel: tighter rhythm, no zebra striping. */
.wb-tab-panel .wb-section { background: transparent; padding: clamp(1.5rem, 4vw, 2.75rem) 0; }
/* div-scoped: wbSection stamps wb-chart on the SECTION too (see div.wb-cta in
   the base stylesheet) — only the inner chart column is width-constrained. */
div.wb-chart { max-width: 720px; margin: 0 auto; }
.wb-chart-svg { width: 100%; height: auto; display: block; }
/* ── Chart palette — eight categorical slots. The brand's own primary and
   accent lead (a chart should read as the client's, not the renderer's), then
   six fixed hues validated AS A SET for colour-vision separation and contrast:
   worst adjacent pair ΔE 9.0 protan / 19.6 normal vision on a light surface,
   every slot >= 3:1 on a dark one. The brand SECONDARY is deliberately not a
   slot — on most brands it is an ink token (near-black), which reads as grey
   beside real hues and fails the chroma floor. Slots are assigned by item
   index and never cycled: past eight items the renderer paints the whole
   series in slot 1 instead of repeating a hue. */
:root {
  --wb-chart-1: var(--wb-colour-primary, #2563eb);
  --wb-chart-2: var(--wb-colour-accent, #f59e0b);
  --wb-chart-3: #1baf7a;
  --wb-chart-4: #eda100;
  --wb-chart-5: #e87ba4;
  --wb-chart-6: #008300;
  --wb-chart-7: #8b5cf6;
  --wb-chart-8: #e34948;
}
.wb-chart-bar { fill: var(--wb-chart-1); }
.wb-chart-fill-0 { fill: var(--wb-chart-1); }
.wb-chart-fill-1 { fill: var(--wb-chart-2); }
.wb-chart-fill-2 { fill: var(--wb-chart-3); }
.wb-chart-fill-3 { fill: var(--wb-chart-4); }
.wb-chart-fill-4 { fill: var(--wb-chart-5); }
.wb-chart-fill-5 { fill: var(--wb-chart-6); }
.wb-chart-fill-6 { fill: var(--wb-chart-7); }
.wb-chart-fill-7 { fill: var(--wb-chart-8); }
/* Axis chrome rides currentColor, so the dark zebra band (which sets its own
   colour to --wb-colour-on-surface) recolours the grid and ticks with no override. */
.wb-chart-grid { stroke: currentColor; stroke-width: 1; opacity: 0.12; }
.wb-chart-grid-zero { opacity: 0.34; }
.wb-chart-tick {
  font-size: 11px;
  fill: currentColor;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}
/* Hover: the hit target is the whole column, never the painted bar. */
.wb-chart-hit { fill: transparent; pointer-events: all; }
.wb-chart-col { cursor: default; }
.wb-chart-col .wb-chart-bar,
.wb-chart-col .wb-chart-dot,
.wb-chart-col .wb-chart-value-hint { transition: opacity 0.18s ease, stroke-width 0.18s ease; }
/* A value thinned out of a crowded plot is not lost — it fades in on hover. */
.wb-chart-value-hint { opacity: 0; }
.wb-chart-col:hover .wb-chart-value-hint { opacity: 1; }
.wb-chart-col:hover .wb-chart-bar { opacity: 0.78; }
.wb-chart-col:hover .wb-chart-dot { stroke-width: 4; }
.wb-chart-line {
  fill: none;
  stroke: var(--wb-chart-1);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wb-chart-area { fill: var(--wb-chart-1); opacity: 0.12; }
/* The 2px ring in the page colour is what keeps a dot legible where it crosses
   the line or its neighbour — a border around the mark would be data-weight ink. */
.wb-chart-dot { fill: var(--wb-chart-1); stroke: var(--wb-colour-background); stroke-width: 2; }
.wb-chart-value { font-size: 12px; font-weight: 700; fill: var(--wb-colour-text); }
.wb-chart-label { font-size: 11px; fill: var(--wb-colour-muted); }
.wb-chart-seg-0 { stroke: var(--wb-chart-1); }
span.wb-chart-seg-0 { background: var(--wb-chart-1); }
.wb-chart-seg-1 { stroke: var(--wb-chart-2); }
span.wb-chart-seg-1 { background: var(--wb-chart-2); }
.wb-chart-seg-2 { stroke: var(--wb-chart-3); }
span.wb-chart-seg-2 { background: var(--wb-chart-3); }
.wb-chart-seg-3 { stroke: var(--wb-chart-4); }
span.wb-chart-seg-3 { background: var(--wb-chart-4); }
.wb-chart-seg-4 { stroke: var(--wb-chart-5); }
span.wb-chart-seg-4 { background: var(--wb-chart-5); }
.wb-chart-seg-5 { stroke: var(--wb-chart-6); }
span.wb-chart-seg-5 { background: var(--wb-chart-6); }
.wb-chart-seg-6 { stroke: var(--wb-chart-7); }
span.wb-chart-seg-6 { background: var(--wb-chart-7); }
.wb-chart-seg-7 { stroke: var(--wb-chart-8); }
span.wb-chart-seg-7 { background: var(--wb-chart-8); }
/* Hovering one segment recedes the others, so a slice and its legend row are
   findable without a click. */
.wb-chart-seg { transition: opacity 0.18s ease, stroke-width 0.18s ease; }
.wb-chart-donut:hover .wb-chart-seg { opacity: 0.45; }
.wb-chart-donut .wb-chart-seg:hover { opacity: 1; stroke-width: 36; }
.wb-chart-donut-total { font-size: 26px; font-weight: 700; fill: currentColor; }
.wb-chart-donut-cap {
  font-size: 10px;
  fill: currentColor;
  opacity: 0.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wb-chart-donut-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}
.wb-chart-donut { width: min(240px, 60vw); height: auto; }
.wb-chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.wb-chart-legend li { display: flex; align-items: center; gap: 0.6rem; }
.wb-chart-dotmark { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.wb-chart-legend-label { font-weight: 600; }
.wb-chart-legend-value { color: var(--wb-colour-muted); font-size: 0.9rem; }
.wb-calc-range-row { display: flex; align-items: center; gap: 1rem; }
.wb-calc-range-row input[type="range"] {
  flex: 1;
  accent-color: var(--wb-colour-primary);
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.wb-calc-readout {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wb-colour-primary);
  min-width: 6ch;
  text-align: right;
}
/* Custom chevron on selects (base field styling in theme-ext). Long-hand
   background properties so the ext background colour survives the cascade. */
.wb-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
@media (prefers-reduced-motion: no-preference) {
  /* Opt-in scroll-reveal (theme.animations → wb-animate on <html>, wb-js
     stamped by the runtime — no-JS visitors always see the full page). The
     chatbot section is excluded: a transform would become the containing
     block for its position:fixed launcher. */
  .wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .wb-animate.wb-js .wb-section.wb-inview { opacity: 1; transform: none; }
}
/* Print/PDF renders never scroll — every section must be visible on paper. */
@media print {
  .wb-animate.wb-js .wb-section { opacity: 1 !important; transform: none !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── tone palette — fixed semantic hues (enum-driven classes, never author
   values). Each tone exposes --tone-bg/-text/-border for tiles, groups and
   value text. primary tracks the site theme. ───────────────────────────── */
.wb-tone-primary { --tone-bg: rgba(15,23,42,0.04); --tone-text: var(--wb-colour-primary); --tone-border: var(--wb-colour-primary); }
.wb-tone-neutral { --tone-bg: #f1f5f9; --tone-text: #0f172a; --tone-border: #cbd5e1; }
.wb-tone-success { --tone-bg: #ecfdf5; --tone-text: #047857; --tone-border: #6ee7b7; }
.wb-tone-warning { --tone-bg: #fffbeb; --tone-text: #b45309; --tone-border: #fcd34d; }
.wb-tone-danger  { --tone-bg: #fef2f2; --tone-text: #b91c1c; --tone-border: #fca5a5; }
.wb-tone-info    { --tone-bg: #eff6ff; --tone-text: #1d4ed8; --tone-border: #93c5fd; }
.wb-tone-violet  { --tone-bg: #f5f3ff; --tone-text: #6d28d9; --tone-border: #c4b5fd; }
.wb-tone-orange  { --tone-bg: #fff7ed; --tone-text: #c2410c; --tone-border: #fdba74; }
.wb-calc-val-primary { color: var(--wb-colour-primary); }
.wb-calc-val-neutral { color: #0f172a; }
.wb-calc-val-success { color: #047857; }
.wb-calc-val-warning { color: #b45309; }
.wb-calc-val-danger  { color: #b91c1c; }
.wb-calc-val-info    { color: #1d4ed8; }
.wb-calc-val-violet  { color: #6d28d9; }
.wb-calc-val-orange  { color: #c2410c; }

/* ── card shells. Plain (single card, legacy) keeps inputs left / results
   panel right; two-card splits into separate accented cards (the pfsg 1/3 +
   2/3 input/results split). ─────────────────────────────────────────────── */
.wb-calc { display: grid; gap: 1.5rem; align-items: start; }
.wb-calc-plain {
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--wb-radius-lg, 1.1rem);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}
@media (min-width: 820px) {
  .wb-calc-plain { grid-template-columns: 1.15fr 0.85fr; }
  .wb-calc--two-card { grid-template-columns: 1fr 1.6fr; }
  .wb-calc-schedule { grid-column: 1 / -1; }
  .wb-calc-reco, .wb-calc-cmp-wrap { grid-column: 1 / -1; }
}
.wb-calc--two-card > .wb-calc-inputs,
.wb-calc--two-card > .wb-calc-results {
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--wb-radius-lg, 1rem);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
  padding: clamp(1.1rem, 3vw, 1.9rem);
}
.wb-calc-panel-title {
  font-size: 1.05rem; font-weight: 700; margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
/* accent left-borders on the two cards (icon-title parity). */
.wb-accent-primary { border-left: 4px solid var(--wb-colour-primary) !important; }
.wb-accent-neutral { border-left: 4px solid #94a3b8 !important; }
.wb-accent-success { border-left: 4px solid #34d399 !important; }
.wb-accent-warning { border-left: 4px solid #fbbf24 !important; }
.wb-accent-danger  { border-left: 4px solid #f87171 !important; }
.wb-accent-info    { border-left: 4px solid #60a5fa !important; }
.wb-accent-violet  { border-left: 4px solid #a78bfa !important; }
.wb-accent-orange  { border-left: 4px solid #fb923c !important; }

.wb-calc-inputs { display: grid; gap: 1.15rem; align-content: start; }
.wb-calc-results { display: grid; gap: 1.25rem; align-content: start; }

/* ── result tiles (coloured stat cards). ─────────────────────────────────── */
.wb-calc-tiles {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.wb-calc-tile {
  background: var(--tone-bg, #f1f5f9);
  border: 1px solid var(--tone-border, rgba(15, 23, 42, 0.1));
  border-radius: var(--wb-radius-md, 0.85rem);
  padding: 0.95rem 1rem;
  display: grid; gap: 0.3rem; min-width: 0;
}
.wb-calc-tile-label { color: var(--wb-colour-muted); font-size: 0.85rem; font-weight: 600; }
/* The value sizes down to fit (clamp min) rather than clipping; the copy button
   stays a small inline glyph beside it, never wrapping below (the round-3 tiles
   wrapped copy under the value and looked broken). */
.wb-calc-tile-value {
  color: var(--tone-text, inherit);
  font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; white-space: nowrap;
}
.wb-calc-tile-value .wb-calc-copy { flex: none; }
.wb-calc-subtext { color: var(--wb-colour-muted); font-size: 0.78rem; line-height: 1.25; }

/* ── flat output rows (light panel — never the band surface, which may be
   dark; explicit text colour so band inheritance can't wash it out). ─────── */
.wb-calc-outputs {
  background: var(--wb-colour-panel);
  color: var(--wb-colour-text);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--wb-radius-md, 0.85rem);
  padding: 1.25rem;
  display: grid; gap: 0.8rem; align-content: start;
}
.wb-calc-output-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wb-calc-output-label { color: var(--wb-colour-muted); font-weight: 600; display: grid; gap: 0.1rem; }
.wb-calc-output-cluster, .wb-calc-tile-value { min-width: 0; }
.wb-calc-output-value { font-weight: 700; font-variant-numeric: tabular-nums; }
/* headline: the first flat row in a plain single card. */
.wb-calc-plain .wb-calc-outputs .wb-calc-output-row:first-child { padding-bottom: 0.7rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.wb-calc-plain .wb-calc-outputs .wb-calc-output-row:first-child .wb-calc-output-value { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--wb-colour-primary); line-height: 1.15; }

/* ── group panels. ───────────────────────────────────────────────────────── */
.wb-calc-groups { display: grid; gap: 1rem; }
.wb-calc-groups--columns { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wb-calc-group {
  background: var(--tone-bg, var(--wb-colour-panel));
  border: 1px solid var(--tone-border, rgba(15,23,42,0.08));
  border-radius: var(--wb-radius-md, 0.85rem); padding: 1.1rem 1.25rem;
  display: grid; gap: 0.7rem; align-content: start;
}
.wb-calc-group-title { font-size: 0.95rem; font-weight: 700; margin: 0; color: var(--tone-text, inherit); }
.wb-calc-group-note { font-size: 0.8rem; color: var(--wb-colour-muted); margin: 0; }
.wb-calc-group .wb-calc-tile { background: rgba(255,255,255,0.55); }
/* layout:"columns" — the group's outputs become centred column stats (the pfsg
   Weekly / Fortnightly / Monthly converter row). */
.wb-calc-colstats {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  text-align: center;
}
.wb-calc-colstat { display: grid; gap: 0.2rem; justify-items: center; min-width: 0; }
.wb-calc-colstat-label { color: var(--wb-colour-muted); font-size: 0.78rem; font-weight: 600; }
.wb-calc-colstat-value {
  color: var(--tone-text, inherit); font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.2rem); font-variant-numeric: tabular-nums;
}

/* ── ↑/↓ diff indicator + copy button. ───────────────────────────────────── */
.wb-calc-diff { font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; }
.wb-calc-diff-better { color: #059669; }
.wb-calc-diff-worse  { color: #dc2626; }
.wb-calc-copy {
  background: none; border: 0; padding: 0.15rem; cursor: pointer; color: var(--wb-colour-muted);
  display: inline-flex; align-items: center; border-radius: var(--wb-radius-sm, 0.3rem); line-height: 0;
}
.wb-calc-copy:hover { color: var(--wb-colour-primary); background: rgba(15,23,42,0.06); }
.wb-calc-copy.is-copied { color: #059669; }

/* ── comparison table. ───────────────────────────────────────────────────── */
.wb-calc-cmp-wrap { overflow-x: auto; }
.wb-calc-cmp-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.6rem; }
.wb-calc-cmp { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.wb-calc-cmp th, .wb-calc-cmp td { padding: 0.6rem 0.75rem; text-align: right; border-bottom: 1px solid rgba(15,23,42,0.08); white-space: nowrap; }
.wb-calc-cmp thead th { color: var(--wb-colour-muted); font-weight: 600; }
.wb-calc-cmp th:first-child, .wb-calc-cmp td:first-child { text-align: left; }
.wb-calc-cmp td { font-variant-numeric: tabular-nums; }
.wb-calc-cmp td .wb-calc-output-cluster, .wb-calc-cmp td > * { display: inline-flex; gap: 0.4rem; align-items: baseline; }

/* ── recommendation panel. ───────────────────────────────────────────────── */
.wb-calc-reco { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--wb-radius-md, 0.85rem); padding: 1.1rem 1.35rem; }
.wb-calc-reco-title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; color: #065f46; }
.wb-calc-reco-body { display: grid; gap: 0.4rem; }
.wb-calc-reco-line { margin: 0; }
.wb-calc-reco-name { color: #047857; }

/* ── sliderNumber: formatted box + affix, brand-tracked slider, 3-point scale. */
.wb-calc-slidernum { display: grid; gap: 0.5rem; }
.wb-calc-slidernum input[type="range"] {
  width: 100%;
  accent-color: var(--wb-colour-primary);
  height: 1.6rem; margin: 0; padding: 0; border: 0;
}
/* Currency/percent affix sitting inside the box (the pfsg "$" prefix). */
.wb-calc-numbox { position: relative; display: flex; align-items: center; }
.wb-calc-numbox input { width: 100%; font-variant-numeric: tabular-nums; }
.wb-calc-numbox .wb-calc-affix {
  position: absolute; left: 0.9rem; color: var(--wb-colour-muted);
  font-weight: 600; pointer-events: none;
}
.wb-calc-numbox.has-affix input { padding-left: 1.9rem; }
.wb-calc-endpoints { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.72rem; color: var(--wb-colour-muted); font-variant-numeric: tabular-nums; }
.wb-calc-endpoint-mid { color: var(--wb-colour-primary); font-weight: 700; font-size: 0.82rem; }

/* ── schedule (title count + collapsible disclosure). ────────────────────── */
.wb-calc-schedule-title { font-size: 1.1rem; margin-bottom: 0.75rem; }
.wb-calc-schedule-count { color: var(--wb-colour-muted); font-size: 0.85rem; font-weight: 500; }
.wb-calc-schedule--collapsible > summary { cursor: pointer; list-style: none; padding: 0.6rem 0; }
.wb-calc-schedule--collapsible > summary::-webkit-details-marker { display: none; }
.wb-calc-schedule--collapsible > summary::before { content: "▸ "; color: var(--wb-colour-primary); }
.wb-calc-schedule--collapsible[open] > summary::before { content: "▾ "; }
/* Zebra rows are light PANEL strips (with their own text colour): on a dark
   band the table's odd rows show the band + light text, even rows this light
   panel + dark text — both remain readable. */
.wb-calc-table tbody tr:nth-child(even) { background: var(--wb-colour-panel); color: var(--wb-colour-text); }
.wb-calc-table td { font-variant-numeric: tabular-nums; }

/* Interactive charts (runtime-charts.ts swaps the static SVG for a canvas in
   this wrapper). Wrapper geometry MIRRORS the SVG it replaces (640x300 viewBox
   / 240px square donut) so the swap causes zero layout shift; Chart.js sizes
   to the container (maintainAspectRatio false). */
.wb-chart-canvas { position: relative; aspect-ratio: 640 / 300; }
.wb-chart-canvas-donut { aspect-ratio: 1 / 1; width: min(240px, 60vw); }
/* Depth + hover lift on cards and buttons (motion only when welcome). */
.wb-feature, .wb-team-member, .wb-blog-card { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); }
@media (prefers-reduced-motion: no-preference) {
  .wb-feature, .wb-team-member, .wb-blog-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .wb-feature:hover, .wb-team-member:hover, .wb-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.11);
  }
  .wb-button { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; }
  .wb-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); }
}

/* ── Sticky translucent header ─────────────────────────────────────────── */
.wb-sticky .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--wb-colour-background) 84%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
/* No color-mix/backdrop-filter support → solid brand background (readable). */
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  .wb-sticky .wb-site-header { background: var(--wb-colour-background); }
}
.wb-sticky .wb-site-header.wb-scrolled {
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  border-bottom-color: transparent;
}
/* ── Nav: animated accent underline instead of the default text underline ── */
.wb-motion .wb-nav a { text-decoration: none; }
.wb-motion .wb-nav > a, .wb-motion .wb-nav-item > a { position: relative; }
.wb-motion .wb-nav > a::before, .wb-motion .wb-nav-item > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wb-colour-primary), var(--wb-colour-accent));
  transform: scaleX(0);
  transform-origin: left center;
}
.wb-motion .wb-nav > a:hover::before, .wb-motion .wb-nav > a:focus-visible::before,
.wb-motion .wb-nav-item > a:hover::before, .wb-motion .wb-nav-item > a:focus-visible::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
  .wb-motion .wb-nav > a::before, .wb-motion .wb-nav-item > a::before {
    transition: transform 0.22s ease;
  }
}
/* ── Dropdown panel: branded surface, accent hover bar ─────────────────── */
.wb-motion .wb-nav-sub {
  border: 1px solid color-mix(in srgb, var(--wb-colour-primary) 18%, transparent);
  border-radius: var(--wb-radius-md, 0.75rem);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  padding: 0.4rem;
}
.wb-motion .wb-nav-sub a {
  border-radius: var(--wb-radius-sm, 0.5rem);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wb-motion .wb-nav-sub a:hover, .wb-motion .wb-nav-sub a:focus-visible {
  background: var(--wb-colour-surface);
  color: var(--wb-colour-on-surface);
  border-left-color: var(--wb-colour-accent);
  text-decoration: none;
}
/* ── Headline treatments ───────────────────────────────────────────────── */
/* Gradient text on plain heroes; cover heroes stay white over media (the
   gradient would vanish against a busy frame) and get depth via shadow.

   .wb-section.wb-hero, not .wb-hero: renderHero() nests a second .wb-hero div
   INSIDE the cover section, so the bare form matched that inner div and the
   negation excluded nothing — this rule was painting "color: transparent" on
   cover headings and relying on -webkit-background-clip over a photograph to
   show them. Only the outer section carries .wb-section. Same fault, same fix,
   and the same reasoning as kit-css-motion-ext.ts's four. */
.wb-headline-gradient .wb-section.wb-hero:not(.wb-hero-cover) .wb-hero-heading {
  background: linear-gradient(120deg, var(--wb-colour-primary), var(--wb-colour-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wb-headline-gradient .wb-hero-cover .wb-hero-heading,
.wb-headline-kinetic .wb-hero-cover .wb-hero-heading,
.wb-headline-accent-bar .wb-hero-cover .wb-hero-heading {
  text-shadow: 0 2px 24px rgba(10, 10, 12, 0.45);
  letter-spacing: -0.01em;
}
/* Accent bar under the H1 (all hero variants). */
.wb-headline-accent-bar .wb-hero-heading::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  border-radius: 4px;
  margin: 0.6em auto 0;
  background: linear-gradient(90deg, var(--wb-colour-accent), var(--wb-colour-primary));
}
.wb-headline-accent-bar .wb-align-left .wb-hero-heading::after { margin-left: 0; }
/* Kinetic: renderHero wraps heading words in .wb-word spans; each rises with a
   stagger on load. Without JS/with reduced motion the words render static. */
.wb-headline-kinetic .wb-hero-heading .wb-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word {
    opacity: 0;
    transform: translateY(0.55em);
    animation: wb-word-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(2) { animation-delay: 0.08s; }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(3) { animation-delay: 0.16s; }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(4) { animation-delay: 0.24s; }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(5) { animation-delay: 0.32s; }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(6) { animation-delay: 0.4s; }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(7) { animation-delay: 0.48s; }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(8) { animation-delay: 0.56s; }
  .wb-js.wb-headline-kinetic .wb-hero-heading .wb-word:nth-child(n+9) { animation-delay: 0.64s; }
}
@keyframes wb-word-rise {
  to { opacity: 1; transform: none; }
}
/* ── Reveal variants + per-card stagger ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Zoom variant overrides the theme-polish fade-up initial state. */
  .wb-reveal-zoom.wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    transform: translateY(14px) scale(0.97);
  }
  .wb-reveal-zoom.wb-animate.wb-js .wb-section.wb-inview { transform: none; }
  /* Cards inside a revealing section rise individually after the section
     lands. Bounded to the first 8 children per grid (nth-child fan). */
  .wb-stagger.wb-animate.wb-js .wb-section:not(.wb-inview) :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card) {
    opacity: 0;
    transform: translateY(18px);
  }
  .wb-stagger.wb-animate.wb-js .wb-section.wb-inview :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card) {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .wb-stagger.wb-animate.wb-js .wb-section.wb-inview :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card):nth-child(2) { transition-delay: 0.07s; }
  .wb-stagger.wb-animate.wb-js .wb-section.wb-inview :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card):nth-child(3) { transition-delay: 0.14s; }
  .wb-stagger.wb-animate.wb-js .wb-section.wb-inview :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card):nth-child(4) { transition-delay: 0.21s; }
  .wb-stagger.wb-animate.wb-js .wb-section.wb-inview :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card):nth-child(5) { transition-delay: 0.28s; }
  .wb-stagger.wb-animate.wb-js .wb-section.wb-inview :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card):nth-child(6) { transition-delay: 0.35s; }
  .wb-stagger.wb-animate.wb-js .wb-section.wb-inview :is(.wb-feature,
    .wb-team-member, .wb-testimonial, .wb-gallery-item, .wb-blog-card):nth-child(n+7) { transition-delay: 0.42s; }
}
/* ── Cover motion (hero + CTA bands): parallax + Ken Burns ─────────────── */
/* Parallax: the media layer is oversized so the runtime's translateY never
   exposes an edge; runtime-motion.ts drives the transform (rAF, gated on
   reduced-motion + JS). Without JS the oversize is harmless (object-fit cover). */
.wb-parallax :is(.wb-hero-cover-media, .wb-cta-cover-media) {
  top: -12%;
  bottom: -12%;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  /* Ken Burns on IMAGE covers only (a video already moves). */
  .wb-kenburns :is(.wb-hero-cover-media, .wb-cta-cover-media) img {
    animation: wb-kenburns 26s ease-in-out infinite alternate;
    transform-origin: 50% 40%;
  }
}
@keyframes wb-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08) translateY(-1.5%); }
}
/* ── CTA cover band (backgroundImageUrl on a cta block) ────────────────── */
.wb-cta-cover { position: relative; overflow: hidden; }
.wb-cta-cover .wb-cta-cover-media { position: absolute; inset: 0; z-index: 0; }
.wb-cta-cover .wb-cta-cover-media img { width: 100%; height: 100%; object-fit: cover; }
.wb-cta-cover .wb-cta-cover-overlay {
  position: absolute; inset: 0; z-index: 1; background: rgba(10, 10, 12, 0.6);
}
.wb-cta-cover .wb-container { position: relative; z-index: 2; }
.wb-cta-cover .wb-cta-heading { color: #ffffff; }
.wb-cta-cover .wb-cta-body { color: rgba(255, 255, 255, 0.88); }
/* The even-band surface background must not tint the media band. */
.wb-main > .wb-section.wb-cta-cover:nth-of-type(even) { background: transparent; }
/* ── Card hover polish under motion ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .wb-motion :is(.wb-feature, .wb-testimonial, .wb-team-member, .wb-blog-card) {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }
}
.wb-motion :is(.wb-feature, .wb-testimonial, .wb-team-member, .wb-blog-card):hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--wb-colour-accent) 45%, transparent);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
/* ── Mobile: a sticky header pins the open hamburger menu, so a long nav
   (7 parents + inline dropdown children) must scroll INSIDE the header or the
   links below the fold become unreachable. ───────────────────────────────── */
@media (max-width: 640px) {
  .wb-sticky.wb-js .wb-nav-open .wb-nav {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ── questionnaire block ── */
.wb-q-wrap { max-width: 42rem; }
.wb-q-row[hidden] { display: none; }
.wb-q-label { font-weight: 600; }
.wb-q-required { color: var(--wb-colour-accent, var(--wb-colour-primary)); }
.wb-q-help { margin: 0.1rem 0 0; font-size: 0.9rem; font-weight: 400; color: var(--wb-colour-muted); }
.wb-q-error { margin: 0.1rem 0 0; font-size: 0.9rem; font-weight: 500; color: #b3402e; }
.wb-q-error[hidden] { display: none; }
.wb-q-form-error { color: #b3402e; font-weight: 500; }
.wb-q-form-error[hidden] { display: none; }
.wb-q-checkbox { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; cursor: pointer; }
.wb-q-checkbox input { width: 1.15rem; height: 1.15rem; }
.wb-field select { font: inherit; padding: 0.7rem 0.85rem; border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--wb-radius-sm, 0.5rem); width: 100%; background: var(--wb-colour-background, #fff); }

.wb-q-tiles, .wb-q-segmented { border: 0; margin: 0; padding: 0; min-width: 0; }
.wb-q-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wb-q-tile, .wb-q-segment { display: inline-flex; align-items: center; cursor: pointer; user-select: none; font-weight: 500; }
.wb-q-tile {
  padding: 0.65rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: var(--wb-radius-sm, 0.5rem);
  background: var(--wb-colour-background, #fff);
  color: var(--wb-colour-text);
  transition: border-color 120ms, background 120ms;
}
.wb-q-tile:hover { border-color: var(--wb-colour-primary); }
.wb-q-tile:has(input:checked) { border-color: var(--wb-colour-primary); background: var(--wb-colour-surface); color: var(--wb-colour-primary); font-weight: 600; }
.wb-q-tile:focus-within, .wb-q-segment:focus-within { outline: 2px solid var(--wb-colour-primary); outline-offset: 2px; }
.wb-q-segmented { display: inline-flex; border: 1px solid rgba(15, 23, 42, 0.2); border-radius: 999px; overflow: hidden; flex: none; align-self: center; }
.wb-q-segment { padding: 0.5rem 0.9rem; font-size: 0.85rem; color: var(--wb-colour-muted); background: transparent; }
.wb-q-segment:has(input:checked) { background: var(--wb-colour-primary); color: #fff; font-weight: 600; }

.wb-q-with-attachment { display: flex; align-items: center; gap: 0.75rem; }
.wb-q-with-attachment .wb-q-currency { flex: 1; }
.wb-q-currency { position: relative; display: flex; align-items: center; }
.wb-q-currency-symbol { position: absolute; left: 0.85rem; color: var(--wb-colour-muted); pointer-events: none; }
.wb-q-currency input { padding-left: 1.7rem; }

.wb-q-addresses { display: grid; gap: 0.5rem; }
.wb-q-address-row { display: flex; align-items: center; gap: 0.5rem; }
.wb-q-remove { flex: none; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(15, 23, 42, 0.2); border-radius: var(--wb-radius-sm, 0.5rem); background: var(--wb-colour-background, #fff); color: var(--wb-colour-muted); cursor: pointer; font-size: 1.1rem; }
.wb-q-add { justify-self: start; border: 0; background: transparent; color: var(--wb-colour-primary); font: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0.25rem 0; }

.wb-q-callout {
  margin: 0.4rem 0 0; padding: 0.6rem 0.85rem; font-size: 0.9rem; font-weight: 400;
  border-left: 3px solid var(--wb-colour-accent, var(--wb-colour-primary));
  border-radius: 0 var(--wb-radius-sm, 0.5rem) var(--wb-radius-sm, 0.5rem) 0;
  background: var(--wb-colour-surface); color: var(--wb-colour-text);
}
.wb-q-lvr[hidden] { display: none; }
.wb-q-lvr-line {
  padding: 0.75rem 1rem; border: 1px solid rgba(15, 23, 42, 0.12); border-left-width: 4px;
  border-radius: var(--wb-radius-sm, 0.5rem); background: var(--wb-colour-surface); font-size: 0.95rem;
}
.wb-q-lvr-band { color: var(--wb-colour-muted); }
.wb-q-lvr-good { border-left-color: #2e7d5b; }
.wb-q-lvr-ok { border-left-color: var(--wb-colour-primary); }
.wb-q-lvr-warn { border-left-color: #b3641f; }
.wb-q-lvr-high { border-left-color: #b3402e; }

.wb-q-summary { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: var(--wb-radius-md, 0.85rem); background: var(--wb-colour-surface); }
.wb-q-summary[hidden] { display: none; }
.wb-q-summary h3, .wb-q-summary h4 { margin: 0; }
.wb-q-answers { margin: 0; display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.35rem 1.25rem; font-size: 0.95rem; }
.wb-q-answers > div { display: contents; }
.wb-q-answers dt { color: var(--wb-colour-muted); }
.wb-q-answers dd { margin: 0; }
.wb-q-docs[hidden] { display: none; }
.wb-q-docs ul { margin: 0.35rem 0 0; padding-left: 1.25rem; }
.wb-q-summary-body { margin: 0; color: var(--wb-colour-muted); font-size: 0.95rem; }
.wb-q-form[hidden] { display: none; }

/* ── design kits ─────────────────────────────────────────── */
/* ── rule-bar · the pre-kit header, restated so the kit is explicit ─────── */
.wb-navkit-rule-bar .wb-site-header { border-bottom: 1px solid color-mix(in srgb, var(--wb-colour-text) 10%, transparent); }

/* ── split-centre · centred masthead, link row beneath ──────────────────── */
/* Links are NOT split into two DOM halves either side of the wordmark: that
   needs two <nav> elements, and the second would either duplicate every link
   (read twice by a screen reader, counted twice by a crawler) or split the
   primary landmark in two. Stacking gets the same "centred masthead" read from
   one nav. */
.wb-navkit-split-centre .wb-header-inner {
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 1.6rem;
  padding-bottom: 1.1rem;
}
.wb-navkit-split-centre .wb-brand { font-size: 1.6rem; letter-spacing: 0.02em; }
.wb-navkit-split-centre .wb-nav { justify-content: center; gap: 2rem; }
.wb-navkit-split-centre .wb-nav a {
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wb-navkit-split-centre .wb-site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--wb-colour-text) 14%, transparent);
  text-align: center;
}

/* ── left-rail · fixed vertical column, content offset beside it ────────── */
@media (min-width: 900px) {
  .wb-navkit-left-rail .wb-site-header {
    position: fixed;
    inset: 0 auto 0 0;
    width: 15rem;
    z-index: 90;
    border-right: 1px solid color-mix(in srgb, var(--wb-colour-text) 12%, transparent);
    border-bottom: 0;
    background: var(--wb-colour-background);
  }
  .wb-navkit-left-rail .wb-header-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.5rem;
    height: 100%;
    padding: 2.5rem 1.75rem;
  }
  .wb-navkit-left-rail .wb-nav { flex-direction: column; gap: 0.85rem; width: 100%; }
  .wb-navkit-left-rail .wb-nav a { font-size: 1.02rem; }
  /* Static, so the panel nests INSIDE the rail rather than floating over the
     page. That costs the default's collapse: the shared hidden state is
     visibility+opacity, which hides an element without taking it out of flow,
     and an absolutely-positioned panel never needed more. Made static it kept
     its full height — measured 136px of invisible submenu on a live site,
     inflating the rail to 415px and pushing the hero down the page with it.
     display:none is what actually collapses it. */
  .wb-navkit-left-rail .wb-nav-sub {
    position: static;
    box-shadow: none;
    padding-left: 0.9rem;
    display: none;
  }
  .wb-navkit-left-rail .wb-nav-item:hover .wb-nav-sub,
  .wb-navkit-left-rail .wb-nav-item:focus-within .wb-nav-sub { display: block; }
  .wb-navkit-left-rail .wb-portal-link { margin-top: auto; }
  /* The rail is out of flow, so the page pays for it in padding. */
  .wb-navkit-left-rail body { padding-left: 15rem; }
  .wb-navkit-left-rail .wb-site-footer { margin-left: 0; }
}

/* ── overlay · wordmark and one word; links open full-screen ────────────── */
.wb-navkit-overlay .wb-site-header { border-bottom: 0; position: relative; z-index: 95; }
/* THE HEADER MUST NEVER FORM A CONTAINING BLOCK ON THIS KIT. Its menu panel is
   a position:fixed CHILD of the header (kit-nav.ts overlayShell), and a
   transform, filter, backdrop-filter or perspective on an ancestor makes a
   fixed descendant anchor to that ancestor instead of to the viewport — the
   panel then scrolls away with the page and covers nothing (measured at
   top=-859 after a 1200px scroll, Chromium 1280x860).
   Kit-side rules exclude the kit at source. This neutraliser exists for the ONE
   rule that cannot: theme-motion.ts's '.wb-sticky .wb-site-header' backdrop
   blur, which ships to every site ever published and therefore cannot be
   narrowed without breaking the legacy byte-identical invariant. Scoped to
   .wb-design so pre-kit sites are untouched, and carrying three classes so it
   outranks the (0,2,0) rule it is here to beat.
   mobile-contract.test.ts derives this requirement from the sheet, so a future
   header kit that reaches for a filter is caught when it is written. */
.wb-design.wb-navkit-overlay .wb-site-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
  transform: none;
}
/* The bar sits ABOVE its own open panel: the panel is a positioned child of
   the header at z-index 94, so an unpositioned bar painted under it and the
   wordmark and the Close control vanished the moment the menu opened. */
.wb-navkit-overlay .wb-header-inner { position: relative; z-index: 96; }
.wb-navkit-overlay .wb-header-tail { display: flex; align-items: center; gap: 1.25rem; }
.wb-navkit-overlay .wb-nav-word {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--wb-colour-text);
}
.wb-navkit-overlay .wb-nav-word-close { display: none; }
.wb-navkit-overlay .wb-nav-open .wb-nav-word-open { display: none; }
.wb-navkit-overlay .wb-nav-open .wb-nav-word-close { display: inline; }
.wb-navkit-overlay .wb-overlay-panel {
  position: fixed;
  inset: 0;
  z-index: 94;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--wb-colour-background);
}
.wb-navkit-overlay .wb-nav-open .wb-overlay-panel { display: flex; }
.wb-navkit-overlay .wb-overlay-panel .wb-nav {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}
.wb-navkit-overlay .wb-overlay-panel .wb-nav a {
  font-family: var(--wb-font-heading);
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wb-navkit-overlay .wb-overlay-panel .wb-nav-sub {
  position: static;
  box-shadow: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.wb-navkit-overlay .wb-overlay-panel .wb-nav-sub a { font-size: 1rem; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .wb-navkit-overlay .wb-nav-open .wb-overlay-panel .wb-nav > * {
    animation: wb-kit-overlay-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .wb-navkit-overlay .wb-nav-open .wb-overlay-panel .wb-nav > *:nth-child(2) { animation-delay: 0.05s; }
  .wb-navkit-overlay .wb-nav-open .wb-overlay-panel .wb-nav > *:nth-child(3) { animation-delay: 0.1s; }
  .wb-navkit-overlay .wb-nav-open .wb-overlay-panel .wb-nav > *:nth-child(4) { animation-delay: 0.15s; }
  .wb-navkit-overlay .wb-nav-open .wb-overlay-panel .wb-nav > *:nth-child(5) { animation-delay: 0.2s; }
  .wb-navkit-overlay .wb-nav-open .wb-overlay-panel .wb-nav > *:nth-child(n+6) { animation-delay: 0.25s; }
}
@keyframes wb-kit-overlay-in {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: none; }
}
/* Without JS there is no wb-nav-open, so the panel would never open. Fall the
   whole kit back to an ordinary inline nav — navigation must not need script. */
.wb-navkit-overlay:not(.wb-js) .wb-overlay-panel { position: static; display: block; background: none; }
.wb-navkit-overlay:not(.wb-js) .wb-overlay-panel .wb-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.wb-navkit-overlay:not(.wb-js) .wb-overlay-panel .wb-nav a { font-size: 1rem; font-weight: 600; }
.wb-navkit-overlay:not(.wb-js) .wb-nav-word { display: none; }

/* ── capsule · floating pill detached from the top edge ─────────────────── */
.wb-navkit-capsule .wb-site-header { border-bottom: 0; background: transparent; padding: 0.9rem 0; }
.wb-navkit-capsule .wb-header-inner {
  border: 1px solid color-mix(in srgb, var(--wb-colour-text) 12%, transparent);
  border-radius: 999px;
  padding: 0.5rem 0.6rem 0.5rem 1.4rem;
  background: color-mix(in srgb, var(--wb-colour-background) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  gap: 1.5rem;
}
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  .wb-navkit-capsule .wb-header-inner { background: var(--wb-colour-background); }
}
.wb-navkit-capsule .wb-nav { gap: 1.6rem; }
.wb-navkit-capsule .wb-nav a { font-size: 0.94rem; font-weight: 500; }
.wb-navkit-capsule .wb-portal-link {
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  font-weight: 600;
  text-decoration: none;
}
.wb-navkit-capsule .wb-portal-link:hover { text-decoration: none; filter: brightness(0.94); }

/* ── the contact strip · ANY bar, not one kit ───────────────────────────────
   Keyed on .wb-has-utility (kit-nav.ts stamps it whenever a strip is emitted)
   rather than on .wb-navkit-utility-stack. The strip used to belong to that one
   kit, which forced the trades preset to name a single nav kit and gave every
   trades site in the estate the same banner. The strip is the trades SIGNAL —
   the phone number above everything — and the bar under it is free to vary. */
.wb-has-utility .wb-utility-strip {
  background: var(--wb-colour-text);
  color: var(--wb-colour-background);
  font-size: 0.82rem;
}
.wb-has-utility .wb-utility-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── utility-stack · the heavier bar the strip sits on ──────────────────────
   Everything below is genuinely THIS KIT — a bar with more weight, a primary
   rule under it and an uppercase door. A rule-bar carrying a strip keeps its
   own restraint, which is the point of letting it carry one at all. */
.wb-navkit-utility-stack .wb-site-header {
  border-bottom: 3px solid var(--wb-colour-primary);
}
.wb-navkit-utility-stack .wb-header-inner { padding-top: 1.15rem; padding-bottom: 1.15rem; }
.wb-navkit-utility-stack .wb-brand { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.01em; }
.wb-navkit-utility-stack .wb-nav a { font-weight: 700; font-size: 0.95rem; }
.wb-navkit-utility-stack .wb-portal-link {
  background: var(--wb-colour-accent);
  color: var(--wb-colour-text);
  padding: 0.7rem 1.3rem;
  border-radius: var(--wb-radius-sm, 0.4rem);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.wb-navkit-utility-stack .wb-portal-link:hover { text-decoration: none; filter: brightness(0.94); }

/* ── bordered-frame · the bar sits inside a drawn box ───────────────────────
   .wb-header-inner IS the .wb-container, so the frame has to give up the
   container's 1100px measure or it would float in the middle of a wide page
   with the border stopping short of the edges it is inset from. */
.wb-navkit-bordered-frame .wb-site-header {
  border-bottom: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 3vw, 2.25rem) 0;
}
.wb-navkit-bordered-frame .wb-header-inner {
  max-width: none;
  border: 2px solid var(--wb-colour-text);
  border-radius: var(--wb-radius-sm, 0.35rem);
  padding: 0.8rem 1.15rem;
  gap: 1.5rem;
}
.wb-navkit-bordered-frame .wb-brand { font-size: 1.2rem; letter-spacing: -0.01em; }
.wb-navkit-bordered-frame .wb-nav { gap: 1.5rem; }
.wb-navkit-bordered-frame .wb-nav a { font-size: 0.9rem; font-weight: 600; }
.wb-navkit-bordered-frame .wb-portal-link {
  border: 2px solid var(--wb-colour-text);
  border-radius: var(--wb-radius-sm, 0.3rem);
  padding: 0.35rem 0.85rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
.wb-navkit-bordered-frame .wb-portal-link:hover {
  background: var(--wb-colour-text);
  color: var(--wb-colour-background);
  text-decoration: none;
}

/* ── stacked-masthead · brand on its own line, links ragged beneath ─────────
   A GRID, not a flex column, and not absolute positioning. The shell hands
   this kit four children in a fixed DOM order (brand, toggle, nav, door) and
   the masthead wants them on two rows with the door pinned to the right of the
   second — which a column would stack and an absolutely-positioned door would
   place against the container's border box rather than its text edge, i.e. out
   in the gutter. Grid placement is the only one of the three that reads the
   same at every width. */
.wb-navkit-stacked-masthead .wb-site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--wb-colour-text) 18%, transparent);
}
.wb-navkit-stacked-masthead .wb-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  row-gap: 0.85rem;
  column-gap: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 0.85rem;
}
.wb-navkit-stacked-masthead .wb-brand {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.wb-navkit-stacked-masthead .wb-nav-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
.wb-navkit-stacked-masthead .wb-nav {
  grid-column: 1;
  grid-row: 2;
  gap: 1.6rem;
  align-items: center;
}
.wb-navkit-stacked-masthead .wb-nav a { font-size: 0.88rem; font-weight: 500; }
.wb-navkit-stacked-masthead .wb-portal-link {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── minimal-ghost · no ground, no rule, type at its quietest ───────────────
   The links are set in the MUTED token rather than at reduced opacity. Opacity
   composites toward the page and would drop an 8:1 ink to roughly 4:1 at this
   size, which is a contrast failure dressed up as restraint; '--wb-colour-muted'
   is the one token the palette engine guarantees at 4.5:1 (palette-engine.ts
   copyFor), so the kit gets its whisper and keeps its legibility. */
.wb-navkit-minimal-ghost .wb-site-header { border-bottom: 0; background: transparent; }
.wb-navkit-minimal-ghost .wb-header-inner {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  gap: 2rem;
}
.wb-navkit-minimal-ghost .wb-brand { font-size: 1.05rem; font-weight: 600; }
.wb-navkit-minimal-ghost .wb-nav { gap: 2.1rem; }
.wb-navkit-minimal-ghost .wb-nav a {
  color: var(--wb-colour-muted);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.18s ease;
}
.wb-navkit-minimal-ghost .wb-nav a:hover,
.wb-navkit-minimal-ghost .wb-nav a:focus-visible { color: var(--wb-colour-text); }
.wb-navkit-minimal-ghost .wb-portal-link {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── centred-column · the pre-kit layout, restated so the kit is explicit ─ */
.wb-laykit-centred-column .wb-container { max-width: 1100px; }

/* ── wide-ragged · 1320px, left-ragged, unequal spans, tight leading ────── */
.wb-laykit-wide-ragged .wb-container { max-width: 1320px; padding: 0 2rem; }
.wb-laykit-wide-ragged .wb-section { padding: clamp(3rem, 7vw, 6.5rem) 0; }
.wb-laykit-wide-ragged .wb-section-head { max-width: 38rem; margin: 0 0 3rem; text-align: left; }
.wb-laykit-wide-ragged h1 { font-size: clamp(2.4rem, 7vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; }
.wb-laykit-wide-ragged h2 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.02em; }
.wb-laykit-wide-ragged .wb-hero:not(.wb-hero-cover, .wb-section) { text-align: left; max-width: 44rem; margin: 0; }
.wb-laykit-wide-ragged div.wb-cta { text-align: left; max-width: 46rem; margin: 0; }
.wb-laykit-wide-ragged .wb-features-grid, .wb-laykit-wide-ragged .wb-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
}
/* The unequal span is what makes it read as ragged rather than as a wider
   version of the same card grid. */
.wb-laykit-wide-ragged .wb-features-grid > .wb-feature:first-child { grid-column: span 2; }
@media (max-width: 800px) {
  .wb-laykit-wide-ragged .wb-features-grid > .wb-feature:first-child { grid-column: auto; }
}
.wb-laykit-wide-ragged .wb-feature, .wb-laykit-wide-ragged .wb-team-member {
  border: 0;
  border-radius: 0;
  outline: 1px solid color-mix(in srgb, var(--wb-colour-text) 12%, transparent);
  padding: 2rem 1.75rem;
  background: transparent;
}
.wb-laykit-wide-ragged .wb-rich { max-width: 42rem; margin: 0; }

/* ── narrow-editorial · 720px measure, large type, generous leading ─────── */
.wb-laykit-narrow-editorial .wb-container { max-width: 720px; }
.wb-laykit-narrow-editorial body { line-height: 1.75; }
.wb-laykit-narrow-editorial .wb-section { padding: clamp(2.75rem, 7vw, 5.5rem) 0; }
.wb-laykit-narrow-editorial h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.14; }
.wb-laykit-narrow-editorial .wb-section-head { max-width: none; margin: 0 0 2rem; text-align: left; }
.wb-laykit-narrow-editorial .wb-hero:not(.wb-hero-cover, .wb-section) { text-align: left; max-width: none; margin: 0; }
.wb-laykit-narrow-editorial .wb-rich { max-width: none; margin: 0; font-size: 1.08rem; }
.wb-laykit-narrow-editorial div.wb-cta { text-align: left; max-width: none; margin: 0; }
/* Features become a rule-separated LIST, not cards — an editorial measure has
   no room for a card grid and a one-column grid of bordered boxes looks like a
   broken card grid rather than a deliberate list. */
.wb-laykit-narrow-editorial .wb-features-grid, .wb-laykit-narrow-editorial .wb-team-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
.wb-laykit-narrow-editorial .wb-feature, .wb-laykit-narrow-editorial .wb-team-member {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--wb-colour-text) 14%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 1.75rem 0;
}
.wb-laykit-narrow-editorial .wb-feature-icon { font-size: 1.25rem; }
.wb-laykit-narrow-editorial .wb-form-wrap { max-width: none; }

/* ── asymmetric-split · sticky title column beside scrolling content ────── */
@media (min-width: 940px) {
  .wb-laykit-asymmetric-split .wb-container { max-width: 1240px; }
  /* The head and the block content are DIRECT siblings inside .wb-container
     (blocks-shared.ts wbSection), so the container itself becomes the grid —
     no wrapper markup, and a section with no head simply spans both columns. */
  .wb-laykit-asymmetric-split .wb-section > .wb-container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 3.5rem;
    align-items: start;
  }
  .wb-laykit-asymmetric-split .wb-section > .wb-container > .wb-section-head {
    position: sticky;
    top: 6rem;
    margin: 0;
    max-width: none;
    text-align: left;
  }
  .wb-laykit-asymmetric-split .wb-section > .wb-container > *:not(.wb-section-head) {
    grid-column: 2;
  }
  .wb-laykit-asymmetric-split .wb-section > .wb-container:not(:has(> .wb-section-head)) {
    display: block;
  }
  .wb-laykit-asymmetric-split .wb-features-grid, .wb-laykit-asymmetric-split .wb-team-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.wb-laykit-asymmetric-split .wb-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.wb-laykit-asymmetric-split .wb-section-head { text-align: left; margin: 0 0 2rem; }
.wb-laykit-asymmetric-split h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -0.025em; }
.wb-laykit-asymmetric-split .wb-hero:not(.wb-hero-cover, .wb-section) { text-align: left; margin: 0; max-width: 46rem; }
.wb-laykit-asymmetric-split div.wb-cta { text-align: left; max-width: none; margin: 0; }
.wb-laykit-asymmetric-split .wb-feature, .wb-laykit-asymmetric-split .wb-team-member {
  border-radius: 0;
  border: 0;
  border-left: 2px solid var(--wb-colour-primary);
  padding: 0.25rem 0 0.25rem 1.25rem;
  background: transparent;
}

/* ── full-bleed · no container; edge-to-edge alternating bands ──────────── */
.wb-laykit-full-bleed .wb-container { max-width: none; padding: 0 clamp(1.25rem, 5vw, 4.5rem); }
.wb-laykit-full-bleed .wb-section { padding: clamp(3.5rem, 9vw, 8rem) 0; }
.wb-laykit-full-bleed h1 { font-size: clamp(2.6rem, 9vw, 6rem); line-height: 0.98; letter-spacing: -0.04em; }
.wb-laykit-full-bleed h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -0.025em; }
.wb-laykit-full-bleed .wb-section-head { max-width: 34rem; margin: 0 0 3rem; text-align: left; }
.wb-laykit-full-bleed .wb-hero:not(.wb-hero-cover, .wb-section) { text-align: left; max-width: 60rem; margin: 0; }
.wb-laykit-full-bleed div.wb-cta { text-align: left; max-width: 50rem; margin: 0; }
.wb-laykit-full-bleed .wb-rich { max-width: 46rem; margin: 0; }
/* Every OTHER band inverts to the ink ground — the alternation IS the layout. */
.wb-laykit-full-bleed .wb-main > .wb-section:nth-of-type(even) {
  background: var(--wb-colour-text);
  color: var(--wb-colour-background);
}
.wb-laykit-full-bleed .wb-main > .wb-section:nth-of-type(even) :is(h1, h2, h3, .wb-section-sub, .wb-feature-desc) {
  color: var(--wb-colour-background);
}
.wb-laykit-full-bleed .wb-main > .wb-section:nth-of-type(even) :is(.wb-feature, .wb-team-member) {
  background: transparent;
  color: var(--wb-colour-background);
  border-color: color-mix(in srgb, var(--wb-colour-background) 26%, transparent);
}
.wb-laykit-full-bleed .wb-features-grid, .wb-laykit-full-bleed .wb-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.wb-laykit-full-bleed .wb-feature, .wb-laykit-full-bleed .wb-team-member {
  border: 0;
  border-top: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  padding: 1.5rem 1.5rem 2.5rem 0;
}

/* ── bento · unequal spans on a fixed row height, one accent tile ───────── */
.wb-laykit-bento .wb-container { max-width: 1180px; }
.wb-laykit-bento .wb-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.wb-laykit-bento h1 { font-size: clamp(2.2rem, 5.5vw, 3.7rem); letter-spacing: -0.03em; }
.wb-laykit-bento .wb-section-head { max-width: 40rem; margin: 0 auto 2.25rem; text-align: center; }
.wb-laykit-bento .wb-features-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(9rem, auto);
  gap: 0.75rem;
}
/* A repeating 6-column span pattern: 4+2, 2+4, 3+3 — every third card starts a
   new rhythm, so a grid of any length stays irregular instead of settling. */
.wb-laykit-bento .wb-features-grid > .wb-feature { grid-column: span 3; }
.wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+1) { grid-column: span 4; }
.wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+2) { grid-column: span 2; }
.wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+3) { grid-column: span 2; }
.wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+4) { grid-column: span 4; }
.wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+2) {
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  border-color: transparent;
}
.wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+2) :is(h3, .wb-feature-desc, .wb-feature-icon) {
  color: var(--wb-colour-on-primary);
}
@media (max-width: 760px) {
  .wb-laykit-bento .wb-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-laykit-bento .wb-features-grid > .wb-feature,
  .wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+1),
  .wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+2),
  .wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+3),
  .wb-laykit-bento .wb-features-grid > .wb-feature:nth-child(6n+4) { grid-column: span 2; }
}
.wb-laykit-bento .wb-feature, .wb-laykit-bento .wb-team-member {
  border-radius: var(--wb-radius-md, 1rem);
  border: 1px solid color-mix(in srgb, var(--wb-colour-text) 9%, transparent);
  background: var(--wb-colour-surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ── stacked-panels · each section a raised panel on a tinted page ──────────
   THE PAGE takes the surface tint and each section's CONTAINER takes the page
   ground back, which is the inverse of every other kit here and is what makes
   the sections read as separate cards rather than as bands. Scoped to
   '.wb-main >' so the header and footer keep the tinted ground and frame the
   stack. The cards INSIDE a panel go flat and tinted for the same reason: a
   raised card on a raised panel is two shadows saying the same thing.

   COVER SECTIONS ARE EXEMPT. A cover (hero/cta) puts its media behind the copy
   and switches the copy to white ink — the cover contract
   (cover-legibility-contract.test.ts). Painting the panel ground onto a cover's
   container puts an opaque light card BETWEEN the media and that white ink:
   white copy on the page ground, over a photograph nobody can see. */
.wb-laykit-stacked-panels body { background: var(--wb-colour-surface); }
.wb-laykit-stacked-panels .wb-container { max-width: 1120px; }
.wb-laykit-stacked-panels .wb-section { padding: clamp(0.6rem, 1.6vw, 1.1rem) 0; }
.wb-laykit-stacked-panels .wb-main > .wb-section:not(.wb-hero-cover):not(.wb-cta-cover) > .wb-container {
  background: var(--wb-colour-background);
  border-radius: clamp(0.9rem, 2vw, 1.75rem);
  padding-top: clamp(2.25rem, 5vw, 4rem);
  padding-bottom: clamp(2.25rem, 5vw, 4rem);
  box-shadow: 0 22px 44px -30px rgba(15, 23, 42, 0.42);
}
.wb-laykit-stacked-panels h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.025em; }
.wb-laykit-stacked-panels .wb-section-head { max-width: 42rem; margin: 0 auto 2rem; text-align: center; }
.wb-laykit-stacked-panels .wb-features-grid, .wb-laykit-stacked-panels .wb-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.wb-laykit-stacked-panels .wb-feature, .wb-laykit-stacked-panels .wb-team-member {
  border: 0;
  border-radius: var(--wb-radius-md, 0.9rem);
  background: var(--wb-colour-surface);
  padding: 1.5rem;
}

/* ── modular-grid · hairline bands, heads hanging in a gutter ───────────────
   The rule between sections IS the layout, so the section head shrinks to a
   label in the gutter beside the content rather than sitting above it at
   heading scale. Same container-as-grid trick asymmetric-split uses, and for
   the same reason: the head and the block content are DIRECT siblings inside
   .wb-container (blocks-shared.ts wbSection), so no wrapper markup is needed
   and a section with no head simply spans the full measure. */
.wb-laykit-modular-grid .wb-container { max-width: 1240px; }
.wb-laykit-modular-grid .wb-main > .wb-section {
  border-top: 1px solid color-mix(in srgb, var(--wb-colour-text) 16%, transparent);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.wb-laykit-modular-grid .wb-main > .wb-section:first-child { border-top: 0; }
.wb-laykit-modular-grid h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -0.025em; }
.wb-laykit-modular-grid .wb-section-head { text-align: left; margin: 0 0 1.5rem; max-width: none; }
.wb-laykit-modular-grid .wb-section-head h2 {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
}
@media (min-width: 900px) {
  .wb-laykit-modular-grid .wb-main > .wb-section > .wb-container {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .wb-laykit-modular-grid .wb-main > .wb-section > .wb-container > .wb-section-head {
    grid-column: 1;
    margin: 0;
  }
  .wb-laykit-modular-grid .wb-main > .wb-section > .wb-container > *:not(.wb-section-head) {
    grid-column: 2;
  }
  .wb-laykit-modular-grid .wb-main > .wb-section > .wb-container:not(:has(> .wb-section-head)) {
    display: block;
  }
}
.wb-laykit-modular-grid .wb-hero:not(.wb-hero-cover, .wb-section) { text-align: left; margin: 0; max-width: 46rem; }
.wb-laykit-modular-grid div.wb-cta { text-align: left; max-width: none; margin: 0; }
.wb-laykit-modular-grid .wb-features-grid, .wb-laykit-modular-grid .wb-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
}
.wb-laykit-modular-grid .wb-feature, .wb-laykit-modular-grid .wb-team-member {
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--wb-colour-text) 14%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 0.2rem 1.5rem 1.25rem;
}

/* ── magazine-columns · running copy set in columns ─────────────────────────
   Only '.wb-rich' is columnised — the one block whose content is continuous
   prose. Columnising a card grid would interleave cards down two tracks and
   read as a broken layout, and columnising a form would split its fields from
   their labels. Headings and media span the full measure so a column break
   never lands between a heading and the paragraph it introduces. */
.wb-laykit-magazine-columns .wb-container { max-width: 1200px; }
.wb-laykit-magazine-columns .wb-section { padding: clamp(2.75rem, 6vw, 5.5rem) 0; }
.wb-laykit-magazine-columns h1 {
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.wb-laykit-magazine-columns h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.08; }
.wb-laykit-magazine-columns .wb-section-head { max-width: 46rem; margin: 0 0 2.25rem; text-align: left; }
.wb-laykit-magazine-columns .wb-hero:not(.wb-hero-cover, .wb-section) { text-align: left; max-width: 48rem; margin: 0; }
.wb-laykit-magazine-columns div.wb-cta { text-align: left; max-width: 48rem; margin: 0; }
@media (min-width: 860px) {
  .wb-laykit-magazine-columns .wb-rich {
    max-width: none;
    margin: 0;
    columns: 2;
    column-gap: 3.25rem;
    text-align: justify;
    hyphens: auto;
  }
  .wb-laykit-magazine-columns .wb-rich > :first-child { margin-top: 0; }
  .wb-laykit-magazine-columns .wb-rich :is(h2, h3, figure, img, table, blockquote) {
    column-span: all;
    break-inside: avoid;
  }
}
.wb-laykit-magazine-columns .wb-features-grid, .wb-laykit-magazine-columns .wb-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem 2.5rem;
}
.wb-laykit-magazine-columns .wb-feature, .wb-laykit-magazine-columns .wb-team-member {
  border: 0;
  border-top: 3px solid var(--wb-colour-text);
  border-radius: 0;
  background: transparent;
  padding: 0.9rem 0 0;
}

/* ── poster · display-scale type, short measure, enormous white space ───────
   The only kit here that is defined by what it LEAVES OUT: no card chrome, no
   rules, no tinted panels — the type and the space around it are the whole
   design, so a feature is a centred paragraph under a centred word rather than
   a box. 'text-wrap: balance' matters more here than anywhere else in the
   system, because a ragged last word at 7rem is the entire composition. */
.wb-laykit-poster .wb-container { max-width: 900px; }
.wb-laykit-poster .wb-section { padding: clamp(3.5rem, 11vw, 9rem) 0; }
.wb-laykit-poster h1 {
  font-size: clamp(2.6rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.wb-laykit-poster h2 {
  font-size: clamp(1.9rem, 5.5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.wb-laykit-poster .wb-section-head { max-width: 26ch; margin: 0 auto 2.5rem; text-align: center; }
.wb-laykit-poster .wb-hero:not(.wb-hero-cover, .wb-section) { text-align: center; max-width: none; margin: 0 auto; }
.wb-laykit-poster .wb-rich { max-width: 34rem; margin: 0 auto; font-size: 1.08rem; }
.wb-laykit-poster div.wb-cta { text-align: center; max-width: 38rem; margin: 0 auto; }
.wb-laykit-poster .wb-features-grid, .wb-laykit-poster .wb-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.75rem;
}
.wb-laykit-poster .wb-feature, .wb-laykit-poster .wb-team-member {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: center;
}
.wb-laykit-poster .wb-feature h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.wb-laykit-poster .wb-feature-icon { font-size: 1.6rem; }

/* ══ Axis 1 · REVEAL ══════════════════════════════════════════════════════
   Each variant overrides the fade-up initial state theme-polish.ts sets on
   .wb-animate.wb-js .wb-section, and clears it again on .wb-inview. */
@media (prefers-reduced-motion: no-preference) {
  /* mask-wipe — the section is uncovered top-to-bottom rather than moved.
     THE CLIP IS ON THE CONTAINER, NOT THE SECTION, and that is the point of
     the rule rather than an implementation detail — see the deadlock recorded
     at the head of this file. Clipping the CHILD leaves the observed box
     untouched, so what the observer measures can never again be the thing the
     effect hides. It also reads better on the cover blocks: .wb-hero-cover and
     .wb-cta-cover put their media and scrim OUTSIDE the container
     (blocks-content.ts), so the photograph holds its ground and the copy wipes
     up over it; same on full-bleed, where the inverted band stays put and only
     its content moves. .wb-tab-panel is named alongside .wb-container because a
     tabs section (blocks-tabs.ts) hangs its panels BESIDE the container rather
     than inside it, so a selector trimmed to "> .wb-container" would uncover a
     tab bar over copy that was already sitting there.
     The insets run 2rem PROUD on three edges. inset(0 0 0 0) would clip to the
     container's border box for the rest of the page's life — the container is
     narrower than the section, so the offset-shadow hover kit's 6px offset
     shadow on a bottom-row card would be sliced off. Negative offsets expand
     the reference box and interpolate exactly like positive ones (measured in
     Chromium); if an engine ever rejected the syntax BOTH declarations drop
     together and the content is simply never hidden, the safe way to fail.
     The .wb-inview rule repeats :not(.wb-chatbot), which the pre-fix code
     omitted: that section is never armed, so it always goes in-view and would
     otherwise take a clip-path — and theme-polish.ts records why it must never
     gain a containing-block-forming property. */
  .wb-rvlkit-mask-wipe.wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    opacity: 1;
    transform: none;
  }
  .wb-rvlkit-mask-wipe.wb-animate.wb-js .wb-section:not(.wb-chatbot) > :is(.wb-container, .wb-tab-panel) {
    clip-path: inset(0 -2rem 100% -2rem);
    transition: clip-path 0.72s cubic-bezier(0.16, 0.84, 0.28, 1);
  }
  .wb-rvlkit-mask-wipe.wb-animate.wb-js .wb-section.wb-inview:not(.wb-chatbot) > :is(.wb-container, .wb-tab-panel) {
    clip-path: inset(0 -2rem -2rem -2rem);
  }

  /* clip-side — alternate bands enter from opposite edges. */
  .wb-rvlkit-clip-side.wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    opacity: 0;
    transform: translateX(-3.5rem);
    transition: opacity 0.6s ease, transform 0.68s cubic-bezier(0.16, 0.84, 0.28, 1);
  }
  .wb-rvlkit-clip-side.wb-animate.wb-js .wb-section:nth-of-type(even):not(.wb-chatbot) {
    transform: translateX(3.5rem);
  }
  .wb-rvlkit-clip-side.wb-animate.wb-js .wb-section.wb-inview { opacity: 1; transform: none; }

  /* letter-split — the section head rises separately from its body, so the
     type reads as the thing being revealed. The renderer already wraps hero
     HEADING words in .wb-word spans (blocks-content.ts, kinetic treatment);
     this is the section-level twin and needs no extra markup.

     EVERY RULE CARRIES :not(.wb-chatbot), AND THE WILDCARD ONE IS WHY. The
     chatbot block renders section.wb-section.wb-chatbot > div.wb-container >
     div.wb-chat (blocks-shared.ts wbSection, blocks-interactive.ts
     renderChatbot), and .wb-chat is the position:fixed bottom-right launcher —
     the one element on the page whose whole job is to be present at EVERY
     scroll position. The arming rule below reaches "> .wb-container > *", so it
     matched that launcher, and the chatbot section is the LAST section on the
     page: the "Chat with us" pill was invisible until the visitor scrolled to
     the very bottom, on every letter-split site. Measured in Chromium at
     1280x900 on real renderSiteFiles output, scrollTop 0, .wb-chat computed
     style:
       rvl-letter-split  opacity 0, transform matrix(1,0,0,1,0,22.4), fixed
       rvl-mask-wipe     opacity 1, transform none
       rvl-fade-up       opacity 1, transform none
       legacy (no kit)   opacity 1, transform none
     22.4px is this rule's own translateY(1.4rem). PRE-DATES the mask-wipe
     repair — at commit 85b5a841 these four rules are byte-identical — so it is
     not a regression that change introduced, only one it walked past while
     adding the same guard to mask-wipe one rule away.

     The head rule and the two transition rules could not match .wb-chat and are
     guarded anyway, so the kit has ONE invariant a reader can check in a
     glance — no letter-split rule reaches inside .wb-chatbot — rather than four
     selectors each needing its own argument about what its subject can match.
     reveal-observability.test.ts derives the general rule from the sheet, so a
     seventh kit that arms a wildcard descendant fails on the day it is written;
     theme-polish.ts records the deeper reason that section must never gain a
     containing-block-forming property. */
  .wb-rvlkit-letter-split.wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    opacity: 1;
    transform: none;
  }
  .wb-rvlkit-letter-split.wb-animate.wb-js .wb-section:not(.wb-inview):not(.wb-chatbot) > .wb-container > .wb-section-head {
    opacity: 0;
    transform: translateY(0.7em) skewY(1.4deg);
  }
  .wb-rvlkit-letter-split.wb-animate.wb-js .wb-section:not(.wb-inview):not(.wb-chatbot) > .wb-container > *:not(.wb-section-head) {
    opacity: 0;
    transform: translateY(1.4rem);
  }
  .wb-rvlkit-letter-split.wb-animate.wb-js .wb-section:not(.wb-chatbot) > .wb-container > * {
    transition: opacity 0.55s ease 0.06s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s;
  }
  .wb-rvlkit-letter-split.wb-animate.wb-js .wb-section:not(.wb-chatbot) > .wb-container > .wb-section-head {
    transition-delay: 0s;
  }
}

/* ON PAPER, .wb-inview NEVER LANDS — so every armed state must be released
   UNCONDITIONALLY here, and the rule is per SUBJECT, not per kit.
   page.pdf() is the real print path and it does not fire the
   IntersectionObserver at all: measured 2026-08-02 in Chromium 145 at
   1280x900, the wb-inview bitmap over five sections read 11000 both before and
   after the PDF call, for every reveal kit. So whatever a kit hides at rest
   stays hidden on paper for good.

   theme-polish.ts already forces opacity and transform back, but its rule has
   ONE subject — .wb-section — and it was written before any kit hid something
   BELOW the section. That is now the shape the observability gate actively
   pushes authors towards (reveal-observability.test.ts: hide a DESCENDANT so
   the observed box keeps its geometry), which makes the print hole a systematic
   consequence of the screen fix rather than a one-off. Exactly two kits are in
   that shape and both are reset below:
     * mask-wipe  clips .wb-container / .wb-tab-panel;
     * letter-split fades and offsets .wb-container's children.
   Both measured as blank paper: 29 text-showing operators in the inflated PDF
   content stream for letter-split against 59 for the byte-identical page under
   legacy, fade-up and mask-wipe (59,083 bytes vs 61,270 / 61,202 / 61,270) —
   Chromium elides opacity-0 content entirely, so three of five sections printed
   as blank paper. clip-side is NOT here on purpose: it hides the section
   itself, which theme-polish.ts's rule already covers.

   It lives HERE, scoped to the kits, rather than being widened in
   theme-polish.ts. That sheet ships to every site ever published and the legacy
   invariant is that a theme with no design recipe re-renders byte-identical, so
   the one-line fix in the tempting place would change styles.css for every
   pre-kit site on earth to cure a bug none of them can have. Outside
   prefers-reduced-motion, as theme-polish.ts's print rule is: a printed page is
   not a motion preference. design-kits.test.ts derives this list from the sheet
   rather than pinning it, so a seventh kit that hides a descendant fails there
   on the day it is written. */
@media print {
  .wb-rvlkit-mask-wipe .wb-section > :is(.wb-container, .wb-tab-panel) { clip-path: none !important; }
  .wb-rvlkit-letter-split .wb-section > .wb-container > * { opacity: 1 !important; transform: none !important; }
}

/* ══ Axis 2 · TRIGGER ═════════════════════════════════════════════════════ */
/* on-load — one orchestrated entrance, then the page is left alone. The
   composer sets motion.reveal = "none" for this trigger, so wb-animate is
   absent and the scroll observer never runs; these are plain CSS animations
   that finish whether or not the visitor scrolls. */
@media (prefers-reduced-motion: no-preference) {
  .wb-trgkit-on-load.wb-js .wb-main > .wb-section {
    animation: wb-kit-rise 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .wb-trgkit-on-load.wb-js .wb-main > .wb-section:nth-of-type(2) { animation-delay: 0.09s; }
  .wb-trgkit-on-load.wb-js .wb-main > .wb-section:nth-of-type(3) { animation-delay: 0.18s; }
  .wb-trgkit-on-load.wb-js .wb-main > .wb-section:nth-of-type(4) { animation-delay: 0.27s; }
  .wb-trgkit-on-load.wb-js .wb-main > .wb-section:nth-of-type(n+5) { animation-delay: 0.34s; }
  /* NOT ON THE OVERLAY KIT, and this is a correctness exclusion rather than a
     taste one. 'animation-fill-mode: both' leaves the animation permanently
     filling, so the header keeps an animated 'transform' for the life of the
     page — and an element with a transform is a CONTAINING BLOCK for its
     position:fixed descendants. The overlay kit's full-screen menu panel is a
     child of this header (kit-nav.ts overlayShell), so it anchored to the bar
     instead of to the viewport: measured in Chromium at 1280x860, after
     scrolling to y=1200 the opened panel sat at top=-859 and covered nothing —
     the menu scrolled away with the page. Every other nav kit puts its links in
     normal flow and is unaffected. Same exclusion on on-load-drift
     (kit-css-motion-ext.ts); the two must move together. */
  .wb-trgkit-on-load.wb-js:not(.wb-navkit-overlay) .wb-site-header {
    animation: wb-kit-drop 0.5s ease both;
  }
}
@keyframes wb-kit-rise {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: none; }
}
@keyframes wb-kit-drop {
  from { opacity: 0; transform: translateY(-0.9rem); }
  to { opacity: 1; transform: none; }
}
/* sticky-pin — each section head holds while its content scrolls past. Layout,
   not animation, so it applies under reduced motion too. Suppressed on the
   asymmetric-split layout, which already pins its head in its own column.

   The head must carry an OPAQUE ground of its own. Inheriting one looks right
   and is not: the head's parent (.wb-container) is transparent, so the
   section's content scrolls visibly through the pinned type. The band colour
   therefore has to be restated per zebra stripe, which is why there are two
   rules here rather than one. The full-bleed layout inverts its even bands, but
   the composer never pairs it with this trigger, so two grounds is the whole
   space. */
@media (min-width: 860px) {
  .wb-trgkit-sticky-pin:not(.wb-laykit-asymmetric-split) .wb-main > .wb-section > .wb-container > .wb-section-head {
    position: sticky;
    top: 4.5rem;
    z-index: 2;
    background: var(--wb-colour-background);
    padding-bottom: 0.75rem;
  }
  .wb-trgkit-sticky-pin:not(.wb-laykit-asymmetric-split) .wb-main > .wb-section:nth-of-type(even) > .wb-container > .wb-section-head {
    background: var(--wb-colour-surface);
  }
}

/* ══ Axis 3 · HEADER ══════════════════════════════════════════════════════ */
.wb-hdrkit-static .wb-site-header { position: static; }
.wb-hdrkit-sticky .wb-site-header { position: sticky; top: 0; z-index: 90; background: var(--wb-colour-background); }

/* shrink — sticky, and the bar tightens once you move. */
.wb-hdrkit-shrink .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--wb-colour-background);
}
.wb-hdrkit-shrink .wb-header-inner { transition: padding 0.25s ease; }
.wb-hdrkit-shrink .wb-site-header.wb-scrolled .wb-header-inner {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.wb-hdrkit-shrink .wb-brand { transition: font-size 0.25s ease; }
.wb-hdrkit-shrink .wb-site-header.wb-scrolled .wb-brand { font-size: 1.05rem; }

/* float — sits on the opening section, a solid bar fades in once you move:
   kit-css-float.ts. */

/* invert — sticky, and flips to the ink ground once you move. */
.wb-hdrkit-invert .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--wb-colour-background);
  transition: background 0.28s ease, color 0.28s ease;
}
.wb-hdrkit-invert .wb-site-header.wb-scrolled {
  background: var(--wb-colour-text);
  border-bottom-color: transparent;
}
.wb-hdrkit-invert .wb-site-header.wb-scrolled :is(.wb-brand, .wb-nav a, .wb-portal-link, .wb-nav-word) {
  color: var(--wb-colour-background);
}
.wb-hdrkit-invert .wb-site-header.wb-scrolled .wb-nav-toggle-bar { background: var(--wb-colour-background); }
/* THE MARK KEEPS ITS OWN GROUND, because this is the one kit that takes the
   header's ground away from it. Everything else in the bar is TEXT and the rule
   above recolours it; a logo cannot be recoloured from CSS at all. An <img> has
   no inheritable ink, and for the inline lane inline-svg.ts carries only the
   lockup's root "color" while logo-svg.ts writes the wordmark as
   <text fill="{literal hex}"> — so that root ink would repaint part of a mark and none
   of a wordmark, which is the same half-recoloured asset brand-variant.ts
   rejects for the same reason.

   Measured against the real palette engine (generatePalette → deriveSurfaces →
   readableInk), seed org-51: ground #140f10, text #f4f0f1, dark-lockup ink
   #fae5e9. At rest the mark reads 15.78:1; on the scrolled bar it reads 1.06:1.
   Nor is that a consequence of the surface-aware pick — pre-D2 the LIGHT lockup
   (#460c17) was simply broken in the other half of the interaction, and on a
   LIGHT-ground invert site (9.6% of composed sites, against 4.5% dark) the
   site's own lockup has always gone invisible the moment the visitor scrolls.
   The bar is the fault, so the bar gives the ground back.

   A spread-only box-shadow rather than padding: it paints the same chip with no
   border box of its own, so the header does not change height on scroll — which
   would be a layout jump on the very interaction the kit exists to decorate.
   Transitioned with the bar so the chip fades in rather than snapping. */
.wb-hdrkit-invert .wb-brand .wb-logo { transition: background 0.28s ease, box-shadow 0.28s ease; }
.wb-hdrkit-invert .wb-site-header.wb-scrolled .wb-brand .wb-logo {
  background: var(--wb-colour-background);
  box-shadow: 0 0 0 0.4rem var(--wb-colour-background);
  border-radius: var(--wb-radius-sm, 0.25rem);
}

/* ══ Axis 4 · HOVER ═══════════════════════════════════════════════════════
   One idiom shared by links, cards and images so the site feels authored
   rather than assembled. Each kit first neutralises the v2 motion sheet's
   underline sweep (.wb-motion .wb-nav a::before) so two idioms never stack. */
.wb-hovkit-none .wb-nav > a::before, .wb-hovkit-none .wb-nav-item > a::before { display: none; }
.wb-hovkit-none .wb-nav a:hover { text-decoration: underline; }

/* block-fill — the link's own ground fills in behind it. */
.wb-hovkit-block-fill .wb-nav > a::before, .wb-hovkit-block-fill .wb-nav-item > a::before { display: none; }
.wb-hovkit-block-fill .wb-nav a {
  padding: 0.28rem 0.6rem;
  border-radius: var(--wb-radius-sm, 0.3rem);
  transition: background 0.18s ease, color 0.18s ease;
}
.wb-hovkit-block-fill .wb-nav a:hover, .wb-hovkit-block-fill .wb-nav a:focus-visible {
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  text-decoration: none;
}
.wb-hovkit-block-fill :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  transform: none;
}
/* The fill recolours the CARD, but its children carry their own ink and
   inherit nothing: .wb-feature-desc/.wb-team-bio/.wb-blog-card-meta are muted,
   .wb-feature-icon/.wb-team-role/.wb-blog-more are primary — 1-and-a-bit:1
   against the primary fill they now sit on. The fill takes the children with
   it, or the hover state ships a filled card of near-invisible copy. */
.wb-hovkit-block-fill :is(.wb-feature, .wb-blog-card, .wb-team-member):hover
  :is(h3, a, .wb-feature-desc, .wb-feature-icon, .wb-feature-link, .wb-team-bio,
    .wb-team-role, .wb-blog-card-meta, .wb-blog-more) {
  color: var(--wb-colour-on-primary);
}

/* offset-shadow — a hard, unblurred shadow snaps out on hover. */
.wb-hovkit-offset-shadow .wb-nav > a::before, .wb-hovkit-offset-shadow .wb-nav-item > a::before { display: none; }
.wb-hovkit-offset-shadow .wb-nav a { transition: text-shadow 0.15s ease; }
.wb-hovkit-offset-shadow .wb-nav a:hover { text-shadow: 2px 2px 0 var(--wb-colour-accent); text-decoration: none; }
.wb-hovkit-offset-shadow :is(.wb-feature, .wb-blog-card, .wb-team-member, .wb-button) {
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.wb-hovkit-offset-shadow :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--wb-colour-primary);
}
.wb-hovkit-offset-shadow .wb-button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--wb-colour-text); filter: none; }

/* letterspace — the type opens up instead of gaining decoration. */
.wb-hovkit-letterspace .wb-nav > a::before, .wb-hovkit-letterspace .wb-nav-item > a::before { display: none; }
.wb-hovkit-letterspace .wb-nav a { transition: letter-spacing 0.22s ease, opacity 0.22s ease; }
.wb-hovkit-letterspace .wb-nav a:hover, .wb-hovkit-letterspace .wb-nav a:focus-visible {
  letter-spacing: 0.14em;
  opacity: 0.72;
  text-decoration: none;
}
.wb-hovkit-letterspace :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
  transform: none;
  border-color: var(--wb-colour-text);
}

/* image-zoom — media leads the interaction; the type stays still. */
.wb-hovkit-image-zoom .wb-nav > a::before, .wb-hovkit-image-zoom .wb-nav-item > a::before { display: none; }
.wb-hovkit-image-zoom .wb-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.wb-hovkit-image-zoom :is(.wb-feature, .wb-blog-card, .wb-gallery-item) { overflow: hidden; }
.wb-hovkit-image-zoom :is(.wb-feature, .wb-blog-card, .wb-gallery-item) img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wb-hovkit-image-zoom :is(.wb-feature, .wb-blog-card, .wb-gallery-item):hover img { transform: scale(1.06); }
.wb-hovkit-image-zoom :is(.wb-feature, .wb-blog-card, .wb-team-member):hover { transform: none; }

/* Reduced motion: every transition above is a nicety, so drop them all rather
   than reasoning about each. Colour/decoration hover states remain. */
@media (prefers-reduced-motion: reduce) {
  .wb-design :is(.wb-nav a, .wb-feature, .wb-blog-card, .wb-team-member, .wb-button, img) {
    transition: none !important;
    animation: none !important;
  }
}

/* ══ Axis 1 · REVEAL (three more) ═════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* blur-focus — the section resolves out of a defocus rather than moving.
     THE SECTION ITSELF IS THE SUBJECT HERE, which every other section-subject
     reveal in this system had to give up, and it is legal for one specific
     reason: opacity and filter are paint, and IntersectionObserver measures
     geometry. A blurred box reports exactly the same rect as a sharp one. The
     transform is pinned to none rather than left alone, because
     theme-polish.ts's base rule arms a 22px translate on every .wb-animate
     section and inheriting it would make this kit "fade-up, but blurry"
     instead of its own idea. */
  .wb-rvlkit-blur-focus.wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    opacity: 0;
    transform: none;
    filter: blur(14px);
    transition: opacity 0.6s ease, filter 0.72s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .wb-rvlkit-blur-focus.wb-animate.wb-js .wb-section.wb-inview:not(.wb-chatbot) {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* stagger-rise — the section arrives whole, then its contents come up in
     sequence. Distinct from the pre-kit .wb-stagger, which ladders CARDS
     inside a revealed section; this ladders the section's TOP-LEVEL children,
     so a section with no cards at all still has an entrance. */
  .wb-rvlkit-stagger-rise.wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    opacity: 1;
    transform: none;
  }
  .wb-rvlkit-stagger-rise.wb-animate.wb-js .wb-section:not(.wb-inview):not(.wb-chatbot) > .wb-container > * {
    opacity: 0;
    transform: translateY(2rem);
  }
  .wb-rvlkit-stagger-rise.wb-animate.wb-js .wb-section:not(.wb-chatbot) > .wb-container > * {
    transition: opacity 0.52s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .wb-rvlkit-stagger-rise.wb-animate.wb-js .wb-section:not(.wb-chatbot) > .wb-container > *:nth-child(2) {
    transition-delay: 0.08s;
  }
  .wb-rvlkit-stagger-rise.wb-animate.wb-js .wb-section:not(.wb-chatbot) > .wb-container > *:nth-child(3) {
    transition-delay: 0.16s;
  }
  .wb-rvlkit-stagger-rise.wb-animate.wb-js .wb-section:not(.wb-chatbot) > .wb-container > *:nth-child(n+4) {
    transition-delay: 0.22s;
  }

  /* split-rows — the head enters from the left and everything else from the
     right, so the section assembles rather than arrives. The translate is
     2.2rem: far enough to read as movement, near enough that the mobile sheet's
     overflow containment is a belt-and-braces measure rather than a load-bearing
     one. */
  .wb-rvlkit-split-rows.wb-animate.wb-js .wb-section:not(.wb-chatbot) {
    opacity: 1;
    transform: none;
  }
  .wb-rvlkit-split-rows.wb-animate.wb-js .wb-section:not(.wb-inview):not(.wb-chatbot) > .wb-container > .wb-section-head {
    opacity: 0;
    transform: translateX(-2.2rem);
  }
  .wb-rvlkit-split-rows.wb-animate.wb-js .wb-section:not(.wb-inview):not(.wb-chatbot) > .wb-container > *:not(.wb-section-head) {
    opacity: 0;
    transform: translateX(2.2rem);
  }
  .wb-rvlkit-split-rows.wb-animate.wb-js .wb-section:not(.wb-chatbot) > .wb-container > * {
    transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.16, 0.84, 0.28, 1);
  }
}

/* ON PAPER, .wb-inview NEVER LANDS. theme-polish.ts's print rule releases
   opacity and transform on '.wb-section' itself, which covers blur-focus's
   opacity but NOT its filter (that property is newer than the rule) and covers
   neither of the two descendant-armed kits. Same reasoning, and the same
   subject-matching discipline, as the resets in kit-css-motion.ts. */
@media print {
  .wb-rvlkit-blur-focus .wb-section { filter: none !important; }
  .wb-rvlkit-stagger-rise .wb-section > .wb-container > * { opacity: 1 !important; transform: none !important; }
  .wb-rvlkit-split-rows .wb-section > .wb-container > * { opacity: 1 !important; transform: none !important; }
}

/* ══ Axis 2 · TRIGGER (one more) ══════════════════════════════════════════
   on-load-drift — the second load trigger. Like on-load it runs one
   orchestrated entrance and then leaves the page alone (the composer forces
   reveal = "none" alongside both, so wb-animate is absent and the observer
   never runs), and it differs only in the entrance: alternating sides rather
   than a rise. That is the whole perceptual gap between two sites that both
   animate once — which is the point of having two.

   'wb-kit-drop' is declared in kit-css-motion.ts. The two sheets are emitted
   together and only together (theme-design.ts), so the reference is safe and
   duplicating the keyframe would risk the two copies drifting apart. */
@media (prefers-reduced-motion: no-preference) {
  .wb-trgkit-on-load-drift.wb-js .wb-main > .wb-section {
    animation: wb-kit-drift-in-l 0.68s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .wb-trgkit-on-load-drift.wb-js .wb-main > .wb-section:nth-of-type(even) {
    animation-name: wb-kit-drift-in-r;
  }
  .wb-trgkit-on-load-drift.wb-js .wb-main > .wb-section:nth-of-type(2) { animation-delay: 0.1s; }
  .wb-trgkit-on-load-drift.wb-js .wb-main > .wb-section:nth-of-type(3) { animation-delay: 0.2s; }
  .wb-trgkit-on-load-drift.wb-js .wb-main > .wb-section:nth-of-type(n+4) { animation-delay: 0.28s; }
  /* The overlay kit is excluded for the reason kit-css-motion.ts records at
     length: a filling transform animation makes this header a containing block,
     and the overlay panel is a fixed child of it. */
  .wb-trgkit-on-load-drift.wb-js:not(.wb-navkit-overlay) .wb-site-header {
    animation: wb-kit-drop 0.5s ease both;
  }
}
/* THE CLIP GOES ON .wb-main, NOT ON THE SECTION, and the difference is the
   whole point: the SECTION is the animated box, so clipping it clips its own
   contents and does nothing about the 2.5rem it starts off-centre. Its PARENT
   is what has to contain it. Measured in Chromium at 375x667 — with the clip on
   the section, document.scrollWidth ran 40px (exactly the keyframe's 2.5rem)
   past clientWidth on all six on-load-drift sites in the audit corpus; on
   .wb-main it is zero.

   'clip' rather than 'hidden' because hidden on an ancestor makes it the scroll
   container for position:sticky descendants — which would break the sticky-pin
   trigger and four header kits. clip creates no scroll container at all, and
   the header is a sibling of .wb-main in any case. */
.wb-trgkit-on-load-drift .wb-main { overflow-x: clip; }
@keyframes wb-kit-drift-in-l {
  from { opacity: 0; transform: translateX(-2.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes wb-kit-drift-in-r {
  from { opacity: 0; transform: translateX(2.5rem); }
  to { opacity: 1; transform: none; }
}

/* ══ Axis 3 · HEADER (three more) ═════════════════════════════════════════
   All three ride '.wb-scrolled', which runtime-motion.ts wireStickyHeader
   already toggles — no kit ships new client JS. */

/* hairline — nothing at rest; one hairline once you move. The most restrained
   scroll response in the set, and the reason 'minimal-ghost' has somewhere to
   be repaired TO when the composer draws it alongside 'invert'. */
.wb-hdrkit-hairline .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--wb-colour-background);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.wb-hdrkit-hairline .wb-site-header.wb-scrolled {
  border-bottom-color: color-mix(in srgb, var(--wb-colour-text) 18%, transparent);
}

/* lift — the bar gains depth and a blurred backdrop rather than a rule. */
.wb-hdrkit-lift .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--wb-colour-background);
  transition: box-shadow 0.28s ease, background 0.28s ease;
}
.wb-hdrkit-lift .wb-site-header.wb-scrolled {
  background: color-mix(in srgb, var(--wb-colour-background) 88%, transparent);
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.3);
}
/* The blur is split into its own rule so it can skip the overlay kit. A
   backdrop-filter forms a containing block for position:fixed descendants
   exactly as a transform does, and the overlay kit's menu panel is a fixed
   CHILD of this header — so on an overlay + lift site the panel would stop
   covering the viewport the moment the visitor scrolled. The shadow and the
   translucency above are the kit's substance and both are safe; only the blur
   has to stand down. */
.wb-hdrkit-lift:not(.wb-navkit-overlay) .wb-site-header.wb-scrolled {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  .wb-hdrkit-lift .wb-site-header.wb-scrolled { background: var(--wb-colour-background); }
}

/* tint — the bar takes the SURFACE token on scroll and underlines itself in
   the brand colour. Distinct from 'invert', which takes the ink ground and has
   to give the logo its own ground back; surface is a near neighbour of the page
   ground, so nothing in the bar changes legibility and the mark is untouched. */
.wb-hdrkit-tint .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--wb-colour-background);
  border-bottom: 2px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease;
}
.wb-hdrkit-tint .wb-site-header.wb-scrolled {
  background: var(--wb-colour-surface);
  border-bottom-color: var(--wb-colour-primary);
}

/* ══ Axis 4 · HOVER (four more) ═══════════════════════════════════════════
   Each kit first neutralises the v2 motion sheet's underline sweep
   (.wb-motion .wb-nav a::before) so two idioms never stack. */

/* bracket — a rule closes in on either side of the link. Drawn with inset
   box-shadows rather than pseudo-element content, so nothing is announced to a
   screen reader and nothing changes the element's size on hover. */
.wb-hovkit-bracket .wb-nav > a::before, .wb-hovkit-bracket .wb-nav-item > a::before { display: none; }
.wb-hovkit-bracket .wb-nav a {
  padding: 0.1rem 0.55rem;
  box-shadow: inset 2px 0 0 transparent, inset -2px 0 0 transparent;
  transition: box-shadow 0.2s ease;
}
.wb-hovkit-bracket .wb-nav a:hover, .wb-hovkit-bracket .wb-nav a:focus-visible {
  box-shadow: inset 2px 0 0 var(--wb-colour-primary), inset -2px 0 0 var(--wb-colour-primary);
  text-decoration: none;
}
.wb-hovkit-bracket :is(.wb-feature, .wb-blog-card, .wb-team-member) {
  transition: box-shadow 0.22s ease;
}
.wb-hovkit-bracket :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
  box-shadow: inset 3px 0 0 var(--wb-colour-primary), inset -3px 0 0 var(--wb-colour-primary);
  transform: none;
}

/* swap-ink — the type changes colour and nothing moves. ONLY THE HEADING takes
   the brand colour on a card: the palette engine guarantees the primary at 3:1
   on the ground, which is the WCAG line for large/bold text and NOT the 4.5:1 a
   card's body copy needs. Recolouring the whole card would buy an idiom with a
   contrast failure. */
.wb-hovkit-swap-ink .wb-nav > a::before, .wb-hovkit-swap-ink .wb-nav-item > a::before { display: none; }
.wb-hovkit-swap-ink .wb-nav a { transition: color 0.16s ease; }
.wb-hovkit-swap-ink .wb-nav a:hover, .wb-hovkit-swap-ink .wb-nav a:focus-visible {
  color: var(--wb-colour-primary);
  text-decoration: none;
}
.wb-hovkit-swap-ink :is(.wb-feature, .wb-blog-card, .wb-team-member) {
  transition: border-color 0.2s ease;
}
.wb-hovkit-swap-ink :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
  border-color: var(--wb-colour-primary);
  transform: none;
}
.wb-hovkit-swap-ink :is(.wb-feature, .wb-blog-card, .wb-team-member):hover h3 {
  color: var(--wb-colour-primary);
}

/* rule-grow — a thick brand rule grows out from the left under the link. A
   background-image gradient rather than a pseudo-element, so it needs no
   position:relative and cannot form a containing block. */
.wb-hovkit-rule-grow .wb-nav > a::before, .wb-hovkit-rule-grow .wb-nav-item > a::before { display: none; }
.wb-hovkit-rule-grow .wb-nav a {
  padding-bottom: 0.22rem;
  background-image: linear-gradient(var(--wb-colour-primary), var(--wb-colour-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 3px;
  transition: background-size 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wb-hovkit-rule-grow .wb-nav a:hover, .wb-hovkit-rule-grow .wb-nav a:focus-visible {
  background-size: 100% 3px;
  text-decoration: none;
}
.wb-hovkit-rule-grow :is(.wb-feature, .wb-blog-card, .wb-team-member) {
  transition: box-shadow 0.24s ease;
}
.wb-hovkit-rule-grow :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
  box-shadow: inset 0 -4px 0 var(--wb-colour-primary);
  transform: none;
}

/* tilt — the card leans toward the reader. The only kit in the set that moves
   a card in three dimensions, so it is also the only one whose transform is
   worth naming as a hazard: a transform forms a containing block for fixed
   descendants, and the one fixed element on the page (.wb-chat) is a direct
   child of a section container rather than of any card. */
.wb-hovkit-tilt .wb-nav > a::before, .wb-hovkit-tilt .wb-nav-item > a::before { display: none; }
.wb-hovkit-tilt .wb-nav a { display: inline-block; transition: transform 0.2s ease; }
.wb-hovkit-tilt .wb-nav a:hover, .wb-hovkit-tilt .wb-nav a:focus-visible {
  transform: translateY(-2px);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.wb-hovkit-tilt :is(.wb-feature, .wb-blog-card, .wb-team-member) {
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s ease;
}
.wb-hovkit-tilt :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
  transform: perspective(700px) rotateX(4deg) translateY(-4px);
  box-shadow: 0 20px 34px -22px rgba(15, 23, 42, 0.5);
}
.wb-hovkit-tilt .wb-button:hover { transform: translateY(-2px); }

/* ══ The hero HEADLINE (four more) ════════════════════════════════════════
   theme.headlineTreatment pre-dates the kits and motion.ts already resolves it
   to a 'wb-headline-*' class on <html>. The four ORIGINAL treatments are
   styled in theme-motion.ts, which ships to every site ever published; these
   four are gated on '.wb-design' and live here instead, so adding them changes
   styles.css for exactly the sites that opted into a design recipe and for no
   others. That is the legacy invariant, applied to an axis that is older than
   the thing enforcing it.

   Cover heroes are excluded throughout and reset below, for the reason
   theme-motion.ts already establishes for gradient/kinetic/accent-bar: the
   heading sits on a scrim over a photograph, where a stroke, a shadow or a
   background band is either invisible or illegible.

   ── THE EXCLUSION MUST SAY .wb-section, AND FOR A WHILE IT DID NOT ──────────
   .wb-hero appears TWICE in a cover hero, nested: renderHero() wraps the copy
   in an inner div carrying .wb-hero, and only the outer section carries
   .wb-hero-cover. So ".wb-hero:not(.wb-hero-cover) .wb-hero-heading" matched
   the inner div on EVERY cover hero and excluded nothing — the guard read
   correctly and did the opposite of what it said. Live on serenity-landscapes:
   outline painted the H1 "color: transparent" with a 2px #241f14 stroke over a
   dark-scrimmed video, so the site's main headline was hollow near-black
   letters on near-black.

   .wb-section.wb-hero is the outer element and nothing else, so the negation
   now has a cover to reject. The reset below stays as the backstop, and note
   what makes a backstop real: it has to WIN. At four classes against the
   treatment's five it lost the cascade and never fired once. Any rule added
   here that the reset must be able to undo has to stay at or below its
   specificity — cover-legibility-contract.test.ts resolves that rather than
   trusting this paragraph. */

/* highlight — a marker block behind the words. The tint is a 28% MIX of the
   accent rather than the accent itself: the heading ink is guaranteed against
   the page GROUND, not against a saturated accent, so a solid band would be a
   contrast failure on some palettes and fine on others. A soft tint reads as a
   highlighter and leaves the ink where the palette engine proved it legible.

   IT COVERS THE WHOLE BLOCK, and the first draft did not — it drew a 0.42em
   band at 88% down the box, which is a highlighter on a ONE-LINE heading and a
   strike-through rule across the third line of a three-line one. Measured at
   375px on the audit corpus, where "Drainage and plumbing across the Kaipara"
   wraps to three lines on every kit: the band landed through the x-height of
   the last line and read as a redaction. A background paints per BOX, not per
   line box, so there is no position that means "under each line" here — the
   hero heading is a block and the renderer only wraps its words in spans under
   the kinetic treatment. Covering the box is the shape that is correct at any
   line count, and inline-block keeps it hugging the type instead of running the
   full width of the container. */
.wb-design.wb-headline-highlight .wb-section.wb-hero:not(.wb-hero-cover) .wb-hero-heading {
  display: inline-block;
  background-image: linear-gradient(
    color-mix(in srgb, var(--wb-colour-accent) 28%, transparent),
    color-mix(in srgb, var(--wb-colour-accent) 28%, transparent)
  );
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  border-radius: 0.08em;
  padding: 0.14em 0.32em;
}

/* outline — hollow letters. Behind a POSITIVE @supports guard, because the
   declaration that makes it work and the declaration that makes the text
   invisible are two different properties: an engine without -webkit-text-stroke
   would honour 'color: transparent' on its own and paint nothing at all. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .wb-design.wb-headline-outline .wb-section.wb-hero:not(.wb-hero-cover) .wb-hero-heading {
    color: transparent;
    -webkit-text-stroke: 2px var(--wb-colour-text);
  }
}
/* Forced-colours mode replaces the palette wholesale and cannot draw a stroke,
   so the treatment has to stand down rather than leave a transparent heading. */
@media (forced-colors: active) {
  .wb-design.wb-headline-outline .wb-hero-heading {
    color: CanvasText;
    -webkit-text-stroke: 0;
  }
}

/* shadow-stack — a hard, unblurred duplicate offset behind the type. Sized in
   em so it tracks the heading's own clamp instead of shearing off at one width.

   TWO LAYERS, AND THE NEAR ONE IS THE PAGE GROUND. A single accent-coloured
   duplicate is the obvious implementation and it fails on a whole class of
   palette: the engine guarantees the accent against the BACKGROUND (3:1) and
   says nothing about the accent against the TEXT, so a seed that draws a navy
   accent under near-black ink produces two overlapping dark shapes with no
   seam — measured on the bordered-frame audit site, where it read as a printing
   misregistration rather than as a shadow. Painting a slightly nearer offset in
   the ground colour first cuts a hairline gap between the ink and the shadow,
   and the ground-against-ink ratio is the one contrast the engine DOES
   guarantee (8:1, palette-engine.ts copyFor). Earlier layers paint on top. */
.wb-design.wb-headline-shadow-stack .wb-section.wb-hero:not(.wb-hero-cover) .wb-hero-heading {
  text-shadow:
    0.05em 0.05em 0 var(--wb-colour-background),
    0.09em 0.09em 0 var(--wb-colour-accent);
}

/* underline — a thick brand rule under the whole heading. The gradient sits on
   the BLOCK, not on each line box, so a heading that wraps gets one rule under
   it rather than one per line — which is the difference between a masthead
   underline and a page of struck-through text. */
.wb-design.wb-headline-underline .wb-section.wb-hero:not(.wb-hero-cover) .wb-hero-heading {
  background-image: linear-gradient(var(--wb-colour-primary), var(--wb-colour-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.1em;
  padding-bottom: 0.16em;
}

.wb-design.wb-headline-highlight .wb-hero-cover .wb-hero-heading,
.wb-design.wb-headline-outline .wb-hero-cover .wb-hero-heading,
.wb-design.wb-headline-shadow-stack .wb-hero-cover .wb-hero-heading,
.wb-design.wb-headline-underline .wb-hero-cover .wb-hero-heading {
  background-image: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
  /* #ffffff, not "inherit". The cover contract is white ink — theme-ext.ts sets
     it on the heading, the sub, the cta heading and the cta body — and inherit
     resolves to the page's --wb-colour-text, which is chosen to read on
     --wb-colour-background and is therefore the one colour guaranteed to be
     wrong here. Restating white makes this reset correct standing alone,
     whatever wins the cascade above it. */
  color: #ffffff;
  padding-bottom: 0;
}

/* Reduced motion: every transition added above is a nicety. Colour and
   decoration hover states remain — they carry meaning, movement does not. */
@media (prefers-reduced-motion: reduce) {
  .wb-design :is(.wb-nav a, .wb-feature, .wb-blog-card, .wb-team-member, .wb-button) {
    transition: none !important;
    animation: none !important;
  }
  .wb-hovkit-tilt :is(.wb-feature, .wb-blog-card, .wb-team-member):hover { transform: none; }
}

/* float — on the opening section; a solid bar fades in once on scroll. */
.wb-design.wb-hdrkit-float { --wb-float-solid: var(--wb-colour-background); }
.wb-design.wb-hdrkit-float .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--wb-colour-background);
  border-bottom-color: transparent;
}
.wb-design.wb-hdrkit-float .wb-site-header:is(.wb-header-dark, .wb-header-light) {
  --wb-float-solid: var(--wb-colour-background);
}
.wb-design.wb-hdrkit-float .wb-site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--wb-float-solid);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.1);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wb-design.wb-hdrkit-float .wb-site-header:is(.wb-scrolled, .wb-nav-open)::before { opacity: 1; }
.wb-design.wb-hdrkit-float .wb-site-header.wb-float-over-muted { background: var(--wb-colour-surface); }
.wb-design.wb-hdrkit-float .wb-site-header.wb-float-over-cover {
  background: transparent;
  margin-bottom: calc(-1 * var(--wb-header-h, 4.75rem));
}
.wb-design.wb-hdrkit-float .wb-header-inner :is(.wb-portal-link, .wb-nav-word, .wb-header-cta, .wb-logo-text) {
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
/* Two marks in one cell: the opening ground's at rest, the site's on the bar. */
.wb-design.wb-hdrkit-float .wb-brand-swap { display: inline-grid; }
.wb-design.wb-hdrkit-float .wb-brand-swap > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 0.4s ease;
}
.wb-design.wb-hdrkit-float .wb-brand-swap > .wb-brand-solid { opacity: 0; }
.wb-design.wb-hdrkit-float .wb-site-header:is(.wb-scrolled, .wb-nav-open) .wb-brand-swap > .wb-brand-rest { opacity: 0; }
.wb-design.wb-hdrkit-float .wb-site-header:is(.wb-scrolled, .wb-nav-open) .wb-brand-swap > .wb-brand-solid { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wb-design.wb-hdrkit-float .wb-site-header::before,
  .wb-design.wb-hdrkit-float .wb-brand-swap > span,
  .wb-design.wb-hdrkit-float .wb-header-inner :is(.wb-portal-link, .wb-nav-word, .wb-header-cta, .wb-logo-text) {
    transition: none;
  }
}
/* Paper has no scroll position: print the solid bar in flow with the site mark. */
@media print {
  .wb-design.wb-hdrkit-float .wb-site-header { position: static; margin-bottom: 0; }
  .wb-design.wb-hdrkit-float .wb-site-header::before { opacity: 1; box-shadow: none; }
  .wb-design.wb-hdrkit-float .wb-brand-swap > .wb-brand-rest { opacity: 0; }
  .wb-design.wb-hdrkit-float .wb-brand-swap > .wb-brand-solid { opacity: 1; }
}

/* ── Cover backdrops ──────────────────────────────────────────────────────
   The subject list is spelled out rather than wildcarded: .wb-chat is a
   position: fixed launcher sitting inside the chatbot section's container, and
   any descendant wildcard under .wb-design would reach it and remove it for the
   whole visit. Naming the two media layers cannot. */

/* static — the default, and an ACTIVE choice rather than an absence. It has to
   undo the motion tier: an immersive site arrives with theme-motion.ts's
   parallax oversize (top/bottom -12%) already applied, and document.ts can drop
   the html class but not a rule that has already matched on an earlier
   published theme. Restating the inset is what makes "still" mean still. */
.wb-design.wb-bgkit-static :is(.wb-hero-cover-media, .wb-cta-cover-media) {
  top: 0;
  bottom: 0;
  will-change: auto;
}

/* parallax — the oversize comes from theme-motion.ts's .wb-parallax rule, which
   design-resolve.ts re-emits for this kit; runtime-motion.ts drives the
   transform. Nothing to add but the promise that it is intentional. */

/* zoom — ambient Ken Burns. Time-based, so it needs neither JS nor a scroll
   position, and it runs on IMAGE covers only: a video already moves, and
   scaling one on top of its own motion reads as a rendering fault. */
@media (prefers-reduced-motion: no-preference) {
  .wb-design.wb-bgkit-zoom :is(.wb-hero-cover-media, .wb-cta-cover-media) img {
    animation: wb-cover-zoom 24s ease-in-out infinite alternate;
    transform-origin: 50% 42%;
  }
}
@keyframes wb-cover-zoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.13); }
}

/* drift — Ken Burns with the scale taken out: a slow horizontal pan across an
   already-oversized frame. The 6% inset either side is what the translate eats,
   so no edge is ever exposed at the extremes of the keyframe. */
@media (prefers-reduced-motion: no-preference) {
  .wb-design.wb-bgkit-drift :is(.wb-hero-cover-media, .wb-cta-cover-media) {
    left: -6%;
    right: -6%;
  }
  .wb-design.wb-bgkit-drift :is(.wb-hero-cover-media, .wb-cta-cover-media) img {
    animation: wb-cover-drift 30s ease-in-out infinite alternate;
  }
}
@keyframes wb-cover-drift {
  from { transform: translateX(-3.5%) scale(1.06); }
  to { transform: translateX(3.5%) scale(1.06); }
}

/* scroll-zoom — the scale is keyed to the section's progress through the
   viewport rather than to a clock, so it stops when the visitor stops. Pure CSS
   via a view() timeline, and behind @supports because a browser without
   scroll-driven animations must land on a still cover rather than on a cover
   frozen at the animation's first keyframe. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wb-design.wb-bgkit-scroll-zoom :is(.wb-hero-cover-media, .wb-cta-cover-media) img,
    .wb-design.wb-bgkit-scroll-zoom :is(.wb-hero-cover-media, .wb-cta-cover-media) video {
      animation: wb-cover-scroll-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      transform-origin: 50% 50%;
    }
  }
}
@keyframes wb-cover-scroll-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}

/* fixed — the media locks to the viewport and the section clips it, so the copy
   scrolls off and uncovers the whole photograph. See the header note for why
   clip-path is the clipping mechanism and why this is a desktop treatment.

   inset(0) clips to the section's own border box, so it removes NOTHING that
   was visible before; an IntersectionObserver intersecting the section is
   unaffected, and the reveal machinery keeps working. */
@media (min-width: 901px) and (pointer: fine) {
  .wb-design.wb-bgkit-fixed :is(.wb-hero-cover, .wb-cta-cover) {
    clip-path: inset(0);
  }
  .wb-design.wb-bgkit-fixed :is(.wb-hero-cover-media, .wb-cta-cover-media) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 100vh;
  }
}
/* Paper has no viewport to lock to: page.pdf() would print one frame of the
   fixed layer over the first page and nothing on the rest. */
@media print {
  .wb-design.wb-bgkit-fixed :is(.wb-hero-cover, .wb-cta-cover) { clip-path: none; }
  .wb-design.wb-bgkit-fixed :is(.wb-hero-cover-media, .wb-cta-cover-media) {
    position: absolute;
    inset: 0;
    height: auto;
  }
  .wb-design :is(.wb-hero-cover-media, .wb-cta-cover-media) :is(img, video) {
    animation: none !important;
    transform: none !important;
  }
}

/* ── Cover overlays ───────────────────────────────────────────────────────
   The floor is the pre-kit wash, named once so every kit below can be read
   against it and the contract test can assert no kit goes under it. */
.wb-design :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  --wb-scrim-floor: rgba(10, 10, 12, 0.55);
}

/* veil — the pre-kit treatment, restated so "the default" is a value in the
   table rather than the absence of a rule. */
.wb-design.wb-ovlkit-veil :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  background: var(--wb-scrim-floor);
}

/* vignette — the datan8 / nowsites house scrim. A radial ellipse, lighter at
   the centre where the copy sits and heaviest in the corners, which is what
   makes a photograph read as a BACKDROP rather than as a picture someone has
   put text on top of. Centre stop matches those sites' 0.55. */
.wb-design.wb-ovlkit-vignette :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  background: radial-gradient(
    ellipse at center,
    rgba(10, 10, 12, 0.55) 0%,
    rgba(10, 10, 12, 0.74) 52%,
    rgba(10, 10, 12, 0.92) 100%
  );
}

/* foot-gradient — weight at the foot, for copy set low in the frame. The top
   stop is 0.4 rather than 0: it is above the floor's average, and it is the
   band a floating header sits in. */
.wb-design.wb-ovlkit-foot-gradient :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 12, 0.4) 0%,
    rgba(10, 10, 12, 0.52) 42%,
    rgba(10, 10, 12, 0.86) 100%
  );
}

/* head-scrim — heavy under the header, easing to the floor below it. This is
   the kit that makes a transparent 'float' or 'minimal-ghost' header legible
   over a bright photograph, which is otherwise the most common way a cover hero
   ships broken. */
.wb-design.wb-ovlkit-head-scrim :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 12, 0.88) 0%,
    rgba(10, 10, 12, 0.62) 32%,
    rgba(10, 10, 12, 0.54) 100%
  );
}

/* brand-wash — the brand primary over the floor, so the cover belongs to the
   palette rather than to the photograph. Two layers rather than one colour-mix:
   the floor is composited underneath regardless of how light the brand is, so
   the guarantee holds for a yellow brand as well as a navy one. */
.wb-design.wb-ovlkit-brand-wash :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  background:
    linear-gradient(
      140deg,
      color-mix(in srgb, var(--wb-colour-primary) 62%, transparent) 0%,
      color-mix(in srgb, var(--wb-colour-accent) 46%, transparent) 100%
    ),
    var(--wb-scrim-floor);
}
/* color-mix is widely supported but not universally; without it the layered
   background above drops the whole declaration, not just the gradient, so the
   scrim would vanish entirely rather than degrade. Declare the floor first so
   an unsupporting browser keeps it. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .wb-design.wb-ovlkit-brand-wash :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
    background: var(--wb-scrim-floor);
  }
}

/* duotone — a brand gradient in multiply. Multiply can only ever darken, so
   this is the one kit that is safe over media of any brightness without a floor
   underneath it; the floor is still declared as the fallback layer for the same
   colour-mix reason as above. */
.wb-design.wb-ovlkit-duotone :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  background: linear-gradient(160deg, var(--wb-colour-primary) 0%, var(--wb-colour-secondary) 100%);
  mix-blend-mode: multiply;
}
/* THE FLOOR CANNOT LIVE IN THE SCRIM HERE. mix-blend-mode applies to the whole
   element, so a wash added beside the gradient would blend too and stop being a
   floor. It cannot sit on the SECTION either: the media layer is painted over
   the section background, so a dark section behind an opaque photograph is
   invisible.

   An earlier draft tried media opacity 0.82 to let a dark section show through.
   That is not a floor — it darkens by 0.18 x 0.55, about a tenth — and multiply
   against a pale brand pair (a yellow-and-cream palette is perfectly legal here)
   barely darkens either, so white copy could still land on a bright sky. A
   brightness filter on the media is the guarantee that does not depend on the
   brand: it is applied to the photograph itself, before either the tint or the
   copy, and it darkens by the same amount whatever the palette turns out to be. */
.wb-design.wb-ovlkit-duotone :is(.wb-hero-cover-media, .wb-cta-cover-media) {
  filter: brightness(0.58);
}

/* hatch — the floor plus a fine diagonal rule texture, at an alpha low enough
   to read as paper rather than as a pattern. repeating-linear-gradient costs no
   image request and no layout. */
.wb-design.wb-ovlkit-hatch :is(.wb-hero-cover-overlay, .wb-cta-cover-overlay) {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.055) 0px,
      rgba(255, 255, 255, 0.055) 1px,
      transparent 1px,
      transparent 7px
    ),
    var(--wb-scrim-floor);
}

/* ══ Axis 7 · HERO STATURE ════════════════════════════════════════════════ */

/* standard — the pre-kit hero band, sized by its own copy. Declared so the
   default is a value in the table rather than the absence of a rule; it needs
   no properties because it IS what every other sheet already produces. */

/* The three full-height kits share their geometry. Grid rather than flex so
   align-content places the single in-flow child (the container) without the
   media and scrim — both absolutely positioned — taking part. */
.wb-design:is(.wb-herokit-full-screen, .wb-herokit-split-canvas, .wb-herokit-stage) .wb-hero-cover {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  box-sizing: border-box;
}

/* full-screen — the photograph fills the screen and the copy sits in the middle
   of it. The padding-block keeps a long headline off both edges at short
   viewport heights, where centred content would otherwise touch the cue. */
.wb-design.wb-herokit-full-screen .wb-hero-cover {
  align-content: center;
  padding-block: clamp(4rem, 12vh, 8rem);
}

/* stage — the title-card treatment: the media is the subject and the words
   caption it from the foot, the way a poster is set. */
.wb-design.wb-herokit-stage .wb-hero-cover {
  align-content: end;
  padding-block: clamp(4rem, 12vh, 8rem) clamp(3rem, 10vh, 7rem);
}

/* split-canvas — media holds one half edge to edge, copy the other. The only
   kit here that shows a photograph at full fidelity rather than putting words
   over it, which is why it is worth the extra rules.

   DESKTOP ONLY, and see the header note: below this breakpoint the split would
   leave two unreadably narrow columns, so the kit falls back to an ordinary
   cover hero — and the copy colour has to fall back with it. */
@media (min-width: 901px) {
  .wb-design.wb-herokit-split-canvas .wb-hero-cover { align-content: center; }
  /* Clip the media and its scrim to the right half. Both layers move together
     or the scrim would darken the empty half instead of the photograph. */
  .wb-design.wb-herokit-split-canvas :is(.wb-hero-cover-media, .wb-hero-cover-overlay) {
    left: 50%;
  }
  /* The copy takes the left half. max-width is dropped because the container's
     centred measure would otherwise park the words in the middle of the page
     rather than in the middle of their own half. */
  .wb-design.wb-herokit-split-canvas .wb-hero-cover > .wb-container {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: clamp(1.75rem, 6vw, 5.5rem);
    padding-right: 54%;
  }
  /* THE COPY IS NO LONGER ON THE PHOTOGRAPH, so it must stop being white. */
  .wb-design.wb-herokit-split-canvas .wb-hero-cover
    :is(.wb-hero-heading, .wb-hero-sub, .wb-hero .wb-eyebrow) {
    color: var(--wb-colour-text);
    text-shadow: none;
  }
  .wb-design.wb-herokit-split-canvas .wb-hero-cover { background: var(--wb-colour-background); }
  /* Left-aligned regardless of the block's own align prop: copy centred inside
     its own half beside a hard vertical media edge reads as a mistake. */
  .wb-design.wb-herokit-split-canvas .wb-hero-cover .wb-hero { text-align: left; }
  .wb-design.wb-herokit-split-canvas .wb-hero-cover .wb-hero-ctas { justify-content: flex-start; }
}

/* ── The scroll cue ───────────────────────────────────────────────────────
   A full-height hero with nothing under it reads as the whole page. The cue is
   what makes it read as an opening instead. Emitted by blocks-content.ts on the
   three full-height kits only, aria-hidden (it describes a gesture, not
   content), and pointer-events: none so it can never intercept a tap meant for
   a CTA sitting near it. */
.wb-design .wb-hero-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  translate: -50% 0;
  width: 1px;
  height: clamp(2rem, 6vh, 3.25rem);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.85));
  pointer-events: none;
  z-index: 2;
}
/* stage sets its copy at the foot, so a cue in the same place would sit on top
   of the headline. It moves to the right margin, clear of a centred measure. */
.wb-design.wb-herokit-stage .wb-hero-cue {
  left: auto;
  right: clamp(1.25rem, 4vw, 3rem);
  translate: none;
}
@media (prefers-reduced-motion: no-preference) {
  .wb-design .wb-hero-cue { animation: wb-hero-cue 2.4s ease-in-out infinite; }
}
@keyframes wb-hero-cue {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: 50% 0; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: 50% 0; }
}
@media print { .wb-design .wb-hero-cue { display: none; } }

/* ══ Axis 3 (continued) · the header that is NOT THERE ════════════════════ */
/* reveal — no bar at all over the hero, dropping in the moment the visitor
   moves. 'float' is the restrained version of this idea (transparent, but
   present and occupying flow); this one takes the header out of the document
   flow entirely so a full-height hero starts at the very top edge of the screen
   with nothing above it.

   position: fixed, not sticky, and that is the whole difference. A sticky header
   still reserves its own height at the top of the page, so a "hidden" sticky bar
   leaves a band of empty background above the photograph — visibly a gap, and
   exactly the fault this kit exists to remove.

   Fixed is safe here: 'transform', 'filter' and friends on an ancestor would
   make it behave like absolute, and the header's ancestors are only <body> and
   <html>. The cover sheet's transforms are all applied to media layers, which
   are not ancestors of the header. */
.wb-design.wb-hdrkit-reveal .wb-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--wb-colour-background);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.34s ease, opacity 0.34s ease;
}

/* AN INVISIBLE HEADER MUST STILL BE REACHABLE — :focus-within is not a polish
   detail, it is the reason this kit is allowed to exist. Without it the site's
   entire navigation would sit behind a scroll gesture: a keyboard visitor
   pressing Tab from the top of the page would move focus into links that are
   'opacity: 0' and 'pointer-events: none', with no visible indication of where
   focus went. That is a WCAG 2.4.3 / 2.4.7 failure, not a stylistic risk. One
   extra selector makes the first Tab bring the bar down. */
.wb-design.wb-hdrkit-reveal .wb-site-header.wb-scrolled,
.wb-design.wb-hdrkit-reveal .wb-site-header:focus-within {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);
}

/* A page whose first block is NOT a cover hero has nothing for the header to
   get out of the way OF, and its first heading would sit flush against the top
   edge of the screen. :has() is the only way to ask that question in CSS; where
   it is unsupported the whole rule drops and the content is merely tight to the
   top, which is a cosmetic degradation rather than a broken page. */
.wb-design.wb-hdrkit-reveal .wb-main:not(:has(> .wb-section:first-child.wb-hero-cover)) {
  padding-top: 4.75rem;
}

/* Reduced motion keeps the STATE change — the bar still appears on scroll,
   because that is the design and not an animation — and drops the slide. */
@media (prefers-reduced-motion: reduce) {
  .wb-design.wb-hdrkit-reveal .wb-site-header { transition: none; transform: none; }
}

/* Paper has no scroll position, so a fixed header would print over the first
   page and nowhere else — and an invisible one would print as nothing at all. */
@media print {
  .wb-design.wb-hdrkit-reveal .wb-site-header {
    position: static;
    transform: none;
    opacity: 1;
    box-shadow: none;
  }
  .wb-design:is(.wb-herokit-full-screen, .wb-herokit-split-canvas, .wb-herokit-stage)
    .wb-hero-cover {
    min-height: 0;
  }
}

/* ── Card rows that end well ─────────────────────────────────────────────── */
.wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
  :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) {
  --wb-card-gap: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--wb-card-gap);
}

/* One column on a phone; the basis is computed from the column count so every
   breakpoint and every quantity query below sets ONE property. */
.wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
  :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > * {
  --wb-card-cols: 1;
  flex: 0 1 calc(
    (100% - (var(--wb-card-cols) - 1) * var(--wb-card-gap)) / var(--wb-card-cols)
  );
  max-width: 100%;
}

@media (min-width: 641px) {
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > * { --wb-card-cols: 2; }
}

@media (min-width: 901px) {
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > * { --wb-card-cols: 3; }

  /* Quantity queries. `:first-child:nth-last-child(n)` matches only when the
     container holds EXACTLY n children, and the sibling combinator carries the
     count to the rest of them — the classic form, and the one that works
     without :has() so the result does not depend on a browser feature that a
     visitor's browser may not have. Each clause names the row shape it buys. */

  /* 1 — alone, and not stretched across the full measure. */
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(1) {
    flex: 0 1 32rem;
  }

  /* 2 — side by side rather than two thirds of a three-up row. */
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(2),
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(2) ~ * {
    --wb-card-cols: 2;
  }

  /* 4 — 2 + 2. Three-up would leave the fourth alone, which is the exact
     failure this sheet exists to remove. */
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(4),
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(4) ~ * {
    --wb-card-cols: 2;
  }

  /* 7 — 4 + 3 (centred) beats 3 + 3 + 1. */
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(7),
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(7) ~ * {
    --wb-card-cols: 4;
  }

  /* 8 — 4 + 4 exactly. */
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(8),
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(8) ~ * {
    --wb-card-cols: 4;
  }

  /* 10 — 4 + 4 + 2 (centred) beats 3 + 3 + 3 + 1. */
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(10),
  .wb-design:not(.wb-laykit-bento):not(.wb-laykit-wide-ragged)
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) > :first-child:nth-last-child(10) ~ * {
    --wb-card-cols: 4;
  }
}

/* ── The two grid kits close their own rows ─────────────────────────────────
   bento and wide-ragged keep an explicit grid (they place cards on spans, which
   is the whole point of both), so the centring flex row above cannot help them —
   and measured at five cards they were the worst case of all: bento laid out
   2 + 2 + 1 with the fifth card 576px short of the right edge, wide-ragged 3 + 2
   with a 609px hole. A stranded card beside that much empty space does not read
   as a ragged-by-design grid, it reads as a card that failed to load.

   They need DIFFERENT repairs, because the two grids fail differently, and the
   one that works on wide-ragged makes bento worse.

   wide-ragged auto-fits equal tracks, so pinning the last card's END to the
   final grid line stretches it across whatever is left of its row. Idempotent on
   a row that was already full. Guarded against :first-child: a block holding a
   single card is also its own last, and that card already carries the kit's
   two-track span. */
.wb-design.wb-laykit-wide-ragged
  :is(.wb-features-grid, .wb-team-grid) > :last-child:not(:first-child) {
  grid-column-end: -1;
}

/* bento is a SIX-column grid with a repeating 4+2 | 2+4 | 3+3 span pattern
   (kit-css-layout.ts), so every row is completed by a card in an EVEN position
   and every card in an ODD position opens one. A last card at an odd position is
   therefore alone on its row by construction — never a coincidence of width —
   and the repair is to let it span the full six. Measured at five cards: the
   fifth was 576px short of the right edge before, and closes the row after.

   Pinning the END here (the wide-ragged repair) would make it worse, not better:
   the kit sets 'grid-column: span N', so a definite end line against an auto
   start collapses the card to a single track and moves it to the right margin. */
.wb-design.wb-laykit-bento
  :is(.wb-features-grid, .wb-team-grid) > :last-child:nth-child(odd) {
  grid-column: span 6;
}

/* ── Cards that are the same shape as each other ─────────────────────────────
   Flex stretches the cards to a common height, which only helps if what is
   INSIDE them also lines up: without this the "Learn more" link sits directly
   under a two-line description on one card and under a five-line one on the
   next, and the row reads as ragged even though the boxes are level. */
.wb-design :is(.wb-feature, .wb-team-member, .wb-blog-card) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wb-design :is(.wb-feature, .wb-team-member) > :is(.wb-feature-link, .wb-team-role) {
  margin-top: auto;
}
.wb-design .wb-feature-desc { margin-bottom: 1rem; }

/* A card image is a fixed shape whatever the photograph's own aspect ratio is,
   so a portrait shot and a landscape one do not produce two different card
   heights before the flex stretch even starts. */
.wb-design :is(.wb-feature, .wb-team-member) .wb-feature-image {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

/* ══ Axis 8 · ROW PRESENTATION ════════════════════════════════════════════ */

/* grid — wraps onto rows. The pre-kit behaviour; the cards sheet already
   produces it, so the default needs no rules of its own. */

/* rail + peek — one row, scrolled sideways, with snap points. The two kits
   differ ONLY in the card measure (set per-kit below): a rail is sized to fit a
   whole number of cards, a peek deliberately is not. */
.wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-section
  :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
  display: flex;
  flex-wrap: nowrap;
  /* See the header note — without this the first card cannot be scrolled to. */
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--wb-card-gap, 1.75rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  /* Room for the scrollbar so it never sits on top of a card's bottom edge. */
  padding-bottom: 0.9rem;
  scrollbar-width: thin;
  scrollbar-color: var(--wb-colour-muted) transparent;
  /* A horizontal scroller inside a vertical page: tell the browser this element
     owns horizontal gestures and the page still owns vertical ones, so a
     diagonal swipe on a phone does not fight the rail. */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-section
  :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) > * {
  flex: 0 0 var(--wb-rail-basis);
  max-width: var(--wb-rail-basis);
  scroll-snap-align: start;
}

/* The card measure. Phone first: one card and a clear slice of the next, which
   is what tells a thumb the row moves. */
.wb-design.wb-rowkit-rail .wb-section
  :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
  --wb-rail-basis: 78%;
}
.wb-design.wb-rowkit-peek .wb-section
  :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
  --wb-rail-basis: 70%;
}

@media (min-width: 641px) {
  .wb-design.wb-rowkit-rail .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
    --wb-rail-basis: 44%;
  }
  .wb-design.wb-rowkit-peek .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
    --wb-rail-basis: 38%;
  }
}

/* Desktop: rail lands three across with the gaps taken out of the measure, so a
   row of exactly three looks like a designed grid and a row of six invites the
   scroll. peek is set narrower on purpose — three and a bit — so there is
   ALWAYS a partial card at the right edge whatever the item count. */
@media (min-width: 981px) {
  .wb-design.wb-rowkit-rail .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
    --wb-rail-basis: calc((100% - 2 * var(--wb-card-gap, 1.75rem)) / 3);
  }
  .wb-design.wb-rowkit-peek .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
    --wb-rail-basis: 28.5%;
  }
}

/* A rail of three or fewer on a wide screen has nothing to scroll to, and a
   short row pinned to the left edge under a centred heading reads as a layout
   fault rather than as a rail. Centre those, and only those — the quantity
   query means the rule stops applying the moment a fourth card exists. */
@media (min-width: 981px) {
  .wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist):has(> :last-child:nth-child(-n + 3)) {
    justify-content: center;
    overflow-x: visible;
  }
}

/* The gallery rail is the one that needs a keyboard route in: its children are
   figures with no focusable content, so without tabindex the region is
   scrollable by mouse and by touch and by nothing else (WCAG 2.1.1).
   blocks-content.ts adds the attribute; this gives the resulting focus a
   visible ring, because an invisible focus stop is barely better than none. */
.wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-gallery-grid[tabindex]:focus-visible {
  outline: 3px solid var(--wb-colour-primary);
  outline-offset: 4px;
}

/* A gallery card in a rail must not collapse: the grid gave its figures their
   height, and a flex row does not. */
.wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-gallery-grid > .wb-gallery-item {
  aspect-ratio: 4 / 3;
}
.wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-gallery-grid > .wb-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Snapping is a scroll behaviour rather than an animation, so it survives
   reduced motion — but smooth programmatic scrolling does not. */
@media (prefers-reduced-motion: reduce) {
  .wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
    scroll-behavior: auto;
  }
}

/* Paper cannot scroll sideways: a rail would print as one row cropped at the
   page edge, losing every card past the third. Wrap it back. */
@media print {
  .wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .wb-design:is(.wb-rowkit-rail, .wb-rowkit-peek) .wb-section
    :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-gallery-grid) > * {
    flex: 0 1 30%;
    max-width: 30%;
  }
}

/* ── Horizontal containment, at every width ─────────────────────────────────
   'clip', never 'hidden'. An ancestor with overflow:hidden becomes the scroll
   container for position:sticky descendants, which would silently break four
   header kits and the sticky-pin trigger; overflow:clip creates no scroll
   container at all and is the property that exists for exactly this. It is
   applied at every width rather than only on phones because the overflow it
   contains is width-independent: clip-side translates a whole section ±3.5rem
   and split-rows translates its children ±2.2rem, both of which put paint
   outside the page box for the length of the animation. */
.wb-design body { overflow-x: clip; }
.wb-rvlkit-split-rows .wb-main > .wb-section { overflow-x: clip; }

/* ── The disclosure, from 900px down ────────────────────────────────────────
   overlay is excluded: its links live in a full-screen panel behind a worded
   button at EVERY width, which is the whole kit, and hiding .wb-nav would hide
   the panel's only content. */
@media (max-width: 900px) {
  .wb-design.wb-js:not(.wb-navkit-overlay) .wb-nav-toggle { display: inline-flex; }
  .wb-design.wb-js:not(.wb-navkit-overlay) .wb-nav { display: none; }
  .wb-design.wb-js:not(.wb-navkit-overlay) .wb-nav-open .wb-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-bottom: 0.5rem;
    /* A long nav must not push its own toggle off screen. */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .wb-design.wb-js .wb-nav-open .wb-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0;
    border-top: 1px solid color-mix(in srgb, var(--wb-colour-text) 10%, transparent);
  }
  /* Dropdowns render inline and indented inside the disclosure. theme-ext.ts
     does this below 640 only; the disclosure now starts at 900, and a dropdown
     still trying to float as an absolute panel inside a stacked column lands
     over the links beneath it. */
  .wb-design.wb-js .wb-nav-open .wb-nav .wb-nav-item { display: block; position: static; }
  .wb-design.wb-js .wb-nav-open .wb-nav .wb-nav-sub {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    position: static;
    min-width: 0;
    padding: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .wb-design.wb-js .wb-nav-open .wb-nav .wb-nav-sub::before { display: none; }

  /* rule-bar — the pre-kit header. Only the vertical rhythm tightens. */
  .wb-navkit-rule-bar .wb-header-inner { padding-top: 0.9rem; padding-bottom: 0.9rem; }

  /* split-centre — the centred masthead keeps its idea; the tracking that
     reads as editorial at 1200px reads as gappy at 400. */
  .wb-navkit-split-centre .wb-header-inner { padding-top: 1.1rem; gap: 0.6rem; }
  .wb-navkit-split-centre .wb-brand { font-size: 1.3rem; }
  .wb-navkit-split-centre .wb-nav a { letter-spacing: 0.08em; }

  /* left-rail — below 900 the rail is a bar again, so the page must NOT keep
     paying for a rail that is no longer there. The offset is set inside a
     min-width block one file over; restating the release here means the two
     cannot be edited apart. */
  .wb-navkit-left-rail body { padding-left: 0; }
  .wb-navkit-left-rail .wb-site-header { position: static; width: auto; }
  .wb-navkit-left-rail .wb-header-inner {
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 0.9rem 0;
    gap: 1rem;
  }

  /* capsule — the pill has to stop being a pill. A 999px radius around a
     stacked column of links draws a lozenge two hundred pixels tall with the
     first and last link tucked inside the curve. */
  .wb-navkit-capsule .wb-header-inner {
    border-radius: var(--wb-radius-md, 1rem);
    padding: 0.6rem 0.8rem;
    gap: 0.75rem;
  }
  .wb-navkit-capsule .wb-nav-open .wb-nav { padding-top: 0.35rem; }
  .wb-navkit-capsule .wb-portal-link { padding: 0.55rem 1rem; }

  /* overlay — THE PANEL COULD NOT SCROLL. It is position:fixed inset:0 with
     align-items:center and no overflow, so on a 667px-tall phone a seven-link
     nav set at clamp(1.9rem, 6vw, 3.4rem) simply ran off both ends with no way
     to reach the middle. Top-aligned, scrollable, and set at a size a thumb can
     hit. */
  .wb-navkit-overlay .wb-overlay-panel {
    align-items: flex-start;
    justify-content: stretch;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4.5rem 1.25rem 3rem;
  }
  .wb-navkit-overlay .wb-overlay-panel .wb-nav { width: 100%; gap: 0.15rem; }
  .wb-navkit-overlay .wb-overlay-panel .wb-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: clamp(1.35rem, 7vw, 2.1rem);
  }
  .wb-navkit-overlay .wb-overlay-panel .wb-nav-sub a { font-size: 0.95rem; min-height: 40px; }

  /* the contact strip — the point of a trades header, so it stays on a phone;
     it just stops trying to be one line. Keyed on .wb-has-utility, matching
     kit-css-nav.ts: any bar may carry a strip, so any bar needs this rule. */
  .wb-has-utility .wb-utility-inner { gap: 0.35rem 1rem; font-size: 0.78rem; }
  .wb-navkit-utility-stack .wb-header-inner { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .wb-navkit-utility-stack .wb-portal-link { padding: 0.6rem 1rem; font-size: 0.8rem; }

  /* bordered-frame — the frame stays drawn, at a weight that does not eat a
     third of a 390px viewport. */
  .wb-navkit-bordered-frame .wb-site-header { padding: 0.6rem 0.75rem 0; }
  .wb-navkit-bordered-frame .wb-header-inner {
    border-width: 1px;
    padding: 0.6rem 0.75rem;
    gap: 0.75rem;
    align-items: center;
  }
  .wb-navkit-bordered-frame .wb-nav-open .wb-nav { padding-top: 0.35rem; }
  .wb-navkit-bordered-frame .wb-portal-link { border-width: 1px; padding: 0.35rem 0.7rem; }

  /* stacked-masthead — the two-row grid becomes one column. Grid placement is
     inert under flex, so the row/column assignments in kit-css-nav.ts need no
     unwinding: switching the container is enough. */
  .wb-navkit-stacked-masthead .wb-header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding-top: 1.35rem;
    padding-bottom: 0.85rem;
  }
  .wb-navkit-stacked-masthead .wb-brand { font-size: clamp(1.45rem, 8vw, 2rem); }
  .wb-navkit-stacked-masthead .wb-nav-toggle { align-self: flex-end; margin-top: -2.2rem; }
  .wb-navkit-stacked-masthead .wb-portal-link { align-self: flex-start; }

  /* minimal-ghost — 0.2em of tracking on a 12px label wraps a two-word link
     onto two lines in a 44px row. */
  .wb-navkit-minimal-ghost .wb-header-inner { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .wb-navkit-minimal-ghost .wb-nav a { letter-spacing: 0.1em; font-size: 0.85rem; }
  .wb-navkit-minimal-ghost .wb-nav-open .wb-nav a { color: var(--wb-colour-text); }
  .wb-navkit-minimal-ghost .wb-portal-link { letter-spacing: 0.1em; }
}

/* ── Layout kits on a phone ─────────────────────────────────────────────────
   Every one of the ten is named. A layout kit is a set of measures, type scales
   and grid personalities chosen for a wide screen; none of them survives a
   390px viewport untouched, and the four that were added with the kits had no
   phone rules at all before this file. */
@media (max-width: 640px) {
  /* Shared: gutters, wrapping, tap targets and media containment for every
     kit site, before the per-kit rules below. */
  .wb-design .wb-container { padding-left: 1.15rem; padding-right: 1.15rem; }
  .wb-design :is(h1, h2, h3, .wb-hero-heading, .wb-brand) { overflow-wrap: break-word; }
  /* A grid child defaults to min-width:auto, so one long word — a URL, an
     email address, a product code — makes its track wider than the viewport and
     takes the whole page sideways with it. */
  .wb-design :is(.wb-features-grid, .wb-team-grid, .wb-blog-grid, .wb-gallery-grid) > * {
    min-width: 0;
  }
  .wb-design :is(img, video, iframe, svg) { max-width: 100%; }
  /* The standard responsive-table treatment, scoped to phone width and to kit
     sites: the table becomes its own horizontal scroller instead of setting the
     width of the page. Tables only reach a generated site through a rawHtml
     block, so this is the one place the renderer cannot add a wrapper element. */
  .wb-design table { display: block; max-width: 100%; overflow-x: auto; }

  /* centred-column — the pre-kit layout. Vertical rhythm only. */
  .wb-laykit-centred-column .wb-section { padding: clamp(2rem, 8vw, 3.25rem) 0; }

  /* wide-ragged — 2rem of container padding is 64 of 390 pixels. */
  .wb-laykit-wide-ragged .wb-container { padding-left: 1.15rem; padding-right: 1.15rem; }
  .wb-laykit-wide-ragged .wb-section-head { margin-bottom: 1.75rem; }
  .wb-laykit-wide-ragged .wb-feature, .wb-laykit-wide-ragged .wb-team-member {
    padding: 1.35rem 1.15rem;
  }

  /* narrow-editorial — already a single measure; the type comes down a step so
     a 720px-measure article does not read at 17px on a 390px screen. */
  .wb-laykit-narrow-editorial .wb-rich { font-size: 1.02rem; }
  .wb-laykit-narrow-editorial .wb-feature, .wb-laykit-narrow-editorial .wb-team-member {
    padding: 1.35rem 0;
  }

  /* asymmetric-split — one column below 940 already; the head just stops
     reserving space for a column that is no longer beside it. */
  .wb-laykit-asymmetric-split .wb-section-head { margin-bottom: 1.35rem; }
  .wb-laykit-asymmetric-split .wb-feature, .wb-laykit-asymmetric-split .wb-team-member {
    padding-left: 1rem;
  }

  /* full-bleed — clamp(2.6rem, 9vw, 6rem) resolves to its 2.6rem FLOOR at
     390px, not to 9vw, so the biggest headline in the system was also the one
     least able to shrink. The alternating inverted bands keep their padding or
     the zebra stops reading as bands at all. */
  .wb-laykit-full-bleed h1 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .wb-laykit-full-bleed h2 { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .wb-laykit-full-bleed .wb-section { padding: clamp(2.5rem, 10vw, 4rem) 0; }
  .wb-laykit-full-bleed .wb-feature, .wb-laykit-full-bleed .wb-team-member {
    padding: 1.25rem 0 1.75rem;
  }

  /* bento — two 6n spans on one row is two 180px tiles; one per row reads as
     the deliberate grid it is. */
  .wb-laykit-bento .wb-features-grid { gap: 0.6rem; grid-auto-rows: auto; }
  .wb-laykit-bento .wb-section-head { margin-bottom: 1.5rem; }
  .wb-laykit-bento .wb-feature, .wb-laykit-bento .wb-team-member { padding: 1.25rem; }

  /* stacked-panels — the panel radius and inset shrink together, or a 1.75rem
     corner on a 390px card looks like a rounding error. */
  .wb-laykit-stacked-panels .wb-section { padding: 0.4rem 0; }
  .wb-laykit-stacked-panels .wb-main > .wb-section > .wb-container {
    border-radius: 0.85rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .wb-laykit-stacked-panels .wb-feature, .wb-laykit-stacked-panels .wb-team-member {
    padding: 1.25rem;
  }

  /* modular-grid — the gutter collapses above 900, so on a phone the head is a
     label sitting on its own rule instead of hanging beside anything. */
  .wb-laykit-modular-grid .wb-main > .wb-section { padding: clamp(2rem, 8vw, 3rem) 0; }
  .wb-laykit-modular-grid .wb-section-head { margin-bottom: 1.1rem; }
  .wb-laykit-modular-grid .wb-feature, .wb-laykit-modular-grid .wb-team-member {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--wb-colour-text) 14%, transparent);
    padding: 1.1rem 0;
  }

  /* magazine-columns — the columns themselves are already gated above 860.
     What remains is the justification: justified text with hyphens on a 390px
     measure opens rivers of white space through every paragraph. */
  .wb-laykit-magazine-columns .wb-rich { text-align: left; hyphens: manual; }
  .wb-laykit-magazine-columns h1 { font-size: clamp(1.95rem, 10vw, 2.9rem); }
  .wb-laykit-magazine-columns .wb-feature, .wb-laykit-magazine-columns .wb-team-member {
    border-top-width: 2px;
  }

  /* poster — clamp(2.6rem, 10vw, 7rem) floors at 2.6rem, and the kit's whole
     composition is one long word set as large as it will go. On a phone that
     word has to be allowed to break rather than to overhang. */
  .wb-laykit-poster h1 { font-size: clamp(2rem, 12vw, 3.4rem); }
  .wb-laykit-poster h2 { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  .wb-laykit-poster .wb-section { padding: clamp(2.75rem, 12vw, 4.5rem) 0; }
  .wb-laykit-poster .wb-features-grid, .wb-laykit-poster .wb-team-grid { gap: 2rem; }
}

/* ── Tap targets, keyed to the POINTER rather than to the viewport ──────────
   The first draft of this sheet sized tap targets inside the 640px block, which
   is the intuitive place and the wrong one: a tablet held in two hands is a
   touch device at 820px and a laptop with a trackpad is not a touch device at
   any width. Measured in Chromium at 820x1180 with touch on, every footer link
   in every one of the nineteen kits came out at 26px — well under the 44px
   Apple and Google both publish, and under the 24px WCAG 2.2 minimum
   (2.5.8 Target Size) as soon as two of them sit on adjacent lines.
   'pointer: coarse' asks the question that actually matters.

   .wb-brand is in the list because it IS a link — it goes home, it is the first
   thing in the header, and it measured 27-32px across seven kits. It was the
   single most-missed target in the audit precisely because nobody thinks of the
   logo as a button. */
@media (pointer: coarse) {
  .wb-design :is(.wb-portal-link, .wb-button, .wb-nav-toggle, .wb-nav-word) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .wb-design .wb-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .wb-design :is(.wb-site-footer, .wb-nav) a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* ── Motion on a phone ──────────────────────────────────────────────────────
   sticky-pin is already gated above 860. The two remaining hazards are a header
   that pins and then eats a third of a short viewport, and a hover idiom that
   fires on TAP because a touch device has no hover at all — :hover on a touch
   screen latches on first tap and stays until the next one, so a card that
   lifts or tilts stays lifted behind the page the visitor moved to. */
@media (hover: none) {
  .wb-hovkit-tilt :is(.wb-feature, .wb-blog-card, .wb-team-member):hover,
  .wb-hovkit-offset-shadow :is(.wb-feature, .wb-blog-card, .wb-team-member):hover {
    transform: none;
    box-shadow: none;
  }
  .wb-hovkit-tilt .wb-button:hover { transform: none; }
}
@media (max-width: 640px) {
  .wb-hdrkit-shrink .wb-header-inner, .wb-hdrkit-lift .wb-header-inner {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  /* The overlay panel is fixed to the viewport; a sticky bar beneath it at the
     same z-index would show through the panel's own ground. */
  .wb-navkit-overlay .wb-nav-open .wb-site-header { position: static; }
}

/* ── Cover backdrops on a phone ─────────────────────────────────────────────
   A moving full-bleed backdrop is the most expensive thing a page can ask a
   phone GPU to do, and the honest reading of the evidence is that it buys
   nothing: a scroll-linked backdrop costs frames on mobile and returns no
   measurable conversion benefit. So every backdrop kit that moves is returned
   to STILL on a coarse pointer, and the cover falls back to what it always was.

   Keyed to (pointer: coarse) rather than to a width, for the same reason the
   tap targets above are: a tablet held in two hands is a touch device at 820px,
   and a trackpad laptop is not one at any width. `fixed` additionally needs the
   position reset — it is armed inside a (pointer: fine) query in
   kit-css-cover.ts, so this block only has to catch the width edge below.

   THE KIT CLASSES ARE NAMED, and that is load-bearing rather than tidy. The
   arming rules in kit-css-cover.ts are '.wb-design.wb-bgkit-<kit> :is(…)' —
   TWO html classes, so (0,3,0). A reset written as '.wb-design :is(…)' is
   (0,2,0) and loses on specificity no matter how late the sheet is appended,
   which is exactly what happened: the first phone audit after these kits landed
   reported the zoomed media painting outside the viewport on 24 of 66 page
   loads, because the reset was never applying at all. Matching the arming
   specificity and relying on sheet order is what makes the reset real. */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .wb-design:is(.wb-bgkit-parallax, .wb-bgkit-zoom, .wb-bgkit-drift, .wb-bgkit-scroll-zoom,
    .wb-bgkit-fixed) :is(.wb-hero-cover-media, .wb-cta-cover-media) {
    position: absolute;
    inset: 0;
    height: auto;
    will-change: auto;
  }
  .wb-design:is(.wb-bgkit-parallax, .wb-bgkit-zoom, .wb-bgkit-drift, .wb-bgkit-scroll-zoom,
    .wb-bgkit-fixed) :is(.wb-hero-cover-media, .wb-cta-cover-media) :is(img, video) {
    animation: none;
    transform: none;
  }
}
/* Below the disclosure breakpoint the fixed backdrop returns to a plain cover
   even on a mouse — a 900px window is short enough that a 100vh locked layer
   spends most of the scroll showing the same crop of the photograph. */
@media (max-width: 900px) {
  .wb-design.wb-bgkit-fixed :is(.wb-hero-cover, .wb-cta-cover) { clip-path: none; }
  .wb-design.wb-bgkit-fixed :is(.wb-hero-cover-media, .wb-cta-cover-media) {
    position: absolute;
    inset: 0;
    height: auto;
  }
}

/* ── Card rows on a phone ───────────────────────────────────────────────────
   The column count is already mobile-first in kit-css-cards.ts — one column,
   then two at 641, then three at 901, with the quantity queries sealed inside
   the 901 block so they can never reach a phone. So nothing here has to fight
   it, and the only thing left to narrow is the gutter: 1.75rem between stacked
   full-width cards is a third of a phone screen spent on nothing. */
@media (max-width: 640px) {
  .wb-design :is(.wb-features-grid, .wb-team-grid, .wb-bloglist) { --wb-card-gap: 1rem; }
}

/* ── Where the disclosure sits, below 900px ────────────
   toggle-end is the pre-kit arrangement and therefore emits NO RULES AT ALL:
   the button stays exactly where justify-content: space-between has always put
   it, so a site that names the default renders byte-identical to one that names
   nothing. Same discipline as the design system's legacy invariant, one axis
   down. */
@media (max-width: 900px) {
  /* toggle-start — the button leads and the brand follows it.

     order: -1 moves the button in front of the wordmark; the auto margin on the
     brand is what stops space-between from then spreading the two apart.
     Without it the free space lands BETWEEN the toggle and the brand and the
     result reads as a mistake rather than as a choice: a hamburger alone in the
     left corner with the wordmark stranded mid-bar. */
  .wb-navmobkit-toggle-start:not(.wb-navkit-overlay):not(.wb-navkit-stacked-masthead) .wb-header-inner > .wb-nav-toggle { order: -1; }
  .wb-navmobkit-toggle-start:not(.wb-navkit-overlay):not(.wb-navkit-stacked-masthead) .wb-header-inner > .wb-brand { margin-right: auto; }

  /* split-brand — button leading, wordmark CENTRED, portal door trailing.

     Auto margins on both sides of the brand, which centres it in whatever space
     the toggle and the door leave rather than in the viewport. That is the
     honest behaviour: optical centring against unequal flanks would need a
     width this layout does not have, and a wordmark that drifts as the door
     appears and disappears is worse than one that is predictably between them. */
  .wb-navmobkit-split-brand:not(.wb-navkit-overlay):not(.wb-navkit-stacked-masthead) .wb-header-inner > .wb-nav-toggle { order: -1; }
  .wb-navmobkit-split-brand:not(.wb-navkit-overlay):not(.wb-navkit-stacked-masthead) .wb-header-inner > .wb-brand { margin-left: auto; margin-right: auto; }

  /* stacked-masthead — a column, so order would move the button UP rather than
     left. align-self is the cross-axis property that actually applies.
     The negative top margin kit-css-mobile.ts sets is deliberately left alone:
     it lifts the button level with the wordmark, and that is true on either
     side. Both non-default values land on the same edge here — a masthead has
     no third arrangement, because the brand is already on its own line. */
  .wb-navmobkit-toggle-start.wb-navkit-stacked-masthead .wb-nav-toggle,
  .wb-navmobkit-split-brand.wb-navkit-stacked-masthead .wb-nav-toggle {
    align-self: flex-start;
  }
}

/* block kit */
:root {
  --wb-kit-text: var(--wb-colour-text);
  --wb-kit-muted: var(--wb-colour-muted);
  --wb-kit-on-surface: var(--wb-colour-on-surface);
  --wb-kit-on-surface-muted: var(--wb-colour-on-surface-muted);
  --wb-tone-inverse-ground: #16345A;
  --wb-tone-inverse-copy: #FBF9F5;
  --wb-tone-accent-ground: #B04C10;
  --wb-tone-accent-copy: #ffffff;
}

/* ── block kit: shared ─────────────────────────────────────────────────── */
.wb-kit-muted { color: var(--wb-colour-muted); }
.wb-kit-tick, .wb-kit-cross { flex: none; width: 1rem; height: 1rem; }
.wb-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ── split layouts (hero split, splitMedia) ──────────────────────────────── */
.wb-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.wb-split-solo { grid-template-columns: minmax(0, 1fr); max-width: 46rem; margin: 0 auto; }
.wb-split-media-left .wb-split-media { order: -1; }
.wb-split-copy { min-width: 0; }
.wb-split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--wb-radius-lg, 1.25rem);
}
.wb-split-copy .wb-hero-ctas, .wb-split-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; }
.wb-hero-split .wb-hero-sub { margin-bottom: 1.25rem; }
.wb-split-list, .wb-price-features {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.wb-split-list li, .wb-price-features li { display: flex; gap: 0.6rem; align-items: flex-start; }
.wb-split-list .wb-kit-tick, .wb-price-features .wb-kit-tick { margin-top: 0.3em; color: var(--wb-colour-primary); }
/* ── benefit chips + trust stack ─────────────────────────────────────────── */
.wb-chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  /* The chip takes the section's copy colour, whatever the band or tone
     behind it, so its label contrasts exactly as the section's own copy. */
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  font-size: 0.9375rem;
  font-weight: 600;
}
.wb-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.wb-trust-faces { display: flex; }
.wb-trust-face {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--wb-colour-background);
  margin-left: -0.6rem;
}
.wb-trust-face:first-child { margin-left: 0; }
.wb-trust-text { margin: 0; font-weight: 600; font-size: 0.9375rem; }
/* ── path cards ──────────────────────────────────────────────────────────── */
.wb-paths-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.wb-path-card, .wb-price-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1.5rem;
  background: var(--wb-colour-background);
  color: var(--wb-colour-text);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--wb-radius-lg, 1.25rem);
}
.wb-path-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--wb-radius-md, 0.75rem); }
.wb-path-title, .wb-price-title { margin: 0; font-size: 1.25rem; }
.wb-path-desc, .wb-price-desc { margin: 0; }
.wb-path-card .wb-button, .wb-price-card .wb-button { margin-top: auto; align-self: flex-start; }
/* ── stats band ──────────────────────────────────────────────────────────── */
.wb-stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  text-align: center;
}
.wb-stat { display: grid; gap: 0.3rem; min-width: 0; }
.wb-stat-value {
  font-family: var(--wb-font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.wb-stat-label { font-weight: 600; }
.wb-stat-desc { font-size: 0.9375rem; }
/* ── logo wall ───────────────────────────────────────────────────────────── */
.wb-logos-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.wb-logo-item img {
  max-height: 3rem;
  max-width: 10rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
}
.wb-logo-item a:is(:hover, :focus-visible) img { filter: none; opacity: 1; }
/* ── pricing ─────────────────────────────────────────────────────────────── */
.wb-pricing-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: stretch;
}
.wb-price-card-featured { border: 2px solid var(--wb-colour-primary); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); }
.wb-price-badge {
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.8125rem;
  font-weight: 700;
}
.wb-price-amount {
  margin: 0;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
}
.wb-price-period { font-size: 1rem; font-weight: 500; }
.wb-price-note, .wb-compare-note, .wb-video-caption { max-width: 46rem; margin: 1.5rem auto 0; text-align: center; }
/* ── process steps + timeline ────────────────────────────────────────────── */
.wb-process { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.wb-process-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.wb-process-item { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; position: relative; }
.wb-process-steps .wb-process-item { flex-direction: column; gap: 0.75rem; }
.wb-process-marker {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  font-weight: 700;
}
.wb-process-timeline .wb-process-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 2.75rem;
  bottom: -1.25rem;
  width: 2px;
  background: currentColor;
  opacity: 0.2;
}
.wb-process-body { min-width: 0; }
.wb-process-label { margin: 0 0 0.2rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.wb-process-title { margin: 0.2rem 0 0.35rem; font-size: 1.125rem; }
.wb-process-desc { margin: 0; }
/* ── service area ────────────────────────────────────────────────────────── */
.wb-area { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.wb-area-has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wb-area .wb-section-head { text-align: left; margin: 0 0 1.25rem; }
.wb-area-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wb-area-list li {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.wb-area-address { font-style: normal; font-weight: 600; }
.wb-area-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--wb-radius-lg, 1.25rem);
}
/* ── video ───────────────────────────────────────────────────────────────── */
.wb-video-frame {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--wb-radius-lg, 1.25rem);
  background: #0f172a;
}
.wb-video-frame iframe, .wb-video-frame video { display: block; width: 100%; height: 100%; border: 0; }
.wb-video-link { text-align: center; margin: 0; }
/* ── comparison table ────────────────────────────────────────────────────── */
.wb-compare-wrap {
  max-width: 100%;
  overflow-x: auto;
  background: var(--wb-colour-background);
  color: var(--wb-colour-text);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--wb-radius-lg, 1.25rem);
}
.wb-compare { width: 100%; border-collapse: collapse; }
.wb-compare th, .wb-compare td { padding: 0.85rem 1rem; text-align: center; border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.wb-compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
.wb-compare tbody th { text-align: left; font-weight: 600; }
.wb-compare thead th { font-family: var(--wb-font-heading); }
.wb-compare .wb-compare-highlight { background: rgba(15, 23, 42, 0.04); font-weight: 600; }
.wb-compare .wb-kit-tick { color: var(--wb-colour-primary); }
.wb-compare .wb-kit-cross { color: var(--wb-colour-muted); }

/* ── block kit: tones ──────────────────────────────────────────────────── */
.wb-main > .wb-section.wb-tone-muted {
  --wb-tone-ground: var(--wb-colour-surface);
  --wb-tone-copy: var(--wb-kit-on-surface);
  --wb-tone-copy-muted: var(--wb-kit-on-surface-muted);
}
.wb-main > .wb-section.wb-tone-inverse {
  --wb-tone-ground: var(--wb-tone-inverse-ground);
  --wb-tone-copy: var(--wb-tone-inverse-copy);
  --wb-tone-copy-muted: var(--wb-tone-inverse-copy);
}
.wb-main > .wb-section.wb-tone-accent {
  --wb-tone-ground: var(--wb-tone-accent-ground);
  --wb-tone-copy: var(--wb-tone-accent-copy);
  --wb-tone-copy-muted: var(--wb-tone-accent-copy);
}
.wb-main > .wb-section:is(.wb-tone-muted, .wb-tone-inverse, .wb-tone-accent) {
  --wb-colour-text: var(--wb-tone-copy);
  --wb-colour-muted: var(--wb-tone-copy-muted);
  --wb-colour-on-surface: var(--wb-tone-copy);
  --wb-colour-on-surface-muted: var(--wb-tone-copy-muted);
  background: var(--wb-tone-ground);
  color: var(--wb-tone-copy);
}
.wb-main > .wb-section:is(.wb-tone-muted, .wb-tone-inverse, .wb-tone-accent) :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) {
  --wb-colour-text: var(--wb-kit-text);
  --wb-colour-muted: var(--wb-kit-muted);
  --wb-colour-on-surface: var(--wb-kit-on-surface);
  --wb-colour-on-surface-muted: var(--wb-kit-on-surface-muted);
  color: var(--wb-colour-text);
}
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) a:not(.wb-button):not(.wb-record-card) { color: inherit; text-decoration: underline; }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) a:not(.wb-button) { color: var(--wb-colour-primary); text-decoration: none; }
.wb-main > .wb-section.wb-tone-accent .wb-button:not(.wb-button-secondary):not(.wb-button-ghost) {
  background: var(--wb-tone-copy);
  color: var(--wb-tone-ground);
}
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) .wb-button-secondary { color: var(--wb-tone-copy); box-shadow: inset 0 0 0 2px currentColor; }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) .wb-button-ghost { color: var(--wb-tone-copy); }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-path-card, .wb-price-card) .wb-button:not(.wb-button-secondary):not(.wb-button-ghost) { background: var(--wb-colour-primary); color: var(--wb-colour-on-primary); }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-path-card, .wb-price-card) :is(.wb-button-secondary, .wb-button-ghost) { color: var(--wb-colour-primary); }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-split-list, .wb-compare) .wb-kit-tick { color: inherit; }
.wb-main > .wb-section:is(.wb-tone-muted, .wb-tone-inverse, .wb-tone-accent) :is(a, button, summary, input, select, textarea):focus-visible { outline-color: var(--wb-tone-copy); }
.wb-main > .wb-section:is(.wb-tone-muted, .wb-tone-inverse, .wb-tone-accent) :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) :is(a, button, input, select, textarea):focus-visible { outline-color: var(--wb-colour-primary); }
/* ── block kit: panel background ─────────────────────────────────────────── */
.wb-main > .wb-section.wb-bg-panel { background: var(--wb-colour-background); }
.wb-main > .wb-section.wb-bg-panel > .wb-container {
  background: var(--wb-tone-ground);
  border-radius: var(--wb-radius-lg, 1.5rem);
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  width: calc(100% - 2.5rem);
}
/* ── block kit: kit copy on the alternating bands ────────────────────────── */
.wb-main > .wb-section:nth-of-type(even) .wb-kit-muted { color: var(--wb-colour-on-surface-muted); }
.wb-main > .wb-section:nth-of-type(even) :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) .wb-kit-muted { color: var(--wb-colour-muted); }
/* ── block kit: buttons ──────────────────────────────────────────────────── */
.wb-button-ghost { background: transparent; color: var(--wb-colour-primary); box-shadow: none; }
.wb-button-ghost:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.wb-split-ctas .wb-button, .wb-split-copy .wb-hero-ctas .wb-button { min-height: 2.75rem; }
/* ── block kit: phones ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .wb-split, .wb-area-has-map { grid-template-columns: minmax(0, 1fr); }
  .wb-split-media-left .wb-split-media { order: 0; }
  .wb-main > .wb-section.wb-bg-panel > .wb-container { width: calc(100% - 1.25rem); }
  .wb-compare th, .wb-compare td { padding: 0.65rem 0.6rem; }
  .wb-process-steps { grid-template-columns: minmax(0, 1fr); }
  .wb-process-steps .wb-process-item { flex-direction: row; }
}

/* ── card rows: column count ─────────────────────────────────────────────── */
.wb-main .wb-section .wb-container .wb-features-grid.wb-cols {
  --wb-cols: 1;
  --wb-cols-gap: 1.75rem;
  display: grid;
  grid-template-columns: repeat(var(--wb-cols), minmax(0, 1fr));
  gap: var(--wb-cols-gap);
  justify-content: stretch;
  overflow: visible;
  padding-bottom: 0;
}
.wb-main .wb-section .wb-container .wb-features-grid.wb-cols > * { grid-column: auto; max-width: none; min-width: 0; }
@media (min-width: 641px) {
  .wb-main .wb-section .wb-container .wb-features-grid.wb-cols { --wb-cols: 2; }
}
@media (min-width: 901px) {
  .wb-main .wb-section .wb-container .wb-features-grid.wb-cols:is(.wb-cols-3, .wb-cols-5, .wb-cols-6) { --wb-cols: 3; }
  .wb-main .wb-section .wb-container .wb-features-grid.wb-cols.wb-cols-4 { --wb-cols: 4; }
}
@media (min-width: 1101px) {
  .wb-main .wb-section .wb-container .wb-features-grid.wb-cols.wb-cols-5 { --wb-cols: 5; }
  .wb-main .wb-section .wb-container .wb-features-grid.wb-cols.wb-cols-6 { --wb-cols: 6; }
}
/* ── card rows: dividers ─────────────────────────────────────────────────── */
.wb-main .wb-section .wb-container .wb-features-grid.wb-cols.wb-dividers {
  --wb-cols-gap: 2.5rem;
  background-image: linear-gradient(to right,
    transparent calc(100% - var(--wb-cols-gap) / 2 - 0.5px),
    color-mix(in srgb, currentColor 22%, transparent) calc(100% - var(--wb-cols-gap) / 2 - 0.5px),
    color-mix(in srgb, currentColor 22%, transparent) calc(100% - var(--wb-cols-gap) / 2 + 0.5px),
    transparent calc(100% - var(--wb-cols-gap) / 2 + 0.5px));
  background-size: calc((100% + var(--wb-cols-gap)) / var(--wb-cols)) 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
}
/* ── card rows: plain cards ──────────────────────────────────────────────── */
.wb-section .wb-features-grid.wb-cards-plain > .wb-feature {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* ── card rows: icon treatment ───────────────────────────────────────────── */
.wb-features-grid:is(.wb-icons-tile, .wb-icons-circle, .wb-icons-solid-circle) .wb-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--wb-icon-ink, var(--wb-colour-primary));
  background: color-mix(in srgb, var(--wb-icon-ink, var(--wb-colour-primary)) 14%, transparent);
  border-radius: var(--wb-radius-sm, 0.5rem);
}
.wb-features-grid:is(.wb-icons-tile, .wb-icons-circle, .wb-icons-solid-circle) .wb-feature-icon-svg {
  width: 1.5rem;
  height: 1.5rem;
}
.wb-features-grid:is(.wb-icons-circle, .wb-icons-solid-circle) .wb-feature-icon { border-radius: 50%; }
.wb-features-grid.wb-icons-solid-circle .wb-feature-icon {
  background: var(--wb-icon-ink, var(--wb-colour-primary));
  color: var(--wb-icon-on, var(--wb-colour-on-primary));
}
/* ── resource cards: type pill ───────────────────────────────────────────── */
.wb-blog-card-type {
  align-self: flex-start;
  margin: 1rem 1rem 0;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wb-colour-primary) 14%, transparent);
  color: var(--wb-colour-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wb-blog-card .wb-blog-card-type + h3 { padding-top: 0.5rem; }
/* ── resource cards: image bled to the right edge ────────────────────────── */
.wb-blog-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
@media (min-width: 641px) {
  .wb-bloglist .wb-blog-card.wb-blog-card-bleed { flex-direction: row; align-items: stretch; }
  .wb-bloglist .wb-blog-card-bleed > img { flex: 0 0 40%; width: 40%; height: auto; aspect-ratio: auto; object-fit: cover; }
}
@media (max-width: 640px) {
  .wb-bloglist .wb-blog-card-bleed > img { order: -1; }
}
/* ── resource cards: aside heading column ────────────────────────────────── */
.wb-bloglist-aside { margin-bottom: 2rem; }
.wb-bloglist-aside-heading { margin: 0 0 0.75rem; }
.wb-bloglist-aside-body { margin: 0 0 1.25rem; color: var(--wb-colour-muted); }
@media (min-width: 901px) {
  .wb-bloglist-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .wb-bloglist-aside { margin-bottom: 0; }
}

/* ── card rows: transparent cards take the band's copy ───────────────────── */
.wb-main > .wb-section:is(.wb-tone-muted, .wb-tone-inverse, .wb-tone-accent) :is(.wb-cards-plain > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-features-grid > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-team-grid > .wb-team-member) {
  --wb-colour-text: var(--wb-tone-copy);
  --wb-colour-muted: var(--wb-tone-copy-muted);
  --wb-colour-on-surface: var(--wb-tone-copy);
  --wb-colour-on-surface-muted: var(--wb-tone-copy-muted);
  color: var(--wb-tone-copy);
}
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-cards-plain > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-features-grid > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-team-grid > .wb-team-member) {
  --wb-icon-ink: var(--wb-tone-copy);
  --wb-icon-on: var(--wb-tone-ground);
}
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-cards-plain > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-features-grid > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-team-grid > .wb-team-member) .wb-feature-icon { color: var(--wb-icon-ink); }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-cards-plain > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-features-grid > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-team-grid > .wb-team-member) a:not(.wb-button) { color: inherit; text-decoration: underline; }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-cards-plain > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-features-grid > .wb-feature, :is(.wb-laykit-wide-ragged, .wb-laykit-narrow-editorial, .wb-laykit-asymmetric-split, .wb-laykit-full-bleed, .wb-laykit-modular-grid, .wb-laykit-magazine-columns, .wb-laykit-poster) .wb-team-grid > .wb-team-member) :is(a, button):focus-visible { outline-color: var(--wb-tone-copy); }
/* ── card rows: dark cards ───────────────────────────────────────────────── */
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) {
  --wb-colour-text: var(--wb-tone-inverse-copy);
  --wb-colour-muted: var(--wb-tone-inverse-copy);
  --wb-colour-on-surface: var(--wb-tone-inverse-copy);
  --wb-colour-on-surface-muted: var(--wb-tone-inverse-copy);
  --wb-icon-ink: var(--wb-tone-inverse-copy);
  --wb-icon-on: var(--wb-tone-inverse-ground);
  background: var(--wb-tone-inverse-ground);
  border-color: color-mix(in srgb, var(--wb-tone-inverse-copy) 22%, transparent);
  color: var(--wb-tone-inverse-copy);
}
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap).wb-price-card-featured { border-color: var(--wb-tone-inverse-copy); }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) .wb-feature-icon { color: var(--wb-icon-ink); }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) .wb-kit-tick { color: inherit; }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) .wb-blog-card-type { background: color-mix(in srgb, var(--wb-tone-inverse-copy) 16%, transparent); }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) a:not(.wb-button) { color: inherit; }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) .wb-button:not(.wb-button-secondary):not(.wb-button-ghost) { background: var(--wb-tone-inverse-copy); color: var(--wb-tone-inverse-ground); }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) :is(.wb-button-secondary, .wb-button-ghost) { color: var(--wb-tone-inverse-copy); }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) .wb-button-secondary { box-shadow: inset 0 0 0 2px currentColor; }
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist).wb-cards-inverse > :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) :is(a, button):focus-visible { outline-color: var(--wb-tone-inverse-copy); }

/* ── block kit: app icons ─────────────────────────────────────────────────── */
.wb-app-icon { display: block; flex: none; width: 1.25rem; height: 1.25rem; }
/* ── app header ──────────────────────────────────────────────────────────── */
.wb-apphead { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.wb-apphead-copy { flex: 1 1 auto; min-width: 0; }
.wb-apphead-title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.wb-apphead-sub { margin: 0.15rem 0 0; font-size: 0.8125rem; line-height: 1.35; }
.wb-apphead-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  font-weight: 700;
  font-size: 0.9375rem;
}
.wb-apphead-photo { width: 100%; height: 100%; object-fit: cover; }
.wb-apphead-actions { flex: none; display: flex; gap: 0.5rem; margin-left: auto; }
.wb-apphead-action, .wb-apphead-backlink {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--wb-colour-surface);
  color: var(--wb-kit-on-surface, var(--wb-colour-text));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.wb-apphead-action:hover, .wb-apphead-backlink:hover { filter: brightness(0.96); }
.wb-apphead-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--wb-colour-surface);
}
.wb-apphead-back {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) minmax(0, auto) minmax(2.5rem, 1fr);
  align-items: center;
}
.wb-apphead-back .wb-apphead-copy { text-align: center; }
.wb-apphead-back .wb-apphead-backlink { justify-self: start; }
.wb-apphead-back .wb-apphead-actions { justify-self: end; margin-left: 0; }
.wb-apphead-spacer { display: block; }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) :is(.wb-apphead-action, .wb-apphead-backlink) {
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  box-shadow: none;
}
/* ── stats tiles ─────────────────────────────────────────────────────────── */
.wb-stats-tiles .wb-section-head { max-width: none; margin: 0 0 0.75rem; text-align: left; }
.wb-stats-tiles .wb-section-heading { margin: 0; font-size: 1rem; font-weight: 600; }
.wb-stat-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wb-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 1rem;
  border-radius: var(--wb-radius-lg, 1.25rem);
  background: var(--wb-tone-inverse-ground, var(--wb-colour-secondary));
  color: var(--wb-tone-inverse-copy, #ffffff);
  text-align: left;
}
.wb-stat-tile-label, .wb-stat-tile-desc { font-size: 0.8125rem; line-height: 1.3; opacity: 0.85; }
.wb-stat-tile-value {
  font-family: var(--wb-font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
/* ── record list ─────────────────────────────────────────────────────────── */
.wb-records-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  margin: 0 0 0.75rem;
  text-align: left;
}
.wb-records-head .wb-section-heading { margin: 0; font-size: 1rem; font-weight: 600; }
.wb-records-all { flex: none; font-size: 0.875rem; font-weight: 600; }
.wb-records { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.wb-record { min-width: 0; }
.wb-record-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--wb-radius-lg, 1.25rem);
  background: var(--wb-colour-surface);
  color: var(--wb-kit-on-surface, var(--wb-colour-text));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  text-decoration: none;
}
a.wb-record-card:hover { text-decoration: none; filter: brightness(0.98); }
.wb-record-media {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border-radius: var(--wb-radius-md, 0.75rem);
  background: color-mix(in srgb, var(--wb-colour-primary) 14%, transparent);
  color: var(--wb-colour-primary);
}
.wb-record-media-photo { width: 3.5rem; height: 3.5rem; background: transparent; }
.wb-record-thumb { width: 100%; height: 100%; object-fit: cover; }
.wb-record-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.4rem; }
.wb-record-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.wb-record-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.wb-record-badge {
  flex: none;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  background: #e2e8f0;
  color: #334155;
}
.wb-record-badge-success { background: #dcfce7; color: #166534; }
.wb-record-badge-warning { background: #fef3c7; color: #92400e; }
.wb-record-badge-info { background: #dbeafe; color: #1e40af; }
.wb-record-rows { margin: 0; display: grid; gap: 0.25rem; }
.wb-record-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; }
.wb-record-row dt { color: var(--wb-kit-on-surface-muted, var(--wb-colour-muted)); }
.wb-record-row dd { margin: 0; min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
/* ── cta button options ──────────────────────────────────────────────────── */
.wb-button-has-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.wb-button-block { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; text-align: center; }
.wb-cta-buttons .wb-button-block { flex: 1 1 100%; }
.wb-button-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wb-button-icon-circle {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid currentColor;
  border-radius: 999px;
}
.wb-button-icon-circle .wb-app-icon { width: 0.9rem; height: 0.9rem; }

/* ── stats: icon, unit, dividers, aside ──────────────────────────────────── */
.wb-stat-icon { display: flex; justify-content: center; color: var(--wb-colour-primary); }
.wb-stat-icon .wb-feature-icon-svg { width: 2rem; height: 2rem; }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) .wb-stat-icon { color: inherit; }
.wb-stat-unit { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.wb-stats-dividers { column-gap: 0; overflow: hidden; }
.wb-stats-dividers .wb-stat {
  padding: 0 1.25rem;
  margin-inline-start: -1px;
  border-inline-start: 1px solid currentColor;
  border-inline-start-color: color-mix(in srgb, currentColor 30%, transparent);
}
.wb-stats-aside {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.wb-stats-aside .wb-section-head { margin: 0; max-width: none; text-align: left; }
/* ── pricing: icon, subtitle, ideal-for footer, inverse featured card ────── */
.wb-price-icon { display: flex; color: var(--wb-colour-primary); }
.wb-price-icon .wb-feature-icon-svg { width: 2rem; height: 2rem; }
.wb-price-subtitle { margin: -0.3rem 0 0; font-weight: 600; }
.wb-price-ideal {
  margin: 0.25rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 18%, transparent);
  font-size: 0.9375rem;
}
.wb-price-ideal-label { font-weight: 700; }
.wb-main .wb-section .wb-price-card.wb-price-card-inverse {
  --wb-colour-text: var(--wb-tone-inverse-copy);
  --wb-colour-muted: var(--wb-tone-inverse-copy);
  --wb-colour-on-surface: var(--wb-tone-inverse-copy);
  --wb-colour-on-surface-muted: var(--wb-tone-inverse-copy);
  background: var(--wb-tone-inverse-ground);
  color: var(--wb-tone-inverse-copy);
}
.wb-main .wb-section .wb-price-card.wb-price-card-inverse :is(.wb-kit-tick, .wb-price-icon) { color: inherit; }
.wb-main .wb-section .wb-price-card.wb-price-card-inverse .wb-button:not(.wb-button-secondary):not(.wb-button-ghost) { background: var(--wb-tone-inverse-copy); color: var(--wb-tone-inverse-ground); }
.wb-main .wb-section .wb-price-card.wb-price-card-inverse :is(a, button):focus-visible { outline-color: var(--wb-tone-inverse-copy); }
/* ── chart: ring and authored centre ─────────────────────────────────────── */
.wb-chart-ring-wrap { max-width: 520px; margin: 0 auto; }
.wb-chart-ring-label { font-size: 16px; font-weight: 600; fill: currentColor; }
.wb-chart-ring-tick { stroke: currentColor; stroke-width: 1.5; opacity: 0.4; }
.wb-chart-centre-heading { font-family: var(--wb-font-heading); font-size: 20px; font-weight: 700; fill: currentColor; }
.wb-chart-centre-text { font-size: 14px; fill: currentColor; opacity: 0.8; }
.wb-chart-ring .wb-chart-seg { transition: opacity 0.18s ease; }
.wb-chart-ring:hover .wb-chart-seg { opacity: 0.55; }
.wb-chart-ring .wb-chart-seg:hover { opacity: 1; }
@media (max-width: 720px) {
  .wb-stats-aside { grid-template-columns: minmax(0, 1fr); }
  .wb-stats-aside .wb-section-head { text-align: center; }
}

/* ── heading marks: eyebrow, rule, second headline line ────────────────── */
.wb-hero-cover .wb-eyebrow { color: rgba(255, 255, 255, 0.88); }
.wb-rule { line-height: 0; margin: 0 0 1rem; }
.wb-rule::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 4rem;
  height: 1px;
  background: currentColor;
}
.wb-rule-bar::before { width: 3.5rem; height: 4px; border-radius: 4px; }
.wb-section-head .wb-rule { margin: 0.25rem 0 0.75rem; }
.wb-hero-cover .wb-rule { color: #ffffff; }
.wb-hero-line2 { display: block; font-weight: 400; }
@media (min-width: 901px) {
  .wb-design.wb-herokit-split-canvas .wb-hero-cover .wb-rule { color: var(--wb-colour-text); }
}
/* ── split hero: edge bleed ──────────────────────────────────────────────── */
.wb-hero-bleed { overflow-x: clip; }
.wb-hero-bleed .wb-split { container-type: inline-size; }
.wb-hero-bleed .wb-split-media { margin-right: calc((100cqw - 100vw) / 2); }
.wb-hero-bleed .wb-split-media img { border-radius: var(--wb-radius-lg, 1.25rem) 0 0 var(--wb-radius-lg, 1.25rem); }
.wb-hero-bleed .wb-split-media-left .wb-split-media { margin-right: 0; margin-left: calc((100cqw - 100vw) / 2); }
.wb-hero-bleed .wb-split-media-left .wb-split-media img { border-radius: 0 var(--wb-radius-lg, 1.25rem) var(--wb-radius-lg, 1.25rem) 0; }
@media (max-width: 720px) {
  .wb-hero-bleed .wb-split .wb-split-media { margin-left: calc((100cqw - 100vw) / 2); margin-right: calc((100cqw - 100vw) / 2); }
  .wb-hero-bleed .wb-split .wb-split-media img { border-radius: 0; }
  .wb-hero-bleed .wb-split .wb-split-quote { margin-left: calc((100vw - 100cqw) / 2); margin-right: calc((100vw - 100cqw) / 2); }
}
.wb-hero-bleed.wb-bg-panel .wb-split .wb-split-media { margin-left: 0; margin-right: 0; }
.wb-hero-bleed.wb-bg-panel .wb-split .wb-split-media img { border-radius: var(--wb-radius-lg, 1.25rem); }
/* ── split hero: device frames ───────────────────────────────────────────── */
.wb-device { position: relative; }
.wb-device-screen {
  margin: 0 auto;
  overflow: hidden;
  background: #0f172a;
  border: solid #1f2937;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent), 0 18px 40px rgba(15, 23, 42, 0.18);
}
.wb-split-media .wb-device-screen img { display: block; width: 100%; border-radius: 0; }
.wb-device-laptop { padding-bottom: clamp(0.5rem, 1.4vw, 0.875rem); }
.wb-device-laptop .wb-device-screen {
  max-width: 88%;
  border-width: clamp(6px, 1.1vw, 12px);
  border-radius: clamp(8px, 1.4vw, 14px) clamp(8px, 1.4vw, 14px) 0 0;
}
.wb-split-media .wb-device-laptop img { aspect-ratio: 16 / 10; }
.wb-device-laptop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(0.5rem, 1.4vw, 0.875rem);
  background: linear-gradient(#e2e8f0, #94a3b8);
  border-radius: 0 0 1rem 1rem / 0 0 0.6rem 0.6rem;
}
.wb-device-tablet .wb-device-screen {
  max-width: 82%;
  border-width: clamp(10px, 1.8vw, 18px);
  border-radius: clamp(16px, 2.6vw, 30px);
}
.wb-split-media .wb-device-tablet img { aspect-ratio: 4 / 3; }
/* ── split hero: quote card over the media ───────────────────────────────── */
.wb-split-media-quoted { position: relative; }
.wb-split-quote {
  position: absolute;
  z-index: 1;
  left: clamp(-2.5rem, -3vw, -1rem);
  bottom: clamp(1rem, 3vw, 2rem);
  max-width: min(22rem, 80%);
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--wb-colour-background);
  color: var(--wb-kit-text, var(--wb-colour-text));
  border-radius: var(--wb-radius-md, 0.75rem);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  text-align: left;
}
.wb-split-media-left .wb-split-quote { left: auto; right: clamp(-2.5rem, -3vw, -1rem); }
.wb-split-quote blockquote { margin: 0; }
.wb-split-quote p { margin: 0; font-size: 1rem; line-height: 1.5; }
.wb-split-quote figcaption { margin-top: 0.6rem; font-size: 0.875rem; font-weight: 700; }
@media (max-width: 720px) {
  .wb-split-quote, .wb-split-media-left .wb-split-quote { position: static; max-width: none; margin-top: 1rem; }
}

/* ── block kit: section textures ─────────────────────────────────────────── */
.wb-main > .wb-section.wb-tex:not(.wb-bg-panel), .wb-main > .wb-section.wb-tex.wb-bg-panel > .wb-container { position: relative; isolation: isolate; }
.wb-main > .wb-section.wb-tex:not(.wb-bg-panel)::before, .wb-main > .wb-section.wb-tex.wb-bg-panel > .wb-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0.07;
  pointer-events: none;
  -webkit-mask-image: var(--wb-tex-image);
  mask-image: var(--wb-tex-image);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.wb-main > .wb-section.wb-tex-waves { --wb-tex-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'80'%20height%3D'20'%20viewBox%3D'0%200%2080%2020'%3E%3Cpath%20d%3D'M0%2010%20Q20%200%2040%2010%20T80%2010'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.25'%2F%3E%3C%2Fsvg%3E"); }
.wb-main > .wb-section.wb-tex-lines { --wb-tex-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'12'%20height%3D'12'%20viewBox%3D'0%200%2012%2012'%3E%3Cpath%20d%3D'M-1%201L1%20-1M0%2012L12%200M11%2013L13%2011'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E"); }
.wb-main > .wb-section.wb-tex-grid { --wb-tex-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Cpath%20d%3D'M0%20.5H28M.5%200V28'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E"); }
/* ── block kit: panel groups ─────────────────────────────────────────────── */
.wb-main > .wb-section.wb-bg-panel:is(.wb-panel-start, .wb-panel-continue) + .wb-section.wb-bg-panel.wb-panel-continue { padding-top: 0; }
.wb-main > .wb-section.wb-bg-panel:is(.wb-panel-start, .wb-panel-continue) + .wb-section.wb-bg-panel.wb-panel-continue > .wb-container {
  padding-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.wb-main > .wb-section.wb-bg-panel:is(.wb-panel-start, .wb-panel-continue):has(+ .wb-section.wb-bg-panel.wb-panel-continue) { padding-bottom: 0; }
.wb-main > .wb-section.wb-bg-panel:is(.wb-panel-start, .wb-panel-continue):has(+ .wb-section.wb-bg-panel.wb-panel-continue) > .wb-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* ── block kit: richText intro-split ─────────────────────────────────────── */
.wb-main .wb-rich.wb-rich-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem) clamp(2rem, 5vw, 4.5rem);
  max-width: none;
  margin: 0;
  columns: auto;
  text-align: left;
}
.wb-rich-split :is(.wb-rich-intro, .wb-rich-body) { min-width: 0; }
.wb-rich-split :is(.wb-rich-intro, .wb-rich-body) > :last-child { margin-bottom: 0; }
@media (min-width: 721px) {
  .wb-main .wb-rich.wb-rich-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* showcase */

/* ── showcase: team More toggle ─────────────────────────────────────────── */
.wb-team-more {
  margin-top: 1rem;
  padding: 0 0 0.2rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 2px solid currentColor;
  cursor: pointer;
}
.wb-team-more:hover { color: var(--wb-colour-primary); }
.wb-team-bio-more p { margin: 0; }
.wb-team-bio-more p + p { margin-top: 0.875rem; }
html:not(.wb-js) .wb-team-more { display: none; }
.wb-js .wb-team-member:not(.is-open) .wb-team-bio-more { display: none; }
/* ── showcase: testimonial quote + spotlight ────────────────────────────── */
.wb-quotes { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.wb-quote { margin: 0; min-width: 0; }
.wb-quotes-quote .wb-quote { max-width: 57.5rem; margin: 0 auto; text-align: center; }
.wb-quotes-quote .wb-stars { display: flex; justify-content: center; gap: 0.375rem; margin-bottom: 2.25rem; }
.wb-quote-text {
  margin: 0;
  font-family: var(--wb-font-heading);
  font-weight: 500;
  font-size: clamp(1.375rem, 2.5vw, 1.95rem);
  line-height: 1.34;
  letter-spacing: -0.008em;
}
.wb-quote-text::before { content: "\201C"; }
.wb-quote-text::after { content: "\201D"; }
.wb-quote-by { display: flex; align-items: center; justify-content: center; gap: 0.95rem; margin: 2.5rem 0 0; text-align: left; }
.wb-quote-avatar {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--wb-colour-background);
}
.wb-quote-name { display: block; font-weight: 700; }
.wb-quote-role { display: block; font-size: 0.9rem; opacity: 0.8; }
.wb-quote-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
}
.wb-quote-solo { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.wb-quote-photo img { display: block; width: 100%; height: auto; border-radius: var(--wb-radius-lg, 1rem); }
.wb-quote-spotlight .wb-stars { display: flex; gap: 0.375rem; margin-bottom: 1.25rem; }
.wb-quote-spotlight .wb-quote-text { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.wb-quote-spotlight .wb-quote-by { display: block; margin-top: 1.4rem; }
.wb-quote-spotlight :is(.wb-quote-name, .wb-quote-role) { display: inline; }
.wb-quote-body { margin: 1rem 0 0; max-width: 52ch; }
@media (max-width: 760px) {
  .wb-quote-spotlight { grid-template-columns: minmax(0, 1fr); }
  .wb-quote-photo { max-width: 24rem; }
}
/* ── showcase: pricing note + second link ───────────────────────────────── */
.wb-price-plan-note { margin: 0; font-weight: 700; }
.wb-price-alt {
  display: block;
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wb-price-alt:hover { color: var(--wb-colour-primary); }
/* ── showcase: whole-card path links ────────────────────────────────────── */
.wb-path-card-link { text-decoration: none; }
.wb-path-card-link:focus-visible { outline: 2px solid var(--wb-colour-primary); outline-offset: 3px; }
.wb-path-go { margin-top: auto; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .wb-path-card-link { transition: transform 0.2s, box-shadow 0.2s; }
  .wb-path-card-link:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(15, 23, 42, 0.35); }
}
/* ── showcase: marked comparison cells ──────────────────────────────────── */
.wb-compare-mark { display: inline-flex; align-items: center; gap: 0.5rem; }
.wb-kit-partial { flex: none; width: 1rem; height: 1rem; }
.wb-compare-yes svg { color: #15803d; }
.wb-compare-partial svg { color: #b45309; }
.wb-compare-no svg { color: #b91c1c; }
.wb-compare-tag {
  display: inline-block;
  padding: 0.125rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  border-radius: 0.3rem;
}
/* ── showcase: tabs slider ──────────────────────────────────────────────── */
.wb-tabs-slider .wb-tabs-bar {
  justify-content: flex-start;
  max-width: none;
  margin: 0;
  padding: 0 0 1.6rem;
  gap: 0.5rem;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0;
}
.wb-tabs-slider .wb-tab {
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--wb-colour-text);
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: var(--wb-radius-sm, 0.25rem);
  box-shadow: none;
}
.wb-tabs-slider .wb-tab.is-active {
  color: var(--wb-tone-inverse-copy, #ffffff);
  background: var(--wb-tone-inverse-ground, var(--wb-colour-secondary));
  border-color: var(--wb-tone-inverse-ground, var(--wb-colour-secondary));
}
.wb-tabs-viewport { position: relative; overflow: hidden; }
.wb-tabs-track { position: relative; }
.wb-js .wb-tabs-slider .wb-tab-panel:not(.is-active) {
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(5.5rem);
  pointer-events: none;
}
.wb-tabs-tools { display: flex; gap: 0.875rem; margin-top: 2rem; }
html:not(.wb-js) .wb-tabs-tools { display: none; }
.wb-tabs-arrow, .wb-carousel-arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: var(--wb-radius-sm, 0);
  cursor: pointer;
}
.wb-tabs-arrow:hover, .wb-carousel-arrow:hover {
  color: var(--wb-colour-on-primary);
  background: var(--wb-colour-primary);
  border-color: var(--wb-colour-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .wb-js .wb-tabs-slider .wb-tab-panel {
    transition: opacity 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s linear 0.5s;
  }
  .wb-js .wb-tabs-slider .wb-tab-panel.is-active { transition-delay: 0s; }
}
@media (max-width: 760px) {
  .wb-tabs-slider .wb-tabs-bar { gap: 0.375rem; }
  .wb-tabs-slider .wb-tab { font-size: 0.75rem; padding: 0.55rem 0.75rem; }
}
/* ── showcase: carousel ─────────────────────────────────────────────────── */
.wb-carousel-slides { display: grid; }
.wb-carousel-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  min-width: 0;
}
html:not(.wb-js) .wb-carousel-slide + .wb-carousel-slide { margin-top: 3rem; }
.wb-js .wb-carousel-slides { cursor: pointer; }
.wb-js .wb-carousel-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(0.75rem); }
.wb-js .wb-carousel-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.wb-carousel-heading {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2.375rem, 5.4vw, 4.75rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.026em;
}
.wb-carousel-body { margin: 1.375rem 0 0; max-width: 46ch; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.55; }
.wb-carousel-photo { width: clamp(8rem, 22vw, 18rem); aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.wb-carousel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; }
.wb-carousel-nav { display: flex; align-items: center; gap: 1.375rem; }
html:not(.wb-js) .wb-carousel-nav { display: none; }
.wb-carousel-dots { display: flex; gap: 0.125rem; }
.wb-carousel-dot { padding: 0.75rem 0.3rem; color: inherit; background: none; border: 0; cursor: pointer; }
.wb-carousel-dot span { display: block; width: 2.125rem; height: 0.25rem; border-radius: 2px; background: currentColor; opacity: 0.3; }
.wb-carousel-dot:hover span { opacity: 0.65; }
.wb-carousel-dot[aria-current="true"] span { background: var(--wb-colour-primary); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .wb-js .wb-carousel-slide {
    transition: opacity 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0s linear 0.5s;
  }
  .wb-js .wb-carousel-slide.is-active { transition-delay: 0s; }
  .wb-carousel-dot span { transition: opacity 0.2s, background 0.2s; }
}
@media (min-width: 761px) {
  .wb-carousel { position: relative; }
  .wb-carousel > .wb-container { padding-inline: clamp(4.5rem, 8vw, 9.375rem); }
  .wb-carousel-arrow { position: absolute; top: 45%; transform: translateY(-50%); z-index: 2; }
  .wb-carousel-arrow[data-wb-carousel-prev] { left: clamp(0.875rem, 1.6vw, 2.125rem); }
  .wb-carousel-arrow[data-wb-carousel-next] { right: clamp(0.875rem, 1.6vw, 2.125rem); }
}
@media (max-width: 760px) {
  .wb-carousel-slide { grid-template-columns: minmax(0, 1fr); }
  .wb-carousel-photo { order: -1; width: 8rem; }
  .wb-carousel-foot .wb-button { width: 100%; justify-content: center; }
  .wb-carousel-dot span { width: 1.5rem; }
}

/* ── showcase: hero product stage ───────────────────────────────────────── */
.wb-stage { position: relative; padding-bottom: 4rem; }
.wb-stage-photo {
  width: min(35rem, 96%);
  aspect-ratio: 1;
  margin-left: auto;
  overflow: hidden;
  border-radius: var(--wb-radius-lg, 1.25rem);
  box-shadow: 0.875rem 1.125rem 0 color-mix(in srgb, var(--wb-colour-primary) 35%, transparent),
    0 2.125rem 4rem -1.5rem rgba(15, 23, 42, 0.35);
}
.wb-stage-photo img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.wb-stage-blob { border-radius: 50% 62% 44% 50% / 50% 44% 60% 50%; }
.wb-overlay-card {
  position: absolute;
  left: -1.5rem;
  bottom: 0.5rem;
  width: min(18.25rem, 80%);
  overflow: hidden;
  text-align: left;
  color: var(--wb-colour-text);
  background: var(--wb-colour-background);
  border: 2px solid var(--wb-colour-secondary);
  border-radius: 0.875rem;
  box-shadow: 0 22px 44px -20px rgba(16, 35, 61, 0.3), 0 2px 6px rgba(16, 35, 61, 0.08);
}
.wb-overlay-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.875rem 1rem 0.7rem;
  text-align: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
.wb-overlay-title { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--wb-font-heading); font-weight: 600; font-size: 0.9375rem; }
.wb-overlay-eyebrow { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wb-colour-muted); }
.wb-overlay-live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); }
.wb-overlay-list { list-style: none; margin: 0; padding: 0.25rem 1rem 0.75rem; }
.wb-overlay-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0;
  font-size: 0.84rem;
  line-height: 1.35;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.wb-overlay-list li:last-child { border-bottom: 0; }
.wb-overlay-ico { flex: none; margin-top: 0.1rem; color: #15803d; }
.wb-overlay-svg { display: block; width: 1rem; height: 1rem; }
.wb-overlay-text { flex: 1; min-width: 0; }
.wb-overlay-time { flex: none; font-size: 0.6875rem; white-space: nowrap; color: var(--wb-colour-muted); }
.wb-overlay-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: min(18.75rem, 70%);
  padding: 0.7rem 0.95rem;
  text-align: left;
  color: var(--wb-colour-text);
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.75rem;
  box-shadow: 0 14px 30px -14px rgba(16, 35, 61, 0.28), 0 2px 5px rgba(16, 35, 61, 0.08);
}
.wb-overlay-chip-a { top: 1.875rem; left: -2.4rem; }
.wb-overlay-chip-b { right: -1.9rem; bottom: 6rem; align-items: flex-start; }
.wb-overlay-chip-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  color: var(--wb-colour-primary);
  background: color-mix(in srgb, var(--wb-colour-primary) 14%, transparent);
}
.wb-overlay-chip-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wb-colour-muted); }
.wb-overlay-chip-value { display: block; margin-top: 1px; font-size: 0.9375rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .wb-stage-blob { animation: wb-stage-blob 18s ease-in-out infinite; }
  .wb-overlay-chip { animation: wb-chip-bob 6s ease-in-out infinite; }
  .wb-overlay-chip-b { animation-delay: -3s; }
  .wb-overlay-live { animation: wb-live-pulse 2s ease-in-out infinite; }
}
@keyframes wb-stage-blob {
  0%, 100% { border-radius: 50% 62% 44% 50% / 50% 44% 60% 50%; }
  33% { border-radius: 50% 55% 51% 50% / 50% 53% 49% 50%; }
  66% { border-radius: 50% 66% 40% 50% / 50% 40% 64% 50%; }
}
@keyframes wb-chip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wb-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (max-width: 1080px) {
  .wb-overlay-chip-a { left: 0; }
  .wb-overlay-chip-b { right: 0; }
}
@media (max-width: 760px) {
  .wb-stage { display: flex; flex-direction: column; align-items: center; padding-bottom: 0; }
  .wb-stage-photo { width: min(20.6rem, 78%); margin: 0 auto; }
  .wb-overlay-card { position: static; width: 100%; max-width: 22.5rem; margin-top: -2.1rem; }
  .wb-overlay-chip { display: none; }
}
/* ── showcase: cta mosaic band ──────────────────────────────────────────── */
.wb-band-panel {
  position: relative;
  overflow: hidden;
  color: var(--wb-colour-on-primary);
  background: var(--wb-colour-primary);
  border-radius: var(--wb-radius-lg, 1.25rem);
}
.wb-band-mosaic {
  position: absolute;
  inset: -0.5rem;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.375rem;
  align-content: stretch;
}
.wb-band-mosaic img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.375rem; }
.wb-band-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(94deg, var(--wb-colour-primary) 0%, var(--wb-colour-primary) 34%,
    color-mix(in srgb, var(--wb-colour-primary) 90%, transparent) 52%,
    color-mix(in srgb, var(--wb-colour-primary) 55%, transparent) 72%,
    color-mix(in srgb, var(--wb-colour-primary) 28%, transparent) 100%);
}
.wb-band-copy { position: relative; z-index: 2; max-width: 40rem; padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.6rem, 4vw, 3.5rem); text-align: left; }
.wb-band-heading { margin: 0; max-width: 14ch; font-size: clamp(1.875rem, 3.6vw, 3.125rem); line-height: 1.05; color: inherit; }
.wb-band-body { margin: 1.5rem 0 0; max-width: 40ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; }
.wb-band-ticks { list-style: none; margin: 1.875rem 0 0; padding: 0; display: grid; gap: 0.95rem; }
.wb-band-ticks li { display: flex; align-items: center; gap: 0.8rem; font-size: 1.1875rem; font-weight: 600; }
.wb-band-ticks .wb-kit-tick {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.wb-band-copy .wb-cta-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; margin-top: 2.25rem; }
.wb-band-copy .wb-button { color: var(--wb-colour-primary); background: var(--wb-colour-on-primary); border-color: var(--wb-colour-on-primary); }
.wb-band-copy :is(.wb-button-secondary, .wb-button-ghost) { color: var(--wb-colour-on-primary); background: transparent; border-color: currentColor; }
.wb-animate.wb-js .wb-cta-band:not(.wb-inview) .wb-band-mosaic img { opacity: 0; transform: translateX(2.875rem) scale(0.92); }
@media (prefers-reduced-motion: no-preference) {
  .wb-animate .wb-band-mosaic img { transition: opacity 0.6s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1); }
  .wb-animate .wb-band-mosaic img:nth-child(9n + 2) { transition-delay: 0.06s; }
  .wb-animate .wb-band-mosaic img:nth-child(9n + 3) { transition-delay: 0.12s; }
  .wb-animate .wb-band-mosaic img:nth-child(9n + 4) { transition-delay: 0.18s; }
  .wb-animate .wb-band-mosaic img:nth-child(9n + 5) { transition-delay: 0.24s; }
  .wb-animate .wb-band-mosaic img:nth-child(9n + 6) { transition-delay: 0.3s; }
  .wb-animate .wb-band-mosaic img:nth-child(9n + 7) { transition-delay: 0.36s; }
  .wb-animate .wb-band-mosaic img:nth-child(9n + 8) { transition-delay: 0.42s; }
  .wb-animate .wb-band-mosaic img:nth-child(9n) { transition-delay: 0.48s; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-animate.wb-js .wb-cta-band:not(.wb-inview) .wb-band-mosaic img { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .wb-band-mosaic { grid-template-columns: repeat(6, 1fr); }
  .wb-band-mosaic img:nth-child(n + 25) { display: none; }
  .wb-band-panel::before {
    background: linear-gradient(180deg, var(--wb-colour-primary) 0%,
      color-mix(in srgb, var(--wb-colour-primary) 88%, transparent) 60%,
      color-mix(in srgb, var(--wb-colour-primary) 50%, transparent) 100%);
  }
}
@media (max-width: 760px) {
  .wb-band-copy .wb-button { width: 100%; justify-content: center; }
}
/* ── showcase: splitMedia heading, cards, frames ────────────────────────── */
.wb-split-lead, .wb-split-punch { display: block; }
.wb-split-punch { margin-top: 0.16em; color: var(--wb-colour-primary); }
.wb-split-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0 0 1.25rem;
}
.wb-split-card {
  min-width: 0;
  padding: 1.625rem 1.625rem 1.75rem;
  color: var(--wb-colour-text);
  background: var(--wb-colour-background);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--wb-radius-md, 0.75rem);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.wb-split-card:hover { border-color: var(--wb-colour-primary); }
.wb-split-card-title { margin: 0; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.01em; }
.wb-split-card-desc { margin: 0.625rem 0 0; font-size: 0.97rem; line-height: 1.5; color: var(--wb-colour-muted); }
.wb-frame-browser {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: var(--wb-radius-md, 0.75rem);
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.35);
}
.wb-frame-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; background: #f1f5f9; border-bottom: 1px solid rgba(15, 23, 42, 0.1); }
.wb-frame-dots { display: inline-flex; gap: 0.35rem; }
.wb-frame-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(15, 23, 42, 0.22); }
.wb-frame-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0.2rem 0.75rem;
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #475569;
  background: #ffffff;
  border-radius: 999px;
}
.wb-split-media .wb-frame-browser img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; }
.wb-frame-phone { max-width: 18rem; margin: 0 auto; padding: 0.6rem; background: #0f172a; border-radius: 2.25rem; box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.45); }
.wb-split-media .wb-frame-phone img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 1.7rem; }
/* ── showcase: splitMedia group ─────────────────────────────────────────── */
.wb-split-group-head { max-width: 46rem; margin-bottom: 2.75rem; }
.wb-split-group-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.wb-split-group-flip .wb-split-media { order: 2; }
.wb-split-group-side { min-width: 0; }
.wb-split-group-side .wb-split-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
@media (max-width: 900px) {
  .wb-split-group-row { grid-template-columns: minmax(0, 1fr); }
  .wb-split-group-flip .wb-split-media { order: 0; }
}
/* ── showcase: splitMedia statement ─────────────────────────────────────── */
.wb-section.wb-split-statement {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  min-height: min(100svh, 60rem);
  padding: 0;
  overflow: hidden;
}
.wb-statement-media-left .wb-statement-photo { order: -1; }
.wb-statement-copy { min-width: 0; padding: clamp(3.5rem, 8vw, 6rem) 7vw; }
.wb-split-statement .wb-split-heading { margin: 0; max-width: 15ch; font-size: clamp(2.25rem, 4.1vw, 3.875rem); line-height: 1.04; }
.wb-split-statement .wb-split-lead { opacity: 0.62; }
.wb-split-statement .wb-split-ctas { margin-top: 3.5rem; }
.wb-statement-photo { position: relative; align-self: stretch; min-height: 20rem; overflow: hidden; }
.wb-statement-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.wb-animate.wb-js .wb-split-statement:not(.wb-inview) :is(.wb-split-lead, .wb-split-punch, .wb-split-ctas) { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: no-preference) {
  .wb-animate .wb-split-statement :is(.wb-split-lead, .wb-split-punch, .wb-split-ctas) {
    transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  }
  .wb-animate .wb-split-statement .wb-split-punch { transition-delay: 0.13s; }
  .wb-animate .wb-split-statement .wb-split-ctas { transition-delay: 0.26s; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-animate.wb-js .wb-split-statement:not(.wb-inview) :is(.wb-split-lead, .wb-split-punch, .wb-split-ctas) { opacity: 1; transform: none; }
  .wb-animate.wb-js .wb-split-statement:not(.wb-inview) .wb-split-lead { opacity: 0.62; }
}
@media print {
  .wb-animate.wb-js .wb-cta-band:not(.wb-inview) .wb-band-mosaic img,
  .wb-animate.wb-js .wb-split-statement:not(.wb-inview) :is(.wb-split-punch, .wb-split-ctas) { opacity: 1 !important; transform: none !important; }
  .wb-animate.wb-js .wb-split-statement:not(.wb-inview) .wb-split-lead { opacity: 0.62 !important; transform: none !important; }
}
@media (max-width: 900px) {
  .wb-section.wb-split-statement { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wb-statement-photo, .wb-statement-media-left .wb-statement-photo { order: 2; min-height: 0; aspect-ratio: 16 / 11; }
  .wb-statement-copy { padding: 3.5rem 1.875rem 2.75rem; }
  .wb-split-statement .wb-split-ctas .wb-button { width: 100%; justify-content: center; }
}

/* ── pricing layout: period line, actions, panel plan, button placement ── */
.wb-price-per { margin: 0; font-size: 0.9375rem; }
.wb-price-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: auto; padding-top: 1.5rem; }
.wb-price-card .wb-price-actions .wb-button { margin: 0; align-self: stretch; text-align: center; }
.wb-price-card-panel { border: 0; }
.wb-price-card-panel :is(.wb-price-subtitle, .wb-price-desc) { max-width: 26ch; font-size: 1.0625rem; font-weight: 400; }
.wb-main .wb-section .wb-price-card-panel.wb-price-card-inverse :is(.wb-button-secondary, .wb-button-ghost) {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 50%, transparent);
}
.wb-pricing-cta-full .wb-price-card > .wb-button { align-self: stretch; text-align: center; }
.wb-pricing-cta-first .wb-price-card > .wb-button { margin-top: 1.25rem; }
.wb-pricing-cta-first .wb-price-features {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* ── pricing edge: square cards, bottom rule, straddling flag ── */
.wb-main .wb-section .wb-pricing-edge { gap: 26px; align-items: start; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card {
  position: relative;
  gap: 0;
  padding: 38px 40px 36px;
  border: 1px solid var(--wb-price-border, color-mix(in srgb, currentColor 14%, transparent));
  border-bottom: 4px solid var(--wb-price-rule, var(--wb-colour-secondary));
  border-radius: 0;
  box-shadow: 0 20px 44px -30px color-mix(in srgb, var(--wb-colour-secondary) 22%, transparent);
}
.wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-card-featured {
  border: 2px solid var(--wb-price-border, var(--wb-colour-secondary));
  border-bottom: 4px solid var(--wb-price-rule, var(--wb-colour-secondary));
  box-shadow: 0 36px 68px -30px color-mix(in srgb, var(--wb-colour-secondary) 42%, transparent);
}
.wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-card-panel { border: 0; border-bottom: 4px solid var(--wb-price-rule, var(--wb-colour-primary)); }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-tinted {
  --wb-colour-text: var(--wb-price-ink);
  --wb-colour-muted: var(--wb-price-ink-muted);
  --wb-colour-on-surface: var(--wb-price-ink);
  --wb-colour-on-surface-muted: var(--wb-price-ink-muted);
  background: var(--wb-price-ground);
  color: var(--wb-price-ink);
}
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-badge {
  position: absolute;
  top: -15px;
  left: 48px;
  align-self: auto;
  margin: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 0;
  background: var(--wb-tone-inverse-ground, var(--wb-colour-secondary));
  color: var(--wb-tone-inverse-copy, #ffffff);
  font-size: 11.5px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-title { font-size: 24px; font-weight: 700; line-height: 1.05; letter-spacing: -0.018em; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card:not(.wb-price-card-panel) .wb-price-subtitle { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; font-weight: 400; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-amount {
  margin: 18px 0 0;
  font-size: clamp(46px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.032em;
}
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-per { margin: 8px 0 0; font-size: 14px; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card:not(.wb-price-card-panel) .wb-price-plan-note { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--wb-colour-secondary); }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card > .wb-button, .wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-actions { margin-top: 22px; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-actions { padding-top: 0; gap: 12px; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-button { justify-content: center; padding: 15px 22px; font-size: 16px; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-alt { margin-top: 10px; font-size: 13px; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-features {
  margin: 40px 0 0;
  padding-top: 30px;
  gap: 16px;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-features li { gap: 11px; font-size: 15px; line-height: 1.45; }
.wb-main .wb-section .wb-pricing-edge > .wb-price-card .wb-price-features .wb-kit-tick {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  margin-top: 0;
  padding: 5px;
  background: color-mix(in srgb, var(--wb-colour-secondary) 10%, transparent);
  color: var(--wb-colour-secondary);
}
@media (max-width: 1080px) {
  .wb-main .wb-section .wb-pricing-edge { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .wb-main .wb-section .wb-pricing-edge > .wb-price-card :is(.wb-price-subtitle, .wb-price-per, .wb-price-plan-note, .wb-price-features li) { font-size: 16.5px; }
}

/* ── pricing edge: per-plan dark colours ── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-dark-ground {
  --wb-colour-text: var(--wb-price-ink-dark);
  --wb-colour-muted: var(--wb-price-ink-muted-dark);
  --wb-colour-on-surface: var(--wb-price-ink-dark);
  --wb-colour-on-surface-muted: var(--wb-price-ink-muted-dark);
  background: var(--wb-price-ground-dark);
  color: var(--wb-price-ink-dark);
}
:root:not([data-theme="light"]) .wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-dark-border {
  border-top-color: var(--wb-price-border-dark);
  border-left-color: var(--wb-price-border-dark);
  border-right-color: var(--wb-price-border-dark);
}
:root:not([data-theme="light"]) .wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-dark-rule { border-bottom-color: var(--wb-price-rule-dark); }
}
:root[data-theme="dark"] .wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-dark-ground {
  --wb-colour-text: var(--wb-price-ink-dark);
  --wb-colour-muted: var(--wb-price-ink-muted-dark);
  --wb-colour-on-surface: var(--wb-price-ink-dark);
  --wb-colour-on-surface-muted: var(--wb-price-ink-muted-dark);
  background: var(--wb-price-ground-dark);
  color: var(--wb-price-ink-dark);
}
:root[data-theme="dark"] .wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-dark-border {
  border-top-color: var(--wb-price-border-dark);
  border-left-color: var(--wb-price-border-dark);
  border-right-color: var(--wb-price-border-dark);
}
:root[data-theme="dark"] .wb-main .wb-section .wb-pricing-edge > .wb-price-card.wb-price-dark-rule { border-bottom-color: var(--wb-price-rule-dark); }

/* ── pricing: the included box ── */
.wb-price-included {
  margin-top: 28px;
  padding: 54px 56px 58px;
  background: var(--wb-colour-background);
  color: var(--wb-colour-text);
  border: 2px solid var(--wb-colour-secondary);
  border-bottom-width: 5px;
  box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--wb-colour-secondary) 35%, transparent);
}
.wb-price-included-title {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wb-price-included-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 56px;
}
.wb-price-included-list li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 600;
}
.wb-price-bigtick {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: var(--wb-tone-inverse-ground, var(--wb-colour-secondary));
  color: var(--wb-tone-inverse-copy, #ffffff);
  font-size: 14px;
  font-weight: 800;
}
@media (max-width: 900px) {
  .wb-price-included { padding: 36px 26px 40px; }
  .wb-price-included-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ── pricing: onpanel plan action ── */
.wb-main .wb-section .wb-price-card.wb-price-card-inverse .wb-button.wb-button-onpanel.wb-button-onpanel {
  color: var(--wb-colour-feature-deep, var(--wb-colour-primary));
  background: var(--wb-colour-on-feature, #ffffff);
}

/* parity */

/* ── richText subheadings and lists ── */
.wb-rich-subheading { margin: 2rem 0 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; }
.wb-rich-subheading + p { margin-top: 0.625rem; }
.wb-rich-item { margin-top: 2.125rem; padding-left: 1.375rem; border-left: 3px solid var(--wb-colour-primary); }
.wb-rich-item > .wb-rich-subheading:first-child { margin-top: 0; }
.wb-rich-list { list-style: none; margin: 1.125rem 0 0; padding: 0; }
.wb-rich-list li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.875rem;
  line-height: 1.6;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.wb-rich-list li::before { content: "\2013"; position: absolute; left: 0.375rem; font-weight: 800; color: var(--wb-colour-primary); }
.wb-tone-accent .wb-rich-item { border-left-color: currentColor; }
.wb-tone-accent .wb-rich-list li::before { color: inherit; }

/* ── comparison: copy after the table ── */
.wb-compare-after { max-width: 46rem; margin: 1.5rem auto 0; }
.wb-compare-after p { margin: 0 0 1rem; }
.wb-compare-after p:last-child { margin-bottom: 0; }

/* ── gallery figure: full-width photo under a heading row ── */
.wb-figure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem;
  margin-bottom: 2.75rem;
}
.wb-figure-heading { margin: 0; max-width: 18ch; font-size: clamp(1.875rem, 3.8vw, 3.25rem); line-height: 1.06; letter-spacing: -0.024em; }
.wb-figure { margin: 0; }
.wb-figure + .wb-figure { margin-top: 1.5rem; }
.wb-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border-bottom: 4px solid var(--wb-colour-secondary);
  box-shadow: 0 36px 70px -32px rgba(22, 52, 90, 0.4);
}
@media (max-width: 760px) { .wb-figure-head { margin-bottom: 1.75rem; } }

/* ── contactForm split: intro and tiles beside the form ── */
.wb-contact-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 5rem;
  align-items: start;
}
.wb-contact-intro .wb-eyebrow { margin-top: 0; }
.wb-contact-heading { margin: 0; font-size: clamp(2.375rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.026em; }
.wb-contact-sub { margin: 1.125rem 0 0; max-width: 38ch; font-size: 1.125rem; line-height: 1.6; color: var(--wb-colour-muted); }
.wb-contact-ways { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 2.5rem; }
.wb-contact-way {
  display: block;
  padding: 1.5rem 1.75rem;
  color: var(--wb-colour-text);
  text-decoration: none;
  background: color-mix(in srgb, var(--wb-colour-secondary) 10%, var(--wb-colour-background));
  border-bottom: 4px solid var(--wb-colour-secondary);
  transition: transform 0.18s, box-shadow 0.18s;
}
.wb-contact-way:nth-child(2) {
  background: color-mix(in srgb, var(--wb-colour-primary) 14%, var(--wb-colour-background));
  border-bottom-color: var(--wb-colour-primary);
}
.wb-contact-way-label {
  display: block;
  font-family: var(--wb-font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wb-colour-muted);
}
.wb-contact-way-value { display: block; margin-top: 0.375rem; font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; letter-spacing: -0.015em; }
.wb-contact-note { margin: 1.75rem 0 0; font-family: var(--wb-font-heading); font-size: 0.84rem; font-weight: 700; color: var(--wb-colour-secondary); }
.wb-contact-split .wb-contact-form { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wb-contact-way:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(22, 52, 90, 0.3); }
}
@media (max-width: 980px) {
  .wb-contact-split { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
}

/* ── hero note under the buttons ── */
.wb-hero-note { margin: 1.125rem 0 0; font-size: 0.906rem; color: var(--wb-colour-muted); }
.wb-hero-cover .wb-hero-note { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 760px) { .wb-hero-note { margin-top: 0.75rem; font-size: 0.8125rem; } }

/* ── cta inline: copy and buttons on one row ── */
div.wb-cta.wb-cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  max-width: none;
  margin: 0;
  text-align: left;
}
.wb-cta-inline .wb-cta-copy { flex: 1 1 18rem; min-width: 0; }
.wb-cta-inline .wb-cta-heading { margin: 0; }
.wb-cta-inline .wb-cta-body { margin: 0.5rem 0 0; }
.wb-cta-inline .wb-cta-buttons { margin: 0; justify-content: flex-start; }
.wb-cta-lead {
  margin: 0;
  max-width: 24ch;
  font-family: var(--wb-font-heading);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
@media (max-width: 760px) {
  .wb-cta-inline .wb-cta-buttons, .wb-cta-inline .wb-cta-buttons .wb-button { width: 100%; justify-content: center; }
}

/* ── quote marks written into the quote ── */
.wb-quote-text.wb-quote-marked::before, .wb-quote-text.wb-quote-marked::after { content: none; }

/* parity copy */

/* ── richText lead line ── */
.wb-rich .wb-rich-lead { margin-top: 1.125rem; font-size: 1.2em; font-weight: 700; line-height: 1.45; }

/* ── cta text link ── */
.wb-cta-buttons .wb-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--wb-colour-primary);
  text-decoration: none;
}
.wb-cta-buttons .wb-cta-link:hover { text-decoration: underline; }
.wb-cta-link .wb-app-icon { width: 1.15em; height: 1.15em; }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) .wb-cta-link { color: inherit; }

/* card tones */
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist, .wb-team-grid, .wb-faq-list).wb-cards-secondary-tint > :is(.wb-faq-item, .wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) {
  --wb-colour-text: var(--wb-kit-text);
  --wb-colour-muted: var(--wb-kit-muted);
  --wb-colour-on-surface: var(--wb-kit-text);
  --wb-colour-on-surface-muted: var(--wb-kit-muted);
  color: var(--wb-colour-text);
  background: var(--wb-colour-secondary-tint);
}
.wb-main .wb-section .wb-container :is(.wb-features-grid, .wb-paths-grid, .wb-pricing-grid, .wb-bloglist, .wb-team-grid, .wb-faq-list).wb-cards-card > :is(.wb-faq-item, .wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-calc-plain, .wb-calc--two-card > .wb-calc-inputs, .wb-calc--two-card > .wb-calc-results, .wb-calc-reco, .wb-chat-panel, .wb-field, .wb-path-card, .wb-price-card, .wb-compare-wrap) {
  --wb-colour-text: var(--wb-kit-text);
  --wb-colour-muted: var(--wb-kit-muted);
  --wb-colour-on-surface: var(--wb-kit-text);
  --wb-colour-on-surface-muted: var(--wb-kit-muted);
  color: var(--wb-colour-text);
  background: var(--wb-colour-card);
}

.wb-nav a[aria-current="page"] {
  color: var(--wb-colour-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.wb-header-actions { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.wb-header-actions .wb-portal-link { margin-left: 0; }
.wb-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  white-space: nowrap;
}
.wb-header-cta.wb-button-ghost { background: transparent; color: var(--wb-colour-primary); box-shadow: none; }
.wb-header-cta.wb-button-ghost:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.wb-navkit-stacked-masthead .wb-header-actions { grid-column: 2; grid-row: 2; justify-self: end; }
@media (min-width: 901px) {
  .wb-has-cta .wb-header-inner { gap: 1.5rem; }
  .wb-has-cta .wb-nav { flex-wrap: nowrap; }
  .wb-has-cta .wb-nav a { white-space: nowrap; }
  .wb-navkit-minimal-ghost .wb-has-cta .wb-header-inner { gap: 1.25rem; }
  .wb-navkit-minimal-ghost .wb-has-cta .wb-nav { gap: 1.4rem; }
  .wb-navkit-minimal-ghost .wb-has-cta :is(.wb-nav a, .wb-portal-link) { letter-spacing: 0.12em; }
  .wb-navkit-left-rail .wb-header-actions { margin-top: auto; flex-direction: column; align-items: stretch; }
  .wb-navkit-left-rail .wb-header-actions .wb-portal-link { margin-top: 0; }
}
@media (max-width: 900px) {
  .wb-design.wb-js:not(.wb-navkit-overlay) .wb-has-cta .wb-header-cta { display: none; }
  .wb-design.wb-js:not(.wb-navkit-overlay) .wb-has-cta.wb-nav-open .wb-header-actions { width: 100%; flex-wrap: wrap; }
  .wb-design.wb-js:not(.wb-navkit-overlay) .wb-has-cta.wb-nav-open .wb-header-cta { display: inline-flex; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .wb-js:not(.wb-design) .wb-has-cta .wb-header-cta { display: none; }
  .wb-js:not(.wb-design) .wb-has-cta.wb-nav-open .wb-header-actions { width: 100%; flex-wrap: wrap; }
  .wb-js:not(.wb-design) .wb-has-cta.wb-nav-open .wb-header-cta { display: inline-flex; flex: 1 1 100%; }
}
html .wb-site-footer.wb-footer-dark {
  --wb-colour-background: #16345A;
  --wb-colour-surface: #16345A;
  --wb-colour-text: #ffffff;
  --wb-colour-muted: #cbd5e1;
  --wb-colour-on-surface: #ffffff;
  --wb-colour-on-surface-muted: #cbd5e1;
  --wb-colour-primary: #ffffff;
  --wb-colour-on-primary: #16345A;
  background: #16345A;
  color: #ffffff;
  border-top-color: rgba(255, 255, 255, 0.12);
}

.wb-site-footer.wb-footer-has-brand > .wb-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem 3rem;
  align-items: center;
}
.wb-footer-brand { display: inline-flex; justify-self: center; }
.wb-footer-brand .wb-logo { height: auto; max-height: 140px; width: auto; max-width: 100%; }
@media (max-width: 720px) {
  .wb-site-footer.wb-footer-has-brand > .wb-container { grid-template-columns: minmax(0, 1fr); }
  .wb-footer-brand { justify-self: start; }
  .wb-footer-brand .wb-logo { max-height: 96px; }
}

.wb-footer-directory .wb-footer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.75rem 2.25rem;
  align-items: start;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-colour-text) 16%, transparent);
}
.wb-footer-directory .wb-footer-head {
  margin: 0 0 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid color-mix(in srgb, var(--wb-colour-text) 22%, transparent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wb-colour-text);
}
.wb-footer-directory .wb-footer-col a {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wb-colour-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.wb-footer-directory a:is(:hover, :focus-visible) { color: var(--wb-colour-text); }
.wb-footer-directory .wb-footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 2.5rem;
}
.wb-footer-directory .wb-footer-brand { display: inline-flex; margin-bottom: 0.75rem; }
.wb-footer-directory .wb-footer-brand .wb-logo { height: 46px; max-height: 46px; width: auto; }
.wb-footer-directory :is(.wb-footer-copy, .wb-footer-text) { margin: 0.45rem 0 0; font-size: 0.9rem; color: var(--wb-colour-muted); }
.wb-footer-directory .wb-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.4rem; }
.wb-footer-directory .wb-footer-legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.wb-footer-directory .wb-footer-legal-links a {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wb-colour-muted);
  text-decoration: none;
}
.wb-footer-directory .wb-footer-region {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--wb-colour-text) 25%, transparent);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--wb-colour-muted);
}
@media (max-width: 1080px) {
  .wb-footer-directory .wb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}
@media (max-width: 620px) {
  .wb-footer-directory .wb-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-footer-directory .wb-footer-col a { font-size: 1rem; padding: 0.45rem 0; }
  .wb-footer-directory .wb-footer-legal-links a { font-size: 0.95rem; padding: 0.5rem 0.35rem; }
}

.wb-has-mega .wb-header-inner { position: relative; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-nav-item.wb-nav-mega { position: static; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-nav-mega > .wb-nav-sub.wb-mega {
  left: 0;
  right: 0;
  top: 100%;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--wb-colour-text) 12%, transparent);
  border-bottom: 3px solid var(--wb-colour-primary);
  border-radius: 0;
  background: var(--wb-colour-background);
  box-shadow: 0 24px 40px -26px rgba(15, 23, 42, 0.3);
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-inner {
  display: flex;
  gap: clamp(1.75rem, 4vw, 4rem);
  padding: clamp(1.75rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4.5rem);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-group.wb-mega-grid { flex-grow: 2; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-group + .wb-mega-group { border-left: 1px solid color-mix(in srgb, var(--wb-colour-text) 12%, transparent); padding-left: clamp(1.5rem, 3.5vw, 4rem); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-head {
  margin: 0 0 1.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-colour-primary);
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega a:not(.wb-button) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--wb-colour-text);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-decoration: none;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-grid .wb-mega-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2.5rem; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-tiles .wb-mega-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1rem; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-item { display: flex; gap: 1.1rem; align-items: flex-start; padding: 0.9rem 1rem; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-tiles .wb-mega-item { flex-direction: column; align-items: center; gap: 1rem; padding: 1.6rem 0.75rem 1.4rem; text-align: center; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-item:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--wb-colour-primary) 9%, transparent); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-ico {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wb-colour-primary);
  background: var(--wb-colour-background);
  color: var(--wb-colour-primary);
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-tiles .wb-mega-ico { flex-basis: 52px; width: 52px; height: 52px; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-ico svg { width: 22px; height: 22px; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-item:is(:hover, :focus-visible) .wb-mega-ico { background: var(--wb-colour-primary); color: var(--wb-colour-on-primary); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-label { display: block; font-weight: 700; line-height: 1.3; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-note { display: block; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 500; line-height: 1.5; color: var(--wb-colour-muted); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-link { display: block; padding: 1rem 0.15rem; border-bottom: 1px solid color-mix(in srgb, var(--wb-colour-text) 12%, transparent); font-weight: 600; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-list > .wb-mega-link:first-of-type { border-top: 1px solid color-mix(in srgb, var(--wb-colour-text) 12%, transparent); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-link:is(:hover, :focus-visible) { color: var(--wb-colour-primary); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-link.wb-mega-all { margin-top: 1.25rem; border: 0; color: var(--wb-colour-primary); font-weight: 700; }
.wb-mega-all::after { content: " \2192"; content: " \2192" / ""; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo {
  flex: 0 0 clamp(15rem, 24vw, 22rem);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  background: var(--wb-colour-text);
  color: var(--wb-colour-background);
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo-img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity 0.45s ease; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo-text { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: inherit; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-promo a.wb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: var(--wb-radius-sm, 0.5rem);
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-promo a.wb-button-secondary { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-nav-item.wb-mega-shut > .wb-nav-sub { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
@media (max-width: 1180px) {
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-grid .wb-mega-cells { grid-template-columns: minmax(0, 1fr); }
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo { flex-basis: 14rem; padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-mega-promo-img { transition: none; }
}
@media (max-width: 900px) {
  .wb-design.wb-js .wb-nav-open .wb-nav .wb-mega :is(.wb-mega-ico, .wb-mega-note, .wb-mega-promo, .wb-mega-head) { display: none; }
  .wb-design.wb-js .wb-nav-open .wb-nav .wb-mega :is(.wb-mega-inner, .wb-mega-group, .wb-mega-cells) { display: block; padding: 0; border: 0; }
}
@media (max-width: 640px) {
  .wb-js:not(.wb-design) .wb-nav-open .wb-nav .wb-mega :is(.wb-mega-ico, .wb-mega-note, .wb-mega-promo, .wb-mega-head) { display: none; }
  .wb-js:not(.wb-design) .wb-nav-open .wb-nav .wb-mega :is(.wb-mega-inner, .wb-mega-group, .wb-mega-cells) { display: block; padding: 0; border: 0; }
}

.wb-mobile-menu { display: none; }
@media (max-width: 900px) {
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-nav > :not(.wb-mobile-menu) { display: none; }
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-nav ~ .wb-menu-actions, .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-header-actions .wb-header-cta { display: none; }
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-menu { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-menu .wb-mobile-link { font-size: 1.3rem; font-weight: 700; }
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-menu .wb-mobile-sub { padding-left: 1.25rem; font-size: 1.05rem; font-weight: 600; }
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.25rem 0 0.5rem; }
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-actions a.wb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-top: 0;
  }
  .wb-design.wb-js .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-actions a.wb-mobile-action-link { border-top: 0; font-size: 1.05rem; font-weight: 600; }
}
@media (max-width: 640px) {
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-nav > :not(.wb-mobile-menu) { display: none; }
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-nav ~ .wb-menu-actions, .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-header-actions .wb-header-cta { display: none; }
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-menu { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-menu .wb-mobile-link { font-size: 1.3rem; font-weight: 700; }
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-menu .wb-mobile-sub { padding-left: 1.25rem; font-size: 1.05rem; font-weight: 600; }
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.25rem 0 0.5rem; }
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-actions a.wb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.75rem 1.25rem;
    border-top: 0;
  }
  .wb-js:not(.wb-design) .wb-site-header.wb-has-mobile-menu.wb-nav-open .wb-mobile-actions a.wb-mobile-action-link { border-top: 0; font-size: 1.05rem; font-weight: 600; }
}

.wb-hide-on-scroll:not(.wb-design):not(.wb-sticky) .wb-site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--wb-colour-background);
}
.wb-hide-on-scroll .wb-site-header.wb-header-away:not(.wb-nav-open):not(:has(:focus-visible)) { translate: 0 -102%; }
@media (prefers-reduced-motion: no-preference) {
  .wb-hide-on-scroll:not(.wb-hdrkit-reveal) .wb-site-header {
    transition: translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s ease, color 0.28s ease,
      border-color 0.28s ease, box-shadow 0.28s ease;
  }
}

.wb-utility-inner.wb-utility-linked { align-items: center; justify-content: flex-end; gap: 0.5rem 1.4rem; }
.wb-utility-lead { opacity: 0.72; }
.wb-utility-phone { display: inline-flex; align-items: center; gap: 0.55rem; color: inherit; font-weight: 700; text-decoration: none; }
a.wb-utility-phone:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.wb-utility-region {
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--wb-colour-primary);
  color: var(--wb-colour-on-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
@media (max-width: 760px) {
  .wb-utility-inner.wb-utility-linked { justify-content: center; }
  .wb-utility-lead { display: none; }
}

.wb-menu-brand-rest { display: inline-flex; align-items: center; gap: 0.6rem; }
.wb-menu-brand-open { display: none; align-items: center; gap: 0.6rem; }
@media (max-width: 1080px) {
  :root.wb-js .wb-site-header.wb-menu-overlay .wb-header-inner { gap: 0.75rem; }
  :root.wb-js .wb-site-header.wb-menu-overlay .wb-header-inner > .wb-nav-toggle { display: inline-flex; }
  :root.wb-js:not(.wb-navmobkit-toggle-start):not(.wb-navmobkit-split-brand) .wb-site-header.wb-menu-overlay .wb-header-inner > .wb-nav-toggle { margin-left: auto; }
  :root.wb-js .wb-site-header.wb-menu-overlay:not(.wb-nav-open) .wb-nav { display: none; }
  :where(:root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open) { position: sticky; top: 0; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open {
    z-index: 95;
    background: var(--wb-colour-secondary);
    color: #ffffff;
    border-bottom-color: color-mix(in srgb, #ffffff 15%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    transform: none;
    translate: none;
    will-change: auto;
  }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-header-inner > :is(.wb-brand, .wb-nav-toggle) { position: relative; z-index: 96; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-header-inner > :not(.wb-brand):not(.wb-nav-toggle):not(.wb-nav) { visibility: hidden; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-brand { color: #ffffff; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-menu-brand-rest { display: none; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-menu-brand-open { display: inline-flex; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav-toggle-bar { background: #ffffff; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav-toggle-bar:nth-child(2) { opacity: 0; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  :root.wb-menu-locked { overflow: hidden; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav {
    position: fixed;
    inset: 0;
    z-index: 94;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: auto;
    max-height: none;
    margin: 0;
    padding: calc(var(--wb-menu-top, 5.5rem) + 1.5rem) 1.75rem 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wb-colour-secondary);
    color: #ffffff;
  }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav a { min-height: 44px; border-top: 0; color: #ffffff; text-decoration: none; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav a::before, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-nav-sub::before { display: none; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav > a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav > .wb-nav-item > a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-link {
    display: flex;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
  }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-nav-sub a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-link.wb-mobile-sub {
    display: flex;
    align-items: center;
    padding: 0.75rem 0 0.75rem 1.125rem;
    border-bottom: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
    font-size: 1rem;
    font-weight: 700;
    color: color-mix(in srgb, #ffffff 70%, transparent);
  }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav :is(a, button):focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-nav-item { display: block; position: static; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-nav-sub {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mega :is(.wb-mega-ico, .wb-mega-note, .wb-mega-promo, .wb-mega-head) { display: none; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mega :is(.wb-mega-inner, .wb-mega-group, .wb-mega-cells) { display: block; padding: 0; border: 0; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open.wb-has-mobile-menu .wb-nav > :not(.wb-mobile-menu) { display: none; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-menu { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.75rem 0 0; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.875rem 1.5rem;
    border: 0;
    font-size: 1rem;
    font-weight: 700;
  }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-button:not(.wb-button-secondary):not(.wb-button-ghost) { color: var(--wb-colour-on-primary); }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-button-secondary {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #ffffff 50%, transparent);
  }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-button-ghost { background: transparent; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-mobile-action-link {
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 0;
    font-size: 0.9375rem;
    font-weight: 800;
  }
}
@media (max-width: 760px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav { padding: calc(var(--wb-menu-top, 5rem) + 2rem) 1.875rem 3.25rem; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav > a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav > .wb-nav-item > a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-link { padding: 1.0625rem 0; font-size: 1.875rem; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-nav-sub a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-link.wb-mobile-sub { padding: 0.875rem 0 0.875rem 1.25rem; font-size: 1.125rem; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions { gap: 0.875rem; margin-top: 2.125rem; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-mobile-action-link { margin-top: 1rem; font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: no-preference) {
  :root.wb-js .wb-site-header.wb-menu-overlay .wb-nav-toggle-bar { transition: transform 0.25s ease, opacity 0.2s ease; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav { animation: wb-menu-overlay-in 0.2s ease both; }
}
@keyframes wb-menu-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── header buttons: own phone width ── */
@media (max-width: 900px) {
  :root.wb-js .wb-site-header.wb-has-cta:not(.wb-nav-open) .wb-header-actions > .wb-header-cta.wb-cta-hide-760 { display: inline-flex; }
}
@media (max-width: 760px) {
  :root.wb-js .wb-site-header.wb-has-cta:not(.wb-nav-open) .wb-header-actions > .wb-header-cta.wb-cta-hide-760 { display: none; }
}
@media (max-width: 900px) {
  :root.wb-js .wb-site-header.wb-has-cta:not(.wb-nav-open) .wb-header-actions > .wb-header-cta.wb-cta-hide-600 { display: inline-flex; }
}
@media (max-width: 600px) {
  :root.wb-js .wb-site-header.wb-has-cta:not(.wb-nav-open) .wb-header-actions > .wb-header-cta.wb-cta-hide-600 { display: none; }
}

@media (max-width: 1080px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-action-sub + .wb-mobile-actions { margin-top: 0.75rem; }
}

/* ── overlay menu: the open bar held as at rest ── */
@media (max-width: 1080px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-has-cta.wb-nav-open .wb-header-inner > .wb-header-actions { width: auto; flex-wrap: nowrap; }
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-has-cta.wb-nav-open .wb-nav {
    background-image: linear-gradient(color-mix(in srgb, currentColor 15%, transparent), color-mix(in srgb, currentColor 15%, transparent));
    background-size: 100% 1px;
    background-position: 0 calc(var(--wb-menu-top, 0px) - 1px);
    background-repeat: no-repeat;
  }
  :root.wb-js.wb-menu-locked .wb-chat-site { z-index: 80; }
}
@media (max-width: 900px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-has-cta.wb-nav-open .wb-header-actions > .wb-header-cta { display: none; flex: initial; }
}
@media (max-width: 900px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-has-cta.wb-nav-open .wb-header-actions > .wb-header-cta.wb-cta-hide-760 { display: inline-flex; }
}
@media (max-width: 760px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-has-cta.wb-nav-open .wb-header-actions > .wb-header-cta.wb-cta-hide-760 { display: none; }
}
@media (max-width: 900px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-has-cta.wb-nav-open .wb-header-actions > .wb-header-cta.wb-cta-hide-600 { display: inline-flex; }
}
@media (max-width: 600px) {
  :root.wb-js .wb-site-header.wb-menu-overlay.wb-has-cta.wb-nav-open .wb-header-actions > .wb-header-cta.wb-cta-hide-600 { display: none; }
}

/* ── header bar (theme.headerBar) ── */
:root .wb-site-header:not(.wb-nav-open) { --wb-hb-max: 1560px; }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-inner { max-width: 1560px; padding-top: 0; padding-bottom: 0; justify-content: flex-start; }
:root .wb-site-header:not(.wb-nav-open) .wb-utility-inner { max-width: 1560px; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav { margin-right: auto; }
:root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-header-inner > .wb-header-actions { visibility: hidden; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav > a, :root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a { font-weight: 800; padding: var(--wb-hb-nav-py, 0) var(--wb-hb-nav-px, 0); line-height: 1.5; border-radius: 0; }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions .wb-header-cta {
  min-height: 0;
  padding: var(--wb-hb-btn-py, 0.55rem) var(--wb-hb-btn-px, 1.15rem);
  border: 1px solid transparent;
  line-height: 1.5;
}
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) { --wb-hb-nav-py: 13px; --wb-hb-nav-px: 16px; --wb-hb-nav-size: 16.5px; --wb-hb-nav-ls: 0.005em; --wb-hb-btn-py: 16px; --wb-hb-btn-px: 24px; }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-inner { height: 92px; gap: 34px; }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-brand .wb-logo { height: 64px; max-height: none; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav { margin-left: 40px; gap: 14px; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav > a, :root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a { font-size: 16.5px; letter-spacing: 0.005em; }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions .wb-header-cta { font-size: 13px; letter-spacing: 0.12em; border-radius: 0px; }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions { gap: 14px; }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-theme-toggle { width: 46px; height: 46px; }
:root[data-theme="dark"] .wb-site-header { --wb-hb-ink: #A9C7E8; --wb-hb-on-ink: #0F2337; }
:root .wb-site-header:not(.wb-nav-open) { background: var(--wb-colour-card, var(--wb-colour-background)); border-bottom: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.1)); }
.wb-site-header { --wb-hb-hover: #D9E2F0; }
:root[data-theme="dark"] .wb-site-header { --wb-hb-hover: #1B2C44; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav > a::before, :root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a::before { display: none; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav > a, :root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a { transition: color 0.18s, background 0.18s; text-decoration: none; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav > a:is(:hover, :focus-visible), :root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a:is(:hover, :focus-visible) {
  color: var(--wb-hb-ink, var(--wb-colour-secondary));
  background: var(--wb-hb-hover);
}
:root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a { gap: 7px; }
:root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a::after {
  width: 10px;
  height: 6px;
  border: 0;
  opacity: 1;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s;
}
:root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item:is(:hover, :focus-within) > a::after { transform: rotate(180deg); }
:root .wb-site-header:not(.wb-nav-open) .wb-nav-item:not(.wb-nav-mega) > .wb-nav-sub {
  left: -4px;
  min-width: 272px;
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:root .wb-site-header:not(.wb-nav-open) .wb-nav-item:not(.wb-nav-mega) > .wb-nav-sub a {
  display: block;
  padding: 18px 26px;
  border: 2px solid var(--wb-hb-ink, var(--wb-colour-secondary));
  background: var(--wb-colour-card, var(--wb-colour-background));
  color: var(--wb-hb-ink, var(--wb-colour-secondary));
  font-family: var(--wb-font-ui, var(--wb-font-body));
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 18px 32px -20px rgba(20, 48, 74, 0.35);
  transition: background 0.15s, color 0.15s;
}
:root .wb-site-header:not(.wb-nav-open) .wb-nav-item:not(.wb-nav-mega) > .wb-nav-sub a:is(:hover, :focus-visible) { background: var(--wb-hb-ink, var(--wb-colour-secondary)); color: var(--wb-hb-on-ink, var(--wb-colour-on-secondary, #ffffff)); }
:root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions .wb-header-cta:not(.wb-button-secondary):not(.wb-button-ghost):not(.wb-cta-tone-secondary) { box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--wb-colour-primary) 55%, transparent); }
.wb-has-utility .wb-utility-strip { background: var(--wb-colour-secondary); color: var(--wb-colour-on-secondary, #ffffff); font-family: var(--wb-font-ui, var(--wb-font-body)); font-variation-settings: normal; font-size: 14px; }
.wb-has-utility .wb-utility-inner.wb-utility-linked {
  min-height: 42px; padding-top: 0; padding-bottom: 0; gap: 22px; letter-spacing: normal;
}
.wb-has-utility .wb-utility-lead { opacity: 1; color: color-mix(in srgb, var(--wb-colour-on-secondary, #ffffff) 66%, transparent); }
.wb-has-utility .wb-utility-phone {
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: background 0.18s;
}
.wb-has-utility a.wb-utility-phone:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.09); text-decoration: none; }
.wb-has-utility .wb-utility-region { padding: 3px 7px; border-radius: 5px; font-size: 11px; }
@media (max-width: 760px) {
  .wb-has-utility .wb-utility-inner.wb-utility-linked { gap: 8px; padding: 7px 20px; } .wb-has-utility .wb-utility-phone { font-size: 15px; }
}

:root .wb-site-header .wb-header-actions .wb-header-cta.wb-cta-tone-secondary {
  background: transparent;
  color: var(--wb-hb-ink, var(--wb-colour-secondary));
  border: 2px solid var(--wb-hb-ink, var(--wb-colour-secondary));
  box-shadow: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
:root .wb-site-header .wb-header-actions .wb-header-cta.wb-cta-tone-secondary:is(:hover, :focus-visible) {
  background: var(--wb-hb-ink, var(--wb-colour-secondary));
  color: var(--wb-hb-on-ink, var(--wb-colour-on-secondary, #ffffff));
  border-color: var(--wb-hb-ink, var(--wb-colour-secondary));
  text-decoration: none;
}
@media (max-width: 1560px) {
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) { --wb-hb-nav-py: 11px; --wb-hb-nav-px: 12px; --wb-hb-nav-size: 15px; --wb-hb-btn-py: 14px; --wb-hb-btn-px: 17px; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-inner { height: 80px; gap: 16px; }
  :root .wb-site-header:not(.wb-nav-open) .wb-nav { margin-left: 18px; gap: 4px; }
  :root .wb-site-header:not(.wb-nav-open) .wb-nav > a, :root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a { font-size: 15px; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions .wb-header-cta { font-size: 12px; letter-spacing: 0.1em; }
}
@media (max-width: 1280px) {
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) { --wb-hb-nav-py: 10px; --wb-hb-nav-px: 6px; --wb-hb-nav-size: 14px; --wb-hb-btn-py: 12px; --wb-hb-btn-px: 12px; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-inner { gap: 10px; padding-left: 24px; padding-right: 24px; }
  :root .wb-site-header:not(.wb-nav-open) .wb-nav { margin-left: 8px; gap: 0px; }
  :root .wb-site-header:not(.wb-nav-open) .wb-nav > a, :root .wb-site-header:not(.wb-nav-open) .wb-nav > .wb-nav-item > a { font-size: 14px; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions .wb-header-cta { font-size: 11px; letter-spacing: 0.06em; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions { gap: 8px; }
}
@media (max-width: 760px) {
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) { --wb-hb-btn-py: 10px; --wb-hb-btn-px: 15px; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-inner { height: 72px; gap: 12px; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-brand .wb-logo { height: 48px; max-height: none; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-header-actions .wb-header-cta { font-size: 14.5px; border-radius: 9px; }
  :root .wb-site-header:is(:not(.wb-nav-open), .wb-menu-overlay) .wb-theme-toggle { width: 42px; height: 42px; }
}

/* ── mega menu finish ── */
.wb-mega-tone-secondary {
  --wb-mega-tone: var(--wb-hb-ink, var(--wb-colour-secondary));
  --wb-mega-on-tone: var(--wb-hb-on-ink, var(--wb-colour-on-secondary, #ffffff));
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-nav-mega > .wb-nav-sub.wb-mega-tone-secondary { border-bottom-color: var(--wb-mega-tone, var(--wb-colour-primary)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-tone-secondary .wb-mega-head { color: var(--wb-mega-tone, var(--wb-colour-primary)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-tone-secondary .wb-mega-ico { border-color: var(--wb-mega-tone, var(--wb-colour-primary)); color: var(--wb-mega-tone, var(--wb-colour-primary)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-tone-secondary .wb-mega-item:is(:hover, :focus-visible) .wb-mega-ico { background: var(--wb-mega-tone, var(--wb-colour-primary)); color: var(--wb-mega-on-tone); border-color: var(--wb-mega-tone, var(--wb-colour-primary)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-tone-secondary .wb-mega-item:is(:hover, :focus-visible) {
  background: var(--wb-hb-hover, var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 9%, transparent)));
}

:where(.wb-site-header:has(.wb-mega-full)) { position: relative; }
.wb-hdrkit-static .wb-site-header:has(.wb-mega-full) { position: relative; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-header-inner:has(.wb-mega-full) { position: static; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-nav-mega > .wb-nav-sub.wb-mega-full { background: transparent; border: 0; box-shadow: none; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full::before { top: -24px; height: 24px; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full > .wb-mega-inner {
  display: grid;
  grid-template-columns: var(--wb-mega-cols);
  gap: 0;
  max-width: var(--wb-hb-max, 1560px);
  max-height: none;
  margin: 0 auto;
  padding: 72px clamp(36px, 5.6vw, 88px) 80px;
  overflow: visible;
  background: var(--wb-colour-card, var(--wb-colour-background));
  border-top: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12));
  border-bottom: 3px solid var(--wb-mega-tone, var(--wb-colour-primary));
  box-shadow: 0 24px 40px -26px rgba(20, 48, 74, 0.3);
  font-family: var(--wb-font-ui, var(--wb-font-body));
  font-variation-settings: normal;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full.wb-mega-full-tiles > .wb-mega-inner { padding: 56px 72px 60px; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-group { display: flex; flex-direction: column; min-width: 0; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-group + .wb-mega-group { border-left: 0; padding-left: 0; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-group.wb-mega-grid { padding-right: clamp(36px, 5.6vw, 88px); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-group.wb-mega-list { border-left: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12)); padding: 0 clamp(28px, 4vw, 64px); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-head {
  margin: 0 0 38px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: var(--wb-mega-tone, var(--wb-colour-primary));
  opacity: 0.7;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-grid .wb-mega-cells { grid-template-columns: 1fr 1fr; gap: 26px clamp(36px, 4.5vw, 72px); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full a:not(.wb-button) {
  font-family: inherit;
  font-size: var(--wb-hb-nav-size, 15px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: var(--wb-hb-nav-ls, normal);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full a:not(.wb-button):is(:hover, :focus-visible) { color: var(--wb-hb-ink, var(--wb-colour-secondary)); background: var(--wb-hb-hover, transparent); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full a.wb-mega-item { gap: 20px; margin: 0 -18px; padding: var(--wb-hb-nav-py, 16px) var(--wb-hb-nav-px, 18px); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-ico { flex: 0 0 42px; background: var(--wb-colour-card, var(--wb-colour-background)); border-color: var(--wb-mega-tone, var(--wb-colour-primary)); color: var(--wb-mega-tone, var(--wb-colour-primary)); transition: background 0.15s, color 0.15s; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-ico svg { stroke-width: 2.3; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-label { font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: 0; color: var(--wb-colour-text); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-item:is(:hover, :focus-visible) .wb-mega-label { color: var(--wb-mega-tone, var(--wb-colour-primary)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-note { margin-top: 4px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--wb-colour-faint, var(--wb-colour-muted)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full a.wb-mega-link { padding: var(--wb-hb-nav-py, 17px) var(--wb-hb-nav-px, 2px); border-bottom: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-list > a.wb-mega-link:first-of-type { border-top: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full a.wb-mega-link.wb-mega-all { margin-top: 22px; border: 0; color: var(--wb-colour-text); font-weight: 800; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-tiles .wb-mega-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-tiles a.wb-mega-item { margin: 0; gap: 16px; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-tiles .wb-mega-ico { flex-basis: 52px; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-tiles .wb-mega-ico svg { width: 25px; height: 25px; stroke-width: 2; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-tiles .wb-mega-label { font-size: 14.5px; line-height: 1.25; white-space: normal; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-promo { flex: none; margin-left: clamp(28px, 4vw, 64px); }
@media (max-width: 1280px) {
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full > .wb-mega-inner { grid-template-columns: var(--wb-mega-cols-narrow); padding: 28px 26px 32px; }
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full.wb-mega-full-tiles > .wb-mega-inner { padding: 36px 30px 40px; }
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-group.wb-mega-grid { padding-right: 26px; }
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-group.wb-mega-list { display: none; }
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-promo { margin-left: 0; }
  .wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-full .wb-mega-tiles .wb-mega-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo.wb-mega-promo-secondary {
  padding: 30px 28px;
  gap: 10px;
  background: var(--wb-colour-secondary);
  color: var(--wb-colour-on-secondary, #ffffff);
  transition: transform 0.18s, box-shadow 0.18s;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo.wb-mega-promo-secondary:hover { transform: translateY(-2px); box-shadow: var(--wb-shadow-hover, 0 6px 18px -8px rgba(15, 23, 42, 0.2)); }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo-secondary .wb-mega-promo-text { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega-promo.wb-mega-promo-avatar .wb-mega-promo-img {
  width: 74px;
  height: 74px;
  aspect-ratio: auto;
  margin-bottom: 4px;
  border: 3px solid color-mix(in srgb, var(--wb-colour-on-secondary, #ffffff) 35%, transparent);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.45);
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-promo.wb-mega-promo-buttons-full a.wb-button {
  width: 100%;
  margin-top: 10px;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: normal;
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--wb-colour-primary) 60%, transparent);
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-promo.wb-mega-promo-buttons-full a.wb-button-secondary {
  margin-top: 8px;
  padding: 13px 20px;
  font-size: 14px;
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  box-shadow: none;
}
.wb-site-header:not(.wb-nav-open):not(.wb-kit-overlay) .wb-mega .wb-mega-promo.wb-mega-promo-buttons-full a.wb-button-secondary:is(:hover, :focus-visible) {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── chrome finish ── */
@media (max-width: 760px) {
  :root.wb-js .wb-site-header .wb-header-inner > .wb-nav-toggle {
    width: 52px;
    height: 48px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    gap: 6px;
    border: 1.5px solid var(--wb-colour-line-strong, currentColor);
    border-radius: 11px;
    background: var(--wb-colour-card, var(--wb-colour-background));
  }
  :root.wb-js .wb-site-header .wb-header-inner > .wb-nav-toggle .wb-nav-toggle-bar { width: 24px; height: 3px; border-radius: 2px; }
  :root.wb-js .wb-site-header:not(.wb-nav-open) .wb-header-inner > .wb-nav-toggle .wb-nav-toggle-bar { background: var(--wb-colour-primary); }
  :root.wb-js .wb-site-header.wb-nav-open .wb-header-inner > .wb-nav-toggle {
    border-color: color-mix(in srgb, #ffffff 45%, transparent);
    background: transparent;
  }
  :root.wb-js .wb-site-header.wb-nav-open .wb-header-inner > .wb-nav-toggle .wb-nav-toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  :root.wb-js .wb-site-header.wb-nav-open .wb-header-inner > .wb-nav-toggle .wb-nav-toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}
:root .wb-site-header .wb-mobile-menu a.wb-mobile-action { font-family: var(--wb-font-heading); font-variation-settings: "wdth" 105; font-weight: 700; letter-spacing: -0.004em; text-transform: none; }

:root .wb-site-header .wb-mobile-menu a.wb-mobile-action.wb-button-has-icon { gap: 9px; }
:root .wb-site-header .wb-mobile-menu a.wb-mobile-action .wb-button-icon { display: inline-flex; align-items: center; flex: none; }
:root .wb-site-header .wb-mobile-menu a.wb-mobile-action .wb-button-icon svg { width: 17px; height: 17px; }
:root body .wb-site-footer { border-top: 5px solid var(--wb-colour-accent); }
:root body .wb-site-footer.wb-footer-directory { padding: 88px 0 56px; }
:root body .wb-site-footer.wb-footer-directory > .wb-container { max-width: var(--wb-container, 1100px); }
:root body .wb-site-footer.wb-footer-directory .wb-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 68px;
  border-bottom-color: color-mix(in srgb, var(--wb-colour-on-secondary) 16%, transparent);
}
:root body .wb-site-footer.wb-footer-directory .wb-footer-head:not(#wb-footer-head) {
  font-family: var(--wb-font-ui, var(--wb-font-body)); font-variation-settings: normal;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid color-mix(in srgb, var(--wb-colour-on-secondary) 22%, transparent);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: var(--wb-colour-on-secondary);
}
:root body .wb-site-footer.wb-footer-directory .wb-footer-col a {
  font-family: var(--wb-font-ui, var(--wb-font-body)); font-variation-settings: normal;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--wb-colour-on-secondary) 68%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  transition: color 0.15s;
}
:root body .wb-site-footer.wb-footer-directory a:is(:hover, :focus-visible) { color: var(--wb-colour-on-secondary); }
:root body .wb-site-footer.wb-footer-directory .wb-footer-base { gap: 22px; padding-top: 40px; }
:root body .wb-site-footer.wb-footer-directory .wb-footer-copy { margin-top: 7px; font-size: 14.5px; color: color-mix(in srgb, var(--wb-colour-on-secondary) 62%, transparent); }
:root body .wb-site-footer.wb-footer-directory .wb-footer-text { margin-top: 7px; font-size: 13.5px; color: color-mix(in srgb, var(--wb-colour-on-secondary) 62%, transparent); }
:root body .wb-site-footer.wb-footer-directory .wb-footer-legal-links { gap: 22px; }
:root body .wb-site-footer.wb-footer-directory .wb-footer-legal-links a { font-family: var(--wb-font-ui, var(--wb-font-body)); font-variation-settings: normal; font-size: 13.5px; font-weight: 700; color: color-mix(in srgb, var(--wb-colour-on-secondary) 66%, transparent); }
:root body .wb-site-footer.wb-footer-directory .wb-footer-region {
  font-family: var(--wb-font-ui, var(--wb-font-body)); font-variation-settings: normal;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--wb-colour-on-secondary) 25%, transparent);
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--wb-colour-on-secondary) 60%, transparent);
}
@media (max-width: 760px) {
  :root body .wb-site-footer.wb-footer-directory .wb-footer-head:not(#wb-footer-head) { font-size: 14px; }
  :root body .wb-site-footer.wb-footer-directory .wb-footer-col a { padding: 7px 0; font-size: 16px; }
  :root body .wb-site-footer.wb-footer-directory .wb-footer-legal-links a { padding: 8px 6px; font-size: 15px; }
}

/* ── footer: tight rows ── */
:root body .wb-site-footer.wb-footer-directory .wb-footer-head:not(#wb-footer-head) { line-height: 1.05; }
:root body .wb-site-footer.wb-footer-directory .wb-footer-brand { display: flex; width: fit-content; }
:root body .wb-site-footer.wb-footer-directory a { min-height: 0; }
:root body .wb-site-footer.wb-footer-directory .wb-footer-legal, :root body .wb-site-footer.wb-footer-directory .wb-footer-legal-links { flex-wrap: nowrap; gap: 22px; }

/* ── footer: flush base ── */
:root body .wb-site-footer.wb-footer-directory .wb-footer-grid { margin-left: calc(-1 * 26px); margin-right: calc(-1 * 26px); padding-left: 26px; padding-right: 26px; }
@media (max-width: 760px) { :root body .wb-site-footer.wb-footer-directory .wb-footer-grid { margin-left: calc(-1 * 20px); margin-right: calc(-1 * 20px); padding-left: 20px; padding-right: 20px; } }
:root body .wb-site-footer.wb-footer-directory .wb-footer-brand { justify-self: start; }
:root body .wb-site-footer.wb-footer-directory .wb-footer-text { font-weight: 400; }

/* ── footer: dark ground from the palette ── */
:root[data-theme="dark"] .wb-site-footer.wb-footer-dark { --wb-colour-background: #10233D; --wb-colour-surface: #10233D; --wb-colour-on-primary: #10233D; background: #10233D; }
.wb-chat-site .wb-chat-launcher:not(.wb-chat-launcher-ava) { background: #E2483C; color: #ffffff; }

@media (min-width: 761px) and (max-width: 1080px) {
  :root.wb-js .wb-site-header .wb-header-inner > .wb-nav-toggle { gap: 5px; }
  :root.wb-js .wb-site-header .wb-header-inner > .wb-nav-toggle .wb-nav-toggle-bar { height: 2.5px; }
  :root.wb-js .wb-site-header.wb-nav-open .wb-header-inner > .wb-nav-toggle .wb-nav-toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  :root.wb-js .wb-site-header.wb-nav-open .wb-header-inner > .wb-nav-toggle .wb-nav-toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

@media (max-width: 1080px) {
  :root.wb-js .wb-site-header.wb-menu-overlay .wb-header-inner > .wb-nav-toggle { margin-right: calc(8px - 0.75rem); }
}

@media (max-width: 1080px) { :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav:not(#wb-menu-top) { padding-top: 110px; } }
@media (max-width: 760px) { :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav:not(#wb-menu-top) { padding-top: 118px; } }
@media (max-width: 1080px) { :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav > a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav > .wb-nav-item > a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-link, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-nav-sub a, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-link.wb-mobile-sub, :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-mobile-action-link { line-height: 1.5; } }
@media (max-width: 1080px) { :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-mobile-action-link { min-height: 0; padding-top: 0px; padding-bottom: 0px; } }
@media (max-width: 760px) { :root.wb-js .wb-site-header.wb-menu-overlay.wb-nav-open .wb-nav .wb-mobile-actions a.wb-mobile-action-link { min-height: 0; padding-top: 10px; padding-bottom: 10px; } }
.wb-chat-site .wb-chat-launcher .wb-chat-icon-open { width: 16px; height: 16px; }
.wb-chat-site .wb-chat-launcher .wb-chat-icon-emoji { width: auto; height: auto; font-size: 16px; line-height: 1.5; }

/* ── section anchors ── */
.wb-section[id] { scroll-margin-top: calc(var(--wb-header-h, 4.75rem) + 1rem); }

/* ── inline markup ── */
.wb-text-accent { color: var(--wb-colour-accent); }
.wb-tone-accent .wb-text-accent { color: inherit; }

/* ── anchor offset ── */
html { scroll-padding-top: 76px; }
.wb-section[id] { scroll-margin-top: 0; }

/* ── configured contact form ── */
.wb-button-arrow { display: inline-block; margin-left: 0.5em; transition: transform 0.2s ease; }
.wb-button:hover .wb-button-arrow { transform: translateX(3px); }
.wb-form-done {
  margin: 0; padding: 60px 10px; text-align: center;
  font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.015em;
  color: var(--wb-colour-secondary);
}
.wb-contact-card {
  display: block;
  background: var(--wb-colour-background);
  border-radius: 26px;
  box-shadow: 0 34px 70px -30px rgba(22, 52, 90, 0.3);
  padding: 56px 52px 50px;
}
.wb-contact-card .wb-field {
  display: block; margin-bottom: 26px;
  font-family: var(--wb-font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-colour-secondary);
}
.wb-contact-card .wb-field input, .wb-contact-card .wb-field textarea {
  display: block; width: 100%; margin-top: 10px;
  font-family: var(--wb-font-body); font-weight: 400; font-size: 16.5px;
  letter-spacing: normal; text-transform: none; color: var(--wb-colour-text);
  background: transparent; border: none; border-bottom: 1.5px solid rgba(15, 23, 42, 0.22);
  border-radius: 0; padding: 10px 2px 14px; transition: border-color 0.2s;
}
.wb-contact-card .wb-field textarea {
  border: 1.5px solid rgba(15, 23, 42, 0.22); border-radius: 16px; padding: 16px 18px; margin-top: 12px;
}
.wb-contact-card .wb-field input:focus, .wb-contact-card .wb-field textarea:focus {
  outline: none; border-color: var(--wb-colour-primary); box-shadow: none;
}
.wb-contact-card .wb-button {
  display: flex; width: 100%; justify-content: center; align-items: center;
  padding: 18px 24px; font-size: 16px; margin-top: 10px; border-radius: 999px;
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--wb-colour-primary) 60%, transparent);
}
@media (max-width: 980px) {
  .wb-contact-card { padding: 30px 24px; }
}

/* ── site chat widget ── */
/* Below the intro splash (z-index 1000) so a first-visit overlay covers the
   launcher rather than the launcher punching through it; still above the
   header and its menus (90 to 96). */
.wb-chat-site { --wb-chat-head: var(--wb-colour-secondary); --wb-chat-head-ink: #ffffff; z-index: 900; }
.wb-chat-site .wb-chat-launcher {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; padding: 0; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(20, 48, 74, 0.28);
}
.wb-chat-site .wb-chat-launcher:hover { filter: brightness(1.05); }
.wb-chat-icon-close { display: none; font-size: 1.75rem; line-height: 1; }
.wb-chat-site:has(.wb-chat-panel:not([hidden])) .wb-chat-icon-open { display: none; }
.wb-chat-site:has(.wb-chat-panel:not([hidden])) .wb-chat-icon-close { display: inline; }
.wb-chat-site .wb-chat-panel {
  bottom: 4.9rem; width: min(24rem, calc(100vw - 1.5rem)); height: min(32rem, calc(100vh - 8rem));
  max-height: none; border-radius: 1rem;
  border: 1px solid rgba(20, 48, 74, 0.12); box-shadow: 0 18px 40px rgba(20, 48, 74, 0.22);
}
.wb-chat-site .wb-chat-panel[hidden] { display: none; }
.wb-chat-site .wb-chat-header { background: var(--wb-chat-head); color: var(--wb-chat-head-ink); gap: 0.75rem; }
.wb-chat-heading strong { display: block; font-size: 0.95rem; }
.wb-chat-heading span { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.8; }
.wb-chat-site .wb-chat-messages { display: flex; flex-direction: column; gap: 0.65rem; }
.wb-chat-site .wb-chat-msg {
  max-width: 85%; padding: 0.65rem 0.8rem; border-radius: 0.85rem;
  font-size: 0.9rem; line-height: 1.4; white-space: pre-wrap;
}
.wb-chat-site .wb-chat-bot { align-self: flex-start; }
.wb-chat-site .wb-chat-user { align-self: flex-end; }
.wb-chat-site .wb-chat-form .wb-button { border-radius: 0.65rem; padding: 0 0.85rem; }

.wb-chat-site .wb-chat-launcher-ava {
  position: relative; width: 4.25rem; height: 4.25rem; padding: 0;
  background: transparent; box-shadow: none; border-radius: 999px;
}
.wb-chat-site .wb-chat-ava { display: block; width: 100%; height: 100%; }
.wb-chat-site .wb-chat-ava svg { display: block; width: 100%; height: 100%; }
.wb-chat-launcher-ava .wb-chat-ava { filter: drop-shadow(0 10px 22px rgba(20, 48, 74, 0.32)); }
.wb-chat-site .wb-chat-ava-img { border-radius: 999px; object-fit: cover; }
.wb-chat-site .wb-chat-ava-img.wb-chat-ava-cutout { border-radius: 0; object-fit: contain; }
.wb-chat-site .wb-chat-launcher-ava .wb-chat-icon-close {
  position: absolute; top: -0.1rem; right: -0.1rem; width: 1.55rem; height: 1.55rem;
  border-radius: 999px; background: var(--wb-chat-head); color: var(--wb-chat-head-ink);
  font-size: 1rem; line-height: 1; place-items: center;
}
.wb-chat-site:has(.wb-chat-panel:not([hidden])) .wb-chat-launcher-ava .wb-chat-icon-close {
  display: inline-flex; align-items: center; justify-content: center;
}
.wb-chat-site .wb-chat-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.wb-chat-site .wb-chat-head .wb-chat-ava { width: 2.25rem; height: 2.25rem; flex: none; }
/* The assistant's highlight colour, when the site set one: the visitor's own
   bubbles and the send button, on copy picked for contrast against it. */
.wb-chat-accented .wb-chat-user,
.wb-chat-accented .wb-chat-form .wb-button {
  background: var(--wb-chat-accent);
  color: var(--wb-chat-accent-ink);
}
.wb-chat-orb-eye {
  transform-box: fill-box; transform-origin: center;
  animation: wb-chat-blink 7s ease-in-out infinite;
}
@keyframes wb-chat-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(0.12); }
  96% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .wb-chat-orb-eye { animation: none; } }

/* ── blog route ── */
.wb-post-status { color: var(--wb-colour-muted); }
.wb-post-hero img { height: auto; }
.wb-post-body img { max-width: 100%; height: auto; border-radius: var(--wb-radius-md, 0.75rem); }
.wb-post-body blockquote {
  margin: 1.5rem 0; padding-left: 1rem;
  border-left: 3px solid var(--wb-colour-primary); color: var(--wb-colour-muted);
}
.wb-post-body pre {
  overflow-x: auto; padding: 1rem; border-radius: var(--wb-radius-sm, 0.5rem);
  background: var(--wb-colour-panel);
}
.wb-post-body code { font-size: 0.92em; }
.wb-post-bio {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.12); color: var(--wb-colour-muted);
}

/* ── scroll scenes: recede and drift (scroll-scenes.ts) ─────────────────── */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .wb-js .wb-main > .wb-scene-recede { position: sticky; top: var(--wb-recede-top, 0px); z-index: 0; }
  :where(.wb-js .wb-main > .wb-scene-recede ~ .wb-section) { position: relative; z-index: 2; background-color: var(--wb-colour-background); }
  .wb-js .wb-main > .wb-scene-recede + .wb-section {
    margin-top: -1.375rem;
    border-radius: 1.375rem 1.375rem 0 0;
    box-shadow: 0 -26px 60px -26px rgba(15, 23, 42, 0.45);
  }
  .wb-js .wb-main > .wb-scene-recede:not(.wb-bg-panel), .wb-js .wb-main > .wb-scene-recede.wb-bg-panel > .wb-container {
    transform: scale(calc(1 - 0.075 * var(--wb-recede, 0)));
    transform-origin: 50% 6%;
    will-change: transform;
  }
  .wb-js .wb-main > .wb-scene-recede.wb-bg-panel > .wb-container { position: relative; }
  .wb-js .wb-main > .wb-scene-recede:not(.wb-bg-panel)::after, .wb-js .wb-main > .wb-scene-recede.wb-bg-panel > .wb-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background: rgb(10, 10, 12);
    opacity: calc(0.5 * var(--wb-recede, 0));
  }
  .wb-js .wb-scene-drift :is(.wb-statement-photo, .wb-split-media) { overflow: hidden; }
  .wb-js .wb-scene-drift :is(.wb-statement-photo, .wb-split-media) > img {
    transform: scale(1.08) translate3d(0, var(--wb-drift, 0px), 0);
    will-change: transform;
  }
}

/* ── stage: hero frame ── */
:root .wb-main > .wb-section.wb-hero-frame { padding: 14px 14px 0; }
:root .wb-main > .wb-section.wb-hero-frame > .wb-container {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  width: 100%;
  max-width: 1560px;
  min-height: calc(100svh - 140px);
  margin: 0 auto;
  padding: 76px 0 0;
  border-radius: 20px;
}
:root .wb-main > .wb-section.wb-hero-frame > .wb-container > .wb-split { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 1080px) {
  :root .wb-main > .wb-section.wb-hero-frame > .wb-container { min-height: 0; padding-top: 56px; }
  :root .wb-main > .wb-section.wb-hero-frame > .wb-container > .wb-split { padding: 0 34px; }
}
@media (max-width: 760px) {
  :root .wb-main > .wb-section.wb-hero-frame { padding: 8px 8px 0; }
  :root .wb-main > .wb-section.wb-hero-frame > .wb-container { padding-top: 34px; border-radius: 16px; }
  :root .wb-main > .wb-section.wb-hero-frame > .wb-container > .wb-split { padding: 0 22px; }
}

/* ── stage: hero watermark ── */
:root .wb-main > .wb-section.wb-hero-marked > .wb-container { position: relative; overflow: hidden; }
:root .wb-main > .wb-section.wb-hero-marked > .wb-container > .wb-hero-watermark {
  position: absolute;
  top: -110px;
  right: -90px;
  z-index: 0;
  width: min(520px, 80vw);
  height: min(520px, 80vw);
  max-width: none;
  object-fit: contain;
  opacity: 0.055;
  mix-blend-mode: luminosity;
  pointer-events: none;
  user-select: none;
}
:root .wb-main > .wb-section.wb-hero-marked > .wb-container > .wb-split { position: relative; z-index: 1; }

/* ── stage: group warp-in ── */
.wb-main > .wb-section.wb-split-group-warp { position: relative; overflow: clip; }
@media (prefers-reduced-motion: no-preference) {
  .wb-main > .wb-section.wb-split-group-warp.wb-warp::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--wb-colour-secondary) 14%, transparent) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: wb-warp-sweep 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
  }
  .wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card { animation: wb-warp-in 0.55s cubic-bezier(0.16, 0.84, 0.44, 1) backwards; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(1) { animation-delay: 0.08s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(2) { animation-delay: 0.16s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(3) { animation-delay: 0.24s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(4) { animation-delay: 0.32s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(5) { animation-delay: 0.40s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(6) { animation-delay: 0.48s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(7) { animation-delay: 0.56s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(8) { animation-delay: 0.64s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(9) { animation-delay: 0.72s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(10) { animation-delay: 0.80s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(11) { animation-delay: 0.88s; }
.wb-main > .wb-section.wb-split-group-warp.wb-warp .wb-split-card:nth-child(12) { animation-delay: 0.96s; }
}
@keyframes wb-warp-sweep { to { transform: translateX(100%); } }
@keyframes wb-warp-in {
  from { opacity: 0; transform: translateX(72px); }
  to { opacity: 1; transform: none; }
}

/* ── stage: quote band rings and dots ── */
.wb-main > .wb-section.wb-quotes-decor { position: relative; overflow: hidden; }
.wb-main > .wb-section.wb-quotes-decor::before, .wb-main > .wb-section.wb-quotes-decor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wb-main > .wb-section.wb-quotes-decor::before { left: -130px; bottom: -150px; width: 340px; height: 340px; border: 34px solid color-mix(in srgb, var(--wb-colour-primary) 10%, transparent); }
.wb-main > .wb-section.wb-quotes-decor::after { right: -80px; top: -90px; width: 230px; height: 230px; border: 26px solid color-mix(in srgb, var(--wb-colour-secondary) 10%, transparent); }
.wb-main > .wb-section.wb-quotes-decor > .wb-container { position: relative; z-index: 1; }
.wb-main > .wb-section.wb-quotes-decor > .wb-quote-dot { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.wb-main > .wb-section.wb-quotes-decor > .wb-quote-dot-a { right: 14%; bottom: 22%; width: 16px; height: 16px; background: var(--wb-colour-primary); opacity: 0.5; }
.wb-main > .wb-section.wb-quotes-decor > .wb-quote-dot-b { left: 16%; top: 26%; width: 11px; height: 11px; background: var(--wb-colour-secondary); opacity: 0.4; }

/* editorial */

/* ── editorial: page ground, square corners ── */
.wb-main > .wb-section.wb-ground-page:nth-of-type(even) { background: var(--wb-colour-background); color: var(--wb-colour-text); }
.wb-main > .wb-section.wb-ground-page:nth-of-type(even):not(.wb-hero-cover) :is(.wb-section-sub, .wb-hero-sub, .wb-faq-a, .wb-form-status, .wb-bloglist-empty, .wb-post-meta, .wb-chart-legend-value, .wb-kit-muted) { color: var(--wb-colour-muted); }
.wb-main > .wb-section.wb-corners-square.wb-bg-panel > .wb-container,
.wb-main > .wb-section.wb-corners-square :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-path-card, .wb-price-card, .wb-faq-item, .wb-path-image, .wb-feature-image) { border-radius: 0; }

/* ── editorial: hero subheading ink ── */
.wb-main > .wb-section.wb-hero-sub-secondary:nth-of-type(n):not(.wb-hero-cover):not(.wb-tone-inverse):not(.wb-tone-accent) .wb-hero-sub {
  color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary));
}

/* ── editorial: closing band with a portrait ── */
.wb-main > .wb-section.wb-cta-invite { padding: 120px 0 124px; }
.wb-main > .wb-section.wb-cta-invite div.wb-cta { max-width: 708px; }
.wb-cta-avatar {
  display: block;
  width: 116px;
  height: 116px;
  margin: 0 auto 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 4px solid color-mix(in srgb, currentColor 30%, transparent);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5);
}
.wb-main > .wb-section.wb-cta-invite .wb-cta-heading:not(#wb-editorial) { max-width: none; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.024em; }
.wb-main > .wb-section.wb-cta-invite .wb-cta-body {
  max-width: 60ch;
  margin: 18px auto 40px;
  font-size: 18px;
  line-height: 1.6;
  color: color-mix(in srgb, currentColor 68%, transparent);
}
.wb-main > .wb-section.wb-cta-invite .wb-cta-buttons > .wb-button:not(.wb-button-secondary):not(.wb-button-ghost):first-child {
  padding: 19px 38px;
  font-size: 17px;
  box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--wb-colour-primary) 65%, transparent);
}
@media (hover: hover) {
  .wb-main > .wb-section.wb-cta-invite .wb-cta-buttons > .wb-button:not(.wb-button-secondary):not(.wb-button-ghost):first-child:hover { transform: translateY(-2px); }
}
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-cta-invite { padding: 76px 0 80px; }
  .wb-cta-avatar { width: 96px; height: 96px; }
  .wb-main > .wb-section.wb-cta-invite .wb-cta-buttons > .wb-button:not(.wb-button-secondary):not(.wb-button-ghost):first-child { width: 100%; justify-content: center; }
}

/* ── editorial: portrait team cards ── */
.wb-main > .wb-section.wb-team-portrait .wb-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wb-main > .wb-section.wb-team-portrait.wb-team-cols-3 .wb-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-main > .wb-section.wb-team-portrait .wb-team-grid > .wb-team-member {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 0 38px;
  overflow: hidden;
  text-align: left;
  background: var(--wb-colour-secondary-tint, var(--wb-colour-surface));
  color: var(--wb-colour-text);
  border: 0;
  border-bottom: 4px solid var(--wb-colour-secondary-ink, var(--wb-colour-secondary));
  border-radius: 0;
  box-shadow: 0 26px 52px -28px color-mix(in srgb, var(--wb-colour-secondary) 30%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wb-main > .wb-section.wb-team-portrait .wb-team-grid > .wb-team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 64px -30px color-mix(in srgb, var(--wb-colour-secondary) 42%, transparent);
}
.wb-main > .wb-section.wb-team-portrait .wb-team-member > * { margin-left: 36px; margin-right: 36px; }
.wb-main > .wb-section.wb-team-portrait .wb-team-member > :first-child:not(.wb-team-photo) { margin-top: 30px; }
.wb-main > .wb-section.wb-team-portrait .wb-team-member > .wb-team-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 0 30px;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 18%;
}
.wb-main > .wb-section.wb-team-portrait .wb-team-name:not(#wb-editorial) { margin-top: 0; margin-bottom: 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.wb-main > .wb-section.wb-team-portrait .wb-team-role {
  margin-top: 10px;
  margin-bottom: 0;
  font-family: var(--wb-font-ui, var(--wb-font-heading));
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary));
  opacity: 0.8;
}
.wb-main > .wb-section.wb-team-portrait .wb-team-bio { margin-top: 18px; margin-bottom: 0; max-width: 52ch; font-size: 16.5px; line-height: 1.65; color: var(--wb-colour-muted); }
.wb-main > .wb-section.wb-team-portrait .wb-team-more {
  margin-top: 16px;
  padding: 0 0 3px;
  font-family: var(--wb-font-ui, var(--wb-font-heading));
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary));
  background: none;
  border: 0;
  border-bottom: 2px solid currentColor;
}
.wb-main > .wb-section.wb-team-portrait .wb-team-more:hover { color: var(--wb-colour-primary); }
@media (max-width: 900px) {
  .wb-main > .wb-section.wb-team-portrait .wb-team-grid,
  .wb-main > .wb-section.wb-team-portrait.wb-team-cols-3 .wb-team-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-main > .wb-section.wb-team-portrait .wb-team-grid > .wb-team-member { transition: none; }
  .wb-main > .wb-section.wb-team-portrait .wb-team-grid > .wb-team-member:hover { transform: none; }
}

/* ── editorial: large FAQ ── */
.wb-main > .wb-section.wb-faq-large > .wb-container { max-width: 900px; }
.wb-main > .wb-section.wb-faq-large .wb-faq-list { display: flex; flex-direction: column; gap: 12px; }
.wb-main > .wb-section.wb-faq-large .wb-faq-item {
  margin: 0;
  padding: 0;
  background: var(--wb-colour-card, var(--wb-colour-surface));
  color: var(--wb-colour-text);
  border: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.1));
  border-radius: 0;
  transition: border-color 0.15s;
}
.wb-main > .wb-section.wb-faq-large .wb-faq-item[open] { border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); border-bottom-width: 3px; }
.wb-main > .wb-section.wb-faq-large .wb-faq-q {
  padding: 28px 30px;
  font-family: var(--wb-font-ui, var(--wb-font-heading));
  font-size: 21px;
  font-weight: 800;
  line-height: 1.5;
}
.wb-main > .wb-section.wb-faq-large .wb-faq-q:hover { color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-faq-large .wb-faq-a { max-width: 64ch; padding: 0 28px 28px; font-size: 16.5px; line-height: 1.65; color: var(--wb-colour-muted); }
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-faq-large .wb-faq-q { padding: 22px 20px; font-size: 18.5px; }
  .wb-main > .wb-section.wb-faq-large .wb-faq-a { padding: 0 20px 22px; font-size: 17px; }
}
/* ── editorial: plus marker ── */
.wb-main > .wb-section.wb-faq-plus .wb-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; }
.wb-main > .wb-section.wb-faq-plus .wb-faq-q::-webkit-details-marker { display: none; }
.wb-main > .wb-section.wb-faq-plus .wb-faq-q::after {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary));
  background:
    linear-gradient(currentColor, currentColor) center / 18px 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 18px no-repeat;
  transition: background-size 0.2s;
}
.wb-main > .wb-section.wb-faq-plus .wb-faq-item[open] > .wb-faq-q::after { background-size: 18px 2.5px, 2.5px 0; }
@media (prefers-reduced-motion: reduce) {
  .wb-main > .wb-section.wb-faq-plus .wb-faq-q::after { transition: none; }
}

/* ── editorial: richText document ── */
.wb-main > .wb-section.wb-rich-doc-band { padding: 80px 0 110px; }
.wb-main > .wb-section .wb-rich.wb-rich-doc { max-width: 768px; margin: 0 auto; text-align: left; }
.wb-main > .wb-section .wb-rich-doc .wb-eyebrow { color: var(--wb-colour-primary); }
.wb-main > .wb-section .wb-rich-doc .wb-rich-doc-title:not(#wb-editorial) { margin: 0; font-size: clamp(32px, 4vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -0.024em; text-align: left; }
.wb-main > .wb-section .wb-rich-doc .wb-rich-doc-meta {
  margin: 12px 0 0;
  font-family: var(--wb-font-ui, var(--wb-font-heading));
  font-size: 14px;
  font-weight: 700;
  color: var(--wb-colour-faint, var(--wb-colour-muted));
}
.wb-main > .wb-section .wb-rich-doc .wb-rich-lead { margin: 16px 0 0; max-width: 70ch; font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--wb-colour-text); }
.wb-main > .wb-section .wb-rich-doc .wb-rich-doc-h:not(#wb-editorial) { margin: 44px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; }
.wb-main > .wb-section .wb-rich-doc p:not(.wb-eyebrow):not(.wb-rich-doc-meta):not(.wb-rich-lead) {
  margin: 12px 0 0;
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wb-colour-muted);
}
.wb-main > .wb-section .wb-rich-doc a { color: var(--wb-colour-primary); text-decoration: underline; text-underline-offset: 3px; }
.wb-main > .wb-section .wb-rich-doc a:hover { color: var(--wb-colour-primary-deep, var(--wb-colour-primary)); }
@media (max-width: 760px) {
  .wb-main > .wb-section .wb-rich-doc .wb-rich-doc-title { font-size: clamp(30px, 8vw, 38px); }
  .wb-main > .wb-section .wb-rich-doc p:not(.wb-eyebrow):not(.wb-rich-doc-meta):not(.wb-rich-lead) { font-size: 17px; }
}
/* ── editorial: richText statement ── */
.wb-main > .wb-section.wb-rich-statement-band { padding: 100px 0 104px; }
.wb-main > .wb-section .wb-rich.wb-rich-statement { max-width: 928px; margin: 0 auto; text-align: left; }
.wb-main > .wb-section .wb-rich-statement .wb-rich-statement-title:not(#wb-editorial) { margin: 0; max-width: 17ch; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; text-align: left; }
.wb-main > .wb-section .wb-rich-statement p:not(.wb-eyebrow) {
  margin: 24px 0 0;
  max-width: 60ch;
  font-size: 18.5px;
  line-height: 1.65;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
@media (max-width: 980px) {
  .wb-main > .wb-section.wb-rich-statement-band { padding: 64px 0 68px; }
}

/* ── editorial: spotlight eyebrow and quote measure ── */
.wb-main > .wb-section.wb-quote-eyebrow-primary .wb-quote-copy .wb-eyebrow { color: var(--wb-colour-primary); }
.wb-main > .wb-section.wb-quote-narrow .wb-quote-spotlight .wb-quote-text {
  max-width: 22ch;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
/* ── editorial: edge-to-edge path photos ── */
.wb-main > .wb-section.wb-paths-bleed .wb-path-card { gap: 0; padding: 0 0 34px; overflow: hidden; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-card > * { margin-left: 30px; margin-right: 30px; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-card > .wb-path-image {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  opacity: 0.92;
  transition: opacity 0.2s;
}
.wb-main > .wb-section.wb-paths-bleed .wb-path-card:hover > .wb-path-image { opacity: 1; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-card > .wb-path-image + * { margin-top: 28px; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-card > :first-child:not(.wb-path-image) { margin-top: 28px; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-card > .wb-path-desc { margin-top: 16px; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-card > :is(.wb-path-go, .wb-button) { margin-top: auto; padding-top: 10px; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-title:not(#wb-editorial) { font-size: 23px; line-height: 1.15; letter-spacing: -0.018em; }
.wb-main > .wb-section.wb-paths-bleed .wb-path-go { font-size: 18px; font-weight: 800; color: var(--wb-colour-primary); }
.wb-main > .wb-section.wb-paths-title-secondary .wb-path-title { color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }

/* editorial accent */

/* ── editorial: accent on an inverse band ── */
.wb-main > .wb-section.wb-tone-inverse .wb-text-accent { color: var(--wb-colour-accent-inverse); }

/* ── section parity: heading on the left ── */
.wb-main > .wb-section.wb-head-left .wb-section-head { margin-left: 0; margin-right: 0; text-align: left; }

/* ── section parity: hero heading sizes ── */
.wb-main > .wb-section.wb-hero-size-display .wb-hero-heading:not(#wb-section-parity) { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; }
.wb-main > .wb-section.wb-hero-size-display .wb-hero-sub { max-width: 28em; margin: 34px 0 0; font-size: clamp(18px, 1.55vw, 21.5px); line-height: 1.55; }
.wb-main > .wb-section.wb-hero-size-display .wb-hero-ctas { margin-top: 52px; }
.wb-main > .wb-section.wb-hero-size-large .wb-hero-heading:not(#wb-section-parity) {
  font-size: clamp(40px, 5.2vw, 68px);
  letter-spacing: -0.026em;
  font-variation-settings: "wdth" 106;
}
.wb-main > .wb-section.wb-hero-size-compact .wb-hero-heading:not(#wb-section-parity) {
  max-width: 28ch;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.026em;
  font-variation-settings: "wdth" 106;
}
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-hero-size-display .wb-hero-heading:not(#wb-section-parity) { font-size: clamp(34px, 9.6vw, 44px); }
  .wb-main > .wb-section.wb-hero-size-display .wb-hero-sub { margin-top: 14px; font-size: 16.5px; line-height: 1.5; }
  .wb-main > .wb-section.wb-hero-size-display .wb-hero-ctas { gap: 10px; margin-top: 20px; }
  .wb-main > .wb-section.wb-hero-size-large .wb-hero-heading:not(#wb-section-parity) { font-size: clamp(32px, 8.6vw, 42px); }
  .wb-main > .wb-section.wb-hero-size-compact .wb-hero-heading:not(#wb-section-parity) { font-size: clamp(28px, 7.4vw, 34px); }
}

/* ── section parity: full-width hero buttons on a phone ── */
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-hero-ctas-full .wb-hero-ctas .wb-button { width: 100%; justify-content: center; text-align: center; }
}

/* ── section parity: hero stage dots ── */
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash { position: absolute; z-index: 1; pointer-events: none; }
.wb-main > .wb-section.wb-hero-decor .wb-stage :is(.wb-overlay-card, .wb-overlay-chip) { z-index: 3; }
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-photo {
  box-shadow: 14px 18px 0 var(--wb-colour-decor, color-mix(in srgb, var(--wb-colour-primary) 35%, transparent)), 0 34px 64px -24px color-mix(in srgb, var(--wb-colour-secondary) 35%, transparent);
}
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-a { top: -10px; left: 34%; width: 30px; height: 30px; border-radius: 50%; background: var(--wb-colour-decor, color-mix(in srgb, var(--wb-colour-primary) 35%, transparent)); }
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-b {
  top: -16px;
  right: 14%;
  width: 52px;
  height: 52px;
  border: 9px solid var(--wb-colour-secondary);
  border-radius: 50%;
}
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-c {
  right: -8px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--wb-colour-card, var(--wb-colour-background));
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.35);
}
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-c i { width: 9px; height: 9px; border-radius: 50%; background: var(--wb-colour-secondary); opacity: 0.85; }
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-c i:nth-child(2) { background: var(--wb-colour-primary); }
.wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-c i:nth-child(3) { background: var(--wb-colour-decor, color-mix(in srgb, var(--wb-colour-primary) 35%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-a { animation: wb-splash-bob 5.5s ease-in-out infinite; }
  .wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-b { animation: wb-splash-bob 6.5s ease-in-out infinite reverse; }
  .wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-c { animation: wb-splash-bob 7s ease-in-out infinite; }
}
@keyframes wb-splash-bob { 50% { transform: translateY(-7px); } }
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-photo { box-shadow: 10px 12px 0 var(--wb-colour-decor, color-mix(in srgb, var(--wb-colour-primary) 35%, transparent)), 0 20px 40px -18px color-mix(in srgb, var(--wb-colour-secondary) 30%, transparent); }
  .wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-a { top: -6px; right: 8%; left: auto; }
  .wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-b { top: 6px; right: 4%; transform: scale(0.72); }
  .wb-main > .wb-section.wb-hero-decor .wb-stage .wb-stage-splash-c { display: none; }
}

/* ── section parity: mosaic band as the inset panel ── */
.wb-main > .wb-section.wb-cta-band.wb-band-screen { padding: 26px 14px; }
.wb-main > .wb-section.wb-cta-band.wb-band-screen > .wb-container { max-width: none; padding: 0; }
.wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-panel {
  max-width: 1560px;
  min-height: 560px;
  margin: 0 auto;
  padding-top: 76px;
  color: var(--wb-colour-on-feature, var(--wb-colour-on-primary));
  background: var(--wb-colour-secondary-tint, var(--wb-colour-feature, var(--wb-colour-primary)));
  border-radius: 20px;
}
.wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-panel::before {
  background: linear-gradient(94deg, var(--wb-colour-feature, var(--wb-colour-primary)) 0%, var(--wb-colour-feature, var(--wb-colour-primary)) 34%, color-mix(in srgb, var(--wb-colour-feature, var(--wb-colour-primary)) 90%, transparent) 52%,
    color-mix(in srgb, var(--wb-colour-feature, var(--wb-colour-primary)) 55%, transparent) 72%, color-mix(in srgb, var(--wb-colour-feature, var(--wb-colour-primary)) 28%, transparent) 100%);
}
.wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-copy { max-width: 1400px; margin: 0 auto; padding: 88px 56px 92px; }
.wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-copy .wb-button {
  color: var(--wb-colour-feature-deep, var(--wb-colour-primary));
  background: var(--wb-colour-on-feature, var(--wb-colour-on-primary));
  border-color: var(--wb-colour-on-feature, var(--wb-colour-on-primary));
}
.wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-copy :is(.wb-button-secondary, .wb-button-ghost) {
  color: var(--wb-colour-on-feature, var(--wb-colour-on-primary));
  background: transparent;
  border-color: currentColor;
}
@media (max-width: 1080px) {
  .wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-panel { padding-top: 56px; }
}
@media (max-width: 900px) {
  .wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-panel { min-height: 0; }
  .wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-panel::before {
    background: linear-gradient(180deg, var(--wb-colour-feature, var(--wb-colour-primary)) 0%, color-mix(in srgb, var(--wb-colour-feature, var(--wb-colour-primary)) 88%, transparent) 60%, color-mix(in srgb, var(--wb-colour-feature, var(--wb-colour-primary)) 50%, transparent) 100%);
  }
  .wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-copy { padding: 56px 26px 60px; }
}
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-cta-band.wb-band-screen { padding: 8px 8px 0; }
  .wb-main > .wb-section.wb-cta-band.wb-band-screen .wb-band-panel { padding-top: 34px; border-radius: 14px; }
}

/* ── section parity: carousel large face ── */
.wb-main > .wb-section.wb-carousel.wb-carousel-face-lg > .wb-container { max-width: none; }
.wb-main > .wb-section.wb-carousel.wb-carousel-face-lg .wb-carousel-heading:not(#wb-section-parity) { line-height: 1.04; letter-spacing: -0.026em; font-variation-settings: "wdth" 106; }
.wb-main > .wb-section.wb-carousel.wb-carousel-face-lg .wb-carousel-slide { align-content: center; }
@media (min-width: 761px) {
  .wb-main > .wb-section.wb-carousel.wb-carousel-face-lg .wb-carousel-slides { min-height: clamp(300px, 33vw, 490px); }
  .wb-main > .wb-section.wb-carousel.wb-carousel-face-lg .wb-carousel-slide { gap: 48px; }
  .wb-main > .wb-section.wb-carousel.wb-carousel-face-lg .wb-carousel-photo {
    justify-self: start;
    align-self: center;
    width: clamp(280px, 32vw, 480px);
    height: auto;
    margin-right: clamp(20px, 8vw, 160px);
    border: 6px solid var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 12%, transparent));
    box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--wb-colour-secondary) 40%, transparent);
  }
}

/* ── section parity: carousel text only on a phone ── */
@media (max-width: 900px) {
  .wb-main > .wb-section.wb-carousel.wb-carousel-text-only .wb-carousel-slide { grid-template-columns: minmax(0, 1fr); }
  .wb-main > .wb-section.wb-carousel.wb-carousel-text-only .wb-carousel-photo { display: none; }
}
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-carousel.wb-carousel-text-only .wb-carousel-slides { min-height: 430px; }
  .wb-main > .wb-section.wb-carousel.wb-carousel-text-only .wb-carousel-slide { align-content: center; }
  .wb-main > .wb-section.wb-carousel.wb-carousel-text-only .wb-carousel-arrow { display: none; }
}

/* ── section parity: carousel in the secondary colour ── */
.wb-main > .wb-section.wb-carousel.wb-accent-secondary .wb-carousel-body { color: var(--wb-colour-secondary); }
.wb-main > .wb-section.wb-carousel.wb-accent-secondary .wb-carousel-arrow {
  color: var(--wb-colour-secondary);
  background: var(--wb-colour-card, var(--wb-colour-background));
  border-color: var(--wb-colour-secondary);
}
.wb-main > .wb-section.wb-carousel.wb-accent-secondary .wb-carousel-arrow:hover {
  color: var(--wb-colour-on-secondary, #ffffff);
  background: var(--wb-colour-secondary);
  border-color: var(--wb-colour-secondary);
}
.wb-main > .wb-section.wb-carousel.wb-accent-secondary .wb-carousel-dot span { background: var(--wb-colour-line-strong, currentColor); }
.wb-main > .wb-section.wb-carousel.wb-accent-secondary .wb-carousel-dot[aria-current="true"] span { background: var(--wb-colour-secondary); }

/* ── section parity: icons in the secondary colour ── */
.wb-main > .wb-section.wb-icons-secondary .wb-features-grid {
  --wb-icon-ink: var(--wb-colour-secondary);
  --wb-icon-on: var(--wb-colour-on-secondary, #ffffff);
}

/* ── section parity: group heading tag ── */
.wb-main > .wb-section.wb-group-tag .wb-split-group-head { margin-bottom: 30px; }
.wb-main > .wb-section.wb-group-tag .wb-split-group-head .wb-split-heading:not(#wb-section-parity) {
  display: inline-block;
  max-width: 18ch;
  margin: 2px 0 0;
  padding: 22px 26px;
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-variation-settings: "wdth" 106;
  color: var(--wb-colour-on-decor, var(--wb-colour-text));
  background: var(--wb-colour-decor, color-mix(in srgb, var(--wb-colour-primary) 35%, transparent));
  border-radius: 0;
}

/* ── section parity: tinted group cards ── */
.wb-main > .wb-section.wb-group-tint .wb-split-group-side .wb-split-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wb-main > .wb-section.wb-group-tint .wb-split-card {
  padding: 26px 26px 28px;
  background: var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 10%, transparent));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wb-main > .wb-section.wb-group-tint .wb-split-card:hover { background: var(--wb-colour-secondary); }
.wb-main > .wb-section.wb-group-tint .wb-split-card-title { font-size: 19px; line-height: 1.3; color: var(--wb-colour-secondary); transition: color 0.15s; }
.wb-main > .wb-section.wb-group-tint .wb-split-card-title:not(#wb-section-parity) { line-height: 1.3; }
.wb-main > .wb-section.wb-group-tint .wb-split-card-desc { margin-top: 11px; font-size: 16px; line-height: 1.6; transition: color 0.15s; }
.wb-main > .wb-section.wb-group-tint .wb-split-card:hover :is(.wb-split-card-title, .wb-split-card-desc) { color: var(--wb-colour-on-secondary, #ffffff); }
@media (max-width: 620px) {
  .wb-main > .wb-section.wb-group-tint .wb-split-group-side .wb-split-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ── section parity: group heading tag ── */
.wb-main .wb-tab-panel > .wb-section.wb-group-tag .wb-split-group-head { margin-bottom: 30px; }
.wb-main .wb-tab-panel > .wb-section.wb-group-tag .wb-split-group-head .wb-split-heading:not(#wb-section-parity) {
  display: inline-block;
  max-width: 18ch;
  margin: 2px 0 0;
  padding: 22px 26px;
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-variation-settings: "wdth" 106;
  color: var(--wb-colour-on-decor, var(--wb-colour-text));
  background: var(--wb-colour-decor, color-mix(in srgb, var(--wb-colour-primary) 35%, transparent));
  border-radius: 0;
}

/* ── section parity: tinted group cards ── */
.wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-group-side .wb-split-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-card {
  padding: 26px 26px 28px;
  background: var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 10%, transparent));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-card:hover { background: var(--wb-colour-secondary); }
.wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-card-title { font-size: 19px; line-height: 1.3; color: var(--wb-colour-secondary); transition: color 0.15s; }
.wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-card-title:not(#wb-section-parity) { line-height: 1.3; }
.wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-card-desc { margin-top: 11px; font-size: 16px; line-height: 1.6; transition: color 0.15s; }
.wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-card:hover :is(.wb-split-card-title, .wb-split-card-desc) { color: var(--wb-colour-on-secondary, #ffffff); }
@media (max-width: 620px) {
  .wb-main .wb-tab-panel > .wb-section.wb-group-tint .wb-split-group-side .wb-split-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ── section parity: neutral button ── */
:root .wb-main .wb-button.wb-button-neutral.wb-button-neutral.wb-button-neutral {
  color: var(--wb-colour-text);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--wb-colour-line-strong, currentColor);
  filter: none;
}
:root .wb-main .wb-button.wb-button-neutral.wb-button-neutral.wb-button-neutral:is(:hover, :focus-visible) {
  color: var(--wb-colour-primary-deep, var(--wb-colour-primary));
  background: var(--wb-colour-primary-tint, color-mix(in srgb, var(--wb-colour-primary) 10%, transparent));
  box-shadow: inset 0 0 0 1.5px var(--wb-colour-primary);
}

/* ── section parity: outline button ── */
:root .wb-main .wb-button.wb-button-outline.wb-button-outline.wb-button-outline { border: 1.5px solid var(--wb-colour-line-strong, currentColor); box-shadow: none; }
:root .wb-main .wb-button.wb-button-outline.wb-button-outline.wb-button-outline:is(:hover, :focus-visible) { border-color: var(--wb-colour-primary); box-shadow: none; }
.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) .wb-button.wb-button-outline.wb-button-outline.wb-button-outline { color: var(--wb-tone-copy); }
.wb-main .wb-price-card.wb-price-card-inverse .wb-button.wb-button-outline.wb-button-outline.wb-button-outline { color: inherit; background: transparent; }
:is(.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) .wb-button.wb-button-outline.wb-button-outline.wb-button-outline, .wb-main .wb-price-card.wb-price-card-inverse .wb-button.wb-button-outline.wb-button-outline.wb-button-outline) { border-color: color-mix(in srgb, currentColor 45%, transparent); }
:is(.wb-main > .wb-section:is(.wb-tone-inverse, .wb-tone-accent) .wb-button.wb-button-outline.wb-button-outline.wb-button-outline, .wb-main .wb-price-card.wb-price-card-inverse .wb-button.wb-button-outline.wb-button-outline.wb-button-outline):is(:hover, :focus-visible) { color: inherit; border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }

/* ── section parity: onpanel button ── */
:root .wb-main .wb-button.wb-button-onpanel.wb-button-onpanel.wb-button-onpanel {
  color: var(--wb-colour-feature-deep, var(--wb-colour-primary));
  background: var(--wb-colour-on-feature, #ffffff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  filter: none;
}
:root .wb-main .wb-button.wb-button-onpanel.wb-button-onpanel.wb-button-onpanel:is(:hover, :focus-visible) {
  background: #ffffff;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* ── section parity: solid square icon ── */
.wb-features-grid.wb-icons-solid-tile .wb-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: var(--wb-icon-on, var(--wb-colour-on-primary));
  background: var(--wb-icon-ink, var(--wb-colour-primary));
  border-radius: 10px;
}
.wb-features-grid.wb-icons-solid-tile .wb-feature-icon-svg { width: 24px; height: 24px; }
.wb-features-grid.wb-cards-plain.wb-icons-solid-tile .wb-feature-icon { width: 34px; height: 34px; margin-bottom: 14px; border-radius: 9px; }
.wb-features-grid.wb-cards-plain.wb-icons-solid-tile .wb-feature-icon-svg { width: 18px; height: 18px; }

/* ── section parity: screenshot frame ── */
.wb-split-media .wb-frame-shot { display: flex; justify-content: center; }
.wb-split-media .wb-frame-shot img {
  width: min(300px, 80%);
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 30px;
  box-shadow: 14px 16px 0 var(--wb-colour-decor, color-mix(in srgb, var(--wb-colour-primary) 35%, transparent)), 0 26px 52px -24px rgba(16, 35, 61, 0.35);
}
@media (max-width: 1080px) {
  .wb-split-media .wb-frame-shot img { width: min(260px, 74%); }
}

/* ── section parity: stars in the star colour ── */
.wb-main .wb-stars { color: var(--wb-colour-star); }

/* ── section parity: a two-tone heading's punch on the inverse tone ── */
.wb-main > .wb-section.wb-tone-inverse .wb-split-punch { color: var(--wb-colour-accent-inverse); }

/* ── rhythm ── */
.wb-main > .wb-section.wb-rh-pt:not(#wb-rhythm) { padding-top: var(--wb-rh-pt); }
.wb-main > .wb-section.wb-rh-pb:not(#wb-rhythm) { padding-bottom: var(--wb-rh-pb); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-rh-pt-m:not(#wb-rhythm) { padding-top: var(--wb-rh-pt-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-rh-pb-m:not(#wb-rhythm) { padding-bottom: var(--wb-rh-pb-m); } }
.wb-main > .wb-section.wb-rh-measure:not(#wb-rhythm) > .wb-container { max-width: var(--wb-rh-measure); }
.wb-main > .wb-section.wb-rh-hs:not(#wb-rhythm) :is(h1, h2):not(#wb-rhythm-heading) { font-size: var(--wb-rh-hs); }
.wb-main > .wb-section.wb-rh-hm:not(#wb-rhythm) :is(.wb-section-head, div.wb-hero, .wb-hero-copy, .wb-split-solo, .wb-rich) { max-width: none; }
.wb-main > .wb-section.wb-rh-hm:not(#wb-rhythm) :is(h1, h2):not(#wb-rhythm-heading) { max-width: var(--wb-rh-hm); }
.wb-main > .wb-section.wb-rh-bm:not(#wb-rhythm) .wb-container :is(p, li) { max-width: var(--wb-rh-bm); }
.wb-main > .wb-section.wb-rh-bm-head:not(#wb-rhythm) .wb-container .wb-section-head :is(p, li) { max-width: var(--wb-rh-bm); }
.wb-main > .wb-section.wb-bg-panel.wb-rh-pp-t:not(#wb-rhythm) > .wb-container { padding-top: var(--wb-rh-pp-t); }
.wb-main > .wb-section.wb-bg-panel.wb-rh-pp-x:not(#wb-rhythm) > .wb-container { padding-left: var(--wb-rh-pp-x); padding-right: var(--wb-rh-pp-x); }
.wb-main > .wb-section.wb-bg-panel.wb-rh-pp-b:not(#wb-rhythm) > .wb-container { padding-bottom: var(--wb-rh-pp-b); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-bg-panel.wb-rh-pp-t-m:not(#wb-rhythm) > .wb-container { padding-top: var(--wb-rh-pp-t-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-bg-panel.wb-rh-pp-x-m:not(#wb-rhythm) > .wb-container { padding-left: var(--wb-rh-pp-x-m); padding-right: var(--wb-rh-pp-x-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-bg-panel.wb-rh-pp-b-m:not(#wb-rhythm) > .wb-container { padding-bottom: var(--wb-rh-pp-b-m); } }
.wb-main > .wb-section.wb-rh-cards-none:not(#wb-rhythm) :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-path-card, .wb-price-card, .wb-faq-item) { border: 0; }
.wb-main > .wb-section.wb-rh-cards-none:not(#wb-rhythm) :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-path-card, .wb-price-card, .wb-faq-item):not(:hover) { box-shadow: none; }
.wb-main > .wb-section.wb-rh-cards-bottom:not(#wb-rhythm) :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-path-card, .wb-price-card, .wb-faq-item) { border: 0; border-bottom: 4px solid var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-hero-mobile-chip:not(#wb-rhythm) .wb-stage { display: block; padding-bottom: 40px; }
  .wb-main > .wb-section.wb-hero-mobile-chip:not(#wb-rhythm) .wb-stage-photo { width: min(330px, 86%); margin: 0 auto; }
  .wb-main > .wb-section.wb-hero-mobile-chip:not(#wb-rhythm) .wb-overlay-card { display: none; }
  .wb-main > .wb-section.wb-hero-mobile-chip:not(#wb-rhythm) .wb-overlay-chip-a { display: flex; top: auto; right: auto; bottom: 26px; left: 3%; }
}
.wb-main > .wb-section.wb-grow:not(#wb-rhythm) .wb-split-group-row { grid-template-columns: minmax(0, var(--wb-grow-a)) minmax(0, var(--wb-grow-b)); }
.wb-main > .wb-section.wb-grow:not(#wb-rhythm) .wb-split-group-side > :last-child { margin-bottom: 0; }
.wb-main > .wb-section.wb-grow-gap:not(#wb-rhythm) .wb-split-group-row { gap: var(--wb-grow-gap); }
@media (max-width: 1080px) {
  .wb-main > .wb-section.wb-grow-stack-1080:not(#wb-rhythm) .wb-split-group-row { grid-template-columns: minmax(0, 1fr); gap: var(--wb-grow-sgap, clamp(1.5rem, 4vw, 3rem)); }
  .wb-main > .wb-section.wb-grow-stack-1080:not(#wb-rhythm) .wb-split-group-flip .wb-split-media { order: 0; }
}
.wb-main > .wb-section.wb-group-note:not(#wb-rhythm) .wb-split-group-head .wb-split-body { max-width: 34ch; margin-top: 16px; }
.wb-main > .wb-section.wb-group-note:not(#wb-rhythm) .wb-split-group-head .wb-split-body p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--wb-colour-muted); }
.wb-main > .wb-section.wb-price-ink:not(#wb-rhythm) .wb-pricing-edge > .wb-price-card :is(.wb-price-plan-note, .wb-price-alt) { color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-price-ink:not(#wb-rhythm) .wb-pricing-edge > .wb-price-card .wb-price-features .wb-kit-tick { color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); background: var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 10%, transparent)); }
.wb-main > .wb-section.wb-price-ink:not(#wb-rhythm) .wb-pricing-edge > .wb-price-card .wb-price-badge { background: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); color: var(--wb-colour-on-secondary-ink, var(--wb-colour-on-secondary, #ffffff)); }
.wb-main > .wb-section.wb-price-ink:not(#wb-rhythm) .wb-price-included { background: var(--wb-colour-card, var(--wb-colour-surface)); border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-price-ink:not(#wb-rhythm) .wb-price-bigtick { background: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); color: var(--wb-colour-on-secondary-ink, var(--wb-colour-on-secondary, #ffffff)); }
.wb-main > .wb-section.wb-quote-display:not(#wb-rhythm) .wb-quote-text { font-size: clamp(22px, 2.5vw, 31px); font-variation-settings: var(--wb-heading-variation, normal); }
.wb-main > .wb-section.wb-quote-display:not(#wb-rhythm) .wb-quotes-quote .wb-stars { margin-bottom: 44px; }
.wb-main > .wb-section.wb-quote-display:not(#wb-rhythm) .wb-quotes-quote .wb-stars svg { width: 24px; height: 24px; }
.wb-main > .wb-section.wb-quote-display:not(#wb-rhythm) .wb-quote-by { margin-top: 54px; }
.wb-main > .wb-section.wb-hero-opener-slim:not(#wb-rhythm) .wb-hero .wb-eyebrow { color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); opacity: 0.85; }
.wb-main > .wb-section.wb-hero-opener-slim:not(#wb-rhythm) .wb-hero-heading { margin-bottom: 0; }
.wb-main > .wb-section.wb-hero-opener-slim:not(#wb-rhythm) .wb-hero-sub { max-width: 48ch; margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 20px); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-hero-opener-slim:not(#wb-rhythm) .wb-hero-sub { font-size: 17.5px; line-height: 1.6; } }
.wb-main > .wb-section.wb-hero-opener-slim.wb-hero-size-compact:not(#wb-rhythm) .wb-hero-sub { margin-top: 10px; font-size: 16.5px; line-height: 1.5; }
.wb-main > .wb-section.wb-fit-copy-fs:not(#wb-rhythm) :where(:where(.wb-rich > p:not(.wb-rich-lead), .wb-section-head > .wb-section-sub, .wb-compare-after p), :where(.wb-rich-item > p), .wb-rich-list > li, .wb-band-body, :where(.wb-hero-sub, .wb-split-body > p)) { font-size: var(--wb-fit-copy-fs); }
.wb-main > .wb-section.wb-fit-copy-lh:not(#wb-rhythm) :where(:where(.wb-rich > p:not(.wb-rich-lead), .wb-section-head > .wb-section-sub, .wb-compare-after p), :where(.wb-rich-item > p), .wb-rich-list > li, .wb-rich-lead, .wb-band-body, :where(.wb-hero-sub, .wb-split-body > p)) { line-height: var(--wb-fit-copy-lh); }
.wb-main > .wb-section.wb-fit-copy-gap:not(#wb-rhythm) :where(.wb-rich > p:not(.wb-rich-lead), .wb-section-head > .wb-section-sub, .wb-compare-after p) { margin: var(--wb-fit-copy-gap) 0 0; }
.wb-main > .wb-section.wb-fit-copy-gap:not(#wb-rhythm) :where(.wb-rich-heading, .wb-section-head > .wb-section-heading, .wb-rich-lead) { margin-bottom: 0; }
.wb-main > .wb-section.wb-fit-copy-gap:not(#wb-rhythm) :where(.wb-hero-sub, .wb-split-body > p) { margin-top: var(--wb-fit-copy-gap); margin-bottom: 0; }
.wb-main > .wb-section.wb-fit-copy-gap:not(#wb-rhythm) :where(.wb-hero-heading, .wb-split-heading) { margin-bottom: 0; }
.wb-main > .wb-section.wb-fit-copy-igap:not(#wb-rhythm) :where(.wb-rich-item > p) { margin: var(--wb-fit-copy-igap) 0 0; }
.wb-main > .wb-section.wb-fit-copy-lead:not(#wb-rhythm) .wb-rich-lead { font-size: var(--wb-fit-copy-lead); }
.wb-main > .wb-section.wb-fit-copy-muted:not(#wb-rhythm) :where(:where(.wb-rich > p:not(.wb-rich-lead), .wb-section-head > .wb-section-sub, .wb-compare-after p), :where(.wb-rich-item > p), .wb-rich-list > li) { color: var(--wb-colour-muted); }
.wb-main > .wb-section.wb-fit-copy-faint:not(#wb-rhythm) :where(:where(.wb-rich > p:not(.wb-rich-lead), .wb-section-head > .wb-section-sub, .wb-compare-after p), :where(.wb-rich-item > p), .wb-rich-list > li) { color: var(--wb-colour-faint, var(--wb-colour-muted)); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-copy-fs-m:not(#wb-rhythm) :where(:where(.wb-rich > p:not(.wb-rich-lead), .wb-section-head > .wb-section-sub, .wb-compare-after p), :where(.wb-rich-item > p), .wb-rich-list > li, .wb-band-body, :where(.wb-hero-sub, .wb-split-body > p)) { font-size: var(--wb-fit-copy-fs-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-copy-lh-m:not(#wb-rhythm) :where(:where(.wb-rich > p:not(.wb-rich-lead), .wb-section-head > .wb-section-sub, .wb-compare-after p), :where(.wb-rich-item > p), .wb-rich-list > li, .wb-rich-lead, .wb-band-body, :where(.wb-hero-sub, .wb-split-body > p)) { line-height: var(--wb-fit-copy-lh-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-copy-lead-m:not(#wb-rhythm) .wb-rich-lead { font-size: var(--wb-fit-copy-lead-m); } }
.wb-main > .wb-section.wb-fit-hgap:not(#wb-rhythm) :where(.wb-section-head, .wb-rich-heading) { margin-bottom: var(--wb-fit-hgap); }
.wb-main > .wb-section.wb-fit-hgap:not(#wb-rhythm) .wb-section-head > :last-child { margin-bottom: 0; }
.wb-main > .wb-section.wb-fit-hgap:not(#wb-rhythm) .wb-hero .wb-hero-ctas { margin-top: var(--wb-fit-hgap); }
.wb-main > .wb-section.wb-fit-hgap:not(#wb-rhythm) .wb-band-copy > .wb-band-body { margin-top: var(--wb-fit-hgap); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-hgap-m:not(#wb-rhythm) :where(.wb-section-head, .wb-rich-heading) { margin-bottom: var(--wb-fit-hgap-m); }
  .wb-main > .wb-section.wb-fit-hgap-m:not(#wb-rhythm) .wb-section-head > :last-child { margin-bottom: 0; }
  .wb-main > .wb-section.wb-fit-hgap-m:not(#wb-rhythm) .wb-hero .wb-hero-ctas { margin-top: var(--wb-fit-hgap-m); }
  .wb-main > .wb-section.wb-fit-hgap-m:not(#wb-rhythm) .wb-band-copy > .wb-band-body { margin-top: var(--wb-fit-hgap-m); } }
.wb-main > .wb-section.wb-fit-cgap:not(#wb-rhythm) .wb-cta-buttons { margin-top: var(--wb-fit-cgap); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-cgap-m:not(#wb-rhythm) .wb-cta-buttons { margin-top: var(--wb-fit-cgap-m); } }
.wb-main > .wb-section.wb-fit-hw:not(#wb-rhythm) :is(h1, h2) { font-variation-settings: var(--wb-fit-hw); }
.wb-main > .wb-section.wb-fit-hls:not(#wb-rhythm) :is(h1, h2) { letter-spacing: var(--wb-fit-hls); }
.wb-main > .wb-section.wb-fit-card-gap:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) { --wb-card-gap: var(--wb-fit-card-gap); gap: var(--wb-fit-card-gap); }
.wb-main > .wb-section.wb-fit-card-rgap:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) { row-gap: var(--wb-fit-card-rgap); }
.wb-main > .wb-section.wb-fit-card-tfs:not(#wb-rhythm) :is(.wb-feature-title, .wb-split-card-title) { font-size: var(--wb-fit-card-tfs); }
.wb-main > .wb-section.wb-fit-card-tlh:not(#wb-rhythm) :is(.wb-feature-title, .wb-split-card-title) { line-height: var(--wb-fit-card-tlh); }
.wb-main > .wb-section.wb-fit-card-fs:not(#wb-rhythm) :is(.wb-feature-desc, .wb-split-card-desc) { font-size: var(--wb-fit-card-fs); }
.wb-main > .wb-section.wb-fit-card-lh:not(#wb-rhythm) :is(.wb-feature-desc, .wb-split-card-desc) { line-height: var(--wb-fit-card-lh); }
.wb-main > .wb-section.wb-fit-card-tgap:not(#wb-rhythm) :is(.wb-feature-title, .wb-split-card-title) { margin-bottom: 0; }
.wb-main > .wb-section.wb-fit-card-tgap:not(#wb-rhythm) :is(.wb-feature-desc, .wb-split-card-desc) { margin: var(--wb-fit-card-tgap) 0 0; }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-card-fs-m:not(#wb-rhythm) :is(.wb-feature-desc, .wb-split-card-desc) { font-size: var(--wb-fit-card-fs-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-card-lh-m:not(#wb-rhythm) :is(.wb-feature-desc, .wb-split-card-desc) { line-height: var(--wb-fit-card-lh-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fit-card-gap-m:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) { --wb-card-gap: var(--wb-fit-card-gap-m); gap: var(--wb-fit-card-gap-m); } }
.wb-main > .wb-section.wb-fit-card-pt:not(#wb-rhythm) .wb-feature { padding-top: var(--wb-fit-card-pt); }
.wb-main > .wb-section.wb-fit-card-px:not(#wb-rhythm) .wb-feature { padding-left: var(--wb-fit-card-px); padding-right: var(--wb-fit-card-px); }
.wb-main > .wb-section.wb-fit-card-pb:not(#wb-rhythm) .wb-feature { padding-bottom: var(--wb-fit-card-pb); }
.wb-main > .wb-section.wb-fit-card-r:not(#wb-rhythm) .wb-feature { border-radius: var(--wb-fit-card-r); }
.wb-main > .wb-section.wb-fit-card-tls:not(#wb-rhythm) :is(.wb-feature-title, .wb-split-card-title) { letter-spacing: var(--wb-fit-card-tls); }
.wb-main > .wb-section.wb-fit-pgap-t:not(#wb-rhythm) .wb-price-card-panel .wb-price-desc { margin-top: var(--wb-fit-pgap-t); }
.wb-main > .wb-section.wb-fit-pgap-a:not(#wb-rhythm) .wb-price-card-panel > .wb-price-actions { margin-top: var(--wb-fit-pgap-a); padding-top: 0; }
.wb-main > .wb-section.wb-fit-pgap-b:not(#wb-rhythm) .wb-price-card-panel > .wb-price-actions { gap: var(--wb-fit-pgap-b); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-section-sub { max-width: none; margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--wb-colour-faint, var(--wb-colour-muted)); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-wrap { margin-top: 0; border: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12)); border-radius: var(--wb-radius-md, 0.75rem); background: var(--wb-colour-card, var(--wb-colour-surface)); color: var(--wb-colour-text); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare { font-size: 14.5px; line-height: 1.5; }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-wrap > .wb-compare { min-width: 640px; }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare thead :is(th, td) { padding: 14px 16px; text-align: left; font-family: var(--wb-font-ui, inherit); font-weight: 800; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wb-colour-text); background: var(--wb-colour-shade, rgba(15, 23, 42, 0.04)); border-bottom: 2px solid var(--wb-colour-line-strong, rgba(15, 23, 42, 0.3)); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare thead .wb-compare-highlight { color: var(--wb-colour-primary); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare tbody :is(th, td) { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12)); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare tbody th { max-width: 220px; font-weight: 700; color: var(--wb-colour-text); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare tbody td { font-weight: 400; color: var(--wb-colour-muted); background: none; }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-mark { display: inline; }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-mark svg { display: inline-block; vertical-align: -0.2em; margin-right: 8px; }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-yes svg { color: var(--wb-colour-success, #15803d); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-partial svg { color: var(--wb-colour-star, #b45309); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-no svg { color: var(--wb-colour-danger, #b91c1c); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-note { max-width: none; margin: 12px 0 0; text-align: left; font-size: 13px; line-height: 1.7; color: var(--wb-colour-faint, var(--wb-colour-muted)); }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-after { max-width: none; margin: 0; }
.wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare-after p { margin: 14px 0 0; }
@media (max-width: 760px) { .wb-main > .wb-section.wb-compare-ledger:not(#wb-rhythm) .wb-compare { font-size: 15px; } }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) .wb-blog-card { height: auto; }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) :is(.wb-blog-card, .wb-blog-card-body) > img { aspect-ratio: 16 / 10; }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) :is(.wb-blog-card, .wb-blog-card-body) > .wb-blog-card-meta { order: 1; margin: 0; padding: 30px 36px 0; font-family: var(--wb-font-ui, inherit); font-weight: 800; font-size: 12px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); opacity: 0.8; }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) :is(.wb-blog-card, .wb-blog-card-body) > h3 { order: 2; margin: 0; padding: 12px 36px 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.018em; font-weight: 700; font-variation-settings: var(--wb-fit-hw, var(--wb-heading-variation, normal)); }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) :is(.wb-blog-card, .wb-blog-card-body) > h3:not(:has(+ .wb-blog-card-meta)) { padding-top: 30px; }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) :is(.wb-blog-card, .wb-blog-card-body) > p:not([class]) { order: 3; margin: 0; padding: 14px 36px 0; font-size: 16px; line-height: 1.6; color: var(--wb-colour-muted); }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) :is(.wb-blog-card, .wb-blog-card-body) > .wb-blog-more { order: 4; align-self: flex-start; margin: 20px 36px 38px; padding-bottom: 3px; font-family: var(--wb-font-ui, inherit); font-weight: 800; font-size: 13px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); border-bottom: 2px solid currentColor; }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) :is(.wb-blog-card, .wb-blog-card-body) > .wb-blog-more::after { content: " \2192"; }
.wb-main > .wb-section.wb-blog-eyebrow:not(#wb-rhythm) .wb-blog-card:hover .wb-blog-more { color: var(--wb-colour-primary); }
@media (max-width: 900px) {
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-split { grid-template-columns: minmax(0, 1fr); }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-split-media-left .wb-split-media { order: 0; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-quote-spotlight { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-quote-spotlight .wb-quote-photo { max-width: 380px; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) { grid-template-columns: minmax(0, 1fr); }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) > * { --wb-card-cols: 1; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-split { gap: 40px; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-stage { width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 56px; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-stage-photo { width: min(400px, 72%); margin-left: auto; margin-right: 0; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-overlay-card { left: -24px; bottom: 32px; width: min(314px, 100%); }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-overlay-chip-a { top: 0; right: 0; left: -38px; max-width: none; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-overlay-chip-b { top: 0; right: 0; bottom: 86px; max-width: 300px; }
  .wb-main > .wb-section.wb-fold-stack-900:not(#wb-rhythm) .wb-stage-splash-c { bottom: 90px; }
}
@media (max-width: 980px) {
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-split { grid-template-columns: minmax(0, 1fr); }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-split-media-left .wb-split-media { order: 0; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-quote-spotlight { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-quote-spotlight .wb-quote-photo { max-width: 380px; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) { grid-template-columns: minmax(0, 1fr); }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) > * { --wb-card-cols: 1; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-split { gap: 40px; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-stage { width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 56px; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-stage-photo { width: min(400px, 72%); margin-left: auto; margin-right: 0; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-overlay-card { left: -24px; bottom: 32px; width: min(314px, 100%); }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-overlay-chip-a { top: 0; right: 0; left: -38px; max-width: none; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-overlay-chip-b { top: 0; right: 0; bottom: 86px; max-width: 300px; }
  .wb-main > .wb-section.wb-fold-stack-980:not(#wb-rhythm) .wb-stage-splash-c { bottom: 90px; }
}
@media (max-width: 1080px) {
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-split { grid-template-columns: minmax(0, 1fr); }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-split-media-left .wb-split-media { order: 0; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-quote-spotlight { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-quote-spotlight .wb-quote-photo { max-width: 380px; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) { grid-template-columns: minmax(0, 1fr); }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) > * { --wb-card-cols: 1; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-split { gap: 40px; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-stage { width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 56px; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-stage-photo { width: min(400px, 72%); margin-left: auto; margin-right: 0; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-overlay-card { left: -24px; bottom: 32px; width: min(314px, 100%); }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-overlay-chip-a { top: 0; right: 0; left: -38px; max-width: none; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-overlay-chip-b { top: 0; right: 0; bottom: 86px; max-width: 300px; }
  .wb-main > .wb-section.wb-fold-stack-1080:not(#wb-rhythm) .wb-stage-splash-c { bottom: 90px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .wb-main > .wb-section.wb-fold-sgap-900:not(#wb-rhythm) :is(.wb-features-grid, .wb-team-grid, .wb-bloglist, .wb-faq-list, .wb-paths-grid, .wb-pricing-grid) { --wb-card-gap: var(--wb-fold-sgap); gap: var(--wb-fold-sgap); }
}
@media (min-width: 761px) {
  :where(.wb-main > .wb-section.wb-fold-overlap:not(#wb-rhythm) + .wb-section) { background-color: var(--wb-colour-background); }
  .wb-main > .wb-section.wb-fold-overlap:not(#wb-rhythm) + .wb-section {
    position: relative;
    z-index: 2;
    margin-top: -1.375rem;
    border-radius: 1.375rem 1.375rem 0 0;
    box-shadow: 0 -26px 60px -26px rgba(15, 23, 42, 0.45);
  }
}
.wb-main > .wb-section.wb-fold-center:not(#wb-rhythm) .wb-split-copy { text-align: center; }
.wb-main > .wb-section.wb-fold-center:not(#wb-rhythm) .wb-split-copy :is(.wb-eyebrow, .wb-split-heading, .wb-split-body > p) { margin-left: auto; margin-right: auto; }
.wb-main > .wb-section.wb-fold-center:not(#wb-rhythm) .wb-split-ctas { justify-content: center; }
.wb-main > .wb-section.wb-fold-hlh:not(#wb-rhythm) :is(h1, h2):not(#wb-fold-heading) { line-height: var(--wb-fold-hlh); }
.wb-main > .wb-section.wb-fold-measure-center:not(#wb-rhythm) :is(.wb-hero-heading, .wb-hero-sub, .wb-section-heading, .wb-section-sub) { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .wb-main > .wb-section.wb-fold-arrows-wide:not(#wb-rhythm) .wb-tabs-arrow { display: none; } }
.wb-main > .wb-section.wb-fold-field-normal:not(#wb-rhythm) .wb-contact-card .wb-field :is(input, textarea) { line-height: normal; }
.wb-main > .wb-section.wb-fold-submit-card:not(#wb-rhythm) .wb-contact-card .wb-button { padding: 18px 24px; font-size: 16px; border-radius: 999px; }
@media (min-width: 761px) and (max-width: 1080px) {
  .wb-main > .wb-section.wb-bg-panel.wb-fold-pp-x-1080:not(#wb-rhythm) > .wb-container { padding-left: var(--wb-fold-pp-x-1080); padding-right: var(--wb-fold-pp-x-1080); }
}
@media (min-width: 761px) and (max-width: 980px) {
  .wb-main > .wb-section.wb-fold-pt-980:not(#wb-rhythm) { padding-top: var(--wb-fold-pt-980); }
}
@media (min-width: 761px) and (max-width: 980px) {
  .wb-main > .wb-section.wb-fold-pb-980:not(#wb-rhythm) { padding-bottom: var(--wb-fold-pb-980); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .wb-main > .wb-section.wb-fold-pt-900:not(#wb-rhythm) { padding-top: var(--wb-fold-pt-900); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .wb-main > .wb-section.wb-fold-pb-900:not(#wb-rhythm) { padding-bottom: var(--wb-fold-pb-900); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .wb-main > .wb-section.wb-bg-panel.wb-fold-pp-t-900:not(#wb-rhythm) > .wb-container { padding-top: var(--wb-fold-pp-t-900); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .wb-main > .wb-section.wb-bg-panel.wb-fold-pp-x-900:not(#wb-rhythm) > .wb-container { padding-left: var(--wb-fold-pp-x-900); padding-right: var(--wb-fold-pp-x-900); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .wb-main > .wb-section.wb-bg-panel.wb-fold-pp-b-900:not(#wb-rhythm) > .wb-container { padding-bottom: var(--wb-fold-pp-b-900); }
}
.wb-main > .wb-section.wb-frame-app:not(#wb-rhythm) .wb-frame-browser { background: #10151c; border: 1px solid var(--wb-colour-line-strong, rgba(15, 23, 42, 0.3)); border-radius: 14px; box-shadow: 14px 16px 0 var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 12%, var(--wb-colour-card, #ffffff))), 0 26px 52px -24px rgba(16, 35, 61, 0.35); }
.wb-main > .wb-section.wb-frame-app:not(#wb-rhythm) .wb-frame-bar { gap: 12px; padding: 10px 14px; background: #10151c; border-bottom: 0; }
.wb-main > .wb-section.wb-frame-app:not(#wb-rhythm) .wb-frame-dots { gap: 5px; }
.wb-main > .wb-section.wb-frame-app:not(#wb-rhythm) .wb-frame-dots i { width: 9px; height: 9px; background: #3a4553; }
.wb-main > .wb-section.wb-frame-app:not(#wb-rhythm) .wb-frame-url { margin-right: 26px; padding: 4px 10px; border-radius: 6px; text-align: center; font-family: var(--wb-font-ui, inherit); font-size: 11.5px; font-weight: 700; color: #8b96a5; background: #1b222c; }
.wb-main > .wb-section.wb-tabs-square:not(#wb-rhythm) .wb-tab { padding: 11px 16px; font-family: var(--wb-font-ui, inherit); font-size: 13.5px; background: var(--wb-colour-card, var(--wb-colour-background)); border: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.1)); border-radius: 0; }
.wb-main > .wb-section.wb-tabs-square:not(#wb-rhythm) .wb-tab:hover { color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-tabs-square:not(#wb-rhythm) .wb-tab.is-active { color: var(--wb-colour-on-secondary-ink, var(--wb-colour-on-secondary, #ffffff)); background: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-tabs-square:not(#wb-rhythm) .wb-tabs-arrow { color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); background: var(--wb-colour-card, var(--wb-colour-background)); border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); border-radius: 0; }
.wb-main > .wb-section.wb-tabs-square:not(#wb-rhythm) .wb-tabs-arrow:hover { color: var(--wb-colour-on-secondary-ink, var(--wb-colour-on-secondary, #ffffff)); background: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-tabs-square:not(#wb-rhythm) .wb-tabs-arrow svg { stroke-width: 2.3; }
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-tabs-square:not(#wb-rhythm) .wb-tab { padding: 9px 12px; font-size: 12px; }
}
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) :is(.wb-overlay-card, .wb-overlay-chip) { background: var(--wb-colour-card, var(--wb-colour-background)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-card { border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-head { gap: 3px; padding: 14px 17px 11px; border-bottom-color: var(--wb-colour-line, rgba(15, 23, 42, 0.1)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-title { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; font-variation-settings: var(--wb-heading-variation, normal); letter-spacing: var(--wb-heading-tracking, normal); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-live { display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px; background: #2e9e63; box-shadow: 0 0 0 3px rgba(46, 158, 99, 0.18); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-eyebrow { color: var(--wb-colour-faint, var(--wb-colour-muted)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-list { padding: 4px 17px 12px; }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-list li { align-items: center; gap: 11px; padding: 10px 0; font-size: 13.5px; line-height: 1.35; border-bottom-color: var(--wb-colour-line, rgba(15, 23, 42, 0.1)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-list .wb-overlay-ico { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; border-radius: 6px; }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) :is(.wb-overlay-ico, .wb-overlay-chip-ico) .wb-overlay-svg { width: 15px; height: 15px; }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-svg-star { fill: currentColor; stroke: none; }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-time { align-self: flex-start; margin-top: 2px; font-size: 11px; color: var(--wb-colour-faint, var(--wb-colour-muted)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-chip { gap: 11px; padding: 11px 15px; border-color: var(--wb-colour-line, rgba(15, 23, 42, 0.1)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-chip-label { font-size: 11.5px; color: var(--wb-colour-faint, var(--wb-colour-muted)); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-chip-value { font-size: 15px; }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-chip-b .wb-overlay-chip-ico { margin-top: 2px; }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-chip-b .wb-overlay-chip-label { line-height: 1.4; }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-chip-b .wb-overlay-chip-value { line-height: 1.35; }
.wb-main > .wb-section.wb-card-tiles.wb-hero-decor:not(#wb-rhythm) .wb-stage-splash-b { border-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-card-tiles.wb-hero-decor:not(#wb-rhythm) .wb-stage-splash-c i:first-child { background: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
@media (prefers-reduced-motion: no-preference) {
  .wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-live { animation: wb-tile-live 2.2s ease-in-out infinite; }
}
@keyframes wb-tile-live {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46, 158, 99, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(46, 158, 99, 0.07); }
}
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-tone-tick { color: var(--wb-tile-tick-ink, var(--wb-colour-success, #15803d)); background: var(--wb-tile-tick-ground, color-mix(in srgb, var(--wb-colour-success, #15803d) 12%, var(--wb-colour-card, #ffffff))); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-tone-star { color: var(--wb-tile-star-ink, var(--wb-colour-primary-deep, var(--wb-colour-primary))); background: var(--wb-tile-star-ground, var(--wb-colour-primary-tint, color-mix(in srgb, var(--wb-colour-primary) 12%, var(--wb-colour-card, #ffffff)))); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-tone-mail { color: var(--wb-tile-mail-ink, var(--wb-colour-info, var(--wb-colour-secondary))); background: var(--wb-tile-mail-ground, color-mix(in srgb, var(--wb-colour-info, var(--wb-colour-secondary)) 12%, var(--wb-colour-card, #ffffff))); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-tone-money { color: var(--wb-tile-money-ink, var(--wb-colour-success, #15803d)); background: var(--wb-tile-money-ground, color-mix(in srgb, var(--wb-colour-success, #15803d) 12%, var(--wb-colour-card, #ffffff))); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-tone-clock { color: var(--wb-tile-clock-ink, var(--wb-colour-secondary-ink, var(--wb-colour-secondary))); background: var(--wb-tile-clock-ground, var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 12%, var(--wb-colour-card, #ffffff)))); }
.wb-main > .wb-section.wb-card-tiles:not(#wb-rhythm) .wb-overlay-tone-quote { color: var(--wb-tile-quote-ink, var(--wb-colour-primary-deep, var(--wb-colour-primary))); background: var(--wb-tile-quote-ground, var(--wb-colour-primary-tint, color-mix(in srgb, var(--wb-colour-primary) 12%, var(--wb-colour-card, #ffffff)))); }
@media (min-width: 1081px) {
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-split { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 88px; align-items: end; }
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-split-copy { padding-bottom: 112px; }
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-overlay-card { bottom: calc(4rem - 58px); }
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-overlay-chip-a { left: -38px; }
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-overlay-chip-b { right: -30px; bottom: calc(4rem + 30px); }
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-stage-splash-c { bottom: calc(4rem + 34px); }
}
@media (max-width: 760px) {
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-split { gap: 22px; }
  .wb-main > .wb-section.wb-stage-anchored:not(#wb-rhythm) .wb-hero-heading { margin-bottom: 0; }
  .wb-main > .wb-section.wb-stage-anchored.wb-hero-mobile-chip:not(#wb-rhythm) .wb-overlay-chip-a { bottom: calc(40px + 26px); }
}
.wb-main > .wb-section.wb-sub-strong:not(#wb-rhythm) .wb-hero-sub strong { color: var(--wb-colour-text); }
.wb-main > .wb-section.wb-byline:not(#wb-rhythm) .wb-quote-role { font-size: var(--wb-byline-role-fs, inherit); opacity: 1; }
.wb-main > .wb-section.wb-byline-fs:not(#wb-rhythm) .wb-quote-by { font-size: var(--wb-byline-fs); }
.wb-main > .wb-section.wb-byline-muted:not(#wb-rhythm) .wb-quote-by { color: var(--wb-colour-muted); }
.wb-main > .wb-section.wb-byline-muted:not(#wb-rhythm) .wb-quote-name { color: var(--wb-colour-text); }
.wb-main > .wb-section.wb-byline-role-faint:not(#wb-rhythm) .wb-quote-role { color: var(--wb-colour-faint, var(--wb-colour-muted)); }
.wb-main > .wb-section.wb-quote-axis:not(#wb-rhythm) .wb-quote-text { font-variation-settings: "wdth" var(--wb-quote-axis); }
.wb-main > .wb-section.wb-quotes-decor.wb-rings-outside:not(#wb-rhythm)::before, .wb-main > .wb-section.wb-quotes-decor.wb-rings-outside:not(#wb-rhythm)::after { box-sizing: content-box; }
.wb-main > .wb-section.wb-avatar-outside:not(#wb-rhythm) .wb-cta-avatar { box-sizing: content-box; }
.wb-main > .wb-section.wb-cta-hgap:not(#wb-rhythm) .wb-cta-heading { margin-bottom: var(--wb-cta-hgap); }
.wb-main > .wb-section.wb-path-tw:not(#wb-rhythm) .wb-path-title { font-variation-settings: "wdth" var(--wb-path-tw); }
.wb-main > .wb-section.wb-path-go-follow:not(#wb-rhythm) .wb-path-go { margin-top: 0; padding-top: 10px; }
.wb-main > .wb-section.wb-bg-panel.wb-panel-content:not(#wb-rhythm) > .wb-container { width: calc(100% - 2 * var(--wb-container-gutter, 20px)); max-width: calc(var(--wb-container, 1100px) - 2 * var(--wb-container-gutter, 20px)); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-bg-panel.wb-panel-content:not(#wb-rhythm) > .wb-container { width: calc(100% - 40px); } }
.wb-main > .wb-section.wb-quotes-decor.wb-dot-ink:not(#wb-rhythm) > .wb-quote-dot-b { background: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-blog-lifted:not(#wb-rhythm) .wb-blog-card { box-shadow: 0 26px 52px -28px rgba(22, 52, 90, 0.3); transition: transform 0.2s, box-shadow 0.2s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wb-main > .wb-section.wb-blog-lifted:not(#wb-rhythm) .wb-blog-card:hover { transform: translateY(-5px); box-shadow: 0 34px 64px -30px rgba(22, 52, 90, 0.42); }
}
.wb-main > .wb-section.wb-bg-panel.wb-cf-panel-measure:not(#wb-rhythm) > .wb-container { width: calc(100% - 2 * var(--wb-container-gutter, 20px)); max-width: calc(var(--wb-rh-measure, var(--wb-container, 1100px)) - 2 * var(--wb-container-gutter, 20px)); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-bg-panel.wb-cf-panel-measure:not(#wb-rhythm) > .wb-container { width: calc(100% - 40px); } }
.wb-main > .wb-section.wb-bg-panel.wb-cf-panel-line:not(#wb-rhythm) > .wb-container { border: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12)); }
.wb-main > .wb-section.wb-bg-panel.wb-cf-panel-r:not(#wb-rhythm) > .wb-container { border-radius: var(--wb-cf-panel-r); }
.wb-main > .wb-section.wb-cf-way-tone:not(#wb-rhythm) .wb-contact-way.wb-way-primary-tint { background: var(--wb-colour-primary-tint, color-mix(in srgb, var(--wb-colour-primary) 12%, var(--wb-colour-background))); border-bottom-color: var(--wb-colour-primary-deep, var(--wb-colour-primary)); }
.wb-main > .wb-section.wb-cf-way-tone:not(#wb-rhythm) .wb-contact-way.wb-way-secondary-tint { background: var(--wb-colour-secondary-tint, color-mix(in srgb, var(--wb-colour-secondary) 12%, var(--wb-colour-background))); border-bottom-color: var(--wb-colour-secondary-ink, var(--wb-colour-secondary)); }
.wb-main > .wb-section.wb-cf-way-tone:not(#wb-rhythm) .wb-contact-way.wb-way-accent-tint { background: var(--wb-colour-accent-tint, color-mix(in srgb, var(--wb-colour-accent) 12%, var(--wb-colour-background))); border-bottom-color: var(--wb-colour-primary-deep, var(--wb-colour-primary)); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-cf-hs-m:not(#wb-rhythm) :is(h1, h2):not(#wb-rhythm-heading) { font-size: var(--wb-cf-hs-m); } }
.wb-main > .wb-section.wb-cf-cta-gap:not(#wb-rhythm) .wb-hero-ctas { gap: var(--wb-cf-cta-gap); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-cf-cta-py-m:not(#wb-rhythm) .wb-hero-ctas .wb-button { padding-top: var(--wb-cf-cta-py-m); padding-bottom: var(--wb-cf-cta-py-m); } }
@media (max-width: 760px) { .wb-main > .wb-section.wb-cf-cta-px-m:not(#wb-rhythm) .wb-hero-ctas .wb-button { padding-left: var(--wb-cf-cta-px-m); padding-right: var(--wb-cf-cta-px-m); } }
.wb-main > .wb-section.wb-cf-it-fs:not(#wb-rhythm) .wb-rich-subheading { font-size: var(--wb-cf-it-fs); }
@media (max-width: 760px) { .wb-main > .wb-section.wb-cf-it-fs-m:not(#wb-rhythm) .wb-rich-subheading { font-size: var(--wb-cf-it-fs-m); } }
.wb-main > .wb-section.wb-cf-it-w:not(#wb-rhythm) .wb-rich-subheading { font-variation-settings: var(--wb-cf-it-w); }
.wb-main > .wb-section.wb-cf-it-ls:not(#wb-rhythm) .wb-rich-subheading { letter-spacing: var(--wb-cf-it-ls); }
.wb-main > .wb-section.wb-cf-rule:not(#wb-rhythm) .wb-rich { padding-top: var(--wb-cf-rule); border-top: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12)); }
.wb-main > .wb-section.wb-cf-body-fs:not(#wb-rhythm) .wb-cta-body { font-size: var(--wb-cf-body-fs); }
.wb-main > .wb-section.wb-cf-body-lh:not(#wb-rhythm) .wb-cta-body { line-height: var(--wb-cf-body-lh); }
.wb-main > .wb-section.wb-cf-body-gap:not(#wb-rhythm) .wb-cta-body { margin-bottom: var(--wb-cf-body-gap); }
.wb-main > .wb-section.wb-cf-body-gap:not(#wb-rhythm) .wb-cta-body + .wb-cta-buttons { margin-top: 0; }
.wb-main > .wb-section.wb-cf-body-muted:not(#wb-rhythm) .wb-cta-body { color: var(--wb-colour-muted); }
.wb-main > .wb-section.wb-cf-cta-left:not(#wb-rhythm) div.wb-cta { max-width: none; margin: 0; text-align: left; }
.wb-main > .wb-section.wb-cf-cta-left:not(#wb-rhythm) .wb-cta-buttons { justify-content: flex-start; }
.wb-main > .wb-section.wb-cf-btn-gap:not(#wb-rhythm) .wb-cta-buttons { gap: var(--wb-cf-btn-gap); }
.wb-main > .wb-section.wb-cf-link-ui:not(#wb-rhythm) .wb-cta-link { gap: 0.3em; font-family: var(--wb-font-ui, inherit); }
.wb-main > .wb-section.wb-cf-link-ui:not(#wb-rhythm) .wb-cta-link .wb-button-icon svg { display: none; }
.wb-main > .wb-section.wb-cf-link-ui:not(#wb-rhythm) .wb-cta-link .wb-button-icon::after { content: "\2192"; content: "\2192" / ""; }
.wb-main > .wb-section.wb-cf-name-lh:not(#wb-rhythm) .wb-team-name { line-height: var(--wb-cf-name-lh); }
.wb-main > .wb-section.wb-cf-name-w:not(#wb-rhythm) .wb-team-name { font-variation-settings: var(--wb-cf-name-w); }
.wb-main > .wb-section.wb-cf-submit-gap:not(#wb-rhythm) .wb-contact-card .wb-button { margin-top: var(--wb-cf-submit-gap); }
.wb-main > .wb-section.wb-cf-status-collapse:not(#wb-rhythm) .wb-contact-card .wb-form-status:empty { min-height: 0; }
.wb-main > .wb-section.wb-cf-glyph:not(#wb-rhythm) .wb-compare-mark { display: inline; }
.wb-main > .wb-section.wb-cf-glyph:not(#wb-rhythm) .wb-compare-glyph { display: inline-block; margin-right: 8px; font-weight: 800; }
.wb-main > .wb-section.wb-cf-glyph:not(#wb-rhythm) .wb-compare-yes .wb-compare-glyph { color: var(--wb-colour-success, #15803d); }
.wb-main > .wb-section.wb-cf-glyph:not(#wb-rhythm) .wb-compare-partial .wb-compare-glyph { color: var(--wb-colour-star, #b45309); }
.wb-main > .wb-section.wb-cf-glyph:not(#wb-rhythm) .wb-compare-no .wb-compare-glyph { color: var(--wb-colour-danger, #b91c1c); }
.wb-main > .wb-section.wb-cf-glyph:not(#wb-rhythm) .wb-compare-tag { margin-right: 8px; padding: 2px 7px; font-family: var(--wb-font-ui, inherit); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--wb-colour-primary); border: 1.5px solid currentColor; border-radius: 5px; }
.wb-main > .wb-section.wb-cf-lead-col:not(#wb-rhythm) .wb-compare tbody td:first-of-type { font-weight: 700; color: var(--wb-colour-text); }
.wb-main .wb-tab-panel > .wb-section.wb-rh-pt:not(#wb-rhythm) { padding-top: var(--wb-rh-pt); }
.wb-main .wb-tab-panel > .wb-section.wb-rh-pb:not(#wb-rhythm) { padding-bottom: var(--wb-rh-pb); }
.wb-main .wb-tab-panel > .wb-section.wb-grow-one:not(#wb-rhythm) .wb-split-group-row { grid-template-columns: minmax(0, 1fr); }
.wb-main .wb-tab-panel > .wb-section.wb-grow-one:not(#wb-rhythm) .wb-split-group-side > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .wb-main .wb-tab-panel > .wb-section.wb-grow-stack-900:not(#wb-rhythm) .wb-split-group-row { grid-template-columns: minmax(0, 1fr); gap: var(--wb-grow-sgap, clamp(1.5rem, 4vw, 3rem)); }
  .wb-main .wb-tab-panel > .wb-section.wb-grow-stack-900:not(#wb-rhythm) .wb-split-group-flip .wb-split-media { order: 0; }
}
.wb-main .wb-tab-panel > .wb-section.wb-grow-hgap:not(#wb-rhythm) .wb-split-group-head { margin-bottom: var(--wb-grow-hgap); }
.wb-main .wb-tab-panel > .wb-section.wb-group-note:not(#wb-rhythm) .wb-split-group-head .wb-split-body { max-width: 34ch; margin-top: 16px; }
.wb-main .wb-tab-panel > .wb-section.wb-group-note:not(#wb-rhythm) .wb-split-group-head .wb-split-body p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--wb-colour-muted); }
@media (max-width: 760px) { .wb-main .wb-tab-panel > .wb-section.wb-fit-card-fs-m:not(#wb-rhythm) :is(.wb-feature-desc, .wb-split-card-desc) { font-size: var(--wb-fit-card-fs-m); } }
@media (max-width: 760px) { .wb-main .wb-tab-panel > .wb-section.wb-fit-card-lh-m:not(#wb-rhythm) :is(.wb-feature-desc, .wb-split-card-desc) { line-height: var(--wb-fit-card-lh-m); } }
.wb-main .wb-button, :root .wb-site-header .wb-mobile-menu .wb-mobile-actions a.wb-button:not(#wb-button-box) { padding: 13px 22px; border-radius: 10px; border: 1.5px solid transparent; gap: 9px; font-size: 15.5px; white-space: nowrap; }
@media (max-width: 760px) {
  .wb-main .wb-button, :root .wb-site-header .wb-mobile-menu .wb-mobile-actions a.wb-button:not(#wb-button-box) { padding: 16px 24px; border-radius: 12px; font-size: 17px; }
  .wb-main .wb-hero-ctas .wb-button, .wb-main .wb-band-copy .wb-button { padding: 14px 22px; }
}
.wb-main .wb-button .wb-button-icon:last-child svg { display: none; }
.wb-main .wb-button .wb-button-icon:last-child::after { content: "\2192"; content: "\2192" / ""; display: inline-block; font-size: 17px; line-height: 1; transition: transform 0.16s; }
.wb-main .wb-button:hover .wb-button-icon:last-child::after { transform: translateX(3px); }

/* brand tokens (theme-brand-schemas.ts) */
:root {
  --wb-colour-card: #FFFFFF;
  --wb-colour-shade: #F4F0E8;
  --wb-colour-line: #E9E3D9;
  --wb-colour-line-strong: #54402E;
  --wb-colour-faint: #8D857C;
  --wb-colour-primary-deep: #8A3A08;
  --wb-colour-primary-tint: #F7EDE3;
  --wb-colour-secondary-tint: #E9EEF7;
  --wb-colour-accent-tint: #FBE9D6;
  --wb-colour-on-secondary: #FBF9F5;
  --wb-colour-feature: #BE5417;
  --wb-colour-feature-deep: #A34410;
  --wb-colour-star: #E8A317;
  --wb-colour-success: #2E7D54;
  --wb-colour-danger: #B03A34;
  --wb-colour-info: #3D6396;
  --wb-colour-accent-inverse: #E8894A;
  --wb-colour-secondary-ink: #16345A;
  --wb-colour-on-secondary-ink: #FFFFFF;
  --wb-colour-decor: #F6C8A4;
  --wb-colour-on-decor: #1A1511;
  --wb-colour-on-feature: #ffffff;
  --wb-font-ui: 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
  --wb-container: 1160px;
  --wb-container-gutter: 26px;
  --wb-shadow-sm: 0 1px 2px rgba(26,21,17,.04);
  --wb-shadow-hover: 0 6px 18px -8px rgba(26,21,17,.12), 0 1px 3px rgba(26,21,17,.05);
  color-scheme: light;
}
:root .wb-container { max-width: var(--wb-container); }
.wb-container { padding-left: var(--wb-container-gutter); padding-right: var(--wb-container-gutter); }
@media (max-width: 760px) { html:root .wb-container { padding-left: 20px; padding-right: 20px; } }
:is(.wb-nav a, .wb-portal-link, .wb-header-cta, .wb-header-actions .wb-button) { font-family: var(--wb-font-ui); font-variation-settings: normal; }
.wb-button { font-family: var(--wb-font-heading); font-variation-settings: "wdth" 105; font-weight: 700; letter-spacing: -0.004em; }
.wb-site-header .wb-button { font-family: var(--wb-font-ui, var(--wb-font-body)); font-variation-settings: normal; font-weight: 800; text-transform: uppercase; }
:is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-path-card, .wb-price-card) { background: var(--wb-colour-card); }
:is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-faq-item, .wb-path-card, .wb-price-card, .wb-overlay-head, .wb-overlay-list li) { border-color: var(--wb-colour-line); }
.wb-site-header { border-bottom-color: var(--wb-colour-line); }
.wb-site-footer { border-top-color: var(--wb-colour-line); }
.wb-button:not(.wb-button-secondary):not(.wb-button-ghost):hover { background: var(--wb-colour-primary-deep); filter: none; }
.wb-overlay-title { color: var(--wb-colour-primary-deep); }
::selection { background: var(--wb-colour-primary-tint); color: var(--wb-colour-primary-deep, var(--wb-colour-text)); }
.wb-button:not(.wb-button-secondary):not(.wb-button-ghost), :is(.wb-feature, .wb-team-member, .wb-testimonial, .wb-blog-card, .wb-path-card, .wb-price-card) { box-shadow: var(--wb-shadow-sm); }
.wb-button:not(.wb-button-secondary):not(.wb-button-ghost):hover { box-shadow: var(--wb-shadow-hover); }
.wb-main > .wb-section.wb-tone-muted.wb-tone-shade {
  --wb-tone-ground: var(--wb-colour-shade);
  --wb-tone-copy: var(--wb-kit-text);
  --wb-tone-copy-muted: var(--wb-kit-muted);
}
.wb-main > .wb-section.wb-tone-muted.wb-tone-card {
  --wb-tone-ground: var(--wb-colour-card);
  --wb-tone-copy: var(--wb-kit-text);
  --wb-tone-copy-muted: var(--wb-kit-muted);
}
.wb-main > .wb-section.wb-tone-muted.wb-tone-primary-tint {
  --wb-tone-ground: var(--wb-colour-primary-tint);
  --wb-tone-copy: var(--wb-kit-text);
  --wb-tone-copy-muted: var(--wb-kit-muted);
}
.wb-main > .wb-section.wb-tone-muted.wb-tone-secondary-tint {
  --wb-tone-ground: var(--wb-colour-secondary-tint);
  --wb-tone-copy: var(--wb-kit-text);
  --wb-tone-copy-muted: var(--wb-kit-muted);
}
.wb-main > .wb-section.wb-tone-muted.wb-tone-accent-tint {
  --wb-tone-ground: var(--wb-colour-accent-tint);
  --wb-tone-copy: var(--wb-kit-text);
  --wb-tone-copy-muted: var(--wb-kit-muted);
}
.wb-main > .wb-section.wb-tone-accent.wb-tone-feature {
  --wb-tone-ground: var(--wb-colour-feature);
  --wb-tone-copy: var(--wb-colour-on-feature);
  --wb-tone-copy-muted: var(--wb-colour-on-feature);
}

.wb-header-actions { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.wb-theme-toggle {
  display: none;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 1px solid var(--wb-colour-line, rgba(15, 23, 42, 0.12));
  border-radius: 9px;
  background: transparent;
  color: var(--wb-colour-muted);
  cursor: pointer;
}
.wb-theme-ready .wb-theme-toggle { display: inline-grid; }
.wb-theme-toggle:hover {
  background: var(--wb-colour-primary-tint, var(--wb-colour-panel));
  color: var(--wb-colour-primary-deep, var(--wb-colour-primary));
  border-color: var(--wb-colour-primary);
}
.wb-theme-toggle svg { width: 1.0625rem; height: 1.0625rem; stroke: currentColor; fill: none; stroke-width: 1.9; }
.wb-theme-toggle .wb-icon-moon { display: none; }
:root[data-theme="dark"] .wb-theme-toggle .wb-icon-moon { display: block; }
:root[data-theme="dark"] .wb-theme-toggle .wb-icon-sun { display: none; }
/* dark scheme (theme.dark) */
:root[data-theme="dark"] {
  --wb-colour-primary: #E07C3E;
  --wb-colour-secondary: #10233D;
  --wb-colour-accent: #E07C3E;
  --wb-colour-background: #14110E;
  --wb-colour-surface: #1C1815;
  --wb-colour-text: #F6F1E9;
  --wb-colour-muted: #BCB2A6;
  --wb-colour-on-primary: #0f172a;
  --wb-colour-on-surface: #f8fafc;
  --wb-colour-on-surface-muted: rgba(248,250,252,0.72);
  --wb-colour-panel: #f1f5f9;
  --wb-colour-card: #1C1815;
  --wb-colour-shade: #191510;
  --wb-colour-line: #2F2822;
  --wb-colour-line-strong: #5C4835;
  --wb-colour-faint: #8B8177;
  --wb-colour-primary-deep: #F09A61;
  --wb-colour-primary-tint: #2B1D13;
  --wb-colour-secondary-tint: #1C2A3D;
  --wb-colour-accent-tint: #241A12;
  --wb-colour-on-secondary: #F6F1E9;
  --wb-colour-feature: #9B4210;
  --wb-colour-feature-deep: #7E3608;
  --wb-colour-star: #F2B93D;
  --wb-colour-success: #4FA87A;
  --wb-colour-danger: #D2665F;
  --wb-colour-info: #6D93C4;
  --wb-colour-accent-inverse: #F0A468;
  --wb-colour-secondary-ink: #A9C7E8;
  --wb-colour-on-secondary-ink: #0F2337;
  --wb-colour-decor: #F6C8A4;
  --wb-colour-on-decor: #1A1511;
  --wb-colour-on-feature: #FBEFE4;
  --wb-tone-inverse-ground: #10233D;
  --wb-tone-inverse-copy: #F6F1E9;
  --wb-tone-accent-ground: #E07C3E;
  --wb-tone-accent-copy: #0f172a;
  --wb-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --wb-shadow-hover: 0 6px 18px -8px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.4);
  color-scheme: dark;
}
.wb-scheme-light { display: contents; }
.wb-scheme-dark { display: none; }
:root[data-theme="dark"] .wb-scheme-light { display: none; }
:root[data-theme="dark"] .wb-scheme-dark { display: contents; }

/* heading typography (theme.typography) */
:root {
  --wb-heading-tracking: -0.021em;
  --wb-heading-weight: 700;
  --wb-heading-leading: 1.05;
  --wb-heading-variation: "wdth" 112;
  --wb-body-leading: 1.5;
  --wb-body-variation: "wdth" 100;
  --wb-eyebrow-size: 11.5px;
  --wb-eyebrow-weight: 800;
  --wb-eyebrow-tracking: 0.16em;
  --wb-eyebrow-gap: 16px;
}
:is(h1, h2, h3):not(#wb-typography) {
  letter-spacing: var(--wb-heading-tracking);
  font-weight: var(--wb-heading-weight);
  line-height: var(--wb-heading-leading);
  font-variation-settings: var(--wb-heading-variation);
}
body {
  line-height: var(--wb-body-leading);
  font-variation-settings: var(--wb-body-variation);
}
.wb-main .wb-eyebrow {
  font-size: var(--wb-eyebrow-size);
  font-weight: var(--wb-eyebrow-weight);
  letter-spacing: var(--wb-eyebrow-tracking);
  margin-bottom: var(--wb-eyebrow-gap);
}