/* Gyroid Studio — customer site.
   Type: Newsreader (display), IBM Plex Sans (text), IBM Plex Mono (measurements and specs).
   Palette: warm paper, ink, and one accent (vermilion) used sparingly. */

@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-var.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-italic-var.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/plex-sans-var.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F3F0E9;
  --paper-2: #ECE8DF;
  --paper-3: #E4DED2;        /* photo backdrop: the catalogue stills are rendered on exactly this */
  --card: #FAF8F3;
  --ink: #1C1B18;
  --ink-2: #46433C;
  --ink-3: #6A655B;
  --rule: #D8D1C3;
  --rule-strong: #B9B09E;
  --accent: #C4471B;
  --accent-ink: #A53A14;       /* accent text on paper, 4.5:1 or better */
  --accent-hover: #B03F17;
  --on-accent: #FFFFFF;        /* labels on accent buttons */
  --accent-wash: #F4E2D8;
  --accent-line: #EBC7B5;
  --accent-deep: #5C2A15;      /* text on the wash */
  --accent-deeper: #3F1C0E;
  --accent-light: #E7A083;     /* icons on the dark bands */
  --ok: #37623F;
  --ok-wash: #E1E9DC;
  --warn: #8A5A0C;
  --warn-wash: #F3E6C9;
  --danger: #A32A1C;
  --danger-wash: #F5DCD6;

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --max: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --col-gap: clamp(16px, 2vw, 32px);
  --section: clamp(56px, 9vw, 136px);   /* tighter on phones; the same from ~800 px up */
  --radius: 3px;
  --shadow-pop: 0 1px 2px rgba(28, 27, 24, .06), 0 12px 32px -12px rgba(28, 27, 24, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-text);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
