/* ==========================================================================
   Ragtrail: site stylesheet
   One file for every page. Edit the colour and font tokens in :root to
   restyle the whole site.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --paper: #f3efe7;
  --paper-50: #fbf9f5;
  --paper-200: #ece6da;
  --paper-300: #e0d8c9;
  --ink: #1b1a17;
  --ink-900: #141311;
  --ink-700: #2b2925;
  --ink-600: #45423c;
  --ink-500: #6b665d;
  --ink-400: #8e887d;
  --ink-300: #b3ac9f;
  --line: #d9d2c5;
  --line-dark: #3a3732;
  --clay: #9a4a2a;
  --clay-600: #83391d;
  --clay-300: #c98b6e;
  --clay-100: #f1dfd3;
  --slate: #34495e;
  --slate-300: #8496a8;
  --slate-100: #dce3ea;
  --ochre: #a57a2f;
  --ochre-300: #cdae74;
  --ochre-100: #f1e6cf;
  --moss: #3f5e4a;
  --moss-300: #88a291;
  --moss-100: #dce6de;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --radius: 3px;
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1.1em; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--clay); color: var(--paper-50); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--paper); padding: 8px 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- 3. Layout helpers ---------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

.section { padding: 80px 0; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .section { padding: 112px 0; } }
.bg-paper { background: var(--paper); }
.bg-light { background: var(--paper-50); }
.bg-sand { background: var(--paper-200); }
.bg-ink { background: var(--ink); color: var(--paper); border-top-color: var(--line-dark); }

.grid { display: grid; gap: 24px; }
.grid-2 { display: grid; gap: 48px; }
.split { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
  .split.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .align-center { align-items: center; }
  .align-end { align-items: end; }
}
.cols-2, .cols-3, .cols-4, .cols-5 { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cols-2 > *, .cols-3 > *, .cols-4 > *, .cols-5 > * { background: var(--paper-50); padding: 26px; }
@media (min-width: 640px) { .cols-2, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-5 { grid-template-columns: repeat(5, 1fr); } }
.bg-ink .cols-2, .bg-ink .cols-3, .bg-ink .cols-4 { background: var(--line-dark); border-color: var(--line-dark); }
.bg-ink .cols-2 > *, .bg-ink .cols-3 > *, .bg-ink .cols-4 > * { background: var(--ink); }

.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; } .mt-8 { margin-top: 64px; }
.measure { max-width: 44rem; }
.prose { max-width: 38rem; }

/* ---------- 4. Type ---------- */
.eyebrow { font: 500 0.72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-500); }
.bg-ink .eyebrow, .hero-dark .eyebrow { color: var(--ink-300); }
.display-xl { font-size: clamp(2.6rem, 4.6vw + 0.6rem, 4.9rem); line-height: 0.98; letter-spacing: -0.025em; }
.display-lg { font-size: clamp(2.25rem, 4vw + 0.5rem, 4rem); line-height: 1.02; letter-spacing: -0.02em; }
.display-md { font-size: clamp(1.75rem, 2.4vw + 0.5rem, 2.75rem); line-height: 1.08; letter-spacing: -0.015em; }
.h3 { font-size: 1.45rem; line-height: 1.2; }
.lede { font-size: 1.125rem; line-height: 1.65; color: var(--ink-600); max-width: 38rem; }
.bg-ink .lede, .hero-dark .lede { color: var(--ink-300); }
.muted { color: var(--ink-600); }
.bg-ink .muted { color: var(--ink-300); }
.small { font-size: 0.9rem; }
.mono { font-family: var(--mono); }
.text-clay { color: var(--clay); } .text-slate { color: var(--slate); } .text-ochre { color: var(--ochre); } .text-moss { color: var(--moss); }
.bg-ink .text-clay { color: var(--clay-300); } .bg-ink .text-slate { color: var(--slate-300); }
.tag { font: 500 0.7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }

.prose-body { max-width: 44rem; font-size: 1.06rem; line-height: 1.75; color: var(--ink-700); }
.prose-body strong { font-weight: 600; color: var(--ink); }
.bg-ink .prose-body strong, .hero-dark .prose-body strong { color: var(--paper); }
.bg-ink .prose-body a { color: var(--paper); text-decoration-color: var(--line-dark); }
.prose-body a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.pull { border-left: 2px solid var(--clay); padding-left: 20px; font: 400 1.35rem/1.35 var(--serif); color: var(--ink); }

/* Section heading block: "§ 01  LABEL" with a hairline, then the title */
.marker { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.marker .num { font: 500 0.72rem var(--mono); letter-spacing: 0.14em; color: var(--clay); }
.bg-ink .marker { border-color: var(--line-dark); }
.bg-ink .marker .num { color: var(--clay-300); }
.heading { max-width: 44rem; }
.heading h2 { margin-top: 24px; }
.heading .intro { margin-top: 20px; font-size: 1.06rem; line-height: 1.7; color: var(--ink-600); }
.bg-ink .heading .intro { color: var(--ink-300); }

/* Unverified facts: visible on purpose. Remove each one once confirmed. */
.flag {
  display: inline-block; margin: 0 2px; padding: 0 4px; border: 1px dashed rgba(154, 74, 42, 0.5); border-radius: 2px;
  background: rgba(241, 223, 211, 0.5); color: var(--clay-600); font: 500 0.62rem/1.5 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; vertical-align: 0.1em;
}
.flag.verify { border-color: rgba(165, 122, 47, 0.7); background: rgba(241, 230, 207, 0.6); color: var(--ochre); }
.bg-ink .flag, .hero-dark .flag { background: transparent; color: var(--clay-300); border-color: rgba(201, 139, 110, 0.5); }
.bg-ink .flag.verify, .hero-dark .flag.verify { color: var(--ochre-300); border-color: rgba(205, 174, 116, 0.6); }

/* Paper grain texture */
.grain { background-image: radial-gradient(rgba(27, 26, 23, 0.035) 1px, transparent 1px); background-size: 3px 3px; }
.grain-dark { background-image: radial-gradient(rgba(243, 239, 231, 0.035) 1px, transparent 1px); background-size: 3px 3px; }

/* ---------- 5. Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper-50);
  font: 500 0.92rem var(--sans); text-decoration: none; cursor: pointer; transition: all 0.3s var(--ease);
}
.btn:hover { background: var(--clay); border-color: var(--clay); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--paper-50); border-color: var(--ink); }
.btn.inverse { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.inverse:hover { background: var(--clay); color: var(--paper-50); border-color: var(--clay); }
.btn.outline-light { background: transparent; color: var(--paper); border-color: rgba(243, 239, 231, 0.5); }
.btn.outline-light:hover { background: rgba(243, 239, 231, 0.1); border-color: var(--paper); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn .arr, .link .arr { transition: transform 0.3s var(--ease); }
.btn:hover .arr, .link:hover .arr { transform: translateX(3px); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.link:hover { text-decoration-color: var(--clay); }
.bg-ink .link { text-decoration-color: var(--line-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: rgba(243, 239, 231, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.site-header.on-dark:not(.scrolled):not(.menu-open) { background: transparent; border-color: transparent; color: var(--paper); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { width: 24px; height: 24px; flex-shrink: 0; }
.logo span { font: 500 1.35rem/1 var(--serif); letter-spacing: -0.01em; }
.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: 28px; }
.nav a { text-decoration: none; font-size: 0.9rem; opacity: 0.8; padding: 8px 0; position: relative; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta { display: none; padding: 8px 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-50); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.header-cta:hover { background: var(--clay); border-color: var(--clay); }
.on-dark:not(.scrolled):not(.menu-open) .header-cta { background: transparent; border-color: rgba(243, 239, 231, 0.5); color: var(--paper); }
.menu-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }
@media (min-width: 1080px) { .nav { display: block; } .menu-btn { display: none; } }
/* Full-screen menu (sits outside the header so the header's blur can't clip it) */
.mobile-nav { position: fixed; inset: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 28px) 0 calc(40px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 85% 0%, rgba(154, 74, 42, 0.28), transparent 60%), var(--ink-900); color: var(--paper);
  animation: mnav-in 0.35s var(--ease) both; }
