/* =========================================================================
   1. TOKENS — same brand palette as the rest of the Risk Management page
   family (near-black "control room" mood, cool sage-grey as the one light
   surface). Every section below is a fresh layout built on top of this.
   ========================================================================= */
/* --------------------------------------------------------
         Local names mapped onto the shared design system in
         css/main.css. No colour, font or size is defined here —
         edit the --qw-* tokens in main.css to restyle the site.
         -------------------------------------------------------- */
:root {
  --void: var(--qw-paper);
  --void-2: var(--qw-paper-2);
  --steel: var(--qw-card);
  --steel-2: var(--qw-paper-2);
  --mist: var(--qw-paper-2);
  --ink: var(--qw-ink);
  --ink-60: var(--qw-ink-60);
  --ink-35: var(--qw-ink-35);
  --dark-ink: var(--qw-navy);
  --dark-60: var(--qw-navy-72);
  --rule: var(--qw-line);
  --dark-void: var(--qw-navy);
  --dark-steel: var(--qw-navy-2);
  --on-dark: var(--qw-on-dark);
  --on-dark-60: var(--qw-on-dark-60);
  --on-dark-35: var(--qw-on-dark-35);
  --on-dark-rule: var(--qw-line-dark);
  --g1: var(--qw-violet);
  --g2: var(--qw-blue);
  --g3: var(--qw-cyan);
  --g4: var(--qw-mint);
  --grad: var(--qw-grad);
  --grad-v: var(--qw-grad-v);
  --d-xl: var(--qw-fs-hero);
  --d-l: var(--qw-fs-h2);
  --d-m: var(--qw-fs-h3);
  --body: var(--qw-fs-body);
  --shell: var(--qw-shell);
  --r: var(--qw-r);
  --ease: var(--qw-ease);
}

/* =========================================================================
   2. BASE
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  overflow-x: hidden;
  font: 400 var(--body) / var(--qw-lh-body) var(--qw-font-ui);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--qw-font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h1 {
  font-size: var(--d-xl);
}
h2 {
  font-size: var(--d-l);
}
h3 {
  font-size: var(--d-m);
  line-height: 1.25;
}
p {
  margin: 0 0 1.05em;
  max-width: 65ch;
}
p:last-child {
  margin-bottom: 0;
}
:focus-visible {
  outline: 2px solid var(--g3);
  outline-offset: 3px;
  border-radius: 5px;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}
.sec {
  padding: var(--qw-pad-section) 0;
}
.sec--tight {
  padding-top: 0;
}
.on-light {
  color: var(--dark-ink);
}
.dim {
  color: var(--ink-60);
}
.dim-light {
  color: var(--dark-60);
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--qw-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g3);
  margin-bottom: 1.1rem;
}
.mark::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
}

/* --- Scroll reveal: fade + rise, staggered by --i --- */
[data-rv] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
[data-rv].in {
  opacity: 1;
  transform: none;
}

/* --- Image frame: rounded, reveal-wipe on entry --- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--steel);
}
.frame > * {
  transform: scale(1.14);
  transition: transform 1.3s var(--ease);
}
.frame.in > * {
  transform: scale(1);
}
.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Image placeholder: every photo on this page is a stand-in slot
   (diagonal stripes + a line-art icon) so real photography can be dropped
   in later without touching any layout — swap the .img-slot markup for an
   <img>, keep the wrapper. --- */
.img-slot {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    135deg,
    var(--steel) 0 14px,
    var(--steel-2) 14px 28px
  );
}
.img-slot__icon {
  width: 20%;
  max-width: 46px;
  height: auto;
  color: var(--ink-35);
}
/* --- Icon tile: replaces a photo slot with a graphic instead — a
   gradient-filled circle holding a line-art icon over a soft two-tone
   glow, so sections that don't have real photography read as designed,
   not unfinished. Reused across Overview, Flow, Chain, Gallery,
   Resilience, Editorial and Close. Cycle --g1..--g4 per tile (nth-child)
   so a row of tiles isn't one flat repeated colour. --- */
