/* ───────────────────────────────────────────────────────────────
   BRACKET — design system
   Used by: index.html · about.html · process.html · (future pages)
   ─────────────────────────────────────────────────────────────── */

/* ── tokens ──────────────────────────────────────────────────── */
:root{
  --ink:#0D0D0D; --panel:#141413; --edge:#2C2C2A;
  --bone:#EDEBE6; --grey:#8C8C88; --red:#C1121F;
  --basalt:#4A4844; --graphite:#2D2D2B;
  --disp:'Archivo',system-ui,sans-serif; --mono:'Space Mono',monospace;
}

/* ── resets ──────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--disp);-webkit-font-smoothing:antialiased;line-height:1.5}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ── brand mark (header + footer) ───────────────────────────── */
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;letter-spacing:-.01em;color:var(--bone)}
.brand .b{color:var(--red)}

/* ── hamburger icon (animations shared across pages) ─────────── */
.menu-btn{display:none;width:44px;height:44px;position:relative;margin-right:-8px;background:transparent;border:none;padding:0;appearance:none;-webkit-appearance:none;cursor:pointer}
.menu-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.menu-btn span{position:absolute;left:10px;right:10px;height:1px;background:var(--bone);transition:transform .22s,opacity .18s}
.menu-btn span:nth-child(1){top:18px} .menu-btn span:nth-child(2){top:26px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ── mobile nav ──────────────────────────────────────────────── */
.mnav{display:none;flex-direction:column;background:var(--ink);border-bottom:1px solid var(--edge);padding:6px 22px 14px}
.mnav a{padding:12px 0;border-bottom:1px solid var(--edge);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.mnav a:last-child{border-bottom:0}

/* ── kicker / eyebrow text ───────────────────────────────────── */
.ey{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}

/* ── global headings ─────────────────────────────────────────── */
h1{font-weight:900;font-size:clamp(38px,4.4vw,58px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:12px}
h2{font-weight:900;font-size:clamp(34px,4vw,52px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase}
h3{font-weight:800;font-size:18px;letter-spacing:.01em;text-transform:uppercase;margin-bottom:10px}
.lede{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--grey);max-width:60ch}

/* ── section structure ───────────────────────────────────────── */
.wrap{max-width:1100px;margin:0 auto;padding:0 60px}
.sec{border-top:1px solid var(--edge);padding:96px 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.sec-num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase}
.sec-num span{color:var(--bone);margin-right:14px}
.sec-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey);text-transform:uppercase}

/* ── page hero (about / process) ────────────────────────────── */
.page-hero{padding:clamp(80px,12vh,140px) 0 clamp(56px,8vh,96px);border-bottom:1px solid var(--edge)}
.page-hero h1{font-size:clamp(52px,7.5vw,110px);line-height:.9;letter-spacing:-.04em;margin:20px 0 0}
.page-hero-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey);text-transform:uppercase;padding-top:22px;border-top:1px solid var(--edge);margin-top:28px}
.page-hero-meta span+span::before{content:"·";margin-right:18px;color:var(--edge)}

/* ── about: text blocks ──────────────────────────────────────── */
.story{display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:start}
.story .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase}
.story p{font-family:var(--mono);font-size:14px;line-height:1.75;color:var(--bone);max-width:62ch}
.story p+p{margin-top:18px}
.story p em{font-style:normal;color:var(--grey)}

/* ── process: materials ──────────────────────────────────────── */
.mats{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.mat-card{border:1px solid var(--edge);padding:36px;display:grid;gap:20px;background:var(--panel)}
.mat-card .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--grey);text-transform:uppercase}
.mat-card h3{font-size:28px;margin-bottom:0;letter-spacing:-.01em}
.mat-card .desc{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--grey)}
.mat-card dl{border-top:1px solid var(--edge);padding-top:18px;display:grid;gap:10px}
.mat-card dl > div{display:flex;justify-content:space-between;gap:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.mat-card dt{color:var(--grey)} .mat-card dd{color:var(--bone)}

/* ── process: steps ──────────────────────────────────────────── */
.steps{border-top:1px solid var(--edge)}
.steps > div{display:grid;grid-template-columns:80px 220px 1fr 180px;gap:32px;padding:32px 0;border-bottom:1px solid var(--edge);align-items:start}
.steps .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--grey);padding-top:4px}
.steps .t{font-weight:800;font-size:20px;letter-spacing:-.01em;text-transform:uppercase}
.steps .d{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--grey)}
.steps .x{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey);text-transform:uppercase;text-align:right}

/* ── about: contact section ──────────────────────────────────── */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;border-top:1px solid var(--edge);padding-top:48px}
.contact > div .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--grey);text-transform:uppercase;margin-bottom:14px}
.contact > div p{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--bone)}
.contact a{border-bottom:1px solid var(--grey);transition:border-color .14s}
.contact a:hover{border-color:var(--bone)}

