/* ==========================================================================
   Rapid Zone Cargo

   Register: Apple product page. One idea per screen, large type set tight,
   black and white alternating, almost no interface chrome. The only ornament
   on the page is the container itself.

   Every colour is a variable written by the admin theme editor, so rebranding
   never touches this file.
   ========================================================================== */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:target { scroll-margin-top: 96px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
.wrap--narrow { max-width: 760px; }
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10000; padding: .7rem 1.2rem;
  background: var(--primary); color: var(--primary-ink); border-radius: var(--radius-pill);
}
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* ============================================================= typography
   Apple's move is scale plus tightness: the bigger the type, the tighter the
   tracking. Nothing here is bold for its own sake — 600 is the ceiling. */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1, .t-hero { font-size: clamp(2.75rem, 8.2vw, 5.75rem); }
h2, .t-1    { font-size: clamp(2.1rem, 5.4vw, 3.75rem); letter-spacing: -0.032em; }
h3, .t-2    { font-size: clamp(1.35rem, 2.4vw, 1.85rem); letter-spacing: -0.024em; line-height: 1.16; }
h4, .t-3    { font-size: 1.15rem; letter-spacing: -0.018em; line-height: 1.3; }

.lede {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.019em;
  color: var(--muted);
  max-width: 34ch;
}
.lede--wide { max-width: 52ch; }
p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--text); }

/* The eyebrow is coloured rather than ruled — a line above it would be one
   accessory too many. */
.eyebrow {
  display: block;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--primary);
  margin-bottom: .5rem;
}
.kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.center { text-align: center; }

/* ================================================================ buttons
   Pill, no border, and a hover that changes brightness rather than moving
   the element. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .78rem 1.5rem;
  font-size: 1rem; font-weight: 500; letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  transition: background-color .22s ease, color .22s ease, filter .22s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--primary); color: var(--primary-ink); }
.btn--primary:hover { filter: brightness(1.12); }
.btn--quiet { color: var(--primary); padding-inline: .4rem; }
.btn--quiet::after { content: " ›"; transition: transform .22s; display: inline-block; }
.btn--quiet:hover::after { transform: translateX(3px); }
.btn--soft { background: var(--surface-2); color: var(--text); }
.btn--soft:hover { filter: brightness(1.14); }
.btn--outline { box-shadow: inset 0 0 0 1px var(--line); }
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.btn--full { width: 100%; }
.btn--sm { padding: .5rem 1.05rem; font-size: .92rem; }
.btn--lg { padding: .95rem 1.9rem; font-size: 1.06rem; }
.btns { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; }
.btns--center { justify-content: center; }

/* ================================================================= header
   52px, translucent, and designed to leave your attention alone. */
.head {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: clamp(.6rem, 1.4vw, 1rem) clamp(.75rem, 3vw, 1.5rem);
  pointer-events: none;              /* only the pill is clickable */
  --head-h: 68px;                    /* rail height, for page top padding */
}

/* The pill. `fit-content` is the whole point: it grows and shrinks with the
   navigation rather than being a width somebody has to remember to update. */
