:root {
  --navy: #050507;
  --navy-soft: #080910;
  --cream: #ececec;
  --cream-soft: #b6b8bf;
  --gold: #b8bec8;
  --gold-soft: #6f7783;
  --error: #e15c5c;
  --panel: rgba(8, 11, 19, 0.82);
  --panel-strong: rgba(10, 14, 24, 0.94);
  --line: rgba(255, 255, 255, 0.09);
  --glow: rgba(152, 160, 176, 0.16);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
}

html.lenis-enabled,
html.lenis-enabled body {
  height: auto;
}

body {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(circle at top left, #171922 0, var(--navy) 40%, #010102 100%);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Global typography */

h1, h2, h3, h4 {
  font-family: 'Cormorant Garant', Georgia, serif;
}

h1 {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 500;
  line-height: 1.15;
}

h3, h4 {
  font-weight: 500;
}

.label, .eyebrow, .section-label, .pillar-label, .section-kicker,
.hero-kicker, .card-tag, .news-tag, .rep-role, .group-unit-kicker {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 0%, rgba(140, 149, 173, 0.13) 0, transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(143, 151, 166, 0.14) 0, transparent 55%),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.08) 0,
      transparent 22%,
      transparent 78%,
      rgba(255, 255, 255, 0.06) 100%
    );
  mix-blend-mode: soft-light;
  opacity: 0.7;
  z-index: -1;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header / Navigation */

header {
  position: sticky;
  top: 0;
  /* Header sits above every site widget (cache prompt z-index 40,
     agent composer 5, hero globe 0, etc.). Only the cache MODAL on
     first visit intentionally outranks it. */
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  /* IMPORTANT: backdrop-filter + background live on ::before, not on
     <header> itself. Putting backdrop-filter on <header> creates a CSS
     containing block for descendants — which traps the mobile menu's
     `position: fixed` overlay inside the header's tiny height (menu
     appears as a strip at the top, page content shows below). The
     pseudo-element approach preserves the visual blur without that
     side effect. */
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(to bottom,
    rgba(4, 9, 20, 0.92),
    rgba(4, 9, 20, 0.80),
    transparent
  );
  pointer-events: none;
  transition: backdrop-filter 0.32s ease, background 0.32s ease;
}

.nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

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

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text span:first-child {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

.brand-text span:last-child {
  font-size: 0.7rem;
  opacity: 0.72;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nav-links a {
  opacity: 0.72;
  position: relative;
  padding-bottom: 0.2rem;
  transition: opacity 0.2s ease;
}

.nav-links a.nav-cta {
  opacity: 1;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.18s ease-out;
}

.nav-links a:hover {
  opacity: 1;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.6);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
      background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.16),
        rgba(0, 0, 0, 0.02)
      );
  cursor: pointer;
  transition: all 0.18s ease-out;
  white-space: nowrap;
}

.nav-cta:hover {
  background: rgba(0, 0, 0, 0.26);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* Layout */

main {
  flex: 1;
}

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  scroll-margin-top: 80px;
  position: relative;
  opacity: 1;
  transform: none;
}

.section::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 1.5rem;
  width: 96px;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 190, 200, 0.68), transparent);
  pointer-events: none;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

.section--hero,
.section--hero-center {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.section--hero {
  padding-top: 4.5rem;
  padding-bottom: 4rem;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.6fr);
  gap: 3rem;
  align-items: center;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.section--visual {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 840px) {
  .nav-links {
    display: none;
  }
  .section--hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 3.5rem;
  }
}

.hero-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--cream-soft);
  margin-bottom: 0.9rem;
}

.hero-title {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: clamp(2.45rem, 3.3vw + 1.5rem, 3.6rem);
  line-height: 1.06;
  margin-bottom: 1.1rem;
}

.hero-title span {
  color: var(--gold);
}

.hero-body {
  font-size: 0.96rem;
  max-width: 32rem;
  color: rgba(245, 242, 234, 0.82);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  align-items: center;
  margin-bottom: 2rem;
}

.hero-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.4rem 0.9rem;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 15, 35, 0.9);
}

.hero-divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.14);
}

.hero-detail {
  font-size: 0.8rem;
  opacity: 0.82;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.4rem;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #0a0912;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 16px 38px rgba(0, 0, 0, 0.7),
    0 0 35px rgba(152, 160, 176, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 22px 46px rgba(0, 0, 0, 0.85),
    0 0 60px rgba(165, 173, 188, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--cream-soft);
  border-color: rgba(255, 255, 255, 0.16);
}

.btn-ghost:hover {
  background: rgba(8, 20, 51, 0.96);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* Hero right card */

.hero-card {
  background: radial-gradient(circle at top left, #162040 0, #040e18 52%, #020509 100%);
  border-radius: 0;
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
}

.hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  gap: 1rem;
}

.hero-card-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.82;
}

.hero-card-badge {
  font-size: 0.7rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0;
  background: rgba(5, 16, 41, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.55);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.metric {
  padding: 0.9rem 0.95rem;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at top left, #1a2a4e 0, #050b17 55%, #050814 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.3);
}

.metric-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
  margin-bottom: 0.55rem;
}

.metric-value {
  font-size: 1.2rem;
  font-weight: 500;
}

.metric-sub {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 0.1rem;
}

.hero-steps {
  margin-top: 0.3rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  opacity: 0.9;
}

.hero-steps span {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 0;
  background: rgba(9, 20, 48, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.82;
}

.trade-visual {
  position: relative;
  overflow: hidden;
}

.trade-visual img,
.trade-visual video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transform: translate3d(0, var(--parallax-offset, 0px), 0) scale(1.04);
  transform-origin: center;
}

.trade-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(1, 8, 24, 0.82),
    rgba(1, 8, 24, 0.3),
    rgba(0, 0, 0, 0.6)
  );
  display: flex;
  align-items: flex-end;
  padding: 1.3rem 1.6rem;
}

