/* ============================================================================
   Rantizo company pages: /company/, /company/leadership/ and the 404.
   Built on pages.css. Page-specific pieces only:
     .leader / .plate   leadership dossiers; a credential plate stands in for
                        a portrait, cut on the deck's slash, lit by the pointer
     .route             the company timeline, drawn like a flight path
     .values            four values, one row; --stack, one to a row
     .roles             open roles
   ========================================================================== */

/* =============================================================== LEADERS == */
.leader { padding-top: clamp(4.5rem, 9vw, 8rem); }
.leader + .leader { padding-top: clamp(3.5rem, 7vw, 6rem); }
.leader__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: 2rem clamp(2rem, 6vw, 7rem);
  align-items: start;
}

/* The plate: a slab like the home page's mission panels, carrying the one
   credential that defines the person. A soft light crosses its hatch: it
   follows the pointer where there is one, and the scroll where there is not. */
@property --lx { syntax: "<percentage>"; inherits: false; initial-value: 28%; }
@property --ly { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
.plate {
  position: relative; margin: 0;
  aspect-ratio: 5 / 4;
  /* Both long edges cut on the deck's 12.5deg: the cut is the height times
     tan(12.5deg), and the height is 0.8 of the width at this aspect. */
  --cut: calc(80% * var(--slash));
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  container-type: inline-size;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background:
    repeating-linear-gradient(102.5deg, transparent 0 21px, rgb(242 239 234 / 0.04) 21px 22px),
    var(--sc-surface);
  isolation: isolate;
  --lx: 28%;
  --ly: calc(15% + var(--sc-p, 0.5) * 70%);
  transition: --lx 700ms var(--sc-ease-out), --ly 700ms var(--sc-ease-out);
}
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 72% at var(--lx) var(--ly), rgb(255 138 61 / 0.17), transparent 72%);
}
/* The deck's slash, drawn once in orange along the leading cut. */
.plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--sc-accent);
  clip-path: polygon(var(--cut) 0, calc(var(--cut) + 2px) 0, 2px 100%, 0 100%);
}
.plate__kicker { padding-left: calc(17.7cqi + 0.25rem); }
.plate__mark {
  margin: 0; align-self: end;
  font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 900;
  font-size: 27cqi; line-height: 0.78; letter-spacing: -0.01em;
  color: var(--sc-accent);
  transform: translate3d(0, calc((0.5 - var(--sc-p, 0.5)) * 5cqi), 0);
}
.plate__caption {
  margin-top: 1.125rem; max-width: 30ch;
  padding-right: 15cqi;
  font-size: 0.9375rem; line-height: 1.45; color: var(--ink-mid);
}

.leader__body { border-top: 1px solid var(--sc-hairline-strong); padding-top: 1.25rem; }
.leader__name {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 800;
  font-size: clamp(2.5rem, 4.8vw, 5rem); line-height: 0.9; text-transform: uppercase;
  word-spacing: 0.06em; text-wrap: balance;
}
.leader__role { margin: 0.75rem 0 0; color: var(--sc-accent); font-size: 1.0625rem; }
.leader__list { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.leader__list li {
  padding: 0.95rem 0; border-bottom: 1px solid var(--sc-hairline);
  font-size: 1.0625rem; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty;
}
/* A leader in their own words: the press release's quote voice, a size down
   to sit in the dossier, marked by the same orange slash. Then the bio. */
.leader__quote { position: relative; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; padding-left: clamp(1.75rem, 3vw, 2.5rem); }
.leader__quote::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.2rem;
  width: 4px; height: 2.6rem; background: var(--sc-accent);
  transform: skewX(-12.5deg); transform-origin: 0 100%;
}
.leader__quote p {
  margin: 0;
  font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 500;
  font-size: clamp(1.25rem, 0.95rem + 0.85vw, 1.625rem); line-height: 1.28; letter-spacing: -0.012em;
  color: var(--sc-ink); text-wrap: pretty;
}
/* About 75 characters a line. */
.leader__bio {
  max-width: 40rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1.25rem;
  border-top: 1px solid var(--sc-hairline);
}
.leader__bio p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-mid); text-wrap: pretty; }
.leader__bio p + p { margin-top: 1em; }

/* Where the dossier runs longer than its plate, the plate rides beside it. */
@media (min-width: 861px) {
  .leader .plate { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}
@media (max-width: 860px) {
  .leader__grid { grid-template-columns: 1fr; }
  .plate { max-width: 34rem; }
}

/* A page's closing exits: one row of link-arrows. */
.page-exits { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; padding-top: clamp(3.5rem, 7vw, 6rem); }

/* ============================================================= STATEMENT == */
.statement { border-top: 0; }
.statement__lead {
  margin: 0; max-width: 26ch;
  font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 500;
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.875rem); line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance;
}
.statement__sub { margin: 1.5rem 0 0; max-width: 46ch; color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.55; }

