@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

/* ============================================================
   ASCEND AIRCRAFT ENGINE CO. design tokens
   Palette derived from the company letterhead, not invented.
   ============================================================ */

:root {
  /* Surfaces */
  --void: #05070C;          /* hero black, deliberately not pure #000 */
  --void-soft: #0A0E16;
  --ink: #0B1220;           /* letterhead navy */
  --ink-soft: #16202F;
  --paper: #F4F3F0;         /* letterhead off-white */
  --paper-dim: #E9E7E2;

  /* Metallics, sampled from the logo gradient */
  --silver-hi: #E8EDF2;
  --silver: #C9D1D9;
  --silver-lo: #8A94A6;

  /* The only chromatic note on the site. Used twice. */
  --ember: #C8873F;

  /* Type */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  /* One easing curve across the entire site. Consistency reads as "designed". */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.8s;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(5rem, 12vh, 9rem);
  --maxw: 1440px;

  --hairline: rgba(11, 18, 32, 0.12);
  --hairline-dark: rgba(232, 237, 242, 0.14);

  /* Overridden by every dark surface below. */
  --lede: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* Every dark surface, in one place. Anything added here inherits the right
   body-copy colour without needing its own override. Miss one and its body copy
   silently renders navy-on-near-black. */
.hero,
.dark,
.band,
.banner,
.creds,
.footer,
.menu {
  --lede: color-mix(in srgb, var(--silver-hi) 62%, transparent);
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto; /* Lenis owns scrolling */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--ink); color: var(--paper); }

/* Cross-document view transitions: page-to-page cross-fade instead of a hard cut.
   Browsers without support simply hard-cut, nothing breaks. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* The nav is a persistent element across navigations, so it must not cross-fade
   with the page body, otherwise it visibly double-exposes mid-transition. */
.nav { view-transition-name: nav; }
::view-transition-old(nav), ::view-transition-new(nav) { animation: none; }

/* ============================================================
   Typography
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 11vw, 9.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -0.01em; }

p { margin: 0; }

/* Mono is a direct callback to the letterhead, which already sets the
   registration numbers this way. */
.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-lo);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--ember);
  flex: none;
}

/* Lede colour is a token so every dark surface flips it by inheritance.
   Scoping the override to `.dark` alone silently left navy text on near-black
   in .band and .banner, which both set their own dark background. */
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--lede);
  max-width: 46ch;
}

.arabic {
  font-size: 1.05em;
  direction: rtl;
  unicode-bidi: isolate;
}

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

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 62ch;
}

.dark {
  background: var(--void);
  color: var(--silver-hi);
}
.dark .rule, .band .rule, .banner .rule { background: var(--hairline-dark); }

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
  transform-origin: left center;
}

/* ============================================================
   Navigation
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem var(--gutter);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
              border-color 0.5s var(--ease), padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Over the dark hero: transparent chrome, light type. */
.nav[data-mode='over'] {
  background: transparent;
  color: var(--silver-hi);
}

/* Past the hero, and on every inner page from the top: frosted paper. */
.nav[data-mode='solid'] {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--hairline);
  color: var(--ink);
  padding-block: 0.7rem;
}

.nav__mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.nav__mark img {
  height: 42px;
  width: auto;
  transition: height 0.5s var(--ease), filter 0.5s var(--ease);
}

/* The regenerated emblem carries no wordmark, so the company name is set as
   live text: crisp at any size, recolourable per nav state, and selectable. */
.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: font-size 0.5s var(--ease);
}

/* The logo is silver-on-navy artwork; over the dark hero it needs lifting. */
.nav[data-mode='over'] .nav__mark img { filter: brightness(1.9) contrast(0.85); }
.nav[data-mode='solid'] .nav__mark img { height: 36px; }
.nav[data-mode='solid'] .nav__wordmark { font-size: 1rem; }

.nav__links {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  opacity: 0.72;
  transition: opacity 0.35s var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}

.nav__link:hover { opacity: 1; }
.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav__link[aria-current='page'] { opacity: 1; }

.nav__cta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.85;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), opacity 0.4s var(--ease);
  white-space: nowrap;
  flex: none;
}

.nav__cta:hover { opacity: 1; }
.nav[data-mode='over'] .nav__cta:hover { background: var(--silver-hi); color: var(--void); }
.nav[data-mode='solid'] .nav__cta:hover { background: var(--ink); color: var(--paper); }

/* Mobile nav */
.nav__burger {
  display: none;
  width: 26px;
  height: 14px;
  position: relative;
  flex: none;
  z-index: 3;
}

.nav__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { bottom: 0; }

