/* ==========================================================================
   VASUNDHARA ENGINEERING WORKS
   main.css — design system, base styles, shared components
   --------------------------------------------------------------------------
   Contents
     01. Design tokens
     02. Reset & base
     03. Typography
     04. Layout primitives
     05. Buttons
     06. Preloader
     07. Header / navigation
     08. Footer
     09. Media placeholders
     10. Animation utilities
     11. Accessibility & motion preferences
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Colour: black / white / steel gray / blue accent --- */
  --c-black:      #0b0c0e;
  --c-black-soft: #141619;
  --c-white:      #ffffff;

  --c-steel-50:   #f6f7f9;
  --c-steel-100:  #eceef1;
  --c-steel-200:  #dcdfe4;
  --c-steel-300:  #c2c7cf;
  --c-steel-400:  #98a0ab;
  --c-steel-500:  #6f7883;
  --c-steel-600:  #535a64;
  --c-steel-700:  #3d434b;
  --c-steel-800:  #282d33;
  --c-steel-900:  #181c21;

  --c-accent:       #1257c4;
  --c-accent-light: #2e7be8;
  --c-accent-dark:  #0d3f8f;

  /* --- Typography --- */
  --f-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-xl: clamp(2.75rem, 6vw, 5.25rem);
  --fs-display-lg: clamp(2.25rem, 4.6vw, 3.75rem);
  --fs-display-md: clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-display-sm: clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-body-lg:    clamp(1rem, 1.4vw, 1.125rem);

  /* --- Spacing & layout --- */
  --max-width:  1280px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(4.5rem, 9vw, 9rem);
  --nav-h:      76px;

  /* --- Motion --- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.25s;
  --dur-base:   0.4s;
  --dur-slow:   0.7s;

  /* --- Elevation --- */
  --shadow-card: 0 1px 2px rgba(11,12,14,.04), 0 8px 24px -8px rgba(11,12,14,.08);
  --shadow-lift: 0 2px 4px rgba(11,12,14,.04), 0 24px 48px -12px rgba(11,12,14,.16);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Lenis takes over scrolling; disable native smooth to avoid the two fighting */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--c-accent); color: var(--c-white); }

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.display-xl { font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -0.03em; }
.display-lg { font-size: var(--fs-display-lg); line-height: 1.06; }
.display-md { font-size: var(--fs-display-md); line-height: 1.12; }
.display-sm { font-size: var(--fs-display-sm); line-height: 1.2; }

.lead {
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--c-steel-600);
  text-wrap: pretty;
}

.muted { color: var(--c-steel-600); }
.mono  { font-family: var(--f-mono); }

/* Small uppercase label above every section heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.eyebrow::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}
.eyebrow--light { color: var(--c-accent-light); }

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--dark { background: var(--c-black); color: var(--c-white); }
.section--gray { background: var(--c-steel-50); }

.section-head { max-width: 48rem; }
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-head h2 { margin-bottom: 1.25rem; }

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: none;
}
.section--dark .lead { color: var(--c-steel-400); }

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

/* Hairline grid: children sit on a 1px background that reads as dividing rules */
.grid--hairline {
  gap: 1px;
  background: var(--c-steel-200);
  border: 1px solid var(--c-steel-200);
}
.grid--hairline > * { background: var(--c-white); }
.section--dark .grid--hairline { background: var(--c-steel-800); border-color: var(--c-steel-800); }
.section--dark .grid--hairline > * { background: var(--c-black); }

/* Faint blueprint texture — used sparingly, never as decoration for its own sake */
.texture {
  background-image:
    linear-gradient(to right, rgba(11,12,14,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,12,14,.045) 1px, transparent 1px);
  background-size: 72px 72px;
}
.texture--dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.75rem;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

/* Sliding fill uses transform only, so it stays on the compositor */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

