/* ==========================================================================
   AGeqnies - Components
   Header, hero, section modules, XOctave mockup, forms, footer.
   Depends on: tokens.css, base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Site header
   Full-bleed frosted bar from the galaxy hero template: translucent near-black
   glass, 8px blur, square corners. The bar is the full-width element and owns
   the background; .site-header__inner is the centred content row.

   Sibling-dim on the nav links is the other thing taken from that template:
   hovering one item drops the rest to grey so the active word is the only
   bright one. Dropdowns are the same glass, not a white card.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(13, 13, 24, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: height var(--dur-slow) var(--ease-out),
    background var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.site-header.is-scrolled {
  height: var(--header-h-compact);
  background: rgba(13, 13, 24, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.site-header.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

.site-header.is-hidden:focus-within {
  transform: none;
  pointer-events: auto;
}

.site-header__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-left: calc(var(--gutter) + 1rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--sp-6);
}

/* Brand lockup: the AG mark with the name stacked beneath it. The name is
   live type rather than part of the artwork, so it can be held back and
   revealed in white on hover.

   The supplied logo is drawn for white backgrounds - every shape is ringed by
   a solid white outline that fades into a white glow, which reads as grey fog
   on this always-dark header. public/brand/agq-mark-dark.png is the same mark
   with that white halo removed; see ASSET-MANIFEST.md.

   On hover the mark shrinks and lifts, and the name settles into the space it
   vacates. The block holds a fixed height and the mark moves by transform
   only, so nothing in this animation can reflow the nav beside it. */
.brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  justify-self: start;
  height: 52px;
  color: var(--white);
  transition: height var(--dur-slow) var(--ease-out);
}

.is-scrolled .brand {
  height: 46px;
}

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

/* Height carries the scroll state, transform carries the hover state, so the
   two compose instead of overwriting each other. */
.brand__mark {
  width: auto;
  height: 38px;
  transition: height var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.is-scrolled .brand__mark {
  height: 33px;
}

.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  transform: translateY(-0.4375rem) scale(0.76);
}

/* Taken out of flow so its own size never enters the header's layout, which
   is what lets it be set at a readable size rather than a size that has to
   fit alongside the mark. */
.brand__word {
  position: absolute;
  left: 50%;
  bottom: 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0.375rem) scale(0.86);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.brand:hover .brand__word,
.brand:focus-visible .brand__word {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Touch devices never fire hover, so they get the resolved state outright */
@media (hover: none) {
  .brand__mark {
    transform: translateY(-0.4375rem) scale(0.76);
  }

  .brand__word {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Shorten rather than remove: these transforms position the lockup, so
   dropping them would leave the name off-centre and over the mark. */
@media (prefers-reduced-motion: reduce) {
  .brand,
  .brand__mark,
  .brand__word {
    transition-duration: 1ms;
  }
}

/* --- Desktop navigation --- */

.nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0.25rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0.75rem;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: #d1d5db;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}

/* Sibling-dim: any hover inside the nav greys every link, then the hovered
   (or focused) item is painted back to white. Matches the galaxy template. */
.nav:hover .nav__link,
.nav:focus-within .nav__link {
  color: #6b7280;
}

.nav__link:hover,
.nav__item:focus-within > .nav__link,
.nav:hover .nav__item:hover > .nav__link,
.nav:focus-within .nav__item:focus-within > .nav__link {
  color: var(--white);
}

.nav__link[aria-current="page"] {
  color: var(--white);
}

.nav__caret {
  width: 11px;
  height: 11px;
  flex: none;
  opacity: 0.75;
  transition: transform var(--dur) var(--ease-out);
}

.nav__item.is-open .nav__caret,
.nav__item:hover .nav__caret {
  transform: rotate(180deg);
}

/* Dropdown panel - same glass as the bar, not a white card */
.nav__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 264px;
  padding: var(--sp-2);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out), visibility var(--dur) linear;
}

.nav__item:last-child > .nav__panel {
  left: auto;
  right: 0;
}

.nav__item.is-open > .nav__panel,
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__panel-link {
  display: block;
  padding: 0.625rem var(--sp-4);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #d1d5db;
  transition: background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.nav__panel-link span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: #9ca3af;
}

.nav__panel-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.nav__panel-link:hover span {
  color: #d1d5db;
}

/* Sliding-icon pill for Contact. Port of the 21st.dev button-with-icon:
   circle sits on the right, then travels to the left and rotates 45° on
   hover. Padding swaps so the label keeps a seat. */
.header__cta {
  --cta-pad: 3px;
  --cta-icon: 36px;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  justify-self: end;
  height: 42px;
  padding: var(--cta-pad) calc(var(--cta-icon) + 10px) var(--cta-pad) 1.2rem;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(94, 205, 207, 0.5) 0%,
      rgba(23, 162, 166, 0.28) 52%,
      rgba(13, 113, 117, 0.18) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 22px -14px rgba(23, 162, 166, 0.4);
  transition:
    padding 0.5s var(--ease-out),
    background 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}

.header__cta:hover {
  padding-left: calc(var(--cta-icon) + 10px);
  padding-right: 1.2rem;
  background:
    linear-gradient(
      135deg,
      rgba(94, 205, 207, 0.68) 0%,
      rgba(53, 184, 187, 0.4) 52%,
      rgba(23, 162, 166, 0.26) 100%
    );
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 26px -12px rgba(53, 184, 187, 0.5);
}

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

.header__cta-label {
  position: relative;
  z-index: 1;
  transition: transform 0.5s var(--ease-out);
}

.header__cta-icon {
  position: absolute;
  top: var(--cta-pad);
  right: var(--cta-pad);
  z-index: 2;
  width: var(--cta-icon);
  height: var(--cta-icon);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  transition:
    right 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.header__cta-icon svg {
  width: 16px;
  height: 16px;
}

.header__cta:hover .header__cta-icon {
  right: calc(100% - var(--cta-icon) - var(--cta-pad));
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .header__cta,
  .header__cta-label,
  .header__cta-icon {
    transition: background 0.01ms linear, border-color 0.01ms linear, color 0.01ms linear;
  }

  .header__cta:hover {
    padding-left: 1.2rem;
    padding-right: calc(var(--cta-icon) + 10px);
  }

  .header__cta:hover .header__cta-icon {
    right: var(--cta-pad);
    transform: none;
  }
}

/* --- Mobile menu toggle --- */

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--d-border-strong);
  color: var(--white);
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-toggle__bars {
  position: relative;
  width: 19px;
  height: 13px;
}

.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 5.5px; }
.menu-toggle__bars span:nth-child(3) { top: 11px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Already on the contact page — the pill would only loop you here. */
.page-contact .header__cta,
.page-contact .mobile-menu__contact {
  display: none;
}

@media (max-width: 1080px) {
  :root {
    --header-h: 56px;
    --header-h-compact: 52px;
  }

  .site-header__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    padding-inline: 1.15rem;
    padding-left: 1.15rem;
  }

  .site-header .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
  }

  .site-header.is-scrolled .brand {
    height: 36px;
  }

  .site-header .brand__word {
    opacity: 0;
    visibility: hidden;
  }

  .site-header .brand__mark,
  .site-header .brand:hover .brand__mark,
  .site-header .brand:focus-visible .brand__mark {
    transform: none;
    height: 30px;
  }

  .site-header.is-scrolled .brand__mark {
    height: 28px;
  }

  .nav,
  .header__cta {
    display: none;
  }

  .menu-toggle {
    display: grid;
    width: 40px;
    height: 40px;
  }

  .mobile-menu .brand__word {
    opacity: 0;
    visibility: hidden;
  }

  .mobile-menu .brand__mark {
    transform: none;
  }
}

/* --- Mobile sheet menu --- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--navy-950);
  color: var(--d-text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow) linear;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  min-height: var(--header-h);
  border-bottom: 1px solid var(--d-border);
}

.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--d-border-strong);
  color: var(--white);
}

.mobile-menu__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-menu__close svg {
  width: 19px;
  height: 19px;
}

.mobile-menu__body {
  padding: var(--sp-5) var(--gutter) var(--sp-9);
}

.m-nav__row {
  border-bottom: 1px solid var(--d-border);
}

.m-nav__link,
.m-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 1.125rem 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--d-text-strong);
  text-align: left;
}

.m-nav__link:hover,
.m-nav__trigger:hover {
  color: var(--teal-300);
}

.m-nav__trigger svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--teal-300);
  transition: transform var(--dur) var(--ease-out);
}

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

.m-nav__panel {
  display: grid;
  overflow: hidden;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.m-nav__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.m-nav__panel > div {
  min-height: 0;
  overflow: hidden;
}

.m-nav__sub {
  padding-bottom: var(--sp-5);
  display: grid;
  gap: 2px;
}

.m-nav__sub a {
  display: block;
  padding: 0.6875rem var(--sp-4);
  border-left: 2px solid var(--d-border);
  font-size: var(--fs-sm);
  color: var(--d-text);
}

.m-nav__sub a:hover {
  border-left-color: var(--teal-500);
  color: var(--teal-200);
  background: var(--d-surface);
}

.mobile-menu__foot {
  margin-top: var(--sp-7);
  display: grid;
  gap: var(--sp-4);
}

.mobile-menu__meta {
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--d-text-muted);
  line-height: var(--lh-relaxed);
}

@media (min-width: 1081px) {
  .mobile-menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

/* Full-viewport galaxy scene (Spline) behind the existing AGeqnies copy.
   The 21st.dev React block is adapted here: same scene URL, same dual
   gradient veil, same left-aligned overlay. The screenshot strip and
   placeholder "other content" from that demo are not used - the rest of
   this page already is the content below.

   The near-black ground is the fallback while the 3D runtime loads, and
   the only surface a reduced-motion visitor ever sees. */
.hero {
  position: relative;
  background: #000000;
  color: var(--ed-text);
  min-height: 100vh;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 6rem));
  padding-bottom: clamp(3.25rem, 4vh + 1.5rem, 5.5rem);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__woven {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  touch-action: none;
  opacity: 0.5;
  background: #000;
}

.hero__woven canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Even scrim: copy now sits in both columns, so a left-only fade would
   leave the aside unreadable over the wash. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.08) 42%,
      rgba(0, 0, 0, 0.04) 100%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.22) 0%, transparent 38%);
}

.hero__frame {
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .hero__woven {
    background:
      radial-gradient(ellipse 55% 50% at 68% 46%, rgba(23, 162, 166, 0.28) 0%, transparent 62%),
      radial-gradient(ellipse 40% 42% at 42% 58%, rgba(126, 223, 226, 0.12) 0%, transparent 55%),
      #000;
  }

  .hero__lockup,
  .hero__aside {
    opacity: 1;
    transform: none;
  }

  .hero__line--b {
    transform: translateX(var(--hero-shift));
  }
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(2.75rem, 2rem + 2.2vw, 4.25rem);
  width: 100%;
  margin-top: -7vh;
  pointer-events: none;
}

.hero__inner a,
.hero__inner .btn {
  pointer-events: auto;
}

/* Two-line lockup. Default (no JS / reduced motion) is the composed
   layout. `.js-hero` hides both columns until site.js adds `.is-lockup`
   then `.is-aside`. */
.hero__lockup {
  --hero-shift: 1.35em;
  flex: none;
  margin: 0;
  padding-top: calc(2px + 1.05rem);
  padding-right: calc(var(--hero-shift) + 0.5rem);
  font-size: clamp(1.55rem, 0.55rem + 2.8vw, 3.15rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--white);
}

.hero__line {
  display: block;
  white-space: nowrap;
}

.hero__line--a {
  margin-bottom: 0.42em;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
}

.hero__line--b {
  display: inline-block;
  color: #7ed4d6;
  background-image: linear-gradient(
    90deg,
    #c8f3f3 0%,
    #7edfe2 42%,
    #35b8bb 78%,
    #17a2a6 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateX(var(--hero-shift));
}

.hero__aside {
  position: relative;
  z-index: 1;
  flex: 0 1 26rem;
  min-width: 0;
  max-width: 26rem;
}

.hero__aside::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  margin-bottom: 1.05rem;
  background: var(--ed-accent);
}

.js-hero .hero__lockup {
  opacity: 0;
  transform: translate3d(0, 0.9rem, 0);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
}

.js-hero .hero__line--b {
  transform: translateX(0);
  transition: transform 0.5s var(--ease-out);
}

.js-hero .hero__aside {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.js-hero .hero.is-lockup .hero__lockup {
  opacity: 1;
  transform: none;
}

.js-hero .hero.is-shift .hero__line--b {
  transform: translateX(var(--hero-shift));
}

.js-hero .hero.is-aside .hero__aside {
  opacity: 1;
  transform: none;
}

.hero__lede {
  margin: 0;
  font-size: clamp(1.2rem, 1.05rem + 0.65vw, 1.65rem);
  font-weight: var(--fw-display);
  line-height: 1.18;
  letter-spacing: var(--ls-heading);
  color: var(--white);
}

.hero__sub {
  margin-top: 0.85rem;
  max-width: none;
  font-size: clamp(0.95rem, 0.9rem + 0.22vw, 1.0625rem);
  line-height: 1.55;
  color: var(--ed-text);
}

.hero__go {
  --go-grad: linear-gradient(
    90deg,
    rgba(18, 224, 214, 0.62) 0%,
    rgba(23, 162, 166, 0.5) 46%,
    rgba(56, 176, 196, 0.38) 72%,
    rgba(110, 130, 220, 0.28) 90%,
    rgba(140, 108, 214, 0.22) 100%
  );
  --go-pad: -0.5rem -0.45rem -0.5rem -1.2rem;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  line-height: 1;
  text-decoration: none;
}

.hero__go::before,
.hero__go::after {
  content: "";
  position: absolute;
  inset: var(--go-pad);
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
}

.hero__go::before {
  background: var(--go-grad);
  border: 1px solid transparent;
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0;
  transition:
    transform 0.6s var(--ease-out),
    opacity 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.hero__go::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}

.hero__go span,
.hero__go-mark {
  position: relative;
  z-index: 1;
}

.hero__go-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  background: var(--ed-accent);
  color: var(--white);
  transition: background 0.4s var(--ease-out);
}

.hero__go-mark svg {
  width: 0.85rem;
  height: 0.85rem;
}

.hero__go:hover,
.hero__go:focus-visible {
  color: var(--white);
}

.hero__go:hover::before,
.hero__go:focus-visible::before {
  transform: scaleX(1);
  opacity: 1;
  border-color: rgba(180, 245, 242, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 28px rgba(23, 162, 166, 0.16);
}

.hero__go:hover::after,
.hero__go:focus-visible::after {
  opacity: 1;
}

.hero__go:hover .hero__go-mark,
.hero__go:focus-visible .hero__go-mark {
  background: transparent;
}

.hero__go:focus-visible {
  outline: none;
}

.hero__go:focus-visible::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 3px rgba(23, 162, 166, 0.35);
}

.hero__go:focus-visible .hero__go-mark {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__go::before {
    transform: none;
    opacity: 0;
    transition: opacity 0.01ms;
  }

  .hero__go:hover::before,
  .hero__go:focus-visible::before {
    opacity: 1;
  }
}

.btn-row .hero__go {
  margin-top: 0;
}

