/* ============================================================
   WINNINGTON — Design system (Brand Concept B / Launch 2026)
   Colour: Carbon #161B22 · Polymer White #EEF0EF · Steel #B3BBC0 · Lead #5C646C · Cobalt #3B5BA9
   Type:   Archivo (display) · Figtree (text) · IBM Plex Mono (data)
   Cobalt is used sparingly, never as a fill behind text.
   ============================================================ */

:root {
  --carbon: #161b22;
  --carbon-2: #1d232b;
  --slate: #2b3038;
  --white: #eef0ef;
  --sheet: #f7f8f7;
  --panel: #e3e6e7;
  --steel: #b3bbc0;
  --lead: #5c646c;
  --cobalt: #3b5ba9;
  --cobalt-lt: #8ea4da;
  --text: var(--carbon);
  --muted: var(--lead);
  --rule: var(--carbon);
  --rule-soft: #c4cacd;
  --on-dark: var(--white);
  --on-dark-muted: #9aa3ab;
  --rule-dark: rgba(238, 240, 239, 0.18);

  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-text: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4.6vw, 76px);
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(80px, 9.5vw, 144px);
  --max: 1360px;
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: light;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.55; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.is-dark :focus-visible { outline-color: var(--cobalt-lt); }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--carbon); color: var(--white); padding: 10px 16px; text-decoration: none; transition: top 0.2s; }
.skip:focus { top: 12px; }
.mono { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em; }
.label { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.is-dark .label { color: var(--on-dark-muted); }
.cobalt { color: var(--cobalt); }
.muted { color: var(--muted); }
[data-placeholder] { opacity: 0.7; }

/* Layout */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section-tight { padding-top: clamp(48px, 6vw, 88px); }
.is-dark { background: var(--carbon); color: var(--on-dark); }
.is-paper { background: var(--panel); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }

/* Type */
.eyebrow { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(20px, 2.6vw, 36px); }
.eyebrow-cobalt { color: var(--cobalt); }
.is-dark .eyebrow { color: var(--on-dark-muted); }
.h1, .hero-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.99; letter-spacing: -0.035em; text-wrap: balance; max-width: 15ch; }
.display { font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 7.4vw, 7rem); line-height: 0.94; letter-spacing: -0.045em; margin-bottom: clamp(40px, 5vw, 72px); }
.h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 3.9vw, 3.6rem); line-height: 1.03; letter-spacing: -0.032em; text-wrap: balance; max-width: 22ch; }
.h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.15; letter-spacing: -0.015em; }
.lead { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.5; max-width: 46ch; color: var(--muted); margin-top: clamp(18px, 2vw, 28px); }
.is-dark .lead { color: var(--steel); }
.lead-sm { font-size: 1.125rem; line-height: 1.55; max-width: 56ch; }
.kicker { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.3; margin: clamp(48px, 6vw, 80px) 0 0; max-width: 40ch; }
.head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.head-split { display: grid; grid-template-columns: 7fr 4fr; gap: var(--gap) clamp(32px, 6vw, 96px); align-items: end; }
.head-side { margin: 0; color: var(--muted); max-width: 36ch; font-size: 1rem; }
.is-dark .head-side { color: var(--on-dark-muted); }

/* Buttons & links */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 0 20px; border: 1px solid var(--carbon); background: transparent; font-family: var(--f-text); font-weight: 500; font-size: 0.9375rem; text-decoration: none; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s; }
.btn .arrow { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-dark { background: var(--carbon); color: var(--white); }
.btn-dark:hover { background: var(--cobalt); border-color: var(--cobalt); }
.btn-line { color: var(--carbon); }
.btn-line:hover { background: var(--carbon); color: var(--white); }
.btn-light { background: var(--white); color: var(--carbon); border-color: var(--white); }
.btn-light:hover { background: transparent; color: var(--white); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.cta-link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -0.005em; text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid var(--cobalt); }
.cta-link .arrow { width: 22px; height: 22px; transition: transform 0.3s var(--ease); }
.cta-link:hover .arrow { transform: translateX(5px); }
.link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.link .arrow { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.link:hover { color: var(--cobalt); }
.link:hover .arrow { transform: translateX(4px); }

/* Wordmark */
.wm { display: inline-flex; flex-direction: column; gap: 10px; }
.wm-name { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.12em; margin-right: -0.12em; line-height: 1; }
.wm-desc { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-text); font-size: 0.9375rem; letter-spacing: 0.02em; }
.wm-desc i { display: block; width: 36px; height: 1px; background: var(--cobalt); }
.is-dark .wm-desc i { background: #5b78c4; }
.wm-lg .wm-name { font-size: clamp(2.2rem, 5vw, 4.25rem); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); color: var(--carbon); border-bottom: 1px solid transparent; transition: background-color 0.3s var(--ease), color 0.3s, height 0.3s var(--ease), border-color 0.3s; }
.site-header.on-dark { color: var(--white); }
.site-header.on-dark .btn-line { color: var(--white); border-color: rgba(238, 240, 239, 0.5); }
.site-header.on-dark .btn-line:hover { background: var(--white); color: var(--carbon); }
.site-header.is-scrolled { --header-h: 64px; color: var(--carbon); background: rgba(238, 240, 239, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--rule-soft); }
.site-header.is-scrolled .btn-line { color: var(--carbon); border-color: var(--carbon); }
.site-header.is-scrolled .btn-line:hover { background: var(--carbon); color: var(--white); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { text-decoration: none; margin-right: auto; }
.nav ul { display: flex; gap: clamp(16px, 2.2vw, 34px); }
.nav a { text-decoration: none; font-size: 0.9375rem; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; margin-right: -10px; cursor: pointer; }
.menu-lines { display: grid; gap: 7px; width: 24px; margin: auto; }
.menu-lines i { display: block; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
.menu-open .menu-lines i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-lines i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 40; background: var(--carbon); color: var(--white); padding-top: calc(var(--header-h) + 16px); overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-inner { min-height: calc(100% - 16px); display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 32px; }
.mobile-menu li { border-top: 1px solid var(--rule-dark); }
.mobile-menu li a { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 7.5vw, 2.3rem); letter-spacing: -0.025em; text-decoration: none; }
.mobile-menu li .mono { color: var(--cobalt-lt); font-size: 0.7rem; }
.mobile-menu-foot { display: grid; gap: 18px; padding-top: 32px; }
.menu-open .site-header { color: var(--white) !important; background: transparent !important; border-color: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-open .site-header .header-cta { visibility: hidden; }
body.menu-open { overflow: hidden; }

/* Home hero — "a homepage that leads with a statement" */
.hero { padding-top: calc(var(--header-h) + clamp(48px, 8vh, 104px)); background: var(--white); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: clamp(56px, 8vh, 104px); }
.hero-title { max-width: 12ch; font-size: clamp(2.9rem, 6.4vw, 6.25rem); }
.hero-lead { font-size: clamp(1.08rem, 1.3vw, 1.25rem); line-height: 1.5; max-width: 44ch; margin: clamp(22px, 3vh, 34px) 0 clamp(28px, 4vh, 40px); color: var(--slate); }
.hero-tabs-wrap { border-top: 1px solid var(--rule-soft); }
.hero-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-tabs a { display: flex; gap: 14px; align-items: baseline; padding: 22px 24px; text-decoration: none; font-size: 0.9375rem; border-left: 1px solid var(--rule-soft); transition: background-color 0.25s; }
.hero-tabs a:first-child { border-left: 0; padding-left: 0; }
.hero-tabs a:hover { background: var(--panel); }
.hero-tabs .mono { color: var(--cobalt); }

/* The Lamella */
.lamella { margin: 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.lb { display: block; width: 100%; }
.lb-carbon { background: var(--carbon); height: 72px; }
.lb-cobalt { background: var(--cobalt); height: 6px; }
.lb-lead { background: var(--lead); height: 2px; }
.lb-steel { background: var(--steel); height: 72px; }
.lb-hair { background: var(--lead); height: 2px; }
.lb-slate { background: var(--slate); height: 120px; }
.lamella-hero .lb { transform-origin: left; }
.js .lamella-hero .lb { transform: scaleX(0); animation: band 1.1s var(--ease) forwards; }
.js .lamella-hero .lb:nth-child(2) { animation-delay: 0.08s; }
.js .lamella-hero .lb:nth-child(3) { animation-delay: 0.14s; }
.js .lamella-hero .lb:nth-child(4) { animation-delay: 0.2s; }
.js .lamella-hero .lb:nth-child(5) { animation-delay: 0.26s; }
.js .lamella-hero .lb:nth-child(6) { animation-delay: 0.32s; }
.lamella-gauge { position: absolute; right: 0; bottom: -30px; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--muted); }
.lamella-band { display: grid; }
.lamella-band span:nth-child(1) { height: 22px; background: var(--slate); }
.lamella-band span:nth-child(2) { height: 3px; background: var(--cobalt); }
.lamella-band span:nth-child(3) { height: 1px; background: var(--steel); }
.lamella-band span:nth-child(4) { height: 30px; background: var(--slate); }

/* Jobs */
.jobs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.jobs li { border-top: 1px solid var(--rule); padding-top: 14px; }
.jobs .mono { color: var(--cobalt); }
.jobs h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 1.7vw, 1.6rem); letter-spacing: -0.02em; margin: 8px 0 10px; }
.jobs p { font-size: 0.9375rem; color: var(--muted); margin: 0; }

/* Split (who we are) */
.split-sec { padding-block: 0; }
.split { display: grid; grid-template-columns: 5fr 7fr; min-height: 640px; }
.split-visual { background: var(--panel); position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px); overflow: hidden; }
.edge { display: grid; gap: 5px; transform: skewY(-8deg); }
.edge-l { display: block; }
.e1 { background: var(--steel); height: 54px; }
.e2 { background: var(--cobalt); height: 6px; }
.e3 { background: var(--lead); height: 6px; }
.e4 { height: 72px; background: repeating-linear-gradient(0deg, var(--steel) 0 2px, #cfd5d8 2px 6px); }
.e5 { background: var(--sheet); height: 92px; border: 1px solid var(--steel); }
.split-cap { position: absolute; left: clamp(32px, 5vw, 72px); bottom: 28px; color: var(--muted); margin: 0; }
.split-copy { padding: var(--section) var(--gutter) var(--section) clamp(32px, 6vw, 96px); max-width: 780px; }
.split-copy > p { color: var(--slate); max-width: 52ch; }
.split-copy .h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); margin-bottom: 28px; }
.kv { border-top: 1px solid var(--rule-soft); margin-top: 32px; }
.kv div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.kv dt { color: var(--cobalt); text-transform: uppercase; letter-spacing: 0.1em; padding-top: 3px; }
.kv dd { font-size: 0.9875rem; }
.kv-wide { max-width: 820px; margin-bottom: 40px; }

