/* =========================================================================
   V2 — Sovereign Glass
   Premium institutional finance aesthetic. References: Macquarie ×
   Brookfield × NBIM. Heavy liquid glass over photographic/gradient depth.
   Asymmetric layouts. Photo-led bands. Radial value diagram. Always-on
   drifting gradient mesh. Bigger animated counters. Brighter beams.

   MagicUI (6): Number Ticker, Animated Beam (multiple), Marquee,
   Border Beam, Dot Pattern, Grid Pattern. Liquid glass is structural CSS.
   ========================================================================= */

/* ---- Icon system ---- */
i.icon {
  display: inline-block;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-url, none);
          mask-image: var(--icon-url, none);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-wrap i.icon { width: 22px; height: 22px; }
.btn i.icon, .nav__cta i.icon, .pill i.icon, .chip i.icon { width: 14px; height: 14px; }
.footer__social i.icon { width: 16px; height: 16px; }
.nav__toggle i.icon { width: 22px; height: 22px; }

/* ---- Tokens ---- */
:root {
  --bg:         oklch(99% 0.003 80);
  --bg-soft:    oklch(97% 0.005 75);
  --bg-warm:    oklch(95% 0.012 65);
  --ink:        oklch(15% 0.014 195);    /* deeper than V1 */
  --ink-soft:   oklch(28% 0.012 200);
  --ink-mute:   oklch(50% 0.012 210);
  --line:       oklch(88% 0.008 80);
  --line-soft:  oklch(93% 0.006 80);
  --orange:     var(--sovereign-orange);
  --r-sm: 4px;
  --r-md: 16px;
  --r-lg: 24px;
  --container: 1320px;
  --container-px: clamp(20px, 4vw, 56px);
}

html { scroll-behavior: auto; }
body { background: var(--bg); color: var(--ink-soft); overflow-x: hidden; }
h1, h2, h3, h4 { color: var(--ink); }
main, .nav, .footer { position: relative; z-index: 5; }

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

/* =============================================================
   LIQUID GLASS PRIMITIVE — heavy blur, specular edge, depth
   ============================================================= */
.glass {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
    rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),       /* top specular */
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.08),    /* bottom edge */
    inset 1px 0 0 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 24px 60px -28px rgba(15, 30, 35, 0.45);
  isolation: isolate;
  overflow: hidden;
}
/* Specular sheen — diagonal light streak */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 35%, transparent 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}
.glass > * { position: relative; z-index: 1; }

.glass--dark {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
    rgba(15, 30, 33, 0.55);
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4),
    0 30px 70px -30px rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.92);
}
.glass--dark h2, .glass--dark h3, .glass--dark h4 { color: white; }
.glass--dark p { color: rgba(255, 255, 255, 0.78); }
.glass--dark::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 40%);
}

/* Hover state — slight lift + brighter edge */
.glass--hover {
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.glass--hover:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklch, var(--orange) 60%, rgba(255,255,255,0.4));
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 40px 80px -30px color-mix(in oklch, var(--orange) 50%, transparent);
}

/* =============================================================
   AMBIENT — drifting gradient mesh layer
   ============================================================= */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(900px circle at 12% 8%, oklch(94% 0.06 35 / 0.7), transparent 55%),
    radial-gradient(800px circle at 92% 30%, oklch(96% 0.04 75 / 0.6), transparent 55%),
    radial-gradient(700px circle at 50% 92%, oklch(94% 0.05 40 / 0.55), transparent 55%);
  filter: blur(40px);
  animation: ambient-drift 80s ease-in-out infinite;
}
@keyframes ambient-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2%, -3%) scale(1.06); }
  66%      { transform: translate(-2%, 2%) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) { .ambient { animation: none; } }