/* ================================================================= ROUTE ==
   A flight path. The track is a hairline; the orange line over it is drawn to
   the reader's eye line by company.js (--route, 0..1), and each stop lights
   as the line reaches it. */
.route {
  --dot: 11px; --rail: 9.5rem;
  position: relative; list-style: none; margin: 0; padding: 0.25rem 0 0;
}
.route::before, .route::after {
  content: ""; position: absolute; top: 0.8rem; bottom: var(--route-bottom, 8rem);
  left: calc(var(--rail) + var(--dot) / 2 - 0.5px); width: 1px;
}
.route::before { background: var(--sc-hairline-strong); }
.route::after {
  width: 2px; margin-left: -0.5px;
  background: var(--sc-accent);
  transform-origin: 50% 0; transform: scaleY(var(--route, 1));
}
.route__stop {
  position: relative;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: calc(var(--dot) + 1.75rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.route__stop::before {
  /* The waypoint: hollow until the line reaches it. */
  content: ""; position: absolute; z-index: 1; top: 0.38rem; left: var(--rail);
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--sc-canvas); box-shadow: inset 0 0 0 1.5px var(--sc-hairline-strong);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.route__stop.is-past::before, .route:not(.is-live) .route__stop::before { background: var(--sc-accent); box-shadow: 0 0 0 4px rgb(255 102 0 / 0.16); }
.route__when {
  margin: 0; padding-top: 0.2rem;
  font: 500 0.75rem/1.5 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  transition: color 240ms var(--sc-ease-out);
}
.route__stop.is-past .route__when, .route:not(.is-live) .route__when { color: var(--sc-ink); }
.route__what { margin: 0; max-width: 44ch; font-size: 1.125rem; line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.route__stop--end { padding-bottom: 0; }
.route__stop--end .link-arrow { grid-column: 2; justify-self: start; margin-top: 1.5rem; }
.route__big {
  display: block; margin-bottom: 0.75rem;
  font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--sc-ink);
}
.route__big b { color: var(--sc-accent); font-weight: inherit; }
@media (max-width: 560px) {
  .route { --rail: 0px; }
  .route__stop { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--dot) + 1.25rem); column-gap: 0; }
  .route::before, .route::after { left: calc(var(--dot) / 2 - 0.5px); }
  .route__stop::before { left: 0; }
  .route__when { margin-bottom: 0.4rem; }
  .route__stop--end .link-arrow { grid-column: 1; }
}

/* ================================================================ VALUES == */
.values {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem);
  counter-reset: value;
}
.values li {
  counter-increment: value;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(6rem, 8vw, 8rem);
  padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 0.92; text-transform: uppercase;
  text-wrap: balance;
}
.values li::before {
  content: counter(value, decimal-leading-zero);
  margin-bottom: auto; padding-bottom: 1rem;
  font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.09em; color: var(--sc-accent);
}
/* Stacked: one field to a row, its number beside it (leadership). */
.values--stack { grid-template-columns: minmax(0, 1fr); }
.values--stack li {
  flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0;
  min-height: 0; padding: clamp(0.875rem, 1.6vw, 1.25rem) 0;
}
.values--stack li:first-child { padding-top: 0.15rem; }
.values--stack li::before { flex: none; width: 3.5rem; margin: 0; padding: 0; }
@media (max-width: 560px) {
  .values li { min-height: 0; font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .values li::before { padding-bottom: 1.25rem; }
  .values--stack li::before { width: 2.75rem; padding-bottom: 0; }
}

/* ================================================================ GLANCE == */
.glance {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
}
@media (max-width: 860px) { .glance { grid-template-columns: 1fr; } }

/* ================================================================= ROLES == */
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.role {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 2rem; align-items: end;
  padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--sc-hairline);
}
.roles .role:first-child { padding-top: 0; }
.roles { border-top: 0; }
.role__name {
  grid-column: 1; margin: 0;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
}
.role__text { grid-column: 1; margin: 0; max-width: 52ch; color: var(--sc-ink-soft); line-height: 1.55; }
.role .link-arrow { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 560px) {
  .role { grid-template-columns: 1fr; }
  .role .link-arrow { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.75rem; }
}

/* ================================================================== SHOP ==
   The shop floor, full bleed, settling as it passes: the photograph starts a
   touch close and eases back to rest by the time it leaves (--sc-p). */
.shop { position: relative; margin: clamp(4.5rem, 9vw, 8rem) 0 0; isolation: isolate; }
/* As tall as the photograph at full width (1600 x 1000), up to one screen,
   so the flag and the airframe both stay in frame. */
