/* ============================================================
   TALVEX SYSTEMS — styles.css
   Palette, motion, and lighting pulled from the brand hero reel:
   deep navy field, a single brand-blue glow emerging from dark,
   metallic silver hairlines, and calm, deliberate motion.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand colours (from the video) */
  --navy:        #0A1A2F;
  --navy-deep:   #05101f;
  --navy-soft:   #0E2440;
  --blue:        #1E50C8;
  --blue-bright: #3B6FE0;
  --silver:      #C0C5CC;

  /* Light surfaces */
  --bg:          #F7F8FA;
  --white:       #FFFFFF;
  --line:        #E4E8EE;     /* hairlines on light */

  /* Text */
  --ink:         #0A1A2F;     /* headings on light */
  --body:        #45525F;     /* body on light (AA on --bg) */
  --muted:       #6A7787;     /* muted on light (AA on --bg) */
  --on-dark:     #EAEEF4;     /* text on navy */
  --on-dark-dim: #9FAEC1;     /* muted text on navy */

  /* Type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Rhythm */
  --container: 1200px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --radius: 16px;
  --radius-sm: 10px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 76px;

  /* Effects */
  --shadow-card: 0 1px 2px rgba(10, 26, 47, 0.04), 0 12px 32px -16px rgba(10, 26, 47, 0.16);
  --shadow-blue: 0 8px 24px -8px rgba(30, 80, 200, 0.55);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Disable native smooth-scroll for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); position: relative; }
.section--light { background: var(--bg); }
.section--white { background: var(--white); }
.section--dark  { background: var(--navy); color: var(--on-dark); }

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  background: var(--blue); color: #fff;
  padding: 0.65rem 1rem; border-radius: 8px;
  z-index: 200; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Typography primitives ---------- */
.eyebrow,
.section__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
}

.section__head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__label { display: block; margin-bottom: 1rem; }

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.section--dark .section__title { color: #fff; }

/* ============================================================
   1. NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Transparent over hero */
.nav[data-state="top"] { background: transparent; }
.nav[data-state="top"] .nav__links a { color: var(--on-dark); }
.nav[data-state="top"] .logo__word { color: #fff; }
.nav[data-state="top"] .nav__toggle span { background: #fff; }

/* Liquid-glass once scrolled */
.nav[data-state="scrolled"] {
  background: rgba(247, 248, 250, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px -12px rgba(10, 26, 47, 0.25);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 0.7rem; }
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__mark svg,
.logo__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  transition: color 0.4s var(--ease);
}
.logo__sub {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);              /* legible on the white / light nav */
  transition: color 0.4s var(--ease);
}
/* On the transparent nav over the dark hero, lighten it for contrast */
.nav[data-state="top"] .logo__sub { color: var(--silver); }
/* Footer sits on deep navy — keep it light */
.logo--footer .logo__sub { color: var(--silver); }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links > a:not(.btn) {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav__links > a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--blue);
  transition: width 0.3s var(--ease);
}
.nav__links > a:not(.btn):hover::after { width: 100%; }
.nav__links > a:not(.btn):hover { color: var(--blue); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__toggle span {
  width: 24px; height: 2px; background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  will-change: transform;
}
.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.9rem; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.08rem; }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover {
  background: var(--blue-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(30, 80, 200, 0.7);
}
.btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.btn__arrow { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   2. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;          /* fallback */
  min-height: 100svh;         /* mobile-safe viewport unit */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);     /* fallback while poster/video load */
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Poster shows here until the video is allowed to load */
}
/* Hide iOS Safari's tap-to-play overlay + any native controls on the
   decorative hero video (it should look like a silent background, not a
   playable clip). */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}