/* Interfaces */
.iface { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.iface-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 2.75rem minmax(0, 1.25fr) minmax(0, 1.9fr); align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.iface-row:first-child { border-top: 0; }
.iface-code { color: var(--muted); }
.iface-a, .iface-b { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.45rem); text-transform: uppercase; letter-spacing: 0.02em; }
.iface-x { width: 30px; height: 30px; border: 1.5px solid var(--cobalt); border-radius: 50%; display: grid; place-items: center; color: var(--cobalt); font-size: 0.875rem; line-height: 1; }
.iface-d { color: var(--muted); }

/* Line Review */
.lr { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.lr-line { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--rule-dark); }
.lr-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); }
.lr-step { position: relative; padding-top: 44px; }
.lr-dot { position: absolute; top: 0; left: 0; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--white); background: var(--carbon); transition: background-color 0.4s, border-color 0.4s; transition-delay: calc(var(--s) * 0.25s); }
.lr-step:first-child .lr-dot { background: var(--cobalt); border-color: var(--cobalt); }
.lr-step:hover .lr-dot { border-color: var(--cobalt-lt); }
.lr-n { color: var(--on-dark-muted); }
.lr-step h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.6vw, 1.5rem); letter-spacing: -0.015em; margin: 10px 0; }
.lr-step p { font-size: 0.875rem; color: var(--steel); margin: 0; }
.lr-step .lr-out { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule-dark); color: var(--on-dark-muted); font-size: 0.75rem; }
.foot-note { margin-top: clamp(40px, 5vw, 64px); color: var(--on-dark-muted); }

/* Cross-section (Fig.) */
.xs { margin: 0; }
.xs-cap { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.xs-body { position: relative; }
.xs-stack { position: absolute; left: 0; top: 0; width: clamp(110px, 14vw, 160px); display: flex; flex-direction: column; border-top: 1px solid var(--carbon); border-bottom: 1px solid var(--carbon); }
.xs-band { display: block; }
.xs-steel { background: #d3d8db; }
.xs-cobalt { background: var(--cobalt); }
.xs-lead { background: var(--lead); }
.xs-lines { background: repeating-linear-gradient(0deg, #b9c1c6 0 2px, #d3d8db 2px 5px); }
.xs-white { background: #fff; border-left: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); }
.xs-labels { position: relative; margin-left: calc(clamp(110px, 14vw, 160px) + 16px); }
.xs-label { position: absolute; left: 0; right: 0; }
.xs-spec { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--cobalt); margin: 0; }
.xs-role { font-size: 0.8125rem; color: var(--muted); margin: 2px 0 0; }
.xs figcaption { margin-top: 18px; font-size: 0.8125rem; color: var(--muted); max-width: 48ch; }
.js .xs .xs-band { transform: scaleX(0); transform-origin: left; }
.js .xs.is-in .xs-band { animation: band 0.9s var(--ease) forwards; }

/* Polymer table */
.ptab-cap { text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 16px; }
.ptab dl { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ptab dl div { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.ptab dl div:first-child { border-top: 0; }
.ptab dt { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.ptab dd { font-size: 0.9375rem; }

/* Families */
.fam { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(36px, 4vw, 56px) var(--gap); }
.fam-item { border-top: 1px solid var(--rule); }
.fam-item a, .fam-item > div { display: block; padding-top: 16px; text-decoration: none; }
.code { color: var(--cobalt); }
.fam-item h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; margin: 8px 0 10px; transition: color 0.2s; }
.fam-item p { font-size: 0.9375rem; color: var(--muted); margin: 0; }
.fam-item a:hover h3 { color: var(--cobalt); }
.sectors-line { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: clamp(48px, 6vw, 80px); padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); }
.sectors-line span { color: var(--carbon); text-transform: uppercase; letter-spacing: 0.1em; }
.sectors-line a { text-decoration: none; }
.sectors-line a:hover { color: var(--cobalt); }

/* Sustainability */
.sus { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.numlist { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.numlist li { display: grid; grid-template-columns: 2.5rem 1fr; padding: 12px 0; border-top: 1px solid var(--rule-soft); font-size: 0.9875rem; }
.numlist li:first-child { border-top: 0; }
.numlist .mono { color: var(--cobalt); padding-top: 3px; }
.numlist-wide { max-width: 900px; margin-top: 32px; }
.numlist-sm li { font-size: 0.9375rem; }
.wording .say { font-size: 1.125rem; margin-bottom: 8px; }
.notsay { color: var(--muted); }
.notsay s { text-decoration-color: var(--lead); }
.wording .link { margin-top: 16px; }
.notes { margin-top: 40px; color: var(--muted); }
.notes p { margin: 0 0 6px; }

/* The name */
.name-stack { display: flex; flex-direction: column; font-family: var(--f-display); font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: 1.02; letter-spacing: 0.1em; margin: clamp(24px, 4vw, 56px) 0 clamp(56px, 7vw, 104px); }
.name-stack .n1 { font-weight: 600; }
.name-stack .n2 { font-weight: 500; color: var(--lead); }
.name-stack .n3 { font-weight: 500; color: var(--cobalt); letter-spacing: 0.04em; }
.name-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap) clamp(32px, 6vw, 96px); padding-top: 24px; border-top: 1px solid var(--rule-dark); }
.name-lead { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; max-width: 22ch; }
.name-foot p:last-child { color: var(--steel); font-size: 0.9375rem; max-width: 52ch; }

/* Closing panel */
.closing { padding-block: var(--section); }
.steps8 { display: grid; grid-template-columns: repeat(8, 1fr); margin-bottom: clamp(56px, 8vw, 112px); }
.steps8 li { border-left: 1px solid var(--rule-dark); padding: 2px 10px 6px; font-weight: 500; font-size: 0.9375rem; display: grid; gap: 6px; align-content: start; }
.steps8 .mono { color: var(--on-dark-muted); }
.steps8 .is-loop { border-left-color: var(--cobalt-lt); }
.bring { display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.2rem, 5.6vw, 5rem); line-height: 1.04; letter-spacing: -0.035em; }
.bring span:nth-child(2) { color: var(--steel); }
.bring span:nth-child(3) { color: var(--lead); }
.closing-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; }
.closing-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(48px, 7vw, 96px); }
.closing-note { color: var(--steel); font-size: 0.9375rem; max-width: 60ch; margin: 0; }

/* Inner page hero */
.page-hero { padding-top: calc(var(--header-h) + clamp(56px, 10vh, 120px)); padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--rule-soft); }
.page-hero.is-dark { border-bottom: 0; }
.page-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.page-hero .h1 { max-width: 17ch; }
.page-hero-aside { padding-bottom: 6px; }

/* Materials hero — exploded layers */
.mat-hero { padding-bottom: clamp(64px, 8vw, 120px); overflow: hidden; }
.mat-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.mat-hero .h1 { font-size: clamp(2.8rem, 6vw, 5.6rem); }
.legend { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 8px; color: var(--steel); font-size: 0.8125rem; }
.legend span { color: var(--cobalt-lt); }
.legend-note { margin-top: 14px; color: var(--on-dark-muted); }
.xl { position: relative; aspect-ratio: 1.25 / 1; --sep: 52px; }
.xl-scene { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 20%; }
.xl-stage { position: absolute; left: 10%; top: 38%; width: 72%; aspect-ratio: 1.55 / 1; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-24deg); }
.xl-plane { position: absolute; inset: 0; transform: translateZ(calc(var(--i) * var(--sep))); transition: transform 1s var(--ease); border: 1px solid rgba(238, 240, 239, 0.6); background: linear-gradient(115deg, rgba(238, 240, 239, 0.1), rgba(238, 240, 239, 0.03) 40%, rgba(238, 240, 239, 0.12) 55%, rgba(238, 240, 239, 0.03)); }
.xl-plane span { position: absolute; left: 14px; top: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--steel); }
.xl-p2 { background: linear-gradient(115deg, rgba(59, 91, 169, 0.75), rgba(59, 91, 169, 0.5)); border-color: #6f88c8; }
.xl-p3 { background: transparent; border-style: dashed; }
.xl-p4, .xl-p5 { background: linear-gradient(115deg, rgba(179, 187, 192, 0.22), rgba(179, 187, 192, 0.1)); }
.js .xl { --sep: 6px; }
.js .xl.is-open { --sep: 52px; }

/* Timeline */
.timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); margin-top: clamp(48px, 6vw, 88px); }
.timeline li { border-top: 1px solid var(--lead); padding-top: 14px; }
.timeline .mono { font-size: 1rem; color: var(--muted); letter-spacing: 0.02em; }
.timeline p { font-size: 0.875rem; margin: 10px 0 0; }
.timeline .is-today { border-top-color: var(--carbon); }
.timeline .is-today .mono { color: var(--carbon); }
.timeline .is-next { border-top-color: var(--cobalt); }
.timeline .is-next .mono { color: var(--cobalt); }

