/* ===== Oasis Digital — Design Tokens ===== */
:root {
  --cream: #F6FFEB;
  --cream-deep: #EAF7D9;
  --lime: #ACF683;
  --mint: #83ECA2;
  --green: #39D77E;
  --green-deep: #21B56A;
  --navy: #214889;
  --navy-deep: #142C57;
  --blue: #2861B5;
  --sky: #6193DD;

  --ink: #14294D;
  --ink-soft: #43557A;
  --white: #FFFFFF;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(20, 41, 77, 0.06);
  --shadow-md: 0 12px 32px rgba(20, 41, 77, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 41, 77, 0.16);

  --container: 1180px;
  --header-h: 78px;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
section { position: relative; }

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

/* ===== Custom cursor ===== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3000;
  will-change: transform;
  transition: opacity 0.25s ease;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(57, 215, 126, 0.9);
}
/* Fixed 78px box scaled down to its resting size, so hover states change only
   `transform` — the ring follows the pointer every frame and must stay
   composited. JS writes --cx/--cy; the scale is owned by CSS. */
.cursor-ring {
  --ring-scale: 0.436; /* 34 / 78 */
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 50%;
  border: 1.5px solid rgba(57, 215, 126, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(var(--ring-scale));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease, border-color 0.3s ease, opacity 0.25s ease;
}
.cursor-ring.is-active {
  --ring-scale: 0.718; /* 56 / 78 */
  background: rgba(57, 215, 126, 0.14);
  border-color: rgba(131, 236, 162, 0.9);
}
.cursor-ring.has-label {
  --ring-scale: 1;
  background: rgba(57, 215, 126, 0.9);
  border-color: transparent;
}
/* Counter-scale the label so it stays a constant size inside the ring. */
.cursor-ring .cursor-label { transform: scale(calc(1 / var(--ring-scale))); }
.cursor-ring.is-down { transform-origin: center; border-color: var(--lime); }
.cursor-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-deep);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.cursor-ring.has-label .cursor-label { opacity: 1; }

/* Only suppress the native cursor once ours is actually running. */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor .tilt { cursor: none; }
/* Text-entry fields keep a real caret — hiding it hurts usability. */
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor select { cursor: auto; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ===== Preloader ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: all;
}
.preloader.is-done { pointer-events: none; }
.preloader.is-removed { display: none; }

.preloader-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.preloader-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.preloader-ui.is-hidden { opacity: 0; transform: scale(1.06); }

.preloader-logo {
  height: 42px;
  width: auto;
  opacity: 0;
  animation: preLogoIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes preLogoIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.preloader-bar {
  width: min(240px, 46vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--mint));
  border-radius: 2px;
}
.preloader-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
}

/* Nothing behind the veil should scroll while it is up. */
body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .preloader-logo { animation: none; opacity: 1; }
}

/* ===== Progress bar ===== */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--green), var(--navy));
  z-index: 1000;
  /* Driven every scroll frame, so this must not touch layout. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s ease-out;
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 900;
  display: flex;
  align-items: center;
  /* Transparent over the dark hero; solidifies to cream once scrolled. */
  background: transparent;
  border-bottom: 1px solid transparent;
  /* Paint-only transition. The header keeps a constant height: resizing it on
     scroll animated layout on every threshold crossing, for very little. */
  transition: background 0.35s ease, box-shadow 0.35s ease,
              border-color 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header.scrolled {
  box-shadow: var(--shadow-sm);
  background: rgba(246, 255, 235, 0.92);
  border-bottom-color: rgba(33, 72, 137, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* ===== Brand mark: live orb + sheen sweep ===== */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  perspective: 600px;
}

/* Pulsing gradient orb that reads as the "signal" the logo sits on. */
.brand-orb {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(from 0deg, var(--green), var(--sky), var(--lime), var(--green));
  animation: orbSpin 6s linear infinite;
}
/* Punch out the centre so it reads as a ring, not a disc. */
.brand-orb::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--cream);
  transition: background 0.3s ease;
}
.brand-orb::after {
  content: '';
  position: absolute;
  inset: 8.5px;
  border-radius: 50%;
  background: var(--green);
  animation: orbPulse 2.4s ease-in-out infinite;
}

@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.65; }
}

