/*
 * getvaultpac.com — the platform layer.
 *
 * This is the one VaultPac site that is not the service-page template wearing a
 * different accent. Bags, Expo and Exec share `styles.css` and differ by token
 * value; the master site shares none of it and carries this instead, because
 * the difference is not a palette. It is light versus dark, a marketing page
 * versus an operations surface, and a token override cannot cross that line —
 * `theme-exec.css` redefines eight colours and inherits three hundred rules
 * written for a white ground.
 *
 * ## The palette is the product's, not a new one
 *
 * Every value below is `packages/ui/tokens.css`, the system approved
 * 2026-09-09 that dispatch and the Provider App already render in. That is the
 * argument the page is making: the company that runs the movements and the page
 * describing them look like the same thing, because they are.
 *
 * Two values are deliberately *not* the product's:
 *
 * - `--gold` is #E8BC20, approved 2026-09-20 from the master mockup's buttons.
 *   The product token is still #D6A62E. They will converge once the dispatch
 *   impact is signed off; until then this file is the only place the new gold
 *   lives, which is why it is a variable and not a literal.
 * - `--black` is #080A0C rather than the product's #0D1115 — sampled from the
 *   same mockup, and a touch deeper because a marketing page has no dense grid
 *   to sit behind.
 *
 * ## Contrast
 *
 * Measured against the mockup rather than assumed from it: body #B5B9BC is
 * 10.0:1 on this ground, the card subcopy 8.4:1, the smallest micro-type
 * 4.9:1. All AA. The greys here are those greys — the reference did not need
 * correcting, which is worth recording because the brief expected it would.
 */

:root {
  /* ── ground ─────────────────────────────────────────────────────────── */
  --black: #080a0c;
  --panel: #0c1015;
  --raised: #12171c;
  --line: #232a31;
  --line-soft: #171d23;

  /* ── ink ────────────────────────────────────────────────────────────── */
  --white: #ffffff;
  --text: #eeeded;
  --muted: #b5b9bc; /* 10.0:1 */
  --dim: #a7a9ad; /*  8.4:1 */
  /* The floor, and it is measured against the RAISED panel rather than the
     page: #7B7E81 is 4.9:1 on the page ground but only 4.41:1 on #12171C,
     and every use of it — the movement reference, the owning business — is
     inside one of those panels. 4.93:1 there, 5.4:1 on the page. */
  --faint: #83868a;

  /* ── accent ─────────────────────────────────────────────────────────── */
  --gold: #e8bc20;
  --gold-hi: #f4d04c;
  --on-gold: #080a0c; /* 11.0:1 — never white on gold */

  /* ── status, for the operations panel ───────────────────────────────── */
  --ok: #35b85a;
  --live: #35b85a;
  --warn: #e59b2a;

  --nav-h: 76px;
  --max: 1240px;
  --lockup: 300px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  color-scheme: dark;
}

body {
  background: var(--black);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── header ───────────────────────────────────────────────────────────── */

.mast {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--black);
  /* A shadow, not a border. A 1px border is outside the height box and puts
     the first section 1px under the header — the exact drift that had to be
     chased out of the service-page template twice. */
  box-shadow: inset 0 -1px 0 var(--line-soft);
}

.mast > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

/* ── brand lockup ──────────────────────────────────────────────────────
   The same construction as the other three brands: a fixed-width column, the
   mark filling it, and the descriptor distributed to exactly that width
   beneath. The descriptor is real text — `text.descriptor` in the registry —
   because the brief is explicit that "THE MOVEMENT PLATFORM" must never be
   baked into the artwork, and because a line of type in the document resizes,
   reflows, gets read aloud and gets indexed. */

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: var(--lockup);
  flex: 0 0 auto;
}

.brand-lockup img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-descriptor {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  text-transform: uppercase;
}

/* Word spaces carry no glyph, so they are given a width of their own rather
   than being left to the flex distribution, which would space letters and
   words identically and turn the line into one long word. */
