/* ==========================================================================
   Simply IT — Design System CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1 — Custom Properties
   -------------------------------------------------------------------------- */

/* Self-hosted Inter font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.5s ease,
              border-color 0.5s ease;
}
.cookie-banner.is-visible {
  transform: translateY(0);
}
.cookie-banner.on-dark {
  background: var(--accent);
  border-top-color: rgba(255,255,255,0.15);
}
.cookie-banner.on-dark .cookie-banner__btn--accept {
  background: white;
  color: var(--text-heading);
}
.cookie-banner.on-dark .cookie-banner__btn--deny {
  border-color: rgba(255,255,255,0.3);
  color: white;
}
/* Over a dark section the banner itself turns green (--accent), which leaves the
   accent-coloured links green-on-green and effectively invisible. None of the
   brand blues are readable on that green either — --dark manages only 2.59:1 and
   --primary 1.93:1 — so use a deeper shade of the same hue (202deg). This is the
   lightest value that still clears WCAG AA on #7AC143, at 4.94:1. */
.cookie-banner.on-dark .cookie-banner__text a {
  color: #004066;
}
/* Cookie settings tab */
.cookie-tab {
  position: fixed;
  bottom: 0;
  left: 24px;
  z-index: 9998;
  background: var(--dark);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-family);
  padding: 6px 16px;
  border-radius: 8px 8px 0 0;
  border: none;
  cursor: pointer;
  transition: color 0.5s ease, background 0.5s ease;
  display: none;
}
.cookie-tab:hover {
  color: white;
  background: var(--dark-mid);
}
.cookie-tab.is-visible {
  display: block;
}
.cookie-tab.on-dark {
  background: var(--accent);
  color: white;
}
.cookie-tab.on-dark:hover {
  background: #6aaf35;
}
.cookie-banner__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cookie-banner__text {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}
.cookie-banner__text a {
  color: var(--accent);
  text-decoration: underline;
}
.cookie-banner__buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-banner__btn {
  padding: 10px 24px;
  border-radius: var(--btn-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: var(--font-family);
  transition: all 0.3s ease;
}
.cookie-banner__btn--accept {
  background: var(--accent);
  color: white;
  transition: all 0.5s ease;
}
.cookie-banner__btn--accept:hover {
  background: #6aaf35;
}
.cookie-banner__btn--deny {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.5s ease;
}
.cookie-banner__btn--deny:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}
@media (max-width: 768px) {
  .cookie-banner__inner {
    flex-direction: column;
    text-align: center;
  }
  .cookie-banner__buttons {
    width: 100%;
  }
  .cookie-banner__btn {
    flex: 1;
  }
  .cookie-tab {
    display: none !important;
  }
}

/* Prevent horizontal overflow on mobile.
   `overflow-x: hidden` on html/body computes overflow-y to auto, which turns
   the body into a scroll container — and that silently kills `position: sticky`
   on the nav, so the header scrolled away on mobile and you had to scroll back
   up to reach the hamburger. `clip` does the same job without establishing a
   scroll container. `hidden` stays first as a fallback for older browsers. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-off, #fafafa);
}
::-webkit-scrollbar-thumb {
  background: var(--primary, #0080C9);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dark, #006BAA);
}
html {
  scrollbar-width: thin;
  scrollbar-color: #0080C9 #fafafa;
}

:root {
  /* Brand — derived from Simply IT logo */
  --primary: #0080C9;
  --primary-light: #2A9BD6;
  --primary-pale: #E8F4FB;
  --accent: #7AC143;
  --accent-light: #8FD05E;
  --dark: #006BAA;
  --dark-mid: #005A8E;
  --dark-surface: #0078BB;
  --text-body: #575757;
  --text-heading: #1A1A2E;
  --text-light: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.7);
  --border-light: rgba(87, 87, 87, 0.15);
  --border-dark: rgba(255, 255, 255, 0.15);
  --bg-white: #FFFFFF;
  --bg-off: #FAFAFA;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-display: -0.04em;
  --line-height-body: 1.6;
  --line-height-heading: 1.15;
  --section-padding: 120px;
  --section-padding-mobile: 80px;
  --container-max: 1120px;
  --container-padding: 24px;
  --card-radius: 30px;
  --btn-radius: 60px;
  --shadow-card: 0px 0.6px 1.56px -1.5px rgba(0, 0, 0, 0.17),
    0px 2.29px 5.95px -3px rgba(0, 0, 0, 0.14),
    0px 10px 26px -4.5px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0px 1px 3px -1px rgba(0, 0, 0, 0.2),
    0px 4px 12px -2px rgba(0, 0, 0, 0.16),
    0px 16px 40px -4px rgba(0, 0, 0, 0.06);
  --shadow-btn: 0 0 0 4px rgba(255, 255, 255, 0.08),
    inset 0 -4px 2px rgba(0, 0, 0, 0.2),
    inset 0 2px 1px rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   Section 2 — Reset + Base Styles
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The nav is sticky at top:0 and stands 73px tall (16px padding + 40px logo +
     16px padding + 1px border). Without this, anchor jumps and the skip link
     land underneath it and the target heading is hidden. */
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  letter-spacing: -0.02em;
  color: var(--text-body);
  background-color: var(--bg-white);
  font-feature-settings: "ss02" 1, "salt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* NB: no `overflow-x` here on purpose. The `html, body` rule above already
     sets `overflow-x: clip`, and re-declaring `hidden` at this point overrode
     it (same specificity, later in the file). `overflow-x: hidden` forces
     `overflow-y` to compute to `auto`, which makes <body> a scroll container
     and silently kills `position: sticky` on the nav — the header then scrolled
     away on both desktop and mobile. See the comment above the html, body rule. */
}

body.no-scroll {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
}