.section--ink a.hero__go,
.section--ink-2 a.hero__go,
.on-dark a.hero__go,
.section--ink a.hero__go:hover,
.section--ink a.hero__go:focus-visible,
.section--ink-2 a.hero__go:hover,
.section--ink-2 a.hero__go:focus-visible,
.on-dark a.hero__go:hover,
.on-dark a.hero__go:focus-visible {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.section--tint .hero__go,
.section--paper .hero__go,
.section--mist .hero__go,
.section--soft .hero__go {
  --go-grad: linear-gradient(
    90deg,
    #0b5f63 0%,
    #0a4e56 40%,
    #142e48 68%,
    #2c2a6a 88%,
    #3d2460 100%
  );
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.section--tint .hero__go::before,
.section--paper .hero__go::before,
.section--mist .hero__go::before,
.section--soft .hero__go::before {
  transform: scaleX(1);
  opacity: 1;
  border-color: rgba(190, 236, 234, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 22px rgba(12, 80, 86, 0.24);
}

.section--tint .hero__go::after,
.section--paper .hero__go::after,
.section--mist .hero__go::after,
.section--soft .hero__go::after {
  opacity: 0.55;
}

.section--tint .hero__go .hero__go-mark,
.section--paper .hero__go .hero__go-mark,
.section--mist .hero__go .hero__go-mark,
.section--soft .hero__go .hero__go-mark {
  background: transparent;
}

.section--tint .hero__go:hover,
.section--tint .hero__go:focus-visible,
.section--paper .hero__go:hover,
.section--paper .hero__go:focus-visible,
.section--mist .hero__go:hover,
.section--mist .hero__go:focus-visible,
.section--soft .hero__go:hover,
.section--soft .hero__go:focus-visible {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.section--tint .hero__go:hover::before,
.section--tint .hero__go:focus-visible::before,
.section--paper .hero__go:hover::before,
.section--paper .hero__go:focus-visible::before,
.section--mist .hero__go:hover::before,
.section--mist .hero__go:focus-visible::before,
.section--soft .hero__go:hover::before,
.section--soft .hero__go:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
  border-color: rgba(210, 245, 242, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 28px rgba(12, 80, 86, 0.32);
}

.section--tint .hero__go:hover::after,
.section--tint .hero__go:focus-visible::after,
.section--paper .hero__go:hover::after,
.section--paper .hero__go:focus-visible::after,
.section--mist .hero__go:hover::after,
.section--mist .hero__go:focus-visible::after,
.section--soft .hero__go:hover::after,
.section--soft .hero__go:focus-visible::after {
  opacity: 1;
}

.section--tint .hero__go:hover .hero__go-mark,
.section--tint .hero__go:focus-visible .hero__go-mark,
.section--paper .hero__go:hover .hero__go-mark,
.section--paper .hero__go:focus-visible .hero__go-mark,
.section--mist .hero__go:hover .hero__go-mark,
.section--mist .hero__go:focus-visible .hero__go-mark,
.section--soft .hero__go:hover .hero__go-mark,
.section--soft .hero__go:focus-visible .hero__go-mark {
  background: transparent;
}

.section--tint .hero__go:focus-visible::before,
.section--paper .hero__go:focus-visible::before,
.section--mist .hero__go:focus-visible::before,
.section--soft .hero__go:focus-visible::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 3px rgba(13, 113, 117, 0.38);
}

@media (max-width: 1080px) {
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    justify-content: center;
    padding-top: calc(var(--header-h) + 1.25rem);
    padding-bottom: 3.25rem;
  }

  .hero__woven {
    inset: auto;
    top: 52%;
    left: 50%;
    width: min(28.5rem, 94vw);
    height: min(32rem, 62svh);
    transform: translate(-50%, -52%);
    opacity: 0.46;
  }

  .hero__veil {
    background:
      linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.42) 34%,
        rgba(0, 0, 0, 0.12) 68%,
        rgba(0, 0, 0, 0.2) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.38) 0%,
        transparent 32%,
        rgba(0, 0, 0, 0.46) 100%
      );
  }

  .hero__frame {
    inset: 0;
    border-color: rgba(255, 255, 255, 0.06);
  }

  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 2.35rem;
    width: 100%;
    margin-top: 0;
    margin-inline: 0;
    padding-right: 1.15rem;
  }

  .hero__lockup {
    --hero-shift: 1.05em;
    padding-top: 0;
    padding-right: calc(var(--hero-shift) + 0.35rem);
    font-size: clamp(1.32rem, 0.72rem + 4vw, 1.62rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }

  .hero__line {
    white-space: nowrap;
  }

  .hero__line--a {
    margin-bottom: 0.28em;
  }

  .hero__line--b {
    display: inline-block;
  }

  .hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 20.5rem;
    flex-basis: auto;
  }

  .hero__aside::before {
    width: 1.75rem;
    margin: 0 0 1.15rem;
  }

  .hero__lede {
    font-size: clamp(1.05rem, 0.92rem + 1.1vw, 1.2rem);
    line-height: 1.28;
    max-width: 18.5rem;
  }

  .hero__sub {
    margin-top: 0.7rem;
    max-width: 36ch;
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  .hero__go {
    justify-content: flex-start;
    margin-top: 1.65rem;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-top: calc(var(--header-h) + 0.85rem);
    padding-bottom: 2.75rem;
  }

  .hero__woven {
    width: min(26rem, 96vw);
    height: min(30rem, 58svh);
  }

  .hero__inner {
    gap: 2rem;
  }
}

@media (max-width: 380px) {
  .hero__lockup {
    --hero-shift: 0.85em;
    font-size: 1.26rem;
  }
}

/* --------------------------------------------------------------------------
   4. Logo marquee
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 9%,
    #000 91%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 9%,
    #000 91%,
    transparent
  );
}

/* The gap carries the whole separation job now that the plates have no border,
   so it is much wider than a boxed strip would need. */
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 1.4rem + 2vw, 4rem);
  animation: marquee-slide var(--marquee-dur, 46s) linear infinite;
}

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

.marquee__item {
  flex: none;
}

/* Reduced motion / no-JS: stop the loop and wrap the logos into rows */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  /* The duplicated half exists only to make the loop seamless */
  .marquee__track [data-marquee-clone] {
    display: none;
  }
  /* A long list wrapping into rows would otherwise dominate the section, so
     the plates shrink. Short lists (client strip) keep their full size. */
  .marquee:not(.marquee--static) .logo-plate {
    height: 62px;
    min-width: 170px;
  }
  .marquee:not(.marquee--static) .logo-plate img {
    max-width: 146px;
    max-height: 44px;
  }
  .marquee:not(.marquee--static) .logo-plate img[data-ratio="square"] {
    max-height: 54px;
  }
  .marquee:not(.marquee--static) .logo-plate__text {
    font-size: var(--fs-sm);
  }
}

/* Logo plate - an invisible sizing frame, not a card.

   Deliberately no background, border or shadow. The logos read as a set
   because they share one optical size box, not because they sit in matching
   white boxes: boxed logos look like a compliance table, and every box edge
   competes with the mark inside it. The frame still exists so that a 4:1
   wordmark and a square mark occupy the same footprint in the row. */
.logo-plate {
  display: grid;
  place-items: center;
  height: 72px;
  min-width: 200px;
  padding: 0 var(--sp-2);
}

/* Supplied logos vary enormously: square marks, 4:1 wordmarks, some with
   generous built-in padding. Constraining BOTH axes inside a fixed content box
   is what makes them read as a set. A wide wordmark is limited by width, a
   square mark by height, and neither can dominate.

   The supplied files are trimmed of their transparent padding (see
   ASSET-MANIFEST.md), so the mark itself fills the frame and a single size box
   produces consistent optical weight. Logos are shown in full colour: this is
   a credibility wall, and a washed-out logo undermines the brand it names. */
.logo-plate img {
  width: auto;
  height: auto;
  max-width: 182px;
  max-height: 54px;
  object-fit: contain;
}

/* A square mark at the same height as a wordmark reads lighter, so it gets a
   little more. A very wide wordmark gets a little less so it does not stretch
   edge to edge. Both hooks are set by site.js from the natural dimensions. */
.logo-plate img[data-ratio="square"] {
  max-height: 66px;
}

.logo-plate img[data-ratio="wide"] {
  max-height: 42px;
  max-width: 192px;
}

/* A brand whose only published mark comes on its own coloured tile, set from
   content.js. Rounding the tile makes it read as an intended badge rather than
   a rectangle someone forgot to cut out, and it is held slightly smaller than a
   transparent mark of the same shape because a filled block reads heavier.
   Declared after the ratio rules so it wins at equal specificity. */
.logo-plate img[data-bg="own"] {
  max-height: 56px;
  border-radius: 8px;
}

/* Text fallback shown when no logo file is supplied yet. With no plate behind
   it, it has to hold the row on typography alone, so it is set at the optical
   weight of the logos beside it rather than as small print. */
.logo-plate__text {
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
  color: var(--navy-700);
  text-align: center;
}

.logo-plate--dark .logo-plate__text {
  color: var(--d-text);
}

/* --------------------------------------------------------------------------
   5. Capability features - parallax scroll (homepage)

   Vanilla port of the Framer Motion feature section: one viewport-tall row
   per service, alternating sides. Copy translates up into place; the square
   photograph wipes in with clip-path + opacity. `--cap-wipe` and `--cap-y`
   are driven from site.js. Without JS, or with reduced motion, both sit at 1
   so the composed layout is what you get.
   -------------------------------------------------------------------------- */

/* Flat --ed-bg, no wash. This carried two teal radial gradients, which read as
   a green cast down the left of the section rather than as light. Left as the
   same flat black every other .section--ink uses, so the row of photographs is
   the only colour in the band.

   --ed-bg, not #000: a true black flattens photography and makes white type
   vibrate against it. See the note on the editorial palette in tokens.css. */
.section.section--ink.caps {
  overflow: clip;
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background: var(--ed-bg);
}

.caps__list {
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 10vw, 9rem);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: clamp(2rem, 1rem + 3vw, 4rem);
}

.cap {
  --cap-wipe: 1;
  --cap-y: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 4.5rem);
  padding-block: clamp(2rem, 4.5vh, 4rem);
}

.js-caps .cap {
  --cap-wipe: 0;
  --cap-y: 0;
}

.cap--media-lead {
  flex-direction: row-reverse;
}

.cap__copy {
  max-width: 34rem;
  transform: translate3d(0, calc((1 - var(--cap-y)) * -50px), 0);
  will-change: transform;
}

.cap__frame {
  position: relative;
  flex: none;
  width: min(28rem, 42%);
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ed-bg-2);
  opacity: var(--cap-wipe);
  clip-path: inset(0 calc((1 - var(--cap-wipe)) * 100%) 0 0);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 22px 48px rgba(0, 0, 0, 0.36);
  will-change: clip-path, opacity;
}

/* Image on the left wipes toward the copy, not away from it. */
.cap--media-lead .cap__frame {
  clip-path: inset(0 0 0 calc((1 - var(--cap-wipe)) * 100%));
}

.cap__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The stills were graded hot; this pulls the crunch back without the
     old grayscale crush that made the section look gloomy. */
  filter: contrast(0.82) saturate(0.88) brightness(1.06);
}

.cap__frame--vivid img {
  filter: contrast(1.04) saturate(1.12) brightness(1.02);
}

.cap__frame--natural img {
  filter: none;
}

.cap__num {
  font-size: clamp(1.875rem, 1.37rem + 2.02vw, 3rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  /* Compositional, not informational - the service name below it is what the
     reader needs. At full strength a 60px numeral outranks the headline. */
  color: rgba(255, 255, 255, 0.28);
}

.cap__copy .eyebrow {
  margin-top: var(--sp-5);
}

.cap__title {
  margin-top: var(--sp-5);
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--white);
  max-width: 16ch;
}

.cap__lede {
  margin-top: var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ed-text);
}

/* Three, never four. The list is the shortest honest answer to "what does this
   include", and the solution page behind the link carries the full scope. */
.cap__points {
  margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--ed-line-soft);
}

.cap__points li {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--ed-line-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ed-text);
}

/* A square, not a disc or a tick. One of the two places teal appears in this
   section, and the smallest mark that still registers as deliberate. */
.cap__points li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.62em;
  background: var(--ed-accent);
}

.cap__copy .link-arrow {
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

@media (max-width: 899px) {
  .cap,
  .cap--media-lead {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding-block: clamp(4.5rem, 12vw, 7.5rem);
    gap: 0;
  }

  .cap__copy {
    display: contents;
    max-width: none;
    transform: none;
  }

  /* With .cap__copy dropped to display:contents the eyebrow becomes a flex
     item of .cap, and the column's align-items:stretch pulls the pill across
     the full width. Opt it out so it keeps its own width, ranged left with
     the number and headline above and below it. */
  .cap__copy .eyebrow {
    align-self: flex-start;
  }

  .cap__frame,
  .cap--media-lead .cap__frame {
    order: 1;
    width: min(28rem, 100%);
    margin-top: 1.25rem;
    clip-path: inset(0 calc((1 - var(--cap-wipe)) * 100%) 0 0);
  }

  .cap__lede,
  .cap__points,
  .cap__copy .link-arrow {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cap {
    --cap-wipe: 1 !important;
    --cap-y: 1 !important;
  }

  .cap__copy,
  .cap__frame {
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   6. Stage line - the Turnkey four-stage model

   Formerly four dotted step boxes, then one centred line of display type.
   Ranged left now, because the section around it is a left-aligned split
   rather than a centred stack, and a centred line inside a left-aligned
   column reads as a mistake rather than as emphasis.

   The slashes are the only ornament and they are hidden from assistive tech,
   so it reads as four plain words.
   -------------------------------------------------------------------------- */

.stage-line {
  font-size: clamp(1.3125rem, 1.06rem + 1.01vw, 1.875rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--white);
  text-wrap: balance;
}

.stage-line span {
  margin: 0 0.3em;
  color: var(--ed-accent);
}

.section--paper .stage-line {
  color: var(--ed-bg-2);
}

/* --------------------------------------------------------------------------
   7. Outcome section

   .outcome-grid / .outcome-tile / .icon-frame are not used by the homepage -
   the business case there is the statement and the stat band, nothing else -
   but they are still live on turnkey.html and the solution pages, so the
   rules stay.
   -------------------------------------------------------------------------- */

.outcome-statement {
  font-size: var(--fs-display-2);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  max-width: 26ch;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.outcome-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.outcome-tile:hover {
  border-color: var(--teal-300);
  transform: translateY(-3px);
  box-shadow: var(--sh-sm);
}

.outcome-tile__title {
  font-size: var(--fs-h4);
}

.outcome-tile__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

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

@media (max-width: 600px) {
  .outcome-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   8. Turnkey route - four-stage model

   Not a timeline. Stages cascade toward a right-hand datum so the sequence
   reads as a route being travelled, not as four equal stops on a line.
   Advisory is the charcoal origin (it is where every engagement starts);
   the rest sit on paper and step in toward the spine.
   -------------------------------------------------------------------------- */

.route-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

.route-head .eyebrow {
  margin-bottom: var(--sp-5);
}

.route-head .display-3 {
  max-width: 18ch;
}

.route-head__lede {
  max-width: 42ch;
  margin: 0;
}

.route {
  --route-rail: 1.65rem;
  position: relative;
  padding-right: var(--route-rail);
}

.route__spine {
  position: absolute;
  top: 0.85rem;
  bottom: 0.85rem;
  right: 0;
  width: 1px;
  background: var(--teal-200);
  overflow: hidden;
  pointer-events: none;
}

.route__spine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal-600);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.35s var(--ease-out);
}

.route.is-in .route__spine::after {
  transform: scaleY(1);
}

.route__list {
  display: flex;
  flex-direction: column;
}

.route__stage {
  --route-inset: 0%;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5) var(--sp-6);
  margin-left: var(--route-inset);
  padding: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem)
    clamp(1.25rem, 0.85rem + 1.6vw, 2.25rem);
  background: var(--surface);
  border: 1px solid rgba(6, 15, 25, 0.06);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.route__stage + .route__stage {
  margin-top: -0.55rem;
}

.route__stage:nth-child(1) { --route-inset: 0%; z-index: 1; }
.route__stage:nth-child(2) { --route-inset: 5.5%; z-index: 2; }
.route__stage:nth-child(3) { --route-inset: 11%; z-index: 3; }
.route__stage:nth-child(4) { --route-inset: 16.5%; z-index: 4; }

/* Short dock from each stage to the destination spine. */
.route__stage::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--route-rail));
  width: var(--route-rail);
  height: 1px;
  background: var(--teal-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-out);
}

