/* ==========================================================================
   Components introduced by the inner pages. Loaded after styles.css.
   Same tokens, same motion language — nothing here overrides the home page.
   ========================================================================== */

/* --- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container-bleed { width: 100%; }

.prose > * + * { margin-top: 1em; }
.prose p { margin: 0; }

/* --- Section heads ------------------------------------------------------- */
.section-head { max-width: 52rem; margin-bottom: var(--section-sm); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--space-md); }
.section-head .h2,
.section-head .h3 { margin-bottom: var(--space-md); }
.section-head > :last-child { margin-bottom: 0; }

/* --- Photo hero ---------------------------------------------------------- */
.hero--photo { min-height: 78svh; }
.hero--photo.hero--tall { min-height: 88svh; }
.hero--photo.hero--short { min-height: 58svh; }

.hero--photo .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 34s var(--ease-inout) infinite alternate;
}

.hero--photo .eyebrow { margin-bottom: var(--space-md); }

/* --- Split variants ------------------------------------------------------ */
.split--flip { }
.frames--flip { padding-right: 0; padding-left: 12%; }
.frames--flip .frames__lg { margin-left: auto; }
.frames--flip .frames__sm { right: auto; left: 0; }

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.section--bone .split__media img,
.section--dark .split__media img { aspect-ratio: 4 / 3; }

/* --- Tick lists ---------------------------------------------------------- */
.ticks { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }

.ticks li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--text-rg);
  line-height: 1.55;
}

/* LUX — a hairline check drawn in brand cyan rather than a bullet glyph. */
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.75rem; height: 0.4rem;
  border-left: 1px solid var(--brand-light);
  border-bottom: 1px solid var(--brand-light);
  transform: rotate(-45deg);
}

.ticks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-xl); }
.section--dark .ticks li { color: var(--white-70); }

/* --- Pillars ------------------------------------------------------------- */
.section--brand-tint { background: var(--brand-dark); color: var(--white); }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.pillar {
  padding: var(--space-xl) var(--space-lg);
  border-top: var(--hairline) solid var(--white-15);
}

.pillar__num {
  display: block;
  margin-bottom: var(--space-md);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--brand-light);
}

.pillar h3 { margin-bottom: var(--space-2xs); }
.pillar p { margin: 0; }

/* --- Tile grids ---------------------------------------------------------- */
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tiles--4 { grid-template-columns: repeat(4, 1fr); }
.tiles--three { grid-template-columns: repeat(3, 1fr); }

/* --- Feature chips ------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.chip {
  padding: 0.625rem 1.125rem;
  border: var(--hairline) solid var(--dark-15);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--dark-70);
  transition: border-color var(--dur-md) var(--ease-lux), color var(--dur-md) var(--ease-lux);
}

.chip:hover { border-color: var(--brand-light); color: var(--black); }

/* --- Horizontal gallery rail -------------------------------------------- */
.rail {
  overflow-x: auto;
  overflow-y: hidden;
  /* `proximity`, not `mandatory`: with mandatory snapping a smooth programmatic
     scroll is re-snapped to the current point before it can advance, so the
     arrow buttons silently do nothing. Proximity still snaps a manual swipe. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Without this the first item's snap point lands on the container edge and
     eats the track's leading gutter, so the rail starts flush to the viewport
     while every other section is inset. */
  scroll-padding-inline: var(--gutter);
}

.rail::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  gap: var(--space-2xs);
  padding-inline: var(--gutter);
}

.rail__item {
  flex: 0 0 auto;
  width: min(46rem, 74vw);
  margin: 0;
  scroll-snap-align: start;
}

.rail__item img,
.rail__item video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.rail__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.rail__arrow {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border: var(--hairline) solid var(--dark-30);
  border-radius: 50%;
  transition: background var(--dur-md) var(--ease-lux),
              border-color var(--dur-md) var(--ease-lux),
              color var(--dur-md) var(--ease-lux);
}

.rail__arrow:hover { background: var(--brand-light); border-color: var(--brand-light); color: var(--white); }
.rail__arrow svg { width: 1.125rem; height: 1.125rem; }

.rail__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  background: none;
  border-color: var(--dark-15);
  color: var(--black);
}

/* --- Destination routes -------------------------------------------------- */
.routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.route { position: relative; margin: 0; overflow: hidden; }

.route img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-lux);
}

.route:hover img { transform: scale(1.05); }

.route__label {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-lg);
  background: linear-gradient(to top, rgb(0 0 0 / 0.8), transparent);
  color: var(--white);
  font-size: var(--h5);
  font-weight: var(--w-display);
  letter-spacing: -0.01em;
}

/* --- Aircraft cards ------------------------------------------------------ */
/* Categories hold between one and four aircraft. A plain 1fr track would
   stretch a lone card across the whole container, so tracks are bounded at
   24rem and the row is centred instead. */
.ac-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 24rem));
  justify-content: center;
  gap: var(--space-lg);
}

/* Exactly four cards otherwise land 3 + 1. Squaring them off reads deliberate.
   Browsers without :has() keep the 3 + 1, which is still correct. */