.i { width: 1.15em; height: 1.15em; flex: none; }
p > .i, span > .i { display: inline-block; vertical-align: -0.2em; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
::selection { background: var(--accent-wash); color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--paper); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- layout ------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.band { background: var(--paper-2); }
.rule-top { border-top: 1px solid var(--rule); }

/* ---- type --------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.9rem);
  line-height: .98;
  letter-spacing: -.024em;
  font-variation-settings: 'opsz' 72;
  text-wrap: balance;
}
.display em, .h2 em { font-style: italic; font-weight: 360; }
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.018em;
  font-variation-settings: 'opsz' 60;
  text-wrap: balance;
}
.h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; font-variation-settings: 'opsz' 36; }
.h4 { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.lede { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.muted { color: var(--ink-3); }
.small { font-size: .875rem; line-height: 1.5; }
.mono { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .01em; font-feature-settings: 'zero' 0; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--accent); flex: none; }
.eyebrow--plain::before { display: none; }
.prose { max-width: 38em; }
.prose p { text-wrap: pretty; }

/* ---- demo notice (DEMO_MODE only) ---------------------------------------------------- */
.demo-bar { background: var(--ink); color: #E9E4D8; font-size: .875rem; line-height: 1.45; }
.demo-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 10px; }
.demo-bar p { margin: 0; max-width: 62em; }
.demo-bar b { color: #fff; font-weight: 600; }
.demo-bar a { display: inline-flex; align-items: center; gap: 6px; flex: none; color: #fff; font-weight: 500; }
.demo-bar a:hover { color: #fff; }
.demo-bar .i { width: 15px; height: 15px; }
.demo-bar :focus-visible { outline-color: #fff; }
@media (max-width: 720px) { .demo-bar__inner { flex-direction: column; align-items: flex-start; } }

/* ---- header ------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header__inner { display: flex; align-items: center; gap: 32px; height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.wordmark:hover { color: var(--ink); }
.wordmark__mark { width: 30px; height: 30px; flex: none; }
.brand-mono { display: grid; place-items: center; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1; font-variation-settings: 'opsz' 24; }
img.wordmark__mark { width: auto; max-width: 120px; height: 32px; object-fit: contain; }
.wordmark--logo { gap: 0; }
.wordmark__logo { display: block; height: 38px; width: auto; max-width: min(220px, 52vw); object-fit: contain; object-position: left center; }
.wordmark__text { display: flex; align-items: baseline; gap: 7px; line-height: 1; }
.wordmark__name { font-family: var(--font-display); font-size: 1.62rem; font-weight: 450; letter-spacing: -.02em; font-variation-settings: 'opsz' 48; }
.wordmark__desc { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); transform: translateY(-2px); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { position: relative; padding: 8px 12px; font-size: .9375rem; font-weight: 450; text-decoration: none; color: var(--ink-2); border-radius: var(--radius); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); }
.nav a[aria-current='page']::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1.5px; background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.cart-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.cart-link:hover { border-color: var(--ink); color: var(--ink); }
.cart-link svg { width: 18px; height: 18px; }
.cart-count { min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--paper); font: 500 .75rem/1 var(--font-mono); }
.cart-count[data-count='0'] { background: transparent; color: var(--ink-3); border: 1px solid var(--rule-strong); }
.menu-button { display: none; }

@media (max-width: 960px) {
  .site-header__inner { height: 64px; gap: 12px; }
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: transparent; }
  .menu-button svg { width: 20px; height: 20px; }
  .cart-link span.cart-label { display: none; }
  .wordmark__name { font-size: 1.45rem; }
  .mobile-nav { position: fixed; inset: 64px 0 0; background: var(--paper); z-index: 39; padding: 20px var(--gutter) 40px; overflow-y: auto; display: none; }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: 1.6rem; text-decoration: none; }
  .mobile-nav .mobile-nav__meta { margin-top: 28px; }
}
@media (min-width: 961px) { .mobile-nav { display: none !important; } }
@media (max-width: 400px) { .wordmark__desc { display: none; } }

/* ---- buttons & links ---------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-border: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border: 1px solid var(--btn-border); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.btn:hover { color: var(--btn-fg); background: color-mix(in srgb, var(--btn-bg) 86%, var(--paper)); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease); }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn--accent { --btn-bg: var(--accent); --btn-border: var(--accent); --btn-fg: var(--on-accent); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--rule-strong); }
.btn--ghost:hover { background: var(--card); border-color: var(--ink); color: var(--ink); }
.btn--small { min-height: 38px; padding: 0 14px; font-size: .875rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; transform: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; }
.link-arrow:hover { border-bottom-color: var(--accent-ink); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---- hero --------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__lines { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.55) 38%, #000 70%), linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.55) 38%, #000 70%), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }
.hero__grid { align-items: center; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 72px); }
.hero__copy { grid-column: 1 / span 6; position: relative; z-index: 1; }
.hero__copy .display { margin: 22px 0 26px; max-width: 9.5em; }
.hero__copy .lede { max-width: 31em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--rule); max-width: 34em; }
.hero__fact { display: inline-flex; align-items: center; gap: 9px; font-size: .875rem; color: var(--ink-2); }
.hero__fact svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status-dot.is-open { background: #3E8E4E; box-shadow: 0 0 0 3px rgba(62, 142, 78, .16); }
.hero__art { grid-column: 7 / span 6; position: relative; margin: 0; }
.hero__art img { width: 100%; }
.drawing { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--ink-3); }
.drawing text { font-family: var(--font-mono); font-size: 21px; letter-spacing: .02em; fill: var(--ink-2); }
.drawing .dim { stroke: currentColor; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.drawing .tick { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.drawing .dot { fill: var(--accent); }
@media (max-width: 960px) {
  .hero__copy, .hero__art { grid-column: 1 / -1; }
  .hero__art { margin: 20px 0 0; }
  .hero__art img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 58%; }
  .drawing { display: none; }
  .hero__lines { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
}

/* ---- section heads ------------------------------------------------------------------ */
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head__title { grid-column: 1 / span 7; }
.section-head__title .eyebrow { margin-bottom: 18px; }
.section-head__aside { grid-column: 9 / span 4; color: var(--ink-2); }
.section-head__aside .link-arrow { margin-top: 14px; }
@media (max-width: 860px) { .section-head__title, .section-head__aside { grid-column: 1 / -1; } .section-head__aside { margin-top: 16px; } }

/* ---- two routes --------------------------------------------------------------------- */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.route { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); min-height: 100%; }
.route__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.route__index { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); letter-spacing: .06em; }
.route .h2 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); margin: 10px 0 14px; }
.route p { color: var(--ink-2); max-width: 30em; }
.route__visual { margin: 28px 0 30px; flex: 1; display: flex; align-items: flex-end; }
.route__cta { margin-top: auto; }
.readout { width: 100%; border: 1px solid var(--rule); background: var(--paper); border-radius: var(--radius); font-family: var(--font-mono); font-size: .8125rem; }
.readout__file { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.readout__file b { font-weight: 500; }
.readout dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.readout dl div { padding: 12px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.readout dl div:nth-child(3n) { border-right: 0; }
.readout dt { color: var(--ink-3); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.readout dd { margin: 0; color: var(--ink); }
.readout__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; }
.readout__total strong { font-family: var(--font-display); font-weight: 450; font-size: 1.9rem; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.shelf figure { margin: 0; }
.shelf img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-3); border-radius: 2px; width: 100%; }
.shelf figcaption { font-size: .8125rem; margin-top: 8px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 6px; }
@media (max-width: 860px) { .routes { grid-template-columns: 1fr; } }
/* A shop with nothing listed yet: the custom-print route alone, laid out across the page. */
.routes--single { grid-template-columns: 1fr; }
.routes--single .route__index { display: none; }
@media (min-width: 861px) {
  .routes--single .route { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(32px, 6vw, 96px); }
  .routes--single .route > * { grid-column: 1; }
  .routes--single .route__visual { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
  .routes--single .route__cta { margin-top: 28px; align-self: end; }
}
@media (max-width: 520px) { .readout__file { flex-direction: column; gap: 2px; } .readout dl div, .readout__file, .readout__total { padding-left: 12px; padding-right: 12px; } .readout { font-size: .75rem; } }

/* ---- steps -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); list-style: none; position: relative; }
.step { position: relative; padding-top: 34px; }
.step::before { content: ''; position: absolute; top: 5px; left: 0; right: calc(var(--col-gap) * -1); height: 1px; background: var(--rule-strong); }
.step:last-child::before { right: 0; }
.step::after { content: ''; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border: 1px solid var(--ink); background: var(--paper); border-radius: 50%; }
.step:last-child::after { background: var(--accent); border-color: var(--accent); }
.step__num { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); letter-spacing: .06em; }
.step h3 { margin: 8px 0 10px; }
.step p { color: var(--ink-2); font-size: 1rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } .step::before { right: 0; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; row-gap: 32px; } }

/* ---- cash band ---------------------------------------------------------------------- */
.cash { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.cash a { color: var(--paper); }
.cash .grid { align-items: start; }
.cash__title { grid-column: 1 / span 5; }
.cash__title .eyebrow { color: #CFC8B8; margin-bottom: 20px; }
.cash__title .h2 { color: var(--paper); }
.cash__title p { color: #CFC8B8; margin-top: 20px; max-width: 26em; }
.cash__points { grid-column: 7 / span 6; display: grid; gap: 0; }
.cash__point { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid #3A3833; }
.cash__point:last-child { border-bottom: 1px solid #3A3833; }
.cash__point svg { width: 28px; height: 28px; color: var(--accent-light); margin-top: 2px; }
.cash__point h3 { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; margin-bottom: 4px; }
.cash__point p { color: #CFC8B8; font-size: 1rem; }
.cash__lines { position: absolute; right: -80px; top: -40px; width: 520px; height: 520px; opacity: .1; color: var(--paper); pointer-events: none; }
@media (max-width: 900px) { .cash__title, .cash__points { grid-column: 1 / -1; } .cash__points { margin-top: 36px; } }

/* ---- materials table ---------------------------------------------------------------- */
.mat-table { border-top: 1px solid var(--ink); }
.mat-row { display: grid; grid-template-columns: minmax(150px, 2.2fr) 5fr repeat(3, minmax(88px, 1.2fr)) minmax(90px, 1fr); gap: var(--col-gap); align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.mat-row--head { padding: 12px 0; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mat-name { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; }
.mat-name small { display: block; font-family: var(--font-text); font-size: .8125rem; letter-spacing: 0; color: var(--ink-3); margin-top: 6px; }
.mat-summary { color: var(--ink-2); font-size: 1rem; }
.meter { display: flex; gap: 3px; align-items: center; }
.meter i { width: 12px; height: 12px; border: 1px solid var(--rule-strong); border-radius: 1px; }
.meter i.on { background: var(--ink); border-color: var(--ink); }
.meter-label { display: none; }
.mat-price { font-family: var(--font-mono); font-size: .8125rem; text-align: right; color: var(--ink-2); }
@media (max-width: 960px) {
  .mat-row--head { display: none; }
  .mat-row { grid-template-columns: 1fr 1fr 1fr; row-gap: 12px; }
  .mat-name, .mat-summary { grid-column: 1 / -1; }
  .meter-label { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
  .mat-price { grid-column: 1 / -1; text-align: left; }
}

/* ---- recent work -------------------------------------------------------------------- */
.work { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
.work-item { margin: 0; }
.work-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-3); border-radius: 2px; }
.work-item h3 { margin: 18px 0 8px; font-size: 1.3rem; }
.work-item p { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.spec-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
@media (max-width: 1080px) { .work { grid-template-columns: repeat(2, 1fr); row-gap: 48px; } }
@media (max-width: 520px) { .work { grid-template-columns: 1fr; } .work-item img { aspect-ratio: 5 / 4; } }

/* ---- reviews ------------------------------------------------------------------------ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.review { margin: 0; padding-top: 22px; border-top: 1px solid var(--rule-strong); }
.review blockquote { margin: 0 0 20px; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.38; letter-spacing: -.005em; font-variation-settings: 'opsz' 24; text-wrap: pretty; }
.review figcaption { font-size: .875rem; color: var(--ink-3); }
.review figcaption b { color: var(--ink); font-weight: 500; }
.sample-note svg { width: 14px; height: 14px; }
.sample-note { display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--rule-strong); padding: 5px 9px; border-radius: 2px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; row-gap: 28px; } }

/* ---- visit -------------------------------------------------------------------------- */
.visit { align-items: start; }
.visit__info { grid-column: 1 / span 5; }
.visit__map { grid-column: 7 / span 6; }
.address { font-style: normal; font-size: 1.125rem; line-height: 1.55; margin: 22px 0 28px; }
.hours { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hours th, .hours td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 600; }
.hours tr.is-today th::after { content: 'today'; margin-left: 10px; font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.note-list { margin-top: 26px; display: grid; gap: 14px; }
.note-list p { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); font-size: .9375rem; }
.note-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ink-3); }
.map { width: 100%; height: auto; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
/* A real shop's "map": drawn contours with a pin, its town and street, and a directions link. */
.place { position: relative; overflow: hidden; aspect-ratio: 640 / 460; display: flex; align-items: flex-end; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.place__drawing { position: absolute; inset: 0; width: 100%; height: 100%; }
.place__lines { color: var(--rule-strong); opacity: .7; }
.place__pin path { fill: var(--accent); }
.place__pin circle { fill: var(--paper-2); }
.place__body { position: relative; display: grid; justify-items: start; gap: 6px; padding: clamp(22px, 3vw, 36px); margin-right: 56px; background: linear-gradient(90deg, var(--paper-2) 60%, transparent); }
.place__town { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; font-variation-settings: 'opsz' 60; }
.place__street { margin: 0 0 12px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 560px) { .place { aspect-ratio: 4 / 3.4; } }
.map-caption a { white-space: nowrap; }
.map-caption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 900px) { .visit__info, .visit__map { grid-column: 1 / -1; } .visit__map { margin-top: 40px; } }

/* ---- footer ------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #D9D3C6; padding: clamp(56px, 7vw, 96px) 0 32px; font-size: .9375rem; }
.site-footer .wordmark { color: #F3F0E9; }
.site-footer .wordmark__desc { color: #A9A294; }
.site-footer a { color: #D9D3C6; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: #F3F0E9; }
.footer-grid { display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); gap: var(--col-gap); }
.footer-grid--no-shop { grid-template-columns: 2.2fr repeat(3, 1fr); }
.footer-brand p { color: #BDB6A8; max-width: 22em; margin-top: 18px; }
.footer-col h2 { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #A9A294; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { text-decoration: none; color: #D9D3C6; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid #3A3833; color: #A9A294; font-size: .8125rem; }
.footer-base .cash-tag { display: inline-flex; align-items: center; gap: 8px; color: #D9D3C6; }
.footer-base .cash-tag svg { width: 18px; height: 18px; color: var(--accent-light); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; } .footer-brand { grid-column: 1 / -1; } }

/* ---- page head ---------------------------------------------------------------------- */
.page-head { padding: clamp(36px, 5vw, 72px) 0 clamp(28px, 3.5vw, 48px); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; isolation: isolate; }
.page-head .grid { align-items: end; }
.page-head__title { grid-column: 1 / span 7; }
.page-head__title .display { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.4rem); margin-top: 16px; }
.page-head__aside { grid-column: 9 / span 4; color: var(--ink-2); }
.crumbs { display: flex; flex-wrap: wrap; gap: 2px 8px; white-space: nowrap; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); letter-spacing: .02em; }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
@media (max-width: 860px) { .page-head__title, .page-head__aside { grid-column: 1 / -1; } .page-head__aside { margin-top: 16px; } }

/* ---- shop --------------------------------------------------------------------------- */
.shop { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 3.5vw, 48px) 0 var(--section); }
.filters { position: sticky; top: 100px; align-self: start; display: grid; gap: 30px; }
.filter-group h2 { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.filter-list { list-style: none; display: grid; }
.filter-list a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid transparent; }
.filter-list a:hover { color: var(--ink); }
.filter-list a[aria-current='true'] { color: var(--ink); font-weight: 600; }
.filter-list a[aria-current='true'] .count { color: var(--ink); }
.filter-list .count { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; color: var(--ink-2); }
.check input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--card); display: grid; place-items: center; flex: none; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after { content: ''; width: 9px; height: 5px; border: 1.8px solid var(--paper); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type='radio'] { border-radius: 50%; }
.check input[type='radio']:checked { background: var(--card); border-color: var(--ink); }
.check input[type='radio']:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--ink); transform: none; }
.check:hover { color: var(--ink); }
.filter-help { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; font-size: .9375rem; color: var(--ink-2); }
.filter-help h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); text-transform: none; letter-spacing: -.005em; margin-bottom: 6px; font-weight: 450; }
.filter-help .link-arrow { margin-top: 12px; font-size: .9375rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); }
.toolbar__count { font-size: .9375rem; color: var(--ink-2); }
.toolbar__count b { color: var(--ink); font-weight: 600; }
.select { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink-2); }
.select select { appearance: none; height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231C1B18' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink); font-weight: 500; }
.select select:hover { border-color: var(--ink); }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: 2px; font-size: .8125rem; text-decoration: none; color: var(--ink-2); background: var(--card); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip svg { width: 12px; height: 12px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--col-gap); }
.product-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.product-card:hover { color: var(--ink); }
.product-card__image { position: relative; aspect-ratio: 4 / 5; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-card__image img { transform: scale(1.025); }
.product-card__badge { position: absolute; left: 12px; top: 12px; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 5px 8px; border-radius: 2px; }
.product-card__body { padding-top: 14px; display: grid; gap: 6px; }
.product-card__title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.product-card__title h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.product-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.product-card__price { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.product-card__price small { color: var(--ink-3); font-weight: 400; font-size: .8125rem; margin-right: 3px; }
.product-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .8125rem; color: var(--ink-3); }
.availability { display: inline-flex; align-items: center; gap: 7px; }
.availability::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.availability.is-stock { color: var(--ok); }
.availability.is-stock::before { background: #3E8E4E; }
.swatches { display: flex; align-items: center; gap: 4px; }
.swatch { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 27, 24, .18); }
.swatches .more { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); margin-left: 3px; }
.filter-toggle { display: none; }
.empty-state { grid-column: 1 / -1; padding: 64px 32px; text-align: center; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--ink-2); }
.empty-state h2 { font-family: var(--font-display); font-size: 1.75rem; color: var(--ink); margin-bottom: 8px; }
.empty-state .btn { margin-top: 20px; }
.empty-state--page { padding-block: clamp(48px, 8vw, 96px); margin-bottom: var(--section); }
.empty-state--page p { max-width: 34em; margin-inline: auto; }
.empty-state--page .hero__actions { justify-content: center; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .shop { grid-template-columns: 1fr; }
  .filters { position: static; display: none; padding: 20px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
  .filters.is-open { display: grid; }
  .filter-toggle { display: inline-flex; }
}
@media (max-width: 520px) { .product-grid { gap: 32px 12px; } .product-card__meta .swatches { display: none; } .product-card__title { flex-direction: column; gap: 2px; } .product-card__title h3 { font-size: 1rem; } }

/* ---- forms -------------------------------------------------------------------------- */
.field { display: grid; gap: 7px; align-content: start; }
.field label, .field .label { font-size: .875rem; font-weight: 500; color: var(--ink); }
.field .hint { font-size: .8125rem; color: var(--ink-3); }
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field select { appearance: none; padding-right: 36px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231C1B18' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center; }
.input, .textarea, .field select {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background-color: var(--card); color: var(--ink); font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select.input, .field select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .textarea:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28, 27, 24, .1); }
.field.has-error .input, .field.has-error .textarea { border-color: var(--danger); }
.field .error { font-size: .8125rem; color: var(--danger); }
.notice { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); font-size: .9375rem; color: var(--ink-2); }
.notice svg { width: 20px; height: 20px; margin-top: 1px; color: var(--ink-2); }
.notice--warn { background: var(--warn-wash); border-color: #E2CB98; color: #5B400D; }
.notice--warn svg { color: var(--warn); }
.notice--danger { background: var(--danger-wash); border-color: #E9B8AE; color: #6E1D13; }
.notice--danger svg { color: var(--danger); }
.notice--ok { background: var(--ok-wash); border-color: #BFD1B7; color: #28472E; }
.notice--ok svg { color: var(--ok); }
.notice b { color: inherit; }

/* ---- quote tool --------------------------------------------------------------------- */
.quote { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(20px, 2.4vw, 36px); padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px); align-items: start; }
.stage { display: grid; gap: 12px; align-content: start; min-width: 0; }
.viewer { position: relative; height: clamp(420px, 44vw, 620px); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.viewer canvas { width: 100%; height: 100%; touch-action: none; cursor: grab; }
.viewer canvas.is-dragging { cursor: grabbing; }
.viewer__top { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
.viewer__top > * { pointer-events: auto; }
.file-tag { display: grid; gap: 2px; background: color-mix(in srgb, var(--paper) 90%, transparent); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 12px; max-width: 60%; }
.file-tag b { font-weight: 500; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tag span { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
.view-buttons { display: flex; background: color-mix(in srgb, var(--paper) 90%, transparent); border: 1px solid var(--rule); border-radius: var(--radius); }
.view-buttons button { height: 34px; padding: 0 11px; border: 0; background: transparent; font-size: .8125rem; color: var(--ink-2); border-right: 1px solid var(--rule); }
.view-buttons button:last-child { border-right: 0; }
.view-buttons button:hover { color: var(--ink); background: var(--card); }
.view-buttons button[aria-pressed='true'] { color: var(--ink); font-weight: 600; }
.viewer__dims { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 0; background: color-mix(in srgb, var(--paper) 92%, transparent); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-mono); font-size: .8125rem; }
.viewer__dims span { padding: 7px 11px; border-right: 1px solid var(--rule); }
.viewer__dims span:last-child { border-right: 0; }
.viewer__dims i { font-style: normal; color: var(--ink-3); margin-right: 6px; }
.viewer__hint { position: absolute; right: 14px; bottom: 14px; font-size: .75rem; color: var(--ink-3); }
.dropzone { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 32px; }
.dropzone__box { max-width: 440px; display: grid; justify-items: center; gap: 14px; }
.dropzone__icon { width: 64px; height: 64px; color: var(--ink-2); }
.dropzone h2 { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -.01em; }
.dropzone p { color: var(--ink-2); font-size: .9375rem; }
.dropzone .btn { margin-top: 6px; }
.dropzone.is-over { background: color-mix(in srgb, var(--accent-wash) 70%, transparent); outline: 2px dashed var(--accent); outline-offset: -10px; }
.sample-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .875rem; color: var(--ink-3); }
.sample-links button { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--rule-strong); }
.sample-links button:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.stage__controls { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.control { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.seg button, .seg label { position: relative; height: 34px; padding: 0 12px; border: 0; background: transparent; font-size: .875rem; display: inline-flex; align-items: center; border-right: 1px solid var(--rule-strong); cursor: pointer; color: var(--ink-2); }
.seg > :last-child { border-right: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked), .seg button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.scale-input { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); height: 34px; }
.scale-input input { width: 64px; height: 100%; border: 0; background: transparent; text-align: right; padding: 0 4px 0 8px; font-family: var(--font-mono); font-size: .875rem; }
.scale-input span { padding: 0 10px 0 2px; font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-3); }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.panel__section { padding: 20px 22px; border-bottom: 1px solid var(--rule); }
.panel__section:last-child { border-bottom: 0; }
.panel__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel__title h2 { font-family: var(--font-text); font-size: 1rem; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.panel__title h2 .n { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.panel__title .aside { font-size: .8125rem; color: var(--ink-3); }
.specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin: 0; }
.specs div { padding: 9px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 1px; }
.specs div:first-child { grid-column: 1 / -1; }
.specs div:nth-last-child(-n+2) { border-bottom: 0; }
.specs dt { font-size: .75rem; color: var(--ink-3); }
.specs dd { margin: 0; font-family: var(--font-mono); font-size: .875rem; color: var(--ink); }
.options { display: grid; gap: 8px; }
.option { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 14px; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; background: var(--paper); transition: border-color .15s, background-color .15s; }
.option:hover { border-color: var(--rule-strong); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option b { font-weight: 600; font-size: .9375rem; }
.option .price { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); align-self: center; }
.option .desc { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-3); line-height: 1.45; }
.option:has(input:checked) { border-color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink); }
.option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.option.is-disabled { opacity: .5; cursor: not-allowed; }
.options--row { grid-template-columns: repeat(3, 1fr); }
.options--row .option { grid-template-columns: 1fr; text-align: left; }
.colour-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.colour { position: relative; cursor: pointer; }
.colour input { position: absolute; opacity: 0; pointer-events: none; }
.colour span { display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 27, 24, .2); border: 3px solid var(--card); outline: 1px solid transparent; transition: outline-color .15s; }
.colour:hover span { outline-color: var(--rule-strong); }
.colour input:checked + span { outline: 2px solid var(--ink); }
.colour input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.colour-name { margin-top: 10px; font-size: .875rem; color: var(--ink-2); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-2 > * { min-width: 0; }
.stepper { display: inline-flex; align-items: stretch; height: 46px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); width: 100%; }
.stepper button { width: 42px; border: 0; background: transparent; font-size: 1.2rem; color: var(--ink-2); }
.stepper button:hover { color: var(--ink); background: var(--paper-2); }
.stepper input { flex: 1; min-width: 0; border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); background: transparent; text-align: center; font-family: var(--font-mono); font-size: .9375rem; }
.estimate { background: var(--paper-2); }
.estimate__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.estimate__total .label { font-size: .875rem; color: var(--ink-2); }
.estimate__total strong { font-family: var(--font-display); font-weight: 420; font-size: 2.75rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.estimate__lines { list-style: none; margin: 16px 0 0; display: grid; gap: 6px; font-size: .875rem; color: var(--ink-2); }
.estimate__lines li { display: flex; justify-content: space-between; gap: 12px; }
.estimate__lines li span:last-child { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink); }
.estimate__lines li.is-discount span:last-child { color: var(--ok); }
.estimate .notice { margin-top: 16px; }
.estimate__cta { margin-top: 18px; display: grid; gap: 10px; }
.estimate__small { font-size: .8125rem; color: var(--ink-3); text-align: center; }
@media (max-width: 1100px) { .quote { grid-template-columns: 1fr; } .stage { position: static; } .viewer { height: clamp(340px, 62vw, 560px); min-height: 0; } }
@media (max-width: 520px) { .options--row { grid-template-columns: 1fr; } .viewer__hint { display: none; } .viewer { height: clamp(320px, 100vw, 460px); } .viewer__top { flex-direction: column-reverse; align-items: flex-start; } .file-tag { max-width: 100%; } .view-buttons button { padding: 0 9px; } }