.trade-visual-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(188, 195, 208, 0.92);
  margin-bottom: 0.35rem;
}

.trade-visual-title {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.18rem;
  max-width: 24rem;
}

/* Services */

.section-title {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
}

.section-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.section--visual > .section-kicker {
  padding-left: 1.5rem;
}

.section-intro {
  max-width: 40rem;
  font-size: 0.92rem;
  opacity: 0.82;
  line-height: 1.7;
  margin-bottom: 2.1rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

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

.card {
  background: linear-gradient(145deg, #0a1428, #030610);
  border-radius: 0;
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 28px 55px rgba(0, 0, 0, 0.75);
  border-color: rgba(0, 0, 0, 0.2);
}

.card-title {
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.card-tag {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 0.55rem;
}

.card-body {
  font-size: 0.88rem;
  opacity: 0.82;
  line-height: 1.6;
}

.card-list {
  margin-top: 0.8rem;
  list-style: none;
  padding-left: 0;
}

.card-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.9rem;
}

/* Process */

.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  margin-top: 1.5rem;
  align-items: flex-start;
}

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

.step-list {
  list-style: none;
  padding-left: 0;
}

.step-item {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 1rem;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--gold);
  flex-shrink: 0;
}

.step-content h4 {
  font-size: 0.98rem;
  margin-bottom: 0.25rem;
}

.step-content p {
  font-size: 0.86rem;
  opacity: 0.86;
  line-height: 1.6;
}

.process-note {
  font-size: 0.84rem;
  opacity: 0.8;
  margin-top: 0.8rem;
}

.process-card {
  background: radial-gradient(circle at top left, #222f51 0, #050a17 55%, #040713 100%);
  border-radius: 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
}

.process-card h4 {
  font-size: 0.96rem;
  margin-bottom: 0.5rem;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
  margin-bottom: 0.7rem;
}

.badge {
  font-size: 0.72rem;
  padding: 0.25rem 0.7rem;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 20, 49, 0.95);
  opacity: 0.9;
}

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.2rem;
  margin-top: 1.6rem;
}

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

form {
  display: grid;
  gap: 0.9rem;
}

label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.1rem;
  opacity: 0.86;
}

.field-group {
  display: flex;
  flex-direction: column;
}

input,
textarea {
  background: radial-gradient(circle at top, rgba(26, 44, 92, 0.75), rgba(4, 9, 22, 0.96));
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cream);
  padding: 0.65rem 0.8rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  font-family: inherit;
  resize: vertical;
  min-height: 0;
}

input:focus,
textarea:focus {
  border-color: rgba(184, 190, 200, 0.95);
  box-shadow:
    0 0 0 1px rgba(184, 190, 200, 0.8),
    0 0 24px rgba(154, 162, 178, 0.35);
  background: radial-gradient(circle at top, rgba(35, 56, 112, 0.95), rgba(6, 14, 32, 0.98));
}

textarea {
  min-height: 130px;
}

.contact-details {
  font-size: 0.9rem;
  opacity: 0.86;
  line-height: 1.7;
}

.contact-details p + p {
  margin-top: 0.7rem;
}

.contact-grid a {
  color: var(--gold);
}

/* Representatives */

.section--representatives {
  padding-bottom: 2.6rem;
}

.rep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.rep-card {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  background: radial-gradient(circle at top left, #162040 0, #040e18 55%, #020509 100%);
  border-radius: 0;
  padding: 1.3rem 1.3rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.rep-photo-wrap {
  width: 220px;
  flex-shrink: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.rep-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.02);
}

.rep-photo--timotheus {
  object-position: center 18%;
  transform: scale(1.12);
}

.rep-photo-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(184, 190, 200, 0.0) 0%,
    rgba(184, 190, 200, 0.14) 35%,
    rgba(184, 190, 200, 0.0) 65%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.rep-info {
  padding-top: 0.3rem;
  min-width: 0;
}

.rep-name {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.35rem;
  margin-bottom: 0.2rem;
}

.rep-role {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(188, 195, 208, 0.92);
  margin-bottom: 0.9rem;
}

.rep-bio {
  font-size: 0.92rem;
  opacity: 0.86;
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 1rem;
}

.rep-focus {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .rep-card {
    flex-direction: column;
    gap: 1rem;
  }

  .rep-photo-wrap {
    width: 100%;
    height: 320px;
    aspect-ratio: unset;
  }

  .rep-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
  }

  .rep-photo--timotheus {
    object-position: center 12%;
    transform: none;
  }
}

/* Footer */

footer {
  padding: 1.8rem 1.5rem 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2rem;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  opacity: 0.72;
}

.footer-inner span {
  white-space: nowrap;
}

.footer-inner a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.footer-socials a {
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.18s, transform 0.18s;
  display: flex;
  align-items: center;
  color: var(--cream);
}

.footer-socials a svg {
  width: 20px;
  height: 20px;
}

.footer-socials a:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* ===== Group Section ===== */

.group-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  pointer-events: none;
  user-select: none;
}

.group-tree-node {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--cream-soft);
  opacity: 0.55;
  padding: 0.28rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
}

.group-tree-stem {
  width: 1px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.group-tree-branch {
  width: min(520px, 80%);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent);
  margin-bottom: 1.8rem;
}