/* =============================================================
   NAV
   ============================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 80px;
  display: flex; align-items: center;
  transition: background var(--t-base) var(--ease-out),
              backdrop-filter var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              height var(--t-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  height: 64px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom-color: rgba(15, 30, 35, 0.08);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6) inset;
}
.nav__inner {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--container-px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  border-bottom: 0 !important;
}
.nav__logo img {
  height: 38px;
  filter: brightness(0) invert(1);
  transition: filter var(--t-base) var(--ease-out);
}
.nav.is-scrolled .nav__logo img { filter: none; }
.nav__menu { display: none; gap: var(--sp-6); align-items: center; }
.nav__menu a {
  font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease-out);
}
.nav__menu a:hover { color: white; }
.nav__menu a:hover::after { transform: scaleX(1); }
.nav.is-scrolled .nav__menu a { color: var(--ink-soft); }
.nav.is-scrolled .nav__menu a:hover { color: var(--ink); }
.nav__cta {
  display: none; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--r-sm);
  background: var(--orange); color: white;
  font-size: 13px; font-weight: 600;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.nav__cta:hover { transform: translateY(-1px); background: oklch(58% 0.18 35); }
.nav__cta i.icon { transition: transform var(--t-fast) var(--ease-out); }
.nav__cta:hover i.icon { transform: translateX(3px); }
.nav__toggle { width: 40px; height: 40px; display: grid; place-items: center; color: white; }
.nav.is-scrolled .nav__toggle { color: var(--ink); }
@media (min-width: 1024px) {
  .nav__menu, .nav__cta { display: flex; }
  .nav__toggle { display: none; }
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border-radius: var(--r-sm);
  font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  cursor: pointer;
}
.btn--primary {
  background: var(--orange); color: white;
  box-shadow: 0 14px 36px -12px color-mix(in oklch, var(--orange) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--primary:hover { transform: translateY(-2px); background: oklch(58% 0.18 35); box-shadow: 0 24px 50px -12px color-mix(in oklch, var(--orange) 75%, transparent); }
.btn--primary i.icon { transition: transform var(--t-fast) var(--ease-out); }
.btn--primary:hover i.icon { transform: translateX(3px); }

.btn--glass {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn--glass:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }

/* =============================================================
   HERO — full-bleed photo + mesh + glass content + live strip
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  color: white;
  background: var(--ink);
  display: flex;
  align-items: flex-end;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, oklch(15% 0.018 195 / 0.55) 0%, transparent 30%, oklch(13% 0.018 195 / 0.92) 90%),
    linear-gradient(100deg, oklch(15% 0.018 195 / 0.4), transparent 60%);
}
.hero__mesh {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(800px circle at 18% 30%, color-mix(in oklch, var(--orange) 30%, transparent), transparent 55%),
    radial-gradient(900px circle at 85% 70%, oklch(60% 0.1 25 / 0.45), transparent 55%);
  filter: blur(30px);
  animation: hero-mesh-drift 50s ease-in-out infinite;
}
@keyframes hero-mesh-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3%, -2%); }
}
.hero__grid-pattern {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent);
}

.hero__content {
  position: relative; z-index: 5;
  width: 100%;
  padding: 140px 0 80px;
}
.hero__layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
  align-items: end;
}
.hero__copy { grid-column: 1 / -1; }
@media (min-width: 1024px) { .hero__copy { grid-column: 1 / span 8; } }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: white;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--sp-6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }

.hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(44px, 5.6vw + 16px, 104px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: white;
  margin-bottom: var(--sp-6);
  max-width: 18ch;
}
.hero__title em { font-style: normal; color: var(--orange); }
.hero__sub {
  font-size: clamp(17px, 0.4vw + 15px, 20px);
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;
  margin-bottom: var(--sp-7);
  line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Hero side: live capability strip (replaces ∞ card) */
.hero__strip {
  grid-column: 1 / -1;
  margin-top: var(--sp-7);
}
@media (min-width: 1024px) { .hero__strip { grid-column: 9 / -1; margin-top: 0; } }

.live-strip { padding: var(--sp-5); }
.live-strip h4 {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
  margin-bottom: var(--sp-5);
}
.live-strip .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(72% 0.18 145);
  box-shadow: 0 0 14px oklch(72% 0.18 145);
  animation: pulse-live 1.8s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.live-strip__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}
.live-strip__row:first-of-type { border-top: 0; padding-top: 0; }
.live-strip__row strong { color: white; font-weight: 600; }
.live-strip__row .val {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--orange);
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* Hero bottom stats row */
.hero__stats-row {
  margin-top: var(--sp-9);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (min-width: 768px) { .hero__stats-row { grid-template-columns: repeat(4, 1fr); } }
.hero__stat-mini .num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(32px, 2.8vw + 14px, 52px);
  line-height: 1;
  color: white;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.hero__stat-mini .num em { color: var(--orange); font-style: normal; }
.hero__stat-mini .label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* =============================================================
   MARQUEE
   ============================================================= */
.marquee {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  gap: 52px; align-items: center;
  animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap;
  font-size: 13px; font-weight: 500;
  color: var(--ink-mute);
}
.marquee__item .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.marquee__item strong { color: var(--ink); font-weight: 600; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* =============================================================
   SECTION FRAME
   ============================================================= */
section { padding: clamp(80px, 11vw, 160px) 0; position: relative; }

.sec-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-9);
  align-items: end;
}
.sec-row__head { grid-column: 1 / -1; }
.sec-row__intro { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .sec-row__head { grid-column: 1 / span 6; }
  .sec-row__intro { grid-column: 7 / -1; }
}
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--sp-3);
}
.sec-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--orange); }
.sec-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 2.8vw + 12px, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 18ch;
  color: var(--ink);
}
.sec-intro {
  font-size: clamp(17px, 0.4vw + 14px, 19px);
  color: var(--ink-soft);
  max-width: 58ch;
  line-height: 1.6;
}

/* =============================================================
   ABOUT — animated warm mesh bg, 3 glass blocks
   ============================================================= */
