/* /onepagev2 — the whole site on one scroll.
 *
 * Everything here is scoped under html.onepagev2, so this file is inert on any
 * other document. That is deliberate: the four live pages and /onepage load
 * assets/css/site.css, and this page must not be able to change how they look.
 * All the components — panels, tiles, the vehicle cards, the marquees, the
 * rail, the portraits — come from site.css unchanged. This file only adds what
 * a single long page needs that a four-page site does not.
 *
 * Colours are literals from the brand system, matching how site.css is written:
 * Deep Ink #0B2A33, Canvas #F4F6F6, Surface #FFFFFF, Teal 500 #0E8C82,
 * Teal 700 #0A5E56, Teal tint #6FBDB4 (teal on a dark ground, where Teal 700
 * reads too dark), Signal #14CDB8, Grey 200 #D7DDDD, Grey 600 #5A6868.
 */

/* The sticky bar overlays the page, so an anchored section has to stop below
   it rather than under it. One value, used by both the scroll padding and the
   bar's own height. */
html.onepagev2 {
  --v2-bar: 7rem;
  scroll-padding-top: var(--v2-bar);
}

@media (min-width: 900px) {
  html.onepagev2 {
    --v2-bar: 5.25rem;
  }
}

/* Sticky bar
   The site's header, rebuilt for a page that has no other pages: the same
   wordmark and the same four labels, pointing at sections. It tightens once
   you are past the hero, and goes light over a dark band. */
/* Fixed rather than sticky, so the hero band runs to the top of the window and
   the bar sits over it. That is what makes the ink-to-canvas handover — and
   the wordmark swapping with it — read as one move rather than as a light
   strip above a dark section. */
html.onepagev2 .v2-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(244, 246, 246, 0.9);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease;
}

html.onepagev2 .v2-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.875rem 1rem;
  transition: padding 0.3s ease;
}

@media (min-width: 640px) {
  html.onepagev2 .v2-header__bar {
    padding: 1.125rem 1.5rem;
  }
}

/* Past the hero the bar draws its hairline and pulls in a little. */
html.onepagev2 .v2-header.is-stuck {
  border-bottom-color: #D7DDDD;
}

html.onepagev2 .v2-header.is-stuck .v2-header__bar {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Over a dark band the whole bar inverts. */
html.onepagev2 .v2-header.is-dark {
  background: rgba(11, 42, 51, 0.72);
  border-bottom-color: transparent;
}

/* Wordmark: both marks stacked, cross-fading. There is no grey or recoloured
   wordmark to reach for — it is the ink one or the white one. */
html.onepagev2 .v2-wordmark {
  position: relative;
  display: block;
  flex: none;
  width: auto;
  height: 2rem;
  aspect-ratio: 1406 / 484;
}

@media (min-width: 640px) {
  html.onepagev2 .v2-wordmark {
    height: 2.5rem;
  }
}

html.onepagev2 .v2-wordmark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}

html.onepagev2 .v2-wordmark img[data-mark='white'] {
  opacity: 0;
}

html.onepagev2 .v2-header.is-dark .v2-wordmark img[data-mark='ink'] {
  opacity: 0;
}

html.onepagev2 .v2-header.is-dark .v2-wordmark img[data-mark='white'] {
  opacity: 1;
}

/* Section links. Martian Mono, uppercase, at 0.88em of their nominal size —
   the face sets a larger cap height than Outfit and looks oversized next to it
   otherwise. The active one carries a 2px teal underline. */
html.onepagev2 .v2-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

@media (min-width: 900px) {
  html.onepagev2 .v2-nav {
    display: flex;
  }
}

/* The compact row: the same four links, scrollable, and the mirror image of
   the desktop nav's breakpoint so exactly one of the two is ever displayed. */
html.onepagev2 .v2-header__strip {
  border-top: 1px solid rgba(11, 42, 51, 0.08);
  overflow-x: auto;
}

html.onepagev2 .v2-header.is-dark .v2-header__strip {
  border-top-color: rgba(255, 255, 255, 0.14);
}

html.onepagev2 .v2-nav--compact {
  display: flex;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0 0.25rem;
}

html.onepagev2 .v2-nav--compact .v2-nav__item {
  padding: 0.75rem;
  white-space: nowrap;
}

@media (min-width: 900px) {
  html.onepagev2 .v2-header__strip {
    display: none;
  }
}

html.onepagev2 .v2-nav__item {
  position: relative;
  padding: 0.5rem 0.75rem;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #26424A;
  transition: color 0.2s ease;
}