.brand-descriptor > span.sp {
  width: 0.24em;
}

/* ── navigation ───────────────────────────────────────────────────────── */

.mast .links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
}

/* `:not(.btn)` because `.mast .links a` (0,2,1) outranks `.btn-gold` (0,1,0),
   so the nav was painting the gold button's label muted grey — 1.1:1 on gold,
   the one control the page exists to get pressed and the only text on it
   nobody could read. Excluding buttons here is narrower than raising the
   button's specificity, which would start an arms race between two rules that
   should never have been competing. */
.mast .links a:not(.btn) {
  color: var(--muted);
  /* Nowrap because a flex-compressed link wraps its own label before the row
     wraps, which reads as a layout bug at three separate viewport bands. */
  white-space: nowrap;
  transition: color 0.15s;
}

.mast .links a:not(.btn):hover {
  color: var(--white);
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.btn:hover {
  border-color: var(--faint);
  color: var(--white);
}

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}

.btn-gold:hover {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
  color: var(--on-gold);
}

/* Focus must survive a dark ground. Two rings — gold inside, black outside —
   so the indicator is visible whether it lands on the page ground or on a gold
   fill, which a single-colour ring on this palette cannot manage. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--black);
}

/* ── page body ────────────────────────────────────────────────────────── */

main {
  padding-top: var(--nav-h);
}

.sec {
  padding: 88px 0;
}

h1,
h2,
h3 {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h1 {
  font-size: clamp(40px, 6.4vw, 78px);
}
h2 {
  font-size: clamp(28px, 3.6vw, 44px);
}
h3 {
  font-size: 18px;
  letter-spacing: 0;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.lede {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--muted);
  max-width: 62ch;
}

h2 + .lede,
h1 + .lede {
  margin-top: 22px;
}

/* ── footer ───────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 56px 0 44px;
  color: var(--dim);
  font-size: 14px;
}

.foot .foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}

.foot-brand img {
  width: 220px;
  height: auto;
}

.foot-descriptor {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.foot-fams {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}

.foot-fams h3 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
  font-weight: 600;
}

.foot-fams a {
  display: block;
  padding: 3px 0;
  color: var(--dim);
}

.foot-fams a:hover {
  color: var(--white);
}

.foot .legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--faint);
  font-size: 13px;
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  :root {
    --lockup: 260px;
  }
  .brand-descriptor {
    font-size: 8px;
  }
  .mast .links {
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .mast .links a:not(.btn) {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --lockup: 210px;
    --nav-h: 68px;
  }
  .brand-descriptor {
    font-size: 6.5px;
  }
  .wrap {
    padding: 0 18px;
  }
  .sec {
    padding: 60px 0;
  }
}

@media (max-width: 380px) {
  :root {
    --lockup: 180px;
  }
  .brand-descriptor {
    font-size: 5.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ═══ hero ═══════════════════════════════════════════════════════════════ */

.hero {
  padding: 72px 0 40px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  margin-bottom: 26px;
}

.gold {
  color: var(--gold);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-cta .btn {
  padding: 15px 26px;
  font-size: 15px;
}

/* ── the operations panel ───────────────────────────────────────────────
   Built from rows of data, and labelled "Sample" in the header. The brief
   allows it to run on illustrative records; what it does not allow is a page
   that looks like a live feed and is not one, so the word is in the markup
   rather than in a caveat further down the page. */

.ops {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin: 0;
  min-width: 0;
}

.ops-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 6px 16px;
}

.ops-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

.ops-sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.ops-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: 4px;
  padding: 3px 7px;
}

.op-rows,
.op-log,
.trip-legs,
.plan-grid {
  list-style: none;
}

.op-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--raised);
}

.op-row + .op-row {
  margin-top: 8px;
}

.op-ref {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--faint);
}

