/* ===========================================================
   IMACX — B2B corporate-gifts catalogue & quote builder
   Layer on top of the Swiss Component Library tokens (styles.css).
   Adds: acid-orange accent, tunable radius, commerce components.
   =========================================================== */

:root {
  /* Acid-orange accent — the only chromatic departure for IMACX */
  --accent:       #ff5a00;
  --accent-2:     #ff7a26;
  --accent-tint:  #fff0e6;
  --accent-fg:    #ffffff;
  /* Tunable corner radius (Tweaks). Sharp by default — true Swiss. */
  --radius: 0px;
}
/* ---- Summer campaign — bento grid, text on colour ---- */
.hm-camp { padding-top: 24px; }
.hm-camp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hm-camp-card { position: relative; overflow: hidden; cursor: pointer; display: flex; min-height: 320px; isolation: isolate; }
.hm-camp-card--wide { grid-column: 1 / -1; min-height: 384px; }
.hm-camp-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg-3); }
.hm-camp-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-camp-scrim { position: absolute; inset: 0; }
.hm-camp-scrim.brand { background: linear-gradient(118deg, color-mix(in oklab, var(--accent) 28%, transparent), rgba(10,10,10,.10) 58%, rgba(10,10,10,.24)); }
.hm-camp-scrim.bottom { background: linear-gradient(to top, rgba(10,10,10,.66), rgba(10,10,10,.14) 56%, rgba(10,10,10,.01)); }
.hm-camp-in { position: relative; padding: 32px 34px; display: flex; flex-direction: column; width: 100%; }
.hm-camp-card--wide .hm-camp-in { justify-content: flex-start; max-width: 580px; }
.hm-camp-card:not(.hm-camp-card--wide) .hm-camp-in { justify-content: flex-end; }
.on-photo { color: #ffffff; text-shadow: 0 1px 22px rgba(10,10,10,.26); }
.hm-camp-in .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--w-s); margin-bottom: 14px; }
.hm-camp-card--wide .hm-camp-in h3 { font-size: clamp(28px, 3.4vw, 46px); font-weight: var(--w-s); letter-spacing: -.03em; line-height: 1.02; margin: 0; max-width: 16ch; }
.hm-camp-card:not(.hm-camp-card--wide) .hm-camp-in h3 { font-size: var(--t-h4); font-weight: var(--w-s); letter-spacing: -.02em; margin: 0; }
.hm-camp-in p { font-size: var(--t-body); margin: 12px 0 0; max-width: 42ch; line-height: 1.5; opacity: .92; }
.hm-camp-in .pill { align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font-size: var(--t-body-s); font-weight: var(--w-s); cursor: pointer; border: 1.5px solid currentColor; background: transparent; color: inherit; white-space: nowrap; transition: background .15s, color .15s; }
.on-photo .pill { border-color: rgba(255,255,255,.7); color: #fff; }
.on-photo .pill:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* No grey text on the home — black for maximum contrast */
.hm .hm-idx { color: #0a0a0a; }
.hm-hero .meta p { color: #0a0a0a; }
.hm-hero .meta .stat span { color: #0a0a0a; }
.hm-manifesto .e, .hm-feat .e, .hm-sel-hd .e { color: #0a0a0a; }
.hm-cap-row .n, .hm-cap-row p { color: #0a0a0a; }
.hm-fam .c, .hm-fam .nm .ix { color: #0a0a0a; }
.hm-feat p, .hm-scale .side p { color: #0a0a0a; }

@media (max-width: 760px) { .hm-camp-grid { grid-template-columns: 1fr; } .hm-camp-card { min-height: 280px; } }
/* Mono mode — accent collapses to ink, system goes fully achromatic */
.imacx[data-accent="mono"] {
  --accent:      var(--fg);
  --accent-2:    var(--fg);
  --accent-tint: var(--bg-3);
  --accent-fg:   var(--bg);
}

.imacx { background: var(--bg); color: var(--fg); min-height: 100vh; }
.imacx *,
.imacx *::before,
.imacx *::after { box-sizing: border-box; }
.imacx a { color: inherit; text-decoration: none; }
.wrapx { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); }

/* generic accent text */
.accent { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .14em; font-weight: var(--w-m); color: var(--muted); }
.muted { color: var(--muted); }

/* ---- Top announcement bar -------------------------------- */
.imacx-annc {
  background: var(--fg); color: var(--bg);
  font-size: var(--t-body-s); letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  height: 38px; padding-inline: var(--pad-x);
}
.imacx-annc .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ---- Header --------------------------------------------- */
.imacx-hd { position: sticky; top: 0; z-index: 90; background: var(--bg); }
.imacx-hd-row { display: flex; align-items: center; gap: 28px; height: 68px; }
.imacx-logo { font-size: var(--t-h6); font-weight: var(--w-s); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 7px; }
.brand-logo { display: block; height: 30px; width: auto; color: var(--fg); }
.brand-logo--lg { height: 38px; }
.imacx-logo b { font-weight: var(--w-s); }
.imacx-logo .reg { font-size: var(--t-label); color: var(--accent); letter-spacing: .12em; transform: translateY(-6px); }
.imacx-nav { display: flex; gap: 22px; }
.imacx-nav button { background: none; border: 0; font: inherit; font-size: var(--t-body-s); font-weight: var(--w-m); color: var(--fg); cursor: pointer; padding: 6px 0; position: relative; letter-spacing: .01em; }
.imacx-nav button[data-on="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); }
.imacx-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); color: var(--muted); }
.imacx-search input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t-body-s); color: var(--fg); }
.imacx-hd-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* quote (cart) button */
.quote-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border: var(--hairline) solid var(--fg); border-radius: var(--radius); font-size: var(--t-body-s); font-weight: var(--w-m); cursor: pointer; background: var(--fg); color: var(--bg); }
.quote-btn .count { background: var(--accent); color: var(--accent-fg); font-size: var(--t-label); font-weight: var(--w-s); min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: calc(var(--radius)*.6); }

/* ---- Buttons (extend system .btn with radius + accent) --- */
.imacx .btn { border-radius: var(--radius); white-space: nowrap; }
.imacx .btn-solid { border-radius: var(--radius); }
.btn-accent { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border: var(--hairline) solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--accent-fg); font: inherit; font-size: var(--t-body-s); font-weight: var(--w-s); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-lg { height: 52px; padding: 0 28px; font-size: var(--t-body); }
.btn-block { width: 100%; }

/* ---- Tag / badge / chip --------------------------------- */
.chipx { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); font-weight: var(--w-m); letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums; padding: 4px 9px; border: var(--hairline) solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--bg); white-space: nowrap; }
.chipx.solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chipx.accent { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); background: var(--accent-tint); }

/* ---- Price ---------------------------------------------- */
.price { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.price .from { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.price .val { font-weight: var(--w-s); letter-spacing: -.01em; }
.price .was { color: var(--muted-2); text-decoration: line-through; font-weight: var(--w-r); }
.price .unit { font-size: var(--t-label); color: var(--muted); }

/* ---- Rating (acid bar + value) -------------------------- */
.rating { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-body-s); font-variant-numeric: tabular-nums; }
.rating .bar { width: 64px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rating .bar > i { display: block; height: 100%; background: var(--accent); }
.rating .cnt { color: var(--muted); }

/* ---- Quantity stepper ----------------------------------- */
.stepper { display: inline-flex; align-items: stretch; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); height: 44px; }
.stepper button { width: 42px; border: 0; background: var(--bg); font: inherit; font-size: var(--t-h6); color: var(--fg); cursor: pointer; }
.stepper button:hover { background: var(--bg-3); }
.stepper input { width: 64px; border: 0; border-inline: var(--hairline) solid var(--line); text-align: center; font: inherit; font-weight: var(--w-m); font-variant-numeric: tabular-nums; background: var(--bg); color: var(--fg); outline: 0; }

/* ---- Option selector (chips / swatches) ----------------- */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-width: 44px; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); background: var(--bg); font: inherit; font-size: var(--t-body-s); font-weight: var(--w-m); color: var(--fg); cursor: pointer; }
.opt:hover { border-color: var(--fg); }
.opt[data-on="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
.opt .sw { width: 16px; height: 16px; border-radius: 50%; border: var(--hairline) solid rgba(0,0,0,.18); }
.opt.disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* ---- Product card --------------------------------------- */
.pgrid { display: grid; gap: 1px; background: var(--line); border: var(--hairline) solid var(--line); }
.pgrid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.pgrid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.pgrid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.pcard { background: var(--bg); padding: 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; position: relative; transition: background .12s; }
.pcard:hover { background: var(--bg-2); }
.pcard .media { position: relative; }
.pcard .media .ph { border-radius: var(--radius); }
.imacx .ph.has-img { background-color: #fff; background-repeat: no-repeat; }
.imacx .ph.has-img::before,
.imacx .ph.has-img::after,
.imacx .ph.has-img > .ph-label { display: none; }
.pcard .badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.pcard .fam { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pcard .name { font-size: var(--t-body-l); font-weight: var(--w-m); letter-spacing: -.01em; line-height: 1.25; }
.pcard .techs { display: flex; flex-wrap: wrap; gap: 5px; }
.pcard .tech { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.pcard .foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.pcard .config { opacity: 0; transition: opacity .12s; font-size: var(--t-body-s); font-weight: var(--w-m); color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.pcard:hover .config { opacity: 1; }
.pcard .minq { font-size: var(--t-label); color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; }

/* ---- Catalog layout ------------------------------------- */
.cat-layout { display: grid; grid-template-columns: 248px 1fr; gap: 36px; align-items: start; padding-block: 32px 80px; }
.facets { position: sticky; top: 84px; display: flex; flex-direction: column; }
.facet { border-top: var(--hairline) solid var(--line); padding: 18px 0; }
.facet:first-child { border-top: 0; }
.facet h4 { margin: 0 0 12px; font-size: var(--t-body-s); font-weight: var(--w-s); letter-spacing: -.005em; display: flex; justify-content: space-between; align-items: center; }
.facet h4 .clr { font-size: var(--t-label); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; font-weight: var(--w-m); }
.facet-opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; font-size: var(--t-body-s); }
.facet-opt .box { width: 15px; height: 15px; border: var(--hairline) solid var(--line-2); border-radius: calc(var(--radius)*.4); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.facet-opt[data-on="true"] .box { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.facet-opt .cnt { margin-left: auto; font-size: var(--t-label); color: var(--muted-2); font-variant-numeric: tabular-nums; }
.facet-opt:hover { color: var(--accent); }
.facet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 26px; height: 26px; border-radius: var(--radius); border: var(--hairline) solid var(--line-2); cursor: pointer; position: relative; }
.swatch[data-on="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }

/* price range (dual-handle) */
.prange { margin-top: 16px; }
.prange-track { position: relative; height: 24px; display: flex; align-items: center; }
.prange-track::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 999px; background: var(--line-2); }
.prange-fill { position: absolute; height: 3px; border-radius: 999px; background: var(--accent); }
.prange-input { position: absolute; left: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.prange-input::-webkit-slider-runnable-track { background: none; border: 0; }
.prange-input::-moz-range-track { background: none; border: 0; }
.prange-input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(10,10,10,.22); margin-top: -7.5px; }
.prange-input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); cursor: pointer; box-shadow: 0 1px 4px rgba(10,10,10,.22); }
.prange-vals { display: flex; justify-content: space-between; margin-top: 12px; font-size: var(--t-body-s); font-weight: var(--w-m); }

.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-block: 8px 20px; border-bottom: var(--hairline) solid var(--fg); }
.cat-toolbar { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.seg { display: inline-flex; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); }
.seg button { width: 38px; height: 34px; border: 0; background: var(--bg); cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.seg button[data-on="true"] { background: var(--fg); color: var(--bg); }
.selectx { height: 40px; padding: 0 14px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); background: var(--bg); font: inherit; font-size: var(--t-body-s); color: var(--fg); cursor: pointer; }
.active-facets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.active-facets .pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; padding: 5px 10px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); cursor: pointer; }
.active-facets .pill:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Breadcrumbs ---------------------------------------- */
.crumbs { display: flex; gap: 9px; font-size: var(--t-body-s); color: var(--muted); padding-block: 18px 0; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--muted-2); }