.ac-cards:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 24rem));
}

.ac-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background: var(--white);
  border: var(--hairline) solid var(--dark-10);
  transition: border-color var(--dur-md) var(--ease-lux),
              transform var(--dur-md) var(--ease-lux);
}

.ac-card:hover { border-color: var(--brand-light); transform: translateY(-4px); }

.ac-card__media {
  display: block;
  margin-bottom: var(--space-md);
}

.ac-card__media img {
  width: 100%;
  filter: drop-shadow(0 14px 24px rgb(0 0 0 / 0.12));
}

.ac-card__name { margin-bottom: var(--space-3xs); }

.ac-card__specs {
  font-size: var(--text-sm);
  color: var(--dark-70);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-sm);
}

.ac-card .link { margin-top: auto; }

/* --- Category cards ------------------------------------------------------ */
/* Seven categories. auto-fit packed 5+2 at desktop, which reads like an
   accident; a fixed 4-wide grid gives a deliberate 4+3. */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xs);
}

@media (max-width: 1200px) {
  .cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cat-card {
  position: relative;
  display: block;
  min-height: 22rem;
  overflow: hidden;
  background: var(--neutral-dark);
  color: var(--white);
}

.cat-card__media { position: absolute; inset: 0; }

.cat-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity var(--dur-slow) var(--ease-lux), transform var(--dur-slow) var(--ease-lux);
}

.cat-card:hover .cat-card__media img { opacity: 0.65; transform: scale(1.06); }

.cat-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.15) 55%, transparent);
}

.cat-card__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-lg);
}

.cat-card__specs {
  font-size: var(--text-sm);
  color: var(--white-70);
  font-variant-numeric: tabular-nums;
}

/* --- Fleet index rows ---------------------------------------------------- */
.fleet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-4xl);
  align-items: center;
}

.fleet-row__copy .eyebrow { margin-bottom: var(--space-sm); }
.fleet-row__copy .h3 { margin-bottom: var(--space-md); }
.fleet-row__copy .specs { margin-top: var(--space-lg); }

.fleet-row__jets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 18rem));
  gap: var(--space-md);
}

.jet-chip {
  display: block;
  padding: var(--space-md);
  border: var(--hairline) solid var(--dark-10);
  transition: border-color var(--dur-md) var(--ease-lux), transform var(--dur-md) var(--ease-lux);
}

.jet-chip:hover { border-color: var(--brand-light); transform: translateY(-3px); }
.jet-chip img { width: 100%; margin-bottom: var(--space-sm); }

.jet-chip__name {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--w-light);
}

.jet-chip__spec {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dark-70);
  margin-top: var(--space-3xs);
}

/* --- Quote bar ----------------------------------------------------------- */
/* The site's primary conversion surface. Every competitor of consequence puts a
   From/To/Date/Passengers bar within a screen of the hero; this is ours. */
.quotebar-wrap { position: relative; z-index: 5; padding-block: var(--space-2xl); }

/* Lifted so it straddles the hero edge — reads as part of the hero, not a
   separate band, and guarantees it is above the fold. */
.quotebar-wrap--float {
  margin-top: calc(var(--space-3xl) * -1);
  padding-top: 0;
}

.quotebar {
  background: var(--white);
  border: var(--hairline) solid var(--dark-10);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.13);
  padding: var(--space-lg) var(--space-xl);
}

.quotebar-wrap--dark .quotebar {
  background: rgb(61 60 68 / 0.96);
  border-color: var(--white-15);
  color: var(--white);
  backdrop-filter: blur(14px);
}

.quotebar__eyebrow {
  margin: 0 0 var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--dark-70);
}

.quotebar-wrap--dark .quotebar__eyebrow { color: var(--white-50); }

.quotebar__fields {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 0.7fr max-content;
  align-items: end;
  gap: var(--space-lg);
}

.qb-field { display: grid; gap: var(--space-3xs); min-width: 0; }

.qb-field__label {
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--dark-70);
}

.quotebar-wrap--dark .qb-field__label { color: var(--white-50); }

/* Hairline-underlined inputs, matching the contact form rather than boxed
   fields — boxes would read as a booking engine, not a private desk. */
.qb-field__input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--dark-30);
  border-radius: 0;
  font: inherit;
  font-size: var(--text-rg);
  color: inherit;
  transition: border-color var(--dur-md) var(--ease-lux);
}

.qb-field__input::placeholder { color: var(--dark-30); }
.qb-field__input:focus { outline: none; border-bottom-color: var(--brand-light); }

.quotebar-wrap--dark .qb-field__input { border-bottom-color: var(--white-30); }
.quotebar-wrap--dark .qb-field__input::placeholder { color: var(--white-40); }

/* Safari renders date inputs at a different intrinsic size; pin the box. */
.qb-field--date .qb-field__input { min-height: 2.25rem; }

.qb-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  border-bottom: var(--hairline) solid var(--dark-30);
  padding-bottom: 0.5rem;
}