.btn__icon { width: 1rem; height: 1rem; transition: transform var(--dur-base) var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn--primary { background: var(--c-black); color: var(--c-white); }
.btn--primary::before { background: var(--c-accent); }

.btn--accent { background: var(--c-accent); color: var(--c-white); }
.btn--accent::before { background: var(--c-black); }

.btn--outline { border: 1px solid var(--c-steel-300); color: var(--c-black); }
.btn--outline:hover { border-color: var(--c-black); }

.btn--outline-light { border: 1px solid rgba(255,255,255,.35); color: var(--c-white); }
.btn--outline-light:hover { border-color: var(--c-white); }

.btn--block { width: 100%; }

/* Animated underline link */
.link-line { position: relative; display: inline-block; }
.link-line::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}
.link-line:hover::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   06. PRELOADER
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black);
  color: var(--c-white);
}
.preloader__inner { text-align: center; }
.preloader__mark {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.preloader__sub {
  margin-top: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-steel-500);
}
.preloader__bar {
  width: min(220px, 50vw);
  height: 2px;
  margin: 1.75rem auto 0;
  background: var(--c-steel-800);
  overflow: hidden;
}
.preloader__fill {
  width: 0;
  height: 100%;
  background: var(--c-accent);
}
/* Hidden state — JS removes the node after the fade completes */
.preloader.is-done { pointer-events: none; }

/* ==========================================================================
   07. HEADER / NAVIGATION
   ========================================================================== */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              backdrop-filter var(--dur-base) var(--ease);
}
.header.is-scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--c-steel-200);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

.logo { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.logo__sub {
  margin-top: 3px;
  font-family: var(--f-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-steel-500);
}

.nav { display: flex; align-items: center; gap: 2.25rem; }
.nav__link {
  position: relative;
  padding-block: 0.25rem;
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--c-steel-600);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--c-black); }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--c-accent); }
.nav__link.is-active::after { transform: scaleX(1); }

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--c-steel-300);
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all var(--dur-base) var(--ease);
}
.header__cta:hover { background: var(--c-black); border-color: var(--c-black); color: var(--c-white); }

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

/* Scroll-progress hairline */
.header__progress {
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Burger */
.burger { display: none; flex-direction: column; gap: 5px; width: 26px; padding: 4px 0; }
.burger span {
  height: 2px;
  background: var(--c-black);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) 2rem;
  background: var(--c-white);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-inout);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav__link {
  display: block;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--c-steel-200);
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(16px);
}
.mobile-nav.is-open .mobile-nav__link {
  animation: nav-in var(--dur-slow) var(--ease) forwards;
}
.mobile-nav__link.is-active { color: var(--c-accent); }
@keyframes nav-in { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }
}

/* ==========================================================================
   08. FOOTER
   ========================================================================== */
.footer {
  position: relative;
  background: var(--c-black);
  color: var(--c-white);
  overflow: hidden;
}
.footer__texture { position: absolute; inset: 0; opacity: .6; pointer-events: none; }
.footer__inner { position: relative; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-block: clamp(3.5rem, 7vw, 5rem);
  border-bottom: 1px solid var(--c-steel-800);
}
.footer__brand .logo__name { font-size: 1.5rem; }
.footer__desc { max-width: 22rem; margin-top: 1.5rem; font-size: 0.875rem; color: var(--c-steel-400); text-wrap: pretty; }

.footer__title {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-steel-500);
  margin-bottom: 1.5rem;
}
.footer__list li { padding-block: 0.4rem; }
.footer__list a { font-size: 0.875rem; color: var(--c-steel-300); transition: color var(--dur-fast); }
.footer__list a:hover { color: var(--c-white); }

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.55rem;
  font-size: 0.875rem;
  color: var(--c-steel-300);
}
.footer__contact svg { flex: 0 0 auto; margin-top: 3px; color: var(--c-steel-600); }
.footer__contact a { transition: color var(--dur-fast); word-break: break-word; }
.footer__contact a:hover { color: var(--c-white); }