.head__in {
  pointer-events: auto;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  height: 52px;
  padding-inline: clamp(.9rem, 1.8vw, 1.4rem) clamp(.45rem, 1vw, .6rem);
  border-radius: 100px;

  /* Almost no tint. 8% is enough to keep text safe over a blown-out sky and
     low enough that the pill has no colour of its own in either scheme. */
  background: color-mix(in oklab, var(--bg) 8%, transparent);

  /* The blur and the saturation do the work. Saturation is what separates
     glass from fog: it intensifies what is behind rather than veiling it. */
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  transform: translateZ(0);          /* own layer, so the blur composites */

  /* Edges. A pane is read by the light along its rim — a bright hairline on
     top, a darker one underneath. Without these a blurred shape is a smudge. */
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 42%, transparent),
    inset 0 -1px 0 color-mix(in oklab, #000 12%, transparent),
    inset 0 0 0 1px color-mix(in oklab, #fff 12%, transparent),
    0 8px 32px -14px color-mix(in oklab, #000 42%, transparent);
  transition: background-color .35s, backdrop-filter .35s, box-shadow .35s;
}
/* Over the footage the pane is against a dark, moving backdrop, so the rim
   light is what defines it. */
:root[data-over-film] .head__in {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 55%, transparent),
    inset 0 0 0 1px color-mix(in oklab, #fff 16%, transparent),
    0 10px 40px -16px #000;
}

/* Scrolled: still glass, just a touch denser. Text now passes behind it, and a
   pane over moving text needs a little more diffusion than one over sky. */
:root[data-scrolled] .head__in {
  background: color-mix(in oklab, var(--bg) 16%, transparent);
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
}
/* Three columns inside the pill: brand and actions take what they need, the
   links get the middle. Because the pill is fit-content, "the middle" is the
   middle of the pill rather than of the window — which is what makes it look
   deliberate rather than merely centred. */
.head__in {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
}
/* A set wordmark rather than a bitmap: the supplied logo is low-contrast
   artwork that reduces to a smudge at header size, and a raster cannot be
   rescued by CSS. This is sharp at any size and works in both schemes. */
.brand { display: flex; align-items: center; gap: .55rem; }
.brand__mark {
  width: 1.05rem; height: 1.05rem; flex: none;
  border-radius: 3px;
  background: var(--primary);
  /* a container end-on: two bars and a gap */
  box-shadow: inset 0 .32rem 0 color-mix(in oklab, var(--bg) 70%, transparent),
              inset 0 -.32rem 0 color-mix(in oklab, var(--bg) 70%, transparent);
}
.brand__name {
  text-shadow: 0 1px 3px color-mix(in oklab, var(--bg) 55%, transparent);
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.028em;
  color: var(--text); white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--primary); }

.nav { grid-column: 2; }
.nav__list { display: flex; align-items: center; gap: 1.9rem; }
.nav__list a {
  font-size: .8rem; color: var(--text); opacity: .82;
  text-shadow: 0 1px 3px color-mix(in oklab, var(--bg) 55%, transparent);
  transition: opacity .18s;
}
.nav__list a:hover { opacity: 1; }
.nav__list a[aria-current="page"] { opacity: 1; font-weight: 500; }

.head__end { display: flex; align-items: center; justify-content: flex-end; gap: 1.15rem; }
.head__end .icon {
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  opacity: .82; transition: opacity .18s; font-size: .9rem;
}
.head__end .icon:hover { opacity: 1; }
.burger { display: none; width: 1.9rem; height: 1.9rem; flex-direction: column; gap: 5px; place-items: center; }
.burger span { display: block; width: 1rem; height: 1px; background: var(--text); transition: transform .24s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* The pill floats, so it no longer pushes content down. The film is meant to
   run behind it; everything else needs the clearance back. */
body:not(.page-film) main > :first-child,
body:not(.page-film) main > section:first-of-type { padding-top: calc(var(--head-h, 68px) + clamp(1.5rem, 4vw, 3rem)); }
.page-film main > :first-child { padding-top: 0; }

/* ============================================================== sections
   Sections sit over the same fixed canvas as the film, so their backgrounds
   are translucent: the ship, aircraft, train and truck stay visible behind
   the content instead of every band being a flat rectangle. Solid tints are
   kept only where dense content needs them (see .sec--solid). */
.sec { position: relative; z-index: 2; padding: clamp(5rem, 11vw, 9rem) 0; }
/* On the stage every section is fully transparent. The class names are kept so
   the same templates work on pages without a stage, where they do get a
   background (see the body:not(.has-stage) rules below). */
/* Only sections inside the stage are transparent. Everything below it is an
   ordinary opaque section again, which is what let the weakest 3D go. */
.has-stage .stage .sec,
.has-stage .stage .sec--tint,
.has-stage .stage .sec--sheer { background: none; }
.has-stage .sec { background: var(--bg); }

/* Content blocks inside a sheer section need their own footing, or type sits
   directly on moving geometry. */
.sec--sheer .tile, .sec--sheer .panelbox, .sec--sheer .facts,
.sec--sheer .say, .sec--sheer .mtile {
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
/* The FAQ is hairlines and text with no panel of its own, so it gets one. */
.sec--sheer .faq {
  border-top: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.sec--sheer .faq summary { padding: 1.35rem clamp(1.1rem, 3vw, 1.75rem); }
.sec--sheer .faq__body { padding: 0 clamp(1.1rem, 3vw, 1.75rem) 1.5rem; }
.sec--sheer .faq details:last-child { border-bottom: 0; }
.sec--tight { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.sec__head { max-width: 34rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.has-stage .sec__head--center { margin-inline: auto; }
.has-stage .answer { border-left-color: var(--primary); }
.sec__head--center { margin-inline: auto; text-align: center; }
.sec__head h2 { margin-bottom: .9rem; }

/* Cards without visible boxes: separation comes from a tint and a radius,
   not an outline. This is most of what separates Apple from Bootstrap. */
.tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.tiles--2 { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.tile {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-radius: var(--radius-lg);
  transition: transform .35s cubic-bezier(.28,.6,.26,1);
}
.sec--tint .tile { background: color-mix(in oklab, var(--bg) 88%, transparent); }
.tile:hover { transform: translateY(-4px); }
.tile h3 { margin-bottom: .55rem; }
.tile p { color: var(--muted); font-size: .98rem; }
.tile__link { display: inline-block; margin-top: 1rem; color: var(--primary); font-size: .95rem; }
.tile__link::after { content: " ›"; }

.mtile {
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.sec--tint .mtile { background: color-mix(in oklab, var(--bg) 88%, transparent); }
.mtile img { aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .6s cubic-bezier(.28,.6,.26,1); }
.mtile:hover img { transform: scale(1.03); }
.mtile__body { padding: clamp(1.4rem, 2.6vw, 1.9rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.mtile__body p { color: var(--muted); font-size: .96rem; flex: 1; }

.feature { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.feature + .feature { margin-top: clamp(4rem, 8vw, 7rem); }
.feature:nth-child(even) .feature__media { order: -1; }
.feature__media img { border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.feature__copy h2 { margin-bottom: 1rem; }

.band {
  display: grid; gap: clamp(2rem, 4vw, 3rem) 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
}
.band b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;   /* digits stop jittering as they count */
}
.band > div > span {
  display: block; margin-top: .5rem; font-size: .9rem; color: var(--muted);
  letter-spacing: 0;
}
/* The counter sits inside the <b>; it must inherit the figure's type, not the
   label's. A descendant selector on span reached in here and shrank it. */
.band b span { font: inherit; letter-spacing: inherit; color: inherit; }

/* ----------------------------------------------------------- lists & steps */
.checks { display: grid; gap: .85rem; }
.checks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; color: var(--muted); }
.checks li::before { content: "✓"; color: var(--primary); font-weight: 600; }
.checks--warn li::before { content: "!"; color: var(--object-paint); }
.checks strong { color: var(--text); }

.steps { display: grid; }
.step { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.25rem; padding: 1.6rem 0; }
.step + .step { border-top: 1px solid var(--line); }
.step__n { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--muted); letter-spacing: -0.02em; }
.step h3 { font-size: 1.18rem; margin-bottom: .35rem; }
.step p { color: var(--muted); font-size: .98rem; }

/* Facts table: no grid lines, just rhythm. */
.facts {
  border-radius: var(--radius-lg); overflow: hidden;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
}
.sec--tint .facts { background: color-mix(in oklab, var(--bg) 90%, transparent); }
.facts caption { padding: 1.1rem 1.4rem .4rem; text-align: left; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.facts table { width: 100%; border-collapse: collapse; }
.facts th, .facts td { padding: .85rem 1.4rem; text-align: left; font-size: .96rem; vertical-align: top; }
.facts tr + tr th, .facts tr + tr td { border-top: 1px solid var(--line); }
.facts th { width: 36%; font-weight: 400; color: var(--muted); }

/* Answer-first block: a quiet quote, not a callout box. */
.answer { padding-left: 1.5rem; border-left: 2px solid var(--primary); }
.answer .kicker { margin-bottom: .5rem; }
.answer p { font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.5; letter-spacing: -0.016em; }

/* -------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 500; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .55rem; height: .55rem;
  border-right: 1.5px solid var(--primary); border-bottom: 1.5px solid var(--primary);
  transform: rotate(45deg); transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--primary); }
.faq__body { padding-bottom: 1.5rem; max-width: 68ch; }
.faq__body p { color: var(--muted); }

/* ----------------------------------------------------------- testimonials */
/* ----------------------------------------------------------- testimonials
   Three cards, not six: six across a grid made every card as tall as the
   longest quote and the type shrank to fit, which is why they needed squinting
   at. The quote is now the largest thing on the card, at a reading size. */
.says {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.say {
  margin: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.sec--tint .say { background: var(--bg); }
.say blockquote {
  margin: 0; flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 500; line-height: 1.45; letter-spacing: -.018em;
  color: var(--text); text-wrap: pretty;
}
/* An opening quote set into the corner — ornament, sized as ornament. */
.say blockquote::before {
  content: "\201C";
  display: block; font-size: 3.2rem; line-height: .6;
  color: var(--primary); margin-bottom: .35rem;
}
.say figcaption { display: grid; gap: .15rem; }
.say__who { font-size: 1rem; font-weight: 600; letter-spacing: -.012em; }
.say__role { font-size: .9rem; color: var(--muted); }

/* ================================================================== forms */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.field { display: grid; gap: .4rem; }
.field > label { font-size: .85rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1rem; letter-spacing: -0.01em;
  transition: border-color .18s, box-shadow .18s;
}
.sec--tint .field input, .sec--tint .field select, .sec--tint .field textarea,
.panelbox .field input, .panelbox .field select, .panelbox .field textarea { background: var(--surface-2); }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--muted) 78%, transparent); }
.field select {
  appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) center, calc(100% - .85rem) center;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field__help { font-size: .84rem; color: var(--muted); }
.field--check { display: grid; grid-template-columns: 1.2rem 1fr; gap: .7rem; align-items: start; }
.field--check input { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); margin-top: .18rem; }
.field--check label { font-size: .92rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; }

.panelbox {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  border-radius: var(--radius-lg);
}
.sec--tint .panelbox { background: color-mix(in oklab, var(--bg) 92%, transparent); }
.panelbox > h3 { margin-bottom: .4rem; }
.panelbox > p { color: var(--muted); font-size: .96rem; margin-bottom: 1.5rem; }

.flash {
  margin: 1.25rem 0; padding: .95rem 1.2rem; border-radius: var(--radius);
  font-size: .96rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.flash--ok { box-shadow: inset 0 0 0 1px var(--accent); }
.flash--error { box-shadow: inset 0 0 0 1px var(--object-paint); }

/* =================================================================== blog */
.posts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1.35rem; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin-top: 3rem; }
.prose h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 2.25rem; }
.prose p, .prose li { font-size: 1.09rem; line-height: 1.68; color: var(--text); opacity: .9; }
.prose a { color: var(--primary); }
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { display: grid; gap: .6rem; padding-left: 1.5rem; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before { content: "—"; position: absolute; left: -1.5rem; color: var(--muted); }
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--muted); }
.prose blockquote { padding-left: 1.4rem; border-left: 2px solid var(--primary); }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: .8rem 1rem; text-align: left; }
.prose tr + tr th, .prose tr + tr td { border-top: 1px solid var(--line); }
.prose thead th { font-weight: 600; border-bottom: 1px solid var(--line); }
.prose td { color: var(--muted); }
.prose code { font-family: var(--font-mono); font-size: .9em; padding: .15em .4em; background: var(--surface); border-radius: 5px; }
.prose pre { padding: 1.25rem; background: var(--surface); border-radius: var(--radius); overflow-x: auto; }
.prose img { border-radius: var(--radius); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.75rem 0; }

.meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }

.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .86rem; color: var(--muted); margin-bottom: 1.75rem; }
.crumbs li { display: flex; gap: .45rem; }
.crumbs li:not(:last-child)::after { content: "›"; opacity: .5; }
.crumbs a:hover { color: var(--primary); }

.pager { display: flex; justify-content: center; gap: .35rem; margin-top: 3.5rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 2.4rem; padding: .5rem .75rem; text-align: center;
  border-radius: var(--radius-pill); font-size: .92rem; color: var(--muted);
}
.pager a:hover { background: var(--surface); color: var(--text); }
.pager [aria-current] { background: var(--primary); color: var(--primary-ink); }

/* =============================================================== tracking */
.track__form { display: flex; gap: .7rem; flex-wrap: wrap; max-width: 32rem; }
.track__form input { flex: 1; min-width: 13rem; font-family: var(--font-mono); text-transform: uppercase; }

.trace { display: grid; }
.trace__item { display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem; padding-bottom: 1.75rem; }
.trace__item:last-child { padding-bottom: 0; }
.trace__dot { position: relative; display: grid; place-items: start center; padding-top: .3rem; }
.trace__dot i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); z-index: 2; }
.trace__item.is-done .trace__dot i { background: var(--accent); }
.trace__item.is-now .trace__dot i { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.trace__item:not(:last-child) .trace__dot::after { content: ""; position: absolute; top: .95rem; bottom: -1.75rem; width: 1px; background: var(--line); }
.trace__body h4 { font-size: 1.02rem; margin-bottom: .2rem; }
.trace__body p { font-size: .92rem; color: var(--muted); }
.trace__when { font-size: .8rem; color: var(--muted); }

.bar { height: 4px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .8s cubic-bezier(.28,.6,.26,1); }

.datagrid {
  display: grid; gap: 1.5rem;
  /* 13rem, not 8.5: an email address is one unbreakable token and at 8.5rem it
     overflowed its cell onto the next one. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.datagrid .lbl { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
.datagrid b {
  font-size: 1.02rem; font-weight: 500;
  display: block; min-width: 0;
  /* Belt and braces: an address longer than any sane track still wraps inside
     its own cell rather than spilling into the neighbour. */
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.datagrid a { color: inherit; }

/* ================================================================= footer */
.foot { position: relative; z-index: 2; background: var(--surface); font-size: .82rem; }
/* Pages without the stage need opaque sections, or they show plain page bg. */
body:not(.has-stage) .sec { background: var(--bg); }
body:not(.has-stage) .sec--tint { background: var(--surface); }
.foot__in { padding: 3rem 0 2rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding-bottom: 2.5rem; }
.foot h3 { font-size: .82rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: .9rem; }
.foot ul { display: grid; gap: .65rem; }
.foot a, .foot span { color: var(--muted); }
.foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.foot__bar { padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; color: var(--muted); }
.foot__social { display: flex; gap: 1.1rem; }

.dock { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: grid; gap: .6rem; }
.dock a {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 8px 28px -8px rgba(0,0,0,.55), inset 0 0 0 1px var(--line);
  font-size: .58rem; font-weight: 600; color: var(--muted);
  transition: transform .2s, color .2s;
}
.dock a:hover { transform: scale(1.07); color: var(--text); }

/* ============================================================== utilities */
.mt-1 { margin-top: 1rem } .mt-2 { margin-top: 2rem } .mt-3 { margin-top: 3rem }
.mb-1 { margin-bottom: 1rem } .mb-2 { margin-bottom: 2rem }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1fr; align-items: start; }
.split--wide-left { grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); }
.stack { display: grid; gap: 1.35rem; }
.sticky { position: sticky; top: 5.5rem; }

.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.28,.6,.26,1), transform .8s cubic-bezier(.28,.6,.26,1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .act__copy { opacity: 1 !important; transform: none !important; }
}
:root[data-motion="off"] .reveal { opacity: 1; transform: none; }