.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--rule); }
.next-steps h2 { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -.01em; margin-bottom: 8px; }
.next-steps p { color: var(--ink-2); font-size: .9375rem; }
.next-steps .link-arrow { margin-top: 10px; font-size: .9375rem; }
@media (max-width: 860px) { .next-steps { grid-template-columns: 1fr; row-gap: 32px; } }

/* ---- quote: model panel, checks, dialog -------------------------------------------- */
.model-panel .panel__section { padding: 18px 20px; }
.specs--wide { grid-template-columns: repeat(4, 1fr); column-gap: 20px; }
.specs--wide div:first-child { grid-column: auto; }
.specs--wide div { border-bottom: 1px solid var(--rule); }
.specs--wide div:nth-last-child(-n+4) { border-bottom: 0; }
.checks { list-style: none; display: grid; gap: 0; }
.check-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.check-item:last-child { border-bottom: 0; padding-bottom: 0; }
.check-item:first-child { padding-top: 0; }
.check-item b { font-weight: 600; font-size: .9375rem; }
.check-item p { font-size: .875rem; color: var(--ink-2); margin: 2px 0 0; }
.check-item__icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.check-item__icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.check-item.is-ok .check-item__icon { background: var(--ok-wash); color: var(--ok); }
.check-item.is-warn .check-item__icon { background: var(--warn-wash); color: var(--warn); }
.check-item.is-danger .check-item__icon { background: var(--danger-wash); color: var(--danger); }
.check-item.is-idle .check-item__icon { border: 1.5px dashed var(--rule-strong); }
.options--compact { gap: 6px; }
.options--compact .option { padding: 9px 12px; }
.options--compact .option .desc { font-size: .78rem; }
.options--two { grid-template-columns: 1fr 1fr; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--rule-strong); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dropzone--busy { background: color-mix(in srgb, var(--paper-2) 88%, transparent); z-index: 3; }
@media (max-width: 1100px) { .specs--wide { grid-template-columns: repeat(2, 1fr); } .specs--wide div:nth-last-child(-n+4) { border-bottom: 1px solid var(--rule); } .specs--wide div:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 520px) { .options--two { grid-template-columns: 1fr; } }

.dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); }
.dialog::backdrop { background: rgba(28, 27, 24, .42); backdrop-filter: blur(2px); }
.dialog[open] { display: flex; }
.dialog__inner { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--rule); }
.dialog__head .h3 { margin-top: 8px; }
.dialog__body { padding: 20px 24px; overflow-y: auto; display: grid; gap: 22px; }
.dialog__foot { padding: 16px 24px 20px; border-top: 1px solid var(--rule); display: grid; gap: 12px; background: var(--paper-2); }
.dialog__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: transparent; }
.icon-button:hover { border-color: var(--ink); }
.req-summary { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.req-summary__file { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.req-summary__file svg { width: 24px; height: 24px; color: var(--ink-2); flex: none; }
.req-summary__file div { display: grid; }
.req-summary__file span { color: var(--ink-3); }
.req-summary dl { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 16px; margin: 0; padding: 12px 14px; }
.req-summary dt { font-size: .75rem; color: var(--ink-3); }
.req-summary dd { margin: 0; font-size: .875rem; }
.upload-progress { display: grid; gap: 6px; font-size: .875rem; color: var(--ink-2); }
.upload-progress .bar { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.upload-progress .bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }
@media (max-width: 600px) {
  .dialog { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; }
  .req-summary dl { grid-template-columns: 1fr 1fr; }
  .dialog__actions .btn { flex: 1; }
}

/* ---- shared form blocks ------------------------------------------------------------- */
.form-block { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.form-block legend { padding: 0; margin-bottom: 14px; }
.form-block__note { margin-top: -8px; }
.form-block .hint { margin-top: -6px; }
.seg--wide { display: flex; width: 100%; }
.seg--wide label { flex: 1; justify-content: center; height: 42px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(163, 42, 28, .08); }
.form-error { padding: 12px 14px; border-radius: var(--radius); background: var(--danger-wash); border: 1px solid #E9B8AE; color: #6E1D13; font-size: .9375rem; }
.cash-note { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--accent-wash); border: 1px solid var(--accent-line); font-size: .9375rem; color: var(--accent-deep); }
.cash-note svg { width: 22px; height: 22px; color: var(--accent-ink); }
.cash-note b { color: var(--accent-deeper); }
.link-button { border: 0; background: none; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--rule-strong); font-size: .875rem; }
.link-button:hover { color: var(--danger); text-decoration-color: currentColor; }

/* ---- product page ------------------------------------------------------------------- */
.product-crumbs { padding: 28px 0 22px; }
.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.product__media { position: sticky; top: 96px; }
.product__stage { position: relative; aspect-ratio: 4 / 5; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.product__stage img, .product__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product__stage img { transition: opacity .35s var(--ease); }
.product__stage img.is-hidden { opacity: 0; pointer-events: none; }
.product__stage canvas { touch-action: none; cursor: grab; }
.stage-button { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 88%, transparent); font-size: .875rem; font-weight: 500; }
.stage-button:hover { border-color: var(--ink); }
.stage-hint { position: absolute; left: 16px; bottom: 16px; font-size: .8125rem; color: var(--ink-2); pointer-events: none; }
.product__media-note { margin-top: 12px; }
.product__info { padding-top: 4px; }
.product__title { font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); margin: 14px 0 12px; }
.product__price { font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.product__info .lede { font-size: 1.125rem; margin-bottom: 28px; }
.product-form { display: grid; gap: 22px; padding-top: 24px; border-top: 1px solid var(--rule); }
.opt { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt legend { display: flex; justify-content: space-between; width: 100%; padding: 0; margin-bottom: 10px; font-size: .875rem; font-weight: 600; }
.opt__value { font-weight: 400; color: var(--ink-2); }
.opt__help { font-weight: 400; color: var(--ink-3); font-size: .8125rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option { position: relative; cursor: pointer; }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option span { display: grid; gap: 1px; min-width: 96px; padding: 9px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); transition: border-color .15s; }
.chip-option b { font-weight: 500; font-size: .9375rem; }
.chip-option small { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip-option:hover span { border-color: var(--ink-3); }
.chip-option input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip-option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.colour { position: relative; }
.colour__stock { position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: #3E8E4E; border: 2px solid var(--paper); pointer-events: none; }
.colour-key { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.colour-key .colour__stock { position: static; border-color: var(--paper); }
.availability-line { display: flex; align-items: center; gap: 9px; font-size: .9375rem; color: var(--ink-2); }
.availability-line::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.availability-line.is-stock { color: var(--ok); }
.availability-line.is-stock::before { background: #3E8E4E; box-shadow: 0 0 0 3px rgba(62, 142, 78, .16); }
.buy-row { display: flex; gap: 10px; }
.stepper--compact { width: 132px; flex: none; height: 50px; }
.stepper--compact button { width: 40px; }
.btn--grow { flex: 1; }
.added { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-wash); border: 1px solid #BFD1B7; color: #28472E; font-size: .9375rem; }
.added svg { width: 18px; height: 18px; }
.added a { margin-left: auto; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: #28472E; }
.buy-note { display: flex; align-items: center; gap: 8px; }
.spec-table { margin: 28px 0 0; border-top: 1px solid var(--rule); }
.spec-table div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.spec-table dt { color: var(--ink-3); }
.spec-table dd { margin: 0; }
.product-more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 72px); padding: clamp(56px, 7vw, 96px) 0; }
.product-more .prose h2 { margin-bottom: 16px; }
.product-more .prose p { color: var(--ink-2); }
.material-note { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; align-self: start; }
.material-note h2 { margin-bottom: 12px; }
.material-note p { font-size: .9375rem; color: var(--ink-2); }
.material-note .link-arrow { margin-top: 6px; font-size: .9375rem; }
.product-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .product, .product-more { grid-template-columns: 1fr; }
  .product__media { position: static; }
  .product__stage { aspect-ratio: 1 / 1; }
}
@media (max-width: 700px) { .product-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-grid--related > :nth-child(3) { display: none; } }

/* ---- cart --------------------------------------------------------------------------- */
.cart { padding-block: clamp(28px, 3.5vw, 48px) var(--section); display: grid; gap: clamp(32px, 4vw, 56px); }
.cart-items__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.cart-lines { list-style: none; }
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) 132px 110px 64px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cart-line__img { display: block; width: 72px; height: 90px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__info { display: grid; gap: 3px; font-size: .9375rem; }
.cart-line__info a { text-decoration: none; }
.cart-line__info a:hover b { text-decoration: underline; }
.cart-line__info > span { color: var(--ink-2); font-size: .875rem; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cart-line__info .availability { font-size: .8125rem; color: var(--ink-3); }
.cart-line__info .availability.is-stock { color: var(--ok); }
.cart-line__price { text-align: right; font-weight: 500; display: grid; }
.cart-line__price small { font-weight: 400; color: var(--ink-3); font-size: .8125rem; }
.cart-line .stepper--compact { height: 42px; }
.cart-line.is-error .cart-line__img { background: var(--danger-wash); }
.cart-loading { padding: 24px 0; }
.cart-empty { padding: clamp(40px, 6vw, 80px) 0; text-align: left; max-width: 34em; }
.cart-empty p { color: var(--ink-2); margin-top: 10px; }
.checkout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.checkout__form { display: grid; gap: 36px; }
.checkout__summary { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; }
  .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: 'img info info' 'img qty price' 'img remove remove'; gap: 8px 14px; }
  .cart-line__img { grid-area: img; width: 64px; height: 80px; align-self: start; }
  .cart-line__info { grid-area: info; }
  .cart-line .stepper { grid-area: qty; width: 124px; }
  .cart-line__price { grid-area: price; }
  .cart-line .link-button { grid-area: remove; justify-self: start; }
}

/* ---- summary card (cart, order pages) ------------------------------------------------ */
.summary-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; display: grid; gap: 16px; align-content: start; }
.summary-card > h2 { font-family: var(--font-text); font-size: 1rem; font-weight: 600; }
.summary-totals { margin: 0; display: grid; }
.summary-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.summary-totals dt { color: var(--ink-2); }
.summary-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.summary-totals__total { border-bottom: 0 !important; padding-top: 14px !important; align-items: baseline; }
.summary-totals__total dt { color: var(--ink); font-weight: 600; }
.summary-totals__total dd { font-family: var(--font-display); font-size: 2rem; letter-spacing: -.015em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.summary-list { list-style: none; display: grid; }
.summary-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.summary-item:first-child { padding-top: 0; }
.summary-item img { width: 56px; height: 70px; object-fit: cover; background: var(--paper-3); border-radius: 2px; }
.summary-item__file { width: 56px; height: 56px; display: grid; place-items: center; background: var(--paper-2); border-radius: 2px; color: var(--ink-2); }
.summary-item__file svg { width: 24px; height: 24px; }
.summary-item div { display: grid; gap: 2px; min-width: 0; }
.summary-item div span { font-size: .8125rem; color: var(--ink-3); }
.summary-meta { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--rule); }
.summary-meta h3 { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 3px; }
.summary-meta p { font-size: .9375rem; }

/* ---- order status & tracking --------------------------------------------------------- */
.order-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; padding-block: clamp(32px, 4vw, 56px) var(--section); }
.order-number { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 20px 22px; margin-bottom: 40px; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.order-number .label { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #A9A294; }
.order-number strong { font-size: 2rem; font-weight: 500; letter-spacing: .02em; line-height: 1.1; }
.order-number p { color: #CFC8B8; font-size: .9375rem; }
.order-number a { color: var(--paper); }
.timeline { list-style: none; position: relative; }
.timeline__step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding-bottom: 26px; }
.timeline__step::before { content: ''; position: absolute; left: 13.5px; top: 28px; bottom: 0; width: 1px; background: var(--rule-strong); }
.timeline__step:last-child::before { display: none; }
.timeline__dot { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--rule-strong); background: var(--paper); display: grid; place-items: center; position: relative; z-index: 1; }
.timeline__dot svg { width: 14px; height: 14px; stroke-width: 2.4; }
.timeline__step.is-done .timeline__dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.timeline__step.is-done::before { background: var(--ink); }
.timeline__step.is-current .timeline__dot { border-color: var(--accent); border-width: 2px; }
.timeline__step.is-current .timeline__dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline__step.is-skipped .timeline__dot { background: var(--paper-2); border-color: var(--rule-strong); color: var(--ink-3); }
.timeline__step.is-cancelled .timeline__dot { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }
.timeline__body { padding-top: 3px; }
.timeline__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.timeline__head h3 { font-family: var(--font-text); font-size: 1.0625rem; font-weight: 600; }
.timeline__step.is-todo h3 { color: var(--ink-3); font-weight: 500; }
.timeline__head time, .timeline__note time { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
.timeline__body p { color: var(--ink-2); font-size: .9375rem; margin-top: 4px; }
.timeline__note { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-top: 10px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.order-help { display: grid; gap: 12px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--rule); }
.order-help p { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .9375rem; color: var(--ink-2); }
.order-help svg { width: 20px; height: 20px; color: var(--ink-3); margin-top: 2px; }
.track-layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 72px); padding-block: clamp(32px, 4vw, 56px) var(--section); align-items: start; }
.panel-plain { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.track-form { display: grid; gap: 18px; }
.track-form .btn { justify-self: start; }
.device-orders { margin-bottom: 36px; }
.device-orders ul { list-style: none; margin: 12px 0; border-top: 1px solid var(--rule); }
.device-orders li a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.device-orders li a:hover b { text-decoration: underline; }
.device-orders li span { color: var(--ink-3); font-size: .875rem; }
.track-notes h2 { margin: 0 0 6px; }
.track-notes p { color: var(--ink-2); font-size: .9375rem; margin-bottom: 22px; }
@media (max-width: 860px) {
  .order-layout, .track-layout { grid-template-columns: 1fr; }
  .order-number { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- tools hub ---------------------------------------------------------------------- */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.tool-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s var(--ease); min-height: 280px; }
.tool-card:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-2px); }
.tool-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.tool-card__tag { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tool-card__glyph { width: 56px; height: 56px; color: var(--ink); }
.tool-card__glyph .acc { stroke: var(--accent); }
.tool-card p { color: var(--ink-2); font-size: .9375rem; flex: 1; }
.tool-card .link-arrow { align-self: flex-start; margin-top: 8px; font-size: .9375rem; }
@media (max-width: 1000px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tool-grid { grid-template-columns: 1fr; } .tool-card { min-height: 0; } }

/* ---- material guide ----------------------------------------------------------------- */
.picker { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col-gap); align-items: stretch; }
.picker__q .muted { margin: 8px 0 20px; }
.picker__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toggle { position: relative; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--card); font-size: .9375rem; line-height: 1.4; }
.toggle span::before { content: ''; width: 18px; height: 18px; flex: none; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--paper); }
.toggle input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.toggle input:checked + span::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23F3F0E9' stroke-width='2.6'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--ink); }
.toggle input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.picker__answer { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.picker__answer .eyebrow { color: #A9A294; }
.picker__name { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; letter-spacing: -.02em; margin: 6px 0 4px; }
.picker__answer p { color: #D9D3C6; }
.picker__answer .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-border: var(--paper); align-self: flex-start; margin-top: auto; }
.picker__answer .btn:hover { background: #fff; }
.compare-wrap { overflow-x: auto; position: relative; border-top: 1px solid var(--ink); }
.compare { width: 100%; border-collapse: collapse; min-width: 820px; font-size: .9375rem; }
.compare th, .compare td { padding: 14px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; vertical-align: bottom; }
.compare thead th a { text-decoration: none; }
.compare thead th small, .compare tbody th small { display: block; font-family: var(--font-text); font-size: .75rem; color: var(--ink-3); letter-spacing: 0; font-weight: 400; margin-top: 3px; }
.compare tbody th { font-weight: 600; font-size: .875rem; width: 180px; position: sticky; left: 0; background: var(--paper); }
.compare thead th:first-child { position: sticky; left: 0; background: var(--paper); }
.food-callout { display: grid; grid-template-columns: 28px 1fr; gap: 16px; margin: clamp(32px, 4vw, 56px) 0; padding: 24px 26px; background: var(--warn-wash); border: 1px solid #E2CB98; border-radius: var(--radius); color: #4A3509; }
.food-callout svg { width: 26px; height: 26px; color: var(--warn); }
.food-callout h2 { margin-bottom: 6px; color: #3A2906; }
.material-sections { border-top: 1px solid var(--ink); margin-bottom: var(--section); }
.material-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 90px; transition: background-color .3s; }
.material-section.is-picked { background: linear-gradient(90deg, var(--accent-wash), transparent 70%); }
.material-section__head .h2 { margin: 8px 0 6px; }
.material-section__body .lede { margin-bottom: 20px; }
.material-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--col-gap); margin: 0; }
.material-facts div { padding: 12px 0; border-top: 1px solid var(--rule); }
.material-facts dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.material-facts dd { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.material-section__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.swatches--big .swatch { width: 20px; height: 20px; }
.swatches--big { gap: 6px; flex-wrap: wrap; }
@media (max-width: 860px) { .picker, .material-section { grid-template-columns: 1fr; } .picker__options, .material-facts { grid-template-columns: 1fr; } }

/* ---- model checker ------------------------------------------------------------------ */
.checker { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(20px, 2.4vw, 36px); padding: clamp(24px, 3vw, 40px) 0 var(--section); align-items: start; }
.checker .viewer { height: clamp(420px, 46vw, 660px); }
.mini-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.mini-table th { text-align: left; font-weight: 500; font-size: .75rem; color: var(--ink-3); padding: 0 0 6px; }
.mini-table td { padding: 7px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.mini-table .r { text-align: right; }
.mini-table .sub { display: block; font-size: .75rem; color: var(--ink-3); }
.mini-table tr.is-current td { font-weight: 600; }
.tag-best { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--ok); padding-left: 10px; white-space: nowrap; }
.fit { font-size: .8125rem; font-weight: 500; }
.fit--ok { color: var(--ok); }
.fit--no { color: var(--ink-3); }
@media (max-width: 1100px) { .checker { grid-template-columns: 1fr; } }

/* ---- calculators -------------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; padding-bottom: var(--section); }
.calc__inputs { display: grid; gap: 36px; }
.calc__results { position: sticky; top: 96px; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 28px; display: grid; gap: 20px; }
.calc__results .muted { color: #A9A294; }
.calc__results a { color: var(--paper); border-bottom-color: #6A655B; }
.result-big .label { display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #A9A294; }
.result-big strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.result-list { margin: 0; display: grid; }
.result-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #3A3833; font-size: .9375rem; }
.result-list dt { color: #CFC8B8; }
.result-list dd { margin: 0; font-family: var(--font-mono); }
.result-sub { padding-top: 16px; border-top: 1px solid #3A3833; }
.result-sub h3 { color: #CFC8B8; font-weight: 500; margin-bottom: 6px; }
.result-mid strong { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; letter-spacing: -.01em; }
.unit-input { position: relative; display: flex; align-items: stretch; }
.unit-input .input { padding-right: 48px; }
.unit-input > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-3); pointer-events: none; }
.unit-input--pre .input { padding-left: 26px; padding-right: 12px; }
.unit-input--pre > span { left: 12px; right: auto; }
.unit-input select, .field .unit-input select { position: absolute; right: 5px; top: 5px; bottom: 5px; width: auto; min-height: 0; border: 0; background-color: var(--paper-2); background-position: right 7px center; border-radius: 2px; font-family: var(--font-mono); font-size: .8125rem; padding: 0 24px 0 8px; box-shadow: none; }
.unit-input:has(select) .input { padding-right: 72px; }
.calc-stack { display: grid; gap: var(--col-gap); padding-bottom: var(--section); }
.calc-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); padding: clamp(24px, 3vw, 36px); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.calc-card__head .h3 { margin: 6px 0 8px; }
.calc-card__head p { font-size: .9375rem; }
.calc-card__body { display: grid; gap: 16px; align-content: start; }
.conv { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--rule); }
.conv div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.conv dt { font-size: .75rem; color: var(--ink-3); }
.conv dd { margin: 0; font-family: var(--font-mono); font-size: .9375rem; }
.conv dd b { font-weight: 500; font-size: 1.1rem; }
.slicer-fix { padding-top: 8px; display: grid; gap: 12px; }
.dims-input { display: flex; align-items: center; gap: 8px; }
.dims-input span { color: var(--ink-3); }
@media (max-width: 860px) { .calc, .calc-card { grid-template-columns: 1fr; } .calc__results { position: static; } .conv { grid-template-columns: 1fr 1fr; } }

/* ---- articles (guidelines, help) ----------------------------------------------------- */
.article-layout > *, .calc > *, .checkout > *, .order-layout > *, .track-layout > *, .contact-layout > * { min-width: 0; }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); padding-block: clamp(32px, 4vw, 56px) var(--section); align-items: start; }
.toc { position: sticky; top: 100px; display: grid; gap: 16px; }
.toc__label { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--rule); }
.toc ol a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--ink-2); font-size: .9375rem; }
.toc ol a:hover { color: var(--ink); border-left-color: var(--ink); }
.toc .btn { justify-self: start; }
.article { max-width: 760px; display: grid; gap: clamp(40px, 5vw, 64px); }
.article > * { min-width: 0; }
.article section { scroll-margin-top: 96px; }
.article h2 { margin-bottom: 16px; display: flex; gap: 14px; align-items: baseline; }
.article h2 .mono { font-size: .8125rem; color: var(--ink-3); }
.article p { color: var(--ink-2); max-width: 38em; }
.article p b { color: var(--ink); font-weight: 600; }
.article figure { margin: 0 0 22px; padding: 22px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.article figcaption { margin-top: 12px; font-size: .875rem; color: var(--ink-3); }
.diagram { width: 100%; max-width: 560px; height: auto; color: var(--ink); overflow: visible; }
.diagram text { font-family: var(--font-mono); font-size: 10.5px; fill: var(--ink-2); stroke: none; }
.diagram .acc { stroke: var(--accent); }
.diagram .acc-fill { fill: var(--accent); stroke: none; }
.diagram .fill-soft { fill: var(--paper-3); stroke: none; }
.bullets { display: grid; gap: 8px; padding-left: 20px; color: var(--ink-2); max-width: 38em; }
.bullets li::marker { color: var(--accent); }
.checklist { list-style: none; display: grid; gap: 10px; margin-bottom: 24px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--ink-2); }
.checklist li::before { content: ''; width: 18px; height: 18px; border: 1.5px solid var(--ink-3); border-radius: 2px; margin-top: 3px; }
.table-scroll { overflow-x: auto; position: relative; }
.ref-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.ref-table th, .ref-table td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ref-table thead th { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; border-bottom-color: var(--ink); }
.ref-table tbody th { font-weight: 600; width: 34%; }
.article-cta { padding: 24px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.article-cta p { margin-bottom: 0; }
.article-cta .hero__actions { margin-top: 18px; }
.help-nav { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--rule); }
.help-nav a { font-size: .875rem; text-decoration: none; color: var(--ink-3); padding: 3px 0; }
.help-nav a:hover, .help-nav a[aria-current='page'] { color: var(--ink); }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .toc { position: static; } .toc ol { grid-template-columns: 1fr 1fr; border-left: 0; } .toc ol a { padding-left: 0; } .help-nav { display: none; } }

