/* Orocovis Petroleum Corp.
   Paper ground, ink type, one saturated band. Structure follows the
   TinyWins section system: split headlines, hairline boxes, a numbered
   service list, mono captions. The accent stays Orocovis amber. */

:root {
  /* Black ground, white type. The names are kept from the light build so the
     component rules did not all have to be rewritten: --paper is still the
     page, --ink is still whatever sits on it. */
  --paper:     #0a0b0d;   /* page */
  --paper-2:   #17181b;   /* raised surface */
  --ink:       #f2f2f0;   /* type on the page */
  --ink-2:     #9b9b97;   /* muted */
  --ink-3:     #67676a;   /* dim */
  --line:      #26272b;   /* hairline */
  --accent:    #f2f2f0;
  --accent-ink:#9b9b97;
  --black:     #000000;

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The nav gets its own face. IBM Plex Sans was drawn for an engineering
     company and shares its skeleton with the mono used for the compliance
     labels, so it belongs beside them rather than reading as a borrowed UI
     font. Swap this one line to try another. */
  --nav: "IBM Plex Sans", "Archivo", system-ui, sans-serif;

  --pad: clamp(20px, 4vw, 56px);
  --max: 1560px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ------------------------------------------------------------------ loader */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: grid;
  place-items: center;
}
/* Never let a loader that JS cannot dismiss sit over the page. */
html:not(.js) .loader { display: none; }

.loader-curtain {
  position: absolute;
  inset: 0;
  background: var(--black);
  will-change: transform, opacity;
}

/* Laid out at full size and scaled DOWN onto the nav slot. Laying it out
   small and scaling up rasterises the mask at the small size first, which is
   what made the loading mark look soft no matter how good the vector was. */
.loader-mark {
  position: relative;
  display: block;
  width: clamp(150px, 21vw, 250px);
  aspect-ratio: 198 / 172;
}
.loader-mark-ghost,
.loader-mark-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("assets/derrick.svg") center / contain no-repeat;
  mask: url("assets/derrick.svg") center / contain no-repeat;
}
/* the outline the fill rises into */
.loader-mark-ghost { opacity: 0.17; }
/* clipped from the bottom up by script, like a tank filling */
.loader-mark-fill { clip-path: inset(100% 0 0 0); will-change: clip-path; }

/* Hidden only while a loader is on the page to hand it over. Pages without
   one (the legal pages) have nothing to restore it, so scoping this to the
   loader's presence keeps the mark visible there. */
.js .loader ~ .island .nav-brand { opacity: 0; }

/* ------------------------------------------------------------------- grain */

/* Grain belongs to the footage, not the page. It lives inside .stage-media so
   the clip-path takes it along when the plate shrinks to a card, instead of
   floating over the whole site. */
.stage-grain {
  position: absolute;
  /* oversized: the layer is nudged around and must not expose an edge */
  top: -30%; left: -30%;
  width: 160%; height: 160%;
  pointer-events: none;
  background-image: url("assets/grain.png");
  background-repeat: repeat;
  opacity: 0.16;
  will-change: transform;
  animation: grain-shift 0.7s steps(1) infinite;
}

/* Jumping the tile between positions is what reads as moving film grain.
   Stepped, not eased: grain that slides looks like a texture, not grain. */
