/* ==========================================================================
   pages.css — typography system, layout corrections and new components.
   Loaded last, so it intentionally overrides styles.css.

   Type: IBM Plex Sans / Mono / Serif, self-hosted (no Google Fonts request,
   which keeps the UK/EU privacy position clean). Chosen because the existing
   design leans on a monospace face for eyebrows, numbers and table headers —
   Plex is one of the few free superfamilies where the sans, mono and serif
   are actually designed together, so those labels now belong to the same
   voice instead of falling back to whatever monospace the OS supplies.
   ========================================================================== */

/* --- Self-hosted faces ------------------------------------------------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 600;
  font-display: swap; src: url('assets/fonts/ibm-plex-serif-latin-600-italic.woff2') format('woff2'); }

:root {
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Type scale — 1.25 ratio, capped so headings stay readable on wide screens.
     The previous scale peaked at 6.7rem (107px), which is poster typography,
     not something a CFO reads. */
  --h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);   /* 28 → 40px */
  --h2: clamp(1.35rem, 1.12rem + 0.95vw, 1.8rem);  /* 22 → 29px */
  --h3: clamp(1rem,    0.96rem + 0.18vw, 1.1rem);  /* 16 → 18px */
  --body: 1rem;
  --lede: clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
  --small: 0.86rem;

  --header-h: 88px;
}