html.onepagev2 .v2-nav__item::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.125rem;
  height: 2px;
  background: #0E8C82;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html.onepagev2 .v2-nav__item:hover,
html.onepagev2 .v2-nav__item:focus-visible {
  color: #0A5E56;
}

html.onepagev2 .v2-nav__item.is-active {
  color: #0A5E56;
  font-weight: 600;
}

html.onepagev2 .v2-nav__item.is-active::after {
  transform: scaleX(1);
}

html.onepagev2 .v2-header.is-dark .v2-nav__item {
  color: rgba(255, 255, 255, 0.72);
}

html.onepagev2 .v2-header.is-dark .v2-nav__item:hover,
html.onepagev2 .v2-header.is-dark .v2-nav__item:focus-visible,
html.onepagev2 .v2-header.is-dark .v2-nav__item.is-active {
  color: #FFFFFF;
}

/* The one Signal accent on a dark band: the marker under the section you are
   in. Nothing else on the band uses it. */
html.onepagev2 .v2-header.is-dark .v2-nav__item.is-active::after {
  background: #14CDB8;
}

/* Set as a label rather than a sentence: uppercase in CSS, so the text itself
   stays the site's own "Partner with Us" and the copy check still passes. */
html.onepagev2 .v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  margin-left: auto;
  padding: 0.5rem 1.25rem;
  background: #0E8C82;
  color: #FFFFFF;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

@media (min-width: 900px) {
  html.onepagev2 .v2-cta {
    margin-left: 0;
  }
}

html.onepagev2 .v2-cta:hover,
html.onepagev2 .v2-cta:focus-visible {
  background: #0B2A33;
}

/* Section rhythm
   The page sources were written one-section-per-page, with their own tight
   pt-2 pb-6. On one long page the air between sections is what separates them,
   since there are no section labels to do it. */
html.onepagev2 .v2-section {
  padding: 3.25rem 0;
}

@media (min-width: 640px) {
  html.onepagev2 .v2-section {
    padding: 4rem 0;
  }
}

@media (min-width: 1024px) {
  html.onepagev2 .v2-section {
    padding: 5rem 0;
  }
}

html.onepagev2 .v2-section__inner,
html.onepagev2 .v2-band__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  html.onepagev2 .v2-section__inner,
  html.onepagev2 .v2-band__inner {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  html.onepagev2 .v2-section__inner,
  html.onepagev2 .v2-band__inner {
    padding: 0 2rem;
  }
}

/* The included blocks bring the live pages' own 2px Ink rules with them, which
   is what divides the page. The first block in a section does not need one. */
html.onepagev2 .v2-section__inner > *:first-child > .border-t-2:first-child {
  border-top-width: 0;
  padding-top: 0;
}

/* Section boundaries. With no eyebrows or chapter labels, the 2px Ink rule is
   what says a new section has started — the same rule, at the same weight, the
   live pages use between their own blocks.
   
   It is its own element inside the container rather than a border on the
   container, because a border sits on the padding box: put it on
   .v2-section__inner and it runs the full 80rem, while the divider above
   Featured Partners — which comes from the live page's own markup, a block
   inside that padding — runs the content width. Same weight, same ink, 64px
   apart at 1440. A block child spans exactly what the other blocks span, with
   no padding values restated anywhere to drift. */
html.onepagev2 .v2-section--ruled {
  padding-top: 0;
}

html.onepagev2 .v2-rule {
  border-top: 2px solid #0B2A33;
  margin-bottom: 3.25rem;
}

@media (min-width: 640px) {
  html.onepagev2 .v2-rule {
    margin-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  html.onepagev2 .v2-rule {
    margin-bottom: 5rem;
  }
}

/* The partners row is the last thing in Solutions, and the rule under it is
   the next section's. Its own divider sits 2rem above it (pt-8, fixed at every
   width in the live markup), so the gap below has to be the same 2rem rather
   than the section's responsive rhythm, or the row sits off-centre between the
   two rules. */
html.onepagev2 #solutions {
  padding-bottom: 2rem;
}

/* Bands
   A full-width dark section, built to take a background image later. With no
   child in .band__media it is flat Deep Ink and reads as a finished section;
   drop in an <img> or a <video> and the scrim keeps the type legible. */
html.onepagev2 .v2-band {
  position: relative;
  background: #0B2A33;
  color: #FFFFFF;
  overflow: hidden;
}

/* A band runs under the bar rather than stopping below it, cancelling the
   scroll padding the canvas sections need. Jumping to one therefore puts ink
   behind the bar and the wordmark flips, instead of leaving a light strip above
   a dark section. The band's own top padding keeps its heading clear. */