/* ---- PDP ------------------------------------------------ */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; padding-block: 18px 72px; align-items: start; }
.gallery { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; }
.gallery .main .ph { border-radius: var(--radius); }
.gallery .main img,
.gallery .thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery .thumbs .ph { border-radius: var(--radius); cursor: pointer; }
.gallery .thumbs img { cursor: pointer; padding: 6px; }
.gallery .thumbs .t[data-on="true"] .ph { box-shadow: inset 0 0 0 2px var(--accent); }
.gallery .thumbs .t[data-on="true"] img { border-color: var(--accent); }
.pdp-info { display: flex; flex-direction: column; }
.pdp-fam { display: flex; align-items: center; gap: 12px; }
.pdp-title { font-size: var(--t-h3); font-weight: var(--w-s); letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 0; }
.pdp-sub { color: var(--muted); margin-top: 10px; max-width: 46ch; line-height: 1.55; }
.pdp-block { border-top: var(--hairline) solid var(--line); padding-top: 22px; margin-top: 24px; }
.pdp-block > .lab { font-size: var(--t-body-s); font-weight: var(--w-s); display: flex; justify-content: space-between; margin-bottom: 14px; }
.pdp-block > .lab .pick { font-weight: var(--w-r); color: var(--muted); }

/* live quote box */
.qbox { border: var(--hairline) solid var(--line-2); border-radius: var(--radius); margin-top: 28px; }
.qbox .row { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; font-size: var(--t-body-s); border-top: var(--hairline) solid var(--line); }
.qbox .row:first-child { border-top: 0; }
.qbox .row .k { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.qbox .row .v { font-weight: var(--w-m); font-variant-numeric: tabular-nums; }
.qbox .price-pair { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 10px; text-align: right; white-space: nowrap; }
.qbox .unit-note { font-size: var(--t-label); font-weight: var(--w-r); color: var(--muted); }
.qbox .price-pair.accent .unit-note { color: var(--accent); opacity: .78; }
.qbox .row.total { background: var(--bg-2); }
.qbox .row.total .v { font-size: var(--t-h6); font-weight: var(--w-s); }
.qbox .row.total .unit-note { color: var(--bg); opacity: .72; }
.qbox .tag-split { font-size: var(--t-label); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.estimate-notice { margin: 0; padding: 10px 18px 12px; border-top: var(--hairline) solid var(--line); color: var(--muted); font-size: var(--t-label); line-height: 1.45; text-transform: uppercase; letter-spacing: .06em; }
.pdp-cta { display: flex; gap: 12px; margin-top: 18px; }

/* accordion */
.acc { border-top: var(--hairline) solid var(--line); }
.acc-item { border-bottom: var(--hairline) solid var(--line); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; background: none; border: 0; font: inherit; font-size: var(--t-body); font-weight: var(--w-m); color: var(--fg); cursor: pointer; text-align: left; }
.acc-head .ic { color: var(--accent); font-size: var(--t-h6); }
.acc-body { padding: 0 0 20px; color: var(--muted); line-height: 1.6; max-width: 64ch; font-size: var(--t-body-s); }

/* ---- Quote drawer / page (cart) ------------------------- */
.drawer-scrim { position: fixed; inset: 0; background: rgba(10,10,10,.42); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); background: var(--bg); z-index: 61; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.1,1); display: flex; flex-direction: column; border-left: var(--hairline) solid var(--line); }
.drawer[data-open="true"] { transform: none; }
.drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad-x); border-bottom: var(--hairline) solid var(--line); }
.drawer-hd h3 { margin: 0; font-size: var(--t-h6); font-weight: var(--w-s); }
.drawer-body { flex: 1; overflow-y: auto; }
.drawer-foot { border-top: var(--hairline) solid var(--line); padding: 20px var(--pad-x); }
.iconbtn { width: 38px; height: 38px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); background: var(--bg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); }
.iconbtn:hover { background: var(--bg-3); }

/* line item */
.line { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 20px var(--pad-x); border-bottom: var(--hairline) solid var(--line); }
.line .ph { border-radius: var(--radius); }
.line .li-top { display: flex; justify-content: space-between; gap: 10px; }
.line .li-name { font-size: var(--t-body); font-weight: var(--w-m); letter-spacing: -.005em; line-height: 1.25; }
.line .li-spec { font-size: var(--t-body-s); color: var(--muted); margin-top: 5px; line-height: 1.5; }
.line .li-spec b { color: var(--fg); font-weight: var(--w-m); }
.line .li-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.line .rm { background: none; border: 0; font: inherit; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); cursor: pointer; }
.line .rm:hover { color: var(--accent); }
.mini-stepper { display: inline-flex; align-items: center; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); height: 32px; }
.mini-stepper button { width: 30px; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--t-body); color: var(--fg); }
.mini-stepper span { min-width: 40px; text-align: center; font-size: var(--t-body-s); font-weight: var(--w-m); font-variant-numeric: tabular-nums; }

/* quote summary */
.qsum .row { display: flex; justify-content: space-between; padding: 9px 0; font-size: var(--t-body-s); }
.qsum .row .v { font-variant-numeric: tabular-nums; font-weight: var(--w-m); }
.qsum .row.sub { color: var(--muted); }
.qsum .split-note { font-size: var(--t-label); color: var(--accent); text-transform: uppercase; letter-spacing: .07em; padding: 4px 0 10px; border-bottom: var(--hairline) solid var(--line); margin-bottom: 8px; }
.qsum .grand { display: flex; justify-content: space-between; align-items: baseline; border-top: var(--hairline) solid var(--fg); margin-top: 8px; padding-top: 14px; }
.qsum .grand .v { font-size: var(--t-h5); font-weight: var(--w-s); font-variant-numeric: tabular-nums; }
.qsum .est { font-size: var(--t-label); color: var(--muted-2); text-transform: uppercase; letter-spacing: .07em; }
.qsum .unit-note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-label); font-weight: var(--w-r); line-height: 1.2; }
.qsum .accent .unit-note { color: var(--accent); opacity: .78; }
.qsum .grand .unit-note { color: var(--muted); font-size: var(--t-label); }
.qsum .estimate-notice { padding: 10px 0 0; border-top: 0; }

/* empty state */
.empty { padding: 80px var(--pad-x); text-align: center; color: var(--muted); }
.empty .big { font-size: var(--t-h5); font-weight: var(--w-s); color: var(--fg); letter-spacing: -.01em; margin-bottom: 10px; }

/* ---- Quote request (checkout) --------------------------- */
.req { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; padding-block: 24px 80px; align-items: start; }
.steps { display: flex; gap: 0; margin-bottom: 30px; border: var(--hairline) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.steps .step { flex: 1; padding: 13px 16px; font-size: var(--t-body-s); border-left: var(--hairline) solid var(--line); display: flex; align-items: center; gap: 9px; color: var(--muted); }
.steps .step:first-child { border-left: 0; }
.steps .step[data-on="true"] { background: var(--bg-2); color: var(--fg); font-weight: var(--w-m); }
.steps .step .n { width: 20px; height: 20px; border-radius: 50%; border: var(--hairline) solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-label); }
.steps .step[data-on="true"] .n { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.field { display: flex; flex-direction: column; gap: 6px; padding-block: 16px; border-bottom: var(--hairline) solid var(--line); }
.field .label { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: var(--w-m); }
.field input, .field textarea { font: inherit; font-size: var(--t-body-l); color: var(--fg); padding: 5px 0; width: 100%; background: none; border: 0; outline: 0; }
.field textarea { resize: none; min-height: 64px; }
.field ::placeholder { color: var(--muted-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dropzone { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 26px; text-align: center; color: var(--muted); cursor: pointer; margin-top: 8px; }
.dropzone:hover { border-color: var(--accent); color: var(--accent); }
.req-aside { position: sticky; top: 84px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); }
.req-aside .ahd { padding: 18px 20px; border-bottom: var(--hairline) solid var(--line); font-weight: var(--w-s); font-size: var(--t-body); display: flex; justify-content: space-between; }
.req-aside .abody { padding: 8px 20px 4px; max-height: 280px; overflow-y: auto; }
.req-aside .arow { display: flex; gap: 12px; padding: 12px 0; border-bottom: var(--hairline) solid var(--line); }
.req-aside .arow:last-child { border-bottom: 0; }
.req-aside .arow .ph { width: 48px; height: 48px; border-radius: var(--radius); flex: none; }
.req-aside .afoot { padding: 16px 20px 20px; border-top: var(--hairline) solid var(--line); }

/* ---- Confirmation --------------------------------------- */
.confirm { max-width: 620px; margin: 0 auto; padding-block: 90px 120px; text-align: center; }
.confirm .mark { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 28px; }
.confirm h1 { font-size: var(--t-h3); font-weight: var(--w-s); letter-spacing: -.02em; margin: 0 0 16px; }
.confirm p { color: var(--muted); line-height: 1.6; font-size: var(--t-body-l); }
.confirm .ref { display: inline-flex; gap: 10px; margin-top: 26px; padding: 12px 20px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); font-variant-numeric: tabular-nums; }

/* ---- Home / hero ---------------------------------------- */
.hero { padding-block: 64px 40px; }
.hero h1 { font-size: clamp(40px, 6vw, var(--t-h1)); font-weight: var(--w-s); letter-spacing: -.035em; line-height: .98; margin: 0; max-width: 16ch; }
.hero h1 .ac { color: var(--accent); }
.hero p { margin: 26px 0 0; color: var(--muted); font-size: var(--t-body-l); max-width: 52ch; line-height: 1.55; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; }
.fam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: var(--hairline) solid var(--line); margin-top: 12px; }
.fam-card { background: var(--bg); padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 14px; transition: background .12s; }
.fam-card:hover { background: var(--bg-2); }
.fam-card:hover .go { color: var(--accent); }
.fam-card .fc-top { display: flex; justify-content: space-between; align-items: baseline; }
.fam-card .fc-name { font-size: var(--t-h6); font-weight: var(--w-m); letter-spacing: -.01em; }
.fam-card .fc-n { font-size: var(--t-label); color: var(--muted-2); font-variant-numeric: tabular-nums; }
.fam-card .go { font-size: var(--t-body-s); color: var(--muted); }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: var(--hairline) solid var(--line); margin-block: 72px; }
.trust .t { background: var(--bg); padding: 34px 28px; }
.trust .t .n { font-size: var(--t-label); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; font-weight: var(--w-m); }
.trust .t h3 { font-size: var(--t-h5); font-weight: var(--w-s); letter-spacing: -.015em; margin: 16px 0 10px; line-height: 1.1; }
.trust .t p { color: var(--muted); line-height: 1.55; font-size: var(--t-body-s); margin: 0; }