/* --------------------------------------------------------------------------
   Section 3 — Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  font-feature-settings: "ss02" 1, "salt" 1;
}

h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.25rem);
  letter-spacing: var(--letter-spacing-display);
  font-variation-settings: 'opsz' 32;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: var(--letter-spacing-display);
  font-variation-settings: 'opsz' 32;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

h4 {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: var(--font-weight-medium);
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
}

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

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

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6 {
  color: var(--text-light);
}

.text-light p,
.text-light li {
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Section 4 — Layout Utilities
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: 720px;
}

.section-body {
  max-width: 720px;
  margin-inline: auto;
}

.prose {
  max-width: none;
}
.prose p {
  margin-bottom: 1em;
}

.section {
  padding-block: var(--section-padding);
}

.section--dark {
  background: linear-gradient(160deg, var(--dark) 0%, var(--dark-mid) 50%, var(--dark) 100%);
  color: var(--text-light);
  position: relative;
  overflow: hidden;
}
/* Ambient blob shapes on dark sections */
.section--dark::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 40%, transparent 70%);
  top: -300px;
  right: -200px;
  pointer-events: none;
}
.section--dark::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 40%, transparent 70%);
  bottom: -150px;
  left: -200px;
  pointer-events: none;
}

.section--dark > .container {
  position: relative;
  z-index: 1;
}

/* Extra blob shapes */
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.blob--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(122, 193, 67, 0.15) 0%, rgba(122, 193, 67, 0.04) 50%, transparent 70%);
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
}
.blob--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 50%, transparent 70%);
  top: 55%;
  right: 5%;
}
.blob--3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(122, 193, 67, 0.12) 0%, rgba(122, 193, 67, 0.03) 50%, transparent 70%);
  bottom: -120px;
  right: -80px;
}
.blob--4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 50%, transparent 70%);
  top: -60px;
  left: 10%;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--text-light);
}

.section--dark p,
.section--dark li {
  color: var(--text-muted);
}

.section--off,
.section--alt {
  background-color: var(--bg-off);
}

/* Visual h4 sizing for semantic h3 elements */
h3.h4 {
  font-size: 1.1rem;
}

/* Eyebrow label — Reunion-style small accent label above headings */
.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: #3e8507;
  letter-spacing: 0;
  margin-bottom: 16px;
}
.section--dark .eyebrow,
.hero .eyebrow {
  color: var(--accent);
}

/* Feature grid — borderless, like Reunion's "Who Should Attend" */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 40px;
}
.feature-grid__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.feature-grid__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-grid__icon i,
.feature-grid__icon svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--accent);
}
.section--dark .feature-grid__icon i,
.section--dark .feature-grid__icon svg {
  color: var(--accent);
}
.feature-grid__content h4 {
  margin-bottom: 6px;
}
.feature-grid__content p {
  font-size: 15px;
  color: var(--text-body);
}
.section--dark .feature-grid__content p {
  color: var(--text-muted);
}

/* Timeline — Reunion-style agenda */
.timeline {
  display: flex;
  flex-direction: column;
}
.timeline__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-dark);
  align-items: start;
}
.timeline__item:first-child {
  border-top: 1px solid var(--border-dark);
}
.timeline__step {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--accent);
}
.timeline__content h3,
.timeline__content h4 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.timeline__content p {
  font-size: 15px;
}

/* Stats row — hero stats like Reunion */
.stats-row {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 32px 0;
}
.stats-row__item {
  text-align: center;
  position: relative;
  padding: 0 24px;
}
.stats-row__item + .stats-row__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
}
.stats-row__number {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--font-weight-semibold);
  color: var(--text-light);
  letter-spacing: -0.02em;
}
.stats-row__label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Audience list — clean list without card borders */
.audience-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.audience-list__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.audience-list__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bg-off);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.audience-list__icon i,
.audience-list__icon svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--accent);
}
.audience-list__content h3,
.audience-list__content h4 {
  margin-bottom: 4px;
  font-size: 1.1rem;
}
.audience-list__content p {
  font-size: 15px;
}

/* Partner slider — one at a time */
/* Partner marquee — one continuous strip that never stops.
   The markup holds three identical sets of logos. The animation travels exactly
   one set (-33.3333% of the track) and loops, so the seam is invisible and
   there's always a full set of logos filling the strip past the loop point.
   Spacing is margin-right, deliberately NOT `gap`: gap isn't applied after the
   final item, so one set would measure a gap shorter than a third of the track
   and the strip would visibly jump on every cycle. */
.partner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.partner-slider__stage {
  display: flex;
  align-items: center;
  width: max-content;
  animation: partner-marquee 32s linear infinite;
}
.partner-slider:hover .partner-slider__stage {
  animation-play-state: paused;
}
.partner-slider__item {
  position: static;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  margin-right: 52px;
  opacity: 1;
  pointer-events: auto;
}
/* Width is set explicitly, not `auto`. The vendor logos are SVGs, and inside a
   shrink-to-fit flex item (.partner-slider__item is flex: 0 0 auto) an image
   with width:auto and no intrinsic size has nothing to resolve against — the
   logos collapse and only the one bitmap in the set stays visible. Every logo
   here is wide enough to hit this cap anyway, so pinning it changes nothing
   visually and removes the dependency entirely. */
