/* chrome.css: inter.css + nav.css + footer.css + gbp.css, concatenated in the
   order the pages load them, so four render-blocking requests become one. Built by
   tools/content/build-chrome-css.py from the live assets. DO NOT EDIT: edit the
   source file and rebuild, or the next build silently reverts you. The cache key is
   a hash of this file, so it moves whenever any source does. */

/* ==== chrome.css source: /assets/inter.css?v=sub20260910 (5376 B) ==== */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-778c6971e0.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-7a01685d52.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-749a308406.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-1ab1ad5590.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-749a308406.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-1ab1ad5590.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-749a308406.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-1ab1ad5590.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-749a308406.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-1ab1ad5590.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-749a308406.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-1ab1ad5590.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/inter-749a308406.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/inter-1ab1ad5590.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;
}

/* ==== chrome.css source: /assets/nav.css?v=nvfb70f8e1 (26759 B) ==== */
/* ══════════════════════════════════════════════════════════════════════
   Ant Assist — shared site navigation. SINGLE SOURCE OF TRUTH.
   Loaded last in <head> on every page, so it always wins over page CSS.
   Do not re-declare nav, .nav-, .mob-, #ham or #mob rules inside a page.
   Markup lives in assets/nav.partial.html, stamped in by tools/sync-nav.py.
   ══════════════════════════════════════════════════════════════════════ */

/* ── bar ─────────────────────────────────────────────────────────────── */
nav#site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(10,10,15,.93);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .3s;
}

/* The inner rail. Every page renders it at exactly this width/position. */
nav#site-nav .nav-in{
  max-width:1160px;      /* literal, not var(--wrap): a page redefining --wrap must not move the nav */
  margin:0 auto;
  padding:0 28px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  box-sizing:border-box;
}

/* ── logo ────────────────────────────────────────────────────────────── */
/* Fixed 48px slot: the logo occupies the same box whether the image loads or
   the text fallback shows, so a failed image can't change the bar's metrics. */
nav#site-nav .nav-logo{display:flex;align-items:center;height:48px;text-decoration:none;flex-shrink:0}
nav#site-nav .nav-logo img{height:48px;width:auto;display:block}
nav#site-nav .nav-logo-fallback{display:none;font-weight:800;font-size:1.15rem;line-height:1.2;color:#fff}

/* ── link cluster ────────────────────────────────────────────────────── */
/* flex/justify-content are reset explicitly: several pages used to set
   flex:1 + justify-content:center here, which centred the cluster and made
   margin-left:auto a no-op. That was the ~280px page-to-page shift. */
nav#site-nav .nav-links{
  display:flex;
  align-items:center;
  gap:0;                  /* spacing is per-item below, NOT a flex gap: a gap also
                             applies between the last link and .nav-cta-group, which
                             made the right-hand space 28px wider than the left. */
  flex:1 1 auto;          /* claim the leftover rail so the space can be distributed */
  justify-content:flex-start;
  margin-left:0;
  padding:0;
  min-width:0;
}

/* Three zones on desktop: logo ─ space ─ link cluster ─ space ─ CTAs.
   The link cluster used to sit hard against the CTAs with the whole slack
   (~280px at 1440px+) pooled into one void beside the logo. Two auto margins —
   one before the first link, one before the CTA group — split that slack evenly
   instead, so the cluster reads as centred between the logo and the buttons.
   Auto margins collapse to 0 before anything can collide, so as the rail narrows
   toward the 960px hamburger breakpoint the cluster simply tightens. */
nav#site-nav .nav-links>.nav-link,
nav#site-nav .nav-links>.nav-drop{margin-left:28px}
/* Must stay after the rule above: equal specificity, so source order wins. */
nav#site-nav .nav-links>:first-child{margin-left:auto}

/* Pinned on every state so hover/active can never change text metrics.
   line-height is pinned too: pages inherit different body line-heights, which
   changed the link/button box height and shifted the row vertically. */
nav#site-nav .nav-links a,
nav#site-nav .nav-link,
nav#site-nav .nav-drop-trigger,
nav#site-nav .nav-cta-secondary,
nav#site-nav .nav-cta-primary,
nav#site-nav .nav-drop-item{
  line-height:1.2;
}
nav#site-nav .nav-links a,
nav#site-nav .nav-link,
nav#site-nav .nav-drop-trigger{
  font-size:.875rem;
  font-weight:600;
  font-family:inherit;
  letter-spacing:normal;
  white-space:nowrap;
  color:#fff;
  text-decoration:none;
}
nav#site-nav .nav-link{padding:8px 0;transition:color .2s}
nav#site-nav .nav-link:hover,
nav#site-nav .nav-link:focus-visible,
nav#site-nav .nav-link.nav-active,
nav#site-nav .nav-link[aria-current="page"]{
  color:#fff;              /* colour-only: no weight/size/border change, so nothing reflows */
  font-weight:600;
}