.group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.group-card {
  background: linear-gradient(145deg, #0a1428, #030610);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.13);
}

.group-card--flagship {
  border-color: rgba(201, 168, 76, 0.22);
  background: linear-gradient(145deg, #161e35, #090e1c);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.06) inset;
}

.group-card--flagship:hover {
  border-color: rgba(201, 168, 76, 0.38);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(201, 168, 76, 0.1) inset;
}

.group-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}

.group-unit-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
  opacity: 0.85;
}

.group-unit-kicker--flagship {
  color: #c9a84c;
  opacity: 1;
}

.group-unit-name {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.3;
  margin: 0;
}

.group-unit-desc {
  font-size: 0.86rem;
  color: var(--cream-soft);
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
}

.group-unit-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
}

.group-unit-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.83rem;
  color: var(--cream-soft);
  opacity: 0.78;
  margin-bottom: 0.28rem;
  line-height: 1.5;
}

.group-unit-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.group-badge {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 0;
  flex-shrink: 0;
  border: 1px solid;
}

.group-badge--live   { background: rgba(40, 160, 80, 0.12);  color: #5ecb87; border-color: rgba(94, 203, 135, 0.22); }
.group-badge--active { background: rgba(40, 160, 80, 0.10);  color: #5ecb87; border-color: rgba(94, 203, 135, 0.18); }
.group-badge--dev    { background: rgba(201, 168, 76, 0.11); color: #c9a84c; border-color: rgba(201, 168, 76, 0.24); }
.group-badge--soon   { background: rgba(255, 255, 255, 0.04); color: var(--cream-soft); border-color: rgba(255, 255, 255, 0.1); }

@media (max-width: 720px) {
  .group-grid {
    grid-template-columns: 1fr;
  }
  .group-tree-branch {
    width: 60%;
  }
}

/* ===== Intro Overlay ===== */

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050507;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s ease;
}

#intro-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}

.intro-inner {
  text-align: center;
  user-select: none;
}

.intro-wordmark {
  display: block;
  font-family: 'Cormorant Garant', 'Cormorant Garant', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 5vw, 4.2rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #f5f0e8;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.intro-wordmark.is-visible {
  opacity: 1;
}

.intro-line {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffffff, transparent);
  margin: 1.4rem auto 0;
  transition: width 0.9s ease 0.6s;
}

.intro-line.is-visible {
  width: 120px;
}

/* ===== Trade News ===== */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2rem;
}

.news-card {
  background: var(--navy-soft);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 1.6rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.13);
}

.news-card-link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-card--empty {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.96), rgba(8, 12, 20, 0.92));
}

.news-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border-radius: 0;
  width: fit-content;
  border: 1px solid;
}

.news-tag--logistics { background: rgba(184, 190, 200, 0.08); color: #a8b4c0; border-color: rgba(168, 180, 192, 0.2); }
.news-tag--policy    { background: rgba(201, 168, 76, 0.08);  color: #c9a84c; border-color: rgba(201, 168, 76, 0.2);  }
.news-tag--sourcing  { background: rgba(184, 190, 200, 0.08); color: #9ab4a8; border-color: rgba(154, 180, 168, 0.2); }
.news-tag--planning  { background: rgba(184, 190, 200, 0.08); color: #b4a8c8; border-color: rgba(180, 168, 200, 0.2); }
.news-tag--trade     { background: rgba(184, 190, 200, 0.08); color: #b8bec8; border-color: rgba(184, 190, 200, 0.2); }

.news-title {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-excerpt {
  font-size: 0.84rem;
  color: var(--cream-soft);
  line-height: 1.65;
  flex: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
}

.news-read {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--cream-soft);
  text-decoration: none;
  transition: color 0.15s;
}

.news-read:hover { color: var(--cream); }

.news-date {
  font-size: 0.74rem;
  color: var(--gold-soft);
  font-style: italic;
}

.news-source {
  opacity: 0.52;
  font-size: 0.72rem;
  margin-left: auto;
  text-align: right;
}

.news-cta {
  margin-top: 2rem;
  text-align: center;
}

@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Chat Widget ===== */

#chat-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
}

.chat-toggle {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 0;
  background: linear-gradient(135deg, #1c1f2b 0%, #10121a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--cream);
  margin-left: auto;
}

.chat-toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.6);
}

.chat-icon-chat,
.chat-icon-close {
  position: absolute;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.chat-toggle .chat-icon-close       { opacity: 0; transform: scale(0.6) rotate(-45deg); }
.chat-toggle .chat-icon-chat         { opacity: 1; transform: scale(1) rotate(0deg); }
.chat-toggle--open .chat-icon-close  { opacity: 1; transform: scale(1) rotate(0deg); }
.chat-toggle--open .chat-icon-chat   { opacity: 0; transform: scale(0.6) rotate(45deg); }

/* Panel */
.chat-panel {
  position: absolute;
  bottom: 66px;
  right: 0;
  width: 348px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #14161f 0%, #0c0d12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255,255,255,0.05) inset;
  overflow: hidden;
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-panel--hidden {
  opacity: 0;
  transform: scale(0.95) translateY(6px);
  pointer-events: none;
}

/* Header */
.chat-header {
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: linear-gradient(135deg, #21253a, #14161f);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cream-soft);
  flex-shrink: 0;
}

.chat-header-info   { flex: 1; min-width: 0; }
.chat-header-title  { font-size: 0.82rem; font-weight: 600; color: var(--cream); line-height: 1.2; }
.chat-header-sub    { font-size: 0.72rem; color: var(--gold-soft); margin-top: 2px; }

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar       { width: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 0; }

.chat-msg {
  max-width: 86%;
  padding: 0.55rem 0.8rem;
  border-radius: 0;
  font-size: 0.835rem;
  line-height: 1.55;
  word-break: break-word;
}

.chat-msg--user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.09);
  color: var(--cream);
  border-bottom-right-radius: 3px;
}

.chat-msg--assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream-soft);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom-left-radius: 3px;
}

/* Typing dots */
.chat-msg--typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0.7rem 0.8rem;
}

.chat-msg--typing span {
  width: 5px;
  height: 5px;
  background: var(--gold-soft);
  border-radius: 0;
  animation: chatDot 1.3s ease-in-out infinite;
}

.chat-msg--typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-msg--typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes chatDot {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1;   }
}