html.onepagev2 .v2-band {
  scroll-margin-top: calc(var(--v2-bar) * -1);
}

html.onepagev2 .v2-band--hero {
  display: flex;
  align-items: center;
  min-height: 68vh;
  padding: 7rem 0 4rem;
}

@media (min-width: 1024px) {
  html.onepagev2 .v2-band--hero {
    min-height: 72vh;
    padding: 9rem 0 5rem;
  }
}

html.onepagev2 .v2-band--contact {
  padding: 7rem 0 4rem;
}

@media (min-width: 1024px) {
  html.onepagev2 .v2-band--contact {
    padding: 8.5rem 0 5.5rem;
  }
}

html.onepagev2 .band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

html.onepagev2 .band__media > img,
html.onepagev2 .band__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Only paints once there is media to sit over, so an empty band stays a clean
   flat ink rather than a gradient for no reason. */
html.onepagev2 .band__media:not(:empty) + .band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 42, 51, 0.86) 0%, rgba(11, 42, 51, 0.72) 55%, rgba(11, 42, 51, 0.9) 100%);
}

/* The hero is the one band whose type is left-aligned and sits in the left two
   thirds, so its scrim is side-weighted rather than flat: heavy Deep Ink under
   the headline, lifting to the right where the photograph can be seen. Three
   layers, top to bottom in the stack:
   1. the bar strip — the fixed bar is itself only 72% ink, so without this the
      photograph steps visibly lighter at the bar's bottom edge instead of the
      two reading as one dark top; it is measured in the bar's own height, so
      it tracks the bar rather than a guessed percentage;
   2. the side weighting, which is what carries the white type;
   3. a gentle vertical one, thinnest where the frame is already dark and
      heaviest at the foot where the band hands over to canvas. */
html.onepagev2 .v2-band--hero .band__media:not(:empty) + .band__scrim {
  background:
    linear-gradient(180deg, rgba(11, 42, 51, 0.80) 0, rgba(11, 42, 51, 0.74) var(--v2-bar), rgba(11, 42, 51, 0) calc(var(--v2-bar) + 170px)),
    linear-gradient(100deg, rgba(11, 42, 51, 0.86) 0%, rgba(11, 42, 51, 0.82) 54%, rgba(11, 42, 51, 0.58) 76%, rgba(11, 42, 51, 0.22) 100%),
    linear-gradient(180deg, rgba(11, 42, 51, 0.10) 0%, rgba(11, 42, 51, 0.06) 34%, rgba(11, 42, 51, 0.18) 62%, rgba(11, 42, 51, 0.30) 100%);
}

/* Below the desktop measure the type runs most of the width — the paragraph
   alone reaches 77% of a 900px window and 91% of a 768px one — so there is no
   right half to keep clear and the side weighting would only thin the ink
   under the last words of a line. It flattens out, and a plain vertical scrim
   carries the type instead. */
@media (max-width: 1023px) {
  html.onepagev2 .v2-band--hero .band__media:not(:empty) + .band__scrim {
    background:
      linear-gradient(180deg, rgba(11, 42, 51, 0.86) 0%, rgba(11, 42, 51, 0.84) 62%, rgba(11, 42, 51, 0.68) 80%, rgba(11, 42, 51, 0.42) 100%);
  }
}

/* The band is far wider than 16:9, so cover crops the photograph vertically:
   weighting the crop low drops the blown-out sky at the top and brings the
   road up behind the type, which is the calmest part of the frame. */
html.onepagev2 .v2-band--hero .band__media > img,
html.onepagev2 .v2-band--hero .band__media > video {
  object-position: 50% 72%;
}

/* Narrow, the whole height fits and the crop is horizontal instead, so what
   matters is which column of the street the band keeps: left of centre holds
   the two foreground riders as well as the queue running away behind them. */
@media (max-width: 767px) {
  html.onepagev2 .v2-band--hero .band__media > img,
  html.onepagev2 .v2-band--hero .band__media > video {
    object-position: 32% 50%;
  }
}

/* Over ink alone 78% white is a deliberate step down from the headline. Over a
   photograph it is the one thing on the band that has to work harder, so on
   the hero it comes up — still white, no second colour. */
html.onepagev2 .v2-band--hero p {
  color: rgba(255, 255, 255, 0.92);
}

html.onepagev2 .v2-band__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Type on a band. The included blocks carry the live pages' ink colours, which
   are unreadable here, so the band recolours them rather than the markup being
   forked — that is what keeps the copy a straight include. */
html.onepagev2 .v2-band h1,
html.onepagev2 .v2-band h2,
html.onepagev2 .v2-band h3 {
  color: #FFFFFF;
}

