/* Hallmark · theme: custom · idea: "each metal presented like a flagship product, and the journey to India told as one continuous scroll" · vibe: "gallery calm, metal colour, cinematic scroll" · job: hire · genre: modern-minimal
 * paper: light 98.4 / night 13.5, alternating · accent: gold oklch(76% 0.13 80) for actions, from the logo, four metal colours as named roles · faces: Onest (display and body), JetBrains Mono for record values
 * hero: dark stage, poster headline over four element tiles that rise on load and recede on scroll · nav: thin frosted bar · footer: statement · imagery: element symbols as type, generated stand-ins small in the metal gallery, the shipment record built · signature: the metals as element tiles (Cu, Al, CuZn, Zn) in their own colours
 * axes: dark/grotesk-sans/warm · posture: full palette (night and paper alternate as surfaces; copper signal; four metal roles, each only on its own panel) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: S, a dark Apple-like page fits any brand; the element symbols and atomic numbers, the ISRI codes and the yard-to-mill route are what only this exporter shows */
/* Hallmark · answered F8 · the owner asked for Apple-style high motion: hero words, metal spotlight, pinned gallery, five-scene journey, statement wipe; each on structure with a static end state */
/* Hallmark · waive 80 · the journey scenes draw a container, a ship and a route · the owner asked for loading, quality check and shipping shown as motion graphics, built from plain geometry */
/* Hallmark · dismissed 26a · inner pages link /site.css by root path; the linter reads it relative to the folder, the same stylesheet passes on the home page */
/* Hallmark · dismissed 58 · metal, plastics, textiles, auto, how-we-export and booking pages carry an ISRI grade table and a buyer FAQ that search needs, counted as running copy */
/* Hallmark · dismissed 25 · the panel line and the route lede are single sentences, inside the 28ch allowance */
/* Hallmark · dismissed 34 · same root-path stylesheet as 26a; base.css sets overflow-x: clip on html and body */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 52px; }

/* ---------- document ---------- */
body { background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; letter-spacing: -0.011em; font-feature-settings: "ss01" 1; }
h1, h2, h3 { color: inherit; }
h3 { font-weight: 600; letter-spacing: -0.02em; }
.lead { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.35; letter-spacing: -0.015em; }
small, .small, figcaption, th, .meta { font-size: var(--text-sm); color: var(--color-muted); letter-spacing: -0.005em; }
a { color: inherit; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
.mono { font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* night bands: every rule that paints night swaps its ink */
.night { background: var(--color-night); color: var(--color-night-ink); }
.night .lead, .night p { color: var(--color-night-muted); }
.night h1, .night h2, .night h3, .night strong { color: var(--color-night-ink); }
.night .meta, .night small, .night figcaption { color: var(--color-night-muted); }
.night :focus-visible { outline-color: var(--color-focus-night); }
.night a.link { color: var(--color-accent-on-night); }

/* ---------- pills (controls) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-md)/1 var(--font-body); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.pill:hover { background: var(--color-ink-2); }
.pill:active { transform: scale(0.98); }
.pill:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pill:disabled, .pill[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.pill[aria-busy="true"] { cursor: progress; }
.pill--copper { background: var(--color-accent); color: var(--color-accent-ink); }
.pill--copper:hover { background: var(--color-accent-deep); }
.pill--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.pill--ghost:hover { background: var(--color-paper-2); }
.night .pill--ghost { color: var(--color-night-ink); border-color: var(--color-night-rule); }
.night .pill--ghost:hover { background: var(--color-night-2); }
.night .pill:not(.pill--copper):not(.pill--ghost) { background: var(--color-night-ink); color: var(--color-night); }
.pill--small { min-height: 34px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.pill--large { min-height: 56px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.pill .ico { width: 20px; height: 20px; flex-shrink: 0; }
.textlink { color: var(--color-accent-text); text-decoration: none; font-size: var(--text-lg); }
.textlink:hover { text-decoration: underline; }
.night .textlink { color: var(--color-accent-on-night); }
@media (prefers-reduced-motion: reduce) { .pill { transition: background-color var(--dur-short) linear; } .pill:active { transform: none; } }

/* ---------- nav: thin frosted bar ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); height: var(--nav-h); background: color-mix(in oklab, var(--color-paper) 74%, transparent); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); color: var(--color-ink); border-bottom: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: var(--space-lg); }
.nav__mark { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; margin-right: auto; }
.nav__mark img { width: 28px; height: 28px; flex-shrink: 0; }
.nav__mark b { font-weight: 600; color: var(--color-accent-text); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); transition: color var(--dur-short) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--color-ink); }
.nav .pill { background: var(--color-accent); color: var(--color-accent-ink); }
.nav .pill:hover { background: var(--color-accent-deep); }
.nav__menu { display: none; }
@media (max-width: 52rem) {
  .nav { height: auto; min-height: var(--nav-h); }
  .nav__inner { flex-wrap: wrap; min-height: var(--nav-h); gap: var(--space-sm); padding-block: var(--space-xs); }
  .nav__menu { display: block; }
  .nav__menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-sm); color: var(--color-ink); font-size: var(--text-sm); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); }
  .nav__menu summary::-webkit-details-marker { display: none; }
  .nav__menu summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .nav__links { display: none; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-xs) var(--space-md); }
  .nav__menu[open] ~ .nav__links { display: flex; }
  .nav__links a { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--parch { background: var(--color-paper-2); }
.center { text-align: center; }
.center h2, .center .lead, .center h1 { margin-inline: auto; }
.head { margin-bottom: var(--space-3xl); }
.head h2 { margin-bottom: var(--space-md); max-width: 16ch; }
.head .lead { max-width: 40ch; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; padding-block: var(--space-xl) var(--space-2xl); overflow: clip; }
.hero::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(1100px, 120%); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--color-glow), transparent); pointer-events: none; }
.hero__inner { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--space-lg); }
.hero h1 { font-size: var(--text-display); max-width: 13ch; line-height: 0.98; letter-spacing: -0.045em; }
.hero .lead { max-width: 34ch; color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg); margin-top: var(--space-xs); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); width: min(100%, 760px); margin-top: var(--space-xl); }
.tile { position: relative; aspect-ratio: 1 / 1.08; border-radius: var(--radius-tile); padding: var(--space-md) var(--space-md) var(--space-lg); display: grid; grid-template-rows: auto 1fr auto; color: var(--color-night); text-decoration: none; box-shadow: var(--shadow-object); transition: transform var(--dur-long) var(--ease-out); }
.tile:hover { transform: translateY(-6px); }
.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.tile__n { justify-self: start; font: 500 var(--text-sm)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.tile__sym { align-self: center; justify-self: center; font: 600 clamp(2.5rem, 6vw, 5.25rem)/1 var(--font-display); letter-spacing: -0.05em; }
.tile__name { justify-self: center; font: 500 var(--text-sm)/1 var(--font-body); }
.tile--cu { background: linear-gradient(155deg, var(--metal-copper), var(--metal-copper-2)); color: var(--metal-copper-ink); }
.tile--al { background: linear-gradient(155deg, var(--metal-aluminium), var(--metal-aluminium-2)); }
.tile--br { background: linear-gradient(155deg, var(--metal-brass), var(--metal-brass-2)); }
.tile--zn { background: linear-gradient(155deg, var(--metal-zinc), var(--metal-zinc-2)); }
/* load: the stage settles once, from a visible default */
.js .hero__inner > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .hero .tiles .tile { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out); transition-delay: calc(320ms + var(--i, 0) * 80ms); }
.js .is-ready .hero__inner > *, .js .hero.is-ready .tiles .tile { opacity: 1; transform: none; }
.js .hero.is-ready .tiles .tile:hover { transform: translateY(-6px); transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .js .hero__inner > *, .js .hero .tiles .tile { opacity: 1; transform: none; transition: none; } }
/* scroll: the stage recedes as the page begins */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .hero__stage { animation: hero-recede linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes hero-recede { to { transform: scale(0.9) translateY(-6%); opacity: 0.15; } }
  }
}
@media (max-width: 40rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { aspect-ratio: 1 / 0.9; } }

