/* ============================================================
   Layout primitives
   ============================================================ */

.container {
  width: 100%;
  max-width: 1800px; /* scales with wide viewports instead of capping early */
  margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 140px); /* ~10% combined side gutter, matches measured 1440px-design ratio */
}

main > section {
  padding-block: var(--space-xl); /* 64px — matches measured section rhythm */
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   Buttons — 4 variants found on Home:
   - btn-outline-light : transparent fill, white border + text  (hero secondary)
   - btn-solid-light    : white fill, dark navy text             (hero primary)
   - btn-gradient       : teal-muted gradient fill, white text   (Read more / Submit)
   - btn-outline-mint   : transparent fill, mint border + text   (all other section CTAs, footer)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 19px 38px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-in-out),
              box-shadow var(--dur-fast) var(--ease-in-out),
              background var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out);
  white-space: nowrap;
}

/* subtle lift on hover; per-variant glow uses the existing accents */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent-mint); outline-offset: 3px; }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); box-shadow: 0 8px 22px rgba(255,255,255,0.12); }
.btn-solid-light:hover   { box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
.btn-gradient:hover      { box-shadow: 0 10px 26px rgba(12,239,212,0.20); }
.btn-outline-mint:hover  { background: rgba(126,241,222,0.08); box-shadow: 0 8px 22px rgba(126,241,222,0.16); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
  .btn:hover, .btn:active { transform: none; }
}

.btn-outline-light {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-solid-light {
  background: var(--color-white);
  color: var(--color-bg-deep);
}

.btn-gradient {
  background: linear-gradient(135deg, var(--color-teal-muted-b), var(--color-bg-deep));
  color: var(--color-white);
  border: none;
}

.btn-outline-mint {
  background: transparent;
  border-color: var(--accent-mint);
  color: var(--accent-mint);
}

.btn-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding-block: var(--space-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.logo img {
  display: block;
  width: auto;
  height: clamp(34px, 3.4vw, 52px);
  max-width: 100%;
}

.nav ul {
  display: flex;
  gap: var(--space-lg);
}

.nav a {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-on-dark);
  transition: color var(--dur-fast) var(--ease-in-out);
}

.nav a:hover { color: var(--accent-mint); }
.nav a.is-active { color: var(--accent-mint); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--color-white);
  display: block;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 0;
}

.hero--fullscreen {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
}

.hero--fullscreen .hero-bg {
  inset: 0;
}

.hero--fullscreen .hero-scrim,
.hero--fullscreen .hero-mesh,
.hero--fullscreen .hero-grain,
.hero--fullscreen .hero-content {
  display: none;
}

.hero-bg {
  position: absolute;
  /* extra vertical bleed so the scroll-parallax never reveals an edge */
  inset: -12% 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-deep-29);
  background-image: url('../media/hero-bg.png');
  background-size: cover;
  background-position: center top;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--overlay-scrim-light) 0%, var(--overlay-scrim-mid) 48%, var(--color-deep-29) 82%, var(--color-deep-29) 100%);
}

.hero-content {
  position: relative;
  z-index: 3;
  padding-top: 140px;
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-body {
  margin-top: var(--space-md);
  max-width: 900px;
}

.hero .btn-row {
  margin-top: var(--space-lg);
  justify-content: center;
}


/* ============================================================
   Split sections (About / Technology)
   ============================================================ */

.split-section {
  background: transparent;
}

.split {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.split-reverse .split {
  flex-direction: row-reverse;
}

.split-media {
  flex: 0 0 44%;
}

.split-media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.split-content {
  flex: 1 1 auto;
}

.split-content .body-text {
  margin-top: var(--space-sm);
}

.split-content .btn {
  margin-top: var(--space-md);
}

.technology-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 11vw, 140px);
  background: transparent;
}

/* subtle diagonal grid in lower-left — matches the reference */
.technology-grid {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(520px, 55vw);
  height: min(420px, 70%);
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(89, 214, 241, 0.09) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 68%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 68%);
}