/* Vertical legibility gradient + subtle floor */
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,16,31,0.72) 0%, rgba(5,16,31,0.35) 38%, rgba(5,16,31,0.55) 78%, rgba(5,16,31,0.92) 100%);
}
/* Brand-blue depth glow, echoing the reel's core light */
.hero__glow {
  position: absolute;
  width: 80vw; max-width: 900px; aspect-ratio: 1.4 / 1;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(30,80,200,0.45), rgba(30,80,200,0) 70%);
  filter: blur(10px);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: var(--nav-h);
  max-width: 880px;
}
.eyebrow { margin-bottom: 1.4rem; color: var(--blue-bright); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #fff;
  text-wrap: balance;
}
.accent-dot { color: var(--blue-bright); }
.hero__sub {
  margin-top: 1.6rem;
  max-width: 620px;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--on-dark);
}
.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Trust bar */
.hero__trust {
  margin-top: 3.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(192, 197, 204, 0.22);
  max-width: 720px;
}
.hero__trust > p {
  font-size: 0.9rem;
  color: var(--on-dark-dim);
  letter-spacing: 0.01em;
}
.trust__tags {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-top: 1rem;
}
.trust__tags li {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
  display: flex; align-items: center; gap: 1.6rem;
}
.trust__tags li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue-bright);
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 42px;
  border: 1.5px solid rgba(192,197,204,0.5);
  border-radius: 14px;
  display: flex; justify-content: center;
}
.hero__scroll-line {
  width: 2px; height: 8px; margin-top: 7px;
  background: var(--silver);
  border-radius: 2px;
  animation: scrollPulse 1.8s var(--ease) infinite;
}
@keyframes scrollPulse {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  70% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0; }
}

/* ============================================================
   3. PROBLEM
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: rgba(30, 80, 200, 0.3);
}
.card__icon {
  display: inline-flex;
  width: 52px; height: 52px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(30,80,200,0.1), rgba(30,80,200,0.04));
  color: var(--blue);
  margin-bottom: 1.4rem;
}
.card__icon svg { width: 26px; height: 26px; }
.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.card__text { color: var(--body); font-size: 1rem; }

/* ============================================================
   4. SOLUTION
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.pillar { position: relative; padding-top: 2.2rem; }
.pillar::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 44px; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  border-radius: 3px;
}
.pillar__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--silver);
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0.5rem 0 0.8rem;
}
.pillar__text { color: var(--body); }

/* ============================================================
   5. PROCESS — timeline
   ============================================================ */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2rem);
}
.step { position: relative; display: flex; flex-direction: column; }
/* Connecting rail running through the icon centres (desktop) */
.step::before {
  content: "";
  position: absolute; top: 28px; left: 28px; right: -2rem;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, rgba(30,80,200,0.18) 100%);
  z-index: 0;
}
.step:last-child::before { display: none; }
.step__icon {
  position: relative; z-index: 1;
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  border-radius: 15px;
  /* Opaque fill so the connecting rail passes BEHIND the tile,
     not visibly through it. */
  background: linear-gradient(180deg, #E7EDFB 0%, #F0F3FD 100%);
  border: 1px solid rgba(30,80,200,0.16);
  color: var(--blue);
  margin-bottom: 1.3rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.step:hover .step__icon {
  transform: translateY(-3px);
  box-shadow: var(--shadow-blue);
}
.step__icon svg { width: 28px; height: 28px; }
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.26rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0.45rem 0 0.6rem;
}
.step__text { color: var(--body); font-size: 0.96rem; margin-bottom: 1.1rem; }
.step__deliverable {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-top: auto;                 /* aligns the deliverable row across all steps */
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink);
}
.step__deliverable svg { flex: none; width: 17px; height: 17px; color: var(--blue); margin-top: 2px; }
.step__deliverable b { font-weight: 600; }

/* ============================================================
   6. EVIDENCE — independent research / expert findings
   ============================================================ */
.evidence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.evidence-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2rem);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.evidence-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: rgba(30,80,200,0.3);
}
.evidence-card__stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--blue);
  margin-bottom: 0.7rem;
}
.evidence-card__text {
  color: var(--body);
  font-size: 0.96rem;
  line-height: 1.6;
}
.evidence-card__source {
  margin-top: auto;                 /* aligns the citation across all cards */
  padding-top: 1.2rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.evidence-card__source b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ============================================================
   7. ABOUT
   ============================================================ */
/* About as a standalone page (about.html) — clear the fixed header. */
.about--page { padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem)); }

.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(59,111,224,0.35), transparent 60%),
    linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;                      /* covers the monogram fallback when present */
}
.about__monogram {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 5rem);
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.92);
}
.about__photo-note {
  position: absolute; bottom: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(192,197,204,0.6);
}
.about__body .section__label { margin-bottom: 1rem; }
.about__body .section__title { margin-bottom: 1.4rem; }
.about__body p { color: var(--body); margin-bottom: 1.1rem; max-width: 46ch; }