/* ---- Footer --------------------------------------------- */
.imacx-ft { border-top: var(--hairline) solid var(--line); padding-block: 56px 40px; margin-top: 40px; }
.imacx-ft .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.imacx-ft h5 { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 16px; font-weight: var(--w-m); }
.imacx-ft a { display: block; font-size: var(--t-body-s); padding: 5px 0; color: var(--fg); }
.imacx-ft a:hover { color: var(--accent); }
.imacx-ft .copy { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 22px; border-top: var(--hairline) solid var(--line); font-size: var(--t-label); color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }

/* ---- Section titles ------------------------------------- */
.sec-hd { display: flex; align-items: baseline; justify-content: space-between; padding-block: 18px; border-bottom: var(--hairline) solid var(--fg); margin-bottom: 0; }
.sec-hd h2 { font-size: var(--t-h4); font-weight: var(--w-s); letter-spacing: -.02em; margin: 0; }
.sec-hd .more { font-size: var(--t-body-s); color: var(--muted); }
.sec-hd .more:hover { color: var(--accent); }

@media (max-width: 1000px) {
  .pdp, .req { grid-template-columns: 1fr; gap: 32px; }
  .cat-layout { grid-template-columns: 1fr; }
  .facets { position: static; }
  .gallery, .req-aside { position: static; }
}

/* ===========================================================
   HOME — editorial B2B layout (hm- prefix)
   =========================================================== */
.hm { padding-bottom: 0; }
.hm-bleed { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); }

/* index/meta rows */
.hm-idx { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 28px 0 14px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: var(--w-m); }
.hm-idx .o { color: var(--accent); }
.hm-idx .sq { width: 7px; height: 7px; background: var(--accent); display: inline-block; margin-right: 8px; vertical-align: middle; }
.hm-rule { border-top: var(--hairline) solid var(--fg); }
.hm-rule-l { border-top: var(--hairline) solid var(--fg); }

/* HERO */
.hm-hero { display: grid; grid-template-columns: minmax(0,1fr) clamp(280px, 30vw, 400px); gap: 56px; align-items: end; padding: 56px 0 44px; }
.hm-hero h1 { font-size: clamp(56px, 10.5vw, 168px); font-weight: var(--w-s); letter-spacing: -.05em; line-height: .87; margin: 0; text-wrap: balance; }
.hm-hero h1 .o { color: var(--accent); }
.hm-hero h1 .reg { font-size: .32em; vertical-align: super; color: var(--accent); letter-spacing: 0; }
.hm-hero .meta { padding-bottom: 10px; }
.hm-hero .meta p { font-size: var(--t-body-l); line-height: 1.5; color: var(--fg-2); margin: 0 0 24px; }
.hm-hero .meta .stat { display: flex; align-items: center; gap: 14px; padding-top: 22px; margin-top: 24px; border-top: var(--hairline) solid var(--line); }
.hm-hero .meta .stat b { font-size: var(--t-h3); font-weight: var(--w-s); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-hero .meta .stat span { display: block; max-width: 240px; font-size: var(--t-body-s); color: var(--muted); line-height: 1.25; }
.hm-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* big featured figure */
.hm-figure { position: relative; border: var(--hairline) solid var(--line); margin-bottom: 0; overflow: hidden; }
.hm-figure .ph { border-radius: 0; }
.hm-figcap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 22px 24px; background: linear-gradient(to top, rgba(10,10,10,.62), transparent); color: #fff; }
.hm-figcap .t { font-size: var(--t-h6); font-weight: var(--w-m); letter-spacing: -.01em; max-width: 28ch; }
.hm-figcap .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; opacity: .85; margin-bottom: 8px; display: block; }
.hm-figcap .e i { color: var(--accent); font-style: normal; }
.hm-figcap .go { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-body-s); font-weight: var(--w-m); white-space: nowrap; }

/* MANIFESTO */
.hm-manifesto { padding: clamp(64px, 9vw, 120px) 0; display: grid; grid-template-columns: minmax(0,1fr) clamp(300px, 34vw, 440px); gap: clamp(36px, 5vw, 88px); align-items: center; }
.hm-manifesto .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); display: block; margin-bottom: 30px; }
.hm-manifesto p { font-size: clamp(28px, 4.4vw, 60px); font-weight: var(--w-m); letter-spacing: -.025em; line-height: 1.08; margin: 0; max-width: 18ch; text-wrap: balance; }
.hm-manifesto p .u { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 3px; background-position: 0 92%; background-repeat: no-repeat; }
.hm-manifesto p .o { color: var(--accent); }

/* Hero heading — split-text staggered entrance ("written" letter by letter, line by line) */
.hm-h1-split { font-size: clamp(56px, 10.5vw, 168px); font-weight: var(--w-s); letter-spacing: -.05em; line-height: .87; margin: 0; }
.hm-h1-split .ln { display: block; }
.hm-h1-split .sp { display: inline; }
.hm-h1-split .ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hm-h1-split .ch { opacity: 0; transform: translateY(.55em) rotate(3deg); animation: heroChar .52s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(var(--i) * 25ms); }
}
@keyframes heroChar { to { opacity: 1; transform: none; } }

/* Manifesto motion-path illustration */
.hm-mani-text { min-width: 0; }
.hm-mani-art { position: relative; width: 100%; }
.mani-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gift-draw { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gift-box { stroke: var(--fg); }
.gift-accent { stroke: var(--accent); }
.d-ribv, .d-ribh { stroke-width: 5; }
.gift-knot { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.gift-spark { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .gift-draw { stroke-dashoffset: 1; }
  .gift-knot, .gift-spark { opacity: 0; }
  .hm-manifesto.is-in .gift-draw { animation: giftDraw .72s ease forwards; }
  .hm-manifesto.is-in .d-body { animation-delay: .15s; }
  .hm-manifesto.is-in .d-lid { animation-delay: .5s; }
  .hm-manifesto.is-in .d-ribh { animation-delay: .85s; }
  .hm-manifesto.is-in .d-ribv { animation-delay: 1s; }
  .hm-manifesto.is-in .d-bowL { animation-delay: 1.3s; }
  .hm-manifesto.is-in .d-bowR { animation-delay: 1.45s; }
  .hm-manifesto.is-in .d-tailL { animation-delay: 1.6s; }
  .hm-manifesto.is-in .d-tailR { animation-delay: 1.68s; }
  .hm-manifesto.is-in .gift-knot { animation: giftPop .5s cubic-bezier(.2,.8,.3,1.6) 1.85s forwards; }
  .hm-manifesto.is-in .gift-wrap { animation: giftFloat 5.5s ease-in-out 2.5s infinite; }
  .hm-manifesto.is-in .sp1 { animation: sparkTwinkle 2.6s ease 2.4s infinite; }
  .hm-manifesto.is-in .sp2 { animation: sparkTwinkle 2.6s ease 3s infinite; }
  .hm-manifesto.is-in .u { background-size: 100% 3px; }
  .hm-manifesto .u { background-size: 0% 3px; transition: background-size .9s cubic-bezier(.2,.7,.2,1) .35s; }
}
@keyframes giftDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes giftPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes giftFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sparkTwinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }

/* CAPABILITIES index */
.hm-cap { }
.hm-cap-row { display: grid; grid-template-columns: 56px minmax(0,.9fr) minmax(0,1.1fr) 36px; gap: 28px; align-items: baseline; padding: 34px 0; border-top: var(--hairline) solid var(--line); transition: padding-left .25s ease, background .2s; cursor: default; }
.hm-cap-row:hover { padding-left: 16px; }
.hm-cap-row .n { font-size: var(--t-body-s); color: var(--muted-2); font-variant-numeric: tabular-nums; padding-top: 8px; }
.hm-cap-row h3 { font-size: clamp(24px, 2.6vw, 38px); font-weight: var(--w-s); letter-spacing: -.025em; margin: 0; line-height: 1.02; transition: color .2s; }
.hm-cap-row:hover h3 { color: var(--accent); }
.hm-cap-row p { color: var(--muted); line-height: 1.55; margin: 0; font-size: var(--t-body); }
.hm-cap-row .ar { color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .2s; justify-self: end; padding-top: 8px; }
.hm-cap-row:hover .ar { opacity: 1; transform: none; }

/* CAPABILITIES → gallery callout */
.hm-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 0; border-top: var(--hairline) solid var(--fg); cursor: pointer; }
.hm-callout-txt { font-size: clamp(18px, 1.9vw, 26px); font-weight: var(--w-r); letter-spacing: -.02em; line-height: 1.25; color: #0a0a0a; text-wrap: balance; }
.hm-callout-txt .o { color: var(--accent); }
.hm-callout-cta { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; font-weight: var(--w-m); color: var(--accent); white-space: nowrap; transition: gap .2s; }
.hm-callout:hover .hm-callout-cta { gap: 16px; }

/* FAMILIES index */
.hm-fams { padding: clamp(56px, 7vw, 96px) 0; }
.hm-fam { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; border-top: var(--hairline) solid var(--line); cursor: pointer; transition: padding-left .25s ease; }
.hm-fam:last-child { border-bottom: var(--hairline) solid var(--line); }
.hm-fam:hover { padding-left: 16px; }
.hm-fam .nm { font-size: clamp(24px, 3.4vw, 46px); font-weight: var(--w-m); letter-spacing: -.025em; line-height: 1.04; white-space: nowrap; display: flex; align-items: baseline; gap: 16px; transition: color .2s; min-width: 0; }
.hm-fam:hover .nm { color: var(--accent); }
.hm-fam .nm .ix { font-size: var(--t-body-s); color: var(--muted-2); font-variant-numeric: tabular-nums; font-weight: var(--w-r); letter-spacing: 0; }
.hm-fam .r { display: flex; align-items: center; gap: 22px; flex: none; }
.hm-fam .c { font-size: var(--t-body-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-fam .ar { color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .2s; }
.hm-fam:hover .ar { opacity: 1; transform: none; }

/* FEATURED campaign (editorial split) */
.hm-feat { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 3vw, 44px) 0 0; }
.hm-feat .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.hm-feat .e i { color: var(--accent); font-style: normal; }
.hm-feat h2 { font-size: clamp(28px, 3.6vw, 50px); font-weight: var(--w-s); letter-spacing: -.03em; line-height: 1.04; margin: 20px 0 22px; text-wrap: balance; }
.hm-feat p { color: var(--muted); line-height: 1.6; font-size: var(--t-body-l); margin: 0 0 28px; }

/* SCALE statement */
.hm-scale { padding: clamp(56px, 6vw, 92px) 0; border-top: var(--hairline) solid var(--fg); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
/* Balance the scale band: numbers sit centred between the two hairlines, so the
   space above and below the block matches instead of voiding out underneath. */
.imacx .hm > .hm-bleed-scale + .hm-bleed { margin-top: 0; }
.hm-scale .big { font-size: clamp(60px, 12vw, 180px); font-weight: var(--w-s); letter-spacing: -.05em; line-height: .86; font-variant-numeric: tabular-nums; }
.hm-scale .big .o { color: var(--accent); }
.hm-scale .big .ar { color: var(--muted-2); }
.hm-scale .side { max-width: 30ch; }
.hm-scale .side p { font-size: var(--t-body-l); color: var(--muted); line-height: 1.55; margin: 0 0 22px; }

/* SELECTED products (editorial strip) */
.hm-sel { padding: 0; }
.hm-sel-hd { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 22px; }
.hm-sel-hd h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: var(--w-s); letter-spacing: -.025em; margin: 0; }
.hm-sel-hd .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); display: block; margin-bottom: 14px; }