/* ---------- metal gallery: pinned, slides sideways ---------- */
.gallery__head { padding-top: var(--section-gap); }
.gallery__track-wrap { position: relative; }
.gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18rem, 78%); gap: var(--space-lg); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); padding-block: var(--space-lg) var(--section-gap); scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.panel { scroll-snap-align: center; position: relative; min-height: min(78svh, 680px); border-radius: var(--radius-card); padding: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--space-lg) var(--space-2xl); overflow: clip; color: var(--color-night-ink); background: var(--color-night-2); }
.panel__sym { grid-column: 1; grid-row: 1 / span 2; align-self: center; font: 600 var(--text-symbol)/0.82 var(--font-display); letter-spacing: -0.06em; }
.panel__sym--long { font-size: clamp(5rem, 11vw, 11rem); }
.panel__n { position: absolute; top: var(--space-xl); left: var(--space-2xl); font: 500 var(--text-md)/1 var(--font-body); font-variant-numeric: tabular-nums; opacity: 0.8; }
.panel__body { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; gap: var(--space-md); }
.panel__body h3 { font-size: var(--text-section); line-height: 1; letter-spacing: -0.04em; color: inherit; }
.panel__body p { color: inherit; opacity: 0.86; max-width: 34ch; font-size: var(--text-lg); line-height: 1.4; }
.panel__grades { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.panel__grades span { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); border: 1px solid color-mix(in oklab, currentColor 30%, transparent); font-size: var(--text-sm); }
.panel__foot { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.panel__photo { width: 96px; aspect-ratio: 161 / 200; border-radius: 12px; flex-shrink: 0; }
.panel__photo > img { border-radius: 12px; }
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-left: auto; }
.panel .pill--ghost { color: inherit; border-color: color-mix(in oklab, currentColor 35%, transparent); }
.panel .pill--ghost:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.panel .pill:not(.pill--ghost) { background: var(--color-night); color: var(--color-night-ink); }
.panel .pill:not(.pill--ghost):hover { background: var(--color-night-3); }
.panel :focus-visible { outline-color: currentColor; }
.panel--cu { background: linear-gradient(160deg, var(--metal-copper), var(--metal-copper-2)); color: var(--metal-copper-ink); }
.panel--al { background: linear-gradient(160deg, var(--metal-aluminium), var(--metal-aluminium-2)); color: var(--color-night); }
.panel--br { background: linear-gradient(160deg, var(--metal-brass), var(--metal-brass-2)); color: var(--color-night); }
.panel--zn { background: linear-gradient(160deg, var(--metal-zinc), var(--metal-zinc-2)); color: var(--color-night); }
/* pinned version: the track becomes a stage that slides as you scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .gallery__track-wrap { height: 340vh; view-timeline: --gallery block; }
    .gallery__track { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: visible; align-items: center; grid-auto-columns: min(72vw, 980px); padding-block: 0; scroll-snap-type: none; width: max-content; animation: gallery-slide linear both; animation-timeline: --gallery; animation-range: contain 0% contain 100%; }
    @keyframes gallery-slide { to { transform: translateX(calc(-100% + 100vw)); } }
    .gallery { overflow-x: clip; }
    .panel__sym { animation: sym-in linear both; animation-timeline: view(inline); animation-range: entry 0% cover 50%; }
    @keyframes sym-in { from { transform: translateX(-12%) scale(0.92); opacity: 0.4; } to { transform: none; opacity: 1; } }
  }
}
@media (max-width: 52rem) {
  .gallery__track { grid-auto-columns: 86%; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding: var(--space-xl) var(--space-lg); min-height: 0; gap: var(--space-lg); }
  .panel__sym, .panel__body, .panel__foot { grid-column: 1; grid-row: auto; }
  .panel__sym { font-size: clamp(6rem, 34vw, 9rem); padding-top: var(--space-lg); }
  .panel__sym--long { font-size: clamp(5rem, 11vw, 11rem); }
.panel__n { left: var(--space-lg); top: var(--space-lg); }
}

/* ---------- route: pinned scene ---------- */
.route { position: relative; }
.route__track { height: 300vh; }
.route__pin { position: sticky; top: var(--nav-h); min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; padding-block: var(--space-2xl); }
.route__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.route__text h2 { font-size: var(--text-section); margin-bottom: var(--space-md); max-width: 12ch; }
.route__text .lead { margin-bottom: var(--space-xl); max-width: 32ch; }
.steps { display: grid; gap: var(--space-md); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; counter-increment: step; }
.steps li::before { content: counter(step); font: 600 var(--text-lg)/1 var(--font-display); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.steps b { display: block; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }
.steps span { color: var(--color-ink-2); }
.map { position: relative; aspect-ratio: 7 / 6; border-radius: var(--radius-card); background: var(--color-night); color: var(--color-night-ink); overflow: clip; box-shadow: var(--shadow-object); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .grid-dot { fill: var(--color-night-3); }
.map .arc-base { fill: none; stroke: var(--color-night-rule); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.map .arc { fill: none; stroke: var(--color-accent-on-night); stroke-width: 3; stroke-linecap: round; }
.map .pt { fill: var(--color-night-ink); }
.map .pt--end { fill: var(--color-accent-on-night); }
.map .halo { fill: none; stroke: var(--color-accent-on-night); stroke-opacity: 0.35; stroke-width: 1.5; }
.map .lbl { fill: var(--color-night-ink); font: 600 22px/1 var(--font-display); letter-spacing: -0.02em; }
.map .lbl-s { fill: var(--color-night-muted); font: 400 16px/1 var(--font-body); }
.map .ship { fill: var(--color-accent-on-night); }
.map__stage { position: absolute; left: var(--space-xl); bottom: var(--space-xl); right: var(--space-xl); display: grid; gap: var(--space-2xs); }
.map__stage .k { font: 600 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-night-ink); }
.map__stage .v { color: var(--color-night-muted); }
/* static end state: arc drawn, ship at the far port, every step lit */
.map .arc { stroke-dasharray: 1000; stroke-dashoffset: 0; }
.map .ship { offset-path: path("M150 170 C 300 120, 520 260, 610 470"); offset-distance: 100%; offset-rotate: auto; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .route__track { view-timeline: --route block; }
    .map .arc { animation: arc-draw linear both; animation-timeline: --route; animation-range: contain 5% contain 85%; }
    @keyframes arc-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
    .map .ship { animation: ship-sail linear both; animation-timeline: --route; animation-range: contain 5% contain 85%; }
    @keyframes ship-sail { from { offset-distance: 0%; } to { offset-distance: 100%; } }
    .steps li { animation: step-lit linear both; animation-timeline: --route; }
    .steps li:nth-child(1) { animation-range: contain 0% contain 16%; }
    .steps li:nth-child(2) { animation-range: contain 16% contain 32%; }
    .steps li:nth-child(3) { animation-range: contain 32% contain 48%; }
    .steps li:nth-child(4) { animation-range: contain 48% contain 64%; }
    .steps li:nth-child(5) { animation-range: contain 64% contain 80%; }
    @keyframes step-lit { from { opacity: 0.22; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
  }
}
@supports not (animation-timeline: view()) { .route__track { height: auto; } .route__pin { position: static; } }
@media (prefers-reduced-motion: reduce) { .route__track { height: auto; } .route__pin { position: static; } }
@media (max-width: 60rem) {
  .route__track { height: auto; }
  .route__pin { position: static; min-height: 0; }
  .route__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
}

/* ---------- the record ---------- */
.record-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.record-wrap h2 { font-size: var(--text-section); margin-bottom: var(--space-md); max-width: 12ch; }
.record-wrap .lead { max-width: 30ch; }
.record { border-radius: var(--radius-card); background: var(--color-night-2); overflow: clip; box-shadow: var(--shadow-object); }
.record__head { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--color-night-rule); }
.record__head b { color: var(--color-night-ink); font-weight: 600; }
.record__head span { color: var(--color-night-muted); font-size: var(--text-sm); }
.record__body { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); padding: var(--space-md) var(--space-xl) var(--space-xl); }
.record__body > div { display: contents; }
.record__body dt, .record__body dd { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-night-rule); }
.record__body dt { color: var(--color-night-muted); }
.record__body dd { color: var(--color-night-ink); font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.record__body dd.text { font-family: var(--font-body); font-size: var(--text-md); }
.record__body dd.hi { color: var(--color-accent-on-night); }
.record__body > div:last-child dt, .record__body > div:last-child dd { border-bottom: 0; }
.record__caption { margin-top: var(--space-md); }
@media (max-width: 60rem) { .record-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }
@media (max-width: 40rem) { .record__body { grid-template-columns: minmax(0, 1fr); } .record__body dt { border-bottom: 0; padding-bottom: 0; } .record__head, .record__body { padding-inline: var(--space-lg); } }

/* ---------- statement: wipes in on scroll ---------- */
.statement { margin-block: 0; font: 600 var(--text-display-s)/1.04 var(--font-display); letter-spacing: -0.04em; max-width: 20ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0; margin-inline: auto; text-align: center; }
.statement__sub { margin-top: var(--space-lg); text-align: center; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .statement { animation: wipe linear both; animation-timeline: view(); animation-range: entry 25% cover 50%; }
    @keyframes wipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-0.2em); } to { clip-path: inset(0 0 0 0); transform: none; } }
  }
}