/* Packaging page */
.famx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); }
.famx { border-top: 1px solid var(--rule); padding: 22px 0 44px; }
.famx .h3 { margin: 10px 0 12px; }
.famx > p { color: var(--muted); max-width: 46ch; }
.famx-formats { display: flex; flex-wrap: wrap; gap: 6px 0; color: var(--slate); }
.famx-formats li + li::before { content: "·"; margin: 0 10px; color: var(--steel); }
.tag { display: inline-block; border: 1px solid var(--cobalt); color: var(--cobalt); padding: 6px 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; }
.demo { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(36px, 4vw, 56px); }
.demo-col { border-left: 1px solid var(--steel); padding: 2px clamp(12px, 1.4vw, 20px) 24px; }
.demo-col:first-child { border-left-color: var(--carbon); }
.demo-col.is-proof { border-left-color: var(--cobalt); }
.demo-label { text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px; }
.is-proof .demo-label { color: var(--cobalt); }
.demo-head { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; line-height: 1.3; margin-bottom: 12px; }
.demo-body { font-size: 0.875rem; color: var(--muted); }
.demo-list li { font-size: 0.9375rem; padding: 2px 0; }
.demo-mono { display: grid; gap: 8px; color: var(--slate); }

/* Capabilities */
.ledger { border-top: 1px solid var(--rule); margin-top: clamp(32px, 4vw, 56px); }
.ledger div { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: var(--gap); padding: 18px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.ledger dt { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; display: flex; gap: 16px; align-items: baseline; }
.ledger dt .mono { color: var(--cobalt); font-weight: 400; }
.ledger dd { color: var(--muted); }
.ledger dd.mono { color: var(--carbon); }
.wts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.wts { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wts li { display: grid; grid-template-columns: 5.5rem 1fr; padding: 12px 0; border-top: 1px solid var(--rule-soft); font-size: 0.9875rem; }
.wts li:first-child { border-top: 0; }
.wts .mono { color: var(--cobalt); padding-top: 3px; }

/* Industries */
.sector-list { border-top: 1px solid var(--rule); }
.sector { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: var(--gap); padding: 28px 0 36px; border-bottom: 1px solid var(--rule-soft); }
.sector-name { display: grid; gap: 8px; align-content: start; }
.sector-name .mono { color: var(--cobalt); }
.ticks li { display: flex; gap: 12px; padding: 4px 0; font-size: 0.9875rem; }
.ticks li::before { content: ""; flex: none; width: 10px; height: 1px; background: var(--cobalt); margin-top: 0.8em; }
.codes li a { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; text-decoration: none; font-size: 0.9375rem; }
.codes li a:hover { color: var(--cobalt); }
.codes .mono { color: var(--cobalt); min-width: 4.5rem; }
.six { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 5vw, 64px) var(--gap); margin-top: clamp(36px, 4vw, 56px); }
.six li { border-top: 1px solid var(--rule); padding-top: 14px; }
.six h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; margin-bottom: 10px; }
.six p:last-child { font-size: 0.9375rem; color: var(--muted); }

/* Insights */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 48px) var(--gap); }
.cards li { border-top: 1px solid var(--rule); }
.cards a { display: grid; gap: 4px; padding-top: 16px; text-decoration: none; }
.cards h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px; transition: color 0.2s; }
.cards p:not(.label) { color: var(--muted); font-size: 0.9375rem; }
.cards .link { justify-self: start; margin-top: 8px; }
.cards a:hover h3 { color: var(--cobalt); }
.cs-detail { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 80px); }
.cs-meta { margin-top: 0; }
.cs-block { margin-bottom: 40px; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); margin: 0 0 40px; }
.figs div { border-top: 1px solid var(--cobalt); padding-top: 12px; }
.figs dd { font-family: var(--f-display); font-weight: 600; font-size: 2rem; }

/* About */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) clamp(24px, 3vw, 40px); }
.three li { border-top: 1px solid var(--rule); padding-top: 18px; }
.three li.is-cobalt { border-top-color: var(--cobalt); }
.three li.is-cobalt .label { color: var(--cobalt); }
.three p:last-child { font-size: 1rem; }
.pos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.pos-list { border-top: 1px solid var(--rule); margin-top: clamp(32px, 4vw, 56px); }
.pos-list li { display: grid; grid-template-columns: 2.5rem 9rem 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.pos-list .mono { color: var(--cobalt); }
.pos-list h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; }
.pos-list p { margin: 0; font-size: 0.9375rem; color: var(--slate); }
.map { margin: 0; }
.map-plot { position: relative; aspect-ratio: 1.12 / 1; background: #d9dee0; }
.map-plot::before { content: ""; position: absolute; left: 6%; right: 6%; top: 52%; height: 1px; background: var(--lead); }
.map-plot::after { content: ""; position: absolute; top: 6%; bottom: 6%; left: 50%; width: 1px; background: var(--lead); }
.map-ax { position: absolute; color: var(--lead); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; }
.map-y1 { left: calc(50% + 10px); top: 3%; }
.map-y2 { left: calc(50% + 10px); bottom: 7%; }
.map-x1 { left: 5%; bottom: 2.5%; }
.map-x2 { right: 5%; bottom: 2.5%; }
.map-pt { position: absolute; display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; white-space: nowrap; }
.map-pt::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #8a9197; flex: none; }
.map-w { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.12em; font-size: 1.05rem; }
.map-w::before { width: 18px; height: 18px; background: var(--cobalt); }
.map figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }
.origin-main { display: flex; flex-direction: column; height: 100%; }
.disclaimer { margin-top: auto; padding: 18px 20px; background: #d9dee0; font-size: 0.9375rem; max-width: 40ch; }
.origin-list { border-top: 1px solid var(--rule); }
.origin-list div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 18px 0 22px; border-bottom: 1px solid var(--rule-soft); }
.origin-list dt { display: grid; gap: 4px; }
.origin-list dt .mono { text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.origin-list dt strong { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; }
.origin-list dd { font-size: 0.9375rem; }
.origin-list .is-cobalt dt .mono, .origin-list .is-cobalt dt strong { color: var(--cobalt); }
.then-now { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: end; }
.tn-big { font-family: var(--f-display); font-weight: 500; font-size: clamp(3.4rem, 8.5vw, 7.5rem); line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 12px; }
.tn-then { color: var(--lead); }
.then-now .mono { text-transform: uppercase; letter-spacing: 0.12em; margin: 0; }
.tn-arrow { height: 1px; background: var(--carbon); position: relative; margin-bottom: 28px; }
.tn-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border-left: 10px solid var(--carbon); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.band { background: var(--carbon); color: var(--white); font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 2.5vw, 2.1rem); letter-spacing: -0.015em; padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 32px); margin: clamp(40px, 5vw, 64px) 0 0; }

/* Prose */
.prose { max-width: 760px; }
.prose .h3 { margin: 36px 0 10px; }
.prose .h3:first-child { margin-top: 0; }
.prose p { color: var(--slate); }