.itile {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1.2rem;
  background:
    radial-gradient(
      120% 100% at 20% 15%,
      rgba(130, 62, 231, 0.16),
      transparent 60%
    ),
    radial-gradient(
      120% 100% at 85% 85%,
      rgba(63, 238, 215, 0.14),
      transparent 60%
    ),
    var(--dark-steel);
}
.itile__ring {
  position: relative;
  width: clamp(44px, 22%, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
}
.itile__ring::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--qw-cyan);
  opacity: 0.7;
  animation: itile-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes itile-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.itile__icon {
  width: 46%;
  height: 46%;
  aspect-ratio: 1;
  color: var(--dark-void);
}
.itile__label {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--on-dark-60);
  max-width: 20ch;
}
.img-slot--fill {
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-rv] {
    opacity: 1;
    transform: none;
  }
  .frame > * {
    transform: none;
  }
}

/* =========================================================================
   4. HERO — radar sweep over a photo slot, plus a cursor-reactive glow.
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  padding: 8rem 0 4rem;
  background: var(--dark-void);
  color: var(--on-dark);
}
.hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__img .img-slot,
.hero__img img {
  filter: brightness(0.7);
}
.hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 60% at 50% 42%,
    rgba(12, 23, 48, 0.55) 0%,
    var(--dark-void) 78%
  );
}
#radar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.9;
}
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    220px 220px at var(--mx, 50%) var(--my, 40%),
    rgba(63, 238, 215, 0.14),
    transparent 70%
  );
}
.hero__in {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin-inline: auto;
}
.hero h1 {
  max-width: 18ch;
  margin-inline: auto;
}
.hero h1 .g {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  margin: 1.8rem auto 0;
  max-width: 56ch;
  color: var(--on-dark-60);
  font-size: clamp(1rem, 1.05vw, 1.14rem);
}
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.8rem;
  font-size: 0.82rem;
  color: var(--on-dark-35);
}
.hero__cue i {
  width: 34px;
  height: 1px;
  background: var(--grad);
}

/* =========================================================================
   5. OVERVIEW — lede text one side, a tilting bento of three photo slots on
   the other. The tilt responds to the pointer (perspective transform) —
   a distinct micro-interaction from the particle field used later on, so
   the page doesn't lean on one trick throughout.
   ========================================================================= */