/* Input row */
.chat-form {
  padding: 0.65rem 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  display: flex;
  gap: 0.45rem;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 0.55rem 0.8rem;
  color: var(--cream);
  font-size: 0.835rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}

.chat-input:focus         { border-color: rgba(255, 255, 255, 0.18); }
.chat-input::placeholder  { color: var(--gold-soft); }
.chat-input:disabled      { opacity: 0.5; }

.chat-send {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-send:hover    { background: rgba(255, 255, 255, 0.14); }
.chat-send:disabled { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 420px) {
  #chat-widget        { right: 1rem; bottom: 1rem; }
  .chat-panel         { width: calc(100vw - 2rem); right: -0.5rem; }
}

/* ===== Nav Dropdown ===== */

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  color: var(--cream);
  font-family: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.72;
  cursor: pointer;
  padding: 0 0 0.2rem;
  position: relative;
  transition: opacity 0.2s ease;
}

.nav-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.18s ease-out;
}

.nav-dropdown:hover .nav-dropdown-toggle {
  opacity: 1;
}

.nav-dropdown:hover .nav-dropdown-toggle::after {
  width: 100%;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(6, 10, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 0.4rem;
  padding-top: 1.2rem;
  min-width: 172px;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.8);
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: flex;
  flex-direction: column;
}

.nav-dropdown-menu a {
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.72;
  border-radius: 0;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: block;
}

.nav-dropdown-menu a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}

.nav-dropdown-menu a::after {
  display: none;
}

/* Grouped mega-dropdown variant (used by the Tools menu) */
.nav-dropdown-menu.grouped {
  display: none;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 0.4rem 1.5rem;
  padding: 1.2rem 1.4rem;
  min-width: 740px;
  left: 50%;
  transform: translateX(-50%);
}

.nav-dropdown:hover .nav-dropdown-menu.grouped {
  display: grid;
}

.nav-mega-section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-mega-heading {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.45rem;
  margin-bottom: 0.35rem;
}

.nav-mega-item {
  display: flex !important;
  flex-direction: column;
  padding: 0.45rem 0.55rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  border-radius: 2px;
  transition: background 0.14s ease;
}

.nav-mega-item:hover {
  background: rgba(255, 255, 255, 0.04);
  opacity: 1;
}

.nav-mega-item.active {
  background: rgba(255, 255, 255, 0.05);
}