/* ── process: closing CTA ────────────────────────────────────── */
.close{padding:120px 0;text-align:center}
.close .ey{justify-self:center}
.close h2{margin-bottom:18px}
.close-price{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--grey);margin-bottom:36px;text-transform:uppercase}
.close-cta{display:inline-flex;align-items:center;gap:14px;background:var(--bone);color:var(--ink);font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;padding:20px 36px;transition:background .14s}
.close-cta:hover{background:#fff}
.close-cta:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.close-cta .ar{font-family:var(--mono);font-weight:400}

/* ── focus + utilities ───────────────────────────────────────── */
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:var(--bone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── responsive — shared ──────────────────────────────────────── */
@media (max-width:1020px){
  .wrap{padding:0 30px}
  .mats{grid-template-columns:1fr}
  .steps > div{grid-template-columns:60px 1fr 140px;grid-template-areas:"n t x" "n d x"}
  .steps .n{grid-area:n} .steps .t{grid-area:t} .steps .d{grid-area:d} .steps .x{grid-area:x;padding-top:4px}
  .contact{grid-template-columns:1fr;gap:24px}
  .story{grid-template-columns:1fr;gap:14px}
}
@media (max-width:860px){
  .mnav.is-open{display:flex}
}
@media (max-width:820px){
  .sec{padding:64px 0}
  .close{padding:80px 0}
  .page-hero{padding:72px 0 56px}
  .steps > div{grid-template-columns:60px 1fr;grid-template-areas:"n t" "n d" "n x"}
  .steps .x{text-align:left;padding-top:0}
}
@media (max-width:560px){
  .wrap{padding:0 22px}
}


/* ═══════════════════════════════════════════════════════════════
   NEW SHOP LAYOUT — index.html
   All rules below apply only to new class names.
   ═══════════════════════════════════════════════════════════════ */

/* ── tokens (extend shared palette) ─────────────────────────── */
:root {
  --basalt: #4A4844;
  --sand:   #C9BCA6;
  --ease:   cubic-bezier(0.65, 0.05, 0.35, 1);
  --ease-o: cubic-bezier(0.16, 1, 0.3, 1);
  --h-hdr:  57px; /* header height reference for offset calculations */
}

/* ── skip link ───────────────────────────────────────────────── */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  padding: 8px 14px;
  background: var(--bone); color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--red); }

/* ── header ──────────────────────────────────────────────────── */
.site-hdr {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(12px,2vw,32px);
  padding: 14px clamp(18px,3vw,40px);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge);
}
.site-hdr .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 17px; letter-spacing: -.01em; flex-shrink: 0; }
.site-hdr .brand .b { color: var(--red); font-family: var(--mono); }
.site-hdr .nav { display: flex; gap: clamp(14px,2.5vw,30px); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); flex: 1; justify-content: center; }
.site-hdr .nav a { transition: color .14s; padding: 4px 0; position: relative; }
.site-hdr .nav a:hover, .site-hdr .nav a[aria-current] { color: var(--bone); }
.site-hdr .nav a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--red); }
.hdr-buy { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--grey); padding-bottom: 1px; transition: border-color .14s; flex-shrink: 0; }
.hdr-buy:hover { border-color: var(--bone); }
.site-hdr .menu-btn { display: none; }

/* ── hero split ──────────────────────────────────────────────── */
.hero-split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  min-height: calc(100dvh - var(--h-hdr));
}
.hero-media {
  background: var(--panel);
  position: sticky;
  top: var(--h-hdr);
  height: calc(100dvh - var(--h-hdr));
  overflow: hidden;
  border-right: 1px solid var(--edge);
}
.hero-fig {
  width: 100%; height: 100%;
  position: relative;
}
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 280ms var(--ease);
}
.hero-img.is-swapping { opacity: 0; }
.hero-fig-label {
  position: absolute; bottom: 18px; left: 20px;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); opacity: .5;
  pointer-events: none;
}

/* ── hero config ─────────────────────────────────────────────── */
.hero-config {
  display: flex; flex-direction: column;
  gap: 22px;
  padding: clamp(40px,6vh,72px) clamp(28px,4vw,56px) clamp(40px,6vh,72px);
  overflow-y: auto;
}
.product-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
.eyebrow-sku { color: var(--bone); }
.product-h1 {
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(48px, 5.5vw, 76px);
  line-height: .92; letter-spacing: -.03em; text-transform: uppercase;
  margin: 0;
}
.product-mat { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--grey); }