.quotebar-wrap--dark .qb-stepper { border-bottom-color: var(--white-30); }

.qb-stepper__btn {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--hairline) solid var(--dark-30);
  border-radius: 50%;
  font-size: var(--text-rg);
  line-height: 1;
  color: inherit;
  transition: border-color var(--dur-md) var(--ease-lux),
              background var(--dur-md) var(--ease-lux),
              color var(--dur-md) var(--ease-lux);
}

.qb-stepper__btn:hover {
  border-color: var(--brand-light);
  background: var(--brand-light);
  color: var(--white);
}

.quotebar-wrap--dark .qb-stepper__btn { border-color: var(--white-30); }

.qb-stepper__input {
  width: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--text-rg);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: inherit;
  -moz-appearance: textfield;
}

.qb-stepper__input::-webkit-outer-spin-button,
.qb-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qb-stepper__input:focus { outline: none; }

.qb-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.9rem 1.75rem;
  border: var(--hairline) solid var(--brand-light);
  border-radius: var(--radius-pill);
  background: var(--brand-light);
  color: var(--white);
  font-size: var(--text-rg);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--dur-md) var(--ease-lux),
              border-color var(--dur-md) var(--ease-lux);
}

.qb-submit:hover { background: var(--brand-medium); border-color: var(--brand-medium); }
.qb-submit svg { width: 1rem; height: 1rem; flex: none; }

.quotebar__note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-xs);
  color: var(--dark-70);
}

.quotebar-wrap--dark .quotebar__note { color: var(--white-50); }

@media (max-width: 1100px) {
  .quotebar__fields { grid-template-columns: 1fr 1fr; }
  .qb-submit { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 767px) {
  .quotebar-wrap--float { margin-top: calc(var(--space-xl) * -1); }
  .quotebar { padding: var(--space-lg); }
  .quotebar__fields { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* --- Featured aircraft stage (home) ------------------------------------- */
/* Composition follows the live build: a rolling-cloud sky behind the whole
   section, the aircraft name centred over it, and the aircraft pinned wide
   across the bottom crossing over the name. Slides move horizontally. */
.ac-section {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

/* The live section runs a looping cloud video full-height and centred. Masked to
   white top and bottom so it reads as sky rather than a pasted-in panel. */
.ac-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ac-sky video {
  width: auto;
  min-width: 100%;
  height: 100%;
  margin-inline: auto;
  object-fit: cover;
  /* Mirrored so the roll reads as travelling the other way — clouds have no
     fixed orientation, so flipping the footage is free, no re-encode needed. */
  transform: scaleX(-1);
}

.ac-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--white) 0%, rgb(255 255 255 / 0) 18%,
                    rgb(255 255 255 / 0) 80%, var(--white) 100%),
    linear-gradient(to right, var(--white) 0%, rgb(255 255 255 / 0) 9%,
                    rgb(255 255 255 / 0) 91%, var(--white) 100%);
}

.ac-inner { position: relative; z-index: 1; }

/* The shared .section-head caps at 52rem, which wraps this headline onto two
   lines; the live build runs it full width on one line. */
.ac-head {
  max-width: none;
  margin-bottom: var(--space-lg);
}

.ac-stage {
  position: relative;
  height: clamp(20rem, 34vw, 30rem);
  margin-bottom: var(--space-2xl);
}

.ac-stage:focus-visible { outline: 1px solid var(--brand-light); outline-offset: 8px; }

/* Horizontal slide, same direction and geometry as the live build, but the
   track, the jet and the name each travel on their own timing. That offset is
   the whole effect: the track leads, the jet trails and overshoots slightly
   into place, the name arrives last. Moving all three together is what made the
   original read as a stock carousel. */
.ac-viewport { position: relative; height: 100%; overflow: hidden; }

/* A glint of light sweeps the stage in the direction of travel while the
   track is mid-transition — main.js toggles `.is-flying` on transitionrun /
   transitionend, so it only ever plays alongside an actual slide change. */
.ac-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 42%, rgb(255 255 255 / 0.5) 50%, transparent 58%);
  transform: translate3d(calc(var(--dir, 1) * -130%), 0, 0);
  opacity: 0;
}

.ac-viewport.is-flying::after {
  opacity: 1;
  transform: translate3d(calc(var(--dir, 1) * 130%), 0, 0);
  transition: transform var(--dur-slide) var(--ease-glide), opacity var(--dur-slide) linear;
}

.ac-track {
  display: flex;
  height: 100%;
  transform: translate3d(calc(var(--i, 0) * -100%), 0, 0);
  transition: transform var(--dur-slide) var(--ease-slide);
}

.ac-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

.ac-slide__label {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
  padding-inline: var(--gutter);
}

.ac-slide__cat {
  margin: 0;
  font-size: var(--text-rg);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark-70);
}

/* The live build sets the name at 3.5rem with slight negative tracking. */
.ac-slide__name {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.05rem;
  margin: 0;
}

/* Wide and bottom-anchored, as on the live site. The slide is the positioning
   context, so the jet can overlap the name without pushing layout around. */
