/* =============================================================
   WhizzIT — Managed IT Services Provider
   Modern dark-tech design system
   Self-contained · dependency-free · mobile-first
   ============================================================= */

/* Self-hosted fonts (was a render-blocking @import to fonts.googleapis.com).
   Inter is a variable font: one file covers weights 400-900. The latin file is
   subset to the characters this site actually renders (89 distinct, plus the
   full Latin-1 range so runtime-injected Google review names stay in-font),
   which takes it from 47KB to 34KB. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-400900-latin-ext.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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-400900-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin-ext.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin-ext.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin-ext.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin.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;
}

/* -------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------- */
:root {
  /* Brand */
  --accent:        #FC6320;
  --accent-2:      #FF8A4C;
  --accent-soft:   rgba(252, 99, 32, 0.14);
  --accent-line:   rgba(252, 99, 32, 0.40);
  --accent-glow:   rgba(252, 99, 32, 0.35);
  --on-accent:     #0A0A0C;

  /* Surfaces (dark) */
  --bg:            #08080A;
  --bg-2:          #0B0B0E;
  --elev:          #0F0F13;
  --surface:       #141418;
  --surface-2:     #1A1A20;
  --surface-3:     #212128;

  /* Lines */
  --line:          rgba(255, 255, 255, 0.08);
  --line-2:        rgba(255, 255, 255, 0.14);
  --line-3:        rgba(255, 255, 255, 0.22);

  /* Text */
  --text:          #F4F4F6;
  --text-dim:      #A6A6B0;
  --text-faint:    #8A8A94;

  /* Feedback */
  --star:          #FBBC04;

  /* Radii */
  --r-xs:   8px;
  --r-sm:   12px;
  --r:      16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 999px;

  /* Type scale.
     Small steps are fixed rem so UI text stays predictable; headings stay fluid.
     Every font-size in this file must reference one of these — no ad-hoc values,
     otherwise the small sizes drift apart again (we had 37 distinct ones). */
  --fs-3xs:     0.75rem;    /* 12px   - mono eyebrows, uppercase micro-labels only (12px floor) */
  --fs-2xs:     0.8rem;     /* 12.8px - field labels, captions, meta */
  --fs-xs:      0.875rem;   /* 14px   - secondary/supporting text */
  --fs-sm:      0.9375rem;  /* 15px   - card body, form controls */
  --fs-md:      1rem;       /* 16px   - body */
  --fs-lg:      1.125rem;   /* 18px   - card titles, small headings */

  /* Fluid type scale */
  --fs-eyebrow: var(--fs-3xs);
  --fs-body:    var(--fs-md);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  --fs-h3:      clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --fs-h4:      clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --fs-h2:      clamp(1.8rem, 1.45rem + 1.6vw, 2.7rem);
  --fs-h1:      clamp(2.3rem, 1.7rem + 2.9vw, 4rem);
  --fs-mega:    clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);

  /* Spacing */
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --maxw:          1680px;
  --maxw-narrow:   1040px;   /* was 860px - widened so article pages fill the
                                page like the rest of the site rather than sitting
                                in a thin centred strip. Drives .prose, .toc,
                                .authorbox and 208 inline uses across 94 pages. */

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --dur:       0.45s;
  --dur-fast:  0.22s;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow:    0 20px 50px -20px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  --glow:      0 0 0 1px var(--accent-line), 0 18px 60px -18px var(--accent-glow);
  --shadow-accent:    0 10px 30px -10px var(--accent-glow);
  --shadow-accent-lg: 0 16px 44px -12px var(--accent-glow);
  --ring:             0 0 0 3px var(--accent-glow);

  /* Surface tint ladder (replaces scattered rgba(255,255,255,a) literals) */
  --tint-1: rgba(255, 255, 255, 0.03);
  --tint-2: rgba(255, 255, 255, 0.05);
  --tint-3: rgba(255, 255, 255, 0.08);

  /* Accent tints */
  --accent-tint: rgba(252, 99, 32, 0.10);
  --accent-blue: rgba(90, 120, 255, 0.06);

  /* 4px spacing scale */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;

  /* Semantic feedback */
  --success: #34D399; --success-text: #7EE7C0;
  --success-soft: rgba(52, 211, 153, 0.08); --success-line: rgba(52, 211, 153, 0.35);
  --danger: #FF6B6B;  --danger-text: #FF9B85;
  --danger-soft: rgba(255, 107, 107, 0.16); --danger-line: rgba(255, 107, 107, 0.40);

  /* Icon-tile radius (one value for all rounded icon squares) */
  --r-tile: 12px;

  --z-nav: 100;
  --z-overlay: 200;
  --z-top: 300;
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-dim);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Page ambient background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(252, 99, 32, 0.10), transparent 60%),
    radial-gradient(900px 620px at 8% 4%, rgba(90, 120, 255, 0.06), transparent 55%);
  pointer-events: none;
}
/* Fine grain texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* -------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }

/* Visual heading, not a document heading.
   CTA prompts, accreditation badges and benefit-card labels carried h2/h3 tags
   purely for their size. That flattened the outline search engines read - 62
   pages all announcing "Not sure where to start?" as an h2 - so they are now
   divs that render identically. Keep using real h2/h3 for actual sections. */
.h-display-2, .h-display-3 {
  color: var(--text); font-weight: 800; line-height: 1.04;
  letter-spacing: -0.02em; text-wrap: balance;
}
.h-display-2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.h-display-3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }

/* Article contents block.
   Gives long posts a jump list and gives AI answers a visible section map.
   It is a <nav> with an aria-label rather than a heading, so it adds a landmark
   without putting another h2 into the outline. Anchored headings need
   scroll-margin-top because .site-header is sticky and would otherwise cover
   the target when scroll-behavior:smooth lands on it. */
.toc {
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  padding: 1.25rem 1.5rem;
  /* Match the article measure exactly. The blog hero used to sit in a narrow
     container, so a left-aligned TOC lined up with the prose by accident. The
     hero is full-width now, so the TOC has to centre itself on the same
     --maxw-narrow column as .prose and .authorbox or it hangs off to the left. */
  max-width: var(--maxw-narrow);
  margin-inline: auto;
}
.toc__title {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 0.5rem;
}
.toc__list { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.toc__list li { counter-increment: toc; border-top: 1px solid var(--line); }
.toc__list li:first-child { border-top: 0; }
.toc__list a {
  display: flex; gap: 0.7rem; align-items: baseline;
  min-height: 44px; padding: 0.6rem 0;
  color: var(--text); text-decoration: none; font-size: var(--fs-xs);
  transition: color var(--dur) var(--ease);
}
.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs);
  color: var(--accent); flex: none;
}
.toc__list a:hover, .toc__list a:focus-visible { color: var(--accent); }
.toc__list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main h2[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) { .toc__list a { transition: none; } }
.h-sub { font-size: var(--fs-h4); }
p  { max-width: 70ch; text-wrap: pretty; }
strong { color: var(--text); font-weight: 700; }

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.tnum { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.eyebrow.center::before { display: none; }

.accent-text { color: var(--accent); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-dim);
  font-weight: 400;
  max-width: 54ch;
}