.brand-logo-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.brand-logo { height: 34px; width: auto; display: block; transition: opacity 0.3s ease; }
/* Two lockups stacked: white over the dark hero, navy once the header solidifies. */
.brand-logo-light { position: absolute; inset: 0; }
.site-header .brand-logo-dark { opacity: 0; }
.site-header .brand-logo-light { opacity: 1; }
.site-header.scrolled .brand-logo-dark { opacity: 1; }
.site-header.scrolled .brand-logo-light { opacity: 0; }

/* Light sweep that periodically travels across the wordmark. */
.brand-sheen {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: sheenSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheenSweep {
  0%, 62% { left: -60%; }
  88%, 100% { left: 125%; }
}

.brand:hover .brand-logo-wrap { transform: rotateY(-12deg) rotateX(6deg) translateZ(6px); }
.brand:hover .brand-orb { animation-duration: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .brand-orb, .brand-orb::after, .brand-sheen { animation: none; }
  .brand-sheen { opacity: 0; }
}

.main-nav { display: flex; align-items: center; gap: 24px; }
.nav-link {
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  /* Light over the dark hero; the .scrolled rules below flip it back. */
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--green);
  border-radius: 2px;
  /* Scale rather than width: transform is composited, width relayouts. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.site-header.scrolled .nav-link { color: var(--ink-soft); }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.active { color: var(--navy); }

/* The orb's punched-out centre must match whatever sits behind the header. */
.brand-orb::before { background: #08122a; }
.site-header.scrolled .brand-orb::before { background: var(--cream); }

.header-actions { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  /* Hidden on desktop: the inline nav already lists every destination, so the
     menu button there just duplicated it. It returns below 980px, where the
     inline nav is hidden and it becomes the only way to navigate. */
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
  margin: 0 auto;
}
.site-header.scrolled .nav-toggle span { background: var(--navy); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green);
  color: var(--navy-deep);
  box-shadow: 0 10px 24px rgba(57, 215, 126, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(57, 215, 126, 0.45); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(33, 72, 137, 0.35);
}
.btn-outline:hover { background: rgba(33, 72, 137, 0.06); transform: translateY(-2px); }
.btn-sm { padding: 11px 22px; font-size: 14px; }

/* ===== Hero (dark — the fluid shader supplies the light) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
  background: #08122a;
}
/* The shader renders the atmosphere now; these legacy layers would only
   muddy it, so they stay out of the paint path. */
.hero-rings,
.hero-blob { display: none; }

/* ===== Hero left rail ===== */
.hero-rail {
  position: absolute;
  left: 46px;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  pointer-events: none;
}
.hero-rail > * { pointer-events: auto; }
.hero-rail-line {
  width: 1px;
  flex: 1;
  max-height: 130px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.28));
}
.hero-rail-line-anim {
  background: linear-gradient(to bottom, rgba(255,255,255,0.28), transparent);
  position: relative;
  overflow: hidden;
}
/* Travelling pulse that reads as a scroll cue. */
.hero-rail-line-anim::after {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, transparent, var(--green), transparent);
  animation: railPulse 2.6s ease-in-out infinite;
}
@keyframes railPulse {
  0%   { top: -34px; }
  100% { top: 100%; }
}
.hero-rail-social { display: flex; flex-direction: column; gap: 14px; }
.hero-rail-social a {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}
.hero-rail-social a:hover { color: var(--mint); }
.hero-rail-scroll {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  writing-mode: vertical-rl;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rail-line-anim::after { animation: none; }
}
/* Below this the container gutter disappears and the rail would overlap copy. */
@media (max-width: 1240px) { .hero-rail { display: none; } }

.hero-3d-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Fade the scene out toward the copy column so orbiting nodes and ring lines
     never sit at full strength behind the headline. */
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 62%);
  mask-image: linear-gradient(to right, transparent 30%, #000 62%);
}
.hero-3d-wrap canvas { width: 100%; height: 100%; display: block; }

/* Full container width — capping .hero-inner itself made it centre in the
   viewport (it inherits .container's auto margins), which left a dead gutter on
   the left and shoved the headline into the 3D object. Cap the copy instead. */
.hero-inner { position: relative; z-index: 2; }
.hero-inner .eyebrow,
.hero-inner .hero-title,
.hero-inner .hero-sub,
.hero-inner .hero-actions,
.hero-inner .hero-foot { max-width: 720px; }