.ac-slide__jet {
  display: block;
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  width: min(95%, 74rem);
  margin-inline: auto;
}

.ac-slide__photo { display: block; width: 100%; }

/* --- Slide choreography --- */
/* `--n` is each slide's own fixed index (set once, in the markup); `--i` is
   the current slide, held on the track. Their difference is the jet's
   distance from center, so the outgoing jet and the incoming jet resolve to
   opposite signs automatically — one flies off the trailing edge, the next
   flies in from the leading edge — without main.js tracking which literal
   direction is which. */
.ac-slide__jet {
  opacity: 0;
  /* A wide bank and a clearing motion blur read as a jet actually crossing
     the frame, not a photo sliding into place. */
  transform: translate3d(calc((var(--n, 0) - var(--i, 0)) * 65%), 2.5%, 0)
             scale(0.85)
             rotate(calc((var(--n, 0) - var(--i, 0)) * -3.5deg));
  filter: blur(9px);
  transition: transform var(--dur-jet) var(--ease-glide),
              filter var(--dur-jet) var(--ease-glide),
              opacity var(--dur-md) var(--ease-inout);
  will-change: transform, filter;
}

.ac-slide.is-active .ac-slide__jet {
  opacity: 1;
  transform: none;
  filter: blur(0);
  /* Starts after the track is already moving — that gap is the parallax. */
  transition-delay: 70ms;
}

.ac-slide__label > * {
  opacity: 0;
  transform: translateY(0.85rem);
  transition: opacity var(--dur-ac-label) var(--ease-lux),
              transform var(--dur-ac-label) var(--ease-lux);
}

.ac-slide.is-active .ac-slide__cat { opacity: 1; transform: none; transition-delay: 200ms; }
.ac-slide.is-active .ac-slide__name { opacity: 1; transform: none; transition-delay: 280ms; }

/* Idle float on the active jet only — it sits on the <img>, inside the wrapper
   that owns the entrance transform, so the two never collide. Long, tiny, and
   out of phase with nothing else on the page. */
@keyframes ac-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-0.9%) rotate(-0.22deg); }
}

.ac-slide.is-active .ac-slide__photo {
  animation: ac-float 9s var(--ease-inout) infinite;
}

/* --- Aircraft thumbnails --- */
/* A small cutout of each jet rather than a bare dot, so the row also answers
   "what else is in the fleet" — same click-to-jump behaviour as the dots
   they replaced (main.js still treats them as the same tablist). */
.ac-thumbs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.ac-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  width: 7.5rem;
  padding: var(--space-2xs) var(--space-2xs) 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--dur-fast) var(--ease-inout);
}

.ac-thumb img {
  display: block;
  width: 100%;
  height: 3.75rem;
  object-fit: contain;
}

/* The underline is the selected-state indicator, in the same brand-light
   accent the dots used, so the row still reads at a glance which aircraft
   is current — not just which thumbnail is brightest. */
.ac-thumb::after {
  content: "";
  display: block;
  width: 1.4rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-inout);
}

.ac-thumb:hover { opacity: 0.7; }

.ac-thumb.is-on { opacity: 1; }

.ac-thumb.is-on::after { background: var(--brand-light); }

/* --- Spec values swapping --- */
/* The numbers are the content that actually changes between aircraft, so they
   get their own beat rather than blinking. Staggered left to right via --n. */
.ac-spec__value {
  transition: opacity 200ms var(--ease-inout), transform 200ms var(--ease-inout);
  transition-delay: calc(var(--n, 0) * 35ms);
}

.ac-specs.is-swapping .ac-spec__value {
  opacity: 0;
  transform: translateY(-0.35rem);
}

/* Next sits ABOVE previous, matching the live build — its `is-bottom-next` rule
   resolves to top:0 while `is-bottom-previous` sits 120px lower. */
.ac-stage__nav {
  position: absolute;
  inset: 0 var(--gutter) auto auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  pointer-events: none;
}

.ac-stage__arrow {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  border: var(--hairline) solid var(--dark-30);
  border-radius: 50%;
  background: var(--white-70);
  backdrop-filter: blur(6px);
  color: var(--black);
  transition: background var(--dur-md) var(--ease-lux),
              border-color var(--dur-md) var(--ease-lux),
              color var(--dur-md) var(--ease-lux);
}

.ac-stage__arrow:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: var(--white);
}

.ac-stage__arrow svg { width: 1.25rem; height: 1.25rem; }

/* The live slider is data-infinite="false", so the ends are hard stops. */
.ac-stage__arrow:disabled {
  opacity: 0.28;
  cursor: default;
  background: var(--white-70);
  border-color: var(--dark-15);
  color: var(--black);
}

/* Hairline-ruled spec bar: five icon specs, CTA pushed to the far end. */
.ac-specbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: 1.25rem;
  border-top: var(--hairline) solid var(--dark-15);
  border-bottom: var(--hairline) solid var(--dark-15);
}