.mobile-nav[hidden] { display: none; }
@keyframes mnav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mnav-grid { display: grid; gap: 40px; }
@media (min-width: 760px) { .mnav-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; } }
.mobile-nav .eyebrow { color: var(--ink-300); }
.mnav-links { list-style: none; margin-top: 14px; border-top: 1px solid var(--line-dark); }
.mnav-links li { border-bottom: 1px solid var(--line-dark); opacity: 0; transform: translateY(10px); animation: mnav-li 0.45s var(--ease) forwards; animation-delay: calc(var(--i) * 35ms + 60ms); }
@keyframes mnav-li { to { opacity: 1; transform: none; } }
.mnav-links a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; font: 400 clamp(1.35rem, 3.2vw, 1.9rem)/1.15 var(--serif); color: var(--paper); text-decoration: none; transition: color 0.2s, padding 0.25s var(--ease); }
.mnav-links a .n { font: 500 0.72rem var(--mono); color: var(--clay-300); letter-spacing: 0.08em; min-width: 22px; }
.mnav-links a .arr { margin-left: auto; color: var(--ink-400); transition: transform 0.25s var(--ease), color 0.2s; }
.mnav-links a:hover, .mnav-links a:focus-visible { color: #fff; padding-left: 6px; }
.mnav-links a:hover .arr { transform: translateX(4px); color: var(--clay-300); }
.mnav-links a[aria-current="page"] { color: var(--clay-300); }
.mnav-actions { display: grid; gap: 10px; margin-top: 14px; }
.mnav-actions .btn { justify-content: center; }
.mobile-nav .btn:not(.secondary):not(.wa) { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.mobile-nav .btn.secondary { background: transparent; color: var(--paper); border-color: rgba(243, 239, 231, 0.3); }
.mobile-nav .btn.secondary:hover { border-color: var(--paper); }
.mnav-phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font: 500 1.35rem var(--mono); color: var(--paper); text-decoration: none; }
.mnav-phone svg { width: 22px; height: 22px; color: var(--clay-300); }
.mobile-nav .btn.wa { display: inline-flex; }
.site-header.menu-open { background: var(--ink-900); color: var(--paper); border-color: var(--line-dark); backdrop-filter: none; }
.site-header.menu-open .header-cta { background: transparent; color: var(--paper); border-color: rgba(243, 239, 231, 0.4); }
.site-header.menu-open .header-signin { color: var(--paper); border-color: rgba(243, 239, 231, 0.25); }
@media (prefers-reduced-motion: reduce) { .mobile-nav, .mnav-links li { animation: none; opacity: 1; transform: none; } }

/* ---------- 7. Page hero ---------- */
.page-hero { padding: 120px 0 64px; }
@media (min-width: 768px) { .page-hero { padding: 148px 0 96px; } }
.hero-dark { background: var(--ink); color: var(--paper); }
.hero-meta { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.hero-dark .hero-meta { border-color: var(--line-dark); }
.hero-meta .ref { display: none; }
@media (min-width: 640px) { .hero-meta .ref { display: inline; } }
.page-hero h1 { max-width: 16ch; }
.hero-grid { display: grid; gap: 48px; margin-top: 40px; }
@media (min-width: 1024px) { .hero-grid.has-aside { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } }

/* Home hero */
.home-hero { padding: 104px 0 0; }
.home-hero .hero-grid { margin-top: 0; min-height: calc(100vh - 104px); align-items: center; }
@media (min-width: 1024px) { .home-hero .hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.home-hero h1 { max-width: 13ch; margin-top: 24px; }
.path-cards { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; margin-top: 40px; }
@media (min-width: 640px) { .path-cards { grid-template-columns: 1fr 1fr; } }
.path-cards a { display: block; background: var(--ink); padding: 20px; text-decoration: none; transition: background 0.3s; }
.path-cards a:hover { background: var(--ink-700); }
.path-cards .title { display: block; margin-top: 8px; font: 400 1.45rem/1.2 var(--serif); }
.path-cards .desc { display: block; margin-top: 8px; font-size: 0.88rem; color: var(--ink-300); line-height: 1.45; }
.path-cards .go { display: inline-block; margin-top: 16px; font-size: 0.9rem; }
.map-frame { position: relative; }
.map-frame svg { width: 100%; height: auto; }

/* ---------- 8. Components ---------- */
.card { background: var(--paper-50); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
@media (min-width: 768px) { .card { padding: 36px; } }
.card.dashed { background: transparent; border-style: dashed; border-color: var(--ink-300); }
.card.accent-top-slate { border-top: 4px solid var(--slate); }
.card.accent-top-ochre { border-top: 4px solid var(--ochre); }
.card h3, .card .as-h3 { font-size: 1.6rem; line-height: 1.2; margin-top: 12px; }
.card p.muted { margin-top: 12px; line-height: 1.65; }

/* Definition list styled like a trade document schedule */
.datalist { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.datalist > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.datalist > div:last-child { border-bottom: 0; }
@media (min-width: 640px) { .datalist > div { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 32px; } }
.datalist dt { font: 500 0.75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-500); }
.datalist dd { margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--ink-700); }
.bg-ink .datalist, .bg-ink .datalist > div { border-color: var(--line-dark); }
.bg-ink .datalist dt { color: var(--ink-300); }
.bg-ink .datalist dd { color: var(--paper-200); }

/* Tick list */
.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; line-height: 1.6; color: var(--ink-700); }
.ticks li::before { content: ""; width: 14px; height: 14px; margin-top: 0.4em; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%233F5E4A' stroke-width='1.6'/%3E%3C/svg%3E"); }
.bg-ink .ticks li { color: var(--paper-200); }
.bg-ink .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%2388A291' stroke-width='1.6'/%3E%3C/svg%3E"); }

/* Numbered steps grid */
.steps { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; counter-reset: step; }
.steps li { background: var(--paper-50); padding: 26px; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font: 500 0.72rem var(--mono); letter-spacing: 0.14em; color: var(--clay); }
.steps h3, .steps .as-h3 { font-size: 1.35rem; line-height: 1.3; margin-top: 12px; }
.steps p { margin-top: 10px; color: var(--ink-600); line-height: 1.65; font-size: 0.97rem; }
@media (min-width: 768px) { .steps.two { grid-template-columns: 1fr 1fr; } .steps.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .steps.four { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) and (max-width: 1099px) { .steps.four { grid-template-columns: 1fr 1fr; } }

/* Tables */
.table-wrap { overflow-x: auto; }
table.trade { width: 100%; min-width: 42rem; border-collapse: collapse; text-align: left; }
table.trade th, table.trade td { padding: 18px 20px 18px 0; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.6; }
table.trade thead th { font: 500 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); border-bottom: 1px solid var(--ink); padding-top: 12px; padding-bottom: 12px; }
table.trade tbody th { font: 400 1.2rem var(--serif); }
table.trade tbody th.mono-th { font: 500 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); }

/* Stat row */
.stats { display: grid; border-bottom: 1px solid var(--line); background: var(--paper-50); }
.stats .stat { padding: 40px 0; border-bottom: 1px solid var(--line); }
.stats .stat:last-child { border-bottom: 0; }
@media (min-width: 640px) { .stats { grid-template-columns: 1fr 1fr; } .stats .stat { padding: 40px 24px; } .stats .stat:nth-child(odd) { border-right: 1px solid var(--line); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } .stats .stat { border-bottom: 0; border-right: 1px solid var(--line); } .stats .stat:last-child { border-right: 0; } .stats .stat:first-child { padding-left: 0; } }
.stat .k { font: 400 3.5rem/1 var(--serif); letter-spacing: -0.03em; }
.stat .head { display: flex; align-items: baseline; gap: 12px; }
.stat p { margin-top: 16px; max-width: 17rem; color: var(--ink-600); line-height: 1.6; font-size: 0.95rem; }

/* Lane ledger (home hero) */
.ledger { list-style: none; display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
.ledger li { background: var(--ink); padding: 14px 16px; }
.ledger .name { display: block; margin-top: 4px; }
.ledger .via { display: block; margin-top: 4px; font: 0.72rem var(--mono); color: var(--ink-300); }
@media (min-width: 640px) { .ledger { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ledger { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ledger { grid-template-columns: repeat(6, 1fr); } }

/* Pill badges */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 500 0.6rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; background: var(--paper-200); color: var(--ink-500); }
.pill.live { background: var(--moss); color: var(--paper); }
.pill.building { background: var(--ochre-100); color: var(--ochre); }

/* Chips (evidence on file) */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips li { border: 1px solid var(--line); background: var(--paper); padding: 4px 8px; border-radius: 2px; font-size: 0.82rem; color: var(--ink-700); }

/* KYB check list */
.checks { list-style: none; border-top: 1px solid var(--line); }
.checks li { padding: 24px 8px 24px 20px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; transition: background 0.3s, border-color 0.3s; }
.checks li:hover { background: var(--paper-50); }
.checks.seller li:hover { border-left-color: var(--clay); }
.checks.buyer li:hover { border-left-color: var(--slate); }
.checks .code { font: 600 0.75rem var(--mono); letter-spacing: 0.1em; margin-right: 10px; }
.checks h4 { display: inline; font-size: 1.35rem; }
.checks p { margin-top: 10px; color: var(--ink-600); line-height: 1.65; }

/* Document manifest */
.manifest { border: 1px solid rgba(27, 26, 23, 0.2); background: var(--paper-50); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 40px -24px rgba(27, 26, 23, 0.25); }
.manifest-head { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(27, 26, 23, 0.2); font: 500 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); }
.manifest-head div { padding: 12px 20px; }
.manifest-head div:nth-child(odd) { border-right: 1px solid rgba(27, 26, 23, 0.2); }
.manifest-head .wide { display: none; }
@media (min-width: 640px) { .manifest-head { grid-template-columns: repeat(4, 1fr); } .manifest-head div { border-right: 1px solid rgba(27, 26, 23, 0.2); } .manifest-head div:last-child { border-right: 0; } .manifest-head .wide { display: block; } }
.manifest ol { list-style: none; }
.manifest li { display: grid; gap: 6px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.manifest li:last-child { border-bottom: 0; }
@media (min-width: 640px) { .manifest li { grid-template-columns: 3rem 16rem 1fr; gap: 24px; } }
.manifest .n { font: 0.75rem var(--mono); color: var(--ink-400); }
.manifest .name { font-weight: 500; }
.manifest .det { color: var(--ink-600); line-height: 1.6; }

/* Journey steps (How It Works / Home) */
.journey-steps { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.journey-steps li { display: grid; gap: 8px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.journey-steps .stage { font: 500 0.72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }
.journey-steps h3, .journey-steps .as-h3 { font-size: 1.75rem; line-height: 1.15; max-width: 26ch; }
.journey-steps p { margin-top: 12px; color: var(--ink-600); line-height: 1.7; max-width: 38rem; }

/* Lane tabs */
.tabs { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tabs button { background: var(--paper-50); border: 0; padding: 14px 22px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); border-top: 3px solid transparent; }
.tabs button .sub { display: block; font-size: 0.8rem; color: var(--ink-500); }
.tabs button[aria-selected="true"].clay { background: var(--clay); color: var(--paper-50); }
.tabs button[aria-selected="true"].slate { background: var(--slate); color: var(--paper-50); }
.tabs button[aria-selected="true"] .sub { color: var(--paper-200); }
.tabs.form-tabs { display: grid; width: 100%; border-radius: var(--radius) var(--radius) 0 0; }
.tabs.form-tabs button { background: rgba(236, 230, 218, 0.6); padding: 16px 22px; }
.tabs.form-tabs button .label { display: block; font: 400 1.35rem/1.2 var(--serif); color: var(--ink-500); }
.tabs.form-tabs button[aria-selected="true"] { background: var(--paper-50); }
.tabs.form-tabs button[aria-selected="true"] .label { color: var(--ink); }
.tabs.form-tabs button[aria-selected="true"].clay { border-top-color: var(--clay); }
.tabs.form-tabs button[aria-selected="true"].slate { border-top-color: var(--slate); }
.tabs.form-tabs button[aria-selected="true"] .sub { color: var(--ink-500); }

/* Embedded 3D viewer */
.viewer { position: relative; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; background: #0b0d10; aspect-ratio: 16 / 10; }
.viewer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .viewer { aspect-ratio: 3 / 4; } }

/* Accordion (FAQ) */
.accordion { list-style: none; border-top: 1px solid var(--line); }
.accordion li { border-bottom: 1px solid var(--line); }
.accordion button { width: 100%; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; background: none; border: 0; text-align: left; font: 500 1.05rem/1.4 var(--sans); color: var(--ink); cursor: pointer; }
.accordion button:hover { color: var(--clay); }
.accordion .plus { flex-shrink: 0; width: 12px; height: 12px; margin-top: 5px; transition: transform 0.3s; }
.accordion button[aria-expanded="true"] .plus { transform: rotate(45deg); }
.accordion .panel { padding: 0 32px 24px 0; color: var(--ink-700); line-height: 1.7; }

/* CTA band */
.cta-band { background: var(--ink); color: var(--paper); }
.cta-band .inner { display: grid; gap: 40px; padding: 80px 0 40px; }
@media (min-width: 1024px) { .cta-band .inner { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.cta-band h2 { max-width: 20ch; margin-top: 20px; }
.cta-paths { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .cta-paths { grid-template-columns: 1fr 1fr; } }
.cta-paths a { display: block; background: var(--ink); padding: 24px; text-decoration: none; transition: background 0.3s; }
.cta-paths a:hover { background: var(--ink-700); }
.cta-paths .title { display: block; margin-top: 12px; font: 400 1.5rem var(--serif); }
.cta-paths .desc { display: block; margin-top: 8px; font-size: 0.88rem; color: var(--ink-300); }
.cta-paths .go { display: inline-block; margin-top: 20px; font-size: 0.9rem; }
.cta-foot { border-top: 1px solid var(--line-dark); padding: 20px 0 40px; font-size: 0.9rem; color: var(--ink-400); }
.cta-foot a { color: var(--paper); margin-left: 12px; }

/* ---------- 9. Forms ---------- */
.form-panel { border: 1px solid var(--line); border-top: 0; background: var(--paper-50); padding: 20px; border-radius: 0 0 var(--radius) var(--radius); }
@media (min-width: 640px) { .form-panel { padding: 32px; } }
form.enquiry { display: grid; gap: 32px; position: relative; }
.fgroup { border: 0; border-top: 1px solid var(--line); padding: 24px 0 0; margin: 0; display: grid; gap: 20px; min-width: 0; }
.fgroup > legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; display: flex; gap: 12px; align-items: center; }
.fgroup > legend + * { clear: both; }
.frow { display: grid; gap: 20px; }
@media (min-width: 640px) { .frow { grid-template-columns: 1fr 1fr; } .frow.vol { grid-template-columns: 1fr 12rem; } }
.field label, .field .label, fieldset.choice legend { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 500; color: var(--ink); padding: 0; }
.req { color: var(--clay); margin-left: 2px; }
.opt { margin-left: 6px; font-size: 0.78rem; font-weight: 400; color: var(--ink-400); }
.input {
  display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-50); color: var(--ink); font: 400 0.95rem var(--sans); transition: border-color 0.2s;
}
.input:hover { border-color: var(--ink-300); }
.input:focus { outline: none; border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--clay); background: rgba(241, 223, 211, 0.3); }
select.input { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%236B665D' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
textarea.input { min-height: 7rem; resize: vertical; }
.with-suffix { position: relative; }
.with-suffix .input { padding-right: 120px; }
.with-suffix .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 0.72rem var(--mono); text-transform: uppercase; color: var(--ink-500); pointer-events: none; }
.hint { margin-top: 6px; font-size: 0.8rem; color: var(--ink-500); line-height: 1.4; }
.error { margin-top: 6px; font-size: 0.8rem; font-weight: 500; color: var(--clay-600); }
fieldset.choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.options { display: grid; gap: 8px; }
@media (min-width: 640px) { .options.c2 { grid-template-columns: 1fr 1fr; } .options.c3 { grid-template-columns: repeat(3, 1fr); } .options.c4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .options.c4 { grid-template-columns: repeat(4, 1fr); } }
.option { position: relative; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option label { display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; font-size: 0.93rem; font-weight: 500; line-height: 1.35; transition: border-color 0.2s, background 0.2s; margin: 0; }
.option label::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-top: 4px; border: 1px solid var(--ink-400); border-radius: 50%; }
.option label small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 400; color: var(--ink-500); }
.option input:checked + label { border-color: var(--ink); background: var(--paper-50); }
.option input:checked + label::before { background: var(--ink); border-color: var(--ink); }
.clay-opts .option input:checked + label { border-color: var(--clay); background: rgba(241, 223, 211, 0.4); }
.clay-opts .option input:checked + label::before { background: var(--clay); border-color: var(--clay); }
.slate-opts .option input:checked + label { border-color: var(--slate); background: rgba(220, 227, 234, 0.5); }
.slate-opts .option input:checked + label::before { background: var(--slate); border-color: var(--slate); }
.option input:focus-visible + label { outline: 2px solid var(--clay); outline-offset: 2px; }
.invalid .option label { border-color: rgba(154, 74, 42, 0.6); }
.checkrow { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; line-height: 1.6; color: var(--ink-700); cursor: pointer; }
.checkrow input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; }
.origin-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.origin-chips label { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: 0.92rem; cursor: pointer; }
.origin-chips input { accent-color: var(--slate); width: 16px; height: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 0.85rem; color: var(--ink-500); }
.form-foot a { text-decoration: underline; text-underline-offset: 4px; }
.banner-error { display: flex; gap: 10px; padding: 12px 16px; border: 1px solid rgba(154, 74, 42, 0.5); background: rgba(241, 223, 211, 0.6); color: var(--clay-600); border-radius: var(--radius); font-size: 0.93rem; }
.success { padding: 32px; border: 1px solid rgba(63, 94, 74, 0.4); background: rgba(220, 230, 222, 0.5); border-radius: var(--radius); outline: none; }
.success h3, .success .as-h3 { font-size: 1.8rem; margin-top: 12px; }
.success code { font: 500 0.95rem var(--mono); background: var(--paper-50); padding: 2px 6px; border-radius: 2px; }
.success ol { margin-top: 20px; padding-left: 20px; border-left: 1px solid rgba(63, 94, 74, 0.4); list-style: none; display: grid; gap: 10px; color: var(--ink-700); }

/* ---------- 10. Footer ----------
   Note: vertical padding only (padding-block), so the .container side gutters stay intact. */
.site-footer { background: var(--ink-900); color: var(--paper); border-top: 1px solid var(--line-dark); padding-bottom: env(safe-area-inset-bottom); }
.site-footer a { color: var(--paper-200); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--paper); }
.footer-grid { display: grid; gap: 40px; padding-block: 64px 48px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding-block: 80px 56px; } }
.footer-h { display: block; font: 500 0.7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-400); }
.footer-brand .logo { color: var(--paper); }
.footer-brand p { margin-top: 18px; max-width: 24rem; line-height: 1.65; color: var(--ink-300); }
.footer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.footer-actions a, .footer-actions button { display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: transparent; color: var(--paper-200); font: 500 0.85rem var(--sans); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.footer-actions a:first-child { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.footer-actions a:first-child:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.footer-actions a:hover, .footer-actions button:hover { border-color: var(--ink-300); }
.site-footer ul { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.site-footer ul a { font-size: 0.95rem; }
.footer-contact { display: grid; gap: 12px; align-content: start; }
.footer-contact .footer-h { margin-bottom: 6px; }
.fc-row { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; }
.fc-row svg { width: 18px; height: 18px; color: var(--clay-300); flex-shrink: 0; }
.fc-mail { display: block; font-size: 0.92rem; }
.fc-mail small { display: block; font: 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-400); margin-top: 2px; }
.footer-offices { display: grid; gap: 16px; padding-block: 24px; border-top: 1px solid var(--line-dark); }
@media (min-width: 720px) { .footer-offices { grid-template-columns: repeat(3, 1fr); } }
.footer-offices div { display: grid; gap: 4px; font-size: 0.92rem; color: var(--paper-200); }
.footer-legal { display: grid; gap: 14px; padding-block: 24px 32px; border-top: 1px solid var(--line-dark); font-size: 0.8rem; color: var(--ink-400); line-height: 1.7; }
@media (min-width: 960px) { .footer-legal { grid-template-columns: 1fr auto; align-items: center; gap: 32px; } }
.footer-legal p { max-width: 62rem; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 18px; white-space: nowrap; }
.footer-legal-links a { color: var(--ink-300); }
@media (max-width: 640px) { .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ---------- 11. Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Animated dashes on the lane map */
@keyframes dash { to { stroke-dashoffset: -200; } }
.lane-anim { animation: dash 6s linear infinite; }

/* ==========================================================================
   12. Motion & polish (v2)
   Everything here respects prefers-reduced-motion (see section 2).
   ========================================================================== */

/* Soft cross-fade between pages (Chrome, Edge, Safari 18+; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: var(--ease); }

html { scroll-behavior: smooth; }

/* Scroll progress bar */
.progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--clay), var(--clay-300)); transform-origin: 0 50%; transform: scaleX(0); }