/* ============================================================ responsive
   Four real breakpoints, each tested:
     1280+  laptop / desktop — the reference layout
     1024   small laptop and landscape tablet
     768    portrait tablet
     480    phone
   The 3D scene now runs on phones too (at a reduced quality profile), so the
   layout has to give it room rather than assume a flat background.
   ========================================================================== */

/* ---- small laptop / landscape tablet ---- */
@media (max-width: 1180px) {
  .split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .nav__list { gap: 1.35rem; }
}

/* ---- portrait tablet ---- */
@media (max-width: 1024px) {
  body { font-size: 16.5px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
  .posts { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .says { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  /* the copy column narrows before the burger appears, so acts stay readable */

}

/* ---- tablet / where the nav collapses ---- */
@media (max-width: 900px) {
  .feature, .split, .split--wide-left { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .sticky { position: static; }
  .hide-md { display: none; }

  /* Acts go full width and the scrim becomes vertical, because there is no
     longer a free half of the screen for the object to sit in. */
  /* One column below 900: the copy sits under the scene, not beside it. */
  .act > .wrap { grid-template-columns: 1fr; }
  .act__copy, .act--right .act__copy, .act--center .act__copy {
    max-width: none; margin: 0; padding-right: 0;
  }
  .act { align-content: end; padding-bottom: 8vh; padding-top: 22vh; }
  .act--right { text-align: left; }


  /* The three-column grid is for the desktop layout, where the links sit in
     the middle. On mobile there are no visible links — the nav is a fixed
     panel — so the grid leaves an empty middle column and the controls end up
     stranded short of the edge. Measured: 158px short on a 390px screen.
     A flex row with the controls pushed right is unambiguous. */
  /* Full width on phones: a fitted pill around brand + two buttons would be a
     stub floating in a lot of empty space. */
  .head__in {
    display: flex; justify-content: space-between;
    width: 100%; padding-inline: .5rem .5rem;
  }
  .head__in .brand { padding-inline-start: .55rem; }
  .head__end { margin-inline-start: auto; gap: .4rem; }

  .burger { display: flex; }

  /* Both controls as equal square targets so they line up with each other and
     clear the 44px minimum for a thumb. */
  .head__end .icon,
  .head__end .burger {
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    border-radius: 50%;
    flex: none;
  }
  .head__end .icon { font-size: 1.05rem; }
  .nav {
    position: fixed; inset: calc(var(--head-h, 68px) + .35rem) clamp(.75rem, 3vw, 1.5rem) auto; margin: 0;
    border-radius: var(--radius-lg);
    /* A larger pane than the pill, and it sits over whatever the reader was
       just looking at, so it takes more diffusion — but the same near-zero
       tint, so it is still glass and not a panel. */
    background: color-mix(in oklab, var(--bg) 14%, transparent);
    backdrop-filter: blur(40px) saturate(190%);
    -webkit-backdrop-filter: blur(40px) saturate(190%);
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, #fff 34%, transparent),
      inset 0 0 0 1px color-mix(in oklab, #fff 10%, transparent),
      0 24px 60px -22px color-mix(in oklab, #000 55%, transparent);
    border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - var(--head-h, 68px) - 1.5rem); overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .34s cubic-bezier(.28,.6,.26,1);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav__list {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem clamp(1.25rem, 5vw, 2.5rem) 1.5rem;
  }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .nav__list a { display: block; padding: 1rem 0; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }

  /* Hover does not exist here, so a marker that only reveals on hover is
     dead weight over the object. */
  .spot { display: none; }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* svh, not vh: with a mobile browser's collapsing toolbar, 100vh acts jump
     by ~80px mid-scroll and the scrub stutters. */
  .act { min-height: 100svh; padding-top: 20vh; padding-bottom: 5vh; }
  .hero h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); }
  .hero .lede { font-size: 1.02rem; max-width: 30ch; }
  h2, .t-1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .lede { font-size: 1.05rem; }
  .act__facts { gap: 1.5rem 2rem; }
  .act__fact b { font-size: clamp(1.6rem, 8vw, 2.1rem); }

  .sec { padding: clamp(3.5rem, 12vw, 5rem) 0; }
  .sec__head { margin-bottom: 2rem; }
  .step { grid-template-columns: 2rem 1fr; gap: .85rem; }
  .facts th { width: 46%; }
  .facts th, .facts td { padding: .75rem 1rem; font-size: .92rem; }
  .band { gap: 2rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__bar { flex-direction: column; gap: .75rem; }

  /* Buttons stack full width — thumbs, not cursors. */
  .btns { gap: .7rem; }
  .hero .btns { flex-direction: column; align-items: stretch; }
  .hero .btns .btn { width: 100%; }
  .form__row { grid-template-columns: 1fr; }
  .track__form { flex-direction: column; }
  .track__form input, .track__form .btn { width: 100%; }

  /* The dock overlaps the quote form's submit button at this width. */
  .dock { right: .8rem; bottom: .8rem; gap: .5rem; }
  .dock a { width: 2.7rem; height: 2.7rem; font-size: .52rem; }

  .panelbox { padding: 1.35rem; }
  .prose p, .prose li { font-size: 1.02rem; }
  .crumbs { font-size: .8rem; }
}

/* ---- very narrow phones ---- */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.95rem; }
  .band, .datagrid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .wrap { padding-inline: 1.1rem; }
}

/* ---- short landscape (phone rotated): 100dvh acts would trap the reader --- */
@media (max-height: 560px) and (orientation: landscape) {
  .act { min-height: auto; padding: 5rem 0 3rem; }
  .hint { display: none; }
}

@media print {
  .head, .dock, .beat__scrim, .beat__hint, .beat__progress, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .beat, .sec { height: auto; min-height: 0; padding: 1rem 0; page-break-inside: avoid; }
  .beat__frame { position: static; height: auto; }
}



/* ==========================================================================
   The film — one continuous take.

   Every clip lives on a single timeline behind one sticky canvas. The section
   is as tall as the whole film needs; the stage inside it is one viewport and
   stays put while the frames advance. There are no per-clip sections, so there
   are no seams between clips to give the cut away.

   Copy opacity and offset are written by the player, timed to the same clock
   as the frames — that is why the words arrive with the picture.
   ========================================================================== */
.film {
  position: relative;
  /* Playback speed. 180vh per clip puts roughly 20px of scroll behind each
     frame, which is where these sequences read as motion rather than steps. */
  height: calc(var(--clips, 6) * 180vh);
  background: #0b0d11;
}
.film__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: #0b0d11;
}
.film__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Held over the canvas until the first frame decodes. */
.film__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: #0b0d11; pointer-events: none;
  transition: opacity .7s ease;
}
.film[data-ready] .film__stage::after { opacity: 0; }

/* One wash for the whole film rather than one per clip: a single fixed
   treatment cannot show a seam where two of them would meet. */
.film__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(8,10,14,.88) 0%, rgba(8,10,14,.66) 26%,
      rgba(8,10,14,.22) 52%, rgba(8,10,14,0) 74%),
    linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,0) 22%,
      rgba(8,10,14,0) 74%, rgba(8,10,14,.6) 100%);
}