/* --- Base rhythm -------------------------------------------------------- */
body {
  font-size: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

h1, h2, h3, h4 {
  letter-spacing: -0.018em;   /* Plex is narrower than Inter; -0.045em was crushing it */
  line-height: 1.16;
  text-wrap: balance;
  font-weight: 600;
}
h1 { font-size: var(--h1); max-width: 24ch; margin-bottom: 16px; line-height: 1.14; }
h2 { font-size: var(--h2); max-width: 30ch; }
h3 { font-size: var(--h3); letter-spacing: -0.008em; line-height: 1.3; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -0.005em; }

p { text-wrap: pretty; }

/* Plex has no 800. Remap so the browser never synthesises a fake bold. */
.button, .text-link, .main-nav, summary, .check-list, .footer-up,
.service-card > a, .location-service-card a, .price-card > a, .article-card a,
.capability-list span, .logo-row p, .contact-form label, .form-status,
.engagement-table td:nth-child(2), .proof-points strong, .app-bar,
.external-reference a, .resource-reference-links a { font-weight: 600; }

.eyebrow { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.09em; }

/* Section rhythm — 128px was tuned for 107px headings. */
.section { padding: 76px 0; }
.intro-band { padding: 66px 0; }
.contact-section { padding: 76px 0; }
.location-contact { padding: 62px 0; }

/* Body copy sizes: nudge up the ones that were set below comfortable reading. */
.hero-lede, .location-hero .hero-lede { font-size: var(--lede); line-height: 1.68; }
.section-heading > p,
.location-copy > p:not(.eyebrow),
.deep-dive-heading > p { font-size: 1rem; line-height: 1.75; }
.service-card > p:not(.service-number),
.location-service-card p,
.challenge-grid p,
.principle-grid p,
.process-list p,
details p { font-size: var(--small); line-height: 1.7; }
summary { font-size: 1rem; }
.form-fine { font-size: 0.72rem; }
.footer-links a { font-size: 0.82rem; }
.footer-bottom { font-size: 0.72rem; }

/* ==========================================================================
   LAYOUT FIX: the header is position:absolute, so it occupies no space.
   Only .hero compensated for it (174px of padding). Every other page
   template ran underneath the header. These rules give the first block on
   each page enough room to clear it.
   ========================================================================== */
#main > .breadcrumb:first-child { padding-top: calc(var(--header-h) + 26px); }
#main > .region-hero:first-child,
#main > .location-hero:first-child,
#main > .contact-section:first-child { padding-top: calc(var(--header-h) + 52px); }

.breadcrumb {
  align-items: center;
  padding-bottom: 4px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.breadcrumb [aria-current="page"] { color: var(--muted); }
.breadcrumb a { color: #5c6b8c; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* .region-hero was referenced in the markup but never defined anywhere. */
.region-hero {
  padding: 34px 0 54px;
  background: linear-gradient(118deg, var(--paper) 30%, #e9f0ff);
  border-bottom: 1px solid var(--line);
}
.region-hero h1 { max-width: 17ch; }
.region-hero .hero-lede { max-width: 62ch; margin-bottom: 28px; color: var(--muted); }
.region-hero .hero-actions { margin-top: 4px; }
.region-hero .illustrative-label { max-width: 62ch; }
html[data-theme=dark] .region-hero { background: linear-gradient(118deg, #101b39 30%, #182a56); }

/* The location hero had only 72px of top padding under an 88px header. */
.location-hero { padding: 36px 0 60px; }
.location-hero h1 { font-size: var(--h1); max-width: 15ch; }

/* Hero: rebalanced now that the headline is 54px rather than 107px. */
.hero { padding: calc(var(--header-h) + 44px) 0 36px; }
.hero-grid { min-height: 0; gap: 56px; }
.hero h1 { max-width: 15ch; }

/* ==========================================================================
   Brand mark. The letter "E" immediately followed by "MS Excel Experts"
   read as "EMS". Replaced with a four-cell spreadsheet glyph, which says
   the same thing without the collision.
   ========================================================================== */
.brand-mark {
  display: grid;
  place-items: stretch;   /* styles.css sets place-items:center, which collapses the cells to 0 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 28px; height: 28px;
  padding: 5px;
  border-radius: 7px;
  background: var(--blue);
}
.brand-mark i { display: block; border-radius: 1px; background: #fff; opacity: 0.55; }
.brand-mark i:first-child { opacity: 1; }
.brand { gap: 11px; font-size: 0.98rem; font-weight: 400; letter-spacing: -0.01em; }
.brand strong { font-weight: 600; }

/* .location-copy carried max-width:1000px while also being a .shell, so its
   auto margins re-centred it and the text sat ~90px right of every other
   block on the page. Let the child max-widths do the constraining instead. */
.location-copy { max-width: none; }
.location-copy h2 { max-width: 24ch; }
.location-copy > p:not(.eyebrow) { max-width: 78ch; }

/* The service grid has a 42px top margin meant to sit under a section
   heading. On pages where it is the first thing in the section that stacked
   with 96px of section padding and left a dead band. */
.location-service-grid:first-child { margin-top: 0; }

/* --- Nav ---------------------------------------------------------------- */
.main-nav { font-size: 0.86rem; }
.nav-cta { font-weight: 600; }

/* --- Prose (legal + long-form) ------------------------------------------ */
.prose { max-width: 68ch; }
.prose h2 { margin: 2.2em 0 0.5em; font-size: 1.4rem; max-width: none; }
.prose h2:first-of-type { margin-top: 0.8em; }
.prose p { margin: 0 0 1.05em; line-height: 1.75; }
.prose ul { margin: 0 0 1.2em 1.1em; line-height: 1.75; }

/* --- Sitemap ------------------------------------------------------------ */
.sitemap-h { margin-top: 3rem; margin-bottom: 1rem; }

/* --- Link lists --------------------------------------------------------- */
.city-inline-links { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 14px; font-size: 0.84rem; }
.city-inline-links a { color: var(--blue); border-bottom: 1px solid rgba(38,85,245,.3); }
.city-inline-links a:hover { border-color: currentColor; }

.location-service-card h3 a, .service-card h3 a { color: inherit; }
.location-service-card h3 a:hover, .service-card h3 a:hover { color: var(--blue); }
.capability-list a { color: inherit; }
.capability-list a:hover { color: var(--blue); }
.location-service-card { display: flex; flex-direction: column; }

/* --- Disclosure labels --------------------------------------------------- */
.illustrative-label {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
  font-style: italic;
}
.process-title .illustrative-label { color: #b9c6e2; }

/* --- Contact form ------------------------------------------------------- */
.contact-form label > .lbl { display: flex; align-items: baseline; gap: 6px; }
.contact-form .opt {
  font-style: normal; font-weight: 400; font-size: 0.66rem;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(38,85,245,.08); color: #6b7a99;
}
.contact-form label { font-size: 0.72rem; letter-spacing: 0.02em; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form [data-submit][disabled] { opacity: 0.55; cursor: progress; transform: none; }
.form-status.is-success { color: #0d8050; }
.contact-copy h1 { color: #fff; }

/* --- Compatibility aliases for classes that had no rules ---------------- */
.container { width: min(100% - 48px, 1180px); margin-inline: auto; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 53px; padding: 0 23px;
       border-radius: 999px; font-size: 0.9rem; font-weight: 600; border: 1px solid currentColor; }
.btn-primary { background: var(--blue); color: #fff; border-color: transparent; }

/* --- Accessibility ------------------------------------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .region-hero { padding: 32px 0 52px; }
  .location-hero { padding: 32px 0 56px; }
}
@media (max-width: 740px) {
  :root { --header-h: 72px; }
  .section { padding: 56px 0; }
  .intro-band, .contact-section { padding: 52px 0; }
  h1 { max-width: none; }
  h2 { max-width: none; }
  .region-hero h1, .location-hero h1, .hero h1 { max-width: none; }
  #main > .breadcrumb:first-child { padding-top: calc(var(--header-h) + 18px); }
  #main > .region-hero:first-child,
  #main > .location-hero:first-child,
  #main > .contact-section:first-child { padding-top: calc(var(--header-h) + 30px); }
  .hero { padding-top: calc(var(--header-h) + 34px); }
  .breadcrumb { font-size: 0.66rem; }
}

/* --- Site-wide intro video ---------------------------------------------- */
/* The width/height attributes are there to reserve space and avoid layout
   shift, but the height attribute becomes a presentational hint that beats
   aspect-ratio. height:auto hands control back to the ratio. */
.video-frame video { height: auto; aspect-ratio: 16 / 9; }
.video-section { border-top: 1px solid var(--line); }
.video-layout h2 { max-width: 16ch; }
.video-layout .video-note { max-width: 52ch; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.video-layout .hero-actions { margin-top: 26px; }
html[data-theme=dark] .video-section { background: #142143; }
html[data-theme=dark] .video-frame { border-color: #2a3a62; }
@media (max-width: 760px) {
  .video-layout { gap: 28px; }
  .video-layout h2 { max-width: none; }
}

/* Text alternative for the silent intro video (WCAG 2.2 SC 1.2.1). */
.video-alt { margin-top: 20px; border-top: 1px solid var(--line); }
.video-alt summary {
  padding: 14px 0; font-size: 0.86rem; font-weight: 600; color: var(--blue);
}
.video-alt summary::after { content: ' +'; }
.video-alt[open] summary::after { content: ' \2212'; }
.video-alt p { margin: 0 0 16px; max-width: 56ch; color: var(--muted); font-size: 0.9rem; line-height: 1.7; }

/* ==========================================================================
   Team
   ========================================================================== */
.team-band { padding: 54px 0; background: var(--paper); border-top: 1px solid var(--line); }
html[data-theme=dark] .team-band { background: #101b39; }
.team-band-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.team-band-copy h2 { max-width: 18ch; margin-bottom: 12px; }
.team-band-copy p { max-width: 46ch; color: var(--muted); font-size: 0.92rem; line-height: 1.7; margin-bottom: 14px; }

.team-row { display: flex; flex-wrap: wrap; gap: 26px 30px; list-style: none; margin: 0; padding: 0; }
.team-row li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; text-align: center; }
.team-row img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(16,32,74,.14);
  transition: transform .25s ease;
}
.team-row li:hover img { transform: translateY(-3px); }
html[data-theme=dark] .team-row img { border-color: #1b2a51; }
.team-row strong { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.team-row small { display: block; margin-top: 2px; font-size: 0.68rem; color: var(--muted); line-height: 1.35; }

.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px; margin-top: 42px;
}
.team-card {
  padding: 26px 22px; text-align: center; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-md, 18px);
}
html[data-theme=dark] .team-card { background: #16224a; }
.team-card img {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  margin-bottom: 16px; box-shadow: 0 8px 22px rgba(16,32,74,.16);
}
.team-card h3 { font-size: 1.02rem; margin-bottom: 4px; max-width: none; }
.team-card .team-role { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.team-card p { font-size: 0.84rem; color: var(--muted); line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
  .team-band-layout { grid-template-columns: 1fr; gap: 30px; }
  .team-band-copy h2 { max-width: none; }
}
@media (max-width: 520px) {
  .team-row { gap: 20px; justify-content: space-between; }
  .team-row li { width: 78px; }
  .team-row img { width: 68px; height: 68px; }
}

/* ==========================================================================
   Project form — budget fieldset and conditional panels
   ========================================================================== */
.budget-fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 6px; margin: 4px 0; }
.budget-fieldset legend {
  padding: 0 8px; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.contact-form label.radio {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.84rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: border-color .18s ease, background .18s ease;
}
.contact-form label.radio span { font-size: 0.84rem; }
.contact-form label.radio:hover { border-color: var(--blue); }
.contact-form label.radio:has(input:checked) { border-color: var(--blue); background: rgba(38,85,245,.07); }
.contact-form label.radio input { width: 15px; height: 15px; accent-color: var(--blue); margin: 0; }
.contact-form .conditional { margin-top: 14px; }
.contact-form .conditional[hidden] { display: none; }
.budget-note { margin: 12px 0 6px; }
.project-form fieldset { min-width: 0; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-band { padding: 48px 0; background: #0f1c3e; color: #eaf0ff; }
.pricing-band .eyebrow { color: #8fb0ff; }
.pricing-band h2 { color: #fff; max-width: 14ch; margin-bottom: 10px; }
.pricing-band-copy p { max-width: 44ch; color: #b6c4e4; font-size: 0.9rem; line-height: 1.7; margin-bottom: 12px; }
.pricing-band .text-link { color: #8fb0ff; }
.pricing-band-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center; }

.price-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 14px; list-style: none; margin: 0; padding: 0; }
.price-strip li {
  padding: 16px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.price-from { display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: .08em; text-transform: uppercase; color: #8fb0ff; }
.price-strip strong { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
.price-unit { display: block; font-size: 0.66rem; color: #9fb2d8; margin-bottom: 8px; }
.price-name { display: block; font-size: 0.78rem; font-weight: 500; color: #dae3f8; line-height: 1.35; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 20px;
}
html[data-theme=dark] .price-card { background: #16224a; }
.price-card.price-featured { border-color: var(--blue); box-shadow: 0 18px 44px rgba(38,85,245,.14); }
.price-badge {
  position: absolute; top: -11px; left: 24px; padding: 3px 12px; border-radius: 999px;
  background: var(--blue); color: #fff; font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: .06em; text-transform: uppercase;
}
.price-card h3 { font-size: 1rem; margin-bottom: 12px; max-width: none; }
.price-figure { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.price-figure span { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.price-figure strong { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; }
.price-figure small { font-size: 0.72rem; color: var(--muted); }
.price-turnaround { font-family: var(--mono); font-size: 0.68rem; color: var(--blue); margin-bottom: 14px; }
.price-best { font-size: 0.86rem; font-weight: 500; margin-bottom: 14px; line-height: 1.55; }
.price-includes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.price-includes li { display: flex; gap: 8px; font-size: 0.82rem; color: var(--muted); line-height: 1.55; }
.price-includes span { color: var(--blue); }
.price-note { font-size: 0.75rem; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
.price-card .button { margin-top: auto; align-self: flex-start; }

.pricing-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.pricing-extra > div { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
html[data-theme=dark] .pricing-extra > div { background: #101b39; }
.pricing-extra span { display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.pricing-extra strong { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.pricing-extra p { font-size: 0.84rem; color: var(--muted); line-height: 1.65; margin: 0; }

.price-fine { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: grid; gap: 8px; }
.price-fine li { font-size: 0.78rem; color: var(--muted); line-height: 1.6; padding-left: 16px; position: relative; }
.price-fine li::before { content: '\2022'; position: absolute; left: 0; color: var(--blue); }

.service-price-tag {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 9px 16px; border-radius: 999px;
  background: rgba(38,85,245,.08); font-size: 0.86rem;
}
.service-price-tag strong { font-size: 1.05rem; font-weight: 600; }
.service-price-tag span { font-size: 0.74rem; color: var(--muted); }

@media (max-width: 900px) {
  .pricing-band-layout { grid-template-columns: 1fr; gap: 28px; }
  .pricing-band h2 { max-width: none; }
  .pricing-extra { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .price-strip { grid-template-columns: 1fr 1fr; }
}

/* styles.css already renders a tick on .price-card list items via ::before,
   and the markup supplies its own. Suppress the inherited one. */
.price-includes li::before { content: none !important; }
.price-includes li { padding-left: 0; }

/* --- Hourly pricing additions ------------------------------------------ */
.price-total {
  font-family: var(--mono); font-size: 0.74rem; color: var(--muted);
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line);
}
.price-figure { margin-bottom: 6px; }
.typical-jobs { margin-top: 56px; padding-top: 46px; border-top: 1px solid var(--line); }
.typical-jobs h2 { margin-bottom: 12px; }
.typical-jobs > p { max-width: 74ch; color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 26px; }
.typical-jobs .engagement-table td:nth-child(2) { color: var(--blue); white-space: nowrap; }
.typical-jobs .engagement-table td:nth-child(3) { font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; }
.pricing-band h2 { max-width: 16ch; }

/* Method steps inside a service x city scope block. */
.method-inline { margin-top: 26px; }
.method-inline li { margin-bottom: 14px; }

/* ==========================================================================
   Working-hours chart (service-area pages)
   Palette validated with the dataviz validator in both modes:
   light #2655f5 / #1baf7a, dark #5b86ff / #199e70. Both bands are also
   direct-labelled, so identity never rests on colour alone, and a table
   view carries the same information for screen readers and print.
   ========================================================================== */
.viz-root {
  --vz-s1: #2655f5;
  --vz-s2: #1baf7a;
  --vz-ink: #4a5a7a;
  --vz-grid: #d6ddea;
}
html[data-theme=dark] .viz-root,
:root:where(:not([data-theme="light"])) .viz-root {
  --vz-s1: #5b86ff;
  --vz-s2: #199e70;
  --vz-ink: #9fb0d0;
  --vz-grid: #2b3a5e;
}
.vz-figure { margin: 26px 0 0; padding: 0; max-width: 680px; }
.vz-caption {
  margin-bottom: 16px; font-size: 0.88rem; line-height: 1.65; color: var(--muted);
}
.vz-caption strong { color: inherit; font-weight: 600; }
.vz-figure svg { display: block; overflow: visible; }
.vz-band-1 { fill: var(--vz-s1); }
.vz-band-2 { fill: var(--vz-s2); }
.vz-grid { stroke: var(--vz-grid); stroke-width: 1; }
.vz-tick, .vz-axis {
  font-family: var(--mono); font-size: 10px; fill: var(--vz-ink);
}
.vz-axis { font-size: 11px; font-weight: 500; }
.vz-inbar {
  font-family: var(--sans); font-size: 11px; font-weight: 600; fill: #fff;
}
/* Table view: available to assistive tech and print, visually redundant. */
/* Visually hidden, but a <table> ignores width:1px + overflow:hidden because
   display:table shrink-wraps to its content. Left as a table it pushed the
   page ~400px wide on mobile. display:block plus clip-path contains it. */
.vz-table {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; display: block; margin: -1px; padding: 0; border: 0;
}
@media print {
  .vz-table {
    position: static; display: table; width: auto; height: auto;
    clip: auto; clip-path: none; margin: 16px 0; white-space: normal;
  }
}
.vz-band-3 { fill: var(--vz-s1); opacity: .34; }
.vz-outbar { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--vz-ink); }
.vz-wide { max-width: 760px; }
.vz-rowlabel { font-family: var(--sans); font-size: 12px; fill: var(--vz-ink); }

/* ==========================================================================
   Team strip — faces high on every page
   ========================================================================== */
.team-strip {
  padding: 30px 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
html[data-theme=dark] .team-strip { background: #16224a; }
.tsp-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
}

.tsp-faces { display: flex; list-style: none; margin: 0; padding: 0 0 0 14px; }
.tsp-faces li { position: relative; margin-left: -14px; }
.tsp-faces img {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: 0 4px 14px rgba(16,32,74,.18);
  transition: transform .22s ease;
}
html[data-theme=dark] .tsp-faces img { border-color: #16224a; }
.tsp-faces li:hover { z-index: 3; }
.tsp-faces li:hover img { transform: translateY(-5px) scale(1.07); }

/* Name on hover/focus — progressive enhancement, never the only source. */
.tsp-name {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px;
  background: var(--navy); color: #fff; white-space: nowrap;
  font-size: .72rem; font-weight: 600; line-height: 1.3;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  z-index: 5;
}
.tsp-name small { font-weight: 400; opacity: .78; font-size: .66rem; }
.tsp-faces li:hover .tsp-name, .tsp-faces li:focus-within .tsp-name { opacity: 1; }

.tsp-copy h2 { font-size: 1.12rem; margin: 0 0 5px; max-width: none; letter-spacing: -.012em; }
.tsp-copy p { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--muted); max-width: 62ch; }
.tsp-copy a { color: var(--blue); font-weight: 600; }

.tsp-badges { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.tsp-badges li { display: grid; gap: 1px; text-align: right; }
.tsp-badges b { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.tsp-badges span { font-size: .71rem; color: var(--muted); line-height: 1.3; }

@media (max-width: 1080px) { .tsp-badges { display: none; } }
@media (max-width: 760px) {
  .tsp-layout { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .tsp-faces img { width: 60px; height: 60px; border-width: 3px; }
  .tsp-copy h2 { font-size: 1rem; }
  .tsp-copy p { font-size: .84rem; }
}
@media (max-width: 460px) {
  .tsp-layout { grid-template-columns: 1fr; gap: 12px; }
}

/* --- Additional charts -------------------------------------------------- */
/* Ordered sequential ramp for the phase breakdown: one hue, light to dark. */
.vz-step-1 { fill: #a9c2fb; }
.vz-step-2 { fill: #7ba1f8; }
.vz-step-3 { fill: #2655f5; }
.vz-step-4 { fill: #1c41bd; }
.vz-step-5 { fill: #142e86; }
html[data-theme=dark] .vz-step-1 { fill: #c3d4fc; }
html[data-theme=dark] .vz-step-2 { fill: #93b2f9; }
html[data-theme=dark] .vz-step-3 { fill: #5b86ff; }
html[data-theme=dark] .vz-step-4 { fill: #3a63d8; }
html[data-theme=dark] .vz-step-5 { fill: #2a49a6; }
.vz-track { fill: var(--vz-grid); opacity: .5; }

.vz-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 18px; list-style: none; margin: 18px 0 0; padding: 0;
}
.vz-legend li { display: grid; gap: 2px; }
.vz-legend b { font-size: .8rem; font-weight: 600; }
.vz-legend span { font-size: .75rem; line-height: 1.5; color: var(--muted); }

/* Charts on dark section backgrounds need light ink. */
.process-section .vz-caption,
.process-section .vz-legend span { color: #b9c6e2; }
.process-section .vz-legend b,
.process-section .vz-caption strong { color: #fff; }
.process-section .viz-root { --vz-ink: #9fb0d0; --vz-grid: #2b3a5e; }
.process-section .vz-figure { margin-top: 36px; }

.svc-chart-wrap { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
/* Phase labels: dark ink on the two pale steps, white on the deep ones. */
.vz-inbar.vz-on-light { fill: #16244a; }
.vz-inbar.vz-on-dark { fill: #fff; }

/* ==========================================================================
   Post-a-project page
   ========================================================================== */
.contact-copy h1 { color: #fff; max-width: 14ch; }
.form-lead { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-lead b { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 3px; }
.form-lead span { font-size: .82rem; color: var(--muted); line-height: 1.6; }

.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; list-style: none; margin: 26px 0 0; padding: 0; }
.trust-row li { display: flex; gap: 11px; align-items: flex-start; }
.trust-ico {
  display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(255,255,255,.12); color: #9fc2ff; font-size: .8rem;
}
.trust-row b { display: block; font-size: .86rem; font-weight: 600; color: #fff; line-height: 1.35; }
.trust-row small { display: block; font-size: .74rem; color: #a9b8d6; line-height: 1.45; }

.next-steps { margin-top: 32px; }
.next-steps h2 { font-size: 1rem; color: #fff; margin-bottom: 14px; max-width: none; }
.next-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.next-steps li { display: flex; gap: 13px; align-items: flex-start; }
.next-steps li > span {
  display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--blue); color: #fff;
  font-family: var(--mono); font-size: .74rem;
}
.next-steps b { display: block; font-size: .88rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.next-steps p { margin: 0; font-size: .79rem; line-height: 1.6; color: #b4c3de; }

/* Same component on a light background (thank-you page). */
.next-steps-light b { color: var(--ink); }
.next-steps-light p { color: var(--muted); font-size: .86rem; }

.contact-form .req { color: #d14b5f; font-style: normal; margin-left: 1px; }
html[data-theme=dark] .contact-form .req { color: #ff8a9c; }
.budget-fieldset legend .req { margin-left: 2px; }

.submit-xl { width: 100%; min-height: 56px; font-size: 1rem; margin-top: 4px; }
.submit-xl svg { flex: 0 0 auto; }
.form-next {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 10px;
  background: rgba(38,85,245,.07); color: #35497a;
  font-size: .78rem; line-height: 1.55; text-align: center;
}
html[data-theme=dark] .form-next { background: rgba(91,134,255,.12); color: #bcd0ff; }

@media (max-width: 900px) { .trust-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Service imagery and keyword blocks
   ========================================================================== */

/* --- Photographic hero on four service pages --- */
.svc-shot { margin: 30px 0 0; }
.svc-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(16, 32, 74, .10);
}
.svc-shot figcaption {
  margin-top: 12px; font-size: .82rem; line-height: 1.6;
  color: var(--muted); max-width: 62ch;
}

/* --- VBA editor mock. Dark in both themes, as a code window should be. --- */
.code-figure svg { border-radius: 10px; }
.cw-bg { fill: #0e1a36; }
.cw-bar { fill: #1a2a4f; }
.cw-d1 { fill: #e06c75; } .cw-d2 { fill: #e5c07b; } .cw-d3 { fill: #6fd3a8; }
.cw-title { fill: #8e9dbb; font-family: var(--mono); font-size: 11px; }
.cw-line { font-family: var(--mono); font-size: 12.5px; }
.cw-kw { fill: #7aa2ff; }    /* keywords */
.cw-fn { fill: #6fd3a8; }    /* procedure names */
.cw-st { fill: #e9b872; }    /* strings */
.cw-cm { fill: #7f8ca8; }    /* comments */
.cw-p  { fill: #c8d4ea; }    /* everything else */

/* --- Workbook audit grid --- */
.au-ok { fill: var(--vz-grid); opacity: .45; }
.au-hard { fill: #e8664d; } .au-ref { fill: #d9534f; }
.au-circ { fill: #e0963c; } .au-man { fill: #c86fb0; }
html[data-theme=dark] .au-hard { fill: #ff8a6e; }
html[data-theme=dark] .au-ref { fill: #ff7d78; }
html[data-theme=dark] .au-circ { fill: #f0ad5e; }
html[data-theme=dark] .au-man { fill: #dd92cb; }
.au-mark { fill: #fff; font-family: var(--mono); font-size: 13px; font-weight: 700; }
html[data-theme=dark] .au-mark { fill: #10182e; }
.au-head { fill: var(--vz-ink); font-family: var(--mono); font-size: 11px; }
.au-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px 20px; list-style: none; margin: 16px 0 0; padding: 0;
}
.au-legend li { display: flex; gap: 9px; align-items: center; font-size: .78rem; color: var(--muted); }
.au-sw { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 13px; }

/* --- Google Sheets access layers --- */
.sl-l1 { fill: #2655f5; } .sl-l2 { fill: #4f78f7; } .sl-l3 { fill: #9bb6fb; }
html[data-theme=dark] .sl-l1 { fill: #3a63d8; }
html[data-theme=dark] .sl-l2 { fill: #5b86ff; }
html[data-theme=dark] .sl-l3 { fill: #8fb0ff; }
.sl-name { font-size: 14px; font-weight: 600; }
.sl-what { font-size: 11.5px; }
.sl-who { font-family: var(--mono); font-size: 11px; }
/* Ink is chosen per band: the pale top layer needs dark text, the two
   saturated bands below it need white. */
.sl-lt { fill: #fff; } .sl-lt2 { fill: rgba(255,255,255,.86); }
.sl-dk { fill: #15244a; } .sl-dk2 { fill: rgba(21,36,74,.78); }

/* --- Data cleaning before / after --- */
.cl-title { fill: var(--vz-ink); font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.cl-bad { fill: #e8664d; opacity: .14; stroke: #e8664d; stroke-opacity: .35; }
.cl-good { fill: #1baf7a; opacity: .14; stroke: #1baf7a; stroke-opacity: .4; }
.cl-cell { fill: var(--ink); font-family: var(--mono); font-size: 11px; }
html[data-theme=dark] .cl-cell { fill: #dbe4f7; }
.cl-arrow { stroke: var(--vz-ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- "What people call this work" --- */
.alt-names { background: var(--paper); border-block: 1px solid var(--line); }
html[data-theme=dark] .alt-names { background: #101b39; }
.alt-names .challenge-grid article { background: var(--white); }
html[data-theme=dark] .alt-names .challenge-grid article { background: #17244a; }

/* --- Related searches --- */
.related-searches { padding: 56px 0; border-top: 1px solid var(--line); }
.search-chips {
  display: flex; flex-wrap: wrap; gap: 9px;
  list-style: none; margin: 16px 0 0; padding: 0;
}
.search-chips li {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: .8rem; color: var(--muted);
}
html[data-theme=dark] .search-chips li { background: #15224a; }
.svc-city-heading { margin-top: 42px; padding-top: 32px; border-top: 1px solid var(--line); }
.svc-city-heading h3 { font-size: var(--h2); letter-spacing: -.018em; }
/* The legend chips are HTML <i>, not SVG, so `fill` does nothing for them —
   they need `background`. Same four colours, declared twice by necessity. */
.au-sw.au-hard { background: #e8664d; } .au-sw.au-ref { background: #d9534f; }
.au-sw.au-circ { background: #e0963c; } .au-sw.au-man { background: #c86fb0; }
html[data-theme=dark] .au-sw.au-hard { background: #ff8a6e; }
html[data-theme=dark] .au-sw.au-ref { background: #ff7d78; }
html[data-theme=dark] .au-sw.au-circ { background: #f0ad5e; }
html[data-theme=dark] .au-sw.au-man { background: #dd92cb; }

/* --- Freelancer comparison cards --- */
.fl-grid article { display: flex; flex-direction: column; }
.fl-kicker {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 6px;
}
html[data-theme=dark] .fl-kicker { color: #8fb0ff; }
.fl-grid h3 { margin-bottom: 12px; }
.fl-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fl-grid li {
  position: relative; padding-left: 16px;
  font-size: .82rem; line-height: 1.6; color: var(--muted);
}
.fl-grid li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .5;
}
/* Four options compare best 2x2; in the inherited 3-col grid the fourth
   card orphaned onto a row of its own. */
.fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .fl-grid { grid-template-columns: 1fr; } }

/* --- City: local vs remote comparison --- */
.local-compare { background: var(--paper); border-block: 1px solid var(--line); }
html[data-theme=dark] .local-compare { background: #101b39; }
.lc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; }
.lc-head {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  padding-bottom: 11px; margin-bottom: 18px; border-bottom: 2px solid;
  max-width: none;
}
.lc-head-for { color: #1a7f5a; border-color: #1baf7a; }
.lc-head-against { color: #2655f5; border-color: #2655f5; }
html[data-theme=dark] .lc-head-for { color: #5fd3a6; border-color: #199e70; }
html[data-theme=dark] .lc-head-against { color: #8fb0ff; border-color: #5b86ff; }
.lc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.lc-list h3 { font-size: .95rem; margin-bottom: 5px; }
.lc-list p { font-size: .84rem; line-height: 1.65; color: var(--muted); margin: 0; }
@media (max-width: 760px) { .lc-grid { grid-template-columns: 1fr; gap: 30px; } }

/* Hiring resources and real client project results. */
.expert-resource {margin:28px 0 0;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--muted);font-size:.9rem;line-height:1.7;}
.expert-resource a {color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.client-results {grid-template-columns:repeat(2,minmax(0,1fr));}
.client-results article {min-height:170px;}
.client-results h3 {margin-top:0;}
.client-rating {font-weight:600;color:var(--blue);}
@media(max-width:620px){.client-results{grid-template-columns:1fr;}}