/* Oil AI landing — light "Precision Instrument". Uses design.css tokens. */

body { overflow-x: clip; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line);
  transition: background var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 8px 28px rgba(20,25,33,.06); }
.nav .row { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand .mark { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 7px;
  color: var(--accent); font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--accent-soft); }
.nav .links { display: flex; gap: 4px; margin-left: 8px; }
.nav .links a { padding: 8px 12px; border-radius: var(--r-xs); font-size: 14px; color: var(--text-2); font-weight: 500; transition: color var(--t) var(--ease), background var(--t) var(--ease); }
.nav .links a:hover { color: var(--text); background: var(--surface-2); }
.nav .links a[aria-current="location"] { color: var(--accent); background: var(--accent-soft); }
.nav .cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; will-change: transform; }
@media (max-width: 980px) { .nav .links { display: none; } }
@media (max-width: 560px) {
  .nav .row { gap: 10px; }
  .nav .cta .btn-secondary { display: none; }
  .nav .cta .btn-primary { padding-inline: 13px; }
}

/* unobtrusive section route — labels appear on intent, not by default */
.page-rail { position: fixed; z-index: 45; right: clamp(12px, 2vw, 28px); top: 50%; display: grid; gap: 12px; transform: translateY(-50%); }
.page-rail a { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: var(--text-3); }
.page-rail a::after { content: ""; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: inherit; background: var(--bg); transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out); }
.page-rail a span { position: absolute; right: 32px; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-xs); background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: var(--shadow-1); font-family: var(--font-sans); font-weight: 500; font-size: 11px; white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity var(--motion-fast) var(--ease), transform var(--motion-base) var(--ease-out); }
.page-rail a:hover span, .page-rail a:focus-visible span { opacity: 1; transform: none; }
.page-rail a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.page-rail a[aria-current="location"] { color: var(--accent); }
.page-rail a[aria-current="location"]::after { width: 7px; height: 16px; border-color: var(--accent); background: var(--accent); }
@media (max-width: 1240px) { .page-rail { display: none; } }

