/* ==========================================================================
   Payloads landing page — the "Classical" design system, plus this page's
   overrides.

   Imported from the Claude Design project `8e788527-f950-422f-af45-522f2d824f6e`
   ("Payloads Ocean Freight Landing"), file `Payloads Landing.dc.html` and the
   design system it references,
   `_ds/classical-b7c083ef-3750-44a6-870b-6327b524c98f/styles.css`.

   🔴 THIS PAGE IS NOT THE CONSOLE, AND DELIBERATELY DOES NOT MATCH IT.

   The console at /primacy wears the Primacy Design System: Inter, a blue accent,
   26px rows, 10px grid text, hairline borders and no shadows. It is a dense
   operational tool for people who live in it all day.

   This is Payloads' PUBLIC marketing site — a serif editorial layout on a warm
   off-white ground, read once by somebody deciding whether to move a load with
   them. Different audience, different job, so the two are allowed to differ.
   `docs/07-CONSOLE.md` governs the console; this file governs this page, and
   neither should be "harmonised" into the other without the owner saying so.

   ORDER MATTERS. The Classical system ships a gold accent (#b68235); the design
   overrides it to green (#1a7a20) at the page level. The override block sits
   after the system block for exactly that reason.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

/* ── Classical: tokens ─────────────────────────────────────────────────── */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* ── This page's accent: green, not the system's gold ──────────────────── */

:root {
  --color-accent: #1a7a20;
  --color-accent-100: #e7f1e5;
  --color-accent-200: #c5dec0;
  --color-accent-300: #96c290;
  --color-accent-400: #529a4c;
  --color-accent-500: #1a7a20;
  --color-accent-600: #16671b;
  --color-accent-700: #115115;
  --color-accent-800: #0d3d10;
  --color-accent-900: #08290b;
  --color-accent-2: #1a7a20;

  /* The dark band behind the accreditation, RTMS and audit-pack sections. */
  --color-band: #0f1410;
  --color-band-text: rgba(243, 242, 242, 0.82);
  --color-band-dim: rgba(243, 242, 242, 0.6);
  --color-band-faint: rgba(243, 242, 242, 0.55);
  --color-band-rule: rgba(243, 242, 242, 0.16);
  --color-band-hair: rgba(243, 242, 242, 0.1);
}

/* ── Classical: base ───────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; }
figure { margin: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* The sepia-toned, mounted photograph treatment. */
.plate {
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  box-sizing: border-box;
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
}

/* ── Classical: buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* ── Classical: forms ──────────────────────────────────────────────────── */

.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* ── Classical: tags ───────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── Classical: navigation ─────────────────────────────────────────────── */

.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
/* 🔴 `flex: 0 0 auto` fixes a real defect, not a tidy-up. `.nav` is a flex row and the brand
   carried the default `flex-shrink: 1`, so once the links, the phone button and the sign-in
   controls wanted room, the browser took it out of the LOGO -- measured 91x58 against a natural
   422x109: a 3.87 ratio rendered at 1.56. The wordmark was compressed to 40% of its width and
   read as a different, worse logo. `width: auto` on an <img> does not protect it; only refusing
   to shrink does. */
.nav-brand {
	margin-right: auto;
	flex: 0 0 auto;
}
.nav-brand img { flex: 0 0 auto; max-width: none; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* ── The measure ───────────────────────────────────────────────────────────
   The design fixed the container at 1200px. On a 1440px screen that wastes 120px
   a side; on a 1900px screen, 350px a side -- the page read as a column adrift in
   white rather than as a site.

   Widened to `min(1560px, 94vw)`. NOT full-bleed: the running prose here is
   justified, and a 1900px line is unreadable, so the container grows while every
   prose block keeps its own `ch` cap. What fills the extra width is the part that
   benefits -- photographs, the dark bands, and the auto-fit card grids, which
   simply gain a column.
   ────────────────────────────────────────────────────────────────────────── */

/* 🔴 1560px was still a cap, and on the owner's 1900px screen it reproduced the very problem
   it was meant to fix -- 82% of the viewport, 170px wasted a side. `min(1800px, 94vw)` means the
   viewport wins until 1915px, so a 1900px screen is genuinely filled, and only a very large
   display meets the cap. Prose stays readable because every prose block carries its own `ch`
   limit; it is the container that grows, not the line. */
.om-wrap { max-width: min(1800px, 94vw) !important; }

/* The nav shares the measure AND the container's own inline padding, so the wordmark starts on
   the same vertical as the headline beneath it. Taking only the centring half left the brand 61px
   to the left of the h1 -- a misalignment that reads as sloppiness rather than as a margin,
   because the eye lines the logo up against the first big thing under it. */
.nav {
  padding-inline: calc(max(0px, (100% - min(1800px, 94vw)) / 2) + clamp(20px, 5vw, 72px)) !important;
}

/* ── Responsive ────────────────────────────────────────────────────────────
   The bundle is desktop-first and says only that the sign-in hides below 1180px.
   These are the steps below that, which it does not cover.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .nav { flex-wrap: wrap; row-gap: 10px; }
}

@media (max-width: 760px) {
  .nav-brand img { height: 42px !important; }
  .nav a:not(.btn):not(.nav-brand) { font-size: 13px; }
  .om-wrap { max-width: 100% !important; }
}

/* Below this the phone number IS the call to action, so it keeps the top row and the
   section links wrap beneath rather than competing with it. */
@media (max-width: 620px) {
  .nav { justify-content: center; }
  .nav-brand { margin-right: 0; width: 100%; justify-content: center; }
}

/* ── Motion, ported from the theme handoff ─────────────────────────────────
   One easing curve throughout: cubic-bezier(0.22, 0.61, 0.36, 1). The handoff is
   explicit that all of it sits behind a master switch AND prefers-reduced-motion,
   and that photographs must show in full colour immediately when motion is off —
   a duotone that never resolves would look like a broken image, not a choice.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes om-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.om-enter { animation: om-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* Section clip-reveal. `om-done` removes the clip after the transition so nothing
   stays clipped — a lingering clip-path silently truncates content that grows later. */
.om-reveal { clip-path: inset(0 0 102% 0); transform: translateY(10px); }
.om-in {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.om-done { clip-path: none !important; }

@keyframes om-word { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
.om-word { display: inline-block; animation: om-word 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* Photographs arrive as a green duotone and resolve to full colour over 1.6s. */
.plate { overflow: hidden; position: relative; }
.om-duo img { filter: grayscale(100%) contrast(1.04) brightness(1.02); transition: filter 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.om-duo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent-700);
  mix-blend-mode: color;
  opacity: 0.9;
  transition: opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.om-duo.om-color img { filter: none; }
.om-duo.om-color::after { opacity: 0; }

.input { transition: border-color 0.3s ease, box-shadow 0.35s ease; }
.input:focus, .input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
  outline: none;
}
.btn { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.om-mag { transition: transform 0.16s ease-out; }

/* The alternating full-bleed section tint: 5% accent in the ground. */
.om-tint { position: relative; }
.om-tint::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg));
  z-index: -1;
}

/* The master switch, and the accessibility default that must behave identically. */
.om-still .om-reveal, .om-still .om-in { clip-path: none; transform: none; }
.om-still .om-word { animation: none; }
.om-still .om-duo img { filter: none; }
.om-still .om-duo::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .om-row, .om-enter, .om-word { animation: none; }
  .om-reveal { clip-path: none; transform: none; }
  .om-duo img { filter: none; }
  .om-duo::after { opacity: 0; }
  .btn, .input { transition: none; }
}

