/* ================================================================
   FUGU — site.css  ::  DEFENCE BUILD
   Tactical · subdued · dark
   ================================================================ */

*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
img,video,svg { display: block; max-width: 100%; }

:root {
  /* === DEFENCE PALETTE — subdued blues + tactical purple === */
  --bg: #04060B;          /* near-black, deep navy undertone */
  --bg-1: #07090F;        /* panel base */
  --bg-2: #0C111B;        /* card / surface */
  --bg-3: #131A26;        /* raised surface, used for HUD chrome */
  --fg: #E8ECF2;          /* off-white, slightly cool */
  --fg-2: rgba(232,236,242,0.62);
  --fg-3: rgba(232,236,242,0.55);   /* lifted from 0.40 to clear WCAG AA contrast */
  --fg-4: rgba(232,236,242,0.22);
  --fg-dim: var(--fg-2);            /* was undefined; alias to the secondary tone */
  --rule: rgba(160,180,220,0.08);
  --rule-2: rgba(160,180,220,0.16);
  --rule-3: rgba(160,180,220,0.28);

  /* Accent tier — restrained, no neon */
  --blue: #6B8FC9;        /* sensor blue, muted */
  --blue-bright: #8AB0F0; /* highlight only */
  --blue-deep: #2A3E66;   /* panel chrome */
  --purple: #7B6FB8;      /* tactical purple */
  --purple-deep: #3A2F5C;
  --pink: #6B8FC9;        /* legacy alias → now blue */

  /* Replaced rainbow gradient with subtle blue→purple tactical wash */
  --grad: linear-gradient(95deg, #6B8FC9 0%, #7B6FB8 100%);
  --grad-soft: linear-gradient(95deg, rgba(107,143,201,0.18) 0%, rgba(123,111,184,0.18) 100%);
  --grad-line: linear-gradient(90deg, transparent 0%, rgba(107,143,201,0.6) 50%, transparent 100%);

  --container: 1340px;
  --gutter: clamp(20px, 4vw, 56px);

  --display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* Tactical — stencil-influenced, used for eyebrows / labels / readouts.
     Modern military-aerospace feel without crossing into cosplay. */
  --tactical: 'Chakra Petch', 'Inter Tight', -apple-system, system-ui, sans-serif;
  --jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  --ease: cubic-bezier(.2,.7,.1,1);
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-feature-settings: "ss01","ss02","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  overflow-x: hidden;
}

::selection { background: var(--blue); color: #000; }

/* ================================================================
   DEFENCE-THEME — tactical HUD accents
   ================================================================ */

/* Eyebrow label — uppercase, letterspaced, tactical-typeface */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tactical);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}
/* Mobile: let the eyebrow wrap to multiple lines so long labels like
   'The Challenge — Fuel Comes From Somewhere Else' don't overflow. Switch to
   block layout so the text node can wrap normally; the leading rule is
   rendered inline via ::before on the first line. */