.text-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--blue);
  margin-top: 0.5rem;
}
.text-link svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- Peace-of-mind / support block ---------- */
.support__text {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  color: var(--body);
  font-size: 1.08rem;
  line-height: 1.7;
}
.support__text a {
  color: var(--blue);
  border-bottom: 1px solid rgba(30, 80, 200, 0.3);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.support__text a:hover { color: var(--blue-bright); border-color: var(--blue-bright); }

/* ============================================================
   8. FINAL CTA
   ============================================================ */
.cta {
  background: var(--navy);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.cta__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(30,80,200,0.5), transparent 60%),
    radial-gradient(50% 50% at 50% 110%, rgba(59,111,224,0.25), transparent 60%);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; max-width: 760px; }
.cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: #fff;
}
.cta__sub {
  margin: 1.4rem auto 2.4rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--on-dark);
  max-width: 34rem;
}
.cta__fineprint { margin-top: 1.4rem; font-size: 0.92rem; color: var(--on-dark-dim); }
.cta__fineprint a { color: var(--silver); border-bottom: 1px solid rgba(192,197,204,0.4); }
.cta__fineprint a:hover { color: #fff; }

/* ============================================================
   9. FOOTER
   ============================================================ */
.footer {
  background: var(--navy-deep);
  color: var(--on-dark-dim);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.logo--footer .logo__word { color: #fff; }
.footer__tagline { margin-top: 1.1rem; max-width: 30ch; font-size: 0.95rem; }
.footer__cols { display: flex; gap: clamp(2rem, 6vw, 5rem); justify-content: flex-end; }
.footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col h4 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 0.3rem;
}
.footer__col a { font-size: 0.95rem; transition: color 0.2s var(--ease); }
.footer__col a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.6rem;
  border-top: 1px solid rgba(192,197,204,0.12);
  font-size: 0.85rem;
}
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a:hover { color: #fff; }

/* ============================================================
   SCROLL REVEAL (driven by IntersectionObserver in script.js)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Stagger inside a group via data-reveal-delay */
[data-reveal-delay="1"] { transition-delay: 0.05s; }
[data-reveal-delay="2"] { transition-delay: 0.10s; }
[data-reveal-delay="3"] { transition-delay: 0.15s; }
[data-reveal-delay="4"] { transition-delay: 0.20s; }

/* Focus-visible (keyboard) outlines */
:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 900px) {
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .step::before { display: none; }     /* rail removed on wrapped grid */
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 360px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { justify-content: flex-start; }
}

/* Mobile nav */
@media (max-width: 760px) {
  .nav__toggle { display: flex; z-index: 110; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 340px);
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.8rem;
    padding: 2rem var(--pad-x);
    background: rgba(10, 26, 47, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    border-left: 1px solid rgba(192,197,204,0.15);
  }
  .nav__links.is-open { transform: translateX(0); }
  /* Links are always light inside the dark drawer */
  .nav[data-state] .nav__links a { color: #fff; font-size: 1.15rem; }
  .nav__cta { margin-top: 0.5rem; }

  /* Hamburger -> X */
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Keep toggle visible (dark) regardless of nav state when menu open */
  .nav[data-state="top"] .nav__toggle[aria-expanded="true"] span { background: #fff; }

  body.menu-open { overflow: hidden; }

  /* Fix: the scrolled nav's backdrop-filter makes .nav the containing block for
     the fixed drawer, which collapses the menu into the 76px header once the
     page is scrolled. Drop it while the menu is open so the drawer stays fixed
     to the full viewport at any scroll position. */
  body.menu-open .nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Small phones */
@media (max-width: 480px) {
  .timeline { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .trust__tags li { gap: 0.9rem; }
}

/* ============================================================
   GRACEFUL VIDEO DEGRADATION
   On small screens the poster is the hero background by default;
   script.js only attaches the video source on larger viewports
   with motion enabled. This rule keeps the poster crisp.
   ============================================================ */
@media (max-width: 760px) {
  .hero__video { object-position: center; }
}