/* ==========================================================================
   WhizzIT — Global stylesheet
   One file for every page. Page variation comes from body classes
   (.page--*) and component modifiers (.block--variant), never from
   page-specific stylesheets.

   DESIGN SYSTEM
   --------------------------------------------------------------------------
   Colour      Paper #FFFFFF · Mist #F6F8FB · Ink #0E1116 · Heading #0A1628
               Signal #1F6BFF (primary action) · Navy #0A2F7A (secondary
               action, active tabs, ticks) · Night #0A0B0D (footer).
               Heroes and .section--ink bands are dark surfaces inside the
               page; they re-declare the colour tokens (see section 28).
               Status: success/warning/error. Blue is for action and
               emphasis, not for every icon and heading.
               Brand orange is the logo's own gradient, #EC7C20 into
               #CB3829 (--brand-*): accents and details (eyebrow marks,
               ticks, icons, glows, lit edges, the closing CTA panel),
               never buttons or text; actions and type stay blue/ink.
               --brand-ink is ember on light surfaces, orange on dark.
   Type        Urbanist 400–800 — headings (h1/h2 at 800, tight tracking)
               and body. Figtree 500–700 — buttons, nav and small UI labels.
               Fluid scale via clamp(); see --fs-* tokens.
   Actions     Squared buttons (--radius-sm): blue primary, heading-ink
               outline secondary.
   Spacing     4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 (--space-1…10)
   Containers  wide 1440 · main 1240 · copy 760 · gutter clamp(20px,4vw,64px)
   Radii       sm 8 · md 14 · lg 20 · xl 28 · pill
   Shadows     --shadow-xs … --shadow-lg (cool-tinted, low opacity)
   Motion      --dur-fast 180ms · --dur 280ms · --dur-slow 500ms, --ease-out
   Breakpoints 480 · 768 · 1024 · 1100 (desktop nav) · 1280 · 1600
               Mobile-first: base styles target small screens.

   CONTENTS
    1. Custom properties        9. Cards
    2. Reset                   10. Forms
    3. Base / typography       11. Sections & heroes
    4. Accessibility helpers   12. Page modifiers & visuals
    5. Layout utilities        13. Footer
    6. Header / navigation     14. Animation
    7. Buttons                 15. Responsive
    8. Shared components       16. Reduced motion
                               17. Home (sky design)
                               …
                               28. Dark surfaces
                               30. Bold redesign (home layout, inner-page rhythm)
   ========================================================================== */


/* 1. CUSTOM PROPERTIES
   ========================================================================== */
:root {
  --font-heading: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-display: clamp(2.6rem, 1.55rem + 4.3vw, 5rem);
  --fs-h1: clamp(2.35rem, 1.55rem + 3.2vw, 4.25rem);
  --fs-h2: clamp(1.95rem, 1.4rem + 2.1vw, 3.25rem);
  --fs-h3: clamp(1.45rem, 1.25rem + 0.85vw, 2.125rem);
  --fs-h4: clamp(1.2rem, 1.12rem + 0.35vw, 1.5rem);
  --fs-h5: 1.125rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;
  --lh-tight: 1.06;
  --lh-heading: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --tracking-tight: -0.032em;
  --tracking-heading: -0.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad: 64px;
  --gutter: clamp(20px, 4vw, 64px);
  --container-wide: 1440px;
  --container-main: 1240px;
  --container-copy: 760px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --header-h: 72px;
  --header-top-h: 42px;
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Light surface palette.
   --color-white is the raised card surface and flips dark in the dark theme, so
   text on a coloured or dark fill uses --color-always-white instead.
   --color-navy is a text colour and lightens in dark; --color-navy-fill is the
   solid navy that carries white text. --color-primary-ink is the brand blue at a
   shade that passes AA as small text. */
:root {
  --color-white: #ffffff;
  --color-always-white: #ffffff;
  --color-surface: #f6f8fb;
  --color-surface-2: #eef2f7;
  --color-surface-blue: #eaf2fe;
  --color-text: #0e1116;
  --color-text-soft: #262d38;
  --color-text-muted: #5b6573;
  --color-heading: #0a1628;
  --color-border: #e1e5eb;
  --color-border-soft: #eceff3;
  --color-primary: #1f6bff;
  --color-primary-ink: #1560eb;
  --color-primary-dark: #0b55e0;
  --color-primary-light: #e4eeff;
  --brand-orange: #ec7c20;
  --brand-ember: #cb3829;
  --brand-flame: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-ember) 100%);
  --brand-ink: var(--brand-ember);
  --color-navy: #0a2f7a;
  --color-navy-fill: #0a2f7a;
  --color-navy-dark: #072260;
  --color-slate: #45556c;
  --color-night: #0a0b0d;
  --color-accent: #0fb5cf;
  --color-accent-soft: #daf6fa;
  --color-accent-on-dark: #62e2f3;
  --color-violet: #6d5df6;
  --color-page: #ffffff;
  --surface-card: #f7f8fa;
  --color-border-hover: #cddcf8;
  --glass: rgba(255, 255, 255, 0.86);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --panel-tint: linear-gradient(150deg, #f4f7fc 0%, #eaf1fb 60%, #e3ecfa 100%);
  --panel-tint-soft: linear-gradient(160deg, #eef3fc, #e2ebfa);
  --photo-filter: none;
  --logo-plate: transparent;
  --logo-plate-pad: 0;
  --tile-gloss: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  --tile-ring: inset 0 0 0 1px rgba(15, 27, 45, 0.04);
  --color-primary-fill: #1f6bff;
  --color-primary-fill-hover: #0b55e0;
  --icon-tile-neutral: var(--color-primary-light);
  --num-stroke: #c2d2ee;
  --quote-mark: rgba(236, 124, 32, 0.28);
  --bar-track: #ececee;
  --svc-icon-border: #a9c4f5;
  --svc-icon-bg: radial-gradient(circle at 50% 35%, #ffffff, #e5eefc);
  --color-navy-950: #06101f;
  --color-navy-900: #0a1628;
  --color-navy-800: #12233b;
  --color-navy-700: #1d3252;
  --color-on-dark: #e8eef7;
  --color-on-dark-muted: #a3b1c6;
  --color-line-dark: rgba(255, 255, 255, 0.1);
  --color-success: #14966f;
  --color-success-soft: #dcf5ec;
  --color-warning: #b87606;
  --color-warning-soft: #fff3dc;
  --color-error: #c93c3c;
  --color-error-soft: #fde8e8;
  --tone-support: #1f6bff;
  --tone-support-soft: #e3ebff;
  --tone-cloud: #0a93ab;
  --tone-cloud-soft: #daf6fa;
  --tone-cyber: #5a4be8;
  --tone-cyber-soft: #ebe8ff;
  --tone-network: #0d8a78;
  --tone-network-soft: #dcf4ef;
  --tone-projects: #b86a06;
  --tone-projects-soft: #fdf0dc;
  --gradient-signal: linear-gradient(135deg, #1f6bff 0%, #0fb5cf 100%);
  --gradient-deep: linear-gradient(160deg, #0a1628 0%, #12233b 55%, #1a3a7a 100%);
  --gradient-glow: radial-gradient(closest-side, rgba(31, 107, 255, 0.18), rgba(31, 107, 255, 0));
  --gradient-glow-cyan: radial-gradient(closest-side, rgba(15, 181, 207, 0.2), rgba(15, 181, 207, 0));
  --shadow-xs: 0 1px 2px rgba(15, 27, 45, 0.06);
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.04), 0 4px 12px -2px rgba(15, 27, 45, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 27, 45, 0.04), 0 12px 32px -8px rgba(15, 27, 45, 0.12);
  --shadow-lg: 0 4px 8px rgba(15, 27, 45, 0.04), 0 28px 64px -16px rgba(15, 27, 45, 0.2);
  --shadow-focus: 0 0 0 3px rgba(31, 107, 255, 0.35);
}


/* 2. RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

[hidden] {
  display: none !important;
}


/* 3. BASE / TYPOGRAPHY
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-soft);
  background: var(--color-page);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.display {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

/* Display and section headings are set heavy and tight: the weight carries the
   page, so the copy around them can stay quiet. */
.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1,
.h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h2,
.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
}

h3,
.h3 {
  font-size: var(--fs-h3);
}

h4,
.h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

h5,
.h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-primary-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-primary-dark);
}

strong {
  font-weight: 600;
  color: var(--color-text);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.small {
  font-size: var(--fs-small);
}

.muted {
  color: var(--color-text-muted);
}

/* Eyebrow: sentence case, a short connector glyph instead of tracked caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary-ink);
}

/* The mark before every eyebrow is the one place orange shows on every page. */
.eyebrow::before {
  content: "";
  width: 22px;
  height: 8px;
  flex: none;
  color: var(--brand-orange);
  background:
    radial-gradient(circle at 4px 4px, currentColor 3px, transparent 3.5px),
    radial-gradient(circle at 18px 4px, transparent 2px, currentColor 2.5px, currentColor 3.5px, transparent 4px),
    linear-gradient(currentColor, currentColor) 6px 3.5px / 10px 1px no-repeat;
}

/* Rich text — articles and informational pages */
.prose {
  max-width: var(--container-copy);
  font-size: 1.125rem;
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1.25em;
}

.prose h2 {
  margin-top: 2em;
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.125rem);
}

.prose h3 {
  margin-top: 1.75em;
  font-size: var(--fs-h4);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 0.75em;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose li::marker {
  color: var(--color-primary-ink);
}

.prose figure {
  margin-block: 2em;
}

.prose figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}


/* 4. ACCESSIBILITY HELPERS
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1000;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-navy-900);
  color: var(--color-always-white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-always-white);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.hero--cyber :focus-visible {
  outline-color: var(--color-accent-on-dark);
}

::selection {
  background: rgba(236, 124, 32, 0.24);
  color: var(--color-text);
}


/* 5. LAYOUT UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container-main) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

.container--copy {
  max-width: calc(var(--container-copy) + var(--gutter) * 2);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack--lg > * + * {
  margin-top: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.split > *,
.hero__grid > *,
.grid > *,
.faq > *,
.people-grid > * {
  min-width: 0;
}

.split--top {
  align-items: start;
}

.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }


/* 6. HEADER / NAVIGATION
   ========================================================================== */

/* Utility bar — existing customers get a direct route to support */
.utility-bar {
  display: none;
  position: relative;
  z-index: 101;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--utility-h);
  gap: var(--space-5);
}

.utility-bar a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
}

.utility-bar a:hover {
  color: var(--color-primary-ink);
}

.utility-bar svg {
  width: 15px;
  height: 15px;
}

.utility-bar__support {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.utility-bar__support a {
  color: var(--color-navy);
}

.utility-bar__contact {
  display: flex;
  gap: var(--space-5);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.site-header.is-scrolled {
  background: var(--glass-strong);
  border-bottom-color: var(--color-border-soft);
  box-shadow: 0 6px 24px -18px rgba(15, 27, 45, 0.35);
}

/* The bar keeps one height. It used to shrink once the page scrolled, which
   moved everything below it by a few pixels mid-scroll. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
}

.header-sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--color-text);
  text-decoration: none;
}

.brand svg {
  height: 30px;
  width: auto;
}

.brand:hover {
  color: var(--color-text);
}

.primary-nav {
  display: none;
  margin-inline: auto;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.primary-nav__trigger,
.primary-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

/* Current-section marker: a short rule that grows out from the centre, so the
   active item reads without the heavier pill the quick strip used to need. */
.primary-nav__trigger::after,
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-flame);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}

.primary-nav__trigger svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease-out);
}

.primary-nav__trigger:hover,
.primary-nav__link:hover,
.primary-nav__trigger[aria-expanded="true"] {
  background: var(--color-surface);
  color: var(--color-text);
}

.primary-nav__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.primary-nav__item.is-current > .primary-nav__trigger,
.primary-nav__item.is-current > .primary-nav__link,
.primary-nav__link[aria-current="page"] {
  color: var(--color-navy);
}

.primary-nav__item.is-current > .primary-nav__trigger::after,
.primary-nav__item.is-current > .primary-nav__link::after,
.primary-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mega entries: the label links to the overview page and the chevron beside it
   opens the panel. The item carries the hover pill so the pair reads as one. */
.primary-nav__item--mega {
  display: flex;
  align-items: center;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast);
}

.primary-nav__item--mega:hover,
.primary-nav__item--mega.is-open {
  background: var(--color-surface);
}

.primary-nav__item--mega > .primary-nav__trigger {
  padding-right: 2px;
  background: none;
}

.primary-nav__item--mega > .primary-nav__trigger::after {
  right: 2px;
}

.primary-nav__caret {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast);
}

.primary-nav__caret:hover {
  color: var(--color-text);
}

.primary-nav__caret svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.primary-nav__caret[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.site-header__actions .site-header__cta {
  display: none;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
}

.menu-toggle svg {
  width: 18px;
  height: 18px;
}

.menu-fallback {
  display: none;
}

.no-js .menu-toggle {
  display: none;
}

.no-js .menu-fallback {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 600;
}

/* Mega menu panel */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 30px 60px -30px rgba(15, 27, 45, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.995);
  transform-origin: top center;
  filter: blur(3px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out),
    visibility 0s linear var(--dur);
}

.mega.is-open,
.no-js .primary-nav__item:hover > .mega,
.no-js .primary-nav__item:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: 0s;
}

.mega__inner {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-7);
}

.mega__inner--services,
.mega__inner--industries {
  grid-template-columns: 1.5fr 1fr 0.95fr;
}

.mega__inner--compact {
  grid-template-columns: repeat(3, 1fr) 1.1fr;
}

.mega__heading {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.mega-links {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.mega-links--two {
  grid-template-columns: 1fr 1fr;
}

.mega-link {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color var(--dur-fast);
}

.mega-link:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.mega-link__title {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.mega-link__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.mega-link--plain {
  padding-block: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.mega-link--plain svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-text-muted);
}

.mega__inner--compact .mega-feature {
  grid-column: -2 / -1;
}

.mega-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gradient-deep);
  color: var(--color-on-dark-muted);
  position: relative;
  overflow: hidden;
}

.mega-feature::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  background: var(--gradient-glow-cyan);
  pointer-events: none;
}

.mega-feature__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-always-white);
}

.mega-feature p {
  font-size: var(--fs-small);
}

.mega-feature .btn {
  margin-top: auto;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

/* Mobile navigation drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  transition: visibility 0s linear var(--dur);
}

.mobile-nav.is-open {
  visibility: visible;
  transition: none; /* visible immediately so focus can move into the panel */
}

.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 31, 0.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.mobile-nav__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 100%;
  height: 100dvh;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
}

.mobile-nav.is-open .mobile-nav__backdrop {
  opacity: 1;
}

.mobile-nav.is-open .mobile-nav__panel {
  transform: none;
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--color-border-soft);
  flex: none;
}

.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.mobile-nav__close svg {
  width: 20px;
  height: 20px;
}

.mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--gutter) var(--space-6);
}

.mobile-nav__support {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-4) var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-blue);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-small);
}

.mobile-nav__support strong {
  display: block;
  font-size: 1rem;
}

.mobile-nav__support svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--color-primary-ink);
}

.mobile-nav__list {
  list-style: none;
  padding: 0;
}

.mobile-nav__list > li {
  border-bottom: 1px solid var(--color-border-soft);
}

.mobile-nav__toggle,
.mobile-nav__direct,
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
}

.mobile-nav__toggle svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease-out);
}

.mobile-nav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-nav__sub {
  padding-bottom: var(--space-4);
}

.mobile-nav__group-title {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.mobile-nav__sub ul {
  list-style: none;
  padding: 0;
}

.mobile-nav__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text-soft);
  text-decoration: none;
  font-weight: 500;
}

.mobile-nav__sub a[aria-current="page"] {
  color: var(--color-primary-ink);
}

.mobile-nav__foot {
  flex: none;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border-soft);
}

.mobile-nav__foot .btn {
  width: 100%;
}

body.nav-locked {
  overflow: hidden;
}


/* 7. BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-always-white);
  --btn-border: transparent;
  --btn-bg-hover: var(--color-primary-dark);
  --btn-fg-hover: var(--btn-fg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn .btn__arrow {
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* Secondary is an outline in the heading ink, filling solid on hover. It reads as
   a real second action next to the blue one rather than a faint white pill. */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-heading);
  --btn-border: var(--color-heading);
  --btn-bg-hover: var(--color-heading);
  --btn-fg-hover: var(--color-page);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-bg-hover: var(--color-surface);
  padding-inline: var(--space-4);
}

.btn--light {
  --btn-bg: var(--color-always-white);
  --btn-fg: #0a1628;
  --btn-bg-hover: #dde8fb;
}

.btn--dark {
  --btn-bg: var(--color-navy-900);
  --btn-fg: var(--color-always-white);
  --btn-bg-hover: var(--color-navy-700);
}

.btn--navy {
  --btn-bg: var(--color-navy-fill);
  --btn-fg: var(--color-always-white);
  --btn-bg-hover: var(--color-navy-dark);
}

.btn--block {
  width: 100%;
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--color-always-white);
  --btn-border: rgba(255, 255, 255, 0.28);
  --btn-bg-hover: rgba(255, 255, 255, 0.08);
}

.btn--icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.btn--sm {
  min-height: 40px;
  padding-inline: var(--space-4);
  font-size: var(--fs-small);
}

.btn--lg {
  min-height: 56px;
  padding-inline: var(--space-6);
  font-size: 1rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Text link with animated arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-primary-ink);
  text-decoration: none;
}

.text-link svg {
  width: 17px;
  height: 17px;
  transition: transform var(--dur) var(--ease-out);
}

.text-link:hover svg {
  transform: translateX(3px);
}

.text-link span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease-out);
}

.text-link:hover span {
  background-size: 100% 1px;
}

.section--dark .text-link,
.hero--cyber .text-link {
  color: var(--color-accent-on-dark);
}


/* 8. SHARED COMPONENTS
   ========================================================================== */

/* Section heading block */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-8);
}

.section-head h2 + p,
.section-head h2 + .lead {
  margin-top: var(--space-4);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lead {
  margin-inline: auto;
}

.section-head--split {
  display: grid;
  gap: var(--space-5);
  max-width: none;
  align-items: end;
}

.section-head--split .lead {
  margin: 0;
}

/* Icon tile */
.icon-tile {
  --tile-fg: var(--color-primary);
  --tile-bg: var(--color-primary-light);
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  color: var(--tile-fg);
  background:
    var(--tile-gloss),
    var(--tile-bg);
  box-shadow: var(--tile-ring);
}

.icon-tile svg {
  width: 22px;
  height: 22px;
}

.icon-tile--sm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.icon-tile--sm svg {
  width: 18px;
  height: 18px;
}

.icon-tile--lg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.icon-tile--lg svg {
  width: 26px;
  height: 26px;
}

.icon-tile--neutral { --tile-fg: var(--color-text); --tile-bg: var(--color-surface-2); }
.icon-tile--dark { --tile-fg: var(--color-accent-on-dark); --tile-bg: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--color-line-dark); }

.tone-support { --tile-fg: var(--tone-support); --tile-bg: var(--tone-support-soft); --tone: var(--tone-support); }
.tone-cloud { --tile-fg: var(--tone-cloud); --tile-bg: var(--tone-cloud-soft); --tone: var(--tone-cloud); }
.tone-cyber { --tile-fg: var(--tone-cyber); --tile-bg: var(--tone-cyber-soft); --tone: var(--tone-cyber); }
.tone-network { --tile-fg: var(--tone-network); --tile-bg: var(--tone-network-soft); --tone: var(--tone-network); }
.tone-projects { --tile-fg: var(--tone-projects); --tile-bg: var(--tone-projects-soft); --tone: var(--tone-projects); }

/* Tags / chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-soft);
  white-space: nowrap;
}

.tag--blue {
  background: var(--color-primary-light);
  border-color: transparent;
  color: var(--color-primary-dark);
}

.tag--success {
  background: var(--color-success-soft);
  border-color: transparent;
  color: #0c6b4f;
}

.tag--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-line-dark);
  color: var(--color-on-dark);
}

.tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Placeholder marker — anything unverified is visibly flagged */
.placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: #8a5500;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.placeholder-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warning);
}

.ph {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--color-warning-soft);
  color: #8a5500;
  font-weight: 600;
}

.section--dark .ph,
.site-footer .ph,
.hero--cyber .ph {
  background: rgba(255, 190, 80, 0.14);
  color: #ffcf7a;
}

/* Checklist with custom bullets */
.check-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.check-list li {
  position: relative;
  padding-left: 32px;
  color: var(--color-text-soft);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cb3829' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    rgba(236, 124, 32, 0.14);
}

.check-list--two {
  grid-template-columns: 1fr;
}

.section--dark .check-list li,
.hero--cyber .check-list li {
  color: var(--color-on-dark);
}

.section--dark .check-list li::before,
.hero--cyber .check-list li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ec7c20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    rgba(236, 124, 32, 0.14);
}

/* Feature / icon block */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature__title {
  margin-top: var(--space-2);
  font-size: var(--fs-h5);
}

.feature p {
  font-size: 0.96875rem;
  color: var(--color-text-muted);
}

.feature--row {
  flex-direction: row;
  gap: var(--space-4);
}

.feature--row .feature__title {
  margin-top: 0;
}

.feature-grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
}

.section--dark .feature p,
.hero--cyber .feature p {
  color: var(--color-on-dark-muted);
}

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: var(--space-6);
  font-size: var(--fs-small);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-primary-ink);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
}

.hero--cyber .breadcrumbs li,
.hero--cyber .breadcrumbs a {
  color: var(--color-on-dark-muted);
}

.hero--cyber .breadcrumbs [aria-current="page"] {
  color: var(--color-always-white);
}

/* Rating */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: #f2a917;
}

.stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

/* Trust strip */
.trust-strip {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--color-border-soft);
}

.trust-strip__label {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 28ch;
}

/* Logo wall — placeholder tiles hold space until real logos arrive */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.logo-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 1.25;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}

.logo-tile img {
  max-height: 36px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dur), opacity var(--dur);
}

.logo-tile:hover img {
  filter: none;
  opacity: 1;
}

.logo-tile__mark {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}

.logo-tile__mark::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--color-surface-2);
}

.logo-wall--bare .logo-tile {
  border-style: solid;
  border-color: var(--color-border-soft);
  background: var(--color-white);
}

.section--dark .logo-tile {
  border-color: var(--color-line-dark);
  color: var(--color-on-dark-muted);
}

.section--dark .logo-tile__mark::before {
  background: rgba(255, 255, 255, 0.08);
}

/* Accreditation badges */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.cert-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-small);
}

.cert-badge__seal {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}

.cert-badge__seal svg {
  width: 20px;
  height: 20px;
}

.cert-badge strong {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.cert-badge span {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.section--dark .cert-badge,
.hero--cyber .cert-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-line-dark);
  box-shadow: none;
}

.section--dark .cert-badge strong,
.hero--cyber .cert-badge strong {
  color: var(--color-always-white);
}

.section--dark .cert-badge span,
.hero--cyber .cert-badge span {
  color: var(--color-on-dark-muted);
}

.section--dark .cert-badge__seal,
.hero--cyber .cert-badge__seal {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-accent-on-dark);
}

/* Statistics */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.stat__value.is-placeholder {
  color: var(--color-text-muted);
  opacity: 0.55;
}

.stat__label {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.section--dark .stat {
  border-top-color: var(--color-line-dark);
}

.section--dark .stat__value {
  color: var(--color-always-white);
}

.section--dark .stat__value.is-placeholder {
  color: var(--color-on-dark-muted);
}

.section--dark .stat__label {
  color: var(--color-on-dark-muted);
}

/* Process steps — used only where content is a genuine sequence */
.steps {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.step {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-primary-ink);
}

.step h3 {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-2);
}

.step p {
  font-size: 0.96875rem;
  color: var(--color-text-muted);
}

/* Timeline variant: steps connected by a route line */
.steps--timeline {
  gap: 0;
}

.steps--timeline .step {
  padding: 0 0 var(--space-7) 64px;
  border: 0;
  border-radius: 0;
  background: none;
}

.steps--timeline .step::before {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  background: var(--color-white);
  z-index: 1;
}

.steps--timeline .step::after {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--color-primary), var(--color-border));
}

.steps--timeline .step:last-child {
  padding-bottom: 0;
}

.steps--timeline .step:last-child::after {
  display: none;
}

.section--dark .step {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--color-line-dark);
}

.section--dark .step::before {
  background: var(--color-navy-800);
  border-color: var(--color-line-dark);
  color: var(--color-accent-on-dark);
}

.section--dark .step h3 {
  color: var(--color-always-white);
}

.section--dark .step p {
  color: var(--color-on-dark-muted);
}

/* FAQ — native <details>, works without JavaScript */
.faq {
  display: grid;
  gap: var(--space-7);
}

.faq__list {
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(var(--color-text), var(--color-text)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--color-text), var(--color-text)) center / 1.5px 12px no-repeat,
    var(--color-surface);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur);
}

.faq-item[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--color-primary-light);
}

.faq-item summary:hover {
  color: var(--color-primary-ink);
}

.faq-item__body {
  padding-bottom: var(--space-5);
  max-width: 68ch;
  color: var(--color-text-muted);
}

.faq-item__body > * + * {
  margin-top: var(--space-3);
}

.faq-item[open] .faq-item__body {
  animation: faq-in var(--dur) var(--ease-out);
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Quote block */
.quote {
  position: relative;
}

.quote__text {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.quote__mark {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-5);
  color: var(--color-primary-ink);
}

.quote__cite {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  font-style: normal;
}

.section--dark .quote__text {
  color: var(--color-always-white);
}

.section--dark .quote__mark {
  color: var(--color-accent-on-dark);
}

.pull-quote {
  margin-block: 2.5em;
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  border-left: 3px solid;
  border-image: var(--gradient-signal) 1;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}

/* Person / author */
.person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-soft));
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* The reviewer's own photograph when one is on file. */
.avatar__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* No photo: initials on a hue derived from the name, so two reviewers are never
   the same colour by accident and each one keeps their colour across the site. */
.avatar--initials {
  background: linear-gradient(
    140deg,
    hsl(var(--avatar-hue, 218) 62% 58%),
    hsl(calc(var(--avatar-hue, 218) + 22) 58% 42%)
  );
  color: #fff;
  letter-spacing: 0.01em;
}

/* Marks the review as verified on Google rather than collected by us. */
.avatar__source {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(15, 27, 45, 0.28);
}

.avatar__source svg {
  width: 11px;
  height: 11px;
}

.avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.0625rem;
}

.avatar--lg .avatar__source {
  width: 22px;
  height: 22px;
}

.avatar--lg .avatar__source svg {
  width: 13px;
  height: 13px;
}

.person__name {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.person__role {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.section--dark .person__name {
  color: var(--color-always-white);
}

.section--dark .person__role {
  color: var(--color-on-dark-muted);
}

.section--dark .avatar {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.meta-row time {
  font-variant-numeric: tabular-nums;
}

/* Media placeholder — reserves space and names the asset needed */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--placeholder {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(15, 181, 207, 0.16), transparent 55%),
    radial-gradient(90% 90% at 10% 100%, rgba(31, 107, 255, 0.16), transparent 60%),
    linear-gradient(160deg, #f5f8fd, #e7eef8);
  text-align: center;
}

.media--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 27, 45, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 27, 45, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}

.media__note {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  max-width: 30ch;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.media__note svg {
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-4-5 { aspect-ratio: 4 / 5; }

/* Tabs — progressive: panels stack without JS */
.tabs__list {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.no-js .tabs__list {
  display: none;
}

.tabs__tab {
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}

.tabs__tab:hover {
  color: var(--color-text);
}

.tabs__tab[aria-selected="true"] {
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.tabs__panel[hidden] {
  display: none;
}

.no-js .tabs__panel + .tabs__panel {
  margin-top: var(--space-7);
}

/* Filter chips */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.filter-chip {
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-soft);
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.filter-chip:hover {
  border-color: var(--color-text-muted);
}

.filter-chip[aria-pressed="true"] {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
  color: var(--color-always-white);
}

.no-js .filter-bar {
  display: none;
}

.filter-status {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Pagination */
.pagination {
  margin-top: var(--space-8);
}

.pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.pagination a:hover {
  background: var(--color-surface);
}

.pagination [aria-current="page"] {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
  color: var(--color-always-white);
}

.pagination .is-disabled {
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* Contact route list */
.contact-list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.contact-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.contact-list strong {
  display: block;
  font-size: 0.9375rem;
}

.contact-list a {
  font-weight: 500;
}


/* 9. CARDS
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
}

.card--surface {
  background: var(--color-surface);
  border-color: transparent;
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

/* Whole-card link: the title link stretches over the card */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link:hover {
  color: inherit;
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Service card */
.service-card {
  --tone: var(--color-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--tone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.service-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card__title {
  font-size: var(--fs-h4);
}

.service-card__desc {
  color: var(--color-text-muted);
  font-size: 0.96875rem;
}

.service-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.service-card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
}

.service-card__foot .text-link {
  color: var(--color-text);
}

.service-card:hover .service-card__foot .text-link {
  color: var(--color-primary-ink);
}

.service-card:hover .service-card__foot svg {
  transform: translateX(3px);
}

/* Visual header strip on service cards */
.service-card__art {
  height: 112px;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2);
  background: var(--tile-bg);
  position: relative;
  overflow: hidden;
}

.service-card__art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--tile-fg);
}

.service-card--feature {
  background: var(--gradient-deep);
  border-color: transparent;
  color: var(--color-on-dark-muted);
}

.service-card--feature .service-card__title {
  color: var(--color-always-white);
}

.service-card--feature .service-card__desc {
  color: var(--color-on-dark-muted);
}

.service-card--feature .service-card__foot .text-link,
.service-card--feature:hover .service-card__foot .text-link {
  color: var(--color-accent-on-dark);
}

.service-card--feature .service-card__art {
  background: rgba(255, 255, 255, 0.04);
}

.service-card--feature .service-card__art svg {
  color: var(--color-accent-on-dark);
}

.service-card--feature .tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-line-dark);
  color: var(--color-on-dark);
}

/* Compact service row (hub navigation) */
.service-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.service-row:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.service-row__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text);
  line-height: 1.3;
}

.service-row__desc {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.service-row > svg {
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex: none;
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur);
}

.service-row:hover > svg {
  color: var(--color-primary-ink);
  transform: translateX(3px);
}

/* Industry card */
.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 240px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}

.industry-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid var(--color-border-soft);
  box-shadow: 0 0 0 28px rgba(234, 240, 248, 0.5), 0 0 0 56px rgba(234, 240, 248, 0.3);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 0;
  pointer-events: none;
}

.industry-card > * {
  position: relative;
  z-index: 1;
}

.industry-card:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.industry-card:hover::after {
  transform: scale(1.12);
}

.industry-card__title {
  margin-top: var(--space-7);
  font-size: 1.3rem;
}

.industry-card p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.industry-card .icon-tile {
  --tile-bg: var(--color-surface);
  --tile-fg: var(--color-text);
}

.industry-card:hover .icon-tile {
  --tile-bg: var(--color-primary-light);
  --tile-fg: var(--color-primary);
}

/* Testimonial */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
}

.testimonial blockquote {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}

.testimonial__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.testimonial figcaption {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}

/* Review summary card */
.review-summary {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}

.review-summary__score {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.review-summary__source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
}

.review-summary__source svg {
  width: 20px;
  height: 20px;
}

/* Horizontal review rail — native scroll snap, no slider library */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 86%);
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.rail > * {
  scroll-snap-align: start;
}

.rail-controls {
  display: flex;
  gap: var(--space-2);
}

.no-js .rail-controls {
  display: none;
}

/* Story card (case study) */
.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out);
}

.story-card:hover {
  box-shadow: var(--shadow-md);
}

.story-card .media {
  border-radius: 0;
}

.story-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}

.story-card__title {
  font-size: 1.3rem;
}

.story-card__result {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Blog card */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-card .media {
  border-radius: var(--radius-lg);
  transition: transform var(--dur-slow) var(--ease-out);
}

.blog-card__art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--tile-bg);
  color: var(--tile-fg);
  overflow: hidden;
  position: relative;
}

.blog-card__art svg {
  width: 100%;
  height: 100%;
}

.blog-card__title {
  font-size: 1.25rem;
  line-height: 1.3;
}

.blog-card__title a:hover {
  color: var(--color-primary-ink);
}

.blog-card:hover .blog-card__title a {
  color: var(--color-primary-ink);
}

.blog-card p {
  font-size: 0.96875rem;
  color: var(--color-text-muted);
}

.blog-card.is-hidden {
  display: none;
}

.blog-card--featured {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.blog-card--featured .blog-card__title {
  font-size: var(--fs-h3);
}

.blog-grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
}

/* Bento grid */
.bento {
  display: grid;
  gap: var(--space-4);
}

.bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
}

.bento__cell h3 {
  font-size: var(--fs-h4);
}

.bento__cell p {
  color: var(--color-text-muted);
  font-size: 0.96875rem;
}

.bento__cell--dark {
  background: var(--gradient-deep);
  border-color: transparent;
}

.bento__cell--dark h3 {
  color: var(--color-always-white);
}

.bento__cell--dark p {
  color: var(--color-on-dark-muted);
}

.bento__cell--blue {
  background: var(--color-surface-blue);
  border-color: transparent;
}

.bento__visual {
  margin-top: auto;
  padding-top: var(--space-5);
}

/* Mini UI panel used inside bento cells and heroes */
.ui-panel {
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  font-size: var(--fs-small);
}

.ui-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.ui-panel__row + .ui-panel__row {
  border-top: 1px solid var(--color-border-soft);
}

.ui-panel__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: 500;
}

.ui-panel__label svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}

.status-dot--warn {
  background: var(--color-warning);
  box-shadow: 0 0 0 3px var(--color-warning-soft);
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
}

.bar-chart span {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(to top, var(--color-primary), var(--color-accent));
  opacity: 0.85;
}

/* Related content */
.related-grid {
  display: grid;
  gap: var(--space-4);
}


/* 10. FORMS
   ========================================================================== */
.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
}

.field__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  min-height: 50px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-white);
  font-size: 1rem;
  color: var(--color-text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder {
  color: #8995a6;
}

.field__input:hover {
  border-color: var(--color-border-hover);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

textarea.field__input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

select.field__input {
  padding-right: var(--space-7);
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6a7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}

.field.has-error .field__input {
  border-color: var(--color-error);
}

.field.has-error .field__input:focus {
  box-shadow: 0 0 0 3px rgba(201, 60, 60, 0.25);
}

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-error);
}

.field__error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--color-always-white);
  font-size: 11px;
  font-weight: 700;
}

.field.has-error .field__error {
  display: flex;
}

.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--color-primary-ink);
}

.form-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
}

.form-alert--error {
  background: var(--color-error-soft);
  color: #8d2525;
}

.form-alert--error ul {
  margin-top: var(--space-2);
  padding-left: 1.2em;
}

.form-alert--error a {
  color: inherit;
  font-weight: 600;
}

.form-success {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-success-soft);
}

.form-success h3 {
  font-size: var(--fs-h4);
}

.form-success .icon-tile {
  --tile-bg: var(--color-white);
  --tile-fg: var(--color-success);
}

.form-card {
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.inline-form .field {
  flex: 1 1 240px;
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}


/* 11. SECTIONS & HEROES
   ========================================================================== */
.section {
  position: relative;
  padding-block: var(--section-pad);
}

.section--tight {
  padding-block: calc(var(--section-pad) * 0.6);
}

.section--flush-top {
  padding-top: 0;
}

.section--mist {
  background: var(--color-surface);
}

.section--blue {
  background: linear-gradient(180deg, var(--color-surface-blue), var(--color-white));
}

.section--dark {
  background: var(--color-navy-900);
  color: var(--color-on-dark-muted);
  overflow: hidden;
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-always-white);
}

.section--dark .lead {
  color: var(--color-on-dark-muted);
}

.section--dark .eyebrow {
  color: var(--color-accent-on-dark);
}

.section--dark strong {
  color: var(--color-always-white);
}

.section--dark .card,
.section--dark .bento__cell {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--color-line-dark);
}

.section--dark .card p,
.section--dark .bento__cell p {
  color: var(--color-on-dark-muted);
}

.section--dark .testimonial {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-line-dark);
}

.section--dark .testimonial blockquote {
  color: var(--color-on-dark);
}

.section--dark .testimonial figcaption {
  border-top-color: var(--color-line-dark);
}

/* Soft glow + grid backdrop for dark bands */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 90% 0%, rgba(31, 107, 255, 0.35), transparent 70%),
    radial-gradient(30% 50% at 0% 100%, rgba(15, 181, 207, 0.18), transparent 70%);
  pointer-events: none;
}

.section--dark > * {
  position: relative;
}

.bg-grid {
  position: relative;
}

.bg-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(31, 107, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 107, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* CTA band */
/* Closing CTA: photo on one side, the brand gradient on the other. */
.cta-band {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(236, 124, 32, 0.34), transparent 62%),
    radial-gradient(60% 70% at 0% 100%, rgba(203, 56, 41, 0.22), transparent 65%),
    linear-gradient(135deg, #0b111b 0%, #182131 100%);
  color: rgba(255, 255, 255, 0.86);
}

.cta-band__photo {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.cta-band__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-5);
  padding: clamp(28px, 5vw, 72px);
}

.cta-band h2 {
  max-width: 18ch;
  color: var(--color-always-white);
}

.cta-band p {
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Support split: existing customer vs new enquiry */
.route-split {
  display: grid;
  gap: var(--space-4);
}

.route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: var(--color-white);
}

.route-card h3 {
  font-size: var(--fs-h4);
}

.route-card p {
  color: var(--color-text-muted);
}

.route-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.route-card--existing {
  background: var(--color-navy-900);
  border-color: transparent;
  color: var(--color-on-dark-muted);
}

.route-card--existing h3 {
  color: var(--color-always-white);
}

.route-card--existing p {
  color: var(--color-on-dark-muted);
}

/* ---- Hero base ---- */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-8);
  overflow: hidden;
  isolation: isolate;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.hero__title {
  max-width: 16ch;
}

.hero__lead {
  margin-top: var(--space-5);
}

.hero__actions {
  margin-top: var(--space-6);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-success);
}

/* Home hero */
.hero--home {
  padding-top: var(--space-7);
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(15, 181, 207, 0.12), transparent 70%),
    radial-gradient(50% 60% at 60% 60%, rgba(31, 107, 255, 0.1), transparent 70%),
    linear-gradient(180deg, #f6f9fe 0%, #ffffff 100%);
}

.hero--home .hero__title {
  max-width: 13ch;
}

/* Estate map — the home hero signature visual */
.estate {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.estate__lines {
  display: none;
}

.estate__hub {
  display: none;
}

.estate__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--glass-strong);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.estate__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.estate__card strong {
  font-size: 0.875rem;
  line-height: 1.3;
}

.estate__panel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-lg);
}

.estate__panel strong {
  display: block;
  color: var(--color-always-white);
  font-size: 0.875rem;
}

.estate__panel .bar-chart {
  flex: 1;
  height: 44px;
}

.hero-collage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero-collage .media:first-child {
  grid-row: span 2;
}

/* Hub hero — IT Services */
.hero--hub {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-white) 100%);
}

.hub-nav {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

/* Industries hero */
.hero--industries {
  background: var(--color-surface);
}

.sector-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.sector-cloud a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4) 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.sector-cloud a:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.sector-cloud .icon-tile {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.sector-cloud .icon-tile svg {
  width: 16px;
  height: 16px;
}

/* Proof hero — Our Customers */
.hero--proof {
  text-align: center;
  padding-bottom: 0;
}

.hero--proof .hero__title {
  margin-inline: auto;
  max-width: 18ch;
}

.hero--proof .lead {
  margin-inline: auto;
}

.hero--proof .hero__actions {
  justify-content: center;
}

.proof-deck {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  text-align: left;
}

/* Editorial hero — Blog */
.hero--editorial {
  padding-bottom: var(--space-6);
}

.hero--editorial .hero__title {
  max-width: 14ch;
}

/* Cyber hero — the deliberately darker page */
.hero--cyber {
  background: var(--color-navy-950);
  color: var(--color-on-dark-muted);
  padding-block: var(--space-7) var(--space-9);
}

.hero--cyber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 75% 40%, rgba(90, 75, 232, 0.35), transparent 70%),
    radial-gradient(40% 50% at 95% 90%, rgba(15, 181, 207, 0.2), transparent 70%);
}

.hero--cyber h1 {
  color: var(--color-always-white);
}

.hero--cyber .lead {
  color: var(--color-on-dark-muted);
}

.hero--cyber .eyebrow {
  color: var(--color-accent-on-dark);
}

.hero--cyber .btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-always-white);
  --btn-border: rgba(255, 255, 255, 0.28);
  --btn-bg-hover: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.shield-rings {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1;
}

.shield-rings svg {
  width: 100%;
  height: 100%;
}

/* Cloud hero */
.hero--cloud {
  background:
    radial-gradient(60% 70% at 80% 30%, rgba(15, 181, 207, 0.16), transparent 70%),
    linear-gradient(180deg, #f2fbfd 0%, #ffffff 100%);
}

.cloud-stack {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* Network hero */
.hero--network {
  background: linear-gradient(180deg, #f3faf8 0%, #ffffff 100%);
}

.hero--network .hero__grid {
  align-items: stretch;
}

.topology {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
}

.topology svg {
  width: 100%;
  height: auto;
}

.topology__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Projects hero */
.hero--projects {
  background: linear-gradient(180deg, #fdf8f0 0%, #ffffff 100%);
}

.plan-board {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
}

.plan-board__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.plan-board__head strong {
  font-size: 0.9375rem;
}

.plan-board__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
}

.plan-board__label {
  color: var(--color-text);
  font-weight: 500;
}

.plan-board__track {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--color-border-soft) calc(12.5% - 1px) 12.5%);
}

.plan-board__bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: var(--start);
  width: var(--span);
  border-radius: 4px;
  background: var(--bar, var(--color-primary));
  transform-origin: left;
}

.plan-board__bar.is-done {
  --bar: var(--color-success);
}

.plan-board__bar.is-next {
  --bar: repeating-linear-gradient(45deg, var(--tone-projects-soft) 0 6px, #f8dfb7 6px 12px);
  box-shadow: inset 0 0 0 1px #eec58a;
}

.plan-board__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
}

/* Local hero — London */
.hero--local {
  background: linear-gradient(180deg, var(--color-surface-blue), var(--color-white));
}

.local-map {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.local-map svg {
  width: 100%;
  height: auto;
}

.local-map__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-small);
}

/* Contact hero */
.hero--contact {
  padding-bottom: var(--space-9);
  background: linear-gradient(180deg, var(--color-surface) 0, var(--color-white) 70%);
}

.hero--contact .hero__grid {
  align-items: start;
}

/* Service template hero */
.hero--service {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-white) 100%);
}

.service-summary {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
}

.service-summary h2 {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-4);
}

/* Article hero */
.hero--article {
  padding-bottom: var(--space-6);
}

/* 22ch put a three-line title beside an empty right half. A headline can take a
   long measure; the standfirst underneath is what needs the reading width. The
   longest titles still take two lines — at this size they are wider than the
   container — but they no longer strand a quarter of the row. */
.hero--article .hero__title {
  max-width: 34ch;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem);
  text-wrap: balance;
}

.hero--article .hero__lead {
  max-width: 68ch;
}

.article-cover {
  margin-top: var(--space-7);
}

.article-layout {
  display: grid;
  gap: var(--space-7);
}

.article-aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.article-nav {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.article-nav a {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
}

.article-nav a:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.article-nav span {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.article-nav a:last-child {
  text-align: right;
}

/* Generic informational hero */
.hero--simple {
  padding-block: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
}


/* 12. PAGE MODIFIERS & VISUALS
   ========================================================================== */

/* Editorial statement band */
.statement {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
  max-width: 26ch;
  text-wrap: balance;
}

.statement span {
  color: var(--color-text-muted);
}

/* Story spotlight (case study) */
.spotlight {
  display: grid;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
}

.spotlight__media {
  min-height: 280px;
  border-radius: 0;
}

.spotlight__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(28px, 4vw, 56px);
}

.spotlight__facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.spotlight__facts div {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
}

.spotlight__facts dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.spotlight__facts dd {
  margin: 2px 0 0;
  color: var(--color-text);
}

/* Layered defence list paired with rings */
.layers {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  counter-reset: layer;
}

.layers li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line-dark);
  background: rgba(255, 255, 255, 0.03);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.layers li:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(98, 226, 243, 0.3);
}

.layers h3 {
  font-size: 1.0625rem;
  color: var(--color-always-white);
}

.layers p {
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
}

/* Journey (cloud migration path) */
.journey {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  counter-reset: stage;
}

.journey__stage {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  counter-increment: stage;
}

.journey__stage::before {
  content: "Stage " counter(stage);
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tone-cloud);
}

.journey__stage h3 {
  font-size: var(--fs-h5);
  margin-bottom: var(--space-2);
}

.journey__stage p {
  font-size: 0.96875rem;
  color: var(--color-text-muted);
}

.journey__meter {
  height: 4px;
  margin-top: var(--space-5);
  border-radius: 2px;
  background: var(--color-surface-2);
  overflow: hidden;
}

.journey__meter span {
  display: block;
  height: 100%;
  width: var(--progress, 25%);
  background: linear-gradient(90deg, var(--tone-cloud), var(--color-primary));
}

/* Areas served chips */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.area-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text);
}

.area-list svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary-ink);
}

/* Monitoring panel (network) */
.monitor {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-navy-900);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-lg);
}

.monitor__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--color-always-white);
  font-weight: 600;
}

.monitor__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line-dark);
}

.monitor__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-on-dark);
}

.monitor__spark {
  grid-column: 1 / -1;
  height: 28px;
  color: var(--color-accent-on-dark);
}

.monitor__spark svg {
  width: 100%;
  height: 100%;
}

/* Values list (About) */
.values {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.values li {
  display: grid;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.values h3 {
  font-size: var(--fs-h4);
}

.values p {
  color: var(--color-text-muted);
  max-width: 60ch;
}

.team-member .media {
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.team-member .media__note {
  font-size: var(--fs-xs);
}

/* Office card */
.office-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Hours table */
.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.hours th,
.hours td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-soft);
  text-align: left;
}

.hours th {
  font-weight: 500;
  color: var(--color-text);
}

.hours td {
  text-align: right;
  color: var(--color-text-muted);
}

/* Table-of-contents (article aside) */
.toc {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-small);
}

.toc h2 {
  font-size: var(--fs-small);
  margin-bottom: var(--space-3);
}

.toc ol {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.1em;
}

.toc a {
  color: var(--color-text-soft);
  text-decoration: none;
}

.toc a:hover {
  color: var(--color-primary-ink);
}

/* ---- Home ---- */
.services-grid {
  display: grid;
  gap: var(--space-5);
}

.reviews-head {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

.feature-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(90, 75, 232, 0.16), transparent 70%),
    radial-gradient(50% 50% at 80% 80%, rgba(15, 181, 207, 0.16), transparent 70%),
    var(--color-surface);
  overflow: hidden;
}

.feature-visual__stack {
  position: relative;
  width: min(380px, 100%);
}

.feature-visual__card {
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}

.feature-visual__badge {
  position: absolute;
  right: -12px;
  bottom: -28px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
  box-shadow: var(--shadow-lg);
}

.feature-visual__badge strong {
  color: var(--color-always-white);
}

.feature-visual__badge svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent-on-dark);
}

/* Estate load sequence order */
.estate__hub { --i: 0; }
.estate__card--a { --i: 1; }
.estate__card--b { --i: 2; }
.estate__card--c { --i: 3; }
.estate__card--d { --i: 4; }
.estate__panel { --i: 5; }

.bar-chart span:nth-child(1) { height: 58%; }
.bar-chart span:nth-child(2) { height: 72%; }
.bar-chart span:nth-child(3) { height: 64%; }
.bar-chart span:nth-child(4) { height: 86%; }
.bar-chart span:nth-child(5) { height: 78%; }
.bar-chart span:nth-child(6) { height: 92%; }
.bar-chart span:nth-child(7) { height: 88%; }

/* ---- IT Services hub ---- */
.need-grid {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.need-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: background-color var(--dur-fast);
}

.need-card:hover {
  background: var(--color-surface-2);
}

.need-card__quote {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}

.need-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 0.9375rem;
}

.need-card__link > svg:last-child {
  width: 18px;
  height: 18px;
  margin-left: auto;
  transition: transform var(--dur) var(--ease-out);
}

.need-card:hover .need-card__link > svg:last-child {
  transform: translateX(3px);
}

.hub-nav--hero .service-row {
  box-shadow: var(--shadow-xs);
}

/* ---- Industries ---- */
.sector-panel {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
}

.sector-panel__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-muted);
}

.sector-panel .sector-cloud a {
  box-shadow: none;
  background: var(--color-surface);
  border-color: transparent;
}

.hero--industry {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-white) 100%);
}

.industry-hero-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--gradient-deep);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-lg);
}

.industry-hero-card .icon-tile {
  --tile-bg: rgba(255, 255, 255, 0.08);
  --tile-fg: var(--color-accent-on-dark);
}

.industry-hero-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-always-white);
}

.industry-hero-card .check-list li {
  color: var(--color-on-dark);
}

/* ---- Blog ---- */
.topic-list {
  display: grid;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--color-line-dark);
}

.topic-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line-dark);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-always-white);
  text-decoration: none;
}

.topic-list svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-accent-on-dark);
  transition: transform var(--dur) var(--ease-out);
}

.topic-list a:hover svg {
  transform: translateX(4px);
}

.newsletter {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--color-surface-blue);
}

.inline-form .btn {
  align-self: flex-start;
  margin-top: 30px;
  min-height: 50px;
}

.article-cover {
  aspect-ratio: 3 / 1;
  border-radius: var(--radius-xl);
}

/* ---- IT Support ---- */
.hero--support {
  background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
}

.ticket {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
}

.ticket__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.ticket__head strong {
  display: block;
  line-height: 1.3;
  color: var(--color-text);
}

.ticket__head div span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.ticket__head .tag {
  margin-left: auto;
}

.ticket__timeline {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.ticket__timeline li {
  position: relative;
  display: flex;
  gap: var(--space-4);
}

.ticket__timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: calc(var(--space-4) * -1);
  width: 1px;
  background: var(--color-border);
}

.ticket__timeline strong {
  display: block;
  line-height: 1.3;
}

.ticket__timeline div span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.ticket__dot {
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: var(--color-white);
}

.ticket__dot--done {
  border-color: var(--color-success);
  background: var(--color-success);
}

.ticket__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.ticket__foot svg {
  width: 20px;
  height: 20px;
}

.js .ticket__timeline li {
  animation: estate-in 600ms var(--ease-out) both;
}

.js .ticket__timeline li:nth-child(2) { animation-delay: 150ms; }
.js .ticket__timeline li:nth-child(3) { animation-delay: 300ms; }
.js .ticket__timeline li:nth-child(4) { animation-delay: 450ms; }

.check-list--problems li::before {
  background:
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) center / 8px 2px no-repeat,
    var(--color-surface-2);
}

.problem-list {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.section--dark .steps--timeline .step {
  background: none;
  border: 0;
}

/* ---- Cloud ---- */
.journey__meter--1 { --progress: 25%; }
.journey__meter--2 { --progress: 50%; }
.journey__meter--3 { --progress: 75%; }
.journey__meter--4 { --progress: 100%; }

/* ---- Cyber ---- */
.threat-panel {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
}

.threat-panel__risk {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--tone-cyber-soft);
}

.threat-panel__risk p {
  color: var(--color-text-soft);
}

/* ---- Network ---- */
.infra-stack {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.infra-stack__layer {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
}

.infra-stack__layer p {
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* ---- Projects: plan bars ---- */
.plan-board__bar--1 { --start: 0%; --span: 18%; --i: 0; }
.plan-board__bar--2 { --start: 12%; --span: 22%; --i: 1; }
.plan-board__bar--3 { --start: 25%; --span: 25%; --i: 2; }
.plan-board__bar--4 { --start: 40%; --span: 35%; --i: 3; }
.plan-board__bar--5 { --start: 72%; --span: 14%; --i: 4; }
.plan-board__bar--6 { --start: 82%; --span: 18%; --i: 5; }

/* ---- London ---- */
.area-list--dark li {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-line-dark);
  color: var(--color-on-dark);
}

.area-list--dark svg {
  color: var(--color-accent-on-dark);
}

/* ---- Contact ---- */
.next-steps {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: var(--color-white);
}

.next-steps__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: next;
}

.next-steps__list li {
  position: relative;
  padding-left: 36px;
  font-size: 0.9375rem;
  counter-increment: next;
}

.next-steps__list li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.check.has-error .field__error {
  display: flex;
  margin-top: var(--space-2);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid > :first-child {
    grid-row: span 2;
  }

  .need-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews-head {
    grid-template-columns: 1.3fr minmax(280px, 0.7fr);
    gap: var(--space-8);
  }

  .threat-panel {
    grid-template-columns: 0.8fr 1.2fr;
    padding: var(--space-7);
  }

  .newsletter {
    grid-template-columns: 1fr 1fr;
  }

  .infra-stack__layer:nth-child(2) { margin-inline: var(--space-2); }
  .infra-stack__layer:nth-child(3) { margin-inline: var(--space-4); }
  .infra-stack__layer:nth-child(4) { margin-inline: var(--space-5); }
  .infra-stack__layer:nth-child(5) { margin-inline: var(--space-6); }
}

@media (min-width: 1024px) {
  /* Featured card spans two rows; the other four fill a 2 × 2 block */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .need-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-visual {
    min-height: 480px;
  }
}


/* 13. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--color-night);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-small);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 124, 32, 0.55), rgba(203, 56, 41, 0.4), transparent);
}

.site-footer__cta {
  padding-top: var(--space-9);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-8);
}

.site-footer__bar .brand {
  color: var(--color-always-white);
}

.footer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  font-family: var(--font-ui);
}

.footer-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  color: var(--color-on-dark-muted);
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.footer-pills a:hover,
.page--home .footer-pills li:first-child a {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-always-white);
}

.site-footer__top {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-line-dark);
}

.site-footer__brand {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  max-width: 340px;
}

.site-footer__brand .brand {
  color: var(--color-always-white);
}

.site-footer .brand tspan {
  fill: #6ea2ff;
}

.site-footer__brand p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.site-footer__contact {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.site-footer__contact a,
.site-footer__contact span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  color: var(--color-on-dark);
  text-decoration: none;
}

.site-footer__contact svg {
  width: 16px;
  height: 16px;
  color: #6ea2ff;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7) var(--space-5);
}

.footer-col h2 {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-always-white);
}

.footer-col ul {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-on-dark-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.footer-col a:hover {
  color: var(--color-always-white);
}

.site-footer__support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-line-dark);
}

.site-footer__support p {
  color: var(--color-on-dark);
  font-weight: 500;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-line-dark);
}

.legal-links,
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  list-style: none;
  padding: 0;
}

.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

.legal-links a:hover {
  color: var(--color-always-white);
}

.social-links {
  gap: var(--space-2);
}

.social-links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-line-dark);
  color: var(--color-on-dark);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.social-links a:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-always-white);
}

.social-links svg {
  width: 18px;
  height: 18px;
}


/* 14. ANIMATION
   ========================================================================== */

/* Reveal: only elements marked data-reveal, only when JS is running.
   app.js applies the attribute per section. Opacity and transform only, so the
   whole thing stays on the compositor; the travel is deliberately short — enough
   to register as arriving, not far enough to be watched. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 55ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Home hero: one orchestrated load sequence */
.js .estate__card,
.js .estate__panel,
.js .estate__hub {
  animation: estate-in 700ms var(--ease-out) both;
  animation-delay: calc(200ms + var(--i, 0) * 110ms);
}

.js .estate__lines path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 1.2s var(--ease-out) 150ms forwards;
}

@keyframes estate-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.js .orbit {
  transform-box: view-box;
  transform-origin: center;
  animation: spin-slow 60s linear infinite;
}

.js .plan-board__bar {
  animation: grow 900ms var(--ease-out) both;
  animation-delay: calc(250ms + var(--i, 0) * 90ms);
}

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


/* 15. RESPONSIVE
   ========================================================================== */
@media (min-width: 480px) {
  .check-list--two {
    grid-template-columns: repeat(2, 1fr);
  }

  .rail {
    grid-auto-columns: minmax(300px, 70%);
  }
}

@media (min-width: 768px) {
  :root {
    --section-pad: 88px;
  }

  .site-header__actions .site-header__cta {
    display: inline-flex;
  }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .section-head--split {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-7);
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-strip {
    grid-template-columns: 200px 1fr;
  }

  .stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps--timeline {
    grid-template-columns: 1fr;
  }

  .form__row {
    grid-template-columns: 1fr 1fr;
  }

  .route-split {
    grid-template-columns: 1fr 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-card--featured {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .journey {
    grid-template-columns: repeat(2, 1fr);
  }

  .values li {
    grid-template-columns: 1fr 1.4fr;
  }

  .proof-deck {
    grid-template-columns: repeat(3, 1fr);
  }

  .hub-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .rail {
    grid-auto-columns: minmax(320px, 44%);
  }

  .article-nav {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__nav {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Estate map: full hub composition from tablet up */
  .estate {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "a . b"
      ". hub ."
      "c . d"
      "panel panel panel";
    gap: var(--space-5) var(--space-4);
  }

  .estate__lines {
    display: block;
    position: absolute;
    inset: 0 0 90px;
    width: 100%;
    height: calc(100% - 90px);
    z-index: -1;
    color: var(--color-primary-ink);
  }

  .estate__hub {
    grid-area: hub;
    display: grid;
    place-items: center;
    align-self: center;
    justify-self: center;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 0 0 14px rgba(31, 107, 255, 0.06), 0 0 0 30px rgba(31, 107, 255, 0.035), var(--shadow-lg);
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text);
  }

  .estate__hub svg {
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
  }

  .estate__card--a { grid-area: a; }
  .estate__card--b { grid-area: b; }
  .estate__card--c { grid-area: c; }
  .estate__card--d { grid-area: d; }
  .estate__panel { grid-area: panel; }
}

@media (min-width: 1024px) {
  :root {
    --section-pad: 112px;
  }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  .split--wide-left {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .split--wide-right {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .split--reverse > :first-child {
    order: 2;
  }

  .hero {
    padding-block: var(--space-8) var(--space-9);
  }

  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
  }

  .hero--home {
    padding-block: var(--space-8) var(--space-7);
  }

  .hero--home .hero__grid {
    grid-template-columns: 1fr 1.05fr;
  }

  .hero--hub .hero__grid,
  .hero--contact .hero__grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero--editorial .hero__grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: end;
  }

  .hero-collage {
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .hero-collage .media:first-child {
    grid-row: auto;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }


  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps--timeline {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .faq {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-9);
  }

  .faq__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }

  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
  }

  .bento__cell { grid-column: span 2; }
  .bento__cell--wide { grid-column: span 4; }
  .bento__cell--half { grid-column: span 3; }
  .bento__cell--tall { grid-row: span 2; }

  .journey {
    grid-template-columns: repeat(4, 1fr);
  }

  .spotlight {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .spotlight--reverse .spotlight__media {
    order: 2;
  }

  .cta-band {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .cta-band__photo {
    height: 100%;
    aspect-ratio: auto;
  }

  .route-card {
    padding: var(--space-7);
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-9);
  }

  .article-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }

  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__top {
    grid-template-columns: 300px 1fr;
    gap: var(--space-9);
  }

  .site-footer__nav {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust-strip {
    grid-template-columns: 220px 1fr;
  }
}

/* Desktop navigation: content-based breakpoint */
@media (min-width: 1100px) {
  .primary-nav {
    display: block;
  }

  /* Only once the nav is actually displayed: its own auto margins position the
     actions. Below this width the nav is display:none, so the actions keep their
     margin-left:auto and stay pinned to the right edge — without this scoping the
     menu button floated in mid-bar on every phone and tablet. */
  .primary-nav + .site-header__actions {
    margin-left: 0;
  }

  .menu-toggle,
  .no-js .menu-fallback {
    display: none;
  }

  .site-header__inner {
    position: static;
  }
}

@media (max-width: 1099.98px) {
  .mega {
    display: none;
  }
}

@media (min-width: 1280px) {
  .hero__title {
    max-width: 15ch;
  }

  .hero--home .hero__grid {
    gap: var(--space-9);
  }

  .blog-card--featured {
    grid-template-columns: 1.35fr 1fr;
  }
}

@media (min-width: 1600px) {
  :root {
    --section-pad: 128px;
  }
}

/* Narrow phones */
@media (max-width: 400px) {
  .btn-group .btn {
    width: 100%;
  }

  .estate {
    grid-template-columns: 1fr;
  }
}


/* 16. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .orbit {
    animation: none;
  }

  .service-card:hover,
  .sector-cloud a:hover {
    transform: none;
  }
}

/* Print */
@media print {
  .utility-bar,
  .site-header,
  .mobile-nav,
  .site-footer,
  .cta-band {
    display: none;
  }
}


/* 17. HOME (SKY DESIGN)
   ========================================================================== */

/* Section heads. The class name predates the redesign: these used to fade ink
   into slate across the line, which washed out the back half of every heading.
   They are solid now and carry their weight instead. */
.grad-head {
  font-size: clamp(2rem, 1.35rem + 2vw, 3rem);
  font-weight: 800;
  color: var(--color-heading);
}

.grad-head--dark {
  color: var(--color-always-white);
}

/* Site-wide heading rule: a heading gets the width it needs, its body gets the
   width it can be read at. Capping the whole block at one narrow measure broke
   headings onto a second line while leaving the rest of the row empty, which is
   the thing to avoid everywhere. */
.center-head {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 1040px;
  margin: 0 auto var(--space-7);
  text-align: center;
  text-wrap: balance;
}

.center-head > p {
  max-width: 68ch;
}

.center-head p,
.bar-head p {
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.bar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

/* Grows into whatever the trailing button leaves, instead of a fixed 600px cap
   that broke headings onto a second line with half the row still empty. The
   paragraph keeps its own measure so only the heading gets the extra width. */
.bar-head > div {
  display: grid;
  gap: var(--space-4);
  flex: 1 1 460px;
  min-width: 0;
}

.bar-head > div > h1,
.bar-head > div > h2,
.bar-head > div > h3 {
  text-wrap: balance;
}

.bar-head > div > p {
  max-width: 68ch;
}

.page--sky .section {
  padding-block: clamp(56px, 6vw, 96px);
}

/* Header sits on the sky on the home page until it scrolls */
.page--sky .site-header:not(.is-scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.page--sky .header-top {
  background: #a9cde8;
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

/* ---- Hero ---- */
.hero--sky {
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-6);
  background:
    radial-gradient(38% 22% at 18% 16%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(30% 14% at 42% 8%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(26% 16% at 8% 44%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(34% 20% at 72% 30%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(60% 40% at 80% 70%, rgba(200, 222, 247, 0.7), transparent 70%),
    linear-gradient(180deg, #a9cde8 0%, #c4ddef 22%, #e2eef8 48%, #f4f8fc 72%, #ffffff 100%);
}

.hero-sky__title {
  font-size: clamp(2.6rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

/* The second half of a hero title carries the brand: cyan into signal blue.
   background-clip: text only paints inside the line box, so the tight line-height
   sliced the tails off g, y and p; the padding gives them room back. */
.hero-sky__title span {
  padding-bottom: 0.12em;
  background: linear-gradient(90deg, var(--color-accent-on-dark) 0%, var(--color-primary) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sky__lead {
  max-width: 44ch;
  margin-block: var(--space-5) var(--space-6);
  color: var(--color-text);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
}

/* Dashboard card */
.dash {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: clamp(16px, 3vw, 28px);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 30px 80px -30px rgba(40, 90, 160, 0.35);
  font-family: var(--font-ui);
}

.dash__panel {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: 0 8px 20px -14px rgba(15, 27, 45, 0.25);
}

.dash__panel--main {
  margin-inline: clamp(0px, 5%, 56px);
}

.dash__title,
.dash__label {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.dash__label {
  font-size: 0.75rem;
}

.dash-bars {
  position: relative;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: 10px;
  background: var(--color-white);
}

.dash-bars ul {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 140px;
  padding: 0;
  list-style: none;
}

.dash-bars__item {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 6px;
  font-size: 0.625rem;
  color: var(--color-text-muted);
}

.dash-bars__bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px;
  background: var(--bar-track);
}

.dash-bars__bar--1 { height: 60px; }
.dash-bars__bar--2 { height: 40px; }
.dash-bars__bar--3 { height: 62px; }
.dash-bars__bar--4 { height: 104px; }
.dash-bars__bar--5 { height: 48px; }
.dash-bars__bar--6 { height: 62px; }
.dash-bars__bar--7 { height: 70px; }
.dash-bars__bar--8 { height: 44px; }
.dash-bars__bar--9 { height: 64px; }

.dash-bars__item.is-peak .dash-bars__bar {
  background: linear-gradient(180deg, #1552d6, #0a3aa8);
}

.dash-bars__legend {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(15, 27, 45, 0.08);
  font-size: 0.625rem;
  color: var(--color-text);
}

.dash-bars__legend span {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #0a3aa8;
}

.dash__row {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 1.1fr;
  gap: var(--space-3);
  align-items: stretch;
}

.dash-spark {
  margin-top: var(--space-2);
  padding: 6px;
  border-radius: 8px;
  background: var(--color-white);
}

.dash-spark__note {
  font-size: 0.5625rem;
  color: var(--color-text-muted);
}

.dash-spark svg {
  width: 100%;
  height: 54px;
}

.dash__panel--team {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--space-3);
}

.avatar-stack {
  display: flex;
}

.avatar-stack span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -7px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: linear-gradient(135deg, #c9d9f5, #8fb0e6);
  color: var(--color-navy);
  font-size: 0.5rem;
  font-weight: 600;
}

.avatar-stack span:first-child {
  margin-left: 0;
}

.avatar-stack .avatar-stack__more {
  background: var(--color-night);
  color: var(--color-always-white);
}

.dash__metric {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.625rem;
  color: var(--color-text-muted);
}

.dash__metric svg {
  width: 13px;
  height: 13px;
  color: var(--color-primary-ink);
}

.dash__metric strong {
  font-size: 0.875rem;
  font-weight: 600;
}

.dash-gauge {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: var(--space-2);
  padding: 8px;
  border-radius: 8px;
  background: var(--color-white);
}

.dash-gauge__up {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.5625rem;
  color: var(--color-success);
}

.dash-gauge__up svg {
  width: 11px;
  height: 11px;
}

.dash-gauge > svg {
  width: 100%;
  max-width: 110px;
}

.dash-gauge strong {
  margin-top: -26px;
  font-size: 0.75rem;
  font-weight: 600;
}

.dash__caption {
  justify-self: end;
  font-size: 0.625rem;
  color: var(--color-text-muted);
}

/* Client logo row */
.logo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}

.logo-row li {
  color: #9aa1ab;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1.05rem);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* ---- About / mission ---- */
.home-about__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.home-about__media {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
}

.pill-tabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--space-5);
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: 0 6px 16px -10px rgba(15, 27, 45, 0.2);
}

.pill-tabs .tabs__tab {
  min-height: 34px;
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
}

.pill-tabs .tabs__tab[aria-selected="true"] {
  background: var(--color-navy-fill);
  color: var(--color-always-white);
  box-shadow: none;
}

/* The homepage About tabs sit beside a large photo and larger body copy, so they
   step up a size to match. */
.home-about__body .pill-tabs {
  gap: 4px;
  padding: 6px;
}

.home-about__body .pill-tabs .tabs__tab {
  min-height: 46px;
  padding-inline: clamp(16px, 1.6vw, 24px);
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  font-weight: 600;
}

/* Small phones: the three pills share the row evenly instead of running off it. */
@media (max-width: 479px) {
  .home-about__body .pill-tabs {
    display: flex;
    width: 100%;
  }

  .home-about__body .pill-tabs .tabs__tab {
    flex: 1 1 auto;
    min-height: 44px;
    padding-inline: 8px;
    white-space: nowrap;
    font-size: 0.8125rem;
  }
}

.home-about__body .tabs__panel p {
  max-width: 56ch;
  color: var(--color-text);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.home-about__body .tabs__panel .text-link {
  margin-top: var(--space-5);
}

.more-link {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

/* ---- Services ---- */
.project-card__title a,
.insight__title a {
  color: inherit;
  text-decoration: none;
}

/* ---- Results ---- */
.project-grid {
  display: grid;
  gap: var(--space-5);
}

.project-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.project-card__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.project-card__title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 500;
}

.project-card p {
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.55;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
}

.read-more svg {
  width: 14px;
  height: 14px;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease-out);
}

.project-card:hover .read-more svg {
  transform: rotate(-45deg) translateX(3px);
}

/* ---- Testimonials ---- */
.home-quotes {
  background: var(--surface-card);
}

/* Restored from the original homepage: testimonial slider, industry cards,
   pricing statement. */
.quote-slider__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.quote-slider__dot {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.quote-slider__dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-radius: var(--radius-pill);
  background: var(--color-slate);
  opacity: 0.3;
  transition:
    width var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.quote-slider__dot:hover::before {
  opacity: 0.55;
}

.quote-slider__dot[aria-selected="true"]::before {
  width: 26px;
  background: var(--color-primary);
  opacity: 1;
}

.quote-slider__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.quote-slider__item {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

.js .quote-slider__item[data-hidden],
.quote-slider__item[hidden] {
  display: none;
}

.no-js .quote-slider__dots,
.no-js .quote-slider__nav {
  display: none;
}

.no-js .quote-slider__item {
  grid-row: auto;
}

.quote-slider__item blockquote p {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--color-text);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.5;
}

.quote-slider__item figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.quote-slider__item figcaption strong {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  font-weight: 500;
}

.quote-slider__who {
  display: grid;
  gap: 2px;
  text-align: left;
}

.quote-slider__who > span {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.quote-slider__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 4px 12px -4px rgba(15, 27, 45, 0.2);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.quote-slider__nav--prev {
  grid-column: 1;
  grid-row: 1;
}

.quote-slider__nav--next {
  grid-column: 3;
  grid-row: 1;
  background: var(--color-primary);
  color: var(--color-always-white);
}

.quote-slider__nav:hover {
  background: var(--color-navy-fill);
  color: var(--color-always-white);
}

.quote-slider__nav svg {
  width: 18px;
  height: 18px;
}

.pricing {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.plan-detail {
  display: none;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--panel-tint);
  box-shadow: 0 16px 40px -28px rgba(15, 27, 45, 0.35);
}

.plan-detail h3 {
  margin-bottom: var(--space-5);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem);
  font-weight: 500;
}

.plan-detail--essential,
.pricing:has(input[value="managed"]:checked) .plan-detail--managed,
.pricing:has(input[value="complete"]:checked) .plan-detail--complete {
  display: block;
}

.pricing:has(input[value="managed"]:checked) .plan-detail--essential,
.pricing:has(input[value="complete"]:checked) .plan-detail--essential {
  display: none;
}

.pricing__options {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: 0;
  border: 0;
}


@media (min-width: 1024px) {
  .pricing {
      grid-template-columns: 0.8fr 1.2fr;
      gap: var(--space-7);
    }

}

@media (max-width: 767.98px) {
  .quote-slider__stage {
      grid-template-columns: 1fr 1fr;
    }

  .quote-slider__item {
      grid-column: 1 / -1;
    }

  .quote-slider__nav--prev,
    .quote-slider__nav--next {
      grid-row: 2;
    }

  .quote-slider__nav--prev {
      grid-column: 1;
      justify-self: end;
    }

  .quote-slider__nav--next {
      grid-column: 2;
    }

}
.sector-cards {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}

.sector-card {
  display: grid;
}

.sector-card > a {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.sector-card__art {
  border-radius: 0;
}

.sector-card__art img {
  transition: transform 600ms var(--ease-emphasis);
}

.sector-card__body {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
}

.sector-card__icon {
  position: absolute;
  top: -22px;
  left: var(--space-5);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 10px 24px -12px rgba(15, 27, 45, 0.55);
  transition: transform var(--dur) var(--ease-out);
}

.sector-card__icon svg {
  width: 20px;
  height: 20px;
}

.sector-card strong {
  font-size: 1.0625rem;
  font-weight: 500;
}

.sector-card__desc {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.sector-card__go {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: var(--space-2);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-navy);
  transition:
    transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.sector-card__go svg {
  width: 15px;
  height: 15px;
}


@media (hover: hover) {
  .sector-card > a:hover {
      transform: translateY(-4px);
      border-color: var(--color-border-hover);
      box-shadow: 0 28px 56px -30px rgba(31, 107, 255, 0.42);
    }

  .sector-card > a:hover .sector-card__art img {
      transform: scale(1.05);
    }

  .sector-card > a:hover .sector-card__icon {
      transform: translateY(-3px);
    }

  .sector-card > a:hover .sector-card__go {
      background: var(--color-primary);
      color: var(--color-always-white);
      transform: translateX(3px);
    }

}
.plan-detail--single {
  display: block;
}

.plan-detail--single p {
  max-width: 52ch;
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.6;
}


@media (min-width: 640px) {
  .sector-cards {
      grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 768px) {
  .plan-detail--single {
      padding: var(--space-7);
    }

}

@media (min-width: 1024px) {
  .sector-grid,
    .sector-cards {
      grid-template-columns: repeat(4, 1fr);
    }

  .pricing {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }

}

.tick-list {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  padding: 0;
  list-style: none;
}

.tick-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: 1rem;
}

.tick-list li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.2 2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--brand-flame);
}

.plan-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 10px 30px -24px rgba(15, 27, 45, 0.35);
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}

.plan-option:hover {
  border-color: var(--color-border);
}

.plan-option:has(input:checked) {
  background: var(--surface-card);
  box-shadow: 0 18px 40px -22px rgba(15, 27, 45, 0.3);
}

.plan-option input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--color-primary-ink);
  cursor: pointer;
}

.plan-option__text {
  display: grid;
  gap: 6px;
}

.plan-option__text strong {
  font-size: 1.05rem;
  font-weight: 500;
}

.plan-option__text span {
  max-width: 34ch;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.plan-option__price {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--color-text);
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
  line-height: 1;
}

.plan-option__price .ph {
  font-weight: 400;
}

.plan-option__price small {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

/* ---- Insights ---- */
.insight-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
}

.insight {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.insight__art {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #eef3fa, #d3deee);
  color: #5d86d6;
}

.insight__art svg {
  width: 100%;
  height: 100%;
}

.insight__body {
  display: grid;
  gap: var(--space-3);
}

.insight__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}

.insight__date svg {
  width: 15px;
  height: 15px;
}

.insight__title {
  font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.insight:hover .insight__title {
  color: var(--color-primary-ink);
}

.insight__body > p:last-child {
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---- Home responsive ---- */
@media (min-width: 768px) {
  .page--sky .header-top {
    background: transparent;
  }

  .logo-row {
    grid-template-columns: repeat(6, 1fr);
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-option {
    grid-template-columns: auto 1fr auto;
    padding: var(--space-5) var(--space-6);
  }

  .plan-option__price {
    grid-column: 3;
  }

  .insight-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .insight--wide {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

@media (min-width: 1024px) {

  .home-about__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .insight-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .insight--tall {
    grid-row: 1 / span 2;
    grid-template-rows: 1fr auto;
  }

  .insight--tall .insight__art {
    aspect-ratio: auto;
    height: 100%;
    min-height: 340px;
  }

  .insight--wide {
    grid-column: 2 / span 2;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-5);
  }

  .insight--wide .insight__art {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767.98px) {
  .dash__row {
    grid-template-columns: 1fr 1fr;
  }

  .dash__row > :first-child {
    grid-column: 1 / -1;
  }

  }


/* 17b. HOME — real-content blocks (logos, proof card, sectors, FAQ, partners)
   ========================================================================== */

/* Hero proof card */
.dash__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash__title svg {
  width: 16px;
  height: 16px;
  color: #f5a623;
  fill: #f5a623;
}

.dash__headline {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.dash__sub {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.dash-chips li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 0.6875rem;
  color: var(--color-text);
}

.dash-chips svg {
  width: 13px;
  height: 13px;
  color: var(--color-success);
}

.dash__panel--badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.dash__panel--badges img {
  width: auto;
  height: 46px;
  object-fit: contain;
}

/* Client logo band. The client logos are white artwork, so they sit on a dark
   band exactly as they do on the current site. */
.client-band {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #0f1620 0%, #16202e 60%, #101a29 100%);
  box-shadow: 0 24px 60px -34px rgba(15, 27, 45, 0.6);
}

.client-band__label {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  text-align: center;
}

.logo-row {
  align-items: center;
  margin-top: var(--space-5);
}

.logo-row img {
  width: 100%;
  max-width: 120px;
  height: 42px;
  margin-inline: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--dur);
}

.logo-row li:hover img {
  opacity: 1;
}

/* Icon beside the text, never alone on a line: the text wraps inside its span. */
.hero-sky__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-5);
  color: var(--color-text-soft);
  font-size: var(--fs-small);
}

.hero-sky__note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.15em;
  color: var(--brand-orange);
}

.hero-sky__note a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

.hero--sky .eyebrow {
  margin-bottom: var(--space-4);
}

/* Service cards: six tiles, the last one routes to contact */
/* Case-study cards use real photography */
.project-card .media {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
}

.project-card .tag {
  justify-self: start;
}

/* Industry cards (home). Photo-led: the sector is recognised from the picture
   before the label is read, which the icon-only cards never managed. Distinct
   from .sector-tile on /industries/ so each page keeps its own treatment. */
/* Square off the shared .media radius so the photo meets the card edges. */
/* Only the photograph scales; the card frame stays put so nothing reflows. */
/* Badge straddles the photo edge, which ties the two halves together. */
/* Sectors */
.sector-grid {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.sector-grid a {
  display: grid;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}

.sector-grid a:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 18px 40px -26px rgba(31, 107, 255, 0.4);
  transform: translateY(-2px);
}

.sector-grid strong {
  font-size: 1.0625rem;
  font-weight: 500;
}

.sector-grid span:last-child {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.sector-grid__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.sector-grid__icon svg {
  width: 20px;
  height: 20px;
}

/* FAQ panel */
.faq-panel {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.faq-panel h3 {
  margin-bottom: var(--space-2);
}

/* Partner logos */
.partner-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}

.partner-row li {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.partner-row img {
  width: 100%;
  max-width: 130px;
  height: 46px;
  object-fit: contain;
}

/* Insight cards now use a line icon instead of the placeholder artwork */
.insight__art {
  display: grid;
  place-items: center;
  color: var(--color-navy);
}

.insight__date {
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-row {
    grid-template-columns: repeat(4, 1fr);
  }

  }

@media (min-width: 1024px) {
  .sector-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .partner-row {
    grid-template-columns: repeat(7, 1fr);
  }

  }

/* 18. ABOUT
   ========================================================================== */


.bar-head__aside {
  max-width: 34ch;
  color: var(--color-text-soft);
  font-size: 1rem;
}

.value-grid {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: value;
}

.value-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-6);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}

.value-card::after {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 107, 255, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur);
}

.value-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 30px 60px -34px rgba(31, 107, 255, 0.45);
  transform: translateY(-3px);
}

.value-card:hover::after {
  opacity: 1;
}

.value-card__num {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.value-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(150deg, #ffffff, #e6eefc);
  border: 1px solid #cddcf8;
  color: var(--color-navy);
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
}

.value-card h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.value-card p {
  position: relative;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Dark stats band */
.stat-band {
  color: var(--color-on-dark-muted);
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(31, 107, 255, 0.35), transparent 60%),
    radial-gradient(50% 70% at 90% 100%, rgba(10, 47, 122, 0.55), transparent 65%),
    #0b0f16;
}

.stat-band .eyebrow {
  color: #8fb4ff;
}

.stat-band__head {
  margin-bottom: var(--space-7);
}

.stat-band__grid {
  display: grid;
  gap: var(--space-6);
}

.stat-band__grid > div {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* A short lit run of the logo gradient on each figure's rule, like the form's edge. */
.stat-band__grid > div::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-flame);
}

.stat-band__grid dd {
  margin: 0;
  color: var(--color-always-white);
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-band__grid dt {
  margin-top: var(--space-3);
  color: var(--color-always-white);
  font-size: 1rem;
}

.stat-band__grid p {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.stat-band__note {
  margin-top: var(--space-7);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}

/* Editorial statement + featured review */
.statement {
  max-width: 62ch;
}

.statement p {
  margin-top: var(--space-5);
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.quote-feature {
  position: relative;
  margin-top: var(--space-7);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--panel-tint);
}

.quote-feature__mark {
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  color: var(--quote-mark);
}

.quote-feature__mark svg {
  width: 56px;
  height: 56px;
}

/* Room on the right so the first lines clear the quote mark. */
.quote-feature blockquote {
  padding-right: clamp(40px, 5vw, 72px);
}

.quote-feature blockquote p {
  max-width: 52ch;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.quote-feature figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
}

.quote-feature figcaption strong {
  display: block;
  color: var(--color-text);
  font-size: 1rem;
}

.quote-feature .avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f6bff, #0a2f7a);
  color: var(--color-always-white);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
}

.quote-feature figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

.quote-feature figcaption a svg {
  width: 16px;
  height: 16px;
}

/* Team */
.people-grid {
  display: grid;
  gap: var(--space-5);
}


/* Credentials */
.cred-grid {
  display: grid;
  gap: var(--space-5);
}

.cred-card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 18px 44px -32px rgba(15, 27, 45, 0.4);
}

.cred-card img {
  width: auto;
  height: 56px;
  object-fit: contain;
  justify-self: start;
}

.cred-card h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.cred-card p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Small print under a centred head and grid: centre it with them. */
.cred-note {
  max-width: 70ch;
  margin-inline: auto;
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .value-grid,
  .cred-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .people-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat-band__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .value-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-band__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  

  .quote-feature {
    margin-top: 0;
  }
}


/* 19. INNER PAGES (services, industries, locations, case studies)
   ========================================================================== */
.hero--page {
  padding-bottom: var(--space-7);
}

.hero--page .breadcrumbs {
  margin-bottom: var(--space-5);
}

.hero--page .hero-sky__title {
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
}

/* Service tones tint the sky just enough to tell the sections apart */
.hero--tone-cyber {
  background-image:
    radial-gradient(38% 22% at 18% 16%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(60% 40% at 80% 70%, rgba(204, 214, 248, 0.7), transparent 70%),
    linear-gradient(180deg, #b3bfe8 0%, #ccd7ef 24%, #e6ecf9 52%, #ffffff 100%);
}

.hero--tone-cloud {
  background-image:
    radial-gradient(38% 22% at 18% 16%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(60% 40% at 80% 70%, rgba(196, 227, 240, 0.7), transparent 70%),
    linear-gradient(180deg, #a6d2e4 0%, #c6e2ee 24%, #e4f1f7 52%, #ffffff 100%);
}

.hero--tone-network {
  background-image:
    radial-gradient(38% 22% at 18% 16%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(60% 40% at 80% 70%, rgba(198, 233, 224, 0.7), transparent 70%),
    linear-gradient(180deg, #a8dbcd 0%, #c8e8de 24%, #e6f5f0 52%, #ffffff 100%);
}

.hero--tone-projects {
  background-image:
    radial-gradient(38% 22% at 18% 16%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(60% 40% at 80% 70%, rgba(247, 228, 202, 0.7), transparent 70%),
    linear-gradient(180deg, #e8cfa6 0%, #f0dfc4 24%, #f8efe2 52%, #ffffff 100%);
}

.hero--case,
.hero--location {
  padding-bottom: var(--space-6);
}

/* Content blocks. The 34ch cap is for a head sitting in one column of a split
   layout; a head that spans the container gets the full width, or it wraps early
   and strands empty space beside itself. */
.block-head {
  display: grid;
  gap: var(--space-4);
  max-width: 34ch;
  margin-bottom: var(--space-5);
}

.container > .block-head {
  max-width: none;
  text-wrap: balance;
}

.container > .block-head > p {
  max-width: 68ch;
}

.block-head p {
  color: var(--color-text-soft);
  font-size: 1rem;
}

.block-split {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.block-prose p {
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
  line-height: 1.75;
}

.block-prose p:last-child {
  margin-bottom: 0;
}

.block-prose--wide {
  max-width: 70ch;
  margin-bottom: var(--space-7);
}

.prose-cols p {
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
  line-height: 1.75;
}

.prose-cols {
  max-width: 78ch;
}

/* Checklist card beside prose */
.check-card {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--panel-tint);
  box-shadow: 0 24px 50px -34px rgba(15, 27, 45, 0.45);
}

.check-card h3 {
  margin-bottom: var(--space-5);
  font-size: 1.125rem;
  font-weight: 500;
}

.check-card ul {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.check-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.check-card li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.2 2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--brand-flame);
}

/* Numbered detail cards */
.detail-grid {
  display: grid;
  gap: var(--space-5);
}

.detail-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}

.detail-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 28px 56px -34px rgba(31, 107, 255, 0.4);
  transform: translateY(-2px);
}

/* Ember, not orange: small text on white needs the darker end (4.9:1). */
.detail-card__num {
  color: var(--brand-ember);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.detail-card h3 {
  font-size: 1.1875rem;
  font-weight: 500;
}

.detail-card p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Tabs shown as a panel card */
.tabs--panel {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.tabs--panel .tabs__panel {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.tabs--panel .tabs__panel p + p {
  margin-top: var(--space-4);
}

/* FAQ block */
.faq-split {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.faq-split__help {
  margin-top: var(--space-4);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.faq-panel .faq-item {
  border-bottom: 1px solid var(--color-border-soft);
}

/* Credential strip */
.cred-strip {
  background: var(--color-surface);
}

.cred-strip__list {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: 0;
  list-style: none;
}

.cred-strip__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 14px 34px -28px rgba(15, 27, 45, 0.4);
}

.cred-strip__list img {
  width: 64px;
  height: 48px;
  object-fit: contain;
  flex: none;
}

.cred-strip__list strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
}

.cred-strip__list span {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Offices + coverage */
.office-grid {
  display: grid;
  gap: var(--space-5);
}

.office-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.office-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.office-card__icon svg {
  width: 20px;
  height: 20px;
}

.office-card h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.office-card__label {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.office-card p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.office-card .text-link {
  margin-top: var(--space-3);
}

.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.area-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.area-chips a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.area-chips svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary-ink);
}

/* Locations index */
.location-grid {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.location-grid a {
  display: grid;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}

.location-grid a:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 18px 40px -26px rgba(31, 107, 255, 0.4);
  transform: translateY(-2px);
}

.location-grid strong {
  font-size: 1rem;
  font-weight: 500;
}

.location-grid span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}

.location-grid span:last-child svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary-ink);
}

.location-grid__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.location-grid__icon svg {
  width: 17px;
  height: 17px;
}

/* Case study facts */
.case-facts {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.case-facts dt {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case-facts dd {
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-size: 1.0625rem;
}

/* Thank-you page */
.thanks {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding-block: var(--space-8);
  text-align: center;
}

.thanks__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.thanks__icon svg {
  width: 34px;
  height: 34px;
}

.thanks .hero-sky__lead {
  margin-block: 0;
}

.thanks__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .detail-grid--2,
  .detail-grid--3,
  .office-grid,
  .cred-strip__list,
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-facts {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {

  .block-split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
  }

  .block-split--flip > :first-child {
    order: 2;
  }

  .detail-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .faq-split {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-8);
  }

  .location-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .prose-cols {
    columns: 2;
    column-gap: var(--space-8);
  }

  .prose-cols p {
    break-inside: avoid;
  }
}

/* Panel tabs wrap instead of scrolling off the card */
.tabs--panel .pill-tabs {
  flex-wrap: wrap;
  border-radius: var(--radius-lg);
}

.tabs--panel .tabs__tab {
  flex: 0 0 auto;
}

/* Blocks sit closer together than full sections */
.block {
  padding-block: clamp(40px, 4.5vw, 72px);
}

.block + .block {
  padding-top: 0;
}

.block--statement + .block {
  padding-top: clamp(40px, 4.5vw, 72px);
}


/* 20. IT SERVICES HUB
   ========================================================================== */
.service-index {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px -36px rgba(20, 45, 85, 0.5);
}

.service-index__label {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.service-index ul {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}

.service-index a {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--dur-fast);
}

.service-index a:hover {
  background: var(--color-surface);
}

.service-index strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
}

.service-index a > span:nth-child(3) {
  font-size: 0.75rem;
  color: var(--color-text-soft);
  line-height: 1.4;
}

.service-index__num {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
}

.service-index__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.service-index__icon svg {
  width: 16px;
  height: 16px;
}

.service-index a > svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.client-band--slim {
  margin-top: 0;
  padding-block: var(--space-5);
}

/* Pillar rows */
.pillar {
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--color-border-soft);
}

.pillar:first-of-type {
  border-top: 0;
}

.pillar__index {
  margin-bottom: var(--space-3);
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pillar h3 {
  margin-bottom: var(--space-5);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: 500;
}

.pillar__photo {
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -38px rgba(15, 27, 45, 0.5);
}

.pillar__aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.pillar__links {
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.pillar__links > p {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pillar__links ul {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
}

.pillar__links a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.pillar__links a:hover {
  background: var(--color-surface);
  color: var(--color-primary-ink);
}

.pillar__links a > svg:first-child {
  width: 17px;
  height: 17px;
  color: var(--color-primary-ink);
}

.pillar__links a > svg:last-child {
  width: 15px;
  height: 15px;
  color: var(--color-text-muted);
}

.tick-list--compact li {
  font-size: 0.9375rem;
}

.tick-list--compact {
  gap: var(--space-2);
  margin-bottom: 0;
}

/* "Something else?" route */
.route-wide {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--panel-tint-soft);
}

.route-wide__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-white);
  color: var(--color-navy);
}

.route-wide__icon svg {
  width: 24px;
  height: 24px;
}

.route-wide h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.route-wide p {
  margin-top: var(--space-2);
  max-width: 62ch;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Review cards */
.review-grid {
  display: grid;
  gap: var(--space-5);
}

.review-card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 20px 44px -34px rgba(15, 27, 45, 0.45);
}

.review-card__stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
}

.review-card__stars svg {
  width: 16px;
  height: 16px;
  fill: #f5a623;
}

.review-card blockquote p {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.review-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}

.review-card figcaption strong {
  display: block;
  color: var(--color-text);
  font-size: 0.9375rem;
}

.review-card .avatar {
  width: 40px;
  height: 40px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .route-wide {
    grid-template-columns: auto 1fr auto;
  }
}

@media (min-width: 1024px) {
  .pillar {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
    align-items: start;
  }

  /* The asides differ wildly in height — Cyber Security lists ten sub-services,
     IT Support three — so centring the body left a tall column of dead space
     beside the short ones. The body sticks instead: it stays beside whatever part
     of the list you are reading, and short pillars simply sit at the top. */
  .pillar__body {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }

  .pillar--flip .pillar__body {
    order: 2;
  }

  .review-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* 21. SERVICE OVERVIEW PAGES
   ========================================================================== */
.block-photo {
  border-radius: var(--radius-xl);
  box-shadow: 0 36px 80px -46px rgba(15, 27, 45, 0.55);
}

.check-card--lg {
  position: static;
  padding: var(--space-7) var(--space-6);
}

.mini-facts {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.mini-facts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: 0.9375rem;
}

.mini-facts svg {
  width: 18px;
  height: 18px;
  color: var(--color-success);
}

/* Sits under a centred statement, so it centres with it rather than hanging off
   the left edge of the row. */
.cred-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-7);
  padding: 0;
  list-style: none;
}

.cred-inline li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}

.cred-inline img {
  width: 54px;
  height: 40px;
  object-fit: contain;
}

/* Remote vs on-site */
.versus__grid {
  position: relative;
  display: grid;
  gap: var(--space-5);
}

.versus__card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 24px 52px -36px rgba(15, 27, 45, 0.45);
}

.versus__card--primary {
  border-color: transparent;
  background: linear-gradient(150deg, #0d1a2f 0%, #14294a 60%, #102a52 100%);
  color: var(--color-on-dark);
}

.versus__card--primary h3 {
  color: var(--color-always-white);
}

.versus__card h3 {
  font-size: 1.375rem;
  font-weight: 500;
}

.versus__card p {
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.versus__card--primary p {
  color: rgba(255, 255, 255, 0.78);
}

.versus__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-2);
  border-radius: 16px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.versus__card--primary .versus__icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-always-white);
}

.versus__icon svg {
  width: 23px;
  height: 23px;
}

.versus__divider {
  display: none;
}

/* Cloud platforms */
.platform-grid {
  display: grid;
  gap: var(--space-5);
}

.platform-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff 0%, #f2f7fd 100%);
  border: 1px solid var(--color-border-soft);
  transition: transform var(--dur), box-shadow var(--dur);
}

.platform-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -38px rgba(31, 107, 255, 0.45);
}

.platform-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--color-white);
  border: 1px solid #cfe0f7;
  color: var(--color-primary-ink);
}

.platform-card__icon svg {
  width: 26px;
  height: 26px;
}

.platform-card h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.platform-card p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Migration journey */
.journey-steps {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: journey;
}

.journey-steps li {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.journey-steps__num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--color-navy-fill);
  color: var(--color-always-white);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.journey-steps h3 {
  font-size: 1.125rem;
  font-weight: 500;
}

.journey-steps p {
  margin-top: var(--space-2);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}

.partner-row--inline {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.partner-row--inline li {
  padding: var(--space-3);
}

.partner-row--inline img {
  height: 34px;
}

/* Cyber layers */
.layer-stack {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.defence-layer a {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

.defence-layer a:hover {
  border-color: var(--color-border-hover);
  transform: translateX(4px);
  box-shadow: 0 18px 40px -30px rgba(31, 107, 255, 0.45);
}

.defence-layer__num {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
}

.defence-layer__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.defence-layer__icon svg {
  width: 20px;
  height: 20px;
}

.defence-layer__body strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
}

.defence-layer__body span {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.55;
}

.defence-layer a > svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}

/* Cyber Essentials feature */
.ce-feature {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 0 30px 70px -44px rgba(15, 27, 45, 0.5);
}

.ce-feature__body p {
  margin-top: var(--space-4);
  color: var(--color-text-soft);
  line-height: 1.7;
}

.ce-feature__badge {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--panel-tint-soft);
}

.ce-feature__badge img {
  width: 100%;
  max-width: 190px;
  height: auto;
}

/* Network monitoring panel */
.monitor-panel {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #0d1a2f 0%, #13294a 60%, #0f2447 100%);
  box-shadow: 0 40px 90px -50px rgba(10, 30, 60, 0.7);
}

.monitor-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-on-dark-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}

.monitor-panel__head strong {
  color: var(--color-always-white);
}

.status-dot--live {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #35d39a;
  box-shadow: 0 0 0 4px rgba(53, 211, 154, 0.2);
}

.monitor-grid {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.monitor-grid li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-on-dark-muted);
}

.monitor-grid strong {
  color: var(--color-always-white);
  font-size: 0.9375rem;
  font-weight: 500;
}

.monitor-grid li > span:nth-child(3) {
  grid-column: 2;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.monitor-grid__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #9fc4ff;
}

.monitor-grid__icon svg {
  width: 19px;
  height: 19px;
}

.monitor-grid__state {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #35d39a;
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

.monitor-grid__state svg {
  width: 14px;
  height: 14px;
}

/* Project delivery spine */
.spine {
  display: grid;
  gap: 0;
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.spine__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.spine__step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary), rgba(31, 107, 255, 0.1));
}

.spine__step:last-child {
  padding-bottom: 0;
}

.spine__step:last-child::before {
  display: none;
}

.spine__marker {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  color: var(--color-navy);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
}

.spine__body h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.spine__body p {
  margin-top: var(--space-2);
  max-width: 68ch;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.detail-card--icon {
  padding-top: var(--space-5);
}

.detail-card__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: var(--space-2);
  border-radius: 16px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.detail-card__icon svg {
  width: 22px;
  height: 22px;
}

/* Sub-service grid */
.sub-grid {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.sub-grid a {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}

.sub-grid a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -30px rgba(15, 27, 45, 0.45);
}

.sub-grid strong {
  font-size: 1rem;
  font-weight: 500;
}

.sub-grid__num {
  color: var(--brand-ember);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
}

.sub-grid__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.sub-grid__icon svg {
  width: 17px;
  height: 17px;
}

.sub-grid a > svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

/* Pricing panel */
.pricing-panel {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--panel-tint);
}

.pricing-panel p {
  max-width: 56ch;
  margin-top: var(--space-4);
  color: var(--color-text-soft);
  line-height: 1.7;
}

@media (min-width: 640px) {
  .sub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .versus__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .journey-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .monitor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ce-feature {
    grid-template-columns: 1.3fr 0.7fr;
  }

  .pricing-panel {
    grid-template-columns: 1.4fr auto;
  }
}

@media (min-width: 1024px) {
  .journey-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .monitor-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 22. INDUSTRIES, CUSTOMERS, BLOG, CONTACT, LONDON
   ========================================================================== */

/* Sector directory */
.sector-directory {
  display: grid;
  gap: var(--space-5);
}

.sector-tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}

.sector-tile:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 28px 56px -34px rgba(31, 107, 255, 0.4);
  transform: translateY(-3px);
}

.sector-tile__num {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sector-tile__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.sector-tile__icon svg {
  width: 23px;
  height: 23px;
}

.sector-tile h3 {
  font-size: 1.25rem;
  font-weight: 500;
}

.sector-tile p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sector-tile__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.sector-tile__note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-warning);
}

/* Google rating card */
.rating-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px -36px rgba(20, 45, 85, 0.5);
  text-align: center;
}

.rating-card__score {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
}

.rating-card__stars {
  display: inline-flex;
  gap: 3px;
  color: #f5a623;
}

.rating-card__stars svg {
  width: 22px;
  height: 22px;
  fill: #f5a623;
}

.rating-card__label {
  max-width: 24ch;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.logo-row--wide {
  grid-template-columns: repeat(2, 1fr);
}

/* Our Customers signature: centred rating headline over an offset review wall.
   Deliberately unlike /about/, which leads with a photograph beside the copy. */
.hero--wall {
  padding-bottom: var(--space-8);
}

.hero-wall__head {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}

.hero--wall .hero-sky__title {
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
}

.hero--wall .hero-sky__lead {
  max-width: 60ch;
}

.hero--wall .breadcrumbs ol {
  justify-content: center;
}

/* The rating as one horizontal statement, not a boxed card. */
.rating-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-5) var(--space-6);
  /* Squared off while it is stacked; the pill only makes sense on one line. */
  border-radius: var(--radius-lg);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px -28px rgba(20, 45, 85, 0.5);
  text-align: left;
}

.rating-bar__score {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1;
}

.rating-bar__detail {
  display: grid;
  gap: 3px;
}

.rating-bar__detail .stars svg {
  width: 18px;
  height: 18px;
}

.rating-bar__detail > span:not(.stars) {
  color: var(--color-text-soft);
  font-size: 0.875rem;
}

.rating-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-navy);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

/* Once the bar fits on one line, the divider turns and the pill returns. */
@media (min-width: 900px) {
  .rating-bar {
    flex-wrap: nowrap;
    padding-block: var(--space-4);
    border-radius: var(--radius-pill);
  }

  .rating-bar__link {
    padding-top: 0;
    padding-left: var(--space-5);
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}

.rating-bar__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.rating-bar__link:hover svg:last-child {
  transform: translateX(3px);
}

/* Review wall */
.review-wall {
  display: grid;
  gap: var(--space-5);
}

/* A true masonry wall: columns let each quote take only the height it needs, so
   the block reads as a wall of voices rather than a tidy table of equal boxes.
   Columns, not grid, because quotes here vary from one line to five. */
.review-wall--offset {
  display: block;
  columns: 1;
  column-gap: var(--space-5);
}

.review-wall--offset > .review-card {
  break-inside: avoid;
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .review-wall--offset {
    columns: 2;
  }
}

@media (min-width: 1100px) {
  .review-wall--offset {
    columns: 3;
  }
}

/* Customer story rows */
.story-list {
  display: grid;
  gap: var(--space-7);
}

.story-row {
  position: relative;
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 24px 56px -40px rgba(15, 27, 45, 0.45);
}

.story-row__photo {
  border-radius: var(--radius-md);
}

.story-row__body {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.story-row h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 500;
}

.story-row h3 a {
  color: inherit;
  text-decoration: none;
}

.story-row p {
  color: var(--color-text-soft);
  line-height: 1.65;
}

.story-row .tag {
  justify-self: start;
}

/* Blog cards */
.post-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-6);
}

.post-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.post-card.is-hidden {
  display: none;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.post-card__title {
  font-size: 1.1875rem;
  font-weight: 500;
}

.post-card__title a {
  color: inherit;
  text-decoration: none;
}

.post-card:hover .post-card__title {
  color: var(--color-primary-ink);
}

.post-card__body > p:last-child {
  margin-top: var(--space-2);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Featured post in the blog hero */
.featured-post {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px -36px rgba(20, 45, 85, 0.5);
}

.featured-post__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.featured-post__label svg {
  width: 15px;
  height: 15px;
}

.featured-post__title {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 500;
}

.featured-post__title a {
  color: inherit;
  text-decoration: none;
}

.featured-post p:last-of-type {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Topic links */
.topic-links {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.topic-links a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}

.topic-links a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -30px rgba(15, 27, 45, 0.45);
}

.topic-links strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
}

.topic-links span span {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.topic-links__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.topic-links__icon svg {
  width: 18px;
  height: 18px;
}

.topic-links a > svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

/* Contact */
.contact-hero {
  display: grid;
  gap: var(--space-7);
  align-items: start;
  padding-bottom: var(--space-7);
}

.contact-routes {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.contact-routes a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--glass);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}

.contact-routes a:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -26px rgba(15, 27, 45, 0.45);
}

.contact-routes strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
}

.contact-routes span span,
.contact-routes a > span > span {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}

.contact-routes__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(236, 124, 32, 0.12);
  color: var(--brand-ink);
}

.contact-routes__icon svg {
  width: 20px;
  height: 20px;
}

.contact-routes a > svg {
  width: 17px;
  height: 17px;
  color: var(--color-text-muted);
}

.form-card {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 40px 90px -50px rgba(20, 45, 85, 0.55);
}

.form-success {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.form-success__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.form-success__icon svg {
  width: 26px;
  height: 26px;
}

.form-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.form-note svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--color-warning);
}

.form__actions {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.office-card--lg {
  padding: var(--space-7) var(--space-6);
}

.contact-trust {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.next-steps {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.next-steps li {
  display: grid;
  gap: 4px;
  padding-left: var(--space-7);
  position: relative;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.next-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-navy-fill);
  color: var(--color-always-white);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.next-steps strong {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 500;
}

/* London coverage card */
.coverage-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px -36px rgba(20, 45, 85, 0.5);
}

.coverage-card__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coverage-card__label svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary-ink);
}

.coverage-card__address {
  color: var(--color-text);
  font-size: 1.0625rem;
}

.coverage-card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-border-soft);
}

.coverage-card__stats strong {
  display: block;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
}

.coverage-card__stats span {
  color: var(--color-text-soft);
  font-size: 0.75rem;
}

.coverage-card__areas-label {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coverage-card__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.coverage-card__areas li {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

.hero--london .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero--london .eyebrow svg {
  width: 15px;
  height: 15px;
}

.hero--london .eyebrow::before {
  display: none;
}

@media (min-width: 640px) {
  .sector-directory,
  .review-wall,
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-row--wide {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1024px) {
  .sector-directory {
    grid-template-columns: repeat(4, 1fr);
  }

  .review-wall {
    grid-template-columns: repeat(3, 1fr);
  }

  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .story-row {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-7);
    padding: var(--space-6);
  }

  .story-row--flip .story-row__photo {
    order: 2;
  }

  .contact-hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .contact-trust {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .topic-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 23. ARTICLE BODY EXTRAS (tables and the mid-article CTA carried over from the
      client's own articles)
   ========================================================================== */
.prose table {
  width: 100%;
  margin-block: var(--space-6);
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  border-bottom-color: var(--color-border);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.prose tbody tr:nth-child(even) {
  background: var(--color-surface);
}

.prose blockquote {
  margin-block: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
  color: var(--color-text);
}

.cta-mid {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--panel-tint);
}

.cta-mid h2 {
  margin: 0;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: 500;
}

.cta-mid p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.cta-mid__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.cta-mid .btn--ghost {
  --btn-bg: var(--color-white);
  --btn-fg: var(--color-navy);
  --btn-border: var(--color-border);
}


/* 24. QA FIXES (layout faults found in the page-by-page audit)
   ========================================================================== */

/* The related-service card in the article sidebar is only ~250px wide, so the
   icon + text + arrow row has to stack. */
.article-aside .service-row {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.article-aside .service-row > svg {
  display: none;
}

/* Prose sits centred under its centred heading. */
.block-prose--wide,
.statement-wide .prose-cols {
  margin-inline: auto;
}

/* One paragraph has nothing to balance against, so the two-column rule strands it
   in the left column under a centred heading, with the right half left empty. */
.prose-cols:has(> p:only-child) {
  columns: initial;
  max-width: 68ch;
  text-align: center;
}

.block--statement .statement-wide {
  max-width: 100%;
}

/* A single card should not stretch the full container width. */
.detail-grid--1 {
  max-width: 640px;
}

/* Mid-article CTA heading, demoted from h2 so it stays out of the contents list. */
.cta-mid__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.25;
}

/* Partner logos vary in trim; keep them optically even inside their tiles. */
.partner-row img,
.cred-strip__list img {
  max-height: 44px;
}


/* 25. QA FIXES, ROUND TWO
   ========================================================================== */

/* Service rows sit in narrow columns on some pages, so let them fit the space. */
.related-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* A lone detail card should fill its row rather than leaving half of it blank. */
.detail-grid--1 {
  max-width: none;
  grid-template-columns: 1fr;
}

.mt-3 { margin-top: var(--space-3); }


/* 26. HEADER TOP ROW + CALL BLOCK
   The utility strip carries the contact details only. The page links it used to
   hold (Home, About, Our Customers, Blog, Locations, Contact) now live in the
   navigation bar itself. It collapses on scroll so the sticky header stays
   shallow, and it is desktop-only — the drawer carries the same details.
   ========================================================================== */
.header-top {
  display: none;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.header-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-top-h);
}

.header-top__contact {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.header-top__contact a,
.header-top__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-soft);
  text-decoration: none;
}

.header-top__contact a:hover {
  color: var(--color-primary-ink);
}

.header-top svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary-ink);
}

.header-top__note svg {
  color: var(--color-success);
}

/* The contact strip scrolls away with the page: the header sticks with the strip
   just above the top edge, so only the main bar stays in view. (It used to be
   hidden on scroll instead, which pulled the page up by its height, put the
   scroll marker back in view and re-showed it: the page fought the first
   few pixels of every scroll.) */
@media (min-width: 1100px) {
  .site-header {
    top: calc((var(--header-top-h) + 1px) * -1);
  }
}

@media (min-width: 1100px) {
  .header-top {
    display: block;
  }

  .hero--sky {
    margin-top: calc((var(--header-h) + var(--header-top-h)) * -1);
    padding-top: calc(var(--header-h) + var(--header-top-h) + var(--space-8));
  }
}


/* 27. HERO ENTRANCE
   The hero copy arrives in a short stagger. Transform and opacity only, and it
   is simply visible under prefers-reduced-motion.
   ========================================================================== */
:root {
  --ease-emphasis: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Staggered entrance for the hero copy. */
.reveal-up {
  animation: reveal-up 520ms var(--ease-emphasis) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Ticket feed */
/* Arrive, sit, then settle as the status flips. */
/* Footer metrics */
@media (prefers-reduced-motion: reduce) {
  /* Keep the information, drop the motion: everything shows as resolved. */
  .reveal-up {
    animation: none;
  }

  }

/* 28. PHOTOGRAPHY
   Cards that used to carry an icon now carry a photograph; these rules replace
   the icon treatment and keep the crops consistent.
   ========================================================================== */
.post-card__art,
.insight__art,
.sector-tile__photo {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.post-card__art img,
.insight__art img,
.sector-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-emphasis);
}

.post-card:hover .post-card__art img,
.insight:hover .insight__art img,
.sector-tile:hover .sector-tile__photo img {
  transform: scale(1.03);
}

/* Sector tiles lead with the photograph. */
.sector-tile--photo {
  padding: 0;
  overflow: hidden;
}

.sector-tile--photo > :not(.sector-tile__photo) {
  padding-inline: var(--space-5);
}

.sector-tile--photo > :nth-last-child(1) {
  padding-bottom: var(--space-5);
}

.sector-tile__photo {
  border-radius: 0;
  margin-bottom: var(--space-4);
}

.sector-tile--photo .sector-tile__num {
  padding-top: var(--space-4);
}


/* 28. DARK SURFACES
   The site is light only. A few surfaces are dark: every page hero, the header
   while it floats over one, and any `.section--ink` band. Rather than restyle
   each component for them, they re-declare the colour tokens below, so anything
   placed inside renders in the dark palette on its own. The rest of this section
   is what could not be a token: the hero gradients, the logo swap and the header
   and mega-menu literals.

   `:root[lang]` matches every page (the build always sets lang). It is there for
   weight only, so these rules outrank the plain component rules they replace.
   ========================================================================== */
:root[lang] .hero--sky,
:root[lang] .page--sky .site-header:not(.is-scrolled),
:root[lang] .section--ink {
  color-scheme: dark;

  /* Surfaces. --color-white keeps its name for the ~200 rules that use it to mean
     "the raised card surface"; in dark that surface is lifted slate, not white. */
  --color-page: #0d121b;
  --color-white: #151c28;
  --surface-card: #171e2b;
  --color-surface: #111721;
  --color-surface-2: #1d2534;
  --color-surface-blue: #16223a;

  --color-text: #e9eef7;
  --color-text-soft: #b7c2d2;
  --color-text-muted: #8a95a7;
  --color-heading: var(--color-text);

  --color-border: #2a3343;
  --color-border-soft: #212937;
  --color-border-hover: #3a4a66;

  --color-primary: #5b8dff;
  --color-primary-ink: #7fa8ff;
  --color-primary-dark: #7ea8ff;
  --color-primary-light: #1a2540;
  --color-navy: #9cbcff;
  --color-navy-dark: #b8d0ff;
  --color-navy-fill: #21458f;
  --color-slate: #94a2b8;
  --color-night: #070a0f;

  --color-accent: #35cde4;
  --color-accent-soft: #0f2f39;
  --color-accent-on-dark: #62e2f3;
  --brand-ink: var(--brand-orange);

  --color-violet: #9b8cff;

  /* The bands that were already dark now sit on a dark page, so they are pushed
     a step further down to stay readable as separate surfaces. */
  --color-navy-950: #04080e;
  --color-navy-900: #080e18;
  --color-navy-800: #0f1724;
  --color-navy-700: #1a2434;
  --color-on-dark: #e9eef7;
  --color-on-dark-muted: #9aa7ba;
  --color-line-dark: rgba(255, 255, 255, 0.12);

  --color-success: #3ecf9a;
  --color-success-soft: #0e2b22;
  --color-warning: #e2a33c;
  --color-warning-soft: #2e2313;
  --color-error: #ef6b6b;
  --color-error-soft: #33181a;

  --tone-support: #6a9bff;
  --tone-support-soft: #172341;
  --tone-cloud: #3ec2d8;
  --tone-cloud-soft: #0f2c34;
  --tone-cyber: #9d8cff;
  --tone-cyber-soft: #201d3d;
  --tone-network: #3fc4a8;
  --tone-network-soft: #0f2b26;
  --tone-projects: #e0a44e;
  --tone-projects-soft: #30240f;

  --gradient-signal: linear-gradient(135deg, #3b7bff 0%, #17a2bd 100%);
  --gradient-deep: linear-gradient(160deg, #080e18 0%, #0f1724 55%, #17284a 100%);
  --gradient-glow: radial-gradient(closest-side, rgba(91, 141, 255, 0.22), rgba(91, 141, 255, 0));
  --gradient-glow-cyan: radial-gradient(closest-side, rgba(53, 205, 228, 0.22), rgba(53, 205, 228, 0));

  --glass: rgba(24, 31, 43, 0.82);
  --glass-strong: rgba(24, 31, 43, 0.92);
  --panel-tint: linear-gradient(150deg, #172033 0%, #141d2f 60%, #131b2c 100%);
  --panel-tint-soft: linear-gradient(160deg, #172033, #141d2f);
  --photo-filter: brightness(0.92) contrast(1.02);
  --logo-plate: #eef1f6;
  --logo-plate-pad: 4px 6px;
  --tile-gloss: none;
  --tile-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --color-primary-fill: #2f6fe8;
  --color-primary-fill-hover: #3b7bff;
  --icon-tile-neutral: rgba(255, 255, 255, 0.05);
  --num-stroke: #33436b;
  --quote-mark: rgba(236, 124, 32, 0.34);
  --bar-track: #1d2534;
  --svc-icon-border: #2f4270;
  --svc-icon-bg: radial-gradient(circle at 50% 35%, #1d2740, #141c2c);

  /* Shadows carry no weight on a dark page; borders do. Keep them deep and soft
     so cards read as lifted rather than outlined twice. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 28px 64px -16px rgba(0, 0, 0, 0.7);
  --shadow-focus: 0 0 0 3px rgba(91, 141, 255, 0.45);
}

/* ---- Brand logo: one wordmark per theme ---- */
.brand__logo {
  display: block;
}

.brand__logo--dark {
  display: none;
}

:root[lang] .page--sky .site-header:not(.is-scrolled) .brand__logo--light {
  display: none;
}

:root[lang] .page--sky .site-header:not(.is-scrolled) .brand__logo--dark {
  display: block;
}

/* ---- Theme toggle ---- */
.mobile-nav__head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}


/* ---- Dark theme: the literals that could not become tokens ---- */
:root[lang] .hero--sky {
  /* The sky gradients are the site's signature. In dark they run from a deep
     navy down into the page colour, keeping the same top-lit shape. */
  --sky-top: #16233b;
  --sky-mid: #131c2d;
}

:root[lang] .hero--sky {
  background:
    radial-gradient(38% 22% at 18% 16%, rgba(91, 141, 255, 0.16), transparent 70%),
    radial-gradient(30% 14% at 42% 8%, rgba(91, 141, 255, 0.1), transparent 70%),
    radial-gradient(60% 40% at 80% 70%, rgba(236, 124, 32, 0.16), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 30%, var(--color-page) 78%);
}

:root[lang] .hero--tone-cyber {
  background-image:
    radial-gradient(40% 30% at 20% 14%, rgba(157, 140, 255, 0.2), transparent 70%),
    linear-gradient(180deg, #1d1b3a 0%, #161a2c 32%, var(--color-page) 80%);
}

:root[lang] .hero--tone-cloud {
  background-image:
    radial-gradient(40% 30% at 20% 14%, rgba(62, 194, 216, 0.18), transparent 70%),
    linear-gradient(180deg, #102b34 0%, #121d29 32%, var(--color-page) 80%);
}

:root[lang] .hero--tone-network {
  background-image:
    radial-gradient(40% 30% at 20% 14%, rgba(63, 196, 168, 0.18), transparent 70%),
    linear-gradient(180deg, #0f2b26 0%, #121e26 32%, var(--color-page) 80%);
}

:root[lang] .hero--tone-projects {
  background-image:
    radial-gradient(40% 30% at 20% 14%, rgba(224, 164, 78, 0.16), transparent 70%),
    linear-gradient(180deg, #2c2313 0%, #1d1b20 32%, var(--color-page) 80%);
}

:root[lang] .hero--home,
:root[lang] .hero--support,
:root[lang] .hero--cloud,
:root[lang] .hero--network,
:root[lang] .hero--projects {
  background: linear-gradient(180deg, var(--sky-mid) 0%, var(--color-page) 100%);
}

:root[lang] .page--sky .site-header:not(.is-scrolled) .header-top {
  background: #16233b;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Panels that hardcoded a light wash or a light-blue tint. */
/* Status chips: dark tints instead of pastel fills. */
/* Vendor and accreditation artwork is supplied as dark logos on a transparent
   background, so on a dark page it disappears. They get a light plate instead —
   the same thing a print sheet does with a vendor mark on a dark cover. */

/* ---- Small-phone header (mobile first) ----
   At 320px the full bar — 150px wordmark, theme switch and a labelled Menu
   button — is wider than the viewport, which pushed the whole document 21px
   sideways on every page. The compact treatment is the base; the roomier one
   comes back as soon as there is width for it. */
.brand img {
  width: auto;
  height: 26px;
}

.menu-toggle {
  gap: 0;
  padding: 0;
  width: 44px;
  justify-content: center;
}

/* The label is decoration next to the icon; the button keeps its accessible
   name from aria-controls/aria-expanded and the icon stays 44px. */
.menu-toggle > span {
  display: none;
}

@media (min-width: 400px) {
  .brand img {
    height: 30px;
  }

  .menu-toggle {
    gap: var(--space-2);
    width: auto;
    padding: 0 var(--space-4);
  }

  .menu-toggle > span {
    display: inline;
  }
}

/* Standalone links need a 24px target (WCAG 2.5.8). Links that sit inline in a
   sentence are exempt, so .more-link and prose links are left alone. */

.rating-bar__link {
  min-height: 24px;
  padding-block: 2px;
}

/* Wide content inside article prose scrolls on its own rather than widening the
   page. The wrapper is added in content.mjs; the focusable region means keyboard
   users can reach the scroll too. */
/* A grid item defaults to min-width:auto, which means "never shrink below my
   content". Without these the overflow:auto below never gets a chance to fire and
   the table drags the whole page sideways instead. */
.article-layout > *,
.prose,
.table-scroll {
  min-width: 0;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 34rem;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.prose {
  overflow-wrap: break-word;
}

.prose pre {
  max-width: 100%;
  overflow-x: auto;
}

/* ---- Dark theme: header and menu ----
   Three things read wrong in dark. The bar sat transparent over the navy sky on
   the sky pages while the mega panel below it was slate, so the two halves of one
   component were different colours. The icon tiles carry a 70%-white gloss that
   is invisible on white but turns every dark tint into washed grey-brown. And the
   plain menu icons were muted grey on a dark panel, which is under-contrast. */
:root[lang] .page--sky .site-header:not(.is-scrolled) {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
}

:root[lang] .page--sky .site-header:not(.is-scrolled) .header-top {
  background: var(--color-surface);
  border-bottom-color: var(--color-border-soft);
}

/* The *-soft tints are pastel washes built for a white page. On dark they read as
   mud, so the tile goes neutral and the accent lives in the icon alone. */
:root[lang] .page--sky .site-header:not(.is-scrolled) .mega-link--plain svg {
  color: var(--color-primary);
}

:root[lang] .page--sky .site-header:not(.is-scrolled) .mega-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

:root[lang] .page--sky .site-header:not(.is-scrolled) .mega-feature {
  border: 1px solid var(--color-border-soft);
}

/* ---- Surface-following component bits ----
   These used to be dark-theme overrides. They are tokens now so that a light band
   inside the dark theme gets the light treatment automatically, instead of every
   one of them needing a second override scoped to the band. */
.media img,
.article-cover img {
  filter: var(--photo-filter);
}

.btn--primary {
  --btn-bg: var(--color-primary-fill);
  --btn-bg-hover: var(--color-primary-fill-hover);
}

/* Vendor artwork is dark logos on transparency: on a dark surface it needs a
   light plate, on a light surface it needs nothing. */
.partner-row li {
  background: var(--color-white);
}

.cred-card img,
.cred-inline img {
  padding: var(--logo-plate-pad);
  border-radius: 6px;
  background: var(--logo-plate);
}

/* The pastel *-soft tints are built for a white page and read as mud on a dark
   one, so the mega tiles go neutral there and the accent lives in the icon. */
.mega-link .icon-tile {
  --tile-bg: var(--icon-tile-neutral);
}


/* 30. BOLD REDESIGN
   Heavier type, squared actions, dark ink heroes and bands, photo-led cards.
   The dark surfaces take their palette from section 28 (see the note there), so
   this section only has to lay things out.
   ========================================================================== */

/* Body copy is inherited from <body>, which resolved it against the light palette
   before any of these surfaces re-declared the tokens. Re-resolve it here. */
:root[lang] .hero--sky,
:root[lang] .page--sky .site-header:not(.is-scrolled),
:root[lang] .section--ink {
  color: var(--color-text-soft);
}

:root[lang] .section--ink {
  background:
    radial-gradient(50% 60% at 0% 100%, rgba(31, 107, 255, 0.16), transparent 70%),
    radial-gradient(40% 50% at 100% 0%, rgba(53, 205, 228, 0.08), transparent 70%),
    var(--color-navy-950);
}

/* ---- Home: rhythm ---- */
.page--home .section {
  padding-block: clamp(72px, 8vw, 120px);
}

.page--home .section--tight {
  padding-block: clamp(56px, 6vw, 88px);
}

/* ---- Home: photo hero ----
   The office and the van carry the hero, the way a real storefront would. The
   copy sits on a dark wash that clears towards the right so the photo reads, and
   the bottom leaves room for the proof strip to overlap. */
.hero-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(128px, 12vw, 176px);
}

.hero-home__bg {
  position: absolute;
  inset: 0 0 clamp(80px, 8vw, 112px);
  z-index: -2;
  aspect-ratio: auto;
  border-radius: 0;
  background: #0b111b;
}

.hero-home__bg img {
  object-position: 72% 55%;
}

/* Literal colours on purpose: the wash has to stay dark whichever chapter the
   dark theme's scroll swap happens to be on. */
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 0% 0%, rgba(31, 107, 255, 0.32), transparent 70%),
    linear-gradient(180deg, rgba(11, 17, 27, 0.78) 0%, rgba(11, 17, 27, 0.9) 55%, #0b111b 100%);
}

.hero-home__inner {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
  padding-top: clamp(16px, 4vw, 56px);
}

.hero-home__copy {
  max-width: 660px;
}

.hero-home__title {
  font-size: clamp(2.75rem, 1.35rem + 5.2vw, 5.1rem);
}

.hero-home__title span {
  display: block;
}

.hero-home .hero-sky__lead {
  color: rgba(233, 238, 247, 0.86);
}

/* Capped below desktop so its four fields keep the two-column layout instead of
   squeezing into one row on tablets. */
.hero-home__form {
  max-width: 640px;
}

/* The form on frosted glass: the van stays visible through it. */
.hero-home .callback {
  margin-top: 0;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(13, 18, 27, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.hero-home__clients {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-home__clients-label {
  color: rgba(233, 238, 247, 0.7);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
}

.hero-home__clients .logo-row {
  margin-top: 0;
}

.hero-home__clients .logo-row img {
  max-width: 112px;
  height: 38px;
  margin-inline: 0;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .hero-home__clients .logo-row {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1024px) {
  .hero-home__inner {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    align-items: center;
    column-gap: clamp(40px, 5vw, 80px);
  }

  .hero-home__clients {
    grid-column: 1 / -1;
  }

  .hero-home::before {
    background:
      radial-gradient(55% 70% at 0% 0%, rgba(31, 107, 255, 0.34), transparent 70%),
      linear-gradient(90deg, #0b111b 0%, rgba(11, 17, 27, 0.94) 30%, rgba(11, 17, 27, 0.55) 58%, rgba(11, 17, 27, 0.2) 100%),
      linear-gradient(0deg, #0b111b 0%, transparent 18%);
  }
}

/* ---- Home: proof strip ----
   Pulled up over the hero's foot so it rests across the join. Each figure leads
   with the number, set heavy and shaded from heading ink into its own tone; the
   label sits under it beside a small tone tile. A gradient hairline in the brand
   colours frames the whole strip. */
.home-strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(-112px, -8vw, -80px);
  padding-bottom: var(--space-2);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(120deg, var(--brand-orange), var(--brand-ember) 45%, var(--color-navy)) border-box;
  box-shadow: 0 40px 80px -40px rgba(10, 22, 40, 0.5);
}

.stat-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(22px, 3vw, 40px);
  transition: background-color var(--dur) var(--ease-out);
}

.stat-strip__item:hover {
  background: color-mix(in srgb, var(--tile-fg) 6%, transparent);
}

.stat-strip__item:nth-child(odd) {
  border-right: 1px solid var(--color-border-soft);
}

.stat-strip__item:nth-child(-n + 2) {
  border-bottom: 1px solid var(--color-border-soft);
}

.stat-strip__value {
  order: -1;
  background: linear-gradient(120deg, var(--color-heading) 15%, var(--tile-fg) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.stat-strip__item dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.stat-strip__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--tile-bg);
  color: var(--tile-fg);
}

.stat-strip__icon svg {
  width: 17px;
  height: 17px;
}

.home-strip__source {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

@media (min-width: 900px) {
  .stat-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-strip__item:nth-child(n) {
    border-right: 1px solid var(--color-border-soft);
    border-bottom: 0;
  }

  .stat-strip__item:last-child {
    border-right: 0;
  }
}

/* ---- Home: services band ----
   A sticky stage beside a ruled list; see "services stage" further down. */
.home-services__grid {
  display: grid;
  gap: var(--space-7);
}

.home-services__body > .lead {
  margin-top: var(--space-5);
}

.svc-list {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.svc-row__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1d2740, #101726);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: var(--tone, #62e2f3);
}

.svc-row__icon svg {
  width: 24px;
  height: 24px;
}

.svc-row__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast);
}

.svc-row__title svg {
  width: 24px;
  height: 24px;
  flex: none;
  stroke-width: 2.25;
  transition: transform var(--dur) var(--ease-out);
}

.svc-row:hover .svc-row__title {
  color: var(--color-primary-ink);
}

.svc-row:hover .svc-row__title svg {
  transform: translateX(6px);
}

.svc-row p {
  margin-top: var(--space-2);
  max-width: 62ch;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .home-services__grid {
    grid-template-columns: minmax(340px, 0.85fr) 1.15fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .home-services__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
  }

  .svc-row {
    grid-template-columns: 64px 1fr;
    gap: var(--space-6);
    padding-block: var(--space-7);
  }

  .svc-row__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
}

/* ---- Home: photo tiles (case studies and sectors) ----
   The photo is the card. Title and summary sit on a dark wash at the foot, and
   the whole tile is the link. */
.case-grid {
  display: grid;
  gap: var(--space-5);
}

.case-tile {
  position: relative;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: #0b111b;
}

.case-tile > *,
.case-tile::before {
  grid-area: 1 / 1;
}

.case-tile::before {
  content: "";
  z-index: 0;
  background: linear-gradient(0deg, rgba(8, 12, 20, 0.94) 0%, rgba(8, 12, 20, 0.62) 42%, rgba(8, 12, 20, 0) 72%);
  pointer-events: none;
}

.case-tile__art {
  z-index: -1;
  border-radius: 0;
}

.case-tile__art img {
  transition: transform 700ms var(--ease-out);
}

.case-tile:hover .case-tile__art img {
  transform: scale(1.05);
}

.case-tile__body {
  z-index: 1;
  align-self: end;
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: clamp(20px, 2.2vw, 28px);
  color: rgba(255, 255, 255, 0.8);
}

.case-tile__tag {
  margin-bottom: var(--space-1);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.case-tile__title {
  color: #fff;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.case-tile__body p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.875rem;
  line-height: 1.5;
}

.case-tile .card-link:focus-visible::after {
  outline-offset: -3px;
  outline-color: #fff;
}

@media (min-width: 640px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .case-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Phones. The services link is a way onward, so it follows the list rather than
   sitting above the heading, and case tiles go square to keep the page short. */
@media (max-width: 1023px) {
  .home-services__aside {
    order: 1;
  }
}

@media (max-width: 639px) {
  .case-tile__art {
    aspect-ratio: 1 / 1;
  }
}

/* Four case studies only fit four-up once each tile can hold its summary. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Home: statement under the proof strip ----
   The hero's paragraph, moved out so the hero is just the promise and the
   actions. Set large, it reads as the page's opening statement. */
.home-strip__lead {
  max-width: 58ch;
  margin-top: clamp(40px, 5vw, 64px);
  color: var(--color-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* ---- Home: case tile cue ---- */
.case-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-1);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

.case-tile__more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.case-tile:hover .case-tile__more svg {
  transform: translateX(4px);
}

/* ---- Home: services stage ----
   Desktop only. The stage sticks beside the list; app.js marks the row being
   read and writes --svc-progress (0 → 1 down the list). The active service takes
   the stage in its own tone, its outlined numeral and colour glow drift at
   different rates as you scroll, and the rail along the foot fills. Rows that
   are not being read step back so the eye stays on one service at a time. */
.svc-stage {
  display: none;
}

@media (min-width: 1024px) {
  .home-services__aside {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
  }

  .svc-stage {
    position: relative;
    display: block;
    width: 100%;
    height: min(520px, calc(100vh - var(--header-h) - 190px));
    min-height: 380px;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, #151e2f 0%, #0b111b 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.6);
    color: #fff;
  }

  .svc-stage__slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: end;
    justify-items: start;
    gap: var(--space-5);
    padding: var(--space-7) var(--space-7) calc(var(--space-7) + 4px);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out);
  }

  .svc-stage__slide.is-active {
    opacity: 1;
    transform: none;
  }

  .svc-stage__glow {
    position: absolute;
    z-index: -1;
    top: -25%;
    right: -30%;
    width: 95%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 55%, transparent), transparent);
    transform: translate3d(0, calc(var(--svc-progress, 0) * 140px), 0);
  }

  .svc-stage__num {
    position: absolute;
    z-index: -1;
    top: var(--space-5);
    left: calc(var(--space-7) - 0.06em);
    color: transparent;
    font-family: var(--font-heading);
    font-size: clamp(8rem, 11vw, 11.5rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.06em;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16);
    transform: translate3d(0, calc(var(--svc-progress, 0) * -64px), 0);
  }

  .svc-stage__icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--tone) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent);
    color: var(--tone);
  }

  .svc-stage__icon svg {
    width: 40px;
    height: 40px;
  }

  .svc-stage__title {
    max-width: 12ch;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
  }

  .svc-stage__count {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .svc-stage__now {
    color: #fff;
  }

  .svc-stage__rail {
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
  }

  .svc-stage__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    transform: scaleX(var(--svc-progress, 0));
    transform-origin: left;
  }

  /* Rows step back only once the script is driving the stage. */
  .svc-row::before {
    content: "";
    position: absolute;
    top: var(--space-7);
    bottom: var(--space-7);
    left: calc(var(--space-6) * -1);
    width: 3px;
    border-radius: 2px;
    background: var(--tone);
    transform: scaleY(0);
    transition: transform 450ms var(--ease-out);
  }

  .is-staged .svc-row.is-active::before {
    transform: scaleY(1);
  }

  .is-staged .svc-row__icon,
  .is-staged .svc-row__body {
    transition: opacity 400ms var(--ease-out);
  }

  .is-staged .svc-row:not(.is-active):not(:hover) .svc-row__icon,
  .is-staged .svc-row:not(.is-active):not(:hover) .svc-row__body {
    opacity: 0.38;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .svc-stage__slide,
  .svc-stage__glow,
  .svc-stage__num {
    transform: none;
  }

  .svc-stage__slide {
    transition: opacity 150ms linear;
  }
}

/* ---- Inner pages: feature photo across the hero's foot ----
   A wide photo that starts inside the dark hero and finishes on the page below,
   so the two sections read as one. The hero grows by the overlap to make room. */
:root {
  --feature-overlap: clamp(72px, 9vw, 150px);
}

.hero--page.has-feature {
  padding-bottom: calc(var(--space-7) + var(--feature-overlap));
}

.hero-feature {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--feature-overlap) * -1);
}

.hero-feature .media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 80px -40px rgba(10, 22, 40, 0.55);
}

@media (min-width: 768px) {
  .hero-feature .media {
    aspect-ratio: 21 / 8;
  }
}

/* ---- Inner pages: tighter rhythm ----
   Sections on the inner pages ran at up to 96px top and bottom, so every join
   was nearly 200px of nothing. The home page keeps its own, roomier rhythm. */
.page--sky:not(.page--home) .section {
  padding-block: clamp(40px, 4vw, 64px);
}

.page--sky:not(.page--home) .section--tight {
  padding-block: clamp(32px, 3vw, 48px);
}

.page:not(.page--home) .block {
  padding-block: clamp(32px, 3.5vw, 56px);
}

.page:not(.page--home) .block--statement + .block {
  padding-top: clamp(32px, 3.5vw, 56px);
}

/* Stacked content blocks. A section that pairs text with a card, tabs or an
   accordion no longer splits left/right: that squeezed the heading into a 34ch
   column. Heading and prose run across the row, the component sits below.
   Text-and-photo splits on the overview pages keep their two columns. */
.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Text first, component second, whatever the source order or --flip. */
.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) > * {
  order: 0;
}

.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) > :is(.check-card, .check-grid, .tabs, .faq-panel) {
  order: 1;
}

.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) .block-head {
  max-width: none;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}

.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) .block-head > p,
.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) .block-prose {
  max-width: 75ch;
}

/* Full-width card: no longer sticky, and its list flows into columns. */
.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) .check-card {
  position: static;
}

.block-split:has(> .check-card, > .check-grid, > .tabs, > .faq-panel) .check-card ul {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: var(--space-6);
}

.block-split:has(> .tabs) .tabs__panel {
  max-width: 80ch;
}

/* Before/after list pairs read side by side. */
.check-grid {
  display: grid;
  gap: var(--space-5);
}

.block-split .check-grid .check-card ul {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .check-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 30. RELIEF
   The About page and every inner-page hero share one idea: surfaces are pressed
   metal lit from the top left. Raised things carry a highlight on their top edge
   and a shadow under them; engraved things the reverse. Motion is light and
   pressure: the headline powers on, the proof lights switch on, the value keys
   are typed, the mission is engraved as it scrolls up.
   ========================================================================== */
:root {
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --relief-overlap: clamp(110px, 15vw, 250px);
  --plate-metal: linear-gradient(150deg, #36445c 0%, #1a2332 46%, #0f1622 100%);
  --plate-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.55);
  --steel: linear-gradient(165deg, #fafcfe 0%, #eef2f7 55%, #e3e9f1 100%);
}

/* ---- Headline light sweep (inner-page heroes) ----
   A band of light crosses the headline once as it loads. The sweep is the
   background of a 300%-wide gradient clipped to the text: lit | flare | unlit,
   slid from the unlit end to the lit end. drop-shadow (not text-shadow) because
   a text-shadow would show through the transparent fill. */
.hero-stack__title {
  --lit: var(--color-heading);
  --unlit: rgba(255, 255, 255, 0.07);
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  background-image: linear-gradient(100deg, var(--lit) 0%, var(--lit) 33%, #ffffff 40%, var(--unlit) 47%, var(--unlit) 100%);
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2))
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.5))
    drop-shadow(0 20px 26px rgba(0, 0, 0, 0.35));
}

@keyframes relief-light {
  from { background-position: 100% 0; }
}

@keyframes relief-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Out of focus and slightly low, then sharp and in place. */
@keyframes relief-focus {
  from {
    opacity: 0;
    transform: translateY(0.35em);
    filter: blur(10px);
  }
}

/* ---- About: hero ----
   Centred, so it sits square over the fan of photo plates beneath it. */


/* The nameplate: raised metal in the logo's charcoal, brand-orange type, a sheen that crosses it
   once. box-decoration-break gives each wrapped line its own plate on phones. */


@keyframes plate-sheen {
  from { background-position: 160% 0, 0 0; }
}


/* ---- About: relief stage ----
   Three photo plates dealt out from one stack, with the rating and certification
   as pressed seals. The stage straddles the hero's foot and the page below, and
   tilts toward the pointer (app.js sets --rx, --ry and --sheen). */


/* Sheen: a soft band of light that slides with the tilt. */


@keyframes relief-deal {
  from {
    opacity: 0;
    transform: translate(var(--from-x), 22%) scale(0.8);
  }
}


@keyframes relief-seal {
  from {
    opacity: 0;
    transform: translateZ(80px) scale(0.3) rotate(-25deg);
  }
}

/* A round medallion: raised face, a machined ring round it. */


/* ---- About: values as keys ---- */


/* The tray is recessed: shadow on its inside top edge, light on its lip.
   [role] outranks the list reset in the base layer, which zeroes the padding. */


/* Backlight under the cap. */


/* The cap's dished top. */


/* Typed in turn, then left backlit. */
@keyframes key-press {
  0%,
  100% {
    transform: translateY(0);
  }

  28% {
    transform: translateY(6px);
    box-shadow:
      inset 0 1px 0 #ffffff,
      inset 0 -2px 0 rgba(15, 27, 45, 0.05),
      0 0 0 #c6d0de,
      0 1px 0 #b1bdd0,
      0 6px 10px -6px rgba(15, 27, 45, 0.4);
  }
}

@keyframes key-glow {
  0% { opacity: 0; }
  28% { opacity: 1; }
  100% { opacity: 0.4; }
}


/* ---- About: mission card ----
   Centred: a slim photo banner in a recessed window, a quote medallion pressed
   onto its lower edge, the mission engraved beneath, then the detail. */


/* Engraved: ink darker than the steel, a highlight on the lower lip of each
   stroke and a shadow on the upper one. */


/* Scroll-driven where supported: the photo drifts inside its window. The
   statement itself stays still and solid. */


@keyframes plaque-drift {
  from { transform: scale(1.14) translateY(-4%); }
  to { transform: scale(1.14) translateY(4%); }
}

/* ---- Inner pages: stacked hero ----
   Headline across the full row, lead and actions under it, then whatever used
   to sit in the side column (proof figures, a featured article, the service
   index) running full width below. The headline gets the same light sweep as
   the About page, once, faster. */
.hero-stack .hero-stack__title {
  max-width: none;
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5.1rem);
  line-height: 1.02;
  text-wrap: balance;
  animation: relief-light 1.3s var(--ease-in-out) 200ms backwards;
}

.hero-stack .hero-sky__lead {
  max-width: 60ch;
}

.hero-stack__aside {
  margin-top: var(--space-7);
  animation: relief-in 700ms var(--ease-out) 300ms backwards;
}

/* Whatever runs across the hero's foot is one raised faceplate: the proof
   figures, London's coverage panel, the IT services index. */
.faceplate,
.hero-stack__aside .coverage-card,
.hero-stack__aside .service-index {
  border-radius: 18px;
  background: linear-gradient(180deg, #1c2536 0%, #141c29 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 24px 48px -24px rgba(0, 0, 0, 0.8);
}

/* Proof figures: a groove between units. */
.faceplate {
  display: grid;
  padding: 0;
  list-style: none;
}

.faceplate__unit {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: center;
  padding: 20px 44px 20px 22px;
}

.faceplate__unit + .faceplate__unit {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.045);
}

/* A debossed well for the icon. */
.faceplate__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--brand-orange);
  background: linear-gradient(180deg, #0f1521 0%, #18202e 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.faceplate__icon svg {
  width: 20px;
  height: 20px;
}

.faceplate__unit strong {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
}

.faceplate__unit > span:last-child {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
}

/* Status light: flickers on in turn, then stays lit. */
.faceplate__led {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ecf9a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 10px 1px rgba(62, 207, 154, 0.75);
  animation: led-on 900ms linear backwards;
  animation-delay: calc(700ms + var(--i) * 220ms);
}

@keyframes led-on {
  0%,
  40% {
    background: #1d2b2b;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
  }

  50% {
    background: #3ecf9a;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 10px 1px rgba(62, 207, 154, 0.75);
  }

  62% {
    background: #1d2b2b;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 768px) {
  .faceplate {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .faceplate__unit + .faceplate__unit {
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.6), inset 2px 0 0 rgba(255, 255, 255, 0.045);
  }
}

/* London: the coverage panel in three columns. */
.hero-stack__aside .coverage-card {
  gap: var(--space-5);
}

.hero-stack__aside .coverage-card > div {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.hero-stack__aside .coverage-card .coverage-card__stats {
  grid-template-columns: repeat(2, auto);
  gap: var(--space-6);
  margin-top: 0;
}

@media (min-width: 1024px) {
  .hero-stack__aside .coverage-card {
    grid-template-columns: 1fr auto 1.5fr;
    align-items: center;
    gap: var(--space-7);
  }

  .hero-stack__aside .coverage-card .coverage-card__stats {
    padding: 0 var(--space-7);
    border-block: 0;
    border-inline: 1px solid var(--color-border-soft);
  }

  /* IT services hub: the index becomes a row of five tiles. The 01–05 numbers
     only restated list order, so the tiles drop them. */
  .hero-stack__aside .service-index ul {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
  }

  .hero-stack__aside .service-index a {
    grid-template-columns: 1fr auto;
    grid-template-areas: "icon arrow" "text text";
    align-content: start;
    align-items: start;
    height: 100%;
    padding: var(--space-4);
  }

  .hero-stack__aside .service-index__num {
    display: none;
  }

  .hero-stack__aside .service-index__icon {
    grid-area: icon;
  }

  .hero-stack__aside .service-index a > span:nth-child(3) {
    grid-area: text;
  }

  .hero-stack__aside .service-index a > svg {
    grid-area: arrow;
  }
}

@media (prefers-reduced-motion: reduce) {
  
  .hero-stack .hero-stack__title,
  .hero-stack__aside,
  .faceplate__led {
    animation: none !important;
  }

  

  
}


/* 31. CALLBACK FORM
   The live site's "Request a callback" form, at the top of every page that had
   it. A quiet surface in the hero with the logo's orange as a short lit edge;
   the fields are the site's own (.field), so the form follows the dark hero
   palette and the light article header without overrides. Laid out by its own
   width (container queries), because it sits in a 660px column on the home page
   and across 1240px elsewhere.
   ========================================================================== */
.callback {
  position: relative;
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 48px -30px rgba(0, 0, 0, 0.55);
  text-align: left;
  container-type: inline-size;
}

.callback::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-5);
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-flame);
}

.callback__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
  font-size: var(--fs-small);
}

.callback__head strong {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
}

.callback__row {
  display: grid;
  gap: var(--space-4);
}

/* Fields read as wells pressed into the surface. */
.callback .field__input {
  min-height: 48px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16);
}

.callback .field__input:focus {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16), var(--shadow-focus);
}

/* One line to start, growing with what is typed where the browser can. */
.callback textarea.field__input {
  min-height: 48px;
  max-height: 160px;
  resize: none;
  field-sizing: content;
}

.callback__submit {
  min-height: 48px;
  justify-self: stretch;
}

@container (min-width: 400px) {
  .callback__row {
    grid-template-columns: 1fr 1fr;
  }

  .callback__message,
  .callback__submit,
  .callback--phone .callback__row > .field:first-child {
    grid-column: 1 / -1;
  }
}

/* Wide: one row. Each field is a subgrid over label / input / error rows, so the
   inputs line up whatever the labels say, and the button sits on the input row. */
@container (min-width: 820px) {
  .callback__row {
    grid-template-columns: 1fr 1fr 1.5fr auto;
    grid-template-rows: auto auto auto;
    gap: var(--space-2) var(--space-4);
  }

  .callback--phone .callback__row {
    grid-template-columns: 1fr 1fr 1fr 1.5fr auto;
  }

  .callback__row > .field {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }

  .callback__message,
  .callback--phone .callback__row > .field:first-child {
    grid-column: auto;
  }

  .callback__submit {
    grid-row: 2;
    grid-column: -2;
    align-self: start;
  }
}

.callback__success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.callback__success svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--color-success);
}

.callback__success strong {
  color: var(--color-text);
}

.callback__success a {
  color: var(--color-navy);
  font-weight: 600;
}

/* Inside the hero stack, the form and the proof faceplate below it are both
   surfaces; the note line between them keeps them apart. */
.hero-stack .callback + .hero-sky__note {
  margin-top: var(--space-4);
}

/* Live forms (WordPress): reCAPTCHA is revealed on the first press of submit
   (app.js sendLive), and a failed send shows the live site's error line. */
.captcha-row {
  display: none;
  margin-top: var(--space-4);
}

.captcha-row.is-armed {
  display: grid;
  gap: var(--space-2);
}

.captcha-row.has-error .field__error {
  display: flex;
}

.form-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  background: var(--color-error-soft);
  color: var(--color-error);
  font-size: var(--fs-small);
}


/* 32. POST COVERS
   Blog cards show the category icon on its tint instead of a photograph, as the
   cards on staging do. These follow the photo rules in 28, so they win.
   ========================================================================== */
.post-cover.post-card__art,
.post-cover.insight__art {
  background: var(--tile-bg);
  color: var(--tile-fg);
}

.post-cover.post-card__art {
  aspect-ratio: 3 / 2;
}

/* The enquiry box staging has in the middle of four articles: intro, phone and
   a review on one side, a short message form on the other; stacked when narrow. */
.enquiry {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-6);
  align-items: start;
}

.enquiry__intro {
  display: grid;
  gap: var(--space-3);
}

.enquiry__proof {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.prose .enquiry__proof blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  font-style: normal;
}

.enquiry__proof blockquote p {
  color: var(--color-text);
}

.prose .enquiry__proof figcaption {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  text-align: left;
}

/* .cta-mid p sets every paragraph's size and colour; these two outrank it. */
.cta-mid p.cta-mid__title {
  color: var(--color-text);
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
}

.cta-mid .enquiry__stars {
  color: var(--brand-orange);
  letter-spacing: 0.12em;
}

.enquiry__form {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.enquiry__form form {
  display: grid;
  gap: var(--space-4);
}

.enquiry__head {
  display: grid;
  gap: 2px;
}

.enquiry__head strong {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}


/* 33. HOME SPACING
   Industries, Pricing, Partners and Insights share one background, so each pair
   of full home paddings (.page--home .section, up to 120px each) read as a
   200px+ empty band. Where they meet, each side keeps about half.
   ========================================================================== */
.page--home .home-sectors {
  padding-bottom: clamp(36px, 4vw, 60px);
}

.page--home .home-pricing {
  padding-block: clamp(36px, 4vw, 60px);
}

.page--home .home-partners {
  padding-block: clamp(28px, 3vw, 44px);
}

.page--home .home-insights {
  padding-top: clamp(36px, 4vw, 60px);
}

/* The pricing card's heading sat directly on its paragraph. */
.plan-detail--single h2 + p {
  margin-top: var(--space-4);
}


/* 34. STAGING FEEDBACK, SEPTEMBER 2026
   Larger client logos, partner logos that fill their tiles, the Google rating
   as a link, the About photo carousel, WhizzIT's own photos across inner-page
   heroes, and the contact page's offices on their maps.
   ========================================================================== */

/* ---- Home: client logos, larger ---- */
.hero-home__clients .logo-row {
  gap: var(--space-4) var(--space-6);
}

.hero-home__clients .logo-row img {
  max-width: 100%;
  height: clamp(44px, 4.6vw, 64px);
  opacity: 0.85;
}

/* ---- Partner tiles: the logo fills its tile ----
   The files are trimmed to the mark, so contain scales each one to the tile's
   full width or height, whichever it meets first. */
.partner-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(84px, 7vw, 104px);
  padding: 12px 14px;
}

.partner-row img {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.partner-row--inline li {
  height: 72px;
  padding: 10px;
}

/* ---- Home: the Google rating links to the reviews ----
   The link stretches over the whole tile (.card-link). */
.stat-strip__item--link {
  position: relative;
}

.stat-strip__more {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
}

.stat-strip__more a {
  color: var(--tile-fg);
}

/* Inline, so on a narrow tile the arrow wraps with the last word. */
.stat-strip__more svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
  transition: transform var(--dur) var(--ease-out);
}

.stat-strip__item--link:hover .stat-strip__more svg {
  transform: translateX(3px);
}

/* ---- Home: About photo carousel ----
   A scroll-snap track inside the 4:3 frame; controls float on the photo. */
.photo-carousel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.photo-carousel__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.photo-carousel__track::-webkit-scrollbar {
  display: none;
}

.photo-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.photo-carousel__slide .media {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* A soft shade along the foot so the controls read on any photo. */
.photo-carousel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(11, 17, 27, 0.5), rgba(11, 17, 27, 0));
  pointer-events: none;
}

.photo-carousel__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 14px 14px 20px;
}

.photo-carousel__dots {
  display: flex;
  gap: 6px;
}

/* Slim bars. The current one fills over the photo's time (--carousel-slide,
   set by app.js) and holds still while the carousel is paused. */
.photo-carousel__dot {
  position: relative;
  width: 24px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color var(--dur-fast);
}

.photo-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* A finger-sized target around each bar. */
.photo-carousel__dot::before {
  content: "";
  position: absolute;
  inset: -12px -3px;
}

.photo-carousel__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-always-white);
  transform: scaleX(0);
  transform-origin: left center;
}

.photo-carousel__dot[aria-current="true"]::after {
  transform: scaleX(1);
}

.photo-carousel.is-auto .photo-carousel__dot[aria-current="true"]::after {
  animation: carousel-fill var(--carousel-slide, 5s) linear both;
}

.photo-carousel.is-paused .photo-carousel__dot::after {
  animation-play-state: paused;
}

@keyframes carousel-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.photo-carousel__arrows {
  display: flex;
  gap: 6px;
}

.photo-carousel__nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-always-white);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.photo-carousel__nav:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.22);
}

/* 44px to the finger, 30px to the eye. */
.photo-carousel__nav::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.photo-carousel__nav svg {
  width: 14px;
  height: 14px;
}

.no-js .photo-carousel__controls {
  display: none;
}

/* ---- Inner pages: three photos across the hero's foot ----
   Replaces the single wide photo with WhizzIT's own photography at a third of
   the size, still straddling the hero's edge. Phones show the first tile. */
.photo-trio {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}

.photo-trio .media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -34px rgba(10, 22, 40, 0.55);
}

.photo-trio .media:nth-child(n + 2) {
  display: none;
}

@media (min-width: 640px) {
  .photo-trio {
    grid-template-columns: repeat(3, 1fr);
  }

  .photo-trio .media:nth-child(n + 2) {
    display: block;
  }
}

/* ---- Contact: each office on its own map ----
   The map fills the top of the card, pinned on the office; the details sit
   below it. Google's place card at the top of the embed (a business listing
   runs to four lines) is cropped off; its logo and attribution along the map's
   foot stay in view. The crop is matched by PIN_DROP_PX in contact.mjs. */
.office-card--map {
  overflow: hidden;
  padding: 0;
}

.office-card__map {
  position: relative;
  height: clamp(220px, 22vw, 280px);
  overflow: hidden;
  background: var(--color-surface);
  pointer-events: none;
}

.office-card__map iframe {
  position: absolute;
  top: -130px;
  left: 0;
  width: 100%;
  height: calc(100% + 130px);
  border: 0;
}

/* Details: the pin tile beside the office name and label, then the address
   and the actions across the full width. */
.office-card__body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding: var(--space-6);
}

.office-card__body .office-card__icon {
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}

.office-card__body > p:not(.office-card__label),
.office-card__body > .btn-group {
  grid-column: 1 / -1;
}

.office-card__body > p:not(.office-card__label) {
  margin-top: var(--space-3);
}


/* 35. CLIENT FEEDBACK, 30 SEPTEMBER 2026
   Each main-nav page gets its own layout; long strips become boxes; photographs
   appear only where they show what the section is about; credential logos are
   readable; the home client logos loop.

   Motion follows one set of rules across all of it:
   - Two curves. --ease-out-strong for anything arriving or answering a press,
     --ease-in-out-strong for anything moving across the screen.
   - Transform, opacity and clip-path only.
   - Presses answer in ~160ms, UI changes stay under 300ms; only first-view
     entrances (heroes, the sector photo wipe) run longer.
   - Hover effects only for a real pointer, (hover: hover) and (pointer: fine).
   - Under prefers-reduced-motion everything is simply there (end of section).
   ========================================================================== */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --box-radius: 22px;
}

/* Presses scale a touch rather than nudge down, on every button. */
.btn:active {
  transform: scale(0.97);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Shared: a quote figure with its reviewer on one line. */
.proof-bento__quote figcaption,
.ind-ask__quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.proof-bento__quote figcaption strong,
.ind-ask__quote figcaption strong {
  display: block;
  color: var(--color-heading);
  font-size: 0.9375rem;
}


/* ---- Inner-page hero: headline left, callback box right ---- */
.hero-split {
  padding-bottom: var(--space-8);
}

.hero-split__grid {
  display: grid;
  gap: var(--space-6);
}

.hero-split__copy > * {
  animation: rise-in 600ms var(--ease-out-strong) both;
}

.hero-split__copy > :nth-child(2) { animation-delay: 60ms; }
.hero-split__copy > :nth-child(3) { animation-delay: 120ms; }
.hero-split__copy > :nth-child(4) { animation-delay: 180ms; }

.hero-split__title {
  font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.1rem);
  line-height: 1.03;
  text-wrap: balance;
}

.hero-split .hero-sky__lead {
  max-width: 52ch;
  margin-bottom: 0;
}

.hero-split__form {
  animation: rise-in 700ms var(--ease-out-strong) 160ms both;
}

.hero-split__form .callback,
.svc-hero__form .callback,
.proof-hero__form .callback {
  margin-top: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--box-radius);
}

.hero-split__form .callback__head strong,
.svc-hero__form .callback__head strong,
.proof-hero__form .callback__head strong,
.ind-ask__form .callback__head strong {
  font-size: 1.25rem;
}

.hero-split__aside {
  margin-top: var(--space-7);
  animation: rise-in 700ms var(--ease-out-strong) 260ms both;
}

@media (min-width: 1024px) {
  .hero-split__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: var(--space-8);
    align-items: center;
  }
}

/* A page's own photograph (sector, location, case study) under the hero. */
.hero-feature .media {
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .hero-feature .media {
    aspect-ratio: 21 / 7;
  }
}


/* ---- Closing CTA: two boxes ---- */
.site-footer__cta {
  padding-top: var(--space-8);
}

.cta-box {
  display: grid;
  gap: var(--space-4);
}

.cta-box__ask {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-4);
  padding: clamp(28px, 4.2vw, 60px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(236, 124, 32, 0.3), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(31, 107, 255, 0.22), transparent 60%),
    linear-gradient(160deg, #172238 0%, #0f1624 100%);
}

.cta-box__ask h2,
.cta-box__ask h3 {
  max-width: 18ch;
  color: #fff;
  font-size: clamp(1.85rem, 1.25rem + 2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.cta-box__ask p {
  max-width: 46ch;
  color: #b7c2d2;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.cta-box__actions {
  margin-top: var(--space-2);
}

.cta-box__call {
  position: relative;
  display: grid;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background: #0f1624;
}

.cta-box__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
}

.cta-box__photo img {
  transition: transform 900ms var(--ease-out-strong);
}

.cta-box__call::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0) 30%, rgba(8, 12, 20, 0.88) 100%);
}

.cta-box__line {
  align-self: end;
  display: grid;
  gap: 4px;
  padding: clamp(22px, 2.5vw, 32px);
}

.cta-box__label {
  color: rgba(233, 238, 247, 0.75);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.cta-box__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 160ms var(--ease-out-strong);
}

.cta-box__phone svg {
  width: 0.8em;
  height: 0.8em;
  color: var(--brand-orange);
}

.cta-box__phone:active {
  transform: scale(0.97);
}

.cta-box__note {
  color: rgba(233, 238, 247, 0.8);
  font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
  .cta-box__call:hover .cta-box__photo img {
    transform: scale(1.04);
  }
}

@media (min-width: 900px) {
  .cta-box {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .cta-box__call {
    min-height: 380px;
  }
}


/* ---- Credential badges: logos you can read ---- */
.cred-why__head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

.cred-badges {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.statement-wide .cred-badges {
  margin-top: var(--space-7);
  text-align: left;
}

.cred-badge {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--box-radius);
  background: var(--color-white);
}

.cred-badge__plate {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 18px 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 22, 40, 0.07);
}

:root[lang] .cred-badge__plate img {
  width: 100%;
  height: 100%;
  max-height: 120px;
  padding: 0;
  background: none;
  object-fit: contain;
}

.cred-badge__body {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.cred-badge__title {
  color: var(--color-heading);
  font-size: 1.1875rem;
  font-weight: 700;
}

.cred-badge .text-link {
  margin-top: var(--space-1);
}

@media (min-width: 560px) {
  .cred-badge {
    grid-template-columns: minmax(170px, 0.85fr) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .cred-badges {
    grid-template-columns: 1fr 1fr;
  }
}

.partner-row.partner-row--badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.partner-row.partner-row--badges li {
  height: 80px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  background: #fff;
}

/* The contact page keeps its inline pair, at a size that reads. */
.cred-inline img {
  width: 132px;
  height: 64px;
}


/* ---- Pricing: two boxes ---- */
.pricing-boxes {
  display: grid;
  gap: var(--space-4);
}

.pricing-boxes__copy {
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
}

.pricing-boxes__copy p:last-child {
  max-width: 56ch;
  margin-top: var(--space-4);
  color: var(--color-text-soft);
}

.pricing-boxes__act {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 0 30px 60px -42px rgba(10, 22, 40, 0.45);
}

.pricing-boxes__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.pricing-boxes__icon svg {
  width: 22px;
  height: 22px;
}

.pricing-boxes__act p {
  margin-bottom: var(--space-2);
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.pricing-boxes__act p strong {
  display: block;
  color: var(--color-heading);
  font-size: 1.25rem;
}

.pricing-boxes__act .btn {
  width: 100%;
}

@media (min-width: 900px) {
  .pricing-boxes {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  }
}


/* ---- Home: client logos on an endless loop ----
   Two copies of the list side by side, each sliding its own width, so the seam
   never shows. Linear: constant motion has no start or end to ease. */
.marquee {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.marquee__viewport {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee .marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  margin: 0;
  padding: 6px clamp(40px, 5vw, 72px) 6px 0;
  list-style: none;
  animation: marquee 42s linear infinite;
}

.marquee__track li {
  flex: none;
}

.marquee__track img {
  width: auto;
  max-width: 150px;
  height: clamp(40px, 4.2vw, 58px);
  object-fit: contain;
  opacity: 0.85;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .marquee__viewport:hover .marquee__track {
    animation-play-state: paused;
  }
}


/* ---- Home: partner logos ----
   Seven logos never fill a two- or four-column grid, so below desktop the row
   wraps and centres: the odd one out sits in the middle, not stranded left. */
@media (max-width: 1023.98px) {
  .home-partners .partner-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .home-partners .partner-row li {
    flex: 0 0 calc((100% - var(--space-5)) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .home-partners .partner-row li {
    flex-basis: calc((100% - var(--space-5) * 3) / 4);
  }
}


/* ==========================================================================
   IT SERVICES — "everything under one roof"
   ========================================================================== */
.svc-hero {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.svc-hero__grid {
  display: grid;
  gap: var(--space-6);
}

.svc-hero__copy > * {
  animation: rise-in 600ms var(--ease-out-strong) both;
}

.svc-hero__copy > :nth-child(2) { animation-delay: 60ms; }
.svc-hero__copy > :nth-child(3) { animation-delay: 120ms; }
.svc-hero__copy > :nth-child(4) { animation-delay: 180ms; }

.svc-hero__title {
  max-width: 11ch;
  font-size: clamp(2.7rem, 1.2rem + 4.8vw, 5.6rem);
  line-height: 0.98;
  text-wrap: balance;
}

.svc-hero .hero-sky__lead {
  max-width: 50ch;
  margin-bottom: 0;
}

.svc-hero__form {
  animation: rise-in 700ms var(--ease-out-strong) 160ms both;
}

@media (min-width: 1024px) {
  .svc-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
    align-items: end;
    gap: var(--space-8);
  }
}

/* Explorer: a vertical tab list beside one panel. */
.svc-explore__head {
  max-width: 720px;
  margin-bottom: var(--space-7);
}

.svc-explore__head p:last-child {
  margin-top: var(--space-4);
  color: var(--color-text-soft);
}

.explorer {
  display: grid;
  gap: var(--space-6);
}

.explorer__rail {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.explorer__list {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: var(--color-surface);
}

.explorer__tab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--color-text-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out-strong);
}

.explorer__tab:active {
  transform: scale(0.98);
}

.explorer__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.explorer__num {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.explorer__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.1);
  transition: background-color 200ms ease, color 200ms ease;
}

.explorer__icon svg {
  width: 18px;
  height: 18px;
}

.explorer__label strong {
  display: block;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 700;
}

.explorer__label span {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.explorer__tab[aria-selected="true"] .explorer__num {
  color: var(--color-primary-ink);
}

.explorer__tab[aria-selected="true"] .explorer__icon {
  background: var(--color-primary);
  color: #fff;
}

/* The selected tab's card is one element that slides between tabs, so the
   eye follows the change instead of seeing one card vanish and another appear. */
.explorer__indicator {
  position: absolute;
  top: 0;
  right: 6px;
  left: 6px;
  z-index: 0;
  display: none;
  border-radius: 14px;
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border-soft), 0 12px 28px -16px rgba(10, 22, 40, 0.35);
  pointer-events: none;
}

.js .explorer__indicator {
  display: block;
}

.explorer__indicator.is-ready {
  transition:
    transform 320ms var(--ease-in-out-strong),
    height 320ms var(--ease-in-out-strong);
}

.no-js .explorer__tab[aria-selected="true"] {
  background: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .explorer__tab:not([aria-selected="true"]):hover {
    background: rgba(10, 22, 40, 0.04);
  }
}

.explorer__else {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: var(--color-white);
}

.explorer__else-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.explorer__else-icon svg {
  width: 19px;
  height: 19px;
}

.explorer__else h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

.explorer__else p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.explorer__else .btn {
  justify-self: start;
}

.explorer__stage {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.explorer__panel {
  display: grid;
  gap: var(--space-6);
  padding: clamp(24px, 3.4vw, 44px);
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: 0 30px 60px -44px rgba(10, 22, 40, 0.4);
}

.explorer__panel[hidden] {
  display: none;
}

.explorer__panel:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* A new panel settles in; the blur hides the swap of one text block for another. */
.js .explorer__panel:not([hidden]) {
  animation: panel-in 280ms var(--ease-out-strong);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(3px);
  }
}

.explorer__kicker {
  margin-bottom: var(--space-3);
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.explorer__copy h3 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.1;
}

.explorer__copy .tick-list {
  margin-top: var(--space-4);
}

.explorer__subs {
  align-self: start;
  padding: 18px;
  border-radius: 18px;
  background: var(--color-surface);
}

.explorer__subs-label {
  margin: 0 0 12px 4px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.explorer__subs ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.explorer__subs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-white);
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.07);
  transition: transform 200ms var(--ease-out-strong), box-shadow 200ms ease;
}

.explorer__subs a svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: color 200ms ease, transform 200ms var(--ease-out-strong);
}

.explorer__subs a:active {
  transform: scale(0.98);
}

.js .explorer__panel:not([hidden]) .explorer__subs li {
  animation: rise-in 360ms var(--ease-out-strong) both;
  animation-delay: calc(80ms + var(--n, 0) * 35ms);
}

@media (hover: hover) and (pointer: fine) {
  .explorer__subs a:hover {
    transform: translateX(3px);
    box-shadow: 0 8px 18px -12px rgba(10, 22, 40, 0.35);
  }

  .explorer__subs a:hover svg {
    color: var(--color-primary);
  }
}

@media (min-width: 1024px) {
  .explorer {
    grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }

  .explorer__rail {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 24px);
  }
}

@media (min-width: 1280px) {
  .explorer__panel {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* Proof bento */
.svc-proof__head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

.proof-bento {
  display: grid;
  gap: var(--space-4);
}

.proof-bento__creds .cred-badges {
  grid-template-columns: 1fr;
  height: 100%;
}

.proof-bento__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.proof-stat {
  display: grid;
  align-content: end;
  gap: 6px;
  min-height: 150px;
  padding: 22px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--box-radius);
  background: var(--color-white);
}

.proof-stat dd {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.proof-stat dt {
  color: var(--color-text-soft);
  font-size: 0.875rem;
}

.proof-stat:first-child {
  border-color: transparent;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(236, 124, 32, 0.3), transparent 60%),
    linear-gradient(160deg, #172238, #0f1624);
}

.proof-stat:first-child dd {
  color: #fff;
}

.proof-stat:first-child dt {
  color: #b7c2d2;
}

.proof-bento__quote {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--box-radius);
  background: var(--color-white);
}

.proof-bento__quote blockquote p {
  color: var(--color-heading);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.45;
}

.proof-bento__partners {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--box-radius);
  background: var(--color-white);
}

.proof-bento__partners .partner-row--badges {
  margin-top: 0;
}

.proof-bento__label {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.svc-proof__note {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

@media (min-width: 1024px) {
  .proof-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .proof-bento__creds,
  .proof-bento__quote {
    grid-column: span 7;
  }

  .proof-bento__stats,
  .proof-bento__partners {
    grid-column: span 5;
  }
}


/* ==========================================================================
   INDUSTRIES — the editorial sector index (light page)
   ========================================================================== */
.page--light-hero .section {
  padding-block: clamp(40px, 4vw, 64px);
}

.page--light-hero .section--tight {
  padding-block: clamp(28px, 3vw, 44px);
}

/* The five services, as one dark box. */
/* The services band and the stories band below it are one dark chapter: the
   same ground colour, no seam, a hairline inside the content width between. */
:root[lang] .ind-services-band.section--ink {
  background:
    radial-gradient(45% 55% at 0% 25%, rgba(31, 107, 255, 0.2), transparent 70%),
    radial-gradient(40% 55% at 100% 15%, rgba(236, 124, 32, 0.16), transparent 70%),
    var(--color-navy-950);
}

/* The glows keep clear of the edge it shares with the services band. */
:root[lang] .ind-hscroll.section--ink {
  background:
    radial-gradient(45% 45% at 0% 95%, rgba(31, 107, 255, 0.18), transparent 70%),
    radial-gradient(35% 45% at 100% 70%, rgba(236, 124, 32, 0.12), transparent 70%),
    var(--color-navy-950);
}

.page--industries .ind-services-band {
  padding-block: clamp(64px, 8vw, 120px) 0;
}

.ind-services {
  display: grid;
  gap: var(--space-6);
  padding-bottom: clamp(64px, 8vw, 120px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ind-services h2 {
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

.ind-services__copy p:not(.eyebrow) {
  max-width: 52ch;
  margin-bottom: var(--space-6);
}

.ind-services__list {
  display: grid;
  gap: 8px;
}

@media (min-width: 1024px) {
  .ind-services {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: var(--space-8);
  }
}


.rail-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-heading);
  cursor: pointer;
  transition: transform 160ms var(--ease-out-strong), background-color 200ms ease;
}

.rail-btn svg {
  width: 18px;
  height: 18px;
}

.rail-btn:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .rail-btn:hover {
    background: var(--color-surface);
  }
}

/* "Not listed?" and About's "why choose": copy and a callback box. */
.ind-ask {
  display: grid;
  gap: var(--space-7);
}

.ind-ask__copy > p:not(.eyebrow) {
  max-width: 54ch;
  margin-top: var(--space-4);
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.ind-ask__quote {
  display: grid;
  gap: var(--space-3);
  max-width: 54ch;
  margin: var(--space-6) 0 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--brand-orange);
}

.ind-ask__quote blockquote p {
  color: var(--color-heading);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.ind-ask__form .callback {
  margin-top: 0;
}

.ind-ask__form .callback {
  padding: clamp(22px, 2.6vw, 30px);
  border-color: var(--color-border);
  border-radius: var(--box-radius);
  background: var(--color-white);
  box-shadow: 0 30px 60px -42px rgba(10, 22, 40, 0.45);
}

.ind-ask__form .field__input {
  box-shadow: none;
}

@media (min-width: 1024px) {
  .ind-ask {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    align-items: center;
    gap: var(--space-9);
  }
}


/* Credential plates stop growing at a readable size. */
.cred-badge__plate {
  max-width: 300px;
}

/* ==========================================================================
   OUR CUSTOMERS — the proof wall
   ========================================================================== */
.proof-hero__grid {
  display: grid;
  gap: var(--space-6);
}

.proof-hero__copy > * {
  animation: rise-in 600ms var(--ease-out-strong) both;
}

.proof-hero__copy > :nth-child(2) { animation-delay: 60ms; }
.proof-hero__copy > :nth-child(3) { animation-delay: 120ms; }
.proof-hero__copy > :nth-child(4) { animation-delay: 200ms; }

.proof-hero__title {
  font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.1rem);
  line-height: 1.03;
  text-wrap: balance;
}

.proof-hero .hero-sky__lead {
  margin-bottom: 0;
}

.proof-hero__form {
  animation: rise-in 700ms var(--ease-out-strong) 160ms both;
}

.proof-score {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.proof-score__num {
  color: var(--color-text);
  font-size: clamp(4rem, 2.4rem + 5vw, 7rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.proof-score__detail {
  display: grid;
  gap: 6px;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.proof-score__detail a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

.proof-score__detail a svg {
  width: 16px;
  height: 16px;
}

.proof-hero .review-wall {
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .proof-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: var(--space-8);
    align-items: center;
  }
}

.client-wall__head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

.client-wall__head p:last-child:not(.eyebrow) {
  margin-top: var(--space-4);
  color: var(--color-text-soft);
}

/* The client logos are white artwork, so the wall is dark. */
.client-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-wall li {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-white);
  transition: border-color 200ms ease, transform 300ms var(--ease-out-strong);
}

.client-wall img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 76px;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .client-wall li:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-3px);
  }

  .client-wall li:hover img {
    opacity: 1;
  }
}

@media (min-width: 640px) {
  .client-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .client-wall {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---- Reduced motion: everything simply there ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-split__copy > *,
  .hero-split__form,
  .hero-split__aside,
  .svc-hero__copy > *,
  .svc-hero__form,
  .proof-hero__copy > *,
  .proof-hero__form,
  .js .explorer__panel:not([hidden]) .explorer__subs li,
  .sector-preview__shot.is-active figcaption {
    animation: none;
  }

  /* Tab and photo changes keep a short fade, never movement. */
  .js .explorer__panel:not([hidden]) {
    animation: fade-in 160ms ease;
  }

  .explorer__indicator.is-ready {
    transition: none;
  }

  .sector-preview__shot,
  .sector-preview__shot.is-active {
    clip-path: none;
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .sector-preview__shot.is-active {
    opacity: 1;
  }

  .sector-preview__shot img,
  .sector-preview__shot.is-active img {
    transform: none;
    transition: none;
  }

  /* The logo loop stops; the list scrolls sideways by hand instead. */
  .marquee .marquee__track {
    animation: none;
  }

  .marquee .marquee__track[aria-hidden="true"] {
    display: none;
  }

  .marquee__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/* ==========================================================================
   INDUSTRIES, ROUND TWO — the sector wall hero and the gliding stories
   ========================================================================== */

/* ---- Hero: the site's dark sky, with the sectors drifting past ---- */
.ind-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(48px, 6vw, 88px);
}

/* A fine dot grid on the wall's side, and the brand orange glowing behind it. */
.ind-stage::before,
.ind-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.ind-stage::before {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 80% at 85% 45%, #000, transparent 75%);
  mask-image: radial-gradient(70% 80% at 85% 45%, #000, transparent 75%);
}

.ind-stage::after {
  top: 10%;
  right: -10%;
  width: 60%;
  height: 80%;
  background:
    radial-gradient(45% 50% at 55% 55%, rgba(236, 124, 32, 0.22), transparent 70%),
    radial-gradient(40% 45% at 30% 30%, rgba(31, 107, 255, 0.22), transparent 70%);
  filter: blur(10px);
}

.ind-stage__inner {
  position: relative;
  z-index: 2;
}

.ind-stage__copy > * {
  animation: rise-in 700ms var(--ease-out-strong) both;
}

.ind-stage__copy > :nth-child(2) { animation-delay: 40ms; }
.ind-stage__copy > :nth-child(3) { animation-delay: 90ms; }
.ind-stage__copy > :nth-child(4) { animation-delay: 150ms; }
.ind-stage__copy > :nth-child(5) { animation-delay: 210ms; }
.ind-stage__copy > :nth-child(6) { animation-delay: 270ms; }

.ind-stage__title {
  max-width: 13ch;
  font-size: clamp(2.8rem, 1.2rem + 4.6vw, 5.4rem);
  line-height: 0.98;
  text-wrap: balance;
}

.ind-stage .hero-sky__lead {
  max-width: 46ch;
  margin-bottom: 0;
}

.ind-stage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-6);
}

/* Three proof figures, each with a status light that switches on in turn,
   the same light as the faceplates on the service pages. */
.ind-stage__proof {
  display: grid;
  gap: 14px;
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}

.ind-stage__proof li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.ind-stage__proof strong {
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.ind-stage__proof li > :not(.ind-stage__led) {
  grid-column: 2;
}

.ind-stage__led {
  grid-row: 1;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ecf9a;
  box-shadow: 0 0 0 3px rgba(62, 207, 154, 0.14), 0 0 10px rgba(62, 207, 154, 0.7);
  animation: led-on 500ms ease both;
}

.ind-stage__proof li:nth-child(1) .ind-stage__led { animation-delay: 600ms; }
.ind-stage__proof li:nth-child(2) .ind-stage__led { animation-delay: 750ms; }
.ind-stage__proof li:nth-child(3) .ind-stage__led { animation-delay: 900ms; }

@keyframes led-on {
  0%,
  40% {
    background: #2a3343;
    box-shadow: none;
  }
}

@media (min-width: 640px) {
  .ind-stage__proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* The wall. Each column is its cards twice over and slides up by exactly one
   set, so the loop has no seam; linear, because constant drift has no start or
   end to ease. Spacing is padding on the cards (not gap) so both halves are
   the same height to the pixel. */
.ind-stage__wall {
  position: relative;
  height: 250px;
  margin-top: var(--space-7);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  animation: fade-in 900ms ease 200ms both;
}

.sector-wall {
  display: block;
}

.sector-wall__col {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: wall-x 70s linear infinite;
}

.sector-wall__col + .sector-wall__col {
  display: none;
}

.wall-card {
  flex: none;
  width: 190px;
  padding-right: 14px;
}

@keyframes wall-x {
  to {
    transform: translateX(-50%);
  }
}

@keyframes wall-y {
  to {
    transform: translateY(-50%);
  }
}

.wall-card a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #101826;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 50px -30px rgba(0, 0, 0, 0.85);
  color: #fff;
  text-decoration: none;
  transition: box-shadow 200ms ease, transform 160ms var(--ease-out-strong);
}

.wall-card a:active {
  transform: scale(0.98);
}

.wall-card a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.wall-card__photo {
  border-radius: 0;
  background: #101826;
}

.wall-card__photo img {
  filter: saturate(0.85) brightness(0.8);
  transition: filter 400ms ease, transform 700ms var(--ease-out-strong);
}

.wall-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0) 45%, rgba(8, 12, 20, 0.85) 100%);
  pointer-events: none;
}

.wall-card__label {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  display: grid;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.wall-card__label span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

@media (hover: hover) and (pointer: fine) {
  .sector-wall:hover .sector-wall__col {
    animation-play-state: paused;
  }

  .wall-card a:hover {
    box-shadow:
      0 0 0 1.5px rgba(127, 168, 255, 0.7),
      0 30px 60px -28px rgba(0, 0, 0, 0.9);
  }

  .wall-card a:hover .wall-card__photo img {
    filter: none;
    transform: scale(1.05);
  }
}

/* Wide screens: the wall fills the hero's right half as three tilted columns
   drifting at different speeds, the middle one against the others. */
@media (min-width: 1024px) {
  .ind-stage {
    display: flex;
    align-items: center;
    min-height: clamp(680px, 92vh, 900px);
  }

  .ind-stage__copy {
    max-width: min(560px, 46%);
  }

  .ind-stage__wall {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 54%;
    height: auto;
    margin: 0;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 26%),
      linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 26%),
      linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
    animation: wall-in 1200ms var(--ease-out-strong) 120ms both;
  }

  @keyframes wall-in {
    from {
      opacity: 0;
      transform: translateX(5%);
    }
  }

  .sector-wall {
    position: absolute;
    inset: -22% -6% -22% 6%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    transform: perspective(2200px) rotateX(14deg) rotateY(-8deg) rotateZ(-9deg);
    transform-origin: 50% 50%;
  }

  .sector-wall__col,
  .sector-wall__col + .sector-wall__col {
    display: flex;
    flex-direction: column;
    width: auto;
    animation: wall-y 64s linear infinite;
  }

  .sector-wall__col:nth-child(2) {
    margin-top: -140px;
    animation-duration: 78s;
    animation-direction: reverse;
  }

  .sector-wall__col:nth-child(3) {
    margin-top: -60px;
    animation-duration: 70s;
  }

  .wall-card {
    width: auto;
    padding: 0 0 18px;
  }
}


/* ---- Sector stories: a band that glides sideways as the page scrolls ----
   Phones, and anyone with reduced motion, get an ordinary swipe rail. */
.ind-hscroll {
  position: relative;
}

.ind-hscroll__pin {
  padding-block: clamp(56px, 6vw, 96px);
}

.ind-hscroll__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.ind-hscroll__head p:not(.eyebrow) {
  margin-top: var(--space-3);
  color: var(--color-text-soft);
}

.ind-hscroll__meter {
  display: none;
  align-items: center;
  gap: 16px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.ind-hscroll__count span {
  color: var(--color-text);
}

.ind-hscroll__bar {
  position: relative;
  width: 180px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.ind-hscroll__bar span {
  position: absolute;
  inset: 0;
  background: var(--brand-flame);
  transform: scaleX(0);
  transform-origin: left;
}

ul.story-rail {
  position: relative;
  --rail-edge: max(var(--gutter), calc((100% - var(--container-main)) / 2));
  display: grid;
  grid-auto-columns: min(82vw, 380px);
  grid-auto-flow: column;
  gap: 16px;
  margin: 0;
  padding: 4px var(--rail-edge) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--rail-edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

ul.story-rail::-webkit-scrollbar {
  display: none;
}

ul.story-rail > li {
  scroll-snap-align: start;
}

.hs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--box-radius);
  background: var(--color-white);
}

.hs-card__photo {
  flex: none;
  border-radius: 0;
}

.hs-card__photo img {
  will-change: transform;
}

/* An outlined numeral set into the photo's corner. */
.hs-card__num {
  position: absolute;
  top: 10px;
  right: 18px;
  color: transparent;
  font-size: clamp(3.2rem, 2.4rem + 2vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 2px 10px rgba(8, 12, 20, 0.55));
  pointer-events: none;
}

.hs-card__body {
  display: grid;
  flex: 1;
  align-content: start;
  justify-items: start;
  gap: 10px;
  padding: 22px 24px 26px;
}

.hs-card__title {
  color: var(--color-text);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
}

.hs-card__title a {
  color: inherit;
  text-decoration: none;
}

.hs-card p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.hs-card .read-more {
  margin-top: auto;
  padding-top: 6px;
}

.hs-card .read-more svg {
  transition: transform 200ms var(--ease-out-strong);
}

.hs-card--more {
  border-color: transparent;
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(236, 124, 32, 0.38), transparent 62%),
    radial-gradient(80% 80% at 0% 100%, rgba(31, 107, 255, 0.34), transparent 60%),
    #131c2c;
}

.hs-card--more a {
  display: grid;
  flex: 1;
  align-content: end;
  gap: 8px;
  min-height: 320px;
  padding: 32px;
  color: #fff;
  text-decoration: none;
}

.hs-card__more-label {
  color: rgba(233, 238, 247, 0.7);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.hs-card--more strong {
  max-width: 10ch;
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hs-card__more-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 12px;
  border-radius: 50%;
  background: #fff;
  color: #0a1628;
  transition: transform 300ms var(--ease-out-strong);
}

.hs-card__more-arrow svg {
  width: 20px;
  height: 20px;
}

.hs-card--more a:active .hs-card__more-arrow {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .hs-card:hover .read-more svg {
    transform: translateX(4px);
  }

  .hs-card--more a:hover .hs-card__more-arrow {
    transform: translateX(6px);
  }
}

/* Pinned: the band sticks below the header for as long as it takes the row to
   travel its own overflow, and the script moves the row with the scroll. */
.ind-hscroll.is-pinned .ind-hscroll__pin {
  position: sticky;
  top: var(--pin-top, 116px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - var(--pin-top, 116px));
  padding-block: clamp(24px, 3vh, 48px);
  overflow: hidden;
}

.ind-hscroll.is-pinned .rail-controls {
  display: none;
}

.ind-hscroll.is-pinned .ind-hscroll__meter {
  display: flex;
}

.ind-hscroll.is-pinned .ind-hscroll__viewport {
  overflow: clip;
}

.ind-hscroll.is-pinned ul.story-rail {
  display: flex;
  gap: 24px;
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}

.ind-hscroll.is-pinned .hs-card {
  flex: 0 0 clamp(360px, 31vw, 480px);
}

/* The photo gives way on shorter screens, so a card always fits the band. */
.ind-hscroll.is-pinned .hs-card__photo {
  aspect-ratio: auto;
  height: clamp(180px, calc(100vh - var(--pin-top, 116px) - 470px), 360px);
}

.ind-hscroll.is-pinned .hs-card--more {
  flex-basis: clamp(280px, 22vw, 340px);
}

.ind-hscroll.is-pinned .hs-card--more a {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ind-stage__copy > *,
  .ind-stage__wall,
  .ind-stage__led {
    animation: none;
  }

  .sector-wall__col,
  .sector-wall__col + .sector-wall__col {
    animation: none;
  }
}


/* ==========================================================================
   INDUSTRIES — "Find your industry", one design per screen
   Desktop: an index of rows beside a photo frame. Tablet: a two-column grid of
   photo cards. Phone: a swipeable carousel of photo cards under a row of sector
   chips. The markup is the WordPress shortcode's (article.sector-tile), so each
   layout is CSS on that one structure; app.js builds the frame and the chips.
   ========================================================================== */

/* Every `strong` on the site takes the body ink colour; text set on a
   photograph is always white. */
.sector-preview__shot figcaption strong {
  color: #fff;
}

.page--industries .ind-index {
  padding-block: clamp(56px, 7vw, 112px) clamp(48px, 6vw, 96px);
}

.ind-index__head {
  display: grid;
  gap: 14px 48px;
  align-items: end;
  margin-bottom: clamp(24px, 3.5vw, 44px);
  padding-bottom: clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid var(--color-border);
}

.ind-index__head .eyebrow {
  margin-bottom: var(--space-3);
}

.ind-index__lead {
  max-width: 40ch;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .ind-index__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Phone chips: built by app.js, shown only where the carousel is. */
.sector-nav {
  display: none;
}


/* ---- Photo cards: phones and tablets ---- */
@media (max-width: 1023.98px) {
  .page--industries .sector-tile--photo {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    min-height: 340px;
    padding: 22px;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #0f1624;
    color: #fff;
    box-shadow: 0 24px 48px -30px rgba(10, 22, 40, 0.6);
    transform: none;
    transition: transform 160ms var(--ease-out-strong);
  }

  .page--industries .sector-tile--photo:active {
    transform: scale(0.985);
  }

  .page--industries .sector-tile--photo > :not(.sector-tile__photo) {
    margin: 0;
    padding: 0;
  }

  .page--industries .sector-tile__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
  }

  .page--industries .sector-tile--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0.08) 15%, rgba(8, 12, 20, 0.5) 52%, rgba(8, 12, 20, 0.92) 100%);
  }

  /* The whole card is the link; its hit area sits above the content. */
  .page--industries .sector-tile .card-link::after {
    z-index: 2;
    border-radius: 22px;
  }

  .page--industries .sector-tile--photo .sector-tile__num {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(10, 15, 24, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }

  .page--industries .sector-tile h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .page--industries .sector-tile > p:not(.sector-tile__note) {
    display: none;
  }

  .page--industries .sector-tile__note {
    display: flex;
    gap: 8px;
    border: 0;
    color: rgba(233, 238, 247, 0.86);
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .page--industries .sector-tile__note svg {
    color: #ffb26b;
  }

  .page--industries .sector-tile .read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    color: #0a1628;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
  }

  .page--industries .sector-tile .read-more svg {
    width: 15px;
    height: 15px;
  }
}

/* Tablet: two columns. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page--industries .sector-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .page--industries .sector-tile--photo {
    min-height: 360px;
  }
}

/* Phone: one card at a time, the next one peeking in, snapping as it swipes;
   the chips above jump to a sector and follow the swipe. */
@media (max-width: 767.98px) {
  .page--industries .ind-index {
    padding-block: 48px 56px;
  }

  .ind-index__head {
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .ind-index__head .grad-head {
    font-size: 2.1rem;
  }

  .ind-index__lead {
    font-size: 1rem;
  }

  .sector-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 calc(var(--gutter) * -1) 16px;
  }

  /* Extra room at the end so the last chip can clear the fade. */
  .sector-nav__chips {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
    padding: 2px calc(var(--gutter) + 28px) 2px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }

  .sector-nav__chips::-webkit-scrollbar {
    display: none;
  }

  .sector-nav__chip {
    flex: none;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-text-soft);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out-strong);
  }

  .sector-nav__chip:active {
    transform: scale(0.96);
  }

  .sector-nav__chip[aria-current="true"] {
    border-color: #0a1628;
    background: #0a1628;
    color: #fff;
  }

  .sector-nav__count {
    flex: none;
    padding-right: var(--gutter);
    color: var(--color-text-muted);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }

  .sector-nav__count span {
    color: var(--color-heading);
  }

  .page--industries .sector-directory {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    grid-auto-flow: column;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .page--industries .sector-directory::-webkit-scrollbar {
    display: none;
  }

  .page--industries .sector-tile--photo {
    min-height: min(460px, 64vh);
    scroll-snap-align: start;
  }
}


/* ---- Desktop: the index beside the frame ---- */
@media (min-width: 1024px) {
  .page--industries .sector-directory.has-preview {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 4px;
    align-items: start;
  }

  .page--industries .has-preview .sector-tile {
    grid-column: 1;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas:
      "num title arrow"
      "num note arrow";
    align-items: center;
    gap: 6px 20px;
    padding: 20px 18px 20px 20px;
    overflow: visible;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: background-color 250ms ease;
  }

  /* A straight hairline between rows, inset from the rounded corners; it gives
     way around the lit row. */
  .page--industries .has-preview .sector-tile::after {
    content: "";
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 1px;
    background: var(--color-border-soft);
    transition: opacity 250ms ease;
  }

  .page--industries .has-preview .sector-tile:first-child::after,
  .page--industries .has-preview .sector-tile.is-active::after,
  .page--industries .has-preview .sector-tile.is-active + .sector-tile::after {
    opacity: 0;
  }

  .page--industries .has-preview .sector-tile.is-active {
    background: var(--color-surface);
  }

  .page--industries .has-preview .sector-tile > :not(.sector-tile__photo) {
    margin: 0;
    padding: 0;
  }

  .page--industries .has-preview .sector-tile__photo,
  .page--industries .has-preview .sector-tile > p:not(.sector-tile__note),
  .page--industries .has-preview .sector-tile__note svg {
    display: none;
  }

  .page--industries .has-preview .sector-tile__num {
    grid-area: num;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    transition: color 200ms ease;
  }

  .page--industries .has-preview .sector-tile h3 {
    grid-area: title;
    color: var(--color-heading);
    font-size: clamp(1.35rem, 1rem + 0.9vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .page--industries .has-preview .sector-tile__note {
    grid-area: note;
    display: block;
    border: 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* The arrow is a ring that fills on the lit row and turns to point at the frame. */
  .page--industries .has-preview .sector-tile .read-more {
    grid-area: arrow;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 44px;
    height: 44px;
    line-height: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-heading);
    font-size: 0;
    transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
  }

  .page--industries .has-preview .sector-tile .read-more svg {
    width: 18px;
    height: 18px;
    margin: 0;
    transform: rotate(-45deg);
    transition: transform 300ms var(--ease-out-strong);
  }

  .page--industries .has-preview .sector-tile.is-active .sector-tile__num {
    color: var(--color-primary-ink);
  }

  .page--industries .has-preview .sector-tile.is-active .read-more {
    border-color: transparent;
    background: var(--color-primary);
    color: #fff;
  }

  .page--industries .has-preview .sector-tile.is-active .read-more svg {
    transform: none;
  }

  /* A flame bar at the lit row's edge. */
  .page--industries .has-preview .sector-tile::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-flame);
    transform: scaleY(0);
    transition: transform 300ms var(--ease-out-strong);
  }

  .page--industries .has-preview .sector-tile.is-active::before {
    transform: scaleY(1);
  }

  .sector-preview {
    position: sticky;
    top: calc(var(--header-now, var(--stuck-h, 73px)) + 24px);
    grid-column: 2;
    align-self: start;
    height: min(620px, calc(100vh - var(--header-now, 116px) - 48px));
    transition: top 250ms var(--ease-out-strong);
    overflow: hidden;
    border-radius: 28px;
    background: var(--color-surface-2);
    box-shadow: 0 40px 80px -50px rgba(10, 22, 40, 0.6);
    cursor: pointer;
  }

  /* Each photo wipes up over the last. The outgoing one stays put underneath
     until the wipe has covered it, then drops out of sight. */
  .sector-preview__shot {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0ms 620ms;
  }

  .sector-preview__shot.is-active {
    z-index: 2;
    clip-path: inset(0 0 0 0);
    transition: clip-path 620ms var(--ease-in-out-strong);
  }

  .sector-preview__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 0ms 620ms;
  }

  .sector-preview__shot.is-active img {
    transform: scale(1);
    transition: transform 1100ms var(--ease-out-strong);
  }

  .sector-preview__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0) 42%, rgba(8, 12, 20, 0.85) 100%);
  }

  .sector-preview__shot figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 32px;
    color: #fff;
  }

  .sector-preview__shot.is-active figcaption {
    animation: rise-in 500ms var(--ease-out-strong) 260ms both;
  }

  .sector-preview__shot figcaption strong {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .sector-preview__shot figcaption > span {
    max-width: 40ch;
    color: rgba(233, 238, 247, 0.86);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .sector-preview__shot .sector-preview__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    color: #0a1628;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 700;
    transition: transform 160ms var(--ease-out-strong);
  }

  .sector-preview__go svg {
    width: 15px;
    height: 15px;
    transition: transform 200ms var(--ease-out-strong);
  }

  .sector-preview:active .sector-preview__go {
    transform: scale(0.97);
  }

  .sector-preview__count {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(10, 15, 24, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .page--industries .has-preview .sector-tile:not(.is-active):hover {
    background: rgba(10, 22, 40, 0.025);
  }

  .sector-preview:hover .sector-preview__go svg {
    transform: translateX(3px);
  }
}

/* Below desktop there is no frame. */
@media (max-width: 1023.98px) {
  .sector-preview {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sector-preview__shot,
  .sector-preview__shot.is-active {
    clip-path: none;
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .sector-preview__shot.is-active {
    opacity: 1;
  }

  .sector-preview__shot img,
  .sector-preview__shot.is-active img {
    transform: none;
    transition: none;
  }

  .sector-preview__shot.is-active figcaption {
    animation: none;
  }
}


/* ---- Industries on a phone: designed for the thumb, not shrunk ---- */
@media (max-width: 767.98px) {
  /* Hero: two equal full-width actions, the proof as three cells. */
  .ind-stage__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ind-stage__actions .btn {
    width: 100%;
  }

  .ind-stage__proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: var(--space-6);
  }

  .ind-stage__proof li {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .ind-stage__proof li > :not(.ind-stage__led) {
    grid-column: 1;
  }

  .ind-stage__led {
    margin-bottom: 4px;
  }

  .ind-stage__proof strong {
    font-size: 0.9375rem;
    line-height: 1.2;
  }

  .ind-stage__proof li > span:last-child {
    font-size: 0.75rem;
  }

  /* Services band: compact rows, the names are enough at this size. */
  .page--industries .ind-services-band {
    padding-block: 56px 0;
  }

  .ind-services {
    gap: 28px;
    padding-bottom: 56px;
  }

  .ind-services h2 {
    font-size: 1.85rem;
  }

  .ind-services__copy p:not(.eyebrow) {
    margin-bottom: var(--space-5);
    font-size: 0.9375rem;
  }

  .ind-services .service-row {
    padding: 12px 14px;
  }

  .ind-services .service-row__desc {
    display: none;
  }

  /* Stories: swipe, with a counter and progress line instead of arrows. */
  .ind-hscroll .rail-controls {
    display: none;
  }

  .ind-hscroll__head {
    margin-bottom: var(--space-5);
  }

  .ind-hscroll__meter {
    display: flex;
    width: 100%;
  }

  .ind-hscroll__bar {
    flex: 1;
    width: auto;
  }

  /* Not listed: the form follows the ask; the review comes after it. */
  .ind-ask {
    gap: 0;
  }

  .ind-ask__copy {
    display: contents;
  }

  .ind-ask__form {
    order: 1;
    margin-top: var(--space-5);
  }

  .ind-ask__quote {
    order: 2;
    margin-top: var(--space-6);
  }

  /* Credentials: wide, shallow plates keep the logos large without the
     empty space; partner logos three to a row. */
  .cred-badge {
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .cred-badge__plate {
    max-width: none;
    aspect-ratio: 16 / 7;
  }

  :root[lang] .cred-badge__plate img {
    max-height: 76px;
  }

  .partner-row.partner-row--badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .partner-row.partner-row--badges li {
    height: 64px;
    padding: 10px;
  }
}


/* ---- Pinned sideways scroll on phones ----
   "Find your industry" pins below the header on phones and its cards glide
   with the page scroll (app.js initHScroll); the section's padding moves inside
   the pinned frame so the cards sit centred in what is left of the screen.
   svh, not vh, so the frame does not jump as the browser's toolbar slides. */
.page--industries .sector-directory {
  position: relative;
}

@media (max-width: 767.98px) {
  .page--industries .ind-index.is-pinned {
    padding-block: 0;
  }

  .ind-index.is-pinned .ind-index__pin {
    position: sticky;
    top: var(--pin-top, 65px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - var(--pin-top, 65px));
    height: calc(100svh - var(--pin-top, 65px));
    padding-block: 24px;
    overflow: clip;
  }

  /* The row ends on the last card with only the page gutter after it: the
     last card finishes flush right rather than leaving a blank strip. */
  .ind-index.is-pinned .sector-directory {
    padding-right: var(--gutter);
    grid-auto-columns: calc(100vw - var(--gutter) * 2 - 44px);
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
  }

  .ind-index.is-pinned .sector-tile--photo {
    min-height: clamp(280px, calc(100svh - var(--pin-top, 65px) - 290px), 460px);
  }

  /* Stories: one card to the screen, the next peeking in; the photo gives
     way on shorter phones so a card always fits under the heading. */
  .ind-hscroll.is-pinned .ind-hscroll__pin {
    height: calc(100vh - var(--pin-top, 65px));
    height: calc(100svh - var(--pin-top, 65px));
    padding-block: 20px;
  }

  .ind-hscroll.is-pinned ul.story-rail {
    gap: 12px;
  }

  .ind-hscroll.is-pinned .hs-card {
    flex: 0 0 calc(100vw - var(--gutter) * 2 - 44px);
  }

  .ind-hscroll.is-pinned .hs-card--more {
    flex-basis: 64vw;
  }

  .ind-hscroll.is-pinned .hs-card__photo {
    height: clamp(110px, calc(100svh - var(--pin-top, 73px) - 520px), 240px);
  }

  .ind-hscroll.is-pinned .hs-card__body {
    padding: 18px 20px 22px;
  }

  .ind-hscroll.is-pinned .hs-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}


/* ==========================================================================
   36. INDUSTRY PAGES — the sector cover and the briefing
   Eight pages (_build/pages/sectors.mjs), a design used nowhere else:
   - Cover: a light sheet with the sector's own line icon drawn huge behind the
     title, the sector photograph opening like a curtain on the right with a
     glass tag naming what that sector comes to us for.
   - Briefing: numbered sections with sticky margin labels; a sticky side column
     with an "on this page" index and the callback box.
   - Phones: photo first and the content rising over it as a sheet; the
     callback box closes the briefing; a bottom action bar once past the hero.
   ========================================================================== */
.page--sector {
  --sx-radius: 22px;
  --sx-stick: calc(var(--stuck-h, 73px) + 23px);
}

.page--sector .sx-sec,
.page--sector #talk {
  scroll-margin-top: 88px;
}

/* ---- Cover ---- */
.sx-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
}

.sx-hero__media {
  position: relative;
  height: clamp(260px, 44vh, 460px);
  overflow: hidden;
  background: #0f1624;
  animation: sx-curtain 1000ms var(--ease-in-out-strong) 80ms both;
}

@keyframes sx-curtain {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.sx-hero__photo {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.sx-hero__photo img {
  animation: sx-settle 1600ms var(--ease-out-strong) both;
}

@keyframes sx-settle {
  from {
    transform: scale(1.12);
  }
}

.sx-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0) 40%, rgba(8, 12, 20, 0.7) 100%);
  pointer-events: none;
}

.sx-hero__tag {
  position: absolute;
  right: var(--gutter);
  bottom: 52px;
  left: var(--gutter);
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 440px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(10, 15, 24, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: rgba(233, 238, 247, 0.88);
  font-size: 0.875rem;
  line-height: 1.5;
  animation: rise-in 700ms var(--ease-out-strong) 750ms both;
}

.sx-hero__tag strong {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-size: 0.9375rem;
}

.sx-hero__tag-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(236, 124, 32, 0.2);
  color: #ffb26b;
}

.sx-hero__tag-icon svg {
  width: 18px;
  height: 18px;
}

/* The sheet rises over the photo on phones; beside it on desktop. */
.sx-hero__sheet {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  padding: 28px var(--gutter) 44px;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background: var(--color-surface);
}

/* The sector's own icon, drawn as line art behind the title, kept whole inside
   the sheet (it is sized against the sheet, never pushed past its edges). */
.sx-hero__mark {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  z-index: -1;
  width: min(220px, 52vw);
  color: var(--color-navy);
  opacity: 0.07;
  pointer-events: none;
}

.sx-hero__mark svg {
  width: 100%;
  height: auto;
  stroke-width: 0.55;
}

.sx-hero__mark svg * {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: sx-draw 2600ms var(--ease-in-out-strong) 400ms forwards;
}

@keyframes sx-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.sx-hero__inner > * {
  animation: rise-in 700ms var(--ease-out-strong) both;
}

.sx-hero__inner > :nth-child(2) { animation-delay: 60ms; }
.sx-hero__inner > :nth-child(3) { animation-delay: 120ms; }
.sx-hero__inner > :nth-child(4) { animation-delay: 180ms; }
.sx-hero__inner > :nth-child(5) { animation-delay: 240ms; }

.sx-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 16px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sx-hero__kicker span:first-child {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--color-heading);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.sx-hero__kicker span:last-child {
  color: var(--color-primary-ink);
}

.sx-hero__title {
  color: var(--color-heading);
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.sx-hero__lead {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--color-text-soft);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.sx-hero__actions {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.sx-hero .hero-sky__note {
  margin-top: 18px;
}

.sx-hero__actions .btn {
  width: 100%;
}

@media (min-width: 560px) {
  .sx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .sx-hero__actions .btn {
    width: auto;
  }
}

/* Phones: the tag stays compact so the photo still reads. */
@media (max-width: 559.98px) {
  .sx-hero__tag {
    bottom: 44px;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .sx-hero__tag strong {
    font-size: 0.8125rem;
  }

  .sx-hero__tag-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .sx-hero__tag-icon svg {
    width: 15px;
    height: 15px;
  }
}

/* Desktop: the sheet and the photo side by side, the photo bleeding off the
   right edge and opening from it. */
@media (min-width: 1024px) {
  .sx-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-height: clamp(600px, calc(100vh - 116px), 840px);
  }

  .sx-hero__media {
    grid-row: 1;
    grid-column: 2;
    height: auto;
    margin: 24px 0;
    border-radius: 32px 0 0 32px;
  }

  .sx-hero__tag {
    right: auto;
    bottom: 28px;
    left: 28px;
    max-width: min(440px, calc(100% - 56px));
  }

  .sx-hero__sheet {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 48px clamp(32px, 4vw, 72px) 64px max(var(--gutter), calc((100vw - var(--container-main)) / 2));
    border-radius: 0;
    background: none;
  }

  .sx-hero__mark {
    top: 50%;
    right: clamp(24px, 3vw, 56px);
    bottom: auto;
    width: min(440px, 30vw, 70%);
    translate: 0 -50%;
  }

  .sx-hero__inner {
    max-width: 640px;
  }
}

/* ---- Briefing ---- */
.sx-body {
  display: grid;
  padding-block: clamp(40px, 6vw, 96px) clamp(48px, 6vw, 96px);
}

.sx-sec {
  display: grid;
  gap: 12px;
  padding-block: clamp(36px, 4.5vw, 64px);
  border-top: 1px solid var(--color-border);
}

.sx-main > .sx-sec:first-child {
  padding-top: 0;
  border-top: 0;
}

.sx-sec__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sx-sec__label span {
  color: var(--color-primary-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sx-sec__body {
  min-width: 0;
}

.sx-sec__eyebrow {
  margin-bottom: 8px;
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sx-sec__title {
  margin-bottom: 18px;
  color: var(--color-heading);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.sx-lede {
  max-width: 60ch;
  color: var(--color-heading);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
}

.sx-text {
  max-width: 64ch;
  margin-top: 16px;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Margin labels from tablet up: the number and name sit beside the section and
   stay in view while it is read. */
@media (min-width: 768px) {
  .sx-sec {
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 32px;
  }

  .sx-sec__label {
    position: sticky;
    top: var(--sx-stick);
    align-self: start;
    padding-top: 10px;
  }
}

/* Each section settles in the first time it scrolls into view. */
.js .sx-sec[data-on-view] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease-out-strong),
    transform 600ms var(--ease-out-strong);
}

.js .sx-sec[data-on-view].is-on {
  opacity: 1;
  transform: none;
}

/* What you get: a ledger whose ticks draw in. */
.sx-ledger {
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.sx-ledger li {
  display: grid;
  grid-template-columns: 30px 28px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 17px 4px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}

.sx-ledger__n {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.sx-ledger__tick {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(31, 107, 255, 0.1);
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.js .sx-sec[data-on-view] .sx-ledger__tick path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 450ms var(--ease-out-strong);
  transition-delay: calc(300ms + var(--n, 0) * 80ms);
}

.js .sx-sec[data-on-view].is-on .sx-ledger__tick path {
  stroke-dashoffset: 0;
}


/* The sector, specifically: a lead and a timeline whose line fills as the
   points are read (scroll-driven where the browser has it). */
.sx-brief__lead {
  max-width: 62ch;
  margin-bottom: 36px;
  padding-left: 20px;
  border-left: 3px solid var(--brand-orange);
  color: var(--color-heading);
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.55;
}

@property --sx-fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.sx-points {
  position: relative;
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-points::before,
.sx-points::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 21px;
  width: 2px;
  border-radius: 2px;
  background: var(--color-border);
}

.sx-points::after {
  background: var(--brand-flame);
  transform: scaleY(var(--sx-fill));
  transform-origin: top;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sx-points {
      animation: sx-fill linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 65%;
    }
  }
}

@keyframes sx-fill {
  from {
    --sx-fill: 0;
  }
  to {
    --sx-fill: 1;
  }
}

.sx-point {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 20px;
}

.sx-point__n {
  position: relative;
  z-index: 1;
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-heading);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sx-point__title {
  padding-top: 10px;
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.sx-point__text {
  grid-column: 2;
  max-width: 62ch;
  margin-top: 8px;
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* Proof: the sector's own case study, then its review. */
.sx-case {
  position: relative;
  display: grid;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--sx-radius);
  background: var(--color-white);
  transition: box-shadow 250ms ease;
}

.sx-case__photo {
  border-radius: 0;
}

.sx-case__photo img {
  transition: transform 800ms var(--ease-out-strong);
}

.sx-case__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 24px 26px 28px;
}

.sx-case__tag {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sx-case__title {
  color: var(--color-heading);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sx-case__title a {
  color: inherit;
  text-decoration: none;
}

.sx-case p {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.sx-case__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

.sx-case__more svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--ease-out-strong);
}

@media (min-width: 640px) {
  .sx-case {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .sx-case__photo {
    height: 100%;
    min-height: 240px;
    aspect-ratio: auto;
  }
}

.sx-quote {
  position: relative;
  margin: 28px 0 0;
  padding: 34px clamp(22px, 3vw, 36px) clamp(22px, 3vw, 32px);
  border-radius: var(--sx-radius);
  background: var(--color-surface);
}

.sx-quote__mark {
  position: absolute;
  top: -16px;
  left: 24px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-flame);
  color: #fff;
}

.sx-quote__mark svg {
  width: 19px;
  height: 19px;
}

.sx-quote blockquote p {
  color: var(--color-heading);
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
}

.sx-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.sx-quote figcaption strong {
  display: block;
  color: var(--color-heading);
  font-size: 0.9375rem;
}

.sx-quote__stars {
  margin-left: auto;
}

/* What we cover: the five services as boxes. */
.sx-cover {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.sx-cover a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text";
  align-items: center;
  gap: 2px 14px;
  height: 100%;
  padding: 16px 44px 16px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 250ms ease, transform 160ms var(--ease-out-strong);
}

.sx-cover a:active {
  transform: scale(0.98);
}

.sx-cover__icon {
  display: grid;
  grid-area: icon;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.sx-cover__icon svg {
  width: 20px;
  height: 20px;
}

.sx-cover strong {
  grid-area: title;
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 700;
}

.sx-cover__text {
  grid-area: text;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.sx-cover__go {
  position: absolute;
  top: 50%;
  right: 16px;
  color: var(--color-text-muted);
  translate: 0 -50%;
  transition: color 200ms ease, transform 200ms var(--ease-out-strong);
}

.sx-cover__go svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 640px) {
  .sx-cover {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Credentials sit in the reading column: one badge to a row. */
.sx-main .cred-badges {
  grid-template-columns: 1fr;
}

/* ---- Side column: index and callback box ---- */
.sx-aside {
  display: grid;
  align-content: start;
  gap: 12px;
  margin-top: 8px;
}

.sx-toc {
  display: none;
}

.sx-talk {
  padding: clamp(20px, 2vw, 24px);
  border: 1px solid var(--color-border);
  border-radius: var(--sx-radius);
  background: var(--color-white);
  box-shadow: 0 30px 60px -44px rgba(10, 22, 40, 0.45);
}

.sx-talk .callback {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.sx-talk .callback::before {
  display: none;
}

.sx-talk .callback__head strong {
  font-size: 1.25rem;
}

.sx-talk .field__input {
  min-height: 50px;
  box-shadow: none;
}

.sx-talk .callback__submit {
  min-height: 50px;
}

.sx-talk__call {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  text-decoration: none;
}

.sx-talk__call svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-orange);
}

.sx-talk__call strong {
  color: var(--color-heading);
}

@media (min-width: 1024px) {
  .sx-body {
    grid-template-columns: minmax(0, 1fr) clamp(380px, 31vw, 440px);
    column-gap: clamp(40px, 4.5vw, 64px);
    align-items: start;
  }

  .sx-aside {
    position: sticky;
    top: var(--sx-stick);
    margin-top: 0;
  }

  .sx-toc {
    display: block;
    padding: 12px;
    border: 1px solid var(--color-border-soft);
    border-radius: 18px;
    background: var(--color-surface);
  }

  .sx-toc__title {
    margin: 0 0 8px 10px;
    color: var(--color-text-muted);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sx-toc ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sx-toc a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    color: var(--color-text-soft);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  }

  .sx-toc a span {
    color: var(--color-text-muted);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }

  .sx-toc a[aria-current="true"] {
    background: var(--color-white);
    color: var(--color-heading);
    box-shadow: 0 1px 2px rgba(10, 22, 40, 0.08), 0 0 0 1px var(--color-border-soft);
  }

  .sx-toc a[aria-current="true"] span {
    color: var(--color-primary-ink);
  }
}

/* Shorter screens: the index gives way so the callback box always fits. */
@media (min-width: 1024px) and (max-height: 899px) {
  .sx-toc {
    display: none;
  }
}


/* ---- Previous / next industry ---- */
.sx-pager {
  padding-bottom: clamp(56px, 7vw, 96px);
}

.sx-pager__grid {
  display: grid;
  gap: 12px;
}

.sx-pager__link {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 200px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--sx-radius);
  background: #0f1624;
  color: #fff;
  text-decoration: none;
  transition: transform 160ms var(--ease-out-strong);
}

.sx-pager__link:active {
  transform: scale(0.99);
}

.sx-pager__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
  border-radius: 0;
}

.sx-pager__photo img {
  transition: transform 900ms var(--ease-out-strong);
}

.sx-pager__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.15) 20%, rgba(8, 12, 20, 0.85) 100%);
}

.sx-pager__text {
  display: grid;
  gap: 4px;
  padding: 20px 22px;
}

.sx-pager__link--next .sx-pager__text {
  justify-items: end;
  margin-left: auto;
  text-align: right;
}

.sx-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(233, 238, 247, 0.82);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.sx-pager__dir svg {
  width: 16px;
  height: 16px;
  transition: transform 250ms var(--ease-out-strong);
}

.sx-pager__text strong {
  color: #fff;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sx-pager__all {
  margin-top: 18px;
  text-align: center;
}

.sx-pager__all a {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-weight: 700;
}

@media (min-width: 768px) {
  .sx-pager__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .sx-pager__link {
    min-height: 260px;
  }
}

/* ---- Hover, for real pointers only ---- */
@media (hover: hover) and (pointer: fine) {
  .sx-case:hover {
    box-shadow: 0 28px 56px -40px rgba(10, 22, 40, 0.5);
  }

  .sx-case:hover .sx-case__photo img,
  .sx-pager__link:hover .sx-pager__photo img {
    transform: scale(1.05);
  }

  .sx-case:hover .sx-case__more svg {
    transform: translateX(4px);
  }

  .sx-cover a:hover {
    border-color: var(--color-border-hover);
    box-shadow: 0 16px 32px -24px rgba(10, 22, 40, 0.35);
  }

  .sx-cover a:hover .sx-cover__go {
    color: var(--color-primary);
    transform: translateX(3px);
  }

  .sx-toc a:not([aria-current="true"]):hover {
    color: var(--color-heading);
  }

  .sx-pager__link--prev:hover .sx-pager__dir svg {
    transform: translateX(-4px);
  }

  .sx-pager__link--next:hover .sx-pager__dir svg {
    transform: translateX(4px);
  }
}

/* ---- Phones and tablets: the bottom action bar ---- */
.sx-dock {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  z-index: 90;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 20px 40px -20px rgba(10, 22, 40, 0.45);
  transform: translateY(calc(100% + 28px));
  transition: transform 200ms var(--ease-out-strong);
}

.sx-dock.is-shown {
  transform: none;
  transition-duration: 320ms;
}

.sx-dock__main {
  flex: 1;
  min-height: 48px;
}

.sx-dock__call {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-heading);
  color: #fff;
  transition: transform 160ms var(--ease-out-strong);
}

.sx-dock__call:active {
  transform: scale(0.94);
}

.sx-dock__call svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 600px) {
  .sx-dock {
    right: auto;
    left: 50%;
    width: 420px;
    translate: -50% 0;
  }
}

@media (min-width: 1024px) {
  .sx-dock {
    display: none;
  }
}

/* ---- Reduced motion: everything simply there ---- */
@media (prefers-reduced-motion: reduce) {
  .sx-hero__media,
  .sx-hero__photo img,
  .sx-hero__tag,
  .sx-hero__inner > * {
    animation: none;
  }

  .sx-hero__mark svg * {
    animation: none;
    stroke-dashoffset: 0;
  }

  .js .sx-sec[data-on-view] {
    transform: none;
    transition: opacity 200ms ease;
  }

  .js .sx-sec[data-on-view] .sx-ledger__tick path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .sx-dock {
    opacity: 0;
    transform: none;
    transition: opacity 200ms ease;
    pointer-events: none;
  }

  .sx-dock.is-shown {
    opacity: 1;
    pointer-events: auto;
  }
}


/* Industry pages: the pieces carried over from the previous template. */
.sx-text--lead {
  margin: -6px 0 22px;
}

.sx-quote__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.sx-quote__more svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--ease-out-strong);
}

.sx-cover__all {
  margin-top: 20px;
}

.sx-pager__title {
  margin-bottom: 20px;
  color: var(--color-heading);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sx-pager__desc {
  display: -webkit-box;
  max-width: 44ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: rgba(233, 238, 247, 0.82);
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (hover: hover) and (pointer: fine) {
  .sx-quote__more:hover svg {
    transform: translateX(4px);
  }
}


/* ==========================================================================
   37. RESOURCES — the article library (pages/blog.mjs, app.js initLibrary)
   A dark hero with a numbered reading path and the library's titles drifting
   behind it; a toolbar that rises out of the hero and sticks below the header;
   every article as an index card, the latest leading at double size.
   Motion: the topic highlight glides on a clip-path (300ms, in-out: it moves
   across the screen); cards reflow with a view transition (280ms, out); presses
   scale to .97; typing and the "/" shortcut never animate.
   ========================================================================== */
.page--blog {
  --lib-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --lib-move: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---- Hero ---- */
/* Room below the copy for the drifting titles, which run in their own band
   just above the toolbar rather than behind the text. */
.lib-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 236px;
}

:root[lang] .lib-hero {
  background:
    radial-gradient(40% 55% at 85% 20%, rgba(236, 124, 32, 0.16), transparent 70%),
    radial-gradient(45% 60% at 10% 30%, rgba(31, 107, 255, 0.2), transparent 70%),
    var(--color-navy-950);
}

/* minmax(0, …): the reading path's sideways row on phones must not widen the
   column past the screen. */
.lib-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.lib-hero__copy > * {
  animation: rise-in 700ms var(--lib-ease) both;
}

.lib-hero__copy > :nth-child(2) { animation-delay: 50ms; }
.lib-hero__copy > :nth-child(3) { animation-delay: 100ms; }
.lib-hero__copy > :nth-child(4) { animation-delay: 160ms; }
.lib-hero__copy > :nth-child(5) { animation-delay: 220ms; }

.lib-hero__title {
  max-width: 14ch;
  font-size: clamp(2.6rem, 1.3rem + 4vw, 5rem);
  line-height: 0.98;
  text-wrap: balance;
}

.lib-hero .hero-sky__lead {
  max-width: 48ch;
  margin-bottom: 0;
}

.lib-hero__byline {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .lib-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    align-items: center;
    gap: var(--space-8);
  }
}

/* The library's own titles in outline type, drifting in two rows. */
.lib-hero__titles {
  position: absolute;
  right: 0;
  bottom: 76px;
  left: 0;
  z-index: 0;
  display: grid;
  gap: 6px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  animation: fade-in 1200ms ease 300ms both;
}

.lib-titles__row {
  display: flex;
  overflow: hidden;
}

.lib-titles__track {
  display: flex;
  flex: none;
  gap: 56px;
  padding-right: 56px;
  color: transparent;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.075);
  animation: lib-drift 160s linear infinite;
}

.lib-titles__row + .lib-titles__row .lib-titles__track {
  animation-duration: 190s;
  animation-direction: reverse;
}

@keyframes lib-drift {
  to {
    transform: translateX(-100%);
  }
}

/* ---- Hero: the reading path ---- */
.lib-path {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(14, 21, 35, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8);
  animation: rise-in 800ms var(--lib-ease) 160ms both;
}

.lib-path__kicker {
  color: #9cbcff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lib-path__title {
  margin: 6px 0 16px;
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lib-path .lib-path__list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 0;
  padding: 0;
  counter-reset: lib-step;
  list-style: none;
}

/* The thread that joins the numbered steps. */
.lib-path .lib-path__list::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 17px;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.lib-path .lib-path__list li {
  counter-increment: lib-step;
}

.lib-path .lib-path__list a {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 10px 9px 0;
  border-radius: 14px;
  background: none;
  box-shadow: none;
  color: #e9eef7;
  text-decoration: none;
  transform: none;
  transition: background-color 200ms ease;
}

.lib-path .lib-path__list a::before {
  content: counter(lib-step, decimal-leading-zero);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: #0e1523;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.lib-path .topic-links__icon {
  display: none;
}

.lib-path .lib-path__list strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.lib-path .lib-path__list span span {
  color: rgba(233, 238, 247, 0.6);
  font-size: 0.75rem;
}

.lib-path .lib-path__list a > svg {
  width: 16px;
  height: 16px;
  color: rgba(233, 238, 247, 0.5);
  transition: transform 200ms var(--lib-ease), color 200ms ease;
}

.lib-path .lib-path__list a:active {
  background: rgba(255, 255, 255, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  .lib-path .lib-path__list a:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .lib-path .lib-path__list a:hover::before {
    border-color: transparent;
    background: var(--color-primary);
  }

  .lib-path .lib-path__list a:hover > svg {
    color: #fff;
    transform: translateX(3px);
  }
}

/* ---- The library ---- */
.lib {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* Toolbar: rises out of the hero, then sticks below the header. Sticking
   changes only its shadow, never its size, so the page never jumps. */
.lib-bar {
  position: sticky;
  top: calc(var(--lib-stick, 73px) + 12px);
  z-index: 20;
  margin-bottom: 24px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 30px 60px -36px rgba(10, 22, 40, 0.5);
  transition: box-shadow 250ms ease;
  animation: rise-in 800ms var(--lib-ease) 240ms both;
}

.lib-bar.is-stuck {
  box-shadow: 0 18px 40px -22px rgba(10, 22, 40, 0.4);
}

.lib-bar__row {
  display: grid;
  gap: 10px;
}

@media (min-width: 1024px) {
  .lib-bar__row {
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* Search */
.lib-search {
  position: relative;
  display: flex;
  align-items: center;
}

.lib-search__icon {
  position: absolute;
  left: 15px;
  display: grid;
  color: var(--color-text-muted);
  pointer-events: none;
}

.lib-search__icon svg {
  width: 18px;
  height: 18px;
}

.lib-search__input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 44px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-heading);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.lib-search__input::placeholder {
  color: var(--color-text-muted);
}

.lib-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.lib-search__input:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(31, 107, 255, 0.14);
}

.lib-search__key {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.lib-search:focus-within .lib-search__key,
.lib-search.has-value .lib-search__key {
  opacity: 0;
}

.lib-search__clear {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transition: opacity 150ms ease, transform 150ms var(--lib-ease), visibility 0s 150ms, background-color 150ms ease;
}

.lib-search.has-value .lib-search__clear {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 150ms ease, transform 150ms var(--lib-ease), visibility 0s, background-color 150ms ease;
}

.lib-search__clear:active {
  transform: scale(0.9);
}

.lib-search__clear svg {
  width: 16px;
  height: 16px;
}

/* Topics: the chips, and a copy of them in the selected colours clipped to the
   selected chip; the clip glides between chips. */
.lib-topics {
  position: relative;
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--color-surface);
  scrollbar-width: none;
}

.lib-topics::-webkit-scrollbar {
  display: none;
}

.lib-topics .filter-chip,
.lib-topics__lit-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.lib-topics .filter-chip,
.lib-topics .filter-chip[aria-pressed="true"],
.lib-topics .filter-chip:hover {
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: color 150ms ease;
}

.lib-topic__count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(10, 22, 40, 0.06);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lib-topics__lit {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 4px;
  width: max-content;
  height: 100%;
  padding: 4px;
  pointer-events: none;
  clip-path: inset(0 100% 0 0 round 999px);
}

.lib-topics__lit.is-ready {
  transition: clip-path 300ms var(--lib-move);
}

.lib-topics__lit-chip {
  background: var(--color-heading);
  color: #fff;
}

.lib-topics__lit-chip .lib-topic__count {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.no-js .lib-topics,
.no-js .lib-sort {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .lib-topics .filter-chip:not([aria-pressed="true"]):hover {
    color: var(--color-heading);
  }
}

/* Sort */
.lib-sort {
  display: flex;
  gap: 4px;
  justify-self: start;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-surface);
}

.lib-sort__btn {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms var(--lib-ease);
}

.lib-sort__btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--color-heading);
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.12), 0 0 0 1px var(--color-border-soft);
}

.lib-sort__btn:active,
.lib-topics .filter-chip:active {
  transform: scale(0.96);
}

.lib-topics .filter-chip {
  transition: color 150ms ease, transform 120ms var(--lib-ease);
}

.lib-bar__status {
  margin: 10px 6px 0;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}

.lib-bar__status strong {
  color: var(--color-heading);
}

/* ---- Index cards ---- */
.lib-grid {
  display: grid;
  gap: 16px;
}

.lib-grid .post-card {
  --tone: var(--tone-support);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px 22px 18px;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: var(--color-white);
  transition: transform 200ms var(--lib-ease), box-shadow 250ms ease, border-color 200ms ease;
}

.lib-grid .post-card[hidden] {
  display: none;
}

.lib-grid .post-card[data-category="security"] { --tone: var(--tone-cyber); }
.lib-grid .post-card[data-category="cloud"] { --tone: var(--tone-cloud); }
.lib-grid .post-card[data-category="network"] { --tone: var(--tone-network); }

/* The file tab: a short bar of the topic's colour on the card's top edge. */
.lib-grid .post-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 44px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--tone);
}

.lib-grid .post-card:active {
  transform: scale(0.985);
}

.lib-grid .post-card__art {
  display: none;
}

.lib-grid .post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.lib-grid .post-card__meta {
  gap: 10px;
  font-family: var(--font-ui);
}

.lib-grid .post-card__meta .tag {
  min-height: 26px;
  border: 0;
  background: color-mix(in srgb, var(--tone) 11%, transparent);
  color: var(--tone);
  font-family: var(--font-ui);
  font-weight: 700;
}

.lib-grid .post-card__title {
  margin-top: 14px;
  color: var(--color-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

.lib-grid .post-card__body > p:not(.post-card__meta) {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.lib-grid mark {
  padding: 0 2px;
  border-radius: 4px;
  background: rgba(236, 124, 32, 0.22);
  color: inherit;
}

.post-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

/* Reading length: one segment a minute, on a ten-minute track. */
.read-meter {
  position: relative;
  width: 70px;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--color-border) 0 5px, transparent 5px 7px);
}

.read-meter::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--m, 0) * 7px - 2px);
  background: repeating-linear-gradient(90deg, var(--tone) 0 5px, transparent 5px 7px);
}

.post-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: color 200ms ease;
}

.post-card__go svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms var(--lib-ease);
}

.post-card__latest {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .lib-grid .post-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: 0 24px 48px -32px rgba(10, 22, 40, 0.4);
    transform: translateY(-3px);
  }

  .lib-grid .post-card:hover .post-card__title {
    color: var(--color-primary-ink);
  }

  .lib-grid .post-card:hover .post-card__go {
    color: var(--color-primary-ink);
  }

  .lib-grid .post-card:hover .post-card__go svg {
    transform: translateX(3px);
  }
}

/* The latest article leads, at double size, until the list is filtered. */
.lib-grid.is-default .post-card:first-child .post-card__latest {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-heading);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lib-grid.is-default .post-card:first-child .post-card__art {
  display: block;
  margin: -24px -22px 22px;
  aspect-ratio: 16 / 7;
  border-radius: 0;
}

.lib-grid.is-default .post-card:first-child .post-card__title {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.lib-grid.is-default .post-card:first-child .post-card__body > p:not(.post-card__meta) {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  font-size: 1.0625rem;
}

@media (min-width: 640px) {
  .lib-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lib-grid.is-default .post-card:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .lib-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* From tablet up the lead card takes the whole row: cover on the left, the
   story on the right. On desktop that also leaves the rows below exactly even. */
@media (min-width: 768px) {
  .lib-grid.is-default .post-card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    padding: 0;
  }

  .lib-grid.is-default .post-card:first-child .post-card__art {
    flex: 0 0 46%;
    margin: 0;
    aspect-ratio: auto;
    min-height: 300px;
  }

  .lib-grid.is-default .post-card:first-child .post-card__body {
    justify-content: center;
    padding: clamp(24px, 3vw, 40px);
  }

  .lib-grid.is-default .post-card:first-child::before {
    left: calc(46% + clamp(24px, 3vw, 40px));
  }
}

/* Cards gliding to their new places when the topic or sort changes. */
::view-transition-group(*) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-new(*):only-child {
  animation: lib-card-in 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

::view-transition-old(*):only-child {
  animation: lib-card-out 180ms ease-out both;
}

@keyframes lib-card-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes lib-card-out {
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* Nothing matches */
.lib-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 56px 24px;
  border: 1px dashed var(--color-border);
  border-radius: 22px;
  text-align: center;
  animation: rise-in 300ms var(--lib-ease) both;
}

.lib-empty[hidden] {
  display: none;
}

.lib-empty__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.lib-empty__icon svg {
  width: 22px;
  height: 22px;
}

.lib-empty__title {
  max-width: 40ch;
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.lib-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

/* ---- Ask an engineer: a dark box beside the callback form ---- */
.page--blog .lib-ask {
  padding-top: 0;
}

:root[lang] .lib-ask__box {
  display: grid;
  gap: var(--space-6);
  padding: clamp(24px, 4vw, 52px);
  border-radius: 28px;
  background:
    radial-gradient(50% 70% at 0% 100%, rgba(31, 107, 255, 0.24), transparent 65%),
    radial-gradient(40% 60% at 100% 0%, rgba(236, 124, 32, 0.18), transparent 65%),
    var(--color-navy-950);
}

.lib-ask__title {
  color: #fff;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
}

.lib-ask__copy > p:not(.eyebrow):not(.hero-sky__note) {
  max-width: 44ch;
  margin-top: var(--space-4);
  font-size: 1.0625rem;
}

.lib-ask__form .callback {
  margin-top: 0;
  border-radius: 20px;
}

@media (min-width: 1024px) {
  :root[lang] .lib-ask__box {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--space-8);
  }
}

/* ---- Phones: a list to scan with the thumb ---- */
@media (max-width: 767.98px) {
  .lib-hero {
    padding-bottom: 88px;
  }

  .lib-hero__titles {
    bottom: 36px;
  }

  /* The reading path swipes sideways instead of standing tall. */
  .lib-path {
    margin-inline: calc(var(--gutter) * -1);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .lib-path__kicker,
  .lib-path__title {
    padding-inline: var(--gutter);
  }

  .lib-path .lib-path__list {
    display: flex;
    gap: 10px;
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .lib-path .lib-path__list::-webkit-scrollbar,
  .lib-path .lib-path__list::before {
    display: none;
  }

  .lib-path .lib-path__list li {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  .lib-path .lib-path__list a {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    height: 100%;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(14, 21, 35, 0.72);
  }

  .lib-path .lib-path__list a > svg {
    display: none;
  }

  .lib {
    margin-top: -48px;
  }

  /* Not sticky on a phone: it would take a quarter of the screen. */
  .lib-bar {
    position: relative;
    top: auto;
    padding: 10px;
    border-radius: 20px;
  }

  .lib-sort {
    justify-self: stretch;
  }

  .lib-sort__btn {
    flex: 1;
  }

  /* The chips scroll sideways; the fade says there is more. */
  .lib-topics {
    margin-inline: -2px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  .lib-grid .post-card {
    padding: 20px 18px 14px;
  }

  .lib-grid .post-card__title {
    margin-top: 12px;
    font-size: 1.0625rem;
  }

  .lib-grid .post-card:not(:first-child) .post-card__body > p:not(.post-card__meta),
  .lib-grid:not(.is-default) .post-card .post-card__body > p:not(.post-card__meta) {
    display: none;
  }

  .lib-grid.is-default .post-card:first-child .post-card__art {
    margin: -20px -18px 18px;
  }

  .post-card__foot {
    padding-top: 14px;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .lib-hero__copy > *,
  .lib-path,
  .lib-bar,
  .lib-empty,
  .lib-hero__titles {
    animation: none;
  }

  .lib-titles__track {
    animation: none;
  }

  .lib-topics__lit.is-ready {
    transition: none;
  }

  .lib-grid .post-card {
    transition: box-shadow 250ms ease, border-color 200ms ease;
  }
}


/* ---- About (original design): the hero's callback form is a box, not a strip ---- */


/* ==========================================================================
   38. LOCATIONS — the coverage map (pages/locations.mjs, app.js initCoverageMap)
   A dark hero: the list of areas beside a dotted map of the UK with the two
   offices as beacons. On load the land settles, rings spread from London,
   routes draw out to each area and its pin settles in (a one-off entrance,
   in-out for the drawing because it travels, out for everything arriving).
   Pointing at an area lights its pin and route and dims the rest (200ms).
   ========================================================================== */
.page--locations {
  --cov-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --cov-draw: cubic-bezier(0.77, 0, 0.175, 1);
}

/* clip, not hidden: hidden would make the hero a scroll container and stop
   the map sticking beside the list. */
.cov-hero {
  overflow: clip;
  padding-bottom: clamp(48px, 6vw, 88px);
}

:root[lang] .cov-hero {
  background:
    radial-gradient(42% 55% at 76% 46%, rgba(31, 107, 255, 0.18), transparent 70%),
    radial-gradient(30% 36% at 82% 84%, rgba(236, 124, 32, 0.12), transparent 70%),
    var(--color-navy-950);
}

.cov-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.cov-hero__copy > * {
  animation: rise-in 700ms var(--cov-ease) both;
}

.cov-hero__copy > :nth-child(2) { animation-delay: 50ms; }
.cov-hero__copy > :nth-child(3) { animation-delay: 100ms; }
.cov-hero__copy > :nth-child(4) { animation-delay: 160ms; }
.cov-hero__copy > :nth-child(5) { animation-delay: 220ms; }
.cov-hero__copy > :nth-child(6) { animation-delay: 280ms; }

.cov-hero__title {
  max-width: 16ch;
  font-size: clamp(2.3rem, 1.3rem + 3vw, 3.8rem);
  line-height: 1;
  text-wrap: balance;
}

.cov-hero .hero-sky__lead {
  max-width: 50ch;
  margin-bottom: 0;
}

.cov-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cov-facts div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}

.cov-facts dd {
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cov-facts dt {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* The list of areas */
.cov-list {
  margin-top: 36px;
}

.cov-list__eyebrow {
  color: #9cbcff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cov-list__title {
  margin: 6px 0 14px;
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cov-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cov-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #e9eef7;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 200ms ease, transform 160ms var(--cov-ease);
}

.cov-list a:active {
  transform: scale(0.98);
}

.cov-list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.cov-list__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b8dff;
  box-shadow: 0 0 0 3px rgba(91, 141, 255, 0.18);
}

.cov-list__dot--office {
  background: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(236, 124, 32, 0.22);
}

.cov-list__name {
  flex: 1;
  min-width: 0;
}

.cov-list__tag {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(236, 124, 32, 0.16);
  color: #ffd9bd;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cov-list a > svg {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms var(--cov-ease);
}

.cov-list a.is-active {
  background: rgba(255, 255, 255, 0.07);
}

.cov-list a.is-active > svg {
  opacity: 1;
  transform: none;
}

/* The map */
.cov-map {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0;
}

.cov-map__svg {
  width: 100%;
  max-width: 340px;
  height: auto;
  overflow: visible;
}

.cov-map__land {
  animation: rise-in 1000ms var(--cov-ease) 80ms both;
}

.cov-map__fill {
  fill: #111a2a;
}

.cov-map pattern circle {
  fill: rgba(156, 188, 255, 0.24);
}

.cov-map__coast {
  fill: none;
  stroke: rgba(156, 188, 255, 0.38);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

/* Rings at 100, 200 and 300 km from the head office */
.cov-map__rings circle {
  fill: none;
  stroke: rgba(236, 124, 32, 0.3);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: cov-ring 1100ms var(--cov-ease) backwards;
  animation-delay: calc(300ms + var(--i, 0) * 120ms);
}

@keyframes cov-ring {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* Routes from the nearer office, drawn on arrival */
.cov-route {
  fill: none;
  stroke: rgba(91, 141, 255, 0.45);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cov-draw 800ms var(--cov-draw) forwards;
  animation-delay: calc(500ms + var(--i, 0) * 55ms);
  transition: stroke 200ms ease, stroke-width 200ms ease, opacity 200ms ease;
}

@keyframes cov-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Pins */
.cov-pin {
  cursor: pointer;
  transition: opacity 200ms ease;
}

.cov-pin > circle {
  transform-box: fill-box;
  transform-origin: center;
}

.cov-pin:not(.cov-pin--office) {
  animation: fade-in 300ms ease backwards;
  animation-delay: calc(1050ms + var(--i, 0) * 55ms);
}

.cov-pin:not(.cov-pin--office) .cov-pin__dot,
.cov-pin:not(.cov-pin--office) .cov-pin__ring {
  animation: cov-pop 420ms var(--cov-ease) backwards;
  animation-delay: calc(1050ms + var(--i, 0) * 55ms);
}

@keyframes cov-pop {
  from {
    transform: scale(0.5);
  }
}

.cov-pin__dot {
  fill: #5b8dff;
  stroke: #0b111b;
  stroke-width: 2;
}

.cov-pin__ring {
  fill: rgba(91, 141, 255, 0.16);
  transition: transform 250ms var(--cov-ease), fill 200ms ease;
}

.cov-pin__halo {
  fill: rgba(91, 141, 255, 0.07);
  stroke: rgba(91, 141, 255, 0.35);
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
}

.cov-pin--office .cov-pin__dot {
  fill: var(--brand-orange);
}

.cov-pin--office .cov-pin__ring {
  fill: rgba(236, 124, 32, 0.22);
}

/* The offices are beacons: a slow ring keeps leaving them. */
.cov-pin__pulse {
  fill: none;
  stroke: rgba(236, 124, 32, 0.6);
  stroke-width: 1.2;
  animation: cov-pulse 2800ms ease-out 1200ms infinite;
}

@keyframes cov-pulse {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(2.8);
  }
}

.cov-pin__label {
  fill: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #0b111b;
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.cov-pin--office .cov-pin__label {
  font-size: 13px;
  opacity: 1;
}

/* One area lit, the rest stepping back */
.cov-map.has-active .cov-route:not(.is-active) {
  opacity: 0.25;
}

.cov-map.has-active .cov-pin:not(.is-active):not(.cov-pin--office) {
  opacity: 0.45;
}

.cov-route.is-active {
  stroke: #9cbcff;
  stroke-width: 1.8;
}

.cov-pin.is-active .cov-pin__label {
  opacity: 1;
}

.cov-pin.is-active .cov-pin__ring {
  fill: rgba(91, 141, 255, 0.3);
  transform: scale(1.7);
}

.cov-pin--office.is-active .cov-pin__ring {
  fill: rgba(236, 124, 32, 0.32);
}

.cov-map__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  max-width: 440px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  animation: fade-in 600ms ease 900ms backwards;
}

.cov-map__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-weight: 600;
}

.cov-key {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.cov-key--office {
  background: var(--brand-orange);
}

.cov-key--area {
  background: #5b8dff;
}

.cov-map__note {
  flex-basis: 100%;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .cov-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--space-8);
  }

  .cov-map__svg {
    width: auto;
    max-width: 100%;
    height: min(calc(100vh - 220px), 700px);
  }

  /* The list runs longer than the map, so the map stays beside it. */
  .cov-map {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 24px);
    align-self: start;
  }
}

/* Phones and tablets: the copy, then the map, then the list. */
@media (max-width: 1023.98px) {
  .cov-hero__grid {
    gap: 0;
  }

  .cov-hero__copy {
    display: contents;
  }

  .cov-map {
    order: 1;
    margin-top: 36px;
  }

  .cov-list {
    order: 2;
  }

  .cov-map__svg {
    max-height: 520px;
  }
}

@media (max-width: 479.98px) {
  .cov-facts dt {
    font-size: 0.75rem;
  }

  /* Two columns of names leave no room for the tags; the orange dot and the
     map's key already mark the offices. */
  .cov-list__tag {
    display: none;
  }
}

/* ---- How we cover the UK ---- */
.cov-model__head {
  display: grid;
  gap: 14px 48px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.cov-model__head--center {
  justify-items: center;
  text-align: center;
}

.cov-model__text {
  max-width: 56ch;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (min-width: 1024px) {
  .cov-model__head:not(.cov-model__head--center) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.cov-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cov-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: 22px;
  background: var(--color-white);
}

.cov-step__n {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cov-step__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.cov-step__icon svg {
  width: 22px;
  height: 22px;
}

.cov-step p {
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .cov-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .cov-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* The steps read left to right, joined by a short rule. */
  .cov-step + .cov-step::before {
    content: "";
    position: absolute;
    top: 47px;
    left: -17px;
    width: 18px;
    height: 2px;
    background: var(--color-border);
  }
}

/* ---- Reduced motion: the finished map, still ---- */
@media (prefers-reduced-motion: reduce) {
  .cov-hero__copy > *,
  .cov-map__land,
  .cov-map__rings circle,
  .cov-pin,
  .cov-pin .cov-pin__dot,
  .cov-pin .cov-pin__ring,
  .cov-map__caption {
    animation: none;
  }

  .cov-route {
    animation: none;
    stroke-dashoffset: 0;
  }

  .cov-pin__pulse {
    display: none;
  }

  .cov-pin__ring {
    transition: fill 200ms ease;
  }

  .cov-pin.is-active .cov-pin__ring {
    transform: none;
  }
}


/* ---- Footer: the top bar (logo, quick links, social icons) centred ----
   Stacked and centred: the logo, the links beneath it, the icons beneath them.
   Only this bar; the columns and contact details below keep their layout. */
.site-footer__bar {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
}

.site-footer__bar .footer-pills,
.site-footer__bar .social-links {
  justify-content: center;
}


/* ---- Articles: the header's callback form is a box, not a strip ----
   (Client: calls to action as boxes.) The same width as the other heroes' boxes;
   the form lays itself out as two columns, then message and button. */
.hero--article .callback {
  max-width: 560px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 22px;
}

.hero--article .callback__head strong {
  font-size: 1.25rem;
}


/* ---- Privacy & cookie policy: header and text close together ----
   Keyed to the body class rather than the sections being neighbours, because in
   WordPress each section sits in its own Elementor wrapper. */
.page--info .hero--simple {
  padding-bottom: clamp(28px, 3vw, 40px);
}

.page--info .section {
  padding-top: clamp(32px, 3.5vw, 48px);
}


/* ---- IT Services: the five services as an index at the hero's foot ----
   One row per service on the dark hero, hairlines between. Choosing a row
   opens that service in the explorer below (app.js initServiceIndex). Rows
   arrive in a short stagger; hover lifts the row and slides its arrow. */
.svc-index {
  margin-top: clamp(40px, 5vw, 64px);
}

.svc-index__label {
  margin-bottom: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-index__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}

.svc-index__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.svc-index__row {
  position: relative;
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr) auto 20px;
  grid-template-areas: "num icon name count go";
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  border-radius: 14px;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 200ms ease, transform 160ms var(--ease-out-strong);
  animation: rise-in 600ms var(--ease-out-strong) both;
  animation-delay: calc(260ms + var(--i, 0) * 60ms);
}

.svc-index__row:active {
  transform: scale(0.99);
}

.svc-index__row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.svc-index__num {
  grid-area: num;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.svc-index__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #9cbcff;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.svc-index__icon svg {
  width: 19px;
  height: 19px;
}

.svc-index__name {
  grid-area: name;
  color: #fff;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.svc-index__short {
  display: none;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}

.svc-index__count {
  grid-area: count;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.svc-index__go {
  grid-area: go;
  display: grid;
  color: var(--color-text-muted);
  transition: transform 200ms var(--ease-out-strong), color 200ms ease;
}

.svc-index__go svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .svc-index__row:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .svc-index__row:hover .svc-index__icon {
    border-color: transparent;
    background: var(--color-primary);
    color: #fff;
  }

  .svc-index__row:hover .svc-index__go {
    color: #fff;
    transform: translateX(4px);
  }
}

@media (min-width: 900px) {
  .svc-index__row {
    grid-template-columns: 32px 40px minmax(180px, 0.9fr) minmax(0, 1.4fr) auto 20px;
    grid-template-areas: "num icon name short count go";
    gap: 20px;
    padding: 18px 16px;
  }

  .svc-index__short {
    grid-area: short;
    display: block;
  }
}

@media (max-width: 479.98px) {
  .svc-index__row {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    grid-template-areas:
      "icon name go"
      "icon count go";
    gap: 4px 14px;
    padding: 14px 4px;
  }

  .svc-index__num {
    display: none;
  }

  .svc-index__count {
    justify-self: start;
    padding: 0;
    background: none;
  }
}

/* The explorer panel carries its service's photograph. */
.explorer__photo {
  margin-bottom: 16px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .svc-index__row {
    animation: none;
  }
}


/* ==========================================================================
   39. ABOUT — told like a film (pages/about.mjs, app.js initAboutFilm)
   Scenes that play as the page scrolls. The static layout is complete on its
   own; the script adds .is-live to the scroll scenes, which only then become
   tall sticky stages. Motion: transform, opacity and clip-path only; the
   headline rises word by word (ease-out), wipes travel (in-out), the seal turns
   at a constant speed (linear). Reduced motion: every scene simply laid out.
   ========================================================================== */
.page--about {
  /* One dark for the header and the mission window, so they run as one. */
  --film-night: #04080e;
  --film-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --film-move: cubic-bezier(0.77, 0, 0.175, 1);
  --film-top: var(--stuck-h, 73px);
}

/* ---- 1. Header: dark and understated, with one framed photograph ----
   A slow drifting glow behind (constant, so linear and very slow); the copy
   fades up; a hand-drawn underline draws once under "clients first"; the
   photo reveals upwards. */
.film-title {
  position: relative;
  overflow: clip;
  padding-bottom: clamp(56px, 7vw, 104px);
}

:root[lang] .film-title {
  background: var(--film-night);
}

/* Sits higher than the other heroes: less room above the copy. */
:root[lang] .film-title.hero--sky {
  padding-top: calc(var(--header-h) + var(--space-6));
}

@media (min-width: 1100px) {
  :root[lang] .film-title.hero--sky {
    padding-top: calc(var(--header-h) + var(--header-top-h) + var(--space-6));
  }
}

.film-title__glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(30% 35% at 30% 40%, rgba(31, 107, 255, 0.22), transparent 70%),
    radial-gradient(25% 30% at 70% 60%, rgba(236, 124, 32, 0.16), transparent 70%),
    radial-gradient(30% 30% at 55% 15%, rgba(98, 226, 243, 0.08), transparent 70%);
  filter: blur(20px);
  /* Fades out before the hero's foot, so it meets the window with no seam. */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 85%);
  animation: film-drift 28s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes film-drift {
  to {
    transform: translate3d(6%, -4%, 0) rotate(8deg);
  }
}

.film-title .container {
  position: relative;
  z-index: 1;
}

.film-title__grid {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

.film-title__copy > * {
  animation: rise-in 600ms var(--film-ease) both;
}

.film-title__copy > :nth-child(2) { animation-delay: 60ms; }
.film-title__copy > :nth-child(3) { animation-delay: 120ms; }
.film-title__copy > :nth-child(4) { animation-delay: 180ms; }
.film-title__copy > :nth-child(5) { animation-delay: 240ms; }

.film-title__head {
  max-width: 16ch;
  color: #fff;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* "clients first." with a two-stroke hand-drawn underline. */
.film-title__mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.film-title__mark svg {
  position: absolute;
  left: -2%;
  bottom: -0.22em;
  width: 104%;
  height: 0.38em;
  overflow: visible;
}

.film-title__mark path {
  fill: none;
  stroke: var(--brand-orange);
  stroke-width: 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: film-underline 700ms var(--film-move) 650ms forwards;
}

.film-title__mark path + path {
  stroke-width: 2.2;
  opacity: 0.7;
  animation-delay: 950ms;
}

@keyframes film-underline {
  to {
    stroke-dashoffset: 0;
  }
}

.film-title__lead {
  max-width: 46ch;
  margin-top: 22px;
  color: var(--color-text-soft);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.film-title__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}

.film-title__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
}

.film-title__link svg {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform 200ms var(--film-ease);
}

/* A quiet trust line under the actions. */
.film-title__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 36px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
}

.film-title__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.film-title__trust li + li {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 1280px) {
  .film-title__trust {
    flex-wrap: nowrap;
  }
}

/* Narrower: the rating takes the first row, the two credentials the second,
   and no divider leads a row. */
@media (min-width: 560px) and (max-width: 1279.98px) {
  .film-title__trust li:first-child {
    width: 100%;
  }

  .film-title__trust li:nth-child(2) {
    padding-left: 0;
    border-left: 0;
  }
}

.film-title__trust li > svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: #ffb26b;
}

.film-title__trust a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-soft);
  text-decoration: none;
}

.film-title__trust strong {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 800;
}

.film-title__trust .stars {
  flex: none;
}

.film-title__trust .stars svg {
  width: 12px;
  height: 12px;
}

/* The framed print */
/* Below desktop the mission photo follows straight after, so the print steps
   aside rather than stacking two large photos. */
.film-print {
  display: none;
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
}

.film-print__photo {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  animation: film-print-in 1000ms var(--film-move) 150ms both;
}

@keyframes film-print-in {
  from {
    clip-path: inset(100% 0 0 0 round 28px);
  }
  to {
    clip-path: inset(0 0 0 0 round 28px);
  }
}

.film-print__photo .media {
  border-radius: 0;
}

.film-print__photo img {
  animation: sx-settle 1600ms var(--film-ease) 150ms both;
}

.film-print__caption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(10, 15, 24, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.4;
  animation: rise-in 600ms var(--film-ease) 900ms both;
}

.film-print__caption svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #ffb26b;
}

@media (hover: hover) and (pointer: fine) {
  .film-title__link:hover svg {
    transform: rotate(90deg) translateX(3px);
  }
}

@media (min-width: 1024px) {
  .film-title__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: start;
    gap: var(--space-9);
  }

  /* The copy starts level with the top of the photo. */
  .film-title__copy {
    padding-top: 8px;
  }

  .film-print {
    display: block;
    justify-self: end;
  }
}

@media (max-width: 559.98px) {
  .film-title__trust li,
  .film-title__trust li + li {
    width: 100%;
    padding: 0;
    border: 0;
  }
}

/* ---- 2. The window ---- */
.film-window {
  position: relative;
  background: var(--film-night);
}

.film-window__stage {
  position: relative;
  overflow: hidden;
}

.film-window__frame {
  position: relative;
  height: min(78vh, 760px);
  overflow: hidden;
}

.film-window__photo {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.film-window__photo img {
  will-change: transform;
}

/* Dark from the foot and the left, where the mission sits, so it reads on
   any part of the photo. */
.film-window__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(8, 12, 20, 0.92) 0%, rgba(8, 12, 20, 0.6) 38%, rgba(8, 12, 20, 0) 70%),
    linear-gradient(90deg, rgba(8, 12, 20, 0.55) 0%, rgba(8, 12, 20, 0) 60%);
  pointer-events: none;
}

.film-window__copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, var(--container-main));
  margin: 0 auto;
  padding-bottom: clamp(32px, 6vh, 72px);
}

.film-window__copy .eyebrow {
  color: #ffd9bd;
}

.film-window__quote {
  margin: 0;
}

.film-window__quote p {
  max-width: 30ch;
  color: #fff;
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(8, 12, 20, 0.4);
}


/* Live: a tall stage that holds the frame while it opens up. */
.film-window.is-live {
  height: 240vh;
}

.film-window.is-live .film-window__stage {
  position: sticky;
  top: var(--film-top);
  height: calc(100vh - var(--film-top));
}

.film-window.is-live .film-window__frame {
  height: 100%;
  border-radius: 28px;
  will-change: clip-path;
}

.film-window.is-live .film-window__copy > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--film-ease), transform 700ms var(--film-ease);
}

.film-window.is-live.is-open .film-window__copy > * {
  opacity: 1;
  transform: none;
}

.film-window.is-live.is-open .film-window__copy > :nth-child(2) { transition-delay: 90ms; }
.film-window.is-live.is-open .film-window__copy > :nth-child(3) { transition-delay: 180ms; }

/* Phones: the same opening scene, with square corners. */
@media (max-width: 767.98px) {
  .film-window.is-live .film-window__frame {
    border-radius: 0;
  }
}

/* ---- 3. Chapters ---- */
.film-chapters {
  padding-block: clamp(64px, 9vw, 140px);
  background: var(--color-page);
}

.film-chapters__grid {
  display: grid;
  gap: 48px;
}

.film-chapters__media {
  display: none;
}

.film-chapters__list {
  display: grid;
  gap: clamp(56px, 8vw, 96px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.film-chapter__photo {
  position: relative;
  margin: 0 0 22px;
  overflow: hidden;
  border-radius: 22px;
}

.film-chapter__photo .media {
  border-radius: 0;
}

.film-chapter__photo figcaption,
.film-shot figcaption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(10, 15, 24, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}

.film-chapter__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

.film-chapter__label span {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.film-chapter__title {
  max-width: 20ch;
  color: var(--color-heading);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.film-chapter__text {
  max-width: 54ch;
  margin-top: 20px;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .film-chapters.is-live .film-chapters__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }

  .film-chapters.is-live .film-chapters__media {
    position: sticky;
    top: calc(var(--film-top) + 32px);
    display: block;
  }

  .film-chapters.is-live .film-chapter__photo {
    display: none;
  }

  .film-chapters.is-live .film-chapters__list {
    gap: 0;
  }

  /* Each chapter holds the screen long enough to be read beside its photo. */
  .film-chapters.is-live .film-chapter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - var(--film-top) - 64px);
    opacity: 0.25;
    transition: opacity 500ms ease;
  }

  .film-chapters.is-live .film-chapter.is-active {
    opacity: 1;
  }
}

.film-chapters__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--film-top) - 64px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--color-surface-2);
  box-shadow: 0 40px 80px -50px rgba(10, 22, 40, 0.6);
}

/* Each photo wipes up over the last. */
.film-shot {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0ms 700ms;
}

.film-shot.is-active {
  z-index: 2;
  clip-path: inset(0 0 0 0);
  transition: clip-path 700ms var(--film-move);
}

.film-shot .media {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.film-shot img {
  transform: scale(1.12);
  transition: transform 0ms 700ms;
}

.film-shot.is-active img {
  transform: scale(1);
  transition: transform 1200ms var(--film-ease);
}

.film-chapters__count {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(10, 15, 24, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ---- 4. Values: a quiet row of boxes ---- */
.film-values {
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--color-surface);
}

.film-values__head {
  max-width: 720px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.film-values__head > p:last-child {
  max-width: 52ch;
  margin-top: 14px;
  color: var(--color-text-soft);
}

.film-values__grid {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.film-value {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: var(--color-white);
  transition: border-color 200ms ease, box-shadow 250ms ease, transform 250ms var(--film-ease);
}

.film-value__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.film-value__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-navy);
}

.film-value__icon svg {
  width: 20px;
  height: 20px;
}

.film-value__num {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.film-value__title {
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.film-value__text {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  .film-value:hover {
    border-color: var(--color-border-hover);
    box-shadow: 0 20px 40px -30px rgba(10, 22, 40, 0.4);
    transform: translateY(-3px);
  }
}

@media (min-width: 640px) {
  .film-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .film-values__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- 5. Figures ---- */
.film-figures {
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--color-page);
}

.film-figures__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 24px 0 0;
}

.film-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--color-border);
}

.film-figure dd {
  order: -1;
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.film-figure dt {
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 700;
}

.film-figure p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.film-figures__note {
  margin-top: 24px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

@media (min-width: 1024px) {
  .film-figures__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- 6. Team ---- */
.film-team__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.film-team__head > p {
  max-width: 44ch;
  color: var(--color-text-soft);
}

.film-team__grid {
  display: grid;
  gap: 16px;
}

.film-person {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 28px;
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  background: var(--color-white);
  transition: transform 300ms var(--film-ease), box-shadow 300ms ease;
}

/* The initials as a monogram ringed in the brand flame. */
.film-person__mono {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-navy);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.film-person__name {
  color: var(--color-heading);
  font-size: 1.375rem;
  font-weight: 800;
}

.film-person__role {
  color: var(--color-primary-ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

.film-person__bio {
  margin-top: 6px;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.film-person__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-top: 10px;
  color: var(--color-navy);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.film-person__link svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .film-person:hover {
    box-shadow: 0 30px 60px -40px rgba(10, 22, 40, 0.5);
    transform: translateY(-4px);
  }
}

@media (min-width: 900px) {
  .film-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- 7. The review, large ---- */
.film-quote {
  padding-block: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.film-quote__fig {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.film-quote__fig blockquote p {
  color: var(--color-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.film-quote__fig figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: left;
}

.film-quote__fig figcaption strong {
  display: block;
  color: var(--color-heading);
}

.film-quote__fig figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-ink);
  font-weight: 700;
  text-decoration: none;
}

.film-quote__fig figcaption a svg {
  width: 16px;
  height: 16px;
}

/* ---- Reduced motion: every scene laid out, nothing moving ---- */
@media (prefers-reduced-motion: reduce) {
  .film-title__copy > *,
  .film-title__glow,
  .film-print__photo,
  .film-print__caption {
    animation: none;
  }

  .film-title__mark path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .film-shot,
  .film-shot.is-active,
  .film-shot img,
  .film-shot.is-active img {
    transition: none;
  }
}

/* ==========================================================================
   40. LOCATION PAGES — one area at a time (pages/location-pages.mjs)
   The area's own photograph as the hero, then a different component for
   every section: remote and onsite as one band of two photo panels, a dark box of local notes (tabs; a swipe row on phones), the
   regional copy beside a tagged photo, icon columns, a plan card whose ticks
   draw in, a directory of services, the FAQ and a closing callback box.
   Motion is quiet: the cover photo settles once and the copy rises in.
   ========================================================================== */
.page--place {
  --lx-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --lx-draw: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---- Hero: the area's own photograph ---- */
.lx-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: min(880px, 100svh);
  padding-bottom: 0;
  overflow: clip;
}

:root[lang] .lx-cover {
  background: var(--color-navy-950);
}

.lx-cover__photo.media {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--color-navy-950);
}

.lx-cover__photo img {
  animation: lx-settle 1800ms var(--lx-ease) both;
}

@keyframes lx-settle {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* Legibility: dark from the left where the words sit, and from the foot. */
.lx-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 16, 31, 0.7) 0%, rgba(6, 16, 31, 0) 24%),
    linear-gradient(0deg, rgba(6, 16, 31, 0.92) 0%, rgba(6, 16, 31, 0.35) 30%, rgba(6, 16, 31, 0) 50%),
    linear-gradient(90deg, rgba(6, 16, 31, 0.9) 0%, rgba(6, 16, 31, 0.7) 34%, rgba(6, 16, 31, 0.2) 62%, rgba(6, 16, 31, 0) 80%);
}

.lx-cover__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The breadcrumbs sit on the photo: a soft shadow keeps them readable on sky. */
.lx-cover .breadcrumbs {
  text-shadow: 0 1px 8px rgba(6, 16, 31, 0.8);
}

.lx-cover .breadcrumbs a,
.lx-cover .breadcrumbs li {
  color: rgba(255, 255, 255, 0.82);
}

/* Words on the left, the callback form on the right over the photo
   (client, 11 Oct 2026). */
.lx-cover__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin-block: auto;
  padding-block: clamp(28px, 5vh, 64px);
}

.lx-cover__form .callback {
  margin-top: 0;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 16, 26, 0.8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
  animation: rise-in 800ms 200ms var(--lx-ease) both;
}

.lx-cover__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-6);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9688rem;
  text-decoration: none;
}

.lx-cover__call strong {
  color: #fff;
  font-weight: 700;
}

.lx-cover__call svg {
  width: 18px;
  height: 18px;
  color: var(--brand-orange);
}

.lx-cover__call:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 1024px) {
  .lx-cover__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: clamp(40px, 5vw, 88px);
  }
}

.lx-cover__copy > * {
  animation: rise-in 800ms var(--lx-ease) both;
}

.lx-cover__copy > :nth-child(2) { animation-delay: 80ms; }
.lx-cover__copy > :nth-child(3) { animation-delay: 160ms; }
.lx-cover__copy > :nth-child(4) { animation-delay: 240ms; }

.lx-cover__place {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(6, 16, 31, 0.4);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.lx-cover__place svg {
  width: 16px;
  height: 16px;
  color: var(--brand-orange);
}

.lx-cover__title {
  max-width: 13ch;
  margin-bottom: var(--space-5);
  color: #fff;
  font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(6, 16, 31, 0.35);
}

.lx-cover__lead {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.lx-cover__foot {
  display: grid;
  gap: 10px;
  padding: 0 0 28px;
}



/* Phones: the photo is shown, then the words sit on the navy beneath it. */
@media (max-width: 767.98px) {
  .lx-cover {
    min-height: 0;
  }

  .lx-cover__photo.media {
    bottom: auto;
    height: 58svh;
    min-height: 340px;
  }

  .lx-cover::before {
    bottom: auto;
    height: calc(58svh + 2px);
    min-height: 342px;
    background:
      linear-gradient(180deg, rgba(6, 16, 31, 0.65) 0%, rgba(6, 16, 31, 0.1) 30%, rgba(6, 16, 31, 0.35) 60%, var(--color-navy-950) 100%);
  }

  .lx-cover__grid {
    padding-top: max(26svh, 170px);
    padding-bottom: var(--space-6);
  }

  

  .lx-cover__title { font-size: 2.5rem; }


}

/* ---- Intro: the heading beside the copy, then the two ways we help ---- */
.lx-intro__grid {
  display: grid;
  gap: var(--space-5);
}

.lx-intro__head .grad-head {
  max-width: 14ch;
  margin-bottom: 0;
}

.lx-intro__lede {
  max-width: 58ch;
  margin-bottom: var(--space-4);
  color: var(--color-heading);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.lx-intro__text {
  max-width: 62ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
}

/* The long paragraph of figures reads as a note, set off by the brand rule. */
.lx-intro__note {
  max-width: 62ch;
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  border-left: 2px solid var(--brand-orange);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lx-ways {
  display: grid;
  gap: 12px;
  margin-top: clamp(40px, 6vw, 72px);
}

.lx-ways__title {
  margin-top: clamp(40px, 6vw, 72px);
  color: var(--color-heading);
  font-size: 1.125rem;
  font-weight: 700;
}

.lx-ways__title + .lx-ways {
  margin-top: var(--space-4);
}

.lx-way {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-navy-950);
  color: #fff;
}

.lx-way__photo.media {
  position: absolute;
  inset: 0;
  z-index: -2;
  aspect-ratio: auto;
  border-radius: 0;
}

.lx-way__photo img {
  transition: transform 700ms var(--lx-ease);
}

.lx-way::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(6, 16, 31, 0.94) 0%, rgba(6, 16, 31, 0.7) 38%, rgba(6, 16, 31, 0.05) 75%);
}

.lx-way__body {
  max-width: 480px;
  padding: clamp(24px, 3vw, 40px);
}

.lx-way__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 12px;
  color: #fff;
}

.lx-way--remote .lx-way__icon { background: var(--color-primary); }
.lx-way--onsite .lx-way__icon { background: var(--brand-flame); }

.lx-way__icon svg { width: 20px; height: 20px; }

.lx-way h3 {
  margin-bottom: var(--space-2);
  color: #fff;
  font-size: var(--fs-h4);
  line-height: 1.2;
}

.lx-way p {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  .lx-way:hover .lx-way__photo img { transform: scale(1.03); }
}

@media (min-width: 768px) {
  .lx-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .lx-way {
    min-height: 480px;
    border-radius: 0;
  }

  .lx-way--remote { border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
  .lx-way--onsite { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
}

@media (min-width: 1024px) {
  .lx-intro__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }

  .lx-intro__head {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 32px);
  }
}

@media (max-width: 767.98px) {
  .lx-way { min-height: 380px; }

  .lx-intro__note {
    padding-left: var(--space-4);
    font-size: 0.875rem;
  }
}

/* ---- London's own account (a letter: heading in the margin) ---- */
.lx-letter {
  padding-top: 0;
}

.lx-letter__grid {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-soft);
}

.lx-letter__body p {
  max-width: 64ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.lx-letter__body p:first-child {
  color: var(--color-heading);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.lx-letter__body b {
  color: var(--color-heading);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .lx-letter__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .lx-letter__head {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 24px);
    align-self: start;
  }
}

/* ---- Local notes: a dark box, the points beside the one being read ---- */
.lx-notes {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(50% 70% at 100% 0%, rgba(31, 107, 255, 0.2), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(236, 124, 32, 0.1), transparent 70%),
    var(--color-navy-950);
  color: var(--color-on-dark);
}

.lx-notes__head {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.lx-notes__eyebrow {
  margin-bottom: var(--space-3);
  color: #9cbcff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lx-notes__title {
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

.lx-notes__lead {
  max-width: 64ch;
  color: var(--color-on-dark-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lx-notes__body {
  display: grid;
  gap: var(--space-6);
}

.lx-notes__list {
  position: relative;
  display: grid;
  gap: 2px;
}

.lx-notes__tab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-on-dark-muted);
  font: 600 0.9844rem/1.35 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease;
}

.lx-notes__tab:hover,
.lx-notes__tab[aria-selected="true"] {
  color: #fff;
}

.lx-notes__tab:focus-visible {
  outline: 2px solid #9cbcff;
  outline-offset: 2px;
}

.lx-notes__n {
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The selected tab's highlight is one element that slides between tabs. */
.lx-notes__indicator {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  display: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(156, 188, 255, 0.16);
  pointer-events: none;
}

.lx-notes.is-tabs .lx-notes__indicator {
  display: block;
}

.lx-notes__indicator.is-ready {
  transition: transform 320ms var(--lx-draw), height 320ms var(--lx-draw);
}

.lx-notes__panel {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(156, 188, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}

.lx-notes__panel:focus-visible {
  outline: 2px solid #9cbcff;
  outline-offset: 2px;
}

.lx-notes__count {
  margin-bottom: var(--space-4);
  color: var(--color-on-dark-muted);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.lx-notes__count span {
  color: var(--brand-orange);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lx-notes__panel h3 {
  max-width: 26ch;
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.lx-notes__panel p {
  max-width: 60ch;
  color: var(--color-on-dark);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.lx-notes__panels {
  display: grid;
  gap: var(--space-4);
}

@keyframes lx-panel {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 900px) {
  .lx-notes__body {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }

  .lx-notes__panels {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 24px);
  }

  .lx-notes.is-tabs .lx-notes__panel:not(.is-active) {
    display: none;
  }

  .lx-notes.is-tabs .lx-notes__panel.is-active {
    animation: lx-panel 360ms var(--lx-ease);
  }
}

/* Phones and small tablets: no tabs, every point as a card in a swipe row. */
@media (max-width: 899.98px) {
  .lx-notes__list {
    display: none;
  }

  .lx-notes {
    padding: 28px 20px;
  }

  .lx-notes__panels {
    grid-auto-columns: min(88%, 440px);
    grid-auto-flow: column;
    gap: 12px;
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }

  .lx-notes__panels::-webkit-scrollbar { display: none; }

  .lx-notes__panels {
    align-items: start;
  }

  .lx-notes__panel {
    padding: 22px;
    scroll-snap-align: start;
  }

  .lx-notes__panel h3 { font-size: 1.1875rem; }
  .lx-notes__panel p { font-size: 0.9844rem; line-height: 1.6; }
  .lx-notes__count span { font-size: 1.375rem; }
}

/* ---- Place: the area in words beside a tagged photo ---- */
.lx-place__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.lx-place__media {
  position: relative;
}

.lx-place__photo.media {
  border-radius: var(--radius-xl);
}

.lx-place__tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 36px);
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-pill);
  background: rgba(10, 22, 40, 0.82);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.lx-place__tag svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-orange);
}

.lx-place__copy .grad-head {
  max-width: 18ch;
  margin-bottom: var(--space-5);
}

.lx-place__copy p {
  max-width: 58ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
}

.lx-place__copy .lx-place__lede {
  color: var(--color-heading);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.lx-place__list {
  display: grid;
  gap: 2px;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.lx-place__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-heading);
  font-weight: 600;
}

.lx-place__list li:last-child {
  border-bottom: 1px solid var(--color-border-soft);
}

.lx-place__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-success);
}

@media (min-width: 1024px) {
  .lx-place__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

@media (max-width: 1023.98px) {
  .lx-place__photo.media {
    aspect-ratio: 16 / 10;
  }
}

/* ---- Why: icon columns on the tint, divided by hairlines ---- */
.lx-why__head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(32px, 5vw, 56px);
}

.lx-why__head .grad-head {
  max-width: 20ch;
  margin-bottom: 0;
}

.lx-why__lead {
  max-width: 52ch;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lx-why__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-why__list li {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}

.lx-why__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  border: 1.5px solid rgba(236, 124, 32, 0.5);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--brand-ink);
}

.lx-why__icon svg { width: 22px; height: 22px; }

.lx-why__list h3 {
  margin-bottom: var(--space-2);
  color: var(--color-heading);
  font-size: 1.1875rem;
  line-height: 1.3;
}

.lx-why__list p {
  color: var(--color-text-muted);
  font-size: 0.9688rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .lx-why__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .lx-why__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-7);
  }

  .lx-why__lead { justify-self: end; }

  .lx-why__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lx-why__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lx-why__list li {
    padding: var(--space-2) var(--space-6) var(--space-5);
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .lx-why__list--4 li:nth-child(4n + 1),
  .lx-why__list--3 li:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .lx-why__list--3 li:nth-child(n + 4) {
    margin-top: var(--space-5);
  }
}

/* ---- Plan: what's included, as one card ---- */
.lx-plan {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 0 30px 60px -44px rgba(10, 22, 40, 0.5);
}

.lx-plan__side {
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(236, 124, 32, 0.22), transparent 70%),
    linear-gradient(150deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: rgba(255, 255, 255, 0.82);
}

.lx-plan__eyebrow {
  margin-bottom: var(--space-3);
  color: #ffd2ad;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lx-plan__title {
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.lx-plan__side p {
  max-width: 34ch;
  line-height: 1.6;
}

.lx-plan__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-6);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.lx-plan__link svg {
  width: 18px;
  height: 18px;
  transition: transform 200ms var(--lx-ease);
}

.lx-plan__link:hover svg { transform: translateX(3px); }

.lx-plan .lx-plan__items {
  display: grid;
  margin: 0;
  padding: clamp(12px, 2vw, 24px) clamp(24px, 3.5vw, 48px);
  list-style: none;
}

.lx-plan__items li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.45;
}

.lx-plan__tick {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: var(--color-success-soft);
}

.lx-plan__tick path {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 0;
}

.js .lx-plan[data-on-view] .lx-plan__tick path {
  stroke-dashoffset: 22;
}

.js .lx-plan[data-on-view].is-on .lx-plan__tick path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 420ms var(--lx-ease) calc(var(--n) * 90ms + 150ms);
}

@media (min-width: 768px) {
  .lx-plan .lx-plan__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
    align-content: center;
  }

  .lx-plan__items li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .lx-plan {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }

  .lx-plan__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .lx-plan__items li:last-child { border-bottom: 0; }
}

/* ---- London: response commitments as a ladder ---- */
.lx-ladder__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.lx-ladder__table thead th {
  padding: 0 20px 4px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.lx-ladder__table tbody th,
.lx-ladder__table tbody td {
  padding: 18px 20px;
  background: var(--color-surface);
  text-align: left;
  vertical-align: middle;
}

.lx-ladder__table tbody th {
  border-radius: 14px 0 0 14px;
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 700;
}

.lx-ladder__table tbody td {
  color: var(--color-text-soft);
  font-size: 0.9688rem;
  line-height: 1.55;
}

.lx-ladder__table tbody td:last-child {
  border-radius: 0 14px 14px 0;
}

.lx-ladder__n {
  display: inline-block;
  width: 34px;
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.lx-ladder__when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-ink);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.lx-ladder__when svg { width: 16px; height: 16px; }

@media (max-width: 767.98px) {
  .lx-ladder__table thead { display: none; }

  .lx-ladder__table,
  .lx-ladder__table tbody,
  .lx-ladder__table tr,
  .lx-ladder__table th,
  .lx-ladder__table td {
    display: block;
  }

  .lx-ladder__table tr {
    margin-bottom: 10px;
    padding: 18px;
    border-radius: 16px;
    background: var(--color-surface);
  }

  .lx-ladder__table tbody th,
  .lx-ladder__table tbody td {
    padding: 0;
    border-radius: 0 !important;
    background: none;
  }

  .lx-ladder__table tbody td { margin-top: 8px; }
  .lx-ladder__when { white-space: normal; }
}

/* ---- London: switching provider, three numbered steps ---- */
.lx-steps__head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.lx-steps__head .grad-head {
  margin-bottom: var(--space-4);
}

.lx-steps__head p:not(.eyebrow) {
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lx-steps__list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.lx-steps__list li {
  position: relative;
}

.lx-steps__n {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--brand-flame);
  color: #fff;
  font-weight: 800;
}

.lx-steps__list h3 {
  margin-bottom: var(--space-2);
  color: var(--color-heading);
  font-size: 1.1875rem;
}

.lx-steps__list p {
  max-width: 40ch;
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .lx-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }

  /* The line that joins the steps. */
  .lx-steps__list li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 56px;
    right: calc(var(--space-7) * -1 + 12px);
    height: 2px;
    background: linear-gradient(90deg, rgba(236, 124, 32, 0.6), rgba(236, 124, 32, 0.12));
  }
}

/* ---- Directory: the five services as rows ---- */
.lx-dir__grid {
  display: grid;
  gap: var(--space-7);
}

.lx-dir__head .grad-head {
  max-width: 16ch;
  margin-bottom: var(--space-4);
}

.lx-dir__head p:not(.eyebrow) {
  max-width: 44ch;
  margin-bottom: var(--space-6);
  color: var(--color-text-soft);
  line-height: 1.6;
}

.lx-dir__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.lx-dir__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  grid-template-areas: "icon name go" "icon text go";
  column-gap: var(--space-4);
  row-gap: 2px;
  align-items: center;
  padding: 18px 8px;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: background-color 200ms ease;
}

.lx-dir__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--tone-soft, var(--color-primary-light));
  color: var(--tone, var(--color-primary-ink));
}

.lx-dir__icon svg { width: 20px; height: 20px; }

.lx-dir__name {
  grid-area: name;
  color: var(--color-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

.lx-dir__text {
  grid-area: text;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.lx-dir__go {
  grid-area: go;
  color: var(--color-text-muted);
  transition: transform 200ms var(--lx-ease), color 200ms ease;
}

.lx-dir__go svg { width: 20px; height: 20px; }

.lx-dir__row.tone-support { --tone: var(--tone-support); --tone-soft: var(--tone-support-soft); }
.lx-dir__row.tone-cloud { --tone: var(--tone-cloud); --tone-soft: var(--tone-cloud-soft); }
.lx-dir__row.tone-cyber { --tone: var(--tone-cyber); --tone-soft: var(--tone-cyber-soft); }
.lx-dir__row.tone-network { --tone: var(--tone-network); --tone-soft: var(--tone-network-soft); }
.lx-dir__row.tone-projects { --tone: var(--tone-projects); --tone-soft: var(--tone-projects-soft); }

.lx-dir__row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .lx-dir__row:hover {
    background: var(--color-surface);
  }

  .lx-dir__row:hover .lx-dir__go {
    color: var(--tone, var(--color-primary));
    transform: translateX(4px);
  }
}

@media (min-width: 1024px) {
  .lx-dir__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .lx-dir__row {
    grid-template-columns: 44px minmax(0, 0.9fr) minmax(0, 1.1fr) 24px;
    grid-template-areas: "icon name text go";
    padding: 20px 12px;
  }
}

/* ---- FAQ ---- */
.lx-faq {
  padding-top: 0;
}

.lx-faq__grid {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-soft);
}

.lx-faq__head .grad-head {
  max-width: 16ch;
  margin-bottom: var(--space-4);
}

.lx-faq__head p:not(.eyebrow) {
  max-width: 36ch;
  color: var(--color-text-soft);
}

.lx-faq__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-5);
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
}

.lx-faq__call svg {
  width: 20px;
  height: 20px;
  color: var(--brand-orange);
}

.lx-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.lx-faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.lx-faq__item summary {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.lx-faq__item summary::-webkit-details-marker { display: none; }

.lx-faq__item summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.lx-faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  transition: background-color 200ms ease, transform 280ms var(--lx-ease);
}

.lx-faq__icon::before,
.lx-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--color-heading);
}

.lx-faq__icon::after { transform: rotate(90deg); }

.lx-faq__item[open] .lx-faq__icon {
  background: var(--color-primary-light);
  transform: rotate(45deg);
}

.lx-faq__a {
  padding: 0 48px 22px 0;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.lx-faq__a p + p { margin-top: var(--space-3); }

.lx-faq__a a { color: var(--color-primary-ink); }

@media (min-width: 1024px) {
  .lx-faq__grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .lx-faq__head {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 24px);
    align-self: start;
  }
}

/* ---- Talk: the closing callback box, the offices and nearby areas ---- */
.lx-talk {
  padding-top: 0;
}

.lx-talk__box {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(50% 70% at 0% 0%, rgba(31, 107, 255, 0.22), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(236, 124, 32, 0.14), transparent 70%),
    var(--color-navy-950);
  color: var(--color-on-dark);
}

.lx-talk__intro {
  padding: clamp(28px, 4vw, 56px);
}

.lx-talk__title {
  max-width: 14ch;
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

.lx-talk__intro > p {
  max-width: 40ch;
  color: var(--color-on-dark-muted);
  font-size: 1.0625rem;
}

.lx-talk__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-5);
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.lx-talk__phone svg {
  width: 26px;
  height: 26px;
  color: var(--brand-orange);
}

.lx-talk__quote {
  margin: 0;
  padding: var(--space-5) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
}

.lx-talk__quote::before {
  content: "";
  display: block;
  max-width: 460px;
  margin-bottom: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lx-talk__quote blockquote,
.lx-talk__quote figcaption {
  max-width: 460px;
}

.lx-talk__stars .stars svg {
  width: 16px;
  height: 16px;
  color: #fbbc05;
}

.lx-talk__quote blockquote {
  margin: var(--space-3) 0 var(--space-4);
}

.lx-talk__quote blockquote p {
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.lx-talk__quote figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--color-on-dark-muted);
  font-size: 0.875rem;
}

.lx-talk__quote figcaption strong {
  display: block;
  color: #fff;
}

.lx-talk__form {
  padding: clamp(20px, 3vw, 40px);
  background: rgba(255, 255, 255, 0.04);
}

.lx-talk__form .callback {
  margin-top: 0;
  border-color: transparent;
  background: var(--color-surface);
}

.lx-talk__foot {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.lx-talk__offices {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-talk__offices li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 4px 12px;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.lx-talk__offices strong { color: var(--color-heading); }

.lx-talk__offices a {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-ink);
  font-weight: 600;
  text-decoration: none;
}

.lx-talk__offices a svg { width: 16px; height: 16px; }

.lx-talk__pin {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff1e4;
  color: var(--brand-orange);
}

.lx-talk__pin svg { width: 18px; height: 18px; }

.lx-talk__near-title {
  margin-bottom: var(--space-3);
  color: var(--color-heading);
  font-weight: 700;
}

.lx-talk__near ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-talk__near a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.lx-talk__near a:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface);
}

.lx-talk__near .lx-talk__all {
  border-color: transparent;
  color: var(--color-primary-ink);
}

.lx-talk__all svg { width: 16px; height: 16px; }

@media (min-width: 1024px) {
  .lx-talk__box {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "intro form" "quote form";
    grid-template-rows: auto 1fr;
  }

  .lx-talk__intro { grid-area: intro; padding-bottom: 0; }
  .lx-talk__quote { grid-area: quote; align-self: end; }

  .lx-talk__form {
    grid-area: form;
    display: flex;
    align-items: center;
  }

  .lx-talk__foot {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-7);
    align-items: start;
    padding: 0 var(--space-2);
  }

  .lx-talk__offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Reduced motion: everything in place, nothing moving ---- */
@media (prefers-reduced-motion: reduce) {
  .lx-cover__copy > *,
  .lx-cover__form .callback,
  .lx-cover__photo img,
  .lx-notes.is-tabs .lx-notes__panel.is-active {
    animation: none;
  }

  .lx-way__photo img {
    transition: none;
  }

  .lx-notes__indicator.is-ready {
    transition: none;
  }

  .js .lx-plan[data-on-view] .lx-plan__tick path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ==== Phones: the location page laid out for a small screen ==== */
.lx-intro__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-ink);
  font: 700 0.9375rem var(--font-body);
  cursor: pointer;
}

.lx-intro__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--lx-ease);
}

.lx-intro__more.is-open .lx-intro__toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

@media (min-width: 768px) {
  .lx-intro__toggle { display: none; }
}

@media (max-width: 767.98px) {
  /* Intro: the long figures paragraph opens from a four-line preview. */
  .js .lx-intro__more:not(.is-open) .lx-intro__note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .lx-intro__more {
    margin-top: var(--space-5);
    padding-left: var(--space-4);
    border-left: 2px solid var(--brand-orange);
  }

  .lx-intro__more .lx-intro__note {
    margin-top: 0;
    padding-left: 0;
    border-left: 0;
  }

  /* Remote and onsite: a swipe row, the next panel peeking in. */
  .lx-ways {
    grid-auto-columns: 86%;
    grid-auto-flow: column;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .lx-ways::-webkit-scrollbar { display: none; }

  .lx-way {
    min-height: 360px;
    scroll-snap-align: start;
  }

  .lx-way__body { padding: 22px; }
  .lx-way h3 { font-size: 1.1875rem; }
  .lx-way p { font-size: 0.9375rem; line-height: 1.55; }

  /* Why: icon beside the words, not above them. */
  .lx-why__head { margin-bottom: var(--space-5); }

  .lx-why__list li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px 0;
  }

  .lx-why__icon {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .lx-why__icon svg { width: 18px; height: 18px; }
  .lx-why__list h3 { margin-bottom: 4px; font-size: 1.0625rem; }
  .lx-why__list p { font-size: 0.9375rem; line-height: 1.55; }

  /* Notes: a shorter lead above the cards. */
  .lx-notes__title { font-size: 1.75rem; }
  .lx-notes__lead { font-size: 0.9688rem; }

  /* Place: the photo as a wide strip above the words. */
  .lx-place__grid { gap: var(--space-5); }
  .lx-place__copy .lx-place__lede { font-size: 1.0625rem; }

  /* Plan: the side panel tighter, the list with room either side. */
  .lx-plan__side { padding: 26px 22px; }
  .lx-plan__link { margin-top: var(--space-4); }
  .lx-plan .lx-plan__items { padding: 6px 22px; }
  .lx-plan__items li { padding: 15px 0; font-size: 0.9688rem; }

  /* Directory: the button after the list, where the eye ends up. */
  .lx-dir__grid { gap: var(--space-5); }
  .lx-dir__head { display: contents; }
  .lx-dir__head .btn { order: 3; justify-self: start; }
  .lx-dir__list { order: 2; }
  .lx-dir__row { padding: 16px 4px; column-gap: 14px; }
  .lx-dir__name { font-size: 1.0625rem; }
  .lx-dir__text { font-size: 0.875rem; }

  /* Credentials: logo beside the words, the partner logos in one row. */
  .lx-creds .cred-badge {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 16px;
  }

  .lx-creds .cred-badge__plate {
    aspect-ratio: 1;
    padding: 10px;
    border-radius: 12px;
  }

  .lx-creds .cred-badge__title { font-size: 1.0625rem; }
  .lx-creds .cred-badge__body { font-size: 0.875rem; }

  .lx-creds .partner-row.partner-row--badges {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .lx-creds .partner-row.partner-row--badges li {
    min-width: 0;
    padding: 8px 6px;
  }

  /* FAQ: a smaller heading so the questions start sooner. */
  .lx-faq__head .grad-head { font-size: 1.875rem; }
  .lx-faq__item summary { padding: 16px 0; font-size: 1rem; }
  .lx-faq__a { padding-right: 0; font-size: 0.9688rem; }

  /* Talk: heading, the form, then the review. */
  .lx-talk__intro { padding: 28px 22px 8px; }
  .lx-talk__title { font-size: 2rem; }
  .lx-talk__phone { margin-top: var(--space-3); }
  .lx-talk__form { padding: 16px; background: none; }
  .lx-talk__quote { padding: 8px 22px 28px; }
  .lx-talk__offices { gap: var(--space-5); }

  /* Room at the foot for the action bar. */
  .page--place .site-footer { padding-bottom: 88px; }
}

/* ---- London's "Before you commit": a checklist of questions on phones ---- */
.lx-notes__q {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  pointer-events: none;
}

@media (max-width: 899.98px) {
  .lx-notes--checklist .lx-notes__head {
    margin-bottom: var(--space-5);
  }

  .lx-notes--checklist .lx-notes__panels {
    grid-auto-columns: auto;
    grid-auto-flow: row;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    border-top: 1px solid rgba(156, 188, 255, 0.16);
  }

  .lx-notes--checklist .lx-notes__panel {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid rgba(156, 188, 255, 0.16);
    border-radius: 0;
    background: none;
  }

  /* The number in a ring; it fills when its answer is open. */
  .lx-notes--checklist .lx-notes__count {
    margin: 0;
    font-size: 0;
  }

  .lx-notes--checklist .lx-notes__count span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(236, 124, 32, 0.6);
    border-radius: 50%;
    color: var(--brand-orange);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }

  .lx-notes--checklist .lx-notes__panel.is-open .lx-notes__count span {
    border-color: var(--brand-orange);
    background: var(--brand-flame);
    color: #fff;
  }

  .lx-notes--checklist .lx-notes__panel h3 {
    max-width: none;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  .lx-notes--checklist .lx-notes__q {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    pointer-events: auto;
    cursor: pointer;
  }

  .lx-notes--checklist .lx-notes__q::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 240ms var(--lx-ease);
  }

  .lx-notes--checklist .lx-notes__panel.is-open .lx-notes__q::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .lx-notes--checklist .lx-notes__q:focus-visible {
    outline: 2px solid #9cbcff;
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* The answer sits under the question, aligned with its words. */
  .lx-notes--checklist .lx-notes__a,
  .lx-notes--checklist .lx-notes__panel > p:not(.lx-notes__count) {
    grid-column: 2;
    padding-top: 8px;
    color: var(--color-on-dark-muted);
  }

  .lx-notes--checklist .lx-notes__a {
    display: none;
  }

  .lx-notes--checklist .lx-notes__panel.is-open .lx-notes__a {
    display: block;
    animation: lx-panel 300ms var(--lx-ease);
  }

  .lx-notes--checklist .lx-notes__a p {
    font-size: 0.9688rem;
    line-height: 1.6;
  }
}

@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .lx-notes--checklist .lx-notes__panel.is-open .lx-notes__a { animation: none; }
  .lx-notes--checklist .lx-notes__q::after { transition: none; }
}

/* ==========================================================================
   41. CLIENT ROUND, 11 OCT 2026
   The home page's proof strip, compact, across the foot of page heroes (it
   replaces the dark "faceplate" bar); and the pieces of this round's page
   changes that are shared between pages.
   ========================================================================== */

/* ---- The compact proof strip ----
   Same card, colours and figures as the home page strip, slimmed to a single
   row: the tone icon beside the figure and its label. Inside a dark hero it
   keeps the home page's light card wherever it sits (it also sits in dark
   bands, on IT Project Management), so its colours are set here. */
.stat-strip {
  --color-white: #ffffff;
  --color-heading: #0a1628;
  --color-text-soft: #262d38;
  --color-border-soft: #eceff3;
  --color-navy: #0a2f7a;
  --tone-support: #1f6bff;
  --tone-support-soft: #e3ebff;
  --tone-cloud: #0a93ab;
  --tone-cloud-soft: #daf6fa;
  --tone-cyber: #5a4be8;
  --tone-cyber-soft: #ebe8ff;
  --tone-projects: #b86a06;
  --tone-projects-soft: #fdf0dc;
  color-scheme: light;
}

.stat-strip--compact {
  border-radius: 18px;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.55);
}

.stat-strip--compact .stat-strip__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon value" "icon label" "icon more";
  column-gap: 12px;
  row-gap: 2px;
  align-content: center;
  padding: 16px 18px;
}

.stat-strip--compact .stat-strip__item dt {
  display: contents;
}

.stat-strip--compact .stat-strip__icon {
  grid-area: icon;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.stat-strip--compact .stat-strip__icon svg {
  width: 19px;
  height: 19px;
}

.stat-strip--compact .stat-strip__item dt > span:last-child {
  grid-area: label;
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.stat-strip--compact .stat-strip__value {
  grid-area: value;
  font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.8rem);
}

.stat-strip--compact .stat-strip__more {
  grid-area: more;
  margin-top: 2px;
  font-size: 0.75rem;
}

@media (max-width: 899.98px) {
  .stat-strip--compact .stat-strip__item {
    padding: 14px;
  }
}

@media (max-width: 479.98px) {
  .stat-strip--compact .stat-strip__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "icon" "value" "label" "more";
    row-gap: 4px;
  }

  .stat-strip--compact .stat-strip__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
  }

  .stat-strip--compact .stat-strip__value {
    font-size: 1.45rem;
  }
}

/* In a page hero it sits across the foot, where the dark bar did. */
.hero-split__aside .stat-strip--compact {
  margin-top: 0;
}

/* The full strip inside a dark band (IT Project Management, About). */
.stat-band .stat-strip,
.film-figures .stat-strip {
  margin-top: var(--space-6);
}

.stat-band__source {
  margin-top: var(--space-4);
  color: var(--color-on-dark-muted);
  font-size: var(--fs-xs);
}

/* ---- About: four people (Sebastian joined, 11 Oct 2026) ----
   Two by two on tablets, four across on wide screens, so nobody sits alone
   on a row. */
@media (min-width: 640px) {
  .film-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .film-team__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .film-person__bio {
    font-size: 0.9375rem;
  }
}

/* ---- IT Services: "Proof, not promises" without the boxes ----
   The home page's strip, then an open row under it: the review set large on
   the left, the credential and partner logos on the right, with no cards
   around either. */
.svc-proof .stat-strip {
  margin-top: var(--space-6);
}

.svc-proof__foot {
  display: grid;
  gap: var(--space-7);
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--color-border);
}

.svc-proof__quote {
  position: relative;
  margin: 0;
  padding-left: 56px;
}

.svc-proof__mark {
  position: absolute;
  top: 2px;
  left: 0;
  color: var(--brand-orange);
}

.svc-proof__mark svg {
  width: 36px;
  height: 36px;
}

.svc-proof__quote blockquote {
  margin: 0 0 var(--space-5);
}

.svc-proof__quote blockquote p {
  max-width: 34ch;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.svc-proof__quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.svc-proof__quote figcaption strong {
  display: block;
  color: var(--color-heading);
}

.svc-proof__quote .text-link {
  flex-basis: 100%;
  margin-top: 4px;
}

.svc-proof__label {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-proof .svc-proof__creds,
.svc-proof .svc-proof__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-proof .svc-proof__creds {
  gap: var(--space-5) var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.svc-proof__creds a {
  display: grid;
  gap: 10px;
  color: var(--color-primary-ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.svc-proof__creds img {
  width: auto;
  height: 56px;
}

.svc-proof__creds span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.svc-proof__creds svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur) var(--ease-out);
}

.svc-proof__creds a:hover svg {
  transform: translateX(3px);
}

.svc-proof .svc-proof__partners {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  padding-top: var(--space-6);
}

.svc-proof__partners li {
  display: flex;
  justify-content: center;
}

.svc-proof__partners img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 30px;
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease-out);
}

.svc-proof__partners li:hover img {
  opacity: 1;
}

@media (min-width: 1024px) {
  .svc-proof__foot {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }
}

@media (max-width: 599.98px) {
  .svc-proof__quote {
    padding-left: 0;
    padding-top: 48px;
  }

  .svc-proof__creds img {
    height: 46px;
  }

  .svc-proof .svc-proof__partners {
    gap: var(--space-4);
  }
}

/* ---- Articles: the author box staging prints after the body ---- */
.article-author {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-5) 0;
  border-block: 1px solid var(--color-border);
}

.article-author .avatar {
  width: 56px;
  height: 56px;
  font-size: 1.125rem;
}

.prose .article-author p {
  margin: 0 0 var(--space-3);
  font-size: 0.9688rem;
}

.prose .article-author .article-author__name {
  color: var(--color-text-muted);
}

.article-author__name strong {
  color: var(--color-heading);
}

.lx-talk__area-note {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* IT Services: the reviews now follow as their own section, so the row
   under the strip is the credential and partner logos alone. */
@media (min-width: 1024px) {
  .svc-proof__foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-proof__marks {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4) var(--space-8);
    align-items: center;
  }

  .svc-proof__marks .svc-proof__label { grid-column: 1 / -1; margin-bottom: 0; }
  .svc-proof .svc-proof__creds { padding-bottom: 0; border-bottom: 0; }
  .svc-proof__marks .cred-note { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .svc-proof .svc-proof__partners { padding: 0 0 0 var(--space-7); border-left: 1px solid var(--color-border); }
}

/* ==========================================================================
   42. SUB-SERVICE PAGES (pages/sub-services.mjs)
   Built like the five service pages: dark hero with the form and proof
   strip, then the page's own photograph and a component per kind of
   content. Points sit on hairlines rather than in boxes.
   ========================================================================== */
.sv-head {
  margin-bottom: var(--space-5);
}

.sv-head .grad-head {
  max-width: 20ch;
  margin-bottom: 0;
}

.sv-head--center {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.sv-head--center .grad-head {
  margin-inline: auto;
}

.sv-head--center .eyebrow {
  justify-content: center;
}

.sv-head__lead {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.sv-head--center .sv-head__lead {
  margin-inline: auto;
}

.sv-prose p,
.sv-prose ul,
.sv-prose ol {
  max-width: 62ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
  line-height: 1.7;
}

.sv-prose ul,
.sv-prose ol {
  padding-left: 1.2em;
}

.sv-prose li + li {
  margin-top: 6px;
}

.sv-prose strong {
  color: var(--color-heading);
}

.sv-prose--lede > p:first-child {
  color: var(--color-heading);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.sv-prose--center p {
  margin-inline: auto;
  text-align: center;
}

.sv-note {
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.sv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: var(--space-5);
}

.sv-split {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .sv-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
}

/* Ticks: one checklist style for the template. */
.sv-ticks {
  display: grid;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.45;
}

.sv-ticks svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.sv-list {
  margin-top: var(--space-5);
}

.sv-list__label {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Overview: copy beside the page's own photograph ---- */
.sv-overview__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.sv-overview__media {
  position: relative;
}

.sv-overview__photo.media {
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 80px -48px rgba(10, 22, 40, 0.55);
}

.sv-overview__tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: calc(100% - 36px);
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  background: rgba(10, 22, 40, 0.84);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sv-overview__tag strong {
  display: block;
  color: #fff;
  font-size: 0.9375rem;
  letter-spacing: 0;
}

.sv-overview__tag-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-flame);
  color: #fff;
}

.sv-overview__tag-icon svg {
  width: 18px;
  height: 18px;
}

.sv-included {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.sv-included--after {
  margin-top: var(--space-7);
}

.sv-included__label {
  margin-bottom: var(--space-5);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  .sv-included .sv-ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sv-overview__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .sv-included .sv-ticks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Tabs: copy beside a pill tab panel ---- */
.sv-tabpanel {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--panel-tint);
}

.sv-tabpanel__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-5);
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border-soft);
}

.sv-tabpanel .tabs__tab {
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-soft);
  font: 600 0.875rem var(--font-ui);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.sv-tabpanel .tabs__tab[aria-selected="true"] {
  background: var(--color-navy);
  color: #fff;
}

.sv-tabpanel .tabs__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sv-tabpanel__n {
  margin-bottom: var(--space-3);
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sv-tabpanel__panel p {
  color: var(--color-heading);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.sv-tabpanel__panel:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ---- Steps: a numbered path ---- */
.sv-path {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-path::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 21px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-orange), rgba(236, 124, 32, 0.08));
}

.sv-path__step {
  position: relative;
  padding-left: 68px;
}

.sv-path__n {
  position: absolute;
  top: -4px;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--brand-orange);
  border-radius: 50%;
  background: var(--color-page);
  color: var(--brand-ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 800;
}

.sv-path__step h3 {
  margin-bottom: var(--space-2);
  color: var(--color-heading);
  font-size: 1.1875rem;
  line-height: 1.3;
}

.sv-path__a p {
  max-width: 60ch;
  color: var(--color-text-soft);
  line-height: 1.65;
}

.sv-path__a p + p {
  margin-top: var(--space-3);
}

@media (min-width: 1024px) {
  .sv-steps__aside {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 32px);
  }
}

/* ---- Compare: before and after ---- */
.sv-compare__grid {
  display: grid;
  gap: var(--space-4);
  max-width: 1000px;
  margin: var(--space-7) auto 0;
}

.sv-compare__col {
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--radius-xl);
}

.sv-compare__col--before {
  background: var(--color-surface);
}

.sv-compare__col--after {
  background: linear-gradient(150deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: #fff;
}

.sv-compare__label {
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
}

.sv-compare__col--before .sv-compare__label { color: var(--color-text-muted); }
.sv-compare__col--after .sv-compare__label { color: #fff; }

.sv-compare__col ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-compare__col li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.45;
}

.sv-compare__col--before li { color: var(--color-text-soft); }
.sv-compare__col--after li { color: #fff; font-weight: 600; }

.sv-compare__col svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
}

.sv-compare__col--before svg {
  background: var(--color-error-soft);
  color: var(--color-error);
}

.sv-compare__col--after svg {
  background: rgba(62, 207, 154, 0.18);
  color: #5fe0b0;
}

.sv-compare__arrow {
  display: none;
}

@media (min-width: 768px) {
  .sv-compare__grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .sv-compare__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-flame);
    color: #fff;
  }

  .sv-compare__arrow svg {
    width: 20px;
    height: 20px;
  }
}

/* ---- Trust: figures as chips beside a large review ---- */
.sv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.sv-chips li {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-heading);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--color-border-soft);
}

.sv-quote {
  position: relative;
  margin: 0;
  padding-top: var(--space-2);
}

.sv-quote__mark {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--brand-orange);
}

.sv-quote__mark svg {
  width: 40px;
  height: 40px;
}

.sv-quote .stars svg {
  width: 18px;
  height: 18px;
  color: #fbbc05;
}

.sv-quote blockquote {
  margin: var(--space-4) 0 var(--space-5);
}

.sv-quote blockquote p {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.sv-quote figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.sv-quote figcaption strong {
  display: block;
  color: var(--color-heading);
}

/* ---- Points: numbered on hairlines ---- */
.sv-points__head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.sv-points__head .sv-head {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .sv-points__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: end;
  }
}

.sv-points .sv-points__list {
  display: grid;
  gap: 0 var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-points__list li {
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--color-border);
}

.sv-points__n {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--brand-orange);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sv-points__list h3 {
  margin-bottom: var(--space-2);
  color: var(--color-heading);
  font-size: 1.1875rem;
  line-height: 1.3;
}

.sv-points__list p {
  color: var(--color-text-soft);
  font-size: 0.9688rem;
  line-height: 1.65;
}

.sv-points__list .text-link {
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .sv-points__list--2,
  .sv-points__list--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sv-points__list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Story: prose beside a photograph ---- */
.sv-story__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.sv-story__photo.media {
  border-radius: var(--radius-xl);
}

@media (min-width: 1024px) {
  .sv-story__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .sv-story--flip .sv-story__media {
    order: 2;
  }
}

/* ---- Mid-page call to action: one slim band ---- */
.sv-cta__box {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(236, 124, 32, 0.24), transparent 70%),
    linear-gradient(120deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: rgba(255, 255, 255, 0.82);
}

.sv-cta__eyebrow {
  margin-bottom: var(--space-2);
  color: #ffd2ad;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sv-cta__title {
  margin-bottom: var(--space-2);
  color: #fff;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.2;
}

.sv-cta__act {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.sv-cta__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 800;
  text-decoration: none;
}

.sv-cta__call svg {
  width: 20px;
  height: 20px;
  color: var(--brand-orange);
}

@media (min-width: 1024px) {
  .sv-cta__box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-7);
  }
}

/* ---- FAQ ---- */
.sv-faq__grid {
  display: grid;
  gap: var(--space-6);
}

.sv-faq__head .grad-head {
  max-width: 16ch;
  margin-bottom: var(--space-4);
}

.sv-faq__head p:not(.eyebrow) {
  max-width: 36ch;
  color: var(--color-text-soft);
}

.sv-faq__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-5);
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
}

.sv-faq__call svg {
  width: 20px;
  height: 20px;
  color: var(--brand-orange);
}

.sv-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.sv-faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.sv-faq__item summary {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.sv-faq__item summary::-webkit-details-marker { display: none; }

.sv-faq__item summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.sv-faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  transition: background-color 200ms ease, transform 280ms var(--ease-out);
}

.sv-faq__icon::before,
.sv-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--color-heading);
}

.sv-faq__icon::after { transform: rotate(90deg); }

.sv-faq__item[open] .sv-faq__icon {
  background: var(--color-primary-light);
  transform: rotate(45deg);
}

.sv-faq__a {
  padding: 0 48px 22px 0;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.sv-faq__a p + p,
.sv-faq__a ul { margin-top: var(--space-3); }

.sv-faq__a ul { padding-left: 1.2em; }

@media (min-width: 1024px) {
  .sv-faq__grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .sv-faq__head {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 24px);
    align-self: start;
  }
}

@media (max-width: 767.98px) {
  .sv-faq__a { padding-right: 0; }
}

/* ---- Related reading: photo cards without frames ---- */
.sv-reading .sv-reading__list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-reading__list a {
  display: grid;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.sv-reading__photo.media {
  margin-bottom: 6px;
  border-radius: var(--radius-lg);
}

.sv-reading__photo img {
  transition: transform 600ms var(--ease-out);
}

.sv-reading__cat {
  color: var(--brand-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sv-reading__list strong {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  line-height: 1.3;
}

.sv-reading__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.sv-reading__more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sv-reading__list a:hover .sv-reading__photo img { transform: scale(1.03); }
  .sv-reading__list a:hover .sv-reading__more svg { transform: translateX(3px); }
}

@media (min-width: 768px) {
  .sv-reading .sv-reading__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Partners: one line of logos ---- */
.sv-partners__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-border);
}

.sv-partners__title {
  margin-bottom: var(--space-3);
  color: var(--color-heading);
  font-size: var(--fs-h4);
}

.sv-partners__grid p:not(.eyebrow) {
  max-width: 52ch;
  color: var(--color-text-soft);
  font-size: 0.9688rem;
}

.sv-partners .sv-partners__logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-partners__logos li {
  display: flex;
  justify-content: center;
}

.sv-partners__logos img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 34px;
}

@media (min-width: 1024px) {
  .sv-partners__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-8);
  }
}

/* ---- The rest of the family ---- */
.sv-family__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.sv-family__head .grad-head {
  margin-bottom: 0;
}

.sv-family .sv-family__list {
  display: grid;
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-family__list a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
  font-weight: 700;
  text-decoration: none;
}

.sv-family__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tile-bg);
  color: var(--tile-fg);
}

.sv-family__icon svg { width: 18px; height: 18px; }

.sv-family__list a > svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sv-family__list a:hover > svg {
    color: var(--tile-fg);
    transform: translateX(4px);
  }
}

.sv-family__note {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

@media (min-width: 768px) {
  .sv-family .sv-family__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .sv-family .sv-family__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Phones ---- */
@media (max-width: 767.98px) {
  .sv-overview__photo.media { aspect-ratio: 4 / 3; }
  .sv-story__photo.media { aspect-ratio: 16 / 10; }
  .sv-path__step { padding-left: 58px; }
  .sv-partners .sv-partners__logos { gap: var(--space-3); }
  .sv-cta__act .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-reading__photo img,
  .sv-faq__icon { transition: none; }
}

/* ---- Comparison table: the last column (ours) highlighted ---- */
.sv-table__wrap {
  max-width: 1080px;
  margin: var(--space-7) auto 0;
}

.sv-table__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.sv-table__table th,
.sv-table__table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.sv-table__table thead th {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sv-table__table thead th:last-child {
  border-radius: 16px 16px 0 0;
  background: var(--color-navy);
  color: #ffd2ad;
}

.sv-table__table tbody th {
  color: var(--color-heading);
  font-weight: 700;
}

.sv-table__table tbody td {
  color: var(--color-text-soft);
}

.sv-table__table tbody tr + tr > * {
  border-top: 1px solid var(--color-border);
}

.sv-table__table tbody td:last-child {
  background: var(--color-navy);
  color: #fff;
  font-weight: 600;
}

.sv-table__table tbody tr + tr > td:last-child {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.sv-table__table tbody tr:last-child td:last-child {
  border-radius: 0 0 16px 16px;
}

@media (max-width: 767.98px) {
  .sv-table__table thead {
    display: none;
  }

  .sv-table__table,
  .sv-table__table tbody,
  .sv-table__table tr,
  .sv-table__table th,
  .sv-table__table td {
    display: block;
  }

  .sv-table__table tr {
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 16px;
    background: var(--color-surface);
  }

  .sv-table__table tbody tr + tr > * {
    border-top: 0;
  }

  .sv-table__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sv-table__table tbody td:last-child::before {
    color: #ffd2ad;
  }

  .sv-table__table tbody tr:last-child td:last-child {
    border-radius: 0;
  }
}

/* ---- Service pages: the specialist services, with what each one is ---- */
.sv-explore__grid {
  display: grid;
  gap: var(--space-6);
}

.sv-explore__head .btn {
  margin-top: var(--space-5);
}

.sv-explore .sv-explore__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.sv-explore__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  grid-template-areas: "n name go" "n text go";
  column-gap: var(--space-4);
  row-gap: 4px;
  align-items: center;
  padding: 18px 8px;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: background-color 200ms ease;
}

.sv-explore__n {
  grid-area: n;
  align-self: start;
  padding-top: 3px;
  color: var(--tile-fg);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sv-explore__name {
  grid-area: name;
  color: var(--color-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-explore__text {
  grid-area: text;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.sv-explore__go {
  grid-area: go;
  color: var(--color-text-muted);
  transition: transform 200ms var(--ease-out), color 200ms ease;
}

.sv-explore__go svg { width: 20px; height: 20px; }

.sv-explore__row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .sv-explore__row:hover { background: var(--color-white); }
  .sv-explore__row:hover .sv-explore__go { color: var(--tile-fg); transform: translateX(4px); }
}

@media (min-width: 1024px) {
  .sv-explore__grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .sv-explore__head {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 32px);
  }

  .sv-explore__row {
    grid-template-columns: 40px minmax(0, 0.8fr) minmax(0, 1.2fr) 22px;
    grid-template-areas: "n name text go";
    padding: 20px 12px;
  }

  .sv-explore__n { padding-top: 0; align-self: center; }
}

/* ---- Service pages: the staging reviews, open on the page ---- */
.sv-reviews .sv-reviews__list {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.sv-reviews__item {
  margin: 0;
  padding-top: var(--space-5);
  border-top: 2px solid var(--brand-orange);
}

.sv-reviews__item .stars svg {
  width: 16px;
  height: 16px;
  color: #fbbc05;
}

.sv-reviews__item blockquote {
  margin: var(--space-3) 0 var(--space-5);
}

.sv-reviews__item blockquote p {
  color: var(--color-heading);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.sv-reviews__item figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.sv-reviews__item figcaption strong {
  display: block;
  color: var(--color-heading);
}

.sv-reviews__note {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-align: center;
}

.sv-reviews__note a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  color: var(--color-primary-ink);
  font-weight: 600;
  text-decoration: none;
}

.sv-reviews__note svg { width: 15px; height: 15px; }

@media (min-width: 900px) {
  .sv-reviews .sv-reviews__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }
}

/* ---- Service pages: pricing as an open band ---- */
.sv-pricing__grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-6);
  border-block: 1px solid var(--color-border);
}

.sv-pricing__act {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.sv-pricing__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  text-decoration: none;
}

.sv-pricing__call svg {
  width: 20px;
  height: 20px;
  color: var(--brand-orange);
}

@media (min-width: 1024px) {
  .sv-pricing__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
  }
}

/* ---- Service pages: the client logos on a loop ---- */
.sv-clients__label {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* ---- Mid-page box: the staging review beside its call to action ---- */
.sv-cta__quote {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sv-cta__stars {
  color: #fbbc05;
  font-size: 0.875rem;
  letter-spacing: 2px;
}

.sv-cta__quote blockquote {
  margin: 6px 0;
}

.sv-cta__quote blockquote p {
  color: #fff;
  font-size: 0.9688rem;
  font-style: italic;
  line-height: 1.55;
}

.sv-cta__quote figcaption {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
}

.cred-note {
  max-width: 72ch;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.cred-note a {
  color: var(--color-primary-ink);
}

/* The client logos are white (made for the home page's dark hero): on a light
   page they are printed as dark silhouettes. */
.sv-clients .marquee__track img {
  filter: brightness(0);
  opacity: 0.5;
  height: clamp(32px, 3.4vw, 46px);
}

/* ==========================================================================
   43. INDUSTRY PAGES — /industries/<slug>/ (pages/sectors.mjs)
   No boxes: copy sits on the page, divided by hairlines, photographs and
   type. Dark hero with the sector photograph running off the right edge,
   a sector switcher, a numbered "what you get", the sector's demands in a
   dark band under outlined numerals, the client story over its photograph,
   services in their tones, one line of large type to ask, a strip of the
   other sectors. (Section 36 still styles the phone action bar, .sx-dock.)
   ========================================================================== */

/* ---- Hero ---- */
.ix-hero {
  position: relative;
  overflow: clip;
  padding-bottom: clamp(32px, 4vw, 56px);
}

:root[lang] .ix-hero {
  background:
    radial-gradient(40% 60% at 0% 10%, rgba(31, 107, 255, 0.2), transparent 70%),
    var(--color-navy-950);
}

.ix-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
}

.ix-hero__photo.media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.ix-hero__photo img {
  animation: lx-settle 1800ms var(--ease-out) both;
}

/* The photo fades into the navy where it meets the words. */
.ix-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--color-navy-950) 0%, rgba(4, 8, 14, 0.55) 30%, rgba(4, 8, 14, 0.1) 65%),
    linear-gradient(0deg, var(--color-navy-950) 0%, rgba(4, 8, 14, 0) 35%);
}

.ix-hero__inner {
  position: relative;
}

.ix-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: clamp(24px, 4vw, 48px);
}

.ix-hero__copy > * {
  animation: rise-in 800ms var(--ease-out) both;
}

.ix-hero__copy > :nth-child(2) { animation-delay: 80ms; }
.ix-hero__copy > :nth-child(3) { animation-delay: 160ms; }
.ix-hero__copy > :nth-child(4) { animation-delay: 220ms; }

.ix-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--space-5);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
}

.ix-hero__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-flame);
  color: #fff;
}

.ix-hero__icon svg { width: 18px; height: 18px; }

.ix-hero__count {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}

.ix-hero__title {
  max-width: 14ch;
  margin-bottom: var(--space-5);
  color: #fff;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.ix-hero__lead {
  max-width: 44ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.ix-hero__note {
  max-width: 46ch;
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--brand-orange);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
}

.ix-hero__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-6);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9688rem;
  text-decoration: none;
}

.ix-hero__call strong { color: #fff; }
.ix-hero__call svg { width: 18px; height: 18px; color: var(--brand-orange); }

.ix-hero__form .callback {
  margin-top: 0;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 16, 26, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
  animation: rise-in 800ms 200ms var(--ease-out) both;
}

.ix-hero__foot {
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  .ix-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: clamp(40px, 5vw, 88px);
  }
}

@media (max-width: 1023.98px) {
  .ix-hero__media {
    position: relative;
    width: auto;
    height: 46svh;
    min-height: 300px;
    margin-top: calc(var(--header-h) * -1);
  }

  .ix-hero__media::after {
    background: linear-gradient(180deg, rgba(4, 8, 14, 0.6) 0%, rgba(4, 8, 14, 0.1) 35%, var(--color-navy-950) 100%);
  }

  .ix-hero__inner {
    margin-top: -120px;
  }

  .ix-hero .breadcrumbs {
    position: absolute;
    top: -46svh;
    margin-top: calc(var(--header-h) + 12px);
  }
}

/* ---- Sector switcher ---- */
.ix-switch {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-page);
}

.ix-switch .ix-switch__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.ix-switch__list::-webkit-scrollbar { display: none; }

.ix-switch__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 16px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}

.ix-switch__list svg { width: 16px; height: 16px; color: var(--color-text-muted); }

.ix-switch__list a:hover { color: var(--color-heading); }

.ix-switch__list a[aria-current="page"] {
  border-bottom-color: var(--brand-orange);
  color: var(--color-heading);
}

.ix-switch__list a[aria-current="page"] svg { color: var(--brand-orange); }

/* ---- Intro: a statement beside a numbered list ---- */
.ix-intro__grid {
  display: grid;
  gap: var(--space-7);
}

.ix-intro__title {
  max-width: 16ch;
  margin-bottom: var(--space-5);
  color: var(--color-heading);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}

.ix-intro__text p {
  max-width: 58ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.ix-intro__text p:first-child {
  color: var(--color-heading);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.ix-gets__label {
  margin-bottom: var(--space-4);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.ix-gets .ix-gets__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ix-gets__list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.ix-gets__list li:last-child { border-bottom: 1px solid var(--color-border); }

.ix-gets__n {
  color: var(--brand-orange);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .ix-intro__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }

  .ix-gets {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 32px);
  }
}

/* ---- Issues: the sector's demands in a dark band ---- */
.ix-issues {
  background:
    radial-gradient(50% 70% at 100% 0%, rgba(31, 107, 255, 0.18), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(236, 124, 32, 0.1), transparent 70%),
    var(--color-navy-950);
  color: var(--color-on-dark);
}

.ix-issues__head {
  max-width: 820px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.ix-issues__eyebrow {
  margin-bottom: var(--space-3);
  color: #9cbcff;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ix-issues__title {
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
}

.ix-issues__lead {
  max-width: 64ch;
  color: var(--color-on-dark-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.ix-issues .ix-issues__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ix-issues__list li {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ix-issues__n {
  display: block;
  margin-bottom: var(--space-4);
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;
  -webkit-text-stroke: 1.5px var(--brand-orange);
  font-variant-numeric: tabular-nums;
}

.ix-issues__list h3 {
  margin-bottom: var(--space-3);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.3;
}

.ix-issues__a p {
  color: var(--color-on-dark-muted);
  line-height: 1.7;
}

.ix-issues__a p + p { margin-top: var(--space-3); }

.ix-issues__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-on-dark-muted);
}

.ix-issues__note svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--brand-orange); }
.ix-issues__note a { color: #fff; font-weight: 600; }

@media (min-width: 900px) {
  .ix-issues__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ix-issues__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ix-issues__list--3 li,
  .ix-issues__list--4 li {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
  }

  .ix-issues__list--3 li + li {
    padding-left: var(--space-6);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ix-issues__list--4 li:nth-child(even) {
    padding-left: var(--space-6);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (min-width: 1200px) {
  .ix-issues__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ix-issues__list--4 li + li { padding-left: var(--space-6); border-left: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ---- Proof: the client story over its photograph ---- */
.ix-proof {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.ix-proof__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ix-proof__photo.media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.ix-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 8, 14, 0.92) 0%, rgba(4, 8, 14, 0.7) 45%, rgba(4, 8, 14, 0.25) 100%);
}

.ix-proof__inner {
  display: grid;
  gap: var(--space-7);
  padding-block: clamp(56px, 8vw, 104px);
}

.ix-proof__quote { margin: 0; }

.ix-proof__quote .stars svg { width: 18px; height: 18px; color: #fbbc05; }

.ix-proof__quote blockquote { margin: var(--space-4) 0 var(--space-5); }

.ix-proof__quote blockquote p {
  max-width: 30ch;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ix-proof__quote figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
}

.ix-proof__quote figcaption strong { display: block; color: #fff; }

.ix-proof__story {
  max-width: 440px;
  padding-left: var(--space-5);
  border-left: 2px solid var(--brand-orange);
}

.ix-proof__eyebrow {
  margin-bottom: var(--space-2);
  color: #ffd2ad;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ix-proof__title {
  margin-bottom: var(--space-3);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.ix-proof__story p:not(.ix-proof__eyebrow):not(.ix-proof__title) {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}

.ix-proof__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-4);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.ix-proof__link svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.ix-proof__link:hover svg { transform: translateX(4px); }

@media (min-width: 1024px) {
  .ix-proof__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: end;
  }
}

/* ---- Services: icons in the service tones ---- */
.ix-services__head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: clamp(32px, 5vw, 56px);
}

.ix-services__head .grad-head { margin-bottom: 0; }

.ix-services__head p:not(.eyebrow) {
  max-width: 56ch;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.ix-services .ix-services__list {
  display: grid;
  gap: var(--space-6) var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ix-services__list a,
.ix-services__list li > div {
  position: relative;
  display: grid;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.ix-services__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  background: var(--tile-bg);
  color: var(--tile-fg);
}

.ix-services__icon svg { width: 22px; height: 22px; }

.ix-services__list strong {
  color: var(--color-heading);
  font-size: 1.1875rem;
}

.ix-services__text {
  color: var(--color-text-muted);
  font-size: 0.9688rem;
  line-height: 1.6;
}

.ix-services__go {
  position: absolute;
  top: 12px;
  right: 0;
  color: var(--color-text-muted);
  transition: transform 200ms var(--ease-out), color 200ms ease;
}

.ix-services__go svg { width: 20px; height: 20px; }

@media (hover: hover) and (pointer: fine) {
  .ix-services__list a:hover strong { color: var(--tile-fg); }
  .ix-services__list a:hover .ix-services__go { color: var(--tile-fg); transform: translateX(4px); }
}

@media (min-width: 768px) {
  .ix-services .ix-services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ix-services__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: end;
  }

  .ix-services .ix-services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Ask: one line of large type ---- */
.ix-ask {
  border-block: 1px solid var(--color-border);
}

.ix-ask__inner {
  max-width: 900px;
  text-align: center;
}

.ix-ask__eyebrow {
  margin-bottom: var(--space-3);
  color: var(--brand-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ix-ask__title {
  margin-bottom: var(--space-4);
  color: var(--color-heading);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.ix-ask__text {
  max-width: 54ch;
  margin-inline: auto;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.ix-ask__act {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6);
}

.ix-ask__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-heading);
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
}

.ix-ask__call svg { width: 22px; height: 22px; color: var(--brand-orange); }

.ix-ask__quote {
  max-width: 60ch;
  margin: var(--space-6) auto 0;
  color: var(--color-text-soft);
  font-style: italic;
  line-height: 1.6;
}

.ix-ask__quote span {
  display: block;
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-style: normal;
}

/* ---- The other sectors as a strip of photographs ---- */
.ix-more__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.ix-more__head .grad-head { margin-bottom: 0; }

.ix-more .ix-more__strip {
  display: grid;
  grid-auto-columns: minmax(220px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  margin: 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ix-more__strip::-webkit-scrollbar { display: none; }

.ix-more__strip li { scroll-snap-align: start; }

.ix-more__strip a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: #fff;
  text-decoration: none;
}

.ix-more__photo.media { border-radius: 0; }

.ix-more__photo img { transition: transform 700ms var(--ease-out); }

.ix-more__strip a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 8, 14, 0.85) 0%, rgba(4, 8, 14, 0) 55%);
}

.ix-more__name {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 1.0625rem;
}

.ix-more__name svg { flex: none; width: 18px; height: 18px; color: var(--brand-orange); }

@media (hover: hover) and (pointer: fine) {
  .ix-more__strip a:hover .ix-more__photo img { transform: scale(1.05); }
}

.ix-more__note {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

@media (min-width: 1440px) {
  .ix-more .ix-more__strip {
    max-width: var(--container-wide);
    margin-inline: auto;
  }
}

/* ---- Phones ---- */
@media (max-width: 767.98px) {
  .ix-hero__title { font-size: 2.4rem; }
  .ix-proof { min-height: 0; }
  .ix-proof::before { background: rgba(4, 8, 14, 0.82); }
  .ix-ask__act .btn { flex: 1 1 100%; justify-content: center; }
  .ix-more .ix-more__strip { grid-auto-columns: 72%; }
  .page--sector .site-footer { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-hero__copy > *,
  .ix-hero__photo img,
  .ix-hero__form .callback { animation: none; }
  .ix-more__photo img,
  .ix-proof__link svg { transition: none; }
}

/* <strong> is dark site-wide; on photographs it is white. */
.ix-more__name strong,
.ix-proof strong,
.ix-hero strong {
  color: #fff;
}

/* ==========================================================================
   44. CLIENT ROUND, 14 OCT 2026
   The proof cluster in page heroes (it replaces the slim strip), and the
   credentials without boxes, everywhere they appear.
   ========================================================================== */

/* ---- Credentials you can check: no boxes ----
   The two credentials side by side on the page, each its logo, name, words
   and link, divided by a hairline; the partner logos follow in one open row. */
:root[lang] .cred-badges {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

:root[lang] .cred-badge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6) 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

:root[lang] .cred-badge + .cred-badge {
  border-top: 1px solid var(--color-border);
}

:root[lang] .cred-badge__plate {
  display: block;
  max-width: none;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

:root[lang] .cred-badge__plate img {
  width: auto;
  max-width: 240px;
  height: 72px;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}

:root[lang] .cred-badge__body {
  gap: var(--space-2);
  max-width: 52ch;
}

:root[lang] .cred-badge__title {
  font-size: 1.25rem;
}

:root[lang] .partner-row.partner-row--badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
}

:root[lang] .partner-row.partner-row--badges li {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

:root[lang] .partner-row.partner-row--badges img {
  width: auto;
  max-width: 140px;
  height: 34px;
  object-fit: contain;
}

@media (min-width: 768px) {
  :root[lang] .cred-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[lang] .cred-badge + .cred-badge {
    padding-left: clamp(24px, 4vw, 56px);
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  :root[lang] .cred-badge:first-child {
    padding-right: clamp(24px, 4vw, 56px);
  }
}

@media (max-width: 767.98px) {
  :root[lang] .cred-badge__plate img {
    height: 60px;
  }

  :root[lang] .partner-row.partner-row--badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  :root[lang] .partner-row.partner-row--badges img {
    max-width: 100%;
    height: 28px;
  }
}

/* The note under the credentials sits on the same hairline grid. */
.cred-note {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.cred-badges + .cred-note {
  margin-top: 0;
}

/* Logos and the note line up with the words, not centred. */
:root[lang] .cred-badge__plate {
  display: flex;
  justify-content: flex-start;
}

:root[lang] .cred-badges ~ .cred-note,
:root[lang] .cred-why .cred-note,
:root[lang] .sv-creds .cred-note {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

/* ---- Hero forms: in full view, and sticky ----
   The proof cluster made the words column taller, and with the columns
   centred the form slid down below the fold on laptops. From 1024px the form
   starts level with the words and sticks beneath the header while the hero
   scrolls, so it stays wholly on screen. The words column carries the extra
   height. */
@media (min-width: 1024px) {
  .hero-split__grid,
  .lx-cover__grid,
  .ix-hero__grid {
    align-items: start;
  }

  .hero-split__form,
  .lx-cover__form,
  .ix-hero__form {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 16px);
    align-self: start;
  }

  /* Location and industry heroes: the words start nearer the top, so the
     form (level with them) is in view on a short laptop screen too. */
  .lx-cover__grid {
    margin-block: 0 auto;
    padding-block: clamp(16px, 3vh, 40px) clamp(28px, 5vh, 64px);
  }

  .ix-hero__grid {
    padding-block: clamp(16px, 3vh, 40px);
  }
}

/* Short laptop screens: a touch less type and spacing above the form. */
@media (min-width: 1024px) and (max-height: 820px) {
  .lx-cover__place,
  .ix-hero__kicker {
    margin-bottom: var(--space-4);
  }

  .lx-cover__title,
  .ix-hero__title {
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  }

  .lx-cover .breadcrumbs,
  .ix-hero .breadcrumbs {
    margin-bottom: 0;
  }
}

/* `overflow: hidden` on the hero stops a sticky child; clip crops the same
   without making the hero a scroll container. The hero keeps its own bottom
   padding, so the proof strip under the grid has room beneath it. */
@media (min-width: 1024px) {
  :root[lang] .hero-split {
    overflow: clip;
  }
}

/* ---- Large monitors ----
   Type and spacing are set in rem, so raising the root size scales the whole
   site in proportion; the content column widens with it. Without this a 27"
   screen showed the site as a narrow band with small type. */
@media (min-width: 1880px) {
  html {
    font-size: 112.5%;
  }

  :root {
    --container-main: 1440px;
    --container-wide: 1640px;
  }
}

@media (min-width: 2360px) {
  html {
    font-size: 131.25%;
  }

  :root {
    --container-main: 1680px;
    --container-wide: 1920px;
  }
}

/* Tablets: the industry hero's breadcrumbs stay in the flow, over the
   foot of the photograph. */
@media (max-width: 1023.98px) {
  .ix-hero .breadcrumbs {
    position: static;
    top: auto;
    margin-top: 0;
  }
}

/* ==========================================================================
   45. CASE STUDIES, 14 OCT 2026
   An open story, two columns at most and no box: the title (and facts or a
   photograph) held on the left; the chapters down the right on a vertical
   line; the results as a list of large figures. Used by the sub-service
   pages and the customer case studies, which also lose their boxed cards.
   ========================================================================== */
.cs__grid {
  display: grid;
  gap: var(--space-7);
}

.cs__title {
  max-width: 16ch;
  margin-bottom: var(--space-5);
  color: var(--color-heading);
  font-size: clamp(1.9rem, 1.35rem + 2vw, 3rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.cs__photo.media {
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
}

.cs .cs__facts {
  margin: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
}

.cs__facts div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.cs__facts dt {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs__facts dd {
  margin: 0;
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.4;
}

.cs .cs__chapters {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs__chapters::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 19px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-orange), rgba(236, 124, 32, 0.1));
}

.cs__chapter {
  position: relative;
  padding-left: 64px;
}

.cs__n {
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--brand-orange);
  border-radius: 50%;
  background: var(--color-page);
  color: var(--brand-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 800;
}

.cs__label {
  margin-bottom: 4px;
  color: var(--brand-ink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cs__chapter-title {
  margin-bottom: var(--space-2);
  color: var(--color-heading);
  font-size: 1.25rem;
  line-height: 1.3;
}

.cs__text p {
  max-width: 62ch;
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.cs__text p + p {
  margin-top: var(--space-3);
}

/* The last chapter is the result: set a little larger. */
.cs__chapter:last-child .cs__text p {
  color: var(--color-heading);
  font-size: 1.125rem;
}

.cs .cs__results {
  display: grid;
  margin: var(--space-7) 0 0 64px;
  border-top: 1px solid var(--color-border);
}

.cs__results div {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.cs__results dd {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cs__results dt {
  color: var(--color-text-soft);
  font-size: 0.9688rem;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .cs__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }

  .cs__aside {
    position: sticky;
    top: calc(var(--stuck-h, 73px) + 32px);
  }
}

@media (max-width: 599.98px) {
  .cs__chapter { padding-left: 54px; }
  .cs .cs__results { margin-left: 0; }
  .cs__results div { grid-template-columns: minmax(96px, 0.5fr) minmax(0, 1fr); }
  .cs__facts div { grid-template-columns: 80px minmax(0, 1fr); }
}

/* The review, open: large type and no panel. */
.cs-quote__fig {
  position: relative;
  max-width: 880px;
  margin: 0;
  padding-left: clamp(0px, 5vw, 72px);
}

.cs-quote__mark {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--brand-orange);
}

.cs-quote__mark svg {
  width: 40px;
  height: 40px;
}

.cs-quote__fig blockquote {
  margin: 0 0 var(--space-5);
}

.cs-quote__fig blockquote p {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.cs-quote__fig figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.cs-quote__fig figcaption strong {
  display: block;
  color: var(--color-heading);
}

.cs-quote__fig figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--color-primary-ink);
  font-weight: 600;
  text-decoration: none;
}

.cs-quote__fig figcaption a svg {
  width: 16px;
  height: 16px;
}

/* Services used and more stories: rows on hairlines, not cards. */
.cs-used__grid {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.cs-used .cs-used__list,
.cs-more .cs-more__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-used__list li {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.cs-used__list li:first-child {
  padding-top: 0;
}

.cs-used__list strong {
  color: var(--color-heading);
  font-size: 1.125rem;
}

.cs-used__list span {
  color: var(--color-text-soft);
  line-height: 1.6;
}

.cs-more__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas: "sector go" "name go" "text go";
  column-gap: var(--space-4);
  row-gap: 4px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}

.cs-more__list li:first-child a {
  border-top: 1px solid var(--color-border);
}

.cs-more__sector {
  grid-area: sector;
  color: var(--brand-ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-more__list strong {
  grid-area: name;
  color: var(--color-heading);
  font-size: 1.25rem;
}

.cs-more__text {
  grid-area: text;
  max-width: 62ch;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.cs-more__go {
  grid-area: go;
  color: var(--color-text-muted);
  transition: transform 200ms var(--ease-out), color 200ms ease;
}

.cs-more__go svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) and (pointer: fine) {
  .cs-more__list a:hover .cs-more__go {
    color: var(--brand-orange);
    transform: translateX(5px);
  }
}

@media (min-width: 1024px) {
  .cs-used__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(48px, 6vw, 112px);
  }
}

/* A one-line note between sections (Cloud Services London's cross-link). */
.sv-note--block {
  margin-block: calc(var(--space-4) * -1) var(--space-6);
  max-width: none;
}

.sv-note--block a {
  color: var(--color-primary-ink);
  font-weight: 600;
}

/* ---- One rhythm for every hero with the proof strip ----
   48px from the words or form down to the strip, 64px from the strip to the
   hero's foot, as on the service pages. The location cover keeps a minimum
   height for its photo; any height to spare goes above the words, so the
   words, form and strip always sit together at the foot. */
:root[lang] .lx-cover__grid {
  margin-block: auto 0;
  padding-bottom: var(--space-7);
}

:root[lang] .lx-cover__foot {
  padding-bottom: var(--space-8);
}

:root[lang] .ix-hero {
  padding-bottom: var(--space-8);
}

:root[lang] .ix-hero__grid {
  padding-bottom: var(--space-7);
}

:root[lang] .ix-hero__foot {
  margin-top: 0;
}


/* The old Locations page also listed Cloud Services London beside the areas. */
:root[lang] .cov-list__also {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm, 0.9375rem);
  line-height: 1.5;
}

:root[lang] .cov-list__also a {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}

:root[lang] .cov-list__also a:hover { text-decoration-color: var(--brand-orange); }

/* A partner logo that links out (to the vendor's site) fills its box exactly
   as a plain logo does. */
:root[lang] .partner-row li > a {
  display: block;
  width: 100%;
  height: 100%;
}