.nav-mega-item-label {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.nav-mega-item-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.15rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.nav-dropdown.is-active .nav-dropdown-toggle {
  opacity: 1;
}
.nav-dropdown.is-active .nav-dropdown-toggle::after {
  width: 100%;
}

/* ===== Account Widget (Sprint account-widget-v1) =====
   Replaces the static "Sign in" link in the nav when the user is
   authenticated. Sits in the same secondary-links slot so it inherits
   the rightward positioning of the existing layout. Click-toggle (not
   hover) because it's a settings-class menu rather than browsing. */

.nav-account {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.32rem 0.6rem 0.32rem 0.36rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
  max-width: 220px;
}

.nav-account-toggle:hover,
.nav-account.is-open .nav-account-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.nav-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(135deg, #b8bec8, #6f7783);
  color: #0a0912;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0;
  border-radius: 999px;
  flex-shrink: 0;
}

.nav-account-email {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

.nav-account-caret {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-left: 0.05rem;
  transition: transform 0.15s ease;
}

.nav-account.is-open .nav-account-caret {
  transform: rotate(180deg);
}

.nav-account-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 260px;
  background: rgba(6, 10, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.5rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.8);
  z-index: 220;
  flex-direction: column;
}

.nav-account.is-open .nav-account-menu {
  display: flex;
}

.nav-account-menu-email {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 0.55rem 0.8rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.nav-account-menu a,
.nav-account-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
  font-family: inherit;
  letter-spacing: 0.05em;
  color: var(--cream);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-account-menu a:hover,
.nav-account-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-account-menu a::after {
  display: none;
}

.nav-account-signout {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-top: 0.3rem;
  color: rgba(255, 200, 200, 0.85) !important;
}

.nav-account-signout:hover {
  background: rgba(201, 80, 80, 0.12) !important;
  color: #f4b8b8 !important;
}

@media (max-width: 840px) {
  .nav-account-email { max-width: 8rem; }
  .nav-account-menu { right: auto; left: 0; min-width: 240px; }
}

/* ===== Back Link ===== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cream-soft);
  opacity: 0.6;
  transition: opacity 0.18s ease;
  margin-bottom: 1.8rem;
}

.back-link:hover {
  opacity: 1;
}

/* ===== Unit Sub-page Hero ===== */

.unit-hero {
  padding-top: 3.8rem;
  padding-bottom: 3.2rem;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.unit-hero-title {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: clamp(2rem, 3vw + 1.2rem, 3.2rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}

.unit-hero-body {
  font-size: 0.96rem;
  max-width: 52ch;
  color: rgba(245, 242, 234, 0.82);
  line-height: 1.72;
  margin-bottom: 1.6rem;
}

/* ===== Status Badge ===== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.32rem 0.85rem;
  border-radius: 0;
  margin-bottom: 1.2rem;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: currentColor;
  flex-shrink: 0;
  animation: pulseDot 2.2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

.status-badge--live   { color: #5ecb87; border: 1px solid rgba(94,203,135,0.25);  background: rgba(40,160,80,0.1);   }
.status-badge--active { color: #5ecb87; border: 1px solid rgba(94,203,135,0.2);   background: rgba(40,160,80,0.08);  }
.status-badge--dev    { color: #c9a84c; border: 1px solid rgba(201,168,76,0.28);  background: rgba(201,168,76,0.08); }
.status-badge--soon   { color: var(--cream-soft); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }

/* ===== Feature Grid ===== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.feature-card {
  background: linear-gradient(145deg, #0a1428, #030610);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 1.6rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.13);
}

.feature-card--accent {
  border-color: rgba(201, 168, 76, 0.2);
  background: linear-gradient(145deg, #161e35, #090e1c);
}

.feature-card--accent:hover {
  border-color: rgba(201, 168, 76, 0.36);
}

.feature-num {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  opacity: 0.75;
}

.feature-title {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.35;
}

.feature-desc {
  font-size: 0.86rem;
  color: var(--cream-soft);
  line-height: 1.65;
  opacity: 0.85;
}

/* ===== CTA / Waitlist Section ===== */

.cta-box {
  background: linear-gradient(145deg, #0f1a35, #07101f);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 2.8rem 2rem;
  max-width: 560px;
  margin: 2rem auto 0;
  text-align: center;
}

.cta-box h2 {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin-bottom: 0.65rem;
  line-height: 1.2;
}

.cta-box p {
  font-size: 0.92rem;
  opacity: 0.8;
  line-height: 1.68;
  max-width: 42ch;
  margin: 0 auto 1.8rem;
}

.cta-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* ===== Group Card Visit Link ===== */

.group-card-footer {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.group-visit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cream-soft);
  opacity: 0.7;
  transition: opacity 0.18s ease, gap 0.18s ease;
}

.group-visit-link:hover {
  opacity: 1;
  gap: 0.5rem;
}

/* ===== Group Mission ===== */

.mission-block {
  max-width: 780px;
  margin: 1.6rem 0 0;
}

.mission-block p {
  font-size: 0.95rem;
  line-height: 1.75;
  opacity: 0.84;
  margin-bottom: 1rem;
}

.mission-block p:last-child {
  margin-bottom: 0;
}

.read-more-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.4rem 0;
  margin-top: 0.5rem;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  display: block;
}

.read-more-btn:hover { opacity: 1; }


/* ── LANGUAGE SWITCHER ── */
.lang-switcher { display: flex; gap: 0.4rem; align-items: center; }
.lang-btn { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; padding: 0.28rem 0.6rem; border-radius: 0; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); transition: all 0.18s; text-decoration: none; }
.lang-btn:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.lang-btn.lang-active { color: #0a0912; background: linear-gradient(135deg, #b8bec8, #6f7783); border-color: transparent; }

/* ── MOBILE FIXES ── */
@media (max-width: 600px) {
  /* Hero kicker wraps cleanly */
  .hero-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    word-break: break-word;
  }

  /* Hero center text */
  .section--hero-center {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  /* Group grid: single column on small screens */
  .group-grid {
    grid-template-columns: 1fr;
  }

  /* Nav: hide lang switcher labels to save space, keep buttons */
  .lang-switcher {
    gap: 0.3rem;
  }

  /* Footer wraps */
  .footer-inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  /* News grid: single column */
  .news-grid {
    grid-template-columns: 1fr;
  }

  /* Section padding */
  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ===== Background grid overlay ===== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 140px 140px;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0, transparent 74%);
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0, transparent 74%);
  opacity: 0.22;
  z-index: -1;
}

/* ===== Motion system — reveal / stagger / parallax ===== */

.motion-safe [data-reveal],
.motion-safe [data-stagger-item] {
  transition:
    opacity var(--reveal-duration, 760ms) cubic-bezier(0.18, 1, 0.32, 1),
    transform var(--reveal-duration, 760ms) cubic-bezier(0.18, 1, 0.32, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-safe [data-reveal]:not(.is-visible),
.motion-safe [data-stagger-item]:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, calc(var(--reveal-y, 0px) + var(--parallax-offset, 0px)), 0) scale(var(--reveal-scale, 1));
}

.motion-safe [data-reveal].is-visible,
.motion-safe [data-stagger-item].is-visible {
  opacity: 1;
  transform: translate3d(0, var(--parallax-offset, 0px), 0) scale(1);
}

[data-parallax] {
  --parallax-offset: 0px;
  will-change: transform;
}

.motion-reduced [data-reveal],
.motion-reduced [data-stagger-item] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Guides are dense content / SEO pages — opt them out of the cinematic scroll
   reveal + parallax. The parallax offset was displacing the guide hero down
   over the sections below it, leaving the intro text "stuck" and overlapping.
   Content must always render in its natural place, fully visible. */
.guide-shell [data-reveal],
.guide-shell [data-stagger-item] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ===== Hero video parallax ===== */

.hero-video-bg[data-parallax] {
  transform: translate3d(0, var(--parallax-offset, 0px), 0) scale(1.08);
}

/* ===== Card top-edge highlight accents ===== */

.group-card,
.news-card,
.feature-card,
.rep-card,
.card,
.process-card,
.cta-box {
  position: relative;
  overflow: hidden;
}

.group-card::before,
.news-card::before,
.feature-card::before,
.rep-card::before,
.card::before,
.process-card::before,
.cta-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  pointer-events: none;
}