.shop__media {
  height: max(26rem, min(100svh, 62.5vw)); overflow: hidden; background: var(--sc-surface);
}
.shop__media img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%;
  transform: scale(calc(1.08 - var(--sc-p, 0.5) * 0.08));
  will-change: transform;
}
.shop__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgb(11 11 12 / 0.92), rgb(11 11 12 / 0.35) 34%, transparent 55%),
    linear-gradient(to bottom, rgb(11 11 12 / 0.55), transparent 18%);
}
.shop__cap {
  position: absolute; left: 0; right: 0; bottom: clamp(1.75rem, 4vw, 3rem); z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
}
.shop__title { font-size: clamp(3rem, 7vw, 7.5rem); }
.shop__title > span { display: inline-block; }
.shop__title > span + span { color: var(--sc-accent); }
.shop__cap .t-label { color: var(--ink-mid); padding-bottom: 0.5rem; }
@media (max-width: 860px) {
  .shop__media { height: 72svh; }
  .shop__media img { object-position: 56% 0%; }
}

/* =============================================================== AIRPARK ==
   The plan in monochrome, the site's orange redrawn over it. On a phone the
   sheet keeps near its native size and the visitor pans along the runway. */
.airpark__lead { max-width: 22ch; }
.plan { margin-top: clamp(2.5rem, 5vw, 4rem); }
.plan__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border-radius: var(--r); }
.plan__scroll:focus-visible { outline-offset: 4px; }
.plan__sheet {
  position: relative; aspect-ratio: 1320 / 310; background: #0e0e0f;
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
}
.plan__sheet img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  filter: grayscale(1) brightness(0.62) contrast(1.18);
}
.plan__sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plan__edge { fill: rgb(255 102 0 / 0.05); stroke: var(--sc-accent); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.plan__runway { stroke: var(--sc-accent); stroke-width: 1.5; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; }
.plan__zone rect { fill: rgb(11 11 12 / 0.9); stroke: rgb(242 239 234 / 0.28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan__zone text {
  fill: var(--sc-ink); font: 500 11px/1 var(--sc-font-mono); letter-spacing: 0.08em;
  text-anchor: middle; dominant-baseline: central;
}
.plan__cap {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.875rem;
  font: 500 0.75rem/1.4 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .plan .plan__edge { stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.8s var(--sc-ease-in-out) 0.3s, fill-opacity 0.6s ease 1.9s; }
  .plan .plan__runway { opacity: 0; transition: opacity 0.5s ease 1.8s; }
  .plan .plan__zone { opacity: 0; transform-box: fill-box; transition: opacity 0.35s ease calc(2.1s + var(--i) * 0.12s); }
  .plan.sc-in .plan__edge { stroke-dashoffset: 0; fill-opacity: 1; }
  .plan.sc-in .plan__runway, .plan.sc-in .plan__zone { opacity: 1; }
}
@media (max-width: 860px) {
  .plan { padding-inline: 0; }
  .plan__sheet { width: 1180px; }
  .plan__cap { padding-inline: var(--sc-gutter); }
}

/* =================================================================== 404 == */
.lost { min-height: calc(100svh - 4rem); }
.lost__grid {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: 3rem clamp(2rem, 6vw, 7rem); align-items: end;
}
.lost__plan {
  position: absolute; z-index: 0;
  right: var(--sc-gutter); top: calc(var(--nav-h) + clamp(2rem, 6vh, 4rem));
  width: min(44vw, 40rem); height: auto; overflow: visible;
}
.lost__passes { fill: none; stroke: rgb(242 239 234 / 0.32); stroke-width: 1.25; stroke-dasharray: 5 6; }
.lost__track {
  fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.lost__ring { fill: none; stroke: var(--sc-accent); stroke-opacity: 0.5; stroke-width: 1.25; }
.lost__dot { fill: var(--sc-accent); }
@media (prefers-reduced-motion: no-preference) {
  .lost__track { animation: lost-track 2.4s var(--sc-ease-in-out) 0.3s both; }
  .lost__ring, .lost__dot { animation: lost-arrive 0.5s var(--sc-ease-out) 2.5s both; }
  .lost__ring { animation-name: lost-ping; animation-duration: 2.2s; animation-iteration-count: infinite; transform-origin: 118px 250px; }
}
@keyframes lost-track { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lost-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes lost-ping { 0% { opacity: 0; transform: scale(0.6); } 20% { opacity: 0.6; } 100% { opacity: 0; transform: scale(2.2); } }
@media (max-width: 860px) {
  .lost__plan { display: none; }
  .lost { min-height: 0; }
  .lost__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .shop__media img { transform: none; will-change: auto; }
  .plate__mark { transform: none; }
  .plate { transition: none; }
}