/* Header hides when scrolling down, returns when scrolling up */
.site-header { transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s; }
.site-header.hide:not(.menu-open) { transform: translateY(-100%); }

/* Phone in the header */
.header-phone { display: none; align-items: center; gap: 8px; font: 500 0.85rem var(--mono); letter-spacing: 0.02em; text-decoration: none; opacity: 0.85; white-space: nowrap; }
.header-phone:hover { opacity: 1; }
.header-phone svg, .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (min-width: 1240px) { .header-phone { display: inline-flex; } }


/* WhatsApp button colour: muted, in palette (not the bright brand green) */
.btn.wa { background: #2f5e46; border-color: #2f5e46; color: #f3efe7; }
.btn.wa:hover { background: #244a37; border-color: #244a37; }

/* Floating actions */
.fab { position: fixed; z-index: 45; right: 20px; display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(20, 19, 17, 0.55); transition: transform 0.35s var(--ease), opacity 0.35s, background 0.3s; }
.fab svg { width: 20px; height: 20px; }
.fab.wa { bottom: 20px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #2f5e46; color: #f3efe7; font: 500 0.88rem var(--sans); }
.fab.wa:hover { background: #244a37; transform: translateY(-2px); }
.fab.top { bottom: 80px; width: 44px; height: 44px; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--paper); opacity: 0; transform: translateY(10px); pointer-events: none; }
.fab.top.show { opacity: 1; transform: none; pointer-events: auto; }
.fab.top:hover { background: var(--clay); }
@media (max-width: 640px) { .fab.wa span { display: none; } .fab.wa { padding: 14px; } .fab.top { bottom: 84px; } }

/* Call card (contact page) */
.call-card { padding: 24px; border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.call-card .eyebrow { color: var(--ink-300); }
.call-card .muted { color: var(--ink-300); margin-top: 8px; }
.call-number { display: block; margin-top: 10px; font: 400 2rem/1.1 var(--serif); color: var(--paper); text-decoration: none; letter-spacing: -0.01em; }
.call-number:hover { color: var(--clay-300); }
.call-card .btn:not(.wa) { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.call-card .btn:not(.wa):hover { background: var(--clay); color: var(--paper-50); border-color: var(--clay); }

/* Trade-terms ticker */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-50); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker.dark { border-color: var(--line-dark); background: var(--ink-900); }
.ticker ul { list-style: none; display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker li { padding: 16px 28px; font: 500 0.75rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; position: relative; }
.ticker.dark li { color: var(--ink-300); }
.ticker li::after { content: "◆"; position: absolute; right: -6px; font-size: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--clay-300); }
.ticker:hover ul { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Cards: lift + soft spotlight that follows the cursor (set by main.js) */
.card, .cols-2 > *, .cols-3 > *, .cols-4 > *, .steps li, .path-cards a, .cta-paths a {
  position: relative;
  transition: opacity 0.7s var(--ease), transform 0.5s var(--ease), box-shadow 0.4s var(--ease), background 0.3s, border-color 0.3s;
}
.card:hover, .steps li:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(27, 26, 23, 0.45); }
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(154, 74, 42, 0.08), transparent 45%);
}
.bg-ink .spot::before, .hero-dark .spot::before, .cta-paths .spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 139, 110, 0.14), transparent 45%); }
.spot:hover::before { opacity: 1; }

/* Buttons: subtle sheen on hover */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-20deg); transition: left 0.7s var(--ease); }
.btn:hover::after { left: 130%; }

/* Hero: vignette + gentle float on the map */
.home-hero { position: relative; overflow: hidden; }
.home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 72% 45%, rgba(201, 139, 110, 0.10), transparent 70%), radial-gradient(50% 50% at 10% 90%, rgba(132, 150, 168, 0.08), transparent 70%); }
.home-hero .container { position: relative; }
.map-frame svg { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35)); }
.home-hero h1 { animation: rise 1s var(--ease) both; }
.home-hero .lede { animation: rise 1s 0.12s var(--ease) both; }
.home-hero .path-cards { animation: rise 1s 0.24s var(--ease) both; }
.home-hero .map-frame { animation: fadein 1.4s 0.2s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.page-hero h1 { animation: rise 0.9s var(--ease) both; }
.page-hero .lede { animation: rise 0.9s 0.1s var(--ease) both; }


/* Journey steps synced with the diagram */
.diagram-sticky { position: sticky; top: 96px; }
.journey-steps li { transition: opacity 0.5s var(--ease); }
.js-sync .journey-steps li { opacity: 0.4; }
.js-sync .journey-steps li.active { opacity: 1; }
.journey-steps li.active .stage::before { content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; }
.journey-diagram [data-stage] { transition: opacity 0.6s var(--ease); }
.journey-diagram.synced [data-stage] { opacity: 0.32; }
.journey-diagram.synced [data-stage].on { opacity: 1; }
.journey-diagram .rig { transition: transform 1s var(--ease), opacity 0.6s; }
.journey-diagram .rail { transition: opacity 0.4s; }
.journey-diagram.synced .rail { opacity: 0.4; }
.journey-diagram.synced .rail.on { opacity: 1; }

/* Ships on the lane map pause under reduced motion (main.js pauses SVG animation too) */
@media (prefers-reduced-motion: reduce) { .ships { display: none; } .ticker ul { animation: none; } html { scroll-behavior: auto; } }

/* Accordion: smooth open/close (height animated by main.js) */
.accordion .panel { overflow: hidden; transition: height 0.35s var(--ease); }

/* Count-up numbers keep their width steady */
[data-count] { font-variant-numeric: tabular-nums; }

/* Header sign-in link */
.header-signin { display: none; padding: 8px 14px; font-size: 0.85rem; font-weight: 500; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); }
.header-signin:hover { border-color: var(--ink); }
.on-dark:not(.scrolled):not(.menu-open) .header-signin { border-color: rgba(243, 239, 231, 0.3); }
@media (min-width: 640px) { .header-signin { display: inline-flex; } }

/* ==========================================================================
   13. Live tracking, tokenization, calculator
   ========================================================================== */