/* ===== Pinned Story ===== */

.section--story {
  max-width: 100%;
  padding: 0;
  margin-top: 1.5rem;
  --story-progress: 0;
}

.section--story::before {
  display: none;
}

.story-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.story-panel {
  position: relative;
  min-height: 100svh;
  padding: clamp(3.4rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
  gap: clamp(2rem, 5vw, 4.4rem);
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(184, 190, 200, 0.12), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(184, 190, 200, 0.08), transparent 28%),
    linear-gradient(160deg, rgba(7, 9, 16, 0.96), rgba(5, 7, 12, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow:
    0 38px 120px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.story-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 136px 136px;
  opacity: 0.24;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
  pointer-events: none;
}

.story-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--story-progress) * 100%);
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 190, 200, 0.82), rgba(201, 168, 76, 0.28));
  transition: width 0.2s ease;
  pointer-events: none;
}

.story-copy-column,
.story-visual-column {
  position: relative;
  z-index: 1;
}

.story-copy-column .section-kicker {
  margin-bottom: 0.9rem;
  color: rgba(214, 219, 228, 0.82);
}

.story-overline {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  line-height: 1.75;
}

.story-copy-stack {
  margin-top: 2rem;
}

.story-copy {
  position: relative;
}

.story-copy + .story-copy {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.motion-safe .story-copy-stack {
  position: relative;
  min-height: 25rem;
}

.motion-safe .story-copy {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  pointer-events: none;
}

.motion-safe .story-copy + .story-copy {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.motion-safe .story-copy.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.story-index {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(184, 190, 200, 0.72);
  margin-bottom: 1rem;
}

.story-index::after {
  content: "";
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 190, 200, 0.55), transparent);
}

.story-title {
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: clamp(2.35rem, 4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 11ch;
  margin-bottom: 1.2rem;
}

.story-text {
  max-width: 50ch;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(223, 227, 235, 0.74);
}

.story-board {
  position: relative;
  min-height: 32rem;
  padding: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.4rem;
  align-items: stretch;
  background: linear-gradient(160deg, rgba(8, 11, 19, 0.7), rgba(5, 7, 12, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.35);
}

.story-board-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.34;
  pointer-events: none;
}

.story-board-sources {
  display: grid;
  gap: 0.95rem;
  align-self: center;
  z-index: 1;
}

.story-board-node {
  position: relative;
  z-index: 1;
  padding: 1rem 1rem 1.1rem;
  background: linear-gradient(150deg, rgba(16, 21, 33, 0.92), rgba(8, 10, 18, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease, opacity 0.45s ease;
}

.story-board-node--orca {
  align-self: center;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
}

.story-node-label {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 190, 200, 0.72);
  margin-bottom: 0.55rem;
}

.story-board-node strong {
  display: block;
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.15;
  margin-bottom: 0.45rem;
}

.story-board-node p {
  font-size: 0.84rem;
  line-height: 1.65;
  color: rgba(216, 221, 229, 0.66);
}

.story-board-line {
  position: absolute;
  left: 41%;
  width: 20%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(184, 190, 200, 0.05));
  opacity: 0.18;
  transform-origin: left center;
  transform: scaleX(0.32);
  transition: transform 0.55s ease, opacity 0.55s ease, background 0.55s ease;
  z-index: 0;
}

.story-board-line--source { top: 20%; }
.story-board-line--logistics { top: 50%; }
.story-board-line--regulation { top: 80%; }

.story-board-pulse {
  position: absolute;
  right: 12%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(184, 190, 200, 0.15) 0, transparent 68%);
  filter: blur(20px);
  opacity: 0.35;
  transition: opacity 0.55s ease, transform 0.55s ease, background 0.55s ease;
  pointer-events: none;
}

.story-signal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.story-signal {
  padding: 0.9rem 1rem;
  min-height: 5.6rem;
  background: linear-gradient(160deg, rgba(10, 14, 24, 0.82), rgba(7, 9, 15, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
}

.story-signal span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(184, 190, 200, 0.68);
  margin-bottom: 0.45rem;
}

.story-signal strong {
  display: block;
  font-family: 'Cormorant Garant', Georgia, serif;
  font-size: 1rem;
  line-height: 1.24;
}

.story-signal.is-active {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

/* Story step state changes */

.section--story[data-story-step="1"] .story-board-node--source,
.section--story[data-story-step="1"] .story-board-node--logistics {
  border-color: rgba(184, 190, 200, 0.16);
}

.section--story[data-story-step="1"] .story-board-node--regulation { opacity: 0.55; }
.section--story[data-story-step="1"] .story-board-node--orca { opacity: 0.72; }
.section--story[data-story-step="1"] .story-board-pulse { opacity: 0.22; }

.section--story[data-story-step="2"] .story-board-node--regulation,
.section--story[data-story-step="2"] .story-signal:nth-child(2).is-active {
  border-color: rgba(201, 168, 76, 0.38);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(201, 168, 76, 0.08) inset;
}

.section--story[data-story-step="2"] .story-board-line--regulation {
  opacity: 0.78;
  transform: scaleX(0.78);
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.58), rgba(201, 168, 76, 0.05));
}

.section--story[data-story-step="2"] .story-board-pulse {
  opacity: 0.42;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.2) 0, transparent 68%);
}

.section--story[data-story-step="3"] .story-board-node--source,
.section--story[data-story-step="3"] .story-board-node--logistics,
.section--story[data-story-step="3"] .story-board-node--regulation {
  border-color: rgba(184, 190, 200, 0.2);
  opacity: 1;
}