.technology-section .split {
  position: relative;
  z-index: 2;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.technology-section .split-content {
  flex: 0 1 40%;
  max-width: 540px;
}

.technology-section .small-headline {
  color: var(--accent-cyan);
  font-size: 16px;
  letter-spacing: 1.4px;
}

.technology-section .split-content .body-text {
  color: var(--color-white);
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.55;
  margin-top: var(--space-md);
}

.technology-section .split-content .body-text + .body-text {
  margin-top: var(--space-sm);
}

.technology-section .split-content .btn {
  margin-top: var(--space-lg);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.technology-section .split-content .btn:hover {
  background: rgba(12, 239, 212, 0.08);
  box-shadow: 0 8px 22px rgba(12, 239, 212, 0.16);
}

.technology-section .split-media {
  flex: 1 1 60%;
  position: relative;
}

.technology-section .split-media::before {
  content: "";
  position: absolute;
  inset: 8% 0 0 10%;
  background: radial-gradient(circle at 52% 58%, rgba(12, 239, 212, 0.14) 0%, transparent 62%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.technology-section .split-media img {
  position: relative;
  z-index: 1;
  border-radius: 0;
  width: 100%;
  max-width: 660px;
  margin-inline: auto 0;
}

.tech-waves-wrap {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 108%;
  max-width: 1920px;
  z-index: 1;
  pointer-events: none;
}

.tech-waves-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: brightness(1.2) contrast(1.08);
  clip-path: inset(0 50% 0 50%);
  will-change: clip-path, opacity;
}

.technology-section.is-lit .tech-waves-img {
  animation: tech-waves-unfurl 1.7s var(--ease-out) forwards, tech-waves-shimmer 5s ease-in-out 1.7s infinite;
}

@keyframes tech-waves-unfurl {
  0% { clip-path: inset(0 50% 0 50%); opacity: 0.35; }
  100% { clip-path: inset(0 0 0 0); opacity: 0.92; }
}

@keyframes tech-waves-shimmer {
  0%, 100% { filter: brightness(1.15) contrast(1.06); opacity: 0.88; }
  50% { filter: brightness(1.32) contrast(1.1); opacity: 0.96; }
}

/* section scroll lights — small beam from left, then right */
main > section.has-sweep {
  position: relative;
  overflow: hidden;
}

main > section.has-sweep::before,
main > section.has-sweep::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(200px, 24vw);
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(12, 239, 212, 0.9), transparent);
  box-shadow: 0 0 16px rgba(12, 239, 212, 0.5), 0 0 36px rgba(89, 214, 241, 0.2);
}

main > section.has-sweep.is-lit::before {
  animation: section-light-left 1.15s var(--ease-out) forwards;
}

main > section.has-sweep.is-lit::after {
  animation: section-light-right 1.15s var(--ease-out) 0.32s forwards;
}

@keyframes section-light-left {
  0% { left: -12%; opacity: 0; transform: translateY(-50%) scaleX(0.5); }
  18% { opacity: 1; }
  100% { left: 50%; opacity: 0; transform: translateY(-50%) scaleX(1); }
}

@keyframes section-light-right {
  0% { right: -12%; opacity: 0; transform: translateY(-50%) scaleX(0.5); }
  18% { opacity: 1; }
  100% { right: 50%; opacity: 0; transform: translateY(-50%) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  main > section.has-sweep::before,
  main > section.has-sweep::after { display: none; }
  .technology-section .tech-waves-img { clip-path: inset(0 0 0 0); opacity: 0.9; animation: none; }
}

/* ============================================================
   Partners section
   ============================================================ */

.partners-section {
  background: transparent;
}

.partners-section .body-text { margin-top: var(--space-xs); max-width: 640px; }

.partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.partners-card {
  background: linear-gradient(150deg, rgba(232,240,242,0.92) 0%, rgba(206,222,226,0.86) 55%, rgba(180,201,206,0.82) 100%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 18px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.partners-label {
  color: var(--text-on-dark);
  font-weight: 700;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

.partners-list li {
  color: var(--color-bg-deep);
  font-family: var(--font-body);
  font-size: 16px;
  padding-block: 12px;
  border-bottom: 1px solid rgba(0,33,46,0.18);
}

.partners-list li:last-child { border-bottom: none; }

.partners-graphic {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 280px;
}

.partners-graphic-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ============================================================
   Case studies
   ============================================================ */

.case-studies-section {
  position: relative;
  background: transparent;
}

/* homepage featured cards — taller, centered content */
.case-studies-section .cards-grid {
  scroll-snap-type: x proximity;
}

.case-studies-section .case-card {
  flex: 1 1 0;
  min-width: 240px;
  min-height: clamp(340px, 28vw, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

.case-studies-section .case-icon {
  margin-bottom: var(--space-lg);
}

.case-studies-section .case-title {
  font-size: clamp(18px, 1.4vw, 22px);
}

.case-studies-section .case-desc {
  max-width: 28ch;
  margin-inline: auto;
}

.cards-grid {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: rgba(74,205,181,0.5) transparent;
}

.cards-grid::-webkit-scrollbar { height: 8px; }
.cards-grid::-webkit-scrollbar-track { background: transparent; }
.cards-grid::-webkit-scrollbar-thumb {
  background: rgba(74,205,181,0.5);
  border-radius: 999px;
}

.case-card {
  /* grow to fill the row when cards fit (full width on big screens);
     don't shrink below the basis, so extra cards / narrow screens scroll */
  flex: 1 0 280px;
  scroll-snap-align: start;
  background: var(--color-teal-muted-a);
  background-image: url('../media/card-texture.png');
  background-size: cover;
  border-radius: 16px;
  padding: var(--space-lg) var(--space-md);
}

.case-icon {
  display: flex;
  justify-content: center;
  width: 100%;
  color: var(--accent-mint);
  margin-bottom: var(--space-md);
}

.case-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.25;
  color: var(--accent-mint);
  margin-bottom: var(--space-xs);
}

.case-desc { font-size: 16px; line-height: 1.4; }

/* ---- Card hover (subtle shadow only) ---- */
.case-card, .partners-card {
  transition: box-shadow var(--dur-mid) var(--ease-in-out);
}
.case-card:hover {
  box-shadow: 0 16px 38px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(126,241,222,0.28);
}
.partners-card:hover {
  box-shadow: 0 30px 66px rgba(0,0,0,0.36);
}

/* ============================================================
   Insights
   ============================================================ */

.insights-section {
  background: transparent;
}

.insights-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--color-bg-deep);
  min-height: 440px;
  padding: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.insights-card .three-layer {
  z-index: 0;
}

.insights-card-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
}

.insights-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(102deg,
      rgba(0, 33, 46, 0.94) 0%,
      rgba(0, 33, 46, 0.82) 32%,
      rgba(0, 28, 41, 0.5) 58%,
      rgba(0, 33, 46, 0.22) 100%);
}

.insights-card .small-headline { margin-bottom: var(--space-xs); }

.insights-card .body-text { margin-top: var(--space-sm); }

.insights-card .btn { margin-top: var(--space-md); }

/* ============================================================
   Contact
   ============================================================ */

.contact-section { background: transparent; }

.contact-section .split { align-items: center; }

.contact-form-wrap { flex: 1 1 50%; }

.contact-form-wrap .body-text { margin-top: var(--space-xs); margin-bottom: var(--space-lg); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 460px;
}

.form-field {
  background: var(--color-white);
  border: none;
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 16px;
  color: var(--color-bg-deep);
}

.form-field::placeholder { color: var(--color-gray); }

.btn-submit {
  border: none;
  width: 100%;
  padding-block: 16px;
}

.contact-photo { flex: 1 1 50%; }

.contact-photo img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background-color: var(--color-deep-29);
  background-image:
    radial-gradient(800px 400px at 0% 0%, rgba(32,103,117,0.25), transparent 60%),
    linear-gradient(180deg, var(--color-deep-29) 0%, var(--color-bg-mid) 100%);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-xl) var(--space-lg);
}

.footer-brand img {
  display: block;
  width: auto;
  height: clamp(48px, 5vw, 72px);
  max-width: 100%;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-lg);
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: right;
}

