/*
 * The job-work blocks (factory_journey, bend_drawings, edge_looks), Oct 2026. Loaded after the previous site's
 * site.css and drawn only with its tokens, so they follow its look, its light/dark switch and its dark bands.
 * At the switch this file is appended to mcs-app/public/assets/css/site.css.
 */
.jw, .shr {
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
  --line: var(--rule); --line-2: var(--rule);
  --card: var(--surface); --card-2: var(--surface-2); --card-3: var(--bg-alt);
  --jw-accent: var(--accent); --jw-radius: 2px;
}
.section--dark.jw {
  --fg: var(--inverse-ink); --fg-2: var(--inverse-ink-2); --fg-3: var(--inverse-ink-2);
  --line: var(--inverse-rule); --line-2: var(--inverse-rule);
  --card: var(--c-black-2); --card-2: var(--c-black-2); --card-3: #2A2926;
  --jw-accent: var(--c-bronze-lit);
}
.jw-note { margin: var(--s-4) 0 0; font-size: var(--t-sm); color: var(--fg-3); }

/* bend drawings */
.jw .diags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .jw .diags { grid-template-columns: 1fr; max-width: 520px; } }
.jw .diag { margin: 0; border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: var(--card); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jw .diag svg { width: 100%; height: auto; }
.jw .diag figcaption { font-size: .88rem; color: var(--fg-2); line-height: 1.45; }
.jw .diag figcaption b { display: block; color: var(--fg); font: 500 .74rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.jw .seq__h { margin: 32px 0 12px; font-size: var(--t-lg); }
.jw .seq { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: q; }
.jw .seq__f { margin: 0; border: 1px solid var(--line); border-radius: var(--jw-radius); background: var(--card); padding: 8px; text-align: center; position: relative; }
.jw .seq__f svg { width: 100%; height: auto; }
.jw .seq__f figcaption { font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.jw .seq__f::before { counter-increment: q; content: counter(q); position: absolute; top: 6px; left: 8px; font: 500 .7rem/1 var(--f-mono); color: var(--jw-accent); }
@media (max-width: 640px) { .jw .seq { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jw .seq__f:last-child { grid-column: 1 / -1; } }
.jw-try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: clamp(40px, 6vw, 72px); }
@media (max-width: 860px) { .jw-try { grid-template-columns: 1fr; } }
.jw-try__title { font-size: var(--t-xl); margin: var(--s-2, 8px) 0 var(--s-3, 12px); }
.jw .slider { margin: 0; border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: var(--card-2); padding: 14px; display: grid; gap: 10px; min-width: 0; }
.jw .slider svg { width: 100%; height: auto; }
.jw .slider__state { margin: 0; font: 500 .8rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--jw-accent) !important; text-align: center; }
.jw .slider__ctl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font: 500 .68rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.jw .slider__ctl input { width: 100%; accent-color: var(--jw-accent); min-height: 44px; }
.jw .slider figcaption { font-size: .8rem; color: var(--fg-3); }

/* factory stations */
.jw .fj { display: grid; gap: 18px; }
.jw .fj__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.jw .fj__rail button { width: 100%; height: 100%; min-height: 64px; display: grid; gap: 4px; align-content: start; text-align: left; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: var(--card); color: var(--fg-2); font: 500 .76rem/1.25 var(--f-body); cursor: pointer; }
.jw .fj__rail button[aria-selected="true"] { border-color: var(--jw-accent); color: var(--fg); background: color-mix(in srgb, var(--jw-accent) 12%, var(--card)); }
.jw .fj__rail button:focus-visible { outline: 2px solid var(--jw-accent); outline-offset: 2px; }
.jw .fj__n { font: 500 .7rem/1 var(--f-mono); color: var(--jw-accent); }
@media (max-width: 1000px) { .jw .fj__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .jw .fj__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jw .fj__panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: var(--card); padding: clamp(12px, 2vw, 20px); }
.jw .fj__panel[hidden] { display: none; }
@media (max-width: 860px) { .jw .fj__panel { grid-template-columns: 1fr; } }
.jw .fj__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--jw-radius); background: var(--card-3); }
.jw .fj__img img { width: 100%; height: 100%; object-fit: cover; }
.jw .fj__body h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 6px 0 10px; }
.jw .fj__body p { color: var(--fg-2); }
.jw .fj__qc { border-left: 2px solid var(--jw-accent); padding-left: 12px; color: var(--fg) !important; }
.jw .fj__qc b { display: block; font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--jw-accent); }

/* edge close-ups */
.jw .edgegrid { display: grid; grid-template-columns: repeat(var(--ec, 4), minmax(0, 1fr)); gap: 12px; }
/* one close-up: a wide 2:1 frame, at most 820 px so the crop (640-1200 px) is never shown blown up */
.jw .edgegrid--one { grid-template-columns: minmax(0, 820px) !important; } .jw .edgegrid.edgegrid--one img { aspect-ratio: 2 / 1; }
/* tablets: 3 or 4 columns (--ect); a lone last close-up takes the whole row, 2:1, as on phones */
@media (min-width: 761px) and (max-width: 1099px) { .jw .edgegrid { grid-template-columns: repeat(var(--ect, 3), minmax(0, 1fr)); } .jw .edgegrid--wide-last-t figure:last-child { grid-column: 1 / -1; } .jw .edgegrid--wide-last-t figure:last-child img { aspect-ratio: 2 / 1; } }
@media (max-width: 760px) { .jw .edgegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jw .edgegrid figure:last-child:nth-child(odd) { grid-column: 1 / -1; } .jw .edgegrid figure:last-child:nth-child(odd) img { aspect-ratio: 2 / 1; } }
.jw .edgegrid figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--jw-radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.jw .edgegrid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.jw .edgegrid figcaption { padding: 10px 12px 12px; display: grid; gap: 2px; }
.jw .edgegrid figcaption a { font-weight: 600; color: var(--fg); text-decoration: none; }
.jw .edgegrid figcaption a:hover { color: var(--jw-accent); }
.jw .edgegrid figcaption span { font-size: .8rem; color: var(--fg-3); }

/* product page: the job-work line under the description */
.pd__jw { margin: var(--s-4) 0 0; padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--surface-2); font-size: .94rem; color: var(--ink-2); }
.pd__jw a { color: var(--accent-ink); font-weight: 600; }

/* can this section be made? */
.jw .shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .jw .shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jw .shape { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--jw-radius); background: var(--card); color: var(--fg); text-decoration: none; }
.jw .shape__top { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.jw .shape__top svg { width: 64px; height: 64px; color: var(--jw-accent); }
.jw .shape__edge img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--jw-radius); }
.jw .shape__title { font-size: var(--t-md); margin: 4px 0 0; }
.jw .shape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.jw .shape li a { color: var(--fg-2); }
.jw .shape li a:hover { color: var(--jw-accent); }
.jw .shape p { margin: 0; font-size: .9rem; color: var(--fg-2); }
.jw .shape--custom { border-style: dashed; border-color: var(--jw-accent); }
@media (max-width: 520px) { .jw .shape__top { grid-template-columns: 1fr; } .jw .shape__top svg { width: 44px; height: 44px; } }
/* Real part beside its section drawing (owner, 17 Oct 2026: "real profile with section drawing more easy accessible"):
   a row of shape buttons on top, then three cards a row (two on tablets, one on phones), photo | drawing in each */
.jw .shape-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.jw .shape-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 8px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--card); color: var(--fg); text-decoration: none; font-size: .85rem; }
.jw .shape-jump a:hover, .jw .shape-jump a:focus-visible { border-color: var(--jw-accent); color: var(--jw-accent); }
.jw .shape-jump svg { width: 22px; height: 22px; color: var(--jw-accent); flex: none; }
/* phones: one row to swipe, so the first profiles show on the first screen */
@media (max-width: 640px) {
  .jw .shape-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .jw .shape-jump a { flex: none; scroll-snap-align: start; }
}
.jw .shapes--rich { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .jw .shapes--rich { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jw .shapes--rich { grid-template-columns: 1fr; } }
.jw .shapes--rich .shape { scroll-margin-top: 90px; }
@media (min-width: 1001px) { .jw .shapes--rich .shape--span3 { grid-column: 1 / -1; } }
@media (min-width: 641px) and (max-width: 1000px) { .jw .shapes--rich .shape--span2 { grid-column: 1 / -1; } }
.jw .shape__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.jw .shape__photo, .jw .shape__icon, .jw .shape__draw { position: relative; margin: 0; min-width: 0; aspect-ratio: 1 / 1; border: 1px solid var(--line-2); border-radius: var(--jw-radius); overflow: hidden; }
.jw .shape__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jw .shape__icon { display: grid; place-items: center; background: var(--bg-2, var(--card)); }
.jw .shape__icon svg { width: 55%; height: 55%; color: var(--jw-accent); }
.jw .shape__draw { display: grid; grid-template-rows: 1fr auto; background: #fff; }
.jw .shape__draw > svg { display: block; width: 100%; height: 100%; min-height: 0; padding: 6px; box-sizing: border-box; }
.jw .shape__drawbtn { display: block; width: 100%; height: 100%; min-height: 0; padding: 6px; border: 0; background: none; cursor: zoom-in; }
.jw .shape__drawbtn svg { display: block; width: 100%; height: 100%; }
.jw .shape__drawbtn:focus-visible { outline: 2px solid var(--jw-accent); outline-offset: -2px; }
/* the drawing opened large (17 Oct 2026) */
.shape__zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(12, 11, 10, .82); }
.shape__zoombox { display: grid; grid-template-rows: auto 1fr; gap: 8px; width: min(900px, 100%); max-height: calc(100dvh - 32px); padding: 12px; border-radius: 6px; background: #fff; color: #1d1b18; }
.shape__zoomhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.shape__zoomhead span { font: 500 .72rem/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: #5b5750; }
.shape__zoomhead .btn { margin-left: auto; color: #1d1b18; border-color: #8a857c; }
.shape__zoombox > svg { display: block; width: 100%; height: auto; max-height: calc(100dvh - 110px); }
.jw .shape__draw figcaption { padding: 4px 8px; font: 500 .66rem/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: #3d3a35; background: #f3f1ec; }
.jw .shape__lbl { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 3px; background: rgba(20, 19, 17, .78); color: #fff; font: 600 .66rem/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.jw .shape__links { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.jw .shape__links a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 16px; text-decoration: none; font-size: .82rem; }
.jw .shape__note { font-size: .85rem; }
.jw .shape__go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: auto; padding-top: 6px; }
.jw .shape__go .btn { min-height: 40px; }

/* fix for the previous site too (3 Oct 2026): at ~1024 px the e-mail address in the quote form's side column did not
   wrap and made the page 30 px wider than the screen */
.qf-aside__item a { overflow-wrap: anywhere; }

/* PVD colour preview */
.jw .pvd { display: grid; gap: 20px; }
.jw .pvd__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .jw .pvd__controls { grid-template-columns: 1fr; } }
.jw .pvd__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.jw .pvd__group legend { font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--jw-accent); margin-bottom: 8px; }
.jw .pvd__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.jw .pvd__opts button, .jw .wiz__opts button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: var(--card); color: var(--fg-2); font: 500 .9rem/1.2 var(--f-body); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.jw .pvd__opts button[aria-pressed="true"], .jw .wiz__opts button[aria-pressed="true"] { border-color: var(--jw-accent); color: var(--fg); background: color-mix(in srgb, var(--jw-accent) 14%, var(--card)); }
.jw .pvd__opts button:focus-visible, .jw .wiz__opts button:focus-visible, .jw .pvd__row button:focus-visible { outline: 2px solid var(--jw-accent); outline-offset: 2px; }
.jw .pvd__opts i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); }
.jw .pvd__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
@media (max-width: 860px) { .jw .pvd__stage { grid-template-columns: 1fr; } }
.jw .pvd__main { margin: 0; display: grid; gap: 8px; }
.jw .pvd__main img, .jw .pvd__swatch { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--jw-radius); background: var(--card-3); display: block; max-height: 560px; }
/* a colour without studio photographs: a sample plate drawn on the photographs' light studio ground, tilted like the
   photographed plates, with the base finish's texture on the plate (indicative, not a photograph) */
.jw .pvd__swatch { position: relative; display: grid; place-items: center; padding: 16px; overflow: hidden; border: 1px solid var(--line-2);
  background: radial-gradient(120% 85% at 50% 32%, #ECE9E4 0%, #DAD6D0 55%, #C7C2BB 100%); }
.jw .pvd__plate { display: block; width: 64%; aspect-ratio: 1 / 1.1; border-radius: 9px; transform: perspective(900px) rotateX(16deg) rotateZ(-9deg); margin-bottom: 8%;
  box-shadow: 0 3px 0 rgba(0,0,0,.55), 0 4px 0 rgba(255,255,255,.18), 20px 30px 34px rgba(40,32,24,.32), 6px 10px 12px rgba(40,32,24,.22), inset 0 0 0 1px rgba(255,255,255,.14);
  background-image: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.07) 62%, rgba(0,0,0,.28) 100%); }
.jw .pvd__plate[data-finish="mirror"] { background-image: linear-gradient(118deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.42) 20%, rgba(255,255,255,.05) 29%, rgba(255,255,255,0) 55%, rgba(255,255,255,.26) 68%, rgba(255,255,255,.04) 76%, rgba(0,0,0,.35) 100%); }
.jw .pvd__plate[data-finish="hairline"] { background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,0) 1px 3px), linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%, rgba(0,0,0,.25)); }
.jw .pvd__plate[data-finish="matte"] { background-image: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.22)); }
.jw .pvd__plate[data-finish="bead-blast"] { background-image: radial-gradient(rgba(255,255,255,.12) 1px, rgba(0,0,0,0) 1.2px), radial-gradient(rgba(0,0,0,.2) 1px, rgba(0,0,0,0) 1.2px), linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.2));
  background-size: 4px 4px, 5px 5px, 100% 100%; background-position: 0 0, 2px 3px, 0 0; }
.jw .pvd__swatch span { position: absolute; left: 14px; bottom: 14px; right: 14px; width: fit-content; max-width: calc(100% - 28px); color: #EDE8DE; font-size: .82rem; line-height: 1.35; background: rgba(20,18,16,.72); padding: 6px 10px; border-radius: 2px; }
.jw .pvd__main figcaption { font-size: .8rem; color: var(--fg-3); }
.jw .pvd__h { font-size: var(--t-xl); margin: 6px 0 12px; }
.jw .pvd__text p { color: var(--fg-2); }
.jw .pvd__text b { color: var(--fg); }
.jw .pvd__rule { border-left: 2px solid var(--jw-accent); padding-left: 12px; }
.jw .pvd__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jw .pvd__row button { padding: 0; border: 1px solid var(--line); border-radius: var(--jw-radius); background: var(--card); color: var(--fg-2); cursor: pointer; overflow: hidden; display: grid; }
.jw .pvd__row button[aria-pressed="true"] { border-color: var(--jw-accent); }
.jw .pvd__row img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.jw .pvd__row span { padding: 6px 8px; font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
@media (max-width: 520px) { .jw .pvd__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* sheet selection wizard */
.jw .wiz { max-width: 860px; border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: var(--card); padding: clamp(16px, 3vw, 32px); display: grid; gap: 16px; }
.jw .wiz__progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.jw .wiz__progress span { display: block; height: 100%; background: var(--jw-accent); transition: width .25s; }
.jw .wiz__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.jw .wiz__step legend { font: 500 var(--t-lg)/1.3 var(--f-display); color: var(--fg); padding: 0; margin-bottom: 6px; }
.jw .wiz__n { display: block; font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--jw-accent); margin-bottom: 6px; }
.jw .wiz__hint { color: var(--fg-3); margin: 0 0 10px; font-size: .9rem; }
.jw .wiz__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; margin-top: 10px; }
.jw .wiz__opts button { justify-content: flex-start; text-align: left; }
.jw .wiz__back { justify-self: start; background: none; border: 0; color: var(--fg-2); cursor: pointer; font: 500 .8rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; min-height: 44px; }
.jw .wiz__metal { font-size: var(--t-2xl); margin: 4px 0; }
.jw .wiz__alt { color: var(--fg-2); margin: 0; }
.jw .wiz__alt a { color: var(--jw-accent); }
.jw .wiz__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0; }
@media (max-width: 640px) { .jw .wiz__facts { grid-template-columns: 1fr; } }
.jw .wiz__facts div { border-top: 1px solid var(--line); padding-top: 8px; }
.jw .wiz__facts dt { font: 500 .68rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--jw-accent); }
.jw .wiz__facts dd { margin: 4px 0 0; color: var(--fg); }
.jw .wiz__why p { color: var(--fg-2); font-size: .92rem; margin: 0 0 8px; }
.jw .wiz__why b { color: var(--fg); }