.about {
  position: relative;
  overflow: hidden;
  background: var(--bg-warm);
}
.about__mesh {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(800px circle at 15% 20%, color-mix(in oklch, var(--orange) 22%, transparent), transparent 55%),
    radial-gradient(900px circle at 85% 70%, oklch(94% 0.06 50 / 0.55), transparent 55%),
    radial-gradient(700px circle at 50% 100%, color-mix(in oklch, var(--orange) 15%, transparent), transparent 55%);
  filter: blur(40px);
  animation: about-mesh-drift 60s ease-in-out infinite;
}
@keyframes about-mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3%, -2%) scale(1.06); }
  66%      { transform: translate(-2%, 2%) scale(0.96); }
}
.about__mesh::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, oklch(20% 0.012 195 / 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .about__mesh { animation: none; } }
.about__content { position: relative; z-index: 2; }

/* Asymmetric 3-up: feature 7 cols (tall) + 2 stacked 5 cols (matching height) */
.about__cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-5);
}
.about__feature { grid-column: 1 / -1; grid-row: 1 / span 2; }
.about__side-1 { grid-column: 1 / -1; }
.about__side-2 { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .about__feature { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 540px; }
  .about__side-1 { grid-column: 8 / -1; grid-row: 1; }
  .about__side-2 { grid-column: 8 / -1; grid-row: 2; }
}

.about__feature {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 480px;
  isolation: isolate;
}
.about__feature-img {
  position: absolute; inset: 0; z-index: 0;
}
.about__feature-img img { width: 100%; height: 100%; object-fit: cover; }
.about__feature-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 25%, transparent) 0%, color-mix(in oklch, var(--ink) 75%, transparent) 100%);
}
.about__feature-content {
  position: relative; z-index: 2;
  padding: var(--sp-7);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.about__feature .num-huge {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(80px, 9vw + 12px, 160px);
  line-height: 0.85;
  color: var(--orange);
  letter-spacing: -0.04em;
}
.about__feature h3 {
  font-size: clamp(28px, 2vw + 14px, 40px);
  color: white;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.about__feature p { color: rgba(255, 255, 255, 0.88); font-size: 16px; max-width: 50ch; line-height: 1.5; }
.about__feature .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  color: white;
  margin-bottom: var(--sp-4);
}

/* Side glass cards */
.about__side {
  padding: var(--sp-6);
  min-height: 100%;
}
.about__side .num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--orange);
  line-height: 1;
  margin-bottom: var(--sp-3);
  letter-spacing: -0.02em;
}
.about__side .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--orange) 15%, rgba(255,255,255,0.4));
  color: var(--orange);
  margin-bottom: var(--sp-4);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.about__side:hover .icon-wrap { background: var(--orange); color: white; transform: rotate(-6deg); }
.about__side h3 { font-size: 22px; margin-bottom: var(--sp-3); color: var(--ink); }
.about__side p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

/* =============================================================
   SERVICES — alternating photo bands (REDESIGNED, no 3-card row)
   ============================================================= */
.services {
  position: relative;
  background: var(--bg-soft);
  overflow: hidden;
}
.services__pattern {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, oklch(20% 0.012 195 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.services__content { position: relative; z-index: 2; }

.svc-bands { display: grid; gap: var(--sp-7); }
.svc-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 900px) {
  .svc-band { grid-template-columns: 5fr 7fr; gap: 0; min-height: 360px; }
  .svc-band--flip > :first-child { order: 2; }
}
.svc-band__photo {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}
.svc-band__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.svc-band:hover .svc-band__photo img { transform: scale(1.04); }
.svc-band__photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in oklch, var(--orange) 20%, transparent), transparent 70%);
}
.svc-band__body {
  padding: var(--sp-7) var(--sp-6);
  background: white;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
}
.svc-band__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(56px, 5vw + 16px, 96px);
  line-height: 0.85;
  color: color-mix(in oklch, var(--orange) 95%, transparent);
  letter-spacing: -0.035em;
}
.svc-band__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.svc-band h3 {
  font-size: clamp(24px, 1.4vw + 14px, 32px);
  letter-spacing: -0.018em;
  margin-bottom: var(--sp-3);
}
.svc-band p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; max-width: 56ch; }
.svc-band__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--orange);
  align-self: flex-start;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  width: 100%;
}
.svc-band__tag::after {
  content: '→';
  margin-left: auto;
  transition: transform var(--t-fast) var(--ease-out);
}
.svc-band:hover .svc-band__tag::after { transform: translateX(4px); }