/* ---- help ---------------------------------------------------------------------------- */
.help-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin-bottom: clamp(48px, 6vw, 88px); }
.help-card { display: grid; gap: 8px; align-content: start; padding: 22px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; transition: border-color .2s; }
.help-card:hover { border-color: var(--ink-3); color: var(--ink); }
.help-card__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); margin-bottom: 8px; }
.help-card__icon svg { width: 20px; height: 20px; }
.help-card p { color: var(--ink-2); font-size: .9375rem; }
.help-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); }
.help-split .h3 { margin-bottom: 16px; }
.faq { border-top: 1px solid var(--ink); margin-bottom: 20px; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; font-weight: 500; font-size: 1.0625rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ''; width: 12px; height: 12px; flex: none; margin-top: 6px; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat; transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--accent-ink); }
.faq__a { padding: 0 32px 18px 0; color: var(--ink-2); }
.faq-group { scroll-margin-top: 96px; }
.faq-group .h3 { margin-bottom: 12px; }
.faq-search { position: relative; }
.faq-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }
.faq-search .input { padding-left: 42px; height: 50px; }
.guide-list { list-style: none; border-top: 1px solid var(--ink); }
.guide-list a { display: grid; gap: 3px; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.guide-list a b { font-weight: 600; font-size: 1.0625rem; }
.guide-list a:hover b { text-decoration: underline; }
.guide-list a > span:last-child { color: var(--ink-2); font-size: .9375rem; }
.guide-list .mono { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.guide-list--compact { margin-top: 12px; }
@media (max-width: 1000px) { .help-cards { grid-template-columns: 1fr 1fr; } .help-split { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 520px) { .help-cards { grid-template-columns: 1fr; } }

/* ---- about ---------------------------------------------------------------------------- */
.about-story { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 88px); }
.about-story__text p { color: var(--ink-2); }
.about-story__text .lede { color: var(--ink); margin-bottom: 1.2em; }
.about-facts dl { margin: 0; border-top: 1px solid var(--ink); }
.about-facts div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.about-facts dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.about-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.01em; }
.about-facts--row dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); column-gap: var(--col-gap); border-top: 0; }
.about-facts--row div { border-top: 1px solid var(--ink); border-bottom: 0; }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.principles h3 { margin: 10px 0 8px; }
.principles p { color: var(--ink-2); font-size: .9375rem; }
.machines { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--col-gap); }
.machine { padding-top: 16px; border-top: 1px solid var(--ink); display: grid; gap: 6px; align-content: start; }
.machine__head { display: flex; justify-content: space-between; align-items: baseline; }
.machine__bed { font-size: .8125rem; }
.machine p { font-size: .9375rem; }
.about-visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; padding-bottom: var(--section); }
@media (max-width: 1100px) { .machines { grid-template-columns: repeat(3, minmax(0, 1fr)); } .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .about-story, .about-visit { grid-template-columns: 1fr; } .machines, .principles { grid-template-columns: 1fr; } }

/* ---- contact -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 88px); padding-block: clamp(32px, 4vw, 56px) var(--section); align-items: start; }
.contact-form { display: grid; gap: 18px; }
.contact-form .btn { justify-self: start; }
.contact-aside { display: grid; gap: 22px; }
.contact-aside h2 { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; }
.big-link { font-family: var(--font-display); font-size: 1.8rem; text-decoration: none; letter-spacing: -.01em; }
.hours--small { font-size: .9375rem; }
.hours--small th, .hours--small td { padding: 6px 0; }
.plain-links { list-style: none; display: grid; gap: 6px; }
.sent { display: grid; gap: 12px; justify-items: start; }
.sent__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--ok-wash); color: var(--ok); display: grid; place-items: center; }
.sent__icon svg { width: 24px; height: 24px; stroke-width: 2; }
.sent p { color: var(--ink-2); }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

/* ---- motion ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}