/* Copy blocks are stacked in the same place; only one is ever legible, and the
   player cross-fades between them. */
.film__copy {
  position: absolute; z-index: 3;
  top: 50%; translate: 0 -50%;
  left: clamp(1.25rem, 5vw, 4.5rem);
  width: min(40ch, 44vw);
  color: #f4f6f8;
  opacity: 0; visibility: hidden;
}
.film__copy.is-right { left: auto; right: clamp(1.25rem, 5vw, 4.5rem); }
.film__copy.is-center {
  left: 50%; right: auto; translate: -50% -50%;
  width: min(60ch, 86vw); text-align: center;
}
/* No transition and no will-change: the scroll position *is* the timing, and
   a compositing hint on forty elements costs more than it saves. */
.film__copy > * { opacity: 0; }

.film__copy h2 { font-size: clamp(1.9rem, 3.5vw, 3.3rem); margin: .25rem 0 1rem; }
.film__copy.is-center h2 { font-size: clamp(1.95rem, 4vw, 3.5rem); text-wrap: balance; }
.film__copy .lede { color: rgba(244,246,248,.8); max-width: 44ch; }
.film__copy.is-center .lede { margin-inline: auto; max-width: 48ch; }
.film__copy .eyebrow { color: #6fa8ff; display: block; }
.film__copy .btns { margin-top: 1.9rem; }
.film__copy.is-center .btns { justify-content: center; }
.film__copy .btn--quiet { color: #6fa8ff; }
.film__copy .btn--primary { background: #0071e3; color: #fff; }

.film__facts { display: flex; gap: 2.25rem; flex-wrap: wrap; margin-top: 1.75rem; }
.film__copy.is-center .film__facts { justify-content: center; }
.film__facts b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.04em; line-height: 1;
}
.film__facts span {
  display: block; margin-top: .35rem; font-size: .84rem; color: rgba(244,246,248,.62);
}

/* One progress line for the whole film, so the reader can see how much story
   is left rather than how much of one clip is left. */
.film__progress {
  position: absolute; inset: auto 0 0 0; z-index: 4;
  height: 2px; background: rgba(244,246,248,.14);
}
.film__progress > i { display: block; height: 100%; width: 0; background: #0071e3; }

.film__hint {
  position: absolute; z-index: 4;
  left: 50%; bottom: 2.25rem; translate: -50% 0;
  display: grid; justify-items: center; gap: .5rem;
  font-size: .78rem; color: rgba(244,246,248,.6);
  transition: opacity .4s;
}
.film__hint i {
  display: block; width: 1px; height: 2.1rem;
  background: linear-gradient(rgba(244,246,248,.7), transparent);
  animation: drift 2.4s ease-in-out infinite;
}
:root[data-scrolled] .film__hint { opacity: 0; }

@media (max-width: 900px) {
  .film { height: calc(var(--clips, 6) * 150vh); }

  /* The phone footage was shot in portrait for a portrait screen, and the copy
     is the only thing competing with it. So it is deliberately small and pinned
     to the bottom eighth: enough to read, little enough that the shot is still
     the reason you are looking. */
  .film__copy,
  .film__copy.is-right,
  .film__copy.is-center {
    left: 0; right: 0; width: auto;
    top: auto; bottom: 6vh; translate: 0 0;
    padding-inline: clamp(1.1rem, 5vw, 1.75rem);
    text-align: left;
  }
  .film__copy.is-center { text-align: left; }   /* centred reads as a poster */

  .film__copy h2,
  .film__copy.is-center h2 {
    font-size: clamp(1.3rem, 5.4vw, 1.7rem);
    line-height: 1.15;
    margin: .15rem 0 .5rem;
    max-width: 22ch;
  }
  .film__copy .lede,
  .film__copy.is-center .lede {
    font-size: .92rem; line-height: 1.45;
    max-width: 34ch; margin-inline: 0;
    color: rgba(244,246,248,.72);
  }
  .film__copy .eyebrow { font-size: .68rem; }

  /* Figures stay, but as a single quiet line rather than a stacked block. */
  .film__facts,
  .film__copy.is-center .film__facts {
    gap: 1.25rem; margin-top: .85rem; justify-content: flex-start;
  }
  .film__facts b { font-size: 1.15rem; }
  .film__facts span { font-size: .68rem; margin-top: .1rem; }

  .film__copy .btns,
  .film__copy.is-center .btns { margin-top: 1rem; justify-content: flex-start; }
  .film__copy .btn { padding: .6rem 1.1rem; font-size: .85rem; }

  /* A shallower wash: enough contrast under the last eighth to read against,
     and the rest of the frame left alone. */
  .film__scrim {
    background: linear-gradient(180deg,
      rgba(8,10,14,.30) 0%, rgba(8,10,14,.04) 16%,
      rgba(8,10,14,0) 40%, rgba(8,10,14,.30) 62%,
      rgba(8,10,14,.78) 82%, rgba(8,10,14,.96) 100%);
  }
  /* A little weight behind the words themselves, for the shots that put
     something bright exactly there. */
  .film__copy h2, .film__copy .lede {
    text-shadow: 0 1px 12px rgba(8,10,14,.55);
  }
}

/* Very short viewports — a small phone in landscape — cannot spare the room, so
   the supporting copy drops out and the headline carries the beat alone. */
@media (max-width: 900px) and (max-height: 620px) {
  .film__copy .lede, .film__facts { display: none; }
  .film__copy h2 { font-size: clamp(1.15rem, 4.4vw, 1.45rem); }
}

/* Reduced motion: no scroll-timed reveal, no long track. */
@media (prefers-reduced-motion: reduce) {
  .film { height: 100svh; }
  .film__copy { opacity: 1 !important; visibility: visible !important; }
  .film__copy > * { opacity: 1 !important; transform: none !important; }
  .film__hint i { animation: none; }
}

/* ==========================================================================
   Reveal on scroll.

   The film taught the page a grammar: things arrive as you reach them. The
   sections below it follow it, so the page reads as one piece rather than a
   cinematic top bolted onto an ordinary bottom. The stagger index is written
   by JS; everything else is CSS, so the compositor does the work.
   ========================================================================== */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .75s cubic-bezier(.22,.68,.24,1) calc(var(--rv-i, 0) * 90ms),
    transform .85s cubic-bezier(.22,.68,.24,1) calc(var(--rv-i, 0) * 90ms);
}
[data-shown] > .rv, [data-shown] .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==========================================================================
   Atmosphere.

   The palette was correct but airless — flat fields of one value. These are the
   same colours with light in them: a wash behind the page, a faint tint on the
   panels, and a hairline highlight along the top edge of anything raised. All
   of it derives from the existing tokens, so a theme change still governs.
   ========================================================================== */
body {
  background-attachment: fixed;
  background-image:
    radial-gradient(120% 62% at 12% -8%,
      color-mix(in oklab, var(--primary) 9%, transparent) 0%, transparent 62%),
    radial-gradient(90% 55% at 100% 4%,
      color-mix(in oklab, var(--accent) 7%, transparent) 0%, transparent 58%),
    radial-gradient(140% 80% at 50% 108%,
      color-mix(in oklab, var(--primary) 6%, transparent) 0%, transparent 66%);
}

/* Tinted panels rather than solid ones, plus a light edge on top. The edge is
   what stops a card reading as a painted rectangle. */
.tile, .panelbox, .say, .mtile, .facts, .form {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--text) 3%, transparent) 0%,
    transparent 42%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--text) 7%, transparent),
    0 1px 2px color-mix(in oklab, #000 4%, transparent),
    0 12px 30px -18px color-mix(in oklab, #000 22%, transparent);
}
:root[data-scheme="dark"] .tile,
:root[data-scheme="dark"] .panelbox,
:root[data-scheme="dark"] .say,
:root[data-scheme="dark"] .mtile,
:root[data-scheme="dark"] .facts,
:root[data-scheme="dark"] .form {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, #fff 5%, transparent) 0%,
    transparent 46%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 8%, transparent),
    0 18px 40px -24px #000;
}