body[data-menu='open'] .nav__burger span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
body[data-menu='open'] .nav__burger span:nth-child(2) { transform: translateY(-6.25px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--void);
  color: var(--silver-hi);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 6rem var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease);
  visibility: hidden;
}

body[data-menu='open'] .menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.menu__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.18;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  border-bottom: 1px solid var(--hairline-dark);
  padding-block: 0.7rem;
}

body[data-menu='open'] .menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.18s + var(--i) * 0.07s);
}

.menu__foot {
  margin-top: 2.5rem;
  color: var(--silver-lo);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.05rem 1.8rem;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease);
}

/* Wipe fill on hover, cheaper and smoother than animating background. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.55s var(--ease);
  z-index: -1;
}

.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn__arrow { transition: transform 0.55s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost {
  background: transparent;
  color: var(--silver-hi);
  border: 1px solid var(--hairline-dark);
}
.btn--ghost:hover { color: var(--void); }
.btn--ghost::before { background: var(--silver-hi); }

/* ============================================================
   Hero, the pinned scrub sequence
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--void);
  color: var(--silver-hi);
}

/* Groups the footage with its opening scrim so the layering above them
   (callouts, floor wash, copy) stays explicit. */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transform only. Hinting `filter` here promoted a layer that then had to be
     re-filtered every scrub frame. */
  will-change: transform;
}

/* Fades in over the footage during the hand-off to the light body. A plain
   opacity fade is compositor-only, unlike animating a filter on the video. */
.hero__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--void);
  opacity: 0;
  pointer-events: none;
}

/* ---- Chapters ----
   The exploded engine spans the full frame, so the copy sits beneath it on the
   hangar floor rather than beside it. Each chapter is absolutely stacked in the
   same box, so a swap is a pure cross-fade with no layout shift. */
.hero__panel {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(4.5rem, 12vh, 7rem);
  width: min(46vw, 34rem);
  pointer-events: none;
}

.chapter {
  position: absolute;
  inset: auto auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  opacity: 0;
  will-change: transform, opacity;
}

.chapter h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--silver-hi);
}

.chapter p {
  font-weight: 300;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--lede);
  max-width: 38ch;
}

/* ---- Component callouts ----
   A technical-drawing device: a label in the clear band above the engine, with
   a hairline dropping onto the part it names. JS sets the position and the line
   length from fractions of the video frame. */
.hero__annots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.annot {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  will-change: opacity;
}

.annot__label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--silver-hi);
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(5, 7, 12, 0.9);
}

.annot__line {
  width: 1px;
  background: linear-gradient(to bottom, var(--ember), rgba(200, 135, 63, 0.15));
  transform-origin: top center;
}

/* Chapter index. Kept on the dark side with the copy: sitting it opposite the
   engine put it on top of bright moving footage where it was unreadable. */
.hero__index {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(2rem, 7vh, 3.5rem);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  opacity: 0;
  pointer-events: none;
}

.hero__idx {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--silver-lo);
  opacity: 0.32;
  position: relative;
  padding-right: 1.9rem;
  transition: opacity 0.5s var(--ease), color 0.5s var(--ease);
}

.hero__idx:last-child { padding-right: 0; }
.hero__idx:last-child::after { display: none; }

.hero__idx::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1.2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.4);
  transform-origin: right center;
  transition: transform 0.5s var(--ease);
}

.hero__idx.is-on {
  opacity: 1;
  color: var(--ember);
}
.hero__idx.is-on::after { transform: scaleX(1); }

/* Opening scrim: holds the ASCEND headline over the footage. Fades out once the
   engine takes over as the subject. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(5, 7, 12, 0.72) 0%,
      rgba(5, 7, 12, 0.28) 32%,
      rgba(5, 7, 12, 0.42) 66%,
      rgba(5, 7, 12, 0.92) 100%),
    radial-gradient(120% 85% at 50% 45%, transparent 30%, rgba(5, 7, 12, 0.6) 100%);
  pointer-events: none;
}

/* Seats the chapter copy on the hangar floor. Separate from .hero__scrim
   because that one fades away, and the copy needs its footing for the whole
   sequence. Bottom-weighted only, so it never touches the engine. */
.hero__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: 2;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(5, 7, 12, 0.35) 42%,
    rgba(5, 7, 12, 0.86) 78%,
    rgba(5, 7, 12, 0.96) 100%);
  opacity: 0;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7.5rem var(--gutter) 2.5rem;
  max-width: var(--maxw);
  margin-inline: auto;
}

.hero__top { display: flex; flex-direction: column; gap: 1rem; }

.hero__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.4rem;
  color: var(--silver);
  font-size: 0.82rem;
}

.hero__title { position: relative; }