/* ── dropdowns ───────────────────────────────────────────────────────── */
nav#site-nav .nav-drop{position:relative}
nav#site-nav .nav-drop-trigger{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;padding:8px 0;
  transition:color .2s;
}
nav#site-nav .nav-drop-trigger:hover{color:#fff}
nav#site-nav .nav-chevron{opacity:.7;transition:transform .2s;flex-shrink:0}
nav#site-nav .nav-drop.nav-open .nav-chevron{transform:rotate(180deg)}
@media(hover:hover) and (pointer:fine){
  nav#site-nav .nav-drop:hover .nav-chevron{transform:rotate(180deg)}
}
nav#site-nav .nav-drop-panel{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:rgba(10,10,15,.97);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:6px;min-width:230px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  z-index:100;
}
nav#site-nav .nav-drop-panel::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
nav#site-nav .nav-drop.nav-open>.nav-drop-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
@media(hover:hover) and (pointer:fine){
  nav#site-nav .nav-drop:hover>.nav-drop-panel{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
}
nav#site-nav .nav-drop-item{
  display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;
  color:#fff;text-decoration:none;font-size:.82rem;font-weight:500;
  white-space:nowrap;transition:background .15s;
}
nav#site-nav .nav-drop-item:hover,
nav#site-nav .nav-drop-item[aria-current="page"]{background:rgba(255,255,255,.07)}

/* ── CTA cluster ─────────────────────────────────────────────────────── */
nav#site-nav .nav-cta-group{
  display:flex;align-items:center;gap:10px;
  margin-left:auto;padding-left:20px;
  border-left:1px solid rgba(255,255,255,.10);
}
nav#site-nav .nav-cta-secondary{
  display:inline-flex;align-items:center;padding:9px 16px;
  font-size:.875rem;font-weight:600;color:#fff;
  background:transparent;border:1px solid rgba(255,255,255,.20);
  border-radius:8px;text-decoration:none;font-family:'Inter',sans-serif;
  white-space:nowrap;transition:background .2s,border-color .2s;
}
nav#site-nav .nav-cta-secondary:hover{background:rgba(255,76,152,.08);border-color:rgba(255,76,152,.40)}
nav#site-nav .nav-cta-primary{
  padding:9px 18px;font-size:.875rem;font-weight:600;border-radius:8px;
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;
}
nav#site-nav .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ── scroll progress (homepage drives it via JS; inert elsewhere) ────── */
nav#site-nav #scroll-bar{
  position:absolute;bottom:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,#E63AD8 0%,#8B42F5 50%,#2E57F7 100%);transition:width .1s linear;
}