/* CLOSING CTA band */
.hm-band { background: var(--fg); color: var(--bg); margin-top: clamp(64px, 8vw, 110px); }
.hm-band .in { padding: clamp(64px, 9vw, 130px) 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.hm-band h2 { font-size: clamp(38px, 6vw, 96px); font-weight: var(--w-s); letter-spacing: -.04em; line-height: .92; margin: 0; text-wrap: balance; }
.hm-band h2 .o { color: var(--accent); }
.hm-band .r p { color: rgba(255,255,255,.62); font-size: var(--t-body-l); line-height: 1.5; margin: 0 0 26px; }
.hm-band .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.5); display: block; margin-bottom: 26px; }

@media (max-width: 1000px) {
  .hm-hero, .hm-feat, .hm-scale, .hm-band .in, .hm-manifesto { grid-template-columns: 1fr; gap: 32px; }
  .hm-cap-row { grid-template-columns: 40px 1fr; }
  .hm-cap-row p, .hm-cap-row .ar { grid-column: 2; }
  .hm-scale { justify-items: start; }
  .hm-scale .big { font-size: clamp(46px, 9vw, 96px); line-height: 1; }
}

/* ===========================================================
   ADDENDA — rounded buttons, mega menu, search popup, breathing
   =========================================================== */

/* Rounded buttons everywhere (pill) — elegant contrast to the straight layout */
.imacx .btn, .imacx .btn-solid, .btn-accent, .quote-btn { border-radius: 999px; }
.imacx .btn { padding-inline: 22px; }

/* Prominent search icon (replaces the inline search bar) */
.search-ic { width: 44px; height: 44px; border-radius: 999px; border: var(--hairline) solid var(--line-2); background: var(--bg); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; }
.search-ic svg { width: 20px; height: 20px; }
.search-ic:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* Header action icons — unified round buttons (search / orçamento / contactos) */
.hd-ic { position: relative; width: 44px; height: 44px; border-radius: 999px; border: var(--hairline) solid var(--line-2); background: var(--bg); color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; }
.hd-ic svg { width: 20px; height: 20px; }
.hd-ic:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.hd-ic--accent, .hd-ic[data-on="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.hd-ic[data-on="true"] { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 26%, transparent); }
.hd-ic--accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.hd-ic .count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--fg); color: var(--bg); border: 2px solid var(--bg); font-size: 10px; font-weight: var(--w-s); display: inline-flex; align-items: center; justify-content: center; }

/* Contacts popover */
.hd-contact { position: relative; display: inline-flex; }
.hd-pop-scrim { position: fixed; inset: 0; z-index: 90; }
.hd-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 91; width: 284px; background: var(--bg); border: var(--hairline) solid var(--line-2); border-radius: var(--radius); box-shadow: 0 26px 54px -22px rgba(10,10,10,.45); padding: 20px; display: flex; flex-direction: column; animation: hd-pop-in .16s ease; }
@keyframes hd-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hd-pop .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.hd-pop-tel { font-size: var(--t-h6); font-weight: var(--w-s); letter-spacing: -.01em; color: var(--fg); }
.hd-pop-mail { font-size: var(--t-body); color: var(--accent); margin-top: 3px; }
.hd-pop-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-body-s); color: var(--muted); margin-top: 14px; padding-top: 14px; border-top: var(--hairline) solid var(--line); }
.hd-pop-cities { font-size: var(--t-body-s); color: var(--muted); margin-top: 6px; }
.hd-pop .btn-accent { margin-top: 18px; }