.eyebrow {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(57, 215, 126, 0.14);
  border: 1px solid rgba(131, 236, 162, 0.30);
  color: var(--mint);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 26px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-title {
  font-size: clamp(42px, 6.4vw, 82px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 22px;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
/* Solid accent, not a gradient: mint and lime are adjacent greens, so the
   gradient read as noise while costing the background-clip fragility below. */
.text-gradient { color: var(--mint); }

.hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.76);
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-foot { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.hero-foot strong { color: rgba(255, 255, 255, 0.9); }

/* Outline button needs to invert against the dark hero. */
.hero .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}
.hero .btn-outline:hover { background: rgba(255, 255, 255, 0.10); }
.hero-foot-link {
  color: var(--mint);
  font-weight: 700;
  border-bottom: 1px solid rgba(131, 236, 162, 0.4);
  transition: border-color 0.2s ease;
}
.hero-foot-link:hover { border-bottom-color: var(--mint); }

/* ===== Sections ===== */
.section { padding: 110px 0; }
.section-tint { background: var(--cream-deep); }

.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 14px;
}
.kicker-light { color: var(--mint); }

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-deep);
  line-height: 1.2;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 640px;
}
.section-head { max-width: 760px; margin-bottom: 56px; }

.body-text { font-size: 16px; color: var(--ink-soft); margin-bottom: 18px; }
.body-text strong { color: var(--navy); }
.text-white { color: var(--white); }
.text-light { color: rgba(255,255,255,0.78); }

.fine-print {
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: 0.7;
  font-style: italic;
  margin-top: 18px;
}

/* ===== Icon badges ===== */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge-navy { background: rgba(33, 72, 137, 0.10); color: var(--navy); }
.icon-badge-green { background: rgba(57, 215, 126, 0.16); color: var(--green-deep); }
.icon-badge-outline { background: var(--white); color: var(--navy); border: 1.5px solid rgba(33, 72, 137, 0.14); }
.icon-badge-sm { width: 30px; height: 30px; border-radius: 9px; background: rgba(57, 215, 126, 0.18); color: var(--green-deep); }
.icon-badge-sm svg { width: 16px; height: 16px; }

/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  /* Block, not flex-column: the number and its "+" suffix are inline spans that
     must sit on one line together. */
  display: block;
}
.stat-num {
  font-size: 40px;
  font-weight: 800;
  color: var(--navy-deep);
  display: inline;
}
.stat-suffix {
  font-size: 40px;
  font-weight: 800;
  color: var(--green-deep);
}
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
}
.about-grid .fine-print { grid-column: 2; margin-top: -4px; }

/* ===== Process Steps ===== */
.process-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.step-card {
  flex: 1;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px 26px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover { box-shadow: var(--shadow-md); }
.step-num {
  position: absolute;
  top: 24px; right: 26px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(33, 72, 137, 0.25);
}
.step-card .icon-badge { margin-bottom: 20px; }
.step-card h3 { font-size: 18px; font-weight: 700; color: var(--navy-deep); margin-bottom: 10px; }
.step-card p { font-size: 14.5px; color: var(--ink-soft); }
.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  color: rgba(33, 72, 137, 0.3);
  flex-shrink: 0;
}
.step-arrow svg { width: 20px; height: 20px; }

/* ===== Solutions ===== */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.solution-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.solution-card:hover { box-shadow: var(--shadow-md); }
.solution-card .icon-badge { margin-bottom: 20px; }
.solution-card h3 { font-size: 19px; font-weight: 700; color: var(--navy-deep); margin-bottom: 10px; }
.solution-card p { font-size: 14.5px; color: var(--ink-soft); }

/* ===== Immersive 3D walkthrough ===== */
.immersive {
  /* One viewport of scroll per space, plus lead-in and lead-out. */
  height: 700vh;
  position: relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, #0d1e3d 50%, var(--navy-deep) 100%);
}
.immersive-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
#immersiveCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Earth-zoom intro: scrubbed by scroll, hands over to the 3D corridor. */
.earth-zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s linear;
}
.immersive-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 108px 0 56px;
}
/* Scrim so the copy stays readable whatever flies past behind it. */
.immersive-ui::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 22, 46, 0.92) 0%, rgba(8, 22, 46, 0.55) 26%, transparent 52%),
    linear-gradient(to bottom, rgba(8, 22, 46, 0.75) 0%, transparent 24%);
  pointer-events: none;
}
.immersive-head,
.immersive-slides,
.immersive-progress { position: relative; z-index: 1; }
.immersive-head,
.immersive-slides,
.immersive-progress {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.immersive-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}

/* Slides stack in one place; only the active one is shown. Anchored low so the
   corridor stays visible through the middle of the frame. */