/* -------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { margin-top: 1rem; color: var(--text-dim); }
.section-head.center p { margin-inline: auto; }

.split-head {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 880px) {
  .split-head { grid-template-columns: 1.3fr 1fr; }
  .split-head .split-head__aside { text-align: right; padding-bottom: 0.5rem; }
}

.hairline { height: 1px; background: var(--line); border: 0; }

/* -------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
  background: var(--btn-bg);
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease); }
.btn:hover { transform: translateY(-2px); border-color: var(--line-3); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn--primary {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent;
  isolation: isolate;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.3) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--ease);
}
.btn--primary:hover {
  box-shadow: var(--shadow-accent-lg), inset 0 1px 0 rgba(255,255,255,0.28);
  border-color: transparent;
}
.btn--primary:hover::before { transform: translateX(130%); }
.btn--primary:hover svg { transform: translateX(3px); }

.btn--ghost { background: transparent; border-color: var(--line-2); }
.btn--ghost:hover { background: var(--tint-2); }

.btn--lg { padding: 1.25rem 2rem; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 3px;
  transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.textlink svg { width: 1.05em; height: 1.05em; color: var(--accent); transition: transform var(--dur-fast) var(--ease); }
.textlink:hover { gap: 0.75rem; color: var(--accent); }
.textlink:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------
   6. Pills / chips / badges
   ------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--tint-1);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a.chip:hover { border-color: var(--accent-line); color: var(--text); }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* -------------------------------------------------------------
   7. Glass / cards
   ------------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(340px 200px at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 70%);
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06); }
.card:hover::after { opacity: 1; }

.glass {
  background: rgba(18, 18, 22, 0.6);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-2);
}

/* -------------------------------------------------------------
   8. Header / navigation
   ------------------------------------------------------------- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: var(--fs-2xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  color: var(--text-faint);
}
.topbar__loc { display: none; align-items: center; gap: 1.5rem; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.05em; }
.topbar__loc span { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar__loc svg { width: 13px; height: 13px; color: var(--accent); }
.topbar__right { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.topbar__right a { display: inline-flex; align-items: center; gap: 0.5rem; transition: color var(--dur-fast) var(--ease); }
.topbar__right a:hover { color: var(--text); }
.topbar__right svg { width: 14px; height: 14px; color: var(--accent); }
@media (min-width: 900px) { .topbar__loc { display: flex; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  transition: transform var(--dur) var(--ease);
}
.nav {
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.site-header.scrolled .nav { background: rgba(8,8,10,0.9); border-color: var(--line-2); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
  transition: padding var(--dur) var(--ease);
}
.site-header.scrolled .nav__inner { padding-block: 0.75rem; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.logo__mark { width: 30px; height: 30px; filter: drop-shadow(0 3px 10px var(--accent-glow)); }
.logo__mark path { fill: var(--accent); }
.logo__word { font-weight: 800; font-size: var(--fs-h3); letter-spacing: -0.03em; color: var(--text); line-height: 1; }
.logo__word b { color: var(--accent); font-weight: 800; }

/* Desktop menu */
.menu { display: none; align-items: center; gap: 0.25rem; }
.menu > li { position: relative; }
.menu a, .menu .menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.menu a:hover, .menu .menu__trigger:hover,
.menu a[aria-current="page"] { color: var(--text); }
.menu a[aria-current="page"] { background: rgba(255,255,255,0.05); }
.menu__trigger svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.menu li:hover .menu__trigger svg,
.menu li:focus-within .menu__trigger svg { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 280px;
  padding: 0.5rem;
  border-radius: var(--r);
  background: rgba(14,14,18,0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.menu li:hover .dropdown,
.menu li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.75rem; border-radius: var(--r-xs); width: 100%;
}
.dropdown a:hover { background: rgba(255,255,255,0.05); }
.dropdown a .di {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--accent-soft); color: var(--accent);
}
.dropdown a .di svg { width: 17px; height: 17px; }
.dropdown a b { display: block; color: var(--text); font-weight: 600; font-size: var(--fs-sm); }
.dropdown a small { display: block; color: var(--text-faint); font-size: var(--fs-2xs); }

.nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.nav__actions .btn { display: none; }
@media (min-width: 1080px) {
  .menu { display: flex; }
  .nav__actions .btn { display: inline-flex; }
}

/* Burger */
.burger {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 46px; height: 46px; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  background: rgba(255,255,255,0.03);
}
.burger span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
@media (min-width: 1080px) { .burger { display: none; } }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(6,6,8,0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6rem var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-menu > ul > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0.25rem;
  font-size: var(--fs-lg); font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--line);
}
/* Size the trailing arrow (unsized inline SVGs otherwise balloon to ~269px) */
.mobile-menu > ul > li > a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
/* "Services" acts as a section label above the accordion, not a giant link */
.mobile-menu .m-group > span {
  display: block;
  padding: 1rem 0.25rem 0.25rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-3xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
}
.mobile-menu .m-sub { padding: 0.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mobile-menu .m-sub a { font-size: var(--fs-xs); font-weight: 500; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-full); color: var(--text-dim); }
.mobile-menu .m-cta { margin-top: 1.75rem; display: grid; gap: 0.75rem; }

/* -------------------------------------------------------------
   9. Hero
   ------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(3.5rem, 2rem + 6vw, 7rem); padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem); overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero__grid {
  position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1000px 600px at 70% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(1000px 600px at 70% 20%, #000 0%, transparent 75%);
  opacity: 0.5;
}
.hero__inner { position: relative; }
.hero h1 { max-width: 17ch; letter-spacing: -0.04em; }
.hero .hero__lead { margin-top: 1.5rem; max-width: 62ch; font-size: var(--fs-lead); color: var(--text-dim); }
.hero__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Hero split with form */
.hero-split { display: grid; gap: clamp(2.5rem, 1.4rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .hero-split { grid-template-columns: 1.15fr 0.85fr; } }

/* Callback / lead card */
.leadcard { padding: clamp(1.5rem, 1rem + 1.4vw, 2rem); border-radius: var(--r-xl); }
.leadcard h3, .leadcard .h-display-3 { margin-bottom: 0.5rem; }
.leadcard p { font-size: var(--fs-sm); margin-bottom: 1.5rem; }

/* Forms */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-dim); margin-bottom: 0.5rem; letter-spacing: 0.01em; }
.field label .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.75rem 0.75rem;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  background: var(--tint-1);
  border: 1px solid var(--line-2);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
/* iOS Safari zooms the viewport when a focused control is under 16px. */
@media (max-width: 640px) {
  .field input, .field textarea, .field select { font-size: 16px; }
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  background: var(--tint-2);
  box-shadow: var(--ring);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; }
.field .err { display: none; color: var(--danger-text); font-size: var(--fs-2xs); margin-top: 0.5rem; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.field.invalid .err { display: block; }
.form-note { font-size: var(--fs-2xs); color: var(--text-faint); margin-top: 1rem; }
.form-success {
  display: none;
  padding: 1rem 1.25rem; border-radius: var(--r-sm);
  border: 1px solid var(--success-line); background: var(--success-soft);
  color: var(--success-text); font-size: var(--fs-xs); margin-top: 1rem;
}
.form-success.show { display: flex; gap: 0.5rem; align-items: flex-start; }
.form-success svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.25rem; }
/* The moment after submitting is peak intent, so the confirmation carries the
   next step rather than just saying thanks. It stays put instead of
   auto-dismissing, so the phone number is still there to act on. */
.form-success__body { display: grid; gap: 0.5rem; }
.form-success__body strong { color: var(--text); }
.form-success__body p { margin: 0; font-size: var(--fs-xs); line-height: 1.5; }
.form-success__acts { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; padding-top: 0.25rem; }
.form-success__acts a { color: var(--success-text); font-weight: 600; border-bottom: 1px solid currentColor; }
.form-success__acts a:hover { color: var(--text); }
/* A .btn beats the UA [hidden] rule on display, so hide it explicitly. Used by
   the booking links, which stay out of the page until a URL is configured. */