/* ── price block ─────────────────────────────────────────────── */
.price-block { display: flex; flex-direction: column; gap: 6px; }
.price-row { display: flex; align-items: center; gap: 12px; }
.price-tick { width: 8px; height: 8px; background: var(--red); flex-shrink: 0; }
.price-mrp { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--grey); font-weight: 400; text-decoration: line-through; }
.price-val { font-family: var(--disp); font-weight: 900; font-size: clamp(28px,3.2vw,40px); letter-spacing: -.02em; }
.price-tax { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.price-policy { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.buy-repeat-mrp { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--grey); font-weight: 400; margin-bottom: 4px; }

/* ── option groups ───────────────────────────────────────────── */
.opt-group { border: 0; padding: 0; }
.opt-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey);
  margin-bottom: 10px;
}
.opt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-pill { position: relative; cursor: pointer; }
.opt-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-face {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 44px; min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--edge);
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  color: var(--grey);
  transition: color .14s, border-color .14s, background .14s;
  cursor: pointer;
}
.opt-pill:hover .opt-face { color: var(--bone); border-color: var(--grey); }
.opt-pill input:checked + .opt-face { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.opt-pill input:focus-visible + .opt-face { outline: 2px solid var(--red); outline-offset: 2px; }
.opt-pills--sizes .opt-face { min-width: 44px; padding: 0 10px; justify-content: center; }
.opt-pill[data-sold-out="true"] { pointer-events: none; }
.opt-pill[data-sold-out="true"] .opt-face {
  color: rgba(140,140,136,.35); border-color: var(--edge);
  background: transparent; overflow: hidden; position: relative;
}
.opt-pill[data-sold-out="true"] .opt-face::after {
  content: ''; position: absolute;
  top: 50%; left: -10%; width: 120%; height: 1px;
  background: rgba(140,140,136,.35); transform: rotate(-28deg);
}

/* ── colour swatches ─────────────────────────────────────────── */
.swatch { width: 14px; height: 14px; border: 1px solid rgba(0,0,0,.2); flex-shrink: 0; }
.sw-basalt   { background: var(--basalt); }
.sw-graphite { background: var(--graphite); }

/* ── size guide link ─────────────────────────────────────────── */
.size-guide-link {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey); text-decoration: underline; text-underline-offset: 2px;
  transition: color .14s;
  padding: 0; background: none; border: 0; cursor: pointer;
}
.size-guide-link:hover { color: var(--bone); }
.size-guide-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── buy button ──────────────────────────────────────────────── */
.buy-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 54px;
  padding: 14px 18px;
  background: var(--bone); color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border: 1.5px solid var(--bone);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: color .18s var(--ease), letter-spacing .22s var(--ease);
}
.buy-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--red);
  transform: translateX(-101%);
  transition: transform .3s var(--ease);
  z-index: 0;
}
.buy-btn:hover::before { transform: translateX(0); }
.buy-btn:hover { color: var(--bone); }
.buy-btn > * { position: relative; z-index: 1; }
.buy-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.buy-btn[disabled] { background: var(--edge); color: var(--grey); border-color: var(--edge); cursor: not-allowed; }
.buy-btn[disabled]::before { display: none; }
.buy-btn[data-status="loading"] { letter-spacing: .22em; }
.buy-btn[data-status="success"] { background: transparent; color: var(--bone); border-color: var(--grey); }
.buy-btn[data-status="success"]::before { display: none; }
.buy-btn[data-status="failed"] { background: var(--red); color: var(--bone); border-color: var(--red); }
.buy-btn[data-status="failed"]::before { display: none; }
.buy-btn-arrow { font-family: var(--mono); font-weight: 400; }
.buy-msg {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey); min-height: 16px;
}
.buy-msg[data-tone="ok"]   { color: var(--bone); }
.buy-msg[data-tone="warn"] { color: var(--red); }

/* ── trust strip ─────────────────────────────────────────────── */
.trust-strip {
  display: flex; gap: 16px; flex-wrap: wrap;
  list-style: none; padding: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey);
}
.trust-strip li { display: flex; align-items: center; gap: 6px; }
.trust-dot { width: 4px; height: 4px; background: var(--grey); border-radius: 50%; }

/* ── photography grid ────────────────────────────────────────── */
.product-photos { border-top: 1px solid var(--edge); }
.photos-head { padding: clamp(20px,3vh,32px) clamp(18px,3vw,40px); border-bottom: 1px solid var(--edge); }
.sec-num--photos { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.sec-num--photos span { color: var(--bone); margin-right: 14px; }
.photos-grid { display: grid; grid-template-columns: 1.2fr 1fr; }
.photos-col-right { display: flex; flex-direction: column; }
.ph-cell {
  position: relative; overflow: hidden;
  background: var(--panel);
  border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
}
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cell--tall { aspect-ratio: 3/4; }
.ph-cell--half { flex: 1; min-height: 240px; border-top: 0; }
.ph-cell--half + .ph-cell--half { border-top: 1px solid var(--edge); }
.ph-cell--full { aspect-ratio: 16/7; border-right: 0; width: 100%; }
.ph-caption {
  position: absolute; bottom: 16px; right: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); opacity: .6;
}

/* ── asset placeholder ───────────────────────────────────────── */
.ph-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(237,235,230,.04) 39px 39.5px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(237,235,230,.04) 39px 39.5px),
    var(--panel);
}
.ph-name {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); opacity: .7;
}
.ph-spec {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); opacity: .6;
}

/* ── .asset-pending — generic empty state for photo/video slots ─ */
/* Usage: <div class="asset-pending" data-label="Hero photo · 4:5"> */
.asset-pending {
  position: relative;
  background: var(--panel);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 47px, rgba(237,235,230,.04) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(237,235,230,.04) 47px 48px);
  overflow: hidden;
}
.asset-pending > img,
.asset-pending > video { opacity: 0; pointer-events: none; }
.asset-pending::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(237,235,230,.2);
  pointer-events: none;
}
.asset-pending::after {
  content: attr(data-label);
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); opacity: .45;
  white-space: nowrap; pointer-events: none;
}

