/* ==========================================================================
   Components. Mobile first; desktop rules at 640px / 960px.
   Every inline style from design/static/*.html lives here as a class,
   because the Content-Security-Policy forbids style="" attributes.
   ========================================================================== */

/* The page sits on the faint grid (it shows behind the header and heroes).
   Sections paint their own background over it. */
body {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.section,
.band {
  background-color: var(--c-bg);
}

.section.grid-bg {
  background-color: var(--c-bg);
}

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

.hero {
  background: transparent;
  padding-block: var(--sp-10) var(--sp-12);
}

@media (min-width: 960px) {
  .hero {
    padding-block: var(--sp-14) var(--sp-20);
  }
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-block: var(--sp-4) var(--sp-4);
  max-width: 50rem;
}

.hero__title--display {
  font-size: var(--fs-display);
  line-height: 1.04;
}

.hero__title--sm {
  font-size: var(--fs-h1-sm);
  line-height: var(--lh-heading);
}

.hero__title em,
.accent {
  font-style: normal;
  color: var(--c-red);
}

.hero .lead {
  margin-bottom: var(--sp-8);
}

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.announcement {
  background: var(--c-navy);
  color: var(--c-border-2);
  padding: var(--sp-2) var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-align: center;
}

.announcement a {
  color: var(--c-red-soft);
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

.announcement a:hover {
  color: var(--c-text-on-dark);
}

/* ==========================================================================
   Site header: floating frosted glass, sticky
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--sp-4) var(--gutter) 0;
}

.site-header__bar {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.625rem 0.625rem 0.625rem var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.92);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header__bar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  flex-shrink: 0;
}

.site-header__logo img {
  height: 22px;
  width: auto;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  gap: var(--sp-1) 1.625rem;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.site-nav__link:hover {
  color: var(--c-red-dark);
}

.site-nav__link[aria-current="page"],
.site-nav__link.is-active {
  color: var(--c-red-dark);
  font-weight: 700;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Extra specificity: the generic .btn rule further down would otherwise show it on phones. */
.site-header .site-header__cta {
  display: none;
}

@media (min-width: 640px) {
  .site-header .site-header__cta {
    display: inline-flex;
  }
}

@media (min-width: 960px) {
  .site-header {
    padding-top: var(--sp-5);
    top: 0;
  }

  .site-header__bar {
    border-radius: var(--r-xl);
    padding: var(--sp-3) 0.875rem var(--sp-3) 1.375rem;
  }

  .site-header__logo img {
    height: 26px;
  }

  .site-nav {
    display: block;
  }

  .menu-toggle,
  .menu-fallback {
    display: none !important;
  }
}

/* Menu button (JS) and its no-JS fallback link to the footer navigation. */
.menu-toggle,
.menu-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle {
  display: none;
}

.js .menu-toggle {
  display: inline-flex;
}

.js .menu-fallback {
  display: none;
}

.menu-toggle:hover,
.menu-fallback:hover {
  border-color: var(--c-pink-border-strong);
  color: var(--c-text);
}

/* ==========================================================================
   Services panel ("mega menu", desktop header). Markup: partials/header.php.
   Closed: hidden (not focusable). Open: .is-open (main.js), or without JS on
   :hover / :focus-within. The panel spans the header bar; 3 or 4 columns.
   ========================================================================== */

.site-header__bar {
  position: relative; /* the panel is positioned against the whole bar */
}

.site-nav__item {
  display: flex;
  align-items: center;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-height: var(--tap);
  margin-left: 0.125rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}

.site-nav__toggle:hover,
.site-nav__item--mega.is-open .site-nav__toggle {
  color: var(--c-red-dark);
}

.site-nav__toggle .icon {
  transition: none;
}

.site-nav__item--mega.is-open .site-nav__toggle .icon {
  transform: rotate(180deg);
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  padding-top: var(--sp-2); /* hover bridge between the bar and the panel */
  visibility: hidden;
  opacity: 0;
}

/* The visible card (the padding above stays transparent, so the pointer can cross it). */
.mega::before {
  content: "";
  position: absolute;
  inset: var(--sp-2) 0 0;
  z-index: -1;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.28);
}

.mega > * {
  margin-inline: var(--sp-7);
}

.mega > .service-groups {
  margin-top: var(--sp-7);
}

.site-nav__item--mega.is-open .mega,
html:not(.mega-js) .site-nav__item--mega:hover .mega,
html:not(.mega-js) .site-nav__item--mega:focus-within .mega {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .mega {
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }

  .site-nav__item--mega.is-open .mega,
  html:not(.mega-js) .site-nav__item--mega:hover .mega,
  html:not(.mega-js) .site-nav__item--mega:focus-within .mega {
    transform: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
  }

  .site-nav__toggle .icon {
    transition: transform 0.16s ease;
  }
}

.mega__foot {
  margin-block: var(--sp-5) var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
}

/* Services grouped by category: header panel and mobile menu. Balanced columns
   (a group never splits): 1 on phones, 2 from 560px, 3 from 960px, 4 from 1200px. */
.service-groups {
  column-count: 1;
  column-gap: var(--sp-8);
}

@media (min-width: 560px) {
  .service-groups { column-count: 2; }
}

@media (min-width: 960px) {
  .service-groups { column-count: 3; }
}

@media (min-width: 1200px) {
  .service-groups { column-count: 4; }
}

.service-groups__group {
  break-inside: avoid;
  padding-bottom: var(--sp-5);
}

.service-groups__title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  color: var(--c-red-dark);
  text-transform: uppercase;
}