/* Oversized wordmark sign-off */
.footer__wordmark {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--c-steel-800);
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 11vw, 9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--c-steel-900);
  user-select: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.75rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--c-steel-600);
}

@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ==========================================================================
   09. MEDIA PLACEHOLDERS
   Every slot the client will replace with real photography.
   Swap the .placeholder block for <img> — the wrapper handles ratio + zoom.
   ========================================================================== */
.media { position: relative; overflow: hidden; background: var(--c-steel-100); }
.media--dark { background: var(--c-black-soft); }

.media__ratio-1-1  { aspect-ratio: 1 / 1; }
.media__ratio-4-3  { aspect-ratio: 4 / 3; }
.media__ratio-3-2  { aspect-ratio: 3 / 2; }
.media__ratio-4-5  { aspect-ratio: 4 / 5; }
.media__ratio-16-9 { aspect-ratio: 16 / 9; }
.media__ratio-16-10{ aspect-ratio: 16 / 10; }
.media__ratio-21-9 { aspect-ratio: 21 / 9; }

.media__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}
.media__texture { position: absolute; inset: 0; transition: transform 0.9s var(--ease); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }

/* Image/texture zoom on hover of the enclosing .hover-zoom element */
.hover-zoom:hover .media__texture,
.hover-zoom:hover .media img { transform: scale(1.05); }

.media__icon { width: 1.75rem; height: 1.75rem; color: var(--c-steel-400); }
.media--dark .media__icon { color: var(--c-steel-600); }
.media__label {
  max-width: 85%;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-steel-500);
}

/* Corner registration marks — a restrained nod to technical drawings */
.media__mark { position: absolute; width: 0.75rem; height: 0.75rem; border-color: var(--c-steel-300); }
.media--dark .media__mark { border-color: var(--c-steel-700); }
.media__mark--tl { top: 1rem; left: 1rem;  border-top: 1px solid; border-left: 1px solid; }
.media__mark--tr { top: 1rem; right: 1rem; border-top: 1px solid; border-right: 1px solid; }
.media__mark--bl { bottom: 1rem; left: 1rem;  border-bottom: 1px solid; border-left: 1px solid; }
.media__mark--br { bottom: 1rem; right: 1rem; border-bottom: 1px solid; border-right: 1px solid; }

/* ==========================================================================
   10. ANIMATION UTILITIES
   Elements start hidden and are revealed by GSAP ScrollTrigger.
   .no-js fallback below guarantees content is visible without JavaScript.
   ========================================================================== */
[data-reveal] { opacity: 0; }
[data-reveal-lines] .line__inner { display: block; }

.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
.no-js .preloader { display: none; }

/* ==========================================================================
   11. ACCESSIBILITY & MOTION PREFERENCES
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.85rem 1.25rem;
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   12. HERO BACKGROUND VIDEO
   --------------------------------------------------------------------------
   Adds a cinematic full-bleed video layer behind the existing hero content
   on every page. Nothing about the hero's layout, type, spacing or animation
   is altered — the video and overlay are inserted *behind* the current
   markup and the content simply gains a stacking context above them.

   Layer order inside .hero / .page-hero
     z-index 0 .hero-video      the looping footage
     z-index 1 .hero-overlay    dark cinematic gradient (~55% average)
     z-index 2 existing texture / glow decoration
     z-index 3 .hero-content    all original headings, copy and buttons
   ========================================================================== */

/* Establish a private stacking context so the video can never escape the
   hero or paint above sticky UI elsewhere on the page. */
.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--c-black); /* fallback while the video loads */
}

/* --- the video itself --- */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;            /* overrides the global img/video reset */
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  border: 0;
  background-color: var(--c-black);
}

