/*
 * V3 skin (20 Oct 2026, owner: "perfect new fresh looks and feel"). Loaded after site.css and jw.css, so it only
 * re-points their tokens and reshapes their components: same brand (the MCS mark, charcoal, brushed silver, bronze,
 * Oswald / Work Sans / JetBrains Mono), same dark-by-default with the warm-white light theme, same 4.5:1 contrast.
 * What changes: soft 14 px corners, pill buttons with 44 px targets, picture-first cards that lift on hover, a wider
 * hero photograph, eyebrows with a short bronze rule, a bronze hairline on the header, calmer section rhythm.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  --radius: 14px;
  --radius-lg: 18px;
  --container: 1240px;
  --section-y: clamp(56px, 7vw, 112px);
  --shadow-2: 0 2px 6px rgba(23,23,21,.06), 0 18px 40px -18px rgba(23,23,21,.26);
  --shadow-3: 0 4px 10px rgba(23,23,21,.08), 0 28px 60px -24px rgba(23,23,21,.32);
}
:root:not([data-theme="light"]), :root[data-theme="dark"] {
  --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.8);
  --shadow-3: 0 4px 10px rgba(0,0,0,.45), 0 28px 60px -24px rgba(0,0,0,.9);
}

/* ---------------------------------------------------------------- buttons and small controls */
.btn { border-radius: 999px; min-height: 44px; padding-inline: 22px; }
.btn--sm { min-height: 38px; padding-inline: 18px; }
.btn--block { border-radius: 999px; }
.icon-btn { border-radius: 50%; }
.chip, .pill, .tag { border-radius: 999px; }
.srch__box { border-radius: var(--radius-lg); }
input, select, textarea { border-radius: 10px; }

/* ---------------------------------------------------------------- eyebrow: a short bronze rule before the label */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); flex: none; }
.cta-band .eyebrow::before, .section--dark .eyebrow::before { background: var(--c-bronze-lit); }

/* ---------------------------------------------------------------- header, menus, drawer */
.header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 35%, var(--accent) 65%, transparent 100%); opacity: .9; }
.nav__link { border-radius: 999px; }
.nav__new { border-radius: 999px; }
.mega { border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-3); }
.mega__feature img { border-radius: var(--radius); }
/* three lists and the picture in the Capabilities panel (V3: the company joins the job work) */
@media (min-width: 1100px) { .mega__inner--caps3 { grid-template-columns: repeat(3, 1fr) minmax(220px, .9fr); } }
.mnav__panel { border-radius: var(--radius); }

/* ---------------------------------------------------------------- hero */
.hero__frame { max-width: 680px; }
/* the drawing-sheet corner ticks sat beside the rounded corners (V3 review, 21 Oct 2026): the soft frame carries the picture alone */
.hero__frame::before, .hero__frame::after { display: none; }
.hero__frame img { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; box-shadow: var(--shadow-3); }
.hero__caption { border-radius: 10px; }
.hero__title { letter-spacing: 0; }
.statbar { border-top: 0; background: transparent; }
.statbar__grid { gap: var(--s-3); padding-block: var(--s-4); }
.stat { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
@media (min-width: 760px) { .stat, .statbar__grid .stat:nth-child(2n), .statbar__grid .stat:last-child { border: 1px solid var(--rule); } }

/* ---------------------------------------------------------------- cards: picture first, lift on hover */
.card, .capcard, .dlcard, .apptile, .projcard__shot, .video__frame, .shot img, .swatch__chip, .post-card__media, .split__media a, .fj__panel, .diag, .slider { border-radius: var(--radius); }
.card { box-shadow: var(--shadow-1); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--accent); }
.capcard { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.capcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.capcard--pic .capcard__pic { border-bottom: 0; transition: transform 1.1s var(--ease-out), filter var(--dur) var(--ease); }
@media (min-width: 601px) { .capcard--pic:hover .capcard__pic { transform: scale(1.04); } }
.capcard .h4, .capcard h3 { font-size: 1.05rem; line-height: 1.25; }
.dlcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.dlcard__ext { border-radius: 10px; }
.chain__step { border-radius: var(--radius); }
.chain__step:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.divcard .card__body { border-radius: 0 0 var(--radius) var(--radius); }
.swatch__chip { box-shadow: var(--shadow-1); }

/* ---------------------------------------------------------------- sections and bands */
.section--dark, .cta-band { border-block: 0; }
.cta-band__inner { padding-block: clamp(64px, 9vw, 128px); }
.cta-band h2 { letter-spacing: 0; }
.statement { padding: clamp(64px, 9vw, 140px) 0; }
.crumbs { font-size: var(--t-sm); }
.footer { border-top: 0; position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-bronze-lit) 30%, var(--c-bronze-lit) 70%, transparent); opacity: .7; }