/* ── engineering section ─────────────────────────────────────── */
.engineering { border-top: 1px solid var(--edge); padding: clamp(64px,10vh,120px) 0; }
.eng-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px,5vw,72px); align-items: start; margin-top: clamp(32px,5vh,56px); }
.eng-diagram { width: 100%; }
.cons-diag { border: 1px solid var(--edge); background: var(--panel); padding: clamp(20px,3vw,36px); color: var(--bone); }
.cons-diag svg { width: 100%; height: auto; display: block; }
.eng-detail { display: flex; flex-direction: column; gap: 0; }
.eng-callout {
  display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start;
  padding: clamp(20px,3vh,28px) 0;
  border-bottom: 1px solid var(--edge);
}
.eng-callout:first-child { border-top: 1px solid var(--edge); }
.eng-num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--grey); padding-top: 3px; }
.eng-callout h3 { font-family: var(--disp); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; }
.eng-callout p { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--grey); }
.eng-callout small { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--edge); }
.eng-origin {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start;
  padding: clamp(24px,4vh,36px) 0;
  border-bottom: 1px solid var(--edge);
}
.eng-origin-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; }
.eng-origin-hero { font-family: var(--disp); font-weight: 900; font-size: clamp(18px,2.2vw,26px); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 14px; }
.eng-origin-body { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--grey); }
.eng-origin-stat { text-align: right; flex-shrink: 0; }
.origin-n { display: block; font-family: var(--disp); font-weight: 900; font-size: clamp(48px,6vw,80px); line-height: .86; letter-spacing: -.04em; }
.origin-u { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-top: 6px; }

/* ── reveal animation ────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 560ms linear, transform 560ms var(--ease-o); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── facts bar ───────────────────────────────────────────────── */
.facts-zone { border-top: 1px solid var(--edge); }
.facts-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--edge);
}
.facts-item {
  padding: clamp(16px,2.5vh,24px) clamp(16px,2vw,24px);
  border-right: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 6px;
}
.facts-item:last-child { border-right: 0; }
.facts-item dt { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.facts-item dd { font-family: var(--disp); font-size: clamp(15px,1.6vw,20px); font-weight: 800; letter-spacing: -.01em; color: var(--bone); }

/* ── sizing panel (inline) ───────────────────────────────────── */
.sizing-inline { border-bottom: 1px solid var(--edge); }
.sizing-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: clamp(14px,2vh,20px) clamp(16px,2vw,24px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
  background: none; border: 0; cursor: pointer;
  transition: color .14s;
}
.sizing-toggle:hover { color: var(--bone); }
.sizing-toggle[aria-expanded="true"] .sizing-arrow { transform: rotate(180deg); }
.sizing-arrow { transition: transform .22s var(--ease); display: inline-block; }
.sizing-panel { padding: 0 clamp(16px,2vw,24px) clamp(16px,2vh,24px); }
.sizing-panel[hidden] { display: none; }
.sizing-note { font-family: var(--mono); font-size: 11px; line-height: 1.65; color: var(--grey); margin-top: 14px; }

/* ── sizing table (shared by panel + dialog) ─────────────────── */
.sizing-tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.sizing-tbl th { text-align: left; padding: 8px 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); border-bottom: 1px solid var(--edge); }
.sizing-tbl td { padding: 10px 12px; border-bottom: 1px solid rgba(237,235,230,.07); color: var(--bone); }
.sizing-tbl tbody tr:last-child td { border-bottom: 0; }
.sizing-tbl td:first-child { font-weight: 700; color: var(--bone); }

/* ── second buy section ──────────────────────────────────────── */
.buy-repeat { border-top: 1px solid var(--edge); padding: clamp(64px,10vh,120px) 0; }
.buy-repeat-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px,6vw,96px); align-items: start; }
.buy-repeat-head { position: sticky; top: calc(var(--h-hdr) + 24px); }
.buy-repeat-price { font-family: var(--disp); font-weight: 900; font-size: clamp(40px,5vw,64px); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 12px 0 10px; }
.buy-repeat-tax { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.buy-repeat-form { display: flex; flex-direction: column; gap: 20px; }
.buy-contact { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--grey); padding-top: 4px; }
.buy-contact a { color: var(--bone); border-bottom: 1px solid var(--grey); transition: border-color .14s; }
.buy-contact a:hover { border-color: var(--bone); }
.buy-contact-hours { margin-top: 4px; font-size: 11px; }