.btn[hidden], a[hidden] { display: none; }
.form-error {
  display: none;
  padding: 1rem 1.25rem; border-radius: var(--r-sm);
  border: 1px solid var(--danger-line); background: var(--danger-soft);
  color: var(--danger-text); font-size: var(--fs-xs); margin-top: 1rem;
}
.form-error.show { display: flex; gap: 0.5rem; align-items: center; }
.form-error svg { width: 18px; height: 18px; flex-shrink: 0; }

/* -------------------------------------------------------------
   10. Stats
   ------------------------------------------------------------- */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--bg-2); text-align: center; }
.stat__num { font-size: clamp(2.6rem, 1.6rem + 3.5vw, 4.2rem); font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat__num .accent-text { color: var(--accent); }
.stat__label { margin-top: 0.75rem; font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

/* Rich proof band: icon + number + label + supporting line, 4 across.
   Gives the stats strip real substance instead of floating in empty space. */
@media (min-width: 640px)  { .stats--rich { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .stats--rich { grid-template-columns: repeat(4, 1fr); } }
.stats--rich .stat { padding: clamp(1.5rem, 1rem + 1.5vw, 2rem) clamp(1rem, .9rem + .8vw, 1.5rem); display: flex; flex-direction: column; align-items: center; }
.stats--rich .stat__num { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); }
.stat__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(252,99,32,0.10); border: 1px solid var(--accent-line); margin-bottom: 1rem; flex: 0 0 auto; }
.stat__icon svg { width: 20px; height: 20px; stroke: var(--accent); }
.stat__icon--google { background: rgba(255,255,255,0.05); border-color: var(--line); }
.stat__icon--google svg { stroke: none; }
.stat__note { margin: 0.75rem 0 0; font-size: var(--fs-2xs); line-height: 1.5; color: var(--text-dim); max-width: 24ch; }
/* The Google stat is a link through to the public reviews */
.stat--link { text-decoration: none; color: inherit; transition: background-image var(--dur) var(--ease); }
.stat--link:hover, .stat--link:focus-visible { background-image: linear-gradient(rgba(252,99,32,.07), rgba(252,99,32,.07)); }
.stat--link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.stat__cta { margin: 0.75rem 0 0; display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-2); }
.stat__cta svg { width: 14px; height: 14px; }
.stat--link:hover .stat__cta { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------
   11. Grids & feature cards
   ------------------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } }

/* Service / feature card */
.feature {
  display: flex; flex-direction: column;
  min-height: 100%;
}
.feature__no { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-2xs); letter-spacing: 0.14em; color: var(--text-faint); }
.feature__icon {
  width: 52px; height: 52px; margin-bottom: 1.5rem;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.feature__icon svg { width: 24px; height: 24px; }
.card:hover .feature__icon { transform: scale(1.06) rotate(-3deg); }
.feature h3, .feature .h-display-3 { margin-bottom: 0.5rem; display: flex; align-items: baseline; gap: 0.5rem; }
.feature p { font-size: var(--fs-sm); color: var(--text-dim); flex-grow: 1; }
.feature__link { margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--accent); display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.feature__link svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.card:hover .feature__link svg { transform: translateX(4px); }

.feature__topno {
  position: absolute; top: 1.4rem; right: 1.5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-2xs); color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}
.card:hover .feature__topno { color: var(--accent); }

/* Value / bullet list */
.checklist { display: grid; gap: 1rem; }
.checklist li { display: flex; gap: 1rem; align-items: flex-start; }
.checklist .ci {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.checklist .ci svg { width: 15px; height: 15px; }
.checklist li span.t { color: var(--text-dim); }

/* Split feature (image/text) */
.feature-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .feature-split { grid-template-columns: 1fr 1fr; } .feature-split.reverse > :first-child { order: 2; } }

/* -------------------------------------------------------------
   12. Marquee
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   13. Testimonials
   ------------------------------------------------------------- */
.rating-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.rating-head .score { font-size: var(--fs-h2); font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.stars { color: var(--star); letter-spacing: 0.1em; font-size: var(--fs-md); }
.rating-head .meta { color: var(--text-faint); font-size: var(--fs-xs); }

.quote {
  display: flex; flex-direction: column; height: 100%;
}
.quote .stars { margin-bottom: 1rem; font-size: var(--fs-sm); }
.quote p { color: var(--text); font-size: var(--fs-md); line-height: 1.6; flex-grow: 1; }
.quote__by { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; color: var(--on-accent);
  background: linear-gradient(140deg, var(--accent-2), var(--accent)); font-size: var(--fs-sm);
}
.quote__by b { display: block; color: var(--text); font-size: var(--fs-xs); }
.quote__by small { color: var(--text-faint); font-size: var(--fs-2xs); }

/* Client logo in place of the initials chip, where a logo exists in
   /images/clients/. Reviewers whose company has no logo keep their initials.
   Doubled class so it beats the accent gradient above. */
.quote__avatar.quote__avatar--logo {
  width: auto; min-width: 64px; max-width: 104px; height: 42px;
  padding: 0 0.6rem; border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
/* Bound both axes rather than fixing height: these logos run from 1.06:1
   (MBKB) to 3.8:1 (Ixia), so a fixed height renders the square ones tiny. */
.quote__avatar--logo img {
  height: auto; width: auto; max-height: 26px; max-width: 84px;
  object-fit: contain; display: block;
  filter: brightness(0) invert(1); opacity: 0.85;   /* matches .logowall__cell */
}
/* Logos supplied with a solid background (portland.png is a red lockup with no
   transparency) would flatten to a white block under that filter. Show as-is. */
.quote__avatar.quote__avatar--logo.is-solid {
  padding: 0; background: transparent; border-color: transparent; overflow: hidden;
}
.quote__avatar--logo.is-solid img {
  height: 42px; width: auto; max-height: none; max-width: 104px;
  filter: none; opacity: 1; border-radius: var(--r-xs);
}

/* Illustrative photography dropped into a split layout. Carries the card
   border/radius so it reads as part of the same component family. */
.wz-cardmedia {
  position: relative; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.wz-cardmedia img {
  display: block; width: 100%;
  aspect-ratio: 2 / 1;            /* reserves space, so no layout shift */
  object-fit: cover;
  object-position: 50% var(--wz-focus, 30%);
  filter: saturate(0.82) brightness(0.78) contrast(1.03);
}
/* Soft vignette so the edges settle into the page */
.wz-cardmedia::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 8, 10, 0.30) 0%, rgba(8, 8, 10, 0) 24%,
    rgba(8, 8, 10, 0) 74%, rgba(8, 8, 10, 0.38) 100%);
}
@media (max-width: 899px) { .wz-cardmedia img { aspect-ratio: 16 / 9; } }

/* Masonry-ish columns for many reviews */
.quote-cols { columns: 1; column-gap: 1.25rem; }
@media (min-width: 680px) { .quote-cols { columns: 2; } }
@media (min-width: 1040px) { .quote-cols { columns: 3; } }
.quote-cols .card { break-inside: avoid; margin-bottom: 1.25rem; display: inline-flex; width: 100%; }

/* -------------------------------------------------------------
   14. FAQ accordion
   ------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; text-align: left; padding: 1.5rem 0.25rem;
  font-size: var(--fs-lg); font-weight: 700; color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; position: relative; transition: border-color var(--dur-fast) var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform var(--dur) var(--ease); }
.faq__icon::before { width: 13px; height: 2px; }
.faq__icon::after { width: 2px; height: 13px; }
.faq__item.open .faq__icon::after { transform: scaleY(0); }
.faq__item.open .faq__icon { border-color: var(--accent-line); }
.faq__a { overflow: hidden; height: 0; transition: height var(--dur) var(--ease); }
.faq__a-inner { padding: 0 0.25rem 1.5rem; color: var(--text-dim); max-width: 68ch; }

/* -------------------------------------------------------------
   14b. Inline content disclosure
   Same open/close behaviour as the FAQ accordion, styled as stacked
   panels for breaking long prose into scannable pieces. Kept on its
   own class names so FAQPage schema only ever describes real Q&A.
   ------------------------------------------------------------- */