/* ---------------------------------------------------------------- share on every section (owner, 21 Oct 2026: "all section can be shareable")
   The product, range, metal, finish and guide templates carry the share button too (site.css places it inside a positioned section). */
.section, .block { position: relative; }
.section:hover > .sec-share, .block:hover > .sec-share { opacity: 1; }
.block > .sec-share { top: 18px; right: 0; }
/* the heading row keeps clear of the button (the "All Metal Louvers" link sat under it on phones; full recheck, 21 Oct 2026) */
.block > .sec-share ~ .block__head { padding-right: 48px; }
/* a block whose first heading is not in a .block__head (the guides' sections): on a phone the heading's first line ran
   under the button (page scan, 23 Oct 2026) */
@media (max-width: 900px) { .block > .sec-share ~ * h2:first-of-type, .block > .sec-share ~ * h3:first-of-type { padding-right: 48px; } }

/* ---------------------------------------------------------------- printing (23 Oct 2026)
   An architect prints a product or guide page for the site file: the words and pictures on white, no menu, no
   phone bar, no share or edit buttons, no WhatsApp float; cards and pictures not cut across pages. */
@media print {
  html, body { background: #fff !important; color: #111 !important; }
  * { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
  *:not(img):not(svg):not(video):not(picture):not(canvas) { background-color: transparent !important; background-image: none !important; color: #111 !important; border-color: #bbb !important; }
  a { color: #111 !important; text-decoration: underline; }
  .header__actions, .header nav, .header__menu, .header__toggle, .appbar, .fab, .fab--wa, .sec-share, .mcs-editbar, [data-edit-mode], [data-admin-edit], .lightbox, dialog, .cookie, .skip, .pb__pdfsvg,
  button, .btn, .share, [class*="__share"], [class*="share-row"], .pdp__actions, .pdp__share, form { display: none !important; }   /* buttons, share rows and forms do nothing on paper */
  .header { position: static !important; border-bottom: 1px solid #ccc; padding: 6px 0; }
  .header__logo-img--dark { display: none !important; } .header__logo-img--light { display: inline-block !important; }
  .footer__grid > *:not(.footer__brand):not(:last-child) { display: none !important; }   /* the brand and "Talk to MCS" stay: address, phone, e-mail */
  .card, figure, tr, .grid > *, .post-card, .product-card, .swatch { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  img, svg { max-width: 100% !important; filter: none !important; }
  .marquee, [class*="marquee"] { display: none !important; }
  /* the builder's BOQ page printed (23 Oct 2026): the table alone, no steps, sign-in, paste box or progress bar */
  .bsteps, .bs__hello, .bs__resume, .bs__share, .bs__note, .boq__paste, .boq__steps, .boq__bar, .boq__acts, .boq__factor, .boq__fq, .boq__go, .boq__pwhint, .boq-ready__wa, .boq-ready__staff { display: none !important; }
  .bs__page[hidden] { display: none !important; }
  .boq__row, .boq-ready, .boq-papers { break-inside: avoid; page-break-inside: avoid; }
  @page { margin: 14mm; }
}

/* ---------------------------------------------------------------- pictures */
.split__media img, .gallery img, .projcard__shot img { border-radius: var(--radius); }
.lb__img, .lb img { border-radius: 10px; }

/* ---------------------------------------------------------------- motion: decent and short (owner, 21 Oct 2026: "add some animation decent")
   The hero's words and picture rise once on load, one after the other; card pictures ease in a little on hover; arrow links
   nudge; the menu panels fade in. Everything is 0.2-0.7 s, runs once, and is off when the visitor asks for no motion. */
@keyframes v3-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v3-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero__title, .hero__lead, .hero__cta, .hero__frame, .statbar__grid .stat { animation: v3-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__title { animation-delay: .07s; }
  .hero__lead { animation-delay: .14s; }
  .hero__cta { animation-delay: .21s; }
  .hero__frame { animation-delay: .12s; animation-duration: .8s; }
  .statbar__grid .stat:nth-child(1) { animation-delay: .3s; } .statbar__grid .stat:nth-child(2) { animation-delay: .38s; }
  .statbar__grid .stat:nth-child(3) { animation-delay: .46s; } .statbar__grid .stat:nth-child(4) { animation-delay: .54s; }
  .card__media { overflow: hidden; }
  .card__media img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  .card:hover .card__media img { transform: scale(1.04); }
  .link-arrow { transition: color var(--dur) var(--ease), gap .25s ease; }
  .link-arrow:hover { gap: 12px; }
  .mega, .mnav__panel { animation: v3-fade .2s ease both; }
  .sec-share { transition: transform .2s ease, opacity .2s ease; }
  .sec-share:hover { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .card, .capcard, .dlcard, .capcard__pic, .card__media img { transition: none !important; transform: none !important; }
}

/* ---------------------------------------------------------------- My BOQs: the order's progress, approving a quotation (V3) */
.acct__progress { margin: 6px 0 8px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: .92rem; color: var(--ink-2); }
.acct__approve { margin: 10px 0 4px; padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); display: grid; gap: 10px; max-width: 560px; }
.acct__approve .field { display: grid; gap: 4px; }
.acct__approve .field span { font: 500 .78rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------------------------------------------------------------- products: compare up to three (V3) */
.product-grid > li { display: grid; gap: 6px; align-content: start; }
.cmp-btn { justify-self: start; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--field-bd); background: var(--surface); color: var(--ink-2); font: 500 .72rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cmp-btn:hover, .cmp-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.cmpbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 95; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: min(960px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-3); }
.cmpbar__n { font-size: .9rem; color: var(--ink-2); min-width: 0; }
.cmpbar__note { font-size: .8rem; color: var(--err); }
.cmpbar__acts { display: flex; gap: 8px; margin-left: auto; }
.cmpdlg { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.cmpdlg__box { width: min(1100px, 100%); max-height: calc(100vh - 32px); display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); border: 1px solid var(--rule); box-shadow: var(--shadow-3); }
.cmpdlg__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.cmpdlg__head h2 { margin: 0; font-size: var(--t-xl); }
.cmpdlg__scroll { overflow: auto; padding: 0 18px; }
.cmpdlg__tbl { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmpdlg__tbl th, .cmpdlg__tbl td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.cmpdlg__tbl thead th { vertical-align: bottom; }
.cmpdlg__tbl thead img { display: block; width: 160px; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.cmpdlg__tbl tbody th { width: 160px; color: var(--ink-3); font: 500 .74rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.cmpdlg__note { margin: 0; padding: 12px 18px; font-size: .82rem; color: var(--ink-3); border-top: 1px solid var(--rule); }
@media (max-width: 600px) { .cmpbar { bottom: 76px; border-radius: 16px; } .cmpdlg { padding: 8px; } }

/* ---------------------------------------------------------------- the live example (V3) */
.live { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 860px) { .live { grid-template-columns: 1fr; } }
.live__draw { border: 1px solid var(--line-2, var(--rule)); border-radius: var(--radius-lg); background: var(--card, var(--surface)); padding: 14px; min-height: 260px; display: grid; place-items: center; }
.live__draw svg { width: 100%; height: auto; max-height: 420px; }
.live__panel { display: grid; gap: 12px; }
.live__shapes { display: flex; flex-wrap: wrap; gap: 8px; }
.live__shapes button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--field-bd); background: var(--card, var(--surface)); color: var(--fg, var(--ink)); font: 500 .8rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
/* the chosen shape on the light bronze in every theme: 7.8:1 with the dark text (the light theme's deep bronze gave 3.5:1) */
.live__shapes button.is-on { background: var(--c-bronze-lit); border-color: var(--c-bronze-lit); color: #111; }
.live__ctl { display: grid; gap: 4px; font: 500 .74rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2, var(--ink-2)); }
.live__ctl b { color: var(--fg, var(--ink)); font-weight: 600; }
.live__ctl input[type=range] { width: 100%; min-height: 36px; accent-color: var(--jw-accent, var(--accent)); }
.live__ctl select { font: 400 .95rem var(--f-body); text-transform: none; letter-spacing: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--field-bd); background: var(--card, var(--surface)); color: var(--fg, var(--ink)); }
.live__out { margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.live__out div { border: 1px solid var(--line, var(--rule)); border-radius: 12px; padding: 10px 12px; background: var(--card, var(--surface)); }
.live__out dt { font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3, var(--ink-3)); }
.live__out dd { margin: 4px 0 0; font: 500 1.05rem/1.2 var(--f-display); color: var(--fg, var(--ink)); }
.live__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.live__note { margin: 0; font-size: .8rem; color: var(--fg-3, var(--ink-3)); }
/* phones: the three figures stay one row (never a lone card), with less padding */
@media (max-width: 480px) { .live__out { gap: 6px; } .live__out div { padding: 8px 8px; } .live__out dd { font-size: .95rem; } }

/* the sample banner's buttons stack in their column on wide screens, so the three columns stay one row (pill buttons are wider) */
@media (min-width: 900px) { .smp__benbtns { flex-direction: column; align-items: stretch; } .smp__benbtns .btn { flex: 0 0 auto; } }

/* ---------------------------------------------------------------- phones: compact, round, roomy targets */
@media (max-width: 600px) {
  :root { --radius: 12px; --radius-lg: 14px; }
  .capcard--pic > .capcard__pic { border-radius: 8px; }
  .btn { width: auto; }
  .appbar { border-radius: 16px 16px 0 0; }
}