/* Base colour, and the fallback if the JS split never runs. */
.hero__title .display { color: var(--silver-hi); }

/* Per-character reveal targets. Set by JS; masked so glyphs rise out of nothing. */
.char {
  display: inline-block;
  will-change: transform;
}
.char-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* The metallic gradient lives on each glyph, not on the h1.
   background-clip:text on the h1 renders nothing once the glyphs are moved into
   .char-mask children, the clip loses the text and the wordmark disappears.
   The gradient is near-vertical (178deg) and every glyph shares a baseline and
   height, so per-glyph is visually identical to one gradient across the word. */
.hero__title .display .char {
  background: linear-gradient(178deg, var(--silver-hi) 8%, var(--silver) 48%, var(--silver-lo) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
  max-width: 24ch;
}

.hero__cue {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--silver-lo);
}

.hero__cue-line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--silver-lo), transparent);
  position: relative;
  overflow: hidden;
}

.hero__cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ember);
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}


/* ============================================================
   Credentials strip
   For a smaller Dubai firm these numbers ARE the trust argument.
   Most competitors bury them in a footer; we lead with them.
   ============================================================ */

.creds {
  background: var(--ink);
  color: var(--silver);
  border-block: 1px solid var(--hairline-dark);
}

.creds__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.creds__item {
  padding: 2.2rem 1.5rem;
  border-left: 1px solid var(--hairline-dark);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.creds__item:first-child { border-left: 0; }

.creds__label {
  color: var(--silver-lo);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

.creds__value {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--silver-hi);
  letter-spacing: 0.02em;
}

/* ============================================================
   Capabilities
   ============================================================ */

/* Hairlines come from borders on the cells, not from a background plate showing
   through gaps. The plate version flashes a solid grey block whenever the cells
   are mid-reveal at opacity 0. */
.caps__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.cap {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 21rem;
  transition: color 0.6s var(--ease);
}

.cap__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.7s var(--ease), transform 1.2s var(--ease);
}

.cap__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.35), rgba(5, 7, 12, 0.85));
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

/* The image is the reward for hovering, the card is quiet at rest. */
.cap:hover { color: var(--silver-hi); }
.cap:hover .cap__img { opacity: 0.55; transform: scale(1); }
.cap:hover .cap__veil { opacity: 1; }
.cap:hover .cap__num { color: var(--ember); }
.cap:hover .cap__body { color: color-mix(in srgb, var(--silver-hi) 75%, transparent); }

.cap__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--silver-lo);
  letter-spacing: 0.16em;
  transition: color 0.6s var(--ease);
}

.cap__body {
  font-size: 0.94rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  transition: color 0.6s var(--ease);
  max-width: 40ch;
}

.cap__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cap__foot svg { transition: transform 0.5s var(--ease); }
.cap:hover .cap__foot svg { transform: translateX(5px); }

/* ============================================================
   Process
   ============================================================ */

.process { background: var(--paper-dim); overflow: hidden; }

.process__track {
  display: flex;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
  will-change: transform;
  /* Without this the track's own box is only 100% of the viewport while its
     steps overflow past it, so the rules and gap-lines (which are this box's
     border and background) get dragged off-screen with it and stop mid-track. */
  width: max-content;
}

.step {
  background: var(--paper-dim);
  flex: none;
  width: clamp(15rem, 24vw, 20rem);
  padding: 2.25rem 1.75rem 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
}

.step__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ember);
}

.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.015em;
}

.step__body {
  font-size: 0.86rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.step__dot {
  position: absolute;
  left: 1.75rem;
  bottom: 1.4rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--silver-lo);
}

.process__hint {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--silver-lo);
  margin-top: 1.6rem;
}

/* ============================================================
   Stats
   ============================================================ */

/* Same reason as .caps__grid: borders on cells, no background plate. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline-dark);
  border-left: 1px solid var(--hairline-dark);
}

.stat {
  border-right: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  background: var(--void);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(170deg, var(--silver-hi), var(--silver-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  color: var(--silver-lo);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}

/* ============================================================
   Contact band + footer
   ============================================================ */

.band {
  background: var(--void);
  color: var(--silver-hi);
  position: relative;
  overflow: hidden;
}

/* Ghost watermark, the same move their letterhead makes. */
.band__ghost {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  opacity: 0.045;
  pointer-events: none;
  filter: grayscale(1) brightness(2.4);
  user-select: none;
}

.band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  align-items: flex-start;
}

.footer {
  background: var(--ink);
  color: var(--silver-lo);
  padding-block: 3.5rem 2rem;
  border-top: 1px solid var(--hairline-dark);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--hairline-dark);
}