/* 4-Phase journey — Gantt-style timeline chart */
.phase-chart {
  margin-top: var(--sp-9);
  position: relative;
  background: var(--ink);
  color: white;
  border-radius: var(--r-md);
  overflow: hidden;
  padding: var(--sp-7) var(--sp-6);
  isolation: isolate;
}
.phase-chart::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(700px circle at 20% 50%, color-mix(in oklch, var(--orange) 25%, transparent), transparent 60%),
    radial-gradient(700px circle at 80% 50%, color-mix(in oklch, var(--orange) 18%, transparent), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.phase-chart__head {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap; gap: var(--sp-3);
}
.phase-chart__head h3 { color: white; font-size: clamp(20px, 1vw + 14px, 24px); letter-spacing: -0.01em; }
.phase-chart__head small {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); font-weight: 600;
}
.phase-track {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-bottom: var(--sp-5);
}
@media (min-width: 768px) {
  .phase-track {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
  }
}
.phase-bar {
  position: relative;
  padding: var(--sp-5) var(--sp-5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  overflow: hidden;
  isolation: isolate;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  cursor: default;
}
.phase-bar:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: color-mix(in oklch, var(--orange) 60%, transparent);
  transform: translateY(-2px);
}
.phase-bar::before {
  /* progress fill on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in oklch, var(--orange) 18%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}
.phase-bar:hover::before { opacity: 1; }
.phase-bar__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(36px, 3vw + 12px, 56px);
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}
.phase-bar__label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); font-weight: 600;
  margin-bottom: 6px;
}
.phase-bar__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(18px, 0.6vw + 14px, 22px);
  color: white;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
}
.phase-bar__duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--orange);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--orange) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--orange) 25%, transparent);
}
.phase-bar__duration::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}

/* Progress strip below the bars */
.phase-progress {
  position: relative; z-index: 2;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.phase-progress__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg,
    var(--orange) 0%,
    color-mix(in oklch, var(--orange) 80%, white) 25%,
    color-mix(in oklch, var(--orange) 80%, white) 50%,
    color-mix(in oklch, var(--orange) 80%, white) 75%,
    var(--orange) 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  position: relative;
  animation: progress-shift 5s linear infinite;
}
@keyframes progress-shift {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.phase-progress__fill::after {
  content: '';
  position: absolute;
  top: -3px; left: 0;
  width: 60px; height: 12px;
  background: radial-gradient(ellipse at center, var(--orange), transparent 70%);
  filter: blur(4px);
  animation: progress-flare 5s linear infinite;
}
@keyframes progress-flare {
  0%   { transform: translateX(0); opacity: 0.7; }
  50%  { transform: translateX(calc(100% - 60px)); opacity: 1; }
  100% { transform: translateX(0); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .phase-progress__fill, .phase-progress__fill::after { animation: none; }
}

/* =============================================================
   STRATEGIC POSITION — radial diagram (REDESIGNED, no 4-card row)
   ============================================================= */
.position {
  position: relative;
  background: var(--bg);
}

.radial {
  position: relative;
  width: min(900px, 100%);
  margin: 0 auto;
  aspect-ratio: 1.4 / 1;
}
.radial__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(160px, 18vw, 240px);
  height: clamp(160px, 18vw, 240px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, oklch(70% 0.16 35), var(--orange));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4);
  color: white;
  box-shadow:
    0 0 80px color-mix(in oklch, var(--orange) 55%, transparent),
    inset 0 -10px 30px rgba(0, 0, 0, 0.15),
    inset 0 10px 30px rgba(255, 255, 255, 0.2);
  z-index: 4;
  animation: center-breath 4s ease-in-out infinite;
}
@keyframes center-breath {
  0%, 100% { box-shadow: 0 0 80px color-mix(in oklch, var(--orange) 50%, transparent), inset 0 -10px 30px rgba(0,0,0,0.15), inset 0 10px 30px rgba(255,255,255,0.2); }
  50%      { box-shadow: 0 0 120px color-mix(in oklch, var(--orange) 75%, transparent), inset 0 -10px 30px rgba(0,0,0,0.15), inset 0 10px 30px rgba(255,255,255,0.25); }
}
.radial__center small {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
}
.radial__center strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(22px, 1.4vw + 14px, 30px);
  color: white;
  letter-spacing: -0.01em;
  line-height: 1;
}
.radial__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.radial__svg line {
  stroke: color-mix(in oklch, var(--orange) 40%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  animation: dash-flow 2s linear infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .radial__svg line { animation: none; } }

.radial__node {
  position: absolute;
  width: clamp(200px, 18vw, 260px);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  z-index: 3;
}
.radial__node h4 { font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.radial__node p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.radial__node .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--orange) 12%, rgba(255,255,255,0.4));
  color: var(--orange);
  margin-bottom: var(--sp-3);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.radial__node:hover .icon-wrap { background: var(--orange); color: white; transform: rotate(-8deg) scale(1.05); }

/* 4 positions around center on desktop */
.radial__node--1 { top: 5%;  left: 0; }
.radial__node--2 { top: 5%;  right: 0; }
.radial__node--3 { bottom: 5%; left: 0; }
.radial__node--4 { bottom: 5%; right: 0; }

/* Mobile: stack */
@media (max-width: 899px) {
  .radial { aspect-ratio: auto; display: grid; gap: var(--sp-4); }
  .radial__center { position: relative; top: auto; left: auto; transform: none; margin: 0 auto var(--sp-5); }
  .radial__node { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; }
  .radial__svg { display: none; }
}

/* Bridge — 2 photo state cards above, CITADELX foundation block below,
   with ascending beams connecting them */
.bridge {
  margin-top: var(--sp-9);
  position: relative;
}
.bridge__states {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
@media (min-width: 900px) {
  .bridge__states { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
.state-card {
  position: relative;
  min-height: 280px;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.state-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -28px rgba(15, 30, 35, 0.45); }
.state-card__photo {
  position: absolute; inset: 0; z-index: 0;
}
.state-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.state-card:hover .state-card__photo img { transform: scale(1.05); }
.state-card__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 20%, transparent), color-mix(in oklch, var(--ink) 80%, transparent));
}
.state-card__content {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--sp-6);
  color: white;
}
.state-card__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.state-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(22px, 1.4vw + 12px, 32px);
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.state-card p { font-size: 14px; color: rgba(255, 255, 255, 0.78); max-width: 36ch; }