.tracker { border: 1px solid var(--line-dark); border-radius: 8px; overflow: hidden; background: #0b0d10; }
.tracker-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line-dark); }
.presets, .providers { display: flex; flex-wrap: wrap; gap: 6px; }
.preset, .prov { background: transparent; border: 1px solid var(--line-dark); color: var(--ink-300); padding: 7px 12px; border-radius: 999px; font: 500 0.8rem var(--sans); cursor: pointer; transition: all 0.25s; }
.preset:hover, .prov:hover { color: var(--paper); border-color: var(--ink-400); }
.preset.on { background: var(--clay); border-color: var(--clay); color: #fff; }
.prov.on { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.tracker-map { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(circle at 60% 40%, #13202c, #0b0d10); }
.tracker-map::before { content: "Loading live AIS map…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-400); font: 0.85rem var(--mono); }
.tracker-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .tracker-map { aspect-ratio: 3 / 4; } }
.tracker-search { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 14px; border-top: 1px solid var(--line-dark); }
.tracker-search .input { background: #12161b; border-color: var(--line-dark); color: var(--paper); }
.tracker-msg { grid-column: 1 / -1; color: var(--ink-300); min-height: 1em; }
.tracker-links { grid-column: 1 / -1; display: flex; gap: 20px; }
.tracker-links a { color: var(--paper); }
@media (max-width: 640px) { .tracker-search { grid-template-columns: 1fr auto; } .tracker-search label { grid-column: 1 / -1; } }

/* Token card */
.tok-stage { perspective: 1200px; padding: 20px 0; }
.tok-card { --rx: 0deg; --ry: 0deg; max-width: 440px; margin: 0 auto; border-radius: 18px; padding: 26px; color: var(--paper);
  background: linear-gradient(140deg, #2b2925 0%, #1b1a17 45%, #3a2a22 100%); border: 1px solid rgba(201, 139, 110, 0.35);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.25s ease-out, border-color 0.6s, background 0.6s; position: relative; overflow: hidden; }
.tok-card::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%); transform: translateX(-60%); transition: transform 1.2s var(--ease); pointer-events: none; }
.tok-card.pulse::after { transform: translateX(60%); }
.tok-top { display: flex; justify-content: space-between; align-items: center; color: var(--clay-300); }
.tok-chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #cdae74, #8d6f38); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.tok-title { margin-top: 20px; font: 400 1.6rem/1.15 var(--serif); }
.tok-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 20px 0 0; }
.tok-fields dt { font: 500 0.62rem var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-400); }
.tok-fields dd { margin: 2px 0 0; font-size: 0.92rem; }
.tok-hash { margin-top: 20px; font-size: 0.66rem; color: var(--ink-400); word-break: break-all; }
.tok-card.s1 { border-color: rgba(132, 150, 168, 0.6); }
.tok-card.s2 { border-color: rgba(201, 139, 110, 0.8); background: linear-gradient(140deg, #3a2a22, #1b1a17 50%, #2b2925); }
.tok-card.s3 { border-color: rgba(205, 174, 116, 0.8); }
.tok-card.s4 { border-color: rgba(136, 162, 145, 0.8); background: linear-gradient(140deg, #22302a, #1b1a17 50%, #2b2925); }
.tok-card.s5 { border-color: rgba(179, 172, 159, 0.5); filter: saturate(0.6); }
.tok-steps { list-style: none; display: grid; gap: 6px; }
.tok-steps button { width: 100%; display: flex; gap: 14px; align-items: center; padding: 12px 14px; background: transparent; border: 1px solid var(--line-dark); border-radius: 6px; color: var(--ink-300); font: 500 0.95rem var(--sans); text-align: left; cursor: pointer; transition: all 0.3s var(--ease); }
.tok-steps button .n { font: 500 0.72rem var(--mono); color: var(--ink-400); }
.tok-steps button:hover { border-color: var(--ink-400); color: var(--paper); }
.tok-steps button.done { color: var(--ink-400); }
.tok-steps button[aria-pressed="true"] { background: rgba(201, 139, 110, 0.12); border-color: var(--clay-300); color: var(--paper); }
.tok-steps button[aria-pressed="true"] .n { color: var(--clay-300); }
.tok-desc .muted { color: var(--ink-300); }
.tok-line { color: var(--clay-300); }
.tok-desc:not([hidden]) { animation: rise 0.5s var(--ease) both; }

/* Calculator */
.calc { background: var(--paper-50); color: var(--ink); display: grid; gap: 14px; }
.calc .field label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 500; }
.calc-out { margin: 4px 0 0; border-top: 1px solid var(--line); }
.calc-out > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.calc-out dt { color: var(--ink-600); }
.calc-out dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.calc-out .big dd { font: 400 1.8rem/1.1 var(--serif); }
.calc-out .big small { display: block; font: 500 0.8rem var(--mono); color: var(--clay); margin-top: 4px; }

/* ==========================================================================
   14. Installed app (PWA) polish
   ========================================================================== */
.site-header { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
.fab.wa { bottom: calc(20px + env(safe-area-inset-bottom)); }
.fab.top { bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (display-mode: standalone) { body { overscroll-behavior-y: none; } .skip { display: none; } }
.install-app[hidden] { display: none !important; }

/* ==========================================================================
   15. Trade-owner touches: hero actions and trust strip
   ========================================================================== */
.btn.ghost-dark { background: transparent; color: var(--paper); border: 1px solid rgba(243, 239, 231, 0.45); display: inline-flex; align-items: center; gap: 8px; }
.btn.ghost-dark:hover { border-color: var(--paper); background: rgba(243, 239, 231, 0.08); }
.btn.ghost-dark svg { width: 16px; height: 16px; }
.trust-strip { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: "IBM Plex Mono", monospace; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-300, #B9B3A6); }
.trust-strip li { display: inline-flex; align-items: center; gap: 7px; }
.trust-strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--moss-300, #9DB08A); box-shadow: 0 0 0 3px rgba(157, 176, 138, 0.18); }
@media (max-width: 560px) { .hero-actions .btn { width: 100%; justify-content: center; } }
.hero-actions .btn:not(.ghost-dark) { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.hero-actions .btn:not(.ghost-dark):hover { background: #fff; }

/* ==========================================================================
   16. 3D scenes (Three.js). Each scene fades in when its first frame is drawn;
       without WebGL the gradient underneath stays, so pages still read well.
   ========================================================================== */
.hero-3d { position: relative; overflow: hidden; padding: 0; min-height: 100svh; display: flex; align-items: center;
  background: radial-gradient(120% 70% at 80% 85%, #b36a4a 0%, #4a3238 38%, #15141b 75%); }
.hero-stage { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-3d.is-3d .hero-stage { opacity: 1; }
.hero-stage canvas { display: block; width: 100%; height: 100%; }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 19, 17, 0.92) 0%, rgba(20, 19, 17, 0.72) 34%, rgba(20, 19, 17, 0.12) 62%, rgba(20, 19, 17, 0) 75%),
              linear-gradient(0deg, rgba(20, 19, 17, 0.9) 0%, rgba(20, 19, 17, 0) 22%), linear-gradient(180deg, rgba(20, 19, 17, 0.6) 0%, rgba(20, 19, 17, 0) 16%); }
.hero-content { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--header-h) + 48px); padding-bottom: 72px; }
.hero-copy { max-width: 600px; }
.hero-copy h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.hero-copy .path-cards a { background: rgba(20, 19, 17, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-caption { position: absolute; right: 24px; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 360px;
  font: 0.72rem/1.4 var(--mono); letter-spacing: 0.04em; color: rgba(243, 239, 231, 0.7); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0583c; box-shadow: 0 0 0 0 rgba(224, 88, 60, 0.6); animation: live 1.8s infinite; flex: none; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(224, 88, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 88, 60, 0); } }
.hero-pins { position: absolute; inset: 0; pointer-events: none; }
.hero-pins span, .pin { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.4s; white-space: nowrap;
  font: 500 0.7rem var(--mono); letter-spacing: 0.04em; color: var(--paper); padding: 6px 10px 6px 22px;
  background: rgba(20, 19, 17, 0.72); border: 1px solid rgba(243, 239, 231, 0.18); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-pins span::before, .pin::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--clay-300); }
.hero-pins span::after, .pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 18px; background: linear-gradient(rgba(243, 239, 231, 0.5), transparent); }
.no-3d .hero-stage { display: none; }
@media (max-width: 999px) {
  .hero-shade { background: linear-gradient(0deg, rgba(20, 19, 17, 0.95) 0%, rgba(20, 19, 17, 0.78) 45%, rgba(20, 19, 17, 0.25) 80%, rgba(20, 19, 17, 0.5) 100%); }
  .hero-content { padding-top: calc(var(--header-h) + 34vh); }
  .hero-caption { position: static; margin-top: 28px; }
}
.lanes-band { padding: 72px 0 0; }
.lanes-grid { display: grid; gap: 40px; align-items: center; padding-bottom: 56px; }
@media (min-width: 1024px) { .lanes-grid { grid-template-columns: 1.15fr 0.85fr; } }
.lanes-grid .ledger { grid-template-columns: repeat(2, 1fr); }

/* ---------- Industry in 3D: scroll story ---------- */
.story { position: relative; background: linear-gradient(180deg, #6f8fae 0%, #b9c4c9 45%, #e7d3bb 100%); }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; }
.story-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.story.is-3d .story-stage canvas { opacity: 1; }
.story-pins { position: absolute; inset: 0; pointer-events: none; }
.story-intro { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: var(--paper);
  background: linear-gradient(90deg, rgba(20, 19, 17, 0.88) 0%, rgba(20, 19, 17, 0.6) 40%, rgba(20, 19, 17, 0) 70%), linear-gradient(180deg, rgba(20, 19, 17, 0.55), rgba(20, 19, 17, 0) 30%); padding-top: var(--header-h); }
.story-intro h1 { max-width: 15ch; }
.story-intro .lede { max-width: 520px; color: rgba(243, 239, 231, 0.82); }
.scroll-cue { display: flex; align-items: center; gap: 12px; font: 0.74rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-300); }
.scroll-cue span { width: 1px; height: 44px; background: linear-gradient(var(--paper), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.story-steps { position: relative; z-index: 2; pointer-events: none; }
.story-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 0 clamp(16px, 6vw, 96px); }
.story-card { pointer-events: auto; max-width: 450px; padding: 28px 28px 30px; border-radius: 14px; color: var(--paper);
  background: rgba(20, 19, 17, 0.82); border: 1px solid rgba(243, 239, 231, 0.1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
/* Only dim the inactive chapters once the 3D scene is actually running */
.story.is-3d .story-step:not(.is-active) .story-card { opacity: 0.25; transform: translateY(24px) scale(0.98); }
.story:not(.is-3d) .story-rail, .story:not(.is-3d) .story-progress { display: none; }
.story.no-3d { background: linear-gradient(180deg, #2b2925, #141311); }
.story-card .eyebrow { color: var(--ink-300); }
.story-card p { color: rgba(243, 239, 231, 0.84); }
.story-card strong { color: #fff; }
.story-n { color: var(--clay-300); margin-right: 6px; }
.story-card .chips li { font: 0.72rem var(--mono); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(243, 239, 231, 0.2); background: transparent; color: var(--paper); }
.story-card .btn:not(.secondary) { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.story-card .btn.secondary { background: transparent; color: var(--paper); border-color: rgba(243, 239, 231, 0.35); }
.story-rail { position: absolute; right: clamp(12px, 2.5vw, 32px); top: 50%; transform: translateY(-50%); z-index: 3; }
.story-rail ol { list-style: none; display: grid; gap: 4px; }
.story-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ink-900); font: 500 0.7rem var(--mono); letter-spacing: 0.04em; }
.story-rail button span { opacity: 0; transform: translateX(6px); transition: 0.25s var(--ease); background: rgba(243, 239, 231, 0.9); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.story-rail button::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(20, 19, 17, 0.7); background: rgba(243, 239, 231, 0.6); transition: 0.25s var(--ease); }
.story-rail button:hover span, .story-rail button[aria-current="step"] span { opacity: 1; transform: none; }
.story-rail button[aria-current="step"]::after { background: var(--clay); border-color: var(--clay); transform: scale(1.3); }
.story-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(20, 19, 17, 0.15); z-index: 3; }
.story-progress i { display: block; height: 100%; background: var(--clay); transform: scaleX(0); transform-origin: left; }
.story.no-3d .story-stage canvas { display: none; }
@media (max-width: 760px) {
  .story-step { align-items: flex-end; padding: 0 12px 28px; }
  .story-card { max-width: none; padding: 20px; }
  .story-card .h2 { font-size: 1.5rem; }
  .story-rail button span { display: none; }
  .story-rail { right: 8px; }
  .story-intro { align-items: flex-end; padding-bottom: 64px; background: linear-gradient(0deg, rgba(20, 19, 17, 0.92) 0%, rgba(20, 19, 17, 0.5) 55%, rgba(20, 19, 17, 0.2) 100%); }
  .story-pins .pin { font-size: 0.62rem; }
}

/* ---------- What the trade depends on ---------- */
.dep-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); perspective: 1000px; }
.dep { position: relative; padding: 26px 22px 24px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); transform-style: preserve-3d; }
.dep svg { width: 46px; height: 46px; padding: 10px; border-radius: 12px; color: var(--clay); background: var(--clay-100); transform: translateZ(30px); box-shadow: 0 10px 20px -12px rgba(154, 74, 42, 0.6); }
.dep h3, .dep .as-h3 { margin-top: 16px; }
.dep p { margin-top: 6px; color: var(--ink-500); font-size: 0.94rem; }

/* ---------- Pointer tilt (cards with .tilt) ---------- */
.tilt { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.tilt.is-tilting { will-change: transform; transition: transform 0.08s linear, box-shadow 0.3s; box-shadow: 0 28px 50px -28px rgba(20, 19, 17, 0.45); }
@media (prefers-reduced-motion: reduce) { .tilt { transform: none !important; } }

/* ---------- Grade explorer with a CSS 3D bale ---------- */
.grade-explorer { display: grid; gap: 24px; }
.bale3d-wrap { position: relative; height: 280px; perspective: 900px; display: grid; place-items: center; }
.bale3d { position: relative; width: 220px; height: 150px; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(-34deg); animation: bale-spin 16s linear infinite; }
.bale3d.drop { animation: bale-drop 0.7s var(--ease), bale-spin 16s linear infinite; }
@keyframes bale-spin { to { transform: rotateX(-20deg) rotateY(326deg); } }
@keyframes bale-drop { 0% { translate: 0 -60px; } 60% { translate: 0 6px; } 100% { translate: 0 0; } }
.bale3d i { position: absolute; left: 0; top: 0; width: 220px; height: 150px; backface-visibility: hidden; transition: background-color 0.5s;
  background-color: var(--c);
  background-image:
    linear-gradient(90deg, transparent 21%, #1e1d1b 21%, #1e1d1b 23%, transparent 23%, transparent 49%, #1e1d1b 49%, #1e1d1b 51%, transparent 51%, transparent 77%, #1e1d1b 77%, #1e1d1b 79%, transparent 79%),
    repeating-linear-gradient(0deg, rgba(59, 91, 122, 0.55) 0 4px, transparent 4px 9px, rgba(232, 226, 214, 0.5) 9px 12px, transparent 12px 17px, rgba(168, 68, 58, 0.45) 17px 19px, transparent 19px 25px, rgba(42, 42, 42, 0.45) 25px 28px, transparent 28px 33px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 2px, rgba(0, 0, 0, 0.1) 2px 5px);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25); }
.bale3d .f1 { transform: translateZ(80px); }
.bale3d .f2 { transform: rotateY(180deg) translateZ(80px); }
.bale3d .f3, .bale3d .f4 { width: 160px; left: 30px; }
.bale3d .f3 { transform: rotateY(90deg) translateZ(110px); }
.bale3d .f4 { transform: rotateY(-90deg) translateZ(110px); }
.bale3d .f5, .bale3d .f6 { height: 160px; top: -5px; }
.bale3d .f5 { transform: rotateX(90deg) translateZ(75px); filter: brightness(1.15); }
.bale3d .f6 { transform: rotateX(-90deg) translateZ(75px); filter: brightness(0.6); }
.bale3d .f1::after { content: attr(data-label); position: absolute; left: 128px; top: 50px; padding: 6px 8px; font: 600 0.62rem/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); background: var(--paper); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.bale3d-shadow { position: absolute; bottom: 34px; width: 260px; height: 40px; border-radius: 50%; background: radial-gradient(rgba(20, 19, 17, 0.35), transparent 70%); }
.grade-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-tabs button { font: 500 0.82rem var(--sans); padding: 8px 14px 8px 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-50); color: var(--ink); cursor: pointer; position: relative; transition: 0.2s; }
.grade-tabs button::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; background: var(--c); }
.grade-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.grade-panel { padding: 22px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .bale3d { animation: none; } }

/* ---------- Inside a container (home) ---------- */
.box3d { position: relative; overflow: hidden; background: radial-gradient(90% 80% at 75% 55%, #3a2c26 0%, var(--ink-900) 70%); }
.box3d-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .box3d-grid { grid-template-columns: 0.8fr 1.2fr; gap: 48px; } }
.box3d-copy .lede { color: rgba(243, 239, 231, 0.78); }
.box3d-stage { position: relative; height: clamp(340px, 52vw, 560px); touch-action: pan-y; }
.box3d-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; opacity: 0; transition: opacity 1s var(--ease); }
.box3d-stage canvas:active { cursor: grabbing; }
.box3d.is-3d .box3d-stage canvas { opacity: 1; }
.box3d.no-3d .box3d-stage { display: none; }
.box3d-panel { min-height: 170px; padding: 22px; border-radius: 14px; background: rgba(243, 239, 231, 0.06); border: 1px solid rgba(243, 239, 231, 0.12); }
.box3d-panel p { color: rgba(243, 239, 231, 0.78); }
.box3d-panel .eyebrow { color: var(--clay-300); }
.box3d-panel.flash { animation: panel-in 0.45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.box3d .btn:not(.ghost-dark) { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.hotspot { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--paper); transition: opacity 0.3s; }
.hotspot span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 0.8rem var(--mono); color: var(--ink-900); background: var(--paper);
  box-shadow: 0 0 0 4px rgba(243, 239, 231, 0.2), 0 6px 16px rgba(0, 0, 0, 0.4); transition: 0.25s var(--ease); }
.hotspot span::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(243, 239, 231, 0.7); animation: spot-ping 2.4s var(--ease) infinite; }
@keyframes spot-ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2); opacity: 0; } }
.hotspot em { font: 500 0.7rem var(--mono); font-style: normal; letter-spacing: 0.03em; padding: 4px 9px; border-radius: 999px; background: rgba(20, 19, 17, 0.75); opacity: 0; transform: translateX(-4px); transition: 0.25s var(--ease); white-space: nowrap; }
.hotspot:hover em, .hotspot:focus-visible em, .hotspot[aria-pressed="true"] em { opacity: 1; transform: none; }
.hotspot[aria-pressed="true"] span { background: var(--clay); color: var(--paper); transform: scale(1.12); }
.box3d-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font: 0.72rem var(--mono); color: rgba(243, 239, 231, 0.55); transition: opacity 0.4s; }
.box3d.touched .box3d-hint { opacity: 0; }
@media (max-width: 560px) { .hotspot em { display: none; } .hotspot span { width: 26px; height: 26px; } }
@media (max-width: 760px) {
  .story-card p { font-size: 0.92rem; }
  .story-card .eyebrow.mt-4, .story-card .chips { display: none; }
  .hero-3d { align-items: flex-end; }
}
.hero-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.hero-links .link { color: var(--paper); }
.box3d:not(.is-3d) .hotspot, .box3d:not(.is-3d) .box3d-hint { display: none; }
.box3d.no-3d .box3d-grid { grid-template-columns: 1fr; max-width: 720px; }

/* Over live 3D canvases, use solid tints instead of backdrop blur (cheaper to paint, no compositing artefacts) */
.hero-copy .path-cards a { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 19, 17, 0.78); }
.hero-pins span, .pin { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 19, 17, 0.82); }
.site-header.on-dark:not(.scrolled):not(.menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.story-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 19, 17, 0.88); }
.nav a { white-space: nowrap; }
.header-signin, .header-cta { white-space: nowrap; }
@media (min-width: 1080px) and (max-width: 1360px) { .nav ul { gap: 18px; } .header-phone span { display: none; } }

/* ==========================================================================
   17. Inside the warehouse (warehouse.html)
   ========================================================================== */
.wh-hero { padding: calc(var(--header-h) + 56px) 0 40px; background: var(--ink-900); }
.wh-hero .lede { max-width: 720px; color: rgba(243, 239, 231, 0.8); }
.wh { position: relative; background: #d8d2c6; color: var(--paper); outline: none; }
.wh-stage { position: relative; height: clamp(560px, 92svh, 980px); overflow: hidden; }
.wh-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--ease); touch-action: none; }
.wh.is-3d .wh-stage canvas { opacity: 1; }
.wh-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink-600); font: 0.8rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.wh-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(20, 19, 17, 0.15); border-top-color: var(--clay); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wh.is-3d .wh-loading, .wh.no-3d .wh-loading { display: none; }
.wh.no-3d .wh-stage { display: none; }
.wh-pins { position: absolute; inset: 0; pointer-events: none; }
.wh-pin { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; pointer-events: auto; transition: opacity 0.3s, background 0.2s;
  font: 600 0.8rem var(--mono); color: var(--paper); background: var(--ink-900); box-shadow: 0 0 0 3px rgba(243, 239, 231, 0.85), 0 6px 14px rgba(0, 0, 0, 0.35); }