/* Contact & form */
.contact-hero { padding-bottom: clamp(56px, 7vw, 104px); }
.contact-hero .bring { font-size: clamp(2.1rem, 5vw, 4.4rem); }
.contact-hero .lead { margin-top: clamp(28px, 3vw, 40px); max-width: 58ch; }
.contact-grid { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(40px, 6vw, 96px); }
fieldset { border: 0; padding: 0; margin: 0 0 48px; min-width: 0; }
legend { padding: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; }
legend .mono { color: var(--cobalt); margin-right: 10px; font-weight: 400; }
legend + .fields { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--gap); }
.field-full { grid-column: 1 / -1; }
.field label, .label-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.9375rem; font-weight: 500; margin-bottom: 8px; }
.q { color: var(--cobalt); font-weight: 400; }
.lbl { flex: 1; }
.req { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--carbon); background: var(--sheet); border: 1px solid var(--steel); border-radius: 0; padding: 12px 14px; min-height: 48px; -webkit-appearance: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--lead); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(59, 91, 169, 0.18); background: #fff; }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--carbon); border-bottom: 1.5px solid var(--carbon); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.hint { font-size: 0.8125rem; color: var(--muted); margin: 6px 0 0; }
.err { font-size: 0.8125rem; color: #b3261e; margin: 6px 0 0; }
.err:empty { display: none; }
.drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px dashed var(--lead); background: var(--sheet); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; font-size: 0.9375rem; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop:hover, .drop.is-over { border-color: var(--cobalt); background: #fff; }
.drop:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(59, 91, 169, 0.18); }
.drop-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--steel); border-radius: 50%; }
.drop-icon .arrow { width: 16px; height: 16px; transform: rotate(-90deg); }
.drop.has-file .drop-icon { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.file-slot { position: relative; }
.file-slot + .file-slot { margin-top: 8px; }
.file-slot[data-collapsed] { display: none; }
.drop-sm { padding: 12px 22px; }
.drop-sm .drop-icon { width: 30px; height: 30px; }
.drop-text { min-width: 0; overflow-wrap: anywhere; }
.file-rm { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); z-index: 2; font-size: 0.875rem; }
.file-slot:has(.file-rm:not([hidden])) .drop { padding-right: 96px; }
.drop[aria-invalid="true"], .drop:has(input[aria-invalid="true"]) { border-color: #B3261E; }
/* Confirmation after a successful submission */
.form-done { margin-top: 0; padding: 32px 32px 30px; border-left: 2px solid var(--cobalt); background: var(--sheet); }
.form-done h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 12px; }
.form-done .ref { display: inline-block; margin: 6px 0 14px; padding: 8px 12px; font-family: var(--f-mono); font-size: 1rem; letter-spacing: 0.04em; background: #fff; border: 1px solid var(--steel); user-select: all; }
.form-done .btn-row { margin-top: 18px; }
@media (max-width: 600px) { .form-done { padding: 24px 18px; } .file-rm { right: 10px; } }
.form-foot { display: grid; gap: 14px; justify-items: start; padding-top: 28px; border-top: 1px solid var(--rule); }
.form-foot .btn { min-width: 280px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.form-status { margin-top: 28px; padding: 22px 24px; border-left: 2px solid var(--cobalt); background: var(--sheet); }
.form-status h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; margin-bottom: 8px; }
.form-status p { margin: 0 0 6px; color: var(--slate); }
.form.is-sent > :not([data-status]) { display: none; }
.form-status { scroll-margin-top: 96px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-aside { display: grid; gap: 40px; align-content: start; }
.aside-block { border-top: 1px solid var(--rule); padding-top: 16px; }
.aside-email { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; word-break: break-word; }

/* Footer */
.site-footer { padding-top: 0; }
.footer-top { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; padding-bottom: clamp(48px, 6vw, 80px); }
.footer-tagline { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 24px 0 18px; }
.footer-desc { color: var(--steel); }
.footer-nav ul { columns: 2; column-gap: 32px; }
.footer-nav a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--steel); }
.footer-nav a:hover { color: var(--white); }
.footer-mid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 40px; }
.footer-contact { color: var(--steel); font-size: 0.8125rem; }
.footer-contact p { margin: 0 0 6px; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--white); }
.footer-contact .muted { color: var(--on-dark-muted); }
.footer-top { padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--rule-dark); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0 28px; border-top: 1px solid var(--rule-dark); font-size: 0.8125rem; color: var(--on-dark-muted); }
.footer-bottom p { margin: 0; }
.footer-bottom a { text-decoration: none; }

/* Motion */
@keyframes band { to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .hero-in { opacity: 0; animation: rise 0.9s var(--ease) forwards; }
.js .hero-in:nth-child(2) { animation-delay: 0.06s; }
.js .hero-in:nth-child(3) { animation-delay: 0.12s; }
.js .hero-in:nth-child(4) { animation-delay: 0.18s; }
.js .hero-in:nth-child(5) { animation-delay: 0.24s; }
.js .hero-in:nth-child(6) { animation-delay: 0.3s; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .js .reveal, .js .hero-in { opacity: 1 !important; transform: none !important; }
  .js .lb, .js .xs-band { transform: none !important; }
  .js .xl { --sep: 52px !important; }
}

/* Responsive */
@media (max-width: 1180px) {
  .jobs { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .fam { grid-template-columns: repeat(2, 1fr); }
  .lr-steps { grid-template-columns: repeat(4, 1fr); row-gap: 48px; }
  .lr-line { display: none; }
  .demo { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .steps8 { grid-template-columns: repeat(4, 1fr); row-gap: 20px; }
  .iface-row { grid-template-columns: 4rem 1fr 2.5rem 1fr; }
  .iface-d { grid-column: 2 / -1; }
}
@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .nav, .header-cta { display: none; }
  .menu-btn { display: block; }
  .hero-grid, .two-col, .sus, .pos, .cs-detail, .contact-grid, .footer-top, .mat-hero-grid, .head-split { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; width: 100%; }
  .lb-carbon, .lb-steel { height: 48px; }
  .lb-slate { height: 80px; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split-visual { min-height: 320px; }
  .split-copy { padding: var(--section) var(--gutter); }
  .name-foot { grid-template-columns: 1fr; }
  .sector, .ledger div { grid-template-columns: 1fr; gap: 14px; }
  .six, .cards, .three { grid-template-columns: 1fr 1fr; }
  .wts-grid, .famx-grid { grid-template-columns: 1fr; }
  .wts-grid .wts + .wts { margin-top: -1px; }
  .page-hero-grid { grid-template-columns: 1fr; }
  .then-now { grid-template-columns: 1fr; }
  .tn-arrow { width: 120px; margin: 0; }
  .origin-main .disclaimer { margin-top: 32px; }
  .xl { max-width: 620px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero-title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .btn-row { flex-direction: column; align-items: stretch; }
  .hero-tabs { grid-template-columns: 1fr; }
  .hero-tabs a { border-left: 0; border-top: 1px solid var(--rule-soft); }
  .hero-tabs a:first-child { border-top: 0; }
  .jobs, .fam, .six, .cards, .three { grid-template-columns: 1fr; }
  .jobs { row-gap: 24px; }
  .lr-steps { grid-template-columns: 1fr 1fr; }
  .demo, .timeline { grid-template-columns: 1fr 1fr; }
  .steps8 { grid-template-columns: 1fr 1fr; }
  .iface-row { grid-template-columns: 3.2rem 1fr 2rem 1fr; gap: 8px; }
  .iface-a, .iface-b { font-size: 1rem; }
  .iface-x { width: 24px; height: 24px; }
  .kv div { grid-template-columns: 1fr; gap: 4px; }
  .pos-list li { grid-template-columns: 2rem 1fr; }
  .pos-list p { grid-column: 2; }
  .origin-list div { grid-template-columns: 1fr; gap: 8px; }
  .fields { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; min-width: 0; }
  .map-pt { font-size: 0.8125rem; }
  .map-w { font-size: 0.875rem; }
  .name-stack { letter-spacing: 0.06em; font-size: clamp(2.3rem, 11.5vw, 3.4rem); }
  .xs-stack { width: 96px; }
  .xs-labels { margin-left: 108px; }
  .display { font-size: clamp(2.6rem, 13vw, 3.6rem); }
}
@media print {
  .site-header, .mobile-menu, .closing, .site-footer { display: none !important; }
  .js .reveal, .js .hero-in { opacity: 1 !important; transform: none !important; }
}

/* Section rhythm: avoid double gaps between same-colour sections */
.section:not(.is-dark):not(.is-paper):not(.split-sec) + .section:not(.is-dark):not(.is-paper):not(.split-sec) { padding-top: 0; }
.is-paper + .is-paper, .is-dark + .closing { padding-top: 0; }
@media (max-width: 640px) { .hero-tabs a { padding-left: 0; } }
@media (max-width: 640px) {
  .xs-body { height: auto !important; }
  .xs-stack { position: static; width: 100%; }
  .xs-labels { margin: 16px 0 0; display: grid; gap: 10px; }
  .xs-label { position: static; }
  .split-cap { position: static; margin-top: 28px; }
}

/* ============================================================
   Commercial layer — services, products, service promise
   ============================================================ */
.hero-tabs-4 { grid-template-columns: repeat(4, 1fr); }
.hero-visual { display: grid; gap: 14px; }
.lamella-thin { gap: 4px; }
.lamella-thin .lb-carbon { height: 6px; } .lamella-thin .lb-steel { height: 6px; } .lamella-thin .lb-cobalt { height: 3px; }
.lamella-thin .lb-slate { height: 10px; }

/* Finished packaging illustration */
.packs { margin: 0; background: var(--panel); padding: clamp(12px, 2vw, 24px) clamp(10px, 2vw, 22px) 6px; }
.packs svg { width: 100%; height: auto; overflow: visible; }
.pk-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--lead); }
.pk-mark { font-family: var(--f-mono); font-size: 13px; fill: var(--steel); letter-spacing: 0.06em; }
.js .packs-hero .pk { opacity: 0; transform: translateY(14px); animation: rise 0.9s var(--ease) forwards; }
.js .packs-hero .pk-roll { animation-delay: 0.2s; }
.js .packs-hero .pk-pouch { animation-delay: 0.35s; }
.js .packs-hero .pk-flow { animation-delay: 0.5s; }
.js .packs-hero .pk-tray { animation-delay: 0.65s; }

/* What do you need? — four routes */
.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.route { border-top: 1px solid var(--rule); }
.route a, .route > div { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; height: 100%; padding: 18px 0 8px; text-decoration: none; }
.route-n { color: var(--cobalt); }
.route-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.7rem); letter-spacing: -0.03em; line-height: 1; transition: color 0.2s; }
.route p { margin: 0; color: var(--slate); font-size: 1rem; }
.route-go .arrow { width: 22px; height: 22px; transition: transform 0.3s var(--ease); }
.route a:hover .route-title { color: var(--cobalt); }
.route a:hover .route-go .arrow { transform: translateX(5px); }

/* Product list */
.prod-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 5vw, 80px); border-top: 1px solid var(--rule); }
.prod-list li { border-bottom: 1px solid var(--steel); }
.prod-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; text-decoration: none; }
.prod-list a > span:first-child { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.015em; transition: color 0.2s; }
.prod-list .mono { color: var(--lead); text-align: right; font-size: 0.6875rem; }
.prod-list a:hover > span:first-child { color: var(--cobalt); }