/* ---- Mobile nav (hamburger + drawer) -------------------- */
.hd-burger { display: none; }
.mnav-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,10,.42); opacity: 0; visibility: hidden; transition: opacity .25s; }
.mnav-scrim[data-open="true"] { opacity: 1; visibility: visible; }
.mnav { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); background: var(--bg); z-index: 71; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.1,1); display: flex; flex-direction: column; box-shadow: -24px 0 60px rgba(10,10,10,.18); }
.mnav[data-open="true"] { transform: none; }
.mnav-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad-x); border-bottom: var(--hairline) solid var(--line); }
.mnav-body { flex: 1; overflow-y: auto; padding: 8px var(--pad-x); display: flex; flex-direction: column; }
.mnav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 16px 2px; font: inherit; font-size: var(--t-h6); font-weight: var(--w-r); letter-spacing: -.01em; color: var(--fg); cursor: pointer; text-align: left; border-bottom: var(--hairline) solid var(--line); }
.mnav-link:hover { color: var(--accent); }
.mnav-chev { font-size: 12px; opacity: .6; transition: transform .2s; }
.mnav-link--toggle[data-open="true"] .mnav-chev { transform: rotate(180deg); }
.mnav-sub { display: flex; flex-direction: column; padding: 4px 0 10px; }
.mnav-sublink { background: none; border: 0; padding: 11px 12px; font: inherit; font-size: var(--t-body); color: var(--muted); cursor: pointer; text-align: left; }
.mnav-sublink:hover { color: var(--accent); }
.mnav-foot { border-top: var(--hairline) solid var(--line); padding: 20px var(--pad-x) calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.mnav-foot .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.mnav-tel { font-size: var(--t-h6); font-weight: var(--w-s); letter-spacing: -.01em; color: var(--fg); }
.mnav-mail { font-size: var(--t-body); color: var(--accent); margin-top: 3px; }

@media (max-width: 760px) {
  .imacx-nav { display: none; }
  .hd-contact { display: none; }
  .hd-burger { display: inline-flex; }
  .imacx-hd-row { gap: 14px; }
  .imacx-hd-actions { gap: 8px; }
}

/* Consistent ambient zoom on cover / lifestyle imagery (never product photos) */
@media (prefers-reduced-motion: no-preference) {
  .fam-tile img, .cats-fig img, .hm-camp-bg img { animation: imacx-cover-zoom 10s ease-in-out infinite; }
}
@keyframes imacx-cover-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.imacx-nav { margin-left: 30px; }
.imacx-nav button { display: inline-flex; align-items: center; gap: 6px; }
.imacx-nav button .cv { font-size: 9px; opacity: .55; transition: transform .2s; }
.imacx-nav button:hover .cv { transform: translateY(1px); }

/* MEGA MENU */
.imacx-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); box-shadow: 0 28px 44px -30px rgba(10,10,10,.4); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 100; }
.imacx-mega.is-open { opacity: 1; visibility: visible; transform: none; }
.imacx-mega-in { display: block; padding: 22px var(--pad-x) 28px; }
.imacx-mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 20px 22px; max-height: min(58vh, 420px); overflow-y: auto; padding: 2px 6px 2px 0; }
.mega-col { appearance: none; border: 0; background: none; color: var(--fg); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 96px; padding: 5px 3px; text-align: center; cursor: pointer; font: inherit; }
.mega-col:hover .mega-h { color: var(--accent); }
.mega-thumb { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex: none; border: var(--hairline) solid color-mix(in srgb, var(--line-2) 46%, transparent); background: #fff; color: #44505b; transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.mega-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-col:hover .mega-thumb { border-color: color-mix(in srgb, var(--accent) 54%, var(--line-2)); background: color-mix(in srgb, var(--accent) 4%, #fff); color: #25313d; transform: translateY(-2px); }
.mega-h { display: block; max-width: 112px; margin: 0; padding: 0; border: 0; color: #26313c; cursor: pointer; font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.15; text-wrap: balance; }
.pill-sm { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 999px; border: 1.5px solid currentColor; font-size: var(--t-body-s); font-weight: var(--w-s); white-space: nowrap; }
.pill-sm.light { border-color: #fff; color: #fff; }
/* SEARCH POPUP */
.search-overlay { position: fixed; inset: 0; background: rgba(10,10,10,.46); z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 13vh 20px 0; animation: sov-fade .18s ease; }
@keyframes sov-fade { from { opacity: 0; } to { opacity: 1; } }
.search-box { width: min(660px, 96vw); background: var(--bg); border: var(--hairline) solid var(--line-2); border-radius: var(--radius); box-shadow: 0 30px 60px -24px rgba(10,10,10,.5); overflow: hidden; }
.search-row { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: var(--hairline) solid var(--line); }
.search-row svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.search-row input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t-h6); color: var(--fg); }
.search-row input::placeholder { color: var(--muted-2); }
.search-row .esc { flex: none; font: inherit; font-size: 10px; letter-spacing: .1em; font-weight: var(--w-s); color: #0a0a0a; background: none; border: var(--hairline) solid var(--line-2); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.search-row .esc:hover { border-color: var(--accent); color: var(--accent); }
.search-sug { padding: 20px 24px 26px; }
.search-sug .lab { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .1em; color: #0a0a0a; font-weight: var(--w-m); }
.search-sug .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.search-sug .chipx { cursor: pointer; color: #0a0a0a; transition: color .15s, border-color .15s, background .15s; }
.search-sug .chipx:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }

/* Section breathing — more air between home blocks */
.hm > .hm-bleed + .hm-bleed { margin-top: clamp(56px, 7vw, 104px); }
.hm-camp { padding-bottom: 8px; }
.hm-manifesto { padding: 0; }

@media (max-width: 1000px) {
  .imacx-mega-cols { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 18px 14px; }
}

/* FAMILY BENTO — real-image category cards, varied sizes */
.hm-fams { padding: 0; }
.fam-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 320px; gap: 18px; grid-auto-flow: dense; margin-top: 32px; }
.fam-tile { position: relative; overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; border-radius: var(--radius); background: var(--bg-3); }
.fam-tile.w2 { grid-column: span 2; }
.fam-tile.h2 { grid-row: span 2; }
.fam-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.fam-tile:hover img { transform: scale(1.06); }
.fam-tile .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.78), rgba(10,10,10,.04) 58%); }
.fam-tile .ft-in { position: relative; width: 100%; padding: 26px 28px; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fam-tile .ft-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fam-tile .ft-name { font-size: var(--t-h5); font-weight: var(--w-s); letter-spacing: -.015em; line-height: 1.08; }
.fam-tile.w2 .ft-name, .fam-tile.h2 .ft-name { font-size: var(--t-h4); }
.fam-tile .ft-n { font-size: var(--t-label); opacity: .82; font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .06em; }
.fam-tile .ft-go { flex: none; width: 46px; height: 46px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.fam-tile:hover .ft-go { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .fam-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .fam-tile.w2 { grid-column: span 2; }
  .fam-tile.h2 { grid-row: span 1; }
}

/* Lighter, more elegant body copy + nav (Inter 300) — not headings */
.imacx-nav button { font-weight: var(--w-r); letter-spacing: .015em; }
.imacx-annc, .quote-btn { font-weight: var(--w-r); }
.hm-hero .meta p,
.hm-cap-row p,
.hm-feat p,
.hm-scale .side p,
.hm-camp-in p,
.pdp-sub,
.trust .t p,
.confirm p,
.imacx-ft p { font-weight: 300; }

/* No grey text — black for contrast (placed last so it always wins) */
.hm .hm-idx,
.hm-hero .meta p,
.hm-hero .meta .stat span,
.hm-manifesto .e, .hm-feat .e, .hm-sel-hd .e,
.hm-cap-row .n, .hm-cap-row p,
.hm-fam .c, .hm-fam .nm .ix,
.hm-feat p, .hm-scale .side p { color: #0a0a0a; }

/* ===========================================================
   CATEGORIES PAGE (cats-) — editorial directory
   Imagery module is a SQUARE (supplier product photos are 1:1).
   =========================================================== */
.cats { padding-bottom: 0; }

.cats-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 76px); align-items: end; padding: 44px 0 60px; }
.cats-hero .lhs { min-width: 0; }
.cats-hero h1 { font-size: clamp(46px, 6.6vw, 104px); font-weight: var(--w-s); letter-spacing: -.045em; line-height: .9; margin: 0; text-wrap: balance; }
.cats-hero h1 .o { color: var(--accent); }
.cats-hero .lead { font-size: var(--t-body-l); color: #0a0a0a; line-height: 1.5; margin: 26px 0 0; max-width: 44ch; font-weight: 300; }
.cats-hero .stat { display: flex; gap: 40px; margin-top: 32px; padding-top: 24px; border-top: var(--hairline) solid var(--line); }
.cats-hero .stat .s b { display: block; font-size: var(--t-h4); font-weight: var(--w-s); letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1; }
.cats-hero .stat .s span { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 8px; display: block; }
.cats-fig { position: relative; border: var(--hairline) solid var(--line); overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-3); }
.cats-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.cats-fig:hover img { transform: scale(1.045); }
.cats-figcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; background: linear-gradient(to top, rgba(10,10,10,.6), transparent 78%); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cats-figcap .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; opacity: .82; display: block; margin-bottom: 6px; }
.cats-figcap .t { font-size: var(--t-h6); font-weight: var(--w-s); letter-spacing: -.01em; }

/* directory */
.cats-dir { border-top: var(--hairline) solid var(--fg); }
.catrow { display: grid; grid-template-columns: 54px minmax(0,1fr) auto 96px; gap: 30px; align-items: center; padding: 22px 0; border-bottom: var(--hairline) solid var(--line); cursor: pointer; transition: padding-left .25s ease, background .2s; }
.catrow:hover { padding-left: 16px; }
.catrow .cr-n { font-size: var(--t-body-s); color: var(--muted-2); font-variant-numeric: tabular-nums; align-self: start; padding-top: 6px; }
.catrow .cr-main { min-width: 0; }
.catrow .cr-name { font-size: clamp(26px, 3.3vw, 44px); font-weight: var(--w-m); letter-spacing: -.025em; line-height: 1.02; display: flex; align-items: center; gap: 16px; transition: color .2s; }
.catrow:hover .cr-name { color: var(--accent); }
.catrow .cr-name .arr { opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .2s; color: var(--accent); display: inline-flex; }
.catrow:hover .cr-name .arr { opacity: 1; transform: none; }
.catrow .cr-sub { font-size: var(--t-body-s); color: var(--muted); margin-top: 9px; letter-spacing: .01em; }
.catrow .cr-peek { display: flex; gap: 8px; }
.cr-sq { width: 66px; height: 66px; border: var(--hairline) solid var(--line); overflow: hidden; position: relative; background: var(--bg-3); filter: grayscale(.2) opacity(.9); transition: filter .3s, transform .3s; }
.catrow:hover .cr-sq { filter: none; }
.cr-sq img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-sq .ph { width: 100%; height: 100%; }
.catrow .cr-count { font-size: var(--t-body-l); color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; font-weight: var(--w-m); }
.catrow .cr-count small { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin-top: 3px; font-weight: var(--w-r); }