.disclose { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
/* Motion note: these use --dur-fast (220ms) rather than --dur (450ms). Opening a
   panel is a micro-interaction, and 450ms reads as sluggish for that. --ease is
   already an ease-out curve, which is the right shape for entering content. */
.disclose__item {
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.disclose__item:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.038); }
.disclose__item.open { border-color: var(--accent-line); background: rgba(252, 99, 32, 0.035); }
.disclose__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; min-height: 56px; padding: 1rem 1.25rem;
  font-size: var(--fs-md); font-weight: 700; line-height: 1.35; color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}
.disclose__q:hover { color: var(--accent); }
.disclose__label { display: flex; align-items: baseline; gap: 0.75rem; }
.disclose__no {
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.14em;
  color: var(--text-faint); flex-shrink: 0;
}
.disclose__item.open .disclose__no { color: var(--accent); }
.disclose__icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center; position: relative;
  transition: border-color var(--dur-fast) var(--ease);
}
.disclose__icon::before, .disclose__icon::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease);
}
.disclose__icon::before { width: 11px; height: 2px; }
.disclose__icon::after { width: 2px; height: 11px; }
.disclose__item.open .disclose__icon::after { transform: scaleY(0); }
.disclose__item.open .disclose__icon { border-color: var(--accent-line); }
.disclose__a { overflow: hidden; height: 0; transition: height var(--dur-fast) var(--ease); }
.disclose__a-inner { padding: 0 1.25rem 1.25rem; color: var(--text-dim); max-width: 68ch; }
.disclose__a-inner p + p { margin-top: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
  .disclose__item, .disclose__icon, .disclose__icon::before,
  .disclose__icon::after, .disclose__a { transition: none; }
}

/* Variant: two-up grid. Same panels, different rhythm, for pages where a long
   stacked list would repeat the section above it. Collapses to one column. */
.disclose--grid { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 720px) { .disclose--grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------
   14c. Stepped disclosure
   For genuinely sequential content (stages of a project, what happens
   when something is detected). Shares the accordion JS via
   .disclose__* class names, adds a connecting spine and numbered nodes.
   ------------------------------------------------------------- */
.steps { position: relative; display: grid; gap: 0.75rem; margin-top: 1.5rem; padding-left: 2.5rem; }
.steps::before {
  content: ""; position: absolute; left: 0.95rem; top: 0.9rem; bottom: 0.9rem;
  width: 1px; background: linear-gradient(180deg, var(--accent-line), var(--line) 60%);
}
.steps .disclose__item { position: relative; }
.steps .disclose__item::before {
  content: ""; position: absolute; left: -2.1rem; top: 1.35rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-2);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.steps .disclose__item.open::before { border-color: var(--accent); background: var(--accent); }
@media (max-width: 560px) { .steps { padding-left: 2rem; } .steps::before { left: 0.6rem; } .steps .disclose__item::before { left: -1.75rem; } }

/* -------------------------------------------------------------
   14d. Tabs
   For parallel options the reader compares rather than reads in order.
   Full tablist semantics with roving tabindex and arrow-key movement.
   ------------------------------------------------------------- */
.tabs { margin-top: 1.5rem; }
.tabs__list {
  display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.tabs__tab {
  min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.tabs__tab:hover { color: var(--text); border-color: var(--line-2); }
.tabs__tab[aria-selected="true"] {
  color: var(--accent); border-color: var(--accent-line);
  background: rgba(252, 99, 32, 0.06);
}
.tabs__panel { padding-top: 1.25rem; color: var(--text-dim); max-width: 68ch; }
.tabs__panel[hidden] { display: none; }
.tabs__panel p + p { margin-top: 0.75rem; }
.tabs__panel h3, .tabs__panel .h-display-3 { color: var(--text); font-size: var(--fs-md); margin-bottom: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .tabs__tab { transition: none; } }

/* -------------------------------------------------------------
   15. Team
   ------------------------------------------------------------- */
.team-card { text-align: left; }
.team-card__photo {
  aspect-ratio: 1; border-radius: var(--r); margin-bottom: 1.25rem; overflow: hidden;
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); display: grid; place-items: center; position: relative;
}
.team-card__photo .initials { font-size: var(--fs-h2); font-weight: 800; color: var(--accent); opacity: 0.85; }
.team-card__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(252,99,32,0.10)); }
.team-card h3 { font-size: var(--fs-lg); }
.team-card .role { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0.25rem 0 1rem; }
.team-card p { font-size: var(--fs-xs); }

/* LinkedIn link on team cards. margin-top:auto pins it to the card floor so all
   three align on one line regardless of bio length (.cardgrid is align-items:
   stretch). Negative inline margin lets the 44px touch target keep its padding
   while the label still optically aligns with the bio text above it. */
.team-card { display: flex; flex-direction: column; }
/* margin-top:auto on the link collapses to 0 whenever the bio already fills the
   card (always, on mobile), so the separation has to come from the bio itself. */
.team-card p { margin-bottom: 0.75rem; }
.team-card__li {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 0.75rem; margin-left: -0.75rem;
  border-radius: 10px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent); text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.team-card__li svg { width: 16px; height: 16px; flex: none; }
.team-card__li:hover, .team-card__li:focus-visible {
  color: var(--accent-2); background-color: rgba(252, 99, 32, 0.08);
}
.team-card__li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .team-card__li { transition: none; } }

/* -------------------------------------------------------------
   16. Blog cards
   ------------------------------------------------------------- */
.post {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.post__cover {
  aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2), var(--bg-2));
  border-bottom: 1px solid var(--line);
}
.post__cover::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 26px 26px; opacity: 0.6;
  mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent);
}
.post__cover .glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); opacity: 0.9; }
.post__cover .glyph svg { width: 46px; height: 46px; filter: drop-shadow(0 8px 24px var(--accent-glow)); }
.post__cat { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; }
.post__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.post__date { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.1em; color: var(--text-faint); }
.post__body h3 { font-size: var(--fs-lg); margin: 0.75rem 0 0.5rem; line-height: 1.25; }
.post:hover .post__body h3 { color: var(--accent); }
.post__body p { font-size: var(--fs-xs); color: var(--text-dim); flex-grow: 1; }
.post__more { margin-top: 1rem; font-size: var(--fs-2xs); color: var(--accent); font-weight: 600; display: inline-flex; gap: 0.5rem; align-items: center; }
.post__more svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.post:hover .post__more svg { transform: translateX(4px); }

/* Filter tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tab {
  padding: 0.75rem 1rem; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500;
  border: 1px solid var(--line-2); color: var(--text-dim);
  transition: all var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* -------------------------------------------------------------
   17. CTA band
   ------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-2xl); padding: clamp(2.5rem, 1.5rem + 5vw, 5rem); text-align: center; border: 1px solid var(--accent-line); background: linear-gradient(150deg, rgba(252,99,32,0.14), rgba(20,20,24,0.4) 55%); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 50% -20%, var(--accent-glow), transparent 70%); }
.cta-band h2, .cta-band .h-display-2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { margin: 1.25rem auto 0; color: var(--text-dim); }
.cta-band .hero__cta { justify-content: center; }

/* CTA band variant with an inline lead form (main pages) */
.cta-band--form { text-align: left; }
.cta-band__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .cta-band__grid { grid-template-columns: 1.05fr 0.95fr; } }
.cta-band--form h2, .cta-band--form .h-display-2 { max-width: 24ch; margin-inline: 0; }
.cta-band--form p { margin: 1rem 0 0; max-width: 54ch; }
.cta-band--form .eyebrow { text-align: left; }
.cta-band--form .hero__cta { justify-content: flex-start; }
.cta-form { background: rgba(8,8,10,0.55); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.25rem, 1rem + 1.4vw, 1.75rem); backdrop-filter: blur(6px); text-align: left; }
.cta-form h3, .cta-form .h-display-3 { margin: 0 0 0.25rem; }
.cta-form > p { margin: 0 0 1rem; font-size: var(--fs-sm); color: var(--text-dim); }
.cta-form .field { margin-bottom: 0.75rem; }
.cta-form .field textarea { min-height: 92px; }
.cta-form .btn { margin-top: 0.25rem; }