/* ── mobile ──────────────────────────────────────────────────────────── */
#ham{
  display:none;background:none;border:1.5px solid rgba(255,255,255,.18);
  border-radius:8px;padding:7px 11px;cursor:pointer;color:#fff;
  font-size:1rem;font-family:'Inter',sans-serif;
}
#mob{
  display:none;position:fixed;top:68px;left:0;right:0;bottom:0;
  background:rgba(10,10,15,.98);z-index:999;padding:28px;
  backdrop-filter:blur(24px);overflow-y:auto;
}
#mob.open{display:block}
.mob-links>a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#fff;text-decoration:none;font-size:1rem;font-weight:500}
.mob-drop{border-bottom:1px solid rgba(255,255,255,.05)}
.mob-drop summary{padding:14px 0;color:#fff;font-size:1rem;font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;user-select:none}
.mob-drop summary::-webkit-details-marker{display:none}
.mob-drop summary::after{content:'\203a';font-size:1.2rem;line-height:1;opacity:.5;transition:transform .2s}
.mob-drop[open] summary::after{transform:rotate(90deg)}
.mob-drop-links{padding:4px 0 12px 16px}
.mob-drop-links a{display:block;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.03);color:#fff;text-decoration:none;font-size:.925rem;font-weight:500}
.mob-drop-links a:last-child{border-bottom:none}
.mob-ctas{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.mob-ctas a{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:13px 28px;border-radius:12px;font-size:.975rem;font-weight:600;text-decoration:none;font-family:inherit}
.mob-cta-ghost{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.32);color:#fff}
.mob-cta-primary{background:#C2185B;border:none;color:#fff}

@media(max-width:959px){
  nav#site-nav .nav-links{display:none!important}
  #ham{display:flex!important;align-items:center;justify-content:center}
}
@media(min-width:960px){
  #mob{display:none!important}
}

/* ── anchor landing offset ───────────────────────────────────────────────
   The bar above is position:fixed and 69px tall (68px rail + 1px border), so
   any scrolled-to anchor target lands underneath it. One scroll-padding rule
   on the root fixes every hash, TOC link and skip link on every page, instead
   of per-target scroll-margins (audit docs/button-cta-routing-audit-2026-08-25).
   88px = bar height + breathing room. */
html{scroll-padding-top:88px}

/* ── phone proportions ───────────────────────────────────────────────────
   The rail kept desktop metrics on phones: a 48px logo rendered 143px wide,
   37% of a 390px viewport, with 28px gutters either side.
   The 68px rail HEIGHT is deliberately left alone — #mob{top:68px}, the
   scroll-padding-top above and a padding-top:68px hero offset on all 14 pages
   are keyed to it, so changing it here would desync every page. */
@media(max-width:600px){
  nav#site-nav .nav-in{padding:0 18px;gap:14px}
  nav#site-nav .nav-logo{height:34px}
  nav#site-nav .nav-logo img{height:34px}
}
/* 44px minimum tap target (was 38x37). Scoped to the full range where the
   hamburger is actually shown, not just phones — at 768px it was still 38px. */
@media(max-width:959px){
  #ham{padding:0;min-width:44px;min-height:44px;font-size:17px}
}

/* .nav-in is space-between with gap:24px over THREE children. .nav-right holds
   only #ham, which is display:none at this width, so it stayed a zero-width
   flex item and still consumed one 24px gap — leaving the logo flush at the
   left content edge but "Book a Call" 24px short of the right. */
@media(min-width:960px){
  nav#site-nav .nav-right{display:none}
  /* With .nav-right hidden, the 24px rail gap survives only between the logo and
     the link cluster, which would leave the left space 24px wider than the right.
     The auto margins above own that spacing now, so zero the rail gap out. */
  nav#site-nav .nav-in{gap:0}
}


/* ══════════════════════════════════════════════════════════════════════
   ACT-2 v13 — the navigation rebuild (docs/content/nav-spec-2026-09-15.md).
   Services becomes a four-column panel of the pillars and their sub-pages,
   Resources a plain list, both real disclosures driven by the inline script
   in the shared nav block. Everything above this line still applies: the old
   .nav-cta-secondary and .mob-cta-ghost rules are kept because blog/post.html
   is out of scope for this sweep and still carries the old markup.
   ══════════════════════════════════════════════════════════════════════ */

/* Plain lists inside the panels. Pages set their own ul/li rules and chrome.css
   loads before a page's inline <style>, so these are scoped hard enough to win
   on specificity rather than on order. */
nav#site-nav .nav-drop-panel ul,
nav#site-nav .nav-drop-panel li{list-style:none;margin:0;padding:0}
nav#site-nav .nav-drop-panel .nav-drop-item{white-space:normal}

/* The Services panel is anchored to the nav rail, not to its trigger: centred on
   the trigger it would hang off the left of the viewport at 1024px. .nav-drop-mega
   goes position:static so nav#site-nav (position:fixed) is the containing block. */
nav#site-nav .nav-drop-mega{position:static}
nav#site-nav .nav-mega{
  /* Opaque, unlike the small dropdowns: at .97 the hero H1 reads straight through a panel
     this large. Same colour, alpha 1. */
  background:#0A0A0F;
  top:calc(100% + 10px);
  width:min(1104px,calc(100vw - 32px));   /* 1104px = the 1160px rail less its 28px gutters */
  min-width:0;
  padding:16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px 12px;
  max-height:calc(100vh - 92px);
  overflow-y:auto;
}
nav#site-nav .nav-mega::before{top:-10px;height:10px}
nav#site-nav .nav-mega-col{min-width:0}
nav#site-nav .nav-mega-h{
  display:block;padding:8px 13px 9px;margin-bottom:4px;
  color:#fff;text-decoration:none;font-size:.8rem;font-weight:700;line-height:1.25;
  white-space:normal;border-bottom:1px solid rgba(255,255,255,.10);
  border-radius:9px 9px 0 0;transition:background .15s;
}
nav#site-nav .nav-mega-h:hover,
nav#site-nav .nav-mega-h[aria-current="page"]{background:rgba(255,255,255,.07)}
nav#site-nav .nav-mega .nav-drop-item{padding:8px 13px;font-size:.8rem;line-height:1.3}
/* Two rows of two below 1100px, which is the spec's allowance: at 1024px four
   columns leave ~213px of text width and the longest pillar label needs more. */
@media(max-width:1099px){
  nav#site-nav .nav-mega{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The Resources panel holds the longest single label on the bar. */
nav#site-nav #nav-resources{min-width:268px}

/* Visible keyboard focus everywhere in the chrome. */
nav#site-nav a:focus-visible,
nav#site-nav button:focus-visible,
#mob a:focus-visible,
#mob summary:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}

/* ── mobile: the pillars and their sub-pages inside the Services accordion ── */
#mob ul,#mob li{list-style:none;margin:0;padding:0}
#mob .mob-pillar{
  display:flex;align-items:center;min-height:44px;box-sizing:border-box;
  padding:12px 0 8px;color:#fff;text-decoration:none;
  font-size:.95rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.07);
}
#mob .mob-sub{padding:2px 0 12px 14px}
#mob .mob-sub-flat{padding-left:0}
#mob .mob-sub a{
  display:flex;align-items:center;min-height:44px;padding:4px 0;
  color:#fff;text-decoration:none;font-size:.9rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.04);
}
#mob .mob-sub li:last-child a{border-bottom:none}