@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  12%  { transform: translate3d(-4%, -2%, 0); }
  25%  { transform: translate3d(3%, -5%, 0); }
  37%  { transform: translate3d(-5%, 3%, 0); }
  50%  { transform: translate3d(5%, 1%, 0); }
  62%  { transform: translate3d(-2%, 5%, 0); }
  75%  { transform: translate3d(3%, -3%, 0); }
  87%  { transform: translate3d(-4%, -1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------------ cursor */

/* Only on devices that actually have a pointer to replace. Hiding the native
   cursor on anything touch-driven, or on a device without hover, takes away
   something and gives nothing back. */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* Gated on has-cursor, which cursor.js only sets once it is actually
     drawing. Hiding the system cursor on the promise that a script will
     replace it is how a page ends up with no pointer at all. */
  .has-cursor body { cursor: none; }
  .has-cursor a, .has-cursor button, .has-cursor input,
  .has-cursor select, .has-cursor textarea, .has-cursor label { cursor: none; }

  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 10000;
    pointer-events: none;
  }
  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
  }
  /* the dot is exact, so aim never feels laggy */
  .cursor-dot {
    width: 5px; height: 5px;
    background: var(--ink);
  }
  /* the ring trails, which is what reads as weight */
  .cursor-ring {
    width: 34px; height: 34px;
    border: 1px solid rgba(242, 242, 240, 0.5);
    transition: width 0.22s ease, height 0.22s ease,
                border-color 0.22s ease, background-color 0.22s ease;
  }
  .cursor.is-active .cursor-ring {
    width: 54px; height: 54px;
    border-color: rgba(242, 242, 240, 0.85);
    background: rgba(242, 242, 240, 0.08);
  }
  .cursor.is-down .cursor-ring { width: 26px; height: 26px; }
  .cursor.is-hidden { opacity: 0; }
  .cursor { transition: opacity 0.2s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-grain { animation: none; }
  .cursor { display: none !important; }
  .has-cursor body, .has-cursor a, .has-cursor button, .has-cursor input,
  .has-cursor select, .has-cursor textarea, .has-cursor label { cursor: auto; }
}

/* ------------------------------------------------------------------ island */

/* A wide floating bar that always shows every section. The pill follows
   whatever you point at, and pressing and dragging across it lands on
   whichever section you let go over. */
.island {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 90;
  transform: translateX(-50%);
  color: #ffffff;
  border-radius: 999px;
  font-family: var(--nav);
  max-width: calc(100vw - 32px);

  /* Glass while it floats over the footage: the plate behind it is blurred
     and lifted, with a hairline top highlight so the pill catches light along
     its upper edge the way a real bevel would. */
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 30px rgba(0, 0, 0, 0.45);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Past the hero there is no footage left to see through, so the glass would
   just be blur over flat black. It settles into the page instead. */
.island.is-settled {
  background: rgba(10, 11, 13, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 22px rgba(0, 0, 0, 0.5);
}

.island-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 10px 8px 20px;
  height: 62px;
  white-space: nowrap;
}

/* On a wide bar this is just the mark. On a phone it becomes the top row,
   holding the mark and the button that opens the menu. */
.island-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

/* three lines, becoming a cross once open */
.island-burger {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}
.island-burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  margin: 3.5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.26s ease, opacity 0.2s ease;
}
.island.is-open .island-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.island.is-open .island-burger span:nth-child(2) { opacity: 0; }
.island.is-open .island-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* 198 x 172 in the source vector */
.nav-mark {
  display: block;
  width: 40px;
  aspect-ratio: 198 / 172;
  background: currentColor;
  -webkit-mask: url("assets/derrick.svg") center / contain no-repeat;
  mask: url("assets/derrick.svg") center / contain no-repeat;
}

.island-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
  /* Both axes stay with the browser on touch. Claiming the horizontal one for
     the drag gesture meant the rail could not be swiped at all on a phone,
     which is the only way to reach the sections that do not fit. */
  touch-action: pan-x pan-y;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.island-rail::-webkit-scrollbar { display: none; }
.island-item { scroll-snap-align: center; }

.island-item {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  padding: 11px 17px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.18s ease;
  -webkit-user-select: none;
  user-select: none;
}
.island-item:hover,
.island-item.is-current { color: #ffffff; }

/* the thing that slides */
.island-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transform: translate3d(0, 0, 0);
  opacity: 0;
  will-change: transform, width;
  pointer-events: none;
}

/* Two codes, one lit. A single button that toggles would be smaller, but it
   has to be read as "press this to get the other language" rather than "you
   are currently in this one", and at two letters there is no room to say
   which. Showing both and lighting the live one asks nothing of the reader. */