.immersive-slides {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: 34px;
}
.immersive-slide {
  /* Absolute children ignore the parent's flex alignment, so pin to the bottom. */
  position: absolute;
  left: 28px;
  bottom: 34px;
  max-width: 560px;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.immersive-slide.is-active { opacity: 1; transform: translateY(0); }
.immersive-num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--mint);
  margin-bottom: 12px;
}
.immersive-slide h3 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 14px;
}
.immersive-slide p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.immersive-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  overflow: hidden;
  /* The bar itself spans the container width, so strip the side padding. */
  padding: 0;
  max-width: calc(var(--container) - 56px);
}
.immersive-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--green), var(--sky));
  border-radius: 3px;
}

/* Without WebGL the corridor can't render — fall back to a readable stack. */
.immersive.no-webgl { height: auto; }
.immersive.no-webgl .immersive-sticky { position: static; height: auto; padding: 96px 0; }
.immersive.no-webgl .immersive-ui { position: static; padding: 0; gap: 40px; }
.immersive.no-webgl .immersive-slides { display: block; }
.immersive.no-webgl .immersive-slide {
  position: static;
  opacity: 1;
  transform: none;
  max-width: 620px;
  margin-bottom: 36px;
}
.immersive.no-webgl .immersive-progress { display: none; }

@media (max-width: 980px) {
  .immersive { height: 620vh; }
  .immersive-slide { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-slide { transition: none; }
}

/* ===== Core Specialization ===== */
.spec-section {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  overflow: hidden;
}
.spec-rings {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 90% 10%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(500px 500px at 10% 90%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}
.spec-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.spec-tagline {
  font-size: 20px;
  font-weight: 700;
  color: var(--mint);
  margin-top: 10px;
}
.check-list { display: flex; flex-direction: column; gap: 18px; }
.check-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  line-height: 1.55;
}
.check-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(57, 215, 126, 0.25);
  color: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-icon svg { width: 16px; height: 16px; }

/* ===== Chip row (IPS mena) ===== */
.chip-row { display: flex; flex-wrap: wrap; gap: 14px; }
.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 10px 20px 10px 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-deep);
  box-shadow: var(--shadow-sm);
}

/* ===== Why grid ===== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.why-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover { box-shadow: var(--shadow-md); }
.why-card .icon-badge { margin-bottom: 18px; }
.why-card h3 { font-size: 17.5px; font-weight: 700; color: var(--navy-deep); margin-bottom: 8px; }
.why-card p { font-size: 14px; color: var(--ink-soft); }

/* ===== Timeline (Process) ===== */
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(33,72,137,0.2) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.timeline-item {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 8px;
}
.timeline-dot {
  width: 52px; height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(33, 72, 137, 0.3);
}
.timeline-item:nth-child(odd) .timeline-dot { background: var(--green-deep); box-shadow: 0 8px 20px rgba(33, 178, 106, 0.3); }
.timeline-item h3 { font-size: 16.5px; font-weight: 700; color: var(--navy-deep); margin-bottom: 6px; }
.timeline-item p { font-size: 13.5px; color: var(--ink-soft); }

/* ===== Industries ===== */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.industry-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.industry-card:hover { box-shadow: var(--shadow-md); }
.industry-card span { font-size: 15px; font-weight: 700; color: var(--navy-deep); }

/* ===== 3D model showcase ===== */
.model-showcase {
  background: linear-gradient(140deg, var(--navy-deep) 0%, #10294b 55%, var(--navy) 100%);
  overflow: hidden;
}
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.model-copy .btn { margin-top: 12px; }

.model-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 62%, rgba(57, 215, 126, 0.16), transparent 62%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
#modelCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;   /* let the viewer own the drag instead of scrolling */
}
.model-showcase.is-dragging #modelCanvas { cursor: grabbing; }

.model-status,
.model-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  pointer-events: none;
}
.model-status { top: 50%; transform: translate(-50%, -50%); }
.model-hint { bottom: 22px; opacity: 0; transition: opacity 0.4s ease; }
.model-showcase.is-loaded .model-hint { opacity: 1; }

/* Equipment switcher — sits under the stage. Overlaying it caused the four
   tabs to wrap and collide with the caption on narrower stages. */