/* Connecting beams ascending into states */
.bridge__beams-up {
  display: none;
  position: relative;
  height: 56px;
  margin-bottom: var(--sp-3);
}
@media (min-width: 900px) {
  .bridge__beams-up { display: block; }
}
.bridge__beam-up {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, color-mix(in oklch, var(--orange) 65%, transparent), transparent);
  overflow: hidden;
}
.bridge__beam-up--left { left: 25%; }
.bridge__beam-up--right { right: 25%; }
.bridge__beam-up::after {
  content: '';
  position: absolute;
  left: -3px;
  top: 100%;
  width: 8px; height: 30px;
  background: linear-gradient(180deg, var(--orange), transparent);
  filter: blur(3px);
  border-radius: 100%;
  animation: beam-up 2.6s linear infinite;
}
.bridge__beam-up--right::after { animation-delay: 1.3s; }
@keyframes beam-up {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bridge__beam-up::after { animation: none; opacity: 0.6; } }

/* CITADELX foundation block */
.bridge__foundation {
  position: relative;
  padding: var(--sp-8) var(--sp-7);
  background:
    linear-gradient(135deg, oklch(70% 0.16 35), var(--orange) 50%, oklch(55% 0.18 28));
  border-radius: var(--r-md);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 40px 80px -24px color-mix(in oklch, var(--orange) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: white;
}
.bridge__foundation::before {
  /* Border beam */
  content: '';
  position: absolute; inset: -2px;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.85) 60deg, transparent 130deg, transparent 220deg, rgba(255, 255, 255, 0.6) 280deg, transparent 350deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: border-beam 5s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
.bridge__foundation::after {
  /* dot pattern texture */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.5;
  pointer-events: none;
}
@keyframes border-beam { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bridge__foundation::before { animation: none; } }

.bridge__foundation small {
  position: relative; z-index: 2;
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--sp-3);
}
.bridge__foundation strong {
  position: relative; z-index: 2;
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(36px, 3vw + 14px, 64px);
  color: white;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.bridge__foundation .role {
  position: relative; z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
  margin-top: var(--sp-3);
}

/* =============================================================
   PURPOSE
   ============================================================= */
.purpose {
  position: relative;
  background: var(--ink);
  color: white;
  overflow: hidden;
}
.purpose::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("../images/photos/strategic-position-institution-hall.jpg");
  background-size: cover; background-position: center;
  opacity: 0.22;
  filter: blur(2px);
}
.purpose::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 50%, transparent) 30%, color-mix(in oklch, var(--ink) 50%, transparent) 70%, var(--ink) 100%);
}
.purpose__content { position: relative; z-index: 2; }
.purpose .sec-title { color: white; }
.purpose .sec-intro { color: rgba(255, 255, 255, 0.78); }
.purpose__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-6);
}
.purpose__quote { grid-column: 1 / -1; padding: var(--sp-7); }
.purpose__list  { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .purpose__quote { grid-column: 1 / span 5; }
  .purpose__list  { grid-column: 6 / -1; }
}
.purpose__quote blockquote {
  font-family: var(--f-display);
  font-weight: 500; font-style: italic;
  font-size: clamp(20px, 1.2vw + 14px, 28px);
  line-height: 1.3;
  color: white;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--orange);
  margin-bottom: var(--sp-6);
}
.purpose__quote h4 {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--sp-3); font-weight: 600;
}
.purpose__quote li {
  padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88); font-weight: 500;
}
.purpose__quote li:first-of-type { border-top: 0; }

.chapter {
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-5);
  align-items: start;
  transition: padding-left var(--t-base) var(--ease-out);
  cursor: default;
}
.chapter:hover { padding-left: var(--sp-3); }
.chapter:first-of-type { border-top: 0; padding-top: 0; }
.chapter__num { font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--orange); }
.chapter h4 { color: white; font-size: 19px; margin-bottom: 6px; }
.chapter p { color: rgba(255, 255, 255, 0.72); font-size: 14px; line-height: 1.5; }

/* =============================================================
   CORE DOMAINS — Tabbed deep-dive
   ============================================================= */
.domains { background: var(--bg); }
.tabs {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5);
}
.tabs__list { grid-column: 1 / -1; }
.tabs__panel { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .tabs__list { grid-column: 1 / span 4; }
  .tabs__panel { grid-column: 5 / -1; }
}
.tabs__list {
  display: flex; flex-direction: row; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.tabs__list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .tabs__list { flex-direction: column; overflow: visible; }
}
.chip {
  flex-shrink: 0;
  padding: 14px 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap;
}
@media (min-width: 1024px) { .chip { white-space: normal; } }
.chip .chip__num { font-family: var(--f-display); font-size: 14px; color: var(--ink-mute); font-weight: 700; }
.chip:hover { border-color: color-mix(in oklch, var(--orange) 50%, transparent); }
.chip.is-active { background: var(--ink); color: white; border-color: var(--ink); }
.chip.is-active .chip__num { color: var(--orange); }

