/*
Theme Name: RUIXING Sportswear
Theme URI: https://ruixingapparel.com/
Author: RUIXING Sportswear
Description: Made-to-order custom sportswear B2B theme (V5.7 site plan) — white / light-grey surfaces, deep-navy conversion bands, teal primary CTA, RX-coded asset placeholders, 3-step project form, Web3Forms inquiries, SEO/GEO built in.
Version: 2.9.31
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ruixing
*/

/* ==========================================================================
   DESIGN TOKENS — change variables, not individual rules.
   Doc V5 §一 / §六: white ≈55% · light grey #F3F5F6 ≈25% · deep navy #132B40
   ≈15% (example bands, CTA) · teal #297E98 ≈5% (primary CTA, small emphasis).
   Natural-case Manrope headings — never all-caps titles (jacket site uses those).
   ========================================================================== */
:root {
  --bg: #ffffff;
  --bg-tint: #f5f5f4;        /* alternating section */
  --bg-sand: #ececea;        /* placeholders, subtle blocks */
  --ink: #111111;
  --ink-2: #4d4d4d;
  --ink-3: #808080;
  --line: #e6e6e4;
  --line-2: #cccccc;
  --accent: #111111;         /* monochrome: primary CTA = solid black */
  --accent-hover: #333333;
  --accent-soft: #f0f0ee;
  --on-accent: #ffffff;
  --navy: #111111;           /* dark surfaces: example bands, CTA (name kept for references) */
  --navy-2: #222222;
  --on-navy: #f5f5f4;
  --on-navy-2: rgba(245, 245, 244, 0.74);
  --navy-accent: #bfbfbf;    /* eyebrow / emphasis on dark */
  --dark: #0a0a0a;           /* footer — light theme here vs the jacket site’s dark theme */
  --dark-2: #161616;
  --on-dark: #f5f5f4;
  --on-dark-2: rgba(245, 245, 244, 0.7);

  --f-head: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-display: clamp(36px, 4.4vw, 62px);
  --fs-h1: clamp(32px, 3.6vw, 52px);
  --fs-h2: clamp(26px, 2.7vw, 38px);
  --fs-h3: clamp(18px, 1.5vw, 21px);
  --fs-lede: clamp(17px, 1.3vw, 19px);
  --fs-small: 14px;

  --container: 1280px;
  --gutter: 24px;
  --section-y: clamp(72px, 8vw, 120px);
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
  --sticky-top: calc(var(--header-h) + 24px); /* top offset for sticky blocks under the header */
}
/* When the header hides on scroll, sticky blocks move up into its space. */
.header-hidden { --sticky-top: 24px; }

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 16px; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
.lede { font-size: var(--fs-lede); color: var(--ink-2); max-width: 680px; }
.lede a, .post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--ink); color: #fff; }

/* ⚠️ overflow-x:hidden on <html> creates a scroll container and breaks in-page
   anchors (#quote): the URL changes but the page does not scroll. Modern browsers
   use overflow:clip (clips without a scroll container). Do NOT revert to plain hidden. */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