/* Five fixed columns rather than a wrapping flex row: a long value like
   "7,500–8,200 nautical miles" would otherwise push Cargo Capacity onto a second
   row. Equal columns keep all five in line and let the text wrap in place, which
   is what the live bar does. */
.ac-specs {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
}

.ac-spec {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--neutral-medium);
}

.ac-spec__icon { flex: none; }

.ac-spec__icon svg {
  width: 2rem;
  height: auto;
  display: block;
}

.ac-spec__text { display: block; }

.ac-spec__label {
  margin-bottom: 0.125rem;
  font-size: var(--text-rg);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark-70);
}

.ac-spec__value {
  margin: 0;
  font-size: var(--text-rg);
  font-weight: var(--w-semibold);
  color: var(--black);
  font-variant-numeric: tabular-nums;
}

.ac-specbar__cta { flex: none; }

/* --- Aircraft detail hero panel ------------------------------------------ */
.ac-hero img {
  width: 100%;
  margin-bottom: var(--space-lg);
  filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.16));
}

/* --- Program cards ------------------------------------------------------- */
.prog-cards {
  display: grid
;  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-lg);
}

.prog-card {
  display: flex;
  flex-direction: column;
  border-top: var(--hairline) solid var(--white-15);
  padding-top: var(--space-md);
  transition: border-color var(--dur-md) var(--ease-lux);
}

.prog-card:hover { border-color: var(--brand-light); }

.prog-card__media { display: block; overflow: hidden; margin-bottom: var(--space-md); }

.prog-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-lux);
}

.prog-card:hover .prog-card__media img { transform: scale(1.05); }

.prog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

.prog-card__body .link { margin-top: auto; padding-top: var(--space-sm); }

/* --- Category chips (program pages) ------------------------------------- */
.cat-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-md);
}

.cat-chip {
  display: block;
  padding: var(--space-md);
  text-align: center;
  border: var(--hairline) solid var(--dark-10);
  transition: border-color var(--dur-md) var(--ease-lux), transform var(--dur-md) var(--ease-lux);
}

.cat-chip:hover { border-color: var(--brand-light); transform: translateY(-3px); }
.cat-chip img { width: 100%; margin-bottom: var(--space-sm); }

.cat-chip__name {
  font-size: var(--text-sm);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--dark-70);
}

/* --- Numbered service grid ---------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-xl);
}

.svc-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.svc {
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--dark-15);
}

.svc__num {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brand-light);
}

.svc h3 { margin-bottom: var(--space-2xs); }
.svc p { margin: 0; }

.section--dark .svc { border-top-color: var(--white-15); }
.section--dark .svc h3 { color: var(--white); }

/* --- Sectors ------------------------------------------------------------ */
.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-lg);
}

.sector {
  padding-top: var(--space-sm);
  border-top: var(--hairline) solid var(--dark-15);
  font-size: var(--text-md);
  font-weight: var(--w-light);
}

.sector__num {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  color: var(--brand-light);
  font-variant-numeric: tabular-nums;
}

/* LUX — the brand line set large in the italic serif, centred on brand navy. */
.accent--kicker {
  font-size: var(--h3);
  line-height: 1.2;
  color: var(--white);
}

/* --- Timeline ----------------------------------------------------------- */
.timeline-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: start;
}

.timeline {
  counter-reset: tl;
  border-top: var(--hairline) solid var(--white-15);
}

.tl {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: var(--hairline) solid var(--white-15);
}

.tl__time {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--brand-light);
}

.tl__body h3 { margin-bottom: var(--space-2xs); }
.tl__body p { margin: 0; }

.timeline__aside {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-lg));
  padding: var(--space-xl);
  border: var(--hairline) solid var(--white-15);
}

.timeline__aside .eyebrow { margin-bottom: var(--space-sm); }
.timeline__aside .h4 { margin-bottom: var(--space-sm); }
.timeline__aside p { margin: 0; }

/* --- Comparison table --------------------------------------------------- */
/* The table is wider than a phone, so it scrolls sideways. The feature column
   is pinned: without it, scrolling to reach the later programmes carried the row
   labels off-screen and left a grid of unlabelled ticks and dashes. */
.table-scroll {
  overflow-x: auto;
  /* Fade on the right edge as a hint there is more to scroll to. */
  -webkit-overflow-scrolling: touch;
}

.compare {
  width: 100%;
  min-width: 44rem;
  /* `separate` is required for sticky cells to keep their background — with
     `collapse` the borders are owned by the table and the pinned column shows
     the scrolling content through it. */
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.compare th[scope="row"],
.compare thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--neutral-lightest);
  /* Hairline on the pinned edge so the split reads as deliberate. */
  box-shadow: 1px 0 0 0 var(--dark-15);
}

/* Bottom borders move to the cells now that collapse is off. */
.compare th,
.compare td { border-bottom: var(--hairline) solid var(--dark-15); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

.compare th,
.compare td {
  padding: var(--space-md);
  vertical-align: middle;
}

.compare thead th {
  font-size: var(--text-sm);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--dark-70);
  border-bottom-color: var(--dark-30);
}