/* ── footer ──────────────────────────────────────────────────── */
.site-ftr { border-top: 1px solid var(--edge); }
.ftr-wordmark {
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(72px,22vw,320px);
  line-height: .82; letter-spacing: -.04em; text-transform: uppercase;
  color: var(--bone);
  padding: clamp(16px,2.5vh,32px) clamp(18px,3vw,40px) clamp(10px,1.5vh,20px);
  border-top: 1px solid var(--edge);
  display: flex; align-items: baseline; gap: .06em;
  overflow: hidden;
  user-select: none; pointer-events: none;
}
.ftr-bracket { font-family: var(--mono); font-weight: 700; color: var(--red); }
.ftr-body {
  display: grid; grid-template-columns: 1.2fr repeat(4,1fr);
  gap: clamp(24px,4vw,60px);
  padding: clamp(40px,6vh,72px) clamp(18px,3vw,40px);
}
.ftr-brand .brand { font-size: 17px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.ftr-brand .brand .b { color: var(--red); font-family: var(--mono); }
.ftr-tagline { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); margin-top: 16px; }
.ftr-cols { display: contents; }
.ftr-col h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); font-weight: 400; margin-bottom: 16px; }
.ftr-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ftr-col a { font-family: var(--mono); font-size: 13px; color: var(--bone); transition: color .14s; }
.ftr-col a:hover { color: var(--grey); }
.ftr-col address { font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--bone); }
.ftr-legal {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: clamp(16px,2.5vh,24px) clamp(18px,3vw,40px);
  border-top: 1px solid var(--edge);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}
.ftr-address { font-style: normal; }

/* ── sticky buy bar (mobile) ─────────────────────────────────── */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--ink);
  border-top: 1px solid var(--edge);
  padding: 12px clamp(16px,4vw,24px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.sticky-bar[hidden] { display: none; }
.sticky-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sticky-bar-info { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.sticky-bar-sel { color: var(--bone); }
.sticky-bar-btn {
  flex-shrink: 0;
  background: var(--bone); color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border: 0; cursor: pointer;
  padding: 12px 20px; min-height: 44px;
  transition: background .14s;
}
.sticky-bar-btn:hover { background: #fff; }
.sticky-bar-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── sizing dialog ───────────────────────────────────────────── */
.sizing-dialog {
  background: var(--ink);
  border: 1px solid var(--edge);
  color: var(--bone);
  padding: 0;
  max-width: min(480px, calc(100vw - 32px));
  width: 100%;
  margin: auto;
}
.sizing-dialog::backdrop { background: rgba(13,13,13,.7); backdrop-filter: blur(4px); }
.sizing-dialog-inner { padding: clamp(20px,3vw,32px); }
.sizing-dialog-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sizing-dialog-title { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.sizing-dialog-close {
  background: none; border: 1px solid var(--edge); color: var(--bone);
  width: 32px; height: 32px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .14s;
}
.sizing-dialog-close:hover { border-color: var(--bone); }
.sizing-dialog-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sizing-dialog-note { font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--grey); margin-top: 16px; }

/* ── toast ───────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 200;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--edge);
  color: var(--bone); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  max-width: min(520px, calc(100vw - 32px));
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.toast-wrap[hidden] { display: none; }
.toast-wrap.is-on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-dot { width: 8px; height: 8px; background: var(--grey); flex-shrink: 0; }
.toast-wrap[data-tone="ok"]   .toast-dot { background: var(--bone); }
.toast-wrap[data-tone="warn"] .toast-dot { background: var(--red); }
.toast-body { flex: 1; }
.toast-close { background: none; border: 0; color: var(--grey); font-size: 18px; cursor: pointer; padding: 0 0 0 8px; line-height: 1; transition: color .14s; }
.toast-close:hover { color: var(--bone); }

/* ════════════════════════════════════════════════
   RESPONSIVE — new layout only
════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .eng-grid { grid-template-columns: 1fr; }
  .eng-diagram { max-width: 520px; }
  .buy-repeat-inner { grid-template-columns: 1fr; gap: 32px; }
  .buy-repeat-head { position: static; }
  .ftr-body { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* Show hamburger, hide desktop nav + buy */
  .site-hdr .nav { display: none; }
  .hdr-buy { display: none; }
  .site-hdr .menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; position: relative; }

  /* Hero stacks vertically */
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
  .hero-media { position: static; height: auto; aspect-ratio: 4/3; border-right: 0; border-bottom: 1px solid var(--edge); }
  .hero-config { padding: 32px 20px 120px; } /* extra bottom for sticky bar */

  /* Photography */
  .photos-grid { grid-template-columns: 1fr; }
  .photos-col-right { flex-direction: row; }
  .ph-cell--tall { aspect-ratio: 3/2; }
  .ph-cell--half { min-height: 200px; }
  .ph-cell--half + .ph-cell--half { border-top: 0; border-left: 1px solid var(--edge); }
  .ph-cell--full { aspect-ratio: 16/9; }

  /* Facts bar */
  .facts-bar { grid-template-columns: 1fr 1fr; }
  .facts-item:nth-child(2) { border-right: 0; }
  .facts-item:nth-child(3) { border-top: 1px solid var(--edge); }
  .facts-item:nth-child(4) { border-top: 1px solid var(--edge); border-right: 0; }

  /* Footer */
  .ftr-body { grid-template-columns: 1fr; gap: 32px; padding: 36px 20px; }
  .ftr-cols { display: flex; flex-direction: column; gap: 28px; }
  .ftr-wordmark { padding: 16px 20px 12px; }
  .ftr-legal { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 20px; }

  /* Toast bottom offset when sticky bar visible */
  .has-sticky-bar .toast-wrap { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .hero-config { gap: 18px; }
  .product-h1 { font-size: clamp(40px, 12vw, 60px); }
  .photos-col-right { flex-direction: column; }
  .ph-cell--half + .ph-cell--half { border-left: 0; border-top: 1px solid var(--edge); }
  .facts-bar { grid-template-columns: 1fr 1fr; }
  .eng-origin { grid-template-columns: 1fr; }
  .eng-origin-stat { display: none; }
  .trust-strip { gap: 10px; }
}

/* Focus baseline (new) */
.site-hdr :focus-visible,
.hero-split :focus-visible,
.engineering :focus-visible,
.facts-zone :focus-visible,
.buy-repeat :focus-visible,
.site-ftr :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: var(--bone); }

/* ═══════════════════════════════════════════════════════════════
   CONVERSION REFINEMENT — landing page polish
   ═══════════════════════════════════════════════════════════════ */

:root {
  --max: 1180px;
  --soft-edge: color-mix(in srgb, var(--bone) 12%, transparent);
}

body { background: var(--ink); }
.wrap { max-width: var(--max); }

.site-hdr {
  padding: 12px clamp(18px,3vw,42px);
  min-height: var(--h-hdr);
}
.site-hdr .brand { font-size: 16px; }
.hdr-buy {
  border: 1px solid var(--edge);
  padding: 10px 15px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--bone);
  background: color-mix(in srgb, var(--bone) 4%, transparent);
}
.hdr-buy:hover { border-color: var(--bone); background: color-mix(in srgb, var(--bone) 8%, transparent); }