/* ---------- ports ---------- */
.ports-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.ports-grid > div:first-child { grid-column: 1 / span 5; }
.ports-grid > div:first-child h2 { margin-bottom: var(--space-md); max-width: 12ch; }
.ports { grid-column: 7 / span 6; width: 100%; border-collapse: collapse; }
.ports th { text-align: left; font-weight: 500; padding: 0 var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-2); white-space: nowrap; }
.ports td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.ports td:first-child { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); width: 50%; }
.ports td:last-child { color: var(--color-ink-2); padding-right: 0; }
.ports tr.is-origin td:first-child { color: var(--color-accent-text); }
@media (max-width: 60rem) { .ports-grid > div:first-child, .ports { grid-column: 1 / -1; } }

/* ---------- close ---------- */
.close { text-align: center; }
.close h2 { font-size: var(--text-display-s); margin: 0 auto var(--space-md); max-width: 14ch; }
.close .lead { margin: 0 auto var(--space-xl); max-width: 34ch; }
.close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.close__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-xl); color: var(--color-ink-2); }

/* ---------- footer ---------- */
.footer { background: var(--color-paper-2); padding-block: var(--section-gap-s) var(--space-2xl); color: var(--color-ink-2); }
.footer__statement { font: 600 var(--text-section)/1.02 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); max-width: 18ch; margin-bottom: var(--space-3xl); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.footer__col { grid-column: span 3; display: grid; gap: var(--space-xs); align-content: start; min-width: 0; font-size: var(--text-sm); }
.footer__col b { color: var(--color-ink); font-weight: 600; }
.footer__col a { text-decoration: none; color: var(--color-ink-2); }
.footer__col a:hover { color: var(--color-ink); text-decoration: underline; }
.footer__logo { width: 180px; height: auto; margin-bottom: var(--space-xs); }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 52rem) { .footer__col { grid-column: span 6; } }
@media (max-width: 34rem) { .footer__col { grid-column: 1 / -1; } }

/* ---------- a fact still to give ---------- */
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 4px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.night .fill { color: var(--color-night-muted); border-color: color-mix(in oklch, var(--color-night-muted) 60%, transparent); }

/* ---------- inner pages ---------- */
.page-hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.page-hero h1 { font-size: var(--text-display-s); max-width: 14ch; margin-bottom: var(--space-lg); letter-spacing: -0.045em; line-height: 1; }
.page-hero .lead { max-width: 36ch; margin-bottom: var(--space-xl); }
.page-hero--text .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
.page-hero--text h1 { max-width: 16ch; }
.page-hero .hero__actions { justify-content: flex-start; }
.metal-object { position: relative; aspect-ratio: 1 / 1.05; border-radius: var(--radius-card); display: grid; place-items: center; box-shadow: var(--shadow-object); overflow: clip; }
.metal-object .sym { font: 600 clamp(7rem, 16vw, 15rem)/0.85 var(--font-display); letter-spacing: -0.06em; }
.metal-object .sym--long { font-size: clamp(4.5rem, 9vw, 8.5rem); }
.metal-object .n { position: absolute; top: var(--space-xl); left: var(--space-xl); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.metal-object .nm { position: absolute; bottom: var(--space-xl); left: 0; right: 0; text-align: center; font-size: var(--text-lg); }
.metal-object .photo { position: absolute; right: var(--space-lg); bottom: var(--space-lg); width: 80px; aspect-ratio: 161 / 200; border-radius: 10px; }
.metal-object .photo > img { border-radius: 10px; }
.js .metal-object .sym { opacity: 0; transform: scale(0.94); transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out); }
.js .is-ready .metal-object .sym { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .metal-object .sym { opacity: 1; transform: none; transition: none; } }
.metal-object.panel--al .photo, .metal-object.panel--br .photo, .metal-object.panel--zn .photo { outline: 1px solid var(--color-photo-edge); }
@media (max-width: 60rem) { .page-hero__inner { grid-template-columns: minmax(0, 1fr); } .page-hero { padding-block: var(--space-2xl) var(--space-3xl); } }

.rows { display: grid; border-top: 1px solid var(--color-rule); }
.rows > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); align-items: baseline; }
.rows h3 { grid-column: 1 / span 5; font-size: var(--text-title); }
.rows p { grid-column: 6 / span 7; color: var(--color-ink-2); max-width: 56ch; font-size: var(--text-lg); line-height: 1.45; }
.rows .num { grid-column: 1 / span 1; font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.rows--steps h3 { grid-column: 2 / span 4; }
.night .rows, .night .rows > div { border-color: var(--color-night-rule); }
@media (max-width: 60rem) { .rows h3, .rows p, .rows--steps h3, .rows .num { grid-column: 1 / -1; } }

.grades-table { width: 100%; border-collapse: collapse; }
.grades-table th { text-align: left; font-weight: 500; padding: 0 var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-2); }
.grades-table td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.grades-table td:first-child { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); white-space: nowrap; }
.grades-table td:nth-child(2) { font-weight: 500; color: var(--color-ink); }
.grades-table td:last-child { padding-right: 0; color: var(--color-ink-2); }
@media (max-width: 40rem) { .grades-table th:nth-child(3), .grades-table td:nth-child(3) { display: none; } }

.faq { display: grid; border-top: 1px solid var(--color-rule); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--space-md); padding-block: var(--space-lg); font: 600 var(--text-title)/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 11px; height: 11px; justify-self: center; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--color-accent-text); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.faq details > p { padding-bottom: var(--space-lg); max-width: 64ch; color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-paper-3); text-decoration: none; color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.chips a:hover { background: var(--color-rule); }