.partner-slider__item img {
  width: 180px;
  max-width: 180px;
  height: auto;
  max-height: 62px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.partner-slider__item:hover img {
  opacity: 1;
}

/* Every set is part of the strip now, so the duplicates always render. */
.partner-slider__dupe {
  display: flex !important;
}
.partner-slider__dots {
  display: none;
}

@keyframes partner-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

@media (prefers-reduced-motion: reduce) {
  .partner-slider__stage {
    animation: none;
  }
  .partner-slider {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Partner section mobile — same marquee, just scaled down */
@media (max-width: 1080px) {
  .split:has(.partner-slider) {
    text-align: center;
  }
  /* Hide Trustpilot button on mobile */
  .split:has(.partner-slider) .btn--accent {
    display: none;
  }
  /* Below this width .split collapses to one column, so the slider gets the
     full container (~1032px at 1080px viewport). One set of 4 logos is only
     4 x (130 + 40) = 680px, so a wider window shows the strip repeating and
     the same logo appears at both ends. Cap the visible width to just under
     one set so that cannot happen.
     If a partner is ever added or removed, re-check this number:
     it must stay <= (number of logos) x (img max-width + item margin-right). */
  .partner-slider {
    max-width: 660px;
    margin-inline: auto;
  }
  .partner-slider__stage {
    animation-duration: 26s;
  }
  .partner-slider__item {
    height: 60px;
    margin-right: 40px;
  }
  .partner-slider__item img {
    width: 130px;
    max-width: 130px;
    max-height: 40px;
  }
}

/* Services trio — 3-column: items | image | items */
.services-trio {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 20px;
  align-items: start;
}
.services-trio__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.services-trio__card {
  background: var(--dark-surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--card-radius);
  padding: 32px;
  margin-top: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.services-trio__card p {
  flex: 1;
}
.services-trio__card .btn {
  align-self: flex-start;
}
.services-trio__card p {
  font-size: 15px;
  color: var(--text-muted);
}
.services-trio__image {
  border-radius: var(--card-radius);
  overflow: hidden;
  height: 100%;
  min-height: 520px;
}
.services-trio__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.services-trio__item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 24px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}
.services-trio__item:hover {
  background: var(--dark-surface);
}
.services-trio__icon {
  margin-bottom: 12px;
}
.services-trio__icon i,
.services-trio__icon svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--accent);
}
.services-trio__item h3,
.services-trio__item h4 {
  color: var(--text-light);
  margin-bottom: 6px;
  font-size: 1.1rem;
}
.services-trio__item p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.services-trio__badge {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 8px;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid var(--border-dark);
  background: linear-gradient(135deg, var(--dark-surface) 0%, rgba(122, 193, 67, 0.04) 100%);
  flex: 1;
}
.services-trio__badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(122, 193, 67, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.services-trio__badge-icon i,
.services-trio__badge-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--accent);
}
.services-trio__badge-title {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-light);
  margin-bottom: 8px;
}
.services-trio__badge-text {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .services-trio {
    grid-template-columns: 1fr 1fr;
  }
  .services-trio__image {
    min-height: 400px;
    grid-row: 1 / -1;
    grid-column: 2;
  }
}
@media (max-width: 768px) {
  .services-trio {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .services-trio__image,
  .services-trio__card,
  .services-trio__badge {
    display: none;
  }
  .services-trio__col {
    gap: 0;
  }
  .services-trio__item {
    border-bottom: 1px solid var(--border-dark);
    border-radius: 0;
    padding: 20px 16px;
  }
  .services-trio__item:last-child {
    border-bottom: none;
  }
}

/* CTA section — light variant */
.cta-light {
  text-align: center;
  padding: 120px 0;
}
.cta-light h2 {
  margin-bottom: 16px;
}
.cta-light p {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 18px;
}

/* Split with image — large border radius */
.split__image {
  border-radius: var(--card-radius);
  overflow: hidden;
  position: relative;
}
.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grid {
  display: grid;
  gap: 24px;
}

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

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

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

.flex {
  display: flex;
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-inline: auto;
}

.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }

.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

.max-w-prose {
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   Section 5 — Components
   -------------------------------------------------------------------------- */

/* 5.1 Navigation
   ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 1002;
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding: 16px 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-padding);
  gap: 24px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--text-heading);
  border-radius: 8px;
  transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav__link:hover {
  color: var(--primary);
  background-color: var(--primary-pale);
}

/* Dropdown */

.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.96);
  transform-origin: top center;
  min-width: 240px;
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              visibility 0.35s,
              transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Invisible bridge so mouse can cross the gap */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  filter: blur(0px);
}

.nav__dropdown-link {
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--text-heading);
  transition: background-color 0.2s ease,
              color 0.2s ease,
              padding-left 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav__dropdown-link:hover {
  background-color: var(--primary-pale);
  color: var(--primary);
  padding-left: 28px;
}

.nav__phone {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--text-heading);
  margin-right: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__cta {
  white-space: nowrap;
}

/* Hamburger */

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1002;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-heading);
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 2px;
}

.nav__hamburger.is-open {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 1003;
}
.nav__hamburger.is-open span {
  background: var(--text-light);
}
/* Hide the entire nav bar when mobile drawer is open */
.nav:has(.nav__hamburger.is-open) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.nav:has(.nav__hamburger.is-open) .nav__logo,
.nav:has(.nav__hamburger.is-open) .nav__right,
.nav:has(.nav__hamburger.is-open) .nav__links {
  opacity: 0;
  pointer-events: none;
}
.nav__hamburger.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Nav Drawer */

.nav__mobile {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 85vw;
  height: 100dvh;
  background: var(--dark);
  z-index: 1001;
  transform: translateX(100%);
  transition: none;
  padding: 64px 24px 24px;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
.nav__mobile.is-ready {
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav__mobile.is-open {
  transform: translateX(0);
}

.nav__mobile-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.nav__mobile-label {
  display: none;
}
.nav__mobile-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 4px 16px;
}
.nav__mobile-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav__mobile-logo span {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-light);
}
.nav__mobile-logo strong {
  color: var(--text-light);
  font-weight: 700;
}
.nav__mobile-link--active {
  color: var(--text-light) !important;
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-weight: 600;
}

.nav__mobile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.2s ease;
  /* Stagger animation base state */
  opacity: 0;
  transform: translateX(20px);
  filter: blur(4px);
}

.nav__mobile.is-open .nav__mobile-link {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
  transition: background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.2s ease,
              opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              filter 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Stagger delays — use nth-of-type on anchors */
.nav__mobile-inner > a:nth-of-type(1) { --stagger: 0.05s; }
.nav__mobile-inner > a:nth-of-type(2) { --stagger: 0.08s; }
.nav__mobile-inner > a:nth-of-type(3) { --stagger: 0.11s; }
.nav__mobile-inner > a:nth-of-type(4) { --stagger: 0.14s; }
.nav__mobile-inner > a:nth-of-type(5) { --stagger: 0.17s; }
.nav__mobile-inner > a:nth-of-type(6) { --stagger: 0.20s; }
.nav__mobile-inner > a:nth-of-type(7) { --stagger: 0.23s; }
.nav__mobile-inner > a:nth-of-type(8) { --stagger: 0.26s; }
.nav__mobile-inner > a:nth-of-type(9) { --stagger: 0.29s; }
.nav__mobile-inner > a:nth-of-type(10) { --stagger: 0.32s; }
.nav__mobile-inner > a:nth-of-type(11) { --stagger: 0.35s; }
.nav__mobile-inner > a:nth-of-type(12) { --stagger: 0.38s; }
.nav__mobile.is-open .nav__mobile-link {
  transition-delay: var(--stagger, 0s);
}

.nav__mobile-link:hover,
.nav__mobile-link:focus {
  background-color: rgba(255,255,255,0.08);
  color: var(--text-light);
}

.nav__mobile .btn {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s,
              transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s;
}

.nav__mobile.is-open .btn {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile nav overlay */

.nav__mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              visibility 0.35s;
}

.nav__mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* 5.2 Buttons
   ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn--primary {
  background-color: var(--primary);
  color: var(--text-light);
  box-shadow: var(--shadow-btn);
}

.btn--primary:hover {
  background-color: var(--primary-light);
}

.btn--ghost {
  background-color: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-heading);
}

.btn--ghost:hover {
  background-color: rgba(12, 27, 46, 0.04);
  border-color: var(--text-heading);
}

.cta-banner .btn--ghost,
.section--dark .btn--ghost,
.hero .btn--ghost {
  color: var(--text-light);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.cta-banner .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--accent {
  background-color: var(--accent);
  color: var(--text-light);
  font-weight: var(--font-weight-semibold);
}

.btn--accent:hover {
  background-color: var(--accent-light);
}

/* 5.3 Cards
   ------------------------------------------------------------------ */

.card {
  border-radius: var(--card-radius);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

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

.card__icon {
  width: 56px;
  height: 56px;
  background: var(--primary-pale);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.card__icon svg,
.card__icon i {
  width: 28px !important;
  height: 28px !important;
  color: var(--primary);
}

.card__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: 8px;
}

.card__text {
  color: var(--text-body);
  font-size: 16px;
}

.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card--sm {
  padding: 24px;
  text-align: center;
}
.card--sm .card__icon {
  margin-inline: auto;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-weight: var(--font-weight-medium);
  font-size: 15px;
  margin-top: 16px;
}

.card__subtitle {
  font-size: 14px;
  color: var(--text-body);
  margin-top: 4px;
  margin-bottom: 16px;
}

/* Ensure cards in grids stretch to equal height and align content */
.grid .card,
.grid .testimonial-card,
.grid .team-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grid .card .card__text {
  flex: 1;
}
.grid .card .card__link,
.grid .card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* 5.4 Hero
   ------------------------------------------------------------------ */

.hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 0 64px;
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--text-light);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

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

.hero h1 {
  color: var(--text-light);
  margin-bottom: 14px;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--border-light);
  color: var(--text-body);
  background-color: var(--bg-off);
  text-decoration: none;
}
/* Badges on dark backgrounds */
.hero .badge,
.cta-banner .badge,
.section--dark .badge {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.1);
}

.hero__subtitle {
  max-width: 600px;
  margin-inline: auto;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* 5.5 Section Header
   ------------------------------------------------------------------ */

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-header h2 {
  margin-bottom: 0;
}

.section-header__subtitle,
.section-header p:not(:first-child) {
  color: var(--text-body);
  font-size: 18px;
  margin-top: 16px;
}

.section--dark .section-header__subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* 5.6 Process
   ------------------------------------------------------------------ */

.process__steps {
  display: flex;
  gap: 24px;
  position: relative;
}

.process__step {
  flex: 1;
  text-align: center;
  position: relative;
}

.process__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--text-light);
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}

.process__title {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  margin-bottom: 8px;
}

.process__text {
  color: var(--text-body);
  font-size: 14px;
}

.process__line {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--border-light);
  z-index: 0;
}

/* 5.7 Testimonials
   ------------------------------------------------------------------ */

.testimonial-card {
  border-radius: var(--card-radius);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.testimonial-card__quote {
  font-size: 17px;
  font-style: italic;
  color: var(--text-body);
  position: relative;
  padding-left: 24px;
  margin-bottom: 16px;
}

.testimonial-card__quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 48px;
  color: var(--primary);
  opacity: 0.2;
  font-style: normal;
  line-height: 1;
}

.testimonial-card__name {
  font-weight: 600;
  color: var(--text-heading);
}

.testimonial-card__role {
  font-size: 14px;
  color: var(--text-body);
}

.testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.testimonial-card__stars svg {
  width: 18px;
  height: 18px;
  fill: #F59E0B;
  color: #F59E0B;
}

/* 5.7b Check List
   ------------------------------------------------------------------ */

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.check-list li svg {
  color: var(--accent);
  margin-top: 3px;
}

/* 5.8 CTA Banner
   ------------------------------------------------------------------ */

.cta-banner {
  background: var(--dark);
  color: var(--text-light);
  padding: var(--section-padding) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.01) 2px,
    rgba(255, 255, 255, 0.01) 4px
  );
  pointer-events: none;
}

.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 128, 201, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner > * {
  position: relative;
  z-index: 1;
}

.cta-banner h2 {
  color: var(--text-light);
  margin-bottom: 20px;
}

.cta-banner .hero__subtitle {
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin: 0 auto 32px;
  font-size: 18px;
}

