/* ================================================================
   FUGU — site.css
   Tasteful · industrial · dark
   ================================================================ */

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

:root {
  --bg: #000;
  --bg-1: #0a0a0a;
  --bg-2: #111111;
  --fg: #f5f5f4;
  --fg-2: rgba(245,245,244,0.62);
  --fg-3: rgba(245,245,244,0.38);
  --rule: rgba(255,255,255,0.08);
  --rule-2: rgba(255,255,255,0.14);
  --blue: #67A4F2;
  --pink: #D10063;
  --grad: linear-gradient(95deg, #67A4F2 0%, #D10063 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;
  --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; }

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

.mono { font-family: var(--mono); 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: 0.65;
  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(--mono);
  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 {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,0.85) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.95) 100%);
}

.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(--mono);
  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, 11.5vw, 196px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 600;
  margin: 0;
  max-width: 14ch;
}
.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;
}

.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(--mono);
  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(--mono);
  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(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-block;
}

.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; }
}

/* ── 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(--mono);
  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(--mono); 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(--mono);
  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(--mono);
  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(103,164,242,0.06) 0%, transparent 70%),
    radial-gradient(60% 40% at 70% 50%, rgba(209,0,99,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.ask-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.ask .kicker { margin-bottom: 28px; }
.ask .display.giant { margin-bottom: 44px; }
.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(--mono);
  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(--mono);
  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 {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.sub-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.4) 40%, var(--bg) 100%);
}

/* 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(--mono);
  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(--mono);
  font-size: 20px;
}
.afg-node.accent {
  border-color: rgba(103,164,242,0.35);
  background: linear-gradient(180deg, rgba(103,164,242,0.04), rgba(209,0,99,0.04));
}
.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(--mono);
  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(--mono);
  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(--mono);
  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(--mono);
  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(--mono);
  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(--mono);
  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(--mono);
  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(--mono);
  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;
  opacity: 0.55;
}
.strait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.85) 100%);
}
.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(--mono);
  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;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  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;
  opacity: 0.5;
  filter: grayscale(35%) contrast(1.05);
}
.hormuz-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.95) 100%),
    radial-gradient(80% 60% at 50% 100%, rgba(209,0,99,0.10) 0%, transparent 60%);
}
.hormuz-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: end;
}
.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;
  font-size: clamp(40px, 7vw, 110px);
  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; }
.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;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}
@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(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.schematic-svg {
  width: 100%;
  height: auto;
  display: block;
}

@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;
  }
  .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;
  }

  /* 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: vertically centre content on portrait, not bottom-aligned */
  .hormuz {
    align-items: center !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }
  .hormuz-title {
    font-size: clamp(34px, 9.5vw, 56px);
    line-height: 1.02;
  }
  .hormuz-grid {
    gap: 28px !important;
    padding: 80px var(--gutter) !important;
    align-items: center !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); }
  .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);
}

.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(--mono);
  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: 80px 0 40px !important;
    min-height: auto !important;
    gap: 0 !important;
    align-items: start !important;
  }
  .product-hero-text {
    order: 2;
    padding: 16px var(--gutter) 40px !important;
    justify-self: start !important;
    max-width: 100% !important;
  }
  .product-hero-text h1 {
    font-size: clamp(44px, 12vw, 72px) !important;
  }
  .product-hero-img {
    order: 1;
    min-height: 0 !important;
    width: 100%;
    padding: 0;
  }
  .product-hero-img img {
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .status-strip { padding: 80px var(--gutter) !important; }
}

/* ─── CONTACT PAGE ──────────────────────────────────────────────── */
.contact {
  min-height: 100vh;
  padding: 140px 0 120px;
  background: #000;
}
.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(--mono);
  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(--mono);
  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(--mono);
  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(209,0,99,0.08);
  border: 1px solid rgba(209,0,99,0.35);
  color: #FFB3D1;
}
.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; }
}