.footer-nav a { font-size: 17px; color: var(--text-on-dark); }

.footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.social-icons {
  display: flex;
  gap: var(--space-xs);
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-bg-deep);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md) var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-legal {
  display: flex;
  gap: var(--space-sm);
}

.footer-legal a {
  font-size: 13px;
  color: var(--text-on-dark-60);
  text-decoration: underline;
}

/* ============================================================
   Page title band (About / inner pages)
   ============================================================ */

.page-title-section {
  position: relative;
  padding-top: 144px;
  padding-bottom: 8px; /* tightened: was 40px — closes the dead gap below the watermark */
  overflow: hidden;
}

.page-title-inner {
  position: relative;
  min-height: 156px; /* tightened from 190px */
}

.page-title-watermark {
  position: absolute;
  top: -20px;
  left: clamp(24px, 6vw, 140px);
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(96px, 15vw, 230px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(74,205,181,0.4);
  text-stroke: 1.5px rgba(74,205,181,0.4);
  white-space: nowrap;
  pointer-events: none;
  /* fade the lower half of the letters out so they dissolve into the
     background, as if the text is sinking/hiding */
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}

/* breadcrumb: a glass pill so it stays legible over the watermark */
.breadcrumb {
  position: relative;
  z-index: 3;
  top: 86px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(0, 28, 41, 0.55);
  border: 1px solid rgba(126, 241, 222, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

.breadcrumb a { color: var(--accent-mint); transition: color var(--dur-fast) var(--ease-in-out); }
.breadcrumb a:hover { color: var(--text-on-dark); }

/* ============================================================
   Mission / Vision tabs
   ============================================================ */

.tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  /* tabs sit above the card with a small gap (not overlapping) */
  margin-bottom: var(--space-sm);
}

.tab-btn {
  padding: 16px 56px;
  border-radius: 14px;
  border: 1px solid rgba(126,241,222,0.3);
  background: rgba(0,33,46,0.6);
  color: var(--text-on-dark-60);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tab-btn.is-active {
  border-color: var(--accent-mint);
  color: var(--accent-mint);
  background: rgba(126,241,222,0.1);
}

.tab-panel[hidden] { display: none; }

.mission-card {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  min-height: 260px;
  /* CSS gradient (no texture image): teal top-left fading to deep teal right */
  background: linear-gradient(115deg, #1b4f57 0%, #0c3647 55%, #042739 100%);
  border: 1px solid rgba(126,241,222,0.14);
  border-radius: 24px;
  padding: var(--space-xl) clamp(32px, 5vw, 72px);
}

.mission-card .body-text {
  max-width: 60%;
  position: relative;
  z-index: 1;
}

.mission-icon {
  position: absolute;
  right: clamp(8px, 3vw, 60px);
  /* sit high — center in the card's upper area, extending above the top edge */
  top: 28%;
  transform: translateY(-50%);
  width: clamp(220px, 30vw, 420px);
  height: auto;
  pointer-events: none;
}

/* ============================================================
   Our Culture
   ============================================================ */

.culture-section {
  position: relative;
  overflow: hidden;
}

/* decorative concentric arc on the left, behind the content */
.culture-arc {
  position: absolute;
  left: 0;
  top: 40px;
  width: clamp(360px, 42vw, 640px);
  height: 640px;
  z-index: 0;
  pointer-events: none;
}

.culture-section .container { position: relative; z-index: 1; }

/* eyebrow left, big teal heading occupying the right portion */
.culture-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}

.culture-heading {
  margin: 0;
  max-width: 60%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-mint);
}

/* featured lead value, sits above the card row */
.culture-intro {
  margin-top: var(--space-2xl);
  max-width: 460px;
}

.culture-intro-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent-mint);
}