/* ══ window 4, lane 4's option 1: the hero leaves the scroll reveal ══════
   .sv-hero-inner is above the fold on all 51 pages that carry it, so the
   fade-up it inherits from .fu was animating content that was already in
   view: opacity 0 until 1,482 ms against an FCP of 760 ms
   (docs/content/audits/lcp-diagnosis-2026-09-15.csv). The class cannot be
   dropped from the markup because it sits inside <main>, which this window
   leaves byte-identical, so the rule does it instead. Three classes deep so
   it also beats the page's own .fu:not(.vis) failsafe animation, which is
   two and lands later in the cascade. */
.sv-hero .sv-hero-inner.fu{opacity:1;transform:none;animation:none}

/* ══ window C, ACT-2 v14 ruling 4: one hero file per width, one request ═══
   Window B put a 1240 px re-encode behind every hero, which is right for a
   phone (1083 device px at 412 @2.625) and soft on a desktop, where the same
   element is 1440 px wide or more. The element now carries both files as
   custom properties, --hero (1240) and --hero-lg (the untouched 2560 px
   master), and the background-image is chosen here instead of in the style
   attribute. The head carries one preload for each, each behind the matching
   media query, so exactly one hero is ever fetched.
   Nothing else about the hero moves: position, size, filter, opacity and the
   transform all stay in each page's own sheet, which sets no background-image.
   ACT-2 v15 ruling 3: /about/ and /blog/ join the rule. They were passed over
   twice because the window-B sweep keyed off .sv-hero-bg and these two pages
   name their element .about-hero-bg and .blog-hero-bg; the sweep now matches
   on the background image, not the class. */
.sv-hero-bg,.calc-hero-bg,.contact-hero-bg,.faq-hero-bg,.about-hero-bg,.blog-hero-bg{background-image:var(--hero)}
@media(min-width:1440px){
  .sv-hero-bg,.calc-hero-bg,.contact-hero-bg,.faq-hero-bg,.about-hero-bg,.blog-hero-bg{background-image:var(--hero-lg,var(--hero))}
}
/* ════ NAV:MEGA ════ ACT-2 v19, spec docs/content/nav-mega-spec-2026-09-16.md. Appended to
   nav.css and scoped `nav#site-nav`/`#mob` like the rest of it, so every rule wins on document
   order at equal specificity and none is forced. The bar is untouched: height, logo, link set,
   burger, and the 959/960px breakpoint where the desktop rail hides. */

/* the light surface (spec 2); transition-delay is the hover intent, 200ms to close.
   Anchor colours below are written `nav#site-nav .nav-links a.x` = (1,2,1): live's own
   `nav#site-nav .nav-links a` is (1,1,1) and beats a bare `nav#site-nav .x` at (1,1,0). Found
   by enumerating the CSSOM rules that match the element, not by assuming document order. */
nav#site-nav .nav-drop-panel{
  background-color:#fff;
  background-image:linear-gradient(160deg,#fff 0%,#fdfcff 46%,#f6f4fb 100%);
  border:1px solid rgba(194,24,91,.13);border-radius:16px;padding:14px;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.06),
             0 20px 48px rgba(230,58,216,.14),0 34px 84px rgba(139,66,245,.12);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:opacity .16s,transform .16s,visibility .16s;transition-delay:200ms;
}
nav#site-nav .nav-drop.nav-open>.nav-drop-panel{transition-delay:0s}
@media(hover:hover) and (pointer:fine){
  nav#site-nav .nav-drop:hover>.nav-drop-panel{transition-delay:120ms}
}