/* --- dark cinematic overlay --- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Weighted top and bottom: the top band carries the navbar, the bottom
     band blends the hero into the section that follows. */
  background:
    linear-gradient(
      180deg,
      rgba(11, 12, 14, .78) 0%,
      rgba(11, 12, 14, .46) 34%,
      rgba(11, 12, 14, .58) 72%,
      rgba(11, 12, 14, .93) 100%
    ),
    radial-gradient(130% 90% at 50% 0%, rgba(11, 12, 14, .10), rgba(11, 12, 14, .55));
}

/* --- existing decoration sits above the overlay, below the content --- */
.hero .hero__texture,
.page-hero .page-hero__texture,
.page-hero .page-hero__glow {
  z-index: 2;
}

/* --- all original hero content --- */
.hero-content,
.hero .hero__inner,
.page-hero .page-hero__inner {
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   Readability over footage
   Only colour is touched here — no font, size, spacing or position changes.
   -------------------------------------------------------------------------- */
.hero .hero__title,
.page-hero .page-hero__title {
  color: #fff;
}

.hero .hero__lead,
.page-hero .page-hero__lead {
  color: rgba(255, 255, 255, .86);
}

.hero .hero__tag,
.hero .hero__scroll,
.page-hero .crumbs {
  color: rgba(255, 255, 255, .72);
}

.hero .hero__scroll:hover,
.page-hero .crumbs a:hover {
  color: #fff;
}

.hero .hero__strip {
  border-top-color: rgba(255, 255, 255, .18);
}

/* Outline buttons need a light edge to stay visible against video */
.hero .btn--outline,
.page-hero .btn--outline {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

.hero .btn--outline:hover,
.page-hero .btn--outline:hover {
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Slightly stronger overlay on small screens: less horizontal room means
     text sits directly over the busiest part of the frame. */
  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(11, 12, 14, .82) 0%,
        rgba(11, 12, 14, .56) 34%,
        rgba(11, 12, 14, .66) 72%,
        rgba(11, 12, 14, .95) 100%
      );
  }
}

/* --------------------------------------------------------------------------
   Motion preferences
   Visitors who ask for reduced motion get the still overlay instead of
   looping footage. The poster frame still paints via the video element's
   own poster attribute where one is supplied.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* ==========================================================================
   13. NAVBAR OVER HERO — transparent at top, dark glass on scroll
   --------------------------------------------------------------------------
   Layout, order and spacing of the navigation are untouched; only colour,
   background and blur change. Because every page now opens on dark footage,
   the navigation text is light in both states so it never becomes
   unreadable mid-transition.
   ========================================================================== */

/* Transparent while at the top of the page */
.header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Light navigation text over the hero video.
   Scoped with .header to reliably win over per-page theme overrides. */
.header .logo__name {
  color: #fff;
}

.header .logo__sub {
  color: rgba(255, 255, 255, .6);
}

.header .nav__link {
  color: rgba(255, 255, 255, .8);
}

.header .nav__link:hover {
  color: #fff;
}

.header .nav__link.is-active {
  color: var(--c-accent-light);
}

.header .nav__link.is-active::after,
.header .nav__link::after {
  background: var(--c-accent-light);
}

.header .header__cta {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}

.header .header__cta:hover {
  background: #fff;
  border-color: #fff;
  color: var(--c-black);
}

.header .burger span {
  background: #fff;
}

/* Blurred dark glass once scrolled */
.header.is-scrolled {
  background: rgba(11, 12, 14, .72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .09);
}

/* Fallback for browsers without backdrop-filter (older Firefox, some Android) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-scrolled {
    background: rgba(11, 12, 14, .94);
  }
}

/* Mobile drawer follows the same dark glass language, which also keeps the
   white burger icon visible while the drawer is open. */
nav.mobile-nav {
  background: rgba(11, 12, 14, .97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

nav.mobile-nav .mobile-nav__link {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .12);
}

nav.mobile-nav .mobile-nav__link.is-active {
  color: var(--c-accent-light);
}