/* hero */
.hero { position: relative; isolation: isolate; min-height: min(920px, calc(100svh - 62px)); padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 64px); overflow: hidden; display: grid; align-content: center; }
.hero::after { content: ""; position: absolute; z-index: -1; width: min(58vw, 760px); aspect-ratio: 1; right: -16%; top: 2%; border-radius: 50%; background: radial-gradient(circle, rgba(169,116,44,.11), rgba(169,116,44,0) 67%); pointer-events: none; }
.hero .grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 920px) { .hero .grid { grid-template-columns: 1fr; } }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin: 16px 0 0; }
.hero .lead { margin: 20px 0 0; max-width: 38ch; }
.hero-protocol { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; color: var(--text-3); font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.hero-protocol span { display: inline-flex; align-items: center; gap: 7px; }
.hero-protocol i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.metrics { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(8px); }
.metrics .m { position: relative; flex: 1 1 0; min-width: 120px; padding: 14px 16px; border-right: 1px solid var(--line); overflow: hidden; }
.metrics .m::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: .65; }
.metrics .m.is-counted::after { animation: metric-pulse 850ms var(--ease-out) both; }
.metrics .m:last-child { border-right: 0; }
.metrics .m .v { font-family: var(--font-mono); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.metrics .m .k { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.hero figure { margin: 0; }
.hero-visual { position: relative; z-index: 1; perspective: 1400px; }
.hero-depth { --tilt-x: 0deg; --tilt-y: 0deg; --hero-shift: 0px; position: relative; transform: perspective(1400px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translate3d(0,var(--hero-shift),0); transform-style: preserve-3d; transition: transform 180ms linear; will-change: transform; }
.frame { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; position: relative; }
.frame .bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-bottom: 1px solid var(--line); }
.frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.frame .bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.frame img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.hero figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); letter-spacing: .02em; }
.scroll-cue { width: max-content; margin: clamp(24px, 5vh, 52px) auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.scroll-cue i { width: 1px; height: 36px; background: var(--line-2); }

@keyframes metric-pulse { 0% { transform: scaleX(0); opacity: 0; } 45% { transform: scaleX(1); opacity: .8; } 100% { transform: scaleX(1); opacity: 0; } }

/* scroll-led product narrative */
.journey { --journey-bg: #10141b; --journey-surface: #171c24; --journey-line: rgba(255,255,255,.12); --journey-text: #f0f2f4; --journey-muted: #98a2b0; position: relative; padding: clamp(68px, 9vw, 112px) 0; color: var(--journey-text); background: var(--journey-bg); border-block: 1px solid rgba(20,25,33,.2); overflow: clip; }
.journey .wrap { position: relative; }
.journey-intro { width: min(650px, 100%); margin-bottom: clamp(28px, 5vw, 62px); }
.journey-intro h2 { margin: 13px 0 0; }
.journey-intro .lead { margin: 14px 0 0; color: var(--journey-muted); }
.journey-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(310px, .72fr); gap: clamp(42px, 7vw, 92px); align-items: start; }
.journey-stage { position: sticky; top: 88px; height: min(690px, calc(100svh - 116px)); min-height: 510px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; border: 1px solid var(--journey-line); border-radius: 15px; background: var(--journey-surface); box-shadow: 0 28px 80px rgba(0,0,0,.32); overflow: hidden; transform: translateZ(0); }
.journey-stage-head, .journey-stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 10px 14px; color: var(--journey-muted); font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: .06em; }
.journey-stage-head { border-bottom: 1px solid var(--journey-line); }
.journey-stage-foot { border-top: 1px solid var(--journey-line); }
.journey-kicker { display: inline-flex; align-items: center; gap: 7px; }
.journey-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
.journey-scene-label { font-family: var(--font-mono); font-weight: 500; color: #dca65c; }
.journey-stage-foot [data-scene-count] { font-family: var(--font-mono); font-weight: 500; }
.journey-canvas { position: relative; min-height: 0; overflow: hidden; background: #090c11; }
.journey-scene { position: absolute; inset: 0; margin: 0; opacity: 0; overflow: hidden; transform: scale(1.035); transition: opacity 680ms var(--ease-in-out), transform 900ms var(--ease-out); pointer-events: none; }
.journey-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,8,12,.08), transparent 60%, rgba(5,8,12,.38)); pointer-events: none; }
.journey-scene.is-active { opacity: 1; transform: scale(1); }
.journey-scene img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0,var(--scene-y,0px),0) scale(var(--scene-scale,1.045)); transition: transform 80ms linear; will-change: transform; }
.scene-focus { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 5px 8px; color: #fff; background: rgba(5,8,12,.7); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.scene-focus i { width: 6px; height: 6px; border-radius: 50%; background: #d99a4e; }
.focus-colorado { left: 58%; top: 47%; }
.focus-reservoir { right: 10%; top: 34%; }
.scene-scale { position: absolute; z-index: 4; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 6px 9px; color: rgba(255,255,255,.7); background: rgba(5,8,12,.7); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.scene-scale i { width: 78px; height: 4px; border-radius: 99px; background: linear-gradient(90deg,#4f78b7,#e8b04a,#d64d42); }
.scene-decision { position: absolute; z-index: 4; right: 16px; bottom: 16px; display: grid; gap: 3px; padding: 8px 10px; color: rgba(255,255,255,.62); background: rgba(5,8,12,.78); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.scene-decision b { color: #e4b36e; font-size: 11px; font-weight: 500; }
.journey-meter { width: min(210px, 62%); height: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.journey-meter i { display: block; width: 100%; height: 100%; background: #d99a4e; transform: scaleX(.02); transform-origin: left; will-change: transform; }
.journey-chapters { padding-bottom: 8vh; }
.journey-chapter { min-height: min(76vh, 720px); display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 18px; }
html.js .journey-chapter { opacity: .3; transform: translateY(24px); transition: opacity 520ms var(--ease), transform 680ms var(--ease-out); }
.journey-chapter:first-child { margin-top: -8vh; }
.journey-chapter:last-child { min-height: min(68vh, 620px); }
html.js .journey-chapter.is-active { opacity: 1; transform: none; }
.chapter-num { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--journey-line); border-radius: 50%; color: var(--journey-muted); font-family: var(--font-mono); font-size: 11px; transition: color var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), background var(--motion-base) var(--ease); }
.journey-chapter.is-active .chapter-num { color: #10141b; border-color: #d99a4e; background: #d99a4e; }
.journey-chapter h3 { margin: 10px 0 10px; color: var(--journey-text); }
.journey-chapter p { margin: 0; color: var(--journey-muted); font-size: 15px; }
.chapter-signal { display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; color: #c7cdd5; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.chapter-signal i { width: 22px; height: 1px; background: #d99a4e; transform: scaleX(.25); transform-origin: left; transition: transform 680ms var(--ease-out); }
.journey-chapter.is-active .chapter-signal i { transform: scaleX(1); }

/* section scaffolding */
section.band { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.sec-head { max-width: 60ch; }
.sec-head h2 { margin: 12px 0 0; }
.sec-head p { margin: 14px 0 0; }

/* capabilities — asymmetric, not 3 identical cards */
.caps { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 40px; }
.cap { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 22px;
  position: relative; overflow: hidden; transition: border-color var(--motion-base) var(--ease), transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease); }
.cap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 25%, rgba(169,116,44,.055), transparent 65%); transform: translateX(-110%); transition: transform 800ms var(--ease-out); }
.cap:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(20,25,33,.08); }
.cap:hover::after { transform: translateX(110%); }
.cap .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.cap h3 { margin: 12px 0 8px; }
.cap p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.cap.wide { grid-column: span 6; } .cap.half { grid-column: span 3; }
@media (max-width: 900px) { .cap.wide, .cap.half { grid-column: span 6; } }
@media (max-width: 560px) { .cap.wide, .cap.half { grid-column: span 12; } }

/* method */
.method { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 56px); align-items: center; margin-top: 36px; }
@media (max-width: 880px) { .method { grid-template-columns: 1fr; } }
.steps { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px 20px; background: var(--surface); transition: background var(--motion-base) var(--ease), padding-left var(--motion-base) var(--ease-out); }
.step:hover { background: var(--surface-2); padding-left: 24px; }
.step .si { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 2px; }
.step h3 { margin: 0 0 5px; font-size: 16px; }
.step p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.method figure { margin: 0; }
.method img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.method figcaption { margin-top: 9px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* surfaces bento */
.surfaces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; }
.surf { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); display: flex; flex-direction: column;
  transition: border-color var(--motion-base) var(--ease), transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease); }
.surf:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 16px 36px rgba(20,25,33,.1); }
.surf img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: 1px solid var(--line); transition: transform 700ms var(--ease-out), filter 700ms var(--ease); }
.surf:hover img { transform: scale(1.025); filter: saturate(1.06) contrast(1.02); }
.surf .t { padding: 16px 18px; }
.surf .t h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.surf .t h3 .arr { color: var(--accent); font-family: var(--font-mono); font-size: 14px; }
.surf .arr { transition: transform var(--motion-base) var(--ease-out); }
.surf:hover .arr { transform: translateX(5px); }
.surf .t p { margin: 7px 0 0; font-size: 13.5px; color: var(--text-2); }
.surf.big { grid-column: span 4; } .surf.sm { grid-column: span 2; }
.surf.row { grid-column: span 3; flex-direction: row; align-items: stretch; }
.surf.row img { width: 44%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
@media (max-width: 900px) { .surf.big, .surf.sm, .surf.row { grid-column: span 6; } .surf.row { flex-direction: column; } .surf.row img { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); aspect-ratio: 16/10; } }