.service-groups__list {
  list-style: none;
}

.service-groups__link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem; /* above the 24px WCAG 2.2 target minimum; 44px in the mobile menu */
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.service-groups__link:hover {
  color: var(--c-red-dark);
}

/* ==========================================================================
   Icons (SVG sprite: /assets/icons/sprite.svg)
   ========================================================================== */

.icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 2.25rem; height: 2.25rem; stroke-width: 1.8; }
.icon--xl { width: 3.375rem; height: 3.375rem; stroke-width: 1.8; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0.9375rem 1.625rem; /* 15 x 26 */
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn--primary {
  background: var(--c-red);
  color: var(--c-text-on-dark);
  box-shadow: var(--sh-red);
}

.btn--primary:hover {
  background: var(--c-red-dark);
  color: var(--c-text-on-dark);
}

.btn--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--c-border-2);
  color: var(--c-text);
}

.btn--glass:hover {
  border-color: var(--c-pink-border-strong);
  color: var(--c-text);
}

.btn--dark {
  background: var(--c-navy);
  color: var(--c-text-on-dark);
}

.btn--dark:hover {
  background: var(--c-navy-2);
  color: var(--c-text-on-dark);
}

.btn--white {
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 700;
}

.btn--white:hover {
  background: var(--c-pink);
  color: var(--c-text);
}

/* Outline button for dark backgrounds (e.g. WhatsApp in the CTA band). */
.btn--outline-dark {
  border-color: var(--c-navy-border);
  color: var(--c-text-on-dark);
}

.btn--outline-dark:hover {
  border-color: var(--c-text-on-dark-faint);
  color: var(--c-text-on-dark);
}

.btn--sm {
  padding: 0.6875rem 1.125rem; /* 11 x 18: header button */
  font-size: var(--fs-xs);
}

/* Full-width on phones (as in the mobile designs), natural width from 640px. */
.btn--block-mobile {
  width: 100%;
  border-radius: 14px;
  padding-block: var(--sp-4);
}

@media (min-width: 640px) {
  .btn--block-mobile {
    width: auto;
    border-radius: var(--r-md);
    padding-block: 0.9375rem;
  }
}

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

/* Pulsing-style status dot used on the header "Book a free call" button. */
.btn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red-dot);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 639.98px) {
  .btn-group--stack-mobile {
    flex-direction: column;
    gap: 0.625rem;
  }
}

/* Text link with arrow ("View all 13 services ->"). */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  font-weight: 600;
  color: var(--c-red-dark);
}

/* ==========================================================================
   Hexagons
   ========================================================================== */

.hex {
  clip-path: var(--hex-clip);
}

/* Hexagon badge holding a short code (S2, 27, 01...). */
.hex-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 50px;
  clip-path: var(--hex-clip);
  background: var(--c-pink);
  color: var(--c-red-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 700;
}

.hex-badge--sm {
  width: 48px;
  height: 43px;
}

.hex-badge--solid {
  background: var(--c-red);
  color: var(--c-text-on-dark);
}

/* Large hero hexagon with glow (home orbit, 404). */
.hex-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 85px;
  clip-path: var(--hex-clip);
  background: var(--c-red);
  color: var(--c-text-on-dark);
  filter: drop-shadow(0 0 24px rgba(211, 47, 47, 0.35));
}

@media (min-width: 960px) {
  .hex-hero {
    width: 150px;
    height: 132px;
  }
}

/* ==========================================================================
   Section labels and headings
   ========================================================================== */

/* Mono, uppercase, red, numbered: "01 — MODULES". */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  color: var(--c-red-dark);
  text-transform: uppercase;
  letter-spacing: 0;
}

@media (min-width: 960px) {
  .eyebrow {
    font-size: var(--fs-mono);
  }
}

.eyebrow--on-dark {
  color: var(--c-red-soft);
}

.section-title {
  font-size: var(--fs-h2);
  margin-top: var(--sp-3);
  margin-bottom: clamp(2rem, 1.6rem + 1.6vw, 3.5rem); /* 32 -> 56 before the section content */
  max-width: 40rem;
}

.section-head .section-title {
  margin-bottom: 0;
}

.section-title--sm {
  font-size: var(--fs-h2-sm);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-8);
}

@media (min-width: 960px) {
  .section-head {
    margin-bottom: 2.75rem;
  }
}

.section-head--center {
  justify-content: center;
  text-align: center;
}

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

/* "[ SYS ] GRC & cybersecurity consultancy" hero badge. */
.sys-badge {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0.4375rem var(--sp-3);
  border: 1px solid var(--c-pink-border);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-red-dark);
}