.wh-pin:hover, .wh-pin:focus-visible { background: var(--clay); }
.wh.data-off .wh-log { opacity: 0.45; }

/* Overlay UI on wide screens, stacked under the canvas on phones */
.wh-ui { display: grid; gap: 12px; padding: 12px; background: var(--ink-900); }
.wh-chips ol { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.wh-chips button { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 0.78rem var(--sans); color: var(--paper); background: rgba(20, 19, 17, 0.82); border: 1px solid rgba(243, 239, 231, 0.18); border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; }
.wh-chips button span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 0.7rem var(--mono); background: rgba(243, 239, 231, 0.12); }
.wh-chips button[aria-current="step"] { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.wh-chips button[aria-current="step"] span { background: var(--clay); color: var(--paper); }
.wh-panel, .wh-side { background: rgba(20, 19, 17, 0.9); border: 1px solid rgba(243, 239, 231, 0.12); border-radius: 14px; padding: 18px 20px; }
.wh-panel .eyebrow, .wh-side .eyebrow { color: var(--clay-300); }
.wh-panel p { color: rgba(243, 239, 231, 0.84); }
.wh-rec { font: 0.78rem/1.5 var(--mono); color: var(--paper) !important; padding: 8px 10px; border-left: 2px solid var(--clay); background: rgba(243, 239, 231, 0.05); }
.wh-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.wh-tags li { font: 500 0.7rem var(--mono); padding: 4px 9px; border-radius: 999px; }
.t-labour { --tc: #cdae74; } .t-field { --tc: #e0805c; } .t-soft { --tc: #8fb3d9; }
.wh-tags li { color: var(--tc); border: 1px solid var(--tc); }
.wh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wh-actions .btn:not(.ghost-dark) { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.wh-side-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wh-toggle { font: 500 0.72rem var(--mono); color: var(--paper); background: transparent; border: 1px solid rgba(243, 239, 231, 0.3); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.wh-toggle[aria-pressed="true"] { background: #8fb3d9; border-color: #8fb3d9; color: var(--ink-900); }
.wh-agents { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.wh-agents li { display: flex; align-items: center; gap: 8px; font: 0.76rem var(--sans); color: rgba(243, 239, 231, 0.85); padding: 6px 8px; border-radius: 8px; background: rgba(143, 179, 217, 0.08); }
.wh-agents i { width: 8px; height: 8px; border-radius: 50%; background: #8fb3d9; box-shadow: 0 0 0 0 rgba(143, 179, 217, 0.7); }
.wh-agents li.ping i { animation: agent-ping 1.2s var(--ease); background: #cfe3f7; }
@keyframes agent-ping { 0% { box-shadow: 0 0 0 0 rgba(143, 179, 217, 0.8); } 100% { box-shadow: 0 0 0 10px rgba(143, 179, 217, 0); } }
.wh-log { list-style: none; display: grid; gap: 6px; margin-top: 8px; max-height: 260px; overflow: hidden; transition: opacity 0.3s; }
.wh-log li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font: 0.76rem/1.45 var(--sans); color: rgba(243, 239, 231, 0.82); padding: 7px 0; border-bottom: 1px solid rgba(243, 239, 231, 0.08); animation: log-in 0.4s var(--ease); }
.wh-log li .t { font: 0.7rem var(--mono); color: var(--ink-300); }
.wh-log li .who { font: 600 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: #e0805c; }
.wh-log li .who[class*="agent"]:not(.who-field-agent) { color: #8fb3d9; }
.wh-log li .msg { grid-column: 1 / -1; }
.wh-log b { color: #fff; font-weight: 600; }
@keyframes log-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wh-hint { font: 0.72rem var(--mono); color: var(--ink-300); text-align: center; }
@media (min-width: 1000px) {
  .wh-ui { position: absolute; inset: 0; pointer-events: none; background: none; padding: 18px clamp(16px, 2.5vw, 32px); display: block; }
  .wh-ui > * { pointer-events: auto; }
  .wh-chips { position: absolute; left: clamp(16px, 2.5vw, 32px); right: clamp(16px, 2.5vw, 32px); top: 18px; }
  .wh-chips ol { flex-wrap: wrap; }
  .wh-panel { position: absolute; left: clamp(16px, 2.5vw, 32px); bottom: 24px; width: min(440px, 38vw); }
  .wh-side { position: absolute; right: clamp(16px, 2.5vw, 32px); top: 76px; width: 320px; }
  .wh-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: rgba(20, 19, 17, 0.7); pointer-events: none; }
  .wh.free .wh-panel { opacity: 0.92; }
}
@media (max-width: 999px) { .wh-stage { height: 64svh; min-height: 420px; } .wh-log { max-height: 200px; } }

/* Scan a bale */
.wh-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(20, 19, 17, 0.6); backdrop-filter: blur(4px); }
.wh-modal[hidden] { display: none; }
.wh-modal-card { position: relative; width: min(720px, 100%); max-height: 90svh; overflow: auto; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 28px; animation: panel-in 0.35s var(--ease); }
.wh-modal-card .eyebrow { color: var(--clay); }
.wh-close { position: absolute; right: 14px; top: 10px; font-size: 1.8rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--ink); }
.scan-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .scan-grid { grid-template-columns: 240px 1fr; align-items: start; } }
.scan-label { display: grid; gap: 4px; padding: 16px 16px 14px 20px; background: #fbfaf6; border: 1px solid var(--line); border-left: 6px solid var(--clay); box-shadow: 0 10px 24px -12px rgba(20, 19, 17, 0.35); font: 600 0.82rem var(--mono); transform: rotate(-1.5deg); }
.scan-label strong { font: 700 1.3rem Arial, sans-serif; }
.scan-label em { font-style: normal; font-size: 0.65rem; color: var(--ink-500); }
.scan-label .bars { width: 100%; height: 44px; margin-top: 8px; fill: var(--ink-900); }

/* Who does what */
.who-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.who-card { padding: 26px 24px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); border-top: 4px solid var(--tc); }
.who-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc) 25%, transparent); }
.who-card.t-labour { --tc: #a57a2f; } .who-card.t-field { --tc: #9a4a2a; } .who-card.t-soft { --tc: #34495e; }
.wh-ui { grid-template-columns: minmax(0, 1fr); }
.wh-ui > * { min-width: 0; }

/* Paused while off screen (set by main.js) */
.offscreen, .offscreen * { animation-play-state: paused !important; }

/* ==========================================================================
   18. Typography pass: readable sizes, tighter tracking, no stranded words
   ========================================================================== */
/* Small mono labels: never below 12px, less letter-spacing so they read as words */
.eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; line-height: 1.5; }
.tag, .footer-h { font-size: 0.75rem; letter-spacing: 0.1em; }
.datalist dt { font-size: 0.75rem; letter-spacing: 0.08em; }
.pill { font-size: 0.68rem; letter-spacing: 0.06em; padding: 3px 9px; }
.journey-steps .stage, .steps li::before { font-size: 0.75rem; letter-spacing: 0.1em; }
.hero-pins span, .pin { font-size: 0.75rem; letter-spacing: 0.02em; }
.trust-strip { font-size: 0.75rem; letter-spacing: 0.06em; }
.wh-chips button span { font-size: 0.75rem; }
dt { font-size: max(0.75rem, 1em); }
.tok-card dt, .token dt { font-size: 0.75rem !important; }
/* Headings: balanced lines, no single orphaned word */
h1, h2, h3, h4, .h3, .h4, .display-xl, .display-lg, .display-md { text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
.lede, .story-card p, .wh-panel p { text-wrap: pretty; }
/* Comfortable line length for running text */
main p:not(.eyebrow):not(.tag):not(.small):not(.hero-caption) { max-width: 70ch; }
.card p, .steps p, .dep p, .who-card p { max-width: 60ch; }
/* Mid-sized screens: big display headings were too large */
@media (max-width: 1100px) { .display-xl { font-size: clamp(2.4rem, 5.4vw, 4rem); } }
@media (max-width: 560px) {
  .display-xl { font-size: clamp(2.2rem, 10vw, 2.9rem); line-height: 1.02; }
  .display-lg { font-size: clamp(2rem, 8.6vw, 2.6rem); line-height: 1.06; }
  .display-md { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.12; }
  .h3 { font-size: 1.3rem; }
  .lede { font-size: 1.05rem; }
  .eyebrow { letter-spacing: 0.08em; }
  .accordion button { font-size: 1rem; gap: 14px; }
  .accordion button span { min-width: 0; overflow-wrap: anywhere; }
  .section { padding: 60px 0; }
  .stat .k { font-size: 2.8rem; }
}
/* Journey steps: inactive steps stay readable (were 40% and looked disabled) */
.js-sync .journey-steps li { opacity: 0.62; }
.js-sync .journey-steps li.active { opacity: 1; }
/* Accordion question text could overflow its button */
.accordion button > span { flex: 1; min-width: 0; }

/* Headings renumbered for SEO keep their original size */
h2.as-h3 { font-size: 1.45rem; line-height: 1.2; }
h3.as-h4, h2.as-h4 { font-size: 1.15rem; line-height: 1.3; }
.pill { font-size: 0.72rem; }
.tok-hash { font-size: 0.72rem !important; word-break: break-all; }
.footer-legal p, .cta-band .foot, .cta-band .lede { max-width: 72ch; }

/* ==========================================================================
   19. Browse by Shelf (bales.html and /bales/ pages)
   ========================================================================== */
.crumbs { padding-top: calc(var(--header-h) + 18px); margin-bottom: -40px; position: relative; z-index: 2; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font: 0.8rem var(--sans); color: var(--ink-500); }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--ink-300); }
.crumbs a { color: var(--ink-600); text-decoration: none; }
.crumbs a:hover { color: var(--clay); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.small-btn { padding: 8px 14px; font-size: 0.85rem; }
.link-list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--ink); }
.link-list a::after { content: "→"; color: var(--clay); }
.link-list a:hover { color: var(--clay); }

/* Toolbar: grade filter + search */
.shelf-toolbar { display: grid; gap: 14px; align-items: center; }
@media (min-width: 900px) { .shelf-toolbar { grid-template-columns: 1fr 340px; } }
.gfilter { display: flex; flex-wrap: wrap; gap: 8px; }
.gf { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-50); color: var(--ink); cursor: pointer; font: 500 0.88rem var(--sans); text-align: left; transition: 0.2s; }
.gf span { font-size: 0.74rem; color: var(--ink-500); font-weight: 400; }
.gf:hover { border-color: var(--ink-400); }
.gf[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gf[aria-pressed="true"] span { color: var(--ink-300); }
.gf.g-a b::before, .gf.g-b b::before, .gf.g-c b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; background: var(--gc); }
.g-a { --gc: #c98b6e; } .g-b { --gc: #88a291; } .g-c { --gc: #8496a8; }
.shelf-search input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-50) no-repeat 14px center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='%236b665d' stroke-width='1.8'/%3E%3Cpath d='M15 15l6 6' stroke='%236b665d' stroke-width='1.8'/%3E%3C/svg%3E"); font: 0.95rem var(--sans); color: var(--ink); }
.shelf-search input:focus { outline: 2px solid var(--clay); outline-offset: 1px; }
.shelf-count { margin-top: 14px; }
.shelf-jump ul { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: thin; }
.shelf-jump a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 500 0.82rem var(--sans); padding: 6px 12px; border-radius: 999px; background: var(--paper-200); color: var(--ink); text-decoration: none; }
.shelf-jump a:hover { background: var(--ink); color: var(--paper); }
.jump-ico { width: 16px; height: 16px; }