.route.is-in .route__stage::after {
  transform: scaleX(1);
}

.route.is-in .route__stage:nth-child(1)::after { transition-delay: 80ms; }
.route.is-in .route__stage:nth-child(2)::after { transition-delay: 200ms; }
.route.is-in .route__stage:nth-child(3)::after { transition-delay: 320ms; }
.route.is-in .route__stage:nth-child(4)::after { transition-delay: 440ms; }

.route__stage:hover,
.route__stage:focus-within {
  z-index: 5;
  transform: translateX(4px);
  box-shadow: var(--sh-md);
  border-color: var(--teal-200);
}

.route__stage--origin {
  background: var(--ed-charcoal);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--teal-400), var(--sh-md), var(--sh-inset-dark);
}

.route__stage--origin:hover,
.route__stage--origin:focus-within {
  border-color: rgba(95, 205, 207, 0.28);
  box-shadow: inset 3px 0 0 var(--teal-300), var(--sh-lg), var(--sh-inset-dark);
}

.route__index {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease-out);
}

.route__stage:hover .route__index,
.route__stage:focus-within .route__index {
  color: var(--teal-600);
}

.route__stage--origin .route__index {
  color: var(--teal-300);
}

.route__stage--origin:hover .route__index,
.route__stage--origin:focus-within .route__index {
  color: var(--teal-200);
}

.route__copy {
  display: grid;
  grid-template-columns: minmax(10rem, 16.5rem) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-6);
  align-items: baseline;
}

.route__name {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
}

.route__stage--origin .route__name {
  color: var(--white);
}

.route__body {
  margin: 0;
  max-width: 38ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.route__stage--origin .route__body {
  color: var(--ed-text);
}

.js-reveal .route__list.reveal-group.is-in > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal .route__list.reveal-group.is-in > *:nth-child(2) { transition-delay: 120ms; }
.js-reveal .route__list.reveal-group.is-in > *:nth-child(3) { transition-delay: 240ms; }
.js-reveal .route__list.reveal-group.is-in > *:nth-child(4) { transition-delay: 360ms; }

@media (max-width: 920px) {
  .route__copy {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}

@media (max-width: 720px) {
  .route {
    padding-right: 0;
  }

  .route__spine,
  .route__stage::after {
    display: none;
  }

  .route__stage {
    --route-inset: 0% !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-4);
    padding: 1.25rem 1.2rem;
  }

  .route__stage + .route__stage {
    margin-top: var(--sp-3);
  }

  .route__index {
    font-size: 1.5rem;
  }

  .route__body {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route__spine::after,
  .route__stage::after {
    transform: none;
    transition: none;
  }

  .route__stage,
  .route__stage:hover,
  .route__stage:focus-within {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. XOctave - service desk / SLA dashboard mockup (original AGQ design)

   A dispatch board, not a generic SaaS window. Chrome is a NOC strip (no
   traffic-light dots). Tickets reuse the SLA-card temperature rails: garnet
   for live cover, bronze for major, mill-teal for standard. The Sev 1 row
   is open and carries the resolution clock inside it.
   -------------------------------------------------------------------------- */

.xo-app {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: #07090c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 28px 64px -28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(7, 9, 12, 0.4);
}

.xo-app__chrome {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.78rem 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.xo-app__mark {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
  border-radius: 4px;
  background: var(--teal-400);
  color: #07100f;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.xo-app__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: rgba(242, 248, 250, 0.72);
}

.xo-app__name b {
  color: #fff;
  font-weight: var(--fw-medium);
}

.xo-app__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-300);
  white-space: nowrap;
}

.xo-app__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-400);
  color: var(--teal-400);
  animation: xo-pulse 2.4s var(--ease-in-out) infinite;
}

.xo-app__body {
  padding: 1rem 1rem 1.15rem;
  display: grid;
  gap: 1.05rem;
}

.xo-status {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(196, 92, 82, 0.28);
  background:
    linear-gradient(180deg, rgba(156, 42, 38, 0.16), transparent 70%),
    rgba(255, 255, 255, 0.025);
}

.xo-status__head {
  margin: 0;
  padding: 0.55rem 0.95rem 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3b4ac;
  border-bottom: 1px solid rgba(196, 92, 82, 0.22);
}

.xo-status__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.xo-status__cell {
  padding: 0.8rem 0.95rem 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.xo-status__cell:last-child {
  border-right: 0;
}

.xo-status__k {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(233, 242, 246, 0.48);
}

.xo-status__v {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.82rem + 0.4vw, 1.15rem);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #f3b4ac;
}

.xo-status__v--text {
  font-size: 0.92rem;
  letter-spacing: -0.03em;
}

.xo-status__v small {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: rgba(243, 180, 172, 0.72);
}

.xo-queue__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 242, 246, 0.42);
}

.xo-queue__bar span:last-child {
  color: rgba(233, 242, 246, 0.32);
}

.xo-tickets {
  display: grid;
  gap: 0.5rem;
}

.xo-ticket {
  --xo-rail: var(--teal-500);
  --xo-ink: var(--teal-300);
  --xo-wash: rgba(23, 162, 166, 0.1);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem 0.85rem;
  align-items: center;
  padding: 0.75rem 0.9rem 0.75rem 1rem;
  border-radius: 10px;
  background:
    linear-gradient(90deg, var(--xo-wash), transparent 58%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid color-mix(in srgb, var(--xo-rail) 28%, rgba(255, 255, 255, 0.06));
  box-shadow: inset 3px 0 0 var(--xo-rail);
}

.xo-ticket--s1 {
  --xo-rail: #c45c52;
  --xo-ink: #f3b4ac;
  --xo-wash: rgba(156, 42, 38, 0.22);
}

.xo-ticket--s2 {
  --xo-rail: #c4844a;
  --xo-ink: #e8c093;
  --xo-wash: rgba(150, 82, 28, 0.16);
}

.xo-ticket--s3 {
  --xo-rail: var(--teal-500);
  --xo-ink: var(--teal-300);
  --xo-wash: rgba(23, 162, 166, 0.1);
}

.xo-ticket--open {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 0.95rem;
}

.xo-ticket__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem 0.85rem;
  align-items: center;
}

.xo-ticket__sev {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 5px;
  background: color-mix(in srgb, var(--xo-rail) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--xo-rail) 42%, transparent);
  color: var(--xo-ink);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.xo-ticket__id {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: rgba(233, 242, 246, 0.42);
}

.xo-ticket__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #f2f8fa;
  line-height: 1.35;
}

.xo-ticket__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xo-ink);
  white-space: nowrap;
}

.xo-ticket__meta i,
.xo-app__live i {
  flex: none;
}

.xo-ticket__meta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xo-rail);
}

.xo-ticket__meta--live i {
  background: #e07068;
  color: #e07068;
  animation: xo-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes xo-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  60% { opacity: 0.55; box-shadow: 0 0 0 6px transparent; }
}

.xo-path {
  list-style: none;
  margin: 0;
  padding: 0.85rem 0.15rem 0 2.85rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.xo-path li {
  min-width: 0;
}

.xo-path li::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 0.5rem;
  background: #c45c52;
}

.xo-path li:nth-child(2)::before { background: #d47858; }
.xo-path li:nth-child(3)::before { background: #c4844a; }
.xo-path li:nth-child(4)::before { background: var(--teal-500); }

.xo-path__k {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(233, 242, 246, 0.48);
  line-height: 1.3;
}

.xo-path__v {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: #f2f8fa;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .xo-ticket__meta--live i,
  .xo-app__live i {
    animation: none;
  }
}

@media (max-width: 560px) {
  .xo-status__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .xo-status__cell {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .xo-status__cell:last-child {
    border-bottom: 0;
  }

  .xo-ticket,
  .xo-ticket__main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .xo-ticket--open {
    grid-template-columns: minmax(0, 1fr);
  }

  .xo-ticket__meta {
    grid-column: 2;
  }

  .xo-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    gap: 0.75rem 0.5rem;
  }
}

/* Caption clarifying the mockup is illustrative, not a live feed */
.mock-caption {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--d-text-muted);
  text-align: center;
}

.section--tint .mock-caption,
.section--mist .mock-caption {
  color: var(--text-muted);
}

/* XOctave page rhythm — tinted ticketing band, ink portal without card chrome. */
.xo-portal {
  max-width: 46rem;
}

.xo-portal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.xo-portal__h {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h3);
  color: #fff;
}

.xo-portal__col p {
  margin: 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--lh-relaxed);
}

.xo-portal__lines {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  font-size: var(--fs-sm);
}

.xo-portal__lines span {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.xo-portal__lines a {
  color: #fff;
}

@media (max-width: 720px) {
  .xo-portal__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

/* --------------------------------------------------------------------------
   10. SLA tier cards (XOctave page)

   Each card is a priority ticket, not a pricing tile. Colour is temperature,
   not a traffic light: garnet for live cover, bronze for degraded, mill-teal
   for routine. The left rail is the same vernacular as the service-desk
   severity chips further down the page.
   -------------------------------------------------------------------------- */

.sla-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.sla-card {
  --sla-ink: var(--teal-300);
  --sla-rail: var(--teal-500);
  --sla-wash: rgba(23, 162, 166, 0.1);
  --sla-line: color-mix(in srgb, var(--sla-rail) 32%, rgba(255, 255, 255, 0.08));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.65rem 1.5rem 1.45rem 1.7rem;
  border-radius: var(--r-lg);
  background:
    linear-gradient(165deg, var(--sla-wash) 0%, transparent 46%),
    rgba(10, 13, 16, 0.92);
  border: 1px solid var(--sla-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 3px 0 0 var(--sla-rail);
}

.sla-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg, var(--sla-rail), transparent);
  pointer-events: none;
}

.sla-card--s1 {
  --sla-ink: #f3b4ac;
  --sla-rail: #c45c52;
  --sla-wash: rgba(156, 42, 38, 0.28);
}

.sla-card--s2 {
  --sla-ink: #e8c093;
  --sla-rail: #c4844a;
  --sla-wash: rgba(150, 82, 28, 0.22);
}

.sla-card--s3 {
  --sla-ink: var(--teal-300);
  --sla-rail: var(--teal-500);
  --sla-wash: rgba(23, 162, 166, 0.14);
}

.sla-card__sev {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.3rem 0.68rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--sla-rail) 42%, transparent);
  background: color-mix(in srgb, var(--sla-rail) 16%, transparent);
  color: var(--sla-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.sla-card__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-h3);
  color: #fff;
}

.sla-card__hero {
  margin-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid color-mix(in srgb, var(--sla-rail) 26%, rgba(255, 255, 255, 0.06));
}

.sla-card__hero-v {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--sla-ink);
}

.sla-card__hero-k {
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--d-text-muted);
}

.sla-card__rows {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}

.sla-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: baseline;
  font-size: var(--fs-sm);
}

.sla-row dt {
  color: var(--d-text-muted);
}

.sla-row dd {
  margin: 0;
  font-weight: var(--fw-medium);
  color: var(--d-text-strong);
  text-align: right;
}

@media (max-width: 980px) {
  .sla-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   11. Proof section
   -------------------------------------------------------------------------- */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* Homepage Selected work — full-bleed capability panels.
   Stills are atmospheric stock, not client sites. */
.work-band {
  background: #000;
  color: #fff;
  padding-bottom: 0;
  overflow: clip;
}

.work-band > .container:first-child .eyebrow {
  color: #fff;
}

.work-band > .container:first-child .display-3 {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.work-band__partners {
  background: #fff;
  color: var(--text);
  padding-block: var(--section-y);
  overflow: clip;
}

.js-reveal .work-band__partners .section-head-row.reveal {
  opacity: 1;
  transform: none;
}

.js-reveal .work-band__partners .section-head-row.reveal .eyebrow,
.js-reveal .work-band__partners .section-head-row.reveal .display-3,
.js-reveal .work-band__partners .section-head-row.reveal .lead,
.js-reveal .work-band__partners .section-head-row.reveal .link-arrow {
  opacity: 0;
  transform: translate3d(0, -1.15rem, 0);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.js-reveal .work-band__partners .section-head-row.is-in .eyebrow,
.js-reveal .work-band__partners .section-head-row.is-in .display-3,
.js-reveal .work-band__partners .section-head-row.is-in .lead,
.js-reveal .work-band__partners .section-head-row.is-in .link-arrow {
  opacity: 1;
  transform: none;
}

.js-reveal .work-band__partners .section-head-row.is-in .eyebrow { transition-delay: 0ms; }
.js-reveal .work-band__partners .section-head-row.is-in .display-3 { transition-delay: 110ms; }
.js-reveal .work-band__partners .section-head-row.is-in .lead { transition-delay: 230ms; }
.js-reveal .work-band__partners .section-head-row.is-in .link-arrow { transition-delay: 180ms; }

.work-band__partners .marquee {
  width: 100%;
}

.js-reveal .work-band__partners .marquee.reveal:not(.is-in) {
  transform: translate3d(-16%, 0, 0);
}

.js-reveal .work-band__partners .marquee.reveal.is-in {
  transform: none;
  transition-delay: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .work-band__partners .section-head-row.reveal .eyebrow,
  .js-reveal .work-band__partners .section-head-row.reveal .display-3,
  .js-reveal .work-band__partners .section-head-row.reveal .lead,
  .js-reveal .work-band__partners .section-head-row.reveal .link-arrow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-reveal .work-band__partners .marquee.reveal:not(.is-in) {
    transform: none;
  }
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-top: var(--sp-7);
  align-items: stretch;
}

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

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 34rem;
  background: #0a1016;
  color: #fff;
  text-align: center;
}

.work-card__media,
.work-card__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.work-card__media {
  z-index: 0;
}

.work-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out);
}

.work-card:hover .work-card__media img,
.work-card:focus-within .work-card__media img {
  transform: scale(1.06);
}

.work-card__veil {
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(6, 10, 16, 0.42) 0%,
      rgba(6, 10, 16, 0.62) 48%,
      rgba(6, 10, 16, 0.72) 100%
    );
}

.work-card__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 22.5rem;
  padding: 3.25rem 1.75rem;
}

.work-card__icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  margin-bottom: 1.35rem;
  color: rgba(255, 255, 255, 0.78);
}

.work-card__icon svg {
  width: 100%;
  height: 100%;
}

.section--paper .work-card__title,
.work-card__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(0.95rem, 0.86rem + 0.35vw, 1.08rem);
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.82);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.82);
}

.work-card__body {
  margin: 1rem 0 0;
  max-width: 38ch;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .work-card__media img,
  .work-card:hover .work-card__media img,
  .work-card:focus-within .work-card__media img {
    transform: none;
    transition: none;
  }
}

.js-reveal .work-band > .container:first-child .reveal {
  transform: translateY(-1.15rem);
}