.section--story[data-story-step="3"] .story-board-node--orca,
.section--story[data-story-step="3"] .story-signal:nth-child(3).is-active {
  border-color: rgba(184, 190, 200, 0.36);
  box-shadow:
    0 26px 56px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(184, 190, 200, 0.08) inset,
    0 0 48px rgba(152, 160, 176, 0.18);
  transform: translateY(-4px);
}

.section--story[data-story-step="3"] .story-board-line {
  opacity: 0.92;
  transform: scaleX(1);
  background: linear-gradient(90deg, rgba(184, 190, 200, 0.62), rgba(184, 190, 200, 0.08));
}

.section--story[data-story-step="3"] .story-board-pulse {
  opacity: 0.54;
  background: radial-gradient(circle, rgba(184, 190, 200, 0.22) 0, transparent 68%);
  transform: translateY(-50%) scale(1.08);
}

/* Story section mobile fallback */

@media (max-width: 960px) {
  .story-panel {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 1.4rem;
  }

  .story-copy-stack { min-height: auto; margin-top: 1.5rem; }

  .story-copy {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .story-copy + .story-copy {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .story-title { max-width: 14ch; }

  .story-board {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .story-board-line { display: none; }
  .story-board-node--orca { min-height: auto; }
  .story-signal-strip { grid-template-columns: 1fr; }
}

/* ===== Hamburger / mobile nav ===== */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  /* Min 44×44 touch target per Apple HIG / WCAG 2.5.5 */
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  z-index: 1100;
  flex-shrink: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.08);
  touch-action: manipulation;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream-soft);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
  transform-origin: center;
}

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

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

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

@media (max-width: 840px) {
  .nav-toggle { display: flex; }

  /* Mobile menu overlay. z-index 1500 puts it above the sticky header
     (1000), the cache widget (40), the first-visit cache modal (990),
     and the page-toc dots (40). The hamburger close button (.nav-toggle,
     z-1600) stays accessible on top. */
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    z-index: 1500;
    font-size: 1rem;
    letter-spacing: 0.14em;
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav-links.is-open { display: flex; }

  .nav-links a {
    opacity: 0.92;
    font-size: 1.05rem;
    /* WCAG 2.5.5 — 44×44 minimum touch target */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
  }
  .nav-links a:hover, .nav-links a:active { opacity: 1; }

  .nav-dropdown { position: static; width: 100%; max-width: 320px; }
  .nav-dropdown-toggle {
    width: 100%;
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    padding: 0.6rem 1rem;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255,255,255,0.08);
  }

  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0.6rem 0 0;
    gap: 0.8rem;
    flex-direction: column;
    display: none;
    align-items: center;
  }

  .nav-dropdown.is-open .nav-dropdown-menu { display: flex; }

  .nav-dropdown-toggle::after { display: none; }

  .nav-dropdown-menu.grouped {
    grid-template-columns: 1fr;
    min-width: auto;
    transform: none;
    left: auto;
    padding: 0.6rem 0 0;
    gap: 0.8rem;
  }
  .nav-dropdown.is-open .nav-dropdown-menu.grouped { display: grid; }
  .nav-mega-section { padding: 0.4rem 0; }
  .nav-mega-heading { text-align: center; }
  .nav-mega-item {
    align-items: center;
    text-align: center;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
  }

  /* Lang switcher is HIDDEN from the header bar on mobile by default —
     it competes for space with the hamburger and crowds the brand at
     narrow widths. It re-appears pinned to the bottom of the open menu
     overlay (rule below), so language switching is still one tap away
     when the menu is expanded. */
  .lang-switcher { display: none; }

  /* When the mobile menu is open, surface the lang switcher inside the
     overlay at the bottom-centre. z-1600 sits above the overlay (1500)
     so it stays tappable; the menu items above are vertically centred
     by .nav-links, leaving the bottom safely for this pill. */
  .nav-links.is-open ~ .lang-switcher {
    display: flex;
    position: fixed;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1600;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: rgba(8, 11, 19, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .nav-links.is-open ~ .lang-switcher .lang-btn {
    min-width: 44px;       /* WCAG 2.5.5 touch target */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
  }

  /* Hamburger button must always sit above the open menu overlay. */
  .nav-toggle { z-index: 1600; position: relative; }

  /* When the menu is OPEN, lift the close (X) button out of the
     sticky header and pin it directly to the top-right of the
     viewport. The visual position is identical, but this guards
     against an iOS Safari quirk where touches inside a sticky header
     can be dropped once body has `overflow: hidden` (which we set on
     menu open to lock the page scroll). z-1700 keeps it above the
     overlay (1500) and the lang-switcher pill (1600). */
  .nav-links.is-open ~ .nav-toggle {
    position: fixed;
    top: 1.1rem;
    right: 1.5rem;
    z-index: 1700;
  }

  /* On first visit, the cache modal (z-990) intentionally outranks
     normal UI. But once a preference is saved, the widget is hidden on
     mobile (per its own @media rule), so the menu has free reign. */
}

/* ===== WOW · Aurora background (slow-drifting accent blobs) ===== */

.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform;
}
.aurora-blob.b1 {
  width: 56vmax; height: 56vmax;
  top: -22vmax; left: -18vmax;
  background: radial-gradient(circle, rgba(184, 190, 200, 0.22) 0%, rgba(140, 149, 173, 0.10) 40%, transparent 70%);
  animation: aurora-drift-1 38s ease-in-out infinite alternate;
}
.aurora-blob.b2 {
  width: 48vmax; height: 48vmax;
  bottom: -20vmax; right: -16vmax;
  background: radial-gradient(circle, rgba(143, 151, 166, 0.20) 0%, rgba(111, 119, 131, 0.10) 40%, transparent 70%);
  animation: aurora-drift-2 46s ease-in-out infinite alternate;
}
.aurora-blob.b3 {
  width: 32vmax; height: 32vmax;
  top: 38%; left: 50%;
  background: radial-gradient(circle, rgba(184, 190, 200, 0.10) 0%, transparent 65%);
  animation: aurora-drift-3 60s ease-in-out infinite alternate;
  opacity: 0.45;
}
@keyframes aurora-drift-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vmax, 6vmax) scale(1.12); }
}
@keyframes aurora-drift-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-7vmax, -5vmax) scale(1.18); }
}
@keyframes aurora-drift-3 {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
  100% { transform: translate(-46%, -54%) scale(1.15); opacity: 0.55; }
}