.sys-badge__text {
  color: var(--c-text-body);
}

@media (min-width: 960px) {
  .sys-badge {
    font-size: var(--fs-mono);
  }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  display: block;
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3xl);
  padding: var(--sp-6);
  color: var(--c-text);
}

@media (min-width: 960px) {
  .card {
    padding: 1.875rem; /* 30 */
  }
}

.card--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.card--sm {
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
}

/* Whole-card link with the design's hover ring. */
a.card {
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

a.card:hover {
  border-color: var(--c-pink-border-strong);
  box-shadow: var(--sh-card-hover);
  color: var(--c-text);
}

a.card:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-3xl);
}

.card--dark {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-text-on-dark);
}

a.card--dark:hover {
  color: var(--c-text-on-dark);
  border-color: var(--c-navy-border);
}

.card--dark .card__text {
  color: var(--c-text-on-dark-muted);
}

.card--dark .card__meta {
  color: var(--c-text-on-dark-faint);
}

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* "M.01" style code in the card corner. Darker than the design's #94A3B8 for AA contrast. */
.card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--c-text-muted);
}

.card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 1.375rem 0 var(--sp-2);
}

.card__title--sm {
  font-size: var(--fs-h4);
  margin: var(--sp-2) 0 0.375rem;
}

.card__text {
  color: var(--c-text-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.card__text--sm {
  font-size: var(--fs-xs);
}

.card__more {
  display: inline-block;
  margin-top: 0.875rem;
  color: var(--c-red-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Service card on the overview: fixed min height, content pushed apart. */
.card--service {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 230px;
  padding: var(--sp-7);
}

/* Small numbered feature card ("01 Expert-led delivery"). */
.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
}

.feature-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-red-dark);
}

.feature-card__title {
  font-size: 1.0625rem;
  margin: var(--sp-2) 0 0.375rem;
}

/* Benefit with hexagon number (service pages). */
.benefit__title {
  font-size: var(--fs-h4);
  margin: 0.875rem 0 0.375rem;
}

/* Compact row card used on mobile lists and "Related services". */
.link-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text);
  font-weight: 600;
  transition: border-color var(--dur) var(--ease);
}

.link-row:hover {
  border-color: var(--c-pink-border-strong);
  color: var(--c-text);
}

.link-row__body {
  flex: 1;
  min-width: 0;
}

.link-row__sub {
  display: block;
  color: var(--c-text-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  margin-top: 2px;
}

.link-row__arrow {
  color: var(--c-red-dark);
}

.link-row--dark {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-text-on-dark);
}

.link-row--dark:hover {
  color: var(--c-text-on-dark);
}

.link-row--dark .link-row__sub {
  color: var(--c-text-on-dark-muted);
}

.link-row--dark .link-row__arrow {
  color: var(--c-red-soft);
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
}

/* Contact detail card with hexagon icon. */
.contact-card {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 1.125rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  color: var(--c-text);
}

a.contact-card:hover {
  border-color: var(--c-pink-border-strong);
  color: var(--c-text);
}

.contact-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
}

.contact-card__value {
  font-weight: 600;
}

/* "At a glance" summary panel. */
.glance {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3xl);
  padding: 1.625rem;
  box-shadow: var(--sh-float);
}

.glance__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--lh-body);
  text-transform: uppercase;
  color: var(--c-red-dark);
  margin-bottom: var(--sp-4);
}

.glance__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  font-size: var(--fs-xs);
}

.glance__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}

.glance__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

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

.glance__row dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

/* Testimonial. */
.quote-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3xl);
  padding: var(--sp-7);
}

.quote-card__mark {
  color: var(--c-red);
  font-size: 2rem;
  line-height: 1;
}

.quote-card blockquote {
  margin: var(--sp-2) 0 var(--sp-5);
  color: var(--c-text-strong-body);
  line-height: 1.65;
}

.quote-card figcaption {
  font-size: var(--fs-xs);
  font-weight: 600;
}

.quote-card__role {
  display: block;
  font-weight: 400;
  color: var(--c-text-muted);
}

/* Blog card with grid thumbnail and hexagon. */
.post-card {
  overflow: hidden;
  padding: 0;
}

.post-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background-color: var(--c-bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

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

.post-card__hex {
  width: 72px;
  height: 64px;
  clip-path: var(--hex-clip);
  background: var(--c-pink);
}

.post-card__body {
  padding: 1.375rem;
}

.post-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-red-dark);
  text-transform: uppercase;
}

.post-card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   Stat cards
   ========================================================================== */

.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
}

/* A short phrase instead of a number ("End to end", "Hands-on"). */
.stat__value.stat__value--text {
  white-space: normal;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
}

.stat__value {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); /* "15+" or "99%" stays on one line in a half-width phone card */
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
}

@media (min-width: 960px) {
  .stat__value {
    font-size: 2.5rem;
  }
}

.stat__unit {
  color: var(--c-red);
}

/* Inline stats under the hero ("30+ clients  15+ frameworks"). */
.inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-7);
  font-size: var(--fs-2xs);
  color: var(--c-text-body);
  list-style: none;
}

.inline-stats b {
  color: var(--c-text);
}

/* ==========================================================================
   Pipeline (horizontal stages) and step cards
   ========================================================================== */

/* Below 960px: a vertical timeline (number left, card right, line between the numbers).
   From 960px: every stage in one row, equal widths and equal card heights, whatever the
   number of stages (home: five). */
.pipeline {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  list-style: none;
}

.pipeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: var(--sp-4);
}

/* Line from each circle down to the next one (none after the last stage). */
.pipeline__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  bottom: calc(-1 * var(--sp-4));
  left: 23px;
  width: 2px;
  background: var(--c-pink-border-strong);
}

.pipeline .pipeline__card {
  margin-top: 0;
}

@media (min-width: 960px) {
  .pipeline {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  /* Connecting line behind the circles. */
  .pipeline::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-pink-border-strong);
  }

  .pipeline__step:not(:last-child)::after {
    content: none;
  }

  .pipeline__step {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .pipeline .pipeline__card {
    flex: 1;
    margin-top: 1.375rem;
  }
}

@media (min-width: 960px) and (max-width: 1199.98px) {
  .pipeline {
    gap: var(--sp-3);
  }

  .pipeline .pipeline__card {
    padding: var(--sp-4);
  }
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--c-red);
  background: var(--c-surface);
  color: var(--c-red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-body);
}

.step-num--active {
  background: var(--c-red);
  color: var(--c-text-on-dark);
}

.pipeline .step-num {
  box-shadow: 0 0 0 8px var(--c-bg);
}

.step-num--sm {
  width: 44px;
  height: 44px;
}

.pipeline__card {
  margin-top: 1.375rem;
  padding: 1.375rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.pipeline__title {
  font-size: var(--fs-h4);
  margin-bottom: 0.375rem;
}

.pipeline__text {
  color: var(--c-text-body);
  font-size: var(--fs-sm);
}

/* Numbered step cards (service pages: six steps). */
.steps {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(21.25rem, 100%), 1fr));
}

.step-card {
  display: flex;
  gap: 1.125rem;
  padding: 1.625rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.step-card__title {
  font-size: var(--fs-h4);
  margin-bottom: 0.375rem;
}

.step-card__text {
  color: var(--c-text-body);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   FAQ accordion: native <details>/<summary>, works without JavaScript
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  transition: border-color var(--dur) var(--ease);
}

.faq[open] {
  border-color: var(--c-pink-border-strong);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  min-height: 56px;
  padding: 0.875rem 1.375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-xl);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  flex-shrink: 0;
  color: var(--c-red-dark);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
}

.faq[open] > .faq__question::after {
  content: "\2212"; /* minus sign */
}

.faq__answer {
  padding: 0 1.375rem 1.25rem;
  color: var(--c-text-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.faq__answer > * + * {
  margin-top: var(--sp-3);
}

/* ==========================================================================
   Pills, chips, tags
   ========================================================================== */

/* Large rounded link/filter chip ("SaaS & Tech"). */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.625rem 1.375rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 500;
  line-height: 1.2;
}

.pill:hover {
  border-color: var(--c-pink-border-strong);
  color: var(--c-text);
}

.pill--accent {
  background: var(--c-pink);
  border-color: var(--c-pink-border);
  color: var(--c-red-dark);
  font-weight: 600;
}

.pill--accent:hover {
  color: var(--c-red-deep);
}

/* Pill with a leading icon (home industries). */
.pill--icon {
  gap: var(--sp-2);
}

.pill__icon {
  color: var(--c-red-dark);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
}

/* Square-ish filter tab (services filter, blog categories). */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--c-pink-border-strong);
  color: var(--c-text);
}

.chip[aria-pressed="true"],
.chip[aria-current],
.chip.is-active {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-text-on-dark);
  font-weight: 600;
}

/* Red variant for two-option toggles (Type 1 / Type 2). */
.chip--red[aria-pressed="true"],
.chip--red.is-active {
  background: var(--c-red);
  border-color: var(--c-red);
}

/* Small mono tag ("CERTIFICATION"). */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) 0.625rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--red {
  border-color: var(--c-pink-border);
  background: var(--c-pink);
  color: var(--c-red-dark);
}

/* Floating mono label used around the home orbit graphic. */
.float-tag {
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 700;
  white-space: nowrap;
}

.float-tag--red {
  border-color: var(--c-pink-border);
  color: var(--c-red-dark);
}

@media (min-width: 960px) {
  .float-tag {
    padding: 0.4375rem var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-mono);
  }
}

/* ==========================================================================
   CTA band (navy with hexagons)
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--sp-10) var(--sp-6);
  border-radius: var(--r-4xl);
  background: var(--c-navy);
  color: var(--c-text-on-dark);
}

@media (min-width: 960px) {
  .cta-band {
    padding: var(--sp-16);
    border-radius: var(--r-5xl);
  }
}

.cta-band__hex {
  position: absolute;
  z-index: -1;
  clip-path: var(--hex-clip);
  background: var(--c-red);
  pointer-events: none;
}

.cta-band__hex--lg {
  right: -40px;
  top: -30px;
  width: 140px;
  height: 123px;
}

.cta-band__hex--sm {
  display: none;
  right: 170px;
  top: 150px;
  width: 120px;
  height: 106px;
  background: var(--c-navy-2);
}

@media (min-width: 960px) {
  .cta-band__hex--lg {
    width: 260px;
    height: 228px;
  }

  .cta-band__hex--sm {
    display: block;
  }
}

.cta-band__content {
  max-width: 40rem;
}

.cta-band__title {
  font-size: var(--fs-h2);
  margin: var(--sp-3) 0 var(--sp-4);
  line-height: var(--lh-heading);
}

.cta-band__text {
  color: var(--c-text-on-dark-muted);
  font-size: 1.0625rem;
  margin-bottom: 1.875rem;
}

/* Inline variant: title left, single button right. */
.cta-band--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.cta-band--inline .cta-band__title {
  font-size: var(--fs-h2-sm);
  margin-bottom: 0;
  max-width: 38rem;
}

@media (min-width: 960px) {
  .cta-band--inline {
    padding: var(--sp-14) var(--sp-16);
  }
}

.cta-band--inline .cta-band__hex--lg {
  opacity: 0.9;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--c-text-muted);
  text-transform: uppercase;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-inline: 0.5em;
  color: var(--c-text-muted);
}

.breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--c-text-muted);
}

.breadcrumbs__link:hover {
  color: var(--c-red-dark);
}

.breadcrumbs__item [aria-current="page"] {
  color: var(--c-red-dark);
}

.breadcrumbs + * {
  margin-top: var(--sp-6);
}

/* 44px targets on touch screens without changing the visual spacing much. */
@media (max-width: 959.98px) {
  .breadcrumbs__link {
    min-height: var(--tap);
  }

  .breadcrumbs {
    margin-block: -0.625rem;
  }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  list-style: none;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.pagination__link:hover {
  border-color: var(--c-pink-border-strong);
  color: var(--c-text);
}

.pagination__link[aria-current="page"] {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-text-on-dark);
}

.pagination__link--disabled {
  color: var(--c-text-muted);
  background: var(--c-surface-muted);
  cursor: default;
}

/* ==========================================================================
   Article typography (blog posts, legal pages, CMS rich text)
   ========================================================================== */

.prose {
  max-width: 47.5rem;
  color: var(--c-text-strong-body);
  font-size: 1.0625rem;
  line-height: var(--lh-article);
}

.prose > * + * {
  margin-top: 1.125rem;
}

.prose > p:first-child {
  font-size: 1.125rem;
  color: var(--c-navy-2);
}

.prose h2 {
  margin-top: 2.75rem;
  margin-bottom: -0.125rem;
  font-size: clamp(1.5rem, 1.32rem + 0.76vw, 1.875rem);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  line-height: 1.2;
}

.prose h3 {
  margin-top: var(--sp-8);
  font-size: 1.3125rem;
  color: var(--c-text);
}

.prose a {
  color: var(--c-red-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose strong {
  color: var(--c-text);
}

.prose ul,
.prose ol {
  padding-left: 1.375rem;
}

.prose li + li {
  margin-top: var(--sp-2);
}

.prose li::marker {
  color: var(--c-red);
}

.prose blockquote,
.pull-quote {
  margin-block: var(--sp-10);
  padding: var(--sp-7) var(--sp-8);
  border-radius: var(--r-3xl);
  background: var(--c-pink);
  color: var(--c-red-ink);
  font-size: clamp(1.1875rem, 1.12rem + 0.29vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.prose img {
  border-radius: var(--r-2xl);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--c-text);
}

/* Legal pages: slightly smaller, headings closer to text. */
.prose--legal {
  font-size: var(--fs-body);
}

.prose--legal > p:first-child {
  font-size: inherit;
  color: inherit;
}

.prose--legal h2 {
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
}

/* Checked list ("Security: ..."). */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
  padding: 0 !important;
}

.check-list li {
  display: flex;
  gap: 0.875rem;
  margin: 0 !important;
  padding: var(--sp-4) 1.125rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Templates render <svg class="icon"> from the sprite inside each item. */
.check-list li > .icon {
  margin-top: 0.15em;
  color: var(--c-red);
  stroke-width: 3;
}

/* CMS lists without the icon markup get the same check drawn with a CSS mask. */
.check-list li:not(:has(> .icon))::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  background: var(--c-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Callout ("Note: ..."). */
.callout {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-pink-border);
  border-radius: var(--r-xl);
  background: var(--c-pink);
  color: var(--c-red-ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.callout strong {
  color: var(--c-red-ink);
}

/* "On this page" / "Contents" box. */
.toc {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: 1.375rem;
}

.toc__title {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-red-dark);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
}

.toc__list {
  list-style: none;
  font-size: var(--fs-xs);
}

.toc__link {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--c-text-body);
}

.toc__link:hover,
.toc__link[aria-current="true"] {
  color: var(--c-text);
  font-weight: 600;
}

/* Two-column article layout with sidebar (stacks on mobile). */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10) var(--sp-14);
  align-items: flex-start;
}

.with-sidebar__aside {
  flex: 1 1 15rem;
  min-width: 0;
}

.with-sidebar__main {
  flex: 999 1 35rem;
  min-width: 0;
}

@media (min-width: 960px) {
  .with-sidebar__aside {
    flex: 0 0 15rem;
    position: sticky;
    top: 6.5rem;
  }
}

/* ==========================================================================
   Logo strip ("TRUSTED_BY")
   ========================================================================== */

.logo-strip {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border);
  padding-block: var(--sp-6);
}

.logo-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.125rem 2.5rem;
}

.logo-strip__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-text-muted);
  flex-basis: 100%;
}

@media (min-width: 960px) {
  .logo-strip {
    padding-block: var(--sp-7);
  }

  .logo-strip__label {
    flex-basis: auto;
    font-size: var(--fs-mono-sm);
  }
}

.logo-strip img {
  height: 28px;
  width: auto;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-12) 0 var(--sp-8);
}

@media (min-width: 960px) {
  .site-footer {
    padding-top: var(--sp-14);
  }
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
  justify-content: space-between;
}

.site-footer__brand {
  flex: 1 1 16.25rem;
  max-width: 20rem;
}

.site-footer__brand img {
  height: 24px;
  width: auto;
}

.site-footer__about {
  margin-top: var(--sp-4);
  color: var(--c-text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-14);
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: var(--sp-2);
}

.site-footer__list {
  list-style: none;
  font-size: var(--fs-xs);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text);
}

.site-footer__link:hover {
  color: var(--c-red-dark);
}

@media (min-width: 960px) {
  /* Desktop: mouse pointers, so the design's compact 32px rhythm (still above the 24px WCAG 2.2 minimum). */
  .site-footer__link {
    min-height: 2rem;
  }
}

.site-footer__icon {
  width: 1rem;
  height: 1rem;
  margin-right: var(--sp-2);
  color: var(--c-red-dark);
}

/* Icon-only link (LinkedIn): a 44 x 44 px target at every width, name from aria-label. */
.site-footer .site-footer__link--icon {
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  margin-left: -0.75rem; /* the icon lines up with the icons above */
  border-radius: var(--r-md);
}

.site-footer__link--icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.site-footer__link--icon:hover {
  background: var(--c-pink);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-1);
  list-style: none;
}

.site-footer__legal li + li::before {
  content: "\00B7";
  margin-right: var(--sp-1);
}

.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text-muted);
}

.site-footer__legal a:hover {
  color: var(--c-red-dark);
}

@media (min-width: 960px) {
  .site-footer__legal a {
    min-height: 1.5rem;
  }
}

/* ==========================================================================
   Mobile menu overlay (<dialog>, opened by main.js)
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--sp-4);
  border: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--c-navy);
  color: var(--c-text-on-dark);
  z-index: var(--z-menu);
}

.mobile-menu[open] {
  display: flex;
  flex-direction: column;
}

.mobile-menu::backdrop {
  background: var(--c-navy);
}

.mobile-menu__hex {
  position: absolute;
  right: -70px;
  bottom: 80px;
  width: 260px;
  height: 230px;
  clip-path: var(--hex-clip);
  background: var(--c-red);
  opacity: 0.9;
  pointer-events: none;
}

.mobile-menu__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem var(--sp-1) 0.375rem var(--sp-2);
}

.mobile-menu__top img {
  height: 22px;
  width: auto;
}

.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--c-navy-border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-on-dark);
  cursor: pointer;
}

.mobile-menu__close:hover {
  border-color: var(--c-text-on-dark-faint);
}

.mobile-menu__nav {
  position: relative;
  margin-top: var(--sp-7);
}

.mobile-menu__list {
  list-style: none;
}

.mobile-menu__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--tap);
  padding: 1.125rem var(--sp-2);
  border-bottom: 1px solid var(--c-navy-2);
  color: var(--c-text-on-dark);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
}

.mobile-menu__link:hover {
  color: var(--c-red-soft);
}

.mobile-menu__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-text-on-dark-faint);
}

.mobile-menu__link[aria-current="page"] .mobile-menu__num {
  color: var(--c-red-soft);
}

.mobile-menu__link[aria-current="page"] {
  color: var(--c-red-soft);
}

/* Services accordion: the link keeps going to /services/, the button opens the list. */
.mobile-menu__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--c-navy-2);
}

.mobile-menu__row .mobile-menu__link {
  flex: 1;
  border-bottom: 0;
}

.mobile-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.25rem;
  min-height: var(--tap);
  border: 0;
  border-left: 1px solid var(--c-navy-2);
  background: transparent;
  color: var(--c-text-on-dark);
  cursor: pointer;
}

.mobile-menu__toggle:hover {
  color: var(--c-red-soft);
}