.model-controls {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.model-switch {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: rgba(8, 20, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.model-tab {
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.66);
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.model-tab:hover { color: #fff; }
.model-tab.is-active { background: var(--green); color: var(--navy-deep); }

.model-caption {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.model-showcase.is-swapping .model-caption { opacity: 0; }

/* No WebGL / no model: drop the empty stage rather than showing a blank box. */
.model-showcase.no-3d .model-stage { display: none; }
.model-showcase.no-3d .model-grid { grid-template-columns: 1fr; max-width: 720px; }

@media (max-width: 980px) {
  .model-grid { grid-template-columns: 1fr; gap: 36px; }
  .model-stage { aspect-ratio: 4 / 3; }
  .model-controls { grid-column: 1; }
}

/* ===== Ecosystem ===== */
/* Copy-only section — its heading block carries no trailing content, so drop the
   section-head bottom margin that exists to separate it from a grid. */
#ecosystem .section-head { margin-bottom: 0; max-width: 820px; }

/* ===== Our Journey ===== */
.journey {
  position: relative;
  list-style: none;
  display: grid;
  gap: 4px;
  padding-left: 138px;
}
/* Spine the year markers hang off. */
.journey::before {
  content: '';
  position: absolute;
  left: 112px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--green), rgba(33, 72, 137, 0.18));
  border-radius: 2px;
}
.journey-item { position: relative; padding: 18px 0; }
.journey-year {
  position: absolute;
  left: -138px;
  top: 18px;
  width: 96px;
  text-align: right;
  font-size: 19px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}
.journey-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 25px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2.5px solid var(--cream);
  box-shadow: 0 0 0 2px rgba(57, 215, 126, 0.35);
}
.journey-body h3 { font-size: 17px; font-weight: 700; color: var(--navy-deep); margin-bottom: 5px; }
.journey-body p { font-size: 14.5px; color: var(--ink-soft); }

@media (max-width: 700px) {
  .journey { padding-left: 30px; }
  .journey::before { left: 5px; }
  .journey-item::before { left: -31px; }
  .journey-year {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--green-deep);
  }
}

/* ===== Project references ===== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.project-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 24px 22px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.3s ease;
}
.project-card:hover { box-shadow: var(--shadow-md); }
.project-num {
  font-size: 12px;
  font-weight: 800;
  color: rgba(33, 72, 137, 0.28);
  letter-spacing: 0.08em;
}
.project-card h3 {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-deep);
}
.project-card p { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.project-sector {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: rgba(57, 215, 126, 0.13);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

@media (max-width: 1080px) { .projects-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .projects-grid { grid-template-columns: 1fr; } }

/* ===== Partner logo wall ===== */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.partner-logo {
  background: var(--white);
  border-radius: var(--radius-sm);
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.partner-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Desaturated at rest so 54 marks read as one wall, not a ransom note. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.partner-logo:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 1080px) { .partner-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 860px)  { .partner-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px)  { .partner-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== CTA / Contact ===== */
.cta-section {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 45%, var(--blue) 100%);
  overflow: hidden;
  text-align: center;
}
.cta-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.cta-inner .body-text { max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-inner .kicker { display: block; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 44px 0 40px;
  text-align: left;
}
.contact-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.25s ease, background 0.25s ease;
}
.contact-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.contact-card .icon-badge { width: 44px; height: 44px; }
.contact-card .icon-badge svg { width: 20px; height: 20px; }
.contact-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mint); }
.contact-value { font-size: 15px; font-weight: 700; color: var(--white); }

/* ===== Social row ===== */
.social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.social-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.social-links { display: flex; gap: 12px; }
.social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover {
  transform: translateY(-3px);
  background: var(--green);
  border-color: var(--green);
  color: var(--navy-deep);
}

/* ===== Project enquiry form ===== */
.enquiry-form {
  position: relative;
  text-align: left;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 38px 34px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
/* Light that tracks the pointer across the form, as in the reference. */
.form-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  left: 0; top: 0;
  background: radial-gradient(circle, rgba(57, 215, 126, 0.22), rgba(57, 215, 126, 0) 68%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.enquiry-form:hover .form-glow { opacity: 1; }

.form-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 32px;
}
.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 10px;
}
.field label span { color: var(--mint); }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  padding: 8px 2px 10px;
  border-radius: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 62px; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select option { background: var(--navy-deep); color: #fff; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--green);
  box-shadow: 0 1px 0 0 var(--green);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.3); }

/* Only flag invalid fields after a submit attempt, never while still typing. */
.enquiry-form.was-validated .field input:invalid,
.enquiry-form.was-validated .field select:invalid,
.enquiry-form.was-validated .field textarea:invalid {
  border-bottom-color: #ff8a8a;
}