/* Services: four equal pillar columns plus the rail. No surface declared here: the
   .nav-drop-panel rule above is the same specificity and later in the file than live's
   nav#site-nav .nav-mega{background:#0A0A0F}, so it already wins. */
nav#site-nav .nav-mega{grid-template-columns:repeat(4,minmax(0,1fr)) 232px;gap:6px 16px;padding:18px}
nav#site-nav .nav-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* white-space:normal is not optional here. Live's own `nav#site-nav .nav-links a` sets nowrap for
   the bar's four items, every anchor in the panel inherits it, and a pillar heading is three or four
   words: measured on the live page, the headings ran 48 to 79 px past their own column at 1280,
   1366 and 1440 and printed over the next column's heading. .nav-drop-item already overrode it;
   this one did not. minmax(0,1fr) goes with it, because a 1fr track has min-width auto and will not
   let its text shrink below the longest word. */
nav#site-nav .nav-links a.nav-mega-h{
  display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:9px;row-gap:1px;align-items:center;
  padding:8px 10px 10px;margin-bottom:5px;color:#0A0A0F;border-radius:10px 10px 0 0;
  border-bottom:1px solid rgba(10,10,15,.09);white-space:normal;
}
nav#site-nav .nav-mega-hico{width:24px;height:24px;grid-row:span 2}
nav#site-nav .nav-mega-hname{font-size:.8rem;font-weight:800;line-height:1.25;color:#0A0A0F}
nav#site-nav .nav-mega-hdesc{
  grid-column:2;font-size:.7rem;font-weight:500;line-height:1.3;color:rgba(10,10,15,.72);
}
nav#site-nav .nav-links a.nav-mega-h:hover,
nav#site-nav .nav-links a.nav-mega-h[aria-current="page"]{background:rgba(194,24,91,.06)}

/* an item: icon, label, descriptor */
nav#site-nav .nav-links a.nav-drop-item{
  display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:9px;align-items:start;
  padding:7px 10px;border-radius:9px;color:#0A0A0F;white-space:normal;
}
nav#site-nav .nav-mega-ico{width:20px;height:20px;margin-top:1px}
nav#site-nav .nav-mega-hico,
nav#site-nav .nav-mega-ico{fill:none;stroke:#C2185B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav#site-nav .nav-mega-t{display:block;min-width:0}
nav#site-nav .nav-mega-l{display:block;font-size:.78rem;font-weight:600;line-height:1.3;color:#0A0A0F}
nav#site-nav .nav-mega-d{
  display:block;font-size:.69rem;font-weight:500;line-height:1.3;
  color:rgba(10,10,15,.72);margin-top:1px;
}
nav#site-nav .nav-links a.nav-drop-item:hover,
nav#site-nav .nav-links a.nav-drop-item[aria-current="page"]{background:rgba(194,24,91,.06)}

/* the rail (spec 2 and 3) */
nav#site-nav .nav-mega-rail{
  background:rgba(230,58,216,.055);border:1px solid rgba(194,24,91,.12);border-radius:12px;
  padding:16px 15px;display:flex;flex-direction:column;align-items:flex-start;
}
nav#site-nav .nav-rail-eyebrow,
nav#site-nav .nav-res-h{
  font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#A9114E;
}
nav#site-nav .nav-rail-title{font-size:.86rem;font-weight:800;line-height:1.3;color:#0A0A0F;margin-top:7px}
nav#site-nav .nav-rail-line{font-size:.72rem;line-height:1.4;color:rgba(10,10,15,.72);margin:6px 0 0}
nav#site-nav .nav-links a.nav-rail-btn{
  display:inline-block;margin-top:13px;padding:9px 14px;border-radius:999px;color:#fff;
  background-image:linear-gradient(135deg,#D63384 0%,#C2185B 55%,#A9114E 100%);
  font-size:.74rem;font-weight:700;text-decoration:none;line-height:1.2;
}
nav#site-nav .nav-links a.nav-rail-link{
  display:inline-block;margin-top:10px;font-size:.72rem;font-weight:600;color:#A9114E;
  text-decoration:underline;text-underline-offset:2px;
}
nav#site-nav .nav-rail-img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;margin-bottom:11px;
}