.mobile-menu__item--accordion.is-open .mobile-menu__toggle .icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu__toggle .icon {
    transition: transform 0.16s ease;
  }
}

.mobile-menu__panel {
  display: none;
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--c-navy-2);
}

.mobile-menu__item--accordion.is-open .mobile-menu__panel {
  display: block;
}

/* The decorative hexagon would sit behind the long service list. */
.mobile-menu:has(.mobile-menu__item--accordion.is-open) .mobile-menu__hex {
  display: none;
}

.mobile-menu .service-groups__title {
  color: var(--c-red-soft);
}

.mobile-menu .service-groups__link {
  min-height: var(--tap);
  color: var(--c-text-on-dark);
  font-size: var(--fs-body);
}

.mobile-menu .service-groups__link:hover {
  color: var(--c-red-soft);
}

.mobile-menu__all a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text-on-dark);
  font-weight: 700;
}

.mobile-menu__all a:hover {
  color: var(--c-red-soft);
}

.mobile-menu__foot {
  position: relative;
  margin-top: auto;
  padding: var(--sp-10) 0 var(--sp-2);
}

.mobile-menu__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3.375rem;
  border-radius: 14px;
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 700;
}

.mobile-menu__cta:hover {
  background: var(--c-pink);
  color: var(--c-text);
}

.mobile-menu__contact {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-align: center;
  color: var(--c-border-2);
}

.mobile-menu__contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-border-2);
}

.mobile-menu__contact a:hover {
  color: var(--c-text-on-dark);
}

/* ==========================================================================
   "Trusted by" strip (home, between the hero and 01; admin preview), Phase 7H
   Two lines of client names, each a continuous right-to-left marquee in pure
   CSS (no JavaScript, no controls). Each line is a size container: a cell
   is 1/3 of its width from 640 px (1/2 on phones), so 3 (or 2) names show at a
   time. The track holds the set twice (the second aria-hidden) and moves by one
   set (-50%) in N x 7.5 s (.tb-line--nN, N = names in the set), i.e. one cell
   every 7.5 s on every line, so the half-cell stagger of the bottom line stays.
   The font shrinks so the longest name fits its cell (.tb-lines--fitN, N =
   characters of the longest name; about 0.62 em per character in Sora 600).
   ========================================================================== */

.trusted {
  padding-block: var(--sp-6);
  border-block: 1px solid var(--c-border);
  background: var(--c-surface);
}

.trusted__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
}

.trusted__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  color: var(--c-red-dark);
  text-transform: uppercase;
  white-space: nowrap;
}

.trusted__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-pink-border-strong);
}

.trusted__divider {
  display: none;
  align-self: stretch;
  width: 1px;
  background: var(--c-border);
}