.ov {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.ov--rev {
  grid-template-columns: 1.05fr 0.95fr;
}
.ov--rev .ov__art {
  order: -1;
}
.ov__art {
  perspective: 1400px;
}
.ov__art-in {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  height: clamp(320px, 40vw, 480px);
  transition: transform 0.35s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.ov__art-in .frame {
  height: 100%;
}
/* Overview's bento collapses to a single photo — one frame filling
         the whole tilting area instead of the usual three-tile split. */
.ov__art-in--single {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.ov__art-in .frame:first-child {
  grid-row: 1 / 3;
}
@media (max-width: 992px) {
  .ov,
  .ov--rev {
    grid-template-columns: 1fr;
  }
  .ov--rev .ov__art {
    order: 0;
  }
  .ov__art {
    order: -1;
  }
  .ov__art-in {
    height: clamp(280px, 70vw, 380px);
  }
}

/* =========================================================================
   7. FLOW — "A Structured Approach": three cards on a rail that fills in as
   the section scrolls through view (no step numbers — the moving line
   itself implies sequence).
   ========================================================================= */
.flow {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.flow__rail {
  display: none;
}
.flow__rail-fill {
  height: 100%;
  width: 0%;
  background: var(--grad);
  transition: width 0.2s linear;
}
.flow__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.fcard {
  position: relative;
  margin-top: 1.6rem;
  padding: 2.2rem 1.4rem 1.6rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--void), var(--void)) padding-box,
    var(--grad) border-box;
}
.fcard__dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -21px);
  background: var(--void);
  border: 2px solid var(--rule);
  transition: border-color 0.4s var(--ease);
}
.fcard.in .fcard__dot {
  border-color: var(--g3);
  box-shadow: 0 0 0 4px rgba(63, 187, 231, 0.16);
}
.fcard .frame {
  aspect-ratio: unset;
  overflow: visible;
  background: none;
  margin-bottom: 1.2rem;
}
.fcard .itile {
  background: none;
  padding: 0;
  width: auto;
  height: auto;
}
.fcard .itile__ring {
  width: clamp(52px, 20%, 68px);
}
.fcard p {
  color: var(--ink-60);
  font-size: 0.98rem;
}
@media (max-width: 992px) {
  .flow__rail {
    display: none;
  }
  .flow__row {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

/* =========================================================================
   8. EXPERTISE ACCORDION — click a category, the aside photo crossfades to
   match; single panel held in a bordered frame so it reads as one unit.
   ========================================================================= */
.accwrap {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.acc {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--qw-space-lg);
  align-items: start;
}
.acc__list {
  border-top: 1px solid var(--rule);
}
.acc__item {
  border-bottom: 1px solid var(--rule);
}
.acc__btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  cursor: pointer;
}
.acc__btn h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  transition: color 0.3s var(--ease);
}
.acc__item.open .acc__btn h3 {
  color: transparent;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.acc__plus {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
}
.acc__plus::before,
.acc__plus::after {
  content: "";
  position: absolute;
  background: var(--ink-60);
  transition:
    transform 0.35s var(--ease),
    background 0.3s var(--ease);
}
.acc__plus::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
.acc__plus::after {
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}
.acc__item.open .acc__plus::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.acc__item.open .acc__plus::before {
  background: var(--g3);
}
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.acc__panel > div {
  overflow: hidden;
}
.acc__item.open .acc__panel {
  grid-template-rows: 1fr;
}
.acc__panel p {
  padding-bottom: 1.6rem;
  color: var(--ink-60);
  max-width: 60ch;
}
.acc__aside {
  position: sticky;
  top: clamp(6rem, 14vh, 9rem);
}
.acc__gauge {
  position: relative;
  height: clamp(260px, 36vh, 380px);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--rule);
  isolation: isolate;
}
.gauge__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background:
    radial-gradient(
      120% 100% at 50% 30%,
      rgba(63, 238, 215, 0.12),
      transparent 60%
    ),
    var(--dark-steel);
}
.gauge__face.on {
  opacity: 1;
}
.gauge__face__ring {
  position: relative;
  width: clamp(92px, 30%, 136px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-void);
  border: 1px solid var(--on-dark-rule);
}
.gauge__face__ring::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--g1),
    var(--g2),
    var(--g3),
    var(--g4),
    var(--g1)
  );
  opacity: 0.4;
  filter: blur(9px);
  animation: spin 9s linear infinite;
}
.gauge__face__icon {
  width: 42%;
  height: 42%;
  color: var(--g3);
}
@media (prefers-reduced-motion: reduce) {
  .gauge__face__ring::before {
    animation: none;
  }
}
.acc__gauge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(12, 23, 48, 0.1) 0%,
    rgba(12, 23, 48, 0.9) 100%
  );
}
.acc__gauge__txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.6rem;
  color: var(--on-dark);
}
.acc__gauge b {
  font-family: var(--qw-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--on-dark-35);
  display: block;
  margin-bottom: 0.4rem;
}
.acc__gauge span {
  font-size: 1.15rem;
  font-weight: 500;
}
@media (max-width: 992px) {
  .acc {
    grid-template-columns: 1fr;
  }
  .acc__aside {
    position: static;
    margin-top: 1.5rem;
  }
}

/* =========================================================================
   9. RESILIENCE — compact two-up (heading + small photo left, paragraphs
   right), sized to sit fully within one screen with no internal scroll.
   The vertical rail beside the paragraphs still fills via JS as the
   section crosses the viewport, purely as a decorative progress cue.
   ========================================================================= */