/* Tinted section bands get a gradient rather than a single value, so two
   stacked sections never meet as a hard step. */
.sec--tint {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, var(--primary) 4%, transparent) 0%,
    transparent 55%,
    color-mix(in oklab, var(--primary) 3%, transparent) 100%);
}

/* Primary buttons get depth from a gradient and a lit top edge. */
.btn--primary {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklab, #fff 16%, transparent) 0%,
    transparent 58%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 26%, transparent),
    0 6px 18px -8px color-mix(in oklab, var(--primary) 55%, transparent);
}
.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 30%, transparent),
    0 10px 26px -8px color-mix(in oklab, var(--primary) 65%, transparent);
}

/* ==========================================================================
   Quick-contact dock.

   Real marks rather than the word in a circle, drawn as masked SVG so they take
   the current text colour — white on dark, near-black on light — without
   shipping two copies of each icon.
   ========================================================================== */
.dock {
  position: fixed; right: clamp(.9rem, 2vw, 1.5rem); bottom: clamp(.9rem, 2vw, 1.5rem);
  z-index: 40; display: grid; gap: .6rem;
}
.dock a {
  --icon: none;
  position: relative;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent),
    0 8px 24px -10px color-mix(in oklab, #000 40%, transparent);
  transition: transform .28s cubic-bezier(.22,.68,.24,1),
              box-shadow .28s, background-color .28s;
}
/* The label is for assistive tech and for the hover flag, not for the button. */
.dock a > span {
  position: absolute; right: calc(100% + .6rem);
  white-space: nowrap;
  font-size: .8rem; font-weight: 500;
  padding: .4rem .65rem; border-radius: var(--radius);
  background: var(--text); color: var(--bg);
  opacity: 0; transform: translateX(6px);
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.dock a::before {
  content: "";
  width: 1.35rem; height: 1.35rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.dock a { color: var(--text); }
.dock a:hover { transform: translateY(-2px); }
.dock a:hover > span { opacity: 1; transform: translateX(0); }

/* WhatsApp brand colour on hover, because that one is recognised by colour. */
.dock a.is-wa:hover { background: #25D366; color: #fff; }
.dock a.is-tel:hover { background: var(--primary); color: var(--primary-ink); }

.dock a.is-wa {
  --icon: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.97L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm5.8 14.03c-.24.68-1.4 1.3-1.93 1.35-.53.05-1.03.24-2.9-.6-2.25-1.02-3.68-3.4-3.79-3.55-.11-.16-.9-1.23-.9-2.34 0-1.11.58-1.66.79-1.88.2-.22.44-.28.59-.28.15 0 .3 0 .43.01.14.01.32-.05.5.38.18.44.63 1.54.68 1.65.05.11.09.24.02.38-.07.15-.13.24-.26.38-.13.14-.27.31-.39.42-.13.13-.27.27-.12.53.15.26.66 1.09 1.42 1.77.97.87 1.79 1.14 2.05 1.27.26.13.41.11.56-.07.15-.18.65-.76.82-1.02.17-.26.35-.22.58-.13.24.09 1.5.71 1.76.84.26.13.43.2.5.31.06.11.06.65-.18 1.33z"/>\
</svg>');
}
.dock a.is-tel {
  --icon: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M6.6 10.8c1.2 2.36 3.24 4.4 5.6 5.6l1.87-1.87c.23-.23.57-.3.87-.2 1.02.34 2.1.52 3.21.52.5 0 .9.4.9.9V18.9c0 .5-.4.9-.9.9C10.4 19.8 4.2 13.6 4.2 5.85c0-.5.4-.9.9-.9h3.25c.5 0 .9.4.9.9 0 1.12.18 2.2.52 3.21.1.3.03.64-.2.87L6.6 10.8z"/>\
</svg>');
}

@media (max-width: 640px) {
  .dock a { width: 2.75rem; height: 2.75rem; }
  .dock a::before { width: 1.2rem; height: 1.2rem; }
  .dock a > span { display: none; }
}

/* When the frame sequences have not been built (a fresh checkout — they are
   generated locally, see tools/build_film.py) the film becomes a plain stack of
   readable sections instead of a tall black hole. */
.film--nofilm { height: auto; background: var(--bg); }
.film--nofilm .film__stage {
  position: static; height: auto; background: none;
  display: grid; gap: clamp(3rem, 7vw, 6rem);
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.film--nofilm .film__stage::after,
.film--nofilm .film__scrim,
.film--nofilm .film__hint,
.film--nofilm .film__progress,
.film--nofilm .film__canvas { display: none; }
.film--nofilm .film__copy {
  position: static; inset: auto; translate: none;
  width: auto; max-width: 46rem;
  margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  opacity: 1 !important; visibility: visible !important;
  text-align: left; color: var(--text);
}
.film--nofilm .film__copy > * { opacity: 1 !important; transform: none !important; }
.film--nofilm .film__copy .lede { color: var(--muted); }
.film--nofilm .film__copy h2 { text-shadow: none; }
.film--nofilm .film__facts b { color: var(--text); }
.film--nofilm .film__facts span { color: var(--muted); }

/* ==========================================================================
   Service cards.

   Six text blocks in a grid read as a list. These get a drawn mark, an index,
   and motion on hover — all CSS, so nothing extra loads and it follows the
   theme. The marks are conic and linear gradients rather than icons: no font
   to wait for, no SVG to fetch, and they scale without blurring.
   ========================================================================== */
.tile--svc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 15.5rem;
  transition: transform .4s cubic-bezier(.22,.68,.24,1),
              box-shadow .4s cubic-bezier(.22,.68,.24,1);
}
.tile--svc:hover { transform: translateY(-4px); }

/* A soft light that follows the corner the mark sits in. */
.tile__glow {
  position: absolute; inset: -40% 40% 55% -30%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--primary) 22%, transparent) 0%, transparent 68%);
  filter: blur(28px);
  opacity: .7;
  transition: opacity .45s, transform .45s cubic-bezier(.22,.68,.24,1);
  z-index: -1;
}
.tile--svc:hover .tile__glow { opacity: 1; transform: translate(12%, -8%) scale(1.15); }