/* ===== WOW · Cursor-following spotlight on cards ===== */

.spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 190, 200, 0.14), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ===== WOW · Sticky page TOC (right edge dot navigation) ===== */

.page-toc {
  position: fixed;
  top: 50%;
  right: 1.4rem;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.8rem 0.6rem;
  background: rgba(8, 12, 22, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 2px;
}
.page-toc a {
  position: relative;
  display: block;
  width: 1.3rem;
  height: 0.3rem;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.18s, width 0.18s;
}
.page-toc a:hover,
.page-toc a.active {
  background: var(--accent-color, #b8bec8);
  width: 1.7rem;
}
.page-toc a span {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.page-toc a:hover span {
  opacity: 1;
  color: rgba(255, 255, 255, 0.95);
}
@media (max-width: 1100px) {
  .page-toc { display: none; }
}

/* ===== WOW · Nav lift on scroll ===== */

header.scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  /* backdrop-filter + background moved to ::before — see header rule.
     Putting backdrop-filter directly on <header> creates a containing
     block that breaks the mobile menu's fullscreen overlay. */
}

header.scrolled::before {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(4, 9, 20, 0.92);
}

header {
  transition: border-color 0.32s ease, box-shadow 0.32s ease;
}

/* ===== Reduced motion safeguards ===== */

@media (prefers-reduced-motion: reduce) {
  .hero-video-bg[data-parallax],
  .trade-visual img,
  .trade-visual video {
    transform: none !important;
  }

  .aurora-blob,
  .spotlight::before {
    animation: none !important;
    transition: none !important;
  }

  .story-copy,
  .story-board-node,
  .story-board-line,
  .story-board-pulse,
  .story-signal,
  .group-card,
  .news-card,
  .feature-card,
  .rep-card,
  .card,
  .process-card,
  .btn {
    transition: none !important;
  }
}

/* =========================================================================
   Agent chat — rendered markdown in agent message bubbles.
   Applies inside .msg--agent .msg-content; user messages stay plain text.
   ========================================================================= */
.msg--agent .msg-content { white-space: normal; }

.msg--agent .msg-content h1,
.msg--agent .msg-content h2,
.msg--agent .msg-content h3,
.msg--agent .msg-content h4,
.msg--agent .msg-content h5,
.msg--agent .msg-content h6 {
  font-family: 'Cormorant Garant', Georgia, serif;
  color: rgba(255, 255, 255, 0.97);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 1.1em 0 0.45em;
}
.msg--agent .msg-content h1 { font-size: 1.35rem; }
.msg--agent .msg-content h2 { font-size: 1.18rem; }
.msg--agent .msg-content h3 { font-size: 1.05rem; }
.msg--agent .msg-content h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-color, #b8bec8);
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
}
.msg--agent .msg-content h5,
.msg--agent .msg-content h6 { font-size: 0.85rem; }
.msg--agent .msg-content > h1:first-child,
.msg--agent .msg-content > h2:first-child,
.msg--agent .msg-content > h3:first-child,
.msg--agent .msg-content > h4:first-child { margin-top: 0; }

.msg--agent .msg-content p {
  margin: 0 0 0.75em;
  line-height: 1.7;
}
.msg--agent .msg-content p:last-child { margin-bottom: 0; }

.msg--agent .msg-content strong {
  color: rgba(255, 255, 255, 0.98);
  font-weight: 600;
}
.msg--agent .msg-content em {
  color: rgba(255, 255, 255, 0.86);
  font-style: italic;
}

.msg--agent .msg-content code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  background: rgba(184, 190, 200, 0.12);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.95);
}

.msg--agent .msg-content pre.code-block {
  font-family: 'Geist Mono', monospace;
  font-size: 0.8rem;
  padding: 0.85rem 1rem;
  background: rgba(8, 12, 22, 0.7);
  border-left: 2px solid var(--accent-color, #b8bec8);
  margin: 0.85em 0;
  overflow-x: auto;
  white-space: pre;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
}
.msg--agent .msg-content pre.code-block code {
  background: transparent;
  padding: 0;
  font-size: 1em;
  color: inherit;
}

.msg--agent .msg-content ul,
.msg--agent .msg-content ol {
  margin: 0.55em 0 0.85em;
  padding-left: 1.5em;
}
.msg--agent .msg-content li {
  margin-bottom: 0.32em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.msg--agent .msg-content li::marker {
  color: rgba(184, 190, 200, 0.65);
}

.msg--agent .msg-content a {
  color: var(--accent-color, #b8bec8);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 190, 200, 0.4);
  transition: color 0.15s, text-decoration-color 0.15s;
}
.msg--agent .msg-content a:hover {
  color: rgba(255, 255, 255, 0.97);
  text-decoration-color: rgba(184, 190, 200, 0.9);
}

.msg--agent .msg-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 1.1em 0;
}