/* techniques mini-index on categories page */
.cats-tech { padding: clamp(40px, 6vw, 80px) 0 0; }
.cats-tech .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: var(--hairline) solid var(--line); margin-top: 22px; }
.cats-tech .tc { background: var(--bg); padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.cats-tech .tc .tn { font-size: var(--t-label); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.cats-tech .tc .th { font-size: var(--t-body-l); font-weight: var(--w-m); letter-spacing: -.01em; }
.cats-tech .tc .td { font-size: var(--t-body-s); color: var(--muted); }

@media (max-width: 1000px) { .cats-hero { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 860px) {
  .catrow { grid-template-columns: 38px 1fr auto; column-gap: 18px; }
  .catrow .cr-peek { display: none; }
  .cats-tech .grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   CATALOG PAGE (cat2-) — editorial full-bleed product index
   =========================================================== */
.cat2 { padding-bottom: 80px; }
.cat2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-block: 6px 24px; }
.cat2-head .lhs { min-width: 0; }
.cat2-head h2 { font-size: clamp(34px, 4.6vw, 66px); font-weight: var(--w-s); letter-spacing: -.038em; line-height: .94; margin: 10px 0 0; text-wrap: balance; }
.cat2-head .lead { color: #0a0a0a; font-size: var(--t-body); max-width: 42ch; line-height: 1.5; margin-top: 14px; font-weight: 300; }
.cat2-head .num-tag { font-size: var(--t-body-s); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 8px; }

/* family quick-filter bar */
.cat2-fambar { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0; border-top: var(--hairline) solid var(--fg); border-bottom: var(--hairline) solid var(--line); scrollbar-width: none; }
.cat2-fambar::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px; border: var(--hairline) solid var(--line-2); border-radius: 999px; background: var(--bg); font: inherit; font-size: var(--t-body-s); font-weight: var(--w-m); color: var(--fg); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.fchip:hover { border-color: var(--fg); }
.fchip[data-on="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.fchip .c { font-size: var(--t-label); color: var(--muted-2); font-variant-numeric: tabular-nums; }
.fchip[data-on="true"] .c { color: rgba(255,255,255,.55); }

/* toolbar */
.cat2-bar { display: flex; align-items: center; gap: 14px; padding: 16px 0; flex-wrap: wrap; }
.filt-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 17px; border: var(--hairline) solid var(--fg); border-radius: 999px; background: var(--bg); font: inherit; font-size: var(--t-body-s); font-weight: var(--w-m); cursor: pointer; color: var(--fg); }
.filt-btn:hover { background: var(--fg); color: var(--bg); }
.filt-btn .c { background: var(--accent); color: var(--accent-fg); font-size: var(--t-label); font-weight: var(--w-s); min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.filt-btn:hover .c { background: var(--bg); color: var(--accent); }

/* featured editorial highlight (real square lifestyle image) */
.cat2-hero { display: grid; grid-template-columns: minmax(0,.82fr) 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; padding: 18px 0 38px; border-bottom: var(--hairline) solid var(--line); margin-bottom: 4px; }
.cat2-hero .fig { position: relative; border: var(--hairline) solid var(--line); aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-3); }
.cat2-hero .fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.cat2-hero .fig:hover img { transform: scale(1.045); }
.cat2-hero .fig .tag { position: absolute; top: 16px; left: 16px; }
.cat2-hero .info .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.cat2-hero .info .e i { color: var(--accent); font-style: normal; }
.cat2-hero .info h3 { font-size: clamp(28px, 3.2vw, 46px); font-weight: var(--w-s); letter-spacing: -.03em; line-height: 1.02; margin: 16px 0 16px; text-wrap: balance; }
.cat2-hero .info p { color: #0a0a0a; font-weight: 300; line-height: 1.6; font-size: var(--t-body-l); margin: 0 0 24px; max-width: 48ch; }
.cat2-hero .info .ftr { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* facet drawer (slides from left) */
.fdrawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(400px, 92vw); background: var(--bg); z-index: 61; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.1,1); display: flex; flex-direction: column; border-right: var(--hairline) solid var(--line); }
.fdrawer[data-open="true"] { transform: none; }
.fdrawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad-x); border-bottom: var(--hairline) solid var(--line); }
.fdrawer-hd h3 { margin: 0; font-size: var(--t-h6); font-weight: var(--w-s); }
.fdrawer-body { flex: 1; overflow-y: auto; padding: 4px var(--pad-x); }
.fdrawer-body .facets { position: static; }
.fdrawer-foot { border-top: var(--hairline) solid var(--line); padding: 16px var(--pad-x); display: flex; gap: 10px; }

@media (max-width: 1000px) { .cat2-hero { grid-template-columns: 1fr; gap: 26px; } }

/* ===========================================================
   PDP v2 — step configurator, live budget, long desc, detail tabs
   =========================================================== */
.pdp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.pdp-meta .muted { font-size: var(--t-body-s); }
.pdp-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; margin-top: 8px; }
.pdp-title-row .pdp-title { margin-top: 0; }
.price-from { min-width: 132px; border-left: var(--hairline) solid var(--line); padding-left: 20px; text-align: right; }
.price-from span, .price-from small { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.price-from b { display: block; margin-top: 4px; font-size: var(--t-h5); line-height: 1; font-weight: var(--w-s); color: var(--fg); }
.price-from em { font-style: normal; font-size: var(--t-body-s); font-weight: var(--w-r); margin-left: 2px; }
.price-from small { margin-top: 6px; letter-spacing: .06em; }
.pdp-jump { display: flex; gap: 22px; margin-top: 16px; }
.pdp-jump a { font-size: var(--t-body-s); color: var(--accent); cursor: pointer; font-weight: var(--w-m); }
.pdp-jump a:hover { text-decoration: underline; }

/* step stack */
.steps-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.stepc { border: var(--hairline) solid var(--line-2); border-radius: var(--radius); }
.stepc-hd { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: var(--bg-2); border: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.stepc[data-open="true"] .stepc-hd { border-bottom: var(--hairline) solid var(--line); }
.stepc-hd:hover { background: var(--bg-3); }
.stepc-n { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--fg); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-body-s); font-weight: var(--w-s); font-variant-numeric: tabular-nums; }
.stepc[data-open="true"] .stepc-n { background: var(--accent); }
.stepc-t { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.stepc-title { font-size: var(--t-body); font-weight: var(--w-m); letter-spacing: -.005em; }
.stepc-hint { font-size: var(--t-label); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stepc-tog { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-h6); color: var(--accent); }
.stepc-body { padding: 18px 16px; }

.stock-choice { margin-top: 14px; display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border: var(--hairline) solid var(--line); background: var(--bg-2); }
.stock-choice b { display: block; font-size: var(--t-body-s); font-weight: var(--w-s); color: var(--fg); }
.stock-choice span:not(.stock-dot) { display: block; margin-top: 3px; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stock-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: var(--muted-2); }
.stock-dot[data-ok="true"] { background: var(--accent); }

/* print (colour-count) options */
.print-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.print-opt { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); background: var(--bg); cursor: pointer; text-align: left; font: inherit; color: var(--fg); }
.print-opt:hover { border-color: var(--fg); }
.print-opt[data-on="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-tint); }
.print-opt .po-radio { flex: none; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--line-2); position: relative; }
.print-opt[data-on="true"] .po-radio { border-color: var(--accent); }
.print-opt[data-on="true"] .po-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--accent); }
.print-opt .po-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.print-opt .po-text b { font-size: var(--t-body-s); font-weight: var(--w-m); }
.print-opt .po-text em { font-style: normal; font-size: var(--t-label); color: var(--muted); }
.color-count { margin-top: 12px; padding-top: 12px; border-top: var(--hairline) solid var(--line); }
.color-count > span { display: block; margin-bottom: 8px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-m); color: var(--muted); }
.color-count .opt { min-width: 38px; justify-content: center; }
.inkdots { display: inline-flex; align-items: center; flex: none; }
.inkdot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg); margin-left: -5px; }
.inkdot:first-child { margin-left: 0; }

.qty-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tier-table { margin-top: 14px; border: var(--hairline) solid var(--line-2); background: var(--bg); }
.tier-table-hd { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-bottom: var(--hairline) solid var(--line); font-size: var(--t-label); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier-cell { min-height: 58px; padding: 10px 12px; border: 0; border-right: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; text-align: left; }
.tier-cell:nth-child(3n) { border-right: 0; }
.tier-cell[data-on="true"] { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.tier-q { font-size: var(--t-label); color: var(--muted); }
.tier-p { font-size: var(--t-body-s); font-weight: var(--w-s); color: var(--fg); }

/* shipping radio rows */
.radio-rows { display: flex; flex-direction: column; gap: 8px; }
.radio-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: var(--hairline) solid var(--line-2); border-radius: var(--radius); cursor: pointer; }
.radio-row:hover { border-color: var(--fg); }
.radio-row[data-on="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-tint); }
.radio-row .radio-dot { flex: none; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--line-2); position: relative; }
.radio-row[data-on="true"] .radio-dot { border-color: var(--accent); }
.radio-row[data-on="true"] .radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--accent); }
.radio-row .radio-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.radio-row .radio-main b { font-size: var(--t-body-s); font-weight: var(--w-m); }
.radio-row .radio-main em { font-style: normal; font-size: var(--t-label); color: var(--muted); }
.radio-row .radio-right { flex: none; font-size: var(--t-body-s); font-weight: var(--w-s); }

/* budget box additions */
.qbox { margin-top: 28px; }
.qbox-hd { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; background: var(--fg); color: var(--bg); font-size: var(--t-body-s); font-weight: var(--w-s); text-transform: uppercase; letter-spacing: .08em; }
.qbox-hd .num { opacity: .7; letter-spacing: .02em; }
.qbox .row.sub2 { color: var(--muted); }
.qbox .row.sub2 .v { font-weight: var(--w-r); }
.qbox .row.total .k { color: var(--bg); font-weight: var(--w-s); white-space: nowrap; }
.qbox .row.total { background: var(--fg); color: var(--bg); }
.qbox .row.total .v { color: var(--bg); }
.pdp-add { margin-top: 16px; }
.pdp-ship-note { display: flex; align-items: center; gap: 8px; font-size: var(--t-body-s); color: var(--muted); margin-top: 14px; }
.pdp-ship-note svg { flex: none; color: var(--accent); }