.hero-split {
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, .9fr);
  min-height: calc(100svh - var(--h-hdr));
  background: var(--ink);
}
.hero-media {
  background: #090909;
  height: calc(100svh - var(--h-hdr));
}
.hero-img { object-position: center 52%; }
.hero-fig-label { opacity: .72; }

.hero-config {
  justify-content: center;
  gap: clamp(18px, 2.7vh, 28px);
  padding: clamp(44px,7vh,86px) clamp(30px,4.5vw,64px);
  border-left: 1px solid var(--edge);
}
.product-eyebrow { color: var(--bone); }
.product-h1 {
  font-size: clamp(54px, 6vw, 88px);
  max-width: 8ch;
}
.product-mat {
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--bone) 68%, transparent);
}
.price-block {
  padding: 20px 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.price-row { flex-wrap: wrap; row-gap: 4px; }
.price-val { font-size: clamp(34px, 4vw, 48px); }
.price-tax, .price-policy { line-height: 1.65; }

.opt-group {
  padding-top: 2px;
}
.opt-legend { margin-bottom: 12px; color: color-mix(in srgb, var(--bone) 58%, transparent); }
.opt-pills { gap: 10px; }
.opt-face {
  min-height: 48px;
  border-color: var(--soft-edge);
  background: color-mix(in srgb, var(--bone) 3%, transparent);
}
.opt-pill input:checked + .opt-face {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.buy-btn {
  min-height: 62px;
  padding: 18px 20px;
  font-size: 12px;
  letter-spacing: .14em;
}
.buy-msg { margin-top: -8px; }
.trust-strip {
  padding-top: 2px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--bone) 62%, transparent);
}
.trust-dot { background: var(--red); }

.trust-panel {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: color-mix(in srgb, var(--bone) 2%, transparent);
  padding: clamp(54px,8vh,88px) 0;
}
.trust-panel-inner {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) 1.25fr;
  gap: clamp(34px,6vw,82px);
  align-items: start;
}
.trust-panel-head h2 {
  margin-top: 12px;
  max-width: 9ch;
  font-size: clamp(34px,4.5vw,60px);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}
.trust-grid > div {
  padding: clamp(20px,3vw,30px);
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.trust-grid dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 10px;
}
.trust-grid dd {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--grey);
}