.lang-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lang-b {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}
.lang-b:hover { color: #ffffff; }
.lang-b.is-on { color: #0a0b0d; background: #ffffff; }

/* Staff should not have to be told a URL to find where they clock in, so the
   portal is in the bar. It is not a section of this page though, and it is not
   what a customer came for, so it stays out of the rail the pill runs along and
   reads quieter than the CTA beside it. */
.island-portal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.62);
  padding: 10px 4px 10px 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  transition: color 0.18s ease;
}
.island-portal:hover { color: #ffffff; }
.island-portal svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.island-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 10px 18px;
  transition: background 0.18s ease;
}
.island-cta:hover { background: rgba(255, 255, 255, 0.14); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------- stage */

/* A tall scroll track holding a pinned viewport. Scroll progress across the
   track drives one sequence: the plate clips from full bleed down to a card
   while the headline leaves and the client wall arrives underneath it. */
/* Long enough to read as a sequence, short enough not to feel stuck.

   The units are `svh`, not `vh`. On a phone `100vh` is the height the page
   would have with the browser chrome hidden, so a hero sized in `vh` runs
   under the address bar and the bottom of it is never seen. `svh` is the
   height with the chrome showing, which is the one measurement that is always
   fully visible. `dvh` would fit too, but it changes as the chrome collapses,
   and a pinned stage that resizes mid-scroll makes the whole sequence jump. */
.stage { position: relative; height: 195vh; height: 195svh; }

.stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.stage-media {
  position: absolute;
  inset: 0;
  will-change: clip-path;
  /* full bleed at rest: an inset of zero would still antialias its own edge */
  clip-path: none;
}
/* The poster sits behind the video as a layer of its own, so the plate is
   never a black hole while the footage is arriving or if it never does. It
   carries the same treatment as the footage, otherwise the still would be a
   slightly warmer, brighter picture that the video corrects a second later. */
.stage-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/ramp-fueling-poster.jpg') center / cover no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(0.94);
}
.stage-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0b0d;
  opacity: 0;
  /* tinted toward the page: desaturated and cooled so the footage reads as
     part of the black rather than a bright window cut into it. It is held
     just under full brightness rather than pushed down into it — the scrim
     below does the work of protecting the headline, and doing that job twice
     only cost the picture. */
  filter: grayscale(1) contrast(1.05) brightness(0.94);
  will-change: transform;
}
/* scrim lives inside the media so it clips away with the plate */
.stage-scrim {
  position: absolute;
  inset: 0;
  /* Three passes, each with a job: the vertical one seats the plate into the
     page top and bottom, the horizontal one holds the ground the headline
     stands on, and the vignette keeps the corners from lifting.

     The vertical one now falls away fast through the top two thirds and then
     comes back hard under the last quarter. That is where the headline sits,
     and on a phone the aircraft it crosses is the brightest thing in the
     frame — white type on a white fuselage needs the band beneath it to be
     dark whatever the footage is doing up above. */
  background:
    linear-gradient(180deg, rgba(10,11,13,0.52) 0%, rgba(10,11,13,0.10) 26%,
                    rgba(10,11,13,0.12) 52%, rgba(10,11,13,0.44) 76%,
                    rgba(10,11,13,0.74) 100%),
    linear-gradient(90deg, rgba(10,11,13,0.42) 0%, rgba(10,11,13,0.08) 52%, transparent 78%),
    radial-gradient(120% 100% at 50% 45%, transparent 48%, rgba(10,11,13,0.40) 100%);
}

.stage-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(24px, 5vh, 56px);
  padding: 0 var(--pad) clamp(40px, 8vh, 90px);
  color: #ffffff;
  will-change: transform, opacity;
}