/* The shelves: each one a rack with bales on a plank */
.shelves { display: grid; gap: 22px; margin-top: 20px; }
.shelf { background: var(--paper-50); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; scroll-margin-top: calc(var(--header-h) + 16px); }
.shelf-head { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; padding: 20px 22px 6px; }
@media (min-width: 760px) { .shelf-head { grid-template-columns: auto 1fr auto; } }
.shelf-badge { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--ink-900); color: var(--clay-300); box-shadow: inset 0 0 0 1px rgba(243,239,231,0.08); }
.shelf-ico { width: 28px; height: 28px; }
.shelf-title h3 a { text-decoration: none; color: var(--ink); }
.shelf-title h3 a:hover { color: var(--clay); }
.shelf-title p { margin-top: 2px; }
.shelf-toggle { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font: 500 0.85rem var(--sans); color: var(--ink); cursor: pointer; }
@media (min-width: 760px) { .shelf-toggle { grid-column: auto; } }
.shelf-toggle::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.25s; }
.shelf.open .shelf-toggle::after { transform: rotate(-135deg) translateY(-2px); }
.shelf-toggle:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shelf-rack { position: relative; padding: 14px 22px 0; background: linear-gradient(180deg, transparent 0, rgba(20,19,17,0.03) 100%); }
.shelf-bales { list-style: none; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 0; scrollbar-width: thin; align-items: flex-end; }
.shelf-plank { height: 12px; margin: 0 -22px; background: linear-gradient(180deg, #e0661f 0, #c4561a 70%, #9a4314 100%); box-shadow: 0 6px 10px -6px rgba(0,0,0,0.4); }
.bale-chip { position: relative; flex: none; display: flex; flex-direction: column; justify-content: space-between; width: 148px; height: 96px; padding: 10px 11px; border: 0; border-radius: 4px 4px 2px 2px; cursor: pointer; text-align: left; color: var(--ink-900);
  background: repeating-linear-gradient(0deg, rgba(59,91,122,0.28) 0 3px, transparent 3px 7px, rgba(232,226,214,0.55) 7px 10px, transparent 10px 14px, rgba(168,68,58,0.22) 14px 16px, transparent 16px 21px), #d9cfbd;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.12), inset 0 2px 0 rgba(255,255,255,0.4); transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.bale-chip::before, .bale-chip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: #1e1d1b; opacity: 0.85; }
.bale-chip::before { left: 26%; } .bale-chip::after { right: 26%; }
.bc-name { position: relative; z-index: 1; font: 600 0.82rem/1.25 var(--sans); background: rgba(251,250,246,0.94); padding: 4px 6px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); align-self: flex-start; max-width: 100%; }
.bc-grades { position: relative; z-index: 1; align-self: flex-end; font: 600 0.7rem var(--mono); letter-spacing: 0.08em; background: var(--ink-900); color: var(--paper); padding: 2px 6px; border-radius: 3px; }
.bale-chip:hover, .bale-chip:focus-visible { transform: translateY(-6px); box-shadow: inset 0 -6px 10px rgba(0,0,0,0.12), 0 14px 18px -10px rgba(0,0,0,0.45); }
.bale-chip:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.shelf-detail { padding: 22px; border-top: 1px solid var(--line); background: var(--paper); }
.sub-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sub-grid.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.sub-card { background: var(--paper-50); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; scroll-margin-top: calc(var(--header-h) + 20px); }
.sub-card h4 a, .sub-card h2 a { color: var(--ink); text-decoration: none; }
.sub-card h4 a:hover, .sub-card h2 a:hover { color: var(--clay); }
.sub-actions { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.item-tags li { font: 0.78rem var(--sans); padding: 3px 9px; border-radius: 999px; background: var(--paper-200); color: var(--ink-700); }
.item-tags.lg li { font-size: 0.9rem; padding: 6px 12px; }
.item-tags a { color: inherit; text-decoration: none; }
.item-tags a:hover { color: var(--clay); }
.sub-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gchip { font: 600 0.72rem var(--mono); letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; color: var(--ink-900); background: color-mix(in srgb, var(--gc) 35%, white); border: 1px solid var(--gc); }
.season { font: 0.75rem var(--sans); color: var(--ink-500); margin-left: 4px; }
.shelf-empty { margin-top: 24px; padding: 24px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }

/* Grades and How we grade */
.grade-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade-card { padding: 22px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); border-top: 5px solid var(--gc); display: flex; flex-direction: column; }
.grade-card .link, .grade-card .btn { align-self: flex-start; margin-top: auto; padding-top: 0; }
.grade-card p.small:last-of-type { margin-bottom: 14px; }
.hwg { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-50); }
.hwg summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 14px; padding: 18px 22px; }
.hwg summary::-webkit-details-marker { display: none; }
.hwg summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--clay); }
.hwg[open] summary::after { content: "–"; }
.hwg-title { font: 400 1.35rem var(--serif); }
.hwg-steps { list-style: none; counter-reset: hwg; display: grid; gap: 1px; background: var(--line); margin: 0 22px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
@media (min-width: 900px) { .hwg-steps { grid-template-columns: repeat(4, 1fr); } }
.hwg-steps li { background: var(--paper); padding: 18px; counter-increment: hwg; }
.hwg-steps li::before { content: counter(hwg, decimal-leading-zero); font: 600 0.75rem var(--mono); color: var(--clay); }
.hwg-steps h3 { margin-top: 6px; font-size: 1.1rem; }
.hwg-steps p { font-size: 0.9rem; color: var(--ink-600); }
.hwg > p { padding: 14px 22px 20px; }
.gp-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gp-row { display: grid; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .gp-row { grid-template-columns: 300px 1fr; align-items: start; } }
.gp-row h2 a { color: var(--ink); text-decoration: none; }

/* Detail drawer */
.dark-drawer { position: fixed; inset: 0; z-index: 90; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(20,19,17,0.55); animation: fadein 0.25s both; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: 28px 26px calc(28px + env(safe-area-inset-bottom)); box-shadow: -20px 0 50px rgba(0,0,0,0.25); animation: drawer-in 0.35s var(--ease) both; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-close { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink); border-radius: 50%; }
.drawer-close:hover { background: var(--paper-200); }
.drawer .eyebrow { color: var(--clay); }
.dr-h { font: 600 0.78rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); margin: 22px 0 6px; }
.dr-facts { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.dr-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.dr-facts dt { color: var(--ink-500); }
.dr-grades { display: grid; gap: 8px; }
.dr-grade { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--gc); background: var(--paper-50); }
.dr-grade.sel { box-shadow: 0 0 0 2px var(--gc); }
.dr-grade span { font-size: 0.8rem; color: var(--ink-500); }
.dr-grade p { margin-top: 4px; color: var(--ink-600); }
.dr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
body.drawer-open { overflow: hidden; }
@media (max-width: 560px) { .dr-grade { grid-template-columns: 1fr; } .dr-facts div { grid-template-columns: 1fr; gap: 2px; } }