/* ---------- form ---------- */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.form-grid__aside { grid-column: 1 / span 4; }
.form-grid__aside h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.form-grid__aside .lead { margin-bottom: var(--space-lg); font-size: var(--text-lg); }
.form-grid__form { grid-column: 6 / span 7; padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-hair); }
.facts { display: grid; border-top: 1px solid var(--color-rule); }
.facts > div { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.facts dt { font-weight: 500; color: var(--color-ink); }
.facts dd { color: var(--color-ink-2); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.form .field { display: grid; gap: var(--space-2xs); min-width: 0; }
.form .field--wide { grid-column: 1 / -1; }
.form label { font-weight: 500; color: var(--color-ink); font-size: var(--text-sm); }
.form input, .form select, .form textarea { min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; width: 100%; min-width: 0; font-size: var(--text-md); }
.form textarea { min-height: 128px; padding-block: var(--space-sm); resize: vertical; }
.form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: var(--space-xl); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline-color: var(--color-focus); }
.form input[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: var(--color-error); }
.form input:disabled, .form select:disabled, .form textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.form .help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.form__status { grid-column: 1 / -1; min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.form__status[data-tone="error"] { color: var(--color-error); }
@media (max-width: 60rem) { .form-grid__aside, .form-grid__form { grid-column: 1 / -1; } .form-grid__form { padding: var(--space-lg); } }
@media (max-width: 40rem) { .form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- one reveal for the rest ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

.ico { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 40rem) {
  .map { aspect-ratio: auto; }
  .map svg { position: relative; inset: auto; height: auto; aspect-ratio: 7 / 6; }
  .map__stage { position: static; padding: 0 var(--space-lg) var(--space-lg); }
}

/* ---------- hero headline: word by word ---------- */
.js .hero__inner > h1 { opacity: 1; transform: none; }
.words .w { display: inline-block; }
.js .words .w { opacity: 0; transform: translateY(0.45em); filter: blur(10px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); transition-delay: calc(var(--w, 0) * 90ms); }
.js .is-ready .words .w { opacity: 1; transform: none; filter: blur(0); }
.js .hero__inner > .lead { transition-delay: 520ms; } .js .hero__inner > .hero__actions { transition-delay: 640ms; }
@media (prefers-reduced-motion: reduce) { .js .words .w { opacity: 1; transform: none; filter: none; transition: none; } }

/* tiles fan out from the centre as the hero settles */
.js .hero .tiles .tile { transform: translateY(60px) scale(0.92); }
.js .hero .tiles .tile:nth-child(1) { transform: translate(40%, 60px) rotate(-6deg) scale(0.92); }
.js .hero .tiles .tile:nth-child(4) { transform: translate(-40%, 60px) rotate(6deg) scale(0.92); }
.js .hero.is-ready .tiles .tile { transform: none; }
.js .hero .tiles .tile { transition-delay: calc(700ms + var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .js .hero .tiles .tile, .js .hero .tiles .tile:nth-child(n) { transform: none; } }

/* ---------- spotlight: the four metals light up as you scroll ---------- */
.spot { background: var(--color-paper); }
.spot__track { position: relative; }
.spot__pin { display: grid; place-items: center; padding: var(--section-gap-s) var(--gutter); }
.spot__text { max-width: 22ch; margin: 0 auto; text-align: center; font: 600 clamp(2.5rem, 6vw, 5.5rem)/1.05 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; color: var(--color-ink); }
.spot__text .s--cu { color: var(--metal-copper-2); } .spot__text .s--al { color: var(--metal-aluminium-2); } .spot__text .s--br { color: var(--metal-brass-2); } .spot__text .s--zn { color: var(--metal-zinc-2); }
.spot__text .s--end { display: block; margin-top: var(--space-lg); font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.02em; color: var(--color-ink-2); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .spot__track { height: 260vh; view-timeline: --spot block; }
    .spot__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); padding-block: 0; }
    .spot__text .s { animation: spot-lit linear both; animation-timeline: --spot; }
    .spot__text .s--cu { animation-range: contain 0% contain 16%; }
    .spot__text .s--al { animation-range: contain 16% contain 32%; }
    .spot__text .s--br { animation-range: contain 32% contain 48%; }
    .spot__text .s--zn { animation-range: contain 48% contain 64%; }
    .spot__text .s--end { animation-range: contain 64% contain 84%; }
    @keyframes spot-lit { from { opacity: 0.1; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
  }
}

/* ---------- the record card floats up and settles ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .record, .map { animation: object-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes object-rise { from { transform: translateY(80px) scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } }
    .tiles--about .tile, .metal-object { animation: object-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}

/* ---------- journey: loading, quality check, shipping, across the sea, delivered ---------- */
.journey { padding-block: var(--section-gap); }
.journey__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.journey__text h2 { font-size: var(--text-section); margin-bottom: var(--space-md); max-width: 13ch; }
.journey__text .lead { margin-bottom: var(--space-xl); max-width: 32ch; }
.journey__stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); }
.scene { margin: 0; position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-card); background: var(--color-night); overflow: clip; box-shadow: var(--shadow-object); }
.scene svg { display: block; width: 100%; height: 100%; }
.scene .lbl { font: 600 26px var(--font-display); letter-spacing: -0.02em; fill: var(--color-night-ink); }
.scene .sm { font: 400 19px var(--font-body); fill: var(--color-night-muted); }
.scene .big { font: 600 30px var(--font-display); letter-spacing: -0.02em; fill: var(--color-night-ink); }
.scene .seal-t { font: 700 30px var(--font-display); fill: var(--color-seal-ink); }
.scene .boat { offset-path: path("M212 214C262 160 352 168 396 282"); offset-distance: 100%; }
.scene .route { stroke-dasharray: 100; stroke-dashoffset: 0; }
.scene .cargo, .scene .tick, .scene .seal, .scene .drop, .scene .ship, .scene .scan, .scene .ring, .scene .done, .scene .cam { transform-box: fill-box; transform-origin: center; }
.scene .scan { transform: translateY(176px); opacity: .7; }
@media (max-width: 60rem) { .journey__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .journey { padding-block: 0; }
    .journey__track { height: 560vh; view-timeline: --journey block; }
    .journey__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: grid; align-items: center; }
    .journey__stage { display: block; position: relative; aspect-ratio: 5 / 4; }
    .scene { position: absolute; inset: 0; animation: scene-mid linear both; animation-timeline: --journey; }
    .sc1 { animation-name: scene-first; animation-range: contain 0% contain 22%; }
    .sc2 { animation-range: contain 18% contain 42%; }
    .sc3 { animation-range: contain 38% contain 62%; }
    .sc4 { animation-range: contain 58% contain 82%; }
    .sc5 { animation-name: scene-last; animation-range: contain 78% contain 100%; }
    @keyframes scene-first { 0%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
    @keyframes scene-mid { 0% { opacity: 0; transform: scale(1.04); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
    @keyframes scene-last { 0% { opacity: 0; transform: scale(1.04); } 25%, 100% { opacity: 1; transform: none; } }

    /* 1 loading: cargo slides into the container, the camera flashes */
    .sc1 .cargo { animation: cargo-in linear both; animation-timeline: --journey; }
    .sc1 .c1 { animation-range: contain 1% contain 7%; } .sc1 .c2 { animation-range: contain 4% contain 10%; }
    .sc1 .c3 { animation-range: contain 7% contain 13%; } .sc1 .c4 { animation-range: contain 10% contain 16%; }
    @keyframes cargo-in { from { transform: translateX(-300px); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
    .sc1 .cam { animation: cam-flash linear both; animation-timeline: --journey; animation-range: contain 12% contain 18%; }
    @keyframes cam-flash { 0% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }

    /* 2 quality check: a scan sweeps the container, ticks land, the QC seal stamps */
    .sc2 .scan { animation: scan linear both; animation-timeline: --journey; animation-range: contain 22% contain 32%; }
    @keyframes scan { from { transform: translateY(0); opacity: .9; } to { transform: translateY(176px); opacity: .7; } }
    .sc2 .tick { animation: tick-in linear both; animation-timeline: --journey; }
    .sc2 .t1 { animation-range: contain 24% contain 28%; } .sc2 .t2 { animation-range: contain 28% contain 32%; } .sc2 .t3 { animation-range: contain 32% contain 36%; }
    @keyframes tick-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
    .sc2 .seal { animation: stamp linear both; animation-timeline: --journey; animation-range: contain 34% contain 39%; }
    @keyframes stamp { 0% { opacity: 0; transform: scale(2) rotate(-18deg); } 70% { opacity: 1; transform: scale(.94) rotate(4deg); } 100% { opacity: 1; transform: none; } }

    /* 3 sealed and shipped: the crane lowers our container, the ship sails off */
    .sc3 .drop { animation: drop linear both; animation-timeline: --journey; animation-range: contain 42% contain 50%; }
    @keyframes drop { from { transform: translateY(-230px); } to { transform: none; } }
    .sc3 .ship { animation: sail linear both; animation-timeline: --journey; animation-range: contain 50% contain 62%; }
    @keyframes sail { from { transform: none; } to { transform: translateX(120px); } }
    .sc3 .wave { animation: wave linear both; animation-timeline: --journey; animation-range: contain 42% contain 62%; }
    @keyframes wave { from { transform: translateX(0); } to { transform: translateX(-90px); } }

    /* 4 across the sea: the route draws from Dubai to India, the ship travels it */
    .sc4 .route { animation: route-draw linear both; animation-timeline: --journey; animation-range: contain 62% contain 78%; }
    @keyframes route-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
    .sc4 .boat { animation: boat-go linear both; animation-timeline: --journey; animation-range: contain 62% contain 78%; }
    @keyframes boat-go { from { offset-distance: 0%; } to { offset-distance: 100%; } }

    /* 5 delivered: the check lands and the rings open out */
    .sc5 .done { animation: stamp linear both; animation-timeline: --journey; animation-range: contain 82% contain 88%; }
    .sc5 .ring { animation: ring-out linear both; animation-timeline: --journey; }
    .sc5 .r1 { animation-range: contain 84% contain 92%; } .sc5 .r2 { animation-range: contain 87% contain 96%; }
    @keyframes ring-out { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

    /* the trust story lights up beside the scenes */
    .journey .steps li { animation: step-lit linear both; animation-timeline: --journey; }
    .journey .steps li:nth-child(1) { animation-range: contain 0% contain 10%; }
    .journey .steps li:nth-child(2) { animation-range: contain 20% contain 30%; }
    .journey .steps li:nth-child(3) { animation-range: contain 40% contain 50%; }
    .journey .steps li:nth-child(4) { animation-range: contain 60% contain 70%; }
    .journey .steps li:nth-child(5) { animation-range: contain 80% contain 90%; }
  }
}

/* ---------- other trade lines: plastics, textiles, auto ---------- */
.panel--pl { background: linear-gradient(160deg, var(--line-plastic), var(--line-plastic-2)); color: var(--color-night); }
.panel--tx { background: linear-gradient(160deg, var(--line-textile), var(--line-textile-2)); color: var(--color-night-ink); }
.panel--au { background: linear-gradient(160deg, var(--line-auto), var(--line-auto-2)); color: var(--color-night-ink); }
.spot__text .s--pl { color: var(--line-plastic-2); } .spot__text .s--tx { color: var(--line-textile); } .spot__text .s--au { color: var(--line-auto); }
.scene .tag { font: 600 20px var(--font-body); fill: var(--color-night); }

/* ---------- every trade item as an element tile, like the metals ---------- */
.tile--x, .panel--x { background: linear-gradient(155deg, var(--c1), var(--c2)); color: var(--ci); }
.tile__sym--long { font-size: clamp(2rem, 4.2vw, 3.75rem); }
.tiles--n { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: min(100%, calc(var(--n) * 176px)); }
.js .hero .tiles--n .tile:nth-child(n) { transform: translateY(60px) scale(0.92); }
.js .hero .tiles--n .tile:first-child { transform: translate(40%, 60px) rotate(-6deg) scale(0.92); }
.js .hero .tiles--n .tile:last-child { transform: translate(-40%, 60px) rotate(6deg) scale(0.92); }
.js .hero.is-ready .tiles--n .tile:nth-child(n) { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .hero .tiles--n .tile:nth-child(n) { transform: none; } }
@media (max-width: 52rem) { .tiles--n { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the trade table: one row per line, tiles in a run */
.ptable { display: grid; }
.ptable__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); align-items: center; }
.ptable__row:last-child { border-bottom: 1px solid var(--color-rule); }
.ptable__label h3 { font-size: var(--text-xl); letter-spacing: -0.03em; margin-bottom: var(--space-xs); }
.ptable__label h3 a { text-decoration: none; }
.ptable__label h3 a:hover { text-decoration: underline; }
.ptable__label p { color: var(--color-ink-2); max-width: 30ch; }
.ptable__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: var(--space-sm); }
.ptable .tile { aspect-ratio: 1 / 1.08; padding: var(--space-sm) var(--space-sm) var(--space-md); }
.ptable .tile__sym { font-size: clamp(1.75rem, 2.6vw, 2.6rem); }
.ptable .tile__sym--long { font-size: clamp(1.25rem, 1.9vw, 1.9rem); }
.ptable .tile__name { font-size: var(--text-xs); text-align: center; }
.lines + .statement__sub, .ptable + .statement__sub { margin-top: var(--space-2xl); text-align: center; }
@media (max-width: 52rem) { .ptable__row { grid-template-columns: minmax(0, 1fr); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .spot--n .spot__text .s:nth-child(1) { animation-range: contain 0% contain 12%; }
    .spot--n .spot__text .s:nth-child(2) { animation-range: contain 12% contain 24%; }
    .spot--n .spot__text .s:nth-child(3) { animation-range: contain 24% contain 36%; }
    .spot--n .spot__text .s:nth-child(4) { animation-range: contain 36% contain 48%; }
    .spot--n .spot__text .s:nth-child(5) { animation-range: contain 48% contain 60%; }
    .spot--n .spot__text .s:nth-child(6) { animation-range: contain 60% contain 72%; }
    .spot--n .spot__text .s--end { animation-range: contain 72% contain 88%; }
    .ptable .tile { animation: object-rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 5%) cover calc(25% + var(--i, 0) * 4%); }
    .spot--lines .spot__text .s--cu { animation-range: contain 0% contain 14%; }
    .spot--lines .spot__text .s--pl { animation-range: contain 14% contain 28%; }
    .spot--lines .spot__text .s--tx { animation-range: contain 28% contain 42%; }
    .spot--lines .spot__text .s--au { animation-range: contain 42% contain 56%; }
    .spot--lines .spot__text .s--zn { animation-range: contain 56% contain 70%; }
    .spot--lines .spot__text .s--end { animation-range: contain 70% contain 86%; }
  }
}

/* ---------- story: a four-scene pinned scroll on each trade page ---------- */
.story { padding-block: var(--section-gap); }
.story .a { transform-box: fill-box; transform-origin: center; }
.story .squash { transform-origin: bottom; }
.story .boat { offset-path: path("M212 214C262 160 352 168 396 282"); offset-distance: 100%; }
.story .draw { stroke-dasharray: 100; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .story { padding-block: 0; }
    .story__track { height: 460vh; view-timeline: --story block; }
    .story__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: grid; align-items: center; }
    .story .journey__stage { display: block; position: relative; aspect-ratio: 5 / 4; }
    .story .scene { position: absolute; inset: 0; animation: st-mid linear both; animation-timeline: --story; }
    .story .st1 { animation-name: st-first; animation-range: contain 0% contain 28%; }
    .story .st2 { animation-range: contain 24% contain 52%; }
    .story .st3 { animation-range: contain 48% contain 76%; }
    .story .st4 { animation-name: st-last; animation-range: contain 72% contain 100%; }
    @keyframes st-first { 0%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
    @keyframes st-mid { 0% { opacity: 0; transform: scale(1.04); } 16%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
    @keyframes st-last { 0% { opacity: 0; transform: scale(1.04); } 20%, 100% { opacity: 1; transform: none; } }

    /* every moving part: one keyframe set, timed by its own --a and --b */
    .story .a { animation-timeline: --story; animation-range: contain var(--a) contain var(--b); animation-fill-mode: both; animation-timing-function: linear; animation-duration: auto; }
    .story .drop { animation-name: st-drop; }
    @keyframes st-drop { from { transform: translateY(-220px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
    .story .in { animation-name: st-in; }
    @keyframes st-in { from { transform: translateX(-420px); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
    .story .pop { animation-name: st-pop; }
    @keyframes st-pop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
    .story .stamp { animation-name: st-stamp; }
    @keyframes st-stamp { 0% { opacity: 0; transform: scale(2) rotate(-18deg); } 70% { opacity: 1; transform: scale(.94) rotate(4deg); } 100% { opacity: 1; transform: none; } }
    .story .tick-in { animation-name: st-tick; }
    @keyframes st-tick { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
    .story .plunge { animation-name: st-plunge; }
    @keyframes st-plunge { 0% { transform: none; } 55%, 75% { transform: translateY(124px); } 100% { transform: none; } }
    .story .squash { animation-name: st-squash; }
    @keyframes st-squash { 0%, 20% { transform: scaleY(2.1); opacity: 0.6; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: none; opacity: 1; } }
    .story .rain { animation-name: st-rain; }
    @keyframes st-rain { from { transform: translateY(-90px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
    .story .sweep { animation-name: st-sweep; }
    @keyframes st-sweep { 0% { transform: translate(-120px, -60px); } 50% { transform: translate(40px, 30px); } 100% { transform: none; } }
    .story .draw { animation-name: st-draw; }
    @keyframes st-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
    .story .spin { animation-name: st-spin; }
    @keyframes st-spin { from { transform: rotate(-240deg); } to { transform: none; } }
    .story .scanx { animation-name: st-scanx; }
    @keyframes st-scanx { from { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } to { transform: translateX(400px); opacity: 0; } }
    .story .route { animation-name: st-draw; }
    .story .sail-on { animation-name: st-boat; }
    @keyframes st-boat { from { offset-distance: 0%; } to { offset-distance: 100%; } }

    .story .steps li { animation: step-lit linear both; animation-timeline: --story; }
    .story .steps li:nth-child(1) { animation-range: contain 0% contain 10%; }
    .story .steps li:nth-child(2) { animation-range: contain 25% contain 35%; }
    .story .steps li:nth-child(3) { animation-range: contain 50% contain 60%; }
    .story .steps li:nth-child(4) { animation-range: contain 75% contain 85%; }
  }
}
.panel__sym--xl { font-size: clamp(4rem, 8.5vw, 8.5rem); }
@media (max-width: 52rem) { .panel__sym--xl { font-size: clamp(3.5rem, 18vw, 6rem); } }

/* ---------- trust: the core value, pinned; the words light up, then the four proofs ---------- */
.trust { background: var(--color-paper); padding-block: var(--section-gap); }
.trust__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-lg); }
.trust__h { font: 600 clamp(3rem, 8vw, 7.5rem)/0.98 var(--font-display); letter-spacing: -0.05em; max-width: 12ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.trust__h .t { display: inline-block; }
.trust__h .t--gold { color: var(--color-accent-text); }
.trust__lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 32ch; }
.trust__proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); width: 100%; margin-top: var(--space-xl); text-align: left; counter-reset: proof; }
.trust__proofs li { counter-increment: proof; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); display: grid; gap: var(--space-xs); align-content: start; }
.trust__proofs li::before { content: counter(proof); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-display); }
.trust__proofs b { font-size: var(--text-xl); letter-spacing: -0.03em; line-height: 1.1; }
.trust__proofs span { color: var(--color-ink-2); }
@media (max-width: 60rem) { .trust__proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .trust__proofs { grid-template-columns: minmax(0, 1fr); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .trust { padding-block: 0; }
    .trust__track { height: 300vh; view-timeline: --trust block; }
    .trust__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: grid; align-items: center; }
    .trust__h .t { animation: spot-lit linear both; animation-timeline: --trust; }
    .trust__h .t:nth-child(1) { animation-name: trust-word; animation-range: contain 0% contain 14%; }
    .trust__h .t:nth-child(2) { animation-range: contain 12% contain 20%; }
    .trust__h .t:nth-child(3) { animation-name: trust-word; animation-range: contain 16% contain 30%; }
    @keyframes trust-word { from { opacity: 0.1; filter: blur(6px); transform: scale(1.25); } to { opacity: 1; filter: blur(0); transform: none; } }
    .trust__lead { animation: spot-lit linear both; animation-timeline: --trust; animation-range: contain 30% contain 38%; }
    .trust__proofs li { animation: proof-in linear both; animation-timeline: --trust; }
    .trust__proofs li:nth-child(1) { animation-range: contain 40% contain 52%; }
    .trust__proofs li:nth-child(2) { animation-range: contain 50% contain 62%; }
    .trust__proofs li:nth-child(3) { animation-range: contain 60% contain 72%; }
    .trust__proofs li:nth-child(4) { animation-range: contain 70% contain 82%; }
    @keyframes proof-in { from { opacity: 0; transform: translateY(60px) scale(0.94); } to { opacity: 1; transform: none; } }
  }
}

/* ---------- the film: yard to mill as one continuous scroll (desktop with scroll timelines; the journey cards stand in elsewhere) ---------- */
.film { display: none; }
.film .k, .film .bob, .film .puff { transform-box: fill-box; transform-origin: center; }
.film .f-sign { font: 600 26px var(--font-display); fill: var(--color-night-ink); }
.film .f-small { font: 400 18px var(--font-body); fill: var(--color-night-muted); }
.film .f-box { font: 600 30px var(--font-display); letter-spacing: -0.02em; fill: var(--color-accent); }
.film .f-tag { font: 600 17px var(--font-body); fill: var(--color-night); }
.film .f-sym { font: 600 32px var(--font-display); letter-spacing: -0.03em; }
.film .sun { fill: var(--sun); } .film .moon { fill: var(--moon); }
.film__caps li { position: absolute; top: 8%; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); max-width: 30rem; padding: var(--space-xl) var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: color-mix(in oklch, var(--color-paper) 76%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--shadow-object); }
.film__caps h2, .film__caps h3 { font-size: clamp(2.25rem, 3.4vw, 3.5rem); line-height: 1; letter-spacing: -0.045em; margin-bottom: var(--space-sm); }
.film__caps p { font-size: var(--text-lg); color: var(--color-ink-2); line-height: 1.35; }
.film__caps .cap--final { left: 0; right: 0; margin-inline: auto; max-width: 44rem; text-align: center; top: 4%; padding-block: var(--space-lg); }
.film__caps .cap--final h3 { font-size: clamp(2.75rem, 4.6vw, 4.75rem); }
.film__route { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.film__route i { position: relative; width: 200px; height: 3px; border-radius: 2px; background: var(--color-rule-2); }
.film__route b { position: absolute; left: -6px; top: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-accent); }
.film__rail { position: absolute; bottom: 3%; left: 50%; translate: -50% 0; display: flex; gap: var(--space-lg); padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-paper) 76%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .film { display: block; }
    .route-wrap .journey { display: none; }
    .film__track { height: 1000vh; view-timeline: --film block; }
    .film__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: clip; }
    .film__stage { position: relative; height: 100%; animation: film-sky linear both; animation-timeline: --film; animation-range: contain 0% contain 100%; }
    .film__world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    @keyframes film-sky { 0% { background: var(--sky-dawn); } 10%, 56% { background: var(--sky-day); } 62% { background: var(--sky-dusk); } 67%, 76% { background: var(--sky-night); } 83% { background: var(--sky-dawn); } 90%, 100% { background: var(--sky-day); } }

    /* the camera: holds on each chapter, pans between them; the far layer moves at a third of the speed */
    .film .cam, .film .far, .film .sun, .film .moon, .film .stars { animation-timeline: --film; animation-range: contain 0% contain 100%; animation-fill-mode: both; animation-duration: auto; }
    .film .cam { animation-name: film-cam; animation-timing-function: ease-in-out; transform-box: view-box; transform-origin: 0 0; }
    @keyframes film-cam {
      0%, 18% { transform: translateX(0); filter: brightness(1); }
      24%, 36% { transform: translateX(-1600px); filter: brightness(1); }
      44%, 54% { transform: translateX(-3800px); filter: brightness(1); }
      61% { transform: translateX(-4700px); filter: brightness(0.92); }
      67% { transform: translateX(-5500px); filter: brightness(0.5); }
      75% { transform: translateX(-6200px); filter: brightness(0.48); }
      80% { transform: translateX(-6900px); filter: brightness(0.85); }
      82%, 88% { transform: translateX(-7300px); filter: brightness(1); }
      95%, 100% { transform: translateX(-9400px); filter: brightness(1); }
    }
    .film .far { animation-name: film-far; animation-timing-function: ease-in-out; transform-box: view-box; transform-origin: 0 0; }
    @keyframes film-far {
      0%, 18% { transform: translateX(0); } 24%, 36% { transform: translateX(-480px); } 44%, 54% { transform: translateX(-1140px); }
      67% { transform: translateX(-1650px); } 80% { transform: translateX(-2070px); } 82%, 88% { transform: translateX(-2190px); } 95%, 100% { transform: translateX(-2820px); }
    }
    .film .sun { animation-name: film-sun; animation-timing-function: linear; }
    @keyframes film-sun { 0% { transform: translate(-760px, 330px); } 14% { transform: translate(-320px, 30px); } 56% { transform: translate(0, 0); } 64% { transform: translate(220px, 560px); } 80% { transform: translate(-1000px, 560px); } 92% { transform: translate(-520px, 90px); } 100% { transform: translate(-360px, 20px); } }
    .film .moon { animation-name: film-moon; animation-timing-function: linear; }
    @keyframes film-moon { 0%, 62% { transform: translate(320px, 620px); } 70% { transform: translate(0, 0); } 77% { transform: translate(-280px, 60px); } 84%, 100% { transform: translate(-520px, 620px); } }
    .film .stars { animation-name: film-stars; animation-timing-function: linear; }
    @keyframes film-stars { 0%, 63% { opacity: 0; } 68%, 77% { opacity: 1; } 82%, 100% { opacity: 0; } }

    /* every moving part: one keyframe each, timed by its own --a and --b */
    .film .k { animation-timeline: --film; animation-range: contain var(--a) contain var(--b); animation-fill-mode: both; animation-duration: auto; animation-timing-function: var(--ease, ease-in-out); }
    .film .k-appear { animation-name: k-appear; } @keyframes k-appear { from { opacity: 0; } to { opacity: 1; } }
    .film .k-vanish { animation-name: k-vanish; } @keyframes k-vanish { from { opacity: 1; } to { opacity: 0; } }
    .film .k-move { animation-name: k-move; transform-box: view-box; transform-origin: 0 0; } @keyframes k-move { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
    .film .k-rise { animation-name: k-rise; transform-origin: bottom; } @keyframes k-rise { from { transform: scaleY(0.05); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
    .film .k-slidein { animation-name: k-slidein; } @keyframes k-slidein { from { transform: translateX(-460px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
    .film .k-close { animation-name: k-close; transform-origin: left; } @keyframes k-close { from { transform: scaleX(0); } to { transform: none; } }
    .film .k-open { animation-name: k-open; transform-origin: right; } @keyframes k-open { from { transform: none; } to { transform: scaleX(0); } }
    .film .k-pop { animation-name: k-pop; } @keyframes k-pop { 0% { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: none; opacity: 1; } }
    .film .k-flash { animation-name: k-flash; } @keyframes k-flash { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
    .film .k-fly { animation-name: k-fly; } @keyframes k-fly { from { transform: none; opacity: 1; } to { transform: translate(640px, -440px) scale(0.2); opacity: 0; } }

    /* the story, chapter by chapter */
    .film__caps li { opacity: 0; animation: film-cap linear both; animation-timeline: --film; }
    .film__caps .cap--1 { animation-range: contain 0% contain 14%; }
    .film__caps .cap--2 { animation-range: contain 13% contain 24%; }
    .film__caps .cap--3 { animation-range: contain 24% contain 36%; }
    .film__caps .cap--4 { animation-range: contain 37% contain 54%; }
    .film__caps .cap--5 { animation-range: contain 55% contain 80%; }
    .film__caps .cap--6 { animation-range: contain 81% contain 90%; }
    .film__caps .cap--7 { animation-name: film-cap-last; animation-range: contain 92% contain 100%; }
    @keyframes film-cap { 0% { opacity: 0; transform: translateY(40px); } 14%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
    @keyframes film-cap-last { 0% { opacity: 0; transform: translateY(40px); } 40%, 100% { opacity: 1; transform: none; } }
    .film__route b { animation: film-route linear both; animation-timeline: --film; animation-range: contain 55% contain 80%; }
    @keyframes film-route { to { transform: translateX(200px); } }
    .film__rail li { opacity: 0.35; animation: rail-lit linear both; animation-timeline: --film; }
    .film__rail li:nth-child(1) { animation-range: contain 0% contain 2%; }
    .film__rail li:nth-child(2) { animation-range: contain 13% contain 15%; }
    .film__rail li:nth-child(3) { animation-range: contain 24% contain 26%; }
    .film__rail li:nth-child(4) { animation-range: contain 37% contain 39%; }
    .film__rail li:nth-child(5) { animation-range: contain 55% contain 57%; }
    .film__rail li:nth-child(6) { animation-range: contain 81% contain 83%; }
    .film__rail li:nth-child(7) { animation-range: contain 92% contain 94%; }
    @keyframes rail-lit { from { opacity: 0.35; } to { opacity: 1; } }

    /* ambient, on the clock: the sea moves, the ship rocks, the mill breathes */
    .film .waves { animation: wave-run 3s linear infinite; }
    @keyframes wave-run { to { transform: translateX(-160px); } }
    .film .bob { animation: ship-bob 3.4s ease-in-out infinite alternate; }
    @keyframes ship-bob { from { transform: translateY(-3px) rotate(-0.4deg); } to { transform: translateY(5px) rotate(0.4deg); } }
    .film .puff { animation: puff 4s linear infinite; animation-delay: var(--d, 0s); }
    @keyframes puff { from { transform: translateY(0) scale(0.6); opacity: 0.8; } to { transform: translateY(-170px) scale(2); opacity: 0; } }
  }
}

/* ---------- how we export: the hero line, five scenes, counters, the paper trail ---------- */
.hl { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); max-width: 920px; }
.hl::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 1.25rem; height: 2px; background: var(--color-accent); transform-origin: left; }
.hl li { position: relative; display: grid; gap: var(--space-sm); justify-items: start; }
.hl__dot { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-display); }
.hl__name { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 12ch; }
.js .page-hero .hl::before { transform: scaleX(0); transition: transform 1.4s var(--ease-out) 500ms; }
.js .page-hero .hl li { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out); transition-delay: calc(600ms + var(--i) * 220ms); }
.js .page-hero.is-ready .hl::before { transform: none; }
.js .page-hero.is-ready .hl li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .page-hero .hl::before, .js .page-hero .hl li { transform: none; opacity: 1; transition: none; } }
@media (max-width: 40rem) { .hl { grid-template-columns: minmax(0, 1fr); } .hl::before { left: 1.25rem; right: auto; top: 1.25rem; bottom: 1.25rem; width: 2px; height: auto; transform-origin: top; } .hl li { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .hl__name { max-width: none; } .js .page-hero .hl::before { transform: scaleY(0); } }

/* counters: a weighbridge readout that runs up as you scroll */
@property --kg { syntax: "<integer>"; inherits: false; initial-value: 0; }
.readout { position: absolute; width: 28%; display: grid; gap: var(--space-3xs); color: var(--color-night-ink); --kg: var(--to); counter-reset: kg var(--kg); }
.readout span { font-size: clamp(0.625rem, 1vw, 0.8125rem); color: var(--color-night-muted); }
.readout::after { content: counter(kg) " kg"; font: 500 clamp(1rem, 2.1vw, 1.75rem)/1.1 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-accent-on-night); }

/* the paper trail: a line draws across, each paper lands at its stop */
.trail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); padding-top: var(--space-xl); }
.trail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-accent); transform-origin: left; }
.trail__stop { position: relative; display: grid; gap: var(--space-sm); align-content: start; }
.trail__pin { position: absolute; top: calc(-1 * var(--space-xl) - 7px); left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 6px var(--color-glow); }
.trail__stop h3 { font-size: var(--text-xl); letter-spacing: -0.03em; }
.trail__stop p { color: var(--color-ink-2); }
.trail__stop ul { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.paper { display: grid; gap: var(--space-3xs); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-paper); box-shadow: var(--shadow-object); }
.paper b { font-weight: 600; letter-spacing: -0.01em; }
.paper span { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 52rem) { .trail { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .trail { view-timeline: --trail block; }
    .trail::before { animation: trail-draw linear both; animation-timeline: --trail; animation-range: entry 20% cover 45%; }
    @keyframes trail-draw { from { transform: scaleX(0); } to { transform: none; } }
    .trail__pin { animation: k-pin linear both; animation-timeline: --trail; animation-range: entry calc(25% + var(--s, 0) * 8%) cover calc(30% + var(--s, 0) * 8%); }
    .trail__stop:nth-child(1) .trail__pin { --s: 0; } .trail__stop:nth-child(2) .trail__pin { --s: 1; } .trail__stop:nth-child(3) .trail__pin { --s: 2; }
    @keyframes k-pin { from { transform: scale(0); } to { transform: none; } }
    .trail__stop { --s: 0; } .trail__stop:nth-child(2) { --s: 1; } .trail__stop:nth-child(3) { --s: 2; }
    .paper { animation: paper-drop linear both; animation-timeline: --trail; animation-range: entry calc(30% + var(--s) * 10% + var(--i) * 4%) cover calc(42% + var(--s) * 10% + var(--i) * 4%); }
    @keyframes paper-drop { from { opacity: 0; transform: translateY(-60px) rotate(-4deg); } to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .story--5 .story__track { height: 560vh; }
    .story--5 .st4 { animation-name: st-mid; }
    .story--5 .st1 { animation-range: contain 0% contain 22%; }
    .story--5 .st2 { animation-range: contain 18% contain 42%; }
    .story--5 .st3 { animation-range: contain 38% contain 62%; }
    .story--5 .st4 { animation-range: contain 58% contain 82%; }
    .story--5 .st5 { animation-name: st-last; animation-range: contain 78% contain 100%; }
    .story--5 .steps li:nth-child(1) { animation-range: contain 0% contain 10%; }
    .story--5 .steps li:nth-child(2) { animation-range: contain 20% contain 30%; }
    .story--5 .steps li:nth-child(3) { animation-range: contain 40% contain 50%; }
    .story--5 .steps li:nth-child(4) { animation-range: contain 60% contain 70%; }
    .story--5 .steps li:nth-child(5) { animation-range: contain 80% contain 90%; }
    .story .readout { animation: kg-count linear both; animation-timeline: --story; animation-range: contain var(--a) contain var(--b); }
    @keyframes kg-count { from { --kg: 0; } to { --kg: var(--to); } }
  }
}

/* ---------- booking film: the same engine as the home film, on paper, around one container ---------- */
.film .b-t { font: 600 26px var(--font-display); letter-spacing: -0.02em; fill: var(--color-ink); }
.film .b-s { font: 400 21px var(--font-body); fill: var(--color-ink-2); }
.film .b-w { font: 600 21px var(--font-body); fill: var(--color-paper); }
.film .b-tag { font: 600 18px var(--font-body); fill: var(--color-ink); }
.film .b-box { font: 600 40px var(--font-display); letter-spacing: -0.02em; fill: var(--color-accent); }
.film .b-sym { font: 600 34px var(--font-display); letter-spacing: -0.03em; }
.cap__link { margin-top: var(--space-sm); }
.book-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); counter-reset: bs; }
.book-steps li { counter-increment: bs; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-object); display: grid; gap: var(--space-xs); align-content: start; }
.book-steps li::before { content: counter(bs); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-display); }
.book-steps b { font-size: var(--text-xl); letter-spacing: -0.03em; line-height: 1.1; }
.book-steps span { color: var(--color-ink-2); }
@media (max-width: 60rem) { .book-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .book-steps { grid-template-columns: minmax(0, 1fr); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .book-steps li { animation: object-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .book-fallback { display: none; }
    .film--book .film__track { height: 800vh; }
    .film--book .film__stage { animation: none; background: radial-gradient(120% 90% at 60% 40%, var(--color-paper), var(--color-paper-2)); }
    .film--book .film__caps .cap--1 { animation-range: contain 0% contain 15%; }
    .film--book .film__caps .cap--2 { animation-range: contain 15% contain 31%; }
    .film--book .film__caps .cap--3 { animation-range: contain 31% contain 48%; }
    .film--book .film__caps .cap--4 { animation-range: contain 48% contain 64%; }
    .film--book .film__caps .cap--5 { animation-range: contain 64% contain 80%; }
    .film--book .film__caps .cap--6 { animation-name: film-cap-last; animation-range: contain 80% contain 94%; }
    .film--book .film__rail li:nth-child(1) { animation-range: contain 0% contain 2%; }
    .film--book .film__rail li:nth-child(2) { animation-range: contain 15% contain 17%; }
    .film--book .film__rail li:nth-child(3) { animation-range: contain 31% contain 33%; }
    .film--book .film__rail li:nth-child(4) { animation-range: contain 48% contain 50%; }
    .film--book .film__rail li:nth-child(5) { animation-range: contain 64% contain 66%; }
    .film--book .film__rail li:nth-child(6) { animation-range: contain 80% contain 82%; }
    .film .draw { stroke-dasharray: 100 104; animation-name: f-draw; } @keyframes f-draw { from { stroke-dashoffset: 102; } to { stroke-dashoffset: 0; } }
    .film .k-in { animation-name: k-in; } @keyframes k-in { from { transform: translateX(-1800px); } to { transform: none; } }
    .film .k-dim { animation-name: k-dim; } @keyframes k-dim { from { opacity: 1; } to { opacity: 0.18; transform: scale(0.9); } }
    .film .k-pick { animation-name: k-pick; } @keyframes k-pick { 0% { transform: none; } 60% { transform: scale(1.35); } 100% { transform: scale(1.2); } }
    .film .k-flyin { animation-name: k-flyin; } @keyframes k-flyin { from { transform: none; opacity: 1; } 85% { opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.15); opacity: 0; } }
    .film .k-send { animation-name: k-send; } @keyframes k-send { from { transform: none; } to { transform: translate(var(--dx), var(--dy)) scale(0.42); } }
    .film .k-tick { animation-name: k-tick; } @keyframes k-tick { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
    .film .k-shackle { animation-name: k-shackle; transform-box: fill-box; } @keyframes k-shackle { from { transform: translateY(-16px); } 70% { transform: translateY(3px); } to { transform: none; } }
    .film .k-swing { animation-name: k-swing; transform-origin: top; } @keyframes k-swing { 0% { opacity: 0; transform: rotate(-24deg); } 50% { opacity: 1; transform: rotate(10deg); } 80% { transform: rotate(-4deg); } 100% { opacity: 1; transform: none; } }
  }
}
.hl--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1040px; }
@media (max-width: 52rem) { .hl--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-lg); } .hl--6::before { display: none; } }
@media (max-width: 40rem) { .hl--6 { grid-template-columns: minmax(0, 1fr); } }
.hl__more, .trust__more { margin-top: var(--space-lg); }