.hero-head {
  display: grid;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.032em;
  line-height: 0.88;
  font-size: clamp(38px, 7.4vw, 118px);
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.42);
}
.hero-l { justify-self: start; }
.hero-r { justify-self: end; text-align: right; }

/* Spanish says the same thing in about a third more letters. At the English
   size the headline breaks into four lines and swallows the picture, so it is
   set smaller rather than allowed to reflow into a different composition. */
:root[data-lang="es"] .hero-head { font-size: clamp(34px, 6.1vw, 92px); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero-meta strong { color: #fff; font-weight: 600; }

/* the wall the plate resolves into */
.stage-clients {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(28px, 6vh, 72px);
  padding: 0 var(--pad);
  opacity: 0;
  will-change: transform, opacity;
}
.stage-clients .eyebrow { margin-bottom: clamp(14px, 2.4vh, 26px); }

/* Carousel. Two identical copies of the track sit side by side and the pair
   slides left by exactly half its width, so the seam never lands mid-view.
   The rail fades at both edges instead of cutting logos off hard. */
.rail-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 3vw, 34px);
  flex-wrap: wrap;
  margin-bottom: clamp(12px, 2vh, 20px);
}
.rail-head .eyebrow { margin-bottom: 0; }

.rail-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.rail-chip {
  font-family: var(--nav);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.rail-chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.32); }
.rail-chip.is-on {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.rail-chip .n { opacity: 0.55; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* The rail never stops moving, so it has no ends to arrive at. What it does
   have is edges, and a logo chopped in half by one reads as a bug. The mask
   fades both sides into the page instead, so marks arrive and leave rather
   than being cut off.

   Scrolling is not native here: the drift and the drag are one position that
   JavaScript owns, which is the only way the two can coexist without the rail
   snapping between them. `pan-y` keeps a vertical swipe scrolling the page. */
.logo-rail {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  --rail-fade: linear-gradient(90deg,
    transparent 0, rgba(0, 0, 0, 0.4) 7%, #000 18%,
    #000 82%, rgba(0, 0, 0, 0.4) 93%, transparent 100%);
  -webkit-mask-image: var(--rail-fade);
  mask-image: var(--rail-fade);
}
.logo-rail.is-held { cursor: grabbing; }

/* Filtered, the rail stops being a loop. A group that fits is centred and
   sits still: there is nothing running past the edges, so the fade has
   nothing to soften and would only dim the outermost marks for no reason,
   and there is nothing to drag, so the grab cursor would be a promise the
   rail does not keep. A group too wide to fit keeps both. */
.logo-rail.is-static.is-whole {
  cursor: default;
  touch-action: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.logo-rail.is-static.is-whole .logo-track {
  width: 100%;
  justify-content: center;
}

.logo-track {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 66px);
  width: max-content;
  will-change: transform;
}

.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img {
  display: block;
  width: auto;
  /* height comes from the build script, per logo, to even out optical mass */
  max-width: 190px;
  object-fit: contain;
  opacity: 0.66;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Leaning in on the one you are looking at. The items are fixed-basis, so a
   scaled mark overlaps its neighbours rather than shoving the row along. */
.logo:hover img { opacity: 1; transform: scale(1.16); }

/* ----------------------------------------------------------------- marquee */

.marquee {
  margin: clamp(60px, 9vw, 120px) 0;
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: clamp(10px, 1.6vw, 22px) 0;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(46px, 10vw, 150px);
  line-height: 1.02;
  color: var(--ink);
  will-change: transform;
}

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(60px, 9vw, 120px) var(--pad); max-width: var(--max); margin: 0 auto; }
.section.bordered { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.eyebrow span { color: var(--ink); margin-right: 10px; }

h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.028em;
  line-height: 0.92;
  font-size: clamp(30px, 4.4vw, 62px);
}

/* --------------------------------------------------------------- statement */

.statement { padding: 0 var(--pad); max-width: var(--max); margin: 0 auto; }
.statement-box {
  border: 1px solid var(--line);
  padding: clamp(28px, 5vw, 72px);
}
.statement-box h2 {
  font-size: clamp(26px, 3.9vw, 56px);
  max-width: 20ch;
}

/* ---------------------------------------------------------------- services */

.svc {
  display: grid;
  grid-template-columns: 130px minmax(280px, 1fr) minmax(240px, 0.9fr) 190px;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}
.svc-label { font-size: 13px; color: var(--ink-2); padding-top: 6px; }

.svc-list { list-style: none; }
.svc-item button {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink-3);
  transition: color 0.25s ease;
}
.svc-num { font-size: clamp(20px, 2.2vw, 30px); font-weight: 500; min-width: 30px; }
.svc-name {
  font-size: clamp(20px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.svc-item.is-active button { color: var(--ink); }
.svc-item:hover button { color: var(--ink); }

.svc-media { overflow: hidden; }
.svc-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* the page is monochrome, so the photographs are too. Drop this line to let
     them keep their own colour. */
  filter: grayscale(1) contrast(1.04) brightness(0.94);
}

.svc-detail { font-size: 13.5px; color: var(--ink-2); padding-top: 6px; }
.svc-detail p + p { margin-top: 4px; }

/* ------------------------------------------------------------------- steps */

.steps { list-style: none; }
.step {
  display: grid;
  grid-template-columns: 90px minmax(200px, 320px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent-ink); padding-top: 5px; }
.step h3 { font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; }
.step p { font-size: 14.5px; color: var(--ink-2); max-width: 62ch; }

/* ------------------------------------------------------------------- fleet */

.fleet-head {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(26px, 3.5vw, 44px);
}
.fleet-head p { font-size: 14px; color: var(--ink-2); }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.fleet-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.fleet-table th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-2);
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}
.fleet-table td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); }
.fleet-table tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.fleet-table .num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.fleet-table td:first-child { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

.fleet-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-2); max-width: 60ch; }