html.onepagev2 .v2-band p {
  color: rgba(255, 255, 255, 0.78);
}

html.onepagev2 .v2-band .border-t-2 {
  border-top-color: rgba(255, 255, 255, 0.22);
}

/* The hero is the one h1 on the page and carries the page, so it runs larger
   than it does on the live Overview. */
html.onepagev2 .v2-band--hero h1 {
  letter-spacing: -0.03em;
}

@media (min-width: 1280px) {
  html.onepagev2 .v2-band--hero h1 {
    font-size: 5.25rem;
    line-height: 1.02;
  }
}

/* The contact panels are white tiles by design, so they keep their own ink
   colours on the dark band — only the loose type around them inverts. */
html.onepagev2 .v2-band .panel__title {
  color: #0A5E56;
}

html.onepagev2 .v2-band .panel--live .panel__title {
  color: #0B2A33;
}

html.onepagev2 .v2-band .panel__body {
  color: #4A5A5A;
}

/* The secondary CTA is outlined in ink on the live page, which disappears on a
   dark ground. */
html.onepagev2 .v2-band .border-on-surface {
  border-color: rgba(255, 255, 255, 0.55);
}

html.onepagev2 .v2-band .text-on-surface:not(.panel__title) {
  color: #FFFFFF;
}

html.onepagev2 .v2-band .hover\:bg-on-surface:hover {
  background: #FFFFFF;
  color: #0B2A33;
}

/* The five solution cards — option 03 from /tile-variations, filled panels
   with everything inside, in the teal of its middle panel. The mono label that
   option carries at the top is dropped, so the card is the name and the line
   under it and nothing else.
   
   site.css already holds a vehicle open under @media (hover: none), there
   being no pointer to hover with; this promotes that state to every input, so
   the markup stays the live page's and only the surface changes. */
html.onepagev2 .vehicle {
  /* Option 03 sits its content on the floor of the panel, which is most of
     what gives it its character — but that was three panels holding one line
     each. Five bodies of very different lengths put the five names at five
     different heights, so the names stay at the top and align, and the slack
     falls to the bottom of the panel instead. */
  grid-template-rows: 0fr auto 1fr;
  min-height: 15.5rem;
  padding: 1.75rem;
  background: #0E8C82;
  border-color: #0E8C82;
}

/* The tile's own hover repaints the surface grey, which on a filled panel is
   a flash of the wrong colour. It deepens to Teal 700 instead. */
html.onepagev2 .vehicle:hover {
  background: #0A5E56;
  border-color: #0A5E56;
}

/* The index is the part option 03 puts in its mono label, and that label is
   what was asked to go. Hidden rather than stripped, so putting the numbers
   back is one line. */
html.onepagev2 .vehicle__idx {
  display: none;
}

html.onepagev2 .vehicle__head {
  text-align: left;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #FFFFFF;
}

html.onepagev2 .vehicle__body {
  opacity: 1;
  padding-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #E2F1EE;
}

html.onepagev2 .vehicle:focus-visible {
  outline-color: #0B2A33;
}

@media (min-width: 1024px) {
  html.onepagev2 .vehicle {
    min-height: 16.5rem;
  }
}

/* The rail scrolls horizontally, which makes the browser clip it vertically
   too — so the 2px the tile lifts on hover took its top edge and its shadow
   with it. The track gets that room back, pulled off the layout again with a
   matching negative margin so nothing moves. */
html.onepagev2 [data-rail-track] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}

/* site.css sets will-change on every reveal target and nothing clears it. On a
   four-page site that is a handful of promoted layers; here it is every block
   on a long page, held for as long as the page is open. */
html.onepagev2 .reveal-on-scroll.is-visible {
  will-change: auto;
}

/* The team grid is three across on the live page inside a max-w-5xl measure,
   which on a page this wide leaves ten people as 3+3+3+1. Five across at the
   top breakpoint gives two clean rows. The markup is the live page's — this
   only overrides the grid it sits in. */
@media (min-width: 1280px) {
  html.onepagev2 #team .grid.max-w-5xl {
    max-width: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Footer, one page's worth rather than every page's. */
html.onepagev2 .v2-footer,
html.onepagev2 footer {
  border-top: 1px solid #D7DDDD;
}

/* Reduced motion: site.css:78-89 already forces the reveals visible, kills
   transitions and puts scroll-behaviour back to auto. The two things it cannot
   know about are here. */
@media (prefers-reduced-motion: reduce) {
  html.onepagev2 .v2-nav__item::after {
    transition: none;
  }

  html.onepagev2 .v2-wordmark img {
    transition: none;
  }
}