/* 3D bend simulator */
.jw .lab { display: grid; gap: 18px; }
.jw .lab__controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
@media (max-width: 1100px) { .jw .lab__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jw .lab__controls { grid-template-columns: 1fr; } }
.jw .lab__field { display: grid; gap: 6px; min-width: 0; }
.jw .lab__field > span { font: 500 .68rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.jw .lab__field b { color: var(--jw-accent); font-weight: 500; }
.jw .lab__field select { min-height: 44px; padding: 8px 10px; background: var(--card); color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--jw-radius); font: 500 .95rem/1.2 var(--f-body); }
.jw .lab__field input[type=range] { width: 100%; min-height: 44px; accent-color: var(--jw-accent); }
.jw .lab__field input[type=range]:disabled { opacity: .35; }
/* three equal blocks at every width (owner rule: equal button blocks); a long label wraps inside its block */
.jw .lab__seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.jw .lab__seg button { min-width: 0; min-height: 44px; padding: 6px 8px; text-align: center; overflow-wrap: break-word; border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: var(--card); color: var(--fg-2); font: 500 .82rem/1.2 var(--f-body); cursor: pointer; }
.jw .lab__seg button[aria-pressed="true"] { border-color: var(--jw-accent); color: var(--fg); background: color-mix(in srgb, var(--jw-accent) 14%, var(--card)); }
.jw .lab__seg button:disabled { opacity: .35; cursor: not-allowed; }
.jw .lab__stage { position: relative; }
.jw .lab__3d { height: clamp(320px, 52vw, 560px); border: 1px solid var(--line-2); border-radius: var(--jw-radius); background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--fg) 10%, var(--card)), var(--card)); overflow: hidden; touch-action: none; cursor: grab; }
.jw .lab__3d canvas { display: block; width: 100% !important; height: 100% !important; }
.jw .lab__hint { margin: 6px 0 0; font: 500 .68rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.jw .lab__secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.jw .lab__sec { margin: 0; border: 1px solid var(--line); border-radius: var(--jw-radius); background: var(--card); padding: 10px; display: grid; gap: 6px; }
.jw .lab__sec svg { width: 100%; height: 220px; }
.jw .lab__sec figcaption { font-size: .85rem; color: var(--fg-2); }
.jw .lab__sec figcaption b { color: var(--fg); }
.jw .lab__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0; }
.jw .lab__nums div { border-top: 1px solid var(--line); padding-top: 8px; }
.jw .lab__nums dt { font: 500 .66rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.jw .lab__nums dd { margin: 4px 0 0; color: var(--fg); font-variant-numeric: tabular-nums; }
.jw .lab__svg3d { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
@media (min-width: 1101px) { .jw .lab__controls { grid-template-columns: 1.1fr 1fr 1.1fr 1fr 1.5fr; } }

/* footer "Request a quote" (3 Oct 2026): site.css lets it wrap in the narrow contact column (section 42), which left
   the arrow alone at the far right of a two-line block; as running text with tighter spacing it fits on one line at
   desktop widths and, where it still wraps, the arrow stays after the last word */
.footer .link-arrow { display: inline; letter-spacing: .08em; }
.footer .link-arrow::after { display: inline-block; margin-left: .45em; }

/* phones (3 Oct 2026 final check): no grid ends with one lone card - owner rule. A lone last product card, material
   card or stat takes the full row; finish swatches use 2 or 3 columns, whichever fills the rows (--across-p). */
@media (max-width: 699px) {
  .grid.swatch-row { grid-template-columns: repeat(var(--across-p, 2), minmax(0, 1fr)) !important; }
  .product-grid > :last-child:nth-child(odd):not(:only-child),
  .grid.grid--4 > :last-child:nth-child(odd):not(:only-child),
  .statbar__grid > :last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  /* 7, 10, 13 swatches: six-part grid, the last four two per row (3 + ... + 2 + 2), like site.css's balance classes */
  .grid.swatch-row.swatch-row--bal { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .grid.swatch-row.swatch-row--bal > * { grid-column: span 2; }
  .grid.swatch-row.swatch-row--bal > :nth-last-child(-n+4) { grid-column: span 3; }
}

/* download registration (owner, 3 Oct 2026): the form, the file list beside it, and the note shown when a visitor
   right-clicks a picture before registering. Pictures cannot be dragged out or long-pressed to save until then. */
.dlg { display: grid; gap: var(--s-4); max-width: 680px; }
.dlg__asked { margin: 0; max-width: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dlg__asked .label { margin-right: .5em; }
.dlg .form-status:empty { display: none; }
.dlg__done { display: grid; gap: var(--s-3); max-width: 680px; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dlg__done p { margin: 0; max-width: none; }
/* "Share this design" under the builders (17 Oct 2026) */
.bs__share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: var(--s-4) 0 0; }
.bs__share .btn { min-height: 40px; }
.bs__share small { color: var(--fg-2); font-size: .82rem; }
/* "Where is my enquiry?" (17 Oct 2026): the form, then the stage as numbered steps (done ✓, now highlighted) */
.eqs { display: grid; gap: var(--s-5); }
.eqs__form { display: grid; gap: var(--s-4); max-width: 680px; }
.eqs__result { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-left: 4px solid var(--jw-accent); border-radius: var(--radius); background: var(--surface); }
.eqs__result p { margin: 0; max-width: none; }
.eqs__label { margin: 0; font-size: var(--t-xl, 1.6rem); }
.eqs__dates { color: var(--fg-2); font-size: .9rem; }
.eqs__steps { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.eqs__steps li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .78rem; line-height: 1.3; color: var(--fg-3); position: relative; }
.eqs__steps li::before { content: ''; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--line-2); }
.eqs__steps li:first-child::before { display: none; }
.eqs__steps li.is-done::before, .eqs__steps li.is-now::before { background: var(--jw-accent); }
.eqs__dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); font: 600 .8rem/1 var(--f-mono); position: relative; z-index: 1; }
.eqs__steps li.is-done { color: var(--fg-2); }
.eqs__steps li.is-done .eqs__dot { border-color: var(--jw-accent); background: var(--jw-accent); color: #111; }
.eqs__steps li.is-now { color: var(--fg); font-weight: 600; }
.eqs__steps li.is-now .eqs__dot { border-color: var(--jw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jw-accent) 25%, transparent); }
.eqs__note { padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--jw-accent) 12%, transparent); }
@media (max-width: 640px) {
  .eqs__steps { grid-template-columns: 1fr; gap: 0; }
  .eqs__steps li { grid-template-columns: 32px 1fr; justify-items: start; align-items: center; text-align: left; gap: 10px; padding: 4px 0; font-size: .9rem; }
  .eqs__steps li::before { top: -50%; bottom: 50%; left: 15px; right: auto; width: 2px; height: auto; }
}
.dlg__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.dlg__files small { color: var(--ink-3); white-space: nowrap; }
.dlg-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--radius); background: var(--ink); color: var(--bg);
  font-size: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dlg-toast a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html:not(.dl-ok) main img { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* phone app bar (owner, 3 Oct 2026): five equal blocks fixed at the bottom - Home, Products, Quote (bronze), WhatsApp,
   Call - icon over a short label, the current page lit. It replaces the round WhatsApp button on phones; back to top and
   the notes sit above it; the page gets room at the bottom so the footer is never hidden; it steps aside while a form
   field has the keyboard. The drawer menu, search and lightbox (z-index 95-120) cover it. */
.appbar { display: none; }
@media (max-width: 767px) {
  .appbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule); box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
  }
  .appbar a {
    display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 4px 2px;
    border-radius: 10px; color: var(--ink-2); text-decoration: none; -webkit-tap-highlight-color: transparent;
    font: 600 10.5px/1.1 var(--f-body); letter-spacing: .02em; white-space: nowrap;
  }
  .appbar svg { width: 22px; height: 22px; }
  .appbar a[aria-current="page"] { color: var(--accent); background: var(--accent-wash); }
  .appbar a.appbar__quote { background: var(--accent); color: var(--bg); }
  .appbar a.appbar__quote[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ink); }
  .appbar a.appbar__wa svg { color: #1DA851; }
  .appbar a:active { transform: scale(.96); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .floaters { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .floaters .fab--wa { display: none; }
  .toast, .dlg-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* only fields that open the keyboard; tapping a choice (radio, checkbox) or a file button keeps the bar */
  body:has(input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):focus, textarea:focus, select:focus) .appbar { display: none; }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* phones (3 Oct 2026, accessibility pass): text links that stood alone were 17-20 px tall; a tap area of at least 24 px
   (WCAG 2.2 target size), with no visible change beyond a little spacing */
@media (max-width: 767px) {
  .gal__item figcaption a { display: block; padding-block: 4px; }
  .marquee__track a { display: inline-block; padding-block: 3px; }
  .pdp__links a { display: inline-block; padding-block: 4px; }
}

/* Centred last row (recheck, 4 Oct 2026): lib/util.ts colsFor adds grid--center-w{columns}r{cards in the last row} when
   the last row has two or more cards but is not full. The grid gets twice the columns, every card spans two, and the
   first card of the last row starts half a row-gap in, so the row sits in the middle and every card keeps its size. */
@media (min-width: 1100px) {
  /* any grid that carries the class: card grids (.grid) and the range pages' product grids (.product-grid) alike
     (round 2 recheck: on .product-grid the template stayed 4 across and the moved card spanned two of them) */
  [class*="grid--center-w"] { grid-template-columns: repeat(var(--cw2), minmax(0, 1fr)) !important; }
  [class*="grid--center-w"] > * { grid-column: span 2; }
  .grid--center-w3r2 { --cw2: 6; } .grid--center-w3r2 > :nth-last-child(2) { grid-column: 2 / span 2; }
  .grid--center-w4r2 { --cw2: 8; } .grid--center-w4r2 > :nth-last-child(2) { grid-column: 3 / span 2; }
  .grid--center-w4r3 { --cw2: 8; } .grid--center-w4r3 > :nth-last-child(3) { grid-column: 2 / span 2; }
  .grid--center-w5r2 { --cw2: 10; } .grid--center-w5r2 > :nth-last-child(2) { grid-column: 4 / span 2; }
  .grid--center-w5r3 { --cw2: 10; } .grid--center-w5r3 > :nth-last-child(3) { grid-column: 3 / span 2; }
  .grid--center-w5r4 { --cw2: 10; } .grid--center-w5r4 > :nth-last-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .grid--center-t3r2 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .grid--center-t3r2 > * { grid-column: span 2; }
  .grid--center-t3r2 > :nth-last-child(2) { grid-column: 2 / span 2; }
}

/* Home "Different corner": the two corners as separate photographs (owner, 7 Oct 2026) */
.compare-layout--pair{grid-template-columns:1fr!important}
.bend-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,2.4vw,32px);align-items:center}
.bend-pair__item{margin:0;min-width:0}
.bend-pair__item a{display:block;overflow:hidden;border:1px solid var(--line);background:#000}
.bend-pair__item img{display:block;width:100%;height:auto}
.bend-pair__item--sharp a{border-color:var(--c-bronze-lit,var(--accent))}
.bend-pair__item figcaption{margin-top:12px;display:grid;gap:4px}
.bend-pair__item figcaption strong{font:600 .78rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.bend-pair__item--sharp figcaption strong{color:var(--c-bronze-lit,var(--accent))}
.bend-pair__item figcaption span{font-size:.95rem;color:var(--ink-2)}
.bend-pair__vs{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:600 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:640px){.bend-pair{grid-template-columns:1fr}.bend-pair__vs{justify-self:center;width:40px;height:40px}}
/* Home "Slide to compare" (owner, 7 Oct 2026) */
.compare--drag{cursor:ew-resize;touch-action:pan-y}
.compare--drag .compare__tag--r{color:var(--c-bronze-lit,var(--accent))}
.compare-slider__note{margin:14px 0 0;text-align:center;font:600 .72rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:480px){.compare--drag .compare__tag{font-size:.58rem;letter-spacing:.04em;padding:5px 7px}}

/* Home "special feature" band for the 3D simulator (owner, 7 Oct 2026) */
.lab-feature__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.lab-feature__stage{position:relative;padding:10px;border:1px solid var(--c-bronze-lit,var(--accent));border-radius:var(--jw-radius);background:color-mix(in srgb,var(--c-bronze-lit,#c8973f) 6%,transparent);box-shadow:0 30px 80px -40px color-mix(in srgb,var(--c-bronze-lit,#c8973f) 60%,transparent)}
.jw .lab--preview .lab__3d{height:clamp(300px,36vw,470px);cursor:default;touch-action:pan-y;position:relative}
.jw .lab--preview .lab__3d canvas{pointer-events:none}
.lab__tag{position:absolute;top:14px;z-index:1;padding:5px 9px;background:rgba(13,13,12,.72);color:#f2efe8;font:600 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.lab__tag--l{left:14px}
.lab__tag--r{right:14px;color:var(--c-bronze-lit,#c8973f)}
.lab__fold{position:absolute;right:14px;bottom:12px;z-index:1;font:600 1.4rem/1 var(--f-mono);color:var(--c-bronze-lit,#c8973f);opacity:.9}
.lab-feature__badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 12px;border:1px solid var(--c-bronze-lit,var(--accent));color:var(--c-bronze-lit,var(--accent));font:600 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.lab-feature__badge::before{content:"★"}
.lab-feature__title{margin:0 0 14px}
.lab-feature__intro{margin:0 0 20px;color:var(--ink-2);max-width:46ch}
.lab-feature__points{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px;counter-reset:lf}
.lab-feature__points li{display:grid;grid-template-columns:34px 1fr;column-gap:12px;counter-increment:lf}
.lab-feature__points li::before{content:counter(lf,decimal-leading-zero);grid-row:span 2;font:600 .8rem/1.6 var(--f-mono);color:var(--c-bronze-lit,var(--accent))}
.lab-feature__points strong{font-weight:600}
.lab-feature__points span{color:var(--ink-2);font-size:.95rem}
.lab-feature .btn--solid{font-size:.85rem;padding:16px 26px}
@media (max-width:900px){
  .lab-feature__grid{grid-template-columns:1fr;gap:18px}
  .lab-feature__text{display:contents}
  .lab-feature__badge{order:1;justify-self:start;margin:0}
  .lab-feature__title{order:2;margin:0}
  .lab-feature__stage{order:3}
  .lab-feature__intro{order:4;margin:0}
  .lab-feature__points{order:5;margin:0}
  .lab-feature__text>.cluster{order:6}
}
/* header: the 3D simulator highlighted */
.nav__link--new{color:var(--c-bronze-lit,var(--accent))!important}
.nav__new{display:inline-block;margin-left:6px;padding:3px 6px 2px;border-radius:2px;background:var(--c-bronze-lit,#c8973f);color:#0d0d0c;font:700 .55rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:2px}
.mnav__trigger--new{color:var(--c-bronze-lit,var(--accent))}
.nav__link--new{white-space:nowrap}
@media (max-width:1200px){.nav .nav__new{display:none}}

/* Profile builder (owner, 7 Oct 2026) */
.pb{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.pb__side{display:grid;gap:16px;min-width:0}
.pb__main{display:grid;gap:14px;min-width:0;position:sticky;top:90px}
.pb__presets{display:flex;flex-wrap:wrap;gap:8px}
.pb__chip{padding:7px 12px;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:600 .72rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:var(--jw-radius)}
.pb__chip:hover{border-color:var(--jw-accent);color:var(--jw-accent)}
.pb__legs{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:520px;overflow:auto}
.pb__leg{display:grid;grid-template-columns:26px minmax(0,1fr) 232px 30px;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);background:var(--card);border-radius:var(--jw-radius)}
.pb__no{font:600 .75rem/1 var(--f-mono);color:var(--jw-accent);text-align:center}
.pb__size,.pb__ang{display:flex;align-items:center;gap:4px}
.pb__size input{width:100%;min-width:0}
.pb__ang input{width:76px}
.pb__leg input{padding:7px 8px;border:1px solid var(--line-2);background:var(--surface,transparent);color:var(--fg);font:500 .95rem/1.2 var(--f-body);border-radius:var(--jw-radius)}
.pb__leg em{font-style:normal;font-size:.75rem;color:var(--fg-2)}
.pb__bend{display:flex;align-items:center;gap:6px}
.pb__bend--end{font:600 .65rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);justify-content:center;min-width:120px}
.pb__bendlbl{font:600 .65rem/1 var(--f-mono);color:var(--fg-2)}
.pb__dir{display:flex}
.pb__dir button{padding:6px 8px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:600 .72rem/1 var(--f-mono);cursor:pointer}
.pb__dir>a.btn{padding:6px 8px;min-height:34px;font:600 .72rem/1 var(--f-mono);align-self:stretch;display:inline-flex;align-items:center}
.pb__dir button+button{border-left:0}
.pb__dir button[aria-pressed="true"],.pb__dir button[aria-checked="true"]{background:color-mix(in srgb,var(--jw-accent) 22%,var(--card));border-color:var(--jw-accent);color:var(--fg)}
.pb__del{width:28px;height:28px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);cursor:pointer;font-size:1rem;line-height:1;border-radius:var(--jw-radius)}
/* the Hem button beside the angle (17 Oct 2026): the bend column is as wide as its controls and wraps when the
   column is narrow; the leg size box never drops under 64 px (22 Oct 2026: on the T profile it had shrunk to 22 px) */
.pb__leg{grid-template-columns:26px minmax(64px,1fr) auto 30px}
.pb__bend{flex-wrap:wrap;min-width:0}
.pb__ang input{width:64px}
/* a narrow legs column (a laptop beside the 3D view, a tablet): the bend controls go on their own line under the size */
.pb__legs{container-type:inline-size}
@container (max-width:600px){.pb__leg{grid-template-columns:26px minmax(0,1fr) 30px;row-gap:6px}.pb__leg .pb__bend{grid-column:1/-1;flex-wrap:nowrap}.pb__leg .pb__bend--end{justify-content:flex-start}.pb__leg .pb__del{grid-row:1;grid-column:3}}
.pb__hem{flex:none;min-height:34px;padding:6px 8px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:600 .72rem/1 var(--f-mono);cursor:pointer;border-radius:var(--jw-radius)}
.pb__hem[aria-pressed="true"]{background:color-mix(in srgb,var(--jw-accent) 22%,var(--card));border-color:var(--jw-accent);color:var(--fg)}
.pb__del:disabled{opacity:.35;cursor:default}
.pb__add{justify-self:start}
.pb__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pb__field{display:grid;gap:6px}
.pb__field>span{font:600 .68rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pb__field select,.pb__field input{width:100%;padding:9px 10px;border:1px solid var(--line-2);background:var(--card);color:var(--fg);font:500 .95rem/1.2 var(--f-body);border-radius:var(--jw-radius)}
.pb__swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pb__sw{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:500 .8rem/1.2 var(--f-body);text-align:left;cursor:pointer;border-radius:var(--jw-radius)}
.pb__sw i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.pb__sw[aria-checked="true"]{border-color:var(--jw-accent);box-shadow:inset 0 0 0 1px var(--jw-accent)}
.pb__3d{position:relative;height:clamp(260px,26vw,400px);border:1px solid var(--jw-accent);border-radius:var(--jw-radius);background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--fg) 10%,var(--card)),var(--card));overflow:hidden;touch-action:none;cursor:grab}
.pb__3d canvas{display:block;width:100%!important;height:100%!important}
.pb__tag{position:absolute;left:12px;top:12px;padding:5px 9px;background:rgba(13,13,12,.72);color:#f2efe8;font:600 .64rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.pb__nogl{padding:20px;color:var(--fg-2)}
.pb__hint{margin:-6px 0 0;font:500 .7rem/1.4 var(--f-mono);color:var(--fg-3)}
.pb__svg{border:1px solid var(--line);background:#fff;border-radius:var(--jw-radius);padding:8px;height:clamp(260px,26vw,400px);display:flex;align-items:center;justify-content:center}
.pb__svg svg{max-height:100%;width:auto;max-width:100%}
.pb__results{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.pb__results>div{display:grid;gap:4px;padding:12px;border:1px solid var(--line);background:var(--card);border-radius:var(--jw-radius)}
.pb__results span{font:600 .64rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pb__results b{font-size:1.25rem;color:var(--jw-accent)}
.pb__results small{color:var(--fg-3)}
.pb__results .pb__section{grid-column:1/-1}
.pb__results .pb__section b{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pb__locked a{font-weight:600;color:var(--jw-accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:980px){.pb{grid-template-columns:1fr}.pb__main{position:static}}
@media (max-width:520px){.pb__cols{display:none}.pb__swatches{grid-template-columns:1fr 1fr}.pb__swatches>:last-child:nth-child(odd){grid-column:1/-1}.pb__leg{grid-template-columns:22px minmax(0,1fr) 28px;row-gap:6px}.pb__leg .pb__bend{grid-column:2/3}.pb__leg .pb__del{grid-row:1;grid-column:3}}

/* Social posts on phones (recheck, 7 Oct 2026): the grid is two across there, so an odd last post takes the
   full row as a wide picture instead of standing alone. */
@media (max-width: 699px) {
  .post-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .post-grid > li:last-child:nth-child(odd) .post-card__media { aspect-ratio: 2 / 1; }
}

/* Profile builder, 8 Oct 2026 (owner: "2d and 3d both", "input must be user friendly", standard sheet sizes with a
   proper message): numbered steps, column names over the legs, the leg being edited marked in the list and in the
   2D drawing, the sheet-fit message, and the 2D section beside the 3D view. */
.pb__step{display:grid;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pb__step:last-child{border-bottom:0;padding-bottom:0}
.pb__h{margin:0;display:flex;align-items:center;gap:10px;font:600 .78rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.pb__h b{flex:none;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--jw-accent);border-radius:50%;color:var(--fg);font-size:.72rem}
.pb__chip--reset{margin-left:auto;color:var(--fg-2)}
.pb__cols{display:grid;grid-template-columns:26px minmax(0,1fr) 232px 30px;gap:8px;padding:0 9px;font:600 .6rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pb__cols span:last-child{grid-column:3/5}
.pb__leg.is-active{border-color:#c2410c;box-shadow:inset 3px 0 0 #c2410c}
.pb__leg.is-active .pb__no{color:#c2410c}
.pb__dir button{min-height:34px}
.pb__field--wide{grid-column:1/-1}
.pb__lenrow{display:flex;gap:8px;align-items:stretch}
.pb__lenrow input{flex:1 1 auto;min-width:0}
.pb__lenrow .pb__chip{flex:none;white-space:nowrap}
.pb__fit{margin:0;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);font-size:.88rem;line-height:1.45;color:var(--fg)}
.pb__fit b{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:.8rem;color:#fff}
.pb__fit.is-ok{border-color:color-mix(in srgb,#2f7d4f 55%,var(--line-2))}
.pb__fit.is-ok b{background:#2f7d4f}
.pb__fit.is-bad{border-color:#c2410c;background:color-mix(in srgb,#c2410c 8%,var(--card))}
.pb__fit.is-bad b{background:#c2410c}
.pb__views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pb__view{margin:0;display:grid;gap:6px;min-width:0}
.pb__view figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap;font:500 .68rem/1.3 var(--f-mono);color:var(--fg-2)}
.pb__view figcaption b{font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.pb__pdfsvg{position:absolute;left:-10000px;top:0;width:600px;height:420px;overflow:hidden}
@media (max-width:640px){.pb__views{grid-template-columns:1fr}}
@media (max-width:520px){.pb__cols{display:none}.pb__grid>label:first-child{grid-column:1/-1}}
.pb__dir--wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* two choices side by side, each half the width (28 Oct 2026: the perforation studio's two buttons were squeezed into a
   three-column grid and wrapped to four lines) */
.pb__dir--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pb__dir--two button{min-height:40px;font-size:.74rem}
.ps__views{margin-bottom:10px}
.ps .pb__presets{margin-bottom:12px}
/* the studio's settings column is at most 400 px: each side in two rows, with the return and the lip labelled */
.ps .pnl__side{grid-template-columns:1fr 1fr;row-gap:6px}
.ps .pnl__side b,.ps .pnl__side .pb__dir{grid-column:1/-1}
.ps .pnl__side label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px}
.ps__sl{grid-column:1/-1;font:600 .6rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.ps__flat{padding:10px;border:1px solid var(--line);background:var(--card);border-radius:var(--jw-radius)}
.ps__flat svg{display:block;width:100%;height:auto;max-height:560px}
/* tap targets at least 24 px high (WCAG 2.2; page scan of 28 Oct 2026): the arrow links, the gallery's product names and
   the download cards' links were 17-23 px */
main .link-arrow{min-height:24px}
.gal__item figcaption a,.dlc-card__dl,.dlc-card__more{display:inline-flex;align-items:center;min-height:24px}
.pb__dir--wide button{min-height:40px;font-size:.74rem}
.pb__help{color:var(--fg-3);font-size:.78rem;line-height:1.45}

/* Editing on the website, staff only (8 Oct 2026, components/AdminEdit.tsx). Fixed colours: it must read the same
   on every band of every page in both themes. */
.mcs-edit-ui{font:500 14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1c1b19}
.mcs-edit-bar{position:fixed;left:12px;bottom:12px;z-index:9990;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;max-width:calc(100vw - 24px);padding:8px 14px;background:#121211;color:#f2efe8;border:1px solid #b0833f;border-radius:22px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.mcs-edit-bar a{color:#e6c27a;text-decoration:none;font-size:13px}
.mcs-edit-bar a:hover{text-decoration:underline}
.mcs-edit-switch{display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.mcs-edit-switch input{width:18px;height:18px;accent-color:#b0833f}
.mcs-edit-who{color:#9d978c;font-size:12px}
.mcs-edit-tip{position:fixed;left:12px;bottom:64px;z-index:9990;margin:0;max-width:min(420px,calc(100vw - 24px));padding:8px 12px;background:#fffbf2;border:1px solid #b0833f;border-radius:6px;font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.mcs-editing main [data-blk]{position:relative;outline:2px dashed rgba(176,131,63,.55);outline-offset:-6px;cursor:text}
.mcs-editing main [data-blk]:hover{outline-color:#b0833f}
.mcs-editing main [data-blk] img{cursor:pointer}
.mcs-editing main img:hover{outline:3px solid #b0833f;outline-offset:-3px}
.mcs-edit-sec{position:absolute;top:10px;right:10px;z-index:30;padding:7px 12px;min-height:34px;border:0;border-radius:17px;background:#b0833f;color:#111;font:700 12.5px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.mcs-edit-sec:hover{background:#d4a94c}
.mcs-edit-pop{position:fixed;z-index:9995;display:grid;gap:4px;width:250px;padding:8px;background:#fff;border:1px solid #b0833f;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.mcs-edit-pop button,.mcs-edit-pop a{display:block;padding:8px 10px;border:1px solid #d3cec4;border-radius:4px;background:#fff;color:#1c1b19;text-align:left;text-decoration:none;font:600 13px/1.3 system-ui,sans-serif;cursor:pointer}
.mcs-edit-pop button:hover,.mcs-edit-pop a:hover{border-color:#b0833f}
.mcs-edit-pop .mcs-edit-x{color:#6b665d;font-weight:500}
.mcs-edit-panel{position:fixed;top:0;right:0;bottom:0;z-index:9998;width:min(440px,100vw);display:flex;flex-direction:column;background:#f5f3ef;border-left:2px solid #b0833f;box-shadow:-8px 0 30px rgba(0,0,0,.3)}
.mcs-edit-panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px;background:#121211;color:#f2efe8}
.mcs-edit-panel header small{display:block;color:#b9b4aa;font-size:12px;margin-top:2px}
.mcs-edit-panel header .mcs-edit-x{flex:none;width:36px;height:36px;border:1px solid #57534c;border-radius:4px;background:transparent;color:#fff;font-size:20px;cursor:pointer}
.mcs-edit-fields{flex:1;overflow:auto;padding:12px 16px;display:grid;gap:12px;align-content:start}
.mcs-edit-f{display:grid;gap:5px;padding:10px;background:#fff;border:1px solid #e4e0d8;border-radius:5px}
.mcs-edit-f.is-changed{border-color:#b0833f;box-shadow:inset 3px 0 0 #b0833f}
.mcs-edit-f.is-hit{animation:mcsHit 1.2s ease 2}
@keyframes mcsHit{50%{background:#fbeed6}}
.mcs-edit-l{font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b665d}
.mcs-edit-g{display:block;margin:14px 0 2px;padding-top:10px;border-top:2px solid #b07a3c;font:700 13px/1.2 system-ui,sans-serif;color:#2a2620}
.mcs-edit-f input,.mcs-edit-f textarea{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #8a857b;border-radius:4px;background:#fff;color:#1c1b19;font:15px/1.45 system-ui,sans-serif}
.mcs-edit-f textarea{resize:vertical}
.mcs-edit-f small{color:#6b665d;font-size:12px}
.mcs-edit-img{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center}
.mcs-edit-img img{width:96px;height:72px;object-fit:cover;border-radius:3px;background:#eee}
.mcs-edit-img code{display:block;font-size:11.5px;color:#57534c;word-break:break-all;margin-bottom:6px}
.mcs-edit-img button,.mcs-edit-panel footer button{min-height:36px;padding:6px 12px;border:1px solid #8a857b;border-radius:4px;background:#fff;color:#1c1b19;font:600 13px/1 system-ui,sans-serif;cursor:pointer}
.mcs-edit-picker{display:grid;gap:8px;margin-top:6px}
.mcs-edit-picker ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:300px;overflow:auto}
.mcs-edit-picker li button{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:3px;background:#eee;cursor:pointer;position:relative}
.mcs-edit-picker li button:hover,.mcs-edit-picker li button:focus-visible{border-color:#b0833f}
.mcs-edit-picker img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.mcs-edit-picker li span{position:absolute;right:2px;bottom:2px;padding:0 4px;background:rgba(0,0,0,.65);color:#fff;font-size:10px}
.mcs-edit-empty{grid-column:1/-1;color:#6b665d;font-size:13px}
.mcs-edit-panel footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid #d3cec4;background:#fff}
.mcs-edit-panel footer a{color:#8a6220;font-size:13px}
.mcs-edit-panel footer .mcs-edit-save{background:#121211;border-color:#121211;color:#fff}
.mcs-edit-msg{flex-basis:100%;margin:0;font-size:13px;color:#2f6b43}
@media (max-width:760px){.mcs-edit-bar{bottom:76px;border-radius:12px}.mcs-edit-tip{bottom:130px}}
/* profile builder: the visitor's list of profiles, one PDF (8 Oct 2026) */
.pb__count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:color-mix(in srgb,var(--jw-accent) 22%,var(--card));color:var(--fg);font-size:.72rem}
.pb__listbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pb__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pb__list li{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);background:var(--card);border-radius:var(--jw-radius)}
.pb__list li.is-editing{border-color:var(--jw-accent);box-shadow:inset 3px 0 0 var(--jw-accent)}
.pb__list li > div{min-width:0}
.pb__list b{color:var(--fg)}
.pb__list span{color:var(--jw-accent);font:600 .72rem/1 var(--f-mono);margin-left:6px}
.pb__list small{display:block;color:var(--fg-3);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb__grid input[type="text"]{min-width:0}
/* no lone field at the end of a two-column form (full audit, 15 Oct 2026; on phones the first field already takes the row) */
@media (min-width:521px){.pb__grid>:last-child:nth-child(odd):not(:first-child){grid-column:1/-1}}
/* layout check 8 Oct 2026: the two bend photos are never shown wider than they are sharp (680 px files); the builder's
   result boxes stay one row of equal boxes at every width (no box alone on a second row) */
.bend-pair__item{max-width:760px;width:100%;justify-self:center}
.pb__results{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:380px){.pb__results>div{padding:10px 8px}.pb__results b{font-size:1.05rem}}
.compare--drag{max-width:880px;margin-inline:auto}

/* Builder studio, 8 Oct 2026: Profiles | Panels tabs, the panel builder's inputs, the shared BOQ */
.bs{display:grid;gap:22px}
.bs__tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;border-bottom:1px solid var(--line);padding-bottom:12px;scroll-margin-top:90px}
.bs__tabs button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 16px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 .9rem/1.2 var(--f-body);cursor:pointer}
.bs__tabs button small{font:500 .62rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.bs__tabs button[aria-selected="true"]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 16%,var(--card));box-shadow:inset 0 -3px 0 var(--jw-accent)}
.bs__tabs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.bs__boq{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);color:var(--fg);text-decoration:none;font:600 .85rem/1 var(--f-mono);letter-spacing:.06em}
.bs__boq b{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:var(--jw-accent);color:#0d0d0c;font-size:.75rem}
.bs__note{margin:0;padding:10px 14px;border:1px solid color-mix(in srgb,#2f7d4f 55%,var(--line-2));border-radius:var(--jw-radius);color:var(--fg);font-size:.92rem}
/* panel inputs */
.pnl__same{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;color:var(--fg);cursor:pointer}
.pnl__same input{width:18px;height:18px;accent-color:var(--jw-accent)}
.pnl__opt{font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;color:var(--fg-3);margin-left:4px}
/* the mm converter beside every size heading (owner, 21 Oct 2026: "give the link of mm conversion where the user needs it") */
.pb__mm{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pb__mm:hover{color:var(--fg)}
.pnl__head,.pnl__side{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1fr) 112px;gap:8px;align-items:center}
.pnl__head{padding:0 9px;font:600 .6rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pnl__sides{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pnl__side{padding:6px 9px;border:1px solid var(--line);background:var(--card);border-radius:var(--jw-radius)}
.pnl__side.is-active{border-color:#c2410c;box-shadow:inset 3px 0 0 #c2410c}
.pnl__side b{font:600 .78rem/1.2 var(--f-mono);color:var(--jw-accent)}
.pnl__side label{display:flex;align-items:center;gap:4px}
.pnl__side input{width:100%;min-width:0;padding:7px 8px;border:1px solid var(--line-2);background:var(--surface,transparent);color:var(--fg);font:500 .95rem/1.2 var(--f-body);border-radius:var(--jw-radius)}
.pnl__side input:disabled{opacity:.45}
.pnl__side em{font-style:normal;font-size:.72rem;color:var(--fg-2)}
.pnl__side .pb__dir{display:grid;grid-template-columns:1fr 1fr}
.pnl__side .pb__dir button{min-height:34px}
.pnl__side .pb__dir button:disabled{opacity:.4;cursor:default}
.pnl__shapes{grid-template-columns:repeat(3,minmax(0,1fr))}
.pnl__shapes button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:58px;padding:6px 4px;font-size:.7rem}
.pnl__shapes svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
/* fluted panel: two wide flute buttons with a strip icon (12 Oct 2026) */
.flt__shapes{grid-template-columns:repeat(2,minmax(0,1fr))}
.flt__shapes svg{width:56px;height:22px}
/* the BOQ */
.boq{display:grid;gap:14px;padding:clamp(16px,2.6vw,28px);border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);scroll-margin-top:90px}
.boq__head h2{margin:0;display:flex;align-items:center;gap:10px;font-size:clamp(1.3rem,2.4vw,1.7rem)}
.boq__lead{margin:6px 0 0;color:var(--fg-2);max-width:70ch}
.boq__empty{margin:0;padding:14px;border:1px dashed var(--line-2);border-radius:var(--jw-radius);color:var(--fg-2)}
.boq__table{display:grid;border:1px solid var(--line);border-radius:var(--jw-radius);overflow:hidden}
.boq__row{display:grid;grid-template-columns:32px minmax(0,1.3fr) 70px minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) 156px;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:.86rem;color:var(--fg)}
/* visitors: no open-flat and weight columns (owner, 12 Oct 2026) */
.boq__pwhint{margin:10px 0 0;padding:10px 14px;border-left:3px solid var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 7%,var(--card));font-size:.88rem;line-height:1.5;color:var(--fg)}
.boq__pwhint a{white-space:nowrap}
.boq-lock__steps{margin:6px 0 10px;padding-left:1.3em;font-size:.9rem;line-height:1.55}
.boq-lock__steps li{margin:3px 0}
.boq-lock__steps code{font-family:var(--f-mono);letter-spacing:.12em;padding:0 4px;background:color-mix(in srgb,var(--fg) 7%,var(--card))}
.boq__table--short .boq__row{grid-template-columns:32px minmax(0,1.4fr) 70px minmax(0,2.2fr) minmax(0,1.4fr) 156px}
.boq__row:first-child{border-top:0}
.boq__row--head{background:color-mix(in srgb,var(--fg) 5%,var(--card));font:600 .62rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.boq__row--total{background:color-mix(in srgb,var(--jw-accent) 10%,var(--card))}
.boq__row > span{min-width:0;overflow-wrap:anywhere}
.boq__row small{display:block;color:var(--fg-3);font-size:.76rem}
.boq__no{font:600 .8rem/1 var(--f-mono);color:var(--jw-accent)}
.boq__name b{display:block}
.boq__kind{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:9px;font:600 .6rem/1.5 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--jw-accent) 18%,var(--card));color:var(--fg)}
.boq__kind--panel{background:color-mix(in srgb,#2f6b8a 22%,var(--card))}
.boq__warn{color:#c2410c !important}
.boq__acts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-items:center}   /* six controls in 226 px: a second row, never over the finish column (23 Oct 2026) */
.boq__mv{width:30px;height:30px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:transparent;color:var(--fg-2);cursor:pointer}
.boq__mv:disabled{opacity:.3;cursor:default}
.boq__actions{gap:10px}
.boq__msg{margin:0;padding:10px 14px;border-left:3px solid #2f7d4f;color:var(--fg)}
@media (max-width:980px){
  .boq__row,.boq__table--short .boq__row{grid-template-columns:28px minmax(0,1fr) 64px;row-gap:4px}
  .boq__row--head{display:none}
  .boq__row > span:nth-child(n+4){grid-column:2/-1}
  .boq__acts{justify-content:flex-start}
  .boq__row--total > span:empty{display:none}
}
@media (max-width:640px){
  .bs__boq{margin-left:0}
  .bs__tabs button{flex:1 1 0;justify-content:center;flex-wrap:wrap}
  .pnl__head{display:none}
  .pnl__side{grid-template-columns:1fr 1fr;row-gap:6px}
  .pnl__side b{grid-column:1/-1}
  .pnl__side .pb__dir{grid-column:1/-1}
  .pnl__shapes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.boq__row{grid-template-columns:32px minmax(0,1.3fr) 70px minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) 226px}
@media (min-width:981px){.boq__table--short .boq__row{grid-template-columns:32px minmax(0,1.4fr) 70px minmax(0,2.2fr) minmax(0,1.4fr) 226px}}
.boq__acts .pb__chip{white-space:nowrap}
/* "View": the item's drawing opened under its row, as in the designer (14 Oct 2026) */
.boq__row > .boq__view{grid-column:1/-1;margin:4px 0 2px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.boq__view svg{display:block;width:100%;max-width:720px;height:auto;max-height:420px;margin:0 auto}
.boq__view p{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@media (max-width:980px){.boq__row{grid-template-columns:28px minmax(0,1fr) 64px}}

/* ---- share sheet (site.js shareOpen; owner, 8 Oct 2026): a page or a photograph with the website's link; pictures
   go out stamped with the MCS mark. Above the picture viewer (.lb, z-index 120). Phones: a sheet from the bottom with
   equal blocks, icon + short label. */
.shr { position: fixed; inset: 0; z-index: 140; background: rgba(6, 6, 5, .62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.shr[hidden] { display: none; }
.shr__box { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--card); color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--jw-radius, 8px); padding: 16px 18px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.shr__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.shr__head b { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.shr__x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--fg); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.shr__img { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #111; border-radius: 4px; margin: 4px 0 10px; }
.shr__t { margin: 0 0 2px; font-weight: 600; line-height: 1.35; }
.shr__u { margin: 0 0 12px; font: .74rem/1.4 var(--f-mono); color: var(--fg-3); overflow-wrap: anywhere; }
.shr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shr__b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 66px; padding: 8px 4px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--fg); font: inherit; font-size: .8rem; text-decoration: none; cursor: pointer; text-align: center; }
.shr__b[hidden] { display: none; }
.shr__b:hover, .shr__b:focus-visible { border-color: var(--jw-accent); color: var(--jw-accent); }
.shr__b i { font-style: normal; font-weight: 700; font-size: .82rem; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--jw-accent); color: var(--card); }
.shr__b--wa i { background: #1f8f4e; color: #fff; }
.shr__b--fb i { background: #1b5fc1; color: #fff; }
.shr__b--li i { background: #0a66c2; color: #fff; }
.shr__b--pin i { background: #c8232c; color: #fff; }
.shr__note { margin: 10px 0 0; font-size: .74rem; color: var(--fg-3); }
@media (max-width: 560px) {
  .shr { align-items: flex-end; padding: 0; }
  .shr__box { width: 100%; border-radius: 12px 12px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .shr__img { max-height: 180px; }
}
/* the picture viewer's Share button: bottom right, clear of the caption */
.lb__share { position: absolute; right: 18px; bottom: 58px; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .38); background: rgba(13, 13, 12, .72); color: #f2efe9; font: .8rem var(--f-body); cursor: pointer; }
.lb__share svg { width: 18px; height: 18px; }
.lb__share:hover, .lb__share:focus-visible { color: #dcb97e; border-color: #dcb97e; }
.lb__share[hidden] { display: none; }

/* ---- Download Centre (DownloadCentre.tsx; owner, 8 Oct 2026): the Complete Catalogue first, then picture cards of every
   catalogue and datasheet (the PDF's own first page). Rows stay full: 4 or 5 across and centred; on a tablet or a phone a
   card left alone on the last row is drawn wide (cover beside the text). */
.dlc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-5) 0 0; }
.dlc-jump a { padding: 7px 14px; border: 1px solid var(--rule); border-radius: 20px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.dlc-jump a:hover, .dlc-jump a:focus-visible { border-color: var(--accent); color: var(--accent); }
.dlc-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; margin-top: var(--s-7); padding: var(--s-7); background: var(--bg-alt); border: 1px solid var(--rule); scroll-margin-top: 90px; }
.dlc-hero__stack { position: relative; display: block; aspect-ratio: 595 / 842; max-width: 340px; width: 78%; margin: 0 auto; }
.dlc-hero__stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); border: 1px solid rgba(0, 0, 0, .12); }
.dlc-hero__back--0 { transform: translate(-16%, 4%) rotate(-7deg) scale(.9); opacity: .9; }
.dlc-hero__back--1 { transform: translate(16%, 4%) rotate(7deg) scale(.9); opacity: .9; }
.dlc-hero__front { transition: transform .3s; }
.dlc-hero__stack:hover .dlc-hero__front { transform: translateY(-6px); }
.dlc-hero__body { display: grid; gap: var(--s-4); justify-items: start; min-width: 0; }
.dlc-hero__title { margin: 0; font-family: var(--f-display); font-size: clamp(28px, 4vw, 44px); line-height: 1.05; text-wrap: balance; }
.dlc-hero__text { margin: 0; color: var(--ink-2); max-width: 56ch; }
.dlc-hero__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); width: 100%; }
.dlc-hero__facts li { display: grid; gap: 2px; padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.dlc-hero__facts b { font-family: var(--f-display); font-size: 26px; color: var(--accent); font-weight: 600; line-height: 1.1; }
.dlc-hero__facts span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dlc-hero__cats { display: grid; gap: var(--s-2); width: 100%; margin-top: var(--s-2); }
.dlc-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dlc-hero__chips a { padding: 5px 10px; border: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
.dlc-hero__chips a:hover, .dlc-hero__chips a:focus-visible { border-color: var(--accent); color: var(--accent); }
.dlc-group { margin-top: var(--s-8); scroll-margin-top: 90px; }
.dlc-row { --gap: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: var(--s-5); }
.dlc-card { flex: 0 0 calc((100% - (var(--c) - 1) * var(--gap)) / var(--c)); min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); scroll-margin-top: 90px; }
.dlc-card__cover { position: relative; display: block; aspect-ratio: 595 / 842; background: var(--bg-alt); border: 1px solid var(--rule); overflow: hidden; }
.dlc-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.dlc-card__cover:hover img, .dlc-card__cover:focus-visible img { transform: scale(1.03); }
.dlc-card__pill { position: absolute; left: 8px; top: 8px; padding: 3px 8px; background: rgba(13, 13, 12, .78); color: #f2efe9; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.dlc-card__body { display: grid; gap: 4px; align-content: start; flex: 1; }
.dlc-card__title { margin: 0; font-family: var(--f-display); font-size: 17px; line-height: 1.2; font-weight: 500; }
.dlc-card__meta { margin: 0; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); }
.dlc-card__text { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.dlc-card__links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.dlc-card__dl { font-weight: 600; font-size: 13px; color: var(--accent); text-decoration: none; }
.dlc-card__dl::before { content: "↓ "; }
.dlc-card__more { font-size: 13px; color: var(--ink-2); }
.dlc-asked { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
@media (max-width: 1024px) {
  .dlc-row { --c: 4 !important; }
  .dlc-hero { grid-template-columns: 1fr; padding: var(--s-6); gap: var(--s-6); }
  .dlc-hero__stack { width: 52%; }
  .dlc-card--wt { flex-basis: 100%; flex-direction: row; }
  .dlc-card--wt .dlc-card__cover { width: 26%; flex: none; }
}
@media (max-width: 640px) {
  .dlc-row { --c: 2 !important; --gap: 14px; }
  .dlc-hero { padding: var(--s-5) var(--s-4); margin-top: var(--s-6); }
  .dlc-hero__stack { width: 64%; }
  .dlc-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlc-hero .btn { width: 100%; justify-content: center; }
  .dlc-card--wt { flex-basis: calc((100% - var(--gap)) / 2); flex-direction: column; }
  .dlc-card--wt .dlc-card__cover { width: auto; }
  .dlc-card--wp { flex-basis: 100%; flex-direction: row; }
  .dlc-card--wp .dlc-card__cover { width: 40%; flex: none; }
  .dlc-card__title { font-size: 15.5px; }
  .dlc-asked { grid-template-columns: 1fr; }
}
.dlc-card__cover--photo { aspect-ratio: 4 / 5; }
.dlc-card__cover--photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Online presence page (PresenceHub.tsx, OnlineFeedsUi.tsx; owner, 8 Oct 2026): profiles grouped by what a visitor
   goes there for, then the films and the posts with category buttons. Cards are the site's presence, film and post cards. */
.onl-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); margin-top: var(--s-7); scroll-margin-top: 90px; }
.onl-group { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.onl-group:nth-child(4) { grid-column: 1 / -1; }   /* Social, five profiles, across the page */
.onl-group__head { display: grid; gap: 4px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.onl-group__head h2 { margin: 0; }
.onl-group__head p { margin: 0; color: var(--ink-3); font-size: 14px; }
.onl-group__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.onl-group__cards--2, .onl-group__cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onl-group__cards--3, .onl-group__cards--5, .onl-group__cards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.onl-group__cards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.onl-group__cards--5 > li { grid-column: span 2; }
.onl-group__cards--5 > li:nth-child(n+4) { grid-column: span 3; }
.onl-group__cards .presence__card { height: 100%; }
.onl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-5) 0 var(--s-5); }
.onl-chip { padding: 7px 12px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.onl-chip span { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); margin-left: 4px; }
.onl-chip:hover, .onl-chip:focus-visible { border-color: var(--accent); color: var(--accent); }
.onl-chip.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--ink); }
@media (max-width: 1024px) {
  .onl-groups { grid-template-columns: 1fr; }
  .onl-group:nth-child(4) { grid-column: auto; }
}
@media (max-width: 640px) {
  .onl-group__cards--3, .onl-group__cards--5, .onl-group__cards--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onl-group__cards--5 > li, .onl-group__cards--5 > li:nth-child(n+4) { grid-column: span 1; }
  .onl-group__cards--5 > li:last-child, .onl-group__cards--3 > li:last-child { grid-column: 1 / -1; }
  .onl-chip { flex: 1 1 auto; text-align: center; }
}

/* footer (owner, 8 Oct 2026: "in footer content is overlaping"). Between 1000 and 1199 px site.css (section 42) gives the
   whole first row to the first link column, but in this site the first block is the brand (.footer__brand), so it kept
   one narrow column and its text ran under "Job work". It takes the first row now; the four lists share the second.
   On phones the opening hours and "Request a quote" touched: a little room between them. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .footer__grid > .footer__brand { grid-column: 1 / -1; min-width: 0; }
  .footer__grid > .footer__brand p { max-width: 72ch; }
}
.footer__contact .link-arrow { margin-top: var(--s-3, 12px); justify-self: start; }
/* the eight profile icons in one row fit a 360 px phone (they widened the page by 13 px there) */
.footer__social { flex-wrap: wrap; }
@media (max-width: 400px) { .footer__social { gap: 6px; } .footer__social a { width: 34px; height: 34px; } }

/* ---- Events (EventStory.tsx; owner, 8 Oct 2026): the facts, the films, the stand by kind of work, the show. Photographs
   in masonry columns, so tall and wide shots sit together without gaps or a lone tile. */
.evt-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: var(--s-6) 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.evt-facts > div { padding: var(--s-4) var(--s-4) var(--s-4) 0; min-width: 0; }
.evt-facts > div + div { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.evt-facts dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.evt-facts dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.evt-group { margin-top: var(--s-7); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-6); align-items: start; }
.evt-group__head { position: sticky; top: 96px; display: grid; gap: var(--s-2); }
.evt-group__head h3 { margin: 0; font-family: var(--f-display); font-size: 22px; line-height: 1.15; }
.evt-group__head p { margin: 0; color: var(--ink-2); font-size: 14px; }
.evt-group__head .link-arrow { font-size: 12px; }
.evt-photos { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 14px; }
.evt-photos--stand { columns: 4 220px; margin-top: var(--s-5); }
.evt-photos li { break-inside: avoid; margin: 0 0 14px; }
.evt-photos a { display: block; overflow: hidden; border: 1px solid var(--rule); background: var(--bg-alt); }
.evt-photos img { display: block; width: 100%; height: auto; transition: transform .35s; }
.evt-photos a:hover img, .evt-photos a:focus-visible img { transform: scale(1.03); }
.evt-photos__cap { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
@media (max-width: 1024px) {
  .evt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evt-facts > div { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .evt-facts > div + div { padding-left: 0; border-left: 0; }
  .evt-facts > div:nth-child(even) { padding-left: var(--s-3); border-left: 1px solid var(--rule); }
  .evt-facts > div:last-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-bottom: 0; }
  .evt-group { grid-template-columns: 1fr; gap: var(--s-4); }
  .evt-group__head { position: static; }
}
@media (max-width: 640px) {
  .evt-facts { grid-template-columns: 1fr; }
  .evt-facts > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .evt-photos, .evt-photos--stand { columns: 2; column-gap: 10px; }
  .evt-photos li { margin-bottom: 10px; }
}

/* the eight profile icons in one row on wide screens too (they wrapped 6 + 2 in the 1.6-fraction brand column) */
@media (min-width: 1200px) { .footer__social { gap: 6px; } .footer__social a { width: 30px; height: 30px; } }

/* recheck 8 Oct 2026: post captions on the Connect page in full (site.css cuts them to two lines elsewhere) */
.onl .post-card__cap { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* BOQ builder, 10 Oct 2026 (owner: "make little more user friendly ... so interactive user must be excited to see the
   results"): numbers that count, the finish picker, the result bar on phones, BOQ tiles, the progress of the files, the
   ready card with the two files and the lock card. */
.num{font-variant-numeric:tabular-nums}
.fp{display:grid;gap:12px}
.fp__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fp__chip{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:transparent;color:var(--fg);text-align:left;cursor:pointer}
.fp__chip b{font:600 .8rem/1.2 var(--f-body)}
.fp__chip small{grid-column:2;color:var(--fg-3);font-size:.7rem;line-height:1.2}
.fp__chip[aria-checked="true"]{border-color:var(--jw-accent);box-shadow:inset 0 0 0 1px var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 10%,var(--card))}
.fp__tex{grid-row:1/3;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.25);background:#c9ccd0}
.fp__tex--hairline{background:repeating-linear-gradient(90deg,#d8dbde 0 1px,#b7bbbf 1px 2px,#cfd2d5 2px 4px)}
.fp__tex--mirror{background:linear-gradient(135deg,#f4f6f8 0%,#9aa0a6 38%,#ffffff 52%,#7d838a 70%,#e9ecef 100%)}
.fp__tex--matte{background:#b9bcbf}
.fp__tex--bead{background:radial-gradient(#c4c7ca 30%,transparent 31%) 0 0/4px 4px,#adb1b5}
.fp__tex--antique{background:repeating-linear-gradient(35deg,#a98f62 0 2px,#8b7350 2px 4px)}
.fp__tex--mill{background:linear-gradient(160deg,#c6c9cc,#a7abaf)}
.pb__dir button:disabled{opacity:.4;cursor:not-allowed}
.pb__live{display:none}
@media (max-width:980px){
  .pb__live{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:10px;align-items:center;position:sticky;top:var(--header-h,62px);z-index:20;margin:0 calc(-1 * var(--gutter,16px));padding:8px var(--gutter,16px);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--jw-accent)}
  .pb__livesvg{height:58px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--jw-radius);padding:3px}
  .pb__livesvg svg{max-height:100%;width:auto;max-width:100%}
  .pb__livesvg text{display:none}
  .pb__live dl{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px}
  .pb__live dl div{display:grid}
  .pb__live dt{font:600 .58rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
  .pb__live dd{margin:0;font:600 .95rem/1.2 var(--f-body);color:var(--jw-accent)}
  .pb__livebtn{min-width:44px;min-height:44px;border:1px solid var(--jw-accent);border-radius:var(--jw-radius);background:transparent;color:var(--fg);font:700 .72rem/1 var(--f-mono)}
}
@media (max-width:520px){.fp__chips{grid-template-columns:1fr 1fr}}
.bs__boq b.is-bump{animation:boq-bump .6s ease}
@keyframes boq-bump{30%{transform:scale(1.45);box-shadow:0 0 0 6px color-mix(in srgb,var(--jw-accent) 35%,transparent)}100%{transform:none}}
.boq__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.boq__tiles>div{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--jw-radius);background:color-mix(in srgb,var(--fg) 3%,var(--card))}
.boq__tiles span{font:600 .62rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.boq__tiles b{font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--jw-accent)}
.boq__tiles small{color:var(--fg-3)}
.boq__empty{display:flex;gap:14px;align-items:center}
.boq__empty svg{flex:none;width:56px;height:42px;fill:none;stroke:var(--jw-accent);stroke-width:2}
.boq__empty p{margin:0}
.boq__row.is-new{animation:boq-new 1.6s ease}
@keyframes boq-new{0%{background:color-mix(in srgb,var(--jw-accent) 35%,var(--card))}100%{background:transparent}}
.boq__dot{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;border:1px solid rgba(0,0,0,.3);vertical-align:-1px}
.boq__go{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.boq__make{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:10px 22px;text-align:left}
.boq__make svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.boq__make span{display:grid;gap:3px}
.boq__make small{font:500 .62rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:none;opacity:.8}
.boq__steps{list-style:none;margin:0;padding:12px 14px;display:grid;gap:6px;border:1px solid var(--line);border-radius:var(--jw-radius)}
.boq__steps li{display:flex;align-items:center;gap:10px;color:var(--fg-3);font-size:.9rem}
.boq__steps li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2)}
.boq__steps li.is-now{color:var(--fg)}
.boq__steps li.is-now::before{border-color:var(--jw-accent);border-top-color:transparent;animation:boq-spin .8s linear infinite}
.boq__steps li.is-done{color:var(--fg-2)}
.boq__steps li.is-done::before{background:#2f7d4f;border-color:#2f7d4f;content:"\2713";color:#fff;font-size:10px;line-height:12px;text-align:center}
.boq__steps li.boq__bar{display:block;height:4px;margin-top:4px;border-radius:2px;background:var(--line)}
.boq__steps li.boq__bar::before{display:none}
.boq__bar i{display:block;height:100%;border-radius:2px;background:var(--jw-accent);transition:width .5s ease}
@keyframes boq-spin{to{transform:rotate(360deg)}}
.boq__msg.is-bad{border-left-color:#c2410c}
.boq-ready{display:grid;gap:14px;padding:clamp(16px,2.6vw,26px);border:1px solid var(--jw-accent);border-radius:var(--jw-radius);background:color-mix(in srgb,var(--jw-accent) 7%,var(--card));animation:boq-in .6s ease;scroll-margin-top:calc(var(--header-h,72px) + 16px)}
@keyframes boq-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.boq-ready__kicker{margin:0;font:600 .66rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--jw-accent)}
.boq-ready h3{margin:0;font-size:clamp(1.15rem,2.2vw,1.45rem);text-wrap:balance}
.boq-ready__files{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.boq-file{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);text-align:left;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.boq-file:hover{transform:translateY(-2px);border-color:var(--jw-accent)}
.boq-file i{display:grid;place-items:center;height:54px;border-radius:4px;font:700 .72rem/1 var(--f-mono);font-style:normal;color:#fff}
.boq-file--xlsx i{background:#1f7a46}
.boq-file--pdf i{background:#b3261e}
.boq-file b{display:block}
.boq-file small{color:var(--fg-3);font-size:.76rem}
.boq-file em{font:600 .7rem/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--jw-accent)}
.boq-ready__total{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:1.05rem}
.boq-ready__total small{color:var(--fg-3)}
.boq-ready__mask{font:700 1.3rem/1 var(--f-mono);letter-spacing:.08em;color:var(--jw-accent)}
.boq-lock{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--jw-radius);background:var(--card)}
.boq-lock.is-open{border-style:solid;border-color:#2f7d4f}
.boq-lock__icon svg{width:44px;height:44px;fill:none;stroke:var(--jw-accent);stroke-width:1.6}
.boq-lock.is-open .boq-lock__icon svg{stroke:#2f7d4f}
.boq-lock h4{margin:0 0 6px;font-size:1.05rem}
.boq-lock p{margin:0 0 10px;color:var(--fg-2);max-width:68ch}
.boq-reg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
.boq-reg .btn{justify-self:start}
.boq-reg .field.is-bad input,.boq-reg .field.is-bad select{border-color:#c2410c}
.boq-reg__small{grid-column:1/-1;margin:0;font-size:.76rem;color:var(--fg-3)}
@media (max-width:600px){.boq-reg{grid-template-columns:1fr}.boq-lock{grid-template-columns:1fr}.boq-lock__icon{display:none}.boq__make{width:100%}}
@media (prefers-reduced-motion:reduce){.boq-ready,.boq__row.is-new,.bs__boq b.is-bump{animation:none}.boq__steps li.is-now::before{animation:none}}
.boq__tiles b span.num,.boq__tiles small span.num,.pb__results b span.num{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

/* the way through the builder, as a wizard (13 Oct 2026): five steps that tick off */
.bsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;counter-reset:none}
.bsteps li{margin:0;min-width:0}
.bsteps button{width:100%;height:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.bsteps b{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);font:600 .82rem/1 var(--f-mono)}
.bsteps span{display:grid;gap:2px;font-size:.86rem;font-weight:600;line-height:1.25;min-width:0}
.bsteps small{font-weight:400;font-size:.74rem;color:var(--fg-3)}
.bsteps li.is-done b{background:#2f7d4f;border-color:#2f7d4f;color:#fff}
.bsteps li.is-now button{border-color:var(--jw-accent);box-shadow:inset 0 -3px 0 var(--jw-accent)}
.bsteps li.is-now b{background:var(--jw-accent);border-color:var(--jw-accent);color:#0d0d0c}
.bsteps button:focus-visible{outline:2px solid var(--jw-accent);outline-offset:2px}
@media (max-width:900px){.bsteps small{display:none}}
@media (max-width:640px){.bsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.bsteps button{flex-direction:column;justify-content:center;gap:4px;padding:8px 4px;text-align:center}.bsteps span{font-size:.68rem;font-weight:500}}

/* the customer's corner (13 Oct 2026): sign in, My BOQs, a new BOQ; the project name of a BOQ */
.acct{display:grid;gap:12px;padding:14px clamp(14px,2.4vw,20px);border:1px solid var(--line-2);border-left:3px solid var(--jw-accent);border-radius:var(--jw-radius);background:var(--card);scroll-margin-top:calc(var(--header-h,72px) + 16px)}
.acct__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.acct__icon{width:28px;height:28px;fill:none;stroke:var(--jw-accent);stroke-width:1.6}
.acct__who{margin:0;color:var(--fg);font-size:.95rem;line-height:1.45}
.acct__type{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--line-2);border-radius:999px;font:500 .7rem/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);vertical-align:1px}
.acct__acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.acct__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:end}
.acct__go{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.acct__small{margin:0;grid-column:1/-1;font-size:.82rem;line-height:1.5;color:var(--fg-2)}
.acct__msg{margin:0;padding:9px 12px;border:1px solid color-mix(in srgb,#2f7d4f 55%,var(--line-2));border-radius:var(--jw-radius);font-size:.9rem;color:var(--fg)}
.acct__msg.is-bad{border-color:color-mix(in srgb,#c2410c 60%,var(--line-2))}
.acct__list{display:grid;gap:10px}
.acct__boqs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:10px}
.acct__boq{display:grid;gap:8px;align-content:start;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card-2)}
.acct__boqhead{display:grid;gap:2px}
.acct__boqhead b{font-size:1rem;color:var(--fg);overflow-wrap:anywhere}
.acct__boqhead small{font:500 .72rem/1.4 var(--f-mono);letter-spacing:.04em;color:var(--fg-3)}
.acct__items{margin:0;font-size:.86rem;line-height:1.45;color:var(--fg-2);overflow-wrap:anywhere}
.acct__boq code{font-family:var(--f-mono);letter-spacing:.12em;padding:0 4px;background:color-mix(in srgb,var(--fg) 7%,var(--card))}
.acct__boqacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acct__asked{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid color-mix(in srgb,#2f7d4f 55%,var(--line-2));border-radius:var(--jw-radius);font-size:.8rem;color:var(--fg)}
.boq__project{display:grid;gap:4px;max-width:520px;margin:4px 0 12px}
.boq__project small{color:var(--fg-3);font-weight:400}
/* staff only: this BOQ's factor (13 Oct 2026) */
.boq__factor{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 12px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--jw-radius);max-width:620px}
.boq__factor .field{display:grid;gap:4px;margin:0;font-size:.86rem}
.boq__factor .field input{width:110px;min-height:40px;padding:8px 12px}
.boq__fq{min-height:40px;min-width:56px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:inherit;cursor:pointer}
.boq__fq[aria-pressed="true"]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 14%,var(--card))}
.boq__factor small{flex:1 1 100%;color:var(--fg-3);font-size:.8rem}
.boq__link{padding:0;border:0;background:none;color:var(--jw-accent);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:700px){.acct__bar{grid-template-columns:auto minmax(0,1fr)}.acct__acts{grid-column:1/-1;justify-content:stretch}.acct__acts .btn{flex:1 1 auto}.acct__form{grid-template-columns:1fr}.acct__go .btn{flex:1 1 100%}}
/* the builder as pages (13 Oct 2026, owner: "next next option in wizard ... page wise") */
.bs__page:not([hidden]){display:grid;gap:22px;min-width:0}
.bsteps,.bs__tabs,#boq,#bs-account{scroll-margin-top:84px}
.bs__pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--line-2)}
.bs__next b{margin-left:6px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.18);font:600 .78rem/1.3 var(--f-mono)}
.bs__hello{margin:0;font-size:.92rem;color:var(--fg-2)}
@media (max-width:640px){.bs__pager .btn{flex:1 1 100%;justify-content:center}.bs__pager > span{display:none}}
/* customer login in the header (13 Oct 2026, owner: "customer login link is not visible"): the person icon only
   (owner, 29 Oct 2026: "remove login text from header only icon is ok"); its name stays in aria-label and title */
.header__actions .header__login{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* the menu words stay on one line (\"Who We Serve\" wrapped at 1440 px before the login came; checked 1100-1440 px) */
@media (min-width:1100px){.header .nav__link{white-space:nowrap;padding-inline:7px}}
@media (max-width:480px){.header__actions .header__login{min-width:36px;padding:0}}
/* the builder: the BOQ kept from the last visit, and the customer login bar */
/* the home page's "welcome back" line (resume_design, 23 Oct 2026): the builder's resume note, one line under the hero */
.resume-wrap:empty{display:none}
.resume-wrap{padding:0 var(--gutter,16px);margin:-8px auto 0}
.resume-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--jw-accent) 55%,var(--line-2));border-radius:var(--jw-radius);background:var(--card);margin:18px 0 0}
.resume-bar p{margin:0;flex:1 1 320px;font-size:.92rem;line-height:1.5;color:var(--fg)}
.resume-bar__go{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.resume-bar__x{width:36px;height:36px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:none;color:var(--fg-2);font-size:1.2rem;line-height:1;cursor:pointer}
.resume-bar__x:hover{color:var(--fg);border-color:var(--fg-3)}
.bs__resume,.bs__hello{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card)}
.bs__resume{border-color:color-mix(in srgb,var(--jw-accent) 55%,var(--line-2))}
.bs__resume p,.bs__hello p{margin:0;flex:1 1 320px;font-size:.92rem;line-height:1.5;color:var(--fg)}
.bs__resume-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bs__x{width:36px;height:36px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:none;color:var(--fg-2);font-size:1.2rem;line-height:1;cursor:pointer}
.bs__x:hover{color:var(--fg);border-color:var(--fg-3)}
@media (max-width:640px){.bs__resume-go .btn,.bs__hello .bs__login{flex:1 1 auto;justify-content:center}}
/* My BOQs by project (13 Oct 2026, owner: "customer cant remove and add boq and projects in his login") */
.acct__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.acct__tools b{font-size:1rem}
.acct__name{display:grid;gap:10px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--jw-radius)}
.acct__proj{display:grid;gap:10px;padding:12px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.acct__projhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.acct__projhead > div:first-child{display:grid;gap:2px;min-width:0}
.acct__projhead b{font-size:1.05rem;overflow-wrap:anywhere}
.acct__projhead small{font:500 .72rem/1.4 var(--f-mono);letter-spacing:.04em;color:var(--fg-3)}
.acct__projacts{display:flex;flex-wrap:wrap;gap:8px}
.acct__rm{color:#c0473a}
.acct__removed{padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.acct__removed summary{cursor:pointer;font-weight:600}
.acct__removed ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.acct__removed li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:.88rem}
/* a builder's parts one at a time (13 Oct 2026, owner: "make sub wizard for boq genrator first step is very lengthy") */
.pb__step[hidden]{display:none}
.pb__side .pb__step{border-bottom:0;padding-bottom:0}
/* framed, buttons that stay put (16 Oct 2026, owner: "button placement is moving ... must be framed and next and previous
   and finish properly"): the step bar and Previous / Step n of N / Next or Finish in one head that stays in view on a wide
   screen; the same row under the form on a phone */
.pbw__frame{gap:14px;padding:0 clamp(12px,1.6vw,18px) clamp(12px,1.6vw,18px);border:1px solid var(--line-2);border-top:3px solid var(--jw-accent);border-radius:var(--jw-radius);background:var(--card)}
.pbw__head{display:grid;gap:10px;margin:0 calc(-1 * clamp(12px,1.6vw,18px));padding:12px clamp(12px,1.6vw,18px);background:var(--card);border-bottom:1px solid var(--line-2);border-radius:var(--jw-radius) var(--jw-radius) 0 0}
@media (min-width:981px){.pbw__head{position:sticky;top:84px;z-index:6;box-shadow:0 6px 12px -10px rgba(0,0,0,.45)}.pbw__nav.pbw__nav--foot{display:none}}
.pbw{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;gap:4px}
.pbw li{margin:0;min-width:0}
.pbw button{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-height:48px;padding:6px 3px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg-2);font:500 .7rem/1.2 var(--f-mono);letter-spacing:.03em;cursor:pointer}
.pbw button span{max-width:100%;font:500 .7rem/1.15 var(--f-body,inherit);letter-spacing:0;text-align:center;hyphens:manual}
.pbw b{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);font-size:.66rem}
.pbw li.is-done b{background:#2f7d4f;border-color:#2f7d4f;color:#fff}
.pbw li.is-now button{border-color:var(--jw-accent);color:var(--fg);box-shadow:inset 0 -2px 0 var(--jw-accent)}
.pbw li.is-now b{background:var(--jw-accent);border-color:var(--jw-accent);color:#0d0d0c}
.pbw button:focus-visible{outline:2px solid var(--jw-accent);outline-offset:2px}
.pbw__nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.pbw__nav .btn{justify-content:center;white-space:nowrap}
.pbw__nav > :first-child{justify-self:start}
.pbw__nav > :last-child{justify-self:end}
.pbw__nav .btn[disabled]{opacity:.35;cursor:default}
.pbw__nav--foot{padding-top:12px;border-top:1px solid var(--line)}
.pbw__where{justify-self:center;min-width:0;max-width:100%;overflow:hidden;color:var(--fg-3);font:500 .74rem/1.3 var(--f-mono);letter-spacing:.06em;white-space:nowrap}
.pbw__finish{box-shadow:0 0 0 3px color-mix(in srgb,var(--jw-accent) 30%,transparent)}
.pb__finishnote{margin:0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--jw-radius);font-size:.86rem;line-height:1.6}
.pb__finishnote .pb__chip{margin-left:6px;vertical-align:middle}
.pb__added{display:grid;gap:10px;padding:12px;border:1px solid #2f7d4f;border-radius:var(--jw-radius);background:color-mix(in srgb,#2f7d4f 8%,var(--card))}
.pb__added p{margin:0}
.pb__addedgo{display:grid;gap:8px}
.pb__addedgo .btn{display:grid;justify-items:start;text-align:left;gap:2px;width:100%}
.pb__addedgo .btn small{font:400 .72rem/1.3 var(--f-body,inherit);letter-spacing:0;text-transform:none;opacity:.8}
@media (max-width:640px){.pbw button span{font-size:.64rem}.pbw__nav{gap:6px}.pbw__where{visibility:hidden}.pbw__nav .btn{padding-inline:12px;font-size:.72rem}}
/* the standard items list in step 1 of each builder (13 Oct 2026) */
.pb__std{margin-top:6px}
.pb__std select{width:100%}

/* ---- MCS Facade Studio (14 Oct 2026, staff tool, phase 1) ---- */
.fs{display:grid;gap:14px}
.fs__bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}
.fs__steps{display:flex;flex-wrap:wrap;gap:6px}
.fs__steps button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 .88rem/1.2 var(--f-body);cursor:pointer}
.fs__steps button small{font:600 .66rem/1 var(--f-mono);color:var(--fg-2)}
.fs__steps button[aria-current="step"]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 16%,var(--card))}
.fs__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fs__status{font:600 .7rem/1.3 var(--f-mono);letter-spacing:.06em;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.fs__status--err{border-color:#c0392b;color:var(--fg)}
.fs__status--warn{border-color:#d68910}
.fs__status--ok{border-color:#2f7d4f}
.fs__main{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:clamp(16px,2.5vw,32px);align-items:start}
.fs__side{display:grid;gap:14px;min-width:0}
.fs__side section{display:grid;gap:12px}
.fs__side h3{margin:4px 0 0;font:600 1.05rem/1.2 var(--f-head,var(--f-body))}
.fs__side h4{margin:6px 0 0;font:600 .95rem/1.2 var(--f-body)}
.fs__side h4 small{font:500 .7rem/1 var(--f-mono);color:var(--fg-2);margin-left:6px}
.fs__stage{position:sticky;top:84px;display:grid;gap:8px;min-width:0}
.fs__views{display:flex;gap:6px;flex-wrap:wrap}
.fs__views button{min-height:38px;padding:4px 14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 .82rem/1 var(--f-body);cursor:pointer}
.fs__views button[aria-selected="true"]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 16%,var(--card))}
.fs__front{display:grid;gap:6px;padding:8px 10px;border:1px dashed var(--line-2);border-radius:var(--jw-radius);margin-bottom:8px}
.fs__plan{display:block;width:100%;max-width:420px;height:auto;margin:8px 0 0;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:#fbfaf7}
.fs__chips{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:.78rem;color:var(--fg-2)}
.fs__chipset{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}.fs__chipset b{margin-left:6px;color:var(--fg);font-weight:600}
.fs__chiplbl{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;margin-right:2px}
.fs__chipset button{min-height:30px;padding:2px 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--fg);font:600 .74rem/1 var(--f-body);cursor:pointer}
.fs__chipset button[aria-pressed="true"]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 18%,var(--card))}
.fs__elev,.fs__3d{border:1px solid var(--line-2);border-radius:var(--jw-radius);background:color-mix(in srgb,var(--fg) 3%,var(--card));overflow:hidden;min-width:0}
.fs__3d canvas{display:block;width:100%!important}
.fs__dwg{width:100%;height:auto;background:#fff;border:1px solid var(--line-2)}
.fs__legend,.fs__note{margin:0;font-size:.82rem;line-height:1.45;color:var(--fg-2)}
.fs__btns{display:flex;flex-wrap:wrap;gap:8px}
.fs__file{position:relative;overflow:hidden;cursor:pointer}
.fs__file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fs__more{border:1px dashed var(--line-2);border-radius:var(--jw-radius);padding:8px 10px}
.fs__more summary{cursor:pointer;font:600 .8rem/1.4 var(--f-body);color:var(--fg-2)}
.fs__more .pb__grid{margin-top:10px}
.fs__check{display:flex;align-items:center;gap:8px;min-height:44px;font:500 .85rem/1.4 var(--f-body);color:var(--fg-2);cursor:pointer}
.fs__check input{width:18px;height:18px;accent-color:var(--jw-accent)}
.fs__ops{display:grid;gap:10px}
.fs__op{border:1px solid var(--line-2);border-radius:var(--jw-radius);padding:8px 10px 10px;margin:0;min-width:0}
.fs__op legend{font:600 .72rem/1 var(--f-mono);padding:0 4px}
.fs__opacts{grid-column:1/-1;display:flex;gap:8px}
.fs__prev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fs__prev figure{margin:0;display:grid;gap:4px}
.fs__prev canvas{width:100%;height:auto;border:1px solid var(--line-2);background:#fff}
.fs__prev figcaption{font:500 .66rem/1.2 var(--f-mono);color:var(--fg-2)}
.fs__totals{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.9rem}
.fs__panel{border:1px solid var(--line-2);border-radius:var(--jw-radius);padding:10px 12px;display:grid;gap:8px}
.fs__panel p{margin:0;font-size:.86rem}
.fs__flags{margin:0;padding-left:18px;font-size:.84rem;color:var(--fg)}
.fs__ok{margin:0;font-size:.86rem;color:#2f7d4f}
.fs__checks{margin:0;padding:0;list-style:none;display:grid;gap:4px;max-height:340px;overflow:auto}
.fs__ck{font-size:.83rem;line-height:1.4;padding:5px 8px;border-left:3px solid var(--line-2);background:color-mix(in srgb,var(--fg) 3%,var(--card))}
.fs__ck--error{border-left-color:#c0392b}
.fs__ck--warn{border-left-color:#d68910}
.fs__ck--info{border-left-color:#5d8aa8}
.fs__sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.fs__sheet{margin:0;display:grid;gap:4px}
.fs__sheet svg{width:100%;height:auto;border:1px solid var(--line-2);background:color-mix(in srgb,var(--fg) 3%,var(--card))}
.fs__sh{fill:none;stroke:var(--line-2);stroke-width:8}
.fs__pt{fill:color-mix(in srgb,var(--jw-accent) 30%,transparent);stroke:var(--fg);stroke-width:4}
.fs__pt--on{fill:color-mix(in srgb,var(--jw-accent) 70%,transparent)}
.fs__sheet text{fill:var(--fg)}
.fs__sheet figcaption{font:500 .64rem/1.2 var(--f-mono);color:var(--fg-2)}
.fs__tbl{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:8px}
.fs__tbl td{border-top:1px solid var(--line);padding:5px 4px;vertical-align:top}
.fs__fm{font:600 .68rem/1.3 var(--f-mono);white-space:nowrap}
.fs__fm--implemented{color:#2f7d4f}
.fs__fm--rule-dependent{color:#b9770e}
.fs__fm--not{color:#c0392b}
.fs__grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.fs__nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.fs__gate{display:grid;gap:12px;justify-items:start;padding:24px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
/* the quotation per sq ft (22 Oct 2026) and the Start step's easy form */
.fs__area{margin-top:18px;padding:14px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.fs__area h4{margin-top:0}
.fs__inl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fs__inl input{width:72px;min-width:0;padding:4px 6px}
.fs__area td small{display:block;font:inherit;font-size:.72rem;color:var(--ink-3);line-height:1.3;margin-top:2px}
.fs__start{display:grid;gap:14px}
.fs__start .pb__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fs__outs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.fs__out{display:grid;gap:6px;align-content:start;padding:12px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.fs__out b{font-size:.95rem}
.fs__out small{color:var(--ink-3);line-height:1.35}
/* the design tools under a range's hero (V5, 25 Oct 2026): the links wrap on a phone instead of sitting on each other */
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;grid-auto-flow:dense}
.clips__item{margin:0;border-radius:10px;overflow:hidden;background:#111}
.clips__item video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;cursor:pointer;background:#111}
.clips__item--tall{grid-row:span 2}.clips__item--tall video{aspect-ratio:9/16;height:100%}
.clips__item figcaption{padding:8px 12px;font-size:13px;line-height:1.4;color:#fff;background:#111}
.clips__note{margin:14px 0 0;font-size:13px;color:var(--ink-2,#5a564f)}
@media (max-width:600px){.clips{grid-template-columns:1fr 1fr;gap:10px}.clips__item figcaption{font-size:12px;padding:6px 8px}}
.fs__look-wants{display:block;margin:4px 0 8px;color:var(--ink-2,#5a564f);font-size:12px;line-height:1.4}
.hero__tools{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin:14px 0 0}
.hero__tools .label{margin:0}
/* the site's link-arrow carries a 12 px tap pad (padding-top with a matching negative margin): in a wrapping row that
   pad sat on the row above, so the links overlapped on a phone (scan, 25 Oct 2026); no pad here */
.hero__tools .link-arrow{display:inline-flex;white-space:nowrap;margin:0;padding-top:0}
/* the facade from a picture and "how it is made" (V5, 25 Oct 2026) */
.fs__look{display:grid;gap:10px}
.fs__look-pick{justify-self:start;cursor:pointer}
.fs__look-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:12px;align-items:start}
.fs__look-img{width:100%;height:auto;border-radius:var(--jw-radius);border:1px solid var(--line-2)}
.fs__look-cands{display:grid;gap:8px}
.fs__look-cand{display:grid;gap:4px;padding:10px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.fs__look-cand.is-on{border-color:var(--accent,#b8862b);box-shadow:inset 0 0 0 1px var(--accent,#b8862b)}
.fs__look-cand ul{margin:0;padding-left:18px;font-size:.85rem;color:var(--ink-3)}
.fs__look-cand small{color:var(--ink-3)}
.fs__look-cand .btn{justify-self:start}
@media (max-width:600px){.fs__look-row{grid-template-columns:1fr}}
.fs__know{display:grid;gap:12px;padding:4px 2px 12px}
.fs__know-steps{display:grid;gap:12px;margin:0;padding-left:0;list-style:none}
.fs__know-steps li{display:grid;grid-template-columns:1fr minmax(160px,320px);gap:14px;align-items:start;padding:12px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.fs__know-steps li img{width:100%;height:auto;border-radius:var(--jw-radius);object-fit:cover}
.fs__know-txt p{margin:4px 0}
.fs__know-txt small{color:var(--ink-3)}
@media (max-width:700px){.fs__know-steps li{grid-template-columns:1fr}}
.fs__wins{display:grid;gap:6px}
.fs__win{display:grid;grid-template-columns:auto repeat(4,minmax(64px,1fr)) auto;gap:6px;align-items:center}
.fs__win input{min-width:0;width:100%}
/* the row's boxes take the same dark / light field look as every .pb__field box (owner, 22 Oct 2026: white boxes with white
   text on the dark theme) */
.fs__win input,.fs__win select,.fs__inl input{padding:8px 9px;border:1px solid var(--line-2);background:var(--card);color:var(--fg);font:500 .95rem/1.2 var(--f-body);border-radius:var(--jw-radius)}
.fs__win input:disabled{opacity:.45}
.fs__win--front{grid-template-columns:minmax(90px,1fr) minmax(80px,1fr) auto auto}
.fs__win input::placeholder{color:var(--ink-3)}
/* the customer's "Start your facade" page (22 Oct 2026) */
.fst{max-width:980px}
.fst__form{display:grid;gap:14px}
.fst__form .pb__grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.fst__done{display:grid;gap:14px}
.fst__svg svg{width:100%;height:auto;max-height:440px;display:block;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:#fff}
.fst .fs__win{grid-template-columns:auto repeat(4,minmax(60px,1fr)) auto}
/* these forms have 3-5 columns: the two-column "no lone last field" rule must not stretch their last field */
@media (min-width:521px){.fst__form .pb__grid>:last-child:nth-child(odd):not(:first-child),.fs__start .pb__grid>:last-child:nth-child(odd):not(:first-child){grid-column:auto}}
@media (max-width:600px){.fst .fs__win,.fs__win{grid-template-columns:1fr 1fr 1fr;row-gap:4px}.fst .fs__win select,.fs__win select{grid-column:1/-1}}
@media (max-width:980px){.fs__main{grid-template-columns:1fr}.fs__stage{position:static;order:-1}}
/* Facade Studio phase 2: layout comparison, frame */
.fs__cands{overflow-x:auto}
.fs__cands td small{display:block;font:500 .64rem/1.3 var(--f-mono);color:var(--fg-2)}
.fs__cands th{font:600 .64rem/1.2 var(--f-mono);text-align:left;color:var(--fg-2);padding:4px}
.fs__cand--now td{background:color-mix(in srgb,var(--jw-accent) 12%,transparent)}
.fs__tag{font:600 .62rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#b9770e;border:1px solid currentColor;padding:2px 6px;margin-left:6px;vertical-align:middle}
/* Facade Studio phase 3: elevations, plan */
.fs__elevs{display:flex;flex-wrap:wrap;gap:6px}
.fs__elevs button{min-height:36px;padding:4px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 .8rem/1.2 var(--f-body);cursor:pointer}
.fs__elevs button[aria-pressed="true"]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 16%,var(--card))}
.fs__elevs .fs__add{border-style:dashed}
.fs__plan{width:100%;max-height:200px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:color-mix(in srgb,var(--fg) 3%,var(--card))}
.fs__plan text{fill:var(--fg);font-family:var(--f-mono)}
.fs__wall{stroke:var(--fg-2);stroke-linecap:round}
.fs__wall--on{stroke:var(--jw-accent)}
.fs__cn{fill:#5d8aa8}
.fs__cn--out{fill:#d68910}
.fs__seq{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.86rem;line-height:1.45}
.fs__sel{min-height:34px;padding:2px 8px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 .78rem/1 var(--f-body)}
.fs__crit td{color:#c0392b}
.fs__tbl td small{display:block;font:500 .64rem/1.3 var(--f-mono);color:var(--fg-2)}
.fs__diff th{text-align:left;font-size:.7rem;color:var(--fg-2);padding:4px;border-bottom:1px solid var(--line)}
.fs__diff td:first-child{width:28%}
.fs__cmp{margin-top:8px}
.fs__pending{font:600 .62rem/1 var(--f-mono);color:#b9770e;margin-left:6px}
/* the back framing block of the Frame step (21 Oct 2026) */
.fs__framing{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-2);display:grid;gap:10px}
.fs__framing h4{margin:0}
.fs__framing p.fs__pending{margin-left:0;font-size:.72rem;line-height:1.4}
.fs__framing .fs__tbl td{font-size:.78rem}
.acct__pw{border:1px dashed var(--line-2);border-radius:var(--jw-radius);padding:8px 12px;margin-top:10px}
.acct__pw summary{cursor:pointer;font-weight:600}
.acct__pw .field{display:grid;gap:4px;margin:10px 0;max-width:420px}
.acct__pwrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
/* the public menu (14 Oct 2026): Learn & Help in three columns */
.mega__inner--learn{grid-template-columns:repeat(3,1fr)}

/* Perforation Pattern Studio and Louver Planner (refinement brief, 14 Oct 2026) */
.ps,.lv{display:grid;gap:clamp(18px,2.5vw,28px);--ps-metal:#c9ccd0;--ps-hole:#1d1f22;--ps-line:#b07a3c}
.ps__tpls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ps__tpl{position:relative;display:grid;gap:4px;align-content:start;text-align:left;padding:8px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:inherit;cursor:pointer}
.ps__tpl:hover,.ps__tpl:focus-visible{border-color:var(--jw-accent)}
.ps__tpl b{font:600 .9rem/1.2 var(--f-body)}
.ps__tpl small{font-size:.76rem;line-height:1.35;color:var(--fg-2)}
.ps__tpl-use{display:grid;gap:4px;text-align:left;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ps__sw{width:100%;height:auto;aspect-ratio:16/10;display:block;border-radius:2px}
.ps__sw-bg{fill:var(--ps-metal)}
.ps__sw polygon{fill:var(--ps-hole)}
.ps__x{position:absolute;top:4px;right:4px;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;background:var(--card);color:var(--fg);cursor:pointer;line-height:1}
.ps__lib{margin-top:12px}
.ps__lib summary,.ps__more summary{cursor:pointer;font:600 .8rem/1.3 var(--f-mono);letter-spacing:.04em;color:var(--fg-2);padding:6px 0}
.ps__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(18px,2.5vw,32px);align-items:start}
.ps__view{display:grid;gap:12px;min-width:0}
.ps__tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ps__tools .btn{width:100%;justify-content:center;text-align:center}
.ps__snap{display:inline-flex;gap:6px;align-items:center;font:600 .72rem/1 var(--f-mono)}
.ps__snap select{padding:6px;border:1px solid var(--line-2);background:var(--card);color:var(--fg)}
.ps__canvas{width:100%;display:flex;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:var(--jw-radius);padding:8px;touch-action:none}
.ps__canvas canvas{display:block;max-width:100%}
.ps__hint{margin:0;font-size:.85rem;color:var(--fg-2)}
.ps__res{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0}
.ps__res div{padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card)}
.ps__res dt{font:600 .66rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.ps__res dt small{display:block;text-transform:none;letter-spacing:0;font-weight:500}
.ps__res dd{margin:4px 0 0;font:600 1.1rem/1.2 var(--f-body);color:var(--fg)}
@media (max-width:520px){.ps__res>div:last-child:nth-child(odd){grid-column:1/-1}}   /* two columns on phones: no lone figure at the end */
.ps__checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ps__checks li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);font-size:.88rem;line-height:1.45}
.ps__checks li b{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:.8rem;color:#fff;background:#2f7d4f}
.ps__checks li.is-warn{border-color:#d68910}
.ps__checks li.is-warn b{background:#b9770e}
.ps__checks li.is-bad{border-color:#c2410c;background:color-mix(in srgb,#c2410c 8%,var(--card))}
.ps__checks li.is-bad b{background:#c2410c}
.ps__set{display:grid;gap:12px}
.ps__grp{border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);padding:10px 14px;display:grid;gap:12px}
.ps__grp>summary{cursor:pointer;font:600 1rem/1.3 var(--f-body);display:flex;gap:10px;align-items:center}
.ps__grp>summary b{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--jw-accent);color:#fff;font-size:.8rem}
.ps__grp[open]>summary{margin-bottom:4px}
/* inside <details> the grid gap does not reach the items (they sit in the details' own content box): the inline
   checkbox row and the inline help text shared a line and the box sat over the words (page scan, 23 Oct 2026) */
.ps__grp>.pnl__same{display:flex;margin:4px 0}
.ps__grp>small.pb__help{display:block;margin:0 0 4px}
.ps__more{display:grid;gap:10px}
.ps__mask{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px 34px 8px 8px;border:1px dashed var(--line-2);border-radius:var(--jw-radius)}
.ps__mask .ps__x{top:50%;transform:translateY(-50%)}
.ps__go{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lv__fig{margin:0;display:grid;gap:6px}
.lv__fig svg{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--jw-radius)}
.lv__fig figcaption{font-size:.82rem;color:var(--fg-2)}
.lv__two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:start}
.lv__open{fill:color-mix(in srgb,var(--fg) 4%,transparent);stroke:var(--fg-2);stroke-width:.25%;vector-effect:non-scaling-stroke}
.lv__blade{fill:var(--ps-metal);stroke:var(--fg-2);stroke-width:1;vector-effect:non-scaling-stroke}
.lv__sup{stroke:var(--ps-line);stroke-width:1.4;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.lv__wall{stroke:var(--fg-2);stroke-width:2;vector-effect:non-scaling-stroke}
/* the louver drawings' sizes, support channels and the hatched wall (23 Oct 2026) */
.lv__band{stroke:#5d574d;stroke-width:.6;vector-effect:non-scaling-stroke}
.lv__dim line{stroke:var(--fg-2);stroke-width:1;vector-effect:non-scaling-stroke}
.lv__dim text{fill:var(--fg);font-family:var(--f-mono);font-weight:600}
.lv__supch{fill:color-mix(in srgb,var(--ps-line) 18%,transparent);stroke:var(--ps-line);stroke-width:1;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.lv__hatch{stroke:var(--fg-3);stroke-width:1;vector-effect:non-scaling-stroke}
.lv__wallface{stroke:none}
.lv__sec{fill:var(--ps-metal);stroke:var(--fg);stroke-width:1;vector-effect:non-scaling-stroke}
@media (max-width:980px){.ps__main{grid-template-columns:1fr}.ps__tpls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ps__tools{grid-template-columns:repeat(2,minmax(0,1fr))}.lv__two{grid-template-columns:1fr}.ps__mask{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* customer portal (14 Oct 2026, refinement brief): tabs, overview, statuses, revisions, messages */
.acct__tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:12px}
.acct__tabs button{min-height:42px;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 .82rem/1.2 var(--f-body);cursor:pointer}
.acct__tabs button[aria-selected="true"]{border-color:var(--jw-accent);background:var(--jw-accent);color:#fff}
.acct__pane{display:grid;gap:12px}
.acct__h{margin:4px 0 0;font:600 1rem/1.3 var(--f-body)}
.acct__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.acct__tiles button{display:grid;gap:2px;text-align:left;padding:12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);cursor:pointer;font:inherit}
.acct__tiles b{font:600 1.6rem/1 var(--f-body)}
.acct__tiles span{font-size:.8rem;color:var(--fg-2)}
.acct__next,.acct__rows,.acct__threads{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.acct__next li,.acct__rows li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);font-size:.9rem}
.acct__rows li>div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.acct__st{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--line-2);border-radius:999px;font:600 .68rem/1.4 var(--f-mono);letter-spacing:.04em;color:var(--fg-2);width:max-content}
.acct__st--clarify,.acct__st--quoted,.acct__st--issued{border-color:var(--jw-accent);color:var(--fg)}
.acct__st--accepted{border-color:#2f7d4f;color:var(--fg)}
.acct__st--superseded,.acct__st--archived{opacity:.7}
.acct__new{color:var(--jw-accent)}
.acct__revs{font-size:.86rem}
.acct__revs summary{cursor:pointer;color:var(--fg-2)}
.acct__revs ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.acct__revs li{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:space-between}
.acct__revacts{display:inline-flex;gap:10px;align-items:center}
.acct__threadhead{width:100%;display:grid;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);cursor:pointer;font:inherit}
.acct__threadhead span,.acct__threadhead small{font-size:.8rem;color:var(--fg-2)}
.acct__thread{display:grid;gap:10px;padding:10px 0 4px}
.acct__thread ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.acct__thread li{max-width:88%;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.acct__thread li.is-you{justify-self:end;background:color-mix(in srgb,var(--jw-accent) 10%,var(--card))}
.acct__thread li p{margin:4px 0 0;white-space:pre-wrap;font-size:.9rem}
.acct__thread small{font-size:.74rem;color:var(--fg-2)}
.acct__write textarea,.acct__write select{width:100%;padding:9px 10px;border:1px solid var(--line-2);background:var(--card);color:var(--fg);font:inherit;border-radius:var(--jw-radius)}
.acct__write .field{display:grid;gap:4px;margin-bottom:8px}
.acct__designs{display:grid;gap:8px}
.boq__rev{margin:0 0 12px;padding:10px 12px;border:1px dashed var(--jw-accent);border-radius:var(--jw-radius);font-size:.88rem}
@media (max-width:760px){.acct__tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.acct__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.acct__boqacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.acct__boqacts>*{width:100%;justify-content:center;text-align:center}.acct__boqacts>:last-child:nth-child(odd){grid-column:1/-1}}
/* powder coating in the finish picker (14 Oct 2026) */
.fp__powder{display:grid;gap:8px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--jw-radius)}
.fp__prev{display:inline-flex;gap:10px;align-items:center}
.fp__prev input[type=color]{width:56px;height:36px;padding:2px;border:1px solid var(--line-2);background:var(--card)}
.acct__file{display:block;margin-top:4px;font-size:.85rem;overflow-wrap:anywhere}
.acct__file small{color:var(--fg-2)}
/* staff: rows pasted from Excel, checked row by row (14 Oct 2026) */
.boq__paste{flex-basis:100%;margin-top:6px}
.boq__paste summary{cursor:pointer;font-weight:600}
.boq__paste textarea{width:100%;font:12px/1.4 var(--f-mono);min-height:110px}
.boq__pasted{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px;max-height:240px;overflow:auto}
.boq__pasted li{padding:6px 8px;border-left:3px solid var(--line);font-size:.84rem}
.boq__pasted li.is-ok{border-color:#3b8a5a}
.boq__pasted li.is-bad{border-color:#b4532a;background:color-mix(in srgb,#b4532a 8%,var(--card))}
.boq__pasted small{display:block;color:var(--fg-2);overflow-wrap:anywhere}
/* BOQ ready, staff only (14 Oct 2026): prices now and the last price to this customer */
.boq-ready__staff{margin:14px 0;border:1px dashed var(--line-2);border-radius:var(--jw-radius);padding:8px 10px}
.boq-ready__staff summary{cursor:pointer;font:600 .8rem/1.4 var(--f-body);color:var(--fg-2)}
.boq-ready__prices{width:100%;border-collapse:collapse;margin-top:8px;font-size:.82rem;font-variant-numeric:tabular-nums}
.boq-ready__prices th,.boq-ready__prices td{padding:5px 6px;border-bottom:1px solid var(--line-2);text-align:left}
.boq-ready__prices td:nth-child(2),.boq-ready__prices td:nth-child(3){text-align:right;white-space:nowrap}
.boq-ready__prices small{color:var(--fg-2)}
@media (max-width:560px){.boq-ready__prices td:nth-child(4),.boq-ready__prices th:nth-child(4){display:none}}
/* My BOQs: confirm the e-mail to see enquiries and PIs (15 Oct 2026) */
.acct__confirm{border:1px solid var(--jw-accent);border-radius:var(--jw-radius);padding:10px 12px;margin:0 0 12px;background:color-mix(in srgb,var(--jw-accent) 8%,transparent)}
.acct__confirm p{margin:0 0 8px}
/* the whole section: move, copy, hide, remove (15 Oct 2026); the visitors' share button steps aside while editing */
.mcs-edit-arrange{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:1px solid #d3cec4;background:#ebe7df}
.mcs-edit-arrange button{flex:1 1 auto;min-height:36px;padding:6px 10px;border:1px solid #8a857b;border-radius:4px;background:#fff;color:#1c1b19;font:600 13px/1 system-ui,sans-serif;cursor:pointer}
.mcs-edit-arrange button:hover{border-color:#b0833f}
.mcs-edit-arrange button.is-danger{color:#a1271b;border-color:#c98b84}
.mcs-edit-arrange button:disabled{opacity:.5;cursor:wait}
.mcs-editing .sec-share{display:none}
.mcs-edit-arrange button.is-add{flex-basis:100%;color:#6b4a14;border-color:#b0833f}
.mcs-edit-add{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px;border:1px dashed #b0833f;border-radius:4px;background:#fff}
.mcs-edit-add button{min-height:36px}
/* Design samples (16 Oct 2026): profiles, panels and louvers with 2D, 3D, section details and the way to the BOQ.
   Two cards a row on wide screens (6 and 4 samples: no card alone), one on phones; the home page's three in one row. */
.smp{display:grid;gap:28px}
.smp__grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.smp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px) and (max-width:1199px){.smp--teaser .smp__grid{grid-template-columns:1fr}}
@media (min-width:1200px){.smp--teaser .smp__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.smp__card{display:grid;gap:14px;align-content:start;padding:18px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg)}
.smp__card header{display:grid;gap:6px}
.smp__card :is(h2,h3){margin:0;font:600 1.15rem/1.25 var(--f-body);color:var(--fg)}
.smp__card header p{margin:0;font-size:.92rem;line-height:1.5;color:var(--fg-2)}
.smp__tag{justify-self:start;padding:3px 8px;border:1px solid var(--jw-accent);border-radius:999px;font:600 .66rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--jw-accent)}
.smp__figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.smp__fig{margin:0;display:grid;gap:6px;align-content:start;min-width:0}
.smp__fig>svg,.smp__fig .smp__lv,.smp__iso{width:100%;aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:#fff}
.smp__fig>svg{display:block;height:auto;padding:6px;box-sizing:border-box}
.smp__fig figcaption{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.smp__lv{display:grid;grid-template-rows:2fr 1fr;gap:4px;padding:6px;box-sizing:border-box}
.smp__lv svg{width:100%;height:100%;min-height:0}
.smp__blade{border-top:1px dashed var(--line-2)}
.smp__iso{display:grid;place-items:center;overflow:hidden}
.smp__iso img{width:100%;height:100%;object-fit:contain;display:block}
.smp__wait{padding:12px;font-size:.8rem;color:#6b665e;text-align:center}
.smp__dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
/* no row ends with one box alone (owner's rule): an odd last box takes the whole row */
.smp__dl>div:last-child:nth-child(odd){grid-column:1/-1}
.smp__dl div{padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.smp__dl dt{font:600 .64rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.smp__dl dd{margin:3px 0 0;font-size:.88rem;line-height:1.35;color:var(--fg)}
.smp__more{display:grid;gap:10px;font-size:.9rem;line-height:1.5}
.smp__special{margin:0;color:var(--fg)}
.smp__two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.smp__two :is(h3,h4){margin:0 0 6px;font:600 .72rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--jw-accent)}
.smp__two ul,.smp__two ol{margin:0;padding-left:1.2em;color:var(--fg-2)}
.smp__two li+li{margin-top:4px}
.smp__go{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.smp__go .btn{flex:1 1 180px;justify-content:center}
.smp__areas{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:760px){.smp__areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.smp__areas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.smp__area{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);text-decoration:none}
.smp__area:hover,.smp__area:focus-visible{border-color:var(--jw-accent)}
.smp__area b{font:600 1rem/1.2 var(--f-body)}
.smp__area span{font-size:.84rem;line-height:1.4;color:var(--fg-2)}
.smp__gh{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin:0 0 12px;font:600 1.3rem/1.2 var(--f-display,var(--f-body));color:var(--fg)}
.smp__ctas{margin-top:22px}
@media (max-width:520px){.smp__figs{grid-template-columns:1fr}.smp__card{padding:14px}}/* V-groove detail (16 Oct 2026): the strip with its V-cuts, and the round vs sharp corner (the USP) */
.smp__vg{margin:0;display:grid;gap:6px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:#fff}
.smp__vg figcaption{font:500 .7rem/1.35 var(--f-mono);letter-spacing:.03em;color:#5b5750}
.smp__vg svg{display:block;width:100%;height:auto}
.vg__sheet{fill:#c9ccd0;stroke:#4a4741;stroke-width:1.2}
.vg__sheet--sharp{fill:#c9ccd0}
.vg__cut{fill:#c0392b;stroke:#8e2a20;stroke-width:1}
.vg__lead{stroke:#c0392b;stroke-width:1;stroke-dasharray:3 2}
.vg__ring{fill:none;stroke:#c0392b;stroke-width:2}
.vg__lbl{font:600 13px var(--f-mono,monospace);fill:#2a2620}
.vg__note{font:500 11px var(--f-mono,monospace);fill:#6b665e}
.smp__usp{display:grid;gap:16px;align-items:center;padding:18px;border:1px solid var(--jw-accent);border-radius:var(--jw-radius);background:var(--card);color:var(--fg)}
@media (min-width:900px){.smp__usp{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.smp__usp :is(h2,h3){margin:0 0 8px;font:600 1.2rem/1.25 var(--f-body);color:var(--fg)}
.smp__usp p{margin:0 0 10px;font-size:.93rem;line-height:1.55;color:var(--fg-2)}/* sample ID, datasheet and CAD links (16 Oct 2026) */
.smp__ids{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.smp__code{font:700 .78rem/1.2 var(--f-mono);letter-spacing:.05em;color:var(--jw-accent)}
.smp__get{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.smp__get button.link-arrow{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 2px;font:inherit;color:inherit;cursor:pointer}
.smp__get button.link-arrow:disabled{opacity:.6;cursor:wait}
.smp__gget{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.smp__gget .btn{flex:1 1 260px;justify-content:center}
.smp__free{font-size:.9rem}/* "Make it yours": the BOQ builder and free registration (16 Oct 2026) */
.smp__ben{display:grid;gap:14px;padding:18px;border:1px solid var(--line-2);border-left:4px solid var(--jw-accent);border-radius:var(--jw-radius);background:var(--card);color:var(--fg)}
@media (min-width:900px){.smp__ben{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center}}
.smp__ben :is(h2,h3){margin:0 0 6px;font:600 1.15rem/1.25 var(--f-body);color:var(--fg)}
.smp__ben p{margin:0;font-size:.9rem;line-height:1.5;color:var(--fg-2)}
.smp__ben ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.88rem;line-height:1.4;color:var(--fg-2)}
.smp__ben li b{color:var(--fg)}
.smp__benbtns{display:flex;flex-wrap:wrap;gap:10px}
.smp__benbtns .btn{flex:1 1 170px;justify-content:center}
/* Façade and ceiling solutions (16 Oct 2026): a façade card spans the grid; its sheets are the Facade Studio drawings; a ceiling shows how it hangs */
.smp__card--wide{grid-column:1/-1}
.smp__sheets{display:grid;gap:12px;min-height:120px}
@media (min-width:900px){.smp__sheets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.smp__sheet{margin:0;display:grid;gap:6px;align-content:start;min-width:0}
.smp__sheets>.smp__wait{color:var(--fg-2)}
.smp__sheet>div{border:1px solid var(--line-2);border-radius:var(--jw-radius);background:#fff;overflow:hidden}
.smp__sheet svg{display:block;width:100%;height:auto}
.smp__sheet figcaption,.smp__hang figcaption{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.smp__hang{margin:0;display:grid;gap:6px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:#fff}
.smp__hang svg{display:block;width:100%;height:auto}
.smp__hang figcaption{color:#5b5750}
.smp__note{margin:8px 0 0;font-size:.8rem;line-height:1.45;color:var(--fg-2)}
/* Bending steps for the factory (16 Oct 2026, staff only): small, clear step pictures with the punch and die */
.bst{margin:16px 0 0;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);padding:12px 14px}
.bst summary{cursor:pointer;font-weight:600;color:var(--fg)}
.bst summary small{margin-left:8px;font:500 .72rem/1.3 var(--f-mono);letter-spacing:.03em;color:var(--fg-2)}
.bst__lead{margin:10px 0;font-size:.88rem;line-height:1.5;color:var(--fg-2)}
.bst__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.bst__box{margin:0;display:grid;gap:6px;align-content:start;padding:6px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:#fff;color:#1c1b19}
.bst__box--warn{border-color:#c0392b}
.bst__box svg{display:block;width:100%;height:auto}
.bst__box figcaption{display:grid;gap:2px;font-size:.74rem;line-height:1.35}
.bst__box figcaption b{font-size:.8rem}
.bst__turn,.bst__warn{color:#c0392b;font-weight:600}
.bst__note{margin:10px 0 0;font-size:.76rem;line-height:1.45;color:var(--fg-2)}
/* 16 Oct 2026 recheck: a façade drawing opens full size (small on a phone) */
.smp__full{margin-left:6px;padding:0;border:0;background:none;font:inherit;color:var(--jw-accent);text-decoration:underline;cursor:pointer}
/* Unit converter (16 Oct 2026): mm / gauge / inch / feet, both ways */
.uc{display:grid;gap:18px}
.uc__card{display:grid;gap:12px;padding:18px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg)}
.uc__card :is(h2,h3){margin:0;font:600 1.15rem/1.25 var(--f-body);color:var(--fg)}
.uc__row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.uc__field{display:grid;gap:4px;flex:1 1 180px;min-width:0}
.uc__field--short{flex:0 1 110px}
.uc__field span{font:600 .7rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.uc__field input,.uc__field select{width:100%;box-sizing:border-box;min-height:44px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--bg);color:var(--fg);font:500 1.05rem/1.2 var(--f-body)}
.uc__field input:focus-visible,.uc__field select:focus-visible{outline:2px solid var(--jw-accent);outline-offset:1px}
.uc__eq{flex:0 0 auto;align-self:center;padding-top:18px;font-size:1.3rem;color:var(--jw-accent)}
@media (max-width:520px){.uc__eq{display:none}.uc__field{flex-basis:100%}.uc__field--short{flex-basis:100%}}
.uc__out{margin:0;font-size:.95rem;line-height:1.5;color:var(--fg)}
.uc__ok{color:var(--fg-2)}
.uc__warn{color:#c2410c}
.uc__table{overflow-x:auto}
.uc__table table{width:100%;border-collapse:collapse;font-size:.88rem}
.uc__table th,.uc__table td{padding:7px 8px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.uc__table thead th{font:600 .66rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.uc__table tbody th small{display:block;font-weight:400;font-size:.76rem;color:var(--fg-2)}
.uc__table tr.is-on{background:color-mix(in srgb,var(--jw-accent) 10%,transparent)}
.uc__link{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--jw-accent);text-decoration:underline;cursor:pointer}
.uc__note{margin:0;font-size:.8rem;line-height:1.45;color:var(--fg-2)}
/* Design Tools menu with a third column, Ready designs (16 Oct 2026) */
.mega__inner--tools{grid-template-columns:repeat(3,1fr) minmax(220px,.9fr)}
/* a sample with two patterns (PN-02 even / fading) */
.smp__alt{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.smp__alt span{font:600 .66rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2);margin-right:4px}
.smp__alt button{min-height:36px;padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:500 .85rem/1.2 var(--f-body);cursor:pointer}
.smp__alt button[aria-checked=true]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 14%,transparent);font-weight:600}
/* thickness converter, one direction at a time with a real swap button (17 Oct 2026, owner: "gauge interchange is not working
   and make it user friendly") */
.uc__metal{display:flex;flex-wrap:wrap;gap:6px}
.uc__metal button{min-height:40px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);color:var(--fg-2);font:500 .85rem/1.2 var(--f-body);cursor:pointer}
.uc__metal button[aria-checked="true"]{border-color:var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 16%,var(--bg));color:var(--fg);font-weight:600}
.uc__swap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.uc__side{display:grid;gap:8px;align-content:start;padding:14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--bg);min-width:0}
.uc__res{background:color-mix(in srgb,var(--jw-accent) 9%,var(--bg));border-color:color-mix(in srgb,var(--jw-accent) 45%,var(--line-2))}
.uc__lbl{font:600 .7rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.uc__big{width:100%;box-sizing:border-box;min-height:52px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 1.5rem/1.2 var(--f-body)}
.uc__big:focus-visible{outline:2px solid var(--jw-accent);outline-offset:1px}
.uc__val{font:700 1.9rem/1.15 var(--f-body);color:var(--fg)}
.uc__val--none{font-size:1.05rem;font-weight:600;color:var(--fg-2)}
.uc__res small{font-size:.86rem;color:var(--fg-2)}
.uc__swapbtn{align-self:center;width:52px;height:52px;border:1px solid var(--jw-accent);border-radius:50%;background:var(--jw-accent);color:#0d0d0c;font-size:1.5rem;line-height:1;cursor:pointer;transition:transform .2s}
.uc__swapbtn:hover{transform:rotate(180deg)}
.uc__swapbtn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.uc__chips{display:flex;flex-wrap:wrap;gap:5px}
.uc__chips button{min-height:34px;padding:4px 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg-2);font:500 .8rem/1.2 var(--f-mono);cursor:pointer}
.uc__chips button[aria-pressed="true"]{border-color:var(--jw-accent);color:var(--fg)}
@media (max-width:640px){.uc__swap{grid-template-columns:1fr}.uc__swapbtn{justify-self:center;transform:rotate(90deg)}.uc__swapbtn:hover{transform:rotate(270deg)}}
/* RAL colour generator (17 Oct 2026, owner: "add all colour generator in all pvd and powder coating") */
.ralp{display:grid;gap:8px}
.ralp__bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ralp__bar input[type=search],.ralp__bar select{flex:1 1 160px;min-width:0;min-height:40px;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--bg);color:var(--fg);font:500 .88rem/1.2 var(--f-body)}
.ralp__custom{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 10px;border:1px dashed var(--line-2);border-radius:var(--jw-radius);font:600 .72rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-2);cursor:pointer}
.ralp__custom input{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.ralp__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;max-height:300px;overflow:auto;padding:2px}
.ralp__grid button{display:grid;gap:2px;justify-items:start;padding:5px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);text-align:left;cursor:pointer}
.ralp__grid button[aria-checked="true"]{border-color:var(--jw-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--jw-accent) 40%,transparent)}
.ralp__grid i{width:100%;height:30px;border-radius:3px;border:1px solid rgba(0,0,0,.12)}
.ralp__grid b{font:600 .74rem/1.1 var(--f-mono)}
.ralp__grid small{font-size:.66rem;line-height:1.15;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ralp__note,.ralp__none{margin:0;font-size:.76rem;line-height:1.4;color:var(--fg-2)}
/* coating visualizer (17 Oct 2026) */
.cv{display:grid;gap:16px}
.cv__tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cv__tabs button{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);text-align:left;cursor:pointer}
.cv__tabs button[aria-selected="true"]{border-color:var(--jw-accent);box-shadow:inset 0 -3px 0 var(--jw-accent)}
.cv__tabs b{font:600 1rem/1.2 var(--f-body)}.cv__tabs small{font-size:.78rem;color:var(--fg-2)}
.cv__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
.cv__controls{display:grid;gap:12px;min-width:0}
.cv__group{margin:0;padding:12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);display:grid;gap:8px;min-width:0}
.cv__group legend{padding:0 4px;font:600 .7rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2)}
.cv__sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.cv__sw button{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:500 .82rem/1.2 var(--f-body);cursor:pointer;text-align:left}
.cv__sw button[aria-checked="true"]{border-color:var(--jw-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--jw-accent) 40%,transparent)}
.cv__sw i{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.cv__opts{display:flex;flex-wrap:wrap;gap:6px}
.cv__opts button{min-height:38px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--fg-2);font:500 .82rem/1.2 var(--f-body);cursor:pointer}
.cv__opts button[aria-pressed="true"]{border-color:var(--jw-accent);color:var(--fg);background:color-mix(in srgb,var(--jw-accent) 14%,var(--card))}
.cv__hint,.cv__rule{margin:0;font-size:.82rem;line-height:1.45;color:var(--fg-2)}
.cv__rule{padding:8px 10px;border-left:3px solid var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 7%,transparent)}
.cv__stage{margin:0;display:grid;gap:10px;position:sticky;top:90px}
.cv__stage svg{width:100%;height:auto;border-radius:var(--jw-radius);border:1px solid var(--line-2)}
.cv__stage figcaption{display:grid;gap:8px;font-size:.82rem;color:var(--fg-2)}
.cv__h{margin:0;font:600 1.1rem/1.3 var(--f-body);color:var(--fg)}
.cv__compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cv__compare button{display:grid;gap:4px;padding:6px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);font:600 .8rem/1.2 var(--f-body);cursor:pointer}
.cv__compare button[aria-pressed="true"]{border-color:var(--jw-accent)}
.cv__compare svg{width:100%;height:auto;border-radius:3px}
@media (max-width:900px){.cv__grid{grid-template-columns:1fr}.cv__stage{position:static;order:-1}}
@media (max-width:520px){.cv__tabs{grid-template-columns:1fr}}
/* the drawings we make (17 Oct 2026, design & development) */
.dwt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dwt__card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;padding:14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card)}
.dwt__card{align-items:start}
.dwt__fig{margin:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:stretch;aspect-ratio:4/3;padding:8px;box-sizing:border-box;border-radius:var(--jw-radius);background:#fbfaf7;overflow:hidden}
.dwt__fig>svg,.dwt__fig>img{width:100%;height:100%;min-height:0;object-fit:contain}
.dwt__fig .smp__lv,.dwt__fig .smp__iso{width:auto;height:auto;min-height:0;aspect-ratio:auto;border:0;padding:0;background:none}
.dwt__fig .smp__lv{grid-template-rows:2fr 1fr}
.dwt__text{display:grid;gap:8px;align-content:start}
.dwt__text :is(h2,h3){margin:0;font:600 1.05rem/1.3 var(--f-body);color:var(--fg)}
.dwt__text p{margin:0;font-size:.88rem;line-height:1.5;color:var(--fg-2)}
.dwt__text dl{margin:0;display:grid;gap:3px}
.dwt__text dl div{display:grid;grid-template-columns:90px 1fr;gap:6px;font-size:.78rem;padding:3px 0;border-bottom:1px solid var(--line)}
.dwt__text dt{font:600 .66rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-2)}
.dwt__text dd{margin:0;color:var(--fg)}
@media (max-width:1100px){.dwt{grid-template-columns:1fr}}
@media (max-width:620px){.dwt__card{grid-template-columns:1fr}}
/* the procedure as a flow and a timeline (17 Oct 2026, SOP) */
.pflow__strip{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;counter-reset:none}
.pflow__strip li{position:relative;margin:0}
.pflow__strip li:not(:last-child)::after{content:'';position:absolute;right:-5px;top:22px;width:6px;height:2px;background:var(--jw-accent)}
.pflow__strip a{display:grid;justify-items:center;gap:3px;padding:8px 3px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card);color:var(--fg);text-decoration:none;text-align:center;height:100%;box-sizing:border-box}
.pflow__strip a:hover{border-color:var(--jw-accent)}
.pflow__strip li.is-hold a{border-color:var(--jw-accent);box-shadow:inset 0 -3px 0 var(--jw-accent)}
.pflow__ico{font-size:1.15rem;line-height:1;color:var(--jw-accent)}
.pflow__strip b{font:600 .7rem/1 var(--f-mono);color:var(--fg-2)}
.pflow__strip span:last-child{font-size:.72rem;line-height:1.2}
.pflow__key{margin:0 0 18px;font-size:.8rem;color:var(--fg-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pflow__dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2);margin-left:10px}
.pflow__dot--hold{border-color:var(--jw-accent);background:var(--jw-accent);margin-left:0}
.pflow__lanes{display:grid;grid-template-columns:1fr 220px 1fr;gap:16px;margin-bottom:6px;font:600 .7rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pflow__lanes span:nth-child(1){text-align:right}.pflow__lanes span:nth-child(2){text-align:center}
.pflow__phase{margin:0 0 18px}
.pflow__ph{display:grid;gap:2px;padding:10px 14px;margin-bottom:10px;border-left:4px solid var(--jw-accent);background:color-mix(in srgb,var(--jw-accent) 8%,transparent)}
.pflow__ph h3{margin:0;font:600 1rem/1.3 var(--f-body);color:var(--fg)}.pflow__ph p{margin:0;font-size:.86rem;color:var(--fg-2)}
.pflow__tl{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.pflow__tl::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line-2);transform:translateX(-1px)}
.pflow__tl li{position:relative;display:grid;grid-template-columns:1fr 220px 1fr;grid-template-areas:"you mid we";gap:6px 16px;margin:0}
.pflow__mid{grid-area:mid;display:grid;gap:6px;align-content:start;grid-template-areas:"node" "get"}
.pflow__you{grid-area:you;text-align:right}.pflow__we{grid-area:we}.pflow__node{grid-area:node}.pflow__get{grid-area:get}
.pflow__you,.pflow__we{padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card)}
.pflow__you p,.pflow__we p,.pflow__get p{margin:0;font-size:.86rem;line-height:1.45;color:var(--fg)}
.pflow__none{color:var(--fg-2)!important;font-style:italic}
.pflow__lbl{display:block;margin-bottom:3px;font:600 .64rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pflow__node{position:relative;z-index:1;display:grid;justify-items:center;gap:4px;padding:10px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--bg);text-align:center}
.pflow__tl li.is-hold .pflow__node{border-color:var(--jw-accent)}
.pflow__num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card);border:2px solid var(--jw-accent);color:var(--fg);font:700 .85rem/1 var(--f-mono)}/* a bronze ring, the number in the text colour: readable in both themes (light-theme check, 17 Oct 2026) */
.pflow__node h4{margin:0;font:600 .95rem/1.25 var(--f-body);color:var(--fg)}
.pflow__hold{font:600 .62rem/1.2 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--jw-accent)}
.pflow__get{position:relative;z-index:1;padding:8px 10px;border-radius:var(--jw-radius);background:color-mix(in srgb,var(--jw-accent) 12%,var(--bg));border:1px dashed var(--jw-accent);text-align:center}
.pflow__who{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.pflow__who>div{padding:14px;border:1px solid var(--line-2);border-radius:var(--jw-radius);background:var(--card)}
.pflow__who h3{margin:0 0 8px;font:600 1rem/1.3 var(--f-body)}
.pflow__who ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.88rem}
@media (max-width:980px){.pflow__strip{grid-template-columns:repeat(6,minmax(0,1fr))}.pflow__strip li:nth-child(6n)::after{display:none}}
@media (max-width:760px){
  .pflow__strip{grid-template-columns:repeat(3,minmax(0,1fr))}.pflow__strip li::after{display:none}
  .pflow__lanes{display:none}.pflow__tl::before{left:15px}
  .pflow__tl li{grid-template-columns:1fr;grid-template-areas:"node" "you" "we" "get";padding-left:34px}
  .pflow__mid{display:contents}
  .pflow__you{text-align:left}.pflow__node{justify-items:start;text-align:left}.pflow__get{text-align:left}
  .pflow__who{grid-template-columns:1fr}
}

/* fresh site (17 Oct 2026): the two catalogue links under the Ready designs list in the Products panel */
.mega__col>.link-arrow{display:block;margin-top:10px}.mega__col>.link-arrow+.link-arrow{margin-top:6px}

/* fresh site (17 Oct 2026): a card with a picture on top, edge to edge (the design tools hub) */
.capcard--pic{overflow:hidden}
.capcard__pic{display:block;width:calc(100% + 2 * var(--s-5));max-width:none;margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-2);aspect-ratio:16/10;height:auto;object-fit:cover;object-position:top center;border-bottom:1px solid var(--rule);background:var(--surface-2,#111)}
.capcard--pic:hover .capcard__pic{filter:brightness(1.06)}

/* fresh site (17 Oct 2026): phones scroll less. Picture cards become compact rows (a square photo beside the words);
   the range tiles go two to a row, and with an odd count the first tile takes the whole row, so no row ends with one lone tile. */
@media (max-width: 600px) {
  .capcard--pic { grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 10px; align-items: start; }
  .capcard--pic > .capcard__pic { grid-row: 1 / span 4; grid-column: 1; width: 92px; height: 92px; aspect-ratio: 1; margin: 0; border: 0; border-radius: 6px; object-position: center; }
  .capcard--pic > :not(.capcard__pic) { grid-column: 2; }
  .capcard--pic p { font-size: 13.5px; line-height: 1.45; }
  .grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .grid--tiles > .divcard .card__media { aspect-ratio: 4 / 5; }
  .grid--tiles > .divcard .card__title { font-size: 15px; }
  /* the wide-screen rules that centre a short last row place cards by column: not on two columns */
  .grid--tiles > * { grid-column: auto !important; }
  .grid--tiles > :first-child:nth-last-child(odd) { grid-column: 1 / -1 !important; }
  .grid--tiles > :first-child:nth-last-child(odd) .card__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  /* product cards two to a row on phones (fresh site, 17 Oct 2026): smaller words, the badges wrap */
  .grid--tiles > .card:not(.divcard) .card__body { padding: 10px; }
  .grid--tiles > .card:not(.divcard) .card__title { font-size: 14px; line-height: 1.25; }
  .grid--tiles > .card:not(.divcard) .card__meta, .grid--tiles > .card:not(.divcard) .card__cat { font-size: 10.5px; }
}

/* a drawing waiting for the screen (Near, 17 Oct 2026): the same shape and frame as the drawing, so nothing moves */
.smp__near{display:block;width:100%;background:#fff;border:1px solid var(--line-2);border-radius:var(--jw-radius)}
.dwt__fig>.smp__near{border:0;background:transparent}

/* staff mode said plainly, with a switch to see the builder as a customer (owner, 17 Oct 2026) */
.bs__staff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--jw-accent) 70%,var(--line-2));border-left-width:4px;border-radius:var(--jw-radius);background:color-mix(in srgb,var(--jw-accent) 8%,var(--card))}
.bs__staff p{margin:0;flex:1 1 320px;font-size:.92rem;line-height:1.5;color:var(--fg)}
.bs__staff.is-customer{border-color:var(--line-2);border-left-color:var(--fg-2);background:var(--card)}
@media (max-width:640px){.bs__staff .btn{flex:1 1 auto;justify-content:center}}

/* staff papers, each its own file (owner, 17 Oct 2026) */
.boq-papers{margin:0 0 14px;padding:12px;border:1px solid color-mix(in srgb,var(--jw-accent) 55%,var(--line-2));border-radius:var(--jw-radius);background:color-mix(in srgb,var(--jw-accent) 5%,var(--card))}
.boq-papers__head{margin:0 0 10px;font-size:.9rem;color:var(--fg)}
.boq-ready__also{grid-column:1/-1;margin:4px 0 0;font-size:.82rem;color:var(--fg-3)}
.boq-ready__wa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:12px 0 0}
.boq-ready__wa small{flex:1 1 100%;font-size:.8rem;color:var(--fg-3)}
.boq-file--dxf i{background:#1f5fa8}
.boq-file--grid{cursor:default}
.boq-file--grid:hover{transform:none}
.boq-file--grid select{margin-left:4px;padding:1px 4px;font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line-2);border-radius:3px}
.boq-file__go{font:600 .7rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--jw-accent);background:none;border:0;padding:8px 0;cursor:pointer}
.boq-file[disabled]{opacity:.55;cursor:wait;transform:none}

/* tap targets of 24 px and more (28 Oct 2026 check at 768 px): "+ windows" / "+ a door" and the gauge buttons in help
   lines (18-23 px), "All films on YouTube" (20 px); the hit area grows, the text stays where it was */
.pb__help .boq__link,.fs__note .boq__link,.uc__link{padding-block:4px;margin-block:-4px}
.block__head>a.label{display:inline-flex;align-items:center;min-height:24px}
/* panel bending plan and corner gap (owner, 29 Oct 2026: "double bending planing and corner gap is missing") */
.pbp__passes{margin:.5rem 0 .6rem;padding-left:1.3rem;display:grid;gap:.55rem}
.pbp__passes li span{display:block;font-size:.88rem;color:var(--fg-2)}
.pbp__passes .pbp__order{font:500 .78rem/1.5 var(--f-mono);color:var(--fg-1,inherit);overflow-wrap:anywhere}
.ps__gap{max-width:30rem}
/* the design tools (owner, 29 Oct 2026: "image and button is overlapping"): below 1440 px the floating back-to-top and
   WhatsApp buttons sat over the drawings and fields; the header, the phone bar and the footer still carry them there */
@media (max-width:1439px){body:has(.pb-blk) .floaters{display:none}}
/* 3D only when asked (owner, 29 Oct 2026): the "View in 3D" button over an empty 3D box (View3d.tsx) */
.v3d{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6rem;padding:1rem;text-align:center}
.v3d__go{display:inline-flex;align-items:center;gap:.5rem}
.v3d__go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.v3d small{max-width:30ch;color:var(--fg-2);font-size:.85rem}
/* the design studio's six tabs in one even row on a wide screen, two rows of three below (29 Oct 2026: one studio) */
@media (min-width:1100px){.bs__tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto}.bs__tabs button{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:10px 8px}.bs__tabs button small{display:block}.bs__tabs .bs__boq{align-self:stretch;display:inline-flex;align-items:center}}
@media (min-width:641px) and (max-width:1099px){.bs__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.bs__tabs button{justify-content:center;flex-wrap:wrap;text-align:center}.bs__tabs .bs__boq{grid-column:1/-1;justify-self:end}}
.jw .lab__3d{position:relative}
/* metal swatches as small plates (owner, 29 Oct 2026: "all metal swatches must be redesign and make more real and clear and
   attractive"): the colour and surface come from finishes.ts swatchBg; a lit top edge and a soft shadow make them read as metal */
.fp__chip{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:3px;text-align:center;justify-items:center}.fp__chip small{grid-column:auto}
.fp__tex{grid-row:auto;width:100%;height:40px;margin-bottom:4px;border-radius:4px;border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 2px 5px rgba(0,0,0,.28)}
.pb__sw i{width:100%;height:34px;border-radius:4px;border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 2px 5px rgba(0,0,0,.28)}
.pb__sw{flex-direction:column;justify-content:flex-start;text-align:center;padding:8px;gap:6px}
.jw .pvd__opts i{width:30px;height:21px;border-radius:4px;border-color:rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.3)}
/* the Experience Centre (owner, 29 Oct 2026): pick a shape, a finish and the bends; a length to turn, the section, the uses */
.jw .xc__shapes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.jw .xc__shapes button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line, var(--rule)); border-radius: 999px; background: var(--card, var(--surface)); color: var(--fg, var(--ink)); font: 500 .85rem/1.2 var(--f-body, inherit); cursor: pointer; }
.jw .xc__shapes button svg { width: 22px; height: 22px; flex: none; }
.jw .xc__shapes button.is-on { border-color: var(--accent, #c8973f); background: color-mix(in srgb, var(--accent, #c8973f) 14%, transparent); }
.jw .xc__stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.jw .xc__view { margin: 0; border: 1px solid var(--line, var(--rule)); border-radius: 16px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--fg, #222) 6%, transparent), transparent 70%); padding: 12px; touch-action: none; }
.jw .xc__view .lab__svg3d { width: 100%; height: clamp(260px, 42vw, 460px); display: block; cursor: grab; }
.jw .xc__view figcaption { font: 500 .85rem/1.4 var(--f-body, inherit); color: var(--fg-2, var(--ink-2)); margin-top: 8px; }
.jw .xc__view figcaption small { display: block; color: var(--fg-3, var(--ink-3)); font-size: .78rem; }
.jw .xc__side { display: grid; gap: 14px; }
.jw .xc__section { border: 1px solid var(--line, var(--rule)); border-radius: 16px; padding: 10px; background: var(--card, var(--surface)); }
.jw .xc__section svg { width: 100%; height: auto; max-height: 240px; display: block; }
.jw .xc__looks, .jw .xc__edge { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jw .xc__looks legend, .jw .xc__edge legend { font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3, var(--ink-3)); margin-bottom: 6px; padding: 0; }
.jw .xc__looks button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border: 1px solid var(--line, var(--rule)); border-radius: 999px; background: transparent; color: var(--fg, var(--ink)); font: 500 .76rem/1.2 var(--f-body, inherit); cursor: pointer; }
.jw .xc__looks button i { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.jw .xc__looks button.is-on, .jw .xc__edge button.is-on { border-color: var(--accent, #c8973f); background: color-mix(in srgb, var(--accent, #c8973f) 14%, transparent); }
.jw .xc__edge button { flex: 1 1 180px; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line, var(--rule)); border-radius: 12px; background: transparent; color: var(--fg, var(--ink)); cursor: pointer; }
.jw .xc__edge button small { color: var(--fg-3, var(--ink-3)); font-size: .76rem; }
.jw .xc__go { display: flex; flex-wrap: wrap; gap: 8px; }
.jw .xc__uses { margin-top: clamp(22px, 4vw, 40px); }
.jw .xc__uselist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 16px; }
.jw .xc__uselist li { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--fg, #222) 7%, transparent); font-size: .85rem; }
.jw .xc__products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.jw .xc__product { display: grid; gap: 6px; align-content: start; border: 1px solid var(--line, var(--rule)); border-radius: 16px; overflow: hidden; padding-bottom: 12px; background: var(--card, var(--surface)); color: inherit; text-decoration: none; }
.jw .xc__product img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.jw .xc__pname, .jw .xc__ptext, .jw .xc__product .link-arrow { padding: 0 12px; }
.jw .xc__pname { font: 500 1rem/1.25 var(--f-display, inherit); margin-top: 4px; }
.jw .xc__ptext { font-size: .85rem; color: var(--fg-2, var(--ink-2)); }
@media (max-width: 860px) { .jw .xc__stage { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .jw .xc__shapes button { padding: 6px 10px; font-size: .78rem; } .jw .xc__shapes button svg { width: 18px; height: 18px; } }