/* -------------------------------------------------------------- compliance */

.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cert { background: var(--paper); padding: clamp(20px, 2.4vw, 32px); }
.cert h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }
.cert p { font-size: 13.5px; color: var(--ink-2); }
.cert .ref { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 8px; letter-spacing: 0.02em; }
.certs-note { margin-top: 24px; font-size: 13.5px; color: var(--ink-2); max-width: 74ch; }

/* ------------------------------------------------------------------- about */

.about { display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(260px, 0.85fr); gap: clamp(28px, 5vw, 80px); }
.about-copy p { font-size: 15.5px; color: var(--ink-2); max-width: 62ch; }
.about-copy p + p { margin-top: 18px; }
.quote { border-left: 2px solid var(--accent); padding-left: 22px; }
.quote blockquote { font-size: clamp(19px, 2.1vw, 27px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; }
.quote figcaption { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }

/* ----------------------------------------------------------------- contact */

.contact { display: grid; grid-template-columns: minmax(260px, 0.85fr) minmax(300px, 1.15fr); gap: clamp(28px, 5vw, 80px); }
.contact-side address { font-style: normal; margin-top: 26px; font-size: 14.5px; color: var(--ink-2); }
.contact-side address strong { color: var(--ink); }
.contact-side .muted { margin-top: 10px; color: var(--ink-3); }

.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label {
  display: grid;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.form input, .form select, .form textarea {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  outline: none;
  border-radius: 0;
  transition: border-color 0.18s ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-3); }
.form input:focus, .form select:focus, .form textarea:focus { border-bottom-color: var(--ink); }
.form textarea { resize: vertical; }
.btn-send {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 100px;
  padding: 15px 28px;
  cursor: pointer;
  justify-self: start;
  transition: opacity 0.18s ease;
}
.btn-send:hover { opacity: 0.82; }
.form-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------------ footer */

.footer { border-top: 1px solid var(--line); padding: clamp(36px, 5vw, 60px) var(--pad); max-width: var(--max); margin: 0 auto; }
.footer-top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-mark { width: 150px; }
.footer-top p { font-size: 14px; color: var(--ink-2); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ----------------------------------------------------------------- consent */

.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9200;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 20px;
  background: rgba(10, 11, 13, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
  font-family: var(--nav);
}

.consent-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.consent-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
}
.consent-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.consent-actions { display: flex; gap: 10px; flex: 0 0 auto; margin-left: auto; }

.consent-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.18s ease;
}
.consent-btn:hover { background: rgba(255, 255, 255, 0.1); }
.consent-btn.is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.consent-btn.is-primary:hover { opacity: 0.85; }