/* honest note */
.note { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 24px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--surface); margin-top: 28px; }
.note .ico { width: 22px; height: 22px; color: var(--accent); }
.note p { margin: 0; color: var(--text-2); font-size: 14px; }
.note b { color: var(--text); }

/* CTA strip */
.cta-strip { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(64px, 9vw, 104px) 0; }
.cta-strip::before { content: ""; position: absolute; z-index: -1; width: min(680px, 90vw); aspect-ratio: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(169,116,44,.13), transparent 68%); }
.cta-strip h2 { margin: 0 auto; max-width: 20ch; }
.cta-strip p { margin: 14px auto 0; max-width: 46ch; }
.cta-strip .actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* footer */
footer.ft { border-top: 1px solid var(--line); padding: 48px 0 36px; }
footer.ft .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { footer.ft .cols { grid-template-columns: 1fr 1fr; } }
footer.ft h4 { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; }
footer.ft a { display: block; padding: 5px 0; font-size: 14px; color: var(--text-2); }
footer.ft a:hover { color: var(--accent); }
footer.ft .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }
footer.ft .legal .warn { color: var(--text-2); }

/* responsive narrative choreography */
@media (max-width: 920px) {
  .hero { min-height: auto; }
  .hero .grid { gap: 56px; }
  .hero .lead { max-width: 55ch; }
  .hero-visual { width: min(760px, 94%); margin-inline: auto; }
  .journey-layout { grid-template-columns: 1fr; gap: 24px; }
  .journey-stage { top: 74px; height: min(56vw, 490px); min-height: 330px; z-index: 2; }
  .journey-chapters { position: relative; z-index: 1; padding-bottom: 0; }
  .journey-chapter { width: min(560px, 100%); min-height: 62vh; padding-top: 28vh; }
  .journey-chapter:first-child { margin-top: 0; }
  .journey-chapter:last-child { min-height: 60vh; }
}