p, li, a, h1, h2, h3, dd { overflow-wrap: break-word; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.bg-white { background: var(--bg); }
.bg-tint { background: var(--bg-tint); }
.bg-dark { background: var(--dark); color: var(--on-dark); }
.bg-dark .lede, .bg-dark p { color: var(--on-dark-2); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.section-head .arrow-link { margin-top: 8px; }

/* ---------------- Buttons & links ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--radius); font-family: var(--f-head); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent); color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row.center { justify-content: center; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.arrow-link:hover { color: var(--accent); border-color: var(--accent); }
.arrow-link .ico { width: 16px; height: 16px; transition: transform .2s; }
.arrow-link:hover .ico { transform: translateX(3px); }
.text-link { font-size: 14px; font-weight: 600; color: var(--accent); }
.text-link:hover { text-decoration: underline; }
.ico { width: 24px; height: 24px; flex: none; }

/* ---------------- Header / nav ---------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s, transform .35s var(--ease); }
/* Hidden while scrolling down (main.js). */
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 2px 16px rgba(17,17,17,.05); }
.nav-row { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.brand { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--f-head); font-weight: 700; font-size: 28px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.brand .brand-mark { display: inline-block; width: 10px; height: 10px; background: var(--accent); transform: skewX(-12deg); margin-right: 2px; }
.brand .brand-sub { font-size: 13px; font-weight: 600; letter-spacing: 0.22em; color: var(--ink-3); }
.brand:has(img) { align-items: center; gap: 12px; }
.brand img { display: block; height: 48px; width: auto; max-width: none; aspect-ratio: 381 / 206; flex: none; }   /* RUIXING butterfly wordmark 381×206 — never let flex squeeze it */
.site-header .brand { flex: none; }
.brand .brand-name { display: inline-flex; align-items: baseline; gap: 8px; }
.site-footer .brand img { height: 64px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links > .nav-item > a, .nav-links > a { display: inline-flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 8px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); position: relative; white-space: nowrap; }
.nav-links > .nav-item > a::after, .nav-links > a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 22px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover::after, .nav-links a.is-active::after, .nav-item:hover > a::after, .nav-item:focus-within > a::after { transform: scaleX(1); }
.nav-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-item { position: relative; }
.nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-cta .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .25s, opacity .25s; }

/* dropdown (Customization / Fabrics / Manufacturing) */
.dropdown { position: absolute; top: 100%; left: 0; min-width: 260px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.dropdown a { display: block; padding: 10px 14px; border-radius: var(--radius); font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.dropdown a:hover { background: var(--bg-tint); color: var(--ink); }
.nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }


/* ---------------- Media / placeholders ---------------- */
.media { position: relative; margin: 0; overflow: hidden; background: var(--bg-sand); border-radius: var(--radius); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a:hover > .media img, .cat-tile:hover .media img { transform: scale(1.035); }
.media.is-placeholder { display: flex; align-items: center; justify-content: center; background:
  linear-gradient(135deg, transparent 49.6%, rgba(17,17,17,.06) 49.6%, rgba(17,17,17,.06) 50.4%, transparent 50.4%),
  linear-gradient(45deg, transparent 49.6%, rgba(17,17,17,.06) 49.6%, rgba(17,17,17,.06) 50.4%, transparent 50.4%),
  var(--bg-sand); }
.ph-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 88%; padding: 14px 16px; text-align: center; background: rgba(255,255,255,.88); border-radius: var(--radius); }
.ph-tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.ph-label { font-family: var(--f-head); font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.ph-brief { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.ph-file { font-size: 11px; color: var(--ink-3); word-break: break-all; }

/* ---------------- Page hero (sub-pages): light grey, text left / media right (V5: fewer dark heroes) ---------------- */
.page-hero { background: var(--bg-tint); color: var(--ink); padding: 48px 0 64px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.page-hero.no-media .page-hero-grid { grid-template-columns: 1fr; }
.page-hero h1 { max-width: 20ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 28px; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--line-2); }

/* ---------------- Quick facts (doc Home 02: icon strip) ---------------- */
.facts-wrap { background: #fff; border-bottom: 1px solid var(--line); }
.facts { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.fact { display: flex; gap: 12px; align-items: center; padding: 6px 16px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact .ico { color: var(--accent); width: 26px; height: 26px; }
.fact strong { display: block; font-family: var(--f-head); font-size: 20px; line-height: 1.05; }
.fact span { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }

/* ---------------- Grids & cards ---------------- */
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s, box-shadow .25s, transform .25s; }
.bg-white .card { background: var(--bg-tint); border-color: transparent; }
a.card:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.card .media { border-radius: 0; }
.card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card-body p { color: var(--ink-2); font-size: 15px; }
.card-body h3 { margin-bottom: 10px; }
.card-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: 18px; }
.card-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; }
.card-more .ico { width: 16px; height: 16px; transition: transform .2s; }
a:hover .card-more .ico { transform: translateX(4px); }
.card-num .card-body { padding: 28px; }
.bg-dark .card { background: var(--dark-2); border-color: rgba(255,255,255,.08); color: var(--on-dark); }
.bg-dark .card-body p { color: var(--on-dark-2); }

/* Chips & checks */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14.5px; font-weight: 500; background: #fff; }
.bg-white .chips li { background: var(--bg-tint); border-color: transparent; }
.checks { display: grid; gap: 14px 28px; }
.checks.cols-2 { grid-template-columns: repeat(2, 1fr); }
.checks.cols-3 { grid-template-columns: repeat(3, 1fr); }
.checks li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; }
.checks .ico { width: 20px; height: 20px; color: #fff; background: var(--accent); border-radius: 50%; padding: 3px; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-copy h2 { max-width: 20ch; }
.split + .split { margin-top: var(--section-y); }

/* Steps */
.steps-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; counter-reset: s; border-top: 2px solid var(--ink); }
.steps-track .step { padding: 22px 20px 0 0; position: relative; }
.steps-track .step::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg-tint); }
.bg-white .steps-track .step::before { box-shadow: 0 0 0 4px #fff; }
.step-num { display: block; font-family: var(--f-head); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.steps-track h3 { font-size: 20px; margin-bottom: 8px; }
.steps-track p { font-size: 14.5px; color: var(--ink-2); }
.bg-dark .steps-track { border-color: rgba(255,255,255,.3); }
.bg-dark .steps-track .step::before { box-shadow: 0 0 0 4px var(--dark); }

/* Fabric / technique cards */
.fabric-card, .tech-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.bg-white .fabric-card, .bg-white .tech-card { background: var(--bg-tint); border-color: transparent; }
.fabric-card .media, .tech-card .media { border-radius: 0; }
.fabric-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.fabric-body h3 { font-size: 21px; margin-bottom: 8px; }
.fabric-body p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 10px; }
.spec { margin: 0 0 18px; display: grid; gap: 0; font-size: 14px; }
.spec div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-weight: 600; color: var(--ink); }
.spec dd { margin: 0; color: var(--ink-2); }
.note { padding: 20px 24px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 15px; color: var(--ink-2); margin-top: 40px; }
.note b { color: var(--ink); }

/* Compatibility matrix */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.matrix th, .matrix td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th { font-family: var(--f-head); font-size: 15px; background: var(--bg-tint); }
.matrix td:first-child, .matrix th:first-child { text-align: left; font-weight: 600; position: sticky; left: 0; background: #fff; }
.matrix th:first-child { background: var(--bg-tint); }
.matrix tr:last-child td { border-bottom: 0; }

/* Fabric × product matrix (Fabrics & Technologies) — grouped rows, check badges */
.matrix--fabrics tbody tr:not(.matrix-group):hover td,
@media (max-width: 768px) {
}

/* ---------------- FAQ ---------------- */
.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq-side { position: sticky; top: calc(var(--sticky-top) + 8px); transition: top .35s var(--ease); }
.faq-layout .section-head { margin-bottom: 0; }
.faq-media { margin-top: 28px; max-width: 360px; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item:first-child { border-top: 1px solid var(--line-2); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left; font: 600 17px/1.4 var(--f-body); color: var(--ink); }
.faq-q:hover { color: var(--accent); }
.faq-ico { position: relative; flex: none; width: 18px; height: 18px; }
.faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.faq-ico::after { transform: rotate(90deg); }
.faq-item.is-open .faq-ico::after { transform: rotate(0); }
/* grid-rows animation — no max-height cap, long answers never get cut off */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-a > p { overflow: hidden; margin: 0; color: var(--ink-2); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { padding-bottom: 22px; }
.no-js .faq-a { grid-template-rows: 1fr; }

/* ---------------- CTA banner ---------------- */
.cta-banner { position: relative; padding: clamp(80px, 10vw, 140px) 0; background: var(--accent); color: #fff; overflow: hidden; }
.cta-banner.is-dark { background: var(--navy); }
.cta-media { position: absolute; inset: 0; opacity: .45; }
.cta-media .media { height: 100%; border-radius: 0; background: var(--dark-2); }
.cta-media .media.is-placeholder { background: var(--dark-2); }
.cta-media .ph-inner { display: none; }
/* Full-strength photo background (rx_cta $asset): cover-fit image under a dark scrim so the white copy stays legible */
.cta-banner.has-bg .cta-media { opacity: 1; }
.cta-banner.has-bg .cta-media .media { width: 100%; aspect-ratio: auto !important; }
.cta-banner.has-bg .cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cta-banner.has-bg .cta-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.68) 100%); }
.cta-inner { position: relative; max-width: 900px; text-align: center; }
.cta-banner h2 { font-size: clamp(28px, 3.4vw, 46px); max-width: 24ch; margin-left: auto; margin-right: auto; }
.cta-banner p { font-size: var(--fs-lede); color: rgba(255,255,255,.78); max-width: 620px; margin: 0 auto; }
.cta-banner .btn-row { justify-content: center; }
.cta-banner .btn-primary { background: var(--accent); color: #fff; }
.cta-banner .btn-primary:hover { background: #fff; color: var(--navy); }
.cta-banner:not(.is-dark) .btn-primary:hover { background: var(--ink); }

/* ---------------- Contact / forms ---------------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-methods { display: grid; gap: 18px; margin-top: 32px; }
.contact-methods li { display: flex; gap: 16px; align-items: flex-start; }
.contact-methods .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--accent); }
.contact-methods b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.contact-methods a, .contact-methods span { font-weight: 600; }
.contact-methods a:hover { color: var(--accent); }
.next-steps { display: grid; gap: 16px; }
.next-steps li { display: flex; gap: 16px; }
.next-steps .step-num { margin: 2px 0 0; }
.next-steps p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); }
.form-card h3 { margin-bottom: 4px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field .label { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; font: inherit; font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #d92d20; }
.hint { font-size: 12.5px; color: var(--ink-3); }
.hp { display: none !important; }
/* ⚠️ Must be `.file-field .file-input` (0,2,0). A single `.file-input` loses to
   `.field input{width:100%}` and the absolutely-positioned input overflows on mobile. */
.file-field { position: relative; }
.file-field .file-input { position: absolute; width: 1px; height: 1px; max-width: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; min-height: 0; }
.file-drop { display: flex; align-items: center; gap: 10px; padding: 18px; border: 1.5px dashed var(--line-2); border-radius: var(--radius); cursor: pointer; color: var(--ink-3); transition: border-color .2s, background .2s; }
.file-drop:hover, .file-input:focus-visible + .file-drop { border-color: var(--accent); background: var(--accent-soft); }
.file-drop .ico { color: var(--accent); }
.file-name { font-size: 14px; }
.file-name.has-file { color: var(--ink); font-weight: 600; }
.form-status { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); min-height: 1em; }
.form-status.is-error { color: #b42318; }

/* ---------------- Quote (step-by-step RFQ) ---------------- */
.quote-hero { position: relative; padding: 40px 0 72px; background: var(--bg-tint); }
.quote-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.quote-intro-media { margin-top: 28px; max-width: 420px; }
.quote-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow); }
.quote-nav { display: grid; gap: 4px; margin-top: 28px; max-width: 420px; }
.quote-nav li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; font-weight: 600; color: var(--ink-3); }
.quote-nav li .ico { width: 20px; height: 20px; }
.quote-nav li.is-current { background: #fff; color: var(--navy); box-shadow: inset 3px 0 0 var(--accent); }
.quote-nav li.is-done { color: var(--ink-2); }
.quote-progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 28px; }
.quote-progress span { display: block; height: 100%; width: 33.33%; background: var(--accent); transition: width .35s var(--ease); }
.q-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-step legend { padding: 0; margin-bottom: 6px; font-family: var(--f-head); font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.05; }
.q-step .q-kicker { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
.q-step .q-help { color: var(--ink-2); margin-bottom: 24px; }
.js-steps .q-step { display: none; }
.js-steps .q-step.is-active { display: block; animation: qIn .35s var(--ease); }
@keyframes qIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.no-js-steps .q-step + .q-step { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.choice-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-box { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: 20px 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius-lg); background: #fff; text-align: center; font-weight: 600; font-size: 15px; transition: border-color .2s, background .2s, box-shadow .2s; }
.choice-box .media { width: 100%; max-width: 120px; }
.choice-box .ph-inner { display: none; }
.choice-box .ico { width: 32px; height: 32px; color: var(--accent); }
.choice:hover .choice-box { border-color: var(--ink); }
.choice input:checked + .choice-box { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice input:focus-visible + .choice-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.q-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.q-actions .btn-back { visibility: hidden; }
.q-actions .btn-back.is-visible { visibility: visible; }
.q-error { display: none; margin-top: 16px; font-size: 14px; color: #b42318; }
.q-error.is-visible { display: block; }
.no-js-steps .q-actions .btn-next, .no-js-steps .q-actions .btn-back { display: none; }
.no-js-steps .q-actions { justify-content: flex-end; }
.js-steps .btn-submit { display: none; }
.js-steps.is-last .btn-submit { display: inline-flex; }
.js-steps.is-last .btn-next { display: none; }
.no-js-steps .quote-progress, .no-js-steps .quote-nav { display: none; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--dark); color: var(--on-dark-2); padding: 80px 0 32px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.site-footer .brand { color: #fff; }
.site-footer .brand .brand-sub { color: var(--on-dark-2); }
.site-footer h4 { font-size: 16px; letter-spacing: .1em; color: #fff; margin-bottom: 18px; }
.site-footer li { margin-bottom: 10px; }
.site-footer a:hover { color: #fff; }
.footer-brand p { margin: 18px 0 24px; max-width: 320px; }
.social-row { display: flex; gap: 12px; margin-top: 24px; }
.social-row a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: var(--on-navy); transition: background-color .2s, border-color .2s, color .2s; }
.social-row a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.social-row svg { width: 16px; height: 16px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; }
.footer-bottom nav { display: flex; gap: 20px; }
.float-wa { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .2s; }
.float-wa:hover { transform: scale(1.06); }
.float-wa svg { width: 28px; height: 28px; fill: currentColor; }

/* ---------------- Blog ---------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: border-color .2s, box-shadow .2s; }
.post-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.post-card-media { aspect-ratio: 16/9; background: var(--bg-sand); overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card .card-body time { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.pagination { margin-top: 48px; display: flex; gap: 8px; justify-content: center; }
.pagination .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--radius); font-weight: 600; }
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.container-narrow { max-width: 820px; }
.post-body { font-size: 17.5px; line-height: 1.75; }
.post-body h2 { font-size: 34px; margin-top: 48px; }
.post-body h3 { margin-top: 32px; }
.post-body ul, .post-body ol { padding-left: 1.3em; margin-bottom: 20px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body img { border-radius: var(--radius-lg); }
.post-cover { margin-bottom: 40px; }
.post-cover .media, .post-figure .media { border-radius: var(--radius-lg); overflow: hidden; }
.post-figure { margin: 32px 0 36px; }
.post-figure .media.is-portrait { max-width: 440px; }
.post-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.post-table { overflow-x: auto; margin: 8px 0 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.post-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 560px; }
.post-table th, .post-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.post-table th { font-family: var(--f-head); background: var(--bg-tint); }
.post-table tr:last-child td { border-bottom: 0; }
.post-table td:first-child { font-weight: 600; }
.post-cta { margin-top: 56px; padding: 36px; border-radius: var(--radius-lg); background: var(--bg-tint); }

/* ---------------- Reveal (scroll-reveal.js) ----------------
   Hidden state only applies when JS runs (html.js-reveal), so no-JS / crawler sees content. */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
/* Opening a page with #hash: the IO callback and scroll can land in the same frame,
   the transition never starts and content stays at opacity:0. Force-show targets. */
.js-reveal :target .reveal, .js-reveal :target.reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   V2 COMPONENTS
   ========================================================================== */
.hero-note { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 0; }
.hero-start { font-weight: 600; color: var(--ink); margin: -4px 0 0; }
.sub-head { margin: 64px 0 24px; }
.sub-head h3 { font-size: clamp(24px, 2.4vw, 32px); margin: 0; }
.card-list { display: grid; gap: 6px; margin: 4px 0 12px; }
.card-list li { position: relative; padding-left: 16px; font-size: 14.5px; color: var(--ink-2); }
.card-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.checks.cols-1 { grid-template-columns: 1fr; }
.spec-compact { font-size: 13.5px; margin-bottom: 12px; }
.spec-compact div { grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 0; }
.spec-compact dt { color: var(--ink-3); font-weight: 600; }

/* Category tiles (Home 03) */
.cat-tile { display: flex; flex-direction: column; background: var(--bg-tint); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.cat-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cat-tile .media { border-radius: 0; }
.cat-tile-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.cat-tile-body h3 { font-size: clamp(20px, 1.7vw, 24px); margin-bottom: 4px; }
.cat-use { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.cat-tile-body ul { display: grid; gap: 4px; margin-bottom: 14px; }
.cat-tile-body li { font-size: 14px; color: var(--ink-2); padding-left: 22px; position: relative; }
.cat-tile-body li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }
.cat-tile.is-accessory { background: #fff; border: 1.5px dashed var(--line-2); }
.cat-tile .card-more { color: var(--accent); }

/* Steps: output tag + vertical list */
.step-out { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.step-out b { display: inline-block; margin-right: 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps-list .step { background: var(--bg-tint); border-radius: var(--radius-lg); padding: 24px; }
.steps-list .step h3 { font-size: 22px; margin-bottom: 8px; }
.steps-list .step p { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; }
.steps-list .step-out { padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* Manufacturing strip + standard band (Home 09 / MF) */
.standard-band { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-top: 40px; padding: 32px 36px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.standard-band h2 { margin: 0; font-size: clamp(26px, 2.6vw, 36px); }
.standard-band p { margin: 0; color: var(--ink-2); }
.standard-band .eyebrow { margin-bottom: 8px; }
.section .standard-band:first-child { margin-top: 0; }

/* Client cards */
.card-client .card-tag { font-family: var(--f-head); font-size: 15px; }
.card-client h3 { font-size: 21px; }

/* Global regions */
.regions { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: 8px; }
.regions-map { position: relative; }
.map-origin { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-radius: var(--radius); font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }
.map-origin .ico { width: 18px; height: 18px; color: var(--accent); }
.regions-list ul { display: grid; gap: 18px; margin-top: 24px; }
.region-top { display: flex; justify-content: space-between; align-items: baseline; }
.region-top b { font-family: var(--f-head); font-size: 20px; }
.region-top span { font-family: var(--f-head); font-size: 28px; font-weight: 700; color: var(--accent); }
.bar { display: block; height: 6px; background: var(--line); border-radius: 6px; margin: 6px 0 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.regions-list p { font-size: 14px; color: var(--ink-2); margin: 0; }

/* Reviews + content placeholders */
.review-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; }
.bg-white .review-card { background: var(--bg-tint); border-color: transparent; }
.review-card blockquote { margin: 0 0 12px; font-size: 15px; }
.review-by { font-size: 13px; color: var(--ink-3); }
.content-ph strong { font-family: var(--f-head); font-size: 20px; }
.content-ph { padding: 32px; }

/* Custom Sportswear hub */
.activity-card .activity-products { font-weight: 600; color: var(--ink); font-size: 14px; }
.activity-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.activity-links a { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--accent); }
.activity-links a:hover { background: var(--accent); color: #fff; }

/* Text tables (comparison guide, claims, construction) */
.matrix--text { min-width: 820px; }
.matrix--text th, .matrix--text td { text-align: left; vertical-align: top; line-height: 1.5; }
.matrix--text thead th { font-size: 14px; }
.matrix--text tbody th { font-family: var(--f-body); font-size: 14.5px; text-transform: none; letter-spacing: 0; width: 18%; }
.matrix--text tbody th a { color: var(--accent); }
.matrix--text td { color: var(--ink-2); }

/* Category page modules */
.notes-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 72px); }

/* Customization */
.path-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .2s, box-shadow .25s; }
.path-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.path-card .media { border-radius: 0; }
.path-card h3 { font-size: 28px; }

/* QC, certificates, about */
.certs { display: flex; flex-wrap: wrap; gap: 20px; }
.cert { margin: 0; width: 200px; }
.cert figcaption { margin-top: 8px; font-weight: 600; font-size: 14px; }

/* Start a project */
.q-label { display: block; margin: 22px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.q-step legend + .q-help + .q-label { margin-top: 0; }
.choice-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.choice-box.is-compact { padding: 14px 10px; }
.check-inline { display: flex; align-items: center; gap: 10px; min-height: 50px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.check-inline input { width: 18px; height: 18px; min-height: 0; }
.quote-aside-note { margin-top: 28px; padding: 18px; background: var(--bg-tint); border-radius: var(--radius); font-size: 13.5px; }
.quote-aside-note p { margin: 6px 0 0; color: var(--ink-2); }
.contact-cta p { color: var(--ink-2); }

.footer-note { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.footer-sub { font-size: 13.5px; }

@media (max-width: 1440px) and (min-width: 1280px) {
  .nav-links > .nav-item > a, .nav-links > a { padding: 0 6px; font-size: 12.5px; letter-spacing: .02em; }
  .site-header .brand-name { display: none; }
}
@media (max-width: 1180px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; width: 100%; }
  .fact:nth-child(4) { border-left: 0; padding-left: 0; }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
}
@media (max-width: 1024px) {
  .regions, .standard-band, .notes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { border-left: 0; padding: 4px 0; }
  .review-grid { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: 1fr; }
  .spec-compact div { grid-template-columns: 1fr; gap: 2px; }
  .choice-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .cat-tile-body { padding: 14px; }
  .cat-tile-body li { font-size: 13px; }
  .cat-tile .ph-inner { display: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Laptops: header holds 7 nav items + CTA — drop the small wordmark suffix to keep side margins. */
.site-header .brand-sub { display: none; }   /* header is tight: wordmark logo only */

@media (max-width: 1279px) {
  :root { --header-h: 68px; }
  /* backdrop-filter would make the header the containing block of the fixed nav panel
     (panel collapses to header height) — so no filter on mobile. */
  .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-toggle { display: block; }
  .nav-cta .btn { display: none; }
  .nav-links { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px var(--gutter) 40px; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .3s var(--ease); visibility: hidden; }
  .nav-open .nav-links { transform: none; visibility: visible; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links > .nav-item > a, .nav-links > a { display: flex; width: 100%; height: auto; padding: 16px 0; font-size: 17px; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .nav-links > .nav-item > a::after, .nav-links > a::after { display: none; }
  .dropdown { position: static; width: auto; min-width: 0; transform: none !important; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 0 12px; display: none; }
  .nav-item.is-open > .dropdown { display: block; padding-bottom: 12px; }
  .nav-item.is-open .nav-caret { transform: rotate(225deg); }
  .nav-mobile-cta { display: block !important; margin-top: 24px; }

}

@media (max-width: 1024px) {
  .page-hero-grid, .split, .contact-grid, .faq-layout, .quote-wrap { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .faq-side { position: static; }
  .faq-media { display: none; }
  .quote-nav { display: none; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nav-mobile-cta { display: none; }

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .cols-2, .cols-3, .blog-grid { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tech-card .card-body { padding: 16px; }
  .tech-card .card-body p { font-size: 13.5px; }
  .checks.cols-3, .checks.cols-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .choice-grid, .choice-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .page-hero { padding: 32px 0 48px; }
  .q-actions .btn { flex: 1; padding: 0 16px; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .cols-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand { font-size: 24px; }
  .brand img { height: 40px; }
  .brand .brand-sub { display: none; }
}


/* ==========================================================================
   V4.3 COMPONENTS — doc §03 (light info surfaces / navy conversion surfaces)
   and §04 (layout & responsive rules: 360/390 baseline, 44px touch targets,
   no horizontal page scroll, one primary CTA per block).
   ========================================================================== */

/* ---------- Navy surfaces: development examples + closing CTA only (≈15%) ---------- */
.bg-navy { background: var(--navy); color: var(--on-navy); }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy .eyebrow { color: var(--navy-accent); }
.bg-navy .lede, .bg-navy p { color: var(--on-navy-2); }
.hero-note { margin: 18px 0 0; }
.bg-navy .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.bg-navy .btn-outline:hover { background: #fff; color: var(--navy); }
.bg-navy .media.is-placeholder {
  background:
    linear-gradient(135deg, transparent 49.6%, rgba(255,255,255,.12) 49.6%, rgba(255,255,255,.12) 50.4%, transparent 50.4%),
    var(--navy-2); }
.bg-navy .ph-inner { background: rgba(17,17,17,.85); }
.bg-navy .ph-label { color: var(--on-navy); }
.bg-navy .ph-tag { color: var(--navy-accent); }
.bg-navy .ph-brief, .bg-navy .ph-file { color: var(--on-navy-2); }

/* ---------- Quick facts: 4 compact items (doc HOME 02) ---------- */
.facts-wrap { background: #fff; border-bottom: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 24px 0; }
.fact { display: flex; gap: 14px; align-items: flex-start; padding: 4px 22px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact .ico { color: var(--accent); width: 26px; height: 26px; margin-top: 2px; }
.fact strong { display: block; font-family: var(--f-head); font-size: 19px; line-height: 1.1; margin-bottom: 4px; }
.fact span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* ---------- Category tiles + secondary accessories band ---------- */
.cat-tile-body p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 12px; }
.bg-tint .cat-tile { background: #fff; }
.acc-band { display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: center; margin-top: 24px; padding: 16px; background: #fff; border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); transition: border-color .2s; }
.bg-white .acc-band { background: var(--bg-tint); }
.acc-band:hover { border-color: var(--accent); }
.acc-band .ph-inner { display: none; }
.acc-band h3 { margin-bottom: 6px; font-size: 24px; }
.acc-band p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.acc-band .eyebrow { margin-bottom: 6px; }
.acc-band .card-more { color: var(--accent); padding: 0 12px 0 0; white-space: nowrap; }

/* ---------- Activity cards ---------- */
.activity-card { display: flex; flex-direction: column; background: var(--bg-tint); border-radius: var(--radius-lg); overflow: hidden; }
.bg-tint .activity-card { background: #fff; }
.activity-card .media { border-radius: 0; }
.activity-card h3 { font-size: 22px; margin-bottom: 8px; }
.activity-card p { font-size: 14.5px; color: var(--ink-2); }
.activity-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.activity-links a { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--accent); border: 1px solid var(--line); }
.bg-tint .activity-links a { background: var(--bg-tint); }
.activity-links a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Mini boards (HOME 04), section intros ---------- */
.card-mini-board .card-tag { font-family: var(--f-head); font-size: 14px; }
#collection > .container > .reveal:first-of-type, #collection .section-head + .reveal { margin-bottom: 24px; }
.split-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 40px; }
.split-head .section-head { margin-bottom: 0; }
.side-note { padding: 22px 24px; background: var(--bg-tint); border-radius: var(--radius-lg); }
.side-note h3 { font-size: 20px; margin-bottom: 6px; }
.side-note p { font-size: 14.5px; color: var(--ink-2); }
.section-narrow .container { max-width: 1000px; }

/* ---------- Real factory proof (HOME 05) ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.proof-media .media { aspect-ratio: 16/10 !important; border-radius: var(--radius-lg); }
.proof-copy h3 { font-size: 20px; margin: 24px 0 6px; }
.proof-copy p { color: var(--ink-2); }
.proof-details { margin-top: 16px; }
.proof-details .ph-inner { display: none; }

/* ---------- Development examples (navy band) ---------- */
.example-card { display: flex; flex-direction: column; background: var(--navy-2); border-radius: var(--radius-lg); overflow: hidden; }
.example-card .media { border-radius: 0; }
.example-card .card-tag { color: var(--navy-accent); }
.example-card .text-link { margin-top: auto; padding-top: 12px; color: #fff; }
.route { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 4px 0 8px; font-size: 13.5px; color: var(--on-navy-2); }
.route li { display: inline-flex; align-items: center; gap: 4px; }
.route li:not(:last-child)::after { content: "→"; color: var(--navy-accent); margin-left: 2px; }
.bg-white .route, .bg-tint .route { color: var(--ink-2); }
.example-note { margin: 18px 0 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-navy-2) !important; }
.example-step { margin: 0; }
.example-step figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-family: var(--f-head); font-size: 18px; color: #fff; }
.example-step .step-num { color: var(--navy-accent); margin: 0; }
.bg-navy .section-head .lede { max-width: 760px; }

/* ---------- Fabric preview scroller + library ---------- */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.scroller > * { scroll-snap-align: start; }
.fabric-card { display: flex; flex-direction: column; background: var(--bg-tint); border-radius: var(--radius-lg); overflow: hidden; border: 0; transition: box-shadow .25s, transform .25s; }
a.fabric-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.fabric-card .media { border-radius: 0; }
.fabric-body { padding: 18px 20px 20px; }
.fabric-body h3 { font-size: 20px; margin-bottom: 6px; }
.fabric-body p { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.fabric-card.is-full .fabric-body p { font-size: 14.5px; }
.fabric-card[hidden] { display: none; }
.use-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.use-tags li { padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--accent); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-bar button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font: 600 14px/1 var(--f-body); color: var(--ink); cursor: pointer; }
.filter-bar button:hover { border-color: var(--accent); color: var(--accent); }
.filter-bar button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Technique cards (two close-ups each) + HOME 08 quad ---------- */
.tech-card { display: flex; flex-direction: column; background: var(--bg-tint); border-radius: var(--radius-lg); overflow: hidden; border: 0; }
.bg-tint .tech-card { background: #fff; }
.tech-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tech-pair .media { border-radius: 0; }
.tech-pair .ph-label { font-size: 12px; }
.tech-card p { font-size: 14.5px; color: var(--ink-2); }
.tech-quad { display: grid; grid-template-columns: 1.1fr .9fr .9fr; grid-template-rows: auto auto; gap: 16px; align-items: stretch; }
.tech-quad-copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; padding-right: clamp(0px, 2vw, 32px); }
.tech-quad figure { margin: 0; }
.tech-quad .tq-1 { grid-column: 2; grid-row: 1 / span 2; }
.tech-quad .tq-1 .media { height: 100%; aspect-ratio: auto !important; min-height: 100%; }
.tech-quad .tq-2 { grid-column: 3; grid-row: 1; }
.tech-quad .tq-3 { grid-column: 3; grid-row: 2; }
.tech-quad .tq-4 { display: none; }
.tech-quad figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; }
@media (min-width: 1181px) {
  .tech-quad { grid-template-columns: 1.1fr .9fr .7fr .7fr; }
  .tech-quad .tq-3 { grid-column: 4; grid-row: 1; }
  .tech-quad .tq-4 { display: block; grid-column: 3 / span 2; grid-row: 2; }
  .tech-quad .tq-4 .media { aspect-ratio: 2/1 !important; }
}

/* ---------- Path cards (hub two-way entries) ---------- */
.path-grid { gap: 24px; }
.path-card { display: flex; flex-direction: column; background: var(--bg-tint); border: 0; border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.path-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.path-card .media { border-radius: 0; }
.path-card h3 { font-size: clamp(26px, 2.4vw, 34px); }
.path-card p { color: var(--ink-2); }
.path-card .card-more { color: var(--accent); }

/* ---------- Category signature module (doc §06) ----------
   Base: large technical visual + 2–4 decision points. Six layouts make the
   six category pages distinguishable at a glance. */
.tech-module { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.tm-visual { position: relative; }
.tm-visual .media { border-radius: var(--radius-lg); }
.tm-copy h2 { max-width: 18ch; }
.tm-points { display: grid; gap: 12px; margin-top: 8px; }
.tm-points li { display: flex; gap: 14px; padding: 16px 18px; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.tm-points .step-num { margin: 2px 0 0; flex: none; }
.tm-points b { display: block; font-family: var(--f-head); font-size: 18px;  }
.tm-points p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.tm-labels li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.tm-labels i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tm-labels span { padding: 3px 9px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); white-space: nowrap; }

/* tops — anatomy hotspots on the garment diagram */
.tm-anatomy .tm-labels { position: absolute; inset: 0; pointer-events: none; }
.tm-anatomy .tm-labels li { position: absolute; }
/* Each tag sits on the top corner of its detail inset in RX-C01-TECH (left column: top-left, right column: top-right). */
.tm-anatomy .tm-labels li:nth-child(1) { left: 4.2%; top: 3.8%; }                        /* Neckline — top-left inset */
.tm-anatomy .tm-labels li:nth-child(2) { right: 4.2%; top: 3.8%; flex-direction: row-reverse; }  /* Shoulder — top-right inset */
.tm-anatomy .tm-labels li:nth-child(3) { left: 4.2%; top: 38.4%; }                       /* Sleeve — left inset */
.tm-anatomy .tm-labels li:nth-child(4) { right: 4.2%; top: 38.4%; flex-direction: row-reverse; } /* Side / Back Panel — right inset */
.tm-anatomy .tm-labels li:nth-child(5) { left: 24.6%; top: 78.2%; }                      /* Stitch Line — bottom-centre inset */
.tm-anatomy .tm-labels li:nth-child(6) { right: 4.2%; top: 76.8%; flex-direction: row-reverse; } /* Hem — bottom-right inset */

/* hoodies — copy left; hood comparison strip + weight scale under the visual */
.tm-hood { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.tm-hood .tm-visual { order: 2; }
.tm-hood .tm-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tm-hood .tm-labels li { justify-content: center; padding: 12px 8px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.tm-hood .tm-labels span { box-shadow: none; padding: 0; white-space: normal; text-align: center; }
.tm-scale { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tm-scale i { flex: 1; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #e6e6e4, #808080 60%, #111111); }

/* jackets — exploded layer stack beside the visual */
.tm-layers .tm-visual { padding-right: 140px; }
.tm-layers .tm-labels { position: absolute; top: 8%; right: 0; bottom: 8%; width: 170px; display: grid; align-content: center; gap: 10px; }
.tm-layers .tm-labels li { padding: 14px 12px; background: var(--navy); color: #fff; border-radius: var(--radius); transform: translateX(calc(var(--i) * -10px)); box-shadow: var(--shadow); }
.tm-layers .tm-labels li:nth-child(2) { background: var(--navy-2); }
.tm-layers .tm-labels li:nth-child(3) { background: var(--accent); }
.tm-layers .tm-labels li:nth-child(4) { background: #fff; color: var(--ink); }
.tm-layers .tm-labels i { background: rgba(255,255,255,.18); }
.tm-layers .tm-labels li:nth-child(4) i { background: var(--accent); }
.tm-layers .tm-labels span { background: none; box-shadow: none; padding: 0; white-space: normal; }

/* shorts — full-width two-layer lab: outer | liner split, points in a row */
.tm-layer-lab { grid-template-columns: 1fr; }
.tm-layer-lab .tm-visual .media { aspect-ratio: 21/9 !important; }
.tm-layer-lab .tm-visual::after { content: ""; position: absolute; top: 12%; bottom: 12%; left: 50%; border-left: 2px dashed rgba(17,17,17,.4); }
.tm-layer-lab .tm-labels { position: absolute; top: 16px; left: 16px; right: 16px; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.tm-layer-lab .tm-labels li:nth-child(2) { justify-self: end; }
.tm-layer-lab .tm-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 48px; }
.tm-layer-lab .tm-copy .eyebrow, .tm-layer-lab .tm-copy h2, .tm-layer-lab .tm-copy .lede { grid-column: 1; }
.tm-layer-lab .tm-points { grid-column: 2; grid-row: 1 / span 3; }

/* pants — three-block silhouette comparison across the full width */
.tm-silhouette { grid-template-columns: 1fr; }
.tm-silhouette .tm-visual .media { aspect-ratio: 21/9 !important; }
.tm-silhouette .tm-labels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; }
.tm-silhouette .tm-labels li { align-items: flex-end; justify-content: center; padding-bottom: 18px; }
.tm-silhouette .tm-labels li + li { border-left: 2px solid rgba(255,255,255,.85); }
.tm-silhouette .tm-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 48px; }
.tm-silhouette .tm-copy .eyebrow, .tm-silhouette .tm-copy h2, .tm-silhouette .tm-copy .lede { grid-column: 1; }
.tm-silhouette .tm-points { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(3, 1fr); align-self: start; }
.tm-silhouette .tm-points li { flex-direction: column; }

/* sets — copy left; collection coordination board (2×2 rules) over the visual */
.tm-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.tm-board .tm-visual { order: 2; }
.tm-board .tm-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tm-board .tm-labels li { padding: 14px; background: var(--navy); color: #fff; border-radius: var(--radius); }
.tm-board .tm-labels span { background: none; box-shadow: none; padding: 0; white-space: normal; }
.tm-board .tm-labels i { background: var(--navy-accent); color: var(--navy); }

/* ---------- Category Fabric / Fit / Branding trio ---------- */
.trio-card { display: flex; flex-direction: column; background: var(--bg-tint); border-radius: var(--radius-lg); overflow: hidden; }
.trio-card .media { border-radius: 0; }
.trio-card h3 { font-size: 22px; }
.trio-card p { font-size: 14.5px; color: var(--ink-2); }
.trio-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: auto; padding-top: 8px; }
.fabric-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.fabric-links a { display: inline-flex; min-height: 32px; align-items: center; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.fabric-links a:hover { background: var(--accent); color: #fff; }

/* ---------- Production notes ---------- */
.notes-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 72px); }

/* ---------- Responsive matrix: table on desktop, cards on phones ---------- */
.rx-matrix { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.rx-matrix .matrix { min-width: 0; }
.rx-matrix + .acc-band { margin-top: 32px; }

/* ---------- Origin card (regions hidden until verified) ---------- */
.regions.is-origin-only { display: block; margin-bottom: 20px; }
.origin-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px 28px; background: var(--bg-tint); border-radius: var(--radius-lg); }
.origin-card .ico { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #fff; color: var(--accent); }
.origin-card b { display: block; font-family: var(--f-head); font-size: 22px; margin-bottom: 4px; }
.origin-card p { margin: 0; color: var(--ink-2); }

/* ---------- Client identity row (HOME 10) ---------- */
.client-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.client-row li { padding: 20px 20px 4px 0; }
.client-row li + li { padding-left: 20px; border-left: 1px solid var(--line-2); }
.client-row b { display: block; font-family: var(--f-head); font-size: 19px; line-height: 1.1; margin-bottom: 8px; }
.client-row p { font-size: 14px; color: var(--ink-2); margin: 0; }
.client-row + .btn-row { margin-top: 36px; }

/* ---------- Why RUIXING ---------- */
.why { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.why-list { display: grid; gap: 14px; counter-reset: why; }
.why-list li { position: relative; padding: 20px 22px 20px 64px; background: #fff; border-radius: var(--radius-lg); }
.why-list li::before { counter-increment: why; content: "0" counter(why); position: absolute; left: 22px; top: 20px; font-family: var(--f-head); font-weight: 700; color: var(--accent); }
.why-list b { display: block; font-family: var(--f-head); font-size: 20px; margin-bottom: 4px; }
.why-list p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- Milestones (How It Works): horizontal → vertical on phones ---------- */
.steps-milestones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.steps-milestones .step { position: relative; padding: 22px 18px 0 0; }
.steps-milestones .step::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #fff; }
.steps-milestones h3 { font-size: 20px; margin-bottom: 8px; }
.steps-milestones p { font-size: 14.5px; color: var(--ink-2); }
.steps-milestones .step-out { padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.steps-milestones + .btn-row { gap: 24px; margin-top: 40px; }

/* ---------- Product development workbench (alternating) ---------- */
.workbench { display: grid; gap: 20px; }
.wb-step { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: 20px; background: var(--bg-tint); border-radius: var(--radius-lg); }
.wb-step.reverse .wb-media { order: 2; }
.wb-body h3 { margin-bottom: 8px; }
.wb-body p { color: var(--ink-2); margin: 0; max-width: 560px; }

/* ---------- Brand system + application wall ---------- */
.brand-system { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.brand-system li { padding: 22px; background: var(--bg-tint); border-radius: var(--radius-lg); }
.brand-system b { display: block; font-family: var(--f-head); font-size: 19px; margin-bottom: 6px; }
.brand-system p { margin: 0; font-size: 14px; color: var(--ink-2); }
.app-wall { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.app-wall figure { margin: 0; }
.app-wall .aw-1 { grid-row: 1 / span 2; }
.app-wall .aw-1 .media { height: calc(100% - 28px); aspect-ratio: auto !important; }
.app-wall .aw-5 { grid-column: 2 / span 2; }
.app-wall .aw-5 .media { aspect-ratio: 2.1/1 !important; }
.app-wall figcaption { margin-top: 8px; font-size: 13px; font-weight: 600; }
.app-wall .aw-4 { display: none; }
@media (min-width: 1025px) {
  .app-wall { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .app-wall .aw-4 { display: block; }
  .app-wall .aw-5 { grid-column: 2 / span 3; }
}

/* ---------- Accessories page ---------- */
.acc-points { display: grid; gap: 0; margin: 8px 0 0; }
.acc-points div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.acc-points dt { font-family: var(--f-head); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.acc-points dd { margin: 0; color: var(--ink-2); }

/* ---------- Start a project ---------- */
.q-label small { font-weight: 500; color: var(--ink-3); }
.privacy-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.privacy-note a { color: var(--accent); text-decoration: underline; }
.choice-box.is-compact { justify-content: center; min-height: 52px; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .client-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .client-row li:nth-child(4) { padding-left: 0; border-left: 0; }
  .brand-system { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .tm-silhouette .tm-points { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .home-hero-grid, .quote-layout, .proof, .why, .split-head, .tech-module, .tm-hood, .tm-board, .notes-grid { grid-template-columns: 1fr; }
  .tm-hood .tm-visual, .tm-board .tm-visual { order: 0; }
  .tm-layer-lab .tm-copy, .tm-silhouette .tm-copy { grid-template-columns: 1fr; }
  .tm-layer-lab .tm-points, .tm-silhouette .tm-points { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .tech-quad { grid-template-columns: 1fr 1fr; }
  .tech-quad-copy { grid-column: 1 / -1; grid-row: auto; padding: 0 0 8px; }
  .tech-quad .tq-1 { grid-column: 1; grid-row: auto; }
  .tech-quad .tq-1 .media { aspect-ratio: 1/1 !important; height: auto; }
  .tech-quad .tq-2 { grid-column: 2; grid-row: auto; }
  .tech-quad .tq-3 { display: none; }
}
@media (max-width: 768px) {
  .home-hero-grid { gap: 28px; }
  .home-hero h1 { max-width: none; }
  .facts { grid-template-columns: 1fr; padding: 18px 0; }
  .fact { border-left: 0; padding: 4px 0; }
  .acc-band { grid-template-columns: 96px 1fr; }
  .acc-band .card-more { grid-column: 1 / -1; padding: 0; }
  .activity-grid { grid-template-columns: 1fr; }
  .client-row { grid-template-columns: 1fr; border-top-width: 1px; }
  .client-row li, .client-row li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .brand-system { grid-template-columns: 1fr; }
  .wb-step { grid-template-columns: 1fr; padding: 14px; }
  .wb-step.reverse .wb-media { order: 0; }
  .app-wall { grid-template-columns: 1fr 1fr; }
  .app-wall .aw-1 { grid-column: 1 / -1; grid-row: auto; }
  .app-wall .aw-1 .media { aspect-ratio: 16/9 !important; height: auto; }
  .app-wall .aw-4 { display: block; }
  .app-wall .aw-5 { grid-column: 1 / -1; }
  /* Milestones become a vertical timeline. */
  .steps-milestones { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); row-gap: 0; }
  .steps-milestones .step { padding: 0 0 28px 24px; }
  .steps-milestones .step::before { top: 4px; left: -7px; }
  /* Signature modules on phones: visual first, decision points stacked. */
  .tm-layers .tm-visual { padding-right: 0; }
  .tm-layers .tm-labels { position: static; width: auto; grid-template-columns: 1fr 1fr; margin-top: 12px; }
  .tm-layers .tm-labels li { transform: none; }
  .tm-anatomy .tm-labels span { display: none; }
  .tm-layer-lab .tm-visual .media, .tm-silhouette .tm-visual .media { aspect-ratio: 4/3 !important; }
  .tm-silhouette .tm-labels span { font-size: 11px; padding: 2px 6px; }
  .tm-hood .tm-labels { grid-template-columns: 1fr; }
  /* Matrix → stacked cards, no horizontal page scroll. */
  .rx-matrix { border: 0; background: none; }
  .rx-matrix thead { display: none; }
  .rx-matrix table, .rx-matrix tbody, .rx-matrix tr, .rx-matrix th, .rx-matrix td { display: block; width: 100%; }
  .rx-matrix tr { margin-bottom: 12px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .bg-white .rx-matrix tr { background: var(--bg-tint); border-color: transparent; }
  .rx-matrix th, .rx-matrix td { padding: 6px 0; border: 0; text-align: left; position: static; background: none !important; }
  .rx-matrix tbody th { font-family: var(--f-head); font-size: 19px; width: auto; }
  .rx-matrix td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .scroller { grid-auto-columns: 72%; }
  .quote-wrap { padding: 18px 16px; }
  .quote-intro-media { display: none; }
}

/* ==========================================================================
   V5 COMPONENTS — doc V5 §三 (home; V5.4 home styles are at the end of the file), §四 E (category layout),
   §五 (hub / sub-page layouts), §六 (visual difference from the jacket site:
   white staggered layouts, wide image + side note, annotated structure,
   not three/four-up grids everywhere). Phone: copy first, images after,
   tables become cards, CTA full width.
   ========================================================================== */
.sub-gap { height: 40px; }
.fm-label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.home-brief .btn-primary, .bg-navy .btn-primary { background: var(--accent); color: #fff; }
.bg-navy .btn-primary:hover { background: #fff; color: var(--navy); }

/* H01 movement-led hero: full-bleed scene, copy panel left */
.home-hero { position: relative; background: var(--bg-tint); overflow: hidden; }
.home-hero-media { position: absolute; inset: 0; }
.home-hero-media .media { width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.home-hero-media .ph-inner { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); max-width: 300px; }
.home-hero-inner { position: relative; display: flex; align-items: center; min-height: clamp(560px, 50vw, 720px); padding-top: 48px; padding-bottom: 48px; }
.home-hero-copy { max-width: 560px; padding: clamp(28px, 3vw, 44px); background: rgba(255,255,255,.95); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.home-hero h1 { font-size: var(--fs-display); margin-bottom: 18px; }
.home-hero .lede { font-size: 17px; }

/* H02 four unequal editorial tiles */

/* H03 collection: large outfit + staggered details */

/* H04 asymmetric 3 + 2 + 1 category collage */
.acc-band { grid-template-columns: 220px 1fr auto; }
.acc-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* H05 garment anatomy + five hotspots */
.move { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.move-visual { position: sticky; top: var(--sticky-top); }
.move-visual .media { border-radius: var(--radius-lg); background-color: #fff; }
.move-dots li { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 6px rgba(17,17,17,.15); }
.move-dots li:nth-child(1) { top: 26%; left: 34%; }
.move-dots li:nth-child(2) { top: 50%; left: 56%; }
.move-dots li:nth-child(3) { top: 62%; left: 40%; }
.move-dots li:nth-child(4) { top: 40%; left: 68%; }
.move-dots li:nth-child(5) { top: 86%; left: 60%; }
/* CU-04 shorts: dots follow the list order — 1 liner, 2 pocket, 3 waistband, 4 outer hem */
#movement .move-dots li:nth-child(1) { top: 62%; left: 40%; }
#movement .move-dots li:nth-child(2) { top: 26%; left: 34%; }
#movement .move-dots li:nth-child(3) { top: 40%; left: 68%; }
#movement .move-dots li:nth-child(4) { top: 80%; left: 70%; }

/* H06 use-case matrix / FABRICS hub use rows */
.fabric-matrix, .use-rows { border-top: 1px solid var(--line); margin-bottom: 8px; }
.fm-row, .use-row { display: grid; grid-template-columns: 180px 190px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.fm-row h3, .use-row h3 { margin: 0; font-size: 20px; }
.fm-row p, .use-row p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.fm-names a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.fm-names a:hover { text-decoration: underline; }
.use-row .ph-inner { display: none; }
.use-row .media { border-radius: var(--radius); }
.bg-tint .use-rows, .bg-tint .use-row { border-color: var(--line-2); }

/* H07 OEM / ODM lanes converging at the approved sample */
.lane-tag { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lane-steps { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.lane-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.lane-steps li:not(:last-child)::after { content: "→"; color: var(--ink-3); font-weight: 400; }

/* H08 manufacturing evidence */

/* H09 brief: form teaser + project board */
.brief { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.brief-label { margin: 24px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-accent) !important; }

/* Category: portrait hero, structure decisions, sourcing checklist */
.page-hero.is-portrait .page-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.page-hero.is-portrait .page-hero-media { width: 100%; max-width: 440px; justify-self: end; }
.page-hero .media { border-radius: var(--radius-lg); }
.decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.decision { background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.decision .media { border-radius: 0; }
.decision h3 { margin-bottom: 6px; }
.decision p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.tm-points li { align-items: center; }
.tm-points .step-num { margin: 0; }
.checklist { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.checklist-items { columns: 2; column-gap: 32px; }
.checklist-items li { position: relative; break-inside: avoid; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--line); font-size: 15px; }
.checklist-items li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border: 2px solid var(--accent); border-radius: 3px; }
.checklist-side { padding: 24px; background: var(--bg-tint); border-radius: var(--radius-lg); }
.checklist-side p { font-size: 14.5px; color: var(--ink-2); }
.checklist-side .btn-row { margin-top: 12px; }

/* Products hub: full-width staggered category flow */
.cat-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; align-items: start; }
.cat-flow > :nth-child(3n+2) { margin-top: 64px; }
.cat-flow > :nth-child(3n) { margin-top: 32px; }

/* Customization hub: brief board left, two paths right */
.brief-board { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.brief-card { position: sticky; top: var(--sticky-top); padding: clamp(24px, 3vw, 36px); background: var(--bg-tint); border-radius: var(--radius-lg); }
.brief-list { display: grid; gap: 12px; margin: 20px 0 4px; }
.brief-list li { padding: 12px 14px; background: #fff; border-radius: var(--radius); font-size: 14.5px; color: var(--ink-2); }
.brief-list b { display: block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.brief-paths .path-grid { grid-template-columns: 1fr; }
.brief-paths .path-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.brief-paths .path-card .card-body { display: flex; flex-direction: column; justify-content: center; }

/* Manufacturing hub stage ribbon */
.stage-ribbon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; margin-top: 20px; }
.stage-ribbon a { display: flex; align-items: baseline; gap: 10px; min-height: 52px; padding: 14px 0; border-top: 2px solid var(--line); font-weight: 600; font-size: 15px; transition: border-color .2s, color .2s; }
.stage-ribbon a:hover { border-color: var(--accent); color: var(--accent); }
.stage-ribbon .step-num { margin: 0; }

/* How It Works board extras */
.step-in b { color: var(--navy) !important; }
.step-flag { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.step.is-approval .step-num { color: var(--navy); }

/* About editorial */
.editorial { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.editorial-media .media { border-radius: var(--radius-lg); }
.editorial-list li { display: grid; grid-template-columns: 48px 1fr; padding: 18px 0; border-top: 1px solid var(--line); }
.editorial-list h3 { margin-bottom: 4px; }
.editorial-list p { margin: 0; color: var(--ink-2); }
.support-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.support-cols > div { padding-top: 18px; border-top: 2px solid var(--navy); }
.support-cols p { color: var(--ink-2); margin: 0; }
.support-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; margin-top: 40px; }
.support-media .media { border-radius: var(--radius-lg); }

@media (max-width: 1024px) {
  .look, .move, .brief, .brief-board, .editorial, .checklist { grid-template-columns: 1fr; }
  .move-visual, .brief-card { position: static; }
  .move-visual { max-width: 520px; }
  .fm-row, .use-row { grid-template-columns: 160px minmax(0, 1fr); gap: 10px 24px; }
  .fm-row > .fm-strip, .use-row > .media { grid-row: span 3; align-self: start; }
  .fm-row > :nth-child(n+2), .use-row > :nth-child(n+2) { grid-column: 2; }
  .stage-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decisions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* H01: copy first, then a 4:5 crop — no overlay on faces */
  .home-hero { display: flex; flex-direction: column-reverse; }
  .home-hero-media { position: relative; }
  .home-hero-media .media { aspect-ratio: 4/5 !important; height: auto; }
  .home-hero-media .ph-inner { position: relative; right: auto; top: auto; transform: none; }
  .home-hero-inner { min-height: 0; padding-top: 28px; padding-bottom: 28px; }
  .home-hero-copy { padding: 0; background: none; box-shadow: none; max-width: none; }
  .home-hero .btn-row .btn { flex: 1 1 0; }
  /* H03 horizontal story stack; H04 swipeable groups */
  .acc-band { grid-template-columns: 1fr; }
  .acc-imgs { max-width: 240px; }
  /* H05 vertical annotated detail panels */
  .move-visual { display: none; }
  /* H06 / hub rows -> stacked decision cards */
  .fabric-matrix, .use-rows { border: 0; }
  .fm-row, .use-row { grid-template-columns: 1fr; gap: 10px; padding: 16px; margin-bottom: 12px; background: var(--bg-tint); border: 0; border-radius: var(--radius-lg); }
  .bg-tint .use-row { background: #fff; }
  .fm-row > .fm-strip, .use-row > .media { grid-row: auto; }
  .fm-row > :nth-child(n+2), .use-row > :nth-child(n+2) { grid-column: auto; }
  /* H07 sequential lane cards */
  /* H08 one photograph + proof checklist */
  /* H09 full-width CTA + accepted files */
  .home-brief .btn-row .btn { flex: 1 1 100%; }
  /* category / hubs */
  .page-hero.is-portrait .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero.is-portrait .page-hero-media { justify-self: start; max-width: 360px; }
  .decisions, .support-cols { grid-template-columns: 1fr; gap: 16px; }
  .checklist-items { columns: 1; }
  .checklist-side .btn { width: 100%; }
  .cat-flow { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cat-flow > :nth-child(n) { margin-top: 0; }
  .cat-flow > :nth-child(2n) { margin-top: 28px; }
  .brief-paths .path-card { display: flex; flex-direction: column; }
  .stage-ribbon { grid-template-columns: 1fr; }
  .support-media { grid-template-columns: 1fr; }
  .cta-banner .btn-row .btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .cat-flow { grid-template-columns: 1fr; }
  .cat-flow > :nth-child(2n) { margin-top: 0; }
}
.move-visual .ph-inner { position: absolute; left: 16px; bottom: 16px; }
/* Diagram index as compact chips — the three structure decisions below carry the detail */
.tech-module .tm-points { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; align-self: start; align-content: flex-start; }
.tech-module .tm-points li { display: inline-flex; gap: 8px; padding: 8px 14px; margin: 0; border-radius: 999px; }
.tech-module .tm-points b { font-size: 14px; }
/* Header: the eight-item nav needs a little more room than the 1280px content width */
.site-header > .container { max-width: 1400px; }
.nav-cta .btn { font-size: 13.5px; padding: 0 18px; }
.nav-row { gap: 12px; }
.nav-links > .nav-item > a, .nav-links > a { letter-spacing: .02em; }
@media (max-width: 1440px) and (min-width: 1181px) {
  .nav-links > .nav-item > a, .nav-links > a { padding: 0 5px; letter-spacing: 0; }
  .site-header .brand img { height: 44px; }
}
/* V5.2 nav: no "Overview" duplicates — parent title links to the hub; on mobile a separate toggle opens the submenu */
.nav-sub-toggle { display: none; }
@media (max-width: 1279px) {
  .nav-item.has-dropdown { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: stretch; }
  .nav-item.has-dropdown > a .nav-caret { display: none; }
  .nav-item.has-dropdown > .dropdown { grid-column: 1 / -1; }
  .nav-sub-toggle { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
  .nav-sub-toggle:focus-visible { outline-offset: -3px; }
  .nav-item.is-open .nav-sub-toggle .nav-caret { transform: rotate(225deg); }
}

/* ==========================================================================
   V5.2 SPECIALIST PAGES (inc/hubs.php) — Customization, Fabrics & Technologies,
   How It Works, Manufacturing, About. Six layouts so consecutive modules never
   repeat the same card grid; phones: copy first, tables → cards, CTA full width.
   ========================================================================== */
.hub .section-head { margin-bottom: 32px; }
.hub-copy .section-head { margin-bottom: 20px; }
.hub-copy .lede { font-size: 16.5px; }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--line-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.pill.is-ok { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.bg-tint .pill { background: #fff; }
.hub-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.hub .media { border-radius: var(--radius-lg); }

/* split: copy 55 / media 45 */
.hub-split-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hub-split-grid.is-reverse > .hub-copy { order: 2; }
.hub-split-grid.is-wide { grid-template-columns: 1fr; }
.hub-split-grid.is-wide .hub-copy .section-head { max-width: 820px; }
.hub-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 4px 0 8px; }
.hub-list li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); font-size: 15px; }
.hub-list li::before { content: "✓"; position: absolute; left: 2px; top: 10px; color: var(--accent); font-weight: 800; }
.bg-tint .hub-list li { border-color: var(--line-2); }
.hub-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; border-top: 2px solid var(--navy); }
.hub-chain li { position: relative; padding: 12px 12px 0 0; font-weight: 700; font-size: 15px; }
.hub-chain li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.hub-chain .step-num { margin: 0 0 2px; }
.hub-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.hub-link { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, box-shadow .2s; }
.bg-white .hub-link { background: var(--bg-tint); border-color: transparent; }
.hub-link:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.hub-link b { font-family: var(--f-head); font-size: 19px; }
.hub-link span { grid-column: 1; font-size: 14px; color: var(--ink-2); }
.hub-link .ico { grid-row: 1 / span 2; grid-column: 2; color: var(--accent); }

/* flow: lanes → merge */
.hub-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .36fr); gap: 18px 48px; align-items: center; margin-bottom: 8px; }
.hub-flow-grid:has(.hub-flow-media) { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(200px, .34fr); }
.hub-lanes { display: grid; gap: 16px; }
.hub-lane { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px; background: #fff; border-radius: var(--radius-lg); border-left: 4px solid var(--accent); }
.bg-white .hub-lane { background: var(--bg-tint); }
.hub-lane:nth-child(2) { border-left-color: var(--navy); }
.hub-lane:not(:has(.media)) { grid-template-columns: 1fr; }
.hub-lane::after { content: ""; position: absolute; right: -40px; top: 50%; width: 30px; border-top: 2px dashed var(--line-2); }
.hub-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.hub-steps li { position: relative; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.hub-steps .step-num { margin-bottom: 4px; }
.hub-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 0; color: var(--ink-3); font-weight: 400; }
.hub-merge { padding: 22px; background: var(--navy); color: var(--on-navy); border-radius: var(--radius-lg); }
.hub-merge b { display: block; font-family: var(--f-head); font-size: 22px; color: #fff; margin-bottom: 6px; }
.hub-merge p { margin: 0; font-size: 14px; color: var(--on-navy-2); }
.hub-signoff .hub-steps li { padding: 14px 14px 14px 40px; background: #fff; border-radius: var(--radius); }
.bg-white.hub-signoff .hub-steps li { background: var(--bg-tint); }
.hub-signoff .hub-steps li::before { content: "✓"; position: absolute; left: 14px; top: 14px; color: var(--accent); font-weight: 800; }
.hub-signoff .hub-steps .step-num { display: none; }
.hub-signoff .hub-lane { padding: 0; background: none !important; border: 0; }
.hub-signoff .hub-lane .lane-tag { display: none; }
.hub-comments .hub-lane { border-left-color: var(--accent); }

/* tiles */
.hub-tiles { display: grid; gap: 20px; margin-bottom: 8px; }
.hub-tiles.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-tiles.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-tile { margin: 0; }
.hub-tile figcaption { margin-top: 12px; }
.hub-tile figcaption b { display: block; font-family: var(--f-head); font-size: 19px; margin-bottom: 2px; }
.hub-tile figcaption span:not(.card-tag) { display: block; font-size: 14.5px; color: var(--ink-2); }
.hub-stagger .hub-tile:nth-child(2) { margin-top: 40px; }
.hub-stagger .hub-tile:nth-child(3) { margin-top: 80px; }
.hub-stagger .hub-tiles.n-4 .hub-tile:nth-child(3) { margin-top: 20px; }
.hub-stagger .hub-tiles.n-4 .hub-tile:nth-child(4) { margin-top: 60px; }
.hub-evidence .hub-tile { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bg-white.hub-evidence .hub-tile { background: var(--bg-tint); border-color: transparent; }
.hub-evidence .hub-tile .media { border-radius: var(--radius); }
.hub-roles .hub-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hub-roles .hub-center { grid-column: 1 / -1; order: 2; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 14px; background: var(--navy); color: #fff; border-radius: var(--radius-lg); text-align: center; position: relative; }
.hub-roles .hub-center b { font-family: var(--f-head); font-size: 20px; }
.hub-roles .hub-tile { order: 1; }
.hub-roles .hub-tile figcaption { text-align: center; }
.hub-roles .hub-tile figcaption::after { content: "↓"; display: block; margin-top: 4px; color: var(--accent); font-weight: 700; }
.hub-scenarios .hub-tile { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.bg-white.hub-scenarios .hub-tile { background: var(--bg-tint); }
.hub-scenarios .hub-tile .media { border-radius: 0; }
.hub-scenarios .hub-tile figcaption { margin: 0; padding: 18px 20px 22px; }
.hub-principles .hub-tile { display: grid; grid-template-rows: auto 1fr; }
.hub-principles .hub-tile figcaption b { font-size: clamp(26px, 2.6vw, 34px); color: var(--navy); }

/* table: copy + media left, decision table right */
/* copy + table + CTA in one column, image in the other (centred) — the two sides balance */
.hub-table-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hub-table-grid.is-flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.hub-table-grid.is-flip .hub-table-media { order: -1; }
.hub-table-side .section-head { margin-bottom: 24px; }
.hub-table-side .rx-matrix { margin: 0; }
.hub-table-side .btn-row { margin-top: 20px; }
.hub-table-media .media { border-radius: var(--radius-lg); }
/* is-sticky-media: the image holds still under the header while the copy and table scroll past; it leaves with the module. */
.hub-table-grid.is-sticky-media { align-items: start; }
.hub-table-grid.is-sticky-media .hub-table-media { position: sticky; top: var(--sticky-top); transition: top .35s var(--ease); }
.hub-claims .rx-matrix td:last-child { color: var(--ink-2); }
.hub-reference .rx-matrix td { text-align: center; color: var(--accent); font-weight: 800; }

/* compare: two swatches */
.hub-compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hub-compare-card { padding: 24px; background: #fff; border-radius: var(--radius-lg); }
.bg-white .hub-compare-card { background: var(--bg-tint); }
.hub-swatches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.hub-swatches figure { margin: 0; }
.hub-swatches figcaption { margin-top: 8px; font-weight: 700; text-align: center; }
.hub-badge { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 8px 14px; background: var(--navy); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hub-params { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-params li { padding: 8px 12px; background: var(--bg-tint); border-radius: 999px; font-size: 14px; font-weight: 600; }
.bg-white .hub-params li { background: #fff; }

/* look: image with numbered markers + point list */
.hub-look-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hub-look-visual { position: relative; max-width: 480px; }
.hub-look-visual .ph-inner { position: absolute; left: 16px; bottom: 16px; }
.hub-points { display: grid; gap: 0; margin-bottom: 8px; border-top: 1px solid var(--line-2); }
.hub-points li { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-family: var(--f-head); font-weight: 700; font-size: 18px; }
.hub-points .step-num { margin: 0; min-width: 28px; }

@media (max-width: 1024px) {
  .hub-split-grid, .hub-table-grid, .hub-table-grid.is-flip, .hub-compare-grid, .hub-look-grid { grid-template-columns: 1fr; }
  .hub-table-grid.is-flip .hub-table-media { order: 0; }
  .hub-table-grid.is-sticky-media .hub-table-media { position: static; }
  .hub-table-media { max-width: 560px; }
  .hub-split-grid.is-reverse > .hub-copy { order: 0; }
  .hub-flow-grid, .hub-flow-grid:has(.hub-flow-media) { grid-template-columns: 1fr; }
  .hub-flow-media { max-width: 480px; }
  .hub-lane::after { display: none; }
  .hub-tiles.n-4, .hub-roles .hub-tiles { grid-template-columns: 1fr 1fr; }
  .hub-stagger .hub-tile:nth-child(n) { margin-top: 0; }
  .hub-look-visual { max-width: 420px; }
}
@media (max-width: 768px) {
  .hub-list, .hub-links { grid-template-columns: 1fr; }
  .hub-chain { grid-template-columns: 1fr 1fr; gap: 12px 0; }
  .hub-lane { grid-template-columns: 1fr; }
  .hub-lane .media { max-width: 240px; }
  .hub-steps { grid-auto-flow: row; gap: 10px; }
  .hub-steps li:not(:last-child)::after { content: "↓"; position: static; display: block; margin-top: 4px; }
  .hub-signoff .hub-steps li:not(:last-child)::after { display: none; }
  .hub-tiles.n-3, .hub-tiles.n-4, .hub-roles .hub-tiles { grid-template-columns: 1fr; }
  .hub-roles .hub-center { order: 0; }
  .hub-roles .hub-tile figcaption::after { display: none; }
  .hub-tile .media { max-height: none; }
  .hub-principles .hub-tile { grid-template-columns: 110px 1fr; grid-template-rows: auto; gap: 16px; align-items: center; }
  .hub-principles .hub-tile:nth-child(even) { grid-template-columns: 1fr 110px; }
  .hub-principles .hub-tile:nth-child(even) .media { order: 2; }
  .hub-principles .hub-tile figcaption { margin: 0; }
  .hub-principles .hub-tile .ph-inner { display: none; }
  .hub-swatches .ph-inner, .hub-tiles .hub-tile .ph-label { font-size: 13px; }
  .hub .btn-row .btn { flex: 1 1 100%; }
}
.hub-signoff .hub-steps { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-signoff .hub-steps li:not(:last-child)::after { display: none; }


/* ==========================================================================
   V5.4 HOME — thirteen modules (front-page.php). Each module has its own
   layout: unequal activity strip, 3 × 2 mosaic, factory proof, evidence
   staircase, client columns, annotated collection look, line-annotated
   details, activity × fabric columns, branch diagram, brief board.
   Phone: copy first, images after, tables → cards, CTA full width.
   ========================================================================== */
.section-head + .btn-row, .btn-row + .arrow-link { margin-top: 8px; }
.btn-row + .arrow-link { display: inline-flex; margin-left: 4px; }

/* H01 — navy translucent title panel over the scene */
.home-hero-copy { background: rgba(17,17,17,.9); color: var(--on-navy); box-shadow: none; }
.home-hero-copy h1 { color: #fff; }
.home-hero-copy .eyebrow { color: var(--navy-accent); }
.home-hero-copy .lede { color: var(--on-navy-2); }
.home-hero-copy .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.home-hero-copy .btn-outline:hover { background: #fff; color: var(--navy); }
.home-hero-copy .btn-primary:hover { background: #fff; color: var(--navy); }

/* H02 — four unequal horizontal panels; use note revealed on hover / focus */
.activity-strip { display: grid; grid-template-columns: 1.3fr 1fr 1.15fr .9fr; gap: 14px; margin-bottom: 28px; }
.act-panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy); outline-offset: 3px; }
.act-panel .media { height: 100%; aspect-ratio: auto !important; min-height: 440px; border-radius: 0; }
.act-panel .ph-inner { top: 16px; bottom: auto; }
.act-body { position: absolute; inset: auto 0 0 0; padding: 22px; background: linear-gradient(to top, rgba(17,17,17,.94) 40%, rgba(17,17,17,0)); color: #fff; }
.act-body h3 { margin: 0; color: #fff; font-size: 22px; }
.act-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.act-more > * { overflow: hidden; }
.act-more p { margin: 10px 0 12px; font-size: 14px; color: var(--on-navy-2); }
.act-panel:hover .act-more, .act-panel:focus-within .act-more { grid-template-rows: 1fr; }
.act-more > div { display: block; }
.act-panel .activity-links a { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.act-panel .activity-links a:hover { background: var(--accent); }
.act-more .activity-links { display: flex; padding-bottom: 2px; }
@media (hover: none) { .act-more { grid-template-rows: 1fr; } }

/* H03 — asymmetric 3 × 2 mosaic on a 12-col grid: row 1 = 4/4/4, row 2 = 3/3/6 (sets spans two) */
.cat-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.cat-mosaic > .cat-tile { grid-column: span 4; background: #fff; }
.cat-mosaic > .mosaic-shorts, .cat-mosaic > .mosaic-pants { grid-column: span 3; }
.cat-mosaic > .mosaic-sets { grid-column: span 6; }
.cat-mosaic .cat-tile-body { padding: 16px 18px 18px; }
.cat-mosaic .cat-tile-body h3 { margin-bottom: 4px; }
.cat-mosaic .cat-tile-body p { margin: 0; }
.acc-imgs.is-single { grid-template-columns: 1fr; }
.bg-tint .acc-band { background: #fff; }

/* H04 — wide factory image + three small process cards (light, not a stats wall) */
.factory-proof { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; margin-bottom: 28px; }
.factory-main .media { height: 100%; aspect-ratio: auto !important; min-height: 360px; border-radius: var(--radius-lg); }
.factory-cards { display: grid; gap: 14px; }
.factory-cards li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px; background: var(--bg-tint); border-radius: var(--radius-lg); }
.factory-cards .media { border-radius: var(--radius); }
.factory-cards .ph-inner { display: none; }
.factory-cards b { display: block; font-family: var(--f-head); font-size: 18px; margin-bottom: 4px; }
.factory-cards span { display: block; font-size: 14px; color: var(--ink-2); }

/* H05 — four evidence items as a horizontal staircase */
.why-stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; margin-bottom: 28px; }
.why-stairs li { padding: 12px 12px 20px; background: #fff; border-radius: var(--radius-lg); }
.why-stairs li:nth-child(2) { margin-top: 36px; }
.why-stairs li:nth-child(3) { margin-top: 72px; }
.why-stairs li:nth-child(4) { margin-top: 108px; }
.why-stairs .media { margin-bottom: 14px; border-radius: var(--radius); }
.why-stairs .step-num, .why-stairs h3, .why-stairs p, .why-stairs .arrow-link { margin-left: 6px; margin-right: 6px; }
.why-stairs h3 { margin-bottom: 6px; }
.why-stairs p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 10px; }

/* H06 — four people / product context columns */
.client-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.client-cols figure { margin: 0; }
.client-cols .media { border-radius: var(--radius-lg); }
.client-cols figcaption { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--navy); }
.client-cols b { display: block; font-family: var(--f-head); font-size: 18px; margin-bottom: 4px; }
.client-cols span { display: block; font-size: 14.5px; color: var(--ink-2); }

/* H07 — wide three-piece look + collection-consistency annotations */
.coord { margin-bottom: 28px; }
.coord-visual { position: relative; }
.coord-visual .media { border-radius: var(--radius-lg); }
.coord-visual .ph-inner { position: absolute; left: 16px; bottom: 16px; }
.coord-dots li { position: absolute; display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: #fff; color: var(--navy); font-weight: 800; font-size: 13px; box-shadow: 0 0 0 4px rgba(17,17,17,.18); transition: background .2s, color .2s, transform .2s; }
.coord-dots li.is-active { background: var(--accent); color: #fff; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(17,17,17,.2); }
.coord-dots li:nth-child(1) { top: 30%; left: 21%; }   /* Fit Proportions — jacket body */
.coord-dots li:nth-child(2) { top: 84%; left: 22%; }   /* Material Behavior — mesh fabric */
.coord-dots li:nth-child(3) { top: 57%; left: 88%; }   /* Colorways — olive panel on shorts */
.coord-dots li:nth-child(4) { top: 22%; left: 63.3%; } /* Artwork Placement — chest logo on tee */
.coord-dots li:nth-child(5) { top: 75%; left: 47%; }   /* Trims — drawcord on pants */
.coord-dots li:nth-child(6) { top: 78%; left: 65%; }   /* Size Ranges — pants length */
.coord-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.coord-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; height: 100%; min-height: 44px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.coord-item:hover, .coord-item.is-active { border-color: var(--accent); box-shadow: var(--shadow); }
.coord-item .step-num { margin: 0; }
.coord-item b { font-family: var(--f-head); font-size: 15.5px; }
.coord-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }

/* H08 — action photo + line-annotated structure details */
.anno-list { display: grid; gap: 16px; margin-bottom: 24px; }
.anno-list li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; }
.anno-media { position: relative; }
.anno-media .media { border-radius: var(--radius-lg); }
.anno-media .ph-inner { display: none; }
.anno-call { position: absolute; right: 12px; top: 14px; padding: 5px 10px; background: var(--navy); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.anno-call::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 46px; background: var(--navy); }
.anno-call::before { content: ""; position: absolute; left: calc(50% - 4px); top: calc(100% + 44px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff; }
.anno-list b { display: block; font-family: var(--f-head); font-size: 19px; margin: 2px 0 4px; }
.anno-list p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* H09 — activity × fabric decision columns */
.fabric-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fabric-col { background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.fabric-col .media { border-radius: 0; }
.fabric-col h3 { margin-bottom: 12px; }
.fabric-col dl { margin: 0; }
.fabric-col dt { margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fabric-col dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.fabric-col dd:last-child { border-bottom: 0; padding-bottom: 0; }
.claims-note { margin: 16px 0 24px; font-size: 13.5px; color: var(--ink-3); }

/* H10 — left / right branches meeting at sample approval */
.branch { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 40px; margin-bottom: 28px; }
.branch-lane { position: relative; background: var(--bg-tint); border-radius: var(--radius-lg); overflow: hidden; border-top: 4px solid var(--accent); }
.branch-lane.lane-odm { border-top-color: var(--navy); }
.branch-lane .media { border-radius: 0; }
.branch-lane p { font-size: 14.5px; color: var(--ink-2); }
.branch-lane.lane-odm .lane-tag { color: var(--navy); }
.branch-lane::after { content: ""; position: absolute; bottom: -34px; width: 2px; height: 34px; background: var(--line-2); }
.branch-lane.lane-oem::after { right: 25%; } .branch-lane.lane-odm::after { left: 25%; }
.lane-steps { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.lane-steps li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.lane-steps li:not(:last-child)::after { content: "→"; color: var(--ink-3); font-weight: 400; }
.branch-merge { position: relative; grid-column: 1 / -1; justify-self: center; width: min(520px, 100%); padding: 22px 26px; background: var(--navy); color: var(--on-navy); border-radius: var(--radius-lg); text-align: center; }
.branch-merge::before { content: ""; position: absolute; left: 25%; right: 25%; top: -30px; border-top: 2px solid var(--line-2); }
.branch-merge .lane-tag { color: var(--navy-accent); margin-bottom: 2px; }
.branch-merge b { display: block; font-family: var(--f-head); font-size: 24px; color: #fff; }
.branch-merge p { margin: 6px 0 0; font-size: 14px; color: var(--on-navy-2); }

/* H11 — brief → three decisions → coordinated result (navy board) */
.brief-flow { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: 20px; align-items: stretch; }
.bf-col { position: relative; padding: 20px; background: var(--navy-2); border-radius: var(--radius-lg); }
.bf-col:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--navy-accent); font-weight: 700; font-size: 18px; }
.bf-col h3 { margin: 14px 0 6px; font-size: 20px; }
.bf-col p { margin: 0; font-size: 14.5px; }
.bf-brief .media, .bf-decisions .media { border-radius: var(--radius); }
.concept-badge { display: inline-block; margin-bottom: 12px; padding: 5px 10px; border: 1px dashed var(--navy-accent); border-radius: 999px; color: var(--navy-accent); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bf-decisions { display: grid; gap: 12px; }
.bf-decisions li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.bf-decisions .ph-inner { display: none; }
.bf-decisions .step-num { margin: 0; color: var(--navy-accent); }
.bf-decisions b { display: block; color: #fff; font-family: var(--f-head); font-size: 16.5px; }
.bf-result { display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255,255,255,.3); }
.bf-result h3 { margin-top: 0; }
.bf-result .btn-row { margin-top: 18px; }

#movement .move-visual .media { background-color: var(--bg-tint); }
.act-panel .ph-inner { position: absolute; top: 16px; left: 16px; }
.bf-col .media.is-placeholder { background-color: rgba(255,255,255,.07); }
.bf-result .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-top: 12px; padding-bottom: 12px; height: auto; }

/* H12 — inquiry entry under the FAQ */
.faq-entry { margin: 20px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* H13 — short project form on navy */
.home-form { padding: clamp(22px, 3vw, 32px); background: #fff; border-radius: var(--radius-lg); color: var(--ink); }
.home-form .form-grid { margin-bottom: 18px; }
.home-form textarea { min-height: 110px; }
.home-form .btn-submit { width: 100%; }
.home-form .form-status { color: var(--ink-2); }
.consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 13.5px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--ink-2) !important; }
.consent input { width: 18px !important; min-height: 18px !important; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.consent a { color: var(--accent); text-decoration: underline; }
.field.consent.has-error span { color: #b42318; }

/* Category: Product Decision Story (V5.4) — copy ↔ comparison image */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.story-media .media { border-radius: var(--radius-lg); }
.story-copy .lede { font-size: 16.5px; }

@media (max-width: 1024px) {
  .activity-strip { grid-template-columns: 1fr 1fr; }
  .act-panel { display: flex; flex-direction: column; }
  .act-panel .media { height: auto; min-height: 0; aspect-ratio: 4/5 !important; }
  .why-stairs, .client-cols { grid-template-columns: 1fr 1fr; }
  .why-stairs li:nth-child(n) { margin-top: 0; }
  .coord-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .factory-proof, .story { grid-template-columns: 1fr; }
  .factory-main .media { min-height: 0; aspect-ratio: 16/10 !important; }
  .factory-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .factory-cards li { grid-template-columns: 1fr; }
  .brief-flow { grid-template-columns: 1fr 1fr; }
  .bf-result { grid-column: 1 / -1; }
  .bf-col:nth-child(2)::after { display: none; }
  .home-form { max-width: 640px; }
}
@media (max-width: 768px) {
  /* H01 phone: copy below the 4:5 crop on the light surface */
  .home-hero-copy { color: var(--ink); background: none; }
  .home-hero-copy h1 { color: var(--ink); }
  .home-hero-copy .eyebrow { color: var(--accent); }
  .home-hero-copy .lede { color: var(--ink-2); }
  .home-hero-copy .btn-outline { border-color: var(--line-2); color: var(--ink); }
  /* H02 2 × 2, 4:5, notes always visible */
  .act-body { position: static; padding: 12px 12px 14px; background: var(--navy); }
  .act-more { grid-template-rows: 1fr; }
  .act-more p { font-size: 13px; }
  .act-body h3 { font-size: 17px; }
  /* H03 swipe row */
  .cat-mosaic { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  .cat-mosaic > .cat-tile:nth-child(n) { grid-column: auto; scroll-snap-align: start; }
  .cat-mosaic > .cat-tile .media { aspect-ratio: 4/5 !important; }
  .factory-cards { grid-template-columns: 1fr; }
  .factory-cards li { grid-template-columns: 110px minmax(0, 1fr); }
  .why-stairs, .client-cols, .fabric-cols, .brief-flow { grid-template-columns: 1fr; }
  .why-stairs li { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .why-stairs .media { grid-row: span 4; margin: 0; }
  .why-stairs .ph-inner { display: none; }
  .client-cols { grid-template-columns: 1fr 1fr; gap: 14px; }
  .client-cols .ph-inner, .fabric-col .ph-inner { display: none; }
  .coord-dots { display: none; }
  .coord-list { grid-template-columns: 1fr 1fr; }
  /* H08 alternating copy / image */
  .move-visual { display: block; max-width: none; }
  .anno-list li { grid-template-columns: 1fr; }
  .anno-list li:nth-child(even) .anno-media { order: 2; }
  .branch { grid-template-columns: 1fr; gap: 28px; }
  .branch-lane::after { left: 50% !important; right: auto !important; bottom: -28px; height: 28px; }
  .branch-merge::before { display: none; }
  .bf-col:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -18px; transform: translateX(-50%); }
  .bf-result { grid-column: auto; }
  .home-brief .btn-row .btn, .home-form .btn-submit { flex: 1 1 100%; }
  .home-form .form-grid { grid-template-columns: 1fr; }
  .story-media { order: 2; }
}
@media (max-width: 480px) {
  .coord-list { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Factory & Production — centred process line (rx_steps_center()).
   Desktop: line in the middle fills on scroll (--p, scroll-reveal.js), cards
   alternate left / right and slide in slowly from their side. Phone: line on
   the left, cards to its right, all slide in from the right.
   ========================================================================== */
.steps-center { position: relative; --p: 0; }
.sc-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line-2); }
.sc-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleY(var(--p)); transform-origin: top; }
.steps-center ol { position: relative; display: grid; gap: 0; }
.sc-step { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; }
.sc-step + .sc-step { margin-top: -48px; }
.sc-node { grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); font-family: var(--f-head); font-weight: 800; font-size: 14px; color: var(--ink-3); box-shadow: 0 0 0 6px #fff; transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease); }
.sc-step.is-active .sc-node, .sc-step:target .sc-node { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.12); }
.sc-card { grid-row: 1; background: var(--bg-tint); border-radius: var(--radius-lg); overflow: hidden; }
.sc-step.is-left .sc-card { grid-column: 1; }
.sc-step.is-right .sc-card { grid-column: 3; }
.sc-card .media { border-radius: 0; }
.sc-card .step-num { display: none; } /* the node on the line already shows the number */
.sc-card h3 { margin-bottom: 6px; }
.sc-card p { margin: 0; font-size: 15px; color: var(--ink-2); }
.js-reveal .sc-card.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: 0s !important; }
.js-reveal .reveal-from-left { transform: translateX(-60px); }
.js-reveal .reveal-from-right { transform: translateX(60px); }
.js-reveal .sc-card.reveal.is-visible { transform: none; }
@media (max-width: 768px) {
  .sc-line { left: 21px; }
  .sc-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .sc-step + .sc-step { margin-top: 24px; }
  .sc-node { grid-column: 1; }
  .sc-step.is-left .sc-card, .sc-step.is-right .sc-card { grid-column: 2; }
  .js-reveal .reveal-from-left { transform: translateX(40px); }
  .js-reveal .reveal-from-right { transform: translateX(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-fill { transform: none !important; }
  .js-reveal .sc-card.reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   V5.5 FACTORY & PRODUCTION (inc/factory.php) — eleven modules, each with
   its own layout; the production stages reuse the centred line above.
   ========================================================================== */
/* 01 hero: full-bleed workshop photo, navy gradient on the left, copy straight on
   the gradient; three detail thumbnails sit on the lower-right edge and overlap
   the next section */
.fp-hero { position: relative; display: flex; flex-direction: column; min-height: clamp(560px, 46vw, 680px); background: var(--navy); }
.fp-hero-media { position: absolute; inset: 0; overflow: hidden; }
.fp-hero-media .media { width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; background-color: var(--navy-2); }
.fp-hero-media .ph-inner { position: absolute; right: 7%; top: 22%; }
.fp-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(17,17,17,.94) 0%, rgba(17,17,17,.86) 38%, rgba(17,17,17,.25) 70%, rgba(17,17,17,0) 100%); }
.fp-hero .container { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: 0; }
.fp-hero-copy { max-width: 600px; color: var(--on-navy); }
.fp-hero-copy h1 { color: #fff; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.12; margin-bottom: 18px; }
.fp-hero-copy .eyebrow { color: var(--navy-accent); }
.fp-hero-copy .lede { color: var(--on-navy-2); font-size: 16.5px; max-width: 540px; }
.fp-hero-copy .breadcrumb, .fp-hero-copy .breadcrumb a { color: var(--on-navy-2); }
.fp-hero-copy .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.fp-hero-copy .btn-outline:hover, .fp-hero-copy .btn-primary:hover { background: #fff; color: var(--navy); }
.fp-hero-details { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(780px, 100%); margin: 40px 0 -64px auto; }
.fp-hero-details figure { position: relative; margin: 0; padding: 6px; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 12px 30px rgba(17,17,17,.18); }
.fp-hero-details .media { border-radius: var(--radius); }
.fp-hero-details figcaption { position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.82); color: #fff; font-size: 12px; font-weight: 700; }
.fp-hero-details .has-brief .ph-label { display: none; }
.fp-hero-details .media.is-placeholder .ph-inner { padding: 4px 8px; }
.fp-hero + #inside { padding-top: calc(var(--section-y) + 40px); }

/* 02 inside: tall photo left, two-row film strip + station notes right */
.fp-inside { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.fp-inside-main { position: sticky; top: var(--sticky-top); }
.fp-inside-main .media { border-radius: var(--radius-lg); }
.fp-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.fp-strip figure { margin: 0; }
.fp-strip figure:nth-child(even) { margin-top: 24px; margin-bottom: -24px; }
.fp-strip .media { border-radius: var(--radius); }
.fp-strip .ph-inner { display: none; }
.fp-strip figcaption { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.fp-notes { margin: 40px 0 24px; border-top: 1px solid var(--line); }
.fp-notes li { display: grid; grid-template-columns: 44px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fp-notes .step-num { margin: 2px 0 0; }
.fp-notes b { font-family: var(--f-head); font-size: 17px; }
.fp-notes p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* 03 garment tabs */
.fp-tab-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fp-tab { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; background: #fff; border: 2px solid transparent; border-radius: var(--radius-lg); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.fp-tab .media { border-radius: 0; }
.fp-tab .ph-inner { display: none; }
.fp-tab-label { display: block; padding: 14px 16px 16px; }
.fp-tab-label b { display: block; font-family: var(--f-head); font-size: 18px; }
.fp-tab-label span { font-size: 13.5px; color: var(--ink-2); }
.fp-tab[aria-selected="true"] { border-color: var(--accent); box-shadow: var(--shadow); }
.fp-tab-desc { display: none; }
.fp-panel { margin: 16px 0 28px; padding: 22px 26px; background: #fff; border-left: 4px solid var(--accent); border-radius: var(--radius-lg); }
.fp-panel h3 { margin: 4px 0 6px; }
.fp-panel p { margin: 0; color: var(--ink-2); }
.fp-tabs:not(.is-tabbed) .fp-panel { margin-bottom: 12px; }
#by-category .fp-tab, #by-category .fp-panel { background: var(--bg-tint); }
/* 04 stretch-sewing checklist under the garment tabs */
.fp-sew { margin: 8px 0 28px; }
.fp-sew h3 { font-size: 20px; margin-bottom: 14px; }
.fp-sew-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fp-sew-list li { padding: 18px 18px 20px; background: var(--bg-tint); border-radius: var(--radius-lg); border-top: 3px solid var(--accent); }
.fp-sew-list .step-num { display: block; margin-bottom: 6px; }
.fp-sew-list b { display: block; font-family: var(--f-head); font-size: 17px; margin-bottom: 4px; }
.fp-sew-list p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 1024px) { .fp-sew-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fp-sew-list { grid-template-columns: 1fr; } }

/* 05 stages: centred heading and CTA */
#production-stages .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.fp-center-cta { display: flex; justify-content: center; margin-top: 40px; }
#production-stages .sc-card { background: #fff; }
#production-stages .sc-node { box-shadow: 0 0 0 6px var(--bg-tint); }

/* 07 issue | station | prevention rows */
.fp-risks { margin-bottom: 24px; }
.fp-risk { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px minmax(0, 1.5fr); gap: 24px; align-items: center; padding: 14px; margin-bottom: 10px; background: #fff; border-radius: var(--radius-lg); }
.fp-risk .media { border-radius: var(--radius); }
.fp-risk .ph-inner { display: none; }
.fp-risk b { font-family: var(--f-head); font-size: 17px; }
.fp-risk p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.fp-risk-head { padding: 0 14px; margin-bottom: 6px; background: none; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* 09 illustrative production example (navy) */
#production-example .concept-badge { margin-bottom: 18px; }
.fp-example { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; counter-reset: none; }
.fp-example li { position: relative; padding: 12px 12px 18px; background: var(--navy-2); border-radius: var(--radius-lg); }
.fp-example li:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 38%; color: var(--navy-accent); font-weight: 700; }
.fp-example .media { margin-bottom: 12px; border-radius: var(--radius); background-color: rgba(255,255,255,.07); }
.fp-example .ph-inner { display: none; }
.fp-example-flag { position: absolute; z-index: 1; left: 20px; top: 20px; padding: 3px 8px; border-radius: 999px; background: rgba(17,17,17,.85); color: var(--navy-accent); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fp-example .step-num { margin: 0 6px 2px; color: var(--navy-accent); }
.fp-example b { display: block; margin: 0 6px; color: #fff; font-family: var(--f-head); font-size: 17px; }
.fp-example p { margin: 4px 6px 0; font-size: 14px; }

@media (max-width: 1024px) {
  .fp-inside { grid-template-columns: 1fr; }
  .fp-inside-main { position: static; max-width: 460px; }
  .fp-tab-list, .fp-example { grid-template-columns: 1fr 1fr; }
  .fp-example li:nth-child(2)::after { display: none; }
  .fp-risk { grid-template-columns: 130px minmax(0, 1fr); gap: 8px 20px; }
  .fp-risk > .media { grid-row: span 3; align-self: start; }
  .fp-risk-head { display: none; }
}
@media (max-width: 768px) {
  .fp-hero { min-height: 0; }
  .fp-hero::after { display: none; }
  .fp-hero-media { position: relative; }
  .fp-hero-media .media { aspect-ratio: 4/3 !important; height: auto; }
  .fp-hero-media .ph-inner { position: relative; right: auto; top: auto; }
  .fp-hero + #inside { padding-top: var(--section-y); }
  .fp-hero .container { display: contents; }
  .fp-hero-copy { order: -1; padding: 24px 20px 24px; background: none; border-radius: 0; }
  .fp-hero-copy .btn-row .btn { flex: 1 1 100%; }
  .fp-hero-details { order: 1; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; width: auto; margin: 16px 20px 24px; padding: 0; }
  .fp-hero-details figure { box-shadow: none; }
  .fp-hero-details figure { scroll-snap-align: start; }
  /* other workshop photos swipe sideways */
  .fp-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .fp-strip figure { scroll-snap-align: start; }
  .fp-strip figure:nth-child(even) { margin: 0; }
  .fp-notes { margin-top: 12px; }
  /* garments in sequence, each with its own note; panels below are not needed */
  .fp-tab-list { grid-template-columns: 1fr; }
  .fp-tab-list { margin-bottom: 24px; }
  .fp-tab { cursor: default; border-color: transparent !important; box-shadow: none !important; }
  .fp-tab .media { aspect-ratio: 16/9 !important; }
  .fp-tab-label { padding: 12px 14px 0; }
  .fp-tab-desc { display: block; padding: 4px 14px 14px; font-size: 13.5px; color: var(--ink-2); }
  .fp-panel { display: none !important; }
  /* challenges: one issue per card, risk and action visible together */
  .fp-risk { grid-template-columns: 1fr; }
  .fp-risk > .media { grid-row: auto; }
  .fp-risk [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .fp-example { grid-template-columns: 1fr; }
  .fp-example li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -15px; }
  .fp-center-cta .btn { width: 100%; }
}

/* ==========================================================================
   V5.6 merged buyer blocks — hub 'cols' layout, HOME H11B readiness,
   Start a Project post-submission note.
   ========================================================================== */
.hub-cols-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
.hub-cols-wrap.has-media { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); align-items: start; }
.hub-cols-media .media { border-radius: var(--radius-lg); }
.hub-col-grid { display: grid; gap: 20px; }
.hub-col-grid.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-col-grid.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-col { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border-top: 4px solid var(--accent); }
.hub-col:nth-child(2) { border-top-color: var(--navy); }
.hub-col:nth-child(3) { border-top-color: var(--navy-accent); }
.bg-white .hub-col { background: var(--bg-tint); }
.hub-col .media { border-radius: 0 !important; }
.hub-col .card-body { display: flex; flex-direction: column; gap: 0; }
.hub-col h3 { margin-bottom: 8px; }
.hub-col p { font-size: 14.5px; color: var(--ink-2); }
.hub-col .hub-list { grid-template-columns: 1fr; margin: 0; }
.hub-col .arrow-link { margin-top: auto; padding-top: 8px; align-self: flex-start; }
.hub-col-rows { margin: 4px 0 0; border-top: 1px solid var(--line-2); }
.hub-col-rows > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.hub-col-rows dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: 2px; }
.hub-col-rows dd { margin: 0; font-size: 14.5px; }
.hub-cols-merge { margin: 0 auto 24px; max-width: 560px; text-align: center; }
.hub-stages .hub-col { position: relative; }
.hub-stages .hub-col:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; color: var(--accent); font-weight: 700; z-index: 1; }
.hub-stages .hub-col { overflow: visible; }

/* HOME H11B readiness */
.ready { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ready-list { margin-top: 4px; }
.ready-media .media { border-radius: var(--radius-lg); }
.ready-proof { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line-2); }
.ready-proof-media .media { border-radius: var(--radius-lg); }
.ready-proof-copy h3 { font-size: clamp(24px, 2.2vw, 32px); margin-bottom: 8px; }
.ready-proof-copy > p { color: var(--ink-2); margin-bottom: 22px; }
.ready-proof-copy .btn-row { margin-top: 24px; }
.ready-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ready-questions li { display: grid; grid-template-columns: 40px 1fr; padding: 18px; background: #fff; border-radius: var(--radius-lg); }
.ready-questions .step-num { margin: 2px 0 0; }
.ready-questions b { font-family: var(--f-head); font-size: 17px; }
.ready-questions p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* Start a Project: what happens after submission */
.after-submit { margin-top: 20px; padding: 20px 22px; background: var(--bg-tint); border-radius: var(--radius-lg); }
.after-submit h3 { font-size: 17px; margin-bottom: 6px; }
.after-submit p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.after-submit p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .hub-cols-wrap.has-media { grid-template-columns: 1fr; }
  .hub-cols-media { max-width: 420px; }
  .hub-col-grid.n-3 { grid-template-columns: 1fr; }
  .hub-stages .hub-col:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -18px; }
  .ready, .ready-proof { grid-template-columns: 1fr; }
  .ready-proof-media { order: 2; max-width: 560px; }
}
@media (max-width: 768px) {
  .hub-col-grid.n-2 { grid-template-columns: 1fr; }
  .hub-cols-media .ph-inner { display: none; }
  .hub-col-rows > div { grid-template-columns: 1fr; gap: 2px; }
  .ready-questions { grid-template-columns: 1fr; }
  .ready-media { order: 2; }
}

/* ==========================================================================
   V5.7 Customization + Fabrics & Technologies pages (inc/v57-pages.php)
   ========================================================================== */
.hub-col-grid.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1025px) { .hub-cols-wrap.has-media:has(.hub-col-grid.n-3) { grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); } }
/* entries: two equal cards side by side */
.hub-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; align-items: stretch; }
.hub-entry { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.bg-white .hub-entry { background: var(--bg-tint); }
.hub-entry:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.hub-entry .media { border-radius: 0 !important; }
.hub-entry h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 6px; }
.hub-entry p { color: var(--ink-2); }
.hub-entry .card-body { flex: 1; display: flex; flex-direction: column; }
.hub-entry .card-more { color: var(--accent); margin-top: auto; padding-top: 12px; }
/* tiles with four inputs */
.hub-inputs .hub-tile { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.bg-white.hub-inputs .hub-tile { background: var(--bg-tint); }
.hub-inputs .hub-tile .media { border-radius: 0; }
.hub-inputs .hub-tile figcaption { margin: 0; padding: 16px 18px 20px; }
/* library: expandable gallery */
.fabric-lib { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: #fff; }
.bg-white .fabric-lib { background: var(--bg-tint); border-color: transparent; }
.fabric-lib summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 22px; cursor: pointer; list-style: none; font-family: var(--f-head); font-weight: 700; font-size: 18px; }
.fabric-lib summary::-webkit-details-marker { display: none; }
.fabric-lib summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--accent); }
.fabric-lib[open] summary::after { content: "–"; }
.fabric-lib-count { margin-left: auto; font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.fabric-lib .fabric-library { padding: 4px 22px 22px; gap: 16px; }
.fabric-lib .fabric-card .ph-inner { display: none; }
.fabric-lib .fabric-card h3 { font-size: 16px; }
.fabric-lib .fabric-card p { font-size: 13.5px; }
@media (max-width: 1024px) {
  .hub-col-grid.n-4 { grid-template-columns: 1fr 1fr; }
  .fabric-lib .fabric-library { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hub-col-grid.n-4 { grid-template-columns: 1fr; }
  .hub-entry-grid { grid-template-columns: 1fr; }
  .fabric-lib .fabric-library { grid-template-columns: 1fr 1fr; padding: 4px 14px 14px; }
  .fabric-lib summary { padding: 14px 16px; font-size: 16px; }
}
/* cols + media: image stretches to the height of the cards beside it */
@media (min-width: 1025px) {
  .hub-cols-wrap.has-media { align-items: stretch; }
  .hub-cols-media .media { height: 100%; min-height: 240px; aspect-ratio: auto !important; }
}

/* ==========================================================================
   Placeholder photo names (config show_shot_briefs): every placeholder shows
   its code + ratio and a short English photo name — small slots included.
   ========================================================================== */
.media.is-placeholder.has-brief { container-type: inline-size; }
.media.is-placeholder.has-brief .ph-inner { display: flex !important; max-width: 90%; gap: 4px; padding: 10px 14px; background: rgba(255,255,255,.94); }
.has-brief .ph-tag { font-size: 10.5px; }
.has-brief .ph-label { font-size: 14px; }
@container (max-width: 260px) {
  .has-brief .ph-inner { padding: 6px 9px; gap: 2px; }
  .has-brief .ph-tag { font-size: 9px; letter-spacing: .06em; }
  .has-brief .ph-label { font-size: 12px; }
}

/* ==========================================================================
   HOME H01 (photo hero): white-studio jump photo as a full-bleed background,
   dark copy centred on it. A light veil in the photo's backdrop colour fades
   out from the centre so the copy reads while the models at the sides stay clear.
   ========================================================================== */
.home-hero { background: #f3f4f6; } /* = photo backdrop */
.home-hero-media .media { background: none; }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 46% 52% at 50% 54%, rgba(243,244,246,.86) 0%, rgba(243,244,246,.7) 45%, rgba(243,244,246,0) 100%); }
.home-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.home-hero-inner { position: relative; z-index: 2; justify-content: center; align-items: center; text-align: center; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); max-height: 960px; }
.home-hero-copy { max-width: 760px; padding: 0; background: none; border-radius: 0; box-shadow: none; color: var(--ink); --halo: 0 0 12px rgba(255,255,255,.7); }
.home-hero-copy h1, .home-hero-copy .eyebrow, .home-hero-copy .lede { text-shadow: var(--halo); }
.home-hero-copy h1 { color: var(--ink); font-size: clamp(40px, 4.6vw, 70px); line-height: 1.05; margin-bottom: 22px; }
.home-hero-copy .eyebrow { color: var(--ink); }
.home-hero-copy .eyebrow::before { display: none; }
.home-hero-copy .lede { font-size: 16.5px; font-weight: 500; line-height: 1.65; color: var(--ink); max-width: 620px; margin-left: auto; margin-right: auto; }
.home-hero-copy .btn-row { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); margin: 32px auto 0; }
.home-hero-copy .btn-outline { border-color: var(--ink); color: var(--ink); background: #fff; }
.home-hero-copy .btn-outline:hover { background: var(--ink); color: #fff; }
.home-hero-copy .hero-moq { background: #fff; }
.home-hero-media .ph-inner { z-index: 2; }
@media (max-width: 768px) {
  .home-hero { display: block; } /* phone keeps the photo behind the copy too */
  .home-hero-media { position: absolute; }
  .home-hero-media .media { aspect-ratio: auto !important; height: 100%; }
  .home-hero-media img { object-position: 45% 30%; }
  .home-hero::after { background: radial-gradient(ellipse 90% 48% at 50% 50%, rgba(243,244,246,.88) 0%, rgba(243,244,246,.72) 55%, rgba(243,244,246,0) 100%); }
  .home-hero-inner { min-height: calc(100svh - var(--header-h)); max-height: none; padding-bottom: 28px; }
  .home-hero-copy h1 { font-size: clamp(36px, 10vw, 48px); }
  .home-hero-copy .btn-row { width: auto; flex-wrap: wrap; }
  .home-hero-copy .btn-row .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: normal; text-align: center; line-height: 1.25; }
}

/* HOME H01: MOQ line under the CTAs (value from config 'moq') */
.hero-moq { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; color: var(--ink-2); }
.hero-moq b { color: var(--ink); font-weight: 700; }
.hero-moq::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy-accent); flex: none; }
@media (max-width: 768px) { .hero-moq { display: block; border-radius: var(--radius); font-size: 13px; line-height: 1.5; } .hero-moq::before { display: inline-block; margin-right: 8px; vertical-align: middle; } }

/* Page hero with full-bleed background photo (bg => true, e.g. /products/ RX-CS01).
   Photo sits right at full hero height; the section colour matches the studio
   backdrop (#edeef0) so the empty left side carries the copy. Phone: photo below copy. */
.page-hero.has-bg { position: relative; overflow: hidden; background: var(--hero-wall, #edeef0); padding: 0; } /* --hero-wall: rx_page_hero 'wall' */
.page-hero.has-bg .page-hero-media { position: absolute; inset: 0; }
.page-hero.has-bg .page-hero-media .media { width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; background: none; }
.page-hero.has-bg .page-hero-media img { object-fit: contain; object-position: right center; }
.page-hero.has-bg .page-hero-grid { position: static; display: flex; align-items: center; min-height: clamp(520px, 42vw, 680px); padding-top: 40px; padding-bottom: 56px; }
.page-hero.has-bg .page-hero-copy { position: relative; z-index: 1; max-width: min(500px, 38%); }
.page-hero.has-bg h1 { max-width: none; }
@media (max-width: 1024px) {
  /* the photo stacks below the copy here, so a wall gradient would no longer line up — use its top colour */
  .page-hero.has-bg[style*="--hero-wall"]:not(.is-center):not(.is-left) { background: #f6f8fc; }
  .page-hero.has-bg .page-hero-grid { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 32px; padding-bottom: 0; }
  .page-hero.has-bg .page-hero-copy { max-width: 640px; }
  .page-hero.has-bg .page-hero-media { position: relative; inset: auto; width: 100vw; margin: 0 0 0 calc(50% - 50vw); }
  .page-hero.has-bg .page-hero-media .media { aspect-ratio: 16/9 !important; height: auto; }
  .page-hero.has-bg .page-hero-media img { object-fit: cover; object-position: right center; }
}
@media (max-width: 768px) {
  .page-hero.has-bg .page-hero-grid { padding-top: 24px; }
  .page-hero.has-bg .page-hero-copy { max-width: none; }
}

/* bg => 'center': photo fills the hero (cover) under a light navy scrim; copy centred in white. */
.page-hero.has-bg.is-center { background: var(--navy); color: #fff; }
.page-hero.has-bg.is-center .page-hero-media .media { background: var(--navy); }
.page-hero.has-bg.is-center .page-hero-media img { object-fit: cover; object-position: var(--hero-pos, center 30%); } /* --hero-pos: rx_page_hero 'pos' */
.page-hero.has-bg.is-center .page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.28) 0%, rgba(17,17,17,.34) 50%, rgba(17,17,17,.5) 100%); }
.page-hero.has-bg.is-center .page-hero-grid { justify-content: center; min-height: clamp(540px, 44vw, 720px); }
.page-hero.has-bg.is-center .page-hero-copy { max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.page-hero.has-bg.is-center h1 { color: #fff; max-width: 22ch; }
.page-hero.has-bg.is-center .page-hero-copy > * { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.page-hero.has-bg.is-center .page-hero-copy .btn { text-shadow: none; }
.page-hero.has-bg.is-center .lede { color: rgba(255,255,255,.86); max-width: 60ch; }
.page-hero.has-bg.is-center .eyebrow { color: var(--navy-accent); }
.page-hero.has-bg.is-center .hero-note { color: rgba(255,255,255,.7); }
.page-hero.has-bg.is-center .breadcrumb, .page-hero.has-bg.is-center .breadcrumb a { color: rgba(255,255,255,.72); justify-content: center; }
.page-hero.has-bg.is-center .btn-row { justify-content: center; }
.page-hero.has-bg.is-center .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.page-hero.has-bg.is-center .btn-outline:hover, .page-hero.has-bg.is-center .btn-primary:hover { background: #fff; color: var(--navy); }
@media (max-width: 1024px) {
  /* keep the photo behind the copy on tablet / phone (the side-by-side variant stacks instead) */
  .page-hero.has-bg.is-center .page-hero-grid { align-items: center; min-height: clamp(520px, 120vw, 680px); padding-top: 40px; padding-bottom: 48px; }
  .page-hero.has-bg.is-center .page-hero-media { position: absolute; inset: 0; width: auto; margin: 0; }
  .page-hero.has-bg.is-center .page-hero-media .media { aspect-ratio: auto !important; height: 100%; }
  .page-hero.has-bg.is-center .page-hero-media img { object-fit: cover; object-position: 45% center; }
}
@media (max-width: 768px) { .page-hero.has-bg.is-center .eyebrow::before { display: none; } }

/* bg => 'center-dark': busy collage photo (e.g. /customization/ RX-CU-01) — deeper scrim, darkest behind the copy. */
.page-hero.has-bg.is-center.is-dark .page-hero-media::after { background: radial-gradient(ellipse 52% 62% at 50% 50%, rgba(12,14,18,.72) 0%, rgba(12,14,18,.58) 55%, rgba(12,14,18,.42) 100%); }
.page-hero.has-bg.is-center.is-dark .eyebrow { color: rgba(255,255,255,.82); }
.page-hero.has-bg.is-center.is-dark .lede { color: rgba(255,255,255,.9); }
@media (max-width: 768px) { .page-hero.has-bg.is-center.is-dark .page-hero-media::after { background: rgba(12,14,18,.66); } }

/* bg => 'center-light': light studio photo, faint white glow behind dark centred copy. */
.page-hero.has-bg.is-center.is-light { background: #dedfdf; color: var(--ink); }
.page-hero.has-bg.is-center.is-light .page-hero-media .media { background: #dedfdf; }
.page-hero.has-bg.is-center.is-light .page-hero-media img { object-position: var(--hero-pos, center 20%); }
.page-hero.has-bg.is-center.is-light .page-hero-media::after { background: radial-gradient(ellipse 40% 58% at 50% 50%, rgba(240,241,241,.62) 0%, rgba(240,241,241,.4) 55%, rgba(240,241,241,0) 100%); }
.page-hero.has-bg.is-center.is-light .page-hero-copy > * { text-shadow: 0 0 18px rgba(255,255,255,.7); }
.page-hero.has-bg.is-center.is-light .page-hero-copy { max-width: 680px; }
.page-hero.has-bg.is-center.is-light h1 { color: var(--ink); }
.page-hero.has-bg.is-center.is-light .lede { color: var(--ink-2); }
.page-hero.has-bg.is-center.is-light .eyebrow { color: var(--ink-2); }
.page-hero.has-bg.is-center.is-light .hero-note { color: var(--ink-3); }
.page-hero.has-bg.is-center.is-light .breadcrumb, .page-hero.has-bg.is-center.is-light .breadcrumb a { color: var(--ink-3); }
.page-hero.has-bg.is-center.is-light .btn-outline { border-color: var(--ink); color: var(--ink); }
.page-hero.has-bg.is-center.is-light .btn-outline:hover { background: var(--ink); color: #fff; }
.page-hero.has-bg.is-center.is-light .btn-primary:hover { background: var(--accent-hover); color: #fff; }
@media (max-width: 1024px) {
  .page-hero.has-bg.is-center.is-light .page-hero-media img { object-position: 86% center; }
  .page-hero.has-bg.is-center.is-light .page-hero-media::after { background: rgba(240,241,241,.55); }
}

/* bg => 'left-light': light photo, people right, dark copy on the empty left wall.
   Desktop: whole photo at hero height, anchored right; the section colour matches its wall (#dee5ed). */
.page-hero.has-bg.is-left { --left-wall: linear-gradient(180deg, #dee5ed 0%, #dee5ed 86%, #e3eaf0 95%, #e3eaf0 100%); background: #dee5ed var(--left-wall); }
.page-hero.has-bg.is-left .page-hero-media .media { background: var(--left-wall); }
.page-hero.has-bg.is-left .page-hero-media img { object-fit: contain; object-position: right center; }
.page-hero.has-bg.is-left .page-hero-grid { min-height: clamp(560px, 50vw, 760px); }
.page-hero.has-bg.is-left .page-hero-copy { max-width: min(480px, 37%); }
@media (max-width: 1024px) {
  .page-hero.has-bg.is-left .page-hero-grid { align-items: flex-start; justify-content: center; min-height: clamp(520px, 120vw, 680px); padding-top: 40px; padding-bottom: 48px; }
  .page-hero.has-bg.is-left .page-hero-media { position: absolute; inset: 0; width: auto; margin: 0; }
  .page-hero.has-bg.is-left .page-hero-media .media { aspect-ratio: auto !important; height: 100%; }
  .page-hero.has-bg.is-left .page-hero-media img { object-fit: cover; object-position: 75% center; }
  .page-hero.has-bg.is-left .page-hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(228,234,240,.55); }
  .page-hero.has-bg.is-left .page-hero-copy { max-width: 640px; }
}

/* Monochrome palette: on dark surfaces the black primary button inverts to white-on-black. */
.cta-banner .btn-primary, .home-brief .btn-primary, .bg-navy .btn-primary,
.fp-hero-copy .btn-primary, .page-hero.has-bg.is-center:not(.is-light) .btn-primary { background: #fff; color: var(--ink); }
.cta-banner .btn-primary:hover, .home-brief .btn-primary:hover, .bg-navy .btn-primary:hover,
.fp-hero-copy .btn-primary:hover, .page-hero.has-bg.is-center:not(.is-light) .btn-primary:hover { background: #e6e6e4; color: var(--ink); }
/* …except inside the white form card on a dark section, where it stays black. */
.home-brief .home-form .btn-primary { background: var(--accent); color: #fff; }
.home-brief .home-form .btn-primary:hover { background: var(--accent-hover); color: #fff; }

/* ==========================================================================
   HOME: transparent header over the hero photo. At the top of the page the
   header floats on the white-studio image (normal dark text/logo); once scrolled (.is-scrolled,
   main.js) or with the mobile menu open it returns to the solid white header.
   ========================================================================== */
.home .site-header { margin-bottom: calc(-1 * var(--header-h)); transition: background-color .25s, border-color .2s, box-shadow .2s, transform .3s var(--ease); }
.home .site-header:not(.is-scrolled):not(.nav-open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; }
/* the hero runs under the transparent header: full viewport height, copy kept below the nav */
.home .home-hero-inner { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-h) + 24px); }
@media (max-width: 768px) {
  .home .home-hero-inner { min-height: 0; padding-top: calc(var(--header-h) + 28px); }
}

/* ==========================================================================
   Logo butterfly — the wings (logo-wings.png) hover and flap over the static
   RUI/ING wordmark (logo-text.png); markup from rx_logo_img(). Every layer
   still matches `.brand img`, so existing header/footer sizing applies.
   ========================================================================== */
.rx-logo { position: relative; display: block; flex: none; }
.rx-logo .rx-logo-text { position: relative; }
.rx-logo-fly { position: absolute; inset: 0; animation: rx-hover 3.2s ease-in-out infinite; }
.rx-logo .rx-wing { position: absolute; top: 0; left: 0; transform-origin: 50% 50%; }
.rx-logo .rx-wing-l { clip-path: inset(0 50% 0 0); animation: rx-flap-l 2.8s ease-in-out infinite; }
.rx-logo .rx-wing-r { clip-path: inset(0 0 0 50%); animation: rx-flap-r 2.8s ease-in-out infinite; }
/* two quick beats, then a glide */
@keyframes rx-flap-l {
  0%, 36%, 100% { transform: perspective(400px) rotateY(0); }
  9%, 27%       { transform: perspective(400px) rotateY(64deg); }
  18%           { transform: perspective(400px) rotateY(6deg); }
}
@keyframes rx-flap-r {
  0%, 36%, 100% { transform: perspective(400px) rotateY(0); }
  9%, 27%       { transform: perspective(400px) rotateY(-64deg); }
  18%           { transform: perspective(400px) rotateY(-6deg); }
}
@keyframes rx-hover {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rx-logo-fly, .rx-logo .rx-wing { animation: none !important; }
}

/* ==========================================================================
   HOME marquee — thin black strip under the hero. Two identical groups slide
   -50% for a seamless right-to-left loop; each item is led by the logo
   butterfly reusing rx-hover / rx-flap-l / rx-flap-r, offset per item (--d).
   ========================================================================== */
.rx-marquee { display: flex; align-items: center; height: 46px; overflow: hidden; background: var(--navy); color: var(--on-navy); }
.rx-marquee-track { display: flex; width: max-content; animation: rx-marquee 45s linear infinite; }
.rx-marquee:hover .rx-marquee-track { animation-play-state: paused; }
/* main.js adds .is-offscreen while the strip is out of view: no animation work off-screen. */
.rx-marquee.is-offscreen .rx-marquee-track, .rx-marquee.is-offscreen .rx-mq-bug, .rx-marquee.is-offscreen .rx-mq-fly, .rx-marquee.is-offscreen .rx-wing { animation-play-state: paused; }
.rx-marquee-group { display: flex; margin: 0; padding: 0; list-style: none; }
.rx-marquee-group li { display: flex; align-items: center; gap: 10px; margin: 0 88px 0 0; font-family: var(--f-head); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
/* The butterfly as the eye sees it from the side: body level and heading left
   (nose slightly up), wings beating up over the back and down below the body.
   .rx-mq-bug drifts in a slow, uneven flutter; .rx-mq-fly holds the 3D pose and
   rises a little on every downstroke, in step with the wingbeat. */
.rx-mq-bug { flex: none; display: block; width: 34px; height: 34px; animation: rx-mq-drift 3.7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.rx-mq-fly { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotate(8deg) perspective(140px) rotateX(65deg) rotate(-90deg); animation: rx-mq-beat .62s ease-in-out infinite; animation-delay: var(--d, 0s); }
.rx-mq-fly .rx-wing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: 50% 50%; backface-visibility: visible; }
.rx-mq-fly .rx-wing-l { clip-path: inset(0 50% 0 0); animation: rx-mq-flap-l .62s ease-in-out infinite; animation-delay: var(--d, 0s); }
.rx-mq-fly .rx-wing-r { clip-path: inset(0 0 0 50%); animation: rx-mq-flap-r .62s ease-in-out infinite; animation-delay: var(--d, 0s); }
/* transform-only keyframes so the wingbeat stays on the compositor (animating filter repaints every frame). */
@keyframes rx-mq-flap-l {
  0%, 100% { transform: rotateY(80deg); }
  50%      { transform: rotateY(-35deg); }
}
@keyframes rx-mq-flap-r {
  0%, 100% { transform: rotateY(-80deg); }
  50%      { transform: rotateY(35deg); }
}
@keyframes rx-mq-beat {
  0%, 100% { transform: translateY(2px) rotate(8deg) perspective(140px) rotateX(65deg) rotate(-90deg); }
  50%      { transform: translateY(-2px) rotate(6deg) perspective(140px) rotateX(65deg) rotate(-90deg); }
}
@keyframes rx-mq-drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  22%      { transform: translate(-2px, -4px) rotate(-4deg); }
  48%      { transform: translate(1px, 2px) rotate(3deg); }
  71%      { transform: translate(-1px, -3px) rotate(-2deg); }
}
@keyframes rx-marquee { to { transform: translateX(-50%); } }
@media (max-width: 768px) {
  .rx-marquee { height: 40px; }
  .rx-marquee-group li { margin-right: 60px; font-size: 12px; }
  .rx-mq-bug { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-marquee-track, .rx-mq-bug, .rx-mq-fly, .rx-mq-fly .rx-wing { animation: none !important; }
}

/* ==========================================================================
   HOME H13 Start Your Project — the logo butterfly as an oversized, faint
   watermark behind the copy (left), cropped by the section edges.
   ========================================================================== */
.home-brief { position: relative; overflow: hidden; isolation: isolate; }
.home-brief::before { content: ""; position: absolute; inset: -10% auto -10% -12%; width: 78%; z-index: -1; pointer-events: none; background: url(assets/images/logo-white-wings.png) no-repeat 50% 50% / contain; opacity: .07; transform: rotate(-8deg); }
@media (max-width: 768px) {
  .home-brief::before { inset: -4% -40% auto -40%; width: auto; height: 70%; }
}

/* HOME H05 — client reviews under the advantages (shown only when rx_reviews_data() has real entries):
   wide, short black cards two-up across almost the full viewport (one-up on phones), arrows at the
   page edges, on the unchanged tint background. */
.why-reviews-title { margin: clamp(56px, 7vw, 88px) 0 clamp(28px, 3vw, 44px); font-size: var(--fs-h2); text-align: center; }
.rv-slider { position: relative; width: 100vw; margin: 0 0 48px calc(50% - 50vw); padding: 0 clamp(16px, 3.6vw, 72px); }
.rv-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 34px) / 2); column-gap: 34px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { scroll-snap-align: start; display: flex; flex-direction: column; min-height: clamp(300px, 21vw, 420px); padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 44px); background: var(--navy); color: var(--on-navy); border-radius: 2px; }
.rv-product { margin: 0 0 clamp(18px, 2vw, 28px); text-align: center; font-family: var(--f-head); font-size: clamp(15px, 1.15vw, 19px); font-weight: 700; color: #fff; }
.rv-head { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); margin-bottom: clamp(18px, 2vw, 28px); }
.rv-mark { flex: none; font-family: Georgia, serif; font-size: clamp(80px, 7vw, 120px); line-height: .6; height: .45em; color: rgba(255,255,255,.12); }
.rv-avatar { flex: none; display: grid; place-items: center; width: clamp(60px, 5.4vw, 78px); height: clamp(60px, 5.4vw, 78px); border-radius: 50%; background: #2a2a2a; border: 1px solid rgba(255,255,255,.18); font-family: var(--f-head); font-size: clamp(24px, 2vw, 30px); font-weight: 700; color: #fff; }
.rv-who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-who b { font-family: var(--f-head); font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; color: #fff; }
.rv-who span { font-size: clamp(14px, 1.05vw, 16px); color: var(--on-navy-2); }
.rv-who .rv-stars { font-size: clamp(18px, 1.5vw, 22px); letter-spacing: 3px; color: #f5c518; }
.rv-card blockquote { margin: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: rgba(245,245,244,.88); }
.rv-proof { flex: none; margin-left: auto; width: clamp(120px, 10vw, 170px); padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 2px; background: #fff; overflow: hidden; cursor: zoom-in; transition: border-color .2s; }
.rv-proof img { display: block; width: 100%; height: clamp(56px, 4.6vw, 76px); object-fit: cover; object-position: 30% top; }
.rv-proof span { display: block; padding: 5px 8px; background: #1c1c1c; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-2); text-align: center; }
.rv-proof:hover { border-color: rgba(255,255,255,.55); }
.rv-proof:hover span { color: #fff; }
.rv-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; transform: translateY(-50%); transition: color .2s, opacity .2s; }
.rv-prev { left: 0; }
.rv-next { right: 0; }
.rv-nav svg { width: 28px; height: 28px; transition: transform .2s; }
.rv-prev svg { transform: rotate(180deg); }
.rv-next:hover:not(:disabled) svg { transform: translateX(3px); }
.rv-prev:hover:not(:disabled) svg { transform: rotate(180deg) translateX(3px); }
.rv-nav:disabled { opacity: .3; cursor: default; }
.rv-lightbox { max-width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius-lg); background: #fff; overflow: visible; }
.rv-lightbox::backdrop { background: rgba(10,10,10,.82); }
.rv-lightbox img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.rv-lb-close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
@media (max-width: 900px) {
  .rv-slider { padding: 0 var(--gutter); }
  .rv-track { grid-auto-columns: 100%; column-gap: 16px; }
  .rv-card { min-height: 0; }
  .rv-mark { display: none; }
  .rv-nav { top: auto; bottom: -62px; width: 42px; height: 42px; transform: none; }
  .rv-prev { left: auto; right: calc(var(--gutter) + 52px); }
  .rv-next { right: var(--gutter); }
  .rv-slider { margin-bottom: 86px; }
}
@media (max-width: 560px) {
  .rv-head { flex-wrap: wrap; }
  .rv-proof { margin-left: 0; width: 100%; order: 3; }
  .rv-proof img { height: 64px; }
}