/* ── The nav sign-in, per the theme handoff's "Login handoff" section ────── */

/* Right-aligned on the same row as the section links, separated from them by a hairline rule.
   Measurements are the handoff's, not invented: 132 / 120 / 36px, 8px gaps. */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.nav-auth::before {
  content: '';
  align-self: stretch;
  width: 1px;
  background: var(--color-divider);
  margin-right: 8px;
}

.nav-auth .input { height: 36px; min-height: 36px; }
.nav-auth .input[name='usr'] { width: 132px; }
.nav-auth .input[name='pwd'] { width: 120px; }
.nav-auth .btn { height: 36px; white-space: nowrap; }

/* Signed-in state replaces the three controls. The name carries accent-700 -- the step the
   handoff reserves for accent text at paragraph size, because #1a7a20 clears only 3:1. */
.nav-auth .who { font-size: 14px; white-space: nowrap; }
.nav-auth .who b { font-weight: 400; color: var(--color-accent-700); }

/* A sign-in failure has to say so. The handoff explicitly leaves error state undesigned; this is
   the smallest honest thing -- one line, accent-free, never a colour that reads as success. */
.nav-auth .why {
  font-size: 12.5px;
  line-height: 16px;
  color: #8a2f2c;
  max-width: 168px;
}

/* The handoff hides the controls below 1180px. On a phone the page is a brochure; signing in is
   not what somebody is there to do, and three cramped controls would crowd out the phone number
   that IS the point. */
@media (max-width: 1180px) {
  .nav-auth { display: none; }
}

/* ── This page ─────────────────────────────────────────────────────────── */

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] .om-plus { transform: rotate(45deg); }

@keyframes om-row {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.om-row { animation: om-row 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) { .om-row { animation: none; } }

@media (max-width: 820px) {
  .om-railed { grid-template-columns: minmax(0, 1fr) !important; }
  .om-rail { flex-direction: row !important; flex-wrap: wrap; gap: 6px 20px !important; }
  .om-hero { grid-template-columns: minmax(0, 1fr) !important; }
}

/* The nav wraps rather than overflowing once the links stop fitting. The design
   is a single flex row at desktop width and says nothing about narrow screens;
   without this the brand and the phone button collide around 700px. */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; gap: 10px 18px; }
  .nav-brand { margin-right: auto; }
  .nav img { height: 44px !important; }
}

/* ── Additional effects ────────────────────────────────────────────────────
   Beyond the handoff's set. Each earns its place rather than decorating.
   ────────────────────────────────────────────────────────────────────────── */

/* The sticky nav condenses once the page moves: the content gets the height back and
   the bar reads as chrome rather than as part of the hero. */
.nav {
  transition: padding-block 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.28s ease,
              background-color 0.28s ease;
}
.nav.om-condensed {
  padding-block: 8px !important;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 var(--color-divider);
}
.nav-brand img { transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
.nav.om-condensed .nav-brand img { height: 40px !important; }

/* A photograph lifts slightly under the pointer -- a mounted print being picked up,
   not a card floating. */
.plate { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease; }
.plate:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.tag { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.tag-outline:hover { background: var(--color-accent-100); }

/* The whole FAQ row reads as the target, not just the summary text. */
details > summary { transition: color 0.2s ease; }
details:hover > summary { color: var(--color-accent-700); }

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-brand img, .plate { transition: none; }
  .plate:hover { transform: none; }
}