.tabs__panel {
  position: relative; padding: var(--sp-7);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 420px;
}
.tabs__panel-img {
  position: relative; height: 240px;
  border-radius: var(--r-sm);
  overflow: hidden; margin-bottom: var(--sp-5);
}
.tabs__panel-img img { width: 100%; height: 100%; object-fit: cover; }
.tab-content { display: none; }
.tab-content.is-active { display: block; animation: tab-fade 380ms var(--ease-out); }
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-content__num { font-family: var(--f-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--orange); margin-bottom: var(--sp-3); }
.tab-content__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-3); }
.tab-content h3 { font-size: clamp(22px, 1vw + 16px, 28px); margin-bottom: var(--sp-4); }
.tab-content p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: var(--sp-5); }
.tab-content ul { display: grid; gap: 10px; }
.tab-content li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.tab-content li:first-child { border-top: 0; }
.tab-content li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0; margin-top: 7px;
}

/* =============================================================
   ENGAGEMENT — comparison table
   ============================================================= */
.engagement { background: var(--bg-soft); }
.eng-table {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: white;
}
.eng-row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .eng-row { grid-template-columns: 80px 1fr 1.4fr 1.4fr 1fr; } }
.eng-row--head { background: var(--ink); color: white; }
.eng-row--head .cell { color: rgba(255,255,255,0.78); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.eng-row + .eng-row { border-top: 1px solid var(--line); }
.eng-row:hover:not(.eng-row--head) { background: var(--bg-soft); }
.cell { padding: var(--sp-5) var(--sp-4); font-size: 14px; color: var(--ink-soft); }
.cell--num { font-family: var(--f-display); font-size: 20px; font-weight: 700; color: var(--orange); }
.cell--title strong { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: var(--ink); display: block; }
.eng-row .cell + .cell { border-top: 1px solid var(--line-soft); }
@media (min-width: 900px) {
  .eng-row .cell + .cell { border-top: 0; border-left: 1px solid var(--line-soft); }
}

/* =============================================================
   DOMAIN DETAIL — bento photo tiles
   ============================================================= */
.dd-section { background: var(--bg); }
.dd-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 280px;
  gap: var(--sp-4);
}
.dd-tile {
  position: relative;
  grid-column: 1 / -1;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: default;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.dd-tile:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -28px rgba(15, 30, 35, 0.4); }
.dd-tile__photo { position: absolute; inset: 0; z-index: 0; }
.dd-tile__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.dd-tile:hover .dd-tile__photo img { transform: scale(1.05); }
.dd-tile__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, oklch(15% 0.018 195) 0%, oklch(15% 0.018 195 / 0.55) 40%, transparent 80%);
}
.dd-tile__content { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--sp-5); color: white; }
.dd-tile__num { font-family: var(--f-display); font-weight: 700; font-size: 32px; color: var(--orange); line-height: 1; margin-bottom: 8px; }
.dd-tile__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.dd-tile h3 { font-size: clamp(18px, 0.6vw + 14px, 22px); color: white; letter-spacing: -0.01em; line-height: 1.15; }
@media (min-width: 900px) {
  .dd-tile--01 { grid-column: span 7; grid-row: span 2; }
  .dd-tile--02 { grid-column: span 5; }
  .dd-tile--03 { grid-column: span 5; }
  .dd-tile--04 { grid-column: span 4; }
  .dd-tile--05 { grid-column: span 4; }
  .dd-tile--06 { grid-column: span 4; }
  .dd-tile--07 { grid-column: span 12; }
}

/* =============================================================
   SUSTAINABILITY — split photo + indexed rows
   ============================================================= */
.sustain__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}
.sustain__photo { grid-column: 1 / -1; min-height: 340px; }
.sustain__list  { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .sustain__photo { grid-column: 1 / span 5; }
  .sustain__list  { grid-column: 6 / -1; }
}
.sustain__photo { position: relative; border-radius: var(--r-md); overflow: hidden; }
.sustain__photo img { width: 100%; height: 100%; object-fit: cover; }
.sustain__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, color-mix(in oklch, var(--ink) 50%, transparent));
}
.sustain__photo-cap {
  position: absolute; bottom: var(--sp-5); left: var(--sp-5);
  color: white; z-index: 2;
}
.sustain__photo-cap small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.sustain__photo-cap strong { font-family: var(--f-display); font-size: 22px; font-weight: 700; }

.sustain__row {
  display: grid; grid-template-columns: 64px 1fr 90px; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  align-items: center;
  cursor: default;
  transition: padding-left var(--t-base) var(--ease-out);
}
.sustain__row:hover { padding-left: var(--sp-3); }
.sustain__row:first-of-type { border-top: 0; padding-top: 0; }
.sustain__row .icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in oklch, var(--orange) 10%, transparent);
  color: var(--orange);
  display: grid; place-items: center;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.sustain__row:hover .icon-wrap { background: var(--orange); color: white; }