/* long description */
.pdp-desc { border-top: var(--hairline) solid var(--fg); padding-block: 40px 8px; max-width: 88ch; }
.pdp-desc h2 { font-size: var(--t-h4); font-weight: var(--w-s); letter-spacing: -.025em; margin: 0 0 18px; }
.pdp-desc .lede { font-size: var(--t-body-l); line-height: 1.7; color: var(--fg-2); font-weight: 300; margin: 0; }
.pdp-desc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; }
.pdp-desc-grid h4 { font-size: var(--t-body); font-weight: var(--w-s); letter-spacing: -.005em; margin: 0 0 14px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: var(--t-body-s); line-height: 1.5; color: var(--fg-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* detail tabs */
.pdp-tabs-wrap { margin-block: 48px 56px; }
.tabsx-bar { display: flex; gap: 4px; border-bottom: var(--hairline) solid var(--fg); overflow-x: auto; scrollbar-width: none; }
.tabsx-bar::-webkit-scrollbar { display: none; }
.tabsx-tab { flex: none; padding: 14px 20px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: var(--t-body-s); font-weight: var(--w-m); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabsx-tab:hover { color: var(--fg); }
.tabsx-tab[data-on="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tabsx-panel { padding-top: 32px; }
.tabsx-panel h4 { font-size: var(--t-body); font-weight: var(--w-s); letter-spacing: -.005em; margin: 0 0 14px; }

.spec-row { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--t-body-s); }
.spec-row .sk { color: var(--muted); }
.spec-row .sv { font-weight: var(--w-m); text-align: right; }
.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.info-cols-lower { margin-top: 34px; align-items: start; }
.alsoin { list-style: none; margin: 0; padding: 0; columns: 2; gap: 56px; }
.alsoin li { padding: 6px 0; font-size: var(--t-body-s); break-inside: avoid; }
.alsoin a { color: var(--accent); cursor: pointer; }
.alsoin a:hover { text-decoration: underline; }
.pack-list { display: grid; gap: 0; width: 100%; }
.pack-line { display: grid; grid-template-columns: minmax(170px, .5fr) 1fr; gap: 18px; padding: 12px 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--t-body-s); }
.pack-label { color: var(--muted); font-weight: var(--w-r); }
.pack-value { color: var(--fg); font-weight: var(--w-m); text-align: right; }

/* print areas tab */
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; max-width: 720px; }
.area-fig { position: relative; max-width: 240px; }
.area-fig .ph { border-radius: var(--radius); }
.area-mark { position: absolute; inset: 22% 24%; border: 1.5px dashed var(--accent); }
.area-source { aspect-ratio: 1 / 1; max-width: 240px; border: var(--hairline) solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; padding: 18px; }
.area-source-img { background: #fff; justify-content: flex-start; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.area-source-img img { width: 100%; min-height: 0; flex: 1; object-fit: contain; display: block; padding: 8px; }
.area-source-img figcaption { border-top: var(--hairline) solid var(--line); padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 3px; background: var(--surface); }
.area-source-k { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.area-source strong { font-size: var(--t-body-s); font-weight: var(--w-s); overflow-wrap: anywhere; }
.area-source span:last-child { font-size: var(--t-label); color: var(--muted); }
.area-specs { margin-top: 16px; }
.tech-list { margin-top: 12px; border-top: var(--hairline) solid var(--line); }
.tech-line { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--t-body-s); }
.tech-line span { color: var(--fg); }
.tech-line b { font-weight: var(--w-m); text-align: right; white-space: nowrap; }

/* stock tab */
.stock-table { border-top: var(--hairline) solid var(--fg); max-width: 640px; }
.st-head, .st-row { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 16px; padding: 13px 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--t-body-s); align-items: center; }
.st-head { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.st-row[data-selected="true"] { background: var(--accent-tint); box-shadow: -12px 0 0 var(--accent-tint), 12px 0 0 var(--accent-tint); }
.st-color { display: flex; align-items: center; gap: 10px; }
.st-color .sw { width: 18px; height: 18px; border-radius: var(--radius); border: var(--hairline) solid var(--line-2); flex: none; }

/* shipping table */
.ship-table-wrap { overflow-x: auto; border: var(--hairline) solid var(--line); }
.ship-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: var(--t-body-s); }
.ship-table th, .ship-table td { padding: 11px 12px; text-align: center; border-left: var(--hairline) solid var(--line); border-top: var(--hairline) solid var(--line); }
.ship-table thead th { background: var(--bg-2); font-weight: var(--w-s); }
.ship-table tbody th { text-align: left; font-weight: var(--w-m); white-space: nowrap; background: var(--bg-2); }
.ship-table th:first-child, .ship-table td:first-child { border-left: 0; }
.ship-table thead th:first-child { border-top: 0; }
.tab-note { font-size: var(--t-body-s); color: var(--muted); line-height: 1.6; margin: 22px 0 0; max-width: 88ch; }

@media (max-width: 700px) {
  .print-opts { grid-template-columns: 1fr; }
  .pdp-title-row { grid-template-columns: 1fr; gap: 14px; }
  .price-from { border-left: 0; border-top: var(--hairline) solid var(--line); padding: 14px 0 0; text-align: left; }
  .pdp-desc-grid, .info-cols { grid-template-columns: 1fr; gap: 26px; }
  .pack-line { grid-template-columns: 1fr; gap: 6px; }
  .pack-value { text-align: left; }
  .alsoin { columns: 1; }
}

/* ===========================================================
   INK & UPPERCASE PASS — black, thin, legible; hierarchy by size
   (no greyish body text; reserve weight for headlines)
   =========================================================== */
/* Ink everywhere — secondary text goes black, hierarchy carried by
   size + weight, not by grey. Borders (--line/--line-2) stay hairline. */
.imacx { --muted: #0a0a0a; --muted-2: #1a1a1a; --fg-2: #0a0a0a; }
/* Placeholders are the one exception — keep them grey so inputs still read as empty */
.imacx input::placeholder, .imacx textarea::placeholder { color: #9a9a9a; }

/* Softer section dividers — the heavy black rules between sections read as
   disruptive; drop them to a light hairline like the footer. */
.imacx .cat-head, .imacx .sec-hd { border-bottom-color: var(--line); }
.imacx .hm-rule, .imacx .hm-rule-l, .imacx .hm-scale, .imacx .cats-dir,
.imacx .cat2-fambar, .imacx .pdp-desc, .imacx .tabsx-bar, .imacx .stock-table { border-top-color: var(--line); }

/* Centre the footer legal bar */
.imacx .ft-legal-nav { justify-content: center; }

/* Uppercase nav, thin and well-spaced */
.imacx-nav button { text-transform: uppercase; letter-spacing: .14em; font-size: var(--t-label); font-weight: var(--w-r); color: #0a0a0a; }
.imacx-nav button .cv { letter-spacing: 0; }

/* PDP — replace grey with ink, keep it light */
.imacx .pdp-sub { color: #0a0a0a; }
.imacx .pdp-meta .muted { color: #0a0a0a; font-weight: 300; }
.imacx .crumbs, .imacx .crumbs a, .imacx .crumbs .sep { color: #0a0a0a; font-weight: 300; }
.imacx .stepc-hint { color: #0a0a0a; }
.imacx .spec-row .sk { color: #0a0a0a; font-weight: 300; }
.imacx .spec-row .sv { font-weight: var(--w-m); }
.imacx .tab-note { color: #0a0a0a; font-weight: 300; }
.imacx .pdp-ship-note { color: #0a0a0a; font-weight: 300; }
.imacx .st-head { color: #0a0a0a; }
.imacx .tabsx-tab { color: #0a0a0a; font-weight: var(--w-r); }
.imacx .tabsx-tab[data-on="true"] { font-weight: var(--w-m); }

/* Budget box — ink labels, hierarchy via size + the inverted total bar */
.imacx .qbox .row .k { color: #0a0a0a; }
.imacx .qbox .row.sub2 .k { color: #0a0a0a; font-weight: 300; font-size: var(--t-body-s); }
.imacx .qbox .row.sub2 .v { color: #0a0a0a; font-weight: 300; }
.imacx .print-opt .po-text em,
.imacx .radio-row .radio-main em { color: #0a0a0a; }

/* ===========================================================
   FOOTER v3 — ink, uppercase, size-led hierarchy, contact w/ impact
   =========================================================== */
.imacx-ft .cols { display: grid; grid-template-columns: 1.6fr 1fr 1.25fr; gap: 44px; }
.imacx-ft h5 { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .16em; color: #0a0a0a; margin: 0 0 20px; font-weight: var(--w-m); }
.imacx-ft a { display: block; font-size: var(--t-body); padding: 7px 0; color: #0a0a0a; font-weight: 300; letter-spacing: .005em; }
.imacx-ft a:hover { color: var(--accent); }
.ft-brand p { max-width: 38ch; margin-top: 18px; line-height: 1.6; font-size: var(--t-body-s); font-weight: 300; color: #0a0a0a; }

/* contact — worked through size, not weight */
.ft-contact { display: flex; flex-direction: column; align-items: flex-start; }
.ft-contact .ft-tel { display: block; white-space: nowrap; font-size: clamp(19px, 1.5vw, 25px); font-weight: 300; letter-spacing: -.01em; color: #0a0a0a; padding: 0; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ft-contact .ft-mail { display: block; font-size: var(--t-body-l); font-weight: 300; color: #0a0a0a; padding: 12px 0 0; line-height: 1.2; }
.ft-contact .ft-hours { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; font-size: var(--t-body-s); font-weight: 300; color: #0a0a0a; line-height: 1.4; }
.ft-contact .ft-hours span { white-space: nowrap; }
.ft-contact .ft-cities { margin-top: 18px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: #0a0a0a; }

/* legal bar — uppercase, light, black */
.ft-legal { margin-top: 52px; padding-top: 26px; border-top: var(--hairline) solid var(--line); }
.ft-legal-nav { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.ft-legal-nav a { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .1em; color: #0a0a0a; cursor: pointer; padding: 2px 0; font-weight: var(--w-r); }
.ft-legal-nav a:hover { color: var(--accent); }
.imacx-ft .copy { margin-top: 22px; padding-top: 18px; color: #0a0a0a; }

@media (max-width: 860px) {
  .imacx-ft .cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .ft-brand, .ft-contact { grid-column: 1 / -1; }
}

/* ===========================================================
   BLOG — editorial index + reading view
   =========================================================== */

/* ---- Masthead ---- */
.bp-masthead { padding: clamp(20px, 3vw, 36px) 0 clamp(28px, 4vw, 48px); max-width: 1100px; }
.bp-masthead h1 { font-size: clamp(34px, 5.2vw, 72px); font-weight: var(--w-s); letter-spacing: -.035em; line-height: 1.0; margin: 0; text-wrap: balance; }
.bp-masthead h1 .o { color: var(--accent); }
.bp-masthead p { font-size: var(--t-body-l); font-weight: 300; line-height: 1.55; max-width: 60ch; margin: 22px 0 0; }

/* ---- Featured ---- */
.bp-feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 3vw, 52px); align-items: stretch; cursor: pointer; margin-top: 8px; }
.bp-feat-media { position: relative; overflow: hidden; background: var(--bg-3); border: var(--hairline) solid var(--line); aspect-ratio: 4/3; }
.bp-feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.bp-feat:hover .bp-feat-media img { transform: scale(1.04); }
.bp-feat-body { display: flex; flex-direction: column; justify-content: center; }
.bp-feat-title { font-size: clamp(28px, 3.4vw, 48px); font-weight: var(--w-s); letter-spacing: -.03em; line-height: 1.04; margin: 16px 0 0; text-wrap: balance; }
.bp-feat-dek { font-size: var(--t-body-l); font-weight: 300; line-height: 1.55; margin: 18px 0 0; max-width: 46ch; }
.bp-feat-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.bp-feat-foot .by { font-size: var(--t-body-s); font-weight: 300; }

/* ---- Meta line ---- */
.bp-card-meta { display: flex; align-items: center; gap: 10px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .1em; }
.bp-card-meta .cat { color: var(--accent); font-weight: var(--w-m); }
.bp-card-meta .num { font-weight: var(--w-r); white-space: nowrap; }
.bp-card-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; }

/* ---- Filter chips ---- */
.bp-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-chip { background: none; border: var(--hairline) solid var(--line-2); border-radius: 999px; font: inherit; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-m); color: #0a0a0a; padding: 8px 16px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; line-height: 1; }
.bp-chip:hover { border-color: var(--fg); }
.bp-chip[data-on="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* ---- Card grid ---- */
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); margin-top: 30px; }
.bp-card { cursor: pointer; display: flex; flex-direction: column; }
.bp-card-media { position: relative; overflow: hidden; aspect-ratio: 3/2; background: var(--bg-3); border: var(--hairline) solid var(--line); }
.bp-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.bp-card:hover .bp-card-media img { transform: scale(1.05); }
.bp-card-body { padding-top: 18px; display: flex; flex-direction: column; flex: 1; }
.bp-card-title { font-size: var(--t-h6); font-weight: var(--w-s); letter-spacing: -.02em; line-height: 1.18; margin: 12px 0 0; text-wrap: pretty; }
.bp-card-ex { font-size: var(--t-body-s); font-weight: 300; line-height: 1.55; margin: 10px 0 0; }
.bp-card-go { font-size: var(--t-body-s); font-weight: var(--w-m); color: var(--accent); display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; }
.bp-card:hover .bp-card-go { gap: 10px; }

/* ===========================================================
   BLOG POST — reading view
   =========================================================== */
.bp-article { padding-block: 30px 0; }
.bp-hd { max-width: 860px; margin: 14px auto 0; text-align: center; }
.bp-hd .eyebrow { display: inline-block; }
.bp-title { font-size: clamp(32px, 4.4vw, 60px); font-weight: var(--w-s); letter-spacing: -.035em; line-height: 1.04; margin: 16px 0 0; text-wrap: balance; }
.bp-dek { font-size: var(--t-body-l); font-weight: 300; line-height: 1.55; margin: 22px auto 0; max-width: 60ch; }
.bp-byline { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; font-size: var(--t-body-s); font-weight: 300; }
.bp-byline .sep { opacity: .4; }

.bp-hero { margin: clamp(34px, 5vw, 64px) 0 0; border: var(--hairline) solid var(--line); aspect-ratio: 21/9; overflow: hidden; background: var(--bg-3); }
.bp-hero img { width: 100%; height: 100%; object-fit: cover; }

/* layout: reading column + sticky aside */
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(40px, 6vw, 96px); max-width: 1040px; margin: clamp(40px, 5vw, 64px) auto 0; }
.bp-main { max-width: 680px; }

.bp-aside-sticky { position: sticky; top: 92px; }
.bp-aside-sticky .eyebrow { display: block; }
.bp-aside-title { font-size: var(--t-body); font-weight: var(--w-m); line-height: 1.3; margin: 12px 0 0; }
.bp-aside-share { margin: 26px 0; padding: 22px 0; border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); }
.bp-aside-share .lab { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; color: #0a0a0a; }
.bp-share-row { display: flex; gap: 8px; margin-top: 14px; }
.bp-share-row button { width: 40px; height: 40px; border: var(--hairline) solid var(--line-2); background: none; border-radius: var(--radius); font: inherit; font-size: var(--t-body-s); font-weight: var(--w-m); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #0a0a0a; transition: border-color .15s, color .15s; }
.bp-share-row button:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Body typography ---- */
.bp-body > *:first-child { margin-top: 0; }
.bp-p { font-size: var(--t-body-l); font-weight: 300; line-height: 1.72; margin: 22px 0 0; color: #0a0a0a; }
.bp-body > .bp-p:first-of-type { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.65; }
.bp-h { font-size: var(--t-h5); font-weight: var(--w-s); letter-spacing: -.02em; line-height: 1.2; margin: 48px 0 0; }
.bp-list, .bp-olist { margin: 20px 0 0; padding: 0; list-style: none; }
.bp-list li, .bp-olist li { position: relative; font-size: var(--t-body); font-weight: 300; line-height: 1.62; padding: 0 0 0 30px; margin-top: 14px; }
.bp-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 12px; height: 1px; background: var(--accent); }
.bp-olist { counter-reset: bp; }
.bp-olist li { counter-increment: bp; padding-left: 40px; }
.bp-olist li::before { content: counter(bp, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-size: var(--t-label); font-weight: var(--w-s); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bp-olist li b { font-weight: var(--w-s); }

/* definition list (technique specs) */
.bp-dl { margin: 22px 0 0; border-top: var(--hairline) solid var(--line); }
.bp-dl-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 14px 0; border-bottom: var(--hairline) solid var(--line); }
.bp-dl-row dt { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-m); color: #0a0a0a; padding-top: 2px; }
.bp-dl-row dd { margin: 0; font-size: var(--t-body); font-weight: 300; line-height: 1.55; }

/* pull quote */
.bp-quote { margin: 44px 0 0; padding: 0 0 0 28px; border-left: 3px solid var(--accent); position: relative; }
.bp-quote .mark { position: absolute; left: 18px; top: -14px; font-size: 64px; line-height: 1; color: var(--accent); opacity: .18; font-family: Georgia, serif; }
.bp-quote p { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--w-r); letter-spacing: -.02em; line-height: 1.28; margin: 0; text-wrap: balance; }
.bp-quote cite { display: block; margin-top: 16px; font-size: var(--t-body-s); font-style: normal; font-weight: var(--w-m); color: #0a0a0a; }

/* callout box */
.bp-callout { margin: 36px 0 0; padding: 26px 28px; background: var(--accent-tint); border: var(--hairline) solid color-mix(in oklab, var(--accent) 35%, var(--line)); }
.bp-callout-tag { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--w-s); color: var(--accent); display: block; }
.bp-callout p { margin: 12px 0 0; font-size: var(--t-body); font-weight: 400; line-height: 1.6; color: #0a0a0a; }

/* table */
.bp-table-wrap { margin: 34px 0 0; overflow-x: auto; border: var(--hairline) solid var(--line); }
.bp-table { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); }
.bp-table th, .bp-table td { text-align: left; padding: 14px 16px; border-bottom: var(--hairline) solid var(--line); white-space: nowrap; }
.bp-table thead th { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-m); background: var(--bg-2); }
.bp-table tbody td { font-weight: 300; }
.bp-table tbody td.first { font-weight: var(--w-m); }
.bp-table tbody tr:last-child td { border-bottom: 0; }

/* takeaways */
.bp-takeaways { margin: 52px 0 0; padding: 30px 32px; border: var(--hairline) solid var(--fg); }
.bp-takeaways ul { list-style: none; margin: 16px 0 0; padding: 0; }
.bp-takeaways li { position: relative; padding: 0 0 0 30px; margin-top: 14px; font-size: var(--t-body); font-weight: 400; line-height: 1.5; }
.bp-takeaways li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: var(--w-s); }

/* end CTA */
.bp-end-cta { margin: 52px 0 0; padding: 34px 0 0; border-top: var(--hairline) solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.bp-end-cta h3 { font-size: var(--t-h5); font-weight: var(--w-s); letter-spacing: -.02em; margin: 0; }
.bp-end-cta p { font-size: var(--t-body); font-weight: 300; margin: 8px 0 0; max-width: 44ch; }

.bp-related { max-width: var(--max); margin: clamp(56px, 7vw, 96px) auto 80px; }

@media (max-width: 940px) {
  .bp-feat { grid-template-columns: 1fr; }
  .bp-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-layout { grid-template-columns: 1fr; gap: 48px; }
  .bp-aside { display: none; }
  .bp-main { max-width: none; }
}
@media (max-width: 600px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-dl-row { grid-template-columns: 1fr; gap: 4px; }
  .bp-hero { aspect-ratio: 3/2; }
}

/* ===========================================================
   SOBRE NÓS (About)
   =========================================================== */
.ab-scale { border-top: var(--hairline) solid var(--line); padding: clamp(48px, 6vw, 88px) 0; display: grid; grid-template-columns: 1fr; gap: 30px; }
.ab-scale-fig { font-size: clamp(58px, 11vw, 150px); font-weight: var(--w-s); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 26px); }
.ab-scale-fig .o { color: var(--accent); }
.ab-scale-fig .ar { color: var(--muted-2); font-weight: var(--w-r); }
.ab-scale-side { max-width: 52ch; }
.ab-scale-side p { font-size: var(--t-body-l); font-weight: 300; line-height: 1.55; margin: 0 0 22px; }
@media (min-width: 880px) {
  .ab-scale { grid-template-columns: auto 1fr; align-items: center; gap: clamp(44px, 6vw, 96px); }
  .ab-scale-side { max-width: 38ch; }
}

.ab-hero { margin: 8px 0 0; border: var(--hairline) solid var(--line); overflow: hidden; aspect-ratio: 21/8; background: var(--bg-3); }
.ab-hero img { width: 100%; height: 100%; object-fit: cover; }

.ab-mani { padding-top: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: 0.9fr 1.6fr; gap: clamp(20px, 4vw, 64px); align-items: start; }
.ab-mani .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .16em; color: var(--accent); padding-top: 10px; }
.ab-mani p { font-size: clamp(24px, 3vw, 40px); font-weight: var(--w-r); letter-spacing: -.025em; line-height: 1.18; margin: 0; text-wrap: balance; }
.ab-mani p .o { color: var(--accent); }

.ab-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--hairline) solid var(--line); margin-top: 4px; }
.ab-val { padding: 30px 28px 30px 0; border-right: var(--hairline) solid var(--line); }
.ab-val:last-child { border-right: 0; padding-right: 0; }
.ab-val:not(:first-child) { padding-left: 28px; }
.ab-val .n { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); font-weight: var(--w-m); }
.ab-val h3 { font-size: var(--t-h6); font-weight: var(--w-s); letter-spacing: -.015em; line-height: 1.2; margin: 16px 0 0; text-wrap: balance; }
.ab-val p { font-size: var(--t-body); font-weight: 300; line-height: 1.6; margin: 12px 0 0; }

.ab-locs { padding-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.ab-loc .e, .ab-loc-contact .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .16em; color: var(--accent); display: block; }
.ab-loc h3 { font-size: clamp(34px, 4vw, 56px); font-weight: var(--w-s); letter-spacing: -.03em; line-height: 1; margin: 16px 0 0; }
.ab-loc p { font-size: var(--t-body-l); font-weight: 300; line-height: 1.55; margin: 20px 0 0; max-width: 46ch; }
.ab-loc-contact { display: flex; flex-direction: column; align-items: flex-start; }
.ab-loc-contact .ab-tel { font-size: clamp(20px, 1.6vw, 26px); font-weight: 300; letter-spacing: -.01em; margin-top: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-loc-contact .ab-mail { font-size: var(--t-body-l); font-weight: 300; margin-top: 12px; }
.ab-loc-contact .ab-tel:hover, .ab-loc-contact .ab-mail:hover { color: var(--accent); }
.ab-loc-contact .ab-hours { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; font-size: var(--t-body-s); font-weight: 300; }

@media (max-width: 900px) {
  .ab-mani, .ab-locs { grid-template-columns: 1fr; }
  .ab-values { grid-template-columns: 1fr; }
  .ab-val { border-right: 0; border-bottom: var(--hairline) solid var(--line); padding: 26px 0; }
  .ab-val:not(:first-child) { padding-left: 0; }
  .ab-val:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ===========================================================
   SUSTENTABILIDADE — certification cards
   =========================================================== */
.su-certs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: var(--hairline) solid var(--line); }
.su-cert { display: grid; grid-template-columns: 96px 1fr; gap: clamp(20px, 2.4vw, 34px); align-items: start; padding: clamp(30px, 3.4vw, 48px) clamp(28px, 3vw, 44px) clamp(30px, 3.4vw, 48px) 0; border-right: var(--hairline) solid var(--line); }
.su-cert:last-child { border-right: 0; padding-right: 0; }
.su-cert:not(:first-child) { padding-left: clamp(28px, 3vw, 44px); }
.su-cert-mark { width: 96px; height: 96px; border: 1.5px solid var(--fg); display: flex; align-items: center; justify-content: center; }
.su-cert-mark span { font-size: 19px; font-weight: var(--w-m); letter-spacing: .02em; color: var(--accent); }
.su-cert-text .e { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); display: block; }
.su-cert-text h3 { font-size: clamp(26px, 2.8vw, 40px); font-weight: var(--w-s); letter-spacing: -.025em; line-height: 1.04; margin: 12px 0 0; }
.su-cert-text p { font-size: var(--t-body); font-weight: 300; line-height: 1.6; color: var(--muted); margin: 16px 0 0; max-width: 46ch; }
.su-note { font-size: var(--t-body-s); font-weight: 300; color: var(--muted-2); margin: 22px 0 0; max-width: 70ch; }

@media (max-width: 900px) {
  .su-certs { grid-template-columns: 1fr; }
  .su-cert { border-right: 0; border-bottom: var(--hairline) solid var(--line); padding: 30px 0; }
  .su-cert:not(:first-child) { padding-left: 0; }
  .su-cert:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 560px) {
  .su-cert { grid-template-columns: 1fr; gap: 18px; }
}