/* ==========================================================================
   20. Industry guide and market pages
   ========================================================================== */
.guide-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.guide-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.guide-card .eyebrow { color: var(--clay); }
.guide-card .go { margin-top: auto; font-weight: 500; color: var(--clay); }
.guide-card:hover { border-color: var(--ink-400); }
.art-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .art-grid { grid-template-columns: 260px minmax(0, 720px); justify-content: space-between; } .art-toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.art-toc ol { list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--line); }
.art-toc ol a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 0.9rem; color: var(--ink-600); text-decoration: none; }
.art-toc a:hover { color: var(--clay); border-left-color: var(--clay); }
.art-cta { padding: 18px; border-radius: 12px; background: var(--paper-50); border: 1px solid var(--line); display: grid; justify-items: start; }
.art-sec + .art-sec { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.art-sec { scroll-margin-top: calc(var(--header-h) + 20px); }
.prose p { line-height: 1.75; color: var(--ink-700); font-size: 1.04rem; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 14px; }
.prose .ticks { margin-top: 12px; }
.prose .link { display: inline; }
.art-toc ol a { display: block; }
.art-toc .art-cta .btn { color: var(--paper-50); padding: 10px 16px; border-left: 0; margin-left: 0; }
.art-toc .art-cta .btn:hover { color: var(--paper-50); }
.art-toc .art-cta .link { padding-left: 0; border-left: 0; margin-left: 0; }
/* Header: room for the extra nav item on laptop widths */
.header-phone span { white-space: nowrap; }
@media (min-width: 1080px) and (max-width: 1500px) { .header-phone span { display: none; } .nav ul { gap: 20px; } }
@media (min-width: 1080px) and (max-width: 1220px) { .nav ul { gap: 14px; } .nav a { font-size: 0.85rem; } .header-signin { display: none; } }
.prefill-note { margin-bottom: 16px; padding: 12px 14px; border-radius: 10px; background: var(--moss-100); color: var(--moss); font-size: 0.9rem; border-left: 3px solid var(--moss); }
.hs-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.hs-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); border-bottom: 5px solid #d9661f; text-decoration: none; color: var(--ink); }
.hs-card .hs-name { font: 400 1.3rem/1.2 var(--serif); margin-top: 6px; }
.hs-card .go { margin-top: auto; color: var(--clay); font-weight: 500; font-size: 0.9rem; }
.hs-card:hover { border-color: var(--ink-400); border-bottom-color: #d9661f; }
/* Phones: keep hero text readable over the live 3D scene */
@media (max-width: 999px) {
  .hero-shade { background: linear-gradient(0deg, rgba(20,19,17,0.97) 0%, rgba(20,19,17,0.92) 52%, rgba(20,19,17,0.6) 72%, rgba(20,19,17,0.2) 90%, rgba(20,19,17,0.45) 100%); }
  .hero-copy .lede { color: rgba(243,239,231,0.9); text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
  .hero-copy .eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,0.7); color: rgba(243,239,231,0.85); }
}

/* Home: compact link to the bale categories page */
.hb-card { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: clamp(22px, 3vw, 34px) clamp(20px, 3.5vw, 40px); border-radius: 16px; background: var(--paper-50); border: 1px solid var(--line); border-bottom: 5px solid #d9661f; color: var(--ink); text-decoration: none; transition: border-color 0.2s, transform 0.2s var(--ease); }
.hb-card:hover { border-color: var(--ink-400); border-bottom-color: #d9661f; transform: translateY(-2px); }
.hb-copy { display: grid; flex: 1 1 420px; min-width: 0; }
.hb-title { margin-bottom: 0; font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--serif); }
.hb-text { color: var(--ink-600); max-width: 60ch; }
.hb-btn { flex: 0 0 auto; }
@media (max-width: 599px) { .hb-btn { width: 100%; justify-content: center; } }
.home-shelves.section { padding-block: clamp(36px, 5vw, 64px); }

/* Home: the five stages as names only, each linking to the full walkthrough */
.stage-row { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.stage-row a { position: relative; display: grid; align-content: start; gap: 10px; height: 100%; padding: 22px 20px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); border-top: 4px solid var(--clay); color: var(--ink); text-decoration: none; transition: border-color 0.2s, transform 0.2s var(--ease); }
.stage-row a:hover { border-color: var(--ink-400); border-top-color: var(--clay); transform: translateY(-2px); }
.stage-row .sn { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.14em; color: var(--clay); }
.stage-row .st { font: 400 1.3rem/1.2 var(--serif); }
.stage-row li:not(:last-child) a::after { content: "\2192"; position: absolute; right: -13px; top: 50%; z-index: 1; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--ink-900); color: var(--paper-50); font-size: 0.75rem; line-height: 22px; text-align: center; }
#five-stages, #lanes { scroll-margin-top: 0; }
@media (max-width: 899px) {
  .stage-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stage-row a { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; padding: 14px 18px; border-top-width: 1px; border-left: 4px solid var(--clay); }
  .stage-row a:hover { border-left-color: var(--clay); }
  .stage-row li:not(:last-child) a::after { display: none; }
}

/* Folded content: everything stays on the page, opens on tap */
.fold > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid currentColor; border-radius: 4px; font: 500 0.92rem/1.2 var(--sans, inherit); cursor: pointer; user-select: none; transition: background 0.2s, color 0.2s; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "+"; font: 400 1.15rem/1 var(--mono); transition: transform 0.25s var(--ease); }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:hover { background: rgba(127, 120, 110, 0.12); }
.fold .fold-close, .fold[open] > summary .fold-open { display: none; }
.fold[open] > summary .fold-close { display: inline; }
.fold-body { margin-top: 18px; animation: panel-in 0.35s var(--ease); }
/* The 3D journey poster: the viewer loads only when opened */
.fold-poster > summary { display: block; width: 100%; padding: 0; border: 1px solid var(--line-dark); border-radius: 14px; overflow: hidden; background: radial-gradient(120% 140% at 15% 20%, rgba(201, 139, 110, 0.28), transparent 55%), linear-gradient(135deg, #22201c, #141311); color: var(--paper); }
.fold-poster > summary::before { display: none; }
.fold-poster[open] > summary { display: inline-flex; width: auto; padding: 10px 18px; border: 1px solid currentColor; border-radius: 4px; background: none; }
.fold-poster[open] > summary::before { display: inline; }
.fold-poster > summary:hover { background: radial-gradient(120% 140% at 15% 20%, rgba(201, 139, 110, 0.38), transparent 55%), linear-gradient(135deg, #2a2722, #141311); }
.fold-poster .poster { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); padding: clamp(28px, 6vw, 64px) clamp(20px, 4vw, 48px); }
.fold-poster .play { flex: 0 0 auto; width: clamp(56px, 8vw, 84px); height: clamp(56px, 8vw, 84px); border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 10px rgba(201, 139, 110, 0.18); position: relative; transition: transform 0.25s var(--ease); }
.fold-poster .play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.fold-poster > summary:hover .play { transform: scale(1.06); }
.fold-poster .pt { display: block; font: 400 clamp(1.5rem, 3vw, 2.2rem)/1.1 var(--serif); }
.fold-poster .ps { display: block; margin-top: 10px; font: 500 0.75rem/1.6 var(--mono); letter-spacing: 0.06em; color: var(--ink-300); }
/* Home: material cards */
.mat-card { display: grid; gap: 8px; padding: 20px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); border-bottom: 4px solid var(--clay); color: var(--ink); text-decoration: none; transition: border-color 0.2s, transform 0.2s var(--ease); }
.mat-card:hover { border-color: var(--ink-400); border-bottom-color: var(--clay); transform: translateY(-2px); }
.mat-card .mc-name { font: 400 1.4rem/1.2 var(--serif); }
.mat-card .go { color: var(--clay); font-weight: 500; font-size: 0.9rem; }
/* Grouped full menu */
.mnav-groups { columns: 1; column-gap: 48px; }
@media (min-width: 760px) { .mnav-groups { columns: 2; } }
.mnav-group { break-inside: avoid; margin-bottom: 26px; }
.mnav-group .mnav-links { margin-top: 10px; }
.mnav-groups .mnav-links a { padding: 11px 0; font-size: clamp(1.15rem, 2.3vw, 1.45rem); }
/* Trust: each check opens on tap */
.checks li { padding: 0; }
.checks details > summary { list-style: none; display: flex; align-items: baseline; gap: 4px; padding: 20px 8px 20px 20px; cursor: pointer; }
.checks details > summary::-webkit-details-marker { display: none; }
.checks .chk-plus { margin-left: auto; padding-left: 12px; font: 400 1.3rem/1 var(--mono); color: var(--ink-400); }
.checks .chk-plus::before { content: "+"; display: inline-block; transition: transform 0.25s var(--ease); }
.checks details[open] .chk-plus::before { transform: rotate(45deg); }
.checks .chk-body { padding: 0 8px 22px 20px; margin-top: -8px; animation: panel-in 0.3s var(--ease); }
.mat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 599px) { .mat-grid { gap: 10px; } .mat-card { padding: 14px 16px; gap: 4px; } .mat-card .mc-name { font-size: 1.2rem; } }

/* ==========================================================================
   Two markets: unsorted (suppliers to sorters) and sorted (sorters to resellers)
   ========================================================================== */
.tm { position: relative; display: grid; gap: 0; border-radius: 18px; padding: clamp(14px, 2.4vw, 28px); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); border: 1px solid var(--line-dark); overflow: hidden; }
.tm::before { content: ""; position: absolute; inset: -40% -10% auto; height: 80%; background: radial-gradient(50% 50% at 30% 50%, rgba(201, 139, 110, 0.18), transparent 70%), radial-gradient(40% 50% at 80% 60%, rgba(98, 140, 110, 0.16), transparent 70%); pointer-events: none; animation: tm-glow 9s ease-in-out infinite alternate; }
@keyframes tm-glow { to { transform: translateY(30%) scale(1.1); } }
.tm-lane { position: relative; padding: clamp(14px, 2vw, 22px); border-radius: 14px; }
.tm-a { background: rgba(201, 139, 110, 0.08); border: 1px solid rgba(201, 139, 110, 0.35); --lane: var(--clay-300); }
.tm-b { background: rgba(98, 140, 110, 0.1); border: 1px solid rgba(140, 190, 150, 0.35); --lane: #9fd3a8; }
.tm-tag { display: flex; align-items: center; gap: 10px; font: 500 0.75rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lane); }
.tm-tag span { padding: 3px 10px; border-radius: 999px; background: var(--lane); color: #141311; letter-spacing: 0.06em; }
.tm-flow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(40px, 0.6fr) auto minmax(40px, 0.6fr) minmax(0, 1.2fr); align-items: center; gap: 10px; margin-top: 14px; }
.tm-node, .tm-gate { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: rgba(20, 19, 17, 0.6); border: 1px solid var(--line-dark); color: var(--paper); }
.tm-node svg, .tm-gate svg, .tm-pair svg { width: 26px; height: 26px; color: var(--lane); }
.tm-node b, .tm-gate b { font: 400 1.12rem/1.2 var(--serif); }
.tm-node small, .tm-gate small { font-size: 0.76rem; line-height: 1.45; color: var(--ink-300); }
.tm-gate { text-align: center; justify-items: center; border-color: var(--lane); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03), 0 0 28px -6px var(--lane); animation: tm-pulse 2.6s ease-in-out infinite; }
@keyframes tm-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.04), 0 0 40px -4px var(--lane); } }
.tm-pair { gap: 10px; padding: 0; background: none; border: 0; }
.tm-pair span { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: rgba(20, 19, 17, 0.6); border: 1px solid var(--line-dark); }
.tm-pair b { font-size: 1.02rem; }
.tm-track { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--lane) 0 6px, transparent 6px 12px); opacity: 0.8; }
.tm-track i { position: absolute; top: 50%; left: 0; width: 12px; height: 9px; margin-top: -4.5px; border-radius: 2px; background: var(--lane); box-shadow: 0 0 10px var(--lane); animation: tm-move 2.8s linear infinite; }
.tm-track i:nth-child(2) { animation-delay: -0.93s; } .tm-track i:nth-child(3) { animation-delay: -1.86s; }
@keyframes tm-move { from { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 12px); opacity: 0; } }
.tm-wall { position: relative; display: flex; justify-content: center; margin: 14px 0; }
.tm-wall::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #e3b51b 0 14px, #141311 14px 28px); border-radius: 2px; opacity: 0.85; }
.tm-wall span { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #141311; border: 1px solid #e3b51b; color: #f3e3a8; font: 500 0.8rem/1.3 var(--sans); text-align: center; }
.tm-wall svg { width: 18px; height: 18px; flex: 0 0 auto; color: #e3b51b; }
@media (max-width: 899px) {
  .tm-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tm-track { width: 2px; height: 34px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--lane) 0 6px, transparent 6px 12px); }
  .tm-track i { left: 50%; top: 0; margin: 0 0 0 -4.5px; width: 9px; height: 12px; animation-name: tm-move-y; }
  @keyframes tm-move-y { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 12px); opacity: 0; } }
  .tm-pair { grid-template-columns: 1fr 1fr; display: grid; }
  .tm-compact .tm-node small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tm::before, .tm-gate, .tm-track i { animation: none; } .tm-track i { display: none; } }