.product-photos { background: var(--ink); }
.photos-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(24px,4vh,40px) 60px;
  border-left: 0;
  border-right: 0;
}
.photos-grid {
  max-width: var(--max);
  margin: 0 auto;
  grid-template-columns: 1.35fr .95fr;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.photos-col-right { gap: 1px; background: var(--edge); }
.ph-cell { border: 0; background: #111; }
.ph-cell--tall { aspect-ratio: 4/5; }
.ph-cell--half { min-height: 280px; }
.ph-cell--full {
  max-width: var(--max);
  margin: 1px auto 0;
  border: 1px solid var(--edge);
  aspect-ratio: 16/6.5;
}
.ph-placeholder {
  background:
    linear-gradient(135deg, rgba(237,235,230,.055), transparent 42%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(237,235,230,.035) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(237,235,230,.035) 47px 48px),
    #121211;
}
.ph-name { opacity: .88; }
.ph-spec { max-width: 32ch; line-height: 1.55; }

.engineering {
  padding: clamp(58px,9vh,104px) 0;
}
.sec-head { margin-bottom: clamp(30px,5vh,46px); }
.eng-grid { gap: clamp(34px,5vw,64px); }
.cons-diag { background: color-mix(in srgb, var(--bone) 3%, transparent); }
.eng-callout p, .eng-origin-body { color: color-mix(in srgb, var(--bone) 62%, transparent); }
.eng-callout small { color: var(--grey); opacity: .72; }


.faq {
  border-top: 1px solid var(--edge);
  padding: clamp(58px,9vh,104px) 0;
}
.faq .sec-head { align-items: flex-end; }
.faq-list {
  border-top: 1px solid var(--edge);
}
.faq-list details {
  border-bottom: 1px solid var(--edge);
}
.faq-list summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(17px,2vw,24px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 20px 0;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 20px;
  color: var(--grey);
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: "-"; }
.faq-list p {
  max-width: 68ch;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--grey);
  padding: 0 0 24px;
}

.buy-repeat {
  padding: clamp(62px,10vh,116px) 0;
  background: color-mix(in srgb, var(--bone) 3%, transparent);
}
.buy-repeat-inner {
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1fr);
  gap: clamp(34px,6vw,78px);
}
.buy-repeat-head { top: calc(var(--h-hdr) + 28px); }
.buy-repeat-price { font-size: clamp(46px,6vw,78px); }
.buy-repeat-form {
  border: 1px solid var(--edge);
  padding: clamp(24px,4vw,38px);
  background: var(--ink);
}
.buy-contact { border-top: 1px solid var(--edge); padding-top: 16px; }

/* product image slot in sticky buy-repeat head */
.buy-repeat-img {
  width: 100%;
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--edge);
  margin-bottom: clamp(20px,3vh,28px);
}
.buy-repeat-img picture { display: block; width: 100%; height: 100%; }
.buy-repeat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* trust strip appears above CTA — add separator */
.hero-config .trust-strip,
.buy-repeat-form .trust-strip {
  padding-bottom: clamp(14px,2vh,18px);
  border-bottom: 1px solid var(--edge);
}

.ftr-wordmark { font-size: clamp(32px,15vw,220px); }

@media (max-width: 1100px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-media {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 16/10;
  }
  .hero-config { border-left: 0; border-top: 1px solid var(--edge); }
  .trust-panel-inner { grid-template-columns: 1fr; }
  .trust-panel-head h2 { max-width: 14ch; }
}

@media (max-width: 860px) {
  .hero-media { aspect-ratio: 4/3; }
  .hero-config {
    padding: 30px 20px 34px;
    gap: 18px;
  }
  .product-h1 { max-width: none; }
  .product-mat { font-size: 12px; }
  .price-block { padding: 16px 0; }
  .buy-btn { min-height: 58px; }
  .trust-panel { padding: 46px 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .photos-head { padding: 26px 22px; }
  .photos-grid { margin: 0 20px; grid-template-columns: 1fr; }
  .photos-col-right { flex-direction: column; }
  .ph-cell--tall { aspect-ratio: 4/4.6; }
  .ph-cell--half { min-height: 220px; }
  .ph-cell--half + .ph-cell--half { border: 0; }
  .ph-cell--full { margin: 1px 20px 0; aspect-ratio: 4/3; }
  .eng-diagram { max-width: none; }
  .buy-repeat-form { padding: 22px; }
  .sticky-bar-info { max-width: 48vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buy-repeat-img { aspect-ratio: 16/9; }
}

@media (max-width: 560px) {
  .site-hdr { padding: 10px 18px; }
  .hero-media { aspect-ratio: 1 / 1; }
  .hero-config { padding-inline: 18px; }
  .product-h1 { font-size: clamp(44px, 14vw, 62px); }
  .price-row { align-items: flex-start; }
  .price-tax { flex-basis: 100%; padding-left: 20px; }
  .opt-face { min-height: 46px; padding-inline: 14px; }
  .trust-strip { display: grid; gap: 8px; }
  .trust-grid > div { padding: 20px; }
  .faq-list summary { font-size: 17px; line-height: 1.15; }
  .buy-repeat { padding-bottom: 94px; }
  .buy-repeat-form { margin-inline: -2px; }
  .sticky-bar-inner { gap: 10px; }
  .sticky-bar-btn { padding-inline: 14px; letter-spacing: .1em; }
}


/* cons-diag with real image (light background from diagram) */
.cons-diag img { display: block; width: 100%; height: auto; }

/* ── Process page atmosphere image ───────────────────────── */
.process-atmo {
  display: block; margin: 0;
  border-bottom: 1px solid var(--edge);
  overflow: hidden; max-height: 60vh;
}
.process-atmo picture { display: block; }
.process-atmo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── home hero ───────────────────────────────────────────────── */
.home-hero {
  min-height: calc(100dvh - var(--h-hdr)); border-bottom: 1px solid var(--edge);
  position: relative; overflow: hidden;
}
.home-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(13,13,13,.2)  0%,
    rgba(13,13,13,.55) 55%,
    rgba(13,13,13,.85) 100%);
}
.home-hero-media {
  position: absolute; inset: 0; z-index: 0;
}
.home-hero-media picture { display: block; width: 100%; height: 100%; }
.home-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.home-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(48px,8vh,96px) clamp(18px,3vw,40px);
  min-height: inherit;
  display: flex; flex-direction: column; justify-content: space-between;
}
.home-hero-kicker { margin-bottom: 0; }
.home-hero-h {
  font-weight: 900; font-size: clamp(48px,7vw,120px);
  line-height: .9; letter-spacing: -.04em; text-transform: uppercase;
  margin: clamp(20px,4vh,44px) 0;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.home-hero-h em { font-style: normal; color: var(--red); }
.home-hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-top: 24px;
  border-top: 1px solid rgba(237,235,230,.2);
}
.home-hero-price { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,235,230,.65); }
.home-hero-cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--bone); color: var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 18px 28px; min-height: 52px;
  transition: background .14s; flex-shrink: 0;
}
.home-hero-cta:hover { background: #fff; }
.home-hero-cta:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ── home: brand positioning ─────────────────────────────────── */
.home-pos-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone);
  border-bottom: 1px solid var(--grey); padding-bottom: 1px; transition: border-color .14s;
}
.home-pos-link:hover { border-color: var(--bone); }