.compare thead th a { transition: color var(--dur-md) var(--ease-lux); }
.compare thead th a:hover { color: var(--brand-medium); }

.compare tbody th {
  font-size: var(--text-rg);
  font-weight: var(--w-light);
}

.compare td { text-align: center; }
.tick { color: var(--brand-light); font-size: 1.125rem; }
.dash { color: var(--dark-30); }

/* --- Fleet compare/filter tool -------------------------------------------- */
.fleet-compare__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.fleet-compare__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--dark-70);
}

.fleet-compare__field select {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--hairline) solid var(--dark-30);
  border-radius: var(--radius-sm, 0.25rem);
  background: var(--white);
  color: var(--black);
  font: inherit;
  min-width: 10rem;
}

/* Aircraft/category/passengers/range are the columns a trip requirement
   actually maps to — sortable. Speed and cabin volume are supporting detail
   once you're already looking at a short-listed row, not something anyone
   filters a fleet by, so they stay plain headers. */
.fleet-compare__table thead th button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.fleet-compare__table thead th button::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.35;
}

.fleet-compare__table thead th button[data-fx-dir="asc"]::after { transform: rotate(180deg); opacity: 1; }
.fleet-compare__table thead th button[data-fx-dir="desc"]::after { opacity: 1; }

.fleet-compare__table tbody tr[hidden] { display: none; }

.fleet-compare__empty {
  text-align: center;
  color: var(--dark-70);
  margin-top: var(--space-lg);
}

/* --- Article cards ------------------------------------------------------ */
.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-2xl);
}

.article__media { display: block; overflow: hidden; margin-bottom: var(--space-md); }

.article__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-lux);
}

.article:hover .article__media img { transform: scale(1.04); }
.article__title { margin-bottom: var(--space-2xs); }
.article__body { margin: 0; }

/* --- Offices ------------------------------------------------------------ */
.offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.office { position: relative; margin: 0; overflow: hidden; }

.office img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-lux);
}

.office:hover img { transform: scale(1.05); }

.office figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-lg);
  background: linear-gradient(to top, rgb(0 0 0 / 0.8), transparent);
  color: var(--white);
}

.office figcaption .eyebrow { color: var(--white-70); }

/* --- Contact form ------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-4xl);
  align-items: start;
}

.contact__copy .h2 { margin-bottom: var(--space-md); }

.contact__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.contact__meta dt {
  font-size: var(--text-md);
  font-weight: var(--w-light);
  margin-bottom: var(--space-3xs);
}

.contact__meta dd {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--dark-70);
}

.form { display: grid; gap: var(--space-md); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.field { display: grid; gap: var(--space-2xs); }

/* Honeypot — off-screen, not display:none/visibility:hidden. Some spam bots
   specifically skip filling fields hidden that way, since it's the known
   honeypot tell; a field that's merely positioned off-canvas still looks
   fillable to a naive scraper while staying invisible and untabbable for a
   real visitor (tabindex="-1" beside the aria-hidden on the label). */
.field--trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.field > span {
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--dark-70);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.875rem 0;
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--dark-30);
  border-radius: 0;
  font: inherit;
  color: var(--black);
  transition: border-color var(--dur-md) var(--ease-lux);
}

.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--brand-light); }

.form .btn { justify-self: start; margin-top: var(--space-sm); }

.form__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--dark-70);
}

.form__note--error { color: #b3261e; }
.footer .form__note--error { color: #ff6b61; }

/* Replaces the whole form on success — there's nothing left to fill in, so
   nothing left to show but the confirmation. Default colour assumes the
   contact page's light section; the footer newsletter form sits on
   .footer's dark background instead and needs the override below, same
   reason the Bloomberg band needed one there. */
.form__success {
  grid-column: 1 / -1;
  font-size: var(--text-md);
  color: var(--black);
}

.footer .form__success { color: var(--white); }

/* --- Legal -------------------------------------------------------------- */
.section--legal { padding-top: calc(var(--nav-h) + var(--section-md)); }

.prose--legal { margin-top: var(--space-2xl); color: var(--dark-70); }
.prose--legal h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-sm); color: var(--black); }
.prose--legal h2:first-child { margin-top: 0; }
.prose--legal p { margin-top: var(--space-sm); line-height: 1.7; }

