:root {
  --experience-navy: #050918;
  --experience-blue: #286cff;
  --experience-orange: #ff762c;
  --experience-cyan: #83caff;
  --experience-ink: #111b31;
  --experience-line: rgba(139, 174, 231, .2);
  --experience-nav-height: 90px;
}

@view-transition {
  navigation: auto;
}

html {
  scroll-padding-top: calc(var(--experience-nav-height) + 16px);
}

body.has-interior-nav {
  padding-top: var(--experience-nav-height);
}

body.has-interior-nav .prog-wrap,
body.has-interior-nav .steps-bar {
  top: var(--experience-nav-height);
}

.experience-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  min-height: var(--experience-nav-height);
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
  padding: 7px clamp(16px, 4vw, 64px);
  border-bottom: 1px solid rgba(151, 182, 240, .16);
  background: rgba(5, 9, 24, .94);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
  font-family: "Nunito Sans", sans-serif;
}

.experience-nav.is-scrolled {
  background: rgba(5, 9, 24, .98);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .24);
}

.experience-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.experience-brand img {
  display: block;
  width: 128px;
  height: 76px;
  margin: 0;
  object-fit: contain;
  background: transparent;
}

.experience-brand .experience-logo-transparent {
  background: transparent;
}

.experience-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.45vw, 23px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.experience-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #d5def0;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease;
  white-space: nowrap;
}

.experience-links a:hover,
.experience-links a[aria-current="page"] {
  color: #fff;
}

.experience-links a:hover::after,
.experience-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.experience-links a::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  background: var(--experience-orange);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.experience-links li {
  position: relative;
}

.experience-cta {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 126, 40, .8);
  background: linear-gradient(120deg, #ff762c, #df481b);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow .2s ease, transform .2s ease;
  white-space: nowrap;
}

.experience-cta:hover {
  box-shadow: 0 8px 24px rgba(255, 118, 44, .22);
  transform: translateY(-2px);
}

.experience-menu-toggle {
  display: none;
  min-width: 48px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(207, 222, 255, .5);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 800 .68rem "Nunito Sans", sans-serif;
  text-transform: uppercase;
}

:focus-visible {
  outline: 3px solid var(--experience-cyan);
  outline-offset: 3px;
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}

.has-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(48px, 7vw, 88px);
  background:
    radial-gradient(ellipse at 78% 12%, rgba(40, 108, 255, .24), transparent 44%),
    radial-gradient(ellipse at 95% 100%, rgba(255, 118, 44, .12), transparent 40%),
    linear-gradient(125deg, #050918, #0b1b3b 68%, #071026);
  color: #fff;
}

.page-hero h1 {
  max-width: 900px;
  font-size: clamp(2.8rem, 7.2vw, 5rem);
  text-wrap: balance;
}

body.has-interior-nav h1,
body.has-interior-nav h2,
body.has-interior-nav h3 {
  font-family: "Cormorant Garamond", serif;
}

body.has-interior-nav .hdr,
body.has-interior-nav .calc-header {
  background:
    radial-gradient(ellipse at 78% 8%, rgba(40, 108, 255, .24), transparent 44%),
    radial-gradient(ellipse at 92% 100%, rgba(255, 118, 44, .12), transparent 42%),
    linear-gradient(125deg, #050918, #0b1b3b 68%, #071026);
}

.page-hero::after {
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -8%;
  width: min(64vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(131, 202, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(131, 202, 255, .025), 0 0 0 76px rgba(131, 202, 255, .02);
  content: "";
  animation: experience-orbit 36s linear infinite;
  pointer-events: none;
}

.experience-card {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.experience-card:hover {
  border-color: rgba(40, 108, 255, .48);
  box-shadow: 0 18px 42px rgba(3, 10, 29, .16);
  transform: translateY(-4px);
}

@keyframes experience-orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 1260px) {
  .experience-nav {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-right: clamp(16px, 4vw, 36px);
    padding-left: clamp(16px, 4vw, 36px);
  }

  .experience-brand {
    margin-right: auto;
  }

  .experience-brand img {
    width: 112px;
    height: 68px;
  }

  .experience-menu-toggle {
    display: inline-flex;
    order: 1;
  }

  .experience-cta {
    order: 2;
    margin-left: auto;
  }

  .experience-links {
    display: none;
    order: 3;
    flex: 0 0 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 10px;
  }

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

  .experience-links a {
    display: flex;
    min-height: 44px;
    border-top: 1px solid rgba(151, 182, 240, .14);
  }

  .experience-links a::after {
    display: none;
  }
}

@media (max-width: 620px) {
  :root {
    --experience-nav-height: 76px;
  }

  .experience-nav {
    min-height: var(--experience-nav-height);
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .experience-brand img {
    width: 100px;
    height: 62px;
  }

  .experience-cta {
    max-width: 156px;
    padding: 0 10px;
    font-size: .56rem;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .has-motion [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ===== Legibility pass: every text element meets WCAG AA contrast (4.5:1, or 3:1 for large text) ===== */
/* Orange buttons carry navy text: white on orange measures under 3:1 */
.experience-cta,
.experience-cta:hover,
.btn-nl,
.btn-nl:hover,
.button:not(.blue),
.button:not(.blue):hover,
a[style*="background:#ff6a00"],
a[style*="background: #ff6a00"],
.btn.btn-primary,
.btn.btn-primary:hover { color: #0E2865 !important; }
.experience-cta { background: #FF6600 !important; }
body.has-interior-nav .next-links a:nth-child(2) { background: #1f4fd6 !important; }
body.has-interior-nav .next-links a:nth-child(3) { color: #0E2865 !important; }

/* Homepage labels and tags: bright royal blue on navy reads too dark, so use a light electric blue */
body.digital-headquarters .sec-label,
body.digital-headquarters .eyebrow-text,
body.digital-headquarters .initiative-kicker,
body.digital-headquarters .bq-label,
body.digital-headquarters #tools > div > div:first-child > div:first-child { color: #8fd0ff !important; }
body.digital-headquarters .stag { color: #c9dcff !important; border-color: rgba(143, 208, 255, 0.4) !important; background: rgba(65, 105, 225, 0.18) !important; }
body.digital-headquarters .big-quote strong,
body.digital-headquarters .bq-attr strong,
body.digital-headquarters .bq-cite strong { color: #ffffff !important; }
body.digital-headquarters .research-caveat { color: rgba(255, 255, 255, 0.78) !important; }
body.digital-headquarters #tools span[style*="color:#e85e00"] { color: #a84300 !important; }
body.digital-headquarters #tools span[style*="color:#1a4fff"] { color: #1a3fcc !important; }

/* ROI calculator: muted gray labels darkened for light panels */
.step-label, .panel-sub, .panel label, .field label, label .muted { color: #44507a !important; }