/* Resources: two columns plus the rail, anchored under its own trigger */
nav#site-nav #nav-resources{
  display:grid;grid-template-columns:1fr 1fr 210px;gap:6px 16px;min-width:0;
  width:min(720px,calc(100vw - 32px));left:auto;right:0;transform:translateY(-6px);
}
nav#site-nav .nav-drop.nav-open>#nav-resources{transform:translateY(0)}
@media(hover:hover) and (pointer:fine){
  nav#site-nav .nav-drop:hover>#nav-resources{transform:translateY(0)}
}
nav#site-nav .nav-res-cols{display:contents}
nav#site-nav .nav-res-h{
  padding:4px 10px 8px;border-bottom:1px solid rgba(10,10,15,.09);margin-bottom:5px;
}

/* the rail drops under the columns below 1280px (spec 2) */
@media(max-width:1279px){
  nav#site-nav .nav-mega{grid-template-columns:repeat(4,minmax(0,1fr))}
  nav#site-nav .nav-mega-rail{
    grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 16px;
  }
  nav#site-nav .nav-rail-line{flex:1 1 220px;margin:0}
  nav#site-nav .nav-links a.nav-rail-btn,
  nav#site-nav .nav-links a.nav-rail-link{margin-top:0}
}
/* Resources is right-anchored to its own trigger, so a 720px panel hangs off the LEFT of the
   viewport once the trigger sits nearer than 720px from it: measured, x goes negative from
   1234px down (-67px at 1100px) and the clipped part cannot be scrolled to, because body
   overflow-x is clip. It narrows at the same 1280px the rail drops at, not at the mega's 1100. */
@media(max-width:1279px){
  nav#site-nav #nav-resources{grid-template-columns:1fr 1fr;width:min(560px,calc(100vw - 32px))}
  nav#site-nav .nav-res-rail{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
  nav#site-nav .nav-rail-img{width:112px;margin-bottom:0;flex:0 0 auto}
}
/* live nav.css already drops the mega to two columns below 1100px */
@media(max-width:1099px){
  nav#site-nav .nav-mega{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the mobile sheet (spec 4): icons, descriptors, 44px targets */
#mob .mob-pill{border-bottom:1px solid rgba(255,255,255,.07)}
#mob .mob-pill-s{
  display:grid;grid-template-columns:22px 1fr 14px;column-gap:11px;align-items:center;
  min-height:44px;box-sizing:border-box;padding:9px 0;cursor:pointer;list-style:none;
}
#mob .mob-pill-s::-webkit-details-marker{display:none}
#mob .mob-pill-s::after{
  content:'';width:8px;height:8px;justify-self:end;transform:rotate(45deg);
  border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);
  transition:transform .18s;
}
#mob .mob-pill[open]>.mob-pill-s::after{transform:rotate(-135deg)}
#mob .mob-ico{
  width:22px;height:22px;fill:none;stroke:#FF7EC8;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
#mob .mob-pill-t{display:block;min-width:0}
#mob .mob-pill-n{display:block;font-size:.92rem;font-weight:700;line-height:1.3;color:#fff}
#mob .mob-pill-d{
  display:block;font-size:.76rem;font-weight:500;line-height:1.35;
  color:rgba(255,255,255,.72);margin-top:1px;
}
#mob .mob-sub li>a{
  display:grid;grid-template-columns:22px 1fr;column-gap:11px;align-items:center;
  min-height:44px;box-sizing:border-box;padding:8px 0 8px 6px;
}
#mob .mob-pill .mob-pillar{
  min-height:44px;font-size:.8rem;font-weight:600;border-bottom:0;
  color:rgba(255,255,255,.72);padding:6px 0 6px 33px;
}
/* ════ /NAV:MEGA ════ */

/* ==== chrome.css source: /assets/footer.css?v=fth20260909a (4655 B) ==== */
/* ══════════════════════════════════════════════════════════════════════
   Ant Assist — shared site footer. SINGLE SOURCE OF TRUTH.
   Copied verbatim from the /services/customer-service/ footer, which is the
   agreed reference implementation. Loaded last in <head> on every page, so it
   always wins over page CSS.
   Do not re-declare footer, .ft- or footer .wrap rules inside a page.
   Markup lives in assets/footer.partial.html, stamped in by tools/sync-shell.py.
   ══════════════════════════════════════════════════════════════════════ */