.resil {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.resil__pin {
  position: static;
}
.resil__pin h2 {
  max-width: 12ch;
}
.resil__pin p {
  margin-top: 1.2rem;
  color: var(--ink-60);
}
.resil__pin .frame {
  margin-top: 1.2rem;
  height: 170px;
}
.resil__col {
  position: relative;
  padding-left: 1.6rem;
}
.resil__col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rule);
}
.resil__rule {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: var(--grad-v);
  height: 0;
  transition: height 0.2s linear;
}
.rblk {
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
}
.rblk p {
  color: var(--ink-60);
}
@media (max-width: 992px) {
  .resil {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   10. EDITORIAL — Operational Risk as a magazine spread: a wide photo slot
   with a pull-quote card overlapping its lower edge, newspaper columns
   continuing below. Replaces the old flat text-only panel.
   ========================================================================= */
.editorial__media {
  aspect-ratio: 21/9;
}
.opflow {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 7vw, 5.5rem);
  padding: 0 10%;
  background:
    linear-gradient(180deg, rgba(12, 23, 48, 0.6), rgba(12, 23, 48, 0.82)),
    url(../img/futuristic-data-analysis-center-with-multiple-comp-2026-01-08-02-34-49-utc.jpg)
      center 90% / cover;
}
.opflow::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: var(--on-dark-rule);
}
.opflow__node {
  position: relative;
  flex: none;
  width: clamp(42px, 7vw, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
}
.opflow__node svg {
  width: 48%;
  height: 48%;
  color: var(--dark-void);
}
.editorial__panel {
  position: relative;
  z-index: 1;
  background: var(--dark-void);
  color: var(--on-dark);
  border-radius: 20px;
  padding: clamp(1.8rem, 4vw, 3rem);
  max-width: 62ch;
  margin: -3.5rem clamp(1rem, 5vw, 3.5rem) 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.editorial__panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.cols2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  column-count: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  column-rule: 1px solid var(--rule);
}
.cols2 p {
  color: var(--ink-60);
  break-inside: avoid;
  margin-bottom: 1.1em;
}
@media (max-width: 768px) {
  .editorial__panel {
    margin: -2.2rem 1rem 0;
  }
  .cols2 {
    column-count: 1;
  }
}

/* =========================================================================
   11. CYBER — Cyber and Technology Risk gets the biggest visual beat on the
   page: a large interactive particle network (nodes drift, link, and react
   to the pointer) standing in for a literal photograph, since "moving dots
   on hover" is a more fitting motif for this topic than any stock image.
   ========================================================================= */
.cyber {
  position: relative;
  overflow: hidden;
}
.cyber::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  background: radial-gradient(
    46% 60% at 18% 50%,
    rgba(63, 187, 231, 0.14) 0%,
    transparent 70%
  );
}
.cyberrow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--qw-space-lg);
  align-items: stretch;
}
.cyberpanel {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--steel);
  min-height: 340px;
}
.cyberpanel canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.cyber__body p {
  color: var(--ink-60);
}
@media (max-width: 992px) {
  .cyberrow {
    grid-template-columns: 1fr;
  }
  .cyberpanel {
    min-height: 240px;
    order: -1;
  }
}

/* =========================================================================
   12. CHAIN — Third-Party and Supply Chain Risk as a vertical zigzag: a
   spine down the middle fills as you scroll, cards alternate left/right
   instead of the numbered-step pattern this site avoids.
   ========================================================================= */