@media (max-width: 640px) {
  .wrap { width: min(100% - 32px, 1180px); }
  .hero { padding-top: 52px; }
  .hero .grid { gap: 48px; }
  .metrics .m { min-width: 50%; }
  .metrics .m:nth-child(2) { border-right: 0; }
  .metrics .m:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-depth { transition: none; }
  .scroll-cue { margin-top: 36px; }
  .journey { padding-top: 72px; }
  .journey-stage { height: auto; min-height: 0; grid-template-rows: 38px auto 38px; border-radius: 10px; }
  .journey-canvas { aspect-ratio: 16/10; }
  .journey-stage-head, .journey-stage-foot { min-height: 38px; padding: 8px 10px; font-size: 11px; }
  .journey-chapter { min-height: 78vh; padding-top: min(56vw, 260px); align-content: center; }
  .journey-chapter:last-child { min-height: 72vh; }
  .scene-focus, .scene-decision, .scene-scale { transform: scale(.82); transform-origin: bottom left; }
}

/* A sticky visual cannot leave room for its copy on short landscape screens.
   Fall back to a linear stage + chapters layout instead of covering content. */
@media (max-height: 650px) and (orientation: landscape) {
  .journey-layout { display: block; }
  .journey-stage { position: relative; top: auto; height: min(56vw, calc(100svh - 32px), 520px);
    min-height: 0; margin-bottom: 32px; grid-template-rows: 38px minmax(0,1fr) 38px; }
  .journey-canvas { aspect-ratio: auto; min-height: 0; }
  .journey-chapters { padding: 0; }
  .journey-chapter, .journey-chapter:first-child, .journey-chapter:last-child {
    min-height: 0; margin: 0; padding: 34px 0; }
}

@media (hover: none) {
  .cap:hover, .surf:hover { transform: none; box-shadow: none; }
  .surf:hover img { transform: none; filter: none; }
  .step:hover { padding-left: 20px; background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav *, .page-rail *, .hero *, .journey *, .cap, .step, .surf, .surf *, .cta-strip::before { animation: none !important; transition-duration: .01ms !important; }
  .hero-depth { transform: none !important; }
  .scroll-cue { display: none; }
  .journey-layout { display: block; }
  .journey-stage { position: relative; top: auto; height: min(62vw, 620px); margin-bottom: 42px; }
  .journey-chapters { display: grid; gap: 42px; padding: 0; }
  .journey-chapter, .journey-chapter:first-child, .journey-chapter:last-child { min-height: 0; margin: 0; padding: 0; opacity: 1; transform: none; }
  .chapter-num { color: #10141b; border-color: #d99a4e; background: #d99a4e; }
  .chapter-signal i { transform: scaleX(1); }
  .journey-scene img { transform: none !important; }
  .cta-strip::before { transform: translate(-50%,-50%); }
}