@media (max-width: 720px) {
  .consent { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .consent-actions { margin-left: 0; }
  .consent-btn { flex: 1 1 0; text-align: center; }
}

/* footer legal links */
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.16s ease;
}
.footer-legal a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ reveal */

.js .reveal { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* no drifting rail: show a static, wrapped wall instead */
  .logo-track { flex-wrap: wrap; width: auto; justify-content: center; transform: none !important; }
  .logo:hover img { transform: none; }
  .logo-rail { -webkit-mask-image: none; mask-image: none; }
  .js .reveal { opacity: 1; }
  .js .loader ~ .island .nav-brand { opacity: 1; }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .svc { grid-template-columns: 1fr 1fr; }
  .svc-label { grid-column: 1 / -1; }
  .svc-detail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .certs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .stage { height: 165vh; height: 165svh; }
  .stage-copy { justify-content: flex-end; gap: 18px; }
  .hero-head { line-height: 0.92; }
  .hero-l,
  .hero-r { justify-self: start; text-align: left; }
  .hero-meta { grid-template-columns: 1fr; gap: 7px; margin-top: 0; font-size: 13px; }
  .logo-track { gap: 26px; animation-duration: 46s; }
  .logo img { max-width: 120px; }

  /* Eight chips wrapping four deep took 140px of screen to filter a rail 58px
     tall: the control was two and a half times the size of the thing it
     controlled, and the section read as a pile of buttons with some logos
     underneath. One swipeable row instead. It runs out to both edges of the
     screen rather than stopping at the page padding, so the row reads as
     continuing past the frame instead of ending there, and it carries the
     same edge fade as the rail below it so the two behave alike. */
  .rail-head { display: block; }
  .rail-head .eyebrow { margin-bottom: 14px; }
  .rail-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin: 0 calc(var(--pad) * -1);
    padding: 2px var(--pad);
    --chip-fade: linear-gradient(90deg,
      #000 0, #000 88%, rgba(0, 0, 0, 0.35) 96%, transparent 100%);
    -webkit-mask-image: var(--chip-fade);
    mask-image: var(--chip-fade);
  }
  .rail-filters::-webkit-scrollbar { display: none; }
  .rail-chip { scroll-snap-align: start; }

  /* On a phone the bar is compact: the mark and a button. Tap it and the
     sections drop down as a list. A row of six plus a call to action cannot
     be read at this width, and sliding a rail hides most of them behind a
     gesture nobody is told about. */
  /* Anchored to both edges rather than shrink-wrapped, so the closed bar is
     a full-width strip with the mark at one end and the button at the other,
     not a small tab floating in the middle. */
  .island {
    top: 10px;
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
  }
  .island-burger { display: block; }
  /* The bar was sized for a desktop pill that happened to be narrow. On a
     phone it is the only navigation there is, so it carries a taller row, a
     mark large enough to read as the company rather than a favicon, and a
     button nearer the 44px a thumb expects. */
  .island-inner { height: 64px; gap: 10px; padding: 8px 8px 8px 16px; }
  .island-burger { width: 42px; height: 42px; }
  .island-head { width: 100%; justify-content: space-between; }
  .island-rail,
  .island-portal,
  .lang-switch,
  .island-cta { display: none; }

  /* Closed, the bar is glass over the footage and that is the point. Open, it
     is a page of its own and the footage behind it is just noise: at 7% white
     the ramp shows straight through the words, and the brighter the hero got
     the worse that read. So opening swaps the glass for a ground dark enough
     to put the type on, whether or not the bar has settled yet. */
  .island.is-open {
    border-radius: 26px;
    background: rgba(10, 11, 13, 0.95);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 20px 60px rgba(0, 0, 0, 0.7);
  }
  .island.is-open .island-inner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 4px;
    padding: 10px;
  }
  .island.is-open .island-head {
    width: 100%;
    justify-content: space-between;
    padding: 2px 2px 8px 8px;
  }
  .island.is-open .island-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    /* a dropped list is not a scroller, so the sideways affordances go */
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .island.is-open .island-item { padding: 13px 16px; font-size: 16px; border-radius: 14px; }
  .island.is-open .lang-switch {
    display: inline-flex;
    align-self: flex-start;
    margin: 6px 0 2px 16px;
  }
  .island.is-open .lang-b { font-size: 12px; padding: 8px 13px; }
  .island.is-open .island-portal {
    display: flex;
    font-size: 16px;
    padding: 13px 16px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 4px;
    border-radius: 0;
  }
  .island.is-open .island-cta {
    display: inline-flex;
    justify-content: center;
    border-radius: 14px;
    margin-top: 4px;
    padding: 13px 16px;
  }
  .island .island-pill { border-radius: 14px; }
  .nav-mark { width: 38px; }
}