@media (max-width: 760px) {
  .eyebrow {
    display: block;
    letter-spacing: 0.22em;
    line-height: 1.45;
    word-spacing: 0.05em;
    max-width: 100%;
  }
  .eyebrow::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-bottom: 3px;
  }
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--rule-3);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(107,143,201,0.6);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Corner-bracket frame — tactical box accent */
.hud-frame {
  position: relative;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  background: rgba(12,17,27,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hud-frame::before,
.hud-frame::after,
.hud-frame > .hud-cnr-a,
.hud-frame > .hud-cnr-b {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--blue);
  border-style: solid;
  border-width: 0;
}
.hud-frame::before { top: -1px; left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.hud-frame::after  { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.hud-frame > .hud-cnr-a { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.hud-frame > .hud-cnr-b { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* Tactical grid overlay — full-bleed, ultra-faint */
.tac-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(160,180,220,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(160,180,220,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 75%);
  z-index: 1;
}

/* Scanline — moves slowly across hero, sensor vibe */
.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(138,176,240,0.0) 48%,
    rgba(138,176,240,0.10) 50%,
    rgba(138,176,240,0.0) 52%,
    transparent 100%
  );
  background-size: 100% 220%;
  animation: scan-y 8s linear infinite;
  z-index: 2;
  opacity: 0.55;
  mix-blend-mode: screen;
}
@keyframes scan-y {
  0%   { background-position: 0% -100%; }
  100% { background-position: 0% 200%; }
}

/* ================================================================
   OPERATIONAL-ACTIVE SCROLL EFFECTS
   ================================================================ */

/* Word-cascade reveal: headings split into words, each word fades + rises
   with a small stagger. Applied via JS by adding .op-words.
   No blur — it caused stray glyph fragments around descenders/ascenders. */
.op-words .op-w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.55s cubic-bezier(.2,.7,.1,1),
    transform 0.6s cubic-bezier(.2,.7,.1,1);
  /* per-word delay set inline via --d */
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
  /* Tiny vertical breathing room so ascenders/descenders never get clipped
     by any parent overflow: hidden (e.g. .hero-title .line). */
  padding: 0.02em 0;
}
.op-words.in .op-w {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Inside gradient-clipped text containers, .op-w wrappers need their own
   background-clip:text so they paint via the gradient instead of disappearing. */
.hero-title em .op-w,
.display em .op-w,
.display .grad .op-w,
.hormuz-title em .op-w,
.sub-hero-inner h1 em .op-w {
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* The gradient fill is clipped to each word-span's padding box, so extra
     bottom padding is what actually extends the fill down over descenders
     (g, y, p). Padding the .grad parent did nothing — these .op-w spans are
     the clipped elements. Matching top padding keeps line-2 ascenders from
     kissing line-1 descenders when line-height is < 1 (as .display.tight is). */
  padding-top: 0.1em;
  padding-bottom: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
  .op-words .op-w {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* Scan-in typewriter for small labels (.kicker / .eyebrow) on scroll */
.op-typed {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.op-typed .op-typed-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  transition: max-width 1.1s cubic-bezier(.55,.05,.1,1);
  vertical-align: bottom;
}
.op-typed.in .op-typed-text { max-width: var(--w, 999px); }
@media (prefers-reduced-motion: reduce) {
  .op-typed .op-typed-text { max-width: none !important; transition: none; }
}
/* Mobile: long eyebrow labels need to wrap. Disable the scan-in nowrap behaviour
   and let the text flow normally; the wipe-in still works because max-width
   animates over the full content area. */
@media (max-width: 760px) {
  .eyebrow.op-typed {
    display: block;
    max-width: 100%;
  }
  .eyebrow.op-typed .op-typed-text {
    display: block;
    white-space: normal;
    max-width: 100% !important;
    overflow: visible;
    transition: none;
  }
}

/* Stat counter — mono pulse when ticking */
.op-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.op-num.ticking { color: var(--blue-bright); }
.op-num.done { color: var(--fg); transition: color .8s ease; }

/* Section eyebrow line — thin accent rule that draws in left-to-right */
.op-rule {
  position: relative;
  display: block;
  width: 56px;
  height: 1px;
  background: var(--rule);
  margin: 0 0 22px;
  overflow: hidden;
}
.op-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(.7,.05,.2,1);
}
.op-rule.in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .op-rule::after { transform: scaleX(1); transition: none; }
}

/* Hero sublime — the resilience/independence sub-line under the main title.
   Carries the typewriter-rotating phrase. */
.hero-sublime {
  margin-top: 28px;
  font-family: var(--display);
  font-size: clamp(20px, 1.85vw, 30px);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 38ch;
}
body[data-page="home"] .hero-sublime { color: rgba(255,255,255,0.95); }

/* Typewriter rotator — types out, pauses, deletes, next phrase */
.typer {
  display: inline;
  position: relative;
  white-space: nowrap;
}
.typer-text {
  font-style: normal;
  font-weight: 400;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Avoid orphaned caret jumping to next line */
  white-space: nowrap;
}
.typer-caret {
  display: inline-block;
  width: 0.5ch;
  margin-left: 2px;
  border-right: 2px solid var(--blue-bright);
  /* Match cap-height-ish to text-bottom so the caret sits inside the letter
     bounds rather than overshooting below the baseline. */
  height: 0.9em;
  vertical-align: baseline;
  transform: translateY(0.05em);
  animation: typer-blink 1s steps(1) infinite;
}
@keyframes typer-blink {
  0%, 49%  { border-color: var(--blue-bright); }
  50%, 100% { border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .typer-caret { animation: none; border-color: var(--blue-bright); }
}

/* Mission-readout block — small tactical metadata under hero CTA */
.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: 640px;
}
.readout-cell { display: flex; flex-direction: column; gap: 4px; }
.readout-k {
  font-family: var(--tactical);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.readout-v {
  font-family: var(--tactical);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  font-weight: 500;
}
.readout-v .dim { color: var(--fg-2); font-weight: 400; }


a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.mono { font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; }

/* Japanese subtext — bilingual typography pattern */
.jp {
  font-family: var(--jp);
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
/* Hero katakana — small quiet line under English hero */
.jp-hero {
  font-family: var(--jp);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.4em;
  color: var(--fg-3);
  display: block;
  margin-top: 18px;
}
/* Bilingual kicker — small JP appended to a mono kicker */
.kicker .jp-sub {
  font-family: var(--jp);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: none;
  opacity: 1;
  margin-left: 10px;
}
/* JP subtext under display headlines */
.jp-under {
  font-family: var(--jp);
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: var(--fg-3);
  display: block;
  margin-top: 14px;
}
/* Hero katakana on light backgrounds (airrefinery product hero) */
body[data-page="airrefinery"] .product-hero .jp-hero {
  color: rgba(0,0,0,0.4);
}
.mono.dim { color: var(--fg-3); }
.muted { color: var(--fg-2); }
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── NAV ───────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(0,0,0,0.6);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--rule);
}
.nav-mark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--fg);
}
.nav-mark svg { opacity: 0.92; }
.nav-word {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* PNG logo — light variant for dark nav (default), dark variant for light nav (airrefinery hero only) */
.nav-logo {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.95;
}
.nav-logo-dark { display: none; }
/* On airrefinery page, unscrolled state has light bg → use dark logo */
body[data-page="airrefinery"] .nav:not(.scrolled) .nav-logo-light { display: none; }
body[data-page="airrefinery"] .nav:not(.scrolled) .nav-logo-dark { display: block; }
.nav-links {
  display: flex; align-items: center; gap: 36px;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.nav-links > a {
  color: var(--fg-2);
  transition: color .25s var(--ease);
}
.nav-links > a:hover { color: var(--fg); }
.nav-links .nav-cta {
  color: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav-links .nav-cta:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
}

/* Mobile nav: hamburger toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  color: var(--fg);
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav.open .nav-toggle .icon-open { display: none; }
.nav.open .nav-toggle .icon-close { display: block; }

@media (max-width: 760px) {
  .nav { padding: 14px var(--gutter); }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px var(--gutter) 40px;
    background: rgba(0,0,0,0.96);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links > a {
    display: block;
    padding: 18px 0;
    font-size: 1.1rem;
    color: var(--fg);
    border-bottom: 1px solid var(--rule);
  }
  .nav-links > a:last-child { border-bottom: none; }
  .nav-links .nav-cta {
    margin-top: 16px;
    justify-content: center;
    padding: 14px 20px;
  }
}

/* ── HERO ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  isolation: isolate;
  overflow: hidden;
}
.hero-media {
  /* Break out of the .hero gutter padding so the video/image is full-bleed.
     Using negative horizontal insets equal to var(--gutter) extends the media
     to the viewport edges without altering layout of .hero-content above it. */
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  z-index: -1;
}
.hero-media video,
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Default: show video (landscape/desktop), hide mobile still */
.hero-media-mobile { display: none; }
.hero-media-desktop { display: block; }
/* Portrait orientation OR narrow viewports: show mobile still, hide video */
@media (orientation: portrait), (max-width: 720px) {
  .hero-media-mobile { display: block; }
  .hero-media-desktop { display: none; }
}
.hero-vignette { display: none; }
/* Hero text legible over the bright (un-vignetted) video; gradient em keeps a clean drop-shadow. */
.hero-content { text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 18px rgba(0,0,0,0.45); }
.hero-title em { text-shadow: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }

.hero-content {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  padding-top: 9vh;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 36px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-title {
  font-size: clamp(56px, 10.4vw, 168px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
  max-width: 16ch;
}
.hero-title .line {
  display: block;
  /* overflow visible so word-cascade ascenders/descenders aren't clipped */
  overflow: visible;
  padding: 0.02em 0;
}
.hero-title em {
  font-style: normal;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  margin-top: 36px;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 56ch;
  font-weight: 300;
}
/* Brighter hero subtitle + lede over the dark hero video (wins on desktop + mobile) */
body[data-page="home"] .jp-hero { color: rgba(255,255,255,0.8); }
body[data-page="home"] .hero-lede { color: rgba(255,255,255,0.9); }

.hero-meta {
  margin-top: 36px;
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.hero-sep { width: 1px; height: 18px; background: var(--rule-2); }
.hero-fineprint {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.btn-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 4px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.btn-link .arrow { transition: transform .3s var(--ease); }
.btn-link:hover { border-color: var(--fg); }
.btn-link:hover .arrow { transform: translateX(4px); }

/* Ticker */
.ticker {
  position: absolute;
  bottom: 64px; left: 0; right: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.ticker-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: tick 38s linear infinite;
  will-change: transform;
}
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.t-item {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 10px;
}
.t-item b { color: var(--fg); font-weight: 500; }
.t-item i {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-scroll {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  display: none;
}

/* ── REUSABLE LAYOUT ───────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; gap: 24px; }
}

.col-label {
  position: sticky;
  top: 100px;
  align-self: start;
}
.kicker {
  font-family: var(--tactical);
  font-size: 0.72rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--rule-3);
}
/* No leading dash on kickers/eyebrows at any width — keep the label left-aligned. */
.kicker::before,
.eyebrow::before { display: none; }
.kicker { gap: 0; }

.display {
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0 0 28px;
}
.display.tight { line-height: 0.96; }
.display.giant {
  font-size: clamp(48px, 8.8vw, 140px);
}
.display em {
  font-style: normal;
  font-weight: 300;
  color: var(--fg);
}
.display .line {
  display: block;
}

.big-body {
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.55;
  font-weight: 300;
  color: var(--fg-2);
  max-width: 62ch;
  margin: 0;
}
.big-body em { font-style: normal; color: var(--fg); }

/* ── THESIS ──────────────────────────────────────────────────── */
.thesis {
  padding: 200px 0 140px;
  border-bottom: 1px solid var(--rule);
}

.stat-row {
  max-width: var(--container);
  margin: 110px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat {
  padding: 32px 32px 32px 0;
  border-left: 1px solid var(--rule);
  padding-left: 32px;
}
.stat:first-child { border-left: 0; padding-left: 0; }

.stat-fig {
  font-size: clamp(54px, 7.5vw, 116px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-fig .unit {
  font-size: 0.38em;
  font-weight: 400;
  margin-left: 4px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-tag {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--fg-2);
  line-height: 1.5;
  font-weight: 400;
}
@media (max-width: 900px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 540px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 24px; }
  .stat:first-child { border-top: 0; padding-top: 0; }
}

/* ── REVEAL (two-column) ────────────────────────────────────── */
.reveal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 160px var(--gutter);
}
.reveal.flip .reveal-text { order: 2; }
.reveal.flip .reveal-media { order: 1; }
.reveal-text .kicker { margin-bottom: 28px; }
.reveal-text .display { margin-bottom: 28px; }
.reveal-text .btn-link { margin-top: 32px; }

.reveal-media {
  position: relative;
}
.reveal-media picture {
  display: block;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-1);
  aspect-ratio: 4/5;
  border: 1px solid var(--rule);
}
.reveal-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}
.reveal-media:hover img { transform: scale(1.03); }
.reveal-caption {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.reveal-caption .mono {
  font-size: 0.66rem;
  background: rgba(0,0,0,0.6);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
  .reveal { grid-template-columns: 1fr; gap: 48px; padding: 100px var(--gutter); }
  .reveal.flip .reveal-text { order: 0; }
  .reveal.flip .reveal-media { order: 1; }
}

/* ── REVEAL FULL-BLEED — AirRefinery section, home (mirrors hormuz) ── */
.reveal-bleed {
  position: relative;
  isolation: isolate; /* stacking context so the z-index:-1 background image renders */
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.reveal-bleed-media { position: absolute; inset: 0; z-index: -1; }
.reveal-bleed-media img { width: 100%; height: 100%; object-fit: cover; }
/* Directional scrim from the left so the heading reads against bright sky
   while the right side of the image stays mostly visible. Stronger across the
   text column (0-55%) so 'makes that optional.' has consistent contrast. */
.reveal-bleed-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(4,6,11,0.78) 0%,
    rgba(4,6,11,0.66) 30%,
    rgba(4,6,11,0.48) 50%,
    rgba(4,6,11,0.18) 72%,
    rgba(4,6,11,0) 92%
  );
  pointer-events: none;
}
.reveal-bleed-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px var(--gutter);
  width: 100%;
  /* legibility over bright daytime imagery — text-shadow, no scrim (matches hero) */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 18px rgba(0,0,0,0.55);
}
/* 17ch keeps the bold "makes that optional." on one line (bold is wider) while
   still wrapping after "The AirRefinery" via the <br> */
.reveal-bleed-inner .display { max-width: 17ch; }
.reveal-bleed-inner .big-body { max-width: 40ch; color: var(--fg); }
.reveal-bleed-inner .btn-link { margin-top: 32px; }
/* lighter than the default fg-3 so it stays legible over the bright sky */
.reveal-bleed-inner .jp-under { color: rgba(255,255,255,0.95); }
/* gradient-clipped text can't carry a text-shadow without muddying — use drop-shadow.
   Match the rest of the display (font-weight 500) and use the darker gradient stops
   so the heading stays legible against bright daytime imagery. */
.reveal-bleed-inner .grad {
  font-style: normal;
  font-weight: 500;
  text-shadow: none;
  /* Calm mid-tone gradient — visible against the scrim but quieter than the
     white line above so 'The AirRefinery' stays the primary line of the heading. */
  background-image: linear-gradient(95deg, #6E92D2 0%, #8878C5 100%);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.65));
}
@media (max-width: 720px) {
  /* Top-align so the heading lands in the open sky at the top of the image,
     where white text reads cleanly instead of over the busy mountain/panel line. */
  .reveal-bleed { min-height: 100svh; min-height: 100dvh; align-items: flex-start; }
  .reveal-bleed-inner { padding: 104px var(--gutter) 80px; }
  /* Mobile gets a darker gradient because there's less scrim runway under the
     heading on narrow screens. */
  .reveal-bleed-inner .grad {
    background-image: linear-gradient(95deg, #6E92D2 0%, #8878C5 100%);
  }
}

/* ── STACKED ────────────────────────────────────────────────── */
.stacked {
  padding: 140px 0;
  border-top: 1px solid var(--rule);
}
.problems {
  max-width: var(--container);
  margin: 90px auto 0;
  padding: 0 var(--gutter);
  list-style: none;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
}
.problems li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 64px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.problems li:last-child { border-bottom: 1px solid var(--rule); }
.prob-num {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.problems h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.problems p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-2);
  font-weight: 300;
  margin: 0;
  max-width: 50ch;
}
@media (max-width: 900px) {
  .problems li {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.cta-line {
  max-width: var(--container);
  margin: 70px auto 0;
  padding: 0 var(--gutter);
  font-size: 18px;
  font-weight: 300;
  color: var(--fg-2);
}
.cta-line a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule-2);
  margin-left: 8px;
  transition: border-color .25s var(--ease);
}
.cta-line a:hover { border-color: var(--fg); }

/* ── PRICING ────────────────────────────────────────────────── */
.pricing {
  border-top: 1px solid var(--rule);
  padding: 140px var(--gutter);
}
.pricing-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.pricing .kicker { margin-bottom: 24px; }
.pricing .display { margin-bottom: 80px; }

.pricing-rows {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.prc-row {
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 48px;
  padding: 44px 0;
  align-items: center;
}
.prc-fuel { display: flex; flex-direction: column; gap: 6px; }
.prc-name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.prc-context { font-size: 0.78rem; color: var(--fg-3); font-family: var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.prc-fugu { display: flex; align-items: baseline; gap: 14px; }
.prc-figure {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prc-figure i {
  font-style: normal;
  font-size: 0.5em;
  font-weight: 400;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prc-mark {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--fg-3);
}
.prc-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prc-bar {
  position: relative;
}
.prc-bar::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--rule);
  width: 100%;
}
.prc-fill {
  position: absolute;
  top: 0;
  height: 2px;
  width: var(--w);
  background: var(--grad);
}
.prc-compare {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.prc-foot {
  margin-top: 48px;
  font-size: 16.5px;
  color: var(--fg-2);
  font-weight: 300;
  max-width: 62ch;
}

@media (max-width: 900px) {
  .prc-row { grid-template-columns: 1fr; gap: 18px; }
}

/* ── PROOF ──────────────────────────────────────────────────── */
.proof {
  padding: 160px var(--gutter);
  border-top: 1px solid var(--rule);
}
.proof-inner { max-width: var(--container); margin: 0 auto; }
.proof .kicker { margin-bottom: 28px; }
.proof .display { margin-bottom: 80px; }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.proof-card {
  padding: 40px 32px;
  border-left: 1px solid var(--rule);
}
.proof-card:first-child { border-left: 0; }
.proof-num {
  display: block;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.proof-label {
  display: block;
  font-size: 14.5px;
  color: var(--fg-2);
  font-weight: 300;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-card:nth-child(3) { border-left: 0; }
}
@media (max-width: 540px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { border-left: 0; border-top: 1px solid var(--rule); }
  .proof-card:first-child { border-top: 0; }
}

.proof-photo {
  margin-top: 80px;
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--rule);
}
.proof-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.proof-photo-caption {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: space-between;
  color: var(--fg);
  font-size: 0.7rem;
  background: rgba(0,0,0,0.5);
  padding: 8px 12px;
  border: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}

/* ── ASK ────────────────────────────────────────────────────── */
.ask {
  padding: 200px var(--gutter) 220px;
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.ask::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 50% at 50% 50%, rgba(107,143,201,0.07) 0%, transparent 70%),
    radial-gradient(60% 40% at 70% 50%, rgba(123,111,184,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.ask-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
/* Ask section uses normal block flow on all pages (figure removed). */
.ask-figure {
  width: clamp(260px, 28vw, 400px);
  height: auto;
  display: block;
  justify-self: end;
}
.ask .kicker { margin-bottom: 28px; }
.ask .display.giant { margin-bottom: 44px; }
/* pull the cap "G" left by its side-bearing so "Get in touch." optically
   aligns with the lighter lines underneath */
.ask .display .line { text-indent: -0.022em; }
.ask .big-body { margin-bottom: 48px; }

.ask-cta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* ── Final section split (landscape only): two CTAs side-by-side ── */
.ask-split .ask-inner {
  display: block;
}
/* Portrait/mobile: stack both CTAs vertically with a rule between them. */
.ask-split .ask-left { margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid var(--rule); }
@media (min-width: 901px) {
  .ask-split { padding-top: 160px; padding-bottom: 180px; }
  .ask-split .ask-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
  }
  .ask-split .ask-left,
  .ask-split .ask-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
  }
  .ask-split .ask-left { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  /* equal, symmetric inner padding so headings/buttons align to the same
     left edge inside each column. The vertical rule lives between them. */
  .ask-split .ask-left  { padding-right: clamp(48px, 6vw, 96px); }
  .ask-split .ask-right { padding-left:  clamp(48px, 6vw, 96px); position: relative; }
  .ask-split .ask-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    bottom: 0.5em;
    width: 1px;
    background: var(--rule);
  }
  .ask-split .ask-text { max-width: none; }
  /* tighten the giant display so two columns of headlines still breathe */
  .ask-split .display.giant { font-size: clamp(40px, 5vw, 78px); margin-bottom: 28px; }
  .ask-split .big-body { margin-bottom: 0; }
  /* anchor the CTAs to the column bottom so both buttons sit on the
     same baseline regardless of heading/copy line count above. */
  .ask-split .ask-cta { margin-top: auto; padding-top: 48px; }
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  background: var(--fg);
  color: #000;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.btn-primary:hover { transform: translateY(-1px); background: #fff; }
.btn-primary .arrow { transition: transform .3s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-2);
  font-family: var(--display);
  letter-spacing: 0.02em;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.btn-ghost:hover { border-color: var(--fg); color: var(--fg); }

/* Deployment list */
.dep-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dep-list li {
  font-size: 17px;
  color: var(--fg-2);
  font-weight: 300;
  line-height: 1.5;
}
.dep-list .mono { margin-right: 12px; color: var(--fg); }

/* ── FOOTER ─────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--rule);
  padding: 80px var(--gutter) 40px;
}
.foot-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--rule);
}
.foot-logo svg { opacity: 0.6; }
.foot-tag {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 300;
  color: var(--fg-2);
  max-width: 22ch;
}
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-h {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.foot-col a, .foot-line {
  font-size: 14.5px;
  color: var(--fg-2);
  transition: color .2s var(--ease);
}
.foot-col a:hover { color: var(--fg); }

.foot-base {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ── REVEAL ANIMATIONS ──────────────────────────────────────── */
/* JS-on: hide until in view. JS-off: show everything. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js [data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal] {
  opacity: 1;
  transform: none;
}
[data-reveal][data-delay="1"].in { transition-delay: 80ms; }
[data-reveal][data-delay="2"].in { transition-delay: 160ms; }
[data-reveal][data-delay="3"].in { transition-delay: 240ms; }

/* Print & reduced-motion: show everything immediately */
@media print {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── PAGE-SPECIFIC ──────────────────────────────────────────── */

/* Sub-page hero (smaller) */
.sub-hero {
  position: relative;
  padding: 200px var(--gutter) 120px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.sub-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.sub-hero .kicker { margin-bottom: 24px; }
.sub-hero h1 {
  font-size: clamp(48px, 8.5vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0 0 32px;
  max-width: 14ch;
}
.sub-hero h1 em {
  font-style: normal;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub-hero p {
  font-size: clamp(18px, 1.5vw, 24px);
  color: var(--fg-2);
  font-weight: 300;
  max-width: 56ch;
  line-height: 1.55;
}

.sub-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sub-hero-bg img,
.sub-hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.sub-hero-bg::after { display: none; }

/* Fuels hero: keep the movie visible but add a tactical scrim for legibility. */
body[data-page="fuels"] .sub-hero-bg video { opacity: 0.85; }
body[data-page="fuels"] .sub-hero-bg::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,6,11,0.55) 0%, rgba(4,6,11,0.25) 40%, rgba(4,6,11,0.55) 100%),
    linear-gradient(90deg, rgba(4,6,11,0.6) 0%, transparent 45%);
}
/* Fuels & Fuel Farms heroes on mobile: fill the viewport so the media reaches the bottom. */
@media (max-width: 760px) {
  body[data-page="fuels"] .sub-hero,
  body[data-page="fuel-farms"] .sub-hero { min-height: 100svh; min-height: 100dvh; }
}
/* Sub-hero heading/text legible over the bright (un-scrimmed) media without darkening it. */
.sub-hero-inner { text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 16px rgba(0,0,0,0.5); }
/* Gradient em uses background-clip:text — a text-shadow muddies it dark; use a
   drop-shadow filter instead so it stays a clean, bright gradient. */
.sub-hero-inner h1 em { text-shadow: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
/* Brighten the kicker so it reads clearly over the bright media. */
.sub-hero-inner .kicker { color: var(--fg); }
/* Fuel Farms: bright-white sub-hero paragraph. */
body[data-page="fuel-farms"] .sub-hero p { color: #fff; }
/* Fuel Farms hero: slightly dark scrim over the bright aerial photo. */
body[data-page="fuel-farms"] .sub-hero-bg::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.42) 100%);
}

/* Fuel Farms closing CTA — methanol tanker render as a full-bleed background */
body[data-page="fuel-farms"] .ask { isolation: isolate; }
body[data-page="fuel-farms"] .ask-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
body[data-page="fuel-farms"] .ask::before {
  /* slightly dark scrim so the heading and body read over the photo */
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.58) 100%);
  z-index: 1;
}
body[data-page="fuel-farms"] .ask-inner {
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 18px rgba(0,0,0,0.45);
}
/* gradient-clipped heading can't carry a text-shadow without muddying — use drop-shadow */
body[data-page="fuel-farms"] .ask .grad { text-shadow: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }

/* Spec table */
.specs {
  padding: 120px var(--gutter);
  border-top: 1px solid var(--rule);
}
.specs-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.specs h2 { margin-bottom: 60px; }
.specs-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.specs-table > div {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.specs-table > div:nth-child(odd) {
  padding-right: 32px;
}
.specs-table > div:nth-child(even) {
  padding-left: 32px;
  border-left: 1px solid var(--rule);
}
.spec-label {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.spec-value {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.spec-value .unit {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--fg-2);
  margin-left: 6px;
}
@media (max-width: 760px) {
  .specs-table { grid-template-columns: 1fr; }
  .specs-table > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .specs-table > div:nth-child(odd) { padding-right: 0; }
}

/* Layout wrapper that holds .specs-table + .unit-render. On landscape
   (>=901px) they sit side-by-side; on portrait/mobile they stack. */
.specs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .specs-layout { grid-template-columns: 1fr; gap: 0; }
}

/* ── Unit render ─ SVG side-view with fabrication draw-in animation ── */
.unit-render {
  margin: 0;
  width: 100%;
  /* Page bg so the panel blends into the section, not a pure black block. */
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
@media (max-width: 900px) {
  /* Portrait/mobile: keep the original spacing below the table. */
  .unit-render { margin-top: 56px; }
}
.unit-render-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1774 / 887;
  padding: 48px;
}
.unit-render-tag {
  position: absolute;
  font-family: var(--tactical);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: rgba(232,236,242,0.45);
  text-transform: uppercase;
  z-index: 3;
}
.unit-render-tag-tl { top: 14px; left: 18px; }
.unit-render-tag-tr { top: 14px; right: 18px; }
.unit-render-tag-bl { bottom: 14px; left: 18px; }
.unit-render-tag-br {
  bottom: 14px; right: 18px;
  color: var(--blue-bright);
}
.unit-render-tag-br.done { color: rgba(232,236,242,0.45); }

/* Tactical grid behind the drawing */
.unit-render-grid {
  position: absolute;
  inset: 36px;
  background-image:
    linear-gradient(rgba(107,143,201,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,143,201,0.10) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
  z-index: 1;
}

.unit-render-svg {
  position: absolute;
  inset: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Default text color = the line/fill color */
  color: rgba(232,236,242,0.92);
}
.unit-render-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* === The drawing animation ===
   stroke-dasharray and stroke-dashoffset are set inline by JS using the path's
   The SVG is pre-split into 833 individual paths in airrefinery-side-split.svg.
   site.js sets up the per-path 'write-on' animation inline (strokeDasharray,
   strokeDashoffset, fillOpacity, strokeOpacity) so these defaults are just a
   no-JS fallback (renders the final filled state). */
.unit-render-svg svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.6px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A scanning beam that sweeps in the direction the linework is being drawn.
   This SVG's subpaths happen to be declared right-to-left, so the beam tracks
   right → left to match the fabrication progress. */
/* Sweep container fills the drawing bounds. The beam is a 2px element that
   slides from left edge to right edge, matching the spatial draw order
   (the SVG subpaths were sorted left-to-right by x coordinate). */
.unit-render-sweep {
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 36px;
  right: 36px;
  pointer-events: none;
  z-index: 4;
}
.unit-render-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(138,176,232,0.0) 12%,
    rgba(138,176,232,0.95) 50%,
    rgba(138,176,232,0.0) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 14px rgba(138,176,232,0.9),
    0 0 32px rgba(138,176,232,0.55),
    0 0 64px rgba(138,176,232,0.25);
  opacity: 0;
  will-change: left, opacity;
}
.unit-render.draw .unit-render-sweep::before {
  /* duration must match SWEEP_MS in site.js so the beam rides the pen tip. */
  animation: unit-sweep 1.28s linear forwards;
}
@keyframes unit-sweep {
  /* The sweep tracks the linework being drawn (left → right). */
  0%   { opacity: 0; left: 0%; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; left: 100%; }
}

@media (max-width: 760px) {
  .unit-render-frame { padding: 24px; }
  .unit-render-svg { inset: 18px; }
  .unit-render-grid { inset: 18px; background-size: 24px 24px; }
  .unit-render-tag { font-size: 0.54rem; letter-spacing: 0.22em; }
}

@media (prefers-reduced-motion: reduce) {
  /* JS handles the final settled state — we just hide the moving beam. */
  .unit-render-sweep { display: none; }
}

/* AFG section */
.afg {
  padding: 160px var(--gutter);
  border-top: 1px solid var(--rule);
}
.afg-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.afg h2 { margin-bottom: 60px; }
.afg-flow {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 60px 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 60px;
}
.afg-node {
  background: var(--bg-1);
  border: 1px solid var(--rule);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.afg-node h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
.afg-node ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.afg-node li {
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 300;
  padding-left: 14px;
  position: relative;
}
.afg-node li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 1px;
  background: var(--fg-3);
}
.afg-arrow {
  align-self: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  font-family: var(--display);
  font-size: 20px;
}
.afg-node.accent {
  border-color: rgba(107,143,201,0.45);
  background: linear-gradient(180deg, rgba(107,143,201,0.05), rgba(123,111,184,0.05));
}
.afg-note {
  margin-top: 48px;
  padding: 24px 28px;
  border: 1px solid var(--rule);
  background: var(--bg-1);
  font-size: 14.5px;
  color: var(--fg-2);
  font-weight: 300;
  display: flex; align-items: center; gap: 16px;
}
.afg-note .mono { color: var(--fg); margin-right: 8px; }

@media (max-width: 900px) {
  .afg-flow { grid-template-columns: 1fr; }
  .afg-arrow { transform: rotate(90deg); padding: 8px 0; }
}

/* Gallery */
.gallery {
  padding: 0;
  border-top: 1px solid var(--rule);
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
}
.gallery-grid > figure {
  margin: 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/11;
}
.gallery-grid > figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.gallery-grid > figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(0,0,0,0.55);
  padding: 8px 12px;
  border: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}
.gallery-grid > figure.tall { aspect-ratio: 4/5; }
.gallery-grid > figure.wide { aspect-ratio: 21/9; grid-column: span 2; }

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid > figure.wide { grid-column: span 1; }
}

/* Fuels page */
.fuel-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fuel-card {
  background: var(--bg);
  padding: 56px 40px;
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.fuel-card .fuel-num {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.fuel-card h3 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 16px 0 24px;
  line-height: 1;
}
.fuel-card h3 .fuel-h3-sub {
  font-family: var(--tactical);
  font-weight: 500;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  margin-left: 4px;
  vertical-align: 0.18em;
}
.fuel-card .fuel-status {
  display: inline-block;
  margin-bottom: 24px;
  padding: 6px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  align-self: flex-start;
}
.fuel-card .fuel-status.now {
  border-color: rgba(103,164,242,0.4);
  color: var(--fg);
}
.fuel-card p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-2);
  font-weight: 300;
  margin: 0;
  max-width: 48ch;
  flex: 1;
}
.fuel-card .fuel-foot {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.fuel-foot > div { display: flex; flex-direction: column; gap: 4px; }
.fuel-foot .fk {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.fuel-foot .fv {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .fuel-card-grid { grid-template-columns: 1fr; }
  .fuel-card { padding: 40px 28px; min-height: auto; }
}

/* Ramjet page */
.ramjet-quote {
  padding: 180px var(--gutter);
  text-align: left;
}
.ramjet-quote-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.ramjet-quote blockquote {
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  max-width: 24ch;
  color: var(--fg);
}
.ramjet-quote blockquote em {
  font-style: italic;
  color: var(--fg-2);
  font-weight: 300;
}
.ramjet-quote cite {
  display: block;
  margin-top: 32px;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-style: normal;
}

/* Map */
.map {
  padding: 140px var(--gutter);
  border-top: 1px solid var(--rule);
}
.map-inner { max-width: var(--container); margin: 0 auto; }
.sites {
  margin-top: 60px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.site {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  transition: background .25s var(--ease);
}
.site:hover { background: rgba(255,255,255,0.02); }
.site-num {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.site-loc {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.site-area, .site-units, .site-prod {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
@media (max-width: 900px) {
  .site { grid-template-columns: 60px 1fr; gap: 16px; }
  .site-area, .site-units, .site-prod { display: none; }
}

/* Pull-quote / featured strip */
.pullq {
  padding: 160px var(--gutter);
  border-top: 1px solid var(--rule);
}
.pullq-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.pullq p {
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}
.pullq p em {
  font-style: normal;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pullq cite {
  display: block;
  margin-top: 40px;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  font-style: normal;
}
.pullq-cta {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

/* ── Deployment full-bleed: manufacturing image + overlaid copy + CTA ── */
.deploy {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 78vh, 900px);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}
.deploy-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.24) contrast(0.96);
  z-index: 0;
}
/* Scrim: dark in the lower-left third (where the copy sits) fading to
   transparent on the upper-right. Anchors white text against the bright
   factory background without dimming the whole image. */
.deploy-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top right,
      rgba(4,6,11,0.46) 0%,
      rgba(4,6,11,0.32) 25%,
      rgba(4,6,11,0.10) 55%,
      rgba(4,6,11,0) 100%
    ),
    linear-gradient(to top, rgba(4,6,11,0.32) 0%, rgba(4,6,11,0) 55%);
  pointer-events: none;
}
.deploy-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  /* lowered: less bottom padding drops the copy over the darker foreground units */
  padding: 0 var(--gutter) clamp(28px, 4.5vh, 56px);
}
.deploy-eyebrow {
  font-family: var(--tactical);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.deploy-dot {
  width: 6px; height: 6px;
  background: var(--accent, #6B8FC9);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(107,143,201,0.7);
}
.deploy-h {
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 22px;
  max-width: 22ch;
  color: var(--fg);
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.deploy-h em {
  font-style: normal;
  font-weight: 300;
  /* brighter than the muted brand --grad so the phrase reads over the factory */
  background: linear-gradient(95deg, #A6C4F5 0%, #C5AEF4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* drop-shadow (not text-shadow — the text is transparent) for contrast */
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
}
.deploy-sub {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 32px;
  max-width: 52ch;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.deploy-cta {
  /* inherits .btn-primary; no overrides needed */
}
@media (max-width: 760px) {
  .deploy {
    min-height: clamp(440px, 68vh, 720px);
    align-items: flex-end;
  }
  .deploy-scrim {
    background: linear-gradient(
      to top,
      rgba(4,6,11,0.62) 0%,
      rgba(4,6,11,0.42) 35%,
      rgba(4,6,11,0.15) 70%,
      rgba(4,6,11,0) 100%
    );
  }
  .deploy-inner { padding-bottom: 26px; }
  .deploy-h { max-width: none; }
  .deploy-sub { max-width: none; }
}

/* Strait image full-bleed module */
.strait {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.strait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.strait::after { display: none; }
.strait-text {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
}
.strait-text h2 {
  font-size: clamp(40px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0;
  max-width: 16ch;
}
.strait-text h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--fg-2);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ── HERO REFINEMENT ────────────────────────────────────────── */

/* Subtle grain over video */
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

/* Re-tune hero composition: less top padding, denser */
.hero { min-height: 100svh; }
.hero-content { padding-top: 7vh; padding-bottom: 0; }
.hero-eyebrow {
  margin-bottom: 24px;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
}
.hero-title {
  font-size: clamp(56px, 10.2vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 500;
}
.hero-lede {
  margin-top: 32px;
  font-size: clamp(16px, 1.25vw, 19px);
  max-width: 48ch;
  color: var(--fg-2);
}
.hero-meta { margin-top: 28px; }

/* Process line — replaces ticker */
.processline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.92));
  backdrop-filter: blur(8px);
}
.pl-track {
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex; align-items: center;
  gap: 18px;
}
.pl-node {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.pl-node b {
  font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 4px;
}
.pl-icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  color: var(--fg);
}
.pl-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rule-2), var(--rule));
  position: relative;
  overflow: hidden;
}
.pl-line::after {
  content: '';
  position: absolute;
  inset: -0.5px 0;
  background: linear-gradient(to right, transparent, var(--blue), transparent);
  width: 20%;
  animation: pl-pulse 4s ease-in-out infinite;
}
@keyframes pl-pulse {
  0% { transform: translateX(-30%); }
  100% { transform: translateX(380%); }
}
.pl-line.dim { opacity: 0.55; }
.pl-node.end { color: var(--fg-3); }
.pl-label.dim, .pl-node.end b { color: var(--fg-3); background: none; -webkit-text-fill-color: var(--fg-3); }

@media (max-width: 760px) {
  .processline { display: none; }
}

/* ── HORMUZ FULL-BLEED ─────────────────────────────────────── */
.hormuz {
  position: relative;
  isolation: isolate; /* establish a stacking context so the z-index:-1 background image actually renders */
  min-height: 92vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hormuz-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hormuz-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hormuz-media::after { display: none; }
.hormuz-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14vh var(--gutter) 10vh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-content: space-between;
}
.hormuz-coord {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-left: 1px solid var(--rule-2);
  padding-left: 14px;
  align-self: end;
}
.hormuz-coord .dim { color: var(--fg-3); margin-top: 8px; }
.hormuz-title {
  margin: 0;
  /* Max capped at 100px (not 110): the container width caps at 1340px, so beyond
     ~1450px the title column stops growing while the font would keep scaling, which
     pushed "a handful of places." onto two lines and clipped the italic 'f' in 'of'. */
  font-size: clamp(40px, 7vw, 100px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 500;
  /* The italic 'f' in 'of' overhangs its character box to the right.
     Without this, at certain viewport widths the line breaks so 'of' sits flush against
     the column's right edge and the italic tail gets clipped by the parent's overflow: hidden.
     padding-right gives the wrapping algorithm room to break earlier and keeps the tail visible. */
  padding-right: 0.15em;
}
.hormuz-title span { display: block; }
/* Optically left-align the italic 2nd line: its glyphs carry a left side-bearing
   that makes the line look indented under the upright line above. */
.hormuz-title span:last-child { margin-left: -0.07em; }
/* The cap 'T' carries more left bearing than the 'f' on the line below; nudge the
   first line left so the two upright lines align. (text-indent affects line 1 only.) */
.hormuz-title span:first-child { text-indent: -0.02em; }
.hormuz-title em {
  font-style: normal;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hormuz-meta {
  text-align: right;
  align-self: end;
  /* match the .big-body prose treatment ("Put it down ...") — light Inter Tight,
     sentence case, no mono-style uppercase/letter-spacing */
  font-family: var(--display);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  font-weight: 300;
  color: var(--fg-2);
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 900px) {
  .hormuz-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 56px; }
  .hormuz-meta { text-align: left; }
}

/* ── THESIS RULE (replaces stat-row) ───────────────────────── */
.thesis-rule {
  margin: 110px auto 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.thesis-rule-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tr-cell {
  padding: 48px 32px 48px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  min-height: 240px;
}
.tr-cell:last-child { border-right: 0; }
.tr-cell:nth-child(n+2) { padding-left: 32px; }
.tr-cell.highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; right: 0;
  height: 2px;
  background: var(--grad);
}
.tr-fig {
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.tr-cell.highlight .tr-fig {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tr-fig i {
  font-style: normal;
  font-size: 0.38em;
  font-weight: 400;
  margin-left: 4px;
  color: var(--fg-2);
}
.tr-cell.highlight .tr-fig i {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tr-tag {
  font-size: 14.5px;
  color: var(--fg-2);
  font-weight: 300;
  line-height: 1.55;
  margin-top: auto;
}
@media (max-width: 900px) {
  .thesis-rule-inner { grid-template-columns: 1fr 1fr; }
  .tr-cell:nth-child(2) { border-right: 0; }
  .tr-cell:nth-child(3) { padding-left: 0; }
  .tr-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 540px) {
  .thesis-rule-inner { grid-template-columns: 1fr; }
  .tr-cell { border-right: 0; padding-left: 0 !important; padding-right: 0; border-bottom: 1px solid var(--rule); min-height: auto; }
  .tr-cell:last-child { border-bottom: 0; }
}

/* ── SCHEMATIC (responsive, draw-in, no overlay) ────────────── */
.schematic {
  margin-top: 60px;
  padding: 40px 32px 32px;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  position: relative;
}
.schematic::before {
  content: 'AIRREFINERY · V3 · SYSTEM DIAGRAM';
  position: absolute;
  top: -8px; left: 24px;
  background: var(--bg);
  padding: 0 12px;
  font-family: var(--tactical);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--fg-3);
}

/* Top / bottom rails (IN / OUT) */
.sch-rail {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
  font-family: var(--tactical);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.sch-rail-out { margin-top: 24px; margin-bottom: 0; justify-content: flex-end; }
.sch-rail-k {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--fg-3);
  font-weight: 500;
  text-transform: uppercase;
}
.sch-rail-v { color: var(--fg); }

/* Flow row of boxes */
.sch-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* Each box.
   Initial state: invisible border (drawn-in SVG overlay does the work),
   contents start hidden, then fade in once the rectangle is mostly drawn. */
.sch-box {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  border: 1px solid transparent;          /* hide the static border; overlay draws it */
  border-radius: 2px;
  background: rgba(255,255,255,0.005);
  isolation: isolate;
}

/* SVG outline overlay — inset by 1px so it sits where the border would be */
.sch-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.sch-outline rect {
  fill: none;
  stroke: var(--rule-2);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  /* path length normalised to 100 — set later via pathLength attr */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s cubic-bezier(.7,.05,.2,1);
}
/* Landscape: ~30% quicker box outline draw to match the snappier feel of
   the rest of the page. Vertical/mobile still uses the full 1.1s. */
@media (min-width: 761px) and (orientation: landscape) {
  .sch-outline rect { transition-duration: 0.77s; }
}
.sch-box-accent .sch-outline rect { stroke: rgba(107,143,201,0.55); }
.sch-box.in .sch-outline rect { stroke-dashoffset: 0; }

/* Contents inside the box — fade in once the outline is mostly drawn */
.sch-box-inner {
  position: relative;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease 0.5s;
}
/* Landscape inner content fades in sooner, matching the quicker outline. */
@media (min-width: 761px) and (orientation: landscape) {
  .sch-box-inner { transition: opacity 0.45s ease 0.35s; }
}
.sch-box.in .sch-box-inner { opacity: 1; }
.sch-box-accent {
  border-color: rgba(107,143,201,0.40);
  background: rgba(107,143,201,0.04);
}
.sch-box-inner.sch-box-inner-fmt {
  /* placeholder — see merged rule above */
}
.sch-box .sch-box-inner {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sch-num {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--fg-3);
  margin-bottom: 18px;
}

/* Title row — pairs the headline with the molecule glyph beside it */
.sch-titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sch-titlerow .sch-title { flex: 0 1 auto; }

/* Stylised molecule diagram — quiet accent next to the title. */
.sch-mol {
  flex: 0 0 auto;
  width: 128px;
  height: 80px;
  color: var(--fg);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.sch-box.in .sch-mol {
  opacity: 0.9;
  transform: translateX(0);
}
.sch-box-accent .sch-mol { color: var(--blue-bright); }
.sch-box-accent.in .sch-mol { opacity: 0.9; }
.sch-mol svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (max-width: 760px) {
  .sch-mol { width: 96px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .sch-mol { opacity: 0.7; transform: none; transition: none; }
  .sch-box-accent .sch-mol { opacity: 0.85; }
}
.sch-box-accent .sch-num { color: var(--blue-bright); }
.sch-title {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--fg);
}
.sch-jp {
  display: block;
  margin-top: 10px;
  font-family: var(--jp);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.sch-box-accent .sch-jp { color: rgba(138,176,240,0.7); }
.sch-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sch-list li {
  font-size: 0.95rem;
  color: var(--fg-2);
  font-weight: 300;
}
.sch-list li::before {
  content: "→ ";
  color: var(--fg-3);
  margin-right: 2px;
}

/* Arrow connectors */
.sch-arrow {
  flex: 0 0 56px;
  position: relative;
  align-self: center;
  height: 1px;
  background: linear-gradient(90deg, var(--rule), var(--rule-3), var(--rule));
  opacity: 0;
  transition: opacity 0.7s ease;
}
.sch-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--blue);
  border-right: 1px solid var(--blue);
  transform: translateY(-50%) rotate(45deg);
}
.sch-arrow.in { opacity: 1; }

/* Mobile — vertical stack */
@media (max-width: 760px) {
  .schematic { padding: 36px 18px 22px; }
  .sch-flow {
    flex-direction: column;
    align-items: stretch;
  }
  .sch-box { flex: 0 0 auto; }
  .sch-arrow {
    flex: 0 0 32px;
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, var(--rule), var(--rule-3), var(--rule));
    align-self: center;
  }
  .sch-arrow::after {
    right: 50%;
    top: auto;
    bottom: -1px;
    transform: translate(50%, 0) rotate(135deg);
  }
  .sch-rail-out { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sch-arrow { opacity: 1; transform: none; transition: none; }
  .sch-outline rect { stroke-dashoffset: 0; transition: none; }
  .sch-box .sch-box-inner { opacity: 1; transition: none; }
  .sch-mol { opacity: 0.9; transition: none; }
  .sch-box-accent .sch-mol { opacity: 0.9; }
}

/* ── MOBILE TIGHTENING (post-launch fixes) ──────────────────── */
@media (max-width: 760px) {
  .thesis { padding: 110px 0 80px; }
  .reveal { padding: 80px var(--gutter); gap: 36px; }
  .hero { min-height: 92vh; }
  .hero-content { padding-top: 100px; padding-bottom: 60px; }
  .strait, .hormuz, .desert-strip { padding: 90px var(--gutter); }
  .stat-row { margin-top: 60px; }
  .display { font-size: clamp(38px, 9vw, 64px) !important; }
  .footer { padding: 80px var(--gutter) 40px; }
  .nav.open + * { /* push content if needed */ }
}

/* ── MOBILE-FIRST REFINEMENT (May 16) ──────────────────────── */
@media (max-width: 760px) {
  /* Type system: more breath, less drama */
  .hero-title {
    font-size: clamp(44px, 12.5vw, 72px);
    letter-spacing: -0.035em;
    line-height: 0.98;
    max-width: 100%;
  }
  .hero-lede {
    font-size: 15.5px;
    line-height: 1.6;
    margin-top: 22px;
    color: var(--fg-2);
    max-width: 38ch;
  }
  .hero-meta { margin-top: 28px; }
  .hero-eyebrow { font-size: 0.62rem; }

  /* Gradient italics: cooler/smaller on mobile, more like a normal accent */
  .hero-title em,
  .hormuz-title em,
  .display em,
  .display .grad,
  .grad {
    font-weight: 300;
    letter-spacing: -0.025em;
  }
  /* AirRefinery heading uses the same weight as the rest of the display so it
     reads as a continuation, not as a separate stronger line. */
  .reveal-bleed-inner .grad { font-weight: 500; }

  /* Display heading sizes — calmer mobile scale */
  .display {
    font-size: clamp(34px, 9.5vw, 56px) !important;
    line-height: 1.02;
    letter-spacing: -0.03em;
  }
  .display.giant {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 1.0;
  }
  .display.tight { line-height: 0.98; }

  /* Hormuz/fuel-security section: top-align on portrait so the text sits in the
     clear upper sky/water band, above the tanker that fills the lower half. */
  .hormuz {
    align-items: flex-start !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding: 0 !important; /* override the shared strait/hormuz 90px so the grid's top padding is the only offset */
  }
  .hormuz-title {
    font-size: clamp(34px, 9.5vw, 56px);
    line-height: 1.02;
  }
  .hormuz-grid {
    gap: 28px !important;
    padding: 92px var(--gutter) 80px !important;
    align-items: start !important;
  }
  .hormuz-coord { font-size: 0.65rem; gap: 6px; }
  .hormuz-meta { font-size: 0.68rem; line-height: 1.7; text-align: left !important; max-width: 38ch; }

  /* Reveal two-col sections: image first, text below — cleaner mobile flow */
  .reveal {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 80px var(--gutter) !important;
  }
  .reveal.flip .reveal-text,
  .reveal .reveal-text { order: 2; }
  .reveal.flip .reveal-media,
  .reveal .reveal-media { order: 1; }
  .reveal-media picture { aspect-ratio: 4/3; }
  .reveal-media img { object-fit: cover; }
  .reveal-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 14px;
    font-size: 0.66rem;
  }

  /* Thesis: simpler hierarchy */
  .thesis .grid { grid-template-columns: 1fr; gap: 24px; }
  .thesis .col-label { padding-bottom: 0; }

  /* Pricing rows: condense, no bars overflowing */
  .pricing-rows { gap: 28px; margin-top: 36px; }
  .prc-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 0 !important;
  }
  .prc-fuel, .prc-fugu { flex-direction: row; align-items: baseline; gap: 12px; }
  .prc-figure { font-size: clamp(38px, 9vw, 52px) !important; }
  .prc-bar { margin-top: 4px; }
  .prc-compare { font-size: 0.7rem; }

  /* Proof cards: 2x2 grid is fine, just tighter */
  .proof-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .proof-card { padding: 22px 18px !important; }
  .proof-num { font-size: clamp(26px, 7vw, 36px) !important; }
  .proof-label { font-size: 13px; line-height: 1.5; }
  .proof-photo { margin-top: 40px; }
  .proof-photo-caption {
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px !important;
    font-size: 0.62rem;
  }

  /* Stacked problems: tidy list */
  .problems { gap: 0; margin-top: 36px; }
  .problems li { padding: 24px 0; gap: 18px; }
  .prob-num { font-size: 2rem; min-width: 48px; }
  .problems h3 { font-size: 1.05rem; }
  .problems p { font-size: 0.95rem; line-height: 1.55; }
  .cta-line { font-size: 0.95rem; line-height: 1.6; margin-top: 32px; }

  /* Section padding — softer rhythm */
  .stacked, .pricing, .proof, .ask { padding: 80px 0 !important; }
  .ask-inner { padding: 0 var(--gutter); }
  /* On mobile the home grid stacks, so the cowboy drops below the CTA — show it small + centred there */
  body[data-page="home"] .ask-inner { grid-template-columns: 1fr; }
  .ask-figure { display: block; width: clamp(150px, 46vw, 200px); justify-self: center; }
  .ask-cta { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 36px; }
  .btn-primary, .btn-ghost { justify-content: center; padding: 16px 20px !important; text-align: center; }

  /* Footer mobile: stack cleanly */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px !important; padding: 60px var(--gutter) 32px !important; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-base { flex-direction: column; gap: 8px; padding: 24px var(--gutter); align-items: flex-start; }

  /* Process line: hide noisy decorative bar on mobile — it crowds the hero */
  .processline { display: none; }
  /* Hero video: scale up + center-bottom focal point on mobile so plume fills lower half */
  .hero-media video, .hero-media img {
    object-position: 50% 70% !important;
  }
  /* Hero owns the full screen on mobile — its own moment, content in upper third, video plume fills below */
  .hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 18vh var(--gutter) 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .hero-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }
  /* Breathing room between hero title, lede, and CTA */
  .hero-title { margin: 0 0 28px !important; }
  .hero-lede {
    margin: 0 0 36px !important;
    line-height: 1.5 !important;
    max-width: 90% !important;
  }
  .hero-meta { margin-top: 0 !important; }

  /* Schematic on AirRefinery page already handled — just tighten label */
  .schematic::before { font-size: 0.6rem; }

  /* Specs table tidy */
  .specs-table { grid-template-columns: 1fr !important; }
  .specs-table > div { padding: 18px 0 !important; }

  /* Fuel cards: full-width single column */
  .fuel-card-grid { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 var(--gutter) 60px !important; }
  .fuel-card { padding: 28px 22px !important; }
}

@media (max-width: 420px) {
  .hero-title { font-size: 42px; }
  .display { font-size: 32px !important; }
  .display.giant { font-size: 38px !important; }
  .hormuz-title { font-size: 32px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px !important; }
  .foot-brand { grid-column: auto; }
  .proof-grid { grid-template-columns: 1fr !important; }
}

/* ── FUELS STRIP (homepage section 5) ──────────────────────────── */
.fuels-strip {
  padding: 160px var(--gutter);
  background: linear-gradient(180deg, #000 0%, #08090b 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fuels-strip-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.fuels-strip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 64px 0 56px;
  border-top: 1px solid var(--rule);
}
.fs-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 0 0;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding-right: 32px;
  padding-bottom: 40px;
  text-decoration: none;
  color: var(--fg);
  transition: opacity .25s ease;
}
.fs-item:last-child { border-right: none; padding-right: 0; }
.fs-item:hover { opacity: 0.7; }
.fs-name {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}
.fs-tag {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
@media (max-width: 760px) {
  .fuels-strip { padding: 100px var(--gutter) !important; }
  .fuels-strip-row {
    grid-template-columns: 1fr;
    margin: 40px 0;
  }
  .fs-item {
    border-right: none;
    padding-right: 0;
    padding: 32px 0;
  }
  .fs-name { font-size: clamp(34px, 9vw, 52px); }
}

/* ── PRODUCT HERO (AirRefinery page) ─────────────────────────── */
/* Nav contrast over light hero: dark text/icons while at top */
[data-page="airrefinery"] .nav:not(.scrolled) .nav-mark { color: #0a0a0a; }
[data-page="airrefinery"] .nav:not(.scrolled) .nav-logo { opacity: 1; }
[data-page="airrefinery"] .nav:not(.scrolled) .nav-links > a { color: rgba(10,10,10,0.7); }
[data-page="airrefinery"] .nav:not(.scrolled) .nav-links > a:hover { color: #0a0a0a; }
[data-page="airrefinery"] .nav:not(.scrolled) .nav-links .nav-cta {
  color: #0a0a0a;
  border-color: rgba(10,10,10,0.25);
}
[data-page="airrefinery"] .nav:not(.scrolled) .nav-links .nav-cta:hover {
  border-color: rgba(10,10,10,0.5);
  background: rgba(10,10,10,0.04);
}
[data-page="airrefinery"] .nav:not(.scrolled) .nav-toggle {
  color: #0a0a0a;
  border-color: rgba(10,10,10,0.4);
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
[data-page="airrefinery"] .nav:not(.scrolled) .nav-toggle svg {
  stroke: #0a0a0a;
}
[data-page="airrefinery"] .nav:not(.scrolled) .nav-toggle:hover {
  border-color: rgba(10,10,10,0.6);
  background: rgba(255,255,255,0.9);
}
/* When the mobile menu is open, its dropdown panel is dark — so its links/CTA
   must stay light. Without this, the not-scrolled dark-text nav rules above
   render the menu items black-on-black (invisible) on the AirRefinery page. */
@media (max-width: 760px) {
  [data-page="airrefinery"] .nav.open .nav-links > a { color: var(--fg); }
  [data-page="airrefinery"] .nav.open .nav-links > a:hover { color: #fff; }
  [data-page="airrefinery"] .nav.open .nav-links .nav-cta {
    color: var(--fg);
    border-color: var(--rule-2);
  }
  [data-page="airrefinery"] .nav.open .nav-links .nav-cta:hover {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.05);
  }
}

.product-hero {
  position: relative;
  background: #ffffff;
  color: #0a0a0a;
  padding: 140px var(--gutter) 0;
  border-bottom: 1px solid var(--rule);
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 60px;
  overflow: hidden;
}
.product-hero-text { padding: 40px 0 80px; max-width: 560px; justify-self: end; }
.product-hero-text .kicker {
  color: rgba(0,0,0,0.55);
  margin-bottom: 24px;
}
.product-hero-text h1 {
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0 0 32px;
  max-width: 14ch;
  color: #0a0a0a;
}
.product-hero-text h1 em {
  font-style: normal;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.product-hero-text p {
  font-size: clamp(18px, 1.5vw, 22px);
  color: rgba(0,0,0,0.7);
  font-weight: 300;
  max-width: 48ch;
  line-height: 1.55;
  margin: 0;
}
.product-hero-img {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70svh;
}
.product-hero-img img {
  max-width: 100%;
  max-height: 80svh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── STATUS STRIP (AirRefinery page) ─────────────────────────── */
.status-strip {
  padding: 140px var(--gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.status-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.status-inner .kicker { margin-bottom: 24px; }
.status-inner h2 { margin: 0 0 36px; max-width: 18ch; }
.status-inner p { max-width: 56ch; }
.status-inner .btn-link { margin-top: 40px; }

/* Status split: copy left, real photo right */
.status-split {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 80px;
  align-items: center;
}
.status-copy .kicker { margin-bottom: 24px; }
.status-copy h2 { margin: 0 0 36px; max-width: 18ch; }
.status-copy p { max-width: 56ch; }
.status-copy .btn-link { margin-top: 40px; }
.status-photo {
  margin: 0;
  position: relative;
}
.status-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
  border-radius: 4px;
  /* Subtle frame so the real photo reads as documented, not promotional */
  filter: contrast(1.02) saturate(0.95);
}
.status-photo figcaption {
  margin-top: 16px;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}
@media (max-width: 880px) {
  .status-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .status-photo { order: -1; }
}

/* Mobile: stack product hero, image-first, hero image is the focal point */
@media (max-width: 760px) {
  .product-hero {
    grid-template-columns: 1fr !important;
    padding: 64px 0 0 !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  /* The AirRefinery image on top, sized to its content so the text sits right under it */
  .product-hero-img {
    order: 1;
    flex: 0 0 auto;
    min-height: 0 !important;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-hero-img img {
    max-height: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    object-position: center;
  }
  .product-hero-text {
    order: 2;
    padding: 8px var(--gutter) 56px !important;
    justify-self: start !important;
    max-width: 100% !important;
  }
  .product-hero-text h1 {
    font-size: clamp(40px, 11vw, 64px) !important;
  }
  .status-strip { padding: 80px var(--gutter) !important; }
}

/* ─── CONTACT PAGE ──────────────────────────────────────────────── */
.contact {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 140px 0 120px;
  background-color: #000;
}
/* Team photo as a real <img> so it carries alt text / counts for image SEO.
   <picture> swaps the landscape shot for the portrait composite on mobile. */
.contact-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.45));
  pointer-events: none;
}
@media (orientation: portrait), (max-width: 720px) {
  /* Portrait composite (served via <picture>) sits full-width at the top and fades
     into black; kicker/title/lede overlay the fade, then the form scrolls below. */
  .contact-photo { height: 100svh; bottom: auto; }
  .contact-photo img { height: auto; }
  .contact::before {
    inset: 0 0 auto 0;
    height: 100svh;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.04) 26%,
      rgba(0,0,0,0.34) 45%,
      rgba(0,0,0,0.68) 59%,
      rgba(0,0,0,0.92) 72%,
      #000 82%);
  }
}
.contact-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contact-inner .kicker { display: inline-flex; align-items: baseline; gap: 14px; }
.contact-inner h1 {
  margin-top: 28px;
  margin-bottom: 24px;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1.02;
}
.contact-inner .big-body {
  max-width: 620px;
  color: var(--fg-dim);
  margin-bottom: 64px;
}
/* Page-title text fully white over the dark sub-hero / contact backgrounds */
.sub-hero-inner .kicker,
.sub-hero-inner h1,
.contact-inner .kicker,
.contact-inner h1 { color: #fff; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.field { display: flex; flex-direction: column; gap: 10px; }
.field-label {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.field-opt {
  text-transform: none;
  letter-spacing: 0.04em;
  font-style: italic;
  opacity: 0.6;
  font-size: 0.85em;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: var(--fg);
  font-family: inherit;
  font-size: 1.1rem;
  padding: 12px 0;
  outline: none;
  transition: border-color 200ms ease;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: #67A4F2;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.contact-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 14px;
  padding-right: 28px;
}
.contact-form select option {
  background: #0a0a0a;
  color: #fff;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.form-actions .btn-primary { min-width: 180px; }
.form-actions .btn-primary[disabled] { opacity: 0.55; cursor: progress; }
.form-note {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}
.form-note a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.3);
}
.form-status {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 14px 18px;
  border-radius: 6px;
  display: none;
}
.form-status.ok {
  display: block;
  background: rgba(103,164,242,0.1);
  border: 1px solid rgba(103,164,242,0.35);
  color: #B6D4FA;
}
.form-status.err {
  display: block;
  background: rgba(184,80,80,0.10);
  border: 1px solid rgba(184,80,80,0.40);
  color: #E4B0B0;
}
.form-status.err a { color: inherit; text-decoration: underline; }

@media (max-width: 700px) {
  .contact { padding: 110px 0 80px; }
  .form-row { grid-template-columns: 1fr; gap: 24px; }
  .contact-form { gap: 24px; }
  .form-actions { gap: 16px; }
  .form-actions .btn-primary { width: 100%; min-width: 0; justify-content: center; }
}

@media (orientation: portrait), (max-width: 720px) {
  /* Real portrait photo sits full-width at the top (~70vh tall, no crop) and fades
     into black; the title + lede sit over that fade, then the form scrolls below.
     Placed after the max-width:700px block so this wins the cascade. */
  .contact { min-height: 100svh; padding: 0 0 80px; }
  .contact-inner .kicker { margin-top: calc(100svh - 502px); }
  .contact-inner h1 { margin-top: 10px; margin-bottom: 18px; }
  .contact-inner .big-body { margin-bottom: 116px; }
}

/* ─── SUBTLE FUGU — emerges from the deep, foot of the home page ─────── */
.fugu-deep {
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px var(--gutter) 52px;
  overflow: hidden;
}
.fugu-deep img {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  opacity: 0.75;
  pointer-events: none;
  /* fade the pure-black image edges into the navy-black page so the fugu
     emerges from the dark with no rectangle seam */
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 47%, #000 36%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 85% at 50% 47%, #000 36%, transparent 72%);
}
@media (max-width: 720px) {
  .fugu-deep { padding: 12px 0 32px; }
  .fugu-deep img { opacity: 0.66; max-width: 52%; }
}