/* Join cards */
.ob-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ob-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border-radius: 18px; background: var(--paper-50); border: 1px solid var(--line); overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); --c: var(--clay); }
.ob-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--c), transparent); }
.ob-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); transition: transform 0.4s var(--ease); }
.ob-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--c) 70%, transparent); }
.ob-card:hover::after { transform: scale(1.4); }
.ob-slate { --c: var(--slate); } .ob-moss { --c: var(--moss); }
.ob-title { font: 400 clamp(1.4rem, 2.4vw, 1.75rem)/1.15 var(--serif); }
.ob-card .btn { margin-top: auto; }
.ob-card .ticks { margin-bottom: 18px; }
/* Onboarding steps */
.ob-steps { list-style: none; display: grid; gap: 10px; }
.ob-steps li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--paper-50); border: 1px solid var(--line); }
.ob-steps li > span { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--clay); color: #fff; font: 600 0.95rem var(--mono); box-shadow: 0 0 0 5px rgba(154, 74, 42, 0.12); }
.ob-steps b { display: block; font: 400 1.15rem/1.2 var(--serif); }
.ob-steps small { color: var(--ink-500); }
.ob-band { background: radial-gradient(70% 90% at 100% 0%, rgba(201, 139, 110, 0.22), transparent 60%), var(--paper); border-bottom: 1px solid var(--line); }
.ob-split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .ob-split { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--paper-50); border: 1px solid var(--line); font-size: 0.88rem; }
.ob-chips svg { width: 16px; height: 16px; color: var(--clay); }
/* Sorters: buy and sell */
.bs-grid { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .bs-grid { grid-template-columns: 1fr auto 1fr; } }
.bs-card { display: flex; flex-direction: column; padding: 26px 24px; border-radius: 18px; border: 1px solid var(--line-dark); color: var(--paper); }
.bs-card .btn { align-self: flex-start; margin-top: auto; }
.bs-card .ticks { margin-bottom: 18px; }
.bs-card .ticks li { color: var(--ink-300); }
.bs-buy { background: linear-gradient(160deg, rgba(201, 139, 110, 0.18), rgba(201, 139, 110, 0.03)); }
.bs-sell { background: linear-gradient(160deg, rgba(98, 140, 110, 0.22), rgba(98, 140, 110, 0.03)); }
.bs-arrow { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--clay-300); font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.bs-arrow svg { width: 44px; height: 44px; animation: bs-spin 6s linear infinite; }
@keyframes bs-spin { 50% { transform: rotate(8deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .bs-arrow svg { animation: none; } }
/* Who sees what */
.am td { text-align: center; vertical-align: middle; }
.am td small { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--ink-500); }
.am .am-y { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(98, 140, 110, 0.18); color: var(--moss); font-weight: 700; }
.am .am-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(154, 74, 42, 0.1); color: var(--clay); }
.am .am-n svg { width: 15px; height: 15px; }
/* Resellers: locked preview, categories, checks */
.rs-locked { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-50); }
.rs-ghosts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; filter: blur(4px); opacity: 0.6; }
.rs-ghost { display: grid; gap: 8px; padding-bottom: 12px; border-radius: 10px; overflow: hidden; background: #fff; }
.rs-ghost i { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #c98b6e, #3b5b7a); }
.rs-ghost b { height: 9px; margin: 0 10px; border-radius: 5px; background: var(--paper-200); }
.rs-ghost b.s { width: 45%; background: var(--clay); }
.rs-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 20px; background: radial-gradient(60% 60% at 50% 50%, rgba(248, 246, 241, 0.97), rgba(248, 246, 241, 0.7)); }
.rs-lock svg { width: 40px; height: 40px; color: var(--clay); }
.rs-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.rs-cats li { padding: 8px 14px; border-radius: 999px; background: var(--paper-50); border: 1px solid var(--line); }
.rs-grades { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-grades span { padding: 6px 14px; border-radius: 6px; background: var(--ink-900); color: var(--paper); font: 500 0.8rem var(--mono); }
.rs-grades span:first-child { background: var(--clay); }
.rs-checks { list-style: none; display: grid; gap: 8px; }
.rs-checks li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 2px 10px; padding: 12px 14px; border-radius: 12px; background: var(--paper-50); border: 1px solid var(--line); }
.rs-checks .code { grid-row: span 2; font: 600 0.8rem var(--mono); }
.rs-checks small { color: var(--ink-500); }

/* Invest: containers become bales become tokens, swirling around the token card */
[data-invest3d] { position: relative; overflow: hidden; }
[data-invest3d] > .container { position: relative; z-index: 1; }
.inv-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); z-index: 0; }
[data-invest3d].is-3d .inv-bg { opacity: 1; }
[data-invest3d].is-3d .tok-card { background: linear-gradient(140deg, rgba(43, 41, 37, 0.86) 0%, rgba(27, 26, 23, 0.9) 45%, rgba(58, 42, 34, 0.86) 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- Wholesale catalog (catalog.html) and Sell sorted stock (sell-sorted.html) ---------- */
.snap { border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 22px; color: var(--paper); }
.snap-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.snap-live { display: inline-flex; align-items: center; gap: 8px; font: 500 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-300); }
.snap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-dark); margin-top: 16px; border: 1px solid var(--line-dark); border-radius: 4px; overflow: hidden; }
.snap-grid > div { background: var(--ink-900); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.snap-grid b { font: 400 2.2rem/1 var(--serif); letter-spacing: -0.02em; color: #fff; }
.snap-grid span { font-size: 0.8rem; color: var(--ink-300); }
.snap-foot { margin-top: 12px; color: var(--ink-300); }
.snap.is-off .snap-live { color: var(--ink-400); }
.snap.is-off .live-dot { animation: none; background: var(--ink-400); box-shadow: none; }

.cat-group + .cat-group { margin-top: 48px; }
.cat-group-h { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cat-grid { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card { background: var(--paper-50); border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: flex; flex-direction: column; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.cat-card:hover { border-color: var(--ink-300); box-shadow: 0 18px 40px -28px rgba(27, 26, 23, 0.45); transform: translateY(-2px); }
.cat-head { display: flex; align-items: center; gap: 12px; }
.cat-head h3 { font: 400 1.45rem/1.2 var(--serif); flex: 1; min-width: 0; }
.cat-head h3 a { color: inherit; text-decoration: none; }
.cat-head h3 a:hover { color: var(--clay); }
.cat-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--clay-100); color: var(--clay); }
.cat-ico svg { width: 22px; height: 22px; }
.cat-n { font: 500 0.7rem var(--mono); letter-spacing: 0.06em; color: var(--moss); white-space: nowrap; }
.cat-n:empty { display: none; }
.cat-types { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); flex: 1; }
.cat-types a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); color: var(--ink-700); text-decoration: none; font-size: 0.95rem; }
.cat-types a:hover { color: var(--clay); padding-left: 6px; transition: padding 0.2s var(--ease); }
.cat-c { font: 500 0.72rem var(--mono); color: var(--moss); }
.cat-note { margin-top: 12px; font: 500 0.7rem/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ochre); }
.cat-note .link { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 0.85rem; }
.cat-all { margin-top: 14px; font-size: 0.9rem; }
.cat-card.sell .chips { margin-top: 14px; }

.grade-jumps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grade-jump { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-50); color: var(--ink); text-decoration: none; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
a.grade-jump:hover { border-color: var(--clay); transform: translateY(-2px); }
.gj-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gj-top b { font: 400 1.35rem var(--serif); }
.grade-jump small { color: var(--ink-600); line-height: 1.55; font-size: 0.88rem; }

.season-cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .season-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .season-cards { grid-template-columns: repeat(4, 1fr); } }
.season-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 22px; border-radius: 6px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); overflow: hidden; transition: transform 0.3s var(--ease); }
.season-card:hover { transform: translateY(-3px); }
.season-card b { font: 400 1.6rem var(--serif); }
.season-card small { color: var(--ink-600); line-height: 1.5; }
.season-card .cat-n { margin-top: auto; }
.s-warm { background: linear-gradient(150deg, #f6e3c8, #f1d0b4); }
.s-cold { background: linear-gradient(150deg, #dfe6ee, #c9d5e1); }
.s-all { background: linear-gradient(150deg, #e3eae0, #cfdcd0); }
.s-any { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.s-any small { color: var(--ink-300); }
.s-any .cat-n { color: var(--clay-300); }
.season-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.season-pill { padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; border: 1px solid var(--line); }

.fresh-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .fresh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fresh-grid { grid-template-columns: repeat(3, 1fr); } }
.fresh-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line-dark); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--paper); text-decoration: none; min-height: 168px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
a.fresh-card:hover { border-color: var(--clay-300); background: rgba(255, 255, 255, 0.07); }
.fc-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--ink-300); }
.fc-grade { padding: 3px 10px; border-radius: 999px; background: var(--clay); color: #fff; font: 600 0.7rem var(--mono); letter-spacing: 0.05em; }
.fc-title { font: 400 1.3rem/1.25 var(--serif); }
.fc-meta, .fc-when { font-size: 0.86rem; color: var(--ink-300); }
.fc-lock { margin-top: auto; font: 500 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-300); }
.fresh-card.is-ghost i, .fresh-card.is-ghost b { display: block; border-radius: 3px; background: rgba(255, 255, 255, 0.07); }
.fresh-card.is-ghost i { width: 40%; height: 12px; }
.fresh-card.is-ghost b { height: 18px; width: 85%; }
.fresh-card.is-ghost b.s { width: 50%; height: 12px; margin-top: auto; }
.fresh-empty { color: var(--ink-300); padding: 24px; border: 1px dashed var(--line-dark); border-radius: 6px; }

.sell-mock { display: grid; gap: 12px; }
.sm-card { background: var(--paper-50); border: 1px solid var(--line); border-radius: 8px; padding: 20px; box-shadow: 0 24px 48px -32px rgba(27, 26, 23, 0.5); }
.sm-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--ink-500); }
.sm-grade { padding: 3px 10px; border-radius: 999px; background: var(--clay); color: #fff; font: 600 0.7rem var(--mono); }
.sm-title { margin-top: 12px; font: 400 1.4rem var(--serif); }
.sm-meta { margin-top: 6px; color: var(--ink-600); font-size: 0.9rem; }
.sm-price { margin-top: 12px; font: 500 1.4rem var(--sans); }
.sm-price small { font-size: 0.8rem; color: var(--ink-500); font-weight: 400; }
.sm-by { margin-top: 6px; font-size: 0.86rem; color: var(--ink-600); }
.sm-by b { color: var(--clay); }
.sm-private { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px dashed var(--ink-300); border-radius: 8px; }
.sm-private svg { width: 22px; height: 22px; flex: none; color: var(--slate); margin-top: 2px; }
.sell-wall { display: grid; gap: 24px; }
@media (min-width: 640px) { .sell-wall { grid-template-columns: 1fr 1fr; } }
.sell-wall .eyebrow { color: var(--clay-300); }
.bg-ink .sell-wall .ticks li { color: var(--paper-200); }
.rs-cats a { color: inherit; text-decoration: none; }
.rs-cats li:hover { border-color: var(--clay); }
/* Main button on a dark page hero: clay, so it does not disappear into the background */
.page-hero.hero-dark .btn:not(.ghost-dark):not(.secondary):not(.inverse):not(.wa) { background: var(--clay); border-color: var(--clay); color: var(--paper-50); }
.page-hero.hero-dark .btn:not(.ghost-dark):not(.secondary):not(.inverse):not(.wa):hover { background: var(--clay-600); border-color: var(--clay-600); }
.ways { display: grid; gap: 16px; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-50); display: flex; flex-direction: column; gap: 10px; }
.way h3 { font: 400 1.5rem/1.2 var(--serif); }
.way p { color: var(--ink-600); line-height: 1.6; flex: 1; }
.way-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 500 0.85rem var(--mono); }