/* More than a supplier */
.diff { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.diff .display { margin-bottom: 28px; font-size: clamp(2.8rem, 6vw, 5.6rem); }
.diff-note { color: var(--muted); max-width: 42ch; margin-top: 24px; }
.understand { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); border-top: 1px solid var(--rule); }
.understand li { padding: 18px 0 22px; border-bottom: 1px solid var(--rule-soft); }
.understand .mono { color: var(--cobalt); }
.understand h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; margin: 6px 0 6px; }
.understand p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* Five-stage process — bigger, calmer */
.lr-5 .lr-steps { grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.6vw, 40px); }
.lr-5 .lr-step h3 { font-size: clamp(1.5rem, 2.3vw, 2.15rem); letter-spacing: -0.025em; }
.lr-5 .lr-step p { font-size: 0.9375rem; }
.lr-5 .lr-dot { background: var(--carbon); border-color: var(--white); }
.lr-5.is-in .lr-dot { background: var(--cobalt); border-color: var(--cobalt); transition-delay: calc(var(--s) * 0.3s + 0.2s); }
.lr-5 .lr-line::after { content: ""; position: absolute; inset: 0; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease); }
.lr-5.is-in .lr-line::after { transform: scaleX(1); }

/* Service: send us */
.send { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gap); border-top: 1px solid var(--rule); }
.send li { padding: 20px 0 24px; border-bottom: 1px solid var(--rule-soft); }
.send h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -0.02em; margin-bottom: 4px; }
.send p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: clamp(40px, 5vw, 64px); }
.promises div { border-top: 2px solid var(--carbon); padding-top: 14px; }
.promises dt { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 6px; }
.promises dd { color: var(--slate); font-size: 0.9375rem; }

/* Industries strip */
.ind-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); column-gap: var(--gap); }
.ind-strip a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--steel); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.ind-strip .arrow { width: 16px; height: 16px; flex: none; color: var(--lead); transition: transform 0.3s var(--ease), color 0.2s; }
.ind-strip a:hover { color: var(--cobalt); }
.ind-strip a:hover .arrow { transform: translateX(4px); color: var(--cobalt); }

.two-col-tight { margin-top: 0; }
.say { font-size: 1.0625rem; margin: 20px 0 22px; }
.say .notsay { margin-left: 10px; }

/* Expandable technical notes */
.tech { border-top: 1px solid var(--rule); }
.tech + .tech { border-top-color: var(--rule-soft); }
.tech:last-child { border-bottom: 1px solid var(--rule-soft); }
.tech summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: baseline; padding: 14px 0; font-weight: 500; }
.tech summary::-webkit-details-marker { display: none; }
.tech summary .mono { color: var(--cobalt); font-size: 0.9rem; width: 1em; display: inline-block; transition: transform 0.25s var(--ease); }
.tech[open] summary .mono { transform: rotate(45deg); }
.tech summary:hover { color: var(--cobalt); }
.tech-body { padding: 4px 0 22px; }
.tech-body > p { color: var(--slate); font-size: 0.9375rem; max-width: 60ch; }
.tech-body .xs { margin-top: 6px; }
.pitem .tech { margin-top: 12px; border-top-color: var(--rule-soft); border-bottom: 0; }
.pitem .tech summary { padding: 8px 0; font-size: 0.875rem; color: var(--lead); }

/* Solutions page */
.display-sm { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.6rem, 5.4vw, 4.8rem); letter-spacing: -0.04em; line-height: 0.95; margin: 8px 0 14px; }
.svc-list { display: grid; }
.svc { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--rule); }
.svc-head .lead-sm { color: var(--slate); max-width: 36ch; }
.svc-body > p { font-size: 1.0625rem; max-width: 58ch; }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 24px 0 28px; }
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule-soft); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { color: var(--cobalt); font-family: var(--f-mono); font-weight: 400; transition: transform 0.25s var(--ease); }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--cobalt); }
.faq-item p { margin: 0 0 20px; color: var(--slate); max-width: 60ch; }

/* Packaging page */
.pack-hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.pack-hero .h1 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); }
.pack-hero .btn-row { margin-top: 28px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); }
.pitem { display: grid; grid-template-columns: 2.5rem 1fr; gap: 12px; padding: 22px 0 18px; border-top: 1px solid var(--rule); }
.pitem .h3 { margin-bottom: 8px; }
.pitem p { margin: 0 0 8px; color: var(--slate); }
.pitem-uses { color: var(--lead) !important; }

/* Sustainability + About */
.levers-4 { grid-template-columns: repeat(4, 1fr); }
.name-stack-sm { font-size: clamp(2.6rem, 7vw, 6rem); }
.name-foot > div p { color: var(--steel); font-size: 0.9375rem; max-width: 56ch; }
.timeline-dark { margin-top: clamp(48px, 6vw, 80px); }
.timeline-dark li { border-top-color: var(--rule-dark); }
.timeline-dark .mono { color: var(--on-dark-muted); }
.timeline-dark p { color: var(--steel); }
.timeline-dark .is-today { border-top-color: var(--white); }
.timeline-dark .is-today .mono { color: var(--white); }
.timeline-dark .is-next { border-top-color: var(--cobalt-lt); }
.timeline-dark .is-next .mono { color: var(--cobalt-lt); }

/* Contact — what can we help with */
.need { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.need-opt { position: relative; display: block; cursor: pointer; }
.need-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.need-opt span { display: grid; gap: 4px; height: 100%; padding: 12px 12px 14px; border: 1px solid var(--steel); background: var(--sheet); font-size: 0.8125rem; color: var(--lead); line-height: 1.35; transition: border-color 0.2s, background-color 0.2s; }
.need-opt b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--carbon); }
.need-opt:hover span { border-color: var(--lead); }
.need-opt input:checked + span { border-color: var(--carbon); background: #fff; box-shadow: inset 0 3px 0 var(--cobalt); }
.need-opt input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.need-opt input[aria-invalid="true"] + span { border-color: #b3261e; }
.contact-hero .bring { font-size: clamp(2.2rem, 5.2vw, 4.6rem); }
.contact-hero .bring span:nth-child(2) { color: var(--steel); }

@media (max-width: 1180px) {
  .routes { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .promises { grid-template-columns: repeat(2, 1fr); }
  .need { grid-template-columns: repeat(3, 1fr); }
  .lr-5 .lr-steps { grid-template-columns: repeat(5, 1fr); }
  .lr-5 .lr-line { display: block; }
  .levers-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .diff, .svc, .pack-hero-grid { grid-template-columns: 1fr; }
  .lr-5 .lr-steps { grid-template-columns: 1fr; gap: 0; }
  .lr-5 .lr-line { display: block; left: 8px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .lr-5 .lr-line::after { transform: scaleY(0); transform-origin: top; }
  .lr-5.is-in .lr-line::after { transform: scaleY(1); }
  .lr-5 .lr-step { padding: 0 0 32px 44px; }
  .lr-5 .lr-step h3 { margin-top: 2px; }
  .send { grid-template-columns: 1fr 1fr; }
  .ind-strip { grid-template-columns: 1fr 1fr; }
  .hero-tabs-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-tabs-4 a:nth-child(3), .hero-tabs-4 li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-tabs-4 a:nth-child(n+3), .hero-tabs-4 li:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 640px) {
  .routes, .prod-list, .understand, .send, .promises, .ind-strip, .pgrid, .svc-cols, .levers-4 { grid-template-columns: 1fr; }
  .need { grid-template-columns: 1fr 1fr; }
  .prod-list a { flex-direction: column; gap: 2px; }
  .prod-list .mono { text-align: left; }
  .hero-tabs-4 { grid-template-columns: 1fr 1fr; }
}
.two-col .h2 + .lead-sm { margin-top: 22px; }
.say .notsay { display: block; margin: 4px 0 0; }
.jump { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 18px; margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule-soft); }
.jump a { text-decoration: none; color: var(--lead); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; }
.jump a:hover { color: var(--cobalt); }
.h2 + .lead-sm { margin-top: 22px; }
.pos-list li { grid-template-columns: 2.5rem 10rem 1fr; }

/* ============================================================
   Sourcing layer — catalogue, sectors, benchmarking, network
   ============================================================ */
.more { margin: clamp(28px, 3vw, 44px) 0 0; }
.trail ol { display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(28px, 4vw, 48px); }
.trail li + li::before { content: "/"; margin: 0 10px; color: var(--steel); }
.trail a { text-decoration: none; }
.trail a:hover { color: var(--cobalt); }
.trail [aria-current] { color: var(--carbon); }
.is-dark .trail ol { color: var(--on-dark-muted); }
.is-dark .trail [aria-current] { color: var(--white); }
.page-hero-grid + * { margin-top: 0; }
.page-hero .trail + .page-hero-grid, .page-hero > .wrap:first-child { margin: 0 auto; }
.hero-actions { margin-top: clamp(28px, 3vw, 40px); }
.is-dark .btn-line { color: var(--white); border-color: rgba(238, 240, 239, 0.5); }
.is-dark .btn-line:hover { background: var(--white); color: var(--carbon); }
.is-dark .link:hover { color: var(--cobalt-lt); }

/* Hero strip (non-link) */
.hero-tabs li { display: flex; gap: 14px; align-items: baseline; padding: 22px 24px; font-size: 0.9375rem; border-left: 1px solid var(--rule-soft); }
.hero-tabs li:first-child { border-left: 0; padding-left: 0; }
.hero-tabs li .mono { color: var(--cobalt); }

/* Closing — Packaging Review offer */
.closing-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.closing-side .closing-note { font-size: 1.0625rem; margin-bottom: 28px; max-width: 46ch; }
.btn-ghost { color: var(--white); border-color: rgba(238, 240, 239, 0.5); }
.btn-ghost:hover { background: var(--white); color: var(--carbon); border-color: var(--white); }

/* Pillars (3 or 4 columns) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) clamp(24px, 3vw, 48px); }
.pillars-4 { grid-template-columns: repeat(4, 1fr); }
.pillars li { border-top: 1px solid var(--rule); padding-top: 16px; }
.pillar-k { color: var(--cobalt); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 14px; display: flex; gap: 12px; }
.pillar-k span { color: var(--muted); }
.pillars h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.35rem, 1.9vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 10px; }
.pillars p:last-child { color: var(--slate); font-size: 0.9875rem; margin: 0; }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 44px) var(--gap); }
.cat { border-top: 1px solid var(--rule); }
.cat a { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; height: 100%; padding-top: 14px; text-decoration: none; }
.cat-n { color: var(--cobalt); }
.cat h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.15; transition: color 0.2s; }
.cat p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.cat-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--lead); }
.cat-go .arrow { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.cat a:hover h3, .cat a:hover .cat-go { color: var(--cobalt); }
.cat a:hover .cat-go .arrow { transform: translateX(4px); }
.cat-group { padding-top: clamp(24px, 3vw, 40px); margin-bottom: clamp(56px, 7vw, 104px); }
.head-sm .h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.head-sm { margin-bottom: clamp(24px, 3vw, 40px); }
.band-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.band-cta p { margin: 0; }

/* Sector grid (home) */
.sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); border-top: 1px solid var(--rule); }
.sec-grid a { display: grid; gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; height: 100%; }
.sec-grid .mono { color: var(--cobalt); }
.sec-grid h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; transition: color 0.2s; }
.sec-grid p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.sec-grid a:hover h3 { color: var(--cobalt); }