@media (max-width: 640px) {
  .island-inner { padding: 8px 8px 8px 14px; }

  /* One block in the bottom left, not a headline floating in the middle of
     the picture with the facts stranded at the foot of the screen. The type
     is set as large as fits without a line breaking, the leading is pulled
     tight, and the rule sits close under it so the whole thing reads as one
     piece of the frame. */
  .stage-copy {
    justify-content: flex-end;
    gap: 16px;
    padding: 0 20px calc(30px + env(safe-area-inset-bottom));
  }
  /* On a wide screen the two halves are separate rows so one can sit right
     and catch the far edge of the frame. A phone has no far edge worth
     catching, and holding them as fixed rows caps the type at whatever the
     longer of the two happens to measure. Letting it run as one block instead
     lets the words break where they fit, which buys about a third more size
     for the same width. */
  .hero-head {
    display: block;
    /* Sized to the last step before the composition changes: measured on a
       375px screen, English holds three lines to 48px and breaks to four at
       50px, stranding KEEPS on a line of its own. Set just under that, in
       vw so the ratio of type to column holds at every phone width and the
       line count travels with it. */
    font-size: clamp(42px, 12.6vw, 62px);
    line-height: 0.88;
    letter-spacing: -0.042em;
    text-wrap: balance;
  }
  /* Spanish is set smaller than English everywhere else because at the same
     size it breaks to an extra line and swallows the picture. On a phone that
     trade had stopped paying: it broke to four lines anyway, so the smaller
     size bought nothing and left 556px of empty ramp above the words. Sized
     to the width it actually has now — the line count is the same either way,
     so it may as well fill the frame. */
  /* Same measurement in Spanish: four lines to 45px, five at 47px, and past
     49px COMBUSTIBLE is wider than the screen. Set below that. It is still
     smaller than English, but only by what the longer words cost, rather
     than by the flat reduction it used to carry — that was tuned to avoid a
     fourth line it was taking anyway, so it bought nothing and left 556px of
     empty ramp above the words. */
  :root[data-lang="es"] .hero-head { font-size: clamp(38px, 11.9vw, 57px); }
  .hero-meta {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 0;
    padding-top: 13px;
    font-size: 13.5px;
    line-height: 1.35;
  }

  .fleet-head, .about, .contact { grid-template-columns: 1fr; }
  .step { grid-template-columns: 60px 1fr; }
  .step p { grid-column: 2; }
  .svc { grid-template-columns: 1fr; }
  .certs { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}