/* ================================================================
   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.40);
  --fg-4: rgba(232,236,242,0.22);
  --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;
}
.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. */
.op-words .op-w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(6px);
  transition:
    opacity 0.55s cubic-bezier(.2,.7,.1,1),
    transform 0.6s cubic-bezier(.2,.7,.1,1),
    filter 0.5s cubic-bezier(.2,.7,.1,1);
  /* per-word delay set inline via --d */
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}
.op-words.in .op-w {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(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;
}
@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; }
}

/* 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: italic;
  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);
  height: 1.05em;
  vertical-align: text-bottom;
  transform: translateY(0.12em);
  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: hidden;
}
.hero-title em {
  font-style: italic;
  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);
}

.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: italic;
  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; }
.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.
   Italic to match the rest of the site's coloured emphasis text. */
.reveal-bleed-inner .grad { font-style: italic; font-weight: 700; text-shadow: none; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55)); }
@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; }
  /* Over the bright sky the light-blue gradient start ("makes") washes out — use a
     darker gradient so it stays legible. (Mobile only; on desktop the heading sits
     over the darker container area and uses the standard gradient.) background-image
     (not the background shorthand) so the text clip from .grad is preserved. */
  .reveal-bleed-inner .grad {
    background-image: linear-gradient(95deg, #4A6FAF, #6B5C9F);
  }
}

/* ── 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;
}
/* Two-column layout only on the home page, where the cowboy figure sits beside the text.
   Other pages keep the .ask-inner as normal block flow. */
body[data-page="home"] .ask-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.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; }
.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: italic;
  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; }
}

/* 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 .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: italic;
  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;
}

/* 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: italic;
  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 ──────────────────────────────────────────────── */
.schematic {
  margin-top: 60px;
  padding: 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(--display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.schematic-svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Blueprint overlay sits on top of the system diagram until clicked, then fades out (5s) */
.schematic-blueprint {
  position: absolute;
  /* start just below the "AIRREFINERY · V3 · SYSTEM DIAGRAM" label so it stays
     fully visible just above the top of the blueprint */
  top: 14px;
  left: 0;
  width: 100%;
  height: calc(100% - 14px);
  object-fit: cover;
  z-index: 2;
  opacity: 1;
  cursor: pointer;
  transition: opacity 5s linear;
}
.schematic-blueprint.is-fading { opacity: 0; pointer-events: none; }
/* Affordance that the blueprint is clickable — clears the moment it's revealed */
.schematic-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 9px 16px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  transition: opacity 0.4s ease;
}
.schematic-hint::before { content: 'Tap to reveal the system diagram'; }
@media (hover: hover) and (pointer: fine) {
  .schematic-hint::before { content: 'Click to reveal the system diagram'; }
}
.schematic-blueprint.is-fading ~ .schematic-hint { opacity: 0; }

@media (max-width: 760px) {
  .schematic {
    padding: 32px 16px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* On mobile, container has overflow-x:auto which implicitly clips overflow-y.
     Move the floating label inside the padding so it isn't cut off. */
  .schematic::before {
    top: 8px;
    left: 16px;
    background: transparent;
    padding: 0;
  }
  /* label sits inside at top:8px here, so start the blueprint lower to clear it */
  .schematic-blueprint { top: 30px; height: calc(100% - 30px); }
  .schematic-svg { min-width: 800px; }
}

/* ── 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;
  }
  /* …but the AirRefinery heading stays bold (after the rule above so it wins) */
  .reveal-bleed-inner .grad { font-weight: 700; }

  /* 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: italic;
  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 {
  min-height: 100vh;
  padding: 140px 0 120px;
  background-color: #000;
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.42)),
    url('/assets/photos/team_anime.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (orientation: portrait), (max-width: 720px) {
  .contact {
    background-image: url('/assets/photos/team_anime_portrait.jpg');
    background-size: 100% auto;
    background-position: top center;
  }
}
.contact-inner {
  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;
}

.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) {
  /* Photo (~150vw tall) anchors to the top; push the kicker + heading down onto the
     road below the team's feet so the paragraph + form sit on the black area below.
     Placed after the max-width:700px block so this padding wins the cascade. */
  .contact { padding-top: 128vw; }
  /* Tighten the kicker→heading gap so "Contact" sits lower on the road. */
  .contact-inner h1 { margin-top: 6px; }
}