/*
 * 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; } }

/* 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; }
.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 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)}
.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))}
.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-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}
/* 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}
.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(4,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;gap:4px;justify-content:flex-end;align-items:center}
.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) 176px}
.boq__acts .pb__chip{white-space:nowrap}
@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}
.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}}