.js-reveal .work-grid.reveal-group > .work-card {
  opacity: 0;
  transform: translate3d(-18%, 0, 0);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.js-reveal .work-grid.reveal-group.is-in > .work-card {
  opacity: 1;
  transform: none;
}

.js-reveal .work-grid.reveal-group.is-in > .work-card:nth-child(1) { transition-delay: 0ms; }
.js-reveal .work-grid.reveal-group.is-in > .work-card:nth-child(2) { transition-delay: 160ms; }
.js-reveal .work-grid.reveal-group.is-in > .work-card:nth-child(3) { transition-delay: 320ms; }

/* Hide copy only on grids that opt into the reveal animation.
   About Mission/Vision uses the same cards without `.reveal-group`, so it
   must not inherit opacity: 0 from the homepage Selected Work sequence. */
.js-reveal .work-grid.reveal-group .work-card__icon,
.js-reveal .work-grid.reveal-group .work-card__title,
.js-reveal .work-grid.reveal-group .work-card__body {
  opacity: 0;
  transform: translate3d(0, -1.15rem, 0);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.js-reveal .work-grid.reveal-group.is-in .work-card__icon,
.js-reveal .work-grid.reveal-group.is-in .work-card__title,
.js-reveal .work-grid.reveal-group.is-in .work-card__body {
  opacity: 1;
  transform: none;
}

.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(1) .work-card__icon { transition-delay: 280ms; }
.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(1) .work-card__title { transition-delay: 400ms; }
.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(1) .work-card__body { transition-delay: 540ms; }

.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(2) .work-card__icon { transition-delay: 440ms; }
.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(2) .work-card__title { transition-delay: 560ms; }
.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(2) .work-card__body { transition-delay: 700ms; }

.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(3) .work-card__icon { transition-delay: 600ms; }
.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(3) .work-card__title { transition-delay: 720ms; }
.js-reveal .work-grid.reveal-group.is-in .work-card:nth-child(3) .work-card__body { transition-delay: 860ms; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .work-grid.reveal-group .work-card__icon,
  .js-reveal .work-grid.reveal-group .work-card__title,
  .js-reveal .work-grid.reveal-group .work-card__body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.proof-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  border-top: 3px solid var(--teal-500);
}

.proof-card__org {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.proof-card__detail {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.proof-card__meta {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--teal-700);
}

@media (max-width: 900px) {
  .proof-grid,
  .work-grid,
  .work-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card {
    aspect-ratio: auto;
    min-height: 26rem;
  }
}

/* --------------------------------------------------------------------------
   12. Company journey

   Homepage milestones: one consistent left-image / right-copy row per
   year. Copy hierarchy is year, hairline, title, description. A thin
   dotted connector sits in the gap between items, with a sticky year
   index that tracks scroll.
   -------------------------------------------------------------------------- */

.record {
  padding-block: 0;
}

/* About intro: compact 60/40 split, equal-height still and navy panel. */
.record-split {
  display: grid;
  grid-template-columns: 60% 40%;
  height: 600px;
  background: var(--white);
}

.record-split__media {
  margin: 0;
  min-width: 0;
  height: 100%;
  background: #061018;
}

.record-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.record-split__rule {
  display: none;
}

.record-split__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 56px 52px;
  background: var(--navy);
  color: #fff;
}

.record-split__title {
  margin: 0;
  max-width: 14ch;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.record-split__lead {
  margin: 0.85rem 0 0;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.record-split__lead + .record-split__lead {
  margin-top: 0.85rem;
}

.record-split a.hero__go,
.record-split a.hero__go:hover,
.record-split a.hero__go:focus-visible {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.record-split__go {
  margin-top: 1.5rem;
  align-self: start;
  width: max-content;
}

.record__ledger-band {
  background: var(--white);
  padding-top: clamp(4.5rem, 3rem + 5vw, 6.5rem);
  padding-bottom: clamp(3.25rem, 2rem + 4vw, 5.5rem);
}

@media (max-width: 1100px) {
  .record-split__title {
    font-size: 34px;
  }

  .record-split__panel {
    padding: 50px 40px;
  }
}

@media (max-width: 900px) {
  .record-split {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .record-split__media {
    height: 18rem;
  }

  .record-split__panel {
    height: auto;
    padding: 2.35rem var(--gutter) 2.75rem;
  }

  .record-split__title {
    max-width: 14ch;
    font-size: clamp(1.75rem, 7vw, 2rem);
  }
}

.journey-shell {
  --journey-media: 22.5rem;
  --journey-rail: 2.5rem;
  --journey-gap: 12rem;
  --journey-gap-inset: 2.15rem;
  --journey-dash-step: 8px;
  --journey-dot-inset: 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  column-gap: 1.75rem;
  align-items: start;
}

.journey {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.journey__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--journey-media) var(--journey-rail) minmax(0, 1fr);
  align-items: start;
  margin: 0;
  padding: 0.35rem 0 var(--journey-gap);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.journey__item:first-child {
  padding-top: 0.15rem;
}

.journey__item:last-child {
  padding-bottom: 0.5rem;
}

.journey__rail {
  position: relative;
  align-self: stretch;
  width: 100%;
  pointer-events: none;
}

.journey__item::after {
  content: "";
  position: absolute;
  left: calc(var(--journey-media) + var(--journey-rail) + var(--journey-dot-inset));
  top: auto;
  bottom: var(--journey-gap-inset);
  width: 10px;
  height: round(
    down,
    calc(var(--journey-gap) - (var(--journey-gap-inset) * 2)),
    var(--journey-dash-step)
  );
  transform: translateX(-50%);
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--navy) 2px,
    transparent 2.2px
  );
  background-size: 10px var(--journey-dash-step);
  background-repeat: repeat-y;
  background-position: center top;
}

.journey__item:last-child::after {
  content: none;
}

.journey__media {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 10;
  background: var(--ed-charcoal);
}

.journey__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey__media--mark {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--border);
}

.journey__media--mark img {
  width: auto;
  height: auto;
  max-width: 72%;
  max-height: 44%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.journey__media--dark {
  background: #050608;
  border-color: transparent;
}

.journey__media--badge img {
  max-width: 88%;
  max-height: 78%;
}

.journey__credit {
  position: absolute;
  left: 0.7rem;
  top: 0.55rem;
  z-index: 1;
  max-width: 70%;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.journey__copy {
  min-width: 0;
  width: 100%;
  padding: 0.1rem 0 0;
}

.journey__date {
  margin: 0;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid rgba(28, 58, 94, 0.14);
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 1.5rem + 3.1vw, 3.5rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.journey__title {
  margin: 1.35rem 0 0;
  font-size: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
  font-weight: var(--fw-medium);
  line-height: 1.28;
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  text-wrap: balance;
}

.journey__body {
  margin: 0.8rem 0 0;
  max-width: 44ch;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-muted);
}

.journey__index {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.15rem;
  align-self: start;
  justify-self: stretch;
  width: 100%;
}

.journey__index a {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: rgba(28, 58, 94, 0.42);
  text-decoration: none;
  line-height: 1.15;
  padding: 1.05rem 0 0.85rem;
  border-bottom: 1px solid rgba(28, 58, 94, 0.16);
  transition: color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.journey__index a:hover,
.journey__index a:focus-visible {
  color: var(--navy);
}

.journey__index a.is-active {
  color: var(--navy);
  font-weight: var(--fw-medium);
  border-bottom-color: var(--navy);
}

.js-reveal .journey__item.reveal {
  transform: translateY(28px);
  transition-duration: 0.9s;
}

.js-reveal .journey__item.reveal.is-in {
  transform: none;
}

@media (max-width: 1100px) {
  .journey-shell {
    --journey-media: 18.75rem;
    --journey-gap: 10.5rem;
  }
}

@media (max-width: 860px) {
  .journey-shell {
    --journey-gap: 8.75rem;
    --journey-gap-inset: 1.6rem;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .journey,
  .journey__index {
    grid-column: auto;
    grid-row: auto;
  }

  .journey__index {
    position: sticky;
    top: var(--header-h);
    z-index: 4;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 0.75rem;
    padding: 0.35rem 0 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background: var(--bg);
    border-bottom: 0;
    scrollbar-width: none;
    justify-self: stretch;
  }

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

  .journey__index a {
    flex: none;
    padding: 0.7rem 0.95rem 0.6rem;
    border-bottom: 1px solid rgba(28, 58, 94, 0.16);
  }

  .journey__index a.is-active {
    color: var(--navy);
    border-bottom-color: var(--navy);
  }

  .journey__item {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.15rem;
    scroll-margin-top: calc(var(--header-h) + 4.25rem);
  }

  .journey__item:first-child {
    padding-top: 0.35rem;
  }

  .journey__rail {
    display: none;
  }

  .journey__item::after {
    left: var(--journey-dot-inset);
  }

  .journey__media {
    margin-bottom: 0;
  }

  .journey__copy {
    padding: 0;
  }

  .journey__date {
    padding-bottom: 0.7rem;
  }

  .journey__title {
    margin-top: 1.15rem;
  }

  .journey__body {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .journey__item.reveal {
    transform: none;
  }
}

/* Certification strip - appears in the footer of every page */
.cert-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}

.cert {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--d-border);
  background: rgba(255, 255, 255, 0.035);
}

.cert__k {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-300);
  white-space: nowrap;
}

.cert__v {
  font-size: var(--fs-xs);
  color: rgba(233, 242, 246, 0.66);
  white-space: nowrap;
}

/* The MOF chip in the footer carries an 18-character registration number, and
   `nowrap` made that one chip 412px wide inside a 350px column - every page on
   the site scrolled sideways by 22px on a 390px phone. `anywhere` only breaks
   when there is no other option, so "24 Bidang, valid to Apr 2027" still holds
   its line and the reference number is the only thing that ever splits. */
@media (max-width: 480px) {
  .cert {
    max-width: 100%;
  }
  .cert__v {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.cert--light {
  border-color: var(--border);
  background: var(--white);
}

.cert--light .cert__k {
  color: var(--teal-700);
}

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

/* --------------------------------------------------------------------------
   13. FAQ accordion
   -------------------------------------------------------------------------- */

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

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  width: 100%;
  padding: var(--sp-6) 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--navy);
  line-height: var(--lh-heading);
  transition: color var(--dur) var(--ease-out);
}

.faq__q:hover {
  color: var(--teal-700);
}

.faq__icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  transition: border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: var(--navy);
  transition: opacity var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.faq__icon::before {
  width: 10px;
  height: 1.5px;
}

.faq__icon::after {
  width: 1.5px;
  height: 10px;
}

.faq__q:hover .faq__icon {
  border-color: var(--teal-500);
}

.faq__q[aria-expanded="true"] .faq__icon {
  background: var(--teal-500);
  border-color: var(--teal-500);
}

.faq__q[aria-expanded="true"] .faq__icon::before {
  background: var(--white);
}

.faq__q[aria-expanded="true"] .faq__icon::after {
  opacity: 0;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.faq__a[data-open="true"] {
  grid-template-rows: 1fr;
}

.faq__a > div {
  min-height: 0;
  overflow: hidden;
}

.faq__a p {
  padding-bottom: var(--sp-6);
  padding-right: var(--sp-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: 72ch;
}

.faq__a p + p {
  padding-top: var(--sp-4);
}

@media (max-width: 600px) {
  .faq__a p {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   14. Closing CTA + enquiry form
   -------------------------------------------------------------------------- */

/* Flat. The photograph went first, then the animated light trails, and now the
   navy wash that was left standing over both: the last thing on the page asks
   for one action, and nothing behind it should be competing for the eye.
   `.section--ink` supplies the ground; this rule only sets the context the
   heading and link colours inherit from. */
.closing {
  position: relative;
  color: var(--ed-text);
  overflow: hidden;
  isolation: isolate;
}

.closing__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: start;
}

@media (max-width: 980px) {
  .closing__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One line replacing the three rule-marked office blocks. The enquiry form
   alongside is the action this section is asking for; these are the escape
   hatches for someone who would rather just call, so they sit quietly on a
   single line instead of occupying a third of the column. */
.closing__reach {
  margin-top: var(--sp-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ed-text);
}

.closing__reach a {
  color: var(--white);
  font-weight: var(--fw-medium);
}

.closing__reach span {
  margin: 0 0.5em;
  color: var(--teal-300);
}

/* --- Form --- */

.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-lg);
}

.form-card--light {
  background: var(--white);
  border-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--sh-md);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--d-text-strong);
}

.form-card--light .field label {
  color: var(--navy);
}

.field label .req {
  color: var(--teal-300);
  margin-left: 2px;
}

.form-card--light .field label .req {
  color: var(--teal-700);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8125rem var(--sp-4);
  min-height: 48px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  color: var(--white);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.field textarea {
  min-height: 128px;
  resize: vertical;
  line-height: var(--lh-body);
}

.field__hint {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--d-text-muted);
}

.field input[type="file"] {
  padding: 0.4rem 0.5rem;
  font-size: var(--fs-xs);
}

.field input[type="file"]::file-selector-button {
  margin-right: 0.85rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--teal-600);
  color: #fff;
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(233, 242, 246, 0.42);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fcdcf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 17px;
  padding-right: var(--sp-9);
  cursor: pointer;
}

.field select option {
  background: var(--navy-900);
  color: var(--white);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal-400);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: var(--ring-dark);
}

/* Light form variant (contact page) */
.form-card--light .field input,
.form-card--light .field select,
.form-card--light .field textarea {
  background: var(--n-50);
  border-color: var(--border-strong);
  color: var(--ink);
}

.form-card--light .field input::placeholder,
.form-card--light .field textarea::placeholder {
  color: var(--n-400);
}

.form-card--light .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d7175' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 17px;
}

.form-card--light .field select option {
  background: var(--white);
  color: var(--ink);
}

.form-card--light .field input:focus,
.form-card--light .field select:focus,
.form-card--light .field textarea:focus {
  border-color: var(--teal-500);
  background: var(--white);
  box-shadow: var(--ring);
}

/* Validation: icon + text, never colour alone */
.field__error {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: #ffb4b0;
}

.form-card--light .field__error {
  color: var(--danger);
}

.field__error svg {
  width: 14px;
  height: 14px;
  flex: none;
}

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

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #ff8f8a;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.22);
}

.form-card--light .field.has-error input,
.form-card--light .field.has-error select,
.form-card--light .field.has-error textarea {
  border-color: var(--danger);
}

.form__foot {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

.form__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--d-text-muted);
  max-width: 40ch;
}

.form-card--light .form__note {
  color: var(--text-muted);
}

/* Submission status message */
.form__status {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  display: none;
}

.form__status.is-visible {
  display: block;
}

.form__status--ok {
  background: var(--ok-soft);
  border: 1px solid rgba(47, 158, 109, 0.42);
  color: #a9e6c9;
}

.form__status--warn {
  background: var(--sev-high-soft);
  border: 1px solid rgba(224, 138, 60, 0.42);
  color: #f5c08a;
}

.form-card--light .form__status--ok {
  color: #1e6b49;
}

.form-card--light .form__status--warn {
  color: #8a5216;
}

@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-950);
  color: var(--d-text);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__main {
  padding-block: clamp(3rem, 1.6rem + 4.5vw, 5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}

/* Same stack as the header, but the name stays visible: the footer is where
   the company is being named, and there is no nav here to hover away from. */
.footer-brand__word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--white);
}

.footer-brand__word img {
  height: 46px;
  width: auto;
}

.footer-brand__word span {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  line-height: 1;
}

.footer-brand__blurb {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--d-text);
  max-width: 32ch;
}

.footer-col__title {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-300);
  margin-bottom: var(--sp-5);
}

.footer-col__list {
  display: grid;
  gap: var(--sp-3);
}