.form-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.form-note { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0; }
.form-note.is-error { color: #ff9c9c; }
.form-note.is-success { color: var(--mint); }

/* Enquiry routing */
.form-route {
  position: relative;
  border: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-route legend {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 12px;
  padding: 0;
}
.route-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.route-option:hover { border-color: rgba(131, 236, 162, 0.5); }
.route-option input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.route-option input:checked {
  border-color: var(--green);
  /* Inset ring reads as a filled radio without an extra element. */
  box-shadow: inset 0 0 0 4px var(--green);
}
.route-option input:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.route-option:has(input:checked) {
  border-color: var(--green);
  background: rgba(57, 215, 126, 0.10);
}
.route-option span { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: rgba(255,255,255,0.62); }
.route-option strong { font-size: 14.5px; font-weight: 700; color: #fff; }

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
.form-consent a { color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255,255,255,0.25); }
.form-consent a:hover { color: var(--mint); border-bottom-color: var(--mint); }

@media (max-width: 700px) {
  .form-route { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .enquiry-form { padding: 30px 22px 26px; }
  .form-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== Footer ===== */
.site-footer {
  background: var(--navy-deep);
  padding: 72px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo { height: 30px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 12px; max-width: 280px; }
.footer-sister { font-size: 13.5px; color: rgba(255,255,255,0.5); }
.footer-sister strong { color: var(--mint); }
.footer-links h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); margin-bottom: 18px; }
.footer-links a { display: block; font-size: 14.5px; color: rgba(255,255,255,0.75); margin-bottom: 12px; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--mint); }
.footer-address { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.55); margin-top: 4px; }
.footer-social { margin-top: 22px; }
.footer-social .social-link { width: 38px; height: 38px; }
.footer-social .social-link svg { width: 16px; height: 16px; }
.nav-overlay-social { display: flex; gap: 20px; flex-wrap: wrap; }

/* Icon-led contact links in the footer */
.footer-contact a,
.footer-contact .footer-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(57, 215, 126, 0.16);
  color: var(--mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Nudge so the badge optically centers on the first line of text */
  margin-top: -3px;
}
.footer-ico svg { width: 14px; height: 14px; }
.footer-contact a:hover .footer-ico {
  background: rgba(57, 215, 126, 0.28);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Vertical only — a padding shorthand here would cancel .container's side
     padding and pull this row out of alignment with the footer columns above. */
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}
.to-top {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.to-top:hover { background: var(--green); color: var(--navy-deep); transform: translateY(-3px); }

/* ===== Scroll reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ===== Hero entrance (always plays on load, never gated behind JS/observer) ===== */
.hero-anim {
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim, .reveal { animation: none; opacity: 1; transform: none; transition: none; }
}

/* ===== Full-screen nav overlay ===== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: #06101f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }
#navFluid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.nav-overlay-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + 32px) 28px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

.nav-big { display: flex; flex-direction: column; }
.nav-big-link {
  font-size: clamp(34px, 7vw, 82px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #fff;
  /* Each item is a clipping window its label rides up through. */
  overflow: hidden;
  padding-bottom: 0.06em;
  width: fit-content;
}
.nav-big-link span {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, color 0.25s ease;
  transition-delay: calc(var(--i) * 55ms);
}
.nav-overlay.is-open .nav-big-link span { transform: translateY(0); opacity: 1; }
.nav-big-link:hover span { color: var(--mint); }

.nav-overlay-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s;
}
.nav-overlay.is-open .nav-overlay-foot { opacity: 1; transform: translateY(0); }
.nav-overlay-foot a {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.2s ease;
}
.nav-overlay-foot a:hover { color: var(--mint); }

/* The toggle can't escape the header's stacking context, so the whole header
   has to clear the overlay — otherwise the close button is unclickable. */