.sustain__row h4 { font-size: 17px; margin-bottom: 4px; }
.sustain__row p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.sustain__row .index {
  font-family: var(--f-display); font-size: 14px; font-weight: 700;
  color: var(--ink-mute); text-align: right; letter-spacing: 0.05em;
}

/* =============================================================
   LEADERSHIP — chapters
   ============================================================= */
.leadership { background: var(--bg-soft); }
.lead__quote {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 1.4vw + 14px, 32px);
  line-height: 1.3;
  color: var(--ink);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--orange);
  max-width: 52ch;
  margin-bottom: var(--sp-9);
}
.lead__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); }
.lead__chapter { grid-column: 1 / -1; }
@media (min-width: 700px) { .lead__chapter { grid-column: span 6; } }
@media (min-width: 1100px) { .lead__chapter { grid-column: span 3; } }

.lead__chapter {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.lead__chapter:hover { border-color: color-mix(in oklch, var(--orange) 50%, transparent); transform: translateY(-3px); }
.lead__chapter .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in oklch, var(--orange) 12%, transparent);
  color: var(--orange);
  font-family: var(--f-display); font-size: 18px; font-weight: 700;
  margin-bottom: var(--sp-4);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.lead__chapter:hover .num { background: var(--orange); color: white; }
.lead__chapter h4 { font-size: 18px; margin-bottom: 4px; }
.lead__chapter p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.lead__chapter small {
  margin-top: auto;
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}

/* =============================================================
   CONTACT
   ============================================================= */
.contact {
  position: relative; padding: 0;
  background: var(--ink); overflow: hidden; color: white;
}
.contact__grid { display: grid; grid-template-columns: 1fr; min-height: 80vh; }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 7fr 5fr; } }
.contact__media { position: relative; min-height: 360px; overflow: hidden; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.contact__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 50%, var(--ink) 100%), linear-gradient(0deg, var(--ink), transparent 35%);
}
.contact__overlay {
  position: absolute; z-index: 2;
  bottom: var(--sp-7); left: var(--sp-7);
  color: white; max-width: 26ch;
}
.contact__overlay .sec-eyebrow { color: var(--orange); }
.contact__overlay h2 {
  color: white; font-family: var(--f-display);
  font-weight: 700; font-size: clamp(28px, 2vw + 14px, 44px);
  letter-spacing: -0.02em; line-height: 1.05;
}

.contact__panel {
  padding: clamp(60px, 7vw, 100px) clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--ink);
}
.contact__panel .sec-eyebrow { color: var(--orange); }
.contact__panel h3 { color: white; font-size: clamp(22px, 1vw + 16px, 28px); margin-bottom: var(--sp-3); }
.contact__panel p { color: rgba(255,255,255,0.78); font-size: 15px; margin-bottom: var(--sp-6); max-width: 38ch; }
.contact__panel .btn--primary { margin-bottom: var(--sp-7); align-self: flex-start; }
.contact__info { display: grid; gap: var(--sp-3); }
.contact-item {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--sp-4);
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.contact-item:hover { border-color: var(--orange); background: rgba(255, 255, 255, 0.07); }
.contact-item .icon-wrap {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--orange);
  display: grid; place-items: center;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.contact-item .icon-wrap i.icon { width: 16px; height: 16px; }
.contact-item:hover .icon-wrap { background: var(--orange); color: white; }
.contact-item small {
  display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-weight: 600; margin-bottom: 2px;
}
.contact-item strong { color: white; font-weight: 500; font-size: 13px; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { background: oklch(13% 0.012 195); color: rgba(255,255,255,0.7); padding: var(--sp-10) 0 var(--sp-6); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); margin-bottom: var(--sp-8); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__brand img { height: 36px; margin-bottom: var(--sp-5); }
.footer__brand p { font-size: 14px; max-width: 38ch; }
.footer h4 { color: white; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer__list li { margin-bottom: 10px; }
.footer__list a { font-size: 14px; color: rgba(255,255,255,0.6); transition: color var(--t-fast) var(--ease-out); }
.footer__list a:hover { color: var(--orange); }
.footer__bottom {
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  transition: all var(--t-fast) var(--ease-out);
}
.footer__social a:hover { background: var(--orange); border-color: var(--orange); color: white; transform: translateY(-2px); }

/* =============================================================
   MagicUI: Shiny Button — sweeping sheen across button surface
   ============================================================= */
.btn--primary, .btn--glass, .nav__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--primary::after, .btn--glass::after, .nav__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shiny-sweep 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.btn--glass::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); }
.btn--primary > *, .btn--glass > *, .nav__cta > * { position: relative; z-index: 2; }
@keyframes shiny-sweep {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after, .btn--glass::after, .nav__cta::after { animation: none; opacity: 0; }
}

/* =============================================================
   MagicUI: Spinning Text — orbital text loop
   ============================================================= */