.footer-col__list a {
  font-size: var(--fs-sm);
  color: var(--d-text);
}

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

.footer-office {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--d-text);
}

.footer-office + .footer-office {
  margin-top: var(--sp-5);
}

.footer-office strong {
  display: block;
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.footer-office a {
  color: rgba(233, 242, 246, 0.86);
}

.footer-office a:hover {
  color: var(--teal-300);
}

@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Certification bar + legal line */
.site-footer__certs {
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__legal {
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  color: rgba(233, 242, 246, 0.5);
}

.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.site-footer__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.site-footer__legal a {
  color: rgba(233, 242, 246, 0.62);
}

.site-footer__legal a:hover {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   16. Inner-page components
   -------------------------------------------------------------------------- */

/* Page hero - shorter dark variant of the homepage hero */
.page-hero {
  position: relative;
  background: var(--navy-950);
  color: var(--d-text);
  padding-top: calc(
    var(--header-h) + var(--header-float) * 2 + clamp(2.5rem, 1rem + 5vw, 5rem)
  );
  padding-bottom: clamp(2.75rem, 1.2rem + 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
      ellipse 110% 90% at 80% 10%,
      rgba(28, 58, 94, 0.9),
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 70% at 8% 92%,
      rgba(13, 113, 117, 0.3),
      transparent 62%
    ),
    linear-gradient(180deg, #071320, #0a1826);
  pointer-events: none;
}

/* The artwork was being dimmed three times over: the SVG is already drawn faint
   on purpose (its grid is stroke-opacity 0.035, its traces peak at 0.3), then
   this layer took another 38% off, then the mask below removed 92% of what was
   left. On the left of the frame - which is exactly where the breadcrumb, title
   and lead sit - the brightest element in the file arrived at 0.047 alpha and
   the grid at 0.0017. The art was present, rendering, and invisible.

   The dimming belongs in one place, and that place is the file itself. */
.page-hero__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.95;
  pointer-events: none;
}

.page-hero__art svg {
  width: 100%;
  height: 100%;
}

/* Same ramp the homepage hero used to carry, and the same problem: it was built
   to guarantee contrast against artwork that might have been anything, so it
   assumed the worst and blacked out the copy side. The artwork here is known,
   and it is dark line work on a dark ground - it never needed 92%.

   Still weighted left, because unlike the homepage this content IS left
   aligned. Just far less severe: the brightest trace now arrives at 0.25 on the
   left rising to 0.63 on the right, so the art reads the whole way across
   instead of only in the corner the copy does not reach. White at the title's
   weight still clears 10:1 over the composite. */
.page-hero__mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    95deg,
    rgba(6, 15, 25, 0.74) 0%,
    rgba(6, 15, 25, 0.58) 40%,
    rgba(6, 15, 25, 0.34) 100%
  );
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 3;
}

.page-hero__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: rgba(255, 255, 255, 0.95);
  max-width: 30ch;
}

.page-hero__lead {
  margin-top: var(--sp-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--d-text);
  max-width: 62ch;
}

.page-hero__actions {
  margin-top: var(--sp-7);
}

.page-hero__actions .hero__go {
  margin-top: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.page-hero__actions .hero__go:hover,
.page-hero__actions .hero__go:focus-visible {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Photographic inner-page heroes. 404 keeps the shared line-art. */
.page-hero--photo {
  min-height: clamp(26rem, 18rem + 28vw, 38rem);
  display: grid;
  align-items: end;
  padding-top: calc(var(--header-h) + clamp(3rem, 1.5rem + 5vw, 6rem));
  padding-bottom: clamp(3.25rem, 1.6rem + 6vw, 6.5rem);
}

.page-hero--photo .page-hero__bg,
.page-hero--photo .page-hero__art,
.page-hero--photo .page-hero__mask {
  display: none;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(6, 15, 25, 0.46);
}

.page-hero--photo .page-hero__inner {
  z-index: 2;
}

.page-hero--photo .crumbs {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.95rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  max-width: min(34rem, 100%);
}

.page-hero--photo .page-hero__title {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.35rem);
  max-width: 22ch;
}

.page-hero--photo .page-hero__lead {
  margin-top: var(--sp-5);
  max-width: 42ch;
  color: var(--d-text);
}

.page-hero--photo .page-hero__lead + .page-hero__lead {
  margin-top: var(--sp-4);
}

/* Infrastructure hero: dark storage close-up, metal shifted right so copy
   sits on charcoal rather than a highlight. */
.page-hero--infra .page-hero__media img {
  object-position: 74% 46%;
}

.page-hero--security .page-hero__media img {
  object-position: 62% 45%;
}

.page-hero--security .page-hero__veil {
  background: linear-gradient(
    90deg,
    rgba(6, 15, 25, 0.7) 0%,
    rgba(6, 15, 25, 0.38) 30%,
    rgba(6, 15, 25, 0.1) 52%,
    rgba(6, 15, 25, 0) 70%
  );
}

@media (max-width: 860px) {
  .page-hero--security .page-hero__veil {
    background: linear-gradient(
      180deg,
      rgba(6, 15, 25, 0.58) 0%,
      rgba(6, 15, 25, 0.4) 52%,
      rgba(6, 15, 25, 0.22) 100%
    );
  }
}

.page-hero--infra .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 15, 25, 0.7) 0%,
    rgba(6, 15, 25, 0.5) 42%,
    rgba(6, 15, 25, 0.34) 100%
  );
}

.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Solutions hub: aerial of a data-centre campus (Pexels 38000679).
   Building sits centre; stronger left veil so white type holds over daylight. */
.page-hero--solutions .page-hero__media img,
.page-hero--solutions .page-hero__video {
  object-position: 50% 42%;
}

.page-hero--solutions .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 12, 28, 0.72) 0%,
    rgba(6, 12, 28, 0.42) 48%,
    rgba(6, 12, 28, 0.22) 100%
  );
}

.page-hero--solutions.page-hero--video .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 12, 28, 0.78) 0%,
    rgba(6, 12, 28, 0.48) 48%,
    rgba(6, 12, 28, 0.28) 100%
  );
}

/* Contact: empty conference room. Stronger left veil so white type
   holds over the sunlit windows. */
.page-hero--contact .page-hero__media img {
  object-position: 42% 52%;
}

.page-hero--contact .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 15, 25, 0.72) 0%,
    rgba(6, 15, 25, 0.46) 48%,
    rgba(6, 15, 25, 0.28) 100%
  );
}

.page-hero--video .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 15, 25, 0.74) 0%,
    rgba(6, 15, 25, 0.52) 44%,
    rgba(6, 15, 25, 0.34) 100%
  );
}

.page-hero--about .page-hero__media img {
  object-position: 48% 42%;
}

.page-hero--about .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 15, 25, 0.68) 0%,
    rgba(6, 15, 25, 0.42) 48%,
    rgba(6, 15, 25, 0.28) 100%
  );
}

/* XOctave: hands on a pale desk — keep copy on the darker left,
   keyboard motion toward centre-right. */
.page-hero--xoctave .page-hero__media img,
.page-hero--xoctave .page-hero__video {
  object-position: 42% 48%;
}

.page-hero--xoctave .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 15, 25, 0.78) 0%,
    rgba(6, 15, 25, 0.56) 42%,
    rgba(6, 15, 25, 0.38) 100%
  );
}

/* Partners: bright handshake still — hold copy on the darker left. */
.page-hero--partners .page-hero__media img {
  object-position: 50% 42%;
}

.page-hero--partners .page-hero__veil {
  background: linear-gradient(
    102deg,
    rgba(6, 15, 25, 0.82) 0%,
    rgba(6, 15, 25, 0.58) 44%,
    rgba(6, 15, 25, 0.4) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__video {
    display: none;
  }
}

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(233, 242, 246, 0.55);
}

.crumbs a {
  color: rgba(233, 242, 246, 0.75);
}

.crumbs a:hover {
  color: var(--teal-300);
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: var(--sp-2);
  color: rgba(233, 242, 246, 0.3);
}

.crumbs li {
  display: flex;
  align-items: center;
}

/* Service block - icon + title + copy, used on all solution pages */
.service-list {
  display: grid;
  gap: var(--sp-5);
}

.service-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  transition: border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.service-block:hover {
  border-color: var(--teal-300);
  box-shadow: var(--sh-sm);
}

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

.service-block__body {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: 74ch;
}

@media (max-width: 560px) {
  .service-block {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
}

/* Infrastructure service showcase — unified dark NOC panel, one still in
   focus. Without JS the five cards stack; .js-svc turns it into the stage. */
.svc-showcase {
  display: grid;
  gap: var(--sp-5);
}

.svc-showcase__rail {
  display: none;
}

.svc-showcase__deck {
  display: grid;
  gap: var(--sp-5);
}

.svc-showcase__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 22rem;
  aspect-ratio: 4 / 5;
  max-height: 34rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(53, 184, 187, 0.22);
  background: #0c141c;
  color: #f2f8fa;
}

.svc-showcase__media,
.svc-showcase__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.svc-showcase__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-showcase__veil {
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(6, 12, 18, 0.92) 0%,
      rgba(6, 12, 18, 0.5) 38%,
      rgba(6, 12, 18, 0.1) 68%,
      rgba(6, 12, 18, 0.04) 100%
    );
}

.svc-showcase__copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.6rem 1.35rem 1.4rem;
}

.svc-showcase__title {
  margin: 0;
  max-width: 22ch;
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: #f2f8fa;
  -webkit-text-fill-color: #f2f8fa;
}

.svc-showcase__body {
  margin: 0.7rem 0 0;
  max-width: 38ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: rgba(168, 194, 217, 0.88);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) {
  grid-template-columns: minmax(18.5rem, 0.38fr) minmax(0, 1fr);
  min-height: 36rem;
  gap: 0;
  border: 1px solid rgba(53, 184, 187, 0.28);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.55);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.7rem 1.2rem;
  background: var(--navy-900);
  border-right: 1px solid rgba(53, 184, 187, 0.22);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__tab {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(53, 184, 187, 0.28);
  border-radius: var(--r-md);
  background: transparent;
  color: rgba(168, 194, 217, 0.72);
  text-align: left;
  transition:
    background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__tab:hover {
  color: #f2f8fa;
  border-color: var(--teal-400);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__tab.is-active {
  background: rgba(242, 248, 250, 0.1);
  border-color: var(--teal-400);
  color: #f2f8fa;
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  color: var(--teal-400);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__tab.is-active .svc-showcase__icon {
  color: var(--teal-400);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__icon svg {
  width: 1.28rem;
  height: 1.28rem;
  display: block;
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  line-height: 1.3;
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__rail :focus-visible {
  outline-color: var(--teal-300);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 2rem;
  overflow: hidden;
  background: var(--navy-900);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__deck {
  position: relative;
  display: block;
  width: min(100%, 22.5rem);
  aspect-ratio: 4 / 5;
  gap: 0;
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card {
  position: absolute;
  inset: 0;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  border: 1px solid rgba(53, 184, 187, 0.28);
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
  z-index: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-active {
  opacity: 1;
  transform: none;
  z-index: 3;
  pointer-events: auto;
  border-color: var(--teal-400);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-prev,
.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-next {
  opacity: 0.38;
  z-index: 1;
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-prev {
  transform: translateX(-16%) scale(0.88) rotate(-1.6deg);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-next {
  transform: translateX(16%) scale(0.88) rotate(1.6deg);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-hidden {
  opacity: 0;
  transform: scale(0.78);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card:not(.is-active) .svc-showcase__media {
  filter: brightness(0.72);
}

.js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card:not(.is-active) .svc-showcase__copy {
  opacity: 0;
}

@media (max-width: 900px) {
  .js-svc .svc-showcase:not(.svc-showcase--ledger) {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__rail {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.45rem;
    padding: 1rem 1rem 0.85rem;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(53, 184, 187, 0.22);
    -webkit-overflow-scrolling: touch;
  }

  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__tab {
    flex: 0 0 auto;
    width: auto;
    max-width: 16rem;
    white-space: nowrap;
  }

  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__stage {
    padding: 1.5rem 1.15rem 1.7rem;
  }

  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-prev,
  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-next {
    opacity: 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__tab,
  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card,
  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card:not(.is-active) .svc-showcase__copy {
    transition: none;
  }

  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-prev,
  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-next,
  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card.is-hidden {
    transform: none;
  }

  .js-svc .svc-showcase:not(.svc-showcase--ledger) .svc-showcase__card:not(.is-active) .svc-showcase__media {
    filter: none;
  }
}

/* Infrastructure ledger — IJM-style split: inset rounded card, still on
   the left, expanding list on the right. */
.svc-ledger-section {
  padding-bottom: var(--section-y);
}

.svc-showcase--ledger {
  gap: 0;
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  margin-top: var(--sp-8);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--navy);
  color: #f2f8fa;
}

.svc-showcase--ledger .svc-showcase__rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 5vw, 4.25rem) clamp(1.75rem, 4.5vw, 3.75rem);
  background: var(--navy);
}

.svc-showcase--ledger .svc-showcase__tab {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 1.05rem 0 1.1rem;
  border: 0;
  border-bottom: 1px solid rgba(242, 248, 250, 0.22);
  border-radius: 0;
  background: transparent;
  color: rgba(242, 248, 250, 0.78);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--dur) var(--ease-out);
}

.svc-showcase--ledger .svc-showcase__tab:first-child {
  border-top: 1px solid rgba(242, 248, 250, 0.22);
}

.svc-showcase--ledger .svc-showcase__tab:hover {
  color: #f2f8fa;
}

.svc-showcase--ledger .svc-showcase__tab.is-active {
  color: #f2f8fa;
}

.svc-showcase--ledger .svc-showcase__icon,
.svc-showcase--ledger .svc-showcase__veil,
.svc-showcase--ledger .svc-showcase__copy {
  display: none;
}

.svc-showcase--ledger .svc-showcase__name {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: inherit;
}

.svc-showcase--ledger .svc-showcase__excerpt {
  display: grid;
  grid-template-rows: 1fr;
  color: rgba(233, 242, 246, 0.78);
}

.svc-showcase--ledger .svc-showcase__excerpt > span {
  overflow: hidden;
  min-height: 0;
  padding-top: 0.75rem;
  max-width: 36ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.svc-showcase--ledger .svc-showcase__card {
  aspect-ratio: 16 / 10;
  max-height: none;
  min-height: 16rem;
  border: 0;
  border-radius: 0;
}

.svc-showcase--ledger .svc-showcase__card:not(:first-child) {
  display: none;
}

.svc-showcase--ledger .svc-showcase__rail :focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 3px;
}

.js-svc .svc-showcase--ledger {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
  min-height: min(40rem, calc(100svh - var(--header-h)));
}

.js-svc .svc-showcase--ledger .svc-showcase__rail {
  justify-content: center;
}

.js-svc .svc-showcase--ledger .svc-showcase__tab {
  flex: none;
}

.js-svc .svc-showcase--ledger .svc-showcase__stage,
.js-svc .svc-showcase--ledger .svc-showcase__deck {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: var(--navy-950);
}

.js-svc .svc-showcase--ledger .svc-showcase__card {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 0;
  aspect-ratio: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.55s var(--ease-out);
}

.js-svc .svc-showcase--ledger .svc-showcase__card.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.js-svc .svc-showcase--ledger .svc-showcase__excerpt {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease-out);
}

.js-svc .svc-showcase--ledger .svc-showcase__tab.is-active .svc-showcase__excerpt {
  grid-template-rows: 1fr;
}

@media (max-width: 860px) {
  .js-svc .svc-showcase--ledger {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    border-radius: var(--r-lg);
  }

  .js-svc .svc-showcase--ledger .svc-showcase__stage {
    min-height: 16.5rem;
    aspect-ratio: 16 / 10;
  }

  .svc-showcase--ledger .svc-showcase__rail {
    padding: 1.35rem 1.35rem 1.7rem;
  }

  .svc-showcase--ledger .svc-showcase__tab {
    padding-block: 1rem;
  }

  .svc-showcase--ledger .svc-showcase__name {
    font-size: var(--fs-lead);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-svc .svc-showcase--ledger .svc-showcase__card,
  .js-svc .svc-showcase--ledger .svc-showcase__excerpt {
    transition: none;
  }
}

/* Value strip - three outcome tiles on a dark band */
.value-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--d-border);
  border: 1px solid var(--d-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.value-strip__cell {
  padding: var(--sp-7) var(--sp-6);
  background: var(--navy-900);
}

.value-strip__k {
  font-size: var(--fs-h4);
  color: var(--d-text-strong);
}

.value-strip__v {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--d-text);
}

@media (max-width: 860px) {
  .value-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

@media (max-width: 860px) {
  .value-strip--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Why-rail: two equal columns, a solid-then-dotted hairline, and a
   navy node on the line. Used on Managed Security Why AGeqnies. */
.why-rail {
  --why-node: 3.5rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
  align-items: start;
}

.why-rail__track {
  position: absolute;
  top: calc(var(--why-node) / 2);
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}

.why-rail__track::before,
.why-rail__track::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
}

.why-rail__track::before {
  left: 0;
  border-top: 1.5px solid var(--navy);
}

.why-rail__track::after {
  left: 50%;
  border-top: 1.5px dotted rgba(28, 58, 94, 0.45);
}

.why-rail__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.75rem;
}

.why-rail__node {
  display: grid;
  place-items: center;
  width: var(--why-node);
  height: var(--why-node);
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 0 0 7px var(--bg);
  flex: none;
}

.why-rail__node svg {
  width: 1.35rem;
  height: 1.35rem;
}

.why-rail__k {
  margin: 1.35rem 0 0;
  max-width: 18ch;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  color: var(--heading);
  text-wrap: balance;
}

.why-rail__v {
  margin: 0.85rem 0 0;
  max-width: 36ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .why-rail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3.25rem;
  }

  .why-rail__track {
    display: none;
  }

  .why-rail__item:first-child::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--why-node) + 0.55rem);
    bottom: calc(-3.25rem + 0.55rem);
    width: 0;
    border-left: 1.5px dotted rgba(28, 58, 94, 0.45);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

/* Proof callout - a grounded statement, not a fabricated testimonial */
.callout {
  position: relative;
  padding: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal-500);
}

.callout__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-700);
}

.callout__text {
  margin-top: var(--sp-4);
  font-size: clamp(1rem, 0.86rem + 0.56vw, 1.3125rem);
  line-height: 1.5;
  letter-spacing: var(--ls-heading);
  color: var(--navy);
  max-width: 58ch;
  font-weight: var(--fw-medium);
}

.callout--dark {
  background: var(--d-surface);
  border-color: var(--d-border);
  border-left-color: var(--teal-500);
}

.callout--dark .callout__label {
  color: var(--teal-300);
}

.callout--dark .callout__text {
  color: var(--d-text-strong);
}

/* CTA band closing an inner page */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--navy);
  color: var(--d-text-strong);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  top: -60%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 162, 166, 0.4), transparent 66%);
  filter: blur(28px);
}

.cta-band__title {
  font-size: var(--fs-h3);
  color: var(--white);
  max-width: 34ch;
}

.cta-band__body {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--d-text);
  max-width: 54ch;
}

/* Full-bleed solutions CTA — sampled #4286f5 from the reference banner.
   No inner card: the colour is the section. */
.cta-banner {
  --cta-banner-bg: #4286f5;
  background: var(--cta-banner-bg);
  color: #fff;
  text-align: center;
  padding: clamp(4.25rem, 3.2rem + 5vw, 6.75rem) var(--gutter);
}

.cta-banner__kicker {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: #fff;
}

.cta-banner__title {
  max-width: 22em;
  margin-inline: auto;
  color: #fff;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  font-weight: var(--fw-display);
  line-height: 1.28;
  letter-spacing: var(--ls-display);
}

.cta-banner__body {
  max-width: 38em;
  margin: 1.15rem auto 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
}

.cta-banner__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.85rem;
  padding: 0.72rem 1.85rem;
  min-height: 2.75rem;
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  line-height: 1.2;
}

.cta-banner__go:hover {
  background: #fff;
  border-color: #fff;
  color: var(--cta-banner-bg);
}

.cta-banner__go:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Leadership cards */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.leader {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.leader:hover {
  border-color: var(--teal-300);
  box-shadow: var(--sh-sm);
}

/* Photo slot - shows initials until a real portrait is supplied */
.leader__photo {
  position: relative;
  aspect-ratio: 4 / 4.4;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-950));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.leader__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader__initials {
  font-size: clamp(1.5rem, 1.33rem + 0.67vw, 1.875rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  color: var(--teal-300);
}

.leader__meta {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

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

.leader__role {
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--teal-700);
}

.leader__bio {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

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

@media (max-width: 520px) {
  .leader-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Vertical milestone timeline (About page) */
.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding-left: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: clamp(0.5rem, 0.2rem + 1vw, 1rem);
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--teal-500),
    var(--teal-200) 85%,
    transparent
  );
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: calc(clamp(2.5rem, 1.5rem + 3vw, 4.5rem) * -1 + clamp(0.5rem, 0.2rem + 1vw, 1rem) - 5px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--teal-500);
}

.timeline__year {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--navy);
  letter-spacing: var(--ls-heading);
  font-variant-numeric: tabular-nums;
}

.timeline__what {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

@media (max-width: 620px) {
  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}

/* Partner category rows: label and description on the left, the logo wall on
   the right. Full width rather than a 3-up card grid, because 30+ logos need
   room to be legible and a bordered plate inside a bordered card reads busy. */
.partner-row {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  border-top: 1px solid var(--border);
  align-items: start;
}

.partner-row:last-child {
  border-bottom: 1px solid var(--border);
}

.partner-row__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-h4);
}

.partner-row__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 38ch;
}

@media (max-width: 860px) {
  .partner-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

/* Partner categories */
.partner-cat {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  height: 100%;
}

.partner-cat__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-h4);
}

.partner-cat__list {
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.partner-cat__list li {
  padding: 0.375rem 0.6875rem;
  border-radius: var(--r-xs);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--navy);
}

/* Contact office cards */
.office-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.office {
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  border-top: 3px solid var(--teal-500);
}

.office__k {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-700);
}

.office__name {
  margin-top: var(--sp-3);
  font-size: var(--fs-h4);
}

.office__addr {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.office__rows {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.office__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.office__row svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--teal-600);
}

@media (max-width: 780px) {
  .office-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Solutions hub section head */
.hub .eyebrow {
  color: #fff;
}

.hub .display-3 {
  color: var(--d-text-strong);
}

/* Customised scopes — Feature72 layout, ported: intro then 2×2 image cards */
.scope-feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}

.scope-feature__intro {
  max-width: 38ch;
}

.scope-feature__lede {
  margin: var(--sp-5) 0 var(--sp-6);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--d-text);
}

.scope-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

.scope-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--d-surface);
  border: 1px solid var(--d-border);
}

.scope-card__media {
  overflow: hidden;
}

.scope-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.scope-card__copy {
  padding: 1.5rem 1.5rem 1.7rem;
}

.scope-card__title {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  color: var(--d-text-strong);
}

.scope-card__body {
  margin: 0.7rem 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--d-text);
}

/* Three across instead of the default two. Same card, same gap scale - only
   the column count changes, so the solutions hub and the turnkey scopes stay
   one component rather than two that merely look alike. */
/* The hub uses scope-card as a link rather than an article, so it needs the
   affordances a static card does not: a kicker, an Explore row pinned to the
   bottom so all three line up, and a hover state. */
.scope-card__kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--teal-300);
}

a.scope-card {
  color: var(--d-text);
  transition: border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

a.scope-card:hover,
a.scope-card:focus-visible {
  color: var(--d-text);
  background: var(--d-surface-2);
  border-color: var(--d-border-strong);
  transform: translateY(-3px);
}

.scope-card__media img {
  transition: transform 0.6s var(--ease-out);
}

a.scope-card:hover .scope-card__media img,
a.scope-card:focus-visible .scope-card__media img {
  transform: scale(1.04);
}

.scope-card__copy {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.scope-card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--teal-300);
}

.scope-card__go svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur) var(--ease-out);
}

a.scope-card:hover .scope-card__go svg,
a.scope-card:focus-visible .scope-card__go svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  a.scope-card,
  .scope-card__media img,
  .scope-card__go svg {
    transition: none;
  }

  a.scope-card:hover,
  a.scope-card:focus-visible,
  a.scope-card:hover .scope-card__media img,
  a.scope-card:focus-visible .scope-card__media img,
  a.scope-card:hover .scope-card__go svg,
  a.scope-card:focus-visible .scope-card__go svg {
    transform: none;
  }
}

@media (min-width: 800px) {
  .scope-feature__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7);
  }

  .scope-card__copy {
    padding: 1.85rem 2rem 2.1rem;
  }
}

/* Three across instead of the default two. Declared AFTER the two-column
   rule on purpose: both selectors are a single class, so this only wins on
   source order. Move it above and you silently get two columns again. */
@media (min-width: 800px) {
  .scope-feature__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Simple definition rows (used for company facts) */
.fact-rows {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.fact-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.fact-row dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--heading);
}

.fact-row dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.section--ink .fact-rows,
.section--ink-2 .fact-rows,
.section--dark .fact-rows,
.section--deep .fact-rows {
  border-top-color: var(--ed-line);
}

.section--ink .fact-row,
.section--ink-2 .fact-row,
.section--dark .fact-row,
.section--deep .fact-row {
  border-bottom-color: var(--ed-line);
}

.section--ink .fact-row dt,
.section--ink-2 .fact-row dt,
.section--dark .fact-row dt,
.section--deep .fact-row dt {
  color: #fff;
}

.section--ink .fact-row dd,
.section--ink-2 .fact-row dd,
.section--dark .fact-row dd,
.section--deep .fact-row dd {
  color: #fff;
}

@media (max-width: 640px) {
  .fact-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}

/* --------------------------------------------------------------------------
   17. Photography

   The stock photography is sourced under licences permitting commercial use
   (see ASSET-MANIFEST.md), but it is generic by nature. The duotone treatment
   below pulls it into the navy/teal palette so it reads as part of the brand
   rather than as bought-in stock, and so it sits beside the SVG diagrams
   without clashing.

   IMPORTANT: none of these photographs are AGQ facilities. They are used
   atmospherically and must never be captioned or implied as "our data centre"
   - that would be a fabricated proof claim. Replace them with real AGQ
   photography when it exists; the slots are sized and documented for it.
   -------------------------------------------------------------------------- */

.photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-950);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Navy duotone: desaturate, then lay the brand navy over it. */
.photo--duotone img {
  filter: grayscale(0.55) contrast(1.08) brightness(0.9);
}

.photo--duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    rgba(28, 58, 94, 0.72),
    rgba(6, 15, 25, 0.82)
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* A teal lift on top of the duotone, so the accent colour is present in the
   photography too rather than only in the UI. */
.photo--duotone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 70% 60% at 75% 30%,
    rgba(23, 162, 166, 0.28),
    transparent 70%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Lighter treatment for photos that carry a human subject - heavy duotone
   makes people look embalmed. */
.photo--soft img {
  filter: grayscale(0.18) contrast(1.02);
}

.photo--soft::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(28, 58, 94, 0.2), rgba(6, 15, 25, 0.3));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.photo--rounded {
  border-radius: var(--r-xl);
}

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   19. Statistics band
   The facts are strong; they were previously set small. Here they carry a
   whole section on type scale alone - no cards, no borders, no icons.
   -------------------------------------------------------------------------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-7);
}

.stat-band__kicker {
  margin: 0 0 var(--sp-7);
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem);
  font-weight: var(--fw-display);
  line-height: 1.3;
  letter-spacing: var(--ls-display);
  color: #fff;
}

.stat {
  padding-top: 0;
  border-top: none;
}

.stat__value {
  display: table;
  font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem);
  font-weight: var(--fw-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.stat__value::before {
  content: "";
  display: table-caption;
  caption-side: top;
  height: 3px;
  margin-bottom: 0.85rem;
  background: var(--teal-400);
}

.stat__value sup {
  font-size: 0.42em;
  font-weight: var(--fw-medium);
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.06em;
}

.stat__label {
  display: block;
  margin-top: var(--sp-4);
  max-width: 22ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}

.stat__sub {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Dark variant */
.stat-band--dark .stat__value {
  color: var(--white);
}

.stat-band--dark .stat__label {
  color: var(--d-text);
}

.stat-band--dark .stat__sub {
  color: var(--d-text-muted);
}

@media (max-width: 900px) {
  .stat-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-5);
  }
}

@media (max-width: 480px) {
  .stat-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   20. Why AGeqnies - insight bento, and SLA commitments

   Square cards on the editorial black field. Resting state shows the
   visual. Hover slides that visual off to the left and the body in from
   the right, leaving only the solid card colour.
   -------------------------------------------------------------------------- */

.why__intro {
  max-width: 22rem;
  margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.25rem);
}

.why-bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
}

.why-bento__card {
  --why-slide: 1.05s var(--ease-out);
  position: relative;
  overflow: hidden;
  min-height: 23rem;
  aspect-ratio: 5 / 6;
  height: auto;
  border-radius: 0;
  background: #fff;
  color: #111;
  outline: none;
  cursor: default;
}

.why-bento__card:focus-visible {
  box-shadow: 0 0 0 2px var(--teal-500);
}

.why-bento__card--tenure {
  background: #eaf3f5;
}

/* Wash cards keep black type even inside `.section--ink`, which otherwise
   paints every h3 white. */
.why-bento__card--wash .why-bento__eyebrow,
.why-bento__card--wash .why-bento__title {
  color: #111;
}

.why-bento__card--wash .why-bento__body {
  color: #1a1a1a;
}

.why-bento__card--photo {
  background: linear-gradient(180deg, #1a1e26 0%, #0c0e12 48%, #07080b 100%);
  color: #fff;
}

.why-bento__card--photo .why-bento__eyebrow,
.why-bento__card--photo .why-bento__title {
  color: #fff;
}

.why-bento__card--photo .why-bento__body {
  color: var(--ed-text);
}

.why-bento__head {
  position: relative;
  z-index: 2;
  padding: 1.45rem 1.4rem 1.1rem;
}

.why-bento__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heading);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
}

.why-bento__title {
  margin: 0.55rem 0 0;
  max-width: 18ch;
  font-size: clamp(1.6rem, 1.28rem + 1.15vw, 2.15rem);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  line-height: 1.12;
  color: #111;
}

.why-bento__body {
  position: absolute;
  left: 1.45rem;
  right: 1.45rem;
  top: 100%;
  margin: 0.35rem 0 0;
  max-width: 36ch;
  font-size: 1rem;
  line-height: var(--lh-relaxed);
  color: #1a1a1a;
}

.why-bento__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  will-change: transform;
  transition: transform var(--why-slide);
}

.why-bento__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.why-bento__card--photo .why-bento__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 14, 0.62) 0%,
    rgba(8, 10, 14, 0.28) 34%,
    rgba(8, 10, 14, 0.08) 62%,
    rgba(8, 10, 14, 0) 100%
  );
}

.why-bento__card--ops .why-bento__visual img {
  object-position: 50% 48%;
}

.why-bento__card--licence .why-bento__visual img {
  object-position: 18% 42%;
}

.why-bento__card--tenure .why-bento__visual {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #eaf3f5 28%,
    #7ed4d6 64%,
    var(--teal-500) 100%
  );
}

.why-bento__card--account .why-bento__visual {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f4eaff 26%,
    #c084fc 64%,
    #7c3aed 100%
  );
}

.why-bento__card--wash .why-bento__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.why-bento__card--expertise .why-bento__visual img {
  object-position: 58% 42%;
}

@media (hover: none) {
  .why-bento__body {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0.85rem 0 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .why-bento__body {
    opacity: 0;
    transform: translateX(2.5rem);
    pointer-events: none;
    transition:
      transform 0.9s var(--ease-out) 0.12s,
      opacity 0.7s ease 0.1s;
  }

  .why-bento__card:hover .why-bento__visual,
  .why-bento__card:focus-within .why-bento__visual {
    transform: translateX(-100%);
  }

  .why-bento__card:hover .why-bento__body,
  .why-bento__card:focus-within .why-bento__body {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .why-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
  }
}

@media (min-width: 1024px) {
  .why-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .why-bento__card {
    min-height: 0;
  }

  .why-bento__head {
    padding: 1.7rem 1.65rem 1.2rem;
  }

  .why-bento__body {
    left: 1.65rem;
    right: 1.65rem;
  }

  .why-bento__title {
    max-width: 18ch;
  }
}

.why-rail__meter {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .why-bento__body {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .why-bento__visual,
  .why-bento__card:hover .why-bento__visual,
  .why-bento__card:focus-within .why-bento__visual {
    transform: none;
    transition: none;
  }
}

.js-reveal .why-bento.reveal-group > .why-bento__card {
  opacity: 0;
  transform: translate3d(-18%, 0, 0);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
}

.js-reveal .why-bento.reveal-group.is-in > .why-bento__card {
  opacity: 1;
  transform: none;
}

.js-reveal .why-bento.reveal-group.is-in > .why-bento__card:nth-child(1) { transition-delay: 0ms; }
.js-reveal .why-bento.reveal-group.is-in > .why-bento__card:nth-child(2) { transition-delay: 110ms; }
.js-reveal .why-bento.reveal-group.is-in > .why-bento__card:nth-child(3) { transition-delay: 220ms; }
.js-reveal .why-bento.reveal-group.is-in > .why-bento__card:nth-child(4) { transition-delay: 330ms; }
.js-reveal .why-bento.reveal-group.is-in > .why-bento__card:nth-child(5) { transition-delay: 440ms; }
.js-reveal .why-bento.reveal-group.is-in > .why-bento__card:nth-child(6) { transition-delay: 550ms; }

@media (max-width: 1080px) {
  .why-bento {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.15rem;
  }

  .why-bento::-webkit-scrollbar {
    display: none;
  }

  .why-bento__card {
    flex: 0 0 calc(100% - 2.65rem);
    width: calc(100% - 2.65rem);
    min-height: 24.5rem;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }

  .why-rail__meter {
    display: block;
    position: relative;
    height: 2px;
    margin-top: 1.35rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
  }

  .why-rail__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 28%;
    background: #fff;
    transform: translateX(0);
    will-change: transform, width;
  }
}

/* --------------------------------------------------------------------------
   20b. Turnkey stage bento

   Four square cards on editorial black: one column on small screens,
   2x2 on tablet, 4x1 on desktop. Rest shows the short four-stage line
   on a still; hover slides the still away and brings in the longer
   stage copy (the old "What actually happens" section).
   -------------------------------------------------------------------------- */

.stage-bento {
  --stage-slide: 1.05s var(--ease-out);
  list-style: none;
  margin: 0;
  margin-top: var(--sp-9);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

.stage-bento__card {
  --stage-accent: var(--teal-600);
  --stage-wash: #c8eef0;
  position: relative;
  overflow: hidden;
  min-height: 26rem;
  aspect-ratio: 3 / 4;
  background: var(--stage-wash);
  color: #000;
  outline: none;
  cursor: default;
}

.stage-bento__card:nth-child(1) {
  --stage-accent: #0d8f93;
  --stage-wash: #c5eef0;
}

.stage-bento__card:nth-child(2) {
  --stage-accent: #2b6cb0;
  --stage-wash: #d4e4f8;
}

.stage-bento__card:nth-child(3) {
  --stage-accent: #0d8a73;
  --stage-wash: #d0f3e8;
}

.stage-bento__card:nth-child(4) {
  --stage-accent: #5a52d4;
  --stage-wash: #e2dff8;
}

.stage-bento__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 6px;
  background: var(--stage-accent);
  pointer-events: none;
}

.stage-bento__card:focus-visible {
  box-shadow: 0 0 0 2px var(--teal-400);
}

.stage-bento__head {
  position: relative;
  z-index: 2;
  padding: 1.45rem 1.4rem 1.2rem;
}

.stage-bento__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--stage-accent);
}

.stage-bento__title {
  margin: 0.45rem 0 0;
  max-width: 14ch;
  font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  line-height: 1.12;
  color: #000;
}

.stage-bento__lede {
  margin: 0.7rem 0 0;
  max-width: 28ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: #000;
}

.stage-bento__body {
  position: absolute;
  left: 1.45rem;
  right: 1.45rem;
  top: 100%;
  margin: 0.2rem 0 0;
  max-width: 38ch;
  font-size: 1rem;
  line-height: var(--lh-relaxed);
  color: #000;
}

.stage-bento__label {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--stage-accent);
}

.stage-bento__body p:last-of-type {
  margin: 0;
}

.stage-bento__facts {
  margin: 0;
  display: grid;
  gap: 0.42rem;
}

.stage-bento__facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
}

.stage-bento__facts dt {
  margin: 0;
  color: rgba(0, 0, 0, 0.52);
  font-size: var(--fs-sm);
}

.stage-bento__facts dd {
  margin: 0;
  color: #111;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: right;
  white-space: nowrap;
}

.section--ink .stage-bento__facts dt {
  color: rgba(0, 0, 0, 0.52);
}

.section--ink .stage-bento__facts dd {
  color: #111;
}

.stage-bento__go {
  margin-top: 1.05rem;
  color: var(--teal-700);
}

.section--ink .stage-bento__go:not(.btn),
.section--ink .stage-bento__go:not(.btn):hover,
.section--ink .stage-bento .link-arrow {
  color: var(--stage-accent);
}

.section--ink .stage-bento__card,
.section--ink .stage-bento__body {
  color: #000;
}

.section--ink .stage-bento__title,
.section--ink .stage-bento h3 {
  color: #000;
}

.section--ink .stage-bento__lede,
.section--ink .stage-bento__body p {
  color: #000;
}

.section--ink .stage-bento__index,
.section--ink .stage-bento__label {
  color: var(--stage-accent);
}

.stage-bento__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  will-change: transform;
  transition: transform var(--stage-slide);
}

.stage-bento__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.stage-bento__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--stage-wash) 0%,
    color-mix(in srgb, var(--stage-wash) 92%, transparent) 26%,
    color-mix(in srgb, var(--stage-wash) 38%, transparent) 52%,
    transparent 76%
  );
}

.stage-bento__visual::after {
  content: "";
  position: absolute;
  width: 16rem;
  height: 16rem;
  right: -5rem;
  bottom: -4rem;
  z-index: 1;
  border-radius: 50%;
  background: var(--stage-accent);
  opacity: 0.18;
  pointer-events: none;
}

@media (hover: none) {
  .stage-bento__lede {
    display: none;
  }

  .stage-bento__body {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0.85rem 0 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .stage-bento__lede {
    transition: opacity 0.35s ease;
  }

  .stage-bento__body {
    opacity: 0;
    transform: translateX(2.5rem);
    pointer-events: none;
    transition:
      transform 0.9s var(--ease-out) 0.12s,
      opacity 0.7s ease 0.1s;
  }

  .stage-bento__card:hover .stage-bento__visual,
  .stage-bento__card:focus-within .stage-bento__visual {
    transform: translateX(-100%);
  }

  .stage-bento__card:hover .stage-bento__lede,
  .stage-bento__card:focus-within .stage-bento__lede {
    opacity: 0;
  }

  .stage-bento__card:hover .stage-bento__body,
  .stage-bento__card:focus-within .stage-bento__body {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

@media (min-width: 720px) {
  .stage-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .stage-bento__card {
    min-height: 0;
  }

  .stage-bento__head {
    padding: 1.7rem 1.65rem 1.25rem;
  }

  .stage-bento__body {
    left: 1.65rem;
    right: 1.65rem;
  }
}

@media (min-width: 1081px) {
  .stage-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .stage-bento__head {
    padding: 1.2rem 1.15rem 1rem;
  }

  .stage-bento__title {
    font-size: clamp(1.2rem, 0.95rem + 0.55vw, 1.5rem);
  }

  .stage-bento__body {
    left: 1.15rem;
    right: 1.15rem;
    font-size: var(--fs-sm);
  }

  .stage-bento--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .stage-bento--3 .stage-bento__head {
    padding: 1.45rem 1.35rem 1.1rem;
  }

  .stage-bento--3 .stage-bento__title {
    font-size: clamp(1.4rem, 1.05rem + 0.7vw, 1.85rem);
  }

  .stage-bento--3 .stage-bento__body {
    left: 1.35rem;
    right: 1.35rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-bento__lede {
    display: none;
  }

  .stage-bento__body {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0.85rem 0 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .stage-bento__visual,
  .stage-bento__card:hover .stage-bento__visual,
  .stage-bento__card:focus-within .stage-bento__visual {
    transform: none;
    transition: none;
  }
}

@media (max-width: 1080px) {
  .stage-bento {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: var(--sp-9);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.15rem;
  }

  .stage-bento::-webkit-scrollbar {
    display: none;
  }

  .stage-bento__card {
    flex: 0 0 calc(100% - 2.65rem);
    width: calc(100% - 2.65rem);
    min-height: 26rem;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   21. Client testimonials marquee

   Port of the FarmUI testimonials-with-marquee pattern onto the existing
   logo-strip animation (translateX -50%). Unlike the logo strips, this one
   does not pause on hover. Washed Pexels handshake (hands only) behind navy
   type. Avatars are initials placeholders — named customers are not given
   other people's stock faces.
   -------------------------------------------------------------------------- */

.quotes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 5.5rem);
}

.quotes__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.quotes__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: grayscale(0.18) contrast(1.04) brightness(1.1);
}

.quotes__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.74) 42%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

.quotes .container,
.quotes-marquee {
  position: relative;
  z-index: 2;
}

.quotes .section-head {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.quotes-marquee {
  --gap: 1.25rem;
}

.quotes-marquee .marquee__track {
  gap: var(--gap);
  padding-inline: var(--gap);
}

.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(36rem, 86vw);
  min-height: 18rem;
  margin: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: left;
  color: var(--heading);
  background: rgba(255, 255, 255, 0.7);
}

.quote-card__text {
  margin: 0;
  padding: 0;
  border: 0;
}

.quote-card__text p {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.28rem);
  font-weight: var(--fw-display);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--heading);
}

.quote-card__who {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--heading);
}

.quote-card__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-950));
  color: var(--teal-300);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}

.quote-card__name {
  display: block;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: var(--fw-display);
  line-height: 1.25;
  color: var(--heading);
}

.quote-card__role {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: var(--fw-display);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .quotes-marquee .marquee__track {
    flex-direction: column;
    align-items: stretch;
    max-width: 40rem;
    margin-inline: auto;
    gap: 2.5rem;
    padding-inline: 1.25rem;
  }

  .quotes-marquee .quote-card {
    width: 100%;
    min-height: 0;
    padding-inline: 0;
  }
}

/* --- SLA commitments ------------------------------------------------------

   Every figure here is published in the content pack. The severity is the row,
   the commitments are the cells, and nothing is drawn as a dashboard: an
   interface mockup of a portal the reader cannot log into was illustrating
   numbers that are perfectly capable of speaking for themselves. */

.sla {
  margin-block: 0;
  border-top: 1px solid var(--ed-line);
}

.sla__row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--sp-5) clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-bottom: 1px solid var(--ed-line);
}

.sla__sev-name {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color: var(--white);
}

.sla__sev-note {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ed-text-mute);
}

/* auto-fit rather than three fixed columns: at 390px three commitments side by
   side would set "Next business day" one word per line. */
.sla__commit {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-5) clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.sla__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ed-accent);
}

.sla__v {
  display: block;
  margin-top: var(--sp-3);
  font-size: clamp(1.0625rem, 0.98rem + 0.34vw, 1.25rem);
  font-weight: var(--fw-display);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  color: var(--white);
}

.sla__foot {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--ed-text-mute);
}

@media (max-width: 720px) {
  .sla__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   21. Flat card variants
   The page had ~70 bordered boxes. These carry the same information with a
   different silhouette: a rule instead of a frame, or a large index number.
   -------------------------------------------------------------------------- */

/* Rule on top, no surrounding border, no fill */
.card-flat {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-strong);
  background: none;
}

.card-flat__index {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}

.card-flat__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-h4);
}

.card-flat__body {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.card-flat__meta {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Number-led block, for outcome-style content */
.num-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.num-block__num {
  font-size: clamp(1.75rem, 1.47rem + 1.12vw, 2.375rem);
  font-weight: var(--fw-display);
  line-height: 1;
  color: var(--teal-400);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   22. Art layers
   The scene visuals live in /public/media/*.svg and are placed with <img> so
   they can be swapped for finished marketing artwork without touching markup.
   Their internal CSS animations still run, and each file honours
   prefers-reduced-motion on its own.
   -------------------------------------------------------------------------- */

.page-hero__art img,
.page-hero__art svg,
.pillar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame img {
  width: 100%;
  height: auto;
}

/* Logo wall: the same plates laid out as a grid instead of a moving strip.
   Used on the Partners page, where the point is to browse the whole set
   rather than watch it pass. */
.marquee[data-layout="grid"] {
  mask-image: none;
  -webkit-mask-image: none;
  overflow: visible;
}

.marquee[data-layout="grid"] .marquee__track {
  animation: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: var(--sp-5);
  row-gap: var(--sp-6);
  width: 100%;
}

.marquee[data-layout="grid"] .marquee__item {
  flex: initial;
}

/* In the grid the column defines the width, so the plate gives up its min-width
   and just centres inside whatever it is given. The horizontal padding is not
   decoration: without it a wide wordmark fills its column edge to edge, which
   makes the last one in a row look cropped at the container edge and leaves
   neighbours almost touching. */
.marquee[data-layout="grid"] .logo-plate {
  width: 100%;
  min-width: 0;
  padding: 0 var(--sp-3);
}

.marquee[data-layout="grid"] .logo-plate img {
  max-width: 100%;
}

/* Partner wall: Accenture-style logo grid.
   Infrastructure and Data Centre stay on ink (with a light halo so black
   wordmarks remain readable). Managed Security uses paper so dark marks
   (Fortinet, Juniper, Cisco) stay visible. The Partners page is not affected. */
.section--paper.partner-wall-section {
  background: var(--white);
}

.partner-wall-section .lead {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
}

.partner-wall {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}

.partner-wall + .partner-wall {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  padding-top: clamp(2rem, 3.5vw, 3.25rem);
  border-top: 1px solid var(--ed-line-soft);
}

.partner-wall__label {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--ed-text);
}

.partner-wall .marquee[data-layout="grid"] .marquee__track {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: clamp(1.75rem, 3vw, 3.25rem);
  justify-items: start;
}

.partner-wall .marquee[data-layout="grid"] .logo-plate {
  height: 80px;
  padding: 0;
  justify-items: start;
}

.partner-wall .logo-plate--image img:not([data-bg="own"]) {
  opacity: 0.96;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.section--ink .partner-wall .logo-plate--image img:not([data-bg="own"]) {
  filter: drop-shadow(0 0 0.8px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.22));
}

.section--ink .partner-wall .logo-plate--image:hover img:not([data-bg="own"]),
.section--paper .partner-wall .logo-plate--image:hover img:not([data-bg="own"]) {
  opacity: 1;
}

.section--ink .partner-wall .logo-plate--image:hover img:not([data-bg="own"]) {
  filter: drop-shadow(0 0 0.8px rgba(255, 255, 255, 1))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.28));
}

.section--paper .partner-wall .logo-plate--image img:not([data-bg="own"]) {
  filter: none;
  opacity: 1;
}

.section--paper .partner-wall .logo-plate__text,
.section--paper.partner-wall-section .partner-cat__list li {
  color: var(--heading);
}

.section--paper.partner-wall-section .partner-cat__list li {
  border-color: var(--border);
}

.partner-wall .logo-plate__text {
  color: var(--ed-text);
  text-align: left;
}

.partner-wall-section .partner-cat__list {
  margin-top: var(--sp-5);
}

.partner-wall-section .partner-cat__list li {
  background: transparent;
  border-color: var(--ed-line-soft);
  color: var(--ed-text);
}

/* Static fallback when a strip has too few items to justify a loop */
.marquee--static {
  mask-image: none;
  -webkit-mask-image: none;
}

.marquee--static .marquee__track {
  animation: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
}

/* 404 */
.notfound {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   23. Ink-context adjustments (homepage)

   The homepage runs on the editorial black ground, and two shared components
   need a different treatment there than they get on the navy pages. Scoped to
   `.section--ink` rather than changed at source, so contact.html and the inner
   pages keep the styling they were designed with.
   -------------------------------------------------------------------------- */

/* Pure white headings, not the --d-text-strong (#f2f8fa) the navy sections
   take. That value is a hair off white to stop headings glaring against a
   mid-navy ground; on #08090a it just reads grey next to the capability
   titles and the hero, which are white. */
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4,
.section--ink-2 h1,
.section--ink-2 h2,
.section--ink-2 h3,
.section--ink-2 h4 {
  color: var(--white);
}

/* The enquiry form loses its glass panel. A 22px radius over a blurred,
   shadowed translucent fill is the one piece of SaaS chrome that survived the
   rest of the page: on black it reads as a widget floating in front of the
   section rather than part of it. Flat fill, hairline border, small radius -
   the fields inside are unchanged. */
.section--ink .form-card {
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--ed-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Buttons come back to a 4px corner. The 6px the rest of the site uses is
   invisible on a light page and reads soft against the square hairline grid
   this page is built from - every rule, every photograph edge and every table
   cell here has a right angle. */
.section--ink .btn,
.section--ink-2 .btn {
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   24. Paper sections (homepage)

   The two light bands. They exist because sixty supplied client and partner
   logos are drawn for white, and because the company record - dates,
   registrations, licence numbers - reads like a document rather than like a
   statement. Headings on them are near-black, not the brand navy the inner
   pages use: on a page built from black, white and one teal, navy is a fourth
   colour, and it turns up in exactly the two places where the argument is
   evidence. Navy still carries the logo, the footer and every inner page.
   -------------------------------------------------------------------------- */

.section--paper h2,
.section--paper h3,
.section--paper .display-2,
.section--paper .display-3 {
  color: var(--ed-bg-2);
}

/* --------------------------------------------------------------------------
   25. Careers
   Same inner-page chrome as Solutions / Turnkey: ink ground, page-hero
   lockup, display-3 sections, teal ticks, closing cta-banner.
   -------------------------------------------------------------------------- */

.page-hero--careers {
  background: var(--ed-bg);
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 6.5rem);
}

.page-hero--careers .crumbs {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.95rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  max-width: min(34rem, 100%);
}

.page-hero--careers .page-hero__title {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.35rem);
  max-width: 14ch;
}

.page-hero--careers .page-hero__lead {
  max-width: 42ch;
}

.careers-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.careers-collage {
  position: relative;
  min-height: clamp(22rem, 16rem + 22vw, 32rem);
}

.careers-collage__shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ed-bg-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.careers-collage__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.careers-collage__shot--a {
  position: absolute;
  left: 0;
  top: 12%;
  width: 38%;
  height: 62%;
  z-index: 2;
}

.careers-collage__shot--b {
  position: absolute;
  right: 0;
  top: 0;
  width: 66%;
  height: 58%;
}

.careers-collage__shot--c {
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 54%;
  height: 46%;
  z-index: 3;
}

.careers-band {
  margin: clamp(2.5rem, 1.4rem + 4vw, 4.5rem) 0 0;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Centred, which needs the block centred as well as the text - text-align on
   its own would leave a centred column of words sitting against the left
   gutter.

   74ch. Centred copy normally wants a tighter measure than ranged-left, since
   there is no straight left edge for the eye to return to, and this started at
   56ch for that reason. But once the type went up to 20px, 56ch left both
   paragraphs breaking to a short orphan line and split "fast-moving" across
   the first two. Widening evens the rag to four full lines each and keeps the
   compound intact, which buys back more than the shorter return travel cost. */
.careers-mission__copy {
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  max-width: 74ch;
  margin-inline: auto;
  text-align: center;
}

/* A step above --fs-lead, set here rather than by widening the token: --fs-lead
   drives every lead paragraph on the site, and this is the one block that is
   centred with nothing beside it, so it can carry more size without unbalancing
   anything. 20px at desktop against the 18px used elsewhere.

   The measure stays at 56ch and so tracks the size automatically - `ch`
   resolves against the element's own font-size, so the column widens with the
   type and the line length in characters does not change. */
.careers-mission__copy .lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

.careers-band img {
  display: block;
  width: 100%;
  height: clamp(16rem, 12rem + 22vw, 28rem);
  object-fit: cover;
}

#open-positions {
  background: #0d1114;
}

#apply {
  background: var(--ed-charcoal);
}

.careers-roles {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.role-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #151b1f;
  border: 1px solid #293137;
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.role-card__media {
  margin: 0;
  height: clamp(9.5rem, 7rem + 8vw, 12.5rem);
  overflow: hidden;
  background: #171d21;
}

.role-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.role-card__body {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.role-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 80% 62% at 0% 0%,
    rgba(53, 184, 187, 0.16),
    transparent 58%
  );
  pointer-events: none;
}

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

.role-card__strip {
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-bottom: 1.15rem;
  border-radius: 99px;
  background: var(--teal-400);
}

.role-card__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--teal-300);
}

.role-card__title {
  margin: 0.35rem 0 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: var(--ed-text);
}

.role-card__lede {
  margin: 0.75rem 0 0;
  max-width: 46ch;
  color: rgba(233, 242, 246, 0.72);
}

.role-card__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  margin-top: 1.75rem;
}

.role-card__sub {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--teal-300);
}

.role-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.role-card li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(233, 242, 246, 0.82);
}

.role-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--teal-400);
}

.role-card__go {
  margin-top: 1.75rem;
}

.careers-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.careers-pills li {
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--ed-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ed-text);
}

.apply-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #151b1f;
  border: 1px solid #293137;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.apply-card__plus {
  position: absolute;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--teal-300);
  background: #0d1114;
}

.apply-card__plus svg {
  display: block;
  width: 100%;
  height: 100%;
}

.apply-card__plus--tl { top: -0.7rem; left: -0.7rem; }
.apply-card__plus--tr { top: -0.7rem; right: -0.7rem; }
.apply-card__plus--bl { bottom: -0.7rem; left: -0.7rem; }
.apply-card__plus--br { bottom: -0.7rem; right: -0.7rem; }

.apply-card__copy {
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.apply-card__copy .display-3 {
  max-width: 12ch;
}

.apply-card__info {
  display: grid;
  gap: 0.35rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.apply-card__info li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.7rem 0;
}

.apply-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--teal-300);
}

.apply-card__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.apply-card__info li > span:not(.apply-card__icon) {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.apply-card__info strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ed-text);
}

.apply-card__info a,
.apply-card__info li > span:not(.apply-card__icon) > span {
  font-size: var(--fs-xs);
  color: rgba(233, 242, 246, 0.72);
}

.apply-card__form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: rgba(255, 255, 255, 0.035);
  border-top: 1px solid #293137;
  color-scheme: dark;
}

.apply-card .field input[type="date"] {
  color-scheme: dark;
}

@media (min-width: 900px) {
  .apply-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr);
  }

  .apply-card__form {
    border-top: 0;
    border-left: 1px solid #293137;
  }
}

@media (max-width: 900px) {
  .careers-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .careers-collage {
    min-height: 22rem;
  }

  .role-card__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   26. Homepage careers invite
   Dark split: badge + headline + white CTA on the left, rounded still
   on the right. Teal glow on the button stands in for the reference's
   purple wash so the band stays on AGQ tokens.
   -------------------------------------------------------------------------- */

.careers-invite {
  background: var(--ed-charcoal);
  padding-block: clamp(4rem, 2.5rem + 6vw, 7rem);
}

.careers-invite__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1.2rem + 4vw, 5.5rem);
  align-items: center;
}

.careers-invite__copy {
  max-width: 34rem;
}

.careers-invite .eyebrow {
  margin: 0 0 1.35rem;
}

.careers-invite__title {
  margin: 0;
  max-width: 16ch;
  color: #fff;
}

.careers-invite__lede {
  margin: 1.25rem 0 0;
  max-width: 38ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
}

.careers-invite__go {
  margin-top: 2rem;
}

.careers-invite__media {
  margin: 0;
  min-width: 0;
}

.careers-invite__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 28px;
}

@media (max-width: 900px) {
  .careers-invite__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .careers-invite__title {
    max-width: none;
  }

  .careers-invite__media img {
    border-radius: 22px;
  }
}

/* --------------------------------------------------------------------------
   About — Accenture company-page structure, Ageqnies tokens
   Black canvas, split hero (CNY photo + country lockup), accordion,
   centred CTA, large stats, office names, colour cards, year register.
   Teal accent, not Accenture purple. No invented headcount or leadership.
   -------------------------------------------------------------------------- */

.page-about {
  background: #0A0C1B;
  color: #fff;
}

html:has(.page-about) {
  background: #0A0C1B;
}

.page-about .site-footer {
  background: #0A0C1B;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* About: a day-to-night timelapse of the Kuala Lumpur skyline, with the page's
   own dusk still as both the base image and the video poster - so the first
   paint is the city rather than a black box while the clip buffers, and the
   handoff to video is a change of footage rather than of subject.

   Pulled down to 62%: the towers sit in the upper third of both the still and
   the clip, and centring the crop puts the headline straight across them. */
.page-hero--about .page-hero__media img,
.page-hero--about .page-hero__video {
  object-position: 50% 62%;
}

/* Dusk sky is much lighter than the other hero photos, so the veil has to
   carry more on the left where the headline sits. */
.page-hero--about .page-hero__veil {
  background: linear-gradient(
    100deg,
    rgba(6, 12, 28, 0.82) 0%,
    rgba(6, 12, 28, 0.58) 46%,
    rgba(6, 12, 28, 0.3) 100%
  );
}

/* The Chinese New Year photograph, moved out of the old split hero. It is a
   square crowded group shot, so it is capped well below the text measure -
   at full width it would read as the subject of the section rather than
   evidence inside it. */
.about-change__figure {
  margin: clamp(2rem, 1.2rem + 2vw, 3rem) 0 0;
  max-width: 560px;
}

.about-change__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.about-change__figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.about-change {
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
}

.about-change__title {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.15rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 16ch;
}

.about-change__lede {
  margin: 1.35rem 0 0;
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
}

.about-acc {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  border-top-color: rgba(255, 255, 255, 0.18);
}

.about-acc .faq__item {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.about-acc .faq__q {
  padding: 1.35rem 0;
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.about-acc .faq__q:hover {
  color: var(--teal-300);
}

.about-acc .faq__icon {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.about-acc .faq__icon::before,
.about-acc .faq__icon::after {
  background: #fff;
}

.about-acc .faq__q:hover .faq__icon {
  border-color: transparent;
}

.about-acc .faq__q[aria-expanded="true"] .faq__icon {
  background: transparent;
  border-color: transparent;
}

.about-acc .faq__q[aria-expanded="true"] .faq__icon::before {
  background: #fff;
}

.about-acc .faq__a p {
  color: rgba(255, 255, 255, 0.96);
  max-width: 62ch;
}

.about-acc .faq__a a {
  color: var(--teal-300);
}

.about-acc .faq__a a:hover {
  color: #fff;
}

.about-cta {
  text-align: center;
  padding: clamp(4.5rem, 3rem + 6vw, 7.5rem) var(--gutter);
  background: #4286f5;
}

.about-cta__title {
  margin: 0 auto;
  max-width: 18em;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.65rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
}

.about-cta__body {
  max-width: 38em;
  margin: 1.15rem auto 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.about-cta__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.85rem;
  padding: 0.72rem 1.85rem;
  min-height: 2.75rem;
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  line-height: 1.2;
}

.about-cta__go:hover {
  background: #fff;
  border-color: #fff;
  color: #4286f5;
}

.about-cta__go:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.about-mv.work-band {
  padding-bottom: 0;
  background: #0A0C1B;
}

.js-reveal .about-mv .work-card__icon,
.js-reveal .about-mv .work-card__title,
.js-reveal .about-mv .work-card__body {
  opacity: 1;
  transform: none;
}

.about-mv .work-card__veil {
  background: linear-gradient(
    180deg,
    rgba(6, 10, 16, 0.28) 0%,
    rgba(6, 10, 16, 0.5) 48%,
    rgba(6, 10, 16, 0.62) 100%
  );
}

.page-about .about-mv .work-card__icon {
  color: #fff;
}

.page-about .about-mv .work-card__title,
.page-about .about-mv .work-card__body {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.page-about .about-mv .work-card__body {
  color: rgba(255, 255, 255, 0.96);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
}

.about-years {
  padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0;
}

.about-years__title,
.about-licences__title {
  margin: 0;
  font-size: clamp(1.85rem, 1.25rem + 2vw, 2.85rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 16ch;
}

.about-years__list {
  list-style: none;
  margin: clamp(2.25rem, 1.4rem + 3vw, 3.5rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.about-years__list li {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  gap: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  align-items: baseline;
  padding: 1.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.about-years__list time {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.about-years__list p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.96);
}

@media (max-width: 620px) {
  .about-years__list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    padding: 1.05rem 0;
  }
}

.about-licences {
  padding: 0 0 clamp(4.5rem, 2.4rem + 6vw, 7.5rem);
}

.about-licences__lede {
  margin: 1rem 0 0;
  max-width: 42ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
}

.about-lic {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(2.25rem, 1.4rem + 3vw, 3.5rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.about-lic li {
  padding: 1.85rem 1.75rem 1.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.about-lic li:nth-child(odd) {
  padding-right: 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.about-lic li:nth-child(even) {
  padding-left: 2rem;
}

.about-lic__mark {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-300);
}

.about-lic__code {
  margin: 0.7rem 0 0;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.about-lic__note {
  margin: 0.45rem 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
  .about-lic {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-lic li,
  .about-lic li:nth-child(odd),
  .about-lic li:nth-child(even) {
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}