.nav-toggle { position: relative; }
body.nav-open .site-header { z-index: 960; }
body.nav-open { overflow: hidden; }
body.nav-open .site-header { background: transparent; box-shadow: none; border-bottom-color: transparent; }
body.nav-open .nav-toggle span { background: #fff; }
body.nav-open .brand-logo-dark { opacity: 0; }
body.nav-open .brand-logo-light { opacity: 1; }
body.nav-open .brand-orb::before { background: #06101f; }

@media (prefers-reduced-motion: reduce) {
  .nav-big-link span, .nav-overlay-foot { transition: none; }
}

/* ===== Masked word reveals ===== */
.fx-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Room for descenders — otherwise the clip crops g/y/p tails. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.fx-word-in {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease;
}
.is-revealed .fx-word-in { transform: translateY(0); opacity: 1; }

/* No per-word colour fix needed: .text-gradient is now a solid colour, which
   the split word spans inherit normally. */

/* ===== 3D tilt cards ===== */
.stats-grid, .process-steps, .solutions-grid, .why-grid, .industries-grid {
  perspective: 1200px;
}
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  will-change: transform;
}
.tilt.is-tilting {
  transition: transform 0.1s ease-out, box-shadow 0.3s ease;
}
.tilt .icon-badge {
  transform: translateZ(28px);
}
@media (hover: none) {
  .tilt { transform: none !important; }
}

/* ===== Responsive ===== */
/* Mirrors the aspect test in hero3d.js: below ~1.1 the scene centers behind the
   copy, so drop the side-fade mask and dim it uniformly instead. */
@media (max-aspect-ratio: 11/10) {
  .hero-3d-wrap {
    opacity: 0.3;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 640px) {
  .hero-3d-wrap { opacity: 0.28; }
}

/* Eight nav items no longer fit beside the logo and CTA below ~1200px —
   collapse to the full-screen menu before they wrap into each other. The
   toggle must appear at the same breakpoint, or the range between this and
   980px would have no navigation at all. */
@media (max-width: 1200px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 980px) {
  .header-actions .btn-sm { display: none; }
  .hero-rail { display: none; }

  .about-grid { grid-template-columns: 1fr; }
  .about-grid .fine-print { grid-column: 1; }
  .process-steps { flex-direction: column; }
  .step-arrow { display: none; }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-grid { grid-template-columns: 1fr; gap: 40px; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .timeline::before { display: none; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .section { padding: 76px 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .solutions-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* =====================================================================
   INNER PAGES  (markup generated by build.mjs)
   ===================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  background: var(--green);
  color: var(--navy-deep);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Inner pages never sit over the dark hero, so the header starts solid. */
.site-header.is-solid {
  background: rgba(246, 255, 235, 0.92);
  border-bottom-color: rgba(33, 72, 137, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header.is-solid .nav-link { color: var(--ink-soft); }
.site-header.is-solid .nav-link:hover,
.site-header.is-solid .nav-link.active { color: var(--navy); }
.site-header.is-solid .nav-toggle span { background: var(--navy); }
.site-header.is-solid .brand-logo-dark { opacity: 1; }
.site-header.is-solid .brand-logo-light { opacity: 0; }
.site-header.is-solid .brand-orb::before { background: var(--cream); }

body.is-inner { padding-top: var(--header-h); }

.breadcrumb {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 22px 0 0;
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb span { margin: 0 8px; opacity: 0.45; }
.breadcrumb [aria-current] { color: var(--navy); font-weight: 600; }

/* ---- Page hero ---- */
.page-hero { padding: 64px 0 56px; }
.page-hero-dark {
  position: relative;
  background: linear-gradient(140deg, #08122a 0%, var(--navy-deep) 55%, var(--navy) 100%);
  padding: 96px 0 88px;
  overflow: hidden;
}
.page-hero-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 88% 8%, rgba(57, 215, 126, 0.20), transparent 62%),
    radial-gradient(560px 320px at 4% 96%, rgba(97, 147, 221, 0.20), transparent 62%);
  pointer-events: none;
}
.page-hero-dark > .container { position: relative; z-index: 1; }
.page-title {
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--navy-deep);
  max-width: 20ch;
  margin-bottom: 18px;
}
.page-hero-dark .page-title { color: #fff; }
.page-lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}
.page-hero-dark .page-lede { color: rgba(255, 255, 255, 0.76); }
.page-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.page-hero-dark .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.38); }
.page-hero-dark .btn-outline:hover { background: rgba(255, 255, 255, 0.10); }

.page-figure {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ---- Numbered detail list ---- */
.detail-list { display: grid; gap: 2px; max-width: 900px; }
.detail-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid rgba(33, 72, 137, 0.12);
}
.detail-item:last-child { border-bottom: 1px solid rgba(33, 72, 137, 0.12); }
.detail-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--green-deep);
  padding-top: 4px;
}
.detail-item h3 { font-size: 19px; font-weight: 700; color: var(--navy-deep); margin-bottom: 7px; }
.detail-item p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---- Cards that link ---- */
.card-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
}
a.solution-card, a.why-card { text-decoration: none; }

/* ---- FAQ ---- */
.faq { max-width: 860px; display: grid; gap: 2px; }
.faq-item { border-top: 1px solid rgba(33, 72, 137, 0.14); }
.faq-item:last-child { border-bottom: 1px solid rgba(33, 72, 137, 0.14); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-deep);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--green-deep);
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { padding: 0 44px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---- Split panel ---- */
.split-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.split-panel > div {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.split-panel h3 { font-size: 18px; font-weight: 700; color: var(--navy-deep); margin-bottom: 16px; }
.tick-list { display: grid; gap: 11px; }
.tick-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--ink-soft);
}
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* ---- Service tier table ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tier-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tier-table th,
.tier-table td {
  text-align: left;
  padding: 16px 20px;
  font-size: 14.5px;
  border-bottom: 1px solid rgba(33, 72, 137, 0.09);
}
.tier-table thead th {
  background: var(--navy-deep);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tier-table tbody th { font-weight: 700; color: var(--navy-deep); }
.tier-table td { color: var(--ink-soft); }
.tier-table tbody tr:last-child th,
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table tbody tr:hover { background: rgba(57, 215, 126, 0.05); }

/* ---- Project filter ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.filter-chip {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(33, 72, 137, 0.18);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-chip:hover { border-color: var(--green); color: var(--navy); }
.filter-chip.is-active { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.project-card[hidden] { display: none; }

/* ---- Contact layout ---- */
.contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: start; }
.section-support-form { background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--blue) 100%); }
.section-support-form .enquiry-form { max-width: none; margin: 0; }
.contact-aside {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
}
.contact-aside h2 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px; }
.contact-dl dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mint);
  margin-top: 18px;
}
.contact-dl dt:first-child { margin-top: 0; }
.contact-dl dd { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin-top: 5px; }
.contact-dl a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.contact-dl a:hover { color: var(--mint); border-bottom-color: var(--mint); }
.contact-aside .fine-print { color: rgba(255, 255, 255, 0.5); margin-top: 24px; }
.contact-aside .fine-print a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }

/* ---- Prose (legal pages) ---- */
.prose { max-width: 74ch; }
.prose h2 { font-size: 21px; font-weight: 700; color: var(--navy-deep); margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 15.5px; line-height: 1.72; color: var(--ink-soft); }

/* ---- Footer legal row ---- */
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.footer-legal a:hover { color: var(--mint); }

/* =====================================================================
   PARTNER CONVEYOR  — logos riding belts, per the reference illustration
   ===================================================================== */

.conveyor {
  display: grid;
  gap: 18px;
  padding: 26px 0;
  /* Feather the ends so cells enter and leave rather than pop. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.conveyor-row { overflow: hidden; }
.conveyor-track {
  display: flex;
  gap: 16px;
  width: max-content;
  /* Two identical halves scroll by exactly 50% for a seamless loop. */
  animation: conveyorRun 46s linear infinite;
}
.conveyor-row[data-row="1"] .conveyor-track { animation-duration: 58s; animation-direction: reverse; }
.conveyor-row[data-row="2"] .conveyor-track { animation-duration: 52s; }
.conveyor:hover .conveyor-track { animation-play-state: paused; }

@keyframes conveyorRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.conveyor-cell {
  flex: 0 0 auto;
  width: 168px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(33, 72, 137, 0.07);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.conveyor-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* In full colour, per the brief — the belt is the motion, not the mute. */
  transition: transform 0.3s ease;
}
.conveyor-cell:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.conveyor-cell:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .conveyor-track { animation: none; }
  .conveyor { -webkit-mask-image: none; mask-image: none; }
  .conveyor-row { overflow-x: auto; }
}

/* =====================================================================
   JOURNEY SCENE  — 3D route with milestone pins
   ===================================================================== */

.journey-section { padding-top: 56px; }
.journey-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(170deg, #eaf6ff 0%, #dfeeff 48%, #eef8ef 100%);
  box-shadow: var(--shadow-md);
  margin-bottom: 52px;
}
#journeyCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.journey-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 44, 87, 0.45);
  pointer-events: none;
}
.journey-scene.no-3d { display: none; }

/* The active milestone lifts as the route reaches it. */
.journey-item {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.journey-item.is-dim { opacity: 0.42; }
.journey-item.is-current .journey-year { color: var(--green-deep); }
.journey-item.is-current .journey-body h3 { color: var(--green-deep); }

@media (max-width: 700px) {
  .journey-scene { aspect-ratio: 4 / 3; }
}