.spinning-text {
  position: relative;
  width: 140px;
  height: 140px;
  display: inline-block;
}
.spinning-text__svg {
  width: 100%; height: 100%;
  animation: spin-text 22s linear infinite;
}
@keyframes spin-text { to { transform: rotate(360deg); } }
.spinning-text__svg text {
  fill: rgba(255, 255, 255, 0.7);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.spinning-text__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid; place-items: center;
  color: var(--orange);
}
.spinning-text__core img {
  width: 28px; height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .spinning-text__svg { animation: none; }
}

/* =============================================================
   MagicUI: Ripple — concentric rings emanating from CITADELX orb
   Sized to the orb (not the full radial), so rings travel a sensible distance
   ============================================================= */
.ripple {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(160px, 18vw, 240px);
  height: clamp(160px, 18vw, 240px);
  pointer-events: none;
  z-index: 2;
}
.ripple__ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklch, var(--orange) 55%, transparent);
  transform: scale(1);
  opacity: 0;
  animation: ripple-out 4s cubic-bezier(0, 0.55, 0.45, 1) infinite;
}
.ripple__ring:nth-child(2) { animation-delay: 1.3s; }
.ripple__ring:nth-child(3) { animation-delay: 2.6s; }
@keyframes ripple-out {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* Subtle breath on the CITADELX center on top of ripple */
.radial__center {
  animation: center-breath 4s ease-in-out infinite;
}
@keyframes center-breath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .ripple__ring, .radial__center { animation: none; }
  .ripple__ring { opacity: 0.4; }
}

/* =============================================================
   MagicUI: Animated Grid Pattern — random cells fade on Domain Detail
   ============================================================= */
.agp {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent);
}
.agp__svg {
  width: 100%; height: 100%;
  display: block;
}
.agp__cell {
  fill: color-mix(in oklch, var(--orange) 35%, transparent);
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.agp__cell.is-lit { opacity: 1; }
/* Static grid lines */
.agp__lines {
  stroke: color-mix(in oklch, var(--ink) 8%, transparent);
  stroke-width: 0.5;
}

/* =============================================================
   MagicUI: Light Rays — Engagement section, cool warm rays
   ============================================================= */
.engagement { position: relative; overflow: hidden; }
.light-rays {
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 140%;
  aspect-ratio: 1/1;
  pointer-events: none;
  z-index: 0;
  background:
    conic-gradient(
      from 0deg at 50% 0%,
      transparent 0deg,
      oklch(85% 0.08 65 / 0.35) 8deg,
      transparent 16deg,
      transparent 28deg,
      oklch(85% 0.10 55 / 0.25) 36deg,
      transparent 44deg,
      transparent 60deg,
      oklch(88% 0.07 70 / 0.30) 68deg,
      transparent 76deg,
      transparent 92deg,
      oklch(85% 0.09 60 / 0.22) 100deg,
      transparent 108deg,
      transparent 124deg,
      oklch(88% 0.08 65 / 0.28) 132deg,
      transparent 140deg,
      transparent 360deg
    );
  filter: blur(40px);
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  animation: rays-drift 30s ease-in-out infinite;
}
@keyframes rays-drift {
  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
  50%      { transform: translateX(-50%) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) { .light-rays { animation: none; } }
.engagement > .container { position: relative; z-index: 2; }

/* =============================================================
   MagicUI: Shine Border — Leadership chapters
   Overlay technique: rotating gradient under a near-full inset white block,
   leaving only the 1px border ring visible
   ============================================================= */
.lead__chapter {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: white;
}
.lead__chapter::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 260deg,
    color-mix(in oklch, var(--orange) 90%, transparent) 305deg,
    var(--orange) 320deg,
    color-mix(in oklch, var(--orange) 90%, transparent) 335deg,
    transparent 380deg
  );
  animation: shine-spin 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.lead__chapter::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: white;
  border-radius: calc(var(--r-md) - 1px);
  pointer-events: none;
  z-index: 1;
}
.lead__chapter > * { position: relative; z-index: 2; }
.lead__chapter:nth-child(2)::before { animation-delay: -1s; }
.lead__chapter:nth-child(3)::before { animation-delay: -2s; }
.lead__chapter:nth-child(4)::before { animation-delay: -3s; }
@keyframes shine-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lead__chapter::before { animation: none; opacity: 0.5; }
}
/* Hover: keep border visible, soften interior */
.lead__chapter:hover::after { background: color-mix(in oklch, var(--orange) 4%, white); }

/* =============================================================
   Dot Pattern (Core Domains background)
   ============================================================= */
.domains {
  position: relative;
}
.domains::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, oklch(20% 0.012 195 / 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at center, black 30%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 30%, transparent);
  pointer-events: none;
}
.domains > .container { position: relative; z-index: 2; }

/* Hero — slot the spinning text near the live strip */
.hero__spinner {
  display: none;
}
@media (min-width: 1280px) {
  .hero__spinner {
    display: block;
    position: absolute;
    top: 50%; right: 56px;
    transform: translateY(-50%);
    z-index: 6;
    width: 140px; height: 140px;
  }
}

/* Reveals */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal--d1 { transition-delay: 80ms; }
.reveal--d2 { transition-delay: 160ms; }
.reveal--d3 { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }