/* =============================================================
   Kaizen Global — motion system + editorial layer
   Loaded after style.css. Additive: it introduces new components and
   motion primitives rather than rewriting the existing design system,
   so every page keeps working while pages opt in component by component.

   House rules carried over from style.css:
   - no raw hex in component rules; everything resolves to a token
   - nothing light-on-light or blue-on-blue: dark surfaces get their own
     pre-vetted text tokens
   - every animation is gated on prefers-reduced-motion at the bottom
   ============================================================= */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Text tokens for use on dark/navy surfaces */
  --on-dark: #ffffff;
  --on-dark-soft: #c7d4f0;
  --on-dark-faint: #93a4cc;
  --on-dark-accent: #a9c0ff;
  --on-dark-line: rgba(255,255,255,.14);
  --on-dark-line-strong: rgba(255,255,255,.26);

  --measure: 62ch;
  --step: clamp(72px, 9vw, 132px);   /* vertical rhythm for editorial sections */
}

/* ===== Motion primitives ===================================== */

/* Base: elements start hidden only once JS has confirmed it can observe them
   (html.kg-motion), so a JS failure can never leave the page blank. */
.kg-motion [data-reveal] { opacity: 0; will-change: opacity, transform; }
.kg-motion [data-reveal="up"]    { transform: translateY(28px); }
.kg-motion [data-reveal="down"]  { transform: translateY(-20px); }
.kg-motion [data-reveal="left"]  { transform: translateX(-32px); }
.kg-motion [data-reveal="right"] { transform: translateX(32px); }
.kg-motion [data-reveal="scale"] { transform: scale(.94); }
.kg-motion [data-reveal="clip"]  { opacity: 1; clip-path: inset(0 0 100% 0); }
.kg-motion [data-reveal="wipe"]  { opacity: 1; clip-path: inset(0 100% 0 0); }

.kg-motion [data-reveal] {
  transition:
    opacity .85s var(--ease-out) var(--d, 0ms),
    transform .95s var(--ease-out) var(--d, 0ms),
    clip-path 1.05s var(--ease-out) var(--d, 0ms);
}
.kg-motion [data-reveal].is-in {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
}

/* Per-line headline entrance, built by motion.js */
.kg-lines { display: block; }
.kg-line { display: block; overflow: hidden; }
.kg-line > span { display: block; }
.kg-motion .kg-line > span { transform: translateY(105%); transition: transform 1s var(--ease-out) var(--d, 0ms); }
.kg-motion .is-in .kg-line > span, .kg-motion .kg-line.is-in > span { transform: translateY(0); }

/* Parallax — motion.js writes --py; transform stays on the compositor */
[data-parallax] { will-change: transform; }
[data-parallax] > * { transform: translate3d(0, var(--py, 0px), 0); }

/* Scroll progress rail, pinned under the header */
.kg-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 120;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--royal), var(--on-dark-accent));
  pointer-events: none;
}

/* ===== Editorial primitives ================================== */

/* Micro-label with a leading rule — the SLB/Baker Hughes section marker */
.rule-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--royal); margin-bottom: 20px;
}
.rule-label::before {
  content: ""; width: 38px; height: 1px; background: currentColor; opacity: .55; flex: none;
}
.on-dark .rule-label, .section-navy .rule-label, .cta-banner .rule-label { color: var(--on-dark-accent); }

.display {
  font-size: clamp(2.6rem, 6.2vw, 5.2rem); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.02; text-wrap: balance; margin: 0 0 .34em;
}
.display-sm { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.028em; line-height: 1.06; }
.lede-lg { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); }

.section-xl { padding: var(--step) 0; }
.hairline { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Two-column editorial split: sticky heading, scrolling body */
.split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(32px, 6vw, 88px); }
.split-sticky { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }

/* ===== Capability cards — image-led, zoom on hover ============ */
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.cap-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 380px; padding: 30px; overflow: hidden; isolation: isolate;
  background: var(--navy-block); color: var(--on-dark); text-decoration: none;
}
.cap-card img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 1.1s var(--ease-out); filter: saturate(.85);
}
/* Solid, explicitly-stacked scrim above the photo — card text never relies on
   how dark the underlying photograph happens to be. */
.cap-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Darkened at the top as well as the bottom: the index number sits up there,
     and several of these photos are bright enough that a light label on a thin
     scrim would fail contrast. Checked against a worst-case white photo. */
  background: linear-gradient(180deg, rgba(0,10,32,.62) 0%, rgba(0,10,32,.28) 30%, rgba(0,10,32,.58) 55%, rgba(0,12,38,.93) 100%);
  transition: background .5s var(--ease-out);
}
.cap-card > * { position: relative; z-index: 2; }
.cap-card:hover img { transform: scale(1.11); }
.cap-card:hover::after { background: linear-gradient(180deg, rgba(0,10,32,.66) 0%, rgba(0,10,32,.44) 26%, rgba(0,12,38,.76) 50%, rgba(2,16,46,.96) 100%); }
.cap-num { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--on-dark); margin-bottom: auto; text-shadow: 0 1px 3px rgba(0,6,20,.6); }
.cap-card h3 { color: var(--on-dark); font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 10px; }
.cap-card p { color: var(--on-dark-soft); font-size: 15px; margin: 0; max-width: 34ch;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease-out), opacity .45s var(--ease-out), margin .55s var(--ease-out); }
.cap-card:hover p, .cap-card:focus-visible p { max-height: 9em; opacity: 1; margin-bottom: 16px; }
.cap-go { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--on-dark); }
.cap-go .arrow { transition: transform .35s var(--ease-out); }
.cap-card:hover .cap-go .arrow { transform: translateX(6px); }
.cap-card:focus-visible { outline: 2px solid var(--on-dark-accent); outline-offset: -4px; }

/* ===== Marquee capability strip =============================== */
.marquee { overflow: hidden; position: relative; padding: 26px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: kg-marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; letter-spacing: -.01em; color: var(--ink-soft); }
.marquee-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--royal); flex: none; }
@keyframes kg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Figure with clip reveal ================================ */
.figure { position: relative; overflow: hidden; border-radius: var(--radius); }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure-tall { aspect-ratio: 4 / 5; }
.figure-wide { aspect-ratio: 16 / 9; }
.figure-caption { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); letter-spacing: .01em; }

/* ===== Stat band ============================================== */
.stat-band { background: var(--navy-block); color: var(--on-dark); padding: clamp(56px, 7vw, 88px) 0; }
.stat-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.stat-cell { padding: 8px 28px; border-left: 1px solid var(--on-dark-line); }
.stat-cell:first-child { border-left: 0; padding-left: 0; }
.stat-cell .num {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
}
.stat-cell .label { margin-top: 12px; font-size: 13.5px; color: var(--on-dark-faint); line-height: 1.45; }

/* ===== Hero upgrades ========================================= */
.hero-scene-host { position: relative; min-height: min(92vh, 880px); display: flex; align-items: center;
  overflow: hidden; margin-top: calc(-1 * var(--header-h)); }
.hero-scene-host .container { position: relative; z-index: 2; width: 100%; }
.hero-panel {
  max-width: 660px; margin-top: calc(var(--header-h) + 20px); padding: 34px 36px;
  background: var(--onphoto-glass-bg-strong); border: 1px solid var(--onphoto-glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}
.hero-panel .rule-label { color: var(--on-dark-accent); }
.hero-panel h1 { color: var(--on-dark); font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -.03em; line-height: 1.06; margin-bottom: 18px; }
.hero-panel p { color: #e6ecfb; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; max-width: 52ch; margin-bottom: 26px; }
.hero-panel a:not(.btn) { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Scene caption + scroll cue along the hero base */
.hero-base {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid var(--on-dark-line);
  background: linear-gradient(180deg, rgba(2,8,24,0), rgba(2,8,24,.55));
}
.hero-base .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.hero-note { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-faint); }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-soft); background: none; border: 0; cursor: pointer; font-family: inherit; }
.scroll-cue .bar { display: block; width: 1px; height: 26px; background: var(--on-dark-line-strong); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content: ""; position: absolute; inset: 0; background: var(--on-dark); animation: kg-cue 2.2s var(--ease-in-out) infinite; }
@keyframes kg-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ===== Link + button micro-interactions ====================== */
.link-sweep { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.link-sweep::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.link-sweep:hover::after, .link-sweep:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.btn { position: relative; overflow: hidden; }
.btn-primary:hover { transform: translateY(-1px); }

/* ===== Responsive ============================================ */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .split-sticky { position: static; }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-band-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 2px; }
  .stat-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-panel { padding: 28px 24px; margin-right: 0; }
}
@media (max-width: 640px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-card { min-height: 300px; }
  /* No hover on touch — show the card copy permanently */
  .cap-card p { max-height: 9em; opacity: 1; margin-bottom: 16px; }
  .stat-band-grid { grid-template-columns: 1fr; }
  .stat-cell { border-left: 0; padding-left: 0; }
  .hero-base .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-note { display: none; }
  /* Portrait viewports crop a 16:9 scene hard. Drop the panel to the bottom so
     the platform and sky stay visible above it (motion.js re-anchors the SVG
     to its right edge to match). */
  .hero-scene-host { align-items: flex-end; }
  .hero-panel { margin-top: 0; margin-bottom: 88px; }
}

/* ===== Reduced motion ======================================== */
@media (prefers-reduced-motion: reduce) {
  .kg-motion [data-reveal],
  .kg-motion [data-reveal].is-in { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .kg-motion .kg-line > span { transform: none !important; transition: none !important; }
  .marquee-track { animation: none; }
  .scroll-cue .bar::after { animation: none; }
  [data-parallax] > * { transform: none !important; }
}

/* =============================================================
   Second pass — restored photo/video hero, relocated scene band,
   and the additional homepage/interior components.
   ============================================================= */

/* ===== Hero: video slides alongside photo slides ============= */
/* Mirrors the existing .hero-slide img rules so a <video> behaves as a
   drop-in background layer. Explicit z-index on both the media and the
   ::before scrim — the stacking bug in §4/§7 came from leaving it implicit. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero > .container { position: relative; z-index: 2; }

.hero-slide video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Poster covers the video until it is actually playing, so the slide is never
   an empty black box on a slow connection. Both media layers sit at z-index 0
   (the poster wins on DOM order) so that .hero-slide::before — the contrast
   scrim at z-index 1 — still paints over whichever one is visible. Giving the
   poster z-index 1 would have put it level with the scrim and, being later in
   the DOM, on top of it: an undarkened image under white hero text. */
.hero-slide .video-poster {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; transition: opacity .8s var(--ease-out);
}
.hero-slide.video-ready .video-poster { opacity: 0; }

.hero-content .rule-label { color: var(--on-dark-accent); }
.hero-content h1 { margin-bottom: 16px; }

/* Small "what am I looking at" line under the hero dots */
.hero-caption { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-faint); }

/* ===== Relocated animated scene band ========================= */
/* The band is a tall scroll track; the stage inside it is pinned for the whole
   pass, so the day-to-night transition plays out in full before the reader
   scrolls past it rather than being half-seen on the way through. */
.scene-band { position: relative; min-height: 240vh; }
.scene-stage {
  position: sticky; top: 0; height: 100vh; min-height: 560px;
  overflow: hidden; display: flex; align-items: center;
}
.scene-stage > .container { position: relative; z-index: 2; width: 100%; padding-block: 40px; }
.scene-band-panel {
  max-width: 560px; padding: 34px 36px; border-radius: var(--radius);
  background: var(--onphoto-glass-bg-strong); border: 1px solid var(--onphoto-glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  box-shadow: var(--shadow-lg);
}
.scene-band-panel h2 { color: var(--on-dark); }
.scene-band-panel p { color: #e6ecfb; }
.scene-band-panel .rule-label { color: var(--on-dark-accent); }
.scene-hint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  font-size: 13px; color: var(--on-dark-soft);
  padding: 9px 15px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08); border: 1px solid var(--on-dark-line);
}
.scene-hint svg { width: 15px; height: 15px; flex: none; }

/* ===== Media band — full-bleed video/photo with copy over it == */
.media-band { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; isolation: isolate; }
.media-band > video, .media-band > img, .media-band .media-still {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
}
.media-band .video-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease-out); }
.media-band.video-ready .video-poster { opacity: 0; }
.media-band::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,8,26,.38) 0%, rgba(0,8,26,.2) 40%, rgba(0,8,26,.86) 100%);
}
.media-band .container { position: relative; z-index: 3; width: 100%; padding-block: 56px; }
.media-band-inner { max-width: 620px; }
.media-band h2 { color: var(--on-dark); }
.media-band p { color: var(--on-dark-soft); }
.media-band .rule-label { color: var(--on-dark-accent); }

/* ===== Process steps ========================================= */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 8px; }
.process-step { position: relative; padding: 30px 26px 30px 0; border-top: 2px solid var(--border-strong); }
.process-step::before {
  content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 0; background: var(--royal);
  transition: width 1s var(--ease-out) var(--d, 0ms);
}
.kg-motion .process-step.is-in::before, .process-step.is-in::before { width: 100%; }
.process-step .n { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--royal); }
.process-step h3 { margin: 14px 0 8px; font-size: 1.05rem; }
.process-step p { font-size: 14.5px; margin: 0; color: var(--ink-soft); }

/* ===== Standards / credentials strip ========================= */
.standards { display: flex; flex-wrap: wrap; gap: 12px; }
.standard-chip {
  display: inline-flex; align-items: center; gap: 11px; padding: 14px 20px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.standard-chip:hover { border-color: var(--royal); transform: translateY(-2px); }
.standard-chip svg { width: 20px; height: 20px; color: var(--royal); flex: none; }
.standard-chip .t { font-weight: 650; font-size: 14.5px; color: var(--ink); line-height: 1.25; }
.standard-chip .s { font-size: 12.5px; color: var(--ink-faint); }

/* ===== Accordion ============================================= */
.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-weight: 600; font-size: 1.05rem; color: var(--ink); transition: color .2s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--royal); }
.accordion summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease-out);
}
.accordion details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.accordion .answer { padding: 0 44px 26px 0; }
.accordion .answer p { margin: 0; }

/* ===== Pull quote / statement ================================ */
.statement { max-width: 20ch; font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.14; color: var(--ink); }
.statement em { font-style: normal; color: var(--royal); }

/* ===== Responsive ============================================ */
@media (max-width: 980px) {
  .process { grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
  .scene-band { min-height: 200vh; }
  .media-band { min-height: 460px; }
}
@media (max-width: 640px) {
  .process { grid-template-columns: 1fr; }
  .scene-band-panel { padding: 26px 22px; }
  .media-band-inner { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .process-step::before { transition: none; width: 100%; }
}

/* ===== About hero mesh — heartbeat =============================
   Two beats then a rest, like a cardiac trace, rather than a even sine
   throb. Scale is tiny (the mesh is full-bleed, so a large scale would
   visibly crop); most of the life comes from the brightness/opacity lift. */
.hero-about img {
  animation: kg-heartbeat 3.4s var(--ease-in-out) infinite;
  transform-origin: center center; will-change: transform, opacity;
}
@keyframes kg-heartbeat {
  0%   { transform: scale(1);     opacity: .86; filter: brightness(1); }
  8%   { transform: scale(1.018); opacity: 1;   filter: brightness(1.13); }
  16%  { transform: scale(1.004); opacity: .9;  filter: brightness(1.02); }
  26%  { transform: scale(1.026); opacity: 1;   filter: brightness(1.2); }
  38%  { transform: scale(1);     opacity: .86; filter: brightness(1); }
  100% { transform: scale(1);     opacity: .86; filter: brightness(1); }
}
/* The overlay pulses in counterpoint so the whole panel breathes, not just
   the image underneath it. */
.hero-about-overlay { animation: kg-heartbeat-veil 3.4s var(--ease-in-out) infinite; }
@keyframes kg-heartbeat-veil {
  0%, 38%, 100% { opacity: 1; }
  8%, 26%       { opacity: .88; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-about img, .hero-about-overlay { animation: none; }
}

/* ===== Nav disclosure button ("Company") =====================
   Mirrors .main-nav a in every state so the menu reads as one row of items;
   it is a <button> because it discloses a menu rather than navigating. */
.main-nav .nav-trigger {
  position: relative; font-family: inherit; font-weight: 500; font-size: 14px;
  padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid transparent;
  background: none; cursor: pointer; color: rgba(255,255,255,.92); line-height: inherit;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.main-nav .nav-trigger::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  background: var(--royal); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.main-nav .nav-trigger:hover::after, .main-nav .nav-trigger:focus-visible::after { transform: scaleX(1); }
.main-nav .nav-trigger:hover, .main-nav .nav-trigger:focus-visible { color: var(--royal); background: var(--royal-tint); }
.site-header.on-light .main-nav .nav-trigger { color: var(--ink); }
.site-header.on-light .main-nav .nav-trigger:hover { color: var(--royal); }
@media (min-width: 981px) {
  .site-header:not(.on-light) .main-nav > .has-dropdown > .nav-trigger { color: var(--onphoto-pill-ink); }
  .site-header:not(.on-light) .main-nav > .has-dropdown > .nav-trigger:hover {
    color: var(--royal); background: var(--onphoto-pill-bg-strong);
  }
}
@media (max-width: 980px) {
  .main-nav .nav-trigger {
    color: var(--ink); width: 100%; text-align: left; padding: 14px 6px;
    border-radius: 0; border-bottom: 1px solid var(--border);
    opacity: 0; transform: translateX(16px); transition: opacity .35s ease, transform .35s ease, color .18s;
  }
  .main-nav.open .nav-trigger { opacity: 1; transform: translateX(0); }
  .main-nav .nav-trigger::after { display: none; }
}

/* ===== Hero panel — hard left, outline only ===================
   width:100% matters: .hero is a flex row, so without it .container
   shrink-wraps to its content and margin:0 auto centres the result — which is
   why the panel sat in the middle of the hero covering the whole photo.

   Per the client, the panel is now an outline with no fill or blur. The
   contrast that used to come from the panel now comes entirely from
   .hero-slide::before, which is strengthened to match (see below) — text on a
   photo still never depends on how dark that photo happens to be. */
.hero > .container { width: 100%; max-width: 1420px; }
.hero-content {
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
  max-width: 640px; padding: 38px 40px;
}
/* With no panel fill, the slide scrim carries all the contrast on the left
   third. Measured against the brightest of the three slides. */
.hero-slide::before {
  background:
    linear-gradient(100deg, rgba(2,6,20,.9) 0%, rgba(2,6,20,.82) 30%, rgba(2,6,20,.5) 52%, rgba(2,6,20,.16) 78%, rgba(2,6,20,.08) 100%),
    linear-gradient(180deg, rgba(0,8,25,.3) 0%, rgba(0,8,25,.1) 45%, rgba(0,8,25,.6) 100%);
}

/* ===== Footer social icons ===================================
   The glyph alone, with a ring that appears on hover. Grid centring rather
   than flex so the glyph is optically dead-centre in the hover ring
   regardless of each path's own bounding box, and line-height:0 so no text
   leading shifts it down. Every icon hovers, including the ones whose URL has
   not been filled in yet — they simply point at "#" until it is. */
.footer-social { gap: 6px; }
.social-icon {
  width: 42px; height: 42px; padding: 0; line-height: 0;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--on-dark-soft); opacity: 1; pointer-events: auto; cursor: pointer;
  transition: color .2s ease, background-color .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.social-icon svg { width: 19px; height: 19px; display: block; fill: currentColor; }
.social-icon:hover, .social-icon:focus-visible {
  background: rgba(255,255,255,.1); border-color: var(--on-dark-line-strong);
  color: var(--on-dark); transform: translateY(-2px);
}
.social-icon.is-inactive { color: var(--on-dark-faint); }
.social-icon.is-inactive:hover, .social-icon.is-inactive:focus-visible {
  background: rgba(255,255,255,.1); border-color: var(--on-dark-line-strong);
  color: var(--on-dark-soft); transform: translateY(-2px);
}

/* A disclosure toggled by click must stay open without hover. */
@media (min-width: 981px) {
  .has-dropdown.open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ===== Interior page heroes ==================================
   Two treatments: .is-brand (the blue split panel, services only) and
   .is-photo (full-bleed image behind a solid scrim, everywhere else). */

/* --- Brand / services --- */
.page-hero.is-brand { background: var(--hero-blue); }
.page-hero.is-brand .page-hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.page-hero.is-brand .page-hero-media { position: relative; }
.page-hero.is-brand .page-hero-media .video-poster {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .8s var(--ease-out);
}
.page-hero.is-brand .page-hero-media.video-ready .video-poster { opacity: 0; }

/* --- Photo --- */
.page-hero.is-photo {
  position: relative; background: var(--navy-block);
  padding: calc(var(--header-h) + 96px) 0 96px; overflow: hidden;
}
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img, .page-hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.page-hero-bg .video-poster { z-index: 1; transition: opacity .8s var(--ease-out); }
.page-hero.video-ready .page-hero-bg .video-poster { opacity: 0; }
/* Solid scrim as a real element above the media, below the copy. Heavy on the
   left where the text sits, so the heading never depends on how dark the
   photograph happens to be at that point. */
.page-hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(2,7,20,.9) 0%, rgba(2,7,20,.74) 34%, rgba(2,7,20,.42) 66%, rgba(2,7,20,.3) 100%),
    linear-gradient(180deg, rgba(0,6,20,.4) 0%, rgba(0,6,20,.1) 38%, rgba(0,6,20,.6) 100%);
}
.page-hero.is-photo .page-hero-grid { position: relative; z-index: 3; grid-template-columns: 1fr; }
.page-hero.is-photo .page-hero-text { max-width: 780px; }
.page-hero.is-photo h1 { color: var(--on-dark); }
.page-hero.is-photo .lede { color: var(--on-dark-soft); max-width: 62ch; }
.page-hero.is-photo .rule-label { color: var(--on-dark-accent); }
.page-hero.is-photo .breadcrumb, .page-hero.is-photo .breadcrumb a { color: var(--on-dark-soft); }
.page-hero.is-photo .breadcrumb a:hover { color: var(--on-dark); }
/* No media supplied: fall back to the flat navy block, no scrim needed. */
.page-hero.is-photo:not(.with-photo) { padding-block: calc(var(--header-h) + 72px) 72px; }

.page-hero .rule-label { margin-bottom: 16px; }

@media (max-width: 640px) {
  .page-hero.is-photo { padding: calc(var(--header-h) + 64px) 0 64px; }
}

/* A centred section head needs its rule-label centred too — otherwise the
   leading rule pins the label to the left of a centred block. */
.section-head.center .rule-label { justify-content: center; }
.cta-banner .rule-label { justify-content: center; }

/* ===== Timeline ==============================================
   Horizontal on desktop, vertical on narrow screens. The connecting rule
   draws itself in as the row reveals. */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.timeline-item { position: relative; padding: 44px 28px 0 0; }
.timeline-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--border-strong);
}
.timeline-item::after {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--royal);
  transition: width 1.1s var(--ease-out) var(--d, 0ms);
}
.timeline-item.is-in::after { width: 100%; }
.timeline-dot {
  position: absolute; top: -7px; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border-strong);
  transition: border-color .5s var(--ease-out) var(--d, 0ms), background-color .5s var(--ease-out) var(--d, 0ms);
}
.timeline-item.is-in .timeline-dot { border-color: var(--royal); background: var(--royal); }
.timeline-year {
  font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.035em;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.timeline-item h3 { margin: 14px 0 8px; font-size: 1.05rem; }
.timeline-item p { font-size: 14.5px; margin: 0; color: var(--ink-soft); max-width: 34ch; }

/* ===== Values list ===========================================
   Numbered editorial rows that open on hover/focus rather than five identical
   boxes — closer to how SLB and Baker Hughes present principles. */
.values-list { border-top: 1px solid var(--border); }
.value-row {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px; align-items: start; padding: 30px 0;
  border-bottom: 1px solid var(--border);
  transition: background-color .4s var(--ease-out), padding .4s var(--ease-out);
}
.value-row:hover, .value-row:focus-within { background: var(--royal-tint); padding-inline: 18px; }
.value-row .vnum {
  font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--royal);
  padding-top: 6px;
}
.value-row h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -.025em; }
.value-row p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 860px) {
  .value-row { grid-template-columns: 54px 1fr; }
  .value-row p { grid-column: 2; }
}

@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; gap: 8px; }
  .timeline-item { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-item::after { transition: none; width: 100%; }
}

/* ===== About hero — centred content needs its own treatment ===== */
.hero-about .rule-label { justify-content: center; color: var(--on-dark-accent); }
.hero-about h1 { margin-bottom: 18px; }
.hero-about .lede { color: var(--on-dark-soft); max-width: 56ch; margin: 0 auto; }
.hero-about .hero-base { border-top-color: var(--on-dark-line); }
.hero-about .hero-base .container { justify-content: space-between; }
@media (max-width: 640px) {
  .hero-about .hero-base .container { flex-direction: column; align-items: flex-start; gap: 8px; }
}