/* Sector rows (index) */
.sec-rows { border-top: 1px solid var(--rule); }
.sec-rows a { display: grid; grid-template-columns: 3.5rem 5fr 6fr 2rem; gap: var(--gap); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; }
.sec-rows .mono { color: var(--cobalt); }
.sec-rows h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2.1rem); letter-spacing: -0.025em; line-height: 1.1; transition: color 0.2s; }
.sec-rows p { margin: 0; color: var(--slate); }
.sec-go .arrow { width: 20px; height: 20px; transition: transform 0.3s var(--ease); }
.sec-rows a:hover h2 { color: var(--cobalt); }
.sec-rows a:hover .sec-go .arrow { transform: translateX(5px); color: var(--cobalt); }

/* Six stages */
.lr-6 .lr-steps { grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 32px); }
.lr-6 .lr-step h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.15; }
.lr-6 .lr-step p { font-size: 0.875rem; }
.lr-6 .lr-dot { background: var(--carbon); border-color: var(--white); }
.lr-6.is-in .lr-dot { background: var(--cobalt); border-color: var(--cobalt); transition-delay: calc(var(--s) * 0.25s + 0.2s); }
.lr-6 .lr-line::after { content: ""; position: absolute; inset: 0; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease); }
.lr-6.is-in .lr-line::after { transform: scaleX(1); }
.lr-cta { margin: clamp(40px, 5vw, 64px) 0 0; }
.lr-detail .lr-steps { grid-template-columns: 1fr; gap: 0; }
.lr-detail .lr-line { left: 8px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; display: block; }
.lr-detail .lr-line::after { transform: scaleY(0); transform-origin: top; }
.lr-detail.is-in .lr-line::after { transform: scaleY(1); }
.lr-detail .lr-step { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(24px, 4vw, 64px); align-content: start; padding: 0 0 clamp(36px, 4vw, 56px) 56px; }
.lr-detail .lr-step > :not(.lr-kv):not(.lr-dot) { grid-column: 1; }
.lr-detail .lr-step h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 6px 0 8px; }
.lr-detail .lr-step > p { font-size: 0.9375rem; }
.lr-kv { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); border-top: 1px solid var(--rule-dark); padding-top: 14px; align-self: start; }
.lr-kv dt { color: var(--cobalt-lt); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; margin-bottom: 6px; }
.lr-kv dd { font-size: 0.9375rem; color: var(--steel); }
.lr-kv div:last-child dd { color: var(--white); }

/* Network map */
.net-home, .plat-home { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.net-home .lead-sm, .plat-home .lead-sm { margin: 22px 0 28px; }
.nmap { margin: 0; background: var(--carbon); color: var(--white); padding: clamp(14px, 2vw, 24px); }
.nmap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nmap svg { width: 100%; min-width: 520px; height: auto; }
.nm-grid line { stroke: rgba(238, 240, 239, 0.06); stroke-width: 1; }
.nm-route { fill: none; stroke: var(--lead); stroke-width: 1.5; stroke-dasharray: 5 6; }
.nm-route.nm-est { stroke: var(--cobalt-lt); stroke-dasharray: none; stroke-width: 2; }
.nm-node circle { fill: var(--carbon); stroke: var(--steel); stroke-width: 1.5; }
.nm-node.nm-est circle { fill: var(--cobalt); stroke: var(--cobalt-lt); }
.nm-node text, .nm-uk text { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; fill: var(--steel); }
.nm-node.nm-est text { fill: var(--white); }
.nm-uk rect { fill: var(--white); }
.nm-uk text { fill: var(--white); font-size: 13px; }
.nm-uk .nm-sub { fill: var(--on-dark-muted); font-size: 11px; letter-spacing: 0.04em; }
.nmap figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 12px; font-size: 0.8125rem; color: var(--steel); }
.nmap figcaption .mono { color: var(--on-dark-muted); margin-left: auto; font-size: 0.6875rem; }
.nm-key { display: inline-flex; gap: 8px; align-items: center; }
.nm-key i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--steel); }
.nm-key .k-est { background: var(--cobalt); border-color: var(--cobalt-lt); }
.js .nm-route { stroke-dashoffset: 0; }

/* Quality checks */
.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap) clamp(20px, 2.4vw, 36px); }
.check { border-top: 2px solid var(--carbon); padding-top: 14px; }
.check-n { color: var(--cobalt); }
.check h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; margin: 8px 0 12px; }
.check .ticks li { font-size: 0.9rem; color: var(--slate); }

/* Difference — seven */
.diff7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 44px) var(--gap); }
.diff7 li { border-top: 1px solid var(--rule); padding-top: 14px; }
.diff7 li:first-child { grid-column: span 2; }
.diff7 li:first-child h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.diff7 .mono { color: var(--cobalt); }
.diff7 h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.15; margin: 8px 0 8px; }
.diff7 p { margin: 0; font-size: 0.9375rem; color: var(--muted); max-width: 44ch; }

/* Platform preview */
.plat { margin: 0; background: var(--sheet); border: 1px solid var(--steel); padding: clamp(16px, 2vw, 28px); }
.plat-tag { color: var(--cobalt); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.plat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: 20px; }
.plat-stats div { border-top: 1px solid var(--carbon); padding-top: 10px; }
.plat-stats .mono { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; margin: 0 0 4px; }
.plat-big { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; margin: 0; }
.plat-table { overflow-x: auto; }
.plat table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 440px; }
.plat th { text-align: left; font-family: var(--f-mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--carbon); }
.plat td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule-soft); }
.plat td.mono { font-size: 0.75rem; }
.plat td:first-child { color: var(--cobalt); }
.plat figcaption { margin-top: 12px; font-size: 0.8125rem; color: var(--muted); }
.fields9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gap); border-top: 1px solid var(--rule); }
.fields9 li { padding: 18px 0 22px; border-bottom: 1px solid var(--rule-soft); }
.fields9 .mono { color: var(--cobalt); }
.fields9 h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; margin: 6px 0; }
.fields9 p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* Category page */
.spec3 { display: grid; grid-template-columns: 4fr 4fr 5fr; gap: clamp(28px, 4vw, 64px); }
.spec-col { border-top: 1px solid var(--rule); padding-top: 16px; }
.spec-need .numlist { margin-bottom: 20px; }
.spec-need .hint { margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--steel); background: var(--sheet); padding: 7px 10px; color: var(--carbon); font-size: 0.75rem; }
.used { display: grid; grid-template-columns: 10rem 1fr; gap: var(--gap); align-items: baseline; padding-bottom: clamp(48px, 6vw, 88px); }
.pill-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-links a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--carbon); text-decoration: none; font-weight: 500; font-size: 0.9375rem; transition: background-color 0.2s, color 0.2s; }
.pill-links .arrow { width: 14px; height: 14px; }
.pill-links a:hover { background: var(--carbon); color: var(--white); }