.culture-intro .body-text { font-size: 16px; line-height: 1.5; }

/* bigger cards that fill full width and scroll horizontally; bleed to the
   right viewport edge so the next card peeks in */
.culture-section .cards-grid {
  margin-top: var(--space-lg);
  margin-right: calc(-1 * clamp(24px, 6vw, 140px));
  padding-right: clamp(24px, 6vw, 140px);
  scroll-snap-type: x proximity;
}

.culture-card {
  position: relative;
  flex: 0 0 clamp(320px, 38vw, 460px);
  scroll-snap-align: start;
  min-height: clamp(520px, 44vw, 580px);
  display: flex;
  align-items: flex-end;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.culture-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,28,41,0) 38%, rgba(0,28,41,0.94) 100%);
}

.culture-card-text {
  position: relative;
  z-index: 1;
  padding: var(--space-lg) var(--space-md);
}

.culture-card--curious { background-image: url('../media/culture-curious.png'); }
.culture-card--honest { background-image: url('../media/culture-honest.png'); }
.culture-card--ownership { background-image: url('../media/culture-ownership.png'); }
.culture-card--abudhabi { background-image: url('../media/culture-abudhabi.png'); }

/* ============================================================
   Regional Roots closing banner
   ============================================================ */

.regional-card {
  background: radial-gradient(115% 125% at 50% 64%, #2a7178 0%, #0f4d5d 48%, #003349 100%);
  border: 1px solid rgba(126, 241, 222, 0.12);
  border-inline: 0; /* full-bleed: no side borders/radius against the viewport */
  border-radius: 0;
  padding: clamp(64px, 10vw, 120px) var(--space-lg);
  text-align: center;
}

.regional-card .big-headline-slides { text-align: center; }

/* ============================================================
   Technology page — AI architecture stack
   ============================================================ */

.tech-stack {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--space-2xl);
}

/* real wave asset (Exported Files/Technology "Group 21") sits low-amplitude
   behind the grid — same "one clean line behind the figure" idea as Home,
   never hand-drawn */
.tech-wave {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}

.tech-stack .container { position: relative; z-index: 1; }

.tech-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
}

.tech-intro .body-text { margin-top: var(--space-sm); }

/* 2x2 grid with a central column reserved for the robot figure */
.tech-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(260px, 28vw, 400px);
  row-gap: clamp(24px, 3vw, 40px);
}

.tech-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(13,55,66,0.72) 0%, rgba(34,82,94,0.55) 100%);
  border: 1px solid rgba(126,241,222,0.14);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 44px);
  min-height: 300px;
}

.tech-icon {
  width: clamp(56px, 5vw, 72px);
  height: auto;
  margin-bottom: var(--space-md);
}

.tech-card-title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--accent-mint);
}

.tech-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-on-dark-60);
}

.tech-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-mint);
}

/* full-body robot stands in the central gap, in front of the cards.
   The asset is asymmetric (laptop extends left), so its body centerline sits
   at ~71% of the image width — shift by that, not 50%, to centre the body */
.tech-robot {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  transform: translateX(-71%);
  height: clamp(540px, 55vw, 800px);
  width: auto;
  pointer-events: none;
}