/* --- 404 ---------------------------------------------------------------- */
.nf { padding-top: calc(var(--nav-h) + var(--section-lg)); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {

  .pillars,
  .svc-grid--three,
  .offices,
  .routes { grid-template-columns: 1fr; }

  .routes,
  .offices { gap: var(--space-2xs); }

  .fleet-row,
  .timeline-wrap,
  .contact { grid-template-columns: 1fr; gap: var(--space-2xl); }

  .timeline__aside { position: static; }

  .frames--flip { padding-left: 0; }

  .tiles--4,
  .tiles--three,
  .tiles--2 { grid-template-columns: 1fr; }

  .ticks--grid { grid-template-columns: 1fr; }

  .route img,
  .office img { aspect-ratio: 16 / 10; }

  .rail__item { width: min(30rem, 86vw); }
}

@media (max-width: 991px) {
  .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* No room to flank the aircraft at this width, so the arrows drop below it and
     the aircraft lifts to clear them. The offset goes on the photo, not the
     slide: slides are flex items now, so `bottom` on the slide would shift the
     whole thing up and the viewport would clip the name off the top. */
  .ac-stage { height: clamp(20rem, 56vw, 26rem); }
  /* On the wrapper, not the <img> — the image is a plain in-flow child now, and
     the wrapper is what is absolutely positioned. */
  .ac-slide__jet { bottom: 5rem; }
  .ac-stage__arrow { width: 3.5rem; height: 3.5rem; }

  /* The horizontal white fade eats too much of a narrow viewport. */
  .ac-sky::after {
    background: linear-gradient(to bottom, var(--white) 0%, rgb(255 255 255 / 0) 14%,
                                rgb(255 255 255 / 0) 84%, var(--white) 100%);
  }

  .ac-stage__nav {
    inset: auto 0 0;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2xs);
  }

  /* The column layout on desktop puts next above previous on purpose, but in
     a row that DOM order reads as next-then-previous left to right — the
     wrong way round. Reorder visually only, so IDs/JS are untouched. */
  #fleetPrev { order: -1; }

  .ac-specbar { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .ac-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ac-specbar__cta { width: 100%; }
}

@media (max-width: 767px) {
  .form__row { grid-template-columns: 1fr; }
  .cat-cards { grid-template-columns: 1fr; }
  .hero--photo { min-height: 68svh; }
  .hero--photo.hero--tall { min-height: 72svh; }
  .rail__nav { justify-content: center; }

  /* Seven thumbnails wrapped to three cramped rows at this width — a swipeable
     single row (the same pattern as .rail elsewhere) reads far better. */
  .ac-thumbs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ac-thumbs::-webkit-scrollbar { display: none; }
  .ac-thumb { flex: 0 0 auto; }
}

/* Confirmation that quote-bar details survived the page change. */
.form__prefill {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--brand-light);
  background: var(--dark-05);
  font-size: var(--text-sm);
  color: var(--dark-70);
}

/* --- Instagram Reels ----------------------------------------------------- */
.ig__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--section-sm);
}

.ig__head .section-head { margin-bottom: 0; }
.ig__follow { flex: none; }

/* Four portrait tiles across. An explicit column count rather than auto-fit,
   which packed them unevenly and orphaned the last one. */
.ig__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xs);
}

/* The whole tile is the link — the loop is a preview, not a player, so there are
   no controls to fight with and one tap goes straight to the real reel. */
.ig-reel {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--neutral-dark);
}

/* 9:16 — reels are portrait; anything else letterboxes them. */
.ig-reel__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
}

.ig-reel__media video,
.ig-reel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The poster sits above the video until the loop is actually playing, so a tile
   is never blank while the file is still being fetched. */
.ig-reel__media img {
  z-index: 1;
  transition: opacity var(--dur-md) var(--ease-lux);
}

.ig-reel.is-playing .ig-reel__media img { opacity: 0; }

.ig-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.1) 46%, transparent);
  pointer-events: none;
}

.ig-reel__media video,
.ig-reel__media img { transform: scale(1.001); transition: transform var(--dur-slow) var(--ease-lux), opacity var(--dur-md) var(--ease-lux); }
.ig-reel:hover .ig-reel__media video,
.ig-reel:hover .ig-reel__media img { transform: scale(1.05); }

.ig-reel__meta {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: block;
  padding: var(--space-md);
  color: var(--white);
}

.ig-reel__caption {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* LUX — the prompt to leave the site stays hidden until the tile is engaged. */
.ig-reel__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--white-70);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity var(--dur-md) var(--ease-lux), transform var(--dur-md) var(--ease-lux);
}

.ig-reel:hover .ig-reel__cue,
.ig-reel:focus-visible .ig-reel__cue { opacity: 1; transform: none; }

.ig__empty {
  margin: 0;
  padding: var(--space-lg);
  border: var(--hairline) dashed var(--white-30);
  font-size: var(--text-sm);
  color: var(--white-70);
}

.section--bone .ig__empty { border-color: var(--dark-30); color: var(--dark-70); }
.ig__empty code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* Four portrait reels across a tablet gave 171px-wide columns at 768px. Two is
   the readable minimum for 9:16 video, so the switch happens for the whole
   tablet band rather than only on phones. */
@media (max-width: 991px) {
  .ig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ig__head { flex-direction: column; align-items: flex-start; }
  .ig-reel__caption { font-size: var(--text-xs); }
  .ig-reel__meta { padding: var(--space-sm); }
  /* No hover on touch, so the cue is always shown. */
  .ig-reel__cue { opacity: 1; transform: none; }
}

/* --- Bloomberg interview: click-to-play video card ---------------------- */
/* The card is a link until main.js upgrades it, so everything here has to read
   correctly as a link first and as a player second. */