.chain {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.chain__spine {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--rule);
  transform: translateX(-50%);
  z-index: 0;
}
.chain__spine-fill {
  width: 100%;
  height: 0%;
  background: var(--grad-v);
  transition: height 0.2s linear;
}
.chain__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--qw-space-lg);
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.chain__item:last-child {
  margin-bottom: 0;
}
.chain__item--rev .chain__media {
  order: 2;
}
.chain__item--rev .chain__text {
  order: 1;
  text-align: right;
}
.chain__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--void);
  border: 2px solid var(--rule);
}
.chain__item.in .chain__dot {
  border-color: var(--g3);
  box-shadow: 0 0 0 4px rgba(63, 187, 231, 0.16);
}
.chain__media {
  aspect-ratio: 4/3;
}
.chain__text p {
  color: var(--ink-60);
}
@media (max-width: 992px) {
  .chain__spine {
    left: 22px;
  }
  .chain__item,
  .chain__item--rev {
    grid-template-columns: 1fr;
    padding-left: 3.2rem;
  }
  .chain__item--rev .chain__media,
  .chain__item--rev .chain__text {
    order: 0;
    text-align: left;
  }
  .chain__dot {
    left: 22px;
  }
}

/* =========================================================================
   13. GALLERY — pinned horizontal scroll for Business Continuity and
   Disaster Recovery: wrapper supplies scroll distance, track translates on
   X while the stage stays sticky; degrades to a swipe row under 860px.
   ========================================================================= */
.hg {
  background: var(--void-2);
}
.hg__wrap {
  position: relative;
  height: 300vh;
}
.hg__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hg__head {
  width: var(--shell);
  margin: 0 auto 2.2rem;
}
.hg__head h2 {
  max-width: 18ch;
}
.hg__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  will-change: transform;
  padding-inline: max(4vw, calc((100vw - var(--shell)) / 2));
}
.gcard {
  position: relative;
  flex: 0 0 clamp(300px, 34vw, 460px);
  height: clamp(380px, 52vh, 500px);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--rule);
  isolation: isolate;
}
.gcard:hover .img-slot--fill {
  transform: scale(1.06);
}
.gcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 23, 48, 0.1) 20%,
    rgba(12, 23, 48, 0.94) 100%
  );
}
.gcard__body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.9rem;
  color: var(--on-dark);
}
.gcard h3 {
  margin-bottom: 0.7rem;
}
.gcard p {
  color: var(--on-dark-60);
  font-size: 0.97rem;
}
.hg__rail {
  width: var(--shell);
  margin: 2.2rem auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--rule);
}
.hg__bar {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--grad);
}
@media (max-width: 992px) {
  .hg__wrap {
    height: auto;
  }
  .hg__stage {
    position: static;
    height: auto;
    padding: 4.5rem 0;
  }
  .hg__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none !important;
    padding-bottom: 1.2rem;
  }
  .gcard {
    flex-basis: 78vw;
    scroll-snap-align: center;
  }
  .hg__rail {
    display: none;
  }
}

/* =========================================================================
   14. CTA — spinning conic blur, flat gradient backdrop, a faint ambient
   particle drift reusing the same field the Cyber section uses.
   ========================================================================= */
.cta {
  position: relative;
  border-radius: 28px;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-dark);
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    160deg,
    var(--dark-steel) 0%,
    var(--dark-void) 72%
  );
}
.cta__net {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
}
.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  width: 140%;
  aspect-ratio: 1;
  z-index: -1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--g1),
    var(--g2),
    var(--g3),
    var(--g4),
    var(--g1)
  );
  opacity: 0.2;
  filter: blur(60px);
  animation: spin 24s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta::before {
    animation: none;
  }
}
/* content sits above the backdrop layers; the two absolutely
         positioned layers must keep their own positioning */
.cta > *:not(.cta__bg):not(.cta__net) {
  position: relative;
  z-index: 1;
}
.cta p {
  margin: 1.2rem auto 0;
  max-width: 74ch;
  color: var(--on-dark-60);
}
.cta p.hi {
  color: var(--on-dark);
}
@media (max-width: 768px) {
  .cta .btn {
    margin-top: 1.2rem;
  }
}

/* =========================================================================
   15. FOOTER
   ========================================================================= */
.cyberpanel {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--steel);
  min-height: 380px;
}
.cyberpanel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: transform 0.8s var(--ease);
}

.gcard:hover .gcard__img {
  transform: scale(1.06);
}