/* ============================================================
   Team page — leadership/strategy feature cards, member grids, CTA
   ============================================================ */

.team-leader-section { padding-block: var(--space-md); }
.team-group { padding-block: var(--space-lg); }

/* featured card: text + portrait side by side (mirrored for Strategy) */
.leader-card {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  background: linear-gradient(135deg, rgba(22,60,70,0.65) 0%, rgba(10,44,57,0.7) 55%, rgba(5,28,40,0.72) 100%);
  border: 1px solid rgba(126,241,222,0.12);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 60px);
}

.leader-text { flex: 1 1 56%; }
.leader-text .small-headline { margin-bottom: var(--space-md); }

.leader-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  color: var(--text-on-dark);
}

.leader-role {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--accent-mint);
}

.leader-bio { margin-top: var(--space-md); color: var(--text-on-dark-60); max-width: 60ch; }

.leader-photo { flex: 0 0 auto; width: clamp(230px, 26vw, 340px); }
.leader-photo img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* member grid — portrait, name, bio */
.member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: var(--space-lg);
}

.member-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.member-name {
  margin: var(--space-md) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--accent-mint);
}

.member-bio { margin-top: var(--space-sm); font-size: 15px; line-height: 1.5; color: var(--text-on-dark-60); }

/* recruitment CTA banner */
.team-cta { padding-block: var(--space-xl); }
.team-cta-inner {
  text-align: center;
  border-radius: 24px;
  padding: clamp(40px, 6vw, 88px) var(--space-lg);
  background: radial-gradient(120% 140% at 50% 0%, rgba(46,110,118,0.55) 0%, rgba(13,58,72,0.5) 45%, rgba(4,28,40,0.6) 100%);
  border: 1px solid rgba(126,241,222,0.14);
}
.team-cta-title { margin: 0 auto; max-width: 18ch; }
.team-cta-inner .body-text { margin: var(--space-sm) auto var(--space-lg); max-width: 540px; color: var(--text-on-dark-60); }

/* ============================================================
   Insights page — hero, category bento, suggested articles
   ============================================================ */

.insights-page { padding-top: var(--space-lg); overflow: hidden; }

.insights-hero {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.insights-hero-text { flex: 1 1 56%; max-width: 620px; }
.insights-hero-text .body-text { margin-top: var(--space-md); color: var(--text-on-dark-60); }

.insights-hero-graphic {
  flex: 0 0 auto;
  width: clamp(260px, 34vw, 460px);
  height: auto;
  margin-right: calc(-1 * clamp(24px, 6vw, 140px)); /* bleed toward the edge */
  transform-origin: center center;
  animation: insights-hero-circle 36s linear infinite;
}

@keyframes insights-hero-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .insights-hero-graphic { animation: none; }
}

/* category bento — 12-col grid with mixed-width glass cards */
.insights-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.insight-card {
  grid-column: span 12;
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(31,84,94,0.55) 0%, rgba(12,52,66,0.6) 55%, rgba(6,33,46,0.65) 100%);
  border: 1px solid rgba(126,241,222,0.12);
  border-radius: 20px;
  padding: var(--space-lg) clamp(28px, 3vw, 48px);
}

.insight-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--accent-mint);
}
.insight-title--white { color: var(--text-on-dark); }
.insight-desc { color: var(--text-on-dark-60); max-width: 60ch; }

/* full-width centred banner (AI Strategy & Policy) */
.insight-banner {
  text-align: center;
  padding-block: var(--space-lg); /* was 96px — removed the big empty void */
  background: linear-gradient(180deg, rgba(46,110,118,0.5) 0%, rgba(16,58,72,0.55) 100%);
}
.insight-banner .insight-desc { margin-inline: auto; }

/* feature row: circular network graphic beside the text (Research & Innovation) */
.insight-feature {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 320px;
}
.insight-network { flex: 0 0 auto; width: clamp(240px, 30vw, 420px); height: auto; }
.insight-feature-text { flex: 1 1 auto; }

/* mixed widths for the four lower cards */
.insight-card--wide { grid-column: span 8; }
.insight-card--narrow { grid-column: span 4; }

/* card with the icon floated to the right of the text */
.insight-card--iconright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.insight-card--iconright .insight-card-text { flex: 1 1 auto; }

.insight-icon { display: inline-flex; }
.insight-icon img { display: block; }
.insight-card--narrow .insight-icon { margin-bottom: var(--space-md); }

/* suggested launch articles — list left, city image right */
.articles-split {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 110px);
}
.articles-list-wrap { flex: 1 1 55%; }
.articles-title { margin-bottom: var(--space-lg); }