.vidcard {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.vidcard__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--black);
}

.vidcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-lux),
              opacity var(--dur-md) var(--ease-inout);
}

.vidcard:hover .vidcard__media img,
.vidcard:focus-visible .vidcard__media img { transform: scale(1.03); }

/* Play button. A ring plus a triangle built from a single border trick, so no
   SVG request and no icon font. */
.vidcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--white-70);
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  transition: background var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout),
              transform var(--dur-md) var(--ease-lux);
}

.vidcard__tri {
  width: 0;
  height: 0;
  /* Optically centred: the triangle's mass sits left of its box centre. */
  margin-left: 0.35rem;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-left: 0.85rem solid var(--white);
}

.vidcard:hover .vidcard__play,
.vidcard:focus-visible .vidcard__play {
  background: var(--brand-light);
  border-color: var(--brand-light);
  transform: scale(1.08);
}

.vidcard__time {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  padding: 0.2rem var(--space-2xs);
  background: rgb(0 0 0 / 0.7);
  color: var(--white);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.vidcard--sm .vidcard__play { width: 3.25rem; height: 3.25rem; }
.vidcard--sm .vidcard__tri {
  margin-left: 0.25rem;
  border-top-width: 0.35rem;
  border-bottom-width: 0.35rem;
  border-left-width: 0.6rem;
}

/* The iframe main.js swaps in. It replaces the <img>/play/time inside
   .vidcard__media, so the 16/9 box and background are already correct. */
.vidcard__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Media page feature block --- */
/* Deliberately wider than the container it sits in: the player breaks out to
   near-full-bleed so the interview reads as the page's main event, not an inset
   figure. The 4vw inset keeps a sliver of margin at every width rather than
   running hard into the screen edge. */
.videofeat__stage {
  width: calc(100vw - 8vw);
  max-width: 110rem;
  margin-inline: calc(50% - 50vw + 4vw);
}

/* The container's own gutter is already gone at this width, so put the caption
   back in line with the player rather than the text above it. */
.videofeat__caption { padding-inline: var(--space-3xs); }

.videofeat__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

.videofeat__caption strong { color: var(--white); letter-spacing: 0.02em; }
.videofeat__caption span { color: var(--white-70); }
.section--bone .videofeat__caption strong { color: var(--black); }
.section--bone .videofeat__caption span { color: var(--dark-70); }

/* --- Home page band, sitting under the As Seen On strip --- */
.bloomberg-band__inner {
  display: grid;
  /* The body column was 1fr, stretching to fill whatever the container had
     left over. Grid tracks pack to the start by default with no 1fr track
     in the mix, so switching it to a fixed width was the right idea — but
     30rem + 26rem is, on its own, already most of a typical viewport, so
     the row still reached almost to the right edge on its own content's
     account, not because anything was stretching it. Narrower columns,
     not a width/margin fix on the row itself, are what actually move it
     left. */
  grid-template-columns: minmax(0, 22rem) minmax(0, 18rem) auto;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: var(--hairline) solid var(--dark-15);
}

.bloomberg-band__title { margin: 0 0 var(--space-3xs); }
.bloomberg-band__body p { margin: 0; }
.bloomberg-band__body .eyebrow { margin-bottom: var(--space-2xs); }

.bloomberg-band__cue {
  white-space: nowrap;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-medium);
}

.bloomberg-band__inner:hover .bloomberg-band__cue .link-arrow { transform: translateX(0.35rem); }

/* The thumbnail is large enough that the three-column row only works on a wide
   screen. Below that it starves the copy column and the title wraps to three
   lines, so drop the cue first, then stack. */
@media (max-width: 1199px) {
  .bloomberg-band__inner {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .bloomberg-band__cue { display: none; }
}

@media (max-width: 767px) {
  .bloomberg-band__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .vidcard--sm { max-width: 28rem; }
}

/* Article cards that are links */
.article--link { display: block; text-decoration: none; color: inherit; }

.article__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-medium);
}

.article--link:hover .article__media img { transform: scale(1.04); }
.article--link:hover .article__cue .link-arrow { transform: translateX(0.35rem); }

/* Once playing, the card is no longer interactive chrome. */
.vidcard.is-playing { cursor: default; }
.vidcard.is-playing .vidcard__media img { transform: none; }

/* The caveat under any spec table. Deliberately quiet — it has to be readable
   without competing with the figures it qualifies. */
.spec-note {
  max-width: 44rem;
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--dark-70);
}

.specs--light + .spec-note,
.section--dark .spec-note { color: var(--white-50); }

/* Press item date. Sits above the headline, where a wire story would carry it. */
.article__date {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-70);
}


/* --- Tablet band ---------------------------------------------------------- */
/* The journey tiles collapsed straight from three columns to one, so at 1112px
   each tile was 1023px wide and 420px tall — three of those is a lot of scroll
   for very little information. Two across uses the width the band actually has. */
@media (min-width: 768px) and (max-width: 1150px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last tile spans the row rather than leaving a hole beside it. */
  .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}