.cta-banner .hero__ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.7);
}

/* 5.9 Footer
   ------------------------------------------------------------------ */

.footer {
  background-color: var(--dark);
  padding: 64px 0 32px;
  color: var(--text-light);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer__brand p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  margin-top: 16px;
}

.footer__brand img {
  height: 36px;
  width: auto;
}

.footer__heading {
  color: var(--text-light);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.footer__link {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  margin-bottom: 8px;
  transition: color 0.2s;
}

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

.footer__social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.footer__social a {
  color: rgba(255, 255, 255, 0.6);
}

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

.footer__nap {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-style: normal;
  line-height: 1.8;
}

.footer__nap a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
}

.footer__nap a:hover {
  color: var(--text-light);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 48px;
  padding-top: 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.footer__bottom a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
}

.footer__bottom a:hover {
  color: var(--text-light);
}

/* 5.10 Contact Form
   ------------------------------------------------------------------ */

.contact-form,
.form {
  max-width: 560px;
  margin: 0 auto;
}

.contact-form--full {
  max-width: 100%;
}

.form__group {
  margin-bottom: 20px;
}

.form__label {
  display: block;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--text-heading);
  margin-bottom: 6px;
}

.form__input,
.form__textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  font-size: 16px;
  color: var(--text-heading);
  background-color: var(--bg-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: #94A3B8;
}

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-pale);
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__error {
  font-size: 13px;
  color: #EF4444;
  margin-top: 4px;
}

.form__input.is-invalid,
.form__textarea.is-invalid {
  border-color: #EF4444;
}

.form__input.is-invalid:focus,
.form__textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Result message under the Send button (set by main.js) */
.form__status {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(0, 128, 201, 0.3);
  border-radius: 10px;
  background-color: var(--primary-pale);
  color: var(--text-heading);
  font-size: 15px;
  line-height: var(--line-height-body);
}

.form__status a {
  color: var(--primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}

.form__status--sent {
  border-color: rgba(122, 193, 67, 0.5);
  background-color: #F1F9EC;
}

.form__status--error,
.form__status--limit {
  border-color: rgba(239, 68, 68, 0.35);
  background-color: #FEF2F2;
}

/* 5.11 Breadcrumb
   ------------------------------------------------------------------ */

.breadcrumb {
  padding: 16px 0;
  font-size: 14px;
  color: var(--text-body);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb__separator {
  color: var(--border-light);
}

.breadcrumb__link {
  color: var(--text-body);
  transition: color 0.2s;
}

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

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  margin-right: 8px;
  color: var(--border-light);
}

.breadcrumb__item--active {
  color: var(--text-heading);
  font-weight: var(--font-weight-medium);
}

.breadcrumb__current {
  color: var(--text-heading);
  font-weight: var(--font-weight-medium);
}

/* 5.12 Logo Strip
   ------------------------------------------------------------------ */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.logo-strip img {
  height: 40px;
  width: auto;
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.3s;
}

.logo-strip img:hover {
  filter: grayscale(0%) opacity(1);
}

/* 5.13 Stats Grid
   ------------------------------------------------------------------ */

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

.stats-grid__item {
  text-align: center;
}

.stats-grid__number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold);
  color: var(--primary);
  line-height: var(--line-height-heading);
}

.stats-grid__label {
  font-size: 16px;
  color: var(--text-body);
  margin-top: 4px;
}

.section--dark .stats-grid__number {
  color: var(--text-light);
}

.section--dark .stats-grid__label {
  color: rgba(255, 255, 255, 0.7);
}

/* 5.14 Skip Link
   ------------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  background-color: var(--primary);
  color: var(--text-light);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  z-index: 9999;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Section 5.15 — Split Layout
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split__image {
  border-radius: var(--card-radius);
  overflow: hidden;
  position: relative;
}
.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.split__content { }

/* --------------------------------------------------------------------------
   Section 5.16 — Hero with Background Image
   -------------------------------------------------------------------------- */

.hero--image {
  min-height: 70vh;
  background-size: cover;
  background-position: center;
}
.hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 107, 170, 0.5) 0%, rgba(0, 107, 170, 0.7) 50%, rgba(12, 20, 35, 0.95) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
}
.hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  pointer-events: none;
}
.hero--image .container { position: relative; z-index: 2; }

.hero__logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  border-radius: 24px;
  overflow: hidden;
  background: white;
  padding: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Section 5.17 — Feature Highlight
   -------------------------------------------------------------------------- */

.feature-highlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 400px;
  overflow: hidden;
}
.feature-highlight__visual {
  background: var(--dark-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  position: relative;
  overflow: hidden;
}
.feature-highlight__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(122, 193, 67, 0.06) 0%, transparent 70%);
}
.feature-highlight__visual i,
.feature-highlight__visual svg {
  width: 120px !important;
  height: 120px !important;
  color: rgba(255,255,255,0.9);
  position: relative;
  z-index: 1;
}
.feature-highlight__content {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--bg-off);
}
.feature-highlight--reverse .feature-highlight__visual { order: 2; background: var(--dark); }
.feature-highlight--reverse .feature-highlight__content { order: 1; }

/* --------------------------------------------------------------------------
   Section 5.18 — Stats Large
   -------------------------------------------------------------------------- */