.articles-list { display: flex; flex-direction: column; }
.articles-list li { border-bottom: 1px solid rgba(126,241,222,0.14); }
.articles-list a {
  display: block;
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  border-left: 2px solid var(--accent-mint);
  font-size: 18px;
  color: var(--text-on-dark);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.articles-list a:hover { color: var(--accent-mint); padding-left: var(--space-lg); }

.articles-image { flex: 0 0 auto; width: clamp(300px, 38%, 520px); }
.articles-image img { width: 100%; height: auto; border-radius: 16px; }

/* ============================================================
   Case Studies page — static 3-column grid of case cards
   (reuses the .case-card component; not the Home scroll carousel)
   ============================================================ */

.case-studies-page { padding-top: var(--space-lg); }

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.case-grid .case-card { padding: var(--space-lg); }
.case-grid .case-icon img { height: 46px; width: auto; }

/* case studies page — taller featured cards, centered content */
.case-studies-page .case-grid .case-card {
  min-height: clamp(340px, 28vw, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}

.case-studies-page .case-grid .case-icon {
  margin-bottom: var(--space-lg);
}

.case-studies-page .case-grid .case-title {
  font-size: clamp(18px, 1.4vw, 22px);
}

.case-studies-page .case-grid .case-desc {
  max-width: 28ch;
  margin-inline: auto;
}

/* lone final card sits in the centre column, matching the design */
.case-card--center { grid-column: 2; }

/* ============================================================
   Contact page — building strip + offices map
   ============================================================ */

.contact-building { padding-block: var(--space-xl); }

/* full-bleed: building image + regional banner span the viewport edge-to-edge
   (body has overflow-x:hidden so 100%-width container can't cause a scrollbar) */
.contact-building .container,
.regional-banner .container {
  max-width: 100%;
  padding-inline: 0;
}

.contact-building img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0; /* edge-to-edge, no rounded corners against the viewport */
}

.offices-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-2xl); }
.offices-title { margin: 0; }
.offices-intro { margin-top: var(--space-sm); color: var(--text-on-dark-60); }

.offices-map { position: relative; }

.offices-map-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
}

/* office cards float over the world map, anchored by percentage so they track
   the map as it scales */
.office-card {
  position: absolute;
  width: clamp(220px, 19vw, 280px);
  padding: var(--space-md) var(--space-lg);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(40,108,118,0.92) 0%, rgba(13,61,75,0.92) 60%, rgba(4,39,57,0.94) 100%);
  border: 1px solid rgba(126,241,222,0.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.office-card--uk { left: 26%; top: 14%; }
.office-card--ad { left: 54%; top: 40%; }

.office-name {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-on-dark);
}

.office-details { display: flex; flex-direction: column; gap: 10px; }

.office-details li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-on-dark-60);
}

.office-details svg { color: var(--accent-mint); flex: 0 0 auto; }

/* ============================================================
   Clients & Partners page — logo grid
   ============================================================ */

/* taller page-title that fits the two-line "Clients & / Partners" watermark */
.page-title-section--tall { padding-top: 170px; }
.page-title-inner--tall { min-height: 320px; }
.page-title-watermark--two { white-space: normal; line-height: 0.92; }
.page-title-watermark--two span { display: inline-block; margin-left: clamp(120px, 33vw, 520px); }

.partners-page { padding-top: var(--space-lg); }
/* design sets this heading a touch smaller than the canonical 55px so it sits
   on two lines; clamp keeps it from overflowing on mobile */
.partners-page .big-headline-green { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.25; max-width: none; }
.partners-intro { margin-top: var(--space-md); max-width: 520px; color: var(--text-on-dark-60); }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px) clamp(32px, 4vw, 64px);
  margin-top: var(--space-2xl);
}

.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-cell img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}

/* combined logos (Dept of Health + emblem, Ministry of Investment + Invest UAE)
   are wider artworks — let them occupy two columns */
.logo-cell--wide { grid-column: span 2; }
.logo-cell--wide img { max-height: 76px; }

/* lone trailing logo sits centred under the left half of the grid */
.logo-cell--center { grid-column: 1 / span 2; }