.tile__num {
  position: absolute; top: 1.15rem; right: 1.35rem;
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .16em;
  color: color-mix(in oklab, var(--text) 32%, transparent);
}

/* The mark: a 44px square built from gradients. Each service gets its own by
   way of the data-mark attribute. */
.tile__mark {
  position: relative;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: 1.4rem;
  border-radius: 12px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent);
  transition: transform .45s cubic-bezier(.22,.68,.24,1),
              background-color .45s;
}
.tile--svc:hover .tile__mark {
  transform: translateY(-2px) rotate(-4deg);
  background: color-mix(in oklab, var(--primary) 20%, transparent);
}
.tile__mark::before, .tile__mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--primary);
}

/* 01 door to door — a box in motion */
[data-mark="1"] .tile__mark::before {
  width: 1.35rem; height: .95rem; border-radius: 2px; inset: auto auto 0.75rem 0.6rem;
}
[data-mark="1"] .tile__mark::after {
  width: .5rem; height: .16rem; border-radius: 2px; inset: auto 0.5rem 1.15rem auto;
  box-shadow: 0 .35rem 0 var(--primary), 0 -.35rem 0 var(--primary);
  opacity: .55;
}
/* 02 customs — a stamp */
[data-mark="2"] .tile__mark::before {
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 2px var(--primary);
}
[data-mark="2"] .tile__mark::after { width: .8rem; height: 2px; border-radius: 2px; }
/* 03 port clearance — a gate */
[data-mark="3"] .tile__mark::before {
  width: 1.4rem; height: 1.1rem; background: none;
  box-shadow: inset 0 2px 0 var(--primary), inset 2px 0 0 var(--primary),
              inset -2px 0 0 var(--primary);
}
[data-mark="3"] .tile__mark::after {
  width: 1.4rem; height: 2px; inset: auto auto .72rem auto; opacity: .5;
}
/* 04 worldwide — an orbit */
[data-mark="4"] .tile__mark::before {
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 2px var(--primary);
}
[data-mark="4"] .tile__mark::after {
  width: 1.5rem; height: .6rem; border-radius: 50%;
  background: none; box-shadow: 0 0 0 2px var(--primary); opacity: .5;
}
/* 05 vehicles — a wheel pair */
[data-mark="5"] .tile__mark::before {
  width: 1.45rem; height: .5rem; border-radius: 2px; inset: auto auto 1.05rem auto;
}
[data-mark="5"] .tile__mark::after {
  width: .42rem; height: .42rem; border-radius: 50%; inset: auto auto .62rem auto;
  box-shadow: -.5rem 0 0 var(--primary), .5rem 0 0 var(--primary);
  background: none;
}
/* 06 last mile — a pin */
[data-mark="6"] .tile__mark::before {
  width: .95rem; height: .95rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); inset: auto auto 1rem auto;
}
[data-mark="6"] .tile__mark::after {
  width: .9rem; height: .18rem; border-radius: 50%; inset: auto auto .62rem auto;
  opacity: .4;
}