.stat-large {
  text-align: center;
  padding: 48px 24px;
}
.stat-large__number {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-large__label {
  font-size: 16px;
  color: var(--text-body);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Section 5.19 — Testimonial Large
   -------------------------------------------------------------------------- */

.testimonial-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.testimonial-slider .testimonial-large {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.testimonial-slider .testimonial-large.active {
  opacity: 1;
  pointer-events: auto;
}
.testimonial-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.testimonial-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.testimonial-slider__dot.active {
  background: var(--accent);
  transform: scale(1.25);
}
.testimonial-large {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 0;
}
.testimonial-large__quote {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  color: var(--text-heading);
  line-height: 1.6;
  margin-bottom: 32px;
}
.testimonial-large__quote::before,
.testimonial-large__quote::after {
  display: none;
}
.testimonial-large__quote .quote-mark {
  display: inline;
  font-size: 2em;
  color: var(--accent);
  font-style: normal;
  line-height: 1;
  vertical-align: -0.05em;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.testimonial-large__quote .quote-mark.is-visible {
  opacity: 0.4;
}
.testimonial-large.is-animating .quote-mark.is-visible {
  animation: quote-pulse 2s ease-in-out infinite;
}
@keyframes quote-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.5; }
}
/* Word-by-word speaking animation */
.testimonial-large__quote .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease;
}
.testimonial-large__quote .word.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.testimonial-large__quote .word.is-active {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-large__quote .word {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
.testimonial-large__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 12px;
  overflow: hidden;
}
.testimonial-large__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-large__name {
  font-weight: 600;
  color: var(--text-heading);
}
.testimonial-large__role {
  font-size: 14px;
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   Section 5.20 — Icon Row
   -------------------------------------------------------------------------- */

.icon-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 16px 0;
}
.icon-row__item {
  text-align: center;
  flex: 0 0 auto;
  padding: 24px 16px;
  cursor: default;
}
.icon-row__item i,
.icon-row__item svg {
  width: 56px !important;
  height: 56px !important;
  color: var(--primary);
  display: block;
  margin: 0 auto 16px;
  background: var(--primary-pale);
  padding: 14px;
  border-radius: 16px;
  box-sizing: content-box;
}
.icon-row__item span {
  display: block;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--text-heading);
}

/* --------------------------------------------------------------------------
   Section 5.21 — Team Card
   -------------------------------------------------------------------------- */

.team-card {
  text-align: center;
  padding: 32px;
}
.team-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-card);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.team-card__role {
  font-size: 14px;
  color: var(--primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: 12px;
}
.team-card__bio {
  font-size: 15px;
  color: var(--text-body);
}

/* ==========================================================================
   Section 6 — Animation System — Framer-esque micro-interactions
   ========================================================================== */

/* Base reveal states — simple fades, no blur */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  will-change: opacity, transform;
}

/* The four classes above start hidden and are animated to their resting state
   by animations.js. That file returns early when prefers-reduced-motion is set
   — before the reveal loop ever runs — so without this reset the elements stay
   at opacity 0 for good, leaving most of the content on every page invisible to
   anyone using that setting. Restore them to the resting state directly.
   Keep this rule immediately below the declarations it undoes. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* Same failure with scripting turned off: nothing is ever there to animate
   them in. Browsers without @media scripting support simply skip this, which
   leaves them exactly as they were, so it is safe to add.
   NB this covers scripting *disabled*, not animations.js failing to download —
   that case still needs a class flipped on <html> by an inline script in each
   page's head, which is a change to every page rather than to this file. */