/* Mid-article prompt on long reads. Subordinate to the closing form, and jumps
   down to it rather than competing with it. */
.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--accent-line); border-radius: var(--r); background: linear-gradient(120deg, rgba(252,99,32,0.09), rgba(20,20,24,0.35)); }
.inline-cta p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; max-width: 54ch; color: var(--text-dim); }
.inline-cta p strong { color: var(--text); }
.inline-cta .btn { flex: 0 0 auto; padding: 0.5rem 1rem; font-size: var(--fs-xs); }
/* Keep the sticky header from covering the CTA when jumping to #enquire */
.cta-band { scroll-margin-top: 96px; }

/* ---- Mid-scroll conversion prompt ---------------------------------------
   Placed by measured scroll distance so a contact route is never more than
   ~2 screens away. Lighter than the closing band (no form) so it reads as a
   nudge rather than a repeat of the main CTA. */
.cta-mid { position: relative; overflow: hidden; border-radius: var(--r-2xl); text-align: center;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--accent-line);
  background: linear-gradient(150deg, rgba(252,99,32,0.12), rgba(20,20,24,0.42) 58%); }
.cta-mid::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(520px 240px at 50% -30%, var(--accent-glow), transparent 70%); }
/* The centred variant holds one short heading and one capped paragraph, so at
   full container width it renders as a mostly-empty box. Cap it to just wider
   than its own content. The --form variant genuinely uses the width (two
   columns, form on the right) and is excluded. */
.cta-mid:not(.cta-mid--form) { max-width: 820px; margin-inline: auto; }
.cta-band:not(.cta-band--form) { max-width: 900px; margin-inline: auto; }
.cta-mid h2, .cta-mid .h-display-2 { font-size: var(--fs-h3); max-width: 30ch; margin: 0.5rem auto 0; }
.cta-mid p { margin: 0.75rem auto 0; max-width: 62ch; color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.6; }
.cta-mid__btns { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; }
@media (max-width: 480px) { .cta-mid__btns .btn { width: 100%; justify-content: center; } }
/* Halfway down a page the nudge earns a form: the visitor is invested enough to
   type, and making them travel to the footer to do it loses them. Same two-column
   split as the closing band so the two read as one family. */
.cta-mid--form { text-align: left; }
.cta-mid--form h2, .cta-mid--form .h-display-2 { max-width: 26ch; margin-inline: 0; }
.cta-mid--form p { margin: 0.75rem 0 0; max-width: 52ch; }
.cta-mid--form .eyebrow { text-align: left; }
.cta-mid--form .cta-mid__btns { justify-content: flex-start; }
.cta-mid__grid { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .cta-mid__grid { grid-template-columns: 1.05fr 0.95fr; } }
/* A real review sat beside the form: the reassurance lands where the hesitation
   is. Deliberately quiet so it supports the form rather than competing with it. */
.cta-mid__proof { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.cta-mid__proof .stars { color: var(--accent); font-size: var(--fs-2xs); letter-spacing: 0.12em; }
.cta-mid__proof blockquote { margin: 0.5rem 0 0; }
.cta-mid__proof p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-dim); font-style: italic; max-width: 46ch; }
.cta-mid__proof cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: var(--fs-2xs); color: var(--text-faint); }
.cta-mid__proof cite b { color: var(--text-dim); font-weight: 600; }
.cta-mid__proof a { color: var(--text-faint); border-bottom: 1px solid var(--line-2); }
.cta-mid__proof a:hover { color: var(--accent); border-color: var(--accent-line); }
/* Article prose sets generous top margins on h2/h3, which a prompt dropped
   mid-article would otherwise inherit and sit lopsided inside its own box */
.prose .cta-mid h2, .prose .cta-mid .h-display-2, .prose .cta-form h3, .prose .cta-form .h-display-3 { margin-top: 0; }
/* A prompt dropped inside a card grid spans the full row so it reads as a break
   in the list rather than a stray card */
/* A cta-mid is a full-width banner, so any of them dropped into a card grid has
   to take the whole row. NOTE: .cardgrid is display:flex, not grid, so the old
   `grid-column: 1 / -1` here was a no-op — even the --span variant was really
   rendering at one-third width and only got away with it because its content
   reflows. The --form variant could not: its two-column inner layout overflowed
   the ~280px flex item and was visibly clipped on /blog/.
   flex-basis is what actually matters; the grid-column line is kept for any
   genuine grid container. Specificity (0,2,0) beats `.cardgrid--3 > *`. */
.cardgrid > .cta-mid, .quote-cols > .cta-mid {
  flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0;
  grid-column: 1 / -1; margin: 0.25rem 0;
}
.quote-cols > .cta-mid { break-inside: avoid; }

/* ---- Accreditations & technology partners -------------------------------
   Certification and partner marks must keep their own colours, so they sit on
   light chips rather than being recoloured or altered. Per-logo sizing below
   is measured from each file's actual content box, so they read as equal
   optical weight despite very different amounts of built-in padding. */
.accred { display: grid; gap: 1rem; }
@media (min-width: 900px) { .accred { grid-template-columns: repeat(2, 1fr); } }
.accred__card { display: flex; align-items: center; gap: clamp(1rem, .8rem + .8vw, 1.5rem); flex-wrap: wrap; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease), background-image var(--dur) var(--ease); }
a.accred__card:hover, a.accred__card:focus-visible { border-color: var(--accent-line); background-image: linear-gradient(rgba(252,99,32,.06), rgba(252,99,32,.06)); }
a.accred__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.accred__body { flex: 1 1 13rem; min-width: 12rem; }
.accred__body h3, .accred__body .h-display-3 { margin: 0 0 0.25rem; font-size: var(--fs-md); }
.accred__body p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-dim); }
.accred__more { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-2); }
.accred__more svg { width: 13px; height: 13px; }
a.accred__card:hover .accred__more { text-decoration: underline; text-underline-offset: 3px; }

/* Light chip so the marks stay legible on the dark theme. Greyscaled and
   slightly dimmed at rest so they sit back and match the client logo wall;
   true brand colours return on hover so the marks stay accurate. */