/* ============================================================
   Responsive breakpoints
   - 1024px: nav switches to hamburger (8 nav items + logo no longer
     fit the header at this width), split-sections & case-study grid
     start tightening
   - 768px: full mobile collapse — single-column layout everywhere,
     stacked hero buttons, reduced type scale
   ============================================================ */

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

  .nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(320px, 80vw);
    background: var(--color-navy-near-black);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    padding: 96px var(--space-lg) var(--space-lg);
  }

  .nav.is-open { transform: translateX(0); }

  .nav ul {
    flex-direction: column;
    gap: var(--space-md);
  }

  .tech-grid { column-gap: clamp(150px, 22vw, 240px); }

  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-card--center { grid-column: auto; }

  .member-grid { grid-template-columns: repeat(2, 1fr); }

  /* culture header stacks on tablet */
  .culture-head {
    flex-direction: column;
    gap: var(--space-md);
  }

  .culture-heading { max-width: 100%; }

  /* horizontal card sliders — tablet + mobile */
  .case-studies-section .cards-grid,
  .case-studies-page .case-grid,
  .culture-section .cards-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(24px, 6vw, 140px));
    padding-inline: clamp(24px, 6vw, 140px);
    scroll-padding-inline: clamp(24px, 6vw, 140px);
    scrollbar-width: none;
  }

  .case-studies-section .cards-grid::-webkit-scrollbar,
  .case-studies-page .case-grid::-webkit-scrollbar,
  .culture-section .cards-grid::-webkit-scrollbar { display: none; }

  .case-studies-section .case-card,
  .case-studies-page .case-grid .case-card {
    flex: 0 0 min(46vw, 300px);
    min-width: 0;
    scroll-snap-align: center;
  }

  .culture-section .culture-card {
    flex: 0 0 min(46vw, 320px);
    scroll-snap-align: center;
  }

  .case-studies-page .case-grid .case-card { min-height: 380px; }

  /* insights hero — stack earlier on tablet */
  .insights-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .insights-hero-graphic {
    width: clamp(220px, 42vw, 380px);
    margin: var(--space-md) auto 0;
    margin-right: auto;
    align-self: center;
  }

  .technology-section .split {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .technology-section .split-content,
  .technology-section .split-media {
    flex: 1 1 auto;
    max-width: none;
  }

  .technology-section .split-media img {
    margin-inline: auto;
    max-width: min(100%, 480px);
  }
}