/* ── featured product strip ──────────────────────────────────── */
.prod-strip {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
}
.prod-strip-media {
  background: var(--panel); border-right: 1px solid var(--edge);
  min-height: 480px; position: relative; overflow: hidden;
}
.prod-strip-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.prod-strip-body {
  padding: clamp(40px,6vh,80px) clamp(32px,4vw,60px);
  display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
.prod-strip-name { font-weight: 900; font-size: clamp(42px,5.5vw,72px); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin-top: 10px; }
.prod-strip-mat { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--grey); }
.prod-strip-price { font-family: var(--disp); font-weight: 900; font-size: clamp(26px,3vw,38px); letter-spacing: -.02em; }
.prod-strip-specs {
  list-style: none; padding: 0;
  border-top: 1px solid var(--edge); padding-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey);
}
.prod-strip-specs li::before { content: "— "; color: var(--edge); }
.prod-strip-link {
  align-self: flex-start; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
  border-bottom: 1px solid var(--grey); padding-bottom: 2px; transition: border-color .14s;
}
.prod-strip-link:hover { border-color: var(--bone); }

/* ── belief block ────────────────────────────────────────────── */
.home-belief { background: color-mix(in srgb, var(--bone) 2%, transparent); }
.belief-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--edge); border-left: 1px solid var(--edge);
  margin-top: clamp(28px,4vh,44px);
}
.belief-item { padding: clamp(20px,3vw,32px); border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.belief-item dt { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
.belief-item dd { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--bone); margin: 0; }
.belief-item--cta { display: flex; align-items: flex-end; }
.belief-item--cta a { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--grey); transition: border-color .14s; }
.belief-item--cta a:hover { border-color: var(--bone); }

/* ── responsive — home ───────────────────────────────────────── */
@media (max-width: 860px) {
  .home-hero-h { font-size: clamp(40px,9vw,90px); }
  .home-hero-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .prod-strip { grid-template-columns: 1fr; }
  .prod-strip-media { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--edge); }
  .belief-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .home-hero-h { font-size: clamp(36px,11vw,64px); }
  .belief-grid { grid-template-columns: 1fr; }
  .prod-strip-body { padding: 32px 22px; }
}


/* ═══════════════════════════════════════════════════════════════
   CONFIRM PANEL — post-payment success state (shop page)
   ═══════════════════════════════════════════════════════════════ */

#confirm-panel {
  display: none;
  flex-direction: column;
  gap: 22px;
}
#confirm-panel.is-shown { display: flex; }

.confirm-ey { margin-bottom: 0; }
.confirm-h {
  font-weight: 900;
  font-size: clamp(48px, 6vw, 76px);
  line-height: .9; letter-spacing: -.03em; text-transform: uppercase;
  margin: 0;
}
.confirm-body {
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--grey);
}
.confirm-details {
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  padding: 16px 0; display: flex; flex-direction: column; gap: 14px;
}
.confirm-details > div {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px;
}
.confirm-details dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); padding-top: 2px; flex-shrink: 0; }
.confirm-details dd { color: var(--bone); word-break: break-all; }
.confirm-next-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 12px;
}
.confirm-steps {
  list-style: none; padding: 0;
  counter-reset: cs;
  display: flex; flex-direction: column; gap: 10px;
}
.confirm-steps li {
  font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--bone);
  padding-left: 30px; position: relative; counter-increment: cs;
}
.confirm-steps li::before {
  content: counter(cs, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-size: 10px; letter-spacing: .1em; color: var(--grey);
}
.confirm-actions { display: flex; gap: 24px; padding-top: 4px; }
.confirm-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); border-bottom: 1px solid var(--grey); padding-bottom: 1px; transition: border-color .14s;
}
.confirm-link:hover { border-color: var(--bone); }