.brandchip { background: #e4e4e8; border-radius: 12px; padding: 0.75rem 1rem; display: grid; place-items: center; flex: 0 0 auto; transition: background var(--dur) var(--ease); }
.brandchip img { display: block; width: auto; filter: grayscale(1); opacity: .78; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.brandchip:hover { background: #fff; }
.brandchip:hover img { filter: none; opacity: 1; }

/* WhizzIT + Microsoft Cloud Solution Provider partnership lockup.
   Two separate marks with a divider and clear space, never merged. */
.lockup { display: flex; align-items: center; gap: clamp(0.75rem, .5rem + .6vw, 1rem); background: #e4e4e8; border-radius: 12px; padding: 0.75rem 1rem; flex: 0 0 auto; transition: background var(--dur) var(--ease); }
.lockup__wz { height: 24px; width: auto; display: block; }
.lockup__rule { width: 1px; align-self: stretch; min-height: 36px; background: rgba(0,0,0,.16); }
/* 600x600 file with 39% dead space top/bottom: crop it to the content band */
.lockup__ms { width: clamp(140px, 17vw, 178px); height: auto; aspect-ratio: 4 / 1; object-fit: cover; object-position: center; display: block; filter: grayscale(1); opacity: .8; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
/* Colour returns when the card is hovered or keyboard-focused */
a.accred__card:hover .lockup, a.accred__card:focus-visible .lockup { background: #fff; }
a.accred__card:hover .lockup__ms, a.accred__card:focus-visible .lockup__ms { filter: none; opacity: 1; }
a.accred__card:hover .brandchip { background: #fff; }
a.accred__card:hover .brandchip img, a.accred__card:focus-visible .brandchip img { filter: none; opacity: 1; }

/* Per-logo heights, tuned so each mark's visible content is ~the same size */
.logo-ce { height: 66px; }        /* content is 69% of file height */
.logo-fortinet { height: 46px; }  /* content is 64% of file height */
.logo-pax8 { height: 40px; }
.logo-dell { height: 32px; }
.logo-acronis { height: 38px; }

/* Brands we partner with. Chips share one fixed height so the row aligns
   cleanly even though each logo inside is sized differently. */
.partnerwall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }
.partnerwall .brandchip { height: 72px; padding: 0 1.25rem; }
/* NinjaOne ships with its own dark panel, so it acts as its own chip and keeps
   a transparent surround (a white hover background would look wrong on it) */
.brandchip--native, .brandchip--native:hover { background: transparent; padding: 0; overflow: hidden; }
.logo-ninjaone { height: 72px; border-radius: 12px; display: block; }
/* its panel is already dark, so it needs less dimming to stay legible */
.brandchip--native img { opacity: .9; }
@media (max-width: 480px) {
  .partnerwall .brandchip { height: 60px; padding: 0 1rem; }
  .logo-ninjaone { height: 60px; }
  .logo-fortinet { height: 38px; } .logo-pax8 { height: 34px; }
  .logo-dell { height: 27px; } .logo-acronis { height: 32px; }
}

/* Contact page — office location maps */
.office-maps__label { color: var(--text-faint); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; margin: 1.75rem 0 0.75rem; }
.office-maps { display: grid; gap: 0.75rem; }
.office-map { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.office-map__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; font-size: var(--fs-xs); line-height: 1.45; }
.office-map__head a { color: var(--accent-2); font-size: var(--fs-2xs); white-space: nowrap; flex: 0 0 auto; }
.office-map__tag { color: var(--text-faint); font-size: var(--fs-2xs); }
.office-map__addr { color: var(--text-dim); font-size: var(--fs-2xs); }
.office-map iframe { display: block; width: 100%; height: clamp(140px, 16vw, 180px); border: 0; }
/* Click-to-load map facade. The Google Maps embed pulled in 4-6 third-party
   origins (maps.google.com, maps.googleapis.com, maps.gstatic.com, www.google.com,
   plus fonts.googleapis/gstatic on mobile) on the primary conversion page — the
   only page on the site that loaded any third party at all. The facade keeps the
   map one tap away while costing nothing until asked for. Sized to match the
   iframe exactly so swapping it in causes no layout shift (no CLS). */
.office-map__load {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; height: clamp(140px, 16vw, 180px);
  border: 0; border-top: 1px solid var(--line);
  background: var(--bg-2); color: var(--text-dim);
  font: inherit; font-size: var(--fs-xs); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.office-map__load svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.office-map__load:hover, .office-map__load:focus-visible { background: var(--bg-3, var(--bg-2)); color: var(--text); }

/* -------------------------------------------------------------
   18. Page hero (interior)
   ------------------------------------------------------------- */
.page-hero { position: relative; padding-top: clamp(3rem, 2rem + 4vw, 5rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); overflow: hidden; }
.page-hero .hero__grid { opacity: 0.4; }
.breadcrumb { display: flex; gap: 0.5rem; font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.5rem; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--accent); }
.page-hero h1 { max-width: 20ch; }
.page-hero p { margin-top: 1.5rem; max-width: 70ch; font-size: var(--fs-lead); color: var(--text-dim); }
/* A lead card sitting inside a page hero keeps its own card scale, not the hero lead scale. */
.page-hero .leadcard p { margin-top: 0; font-size: var(--fs-sm); }

/* -------------------------------------------------------------
   19. Contact info blocks
   ------------------------------------------------------------- */
.info-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-row .ii { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.info-row .ii svg { width: 20px; height: 20px; }
.info-row .label { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.25rem; }
.info-row .val { color: var(--text); font-weight: 600; font-size: var(--fs-md); }
.info-row .val a:hover { color: var(--accent); }
.info-row .sub { color: var(--text-dim); font-size: var(--fs-xs); }

/* -------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-top: clamp(3.5rem, 2rem + 4vw, 5rem); margin-top: clamp(3rem, 2rem+3vw, 5rem); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-brand .logo { margin-bottom: 1.25rem; }
.footer-brand p { color: var(--text-dim); font-size: var(--fs-sm); max-width: 34ch; }
.footer-social { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.footer-social a { width: 44px; height: 44px; border-radius: var(--r-tile); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-dim); transition: all var(--dur-fast) var(--ease); }
.footer-social a:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h3, .footer-col h4 { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-bottom: 1.25rem; }
.footer-col ul { display: grid; gap: 0.75rem; }
.footer-col a { color: var(--text-dim); font-size: var(--fs-xs); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-contact address { font-style: normal; color: var(--text-dim); font-size: var(--fs-xs); display: grid; gap: 1rem; }
.footer-contact .fc-line { display: flex; gap: 0.5rem; align-items: flex-start; }
.footer-contact .fc-line svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.footer-contact a:hover { color: var(--text); }
.coverage { margin-top: clamp(2.5rem, 1.5rem+3vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.coverage h3, .coverage h4 { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-bottom: 1rem; }
/* The coverage chips carry full anchor text ("IT support London", not "London")
   so the sitewide footer links describe their target. That text is ~3x longer
   than a city name, which on a phone stacks them one-per-row and adds ~380px to
   the footer. Tighten the chips on narrow screens to keep the cloud compact. */
@media (max-width: 700px) {
  .coverage .chip-row { gap: 0.5rem; }
  .coverage .chip { padding: 0.5rem 0.75rem; font-size: var(--fs-2xs); }
}
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1.75rem; margin-top: clamp(2.5rem, 1.5rem+3vw, 4rem); border-top: 1px solid var(--line); color: var(--text-faint); font-size: var(--fs-2xs); }
.footer-bottom .fb-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a:hover { color: var(--text); }

/* -------------------------------------------------------------
   21. Prose (legal pages)
   ------------------------------------------------------------- */
.prose { max-width: var(--maxw-narrow); }
.prose h2, .prose .h-display-2 { font-size: var(--fs-h4); margin: 2.5rem 0 1rem; }
.prose h3, .prose .h-display-3 { font-size: var(--fs-lg); margin: 1.75rem 0 0.5rem; }
.prose p, .prose li {
  color: var(--text-dim); margin-bottom: 1rem;
  /* Match the body size used on every non-article page (measured 19.2px on
     /it-support/). Article text was inheriting the 16px base, which is what
     made the column look thin and undersized next to the rest of the site. */
  font-size: var(--fs-lead);
}
.prose ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.prose strong { color: var(--text); }

/* Author byline box on blog posts. Authorship was previously credited only to the
   Organization, with no named human anywhere — the weakest E-E-A-T signal on the
   site. Bio text is the same one published on /about/, so there is a single source
   of truth for it. */
.authorbox { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem 1.5rem; }
.authorbox__photo { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(252,99,32,0.10); border: 1px solid var(--accent-line); }
.authorbox__photo .initials { font-size: var(--fs-lg); font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
.authorbox__name { margin: 0 0 0.5rem; color: var(--text); font-size: var(--fs-sm); }
.authorbox__name .role { color: var(--text-faint); font-weight: 400; }
.authorbox__bio { margin: 0 0 0.75rem; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.6; }
@media (max-width: 520px) { .authorbox { flex-direction: column; gap: 1rem; } }

/* Comparison tables. The site had zero tables sitewide, while carrying genuinely
   comparative content (managed vs in-house, break-fix vs proactive) in prose only.
   Tables are an explicit AI-citation signal for comparative data and give an
   extractor a self-contained block to lift. Wrapped in .table-wrap so a wide table
   scrolls inside itself rather than forcing the whole page to scroll sideways. */
.table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-xs); }
table.cmp caption { text-align: left; color: var(--text-faint); font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 0.75rem; }
table.cmp th, table.cmp td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { color: var(--text); font-weight: 700; border-bottom: 1px solid var(--line-2); }
table.cmp tbody th { color: var(--text); font-weight: 600; width: 22%; }
table.cmp td { color: var(--text-dim); }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody tr:hover td, table.cmp tbody tr:hover th { background: rgba(252,99,32,0.04); }

/* -------------------------------------------------------------
   22. Scroll reveal animation
   ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }
.reveal[data-delay="4"] { transition-delay: 0.28s; }
.reveal[data-delay="5"] { transition-delay: 0.35s; }
.reveal[data-delay="6"] { transition-delay: 0.42s; }

.reveal-x { opacity: 0; transform: translateX(-30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-x.right { transform: translateX(30px); }
.reveal-x.in { opacity: 1; transform: none; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; z-index: var(--z-top); background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent-glow); will-change: transform; transition: transform 0.1s linear; }

/* -------------------------------------------------------------
   23. Helpers
   ------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-faint); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: 1rem; top: -60px; z-index: var(--z-top); background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; border-radius: var(--r-xs); font-weight: 600; transition: top var(--dur-fast) var(--ease); }
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------
   24. Reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal, .reveal-x { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------
   25. Services mega-menu (full service tree, matches staging)
   ------------------------------------------------------------- */
.nav__inner { position: relative; }
.menu > li.has-mega { position: static; }
/* Transparent hover bridge across the 12px gap so the pointer can reach the panel */
.menu li.has-mega::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 16px;
  pointer-events: none;
}
.menu li.has-mega:hover::after,
.menu li.has-mega:focus-within::after { pointer-events: auto; }
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  padding: 1.5rem 1.5rem 1rem;
  border-radius: var(--r);
  background: rgba(14, 14, 18, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: var(--z-overlay);
}
.menu li.has-mega:hover .mega,
.menu li.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__col { min-width: 0; }
.mega__hub {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.5rem; margin-bottom: 0.25rem;
  border-radius: var(--r-xs);
  color: var(--text); font-weight: 700; font-size: var(--fs-xs); letter-spacing: -0.01em;
}
.mega__hub:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.mega__hub .di {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--accent-soft); color: var(--accent);
}
.mega__hub .di svg { width: 16px; height: 16px; }
.mega__sub { display: flex; flex-direction: column; padding-bottom: 0.5rem; }
.mega__sub a {
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-xs);
  color: var(--text-dim); font-size: var(--fs-2xs); line-height: 1.3;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mega__sub a:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.mega__all {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  margin-top: 0.5rem; padding: 0.75rem 0.5rem 0.25rem;
  color: var(--accent); font-weight: 600; font-size: var(--fs-xs);
}
@media (max-width: 1180px) { .mega { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* Mobile: hub chips stand out from sub-service chips */
.mobile-menu .m-sub { align-items: flex-start; }
.mobile-menu .m-sub a.m-hub {
  color: var(--text); font-weight: 700;
  border-color: var(--accent-line); background: var(--accent-soft);
  margin-top: 0.25rem;
}

/* -------------------------------------------------------------
   26. Brand logo image (new WhizzIT lockup)
   ------------------------------------------------------------- */
.logo__img { height: 34px; width: auto; display: block; transition: height var(--dur) var(--ease); }
.site-header.scrolled .logo__img { height: 30px; }
.site-footer .logo__img { height: 34px; }
@media (max-width: 420px) { .logo__img { height: 30px; } }

/* -------------------------------------------------------------
   27. Mobile nav — Services accordion
   ------------------------------------------------------------- */
.mobile-menu .m-acc { display: block; padding: 0.25rem 0 0.5rem; }
.mobile-menu .m-acc__item { border-bottom: 1px solid var(--line); }
.mobile-menu .m-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left;
  padding: 0.75rem 0.25rem;
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
}
.mobile-menu .m-acc__head:hover { color: var(--accent); }
.mobile-menu .m-acc__chev { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.mobile-menu .m-acc__item.open .m-acc__chev { transform: rotate(180deg); }
.mobile-menu .m-acc__body { height: 0; overflow: hidden; transition: height var(--dur) var(--ease); }
.mobile-menu .m-acc__body a {
  display: block; padding: 0.75rem 0.75rem;
  color: var(--text-dim); font-size: var(--fs-sm); border-radius: var(--r-xs);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mobile-menu .m-acc__body a:first-child { color: var(--text); font-weight: 600; }
.mobile-menu .m-acc__body a:hover, .mobile-menu .m-acc__body a:active { color: var(--accent); background: rgba(255,255,255,0.05); }

/* -------------------------------------------------------------
   28. Trust bar (proof strip under hero)
   ------------------------------------------------------------- */
.trustbar { border-block: 1px solid var(--line); background: var(--bg-2); }
.trustbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.75rem 2.5rem; padding-block: 1rem;
}
.trustbar__item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-2xs);
  letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap;
}
.trustbar__item svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.trustbar__item b { color: var(--text); font-weight: 600; }
.trustbar__item .stars { color: var(--star); font-size: var(--fs-xs); letter-spacing: 0.06em; }
@media (min-width: 768px) { .trustbar__item { font-size: var(--fs-2xs); } }

/* -------------------------------------------------------------
   29. Card grids that centre orphan rows (even spacing)
   ------------------------------------------------------------- */
.cardgrid { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: stretch; }
.cardgrid > * { flex: 0 1 100%; min-width: 0; }
@media (min-width: 560px) { .cardgrid > * { flex-basis: calc(50% - 0.625rem); } }
@media (min-width: 900px) {
  .cardgrid--3 > * { flex-basis: calc(33.333% - 0.834rem); }
  .cardgrid--4 > * { flex-basis: calc(25% - 0.938rem); }
}

/* -------------------------------------------------------------
   30. Sticky mobile CTA bar (conversion)
   ------------------------------------------------------------- */
.mobilecta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  display: flex; gap: 0.5rem;
  padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line-2);
}
.mobilecta .btn { flex: 1; padding-block: 0.75rem; }
@media (min-width: 1080px) { .mobilecta { display: none; } }
@media (max-width: 1079px) { body { padding-bottom: 5rem; } body.menu-open .mobilecta { opacity: 0; pointer-events: none; } }

/* -------------------------------------------------------------
   31. Client logo wall + Google reviews header
   ------------------------------------------------------------- */
.logowall { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.logowall__cell {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r);
  display: grid; place-items: center;
  padding: 1rem 1.5rem; min-width: 148px; min-height: 86px;
  flex: 0 1 auto;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logowall__cell:hover { transform: translateY(-3px); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.logowall__cell img { height: 52px; width: auto; max-width: 240px; object-fit: contain; display: block; filter: brightness(0) invert(1); opacity: 0.8; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.logowall__cell:hover img { opacity: 1; }

/* Home client logo carousel — auto-scroll, ~5 in view, greyscale on dark */
.logo-carousel { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.logo-carousel__track { display: flex; width: max-content; align-items: center; }
/* The keyframes translate by -50%, so the loop only works once main.js has
   duplicated the row. Gating the animation on .is-looping means no JS gives a
   static row of logos rather than a visibly glitching half loop. */
.logo-carousel__track.is-looping { animation: logoscroll 36s linear infinite; }
.logo-carousel:hover .logo-carousel__track.is-looping { animation-play-state: paused; }
.logo-carousel__cell { flex: 0 0 auto; display: grid; place-items: center; padding: 0.5rem clamp(1.75rem, 4vw, 3.5rem); }
.logo-carousel__cell img { height: clamp(56px, 6vw, 84px); width: auto; max-width: 330px; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: opacity var(--dur) var(--ease); }
.logo-carousel__cell:hover img { opacity: 1; }
@keyframes logoscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-carousel__track.is-looping { animation: none; } }
.reviews-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.reviews-head .g-logo { width: 22px; height: 22px; }
.reviews-head .score { font-size: var(--fs-h2); font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }

/* Live Google review cards */
.reviews-live-head { text-align: center; margin: 0 auto 1.5rem; color: var(--text-dim); font-size: var(--fs-sm); }
.reviews-live-head .stars { color: #fbbc05; letter-spacing: .05em; }
.reviews-live-head a { color: var(--accent-2); }
.g-review__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.g-review__avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; background: var(--bg-2); color: var(--text); font-weight: 700; font-size: var(--fs-2xs); }
.g-review__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-review__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.g-review__who b { font-size: var(--fs-sm); }
.g-review__who small { color: var(--text-faint); font-size: var(--fs-2xs); }
.g-review__logo { width: 18px; height: 18px; margin-left: auto; flex: 0 0 auto; }
.g-review .stars { color: #fbbc05; margin-bottom: 0.5rem; }

/* -------------------------------------------------------------
   32. reCAPTCHA field
   ------------------------------------------------------------- */
/* The widget stays out of the way until the visitor actually presses Send. That
   keeps the form uncluttered and means Google's ~370KB script is only fetched
   by people who are really submitting. It is collapsed rather than
   display:none because reCAPTCHA renders badly into a container with no box:
   visibility:hidden still gives it layout while keeping it out of the tab order
   and the accessibility tree. */
.captcha-row {
  max-height: 0; margin-bottom: 0; opacity: 0; visibility: hidden; overflow: hidden;
  transition: max-height 0.28s var(--ease), opacity 0.28s var(--ease), margin-bottom 0.28s var(--ease);
}
.captcha-row.is-armed { max-height: 160px; margin-bottom: 1rem; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .captcha-row { transition: none; } }
.captcha-row .g-recaptcha { display: inline-block; max-width: 100%; overflow: hidden; }
.captcha-row .err { display: none; text-align: left; color: var(--danger-text); font-size: var(--fs-2xs); margin-top: 0.5rem; }
.captcha-row.invalid .err { display: block; }
/* Google's widget is a fixed 304px iframe. In the narrow inline CTA forms that
   is exactly the content width, so it sat flush against both edges and read as
   bolted on rather than part of the form. Scale it back a touch and centre it
   so it sits within the same rhythm as the inputs above it. The wider hero
   lead card has plenty of room, so it is deliberately left as it was. */
.cta-form .captcha-row { text-align: center; }
.cta-form .captcha-row .g-recaptcha { transform: scale(0.93); transform-origin: center top; margin-bottom: -6px; }
/* Keep the fixed-width reCAPTCHA widget inside the lead card on small phones.
   Both selectors are listed so this still beats the .cta-form rule above. */
@media (max-width: 480px) {
  .leadcard { padding-inline: 1rem; }
  .captcha-row { overflow: hidden; }
  .captcha-row .g-recaptcha,
  .cta-form .captcha-row .g-recaptcha { transform: scale(0.90); transform-origin: center top; margin-bottom: -6px; }
}

/* Form headings sit directly under the page h1, so they are h2 for a
   valid heading order. These rules keep them visually identical to the
   h3 they replaced. */
.leadcard h2, .leadcard .h-display-2, .cta-form h2, .cta-form .h-display-2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }
.leadcard h2, .leadcard .h-display-2 { margin-bottom: 0.5rem; }
.cta-form h2, .cta-form .h-display-2 { margin: 0 0 0.25rem; }
.prose .cta-form h2, .prose .cta-form .h-display-2 { margin-top: 0; }

/* ===== Touch target sizing =====================================================
   Text links rendered at body/small sizes computed to only 21-23px tall, below
   the 44px WCAG 2.5.5 / 48px Google mobile-usability guidance. The topbar tel:
   link was the worst case at 108x21 — the primary contact route on mobile.

   Scoped to coarse pointers so the desktop mouse experience and visual rhythm
   stay exactly as designed; these rules only apply where a finger is the input.
   Widths are left alone (all affected links already exceed 44px horizontally),
   so this only adds vertical breathing room. */
@media (pointer: coarse) {
  .topbar__right a,
  .topbar__loc span {
    min-height: 44px;
  }
  /* The row grows with its content, so trim the block padding to keep the
     topbar close to its original height rather than stacking both. */
  .topbar__inner {
    padding-block: 0.25rem;
  }
  .feature__link,
  .textlink,
  .stat__cta,
  .logo {
    min-height: 44px;
  }
  /* .feature__link and .textlink are already inline-flex + align-items:center,
     so min-height centres their content without further layout change. */
  .stat__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  /* Footer link lists, footer contact lines, the location chip rows and the
     mobile menu's nested links. min-height is used rather than padding so the
     result is deterministic regardless of each link's base line-height.
     (.footer-social a is already 44x44 by design — left alone.) */
  .footer-col ul > li > a,
  .footer-bottom .fb-links a,
  .footer-contact .fc-line a,
  .chip-row a.chip,
  .chip-row a.pill,
  .mobile-menu .m-acc__body a,
  .office-map__head a,
  .contact-detail .val a,
  .val a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Chips are centred pills — keep their text centred as they grow. */
  .chip-row a.chip {
    justify-content: center;
  }

  /* Links that sit inside a sentence, a caption or a single-line breadcrumb
     must not become flex boxes, or they would break the text flow and change
     the row height. Vertical padding on an inline element expands the hit area
     without affecting the line box, which is exactly what is wanted here. */
  .cta-mid__proof cite a,
  .meta a,
  .prose p > a,
  .form-note a,
  p.muted a,
  /* Inline links in ordinary section copy (p.mt-2 / p.mt-3). Excludes anything
     already styled as a button or textlink, which carry their own sizing. */
  p.mt-2 > a:not(.btn):not(.textlink),
  p.mt-3 > a:not(.btn):not(.textlink),
  /* The cookie-consent dialog is injected at runtime by wz.js, so it only
     exists on the live site — its "cookie policy" link measured 20px. */
  #wz-consent p a {
    padding-block: 1rem;
  }

  /* Breadcrumbs are deliberately treated differently. Taking them to a full
     44px grew the breadcrumb row from 19px to 46px, pushing every page's h1
     down by ~27px on mobile — a poor trade for secondary navigation. This
     clears the 24px WCAG 2.5.8 (AA) floor with room to spare while keeping the
     row compact. 2.5.5's 44px is AAA and not the target here. */
  .breadcrumb a {
    padding-block: 0.5rem;
  }
}