.op-leg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.op-route {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.op-load {
  font-size: 12.5px;
  color: var(--dim);
}

.op-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.op-pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Status colours are backgrounds at low alpha with a full-strength label, so
   every pill clears AA on this ground rather than relying on the tint. */
.tone-ok {
  background: rgba(53, 184, 90, 0.16);
  color: #6fe093;
}
.tone-moving {
  background: rgba(232, 188, 32, 0.16);
  color: var(--gold);
}
.tone-done {
  background: rgba(53, 184, 90, 0.16);
  color: #6fe093;
}
.tone-warn {
  background: rgba(229, 155, 42, 0.18);
  color: #f3b962;
}

.op-owner {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.op-log {
  margin-top: 16px;
  padding: 14px 12px 6px;
  border-top: 1px solid var(--line-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--dim);
}

.op-log li + li {
  margin-top: 7px;
}

.op-t {
  color: var(--faint);
}

.op-r {
  color: #6fe093;
}

/* ═══ three businesses ═══════════════════════════════════════════════════ */

.sec-alt {
  background: var(--panel);
  border-block: 1px solid var(--line-soft);
}

.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  margin-top: 44px;
}

.ch {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 24px 22px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.ch:hover {
  border-color: var(--faint);
}

.ch h3 {
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ch-desc {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.ch-blurb {
  margin-top: 16px;
  color: var(--dim);
  font-size: 14.5px;
  flex: 1;
}

.ch-go {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.ch-go:hover {
  color: var(--gold);
}

/* ═══ one trip, multiple movements ═══════════════════════════════════════ */


/* ═══ plan a movement ════════════════════════════════════════════════════ */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 40px;
}

.plan-opt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  transition:
    border-color 0.15s,
    background 0.15s;
}

.plan-opt:hover {
  border-color: var(--gold);
  background: var(--raised);
}

.plan-l {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

.plan-s {
  font-size: 13px;
  color: var(--dim);
}

.plan-b {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ═══ contact ════════════════════════════════════════════════════════════ */

.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
}

/* ═══ responsive ═════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .hero-grid,
  .contact-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* Copy first, panel second — the brief's mobile order, and it is the reading
     order in the markup already, so nothing has to be re-ordered visually. */
  .hero {
    padding-top: 48px;
  }
}

@media (max-width: 560px) {
  .ops {
    padding: 14px;
  }
  .op-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  .op-ref {
    grid-column: 1 / -1;
  }
  .op-log {
    font-size: 11px;
    overflow-x: auto;
  }
  .hero-cta .btn {
    width: 100%;
    text-align: center;
  }
}

/* ═══ the worked trip ════════════════════════════════════════════════════
 * A numbered manifest, not a diagram. Four rows with a type, a route and a
 * fulfilling business, under one trip header — because the reader has to
 * leave understanding that these are one thing, and a three-box flowchart of
 * "passengers / luggage / equipment" says what every logistics homepage says.
 * ═══════════════════════════════════════════════════════════════════════ */

.trip {
  margin: 46px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--black);
  overflow: hidden;
}

.trip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.trip-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: 4px;
  padding: 3px 8px;
}

.trip-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
}

.trip-moves {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm {
  display: grid;
  grid-template-columns: auto 132px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 24px;
}

.tm + .tm {
  border-top: 1px solid var(--line-soft);
}

.tm-n {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--gold);
}

.tm-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.tm-route {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.tm-by {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
}

.trip-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.trip-note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--muted);
  max-width: 62ch;
}

@media (max-width: 720px) {
  .tm {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 6px;
  }
  /* The number keeps its column and the rest stacks beside it, so the list
     still reads as an ordered manifest rather than four loose paragraphs. */
  .tm-n {
    grid-row: 1 / span 3;
    align-self: start;
    padding-top: 2px;
  }
  .tm-type,
  .tm-route,
  .tm-by {
    grid-column: 2;
    white-space: normal;
  }
}