/* Quality docs & network status */
.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gap); border-top: 1px solid var(--rule); }
.docs li { padding: 18px 0 22px; border-bottom: 1px solid var(--steel); }
.docs .mono { color: var(--cobalt); }
.docs h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; margin: 6px 0 4px; }
.docs p { margin: 0; color: var(--slate); font-size: 0.9375rem; }
.muted-dark { color: var(--steel); }
.status { border-top: 1px solid var(--rule); }
.status div { display: grid; grid-template-columns: 5fr 6fr 2fr; gap: var(--gap); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
.status dt { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; }
.status dd { color: var(--muted); }
.status-tag { justify-self: end; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid var(--steel); padding: 5px 9px; font-size: 0.6875rem; white-space: nowrap; }
.status .is-est dt { color: var(--cobalt); }
.status .is-est .status-tag { border-color: var(--cobalt); color: var(--cobalt); }

/* Review hero & forms */
.facts { display: grid; gap: 0; min-width: min(360px, 100%); border-top: 1px solid var(--rule-dark); }
.facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-dark); }
.facts dt { color: var(--cobalt-lt); text-transform: uppercase; letter-spacing: 0.1em; padding-top: 3px; }
.facts dd { font-size: 0.9375rem; max-width: 28ch; }
.review-hero .page-hero-grid { grid-template-columns: 7fr 5fr; align-items: end; }
.fieldset-note { margin: 10px 0 0; }
.check-row { display: flex !important; gap: 12px; align-items: flex-start !important; font-weight: 400 !important; font-size: 0.9375rem; color: var(--slate); cursor: pointer; }
.check-row input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cobalt); }
.check-row input[aria-invalid="true"] { outline: 2px solid #b3261e; outline-offset: 2px; }
.fields-top { margin-bottom: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.aside-cta { border-top: 2px solid var(--cobalt); }
.drop-text small { display: block; color: var(--muted); }

/* Footer columns */
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer-cols .label { color: var(--on-dark-muted); }
.footer-cols a { display: inline-block; padding: 4px 0; text-decoration: none; color: var(--steel); font-size: 0.9375rem; }
.footer-cols a:hover { color: var(--white); }
.footer-legal { display: flex; gap: 20px; }

@media (max-width: 1180px) {
  .cat-grid, .sec-grid, .checks, .diff7 { grid-template-columns: repeat(2, 1fr); }
  .lr-6:not(.lr-detail) .lr-steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .lr-6:not(.lr-detail) .lr-line { display: none; }
  .pillars-4, .docs, .fields9 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
  .lr-detail .lr-step { grid-template-columns: 1fr; }
  .lr-detail .lr-kv { grid-column: 1; grid-row: auto; margin-top: 16px; }
}
@media (max-width: 1240px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 980px) {
  .closing-grid, .net-home, .plat-home, .spec3, .review-hero .page-hero-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .sec-rows a { grid-template-columns: 3rem 1fr 2rem; }
  .sec-rows p { grid-column: 2; grid-row: 2; }
  .sec-go { grid-column: 3; grid-row: 1; }
  .status div { grid-template-columns: 1fr auto; }
  .status dd:not(.status-tag) { grid-column: 1; grid-row: 2; }
  .status-tag { grid-column: 2; grid-row: 1; }
  .used { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 640px) {
  .cat-grid, .sec-grid, .checks, .diff7, .pillars, .pillars-4, .docs, .fields9, .lr-kv { grid-template-columns: 1fr; }
  .diff7 li:first-child { grid-column: auto; }
  .lr-6 .lr-steps { grid-template-columns: 1fr 1fr; }
  .lr-detail .lr-steps { grid-template-columns: 1fr; }
  .lr-detail .lr-step { padding-left: 40px; }
  .hero-tabs li { border-left: 0; padding-left: 0; }
  .hero-tabs-4 li { padding: 14px 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .footer-legal { gap: 14px; }
  .footer-bottom { flex-direction: column; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .plat-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .nmap figcaption .mono { margin-left: 0; }
  .band-cta .btn { width: 100%; }
}
.net-home > *, .plat-home > *, .closing-grid > *, .two-col > * { min-width: 0; }
@media (min-width: 1181px) { .footer-top { grid-template-columns: 4fr 8fr; } }
.plat td.mono { white-space: nowrap; }
.nmap-hint { display: none; }
@media (max-width: 640px) { .nmap-hint { display: block; font-family: var(--f-mono); font-size: 0.6875rem; color: var(--on-dark-muted); margin: 0 0 8px; } }
.cat a:not(:has(.cat-n)) { grid-template-rows: auto 1fr auto; }
.fieldset-note + .fields { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* Home hero — exploded material layers on a dark panel */
.hero-layers { margin: 0; position: relative; padding: clamp(10px, 2vw, 24px) clamp(10px, 2vw, 24px) clamp(16px, 2vw, 22px); overflow: hidden; }
.hero-layers .xl { aspect-ratio: 1.22 / 1; }
.hero-layers .xl-stage { left: 14%; top: 54%; width: 64%; }
.hero-layers-cap { display: grid; gap: 6px; border-top: 1px solid var(--rule-dark); padding-top: 12px; font-size: 0.8125rem; color: var(--steel); }
.hero-layers-cap .mono { color: var(--on-dark-muted); letter-spacing: 0.12em; }
.hero-layers-cap b { color: var(--cobalt-lt); font-weight: 400; }
.js .hero-layers .xl.is-open, .hero-layers .xl { --sep: 40px !important; }
.js .hero-layers .xl:not(.is-open) { --sep: 6px !important; }
.hero-layers .xl-stage { top: 47%; }

/* Packaging Challenges */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) var(--gap); }
.game-card { border-top: 1px solid var(--rule); }
.game-card a { display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 8px; height: 100%; padding-top: 16px; text-decoration: none; }
.game-thumb { background: var(--panel); aspect-ratio: 6 / 5; display: grid; place-items: center; margin-bottom: 8px; transition: background-color 0.25s; }
.game-thumb svg { width: 78%; height: auto; }
.game-card a:hover .game-thumb { background: #d9dee0; }
.game-meta { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; display: flex; gap: 12px; margin: 0; }
.game-meta span { color: var(--cobalt); }
.game-card h2, .game-card h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.025em; transition: color 0.2s; }
.game-card p { margin: 0; color: var(--slate); font-size: 0.9875rem; }
.game-card .game-lesson { color: var(--cobalt); font-size: 0.875rem; border-top: 1px solid var(--rule-soft); padding-top: 10px; margin-top: 6px; }
.game-card a:hover h2, .game-card a:hover h3, .game-card a:hover .cat-go { color: var(--cobalt); }
.games-note { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 980px) { .games { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .games { grid-template-columns: 1fr; } }
.games-2 { grid-template-columns: repeat(2, 1fr); }
.games-2 .game-thumb { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .games-2 { grid-template-columns: 1fr; } }
.is-paper .game-thumb { background: var(--sheet); }
.is-paper .game-card a:hover .game-thumb { background: #fff; }
.game-meta { flex-direction: column; gap: 2px; }

/* ── Packaging Review: conditional specification ─────────── */
.rv-cats { display: grid; gap: 22px; }
.rv-cats > .label-row { margin: 0; }
.rv-catg { margin: 0 0 8px; color: var(--cobalt); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.rv-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rv-cat span { min-height: 100%; }
.rv-spec-body, .rv-check-body { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.rv-set { margin: 0; }
.rv-empty { margin: 0; padding: 28px 24px; border: 1px dashed var(--steel); color: var(--muted); font-size: .9375rem; }
.rv-set-head { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--rule-soft); }
.rv-set-head.no-fig { grid-template-columns: 1fr; }
.rv-set-title { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 0 0 4px; }
.rv-fig { margin: 0; color: var(--lead); background: var(--sheet); border: 1px solid var(--rule-soft); padding: 10px 12px; }
.rv-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.rv-fig text { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .08em; fill: var(--cobalt); }
.rv-fig .dl { fill: none; stroke: var(--cobalt); stroke-width: 1; }
.rv-nodims { margin-top: 14px; }
.rv-unit { position: relative; }
.rv-unit input { padding-right: 64px !important; }
.rv-u { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: .8125rem; color: var(--muted); pointer-events: none; }
.rv-qty { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(120px, 170px) minmax(140px, 190px); gap: 8px; }
.rv-qty-2 { grid-template-columns: minmax(0, 1fr) 120px; }
.rv-qty input { width: 100%; font: inherit; font-size: 1rem; color: var(--carbon); background: var(--sheet); border: 1px solid var(--steel); border-radius: 0; padding: 12px 14px; min-height: 48px; -webkit-appearance: none; appearance: none; }
.rv-qty input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(59, 91, 169, .18); background: #fff; }
.rv-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.rv-group > legend { display: flex; width: 100%; font-family: inherit; font-size: .9375rem; font-weight: 500; letter-spacing: 0; margin-bottom: 8px; }
.rv-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-opt { position: relative; display: inline-flex; cursor: pointer; }
.rv-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rv-opt span { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 14px; border: 1px solid var(--steel); background: var(--sheet); font-size: .875rem; color: var(--slate); line-height: 1.3; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.rv-opt:hover span { border-color: var(--lead); }
.rv-opt input:checked + span { border-color: var(--carbon); background: #fff; color: var(--carbon); box-shadow: inset 0 -2px 0 var(--cobalt); }
.rv-opt input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.rv-opt input[aria-invalid="true"] + span { border-color: #b3261e; }
.rv-chk span::before { content: ""; flex: none; width: 12px; height: 12px; margin-right: 9px; border: 1px solid var(--lead); background: #fff; }
.rv-chk input:checked + span::before { background: var(--cobalt); border-color: var(--cobalt); box-shadow: inset 0 0 0 2px #fff; }
.rv-other { margin-top: 8px; }
.rv-other input { width: 100%; font: inherit; font-size: 1rem; background: #fff; border: 1px solid var(--steel); padding: 10px 14px; min-height: 44px; border-radius: 0; }
.rv-other input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(59, 91, 169, .18); }
.rv-adv { margin-top: 28px; border-top: 1px solid var(--rule); }
.rv-adv > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 18px 0; font-weight: 500; }
.rv-adv > summary::-webkit-details-marker { display: none; }
.rv-adv > summary .mono { color: var(--cobalt); transition: transform .2s; }
.rv-adv[open] > summary .mono { transform: rotate(45deg); }
.rv-adv > summary em { font-style: normal; font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rv-adv > .fields { padding-bottom: 8px; }
.rv-summary { background: var(--sheet); border-left: 2px solid var(--cobalt); padding: 22px 24px 8px; }
.rv-sum-sec { margin-bottom: 18px; }
.rv-sum-sec > p { margin: 0 0 8px; color: var(--cobalt); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.rv-sum-sec dl { margin: 0; display: grid; gap: 0; }
.rv-sum-sec dl > div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule-soft); font-size: .9375rem; }
.rv-sum-sec dt { color: var(--muted); }
.rv-sum-sec dd { margin: 0; color: var(--carbon); overflow-wrap: anywhere; white-space: pre-line; }
.rv-sum-sec dd.is-ns { color: var(--lead); font-style: italic; }
.rv-summary-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px 0 0; }
.rv-summary-tools .hint { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--cobalt); }
.rv-print { display: none; }
@media (max-width: 760px) {
  .rv-set-head { grid-template-columns: 1fr; gap: 16px; }
  .rv-fig { max-width: 320px; }
  .rv-qty, .rv-qty-2 { grid-template-columns: 1fr 1fr; }
  .rv-qty > input { grid-column: 1 / -1; }
  .rv-catgrid { grid-template-columns: 1fr 1fr; }
  .rv-sum-sec dl > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 420px) { .rv-catgrid { grid-template-columns: 1fr; } }
@media print {
  body.print-summary > *:not(.rv-print) { display: none !important; }
  body.print-summary { background: #fff; }
  body.print-summary .rv-print { display: block; font-size: 10.5pt; color: #161b22; }
  .rv-print header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5pt solid #161b22; padding-bottom: 8pt; margin-bottom: 14pt; }
  .rv-print-brand { font-family: var(--f-display); font-weight: 600; letter-spacing: .12em; font-size: 14pt; margin: 0; }
  .rv-print .rv-sum-sec { break-inside: avoid; }
  .rv-print-note { margin-top: 16pt; font-size: 8.5pt; color: #5c646c; }
}

/* ── International sourcing: "Material strata" artwork ───── */
.intl { overflow: hidden; }
.intl .head { margin-bottom: 0; }
.intl-art { margin-top: clamp(20px, 3vw, 40px); }
.strata { margin: 0; position: relative; --sep: 3; }
.strata svg { display: block; width: 100%; height: auto; overflow: hidden; }
.intl-art .strata svg { height: clamp(260px, 33vw, 500px); }
.strata figcaption { margin-top: 10px; color: var(--muted); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.strata figcaption span { color: var(--cobalt); margin-right: 8px; }
.intl-art .strata figcaption { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.st-l { transform: translateY(calc(var(--i) * var(--sep) * -1px)); transition: transform 1.4s var(--ease); }
.st-l path { stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.st-base path { fill: url(#st-g-home); stroke: rgba(22, 27, 34, .14); }
.st-film path { fill: rgba(255, 255, 255, .46); stroke: rgba(22, 27, 34, .3); }
.st-steel path { fill: rgba(179, 187, 192, .2); stroke: rgba(22, 27, 34, .26); }
.st-dash path { fill: none; stroke: rgba(22, 27, 34, .4); stroke-dasharray: 4 3; }
.st-cobalt path { fill: rgba(255, 255, 255, .5); stroke: #3B5BA9; stroke-width: 1.6; }
.strata.is-in { --sep: 22; }
.intl-foot { display: grid; grid-template-columns: 220px 1fr; gap: 18px 24px; align-items: baseline; margin-top: clamp(28px, 3.4vw, 48px); padding-top: 24px; border-top: 1px solid var(--rule); }
.intl-foot .label { margin: 0; }
.intl-range { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--gap); }
.intl-range li { display: flex; gap: 10px; align-items: baseline; font-size: .9375rem; color: var(--slate); }
.intl-range .mono { color: var(--cobalt); font-size: .75rem; }
.intl-more { grid-column: 2; margin: 6px 0 0; color: var(--muted); font-size: .9375rem; }
.intl-more .link { margin-left: 8px; }
@media (max-width: 1100px) { .intl-range { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .intl-foot { grid-template-columns: 1fr; }
  .intl-more { grid-column: 1; }
  .intl-art .strata svg { height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .st-l { transition: none; } .strata, .strata.is-in { --sep: 22; } }
.criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gap); border-top: 1px solid var(--rule); counter-reset: cr; list-style: none; padding: 0; margin: 0; }
.criteria li { padding: 20px 0 24px; border-bottom: 1px solid var(--rule-soft); }
.criteria .mono { color: var(--cobalt); }
.criteria h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 6px 0; }
.criteria p { margin: 0; color: var(--muted); font-size: .9375rem; }
.who { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.who li { padding: 9px 14px; border: 1px solid var(--steel); font-size: .875rem; color: var(--slate); background: var(--sheet); }
.who-row { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline; padding-top: 24px; border-top: 1px solid var(--rule); }
.who-row .label { margin: 0; }
.cert-note { margin-top: clamp(28px, 3vw, 40px); padding: 22px 24px; border-left: 2px solid var(--cobalt); background: var(--sheet); max-width: 860px; }
.cert-note h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; margin: 0 0 8px; }
.cert-note p { margin: 0 0 8px; color: var(--slate); }
.attrs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--gap); border-top: 1px solid var(--rule); list-style: none; padding: 0; margin: 0; }
.attrs li { padding: 20px 0 24px; border-bottom: 1px solid var(--rule-soft); }
.attrs h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin: 6px 0; }
.attrs p { margin: 0; color: var(--muted); font-size: .9375rem; }
.attrs .mono { color: var(--cobalt); }
@media (max-width: 1100px) { .criteria, .attrs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .criteria, .attrs { grid-template-columns: 1fr; } .who-row { grid-template-columns: 1fr; gap: 12px; } }
.who-row-tight { grid-template-columns: 1fr; gap: 10px; margin: 8px 0 24px; }
.intl-art-page .strata svg { height: clamp(300px, 42vw, 600px); }
.intl-more-page { grid-column: auto; max-width: 640px; margin-top: 18px; }
@media (max-width: 640px) { .intl-more .link { display: inline-flex; margin: 6px 0 0; } }

/* ── International sourcing hero: the world in five layers ──── */
.sourcing-hero .page-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.sourcing-hero .page-hero-main { max-width: 560px; }
.sourcing-hero .h1 { font-size: clamp(2.5rem, 4.4vw, 4.3rem); }
.sourcing-hero .lead { color: var(--steel); }
.wl-fig { margin: 0; padding: 0 0 4px; overflow: visible; }
.wl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wl-fig .xl { aspect-ratio: 1.38 / 1; }
.wl-fig .xl-scene { perspective: 2000px; perspective-origin: 50% 10%; }
.wl-fig .xl-stage { left: 8%; top: 46%; width: 82%; aspect-ratio: 2.12 / 1; transform: rotateX(60deg) rotateZ(-18deg); }
.js .wl-fig .xl.is-open, .wl-fig .xl { --sep: 46px !important; }
.js .wl-fig .xl:not(.is-open) { --sep: 5px !important; }
.xl-world .xl-plane { background: linear-gradient(115deg, rgba(238, 240, 239, 0.06), rgba(238, 240, 239, 0.015) 40%, rgba(238, 240, 239, 0.07) 55%, rgba(238, 240, 239, 0.015)); border-color: rgba(238, 240, 239, 0.32); }
.xl-world .xl-plane span { left: 10px; top: 7px; font-size: 11px; }
.wl-map { position: absolute; inset: 7% 4% 5%; width: 92%; height: 88%; overflow: visible; }
.wl-map use { fill: rgba(238, 240, 239, 0.14); stroke: rgba(238, 240, 239, 0.7); stroke-width: 0.8px; stroke-linejoin: round; }
/* 02 — the cobalt layer, as on the home page */
.xl-world .xl-p2 { background: linear-gradient(115deg, rgba(59, 91, 169, 0.62), rgba(59, 91, 169, 0.42)); border-color: #6f88c8; }
.xl-world .xl-p2 span { color: #c9d5f2; }
.xl-world .xl-p2 .wl-map use { fill: rgba(142, 164, 218, 0.5); stroke: #c9d5f2; }
/* 03 — dashed, as on the home page */
.xl-world .xl-p3 { background: transparent; border-style: dashed; }
.xl-world .xl-p3 .wl-map use { fill: none; stroke: rgba(179, 187, 192, 0.75); stroke-dasharray: 3 3; }
/* 04, 05 — steel */
.xl-world .xl-p4 .wl-map use, .xl-world .xl-p5 .wl-map use { fill: rgba(179, 187, 192, 0.2); stroke: rgba(179, 187, 192, 0.42); }
.xl-world .xl-p1 .wl-map use { fill: rgba(238, 240, 239, 0.16); stroke: rgba(247, 248, 247, 0.85); }
.wl-fig .hero-layers-cap { margin-top: clamp(4px, 1vw, 12px); }
@media (max-width: 980px) {
  .sourcing-hero .page-hero-grid { grid-template-columns: 1fr; }
  .wl-fig { max-width: 620px; width: 100%; margin-top: 8px; }
  .js .wl-fig .xl.is-open, .wl-fig .xl { --sep: 26px !important; }
}
@media (max-width: 640px) {
  .wl-fig .xl { aspect-ratio: 1.75 / 1; }
  .wl-fig .xl-stage { left: 6%; width: 86%; top: 34%; }
  .js .wl-fig .xl.is-open, .wl-fig .xl { --sep: 18px !important; }
  .xl-world .xl-plane span { font-size: 9px; left: 6px; top: 4px; }
}
.rv-ns { margin-top: 10px; }
.rv-eq-note { margin: -4px 0 16px; }