@media (max-width: 768px) {
  main > section { padding-block: var(--space-xl); }

  .big-headline-green { font-size: 38px; line-height: 48px; }
  .sub-headline { font-size: 24px; line-height: 32px; }
  .big-headline-slides { font-size: 28px; line-height: 38px; }
  .body-text { font-size: 17px; line-height: 1.5; }
  .btn { padding: 16px 28px; font-size: 16px; white-space: normal; text-align: center; }

  .hero { min-height: 700px; }
  .hero--fullscreen {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .hero-content { padding-top: 120px; max-width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }

  .split, .split-reverse .split {
    flex-direction: column;
  }
  .split-media { flex: 1 1 auto; width: 100%; }
  .split-content { max-width: none; }

  .technology-section { padding-block: var(--space-2xl); }
  .technology-section .split-content { max-width: none; }
  .technology-section .split-content .body-text { font-size: 17px; }
  .technology-section .split-media img { margin-inline: auto; max-width: min(100%, 420px); }
  .tech-waves-wrap { width: 120%; top: 50%; }
  .technology-grid { width: 70%; height: 50%; }

  .partners-grid { grid-template-columns: 1fr; }
  .partners-graphic { min-height: 220px; }

  /* card sliders — narrower cards on phones */
  .case-studies-section .case-card,
  .case-studies-page .case-grid .case-card {
    flex: 0 0 min(82vw, 300px);
    min-height: 400px;
  }

  .culture-section .culture-card {
    flex: 0 0 min(84vw, 320px);
    min-height: 460px;
  }

  .insights-card {
    min-height: 360px;
    padding: var(--space-lg);
  }

  .insights-card-inner { max-width: none; }

  .insights-card::before {
    background: linear-gradient(180deg,
      rgba(0, 33, 46, 0.96) 0%,
      rgba(0, 33, 46, 0.88) 55%,
      rgba(0, 33, 46, 0.55) 100%);
  }

  .contact-form { max-width: none; }
  .contact-photo img { margin-inline: auto; }

  .footer-top { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .footer-right { align-items: flex-start; gap: var(--space-md); }
  .footer-nav ul { text-align: left; }
  .footer-actions { flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .page-title-section { padding-top: 110px; }
  .page-title-inner { min-height: 90px; }
  .page-title-watermark { font-size: clamp(48px, 22vw, 90px); top: -6px; }
  .breadcrumb { top: 46px; }

  .mission-card { flex-direction: column-reverse; align-items: center; gap: var(--space-md); min-height: 0; padding: var(--space-lg); }
  .mission-card .body-text { max-width: 100%; }
  .mission-icon { position: static; transform: none; width: clamp(140px, 45vw, 220px); }
  .tabs { margin-bottom: var(--space-sm); gap: var(--space-sm); }
  .tab-btn { padding: 13px 32px; font-size: 16px; }

  .page-title-watermark { font-size: clamp(56px, 20vw, 110px); }

  /* single-column collapse: robot becomes a static centered figure above
     the stacked cards (no central gap to stand in on mobile) */
  .tech-grid { grid-template-columns: 1fr; column-gap: 0; }
  .tech-card { min-height: 0; }
  .tech-robot {
    position: static;
    transform: none;
    order: -1;
    height: auto;
    width: clamp(180px, 55vw, 300px);
    margin: 0 auto var(--space-md);
  }

  /* logo grid reflows to two columns; combined/lone logos stop spanning */
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  .logo-cell--wide, .logo-cell--center { grid-column: auto; }
  .logo-cell img, .logo-cell--wide img { max-height: 52px; }
  .page-title-inner--tall { min-height: 150px; }

  /* team: member grid single column; feature cards stack with photo centred */
  .member-grid { grid-template-columns: 1fr; }
  .leader-card { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .leader-photo { width: clamp(200px, 62vw, 300px); align-self: center; }

  /* insights: bento collapses to one column, articles stack */
  .insights-hero-graphic {
    width: clamp(200px, 62vw, 300px);
    margin: var(--space-md) auto 0;
    margin-right: auto;
  }
  .insight-card--wide, .insight-card--narrow { grid-column: span 12; }
  .insight-feature { flex-direction: column; text-align: center; min-height: 0; }
  .insight-card--iconright { flex-direction: column; align-items: flex-start; }
  .insight-card--iconright .insight-icon { order: -1; margin-bottom: var(--space-md); }
  .articles-split { flex-direction: column; align-items: stretch; }
  .articles-image { width: 100%; margin-top: var(--space-lg); }

  /* office cards drop out of the map overlay and stack below it */
  .office-card { position: static; width: 100%; margin-top: var(--space-md); }
  .office-card--uk { margin-top: var(--space-lg); }
  .contact-building { padding-block: var(--space-lg); }
}

/* ============================================================
   Three.js background layer (see js/three-bg.js)
   ------------------------------------------------------------
   A non-interactive canvas host that fills whatever section it's
   dropped into (hero or page-title block — both are already
   position:relative + overflow:hidden) and sits BEHIND the text.
   The WebGL canvas is alpha:true, so the page background shows
   through and a blocked/missing WebGL context just leaves the
   existing design untouched.
   ============================================================ */
.three-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.three-layer canvas { display: block; width: 100% !important; height: 100% !important; }

/* Page-title blocks: canvas sits behind; lifting the inner into its own
   stacking context (z-index:2 > canvas z-index:0) puts the watermark AND the
   breadcrumb above the 3D layer — without disturbing the watermark's own
   absolute positioning. */
.page-title-section .three-layer { z-index: 0; }
.page-title-section .page-title-inner { z-index: 2; }

/* prefers-reduced-motion: the engine paints one still frame; soften it a
   touch so a frozen background never competes with the text */
@media (prefers-reduced-motion: reduce) {
  .three-layer { opacity: 0.7; }
}

/* ============================================================
   Cursor-reactive BUTTONS (see js/interactions.js)
     .fx-btn  -> magnetic pull + click ripple + springy press
   ============================================================ */

/* ---- Buttons: ripple needs a clip + stacking context ---- */
.fx-btn { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  animation: btn-ripple 600ms var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)) forwards;
}
@keyframes btn-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-ripple { display: none; }
}

/* ============================================================
   Bidirectional SECTION transitions (see js/sections.js)
   The hidden state is applied at runtime by JS, so no-JS / reduced
   motion keeps every section visible. Direction-aware: sections
   reached by scrolling down rise from below; by scrolling up, drop
   from above.
   ============================================================ */
.sec-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.sec-anim[data-dir="up"] { transform: translateY(-40px); }
.sec-anim.in-view { opacity: 1; transform: none; }

/* lighter travel on small screens */
@media (max-width: 768px) {
  .sec-anim { transform: translateY(22px); }
  .sec-anim[data-dir="up"] { transform: translateY(-22px); }
}

@media (prefers-reduced-motion: reduce) {
  .sec-anim { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================
   Careers page
   ============================================================ */
.careers-intro { max-width: 860px; }
.careers-intro .big-headline-green { margin-top: var(--space-sm); }
.careers-intro .body-text { margin-top: var(--space-md); }
.careers-intro .btn-row { margin-top: var(--space-lg); }

.careers-why .cards-grid,
.careers-roles .cards-grid { margin-top: var(--space-lg); }

/* role cards reuse .case-card; pin the apply link to the bottom */
.role-card { display: flex; flex-direction: column; }
.role-meta {
  font-size: 13px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--accent-mint); margin-bottom: 10px;
}
.role-card .case-desc { margin-bottom: var(--space-md); }
.role-apply {
  margin-top: auto; align-self: flex-start;
  font-weight: 700; letter-spacing: 0.3px; color: var(--accent-green);
  transition: color var(--dur-fast) var(--ease-in-out);
}
.role-apply:hover { color: var(--text-on-dark); }
.careers-cta-btn { margin-top: var(--space-lg); }