@media (scripting: none) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* Card hover micro-interactions */
.card {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}
.card:hover .card__icon {
  transform: scale(1.1) rotate(-3deg);
}
.card:hover .card__link {
  gap: 12px;
}
.card__icon {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.card__link {
  transition: gap 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease;
}

/* Button micro-interactions */
.btn {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
}
.btn:hover::after {
  opacity: 1;
}
.btn:hover {
  transform: translateY(-3px) scale(1.02);
}
.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* Badge hover */
.badge {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.badge:hover {
  transform: translateY(-2px);
  background: rgba(122, 193, 67, 0.1);
  border-color: var(--accent);
}

/* Nav link hover — subtle bg pill */
.nav__link {
  position: relative;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease;
}
.nav__link:hover {
  background-color: var(--primary-pale);
  color: var(--primary);
}

/* Icon hover pulse */
.card__icon i,
.icon-row__item i,
.icon-row__item svg {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease;
}
.icon-row__item:hover i,
.icon-row__item:hover svg {
  transform: scale(1.2) translateY(-4px);
  color: var(--accent);
}
.icon-row__item {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: default;
}
.icon-row__item:hover {
  transform: translateY(-4px);
}

/* Feature highlight hover */
.feature-highlight__visual i {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.feature-highlight:hover .feature-highlight__visual i {
  transform: scale(1.1) rotate(5deg);
}

/* Process step hover */
.process__step {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: default;
}
.process__step:hover {
  transform: translateY(-4px);
}
.process__number {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.process__step:hover .process__number {
  transform: scale(1.15);
  box-shadow: 0 4px 20px rgba(0, 128, 201, 0.3);
}

/* Testimonial hover */
.testimonial-card {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* Team card hover */
.team-card {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.team-card:hover {
  transform: translateY(-6px);
}
.team-card__photo {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.team-card:hover .team-card__photo {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 128, 201, 0.2);
}

/* Stats number count-up visual */
.stat-large__number {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease;
}
.stat-large:hover .stat-large__number {
  transform: scale(1.05);
  color: var(--accent);
}

/* Split image hover */
.split__image {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}
.split__image:hover {
  transform: scale(1.02);
}
.split__image img {
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.split__image:hover img {
  transform: scale(1.05);
}

/* Footer social icon hover */
.footer__social a {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease;
}
.footer__social a:hover {
  transform: translateY(-4px) scale(1.15);
  color: var(--accent);
}

/* Logo strip hover */
.logo-strip span {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.3s ease;
}
.logo-strip span:hover {
  transform: translateY(-2px);
  opacity: 1;
}

/* Form input focus micro-interaction */
.form__input:focus,
.form__textarea:focus {
  transform: translateY(-1px);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth section transitions for scroll */
.section, .feature-highlight {
  transition: background-color 0.6s ease;
}


/* Cursor glow on hero (set via JS) */
.hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(255, 255, 255, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Nav scroll effect */
.nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-scrolled {
  box-shadow: 0 1px 10px rgba(0,0,0,0.08);
}
.nav__link--active {
  color: var(--primary) !important;
}
.nav__dropdown-link--active {
  color: var(--accent) !important;
  background: rgba(122, 193, 67, 0.08);
}

/* ── Micro-interactions ── */

/* Service icons — rotate + color shift on hover */
.services-trio__item {
  transition: background-color 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.services-trio__item:hover {
  transform: translateY(-4px);
}
.services-trio__icon i,
.services-trio__icon svg {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease;
}
.services-trio__item:hover .services-trio__icon i,
.services-trio__item:hover .services-trio__icon svg {
  transform: scale(1.2) rotate(-8deg);
}

/* Audience list items — lift + icon pop */
.audience-list__item {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 12px;
  padding: 12px;
  margin: -12px;
}
.audience-list__item:hover {
  transform: translateX(8px);
}
.audience-list__icon {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.3s ease;
}
.audience-list__item:hover .audience-list__icon {
  transform: scale(1.1);
  background: var(--accent);
}
.audience-list__item:hover .audience-list__icon i,
.audience-list__item:hover .audience-list__icon svg {
  color: white !important;
}

/* Timeline items — step label glow + content slide */
.timeline__item {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.timeline__item:hover {
  transform: translateX(6px);
}
.timeline__step {
  transition: letter-spacing 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.timeline__item:hover .timeline__step {
  letter-spacing: 2px;
}
.timeline__content h3,
.timeline__content h4 {
  transition: color 0.3s ease;
}
.timeline__item:hover .timeline__content h3,
.timeline__item:hover .timeline__content h4 {
  color: var(--accent);
}

/* Stats row — subtle scale on hover */
.stats-row__item {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: default;
}
.stats-row__item:hover {
  transform: scale(1.08);
}
.stats-row__number {
  transition: color 0.3s ease;
}
.stats-row__item:hover .stats-row__number {
  color: var(--accent);
}

/* Eyebrow — tracking expand on hover parent */
.eyebrow {
  transition: letter-spacing 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Check icons — bounce on scroll-in (handled via class) */
.check-animate i,
.check-animate svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.check-animate.is-visible i,
.check-animate.is-visible svg {
  transform: scale(1.3);
}

/* Split images — subtle zoom on hover */
.split__image {
  overflow: hidden;
  border-radius: var(--card-radius);
}
.split__image img {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.split__image:hover img {
  transform: scale(1.03);
}

/* Services centre image — slow zoom */
.services-trio__image {
  overflow: hidden;
}
.services-trio__image img {
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.services-trio__image:hover img {
  transform: scale(1.04);
}

/* Badge icon — pulse on hover */
.services-trio__badge-icon i,
.services-trio__badge-icon svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.services-trio__badge:hover .services-trio__badge-icon i,
.services-trio__badge:hover .services-trio__badge-icon svg {
  transform: scale(1.2);
}



/* Footer links — subtle shift */
.footer__link {
  transition: color 0.3s ease, transform 0.3s ease;
}
.footer__link:hover {
  transform: translateX(3px);
  color: var(--accent);
}

/* Arrow icons in buttons — slide right on hover */
.btn i,
.btn svg {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn:hover i,
.btn:hover svg {
  transform: translateX(3px);
}

/* Check rows — proactive section */
.check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 8px 12px;
  margin-left: -12px;
  border-radius: 10px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.3s ease;
  cursor: default;
}
.check-row:last-child { margin-bottom: 0; }
.check-row:hover {
  transform: translateX(6px);
  background: rgba(0, 107, 170, 0.06);
}
.section--dark .check-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.check-row i,
.check-row svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease;
}
.check-row:hover i,
.check-row:hover svg {
  transform: scale(1.3) rotate(-10deg);
}
.check-row span {
  transition: color 0.3s ease;
}
.check-row:hover span {
  color: var(--text-heading);
}
.section--dark .check-row:hover span {
  color: var(--text-light);
}

/* Reduced motion — disable everything */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
    filter: none;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Section 7 — Responsive Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  /* Navigation — break to mobile */
  .nav__links {
    display: none;
  }

  .nav__phone {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__right {
    gap: 12px;
    margin-left: auto;
  }

  .nav__right .btn {
    padding: 10px 20px;
    font-size: 14px;
  }

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

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

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

  .process__steps {
    flex-wrap: wrap;
  }

  .process__step {
    flex: 1 1 calc(50% - 12px);
  }

  .process__line {
    display: none;
  }

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

@media (max-width: 768px) {
  .section {
    padding-block: var(--section-padding-mobile);
  }

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

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  /* Hero mobile */
  .hero {
    min-height: 50vh;
    padding: 96px var(--container-padding) 64px;
  }

  h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .hero__subtitle {
    font-size: 16px;
  }

  .hero__ctas {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  .hero__ctas .btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  /* Process mobile */
  .process__steps {
    flex-direction: column;
  }

  .process__step {
    flex: 1 1 100%;
  }

  /* Footer mobile */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Logo strip mobile */
  .logo-strip {
    gap: 32px;
  }

  .logo-strip img {
    height: 32px;
  }
}

/* --------------------------------------------------------------------------
   Section 7b — Responsive for New Layout Components
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse { direction: ltr; }
  .split__image[style*="order:-1"],
  .split__image[style*="order: -1"] {
    order: 1 !important;
  }
  .feature-highlight { grid-template-columns: 1fr; }
  .feature-highlight__visual { min-height: 250px; }
  .feature-highlight--reverse .feature-highlight__visual { order: 0; }
  .feature-highlight--reverse .feature-highlight__content { order: 0; }
}

@media (max-width: 768px) {
  .icon-row { gap: 32px; }
  .team-card__photo { width: 120px; height: 120px; }
  .feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .timeline__item { grid-template-columns: 1fr; gap: 12px; }
  .stats-row {
    gap: 0;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .stats-row__item {
    padding: 0 12px;
    flex: 1;
  }
  .stats-row__number {
    font-size: 0.95rem;
  }
  .stats-row__label {
    font-size: 11px;
  }
  .partner-grid { grid-template-columns: 1fr; }
  .audience-list__icon { width: 40px; height: 40px; }
}

@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   ACCREDITATION MARKS + REVIEW TAB
   -------------------------------------------------------------------------- */

/* "Cyber Essentials" is a longer token than the other stats ("2011", "8-5pm"),
   so trim it a little to stop that one cell ballooning and unbalancing the row. */
.stats-row__number--wide {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}

/* On mobile that rule was working against us. It sits after the 768px block
   above, so it beat the 0.95rem set there and rendered Cyber Essentials LARGER
   than the stats either side of it — then `flex: 1` squeezed all three into
   equal thirds, so the longest label was the one with least room and wrapped to
   two lines, knocking the row out of alignment.
   Fixed by letting the cells size to their content, as they already do on
   desktop, and scaling this one label with the viewport so it stays on a single
   line down to the narrowest phones. Must stay below the rule above to win. */
@media (max-width: 768px) {
  .stats-row__item {
    flex: 0 1 auto;
  }
  .stats-row__number--wide {
    font-size: clamp(0.72rem, 3.4vw, 0.95rem);
    white-space: nowrap;
  }
}

/* The Cyber Essentials mark is dark navy and is drawn to sit on white. Against
   the site's blue (--dark #006BAA) it reads as a murky blob, and below roughly
   100px its lettering stops resolving at all. So everywhere it appears it gets
   a white plate to sit on and enough size to stay legible. */
.footer__brand .footer__accred img,
.accred-strip__mark img {
  display: block;
  width: auto;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  box-sizing: content-box;
}

/* Footer accreditation lockup — the white plate is the container now, so the
   row itself stays transparent rather than nesting a box inside a box. */
.footer__accred {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.footer__brand .footer__accred img {
  height: 76px;
}
.footer__accred span {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
}

/* Review tab — mirrors the cookie tab on the opposite corner */
.review-tab {
  position: fixed;
  bottom: 0;
  right: 24px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 8px 8px 0 0;
  background: var(--dark);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.5s ease, background 0.5s ease;
}
.review-tab:hover {
  color: white;
  background: var(--dark-mid);
}
.review-tab svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #00b67a;
}

/* Over a dark/blue section the blue tab would blend in, so flip to accent
   green — same behaviour as the cookie tab, driven by .on-dark in main.js */
.review-tab.on-dark {
  background: var(--accent);
  color: white;
}
.review-tab.on-dark:hover {
  background: #6aaf35;
}
.review-tab.on-dark svg {
  color: white;
}

@media (max-width: 768px) {
  .footer__accred {
    margin-top: 16px;
  }
  .review-tab {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   ABOUT — OUR STORY
   -------------------------------------------------------------------------- */

.story-open {
  max-width: 760px;
}
.story-open__belief {
  margin: 24px 0 0;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--primary);
}

.story-p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.7;
}
.story-p:last-child {
  margin-bottom: 0;
}

.story-close {
  max-width: 860px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--border-light);
}
.story-close__lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}
.story-close__goal {
  margin: 20px 0 24px;
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}
.story-close__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
}

@media (max-width: 768px) {
  .story-close {
    margin-top: 48px;
    padding-top: 32px;
  }
}

/* Accreditation strip — dark sections (IT Strategy) */
.accred-strip {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 800px;
  margin: 48px auto 0;
  padding: 32px 36px;
  border: 1px solid var(--border-dark);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
}
/* The mark sits in a flex row next to a long paragraph, and the global img reset
   gives it max-width:100%. Without these two guards the text competes for width,
   the wrapper gets squeezed, and the image's width follows it down while the
   height stays pinned at 108px — so the logo renders horizontally squashed.
   flex-shrink keeps the wrapper at its natural size; max-width:none makes sure a
   percentage clamp can never override the aspect ratio derived from height+auto. */
.accred-strip__mark {
  flex-shrink: 0;
}
.accred-strip__mark img {
  height: 108px;
  max-width: none;
}
.accred-strip__text h3 {
  margin: 8px 0 10px;
  font-size: 22px;
  color: var(--text-light);
}
.accred-strip__text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .accred-strip {
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Legal pages (privacy policy, cookie policy)
   Long-form prose at a comfortable measure, plus a table style that survives
   narrow screens by scrolling inside its own wrapper rather than pushing the
   page sideways.
   -------------------------------------------------------------------------- */
.legal {
  max-width: 820px;
  margin-inline: auto;
}
.legal h2 {
  margin: 48px 0 16px;
  font-size: 26px;
  line-height: 1.25;
}
.legal h3 {
  margin: 32px 0 10px;
  font-size: 19px;
  line-height: 1.3;
}
.legal p {
  margin-bottom: 16px;
  line-height: 1.75;
}
.legal ul {
  margin: 0 0 20px 22px;
}
.legal li {
  margin-bottom: 10px;
  line-height: 1.7;
}
.legal a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover {
  color: var(--dark);
}
.legal code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-off, #f4f6f8);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.legal__meta {
  font-size: 14px;
  color: var(--text-muted, #667);
}
.legal__summary {
  margin-bottom: 40px;
  padding: 24px 28px;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--bg-off, #f9fafb);
}
.legal__summary h2 {
  font-size: 20px;
}
.legal__summary ul {
  margin-bottom: 0;
}

/* Tables scroll inside their own box so the page body never scrolls sideways */
.legal__table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
}
.legal__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}
.legal__table th,
.legal__table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
}
.legal__table th {
  font-weight: var(--font-weight-semibold);
  background: var(--bg-off, #f9fafb);
}
.legal__table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 768px) {
  .legal h2 { font-size: 22px; margin-top: 36px; }
  .legal h3 { font-size: 17px; }
  .legal__summary { padding: 20px; }
}