.tile--svc h3 { margin: 0 0 .5rem; }
.tile--svc p { flex: 1; }
.tile--svc .tile__link { margin-top: 1.1rem; }
.tile--svc .tile__link::after {
  content: " →"; transition: transform .3s;
  display: inline-block;
}
.tile--svc:hover .tile__link::after { transform: translateX(4px); }

/* A hairline that draws across the top on hover. */
.tile--svc::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  height: 2px; width: 0; background: var(--primary);
  transition: width .5s cubic-bezier(.22,.68,.24,1);
}
.tile--svc:hover::before { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .tile--svc, .tile__mark, .tile__glow, .tile--svc::before { transition: none; }
}

/* ==========================================================================
   Company profile.

   No photograph: a stock warehouse says less than "18,000 shipments" does. The
   structure carries the story instead — an opening claim with the figures that
   back it, mission and vision as two facing statements each with a stated
   consequence, and the four things that are not outsourced drawn as a chain,
   because "we do not hand off" is a claim about a sequence.
   ========================================================================== */
.cprofile__hero {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.cprofile__aura {
  position: absolute; inset: -30% -10% auto -10%; height: 70vh;
  background:
    radial-gradient(50% 60% at 22% 30%, color-mix(in oklab, var(--primary) 18%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 82% 12%, color-mix(in oklab, var(--accent) 13%, transparent) 0%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}
.cprofile__lead { position: relative; max-width: 44rem; }
.cprofile__lead h1 {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.045em;
  margin: .5rem 0 1.4rem;
}
.cprofile__lead .btns { margin-top: 2rem; }

.cprofile__figures {
  position: relative;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.cprofile__figures b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cprofile__figures > div > span {
  display: block; margin-top: .45rem; font-size: .88rem; color: var(--muted);
}

/* -------------------------------------------------- mission and vision */
.mv { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mv__card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.9rem, 3.5vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 7%, transparent),
              0 18px 44px -30px color-mix(in oklab, #000 40%, transparent);
}
/* A quarter-circle bloom in the corner, different per card so the pair reads as
   two ideas rather than one repeated. */
.mv__card::before {
  content: ""; position: absolute; z-index: -1;
  width: 22rem; height: 22rem; border-radius: 50%;
  filter: blur(46px); opacity: .5;
}
.mv__card--mission::before {
  inset: -9rem -7rem auto auto;
  background: color-mix(in oklab, var(--primary) 40%, transparent);
}
.mv__card--vision::before {
  inset: auto auto -9rem -7rem;
  background: color-mix(in oklab, var(--accent) 34%, transparent);
}
.mv__tag {
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .34rem .7rem; border-radius: 100px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}
.mv__card--vision .mv__tag {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
}
.mv__card h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15; margin-bottom: 1rem;
}
.mv__card p { color: var(--muted); }
.mv__so {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--text) !important;
}
.mv__so span {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------------- the chain */
.chain {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: chain;
}
.chain__step {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent);
}
/* The line that joins them — this is the whole point of the section, so it is
   drawn rather than implied. Hidden on the wrapped rows. */
.chain__step::after {
  content: ""; position: absolute;
  top: 2.6rem; left: 100%; width: clamp(1.25rem, 2.5vw, 1.75rem); height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
}
.chain__step:last-child::after { display: none; }
.chain__dot {
  position: absolute; top: 2.35rem; left: -.3rem;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 16%, transparent);
}
.chain__n {
  display: block; font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .16em; color: var(--primary);
  margin-bottom: .75rem;
}
.chain__step h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.chain__step p { color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------------ difference */
.edge {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.edge__item { position: relative; padding-top: 1.5rem; }
.edge__item::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 2.25rem; height: 3px; border-radius: 2px; background: var(--primary);
}
.edge__item h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.edge__item p { color: var(--muted); }


@media (max-width: 760px) {
  .chain__step::after { display: none; }   /* one column — nothing to join */
}

/* ==========================================================================
   The landing page below the film.

   The film sets a register; these sections have to hold it or the page reads as
   a showreel bolted onto a brochure. Same devices as the company page — auras,
   drawn rules, marks — so the whole site speaks one language.
   ========================================================================== */

/* --------------------------------------------------------------- In short
   The first thing after the footage. It has to land as a statement, because
   this is where a skimming reader decides whether the film was style or
   substance. */
.brief {
  position: relative; overflow: hidden;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}
.brief__aura {
  position: absolute; inset: -20% -10% auto -20%; height: 60vh;
  background:
    radial-gradient(46% 58% at 18% 26%, color-mix(in oklab, var(--primary) 16%, transparent) 0%, transparent 70%),
    radial-gradient(40% 50% at 88% 8%, color-mix(in oklab, var(--accent) 11%, transparent) 0%, transparent 72%);
  filter: blur(34px); pointer-events: none;
}
.brief__grid {
  position: relative;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  align-items: start;
}
.brief__tag {
  display: inline-block; margin-bottom: 1.25rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .34rem .75rem; border-radius: 100px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}
/* The answer paragraph is the largest type on the page after the film — it is
   also the paragraph answer engines quote, so it earns the size. */
.brief__answer {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 500; line-height: 1.4; letter-spacing: -.022em;
  color: var(--text);
  padding-left: clamp(1rem, 2vw, 1.6rem);
  border-left: 3px solid var(--primary);
  text-wrap: pretty;
}
.brief__note { margin-top: 1.5rem; color: var(--muted); max-width: 52ch; }
.brief__note strong { color: var(--text); font-weight: 500; }
.brief__lead .btns { margin-top: 2rem; }

/* At a glance: a definition list drawn as a spec sheet, not a table. */
.glance {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 7%, transparent),
              0 20px 46px -32px color-mix(in oklab, #000 42%, transparent);
}
.glance__label {
  display: block; margin-bottom: 1.1rem;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.glance__list { margin: 0; }
.glance__row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem; padding: .8rem 0;
  border-top: 1px solid var(--line);
}
.glance__row:first-child { border-top: 0; padding-top: 0; }
.glance__row dt { color: var(--muted); font-size: .88rem; }
.glance__row dd { margin: 0; font-size: .95rem; font-weight: 500; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- metrics
   Eight figures. Each gets a rule that grows on approach, so the block reads
   as a chart rather than a wall of numerals. */
.metrics__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.metric { position: relative; padding-top: 1.25rem; }
.metric__rule {
  position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 2rem; border-radius: 2px;
  background: var(--primary);
  transition: width .7s cubic-bezier(.22,.68,.24,1) calc(var(--rv-i, 0) * 90ms);
}
[data-shown] .metric__rule { width: 100%; }
.metric b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric__label { display: block; margin-top: .55rem; font-size: .95rem; font-weight: 500; }
.metric__note { display: block; margin-top: .15rem; font-size: .82rem; color: var(--muted); }

/* A two-part section head: title left, a line of context right. */
.sec__head--split {
  display: grid; gap: 1.25rem 3rem; max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: end;
}
.sec__head--split .lede { color: var(--muted); font-size: 1rem; }


@media (max-width: 900px) {
  .brief__grid, .sec__head--split { grid-template-columns: 1fr; }
  .brief__answer { font-size: 1.15rem; }
  .glance__row { grid-template-columns: 7rem minmax(0, 1fr); }
  .sec__head--split { align-items: start; }
}

/* The WeChat entry in the footer: a button, because the value is an ID to copy
   rather than an address to visit. Styled to sit in the same line as the links
   so the row still reads as one set. */
/* Styled to be indistinguishable from the links beside it — it is a button
   only because WeChat is copied rather than visited. */
.foot__wechat {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer; position: relative;
  opacity: .82; transition: opacity .18s;
}
.foot__wechat:hover { opacity: 1; color: var(--primary); }

/* Confirmation for any copy button on the site. */
[data-copy][data-copied]::after {
  content: var(--copied, "Copied");
  position: absolute; inset: auto auto 130% 50%;
  translate: -50% 0;
  font-size: .72rem; white-space: nowrap;
  padding: .3rem .55rem; border-radius: var(--radius);
  background: var(--text); color: var(--bg);
}
[data-copy] { position: relative; }


/* ==========================================================================
   The register.

   Ten permissions, in three bands rather than three columns. Columns holding
   4, 4 and 2 entries produced three different heights standing side by side,
   and the eye reads that as disorder — it hunts for an alignment that is not
   there. Bands stack full width, so there is nothing to compare heights
   against, and inside each band the entries sit on a two-column grid where
   every row's pair stretches to match. The rhythm is the point.
   ========================================================================== */
.reg { display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem); }

.reg__bar {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: .4rem;
}
.reg__bar h3 {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: -.015em; white-space: nowrap;
}
/* The rule takes whatever width is left, so every band's header spans the same
   distance no matter how long its title is. */
.reg__rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.reg__tally {
  font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .12em; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.reg__note-sm {
  font-size: .88rem; color: var(--muted);
  margin-bottom: 1.35rem; max-width: 62ch;
}

.reg__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--line);                 /* the gap becomes hairlines */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--line), 0 20px 44px -34px color-mix(in oklab, #000 40%, transparent);
}

/* Every entry is the same shape: seal, title, one paragraph. Stretching to the
   row means a pair always agrees, and a minimum height stops a two-word entry
   collapsing next to a three-line one. */
.reg__item {
  display: flex; gap: .9rem; align-items: flex-start;
  min-height: 7.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--bg);
}
.sec--tint .reg__item { background: var(--surface); }
.reg__text { min-width: 0; }
.reg__item strong {
  display: block; font-size: .95rem; font-weight: 600;
  letter-spacing: -.012em; margin-bottom: .3rem;
  text-wrap: pretty;
}
.reg__item p { font-size: .86rem; color: var(--muted); line-height: 1.5; text-wrap: pretty; }

.reg__seal {
  flex: none; margin-top: .1rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 34%, transparent);
  position: relative;
}
.reg__seal::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: .42rem; height: .22rem;
  border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Said once at the end. Every entry carries the same qualifier, and repeating
   it ten times weakens each one. */
.reg__note {
  max-width: 62ch; margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center; font-size: .85rem; color: var(--muted);
}

@media (max-width: 720px) {
  .reg__grid { grid-template-columns: 1fr; }
  .reg__item { min-height: 0; }
  .reg__bar h3 { white-space: normal; }
}