footer{background:#000;color:#fff;padding-top:52px;position:relative}
footer::before{content:'';position:absolute;top:0;left:50%;width:calc(min(100%,1160px) - 56px);transform:translateX(-50%);height:3px;border-radius:3px;background:linear-gradient(90deg,#E63AD8 0%,#8B42F5 50%,#2E57F7 100%)}

/* The footer rail. Scoped to the footer and given a literal max-width so a
   page redefining --wrap (or swapping .wrap for .ft-wrap) cannot move it. */
footer .wrap{max-width:1160px;margin:0 auto;padding:0 28px;box-sizing:border-box}

/* The logo is an inline image, so its line box used to grow with whatever
   line-height the page inherited (72 / 76 / 79.4px across the site). Flex plus
   an explicit 32px content height reproduces the reference row exactly (76px
   with the 44px padding) and is immune to inherited text metrics. */
footer .ft-logo-row{display:flex;align-items:center;height:32px;padding-bottom:44px;box-sizing:content-box}
footer .ft-logo-row img{height:28px;width:auto;display:block}
footer .ft-divider{height:1px;width:100%;background:rgba(255,255,255,.15);margin-bottom:44px}

footer .ft-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:0 0 48px;border-bottom:1px solid rgba(255,255,255,.15)}
footer .ft-col h4,footer .ft-col .ft-h{font-size:.7rem;margin-top:0;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:16px;line-height:1.2}
footer .ft-col a{display:block;font-size:.875rem;color:#fff;text-decoration:none;margin-bottom:10px;transition:color .2s;line-height:1.5}
footer .ft-col a:hover{color:#fff}

footer .ft-contact-item{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px}
footer .ft-contact-item svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:#fff}
footer .ft-contact-item span{font-size:.875rem;color:#fff;line-height:1.5}
footer .ft-contact-item span a{color:inherit;text-decoration:none;transition:color .2s}
footer .ft-contact-item span a:hover{color:#fff}
/* Birmingham NAP block (generated into the partial from tools/shared/gbp.json).
   Sitewide location signal — link out only, never a map embed in the footer. */
footer .ft-nap strong{display:block;font-size:.8rem;font-weight:700;color:#fff;margin-bottom:5px;letter-spacing:.01em}
footer .ft-nap a{display:block;margin-bottom:3px}
footer .ft-nap .ft-nap-hours{display:block;margin-bottom:6px;opacity:.85}
footer .ft-nap .ft-nap-map{margin-top:2px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
footer .ft-nap a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px}

footer .ft-legal{padding:22px 0}
footer .ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
footer .ft-bottom p{font-size:.78rem;color:#fff;line-height:1.5}
footer .ft-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer .ft-links a{font-size:.78rem;color:#fff;text-decoration:none;transition:color .2s;line-height:1.5}
footer .ft-links a:hover{color:#fff}

/* Cookie preferences re-opener. Not present on the reference page, but carried
   over from the other 13 pages: it is the only way to reopen consent. */
footer .ft-cookie-btn{background:none;border:none;cursor:pointer;font-size:.78rem;color:#fff;font-family:'Inter',system-ui,sans-serif;padding:0;line-height:1.5;transition:color .2s}
footer .ft-cookie-btn:hover{color:#fff}
footer .ft-cookie-btn:focus-visible{outline:2px solid rgba(255,76,152,.75);outline-offset:3px;border-radius:3px}

/* Responsive — exactly the reference page's breakpoints. */
@media(max-width:960px){
  footer .ft-inner{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  footer{padding-bottom:80px}   /* clears the floating WhatsApp widget */
}
@media(max-width:640px){
  footer .ft-inner{grid-template-columns:1fr}
}

/* ==== chrome.css source: /assets/gbp.css?v=g4a998f3a (5881 B) ==== */
/* ════ GBP components — compact Google trust strip + full local module.
   Master lives in tools/shared/gbp.css; copied to assets/gbp.css by
   tools/sync-gbp.py. Facts are stamped from tools/shared/gbp.json —
   nothing in here contains a business fact. Static only: no third-party
   requests, no scripts, no cookies. ════ */

/* ── Compact trust strip (Variant B) ─────────────────────────────── */
.gbp-strip{display:inline-flex;align-items:center;gap:12px;padding:6px 8px 6px 18px;border-radius:100px;
  background:#fff;border:1px solid rgba(15,23,42,.12);box-shadow:0 2px 12px rgba(15,23,42,.06);
  font-family:'Inter',system-ui,sans-serif;font-size:.82rem;font-weight:600;color:#0B0D14;
  text-decoration:none;line-height:1;white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease}
.gbp-strip:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.14)}
.gbp-strip:focus-visible{outline:2px solid #C2185B;outline-offset:2px}
.gbp-strip .gbp-g{display:flex;flex-shrink:0}
.gbp-strip .gbp-g svg{display:block}
.gbp-stars{display:inline-flex;gap:1px;flex-shrink:0}
.gbp-stars{gap:2px}
.gbp-stars svg{fill:#FBBC04;display:block}
.gbp-rating{font-weight:800}
.gbp-count{color:rgba(11,13,20,.62);font-weight:500;margin-right:2px}
.gbp-chev{display:flex;flex-shrink:0;color:rgba(11,13,20,.45)}
/* client-trust variant: the three long-standing client logos, no review claim */
.gbp-faces{display:inline-flex;flex-shrink:0}
.gbp-face{width:38px;height:38px;border-radius:50%;background:#fff;overflow:hidden;
  border:2px solid rgba(15,23,42,.10);box-shadow:0 1px 3px rgba(15,23,42,.10);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gbp-face+.gbp-face{margin-left:-8px}
.gbp-face img{width:100%;height:100%;object-fit:contain;padding:5px;display:block}
.gbp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* dark-background variant (hero sections, dark FAQ bands) */
.gbp-strip--dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  color:#fff;box-shadow:none}
.gbp-strip--dark .gbp-count{color:rgba(255,255,255,.72)}
.gbp-strip--dark .gbp-chev{color:rgba(255,255,255,.55)}
.gbp-strip--dark .gbp-face{border-color:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.gbp-strip--dark:hover{background:rgba(255,255,255,.11);box-shadow:0 8px 22px rgba(0,0,0,.28)}
/* centered block placement (service-page FAQ band) */
.gbp-strip-row{display:flex;justify-content:center;margin:0 0 30px}
@media(max-width:480px){
  .gbp-strip{white-space:normal;justify-content:center;text-align:center;
    padding:9px 14px;font-size:.78rem;flex-wrap:wrap;row-gap:5px}
}

/* ── Full local / GBP proof module (Variant A) ───────────────────── */
.gbp-module{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.gbp-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;
  box-shadow:0 4px 28px rgba(0,0,0,.06);padding:34px 36px;
  display:flex;flex-direction:column;font-family:'Inter',system-ui,sans-serif}
.gbp-card-title{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;color:#000;
  margin:0 0 6px;display:flex;align-items:center;gap:9px}
.gbp-card-title .gbp-g{display:flex}
.gbp-card-sub{font-size:.8rem;color:rgba(0,0,0,.55);margin:0 0 18px;line-height:1.6}
.gbp-fact{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:#0B0D14;
  line-height:1.6;padding:9px 0;border-top:1px solid rgba(0,0,0,.06)}
.gbp-fact:first-of-type{border-top:0}
.gbp-fact svg{flex-shrink:0;margin-top:3px;color:#C2185B}
.gbp-fact a{color:#0B0D14;text-decoration:none;font-weight:600}
.gbp-fact a:hover{color:#C2185B}
.gbp-fact .gbp-fact-note{display:block;font-size:.78rem;color:rgba(0,0,0,.55)}
.gbp-rating-line{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.gbp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:20px}
.gbp-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:100px;
  font-size:.82rem;font-weight:700;text-decoration:none;line-height:1;
  transition:transform .2s ease,box-shadow .2s ease}
.gbp-btn:hover{transform:translateY(-1px)}
.gbp-btn:focus-visible{outline:2px solid #C2185B;outline-offset:2px}
.gbp-btn--solid{background:linear-gradient(100deg,#D63384,#C2185B);color:#fff;
  box-shadow:0 6px 18px rgba(255,76,152,.28)}
.gbp-btn--ghost{background:transparent;color:#0B0D14;border:1px solid rgba(0,0,0,.16)}
.gbp-btn--ghost:hover{border-color:#C2185B;color:#C2185B}
.gbp-delivery-note{font-size:.8rem;color:rgba(0,0,0,.6);line-height:1.65;margin-top:16px;
  border-top:1px solid rgba(0,0,0,.07);padding-top:14px}
/* map card — self-drawn SVG visual, zero third-party requests before click */
.gbp-map-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 4px 28px rgba(0,0,0,.06);
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.gbp-map-card:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,0,0,.1)}
.gbp-map-card:focus-visible{outline:2px solid #C2185B;outline-offset:2px}
.gbp-map-visual{display:block;width:100%;height:auto;flex:1;background:#E8EEF4}
.gbp-map-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:#fff;border-top:1px solid rgba(0,0,0,.06);
  font-family:'Inter',system-ui,sans-serif}
.gbp-map-addr{font-size:.8rem;font-weight:600;color:#0B0D14;line-height:1.45}
.gbp-map-open{font-size:.78rem;font-weight:700;color:#C2185B;white-space:nowrap;flex-shrink:0}
@media(max-width:840px){
  .gbp-module{grid-template-columns:1fr}
  .gbp-card{padding:26px 24px}
}