.footer__mark img { height: 58px; filter: brightness(1.8) contrast(0.9); }

.footer__names {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1rem;
  color: var(--silver);
  font-size: 0.84rem;
}

.footer__cols {
  display: flex;
  gap: clamp(2.5rem, 6vw, 6rem);
  flex-wrap: wrap;
}

.footer__col { display: flex; flex-direction: column; gap: 0.85rem; }

.footer__col h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-lo);
  opacity: 0.6;
}

.footer__col a, .footer__col span {
  font-size: 0.86rem;
  color: var(--silver);
  transition: color 0.35s var(--ease);
}
.footer__col a:hover { color: var(--ember); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.55;
}

/* ============================================================
   Inner pages
   ============================================================ */

.banner {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background: var(--void);
  color: var(--silver-hi);
  overflow: hidden;
  padding-block: 4rem;
}

.banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  will-change: transform;
}

.banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.88) 0%, rgba(5, 7, 12, 0.35) 45%, rgba(5, 7, 12, 0.95) 100%);
}

.banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.banner h1 { font-size: clamp(2.4rem, 6.5vw, 5rem); letter-spacing: -0.04em; }

/* Service rows */
.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--hairline);
}

/* Media is already first in source order, so alternating rows push it after the
   body (order:1). order:-1 here would be a no-op and every row would match. */
.svc:nth-child(even) .svc__media { order: 1; }

.svc__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}

.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.svc:hover .svc__media img { transform: scale(1.05); }

.svc__body { display: flex; flex-direction: column; gap: 1.3rem; }

.svc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.svc__list li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: 0.9rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.svc__list li::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--ember);
  flex: none;
  transform: translateY(-2px);
}

.spec {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  margin-top: 0.5rem;
}

.spec td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  letter-spacing: 0.04em;
}
.spec td:first-child { color: var(--silver-lo); text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.14em; }
.spec td:last-child { text-align: right; color: var(--ink); }

/* Prose */
.prose {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hairline);
}

.prose__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.72;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  max-width: 62ch;
}

/* Contact */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.4rem; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-lo);
}

.field input, .field textarea, .field select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.85rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--ember);
}

.field textarea { resize: vertical; min-height: 6.5rem; }

.info-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--hairline);
}

.info-block__value { font-size: 1.05rem; font-weight: 400; }
.info-block__value a { transition: color 0.35s var(--ease); }
.info-block__value a:hover { color: var(--ember); }

.map {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(rgba(11, 18, 32, 0.06) 1px, transparent 1px) 0 0 / 100% 2.5rem,
    linear-gradient(90deg, rgba(11, 18, 32, 0.06) 1px, transparent 1px) 0 0 / 2.5rem 100%,
    var(--paper-dim);
  border: 1px solid var(--hairline);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.map__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ember);
  position: relative;
}

.map__dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid var(--ember);
  border-radius: 50%;
  animation: ping 2.6s var(--ease) infinite;
}

@keyframes ping {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

.note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--silver-lo);
  text-transform: uppercase;
  margin-top: 1rem;
}

/* ============================================================
   Reveal primitives, JS adds .is-in when the element enters
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-rule] { transform: scaleX(0); transition: transform 1.1s var(--ease); }
[data-rule].is-in { transform: scaleX(1); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
  .creds__grid { grid-template-columns: repeat(2, 1fr); }
  .creds__item:nth-child(3) { border-left: 0; }
  .creds__item:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-dark); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .prose { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: block; }

  .caps__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .svc:nth-child(even) .svc__media { order: 0; }

  .hero__inner { padding-top: 6rem; }
  .hero__bottom { align-items: flex-start; flex-direction: column; }
  .hero__cue { display: none; }
  .band__ghost { opacity: 0.03; right: -25%; }

  /* The exploded engine is a wide subject: on a phone the cover crop keeps only
     its middle, so callouts would point at parts that are off screen. Drop them
     and let the copy have the full width. */
  .hero__annots { display: none; }

  .hero__panel {
    width: auto;
    right: var(--gutter);
    bottom: clamp(4rem, 14vh, 6rem);
  }

  .chapter h2 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .chapter p { font-size: 0.9rem; }
}

@media (max-width: 560px) {
  .creds__grid { grid-template-columns: 1fr; }
  .creds__item { border-left: 0; border-bottom: 1px solid var(--hairline-dark); }
  .stats__grid { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; }
}

/* ============================================================
   Reduced motion, the pinned scrub is replaced wholesale by a
   static hero elsewhere (JS); here we neutralise everything else.
   ============================================================ */

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

  [data-reveal] { opacity: 1; transform: none; }
  [data-rule] { transform: scaleX(1); }
  .menu__link { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}