.tb-lines {
  --tb-cells: 2;
  --tb-fit: 12;
  display: grid;
  row-gap: var(--sp-4);
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
  /* Soft edges where names enter and leave (decorative: the names themselves keep full contrast). */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

@media (min-width: 640px) {
  .trusted__inner { flex-wrap: nowrap; }
  .trusted__divider { display: block; }
  .tb-lines { --tb-cells: 3; flex-basis: 0; row-gap: var(--sp-5); }
}

.tb-line {
  container-type: inline-size;
  overflow: hidden;
}

.tb-line__track {
  display: flex;
  width: max-content;
}

.tb-line__set {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-line__cell {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(100cqw / var(--tb-cells));
  padding-inline: var(--sp-2);
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, calc(100cqw / var(--tb-cells) / (var(--tb-fit) * 0.62 + 1.2)), 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: #26344f; /* 11.6:1 on white */
  text-align: center;
  white-space: nowrap;
}

/* The bottom line starts half a cell further on: its names sit between the top line's names. */
.tb-line--bottom .tb-line__track {
  margin-inline-start: calc(100cqw / var(--tb-cells) / -2);
}

.tb-lines--single .tb-line--bottom .tb-line__track {
  margin-inline-start: 0;
}

@keyframes tb-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
  .tb-line__track {
    animation: tb-move 22.5s linear infinite;
  }
}

/* Constant speed: one cell every 7.5 s, whatever the number of names (sets of more than 24 use 180 s). */
.tb-line--n1 .tb-line__track { animation-duration: 7.5s; }
.tb-line--n2 .tb-line__track { animation-duration: 15s; }
.tb-line--n3 .tb-line__track { animation-duration: 22.5s; }
.tb-line--n4 .tb-line__track { animation-duration: 30s; }
.tb-line--n5 .tb-line__track { animation-duration: 37.5s; }
.tb-line--n6 .tb-line__track { animation-duration: 45s; }
.tb-line--n7 .tb-line__track { animation-duration: 52.5s; }
.tb-line--n8 .tb-line__track { animation-duration: 60s; }
.tb-line--n9 .tb-line__track { animation-duration: 67.5s; }
.tb-line--n10 .tb-line__track { animation-duration: 75s; }
.tb-line--n11 .tb-line__track { animation-duration: 82.5s; }
.tb-line--n12 .tb-line__track { animation-duration: 90s; }
.tb-line--n13 .tb-line__track { animation-duration: 97.5s; }
.tb-line--n14 .tb-line__track { animation-duration: 105s; }
.tb-line--n15 .tb-line__track { animation-duration: 112.5s; }
.tb-line--n16 .tb-line__track { animation-duration: 120s; }
.tb-line--n17 .tb-line__track { animation-duration: 127.5s; }
.tb-line--n18 .tb-line__track { animation-duration: 135s; }
.tb-line--n19 .tb-line__track { animation-duration: 142.5s; }
.tb-line--n20 .tb-line__track { animation-duration: 150s; }
.tb-line--n21 .tb-line__track { animation-duration: 157.5s; }
.tb-line--n22 .tb-line__track { animation-duration: 165s; }
.tb-line--n23 .tb-line__track { animation-duration: 172.5s; }
.tb-line--n24 .tb-line__track { animation-duration: 180s; }

/* Font fit: the longest name's length in characters. */
.tb-lines--fit1 { --tb-fit: 1; }
.tb-lines--fit2 { --tb-fit: 2; }
.tb-lines--fit3 { --tb-fit: 3; }
.tb-lines--fit4 { --tb-fit: 4; }
.tb-lines--fit5 { --tb-fit: 5; }
.tb-lines--fit6 { --tb-fit: 6; }
.tb-lines--fit7 { --tb-fit: 7; }
.tb-lines--fit8 { --tb-fit: 8; }
.tb-lines--fit9 { --tb-fit: 9; }
.tb-lines--fit10 { --tb-fit: 10; }
.tb-lines--fit11 { --tb-fit: 11; }
.tb-lines--fit12 { --tb-fit: 12; }
.tb-lines--fit13 { --tb-fit: 13; }
.tb-lines--fit14 { --tb-fit: 14; }
.tb-lines--fit15 { --tb-fit: 15; }
.tb-lines--fit16 { --tb-fit: 16; }
.tb-lines--fit17 { --tb-fit: 17; }
.tb-lines--fit18 { --tb-fit: 18; }
.tb-lines--fit19 { --tb-fit: 19; }
.tb-lines--fit20 { --tb-fit: 20; }
.tb-lines--fit21 { --tb-fit: 21; }
.tb-lines--fit22 { --tb-fit: 22; }
.tb-lines--fit23 { --tb-fit: 23; }
.tb-lines--fit24 { --tb-fit: 24; }
.tb-lines--fit25 { --tb-fit: 25; }
.tb-lines--fit26 { --tb-fit: 26; }
.tb-lines--fit27 { --tb-fit: 27; }
.tb-lines--fit28 { --tb-fit: 28; }
.tb-lines--fit29 { --tb-fit: 29; }
.tb-lines--fit30 { --tb-fit: 30; }

/* Reduced motion: no movement; each line shows its first 3 (2 on phones) names, centred, no copy. */
@media (prefers-reduced-motion: reduce) {
  .tb-lines { -webkit-mask-image: none; mask-image: none; }
  .tb-line__track { width: auto; justify-content: center; }
  .tb-line--bottom .tb-line__track { margin-inline-start: 0; }
  .tb-line__set--copy,
  .tb-line__cell--repeat { display: none; }
  .tb-line__cell:nth-child(n + 3) { display: none; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 640px) {
  /* Not a repeat: a line with only 1 or 2 names must not show a name twice. */
  .tb-line__cell:not(.tb-line__cell--repeat):nth-child(3) { display: block; }
}

/* ==========================================================================
   Cookie choice for Google Analytics (Phase 10): partials/consent-banner, assets/js/consent.js.
   Fixed to the bottom of the window, so showing or hiding it never moves the page (no layout
   shift). Accept and Decline share one style (equal prominence). Shown only while analytics is on.
   ========================================================================== */
.consent {
  position: fixed;
  inset: auto var(--sp-3) var(--sp-3) var(--sp-3);
  z-index: calc(var(--z-header) + 10);
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--sp-5);
  border: 1px solid var(--c-navy-border);
  border-radius: var(--r-xl);
  background: var(--c-navy);
  color: var(--c-text-on-dark);
  box-shadow: var(--sh-float);
}

.consent[hidden] {
  display: none;
}

.consent__title {
  margin: 0 0 var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-body);
}

.consent__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-text-on-dark-muted);
}

.consent__text a {
  color: var(--c-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.consent__btn {
  flex: 1 1 8rem;
  min-height: var(--tap);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--c-text-on-dark);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-navy);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.consent__btn:hover {
  background: var(--c-surface-muted);
}

.consent :focus-visible {
  outline-color: var(--c-focus-on-dark);
}

/* "Cookie settings" in the footer's legal list: looks like the links next to it. */
.site-footer__consent {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text-muted);
  font: inherit;
  cursor: pointer;
}

.site-footer__consent:hover {
  color: var(--c-red-dark);
}

.site-footer__legal [hidden] {
  display: none;
}

@media (min-width: 960px) {
  .site-footer__consent {
    min-height: 1.5rem;
  }
}