/*
Theme Name: DMY Pergola
Template: twentytwentyfive
Description: Child theme for dmypergola.com.
Version: 1.0.0
Text Domain: dmy-pergola
*/
/* DMY Pergola — industrial B2B design system. Scoped under .dmy so the parent theme's styles don't leak in. */
:root { --white: #ffffff; --on-dark: #e8efeb; --on-dark-muted: #a9bab2; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --wrap: 1280px; --gutter: clamp(16px, 4vw, 48px); --radius-sm: 8px; --ease: cubic-bezier(.2, .7, .2, 1); --shadow: 0 16px 40px rgba(13, 31, 26, .08); }
/* Neutralise block-theme spacing around our blocks */
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > *, .wp-block-post-content > *, .wp-block-template-part { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-post-content { max-width: none !important; }
.dmy, .dmy * { box-sizing: border-box; }
.dmy { font-family: var(--font-body); font-size: 16px; line-height: 1.65; background: var(--white); -webkit-font-smoothing: antialiased; }
.dmy img, .dmy video { max-width: 100%; height: auto; display: block; }
.dmy a { color: var(--green); text-underline-offset: 3px; }
.dmy a:focus-visible, .dmy button:focus-visible, .dmy summary:focus-visible, .dmy [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.dmy h1, .dmy h2, .dmy h3, .dmy h4, .dmy p, .dmy ul, .dmy ol, .dmy dl, .dmy dd, .dmy figure { margin: 0; }
.dmy ul, .dmy ol { padding: 0; list-style: none; }
.dmy .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* Sections */
.dmy.sec { padding: clamp(72px, 9vw, 132px) 0; }
.dmy.sec--tight { padding: clamp(48px, 5.5vw, 72px) 0; }
.dmy.sec--grey { background: var(--grey-50); }
.dmy.sec--dark { background: var(--green-900); color: var(--on-dark); }
/* Type */
.dmy .display { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.dmy h1.display { font-size: clamp(40px, 6.2vw, 82px); }
.dmy h2.display { font-size: clamp(32px, 4vw, 54px); }
.dmy h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; color: var(--ink); }
.dmy.sec--dark .display, .dmy.sec--dark h3 { color: #fff; }
.dmy .lead { font-size: clamp(16.5px, 1.45vw, 19px); line-height: 1.65; color: var(--muted); max-width: 62ch; }
.dmy.sec--dark .lead { color: var(--on-dark-muted); }
.dmy .muted { color: var(--muted); }
.dmy .display + .lead, .dmy .display + p { margin-top: 16px; }
.dmy .eyebrow { align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; }
.dmy .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--gold); flex: none; }
.dmy.sec--dark .eyebrow { color: var(--gold); }
.dmy .head { margin-bottom: clamp(32px, 4vw, 52px); }
.dmy .head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
/* Buttons */
.dmy .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 30px; font: 600 15px/1.2 var(--font-body); letter-spacing: .01em; text-decoration: none; border: 1.5px solid var(--green); color: #fff; cursor: pointer; }
.dmy .btn svg { width: 18px; height: 18px; flex: none; }
.dmy .btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* Top bar + header */
.dmy-topbar { color: var(--on-dark-muted); font-size: 13px; }
.dmy-topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.dmy-topbar a { color: var(--on-dark); text-decoration: none; }
.dmy-topbar a:hover { color: #fff; text-decoration: underline; }
.dmy-topbar .tb-left, .dmy-topbar .tb-right { display: flex; gap: 22px; align-items: center; }
.dmy-topbar svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--gold); }
@media (max-width: 760px) {
  .dmy-topbar .tb-left span { display: none; }
  .dmy-topbar .tb-right { display: none; }
}
.dmy-header { background: #fff; border-bottom: 1px solid var(--line); }
.dmy-header .bar { display: flex; align-items: center; gap: 28px; min-height: 78px; }
.dmy-header .brand img { width: 150px; height: auto; }
.dmy-header .nav { margin-left: auto; }
.dmy-header .nav > ul { display: flex; gap: 4px; }
.dmy-header .nav li { position: relative; }
.dmy-header .nav a { display: block; padding: 10px 14px; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.dmy-header .nav a:hover { color: var(--green); }
.dmy-header .nav .caret { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-left: 4px; }
.dmy-header .nav .sub { visibility: hidden; opacity: 0; transform: translateY(6px); position: absolute; top: 100%; left: 0; min-width: 240px; padding: 8px 0; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green); box-shadow: var(--shadow); z-index: 60; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
.dmy-header .nav .has-sub:hover > .sub, .dmy-header .nav .has-sub:focus-within > .sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.dmy-header .nav .sub a { padding: 11px 20px; border-bottom: 0; white-space: nowrap; font-weight: 500; }
.dmy-header .nav .sub a:hover, .dmy-header .nav .sub a[aria-current="page"] { background: var(--grey-50); color: var(--green); }
.dmy-header .btn { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.dmy-header .mnav { display: none; margin-left: auto; }
.dmy-header .mnav summary { list-style: none; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.dmy-header .mnav summary::-webkit-details-marker { display: none; }
.dmy-header .mnav summary svg { width: 22px; height: 22px; stroke: var(--green); }
.dmy-header .mnav[open] .panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; box-shadow: var(--shadow); z-index: 60; max-height: 80vh; overflow-y: auto; }
.dmy-header .mnav .panel a { display: block; padding: 13px 0; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.dmy-header .mnav .panel a.subl { padding-left: 18px; font-weight: 500; color: var(--muted); }
.dmy-header .mnav .panel a[aria-current="page"] { color: var(--green); }
.dmy-header .mnav .panel .btn { margin-top: 16px; width: 100%; color: #fff; }
@media (max-width: 960px) {
  .dmy-header .nav, .dmy-header .bar > .btn { display: none; }
  .dmy-header .mnav { display: block; }
  .dmy-header .bar { min-height: 66px; }
  .dmy-header .brand img { width: 124px; }
}
/* Floating contact toolbar */
.dmy-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.dmy-fab a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; padding: 12px 4px; color: #fff; text-decoration: none; font: 600 11px/1.2 var(--font-body); border-bottom: 1px solid rgba(255,255,255,.14); transition: background-color .2s var(--ease); }
.dmy-fab a:last-child { border-bottom: 0; }
.dmy-fab a:hover { background: var(--green-700); }
.dmy-fab svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .dmy-fab { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; }
  .dmy-fab a { flex: 1; width: auto; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.14); padding: 9px 4px; }
  .dmy-footer { padding-bottom: 90px !important; }
}
/* Video hero */
.dmy.vhero { position: relative; min-height: min(86vh, 780px); display: flex; align-items: center; overflow: hidden; background: var(--green-900); color: #fff; }
.dmy.vhero video, .dmy.vhero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dmy.vhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,20,16,.88) 0%, rgba(8,20,16,.62) 45%, rgba(8,20,16,.15) 100%); }
.dmy.vhero .wrap { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 72px; }
.dmy.vhero .eyebrow { color: var(--gold); }
.dmy.vhero h1.display { color: #fff; max-width: 12ch; }
.dmy.vhero .sub { margin-top: 18px; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; color: #fff; max-width: 30ch; line-height: 1.25; }
.dmy.vhero .lead { color: var(--on-dark); margin: 16px 0 32px; max-width: 56ch; }
.dmy .play { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; color: #fff; font: 700 15px/1.2 var(--font-body); cursor: pointer; padding: 6px 4px; }
.dmy .play i { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; color: var(--green-900); }
.dmy .play i svg { width: 18px; height: 18px; margin-left: 3px; }
.dmy .play:hover i { background: #d2b46f; }
@media (prefers-reduced-motion: reduce) {
  .dmy.vhero video { display: none; }
}
/* Trust strip (overlaps hero) */
.dmy .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.dmy .trust-grid li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 28px 22px; border-right: 1px solid var(--line); }
.dmy .trust-grid li:last-child { border-right: 0; }
.dmy .trust-grid svg { width: 22px; height: 22px; }
.dmy .trust-grid b { display: block; font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.dmy .trust-grid span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
@media (max-width: 960px) {
  .dmy .trust-grid { grid-template-columns: 1fr 1fr; }
  .dmy .trust-grid li:nth-child(2) { border-right: 0; }
  .dmy .trust-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .dmy .trust-grid { grid-template-columns: 1fr; }
  .dmy .trust-grid li { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* Partner types */
.dmy .partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dmy .partners li { background: #fff; border: 1px solid var(--line); padding: 30px 26px; border-radius: var(--radius); }
.dmy .partners svg { width: 26px; height: 26px; }
.dmy .partners p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.dmy .partners .tag { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--gold-ink); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 1000px) {
  .dmy .partners { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dmy .partners { grid-template-columns: 1fr; }
}
/* Product center tabs */
.dmy .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 34px; }
.dmy .tabs button { font: 600 15px/1.2 var(--font-body); padding: 13px 22px; min-height: 48px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; cursor: pointer; transition: all .2s var(--ease); }
.dmy .tabs button:hover { border-color: var(--green); }
.dmy .tabs button[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.dmy .js-tabs .tabpanel[hidden] { display: none; }
.dmy .pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.dmy a.pcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.dmy .pcard .ph { aspect-ratio: 4 / 3; background: var(--grey-50); overflow: hidden; }
.dmy .pcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.dmy .pcard .ph.contain img { object-fit: contain; padding: 12px; background: #fff; }
.dmy a.pcard:hover .ph img { transform: scale(1.04); }
.dmy .pcard .bd { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dmy .pcard .model { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.dmy .pcard .more { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 14px; color: var(--green); display: inline-flex; gap: 8px; align-items: center; }
.dmy .pcard .more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.dmy a.pcard:hover .more svg { transform: translateX(4px); }
.dmy .tabpanel .all { margin-top: 26px; text-align: center; }
/* Legacy series cards (products overview / other ranges) */
.dmy .series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dmy .series--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dmy .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.dmy a.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.dmy .card .ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-50); }
.dmy .card .ph img { width: 100%; height: 100%; object-fit: cover; }
.dmy .card .bd { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.dmy .card .bd p { color: var(--muted); font-size: 15px; }
.dmy .card .more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14px; color: var(--green); display: inline-flex; gap: 8px; align-items: center; }
.dmy .card .more svg { width: 16px; height: 16px; }
.dmy .card--row { flex-direction: row; }
.dmy .card--row .ph { flex: 0 0 42%; aspect-ratio: auto; }
.dmy .card--row .bd { justify-content: center; }
.dmy .tag { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
@media (max-width: 960px) {
  .dmy .series { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .dmy .series { grid-template-columns: 1fr; }
}
/* Applications */
.dmy .apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dmy .apps li { position: relative; overflow: hidden; background: var(--green-900); aspect-ratio: 4 / 3; border-radius: var(--radius); }
.dmy .apps li:first-child { grid-row: span 2; aspect-ratio: auto; }
.dmy .apps img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dmy .apps li:hover img { transform: scale(1.05); }
.dmy .apps li > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 22px 20px; background: linear-gradient(transparent, rgba(8,20,16,.9)); }
.dmy .apps h3 { color: #fff; font-size: 22px; }
.dmy .apps p { color: #d6e1dc; font-size: 14.5px; margin-top: 4px; }
@media (max-width: 900px) {
  .dmy .apps { grid-template-columns: 1fr 1fr; }
  .dmy .apps li:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .dmy .apps { grid-template-columns: 1fr; }
}
/* Manufacturing process (dark) */
.dmy .mfg { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 70px); align-items: center; margin-bottom: 48px; }
.dmy .process { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: step; }
.dmy .process li { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden; }
.dmy .process img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dmy .process .cap { padding: 14px 14px 16px; }
.dmy .process .n { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: .08em; }
.dmy .process h3 { font-size: 17px; margin-top: 4px; color: #fff; }
.dmy .process p { font-size: 13.5px; color: var(--on-dark-muted); margin-top: 4px; }
@media (max-width: 1100px) {
  .dmy .process { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .dmy .mfg { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dmy .process { grid-template-columns: 1fr 1fr; }
}
/* OEM / ODM */
.dmy .oem { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) {
  .dmy .oem { grid-template-columns: 1fr; }
}
/* Quality & certificates */
.dmy .quality { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
.dmy .quality .wall { border-radius: var(--radius); overflow: hidden; }
.dmy .quality .wall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dmy .certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dmy .certs li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: 20px 20px; border-radius: var(--radius); }
.dmy .certs b { display: block; font-family: var(--font-display); font-size: 24px; color: var(--ink); line-height: 1.1; }
.dmy .certs span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.dmy.sec--dark .certs li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); border-left-color: var(--gold); }
.dmy.sec--dark .certs b { color: #fff; }
.dmy.sec--dark .certs span { color: var(--on-dark-muted); }
@media (max-width: 900px) {
  .dmy .quality { grid-template-columns: 1fr; }
  .dmy .quality .wall img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .dmy .certs { grid-template-columns: 1fr 1fr; }
}
/* Order process + form (dark) */
.dmy .order { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 70px); align-items: start; }
.dmy .order .contact-list { margin-top: 30px; }
@media (max-width: 960px) {
  .dmy .order { grid-template-columns: 1fr; }
}
/* Contact list */
.dmy .contact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dmy.sec--dark .contact-list li { border-color: rgba(255,255,255,.16); }
.dmy .contact-list svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--gold); }
.dmy .contact-list a { color: inherit; font-weight: 600; text-decoration: none; }
.dmy .contact-list a:hover { text-decoration: underline; }
.dmy .contact-list small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dmy.sec--dark .contact-list small { color: var(--on-dark-muted); }
/* Quote form */
.dmy .qform { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow); }
.dmy .qform h3, .dmy.sec--dark .qform h3 { font-size: 26px; margin-bottom: 18px; color: var(--ink); }
.dmy .qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.dmy .qgrid .full { grid-column: 1 / -1; }
.dmy .qform label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.dmy .qform input, .dmy .qform select, .dmy .qform textarea { font: 400 16px/1.4 var(--font-body); color: var(--ink); background: var(--grey-50); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; min-height: 48px; width: 100%; }
.dmy .qform textarea { resize: vertical; }
.dmy .qform input:focus, .dmy .qform select:focus, .dmy .qform textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); background: #fff; }
.dmy .qfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 20px; }
.dmy .small { font-size: 13px; color: var(--muted); max-width: 44ch; }
.dmy .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dmy .qok, .dmy .qerr { margin-top: 16px; padding: 14px 16px; font-weight: 600; border-radius: var(--radius); }
.dmy .qok { background: #e4f0ea; color: var(--green); }
.dmy .qerr { background: #f8e6e2; color: #8a2b1a; }
@media (max-width: 520px) {
  .dmy .qgrid { grid-template-columns: 1fr; }
}
/* Contact Form 7 output inside .qform */
.dmy .qform .wpcf7 form { margin: 0; }
.dmy .qform .wpcf7-form-control-wrap { display: block; }
.dmy .qform small { font-weight: 400; font-size: 12px; color: var(--muted); }
.dmy .qform input[type=file] { background: #fff; padding: 9px; font-size: 14px; }
.dmy .qform .btn, .dmy .qform input[type=submit] { width: auto; min-height: 48px; background: var(--green); color: #fff; border: 2px solid var(--green); font: 600 15px/1.2 var(--font-body); padding: 13px 30px; border-radius: 999px; cursor: pointer; }
.dmy .qform input[type=submit]:hover { background: var(--green-700); }
.dmy .qform .wpcf7-spinner { margin: 0 0 0 8px; }
.dmy .qform .wpcf7-not-valid-tip { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: #8a2b1a; }
.dmy .qform [aria-invalid="true"] { border-color: #b3412b !important; }
.dmy .qform .wpcf7-response-output { margin: 18px 0 0 !important; padding: 13px 16px !important; border-radius: var(--radius); border: 1px solid var(--line) !important; font-weight: 600; font-size: 15px; }
.dmy .qform .wpcf7 form.sent .wpcf7-response-output { background: #e4f0ea; border-color: #b7d5c5 !important; color: var(--green); }
.dmy .qform .wpcf7 form.invalid .wpcf7-response-output, .dmy .qform .wpcf7 form.failed .wpcf7-response-output,
.dmy .qform .wpcf7 form.spam .wpcf7-response-output { background: #f8e6e2; border-color: #e5b9ae !important; color: #8a2b1a; }
.dmy .qform .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* FAQ */
.dmy .faq-wrap { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; align-items: start; }
.dmy .faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 10px; }
.dmy .faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative; font-weight: 700; font-size: 16px; color: var(--ink); }
.dmy .faq summary::-webkit-details-marker { display: none; }
.dmy .faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--grey-50); display: grid; place-items: center; font-size: 20px; font-weight: 500; color: var(--green); transition: transform .2s var(--ease); }
.dmy .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--green); color: #fff; }
.dmy .faq details p { padding: 0 20px 20px; color: var(--muted); }
@media (max-width: 860px) {
  .dmy .faq-wrap { grid-template-columns: 1fr; gap: 8px; }
}
/* Film dialog */
.dmy-film { width: min(1100px, 94vw); padding: 0; border: 0; background: #000; border-radius: var(--radius); }
.dmy-film::backdrop { background: rgba(5,12,10,.86); }
.dmy-film video { width: 100%; display: block; }
.dmy-film .close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
/* Inner page banner (dark, factory image) */
.dmy.banner { position: relative; background: var(--green-900); color: #fff; padding: clamp(60px, 8vw, 104px) 0 clamp(48px, 6vw, 72px); overflow: hidden; }
.dmy.banner .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dmy.banner .wrap { position: relative; }
.dmy.banner .display { color: #fff; }
.dmy.banner .lead { color: var(--on-dark); margin-top: 16px; }
.dmy.banner .eyebrow { color: var(--gold); }
.dmy .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--on-dark-muted); margin-bottom: 22px; }
.dmy .crumbs a { color: var(--on-dark-muted); text-decoration: none; }
.dmy .crumbs a:hover { color: #fff; text-decoration: underline; }
.dmy .crumbs [aria-current] { color: #fff; font-weight: 600; }
.dmy .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.dmy .jump a { padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.3); text-decoration: none; font-size: 14px; font-weight: 600; color: #fff; border-radius: 999px; transition: all .2s var(--ease); }
.dmy .jump a:hover { border-color: #fff; }
.dmy .jump a[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: var(--green-900); }
/* Stats */
.dmy .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.18); }
.dmy .stat { padding: 26px 22px 6px; border-right: 1px solid rgba(255,255,255,.18); }
.dmy .stat:first-child { padding-left: 0; }
.dmy .stat:last-child { border-right: 0; }
.dmy .stat b { display: block; font-family: var(--font-display); font-size: clamp(34px, 4vw, 50px); font-weight: 700; color: #fff; line-height: 1.05; }
.dmy .stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--on-dark-muted); }
.dmy .stats--light { border-color: var(--line); }
.dmy .stats--light .stat { border-color: var(--line); }
.dmy .stats--light .stat b { color: var(--green); }
.dmy .stats--light .stat span { color: var(--muted); }
@media (max-width: 760px) {
  .dmy .stats { grid-template-columns: 1fr 1fr; }
  .dmy .stat, .dmy .stat:first-child { padding: 20px 14px 18px 0; border-right: 0; }
}
/* Scope (OEM service list) */
.dmy .scope { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dmy .scope li { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.dmy .scope p { margin-top: 6px; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) {
  .dmy .scope { grid-template-columns: 1fr; }
}
/* Split + mosaic */
.dmy .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.dmy .split .txt p + p { margin-top: 14px; }
.dmy .split .txt .btns { margin-top: 28px; }
.dmy .mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dmy .mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.dmy .mosaic img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .dmy .split { grid-template-columns: 1fr; }
}
/* Why (about page) */
.dmy .why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dmy .why li { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); padding: 26px 24px; border-radius: var(--radius); }
.dmy .why p { margin-top: 6px; color: var(--on-dark-muted); font-size: 15px; }
@media (max-width: 900px) {
  .dmy .why { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dmy .why { grid-template-columns: 1fr; }
}
/* Timeline (history) */
.dmy .timeline { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 3px solid var(--green); }
.dmy .timeline li { padding: 24px 18px 0 0; position: relative; }
.dmy .timeline li::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); border: 3px solid #fff; }
.dmy .timeline b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--green); }
.dmy .timeline p { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 960px) {
  .dmy .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--green); margin-left: 7px; }
  .dmy .timeline li { padding: 0 0 28px 26px; }
  .dmy .timeline li::before { top: 8px; left: -9px; }
}
/* Gallery */
.dmy .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dmy .gallery figure { position: relative; overflow: hidden; background: var(--grey-50); border-radius: var(--radius); }
.dmy .gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.dmy .gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.dmy .gallery figure:nth-child(1) img { aspect-ratio: auto; }
.dmy .gallery figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 12px; background: rgba(13,31,26,.85); color: #fff; font-size: 13px; }
@media (max-width: 860px) {
  .dmy .gallery { grid-template-columns: 1fr 1fr; }
  .dmy .gallery figure:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .dmy .gallery figure:nth-child(1) img { aspect-ratio: 16 / 10; }
  .dmy .gallery figure:last-child:nth-child(even) { grid-column: 1 / -1; }
}
/* Products (series pages) */
.dmy .products { display: grid; }
.dmy .product { display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 110px; }
.dmy .product .ph { background: var(--grey-50); position: relative; }
.dmy .product .ph img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.dmy .product .code { position: absolute; left: 0; top: 0; background: var(--green); color: #fff; padding: 9px 15px; font-weight: 700; font-size: 13.5px; letter-spacing: .05em; }
.dmy .product .bd { padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 16px; }
.dmy .product h3 { font-size: clamp(23px, 2.2vw, 28px); }
.dmy .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dmy .chips li { padding: 6px 12px; background: var(--grey-50); border: 1px solid var(--line); color: var(--green); font-weight: 600; border-radius: 999px; }
.dmy .specs { display: grid; grid-template-columns: auto 1fr; font-size: 14.5px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dmy .specs dt, .dmy .specs dd { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.dmy .specs dt { background: var(--grey-50); color: var(--muted); white-space: nowrap; font-weight: 600; }
.dmy .specs dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.dmy .specs dt:nth-last-child(2), .dmy .specs dd:last-child { border-bottom: 0; }
.dmy .adv { display: grid; gap: 7px; font-size: 14.5px; color: var(--muted); }
.dmy .adv li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.dmy .adv svg { width: 18px; height: 18px; color: var(--green); margin-top: 3px; }
.dmy .sizes table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dmy .sizes caption { text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); padding-bottom: 8px; }
.dmy .sizes th, .dmy .sizes td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; }
.dmy .sizes thead th { color: var(--muted); font-weight: 500; font-size: 13px; }
.dmy .sizes tbody th { font-weight: 700; width: 34%; }
.dmy .note { margin-top: 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .dmy .product { grid-template-columns: 1fr; }
  .dmy .product .ph img { min-height: 0; aspect-ratio: 16 / 9; }
}
/* Accessories grid */
.dmy .acc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dmy .acc li { display: flex; }
.dmy .acc a { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.dmy .acc a:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.dmy .acc .ph { aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.dmy .acc .ph img { width: 100%; height: 100%; object-fit: cover; }
.dmy .acc .ph.contain img { object-fit: contain; padding: 14px; }
.dmy .acc .bd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dmy .acc h3 { font-size: 17px; }
.dmy .acc p { color: var(--muted); }
.dmy .acc .more { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--green); }
@media (max-width: 1000px) {
  .dmy .acc { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .dmy .acc { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* Accessory detail page */
.dmy .accd { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.dmy .accd .shot { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dmy .accd .shot img { width: 100%; }
.dmy .accd .shot.contain img { object-fit: contain; padding: clamp(14px, 3vw, 32px); }
.dmy .accd .info { display: flex; flex-direction: column; gap: 20px; }
.dmy .accd .info h2 { font-size: clamp(26px, 2.6vw, 34px); }
.dmy .accd .works { font-size: 15px; color: var(--muted); }
.dmy .accd .works a { font-weight: 700; }
@media (max-width: 900px) {
  .dmy .accd { grid-template-columns: 1fr; }
}
/* Compare table */
.dmy .compare-wrap { overflow-x: auto; }
.dmy .compare { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font-size: 15px; }
.dmy .compare th, .dmy .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.dmy .compare thead th { background: var(--green); color: #fff; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.dmy .compare thead a { color: #fff; }
.dmy .compare tbody th { color: var(--muted); font-weight: 600; width: 22%; background: var(--grey-50); }
/* CTA band */
.dmy .cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.dmy .cta .lead { margin-top: 14px; }
@media (max-width: 860px) {
  .dmy .cta { grid-template-columns: 1fr; }
}
/* Footer */
.dmy-footer { color: var(--on-dark-muted); padding: 64px 0 28px; font-size: 15px; }
.dmy-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; }
.dmy-footer .flogo { width: 176px; height: auto; }
.dmy-footer p { margin-top: 18px; max-width: 38ch; }
.dmy-footer h4 { font-family: var(--font-display); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.dmy-footer li { padding: 5px 0; }
.dmy-footer a { color: var(--on-dark); text-decoration: none; }
.dmy-footer a:hover { color: #fff; text-decoration: underline; }
.dmy-footer .legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #8ea197; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 960px) {
  .dmy-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dmy-footer .cols { grid-template-columns: 1fr; gap: 28px; }
}
/* Quote popup (one form for the whole site) */
.dmy-quote { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(780px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius); background: #fff; box-shadow: 0 30px 80px rgba(5,12,10,.4); overflow: auto; }
.dmy-quote::backdrop { background: rgba(5,12,10,.72); }
.dmy-quote .dq-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 26px clamp(20px, 3vw, 34px) 0; }
.dmy-quote .dq-head .display { font-size: clamp(24px, 3vw, 32px); }
.dmy-quote .dq-head .small { margin-top: 6px; }
.dmy-quote .close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--grey-50); font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
.dmy-quote .close:hover { background: var(--green); color: #fff; }
.dmy-quote .qform { border: 0; box-shadow: none; padding-top: 18px; }
/* At-a-glance facts (quotable summary for readers and AI answers) */
.dmy .facts h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 20px; }
.dmy .facts dl { display: grid; background: #fff; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dmy .facts dl > div { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dmy .facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.dmy .facts dd { margin-top: 4px; font-weight: 600; color: var(--ink); font-size: 15.5px; }
/* Product detail pages */
.dmy .pd-media { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dmy .pd-media img { width: 100%; height: auto; }
.dmy .pd-media .code { position: absolute; left: 0; top: 0; background: var(--green); color: #fff; padding: 8px 14px; font-weight: 700; font-size: 13.5px; letter-spacing: .05em; }
.dmy .pd-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.dmy .pd-two .display { font-size: clamp(26px, 2.6vw, 34px); }
.dmy .pd-two .adv { margin-top: 12px; }
.dmy .pd-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dmy .pd-opts a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: box-shadow .2s var(--ease); }
.dmy .pd-opts a:hover { box-shadow: var(--shadow); }
.dmy .pd-opts span { font-size: 14px; color: var(--muted); }
@media (max-width: 960px) {
  .dmy .pd-two { grid-template-columns: 1fr; }
  .dmy .pd-opts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dmy .pd-opts { grid-template-columns: 1fr; }
}
/* ---------- Product page: structure drawing viewer (one stage instead of a long card grid) ---------- */
.dmy .sview { display: grid; gap: 18px; }
.dmy .sv-stage { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 10px; min-width: 0; }
.dmy .sv-open { display: block; cursor: zoom-in; }
.dmy .sv-img { width: 100%; height: clamp(260px, 42vw, 470px); object-fit: contain; transition: opacity .25s var(--ease); }
.dmy .sv-img.swap { opacity: .25; }
.dmy .sv-cap { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); display: flex; gap: 10px; align-items: baseline; }
.dmy .sv-num { font-size: 12px; font-weight: 600; color: var(--gold-ink); letter-spacing: .06em; white-space: nowrap; }
.dmy .sv-nav { margin: 0; padding: 0; list-style: none; }
.dmy .sview--thumbs .sv-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dmy .sview--thumbs .sv-nav::-webkit-scrollbar { display: none; }
.dmy .sview--thumbs .sv-nav a { display: block; width: 84px; height: 64px; flex: none; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.dmy .sview--thumbs .sv-nav img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.dmy .sview--thumbs .sv-nav a[aria-current="true"], .dmy .sview--thumbs .sv-nav a:hover { border-color: var(--gold); }
.dmy .sdata { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 28px; margin-top: 26px; }
.dmy .sside { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.dmy .sside-data .pd-h3:first-child, .dmy .sdata .pd-h3 { margin-top: 0; }
.dmy .sside-data > div + div { margin-top: 22px; }
.dmy .compare--sm { min-width: 0; }
.dmy .compare--sm th, .dmy .compare--sm td { padding: 8px 10px; }
.dmy .minis { display: grid; gap: 10px; }
.dmy .minis--3 { grid-template-columns: repeat(3, 1fr); }
.dmy .minis--6 { grid-template-columns: repeat(6, 1fr); }
.dmy .minis li { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.dmy .minis img { width: 100%; height: 92px; object-fit: contain; }
.dmy .minis span { font-weight: 600; line-height: 1.3; color: var(--ink); }
@media (max-width: 900px) {
  .dmy .sside { grid-template-columns: 1fr; }
  .dmy .minis--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .dmy .minis--3 { grid-template-columns: 1fr 1fr 1fr; }
  .dmy .minis img { height: 64px; }
}
/* ---------- Home: product rail + accessory tiles (space-saving) ---------- */
.dmy .rail-nav { display: flex; gap: 8px; }
.dmy .rail-nav[hidden] { display: none; }
.dmy .rail-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--green); display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.dmy .rail-nav button:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
.dmy .rail-nav button:disabled { opacity: .35; cursor: default; }
.dmy .rail-nav svg { width: 18px; height: 18px; }
.dmy .rail-prev svg { transform: rotate(180deg); }
.dmy .rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4.25); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 2px 20px; margin: -8px -2px 0; }
.dmy .rail::-webkit-scrollbar { display: none; }
.dmy .rail > li { scroll-snap-align: start; }
.dmy #products .tabpanel .all { margin-top: 8px; }
@media (max-width: 1100px) {
  .dmy .rail { grid-auto-columns: calc((100% - 2 * 16px) / 3.2); }
}
@media (max-width: 760px) {
  .dmy .rail-nav { display: none; }
  .dmy .rail { grid-auto-columns: 74%; gap: 12px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
}
.dmy .atiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dmy .atiles a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.dmy .atiles a:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.dmy .atiles .ph { aspect-ratio: 1; overflow: hidden; background: var(--grey-50); }
.dmy .atiles .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dmy .atiles .ph.contain img { object-fit: contain; padding: 12px; }
.dmy .atiles a:hover .ph img { transform: scale(1.06); }
@media (max-width: 1100px) {
  .dmy .atiles { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .dmy .atiles { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); padding-bottom: 6px; }
  .dmy .atiles::-webkit-scrollbar { display: none; }
  .dmy .atiles li { scroll-snap-align: start; }
}
/* ---------- Motion & interaction ----------
   Principles: motion explains structure (content rises in reading order), never blocks content (nothing is hidden without JS,
   first-screen content is never hidden), stays short (≤ 0.8 s), uses transform/opacity only, and switches off for reduced motion. */
.dmy [id] { scroll-margin-top: 96px; }
/* scroll progress + header shadow (classes set by the script) */
.dmy-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; z-index: 200; pointer-events: none; }
.dmy-header { transition: box-shadow .3s var(--ease); }
.is-scrolled .dmy-header { box-shadow: 0 8px 24px rgba(13, 31, 26, .10); }
/* back to top */
.dmy-top { position: fixed; right: 20px; bottom: 24px; z-index: 69; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--green-900); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(13, 31, 26, .25); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, background-color .2s var(--ease); }
.dmy-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dmy-top:hover { background: var(--green); }
.dmy-top svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .dmy-top { right: 12px; bottom: 78px; width: 42px; height: 42px; }
}
/* buttons: lift, shadow, press */
.dmy .btn { transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.dmy .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(24, 56, 48, .22); }
.dmy .btn:active { transform: translateY(0); box-shadow: none; transition-duration: .05s; }
/* text links: underline sweeps from gold to green */
/* main nav: gold underline grows from the centre */
.dmy-header .nav > ul > li > a { position: relative; }
.dmy-header .nav > ul > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 3px; background: var(--gold); transform: scaleX(0); transition: transform .25s var(--ease); }
.dmy-header .nav > ul > li > a:hover::after { transform: scaleX(1); }
.dmy-header .nav .caret { transition: transform .2s var(--ease); }
.dmy-header .nav .has-sub:hover .caret { transform: rotate(180deg); }
.dmy-header .nav .sub a { transition: background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease); }
.dmy-header .nav .sub a:hover { padding-left: 26px; }
/* cards: lift, gold bar sweeps along the bottom, image zooms */
.dmy .pcard, .dmy .card, .dmy .acc a { position: relative; }
.dmy .pcard::after, .dmy a.card::after, .dmy .acc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.dmy a.pcard:hover::after, .dmy a.card:hover::after, .dmy .acc a:hover::after { transform: scaleX(1); }
.dmy a.pcard:hover, .dmy a.card:hover, .dmy .acc a:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(13, 31, 26, .12); }
.dmy .card img, .dmy .acc a img { transition: transform .6s var(--ease); }
.dmy a.card:hover img, .dmy .acc a:hover img { transform: scale(1.05); }
.dmy .partners li, .dmy .why li, .dmy .process li, .dmy .pd-opts a, .dmy .sgrid figure, .dmy .pgallery figure { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.dmy .partners li:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.dmy .why li:hover, .dmy .process li:hover { transform: translateY(-4px); border-color: rgba(192, 160, 88, .55); background-color: rgba(255, 255, 255, .07); }
.dmy .process img { transition: transform .6s var(--ease); }
.dmy .process li:hover img { transform: scale(1.06); }
.dmy .pd-opts a:hover { transform: translateY(-3px); }
.dmy .sgrid figure, .dmy .pgallery figure { overflow: hidden; }
.dmy .sgrid img, .dmy .pgallery img { transition: transform .5s var(--ease); }
.dmy .sgrid figure:hover, .dmy .pgallery figure:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green); }
.dmy .sgrid figure:hover img, .dmy .pgallery figure:hover img { transform: scale(1.03); }
.dmy .apps li > div { transition: padding-bottom .35s var(--ease); }
.dmy .apps li:hover > div { padding-bottom: 28px; }
.dmy .jump a:hover { background: rgba(255, 255, 255, .1); }
.dmy .pd-thumbs button { transition: border-color .2s var(--ease), transform .2s var(--ease); }
.dmy .pd-thumbs button:hover { transform: translateY(-2px); }
.dmy .pd-big { transition: opacity .25s var(--ease); }
.dmy .pd-big.swap { opacity: .25; }
.dmy .faq summary { transition: color .2s var(--ease); }
.dmy .faq summary:hover { color: var(--green); }
.dmy .faq details { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.dmy .faq details[open] { border-color: var(--green); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: no-preference) {
  /* entrance of first-screen copy (transform only, so text is visible from the first frame) */
  @keyframes dmyRise { from { transform: translate3d(0, 18px, 0); } to { transform: none; } }
  .dmy.vhero .wrap > *, .dmy.banner .wrap > * { animation: dmyRise .8s var(--ease) both; }
  .dmy.vhero .wrap > :nth-child(2), .dmy.banner .wrap > :nth-child(2) { animation-delay: .06s; }
  .dmy.vhero .wrap > :nth-child(3), .dmy.banner .wrap > :nth-child(3) { animation-delay: .12s; }
  .dmy.vhero .wrap > :nth-child(n+4), .dmy.banner .wrap > :nth-child(n+4) { animation-delay: .18s; }
  /* play button pulse */
  @keyframes dmyPulse { 0% { box-shadow: 0 0 0 0 rgba(192, 160, 88, .55); } 100% { box-shadow: 0 0 0 18px rgba(192, 160, 88, 0); } }
  .dmy .play i { animation: dmyPulse 2.2s ease-out infinite; }
  /* scroll reveal: added only by JS to elements below the fold; --d staggers siblings */
  .dmy .reveal--zoom { transform: scale(.97); }
  .dmy .head.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .25s; }
  .dmy .head.reveal.in .eyebrow::before { transform: none; }
  /* FAQ answer slides in */
  @keyframes dmyFaq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .dmy .faq details[open] > :not(summary) { animation: dmyFaq .3s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .dmy *, .dmy *::before, .dmy *::after, .dmy-top { transition: none !important; animation: none !important; }
}
/* Product gallery */
.dmy .pd-main { position: relative; aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; overflow: hidden; }
.dmy .pd-main .pd-big { width: 100%; height: 100%; object-fit: contain; }
.dmy .pd-thumbs { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin: 0; list-style: none; }
.dmy .pd-thumbs::-webkit-scrollbar { display: none; }
.dmy .pd-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--ink, #1a1a1a); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); display: grid; place-items: center; padding: 0 0 4px; transition: background .2s; }
.dmy .pd-arrow:hover, .dmy .pd-arrow:focus-visible { background: #fff; }
.dmy .pd-prev { left: 12px; }
.dmy .pd-next { right: 12px; }
.dmy .pd-num { position: absolute; right: 12px; bottom: 12px; padding: 3px 9px; border-radius: 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
@media (max-width: 760px) {
  .dmy .pd-arrow { width: 36px; height: 36px; font-size: 26px; }
  .dmy .pd-prev { left: 8px; }
  .dmy .pd-next { right: 8px; }
}
.dmy .pd-thumbs button { flex: none; width: 76px; height: 60px; padding: 0; border: 2px solid var(--line); border-radius: 3px; background: #fff; cursor: pointer; overflow: hidden; }
.dmy .pd-thumbs button[aria-current="true"], .dmy .pd-thumbs button:hover { border-color: var(--gold); }
.dmy .pd-media .pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dmy .pd-cap { padding: 0 12px 12px; font-size: 13px; color: var(--muted); }
/* Factory structure drawings */
.dmy .sgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dmy .sgrid figure, .dmy .pgallery figure { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; }
.dmy .sgrid img { width: 100%; height: 320px; object-fit: contain; }
.dmy .sgrid a { display: block; cursor: zoom-in; }
.dmy .sgrid figcaption, .dmy .pgallery figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.dmy .pd-h3 { margin: 36px 0 14px; font-size: 22px; }
.dmy .pgallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dmy .pgallery img { width: 100%; height: 150px; object-fit: contain; }
@media (max-width: 860px) {
  .dmy .sgrid { grid-template-columns: 1fr; }
  .dmy .sgrid img { height: auto; max-height: 360px; }
  .dmy .pgallery { grid-template-columns: 1fr 1fr; }
}
/* ---------- Design v5 polish (2026-10-13, page-by-page review) ---------- */
/* 2: readable small text */
.dmy .chips li { font-size: 13.5px; }
.dmy .acc p { font-size: 14.5px; }
.dmy .acc .more { font-size: 14px; }
.dmy .minis span { font-size: 13.5px; }
.dmy .compare--sm th, .dmy .compare--sm td { font-size: 14px; }
/* 12: series grids - three roomy cards per row, one per row on phones */
.dmy .pcard h3 { font-size: 20px; line-height: 1.28; }
.dmy .pcard .bd { padding: 20px 22px 22px; }
@media (max-width: 600px) {
  .dmy .pcard { display: grid; grid-template-columns: 42% 1fr; }
  .dmy .pcard .ph { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .dmy .pcard .bd { padding: 14px 16px 16px; gap: 6px; }
  .dmy .pcard h3 { font-size: 16.5px; }
}
/* 6: home rail - full titles, cards keep equal height */
/* 3: one-glance grids - fixed columns, the last cell fills its row */
.dmy .facts dl { grid-template-columns: repeat(4, 1fr); }
.dmy .facts dl > div:last-child { grid-column: span var(--s4, 1); }
@media (max-width: 1000px) {
  .dmy .facts dl { grid-template-columns: 1fr 1fr; }
  .dmy .facts dl > div:last-child { grid-column: span var(--s2, 1); }
}
@media (max-width: 560px) {
  .dmy .facts dl { grid-template-columns: 1fr; }
  .dmy .facts dl > div:last-child { grid-column: auto; }
}
/* 1: banners show product photos - lighter, with a reading gradient on the left */
.dmy.banner .bg { opacity: .55; }
.dmy.banner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(13, 31, 26, .94) 0%, rgba(13, 31, 26, .78) 45%, rgba(13, 31, 26, .35) 100%); }
.dmy.banner .bg { z-index: -1; }
.dmy.banner { isolation: isolate; }
.dmy.banner .wrap { z-index: 1; }
/* 4: white colour swatch visible */
/* 13: awnings - picture pinned to the top of its column, more space between products */
.dmy .products { gap: 40px; }
/* 14: accessories - groups sized to their content */
.dmy .acc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 36px; }
.dmy .acc-group--wide { grid-column: 1 / -1; }
.dmy .acc-groups .acc { grid-template-columns: 1fr 1fr; }
.dmy .acc-groups .acc-group--wide .acc { grid-template-columns: repeat(4, 1fr); }
.dmy .acc-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.dmy .acc-gh h2.display { font-size: clamp(24px, 2.4vw, 30px); }
.dmy .acc-gh span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); white-space: nowrap; }
@media (max-width: 900px) {
  .dmy .acc-groups { grid-template-columns: 1fr; }
  .dmy .acc-groups .acc-group--wide .acc { grid-template-columns: 1fr 1fr; }
}
/* 7: cut-out product pictures sit on the same light ground as the photos */
.dmy .acc .ph.contain, .dmy .atiles .ph.contain { background: var(--grey-50); }
.dmy .acc .ph.contain img, .dmy .atiles .ph.contain img { mix-blend-mode: multiply; }
/* 16: structure viewer with few drawings - steps as a row of tabs above the drawing */
.dmy .sview--pills { grid-template-columns: 1fr; }
.dmy .sview--pills .sv-nav { order: -1; display: flex; flex-wrap: wrap; gap: 8px; }
.dmy .sview--pills .sv-nav a { display: inline-flex; gap: 10px; align-items: baseline; padding: 10px 16px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.dmy .sview--pills .sv-nav .n { font: 700 12px/1 var(--font-display); color: var(--gold-ink); }
.dmy .sview--pills .sv-nav a:hover { border-color: var(--green); color: var(--ink); }
.dmy .sview--pills .sv-nav a[aria-current="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.dmy .sview--pills .sv-nav a[aria-current="true"] .n { color: var(--gold); }
@media (max-width: 600px) {
  .dmy .sview--pills .sv-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dmy .sview--pills .sv-nav a { white-space: nowrap; flex: none; }
}
/* 18: option cards read as links */
.dmy .pd-opts em { margin-top: auto; padding-top: 10px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--green); display: inline-flex; gap: 8px; align-items: center; }
.dmy .pd-opts em svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.dmy .pd-opts a:hover em svg { transform: translateX(4px); }
.dmy .pd-opts a:hover { border-color: var(--gold); }
@media (max-width: 640px) {
/* 11: compare table stacks on phones - both series visible, no sideways scroll */
  .dmy .compare--stack { min-width: 0; }
  .dmy .compare--stack thead { display: none; }
  .dmy .compare--stack tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .dmy .compare--stack tbody th { grid-column: 1 / -1; width: auto; padding: 12px 14px 4px; border: 0; color: var(--gold-ink); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; background: #fff; }
  .dmy .compare--stack td { border: 0; padding: 4px 14px 14px; font-size: 14.5px; }
  .dmy .compare--stack td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--green); margin-bottom: 2px; }
}
@media (max-width: 720px) {
/* 9: partner cards a little tighter on phones */
  .dmy .partners li { padding: 22px 20px; }
}
/* ---------- Trade terms, WhatsApp, all-model comparison (2026-10-14) ---------- */
.dmy .terms { display: grid; gap: 0; margin-top: 26px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.dmy .terms > div { padding: 12px 14px; }
.dmy .terms > div:last-child { border-right: 0; }
.dmy .terms dd { margin-top: 2px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
@media (max-width: 760px) {
  .dmy .terms { grid-template-columns: 1fr 1fr; }
  .dmy .terms > div { border-bottom: 1px solid var(--line); }
  .dmy .terms > div:nth-child(2n) { border-right: 0; }
}
.dmy-fab a.fab-wa:hover { background: #18834a; }
.dmy-fab svg[fill="currentColor"], .dmy .contact-list svg[fill="currentColor"], .dmy .btn svg[fill="currentColor"] { stroke: none; }
.dmy .mx-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dmy .mx-filter button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 14px/1.2 var(--font-body); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.dmy .mx-filter button:hover { border-color: var(--green); }
.dmy .mx-filter button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.dmy .mx-table { min-width: 900px; font-size: 14px; }
.dmy .mx-table th, .dmy .mx-table td { padding: 12px 14px; }
.dmy .mx-table thead th { font-size: 14px; font-family: var(--font-body); font-weight: 700; letter-spacing: .02em; }
.dmy .mx-table tbody th { width: 26%; background: #fff; color: var(--ink); }
.dmy .mx-table tbody th a { font: 700 15px/1.3 var(--font-display); color: var(--green); text-decoration: none; }
.dmy .mx-table tbody th a:hover { text-decoration: underline; }
.dmy .mx-table tbody th span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dmy .mx-table tbody tr:hover td, .dmy .mx-table tbody tr:hover th { background: var(--grey-50); }
.dmy .mx-table tr[hidden] { display: none; }
.dmy .mx-count { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) {
  .dmy .mx-table { min-width: 0; }
  .dmy .mx-table thead { display: none; }
  .dmy .mx-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .dmy .mx-table tr[hidden] { display: none; }
  .dmy .mx-table tbody th { grid-column: 1 / -1; width: auto; border: 0; }
  .dmy .mx-table td { border: 0; padding: 4px 14px; }
  .dmy .mx-table td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); }
}
.dmy .mx-table td { white-space: nowrap; }
.dmy .mx-table td[data-label="Roof"] { white-space: normal; }


/* ---- v8 design system ---- */
/* ===== DMY v8: Chinese-CNC-manufacturer style (design-plan/DMY网站设计方案-v2.html §3) ===== */
:root { --g8: #1d4d3c; /* brand green */
  --g8-d: #13241f; /* dark sections */
  --g8-l: #e8f0ec; --amb: #d98a2b; /* inquiry buttons */
  --amb-d: #bf7520; --bg8: #f3f6f5; --ink8: #1b2420; --mut8: #5d6763; --line8: #dfe5e2; --radius: 6px; }
body { background: #fff; }
.dmy { color: var(--ink8); }
.dmy .wrap, .dmy .wrap8 { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* ---- header ---- */
.dmy-topbar { background: var(--g8-d); }
.dmy-header { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.dmy-header .nav a { font-family: var(--font-display); font-weight: 500; font-size: 15px; }
.dmy-header .nav a[aria-current="page"], .dmy-header .nav a.is-parent { color: var(--g8); border-bottom-color: var(--amb); }
.dmy-header .bar > .btn, .dmy-header .mnav .btn { background: var(--amb); border-color: var(--amb); border-radius: 4px; font-family: var(--font-display); }
.dmy-header .bar > .btn:hover { background: var(--amb-d); border-color: var(--amb-d); }
/* ---- side bar (Inquiry / WhatsApp / Email / Call) ---- */
.dmy-fab { background: var(--g8); border-radius: 6px 0 0 6px; }
.dmy-fab a.fab-main { color: #fff; }
.dmy-fab a.fab-wa { background: #25d366; }
@media (max-width: 760px) {
  .dmy-fab { border-radius: 0; }
}
/* ---- type ---- */
.dmy h1, .dmy h2, .dmy h3, .dmy .display { font-family: var(--font-display); letter-spacing: -.01em; }
/* ---- section shells ---- */
.dmy.s8 { padding: 80px 0; background: #fff; }
.dmy.s8--grey { background: var(--bg8); }
.dmy.s8--dark { background: var(--g8-d); color: #e6efe9; }
.dmy.s8--dark h2, .dmy.s8--dark h3 { color: #fff; }
.dmy.s8--dark p { color: #b9c8c0; }
@media (max-width: 760px) {
  .dmy.s8 { padding: 56px 0; }
}
/* centred title with short bar */
.dmy .h8 { text-align: center; max-width: 820px; margin: 0 auto 44px; }
.dmy .h8 h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.2; margin: 0; color: var(--ink8); }
.dmy .h8-bar { display: block; width: 48px; height: 3px; background: var(--g8); margin: 16px auto 0; }
.dmy.s8--dark .h8-bar { background: var(--amb); }
.dmy .h8 p { margin: 16px auto 0; font-size: 16px; color: var(--mut8); }
.dmy .fac8 .h8, .dmy .qa8 .h8, .dmy .q8 .h8 { text-align: left; margin: 0 0 20px; }
.dmy .fac8 .h8-bar, .dmy .qa8 .h8-bar, .dmy .q8 .h8-bar { margin-left: 0; }
/* ---- buttons ---- */
.dmy .btn8 { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 12px 26px; background: var(--amb); color: #fff; border: 2px solid var(--amb); border-radius: 4px; font: 600 15px/1.2 var(--font-display); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
.dmy .btn8:hover { background: var(--amb-d); border-color: var(--amb-d); color: #fff; }
.dmy .btn8 svg { width: 17px; height: 17px; }
.dmy .btn8--sm { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.dmy .btn8--ghost { border-color: rgba(255,255,255,.8); }
.dmy .btn8--ghost:hover { background: #fff; color: var(--ink8); border-color: #fff; }
.dmy .btn8 svg[fill="currentColor"] { stroke: none; }
.dmy .cta8 { text-align: center; margin-top: 40px; }
.dmy .cta8--left { text-align: left; }
/* ---- hero ---- */
.dmy.hero8 { position: relative; display: flex; align-items: center; overflow: hidden; background: #0e1a16; color: #fff; }
.dmy.hero8 .poster, .dmy.hero8 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dmy.hero8::after { content: ""; position: absolute; inset: 0; }
.dmy.hero8 .wrap8 { position: relative; z-index: 2; width: 100%; padding-top: 70px; padding-bottom: 70px; }
.dmy.hero8 h1 { font-size: clamp(36px, 4.6vw, 58px); font-weight: 700; line-height: 1.12; margin: 0; max-width: 14ch; color: #fff; }
.dmy .hero8-sub { font-size: clamp(17px, 1.6vw, 20px); margin: 18px 0 0; max-width: 40ch; color: #e7efe9; }
.dmy .hero8-pts { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dmy .hero8-pts li { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: 500; }
.dmy .hero8-pts svg { width: 20px; height: 20px; color: var(--amb); flex: none; }
.dmy .hero8-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* ---- category cards ---- */
.dmy .cats8 { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.dmy .cat8 a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px 22px 20px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #f7f9f8 0%, #e3eae7 100%); text-decoration: none; color: var(--ink8); transition: box-shadow .25s, transform .25s; }
.dmy .cat8 a:hover { transform: translateY(-3px); }
.dmy .cat8-t { font: 600 22px/1.25 var(--font-display); }
.dmy .cat8-s { margin-top: 6px; font-size: 14px; color: var(--mut8); }
.dmy .cat8 img { margin: auto 0 0; width: 100%; height: 190px; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s; }
.dmy .cat8--big img { height: 240px; }
.dmy .cat8 a:hover img { transform: scale(1.04); }
.dmy .cat8-go { margin-top: 14px; display: inline-flex; gap: 6px; align-items: center; font: 600 14px var(--font-display); color: var(--g8); }
.dmy .cat8-go svg { width: 16px; height: 16px; }
@media (max-width: 1000px) {
  .dmy .cats8 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dmy .cats8 { grid-template-columns: 1fr; }
  .dmy .cat8 a { min-height: 300px; }
}
/* ---- grids ---- */
.dmy .grid8 { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.dmy .grid8--4 { grid-template-columns: repeat(4, 1fr); }
.dmy .grid8--3 { grid-template-columns: repeat(3, 1fr); }
.dmy .grid8--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) {
  .dmy .grid8--4, .dmy .grid8--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dmy .grid8--4, .dmy .grid8--3 { grid-template-columns: 1fr; }
}
/* ---- tabs ---- */
.dmy .tabs8 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -14px 0 32px; }
.dmy .tabs8 button { min-height: 44px; padding: 10px 22px; border: 1px solid var(--line8); border-radius: 999px; background: #fff; color: var(--ink8); font: 500 15px var(--font-display); cursor: pointer; transition: all .2s; }
.dmy .tabs8 button:hover { border-color: var(--g8); color: var(--g8); }
.dmy .tabs8 button[aria-selected="true"] { background: var(--g8); border-color: var(--g8); color: #fff; }
/* ---- product card ---- */
.dmy .pc8 { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.dmy .pc8:hover { transform: translateY(-3px); }
.dmy .pc8-ph { display: block; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #f7f9f8, #e3eae7); overflow: hidden; }
.dmy .pc8-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.dmy .pc8:hover .pc8-ph img { transform: scale(1.05); }
.dmy .pc8-bd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dmy .pc8-code { font: 600 12.5px var(--font-display); letter-spacing: .06em; color: var(--g8); }
.dmy .pc8 h3 { font-size: 16.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.dmy .pc8 h3 a { color: var(--ink8); text-decoration: none; }
.dmy .pc8 h3 a:hover { color: var(--g8); }
.dmy .pc8 ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--mut8); }
.dmy .pc8 li svg { width: 14px; height: 14px; color: var(--g8); margin-right: 6px; vertical-align: -2px; }
.dmy .pc8-ft { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dmy .pc8-more { display: inline-flex; gap: 4px; align-items: center; font: 600 13.5px var(--font-display); color: var(--g8); text-decoration: none; }
.dmy .pc8-more svg { width: 14px; height: 14px; }
/* ---- inquiry band ---- */
.dmy.band8 { position: relative; padding: 90px 0; text-align: center; color: #fff; background: var(--bg) center/cover no-repeat; }
.dmy.band8::before { content: ""; position: absolute; inset: 0; }
.dmy.band8 .wrap8 { position: relative; }
.dmy.band8 h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; margin: 0; color: #fff; }
.dmy.band8 p { max-width: 640px; margin: 14px auto 26px; color: #d4e2db; }
/* ---- application cards ---- */
.dmy .app8 { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #0e1a16; }
.dmy .app8 img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.dmy .app8:hover img { transform: scale(1.06); }
.dmy .app8 > div { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; background: linear-gradient(transparent, rgba(8,20,16,.9)); color: #fff; }
.dmy .app8 .ic8 { width: 44px; height: 44px; margin-bottom: 10px; }
.dmy .app8 h3 { font-size: 19px; font-weight: 600; margin: 0; color: #fff; }
.dmy .app8 p { margin: 4px 0 0; font-size: 14px; color: #d6e1dc; }
/* ---- icon cards ---- */
.dmy .ic8 { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--g8); color: #fff; }
.dmy .ic8 svg { width: 26px; height: 26px; }
.dmy .why8 { text-align: center; transition: box-shadow .25s, transform .25s, border-color .25s; }
.dmy .s8--grey .why8 { border-color: transparent; }
.dmy .why8 .ic8 { margin: 0 auto 16px; }
.dmy .why8 h3 { font-size: 18px; font-weight: 600; margin: 0; }
.dmy .why8 p { margin: 8px 0 0; font-size: 14.5px; color: var(--mut8); }
/* ---- services (dark) ---- */
.dmy .serv8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; }
.dmy .serv8 li { padding: 30px 22px; border-right: 1px solid rgba(255,255,255,.12); text-align: center; }
.dmy .serv8 li:last-child { border-right: 0; }
.dmy .serv8 .n8 { font: 700 28px var(--font-display); color: var(--amb); }
.dmy .serv8 h3 { font-size: 18px; margin: 10px 0 0; }
.dmy .serv8 p { font-size: 14px; margin: 8px 0 0; }
@media (max-width: 1000px) {
  .dmy .serv8 { grid-template-columns: 1fr 1fr; }
  .dmy .serv8 li { border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 560px) {
  .dmy .serv8 { grid-template-columns: 1fr; }
  .dmy .serv8 li { border-right: 0; }
}
/* ---- factory block ---- */
.dmy .fac8 { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.dmy .fac8-txt { color: var(--mut8); margin: 0 0 24px; }
.dmy.s8--dark .fac8-txt { color: #b9c8c0; }
.dmy .num8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line8); border: 1px solid var(--line8); border-radius: 8px; overflow: hidden; }
.dmy .num8 li { background: #fff; padding: 18px 16px; }
.dmy .num8 b { display: block; font: 700 30px/1.1 var(--font-display); color: var(--g8); }
.dmy .num8 small { font-size: 16px; }
.dmy .num8 span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--mut8); }
.dmy .film8 { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: #000; }
.dmy .film8 img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.dmy .film8-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border: 0; border-radius: 50%; background: var(--amb); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(217,138,43,.3); }
.dmy .film8-play svg { width: 28px; height: 28px; margin-left: 4px; }
.dmy .film8 > span { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; font: 600 15px var(--font-display); }
/* ---- photo caption cards ---- */
.dmy .ph8 { background: #fff; border-radius: 8px; overflow: hidden; }
.dmy .ph8 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.dmy .ph8:hover img { transform: scale(1.05); }
.dmy .ph8 b { padding: 12px 14px; font: 600 15px var(--font-display); text-align: center; }
/* ---- quality ---- */
.dmy .qa8 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.dmy .cert8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dmy .cert8 li { background: #fff; border: 1px solid var(--line8); border-top: 3px solid var(--g8); border-radius: 6px; padding: 14px; }
.dmy .cert8 b { display: block; font: 700 19px var(--font-display); color: var(--g8); }
.dmy .cert8 span { font-size: 13px; color: var(--mut8); }
/* ---- order flow ---- */
.dmy .fl8 { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line8); border-radius: 8px; overflow: hidden; }
.dmy .fl8 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dmy .fl8 > div { padding: 16px 18px 20px; }
.dmy .fl8 .n8 { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--g8); color: #fff; font: 600 14px var(--font-display); }
.dmy .fl8 h3 { font-size: 18px; margin: 10px 0 0; }
.dmy .fl8 p { margin: 4px 0 0; font-size: 14.5px; color: var(--mut8); }
.dmy .terms8 { margin-top: 32px; }
/* ---- faq ---- */
.dmy .faq8 { max-width: 900px; }
.dmy .faq8 .faq details { border-radius: 6px; }
.dmy .faq8 .faq summary { font-family: var(--font-display); font-weight: 500; }
/* ---- quote ---- */
.dmy .q8 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: start; }
.dmy .q8 .contact-list a, .dmy .q8 .contact-list { color: #e6efe9; }
.dmy .q8 .qform { background: #fff; border-radius: 10px; padding: 28px; color: var(--ink8); }
.dmy .q8 .qform input[type=submit], .dmy .q8 .qform .btn { background: var(--amb); border-color: var(--amb); border-radius: 4px; }
/* ---- footer ---- */
.dmy-footer { background: #0f1d18; }
.dmy.s8--dark .h8 h2 { color: #fff; }
.dmy.s8--dark .h8 p { color: #b9c8c0; }
.dmy-footer, .dmy-footer p, .dmy-footer address, .dmy-footer li { color: #a9bab2; }
.dmy-footer h4 { color: #fff; }
/* ===== v8 detail fixes (section-by-section review) ===== */
.dmy-topbar, .dmy-topbar .tb-right, .dmy-topbar a { color: #d6e2dc; }
.dmy .hero8-eb { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-left: 3px solid var(--amb); background: rgba(255,255,255,.08); font: 600 13px var(--font-display); color: #fff; }
/* category cards: one picture box size for all */
.dmy .cats8 { grid-template-columns: repeat(3, 1fr); }
.dmy .cat8 a { min-height: 0; }
.dmy .cat8-t { min-height: 1.25em; white-space: nowrap; }
.dmy .cat8-s { min-height: 2.9em; }
.dmy .cat8 img, .dmy .cat8--big img { width: 100%; margin: 16px 0 0; object-fit: cover; border-radius: 6px; mix-blend-mode: normal; }
/* product cards: titles fixed to 2 lines so ticks line up */
.dmy .pc8 h3 { min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dmy .pc8 ul { min-height: 4.6em; }
/* band: stronger neutral overlay */
.dmy.band8::before { background: linear-gradient(120deg, rgba(14,28,24,.94), rgba(24,64,50,.86)); }
/* application cards: fixed text block so icons line up */
.dmy .app8 > div { display: flex; flex-direction: column; justify-content: flex-end; }
.dmy .app8 p { min-height: 2.9em; }
/* icon cards: tag pinned to the bottom */
.dmy .why8 { display: flex; flex-direction: column; align-items: center; }
.dmy .why8 h3, .dmy .serv8 h3, .dmy .fl8 h3, .dmy .app8 h3 { font-weight: 600; }
/* quality: top-aligned, 4:3 photos */
.dmy .qa8 { align-items: start; }
.dmy .ph8--tall img { aspect-ratio: 4 / 3; }
/* quote form heading visible */
.dmy .q8 .qform h3 { color: var(--ink8); font-size: 20px; margin: 0 0 6px; }
/* grids never force their parent wider than the screen */
.dmy .fac8 > *, .dmy .qa8 > *, .dmy .q8 > * { min-width: 0; }
@media (max-width: 760px) {
  .dmy .wrap8 { padding: 0 16px; }
  .dmy .h8 { margin-bottom: 28px; }
  .dmy .h8 h2 { font-size: 24px; }
  .dmy .hero8-btns .btn8 { width: 100%; justify-content: center; }
  .dmy.hero8 { min-height: 0; }
  /* two-up compact grids */
  .dmy .cats8 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dmy .cat8 a { padding: 14px 12px; }
  .dmy .cat8-t { font-size: 15px; white-space: normal; }
  .dmy .cat8-s { font-size: 12px; min-height: 0; }
  .dmy .cat8 img, .dmy .cat8--big img { margin-top: 10px; }
  .dmy .cat8-go { font-size: 13px; }
  .dmy .grid8.m2-8 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dmy .m2-8 .ic8 { width: 42px; height: 42px; }
  .dmy .m2-8 .ic8 svg { width: 20px; height: 20px; }
  .dmy .m2-8 .why8 h3 { font-size: 14.5px; }
  .dmy .m2-8 .why8 p { font-size: 12.5px; }
  .dmy .m2-8 .ph8 b { font-size: 12.5px; padding: 8px 6px; }
  .dmy .m2-8 .app8 > div { padding: 30px 10px 10px; min-height: 0; }
  .dmy .m2-8 .app8 .ic8 { display: none; }
  .dmy .m2-8 .app8 h3 { font-size: 14px; }
  .dmy .m2-8 .app8 p { display: none; }
  /* horizontal swipe rows */
  .dmy .grid8.swipe8 { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding: 4px 16px 10px 0; gap: 12px; }
  .dmy .swipe8::-webkit-scrollbar { display: none; }
  .dmy .swipe8 > li { scroll-snap-align: start; }
  .dmy .tabs8 { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .dmy .tabs8 button { white-space: nowrap; flex: none; padding: 8px 16px; font-size: 14px; }
  /* numbers */
  .dmy .num8 { grid-template-columns: 1fr 1fr; }
  .dmy .num8 b { font-size: 24px; white-space: nowrap; }
  .dmy .cert8 { grid-template-columns: 1fr 1fr; }
  .dmy .fac8, .dmy .qa8, .dmy .q8 { gap: 28px; }
  .dmy .q8 .qform { padding: 18px; }
  .dmy .serv8 li { padding: 20px 16px; }
}
.dmy .app8 > div p { height: 3em; line-height: 1.5; overflow: hidden; }
.dmy .app8 > div { min-height: 0; }
@media (max-width: 900px) {
  .dmy .fac8, .dmy .qa8, .dmy .q8 { grid-template-columns: 1fr; }
}
/* ===== v8 round 3: Montserrat, fewer button colours, factory + product hero ===== */
:root { --font-display: "Montserrat", "Inter", Arial, sans-serif; }
.dmy .h8 h2 { letter-spacing: -.015em; }
/* one CTA colour: amber; everything else white/green outline */
.dmy .btn8--ghost { background: transparent; border: 2px solid rgba(255,255,255,.85); color: #fff; }
.dmy .btn8--ghost svg { width: 18px; height: 18px; }
.dmy .btn8--sm { background: transparent; border: 1.5px solid var(--g8); color: var(--g8); }
.dmy .btn8--sm:hover { background: var(--g8); border-color: var(--g8); color: #fff; }
.dmy-fab a, .dmy-fab a.fab-wa { background: var(--g8); }
.dmy-fab a:hover, .dmy-fab a.fab-wa:hover { background: #163c2f; }
.dmy-fab a.fab-main { background: var(--amb); }
/* hero: factory background + product collage */
.dmy.hero8 { min-height: 640px; }
.dmy.hero8::after { background: linear-gradient(90deg, rgba(9,20,16,.92) 0%, rgba(9,20,16,.82) 45%, rgba(9,20,16,.55) 100%); }
.dmy .hero8-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.dmy .hero8-pics { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.dmy .hero8-pics figure { position: relative; margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.15); }
.dmy .hero8-pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmy .hp-main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.dmy .hp-a, .dmy .hp-b { aspect-ratio: 4 / 3; }
.dmy .hero8-pics figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 3px; background: rgba(9,20,16,.75); color: #fff; font: 600 12px var(--font-display); }
@media (max-width: 1000px) {
  .dmy .hero8-grid { grid-template-columns: 1fr; }
  .dmy .hero8-pics { display: none; }
}
@media (min-width: 1001px) {
  .dmy .hero8-btns { flex-wrap: nowrap; gap: 10px; }
  .dmy .hero8-btns .btn8 { padding: 12px 18px; font-size: 14.5px; white-space: nowrap; }
}
/* ===== frontend-design critique pass ===== */
/* hero tag: sentence case, no tracking */
.dmy .hero8-eb { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
/* quiet grids instead of identical bordered cards */
.dmy .why8 { background: none; border: 0; border-radius: 0; padding: 8px 18px 4px; box-shadow: none; }
.dmy .grid8 > .why8 + .why8 { border-left: 1px solid var(--line8); }
.dmy .grid8--4 > .why8:nth-child(4n+1) { border-left: 0; }
.dmy .why8 .ic8 { background: var(--g8-l); color: var(--g8); }
.dmy .why8:hover { transform: none; box-shadow: none; }
.dmy .grid8--4:has(> .why8) { row-gap: 40px; }
/* one memorable thing: the hero; no lift on cards, only a border change */
.dmy .pc8:hover, .dmy .cat8 a:hover { transform: none; }
.dmy .pc8 { box-shadow: none; border: 1px solid var(--line8); }
.dmy .pc8:hover { border-color: var(--g8); box-shadow: none; }
.dmy .cat8 a:hover { box-shadow: inset 0 0 0 1.5px var(--g8); }
.dmy .ph8 { box-shadow: none; border: 1px solid var(--line8); }
.dmy .ph8 b { display: flex; gap: 10px; justify-content: center; align-items: center; }
.dmy .n8s { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--g8); color: #fff; font-size: 12px; }
/* services: icons on dark */
.dmy .serv8 .ic8 { margin: 0 auto 6px; background: rgba(255,255,255,.08); color: var(--amb); }
@media (max-width: 760px) {
  .dmy .grid8 > .why8 + .why8 { border-left: 0; }
  .dmy .m2-8 .why8 { padding: 6px 4px; }
}
/* ===== varied section rhythm ===== */
.dmy .h8s { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 2px solid var(--ink8); }
.dmy .h8s h2 { margin: 0; font: 700 clamp(30px, 3.4vw, 44px)/1.1 var(--font-display); color: var(--ink8); letter-spacing: -.02em; }
.dmy .h8s p { margin: 0; color: var(--mut8); font-size: 16px; }
.dmy .h8s-a { display: inline-block; margin-top: 10px; font: 600 15px var(--font-display); color: var(--g8); text-decoration: none; border-bottom: 2px solid var(--amb); padding-bottom: 2px; }
.dmy .h8s ~ .tabs8 { justify-content: flex-start; margin-top: 0; }
@media (max-width: 760px) {
  .dmy .h8s { grid-template-columns: 1fr; gap: 10px; }
}
/* factory: full-bleed photo with figures on top */
.dmy.s8--photo { position: relative; background: var(--bg) center/cover no-repeat; color: #fff; }
.dmy.s8--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,20,16,.94) 0%, rgba(9,20,16,.82) 55%, rgba(9,20,16,.6) 100%); }
.dmy.s8--photo > * { position: relative; }
.dmy.s8--photo .h8 h2 { color: #fff; }
.dmy.s8--photo .h8-bar { background: var(--amb); }
.dmy.s8--photo .fac8-txt { color: #c9d6cf; }
.dmy.s8--photo .num8 { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.dmy.s8--photo .num8 li { background: rgba(9,20,16,.55); }
.dmy.s8--photo .num8 b { color: #fff; }
.dmy.s8--photo .num8 span { color: #b9c8c0; }
/* why: split, photo left, two-column list right */
.dmy .why8s { display: grid; grid-template-columns: .9fr 1.4fr; gap: 56px; }
.dmy .why8s-side h2 { margin: 0; font: 700 clamp(30px, 3.4vw, 44px)/1.1 var(--font-display); letter-spacing: -.02em; }
.dmy .why8s-side .h8-bar { margin: 18px 0 0; }
.dmy .why8s-side p { color: var(--mut8); margin: 16px 0 24px; }
.dmy .why8s-side img { width: 100%; object-fit: cover; border-radius: 8px; }
.dmy .why8s-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.dmy .why8s-list .why8 { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; text-align: left; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line8); }
.dmy .why8s-list .why8 + .why8 { border-left: 0; }
.dmy .why8s-list .ic8 { grid-row: span 2; margin: 0; width: 52px; height: 52px; background: var(--g8); color: #fff; }
.dmy .why8s-list h3 { font-size: 17px; }
.dmy .why8s-list p { margin: 4px 0 0; }
@media (max-width: 900px) {
  .dmy .why8s { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .dmy .why8s-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
/* reveal motion (restored, slightly stronger) */
  .dmy .reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .7s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
  .dmy .reveal.in { opacity: 1; transform: none; }
}
.dmy .why8s-side { display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .dmy .why8s-side img { flex: none; }
}
.dmy .why8s { align-items: start; }
.dmy .why8s-side img { flex: none; height: 380px; min-height: 0; aspect-ratio: auto; }
@media (max-width: 900px) {
  .dmy .why8s-side img { height: auto; aspect-ratio: 16 / 9; }
}
/* 3 categories since awnings were dropped (2026-10-14) */
.dmy .cat8 img, .dmy .cat8--big img { height: 260px; }
@media (max-width: 760px) {
  .dmy .cat8 img, .dmy .cat8--big img { height: 120px; }
  .dmy .cats8 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dmy .cats8 > li:last-child:nth-child(odd) img { height: 160px; }
}
/* steel range card, first in the Steel tab (2026-10-14) */
.dmy .pc8--intro { background: var(--g8); border-color: var(--g8); color: #fff; }
.dmy .pc8--intro:hover { border-color: var(--g8); }
.dmy .pc8--intro .pc8-bd { padding: 26px 24px 22px; gap: 10px; }
.dmy .pc8--intro .pc8-code { color: rgba(255,255,255,.7); }
.dmy .pc8--intro h3 { color: #fff; font-size: 21px; min-height: 0; }
.dmy .pc8--intro ul { color: rgba(255,255,255,.88); font-size: 14px; gap: 9px; min-height: 0; }
.dmy .pc8--intro li svg { color: var(--amb); }
.dmy .pc8-price { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); display: flex; flex-direction: column; }
.dmy .pc8-price small { font-size: 13px; color: rgba(255,255,255,.7); }
.dmy .pc8-price b { font: 700 38px/1.1 var(--font-display); color: #fff; }
.dmy .pc8--intro .btn8--sm { background: var(--amb); border-color: var(--amb); color: #fff; }
.dmy .pc8--intro .pc8-more { color: #fff; }
.dmy .pc8--intro ul li { display: flex; align-items: flex-start; }
.dmy .pc8--intro li svg { flex: none; margin-top: 4px; }
.dmy .pc8--intro .pc8-ft { flex-wrap: wrap; row-gap: 12px; }
.dmy .pc8--intro .pc8-ft a { white-space: nowrap; }
/* ===== Inner pages, step 1 (plan v3, 2026-10-14): old components take the v8 tokens ===== */
:root { --green: #1d4d3c; --green-700: #24604b; --green-900: #13241f; --gold: #d98a2b; --gold-ink: #1d4d3c; --grey-50: #f3f6f5; --grey-100: #e8eeeb; --line: #dfe5e2; --ink: #1b2420; --muted: #5d6763; }
.dmy .display, .dmy h1, .dmy h2, .dmy h3 { font-family: "Montserrat", "Inter", Arial, sans-serif; }
.dmy .eyebrow { display: none; }
.dmy .btn { background: var(--amb); border-color: var(--amb); border-radius: 6px; font-family: "Montserrat", "Inter", Arial, sans-serif; }
.dmy .btn:hover { background: var(--amb-d); border-color: var(--amb-d); color: #fff; }
.dmy .btn--ghost { background: transparent; border-color: var(--g8); color: var(--g8); }
.dmy .btn--ghost:hover { background: var(--g8); border-color: var(--g8); color: #fff; }
.dmy .more svg { display: none; }
.dmy .terms { border-radius: 6px; }
.dmy .terms dt { letter-spacing: .02em; text-transform: none; font-size: 12.5px; color: var(--mut8); font-weight: 600; }
.dmy .terms > div { border-right: 1px solid var(--line); }
@media (max-width: 900px) {
  .dmy .terms { grid-template-columns: 1fr 1fr; }
  .dmy .terms > div { border-bottom: 1px solid var(--line); }
  .dmy .terms > div:nth-child(2n) { border-right: 0; }
  .dmy .terms > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
.dmy.s8--dark .terms { background: transparent; border-color: rgba(255,255,255,.18); margin: 0 0 24px; }
.dmy.s8--dark .terms > div { border-color: rgba(255,255,255,.18); }
.dmy.s8--dark .terms dt { color: rgba(255,255,255,.6); }
.dmy.s8--dark .terms dd { color: #fff; }
/* light-ground outline button */
.dmy .btn8--line { background: #fff; border: 2px solid var(--g8); color: var(--g8); }
.dmy .btn8--line:hover { background: var(--g8); border-color: var(--g8); color: #fff; }
.dmy .btn8--sm2 { min-height: 38px; padding: 8px 18px; font-size: 14px; }
/* ===== Product page v8 ===== */
.dmy.pd8 { padding: 26px 0 60px; background: #fff; }
.dmy.pd8 .crumbs { color: var(--mut8); }
.dmy.pd8 .crumbs a { color: var(--mut8); }
.dmy.pd8 .crumbs a:hover { color: var(--g8); }
.dmy.pd8 .crumbs [aria-current] { color: var(--ink8); }
.dmy .pd8-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.dmy .pd8-sum h1 { font: 700 clamp(28px, 3vw, 38px)/1.15 "Montserrat", sans-serif; letter-spacing: -.02em; margin: 8px 0 12px; color: var(--ink8); }
.dmy .pd8-lead { color: var(--mut8); font-size: 15.5px; line-height: 1.65; margin: 0 0 20px; }
.dmy .pd8-facts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line8); border: 1px solid var(--line8); border-radius: 8px; overflow: hidden; }
.dmy .pd8-facts li { display: flex; gap: 12px; align-items: flex-start; background: #fff; padding: 14px 16px; }
.dmy .pd8-facts svg { width: 22px; height: 22px; color: var(--g8); flex: none; margin-top: 2px; }
.dmy .pd8-facts span { display: block; font-size: 12.5px; color: var(--mut8); }
.dmy .pd8-facts b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink8); line-height: 1.35; }
.dmy .pd8-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dmy .pd8-btns .btn8 { padding: 12px 20px; font-size: 14.5px; }
.dmy .pd8-btns svg { width: 18px; height: 18px; }
.dmy .pd8-terms { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line8); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--ink8); }
.dmy .pd8-terms span { color: var(--mut8); margin-right: 6px; }
.dmy.pd8-nav { position: sticky; z-index: 40; background: #fff; border-top: 1px solid var(--line8); border-bottom: 1px solid var(--line8); }
.is-scrolled .dmy.pd8-nav { box-shadow: 0 6px 16px rgba(13,40,30,.06); }
.dmy.pd8-nav .wrap8 { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dmy.pd8-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.dmy.pd8-nav ul::-webkit-scrollbar { display: none; }
.dmy.pd8-nav ul a { display: block; padding: 16px 14px; font: 600 14px "Montserrat", sans-serif; color: var(--mut8); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.dmy.pd8-nav ul a:hover, .dmy.pd8-nav ul a.is-on { color: var(--g8); border-bottom-color: var(--amb); }
.dmy .pd8-h2 { font: 700 clamp(26px, 3vw, 36px)/1.2 "Montserrat", sans-serif; margin: 0 0 16px; color: var(--ink8); }
.dmy .pd8-ov { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.dmy .pd8-ov > div > p { color: var(--mut8); font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.dmy .pd8-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dmy .pd8-pts li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.dmy .pd8-pts svg { width: 18px; height: 18px; color: var(--g8); flex: none; margin-top: 3px; }
.dmy .pd8-perf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; }
.dmy .pd8-perf li { background: var(--g8); color: #fff; padding: 26px 22px; }
.dmy .pd8-perf b { display: block; font: 700 30px/1.1 "Montserrat", sans-serif; }
.dmy .pd8-perf span { display: block; margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,.75); }
.dmy .pd8-ft { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line8); }
.dmy .pd8-ft:last-child { border-bottom: 0; }
.dmy .pd8-ft--r figure { order: 2; }
.dmy .pd8-ft figure { margin: 0; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--line8); }
.dmy .pd8-ft img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.dmy .pd8-ft figcaption { padding: 10px 14px; font-size: 13px; color: var(--mut8); border-top: 1px solid var(--line8); }
.dmy .pd8-n { font: 700 14px "Montserrat", sans-serif; color: var(--amb); }
.dmy .pd8-ft h3 { font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Montserrat", sans-serif; margin: 6px 0 12px; color: var(--ink8); }
.dmy .pd8-ft p { margin: 0; color: var(--mut8); font-size: 16px; line-height: 1.7; }
.dmy .pd8-struct .head { margin-bottom: 28px; }
.dmy .pd8-struct .head .display { font-size: clamp(26px, 3vw, 36px); }
.dmy .pd8-specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; background: #fff; border: 1px solid var(--line8); border-radius: 8px; padding: 6px 24px; }
.dmy .pd8-specs > div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line8); }
.dmy .pd8-specs dt { font-size: 13.5px; color: var(--mut8); }
.dmy .pd8-specs dd { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink8); }
.dmy .pd8-sizes { margin-top: 24px; display: flex; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--line8); border-radius: 8px; padding: 24px; }
.dmy .pd8-sizes > div { flex: 1; }
.dmy .pd8-sizes h3 { font: 700 18px "Montserrat", sans-serif; margin: 0 0 10px; }
.dmy .pd8-sizes ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dmy .pd8-sizes li { padding: 6px 14px; border: 1px solid var(--g8); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--g8); }
.dmy .pd8-sizes p { margin: 0; font-size: 14px; color: var(--mut8); }
.dmy .pd8-sz { width: 320px; flex: none; }
.dmy .pd8-sz rect { fill: rgba(29,77,60,.06); stroke: var(--g8); stroke-width: 1.5; }
.dmy .pd8-sz rect.sz1 { fill: rgba(217,138,43,.12); stroke: var(--amb); }
.dmy .pd8-sz rect.sz2 { fill: rgba(29,77,60,.12); stroke-dasharray: 4 3; }
.dmy .pd8-sz text { font: 600 12px "Inter", sans-serif; fill: var(--ink8); }
.dmy .pd8-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dmy .pd8-opts a { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; padding: 14px; border: 1px solid var(--line8); border-radius: 8px; text-decoration: none; color: var(--ink8); background: #fff; transition: border-color .2s; }
.dmy .pd8-opts a:hover { border-color: var(--g8); }
.dmy .pd8-opts img { grid-row: 1 / 3; width: 96px; height: 80px; object-fit: contain; background: var(--bg8); border-radius: 6px; }
.dmy .pd8-opts b { font: 600 15px "Montserrat", sans-serif; align-self: end; }
.dmy .pd8-opts span { font-size: 13.5px; color: var(--mut8); margin-top: 4px; }
.dmy .pd8-cmp { overflow-x: auto; background: #fff; border: 1px solid var(--line8); border-radius: 8px; }
.dmy .pd8-cmp table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.dmy .pd8-cmp th, .dmy .pd8-cmp td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line8); vertical-align: top; }
.dmy .pd8-cmp thead th { font: 700 17px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .pd8-cmp thead small { display: block; margin-top: 3px; font: 400 13px "Inter", sans-serif; color: var(--mut8); }
.dmy .pd8-cmp tbody th { font-weight: 500; color: var(--mut8); width: 160px; }
.dmy .pd8-cmp .is-cur { background: var(--g8-l); }
.dmy .pd8-cmp thead .is-cur { color: var(--g8); }
.dmy .pd8-cmp tr:last-child th, .dmy .pd8-cmp tr:last-child td { border-bottom: 0; }
.dmy .pd8-cmp a { color: var(--g8); font-weight: 600; }
.dmy .pd8-here { font-size: 13px; color: var(--g8); font-weight: 600; }
@media (max-width: 1000px) {
  .dmy .pd8-grid, .dmy .pd8-ov, .dmy .pd8-ft { grid-template-columns: 1fr; gap: 28px; }
  .dmy .pd8-ft--r figure { order: 0; }
  .dmy .pd8-specs { grid-template-columns: 1fr; }
  .dmy .pd8-opts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .dmy.pd8-nav .btn8 { display: none; }
  .dmy .pd8-facts { grid-template-columns: 1fr 1fr; }
  .dmy .pd8-facts li { padding: 12px; }
  .dmy .pd8-btns .btn8 { flex: 1 1 100%; justify-content: center; }
  .dmy .pd8-opts { grid-template-columns: 1fr; }
  .dmy .pd8-specs { padding: 4px 16px; }
  .dmy .pd8-specs > div { grid-template-columns: 1fr; gap: 2px; }
  .dmy .pd8-sizes { flex-direction: column; align-items: stretch; }
  .dmy .pd8-sz { width: 100%; }
  .dmy .pd8-perf b { font-size: 24px; }
  .dmy .pd8-ft { padding: 24px 0; }
}
.dmy .q8 .terms { grid-template-columns: 1fr 1fr; }
.dmy .q8 .terms > div:nth-child(2n) { border-right: 0; }
.dmy .q8 .terms > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
.dmy.pd8-nav { top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hdr, 0px)); }
.dmy.s8[id] { scroll-margin-top: calc(var(--hdr, 0px) + 56px); }
.dmy .pd8-swipe { display: none; margin: 0 0 10px; font-size: 13px; color: var(--mut8); }
@media (max-width: 760px) {
  .dmy .pd8-swipe { display: block; }
  .dmy .pd8-cmp tbody th { width: 96px; }
  .dmy .pd8-cmp th, .dmy .pd8-cmp td { padding: 11px 12px; }
}
/* ===== Category pages v8 (plan v4, 2026-10-15) ===== */
.dmy.cat8h { position: relative; overflow: hidden; background: var(--g8-d); color: #fff; padding: 34px 0 44px; }
.dmy.cat8h .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dmy.cat8h::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,20,16,.92) 0%, rgba(9,20,16,.78) 50%, rgba(9,20,16,.35) 100%); }
.dmy.cat8h .wrap8 { position: relative; z-index: 2; }
.dmy.cat8h .crumbs { margin-bottom: 18px; }
.dmy.cat8h h1 { font: 700 clamp(30px, 3.6vw, 46px)/1.1 "Montserrat", sans-serif; letter-spacing: -.02em; margin: 0 0 12px; color: #fff; }
.dmy.cat8h p { max-width: 640px; margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.85); }
.dmy .cat8h-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; font-weight: 600; }
.dmy .cat8h-chips li { display: flex; align-items: center; gap: 7px; }
.dmy .cat8h-chips svg { width: 17px; height: 17px; color: var(--amb); }
.dmy .cat8h-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.dmy.fb8 { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hdr, 0px)); z-index: 40; background: #fff; border-bottom: 1px solid var(--line8); }
.is-scrolled .dmy.fb8 { box-shadow: 0 6px 16px rgba(13,40,30,.06); }
.dmy.fb8 .wrap8 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 12px; padding-bottom: 12px; }
.dmy .fb8-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dmy .fb8-g > span { font: 600 13px "Montserrat", sans-serif; color: var(--mut8); margin-right: 4px; }
.dmy .fb8-g button { min-height: 36px; padding: 6px 14px; border: 1px solid var(--line8); border-radius: 999px; background: #fff; color: var(--ink8); font: 500 14px "Inter", sans-serif; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.dmy .fb8-g button:hover { border-color: var(--g8); }
.dmy .fb8-g button[aria-pressed="true"] { background: var(--g8); border-color: var(--g8); color: #fff; }
.dmy .fb8-n { margin-left: auto; font-size: 14px; color: var(--mut8); }
.dmy .fb8-empty { margin: 24px 0 0; text-align: center; color: var(--mut8); }
.dmy .fb8-reset { border: 0; background: none; color: var(--g8); font-weight: 600; text-decoration: underline; cursor: pointer; }
.dmy.cat8-list { padding-top: 36px; }
.dmy .cat8-grid > li[hidden] { display: none; }
.dmy .pc8--spec .pc8-ph { position: relative; }
.dmy .pc8-badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; font-style: normal; }
.dmy .pc8-badges span { padding: 4px 10px; border-radius: 4px; background: rgba(19,36,31,.86); color: #fff; font: 600 12px "Inter", sans-serif; }
.dmy .pc8-dl { margin: 6px 0 0; display: grid; gap: 0; }
.dmy .pc8-dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line8); font-size: 13.5px; }
.dmy .pc8-dl > div:last-child { border-bottom: 0; }
.dmy .pc8-dl dt { color: var(--mut8); }
.dmy .pc8-dl dd { margin: 0; color: var(--ink8); font-weight: 500; }
.dmy .tile8 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 30px 28px; border-radius: 8px; background: var(--g8); color: #fff; }
.dmy .tile8:nth-child(odd) { background: var(--bg8); color: var(--ink8); border: 1px solid var(--line8); }
.dmy .tile8 h3 { margin: 0; font: 700 22px/1.25 "Montserrat", sans-serif; color: inherit; }
.dmy .tile8 p { margin: 0; font-size: 15px; line-height: 1.6; opacity: .85; }
.dmy .tile8 .btn8 { margin-top: 6px; }
.dmy .fs8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dmy .fs8 li { background: #fff; border: 1px solid var(--line8); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.dmy .fs8 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dmy .fs8 b { display: block; margin: 16px 18px 0; font: 700 24px "Montserrat", sans-serif; color: var(--g8); }
.dmy .fs8-l { margin: 2px 18px 0; font-size: 14px; font-weight: 600; color: var(--ink8); }
.dmy .fs8 p { margin: 8px 18px 12px; font-size: 14px; color: var(--mut8); line-height: 1.55; }
.dmy .fs8-m { margin: auto 18px 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.dmy .fs8-m a, .dmy .pick8-m a { display: inline-block; padding: 4px 10px; border: 1px solid var(--g8); border-radius: 4px; font: 600 13px "Montserrat", sans-serif; color: var(--g8); text-decoration: none; margin: 0 6px 6px 0; }
.dmy .fs8-m a:hover, .dmy .pick8-m a:hover { background: var(--g8); color: #fff; }
.dmy .pick8 table { min-width: 0; }
.dmy .pick8 tbody th { width: 34%; color: var(--ink8); font-weight: 600; }
.dmy .pick8 thead th { font: 600 13.5px "Inter", sans-serif; color: var(--mut8); }
.dmy .cmp8-pick { display: grid; grid-template-columns: 160px repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.dmy .cmp8-pick label:first-child { grid-column: 2; }
.dmy .cmp8-pick span { display: block; font-size: 12.5px; color: var(--mut8); margin-bottom: 4px; }
.dmy .cmp8-pick select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--g8); border-radius: 6px; background: #fff; font: 600 15px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .cmp8 [data-m] { display: none; }
.dmy .cmp8 [data-m].on { display: table-cell; }
.dmy .cmp8 table { table-layout: fixed; }
.dmy .cmp8 thead th:first-child, .dmy .cmp8 tbody th { width: 160px; }
.dmy .cmp8 thead img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.dmy .gal8 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dmy .gal8 figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; }
.dmy .gal8 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s; }
.dmy .gal8 figure:hover img { transform: scale(1.04); }
.dmy .gal8 figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(transparent, rgba(9,20,16,.85)); color: #fff; font-size: 14px; font-weight: 500; }
.dmy .guide8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; counter-reset: g8; }
.dmy .guide8 li { counter-increment: g8; padding: 22px 0 22px 52px; border-bottom: 1px solid var(--line8); position: relative; }
.dmy .guide8 li::before { content: counter(g8); position: absolute; left: 0; top: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--g8-l); color: var(--g8); font: 700 15px/34px "Montserrat", sans-serif; text-align: center; }
.dmy .guide8 h3 { margin: 0 0 6px; font: 700 18px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .guide8 p { margin: 0; color: var(--mut8); font-size: 15px; line-height: 1.65; }
@media (max-width: 1000px) {
  .dmy .fs8 { grid-template-columns: 1fr 1fr; }
  .dmy .gal8 { grid-template-columns: 1fr 1fr; }
  .dmy .guide8 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dmy.cat8h { padding: 24px 0 32px; }
  .dmy.cat8h p { font-size: 15px; }
  .dmy .cat8h-btns .btn8 { flex: 1 1 auto; justify-content: center; }
  .dmy.fb8 .wrap8 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 18px; padding-top: 10px; padding-bottom: 10px; }
  .dmy.fb8 .wrap8::-webkit-scrollbar { display: none; }
  .dmy .fb8-g { flex-wrap: nowrap; }
  .dmy .fb8-g button { white-space: nowrap; }
  .dmy .fb8-n { display: none; }
  .dmy .cat8-grid.swipe8, .dmy .cat8-grid { display: grid; grid-template-columns: 1fr; grid-auto-flow: row; overflow: visible; }
  .dmy .fs8 { grid-template-columns: 1fr; }
  .dmy .gal8 { grid-template-columns: 1fr; }
  .dmy .cmp8-pick { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dmy .cmp8-pick label:first-child { grid-column: auto; }
  .dmy .cmp8-pick select { font-size: 13px; padding: 6px; }
  .dmy .cmp8 table { min-width: 560px; }
  .dmy .cmp8 thead th:first-child, .dmy .cmp8 tbody th { width: 96px; }
  .dmy .pick8 table, .dmy .pick8 thead, .dmy .pick8 tbody, .dmy .pick8 tr, .dmy .pick8 th, .dmy .pick8 td { display: block; width: auto; }
  .dmy .pick8 thead { display: none; }
  .dmy .pick8 tr { padding: 14px 16px; border-bottom: 1px solid var(--line8); }
  .dmy .pick8 th, .dmy .pick8 td { padding: 2px 0; border: 0; }
  .dmy .pick8 tbody th { width: auto; }
  .dmy .guide8 li { padding-left: 46px; }
}
.dmy .pd8-cmp tbody th small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mut8); font-weight: 400; }
.dmy .pd8-cmp tbody th a { color: var(--g8); font-weight: 700; }
/* ===== Factory block on product and category pages (2026-10-15) ===== */
.dmy.fc8h { position: relative; overflow: hidden; color: #fff; padding: 90px 0; background: var(--g8-d); }
.dmy.fc8h .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dmy.fc8h::after { content: ""; position: absolute; inset: 0; }
.dmy.fc8h .wrap8 { position: relative; z-index: 2; display: grid; gap: 56px; align-items: center; }
.dmy.fc8h h2 { font: 700 clamp(28px, 3.4vw, 42px)/1.15 "Montserrat", sans-serif; margin: 0 0 14px; color: #fff; }
.dmy.fc8h p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.86); max-width: 560px; }
.dmy .fc8h-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.dmy .fc8h-btns svg { width: 16px; height: 16px; }
.dmy.fc8 .tabs8 { margin-bottom: 26px; }
.dmy .fc8-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dmy .fc8-grid--6 { grid-template-columns: repeat(3, 1fr); }
.dmy .fc8-grid li { position: relative; border-radius: 8px; overflow: hidden; background: var(--bg8); }
.dmy .fc8-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.dmy .fc8-grid li:hover img { transform: scale(1.04); }
.dmy .fc8-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 11px; background: linear-gradient(transparent, rgba(9,20,16,.82)); color: #fff; font-size: 14px; font-weight: 500; }
.dmy .pd8-made { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px; border: 1px solid var(--line8); border-radius: 8px; text-decoration: none; color: var(--ink8); background: var(--bg8); cursor: pointer; width: 100%; text-align: left; font: inherit; }
.dmy .pd8-made img { width: 88px; height: 58px; object-fit: cover; border-radius: 6px; flex: none; }
.dmy .pd8-made b { display: block; font: 600 14.5px "Montserrat", sans-serif; }
.dmy .pd8-made span { display: block; font-size: 13px; color: var(--mut8); }
.dmy .pd8-made i { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: var(--amb); color: #fff; display: grid; place-items: center; flex: none; }
.dmy .pd8-made i svg { width: 15px; height: 15px; }
.dmy .pd8-made:hover { border-color: var(--g8); }
@media (max-width: 1000px) {
  .dmy.fc8h .wrap8 { gap: 30px; }
  .dmy .fc8-grid, .dmy .fc8-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .dmy.fc8h { padding: 56px 0; }
  .dmy .fc8h-btns .btn8 { flex: 1 1 100%; justify-content: center; }
  .dmy .fc8-grid, .dmy .fc8-grid--6 { gap: 8px; }
  .dmy .fc8-grid span { font-size: 12.5px; padding: 20px 10px 8px; }
  .dmy.fc8 .tabs8 { overflow-x: auto; flex-wrap: nowrap; }
  .dmy.fc8 .tabs8 button { white-space: nowrap; }
}
.dmy.fc8h::after { background: linear-gradient(90deg, rgba(9,20,16,.88) 0%, rgba(9,20,16,.6) 45%, rgba(9,20,16,.15) 100%); }
/* factory figures strip under the page hero (2026-10-15) */
.dmy.fs8b { background: var(--g8-d); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.dmy.fs8b .wrap8 { display: flex; align-items: stretch; gap: 0; }
.dmy.fs8b ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.dmy.fs8b li { padding: 18px 20px; border-right: 1px solid rgba(255,255,255,.12); }
.dmy.fs8b li:first-child { padding-left: 0; }
.dmy.fs8b b { display: block; font: 700 24px/1.15 "Montserrat", sans-serif; color: #fff; }
.dmy.fs8b li span { display: block; margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.7); }
.dmy .fs8b-go { display: flex; align-items: center; gap: 12px; margin: 12px 0 12px 20px; padding: 8px 14px 8px 8px; border: 1.5px solid var(--amb); border-radius: 8px; color: #fff; text-decoration: none; transition: background .2s; }
.dmy .fs8b-go:hover { background: rgba(217,138,43,.16); }
.dmy .fs8b-go img { width: 64px; height: 46px; object-fit: cover; border-radius: 5px; }
.dmy .fs8b-go b { display: block; font: 700 15px "Montserrat", sans-serif; color: #fff; }
.dmy .fs8b-go small { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); }
.dmy .fs8b-go i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--amb); display: grid; place-items: center; font-weight: 700; }
.dmy .fc8h-back { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 10px; background: rgba(9,20,16,.6); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.dmy .fc8h-back:hover { border-color: var(--amb); background: rgba(9,20,16,.8); }
.dmy .fc8h-back i { font-style: normal; width: 40px; height: 40px; border-radius: 50%; background: var(--amb); display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.dmy .fc8h-back b { display: block; font: 700 17px "Montserrat", sans-serif; }
.dmy .fc8h-back small { display: block; font-size: 13px; color: rgba(255,255,255,.7); }
html { scroll-behavior: smooth; }
#factory, #top, #models { scroll-margin-top: calc(var(--hdr, 0px) + 20px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 1000px) {
  .dmy.fs8b .wrap8 { flex-direction: column; }
  .dmy.fs8b ul { grid-template-columns: repeat(2, 1fr); }
  .dmy.fs8b li { padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .dmy.fs8b li:nth-child(2n) { border-right: 0; }
  .dmy.fs8b li:first-child { padding-left: 12px; }
  .dmy .fs8b-go { margin: 12px 0 14px; }
  .dmy .fc8h-back { justify-self: start; }
}
@media (max-width: 760px) {
  .dmy.fs8b b { font-size: 20px; }
}
/* factory band: live tour note + product overview panel (2026-10-15) */
.dmy.fc8h .wrap8 { grid-template-columns: 1.15fr 1fr; }
.dmy .fc8h-live { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin: 0 0 24px; padding: 14px 16px; border-left: 3px solid var(--amb); background: rgba(9,20,16,.55); border-radius: 0 8px 8px 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.85); }
.dmy .fc8h-live svg { width: 16px; height: 16px; color: var(--amb); flex: none; margin-top: 3px; }
.dmy .fc8h-live b { display: block; color: #fff; font: 700 15px "Montserrat", sans-serif; margin-bottom: 2px; }
.dmy .fc8h-prod { background: rgba(9,20,16,.72); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 20px; backdrop-filter: blur(2px); }
.dmy .fc8h-prod h3 { margin: 0 0 12px; font: 700 18px "Montserrat", sans-serif; color: #fff; }
.dmy .fc8h-prod ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.dmy .fc8h-prod li a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; text-decoration: none; transition: background .2s; }
.dmy .fc8h-prod li a:hover { background: rgba(255,255,255,.14); }
.dmy .fc8h-prod img { width: 76px; height: 54px; object-fit: cover; border-radius: 6px; background: #fff; flex: none; }
.dmy .fc8h-prod b { display: block; font: 600 15px "Montserrat", sans-serif; }
.dmy .fc8h-prod small { display: block; font-size: 13px; color: rgba(255,255,255,.7); }
.dmy .fc8h-prod li i { margin-left: auto; font-style: normal; font-size: 22px; color: var(--amb); padding-right: 6px; }
.dmy .fc8h-prod .fc8h-back { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 11px 16px; border: 1.5px solid var(--amb); border-radius: 8px; background: transparent; font: 600 15px "Montserrat", sans-serif; color: #fff; }
.dmy .fc8h-prod .fc8h-back:hover { background: rgba(217,138,43,.18); }
.dmy .fc8h-prod .fc8h-back i { width: 26px; height: 26px; font-size: 14px; }
@media (max-width: 1000px) {
  .dmy.fc8h .wrap8 { grid-template-columns: 1fr; }
}
/* trade terms now have 6 items (factory tour added 2026-10-15) */
.dmy .terms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dmy .terms > div:last-child { grid-column: auto; }
.dmy .q8 .terms, .dmy .cta .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dmy .q8 .terms > div, .dmy .cta .terms > div { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.dmy .cta .terms > div { border-color: var(--line); }
.dmy .q8 .terms > div:nth-child(3n), .dmy .cta .terms > div:nth-child(3n) { border-right: 0; }
.dmy .q8 .terms > div:nth-child(n+4), .dmy .cta .terms > div:nth-child(n+4) { border-bottom: 0; }
@media (max-width: 1100px) {
  .dmy .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dmy .terms > div { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  .dmy .terms > div:nth-child(3n) { border-right: 0; }
  .dmy .terms > div:nth-child(n+4) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .dmy .terms, .dmy .q8 .terms, .dmy .cta .terms { grid-template-columns: 1fr 1fr; }
  .dmy .terms > div, .dmy .q8 .terms > div, .dmy .cta .terms > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .dmy .q8 .terms > div { border-color: rgba(255,255,255,.18); }
  .dmy .terms > div:nth-child(2n), .dmy .q8 .terms > div:nth-child(2n), .dmy .cta .terms > div:nth-child(2n) { border-right: 0; }
  .dmy .terms > div:nth-child(n+5), .dmy .q8 .terms > div:nth-child(n+5), .dmy .cta .terms > div:nth-child(n+5) { border-bottom: 0; }
  .dmy .terms > div:nth-child(4), .dmy .q8 .terms > div:nth-child(4), .dmy .cta .terms > div:nth-child(4) { border-bottom: 1px solid var(--line); }
}
/* quote popup submit button follows the single amber CTA rule */
.dmy-quote .qform button[type=submit], .qform button[type=submit] { background: #d98a2b; border-color: #d98a2b; color: #fff; border-radius: 6px; }
.dmy-quote .qform button[type=submit]:hover, .qform button[type=submit]:hover { background: #bf7520; border-color: #bf7520; }
/* grid items must not be widened by the thumbnail strip on phones */
.dmy .pd8-grid > *, .dmy .pd8-ov > *, .dmy .pd8-ft > * { min-width: 0; }
/* keep screen-reader labels inside the scrolling thumbnail strips */
.dmy .sv-nav a, .dmy .pd-thumbs li, .dmy .pd-thumbs button { position: relative; }
.dmy .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.dmy .q8 .terms > div:last-child, .dmy .cta .terms > div:last-child { grid-column: auto; }
/* 6-term box inside the dark quote panel: clean 3x2 grid (desktop), 2x3 (phone) */
.dmy .q8 .terms > div { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.dmy .q8 .terms > div:nth-child(3n) { border-right: 0; }
.dmy .q8 .terms > div:nth-child(n+4) { border-bottom: 0; }
@media (max-width: 600px) {
  .dmy .q8 .terms > div { border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
  .dmy .q8 .terms > div:nth-child(2n) { border-right: 0; }
  .dmy .q8 .terms > div:nth-child(n+5) { border-bottom: 0; }
}
@media (min-width: 601px) {
  .dmy .q8 .terms > div:nth-child(n) { border-right: 1px solid rgba(255,255,255,.18); }
  .dmy .q8 .terms > div:nth-child(3n) { border-right: 0; }
}
#model-list { scroll-margin-top: calc(var(--hdr, 0px) + 64px); }
button, input, select, textarea { font-family: inherit; }

/* ===== Products overview, accessories, accessory detail (2026-10-16) ===== */
.dmy .row8 { list-style: none; margin: 0; padding: 0 0 12px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.dmy .row8 > li { scroll-snap-align: start; }
.dmy .pd8-swipe--always { display: block; }
.dmy .pc8-ph--contain { background: #fff; }
.dmy .pc8-ph--contain img { object-fit: contain; padding: 14px; }
.dmy .pc8-short { margin: 0; font-size: 14px; color: var(--mut8); line-height: 1.5; }
.dmy.fb8--jump .fb8-g a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line8); border-radius: 999px; color: var(--ink8); text-decoration: none; font-size: 14px; }
.dmy.fb8--jump .fb8-g a:hover { border-color: var(--g8); color: var(--g8); }
.dmy .ent8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dmy .ent8 li { border: 1px solid var(--line8); border-radius: 8px; padding: 26px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dmy .ent8 h3 { margin: 0; font: 700 19px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .ent8 p { margin: 0 0 8px; color: var(--mut8); font-size: 15px; line-height: 1.6; }
.dmy .ent8 .btn8 { margin-top: auto; }
.dmy .acc8-shot { border: 1px solid var(--line8); border-radius: 10px; overflow: hidden; background: var(--bg8); }
.dmy .acc8-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dmy .acc8-shot--contain { background: #fff; }
.dmy .acc8-shot--contain img { object-fit: contain; padding: 24px; }
.dmy .acc8-fit { background: var(--g8); color: #fff; border-radius: 10px; padding: 26px 24px; }
.dmy .acc8-fit h3 { margin: 0 0 12px; font: 700 20px "Montserrat", sans-serif; color: #fff; }
.dmy .acc8-fit ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dmy .acc8-fit a { display: inline-block; padding: 8px 16px; border: 1.5px solid var(--amb); border-radius: 6px; color: #fff; text-decoration: none; font-weight: 600; }
.dmy .acc8-fit a:hover { background: var(--amb); }
.dmy .acc8-fit p { margin: 0; font-size: 14px; color: rgba(255,255,255,.8); }
.dmy .pd8-note { margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--amb); background: #fff; font-size: 14px; color: var(--mut8); }
@media (max-width: 1000px) { .dmy .row8 { grid-auto-columns: 46%; } .dmy .ent8 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .dmy .row8 { grid-auto-columns: 80%; } .dmy.fb8--jump .fb8-g a { white-space: nowrap; } }
.dmy .pd8-facts > li:last-child:nth-child(odd), .dmy .pd8-perf > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dmy .acc8-fit p { color: rgba(255,255,255,.88); }

/* ===== Factory, quality, custom pages (2026-10-16) ===== */
.dmy .num8--6 { grid-template-columns: repeat(6, 1fr); }
.dmy .fc8-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dmy .fc8-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dmy .steps8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: none; }
.dmy .steps8--7 { grid-template-columns: repeat(4, 1fr); }
.dmy .steps8 li { position: relative; background: #fff; border: 1px solid var(--line8); border-radius: 8px; padding: 26px 22px 22px; }
.dmy .s8--grey .steps8 li { border-color: transparent; }
.dmy .steps8 .n8 { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--g8); color: #fff; font: 700 15px "Montserrat", sans-serif; }
.dmy .steps8 h3 { margin: 14px 0 6px; font: 700 18px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .steps8 p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mut8); }
.dmy .addr8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dmy .addr8 li { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line8); border-radius: 8px; padding: 24px; }
.dmy .addr8 svg { width: 28px; height: 28px; color: var(--g8); flex: none; }
.dmy .addr8 h3 { margin: 0 0 6px; font: 700 18px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .addr8 p { margin: 0; color: var(--mut8); line-height: 1.6; }
.dmy .mount8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dmy .mount8 li { background: #fff; border-radius: 8px; padding: 18px 12px 14px; text-align: center; }
.dmy .mount8 img { width: 100%; max-width: 150px; height: 110px; object-fit: contain; }
.dmy .mount8 span { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink8); }
.dmy .col8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.dmy .col8 li { border: 1px solid var(--line8); border-radius: 8px; padding: 16px; }
.dmy .col8 i { display: block; height: 90px; border-radius: 6px; border: 1px solid var(--line8); margin-bottom: 12px; }
.dmy .col8 i.any { background: linear-gradient(135deg, #c0392b, #d98a2b, #e9c46a, #2a9d8f, #1d4d3c, #3d5a80); }
.dmy .col8 b { display: block; font: 700 16px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .col8 span { font-size: 13.5px; color: var(--mut8); }
@media (max-width: 1000px) {
  .dmy .num8--6 { grid-template-columns: repeat(3, 1fr); }
  .dmy .steps8, .dmy .steps8--7 { grid-template-columns: 1fr 1fr; }
  .dmy .mount8 { grid-template-columns: repeat(3, 1fr); }
  .dmy .col8 { grid-template-columns: repeat(3, 1fr); }
  .dmy .fc8-grid--3, .dmy .fc8-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .dmy .num8--6 { grid-template-columns: repeat(2, 1fr); }
  .dmy .steps8, .dmy .steps8--7, .dmy .addr8 { grid-template-columns: 1fr; }
  .dmy .mount8, .dmy .col8 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Inquiry system (2026-10-19) ===== */
/* sidebar Quote opens the form as a panel sliding in from the right */
.dmy-quote.drawer { inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); height: 100vh; max-height: 100vh; border-radius: 0; animation: dq-in .28s ease-out; }
.dmy-quote.drawer::backdrop { background: rgba(5,12,10,.45); }
.dmy-quote.drawer .qgrid { grid-template-columns: 1fr; }
@keyframes dq-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dmy-quote.drawer { animation: none; } }
/* shorter form: required fields first, the rest folded away */
.qform .qcontact { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.qform .qcontact legend { float: left; margin-right: 12px; font-size: 13.5px; font-weight: 600; }
.qform .qcontact label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
/* contact page */
.dmy.cat8h--short { padding: 30px 0 34px; }
.dmy .q8--light { color: var(--ink8); }
.dmy .q8--light .qform { border: 1px solid var(--line8); border-radius: 10px; padding: 26px; }
.dmy .contact-list--light li { border-color: var(--line8); }
.dmy .contact-list--light small { color: var(--mut8); }
.dmy .contact-list--light a, .dmy .contact-list--light div { color: var(--ink8); }
.dmy .contact-list--light svg { color: var(--g8); }
.dmy .ct8-tour { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--amb); background: var(--bg8); border-radius: 0 8px 8px 0; }
.dmy .ct8-tour svg { width: 16px; height: 16px; color: var(--amb); flex: none; margin-top: 4px; }
.dmy .ct8-tour p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mut8); }
.dmy .ct8-tour b { color: var(--ink8); }
.dmy .ct8-lead { margin: 0 0 10px; font: 700 18px "Montserrat", sans-serif; color: var(--ink8); }
.dmy .ct8-types { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dmy .ct8-types a { display: inline-flex; min-height: 38px; align-items: center; padding: 7px 14px; border: 1px solid var(--line8); border-radius: 999px; color: var(--ink8); text-decoration: none; font-size: 14px; }
.dmy .ct8-types a:hover { border-color: var(--g8); }
.dmy .ct8-types a.on { background: var(--g8); border-color: var(--g8); color: #fff; }

.qform .qcontact { display: flex; align-items: center; gap: 18px; }
.qform .qcontact legend { float: none; display: contents; }
.qform .qcontact label { flex-direction: row; gap: 8px; margin: 0; font-size: 14.5px; }
.qform .qcontact input[type=radio] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--g8); box-shadow: none; }
.dmy .contact-list--light a { color: var(--g8); font-weight: 600; text-decoration: none; }
.dmy .contact-list--light a:hover { text-decoration: underline; }
.dmy .q8.q8--light .contact-list, .dmy .q8.q8--light .contact-list div { color: var(--ink8); }
.dmy .q8.q8--light .contact-list a { color: var(--g8); }

/* live form (Contact Form 7 markup) */
.qform .qcontact .qlabel { font-size: 13.5px; font-weight: 600; }
.qform .qcontact .wpcf7-radio { display: flex; gap: 18px; }
.qform .qcontact .wpcf7-list-item { margin: 0; }
.qform .qcontact .wpcf7-list-item label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-weight: 500; }

/* Custom configuration and independent accessory navigation, 2026-10-20. */
.dmy-header .bar { gap: 18px; }
.dmy-header .nav a { padding-inline: 10px; font-size: 14px; }
.dmy-header .nav .sub--accessories { width: 600px; left: -160px; display: grid; grid-template-columns: 1fr 1fr; padding: 16px; gap: 14px 22px; }
.dmy-header .nav .nav-all { grid-column: 1 / -1; border-bottom: 1px solid var(--line8); }
.dmy-header .nav .nav-group > span { display: block; font-size: 12px; color: var(--mut8); padding: 0 10px 6px; text-transform: uppercase; letter-spacing: .05em; }
.dmy-header .nav .sub--accessories a { padding: 7px 10px; white-space: normal; font-size: 13px; }
.dmy-header .mnav-group { border-bottom: 1px solid var(--line8); }
.dmy-header .mnav .mnav-group > summary { width: 100%; height: auto; display: flex; justify-content: space-between; border: 0; border-radius: 0; padding: 13px 0; font-weight: 600; }
.dmy-header .mnav .mnav-group > summary svg { width: 16px; height: 16px; }
.dmy-header .mnav-group[open] > summary .caret { transform: rotate(180deg); }
.dmy-header .mnav-label { display: block; padding: 12px 18px 0; color: var(--mut8); font-size: 12px; }
.dmy .custom8-hint { display: flex; align-items: center; gap: 8px; padding: 12px 0; margin: 10px 0; color: var(--g8); text-decoration: none; font-size: 13px; border-bottom: 1px solid var(--line8); }
.dmy .custom8-hint svg { width: 18px; height: 18px; flex: none; }
.dmy .custom8-hint b { margin-left: auto; white-space: nowrap; }
.dmy.custom8 { background: var(--bg8); border-block: 1px solid var(--line8); }
.dmy .custom8-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 28px; }
.dmy .custom8-head h2 { margin-top: 8px; font-size: clamp(24px,2.6vw,34px); }
.dmy .custom8-head p, .dmy .custom8-bottom p { color: var(--mut8); font-size: 14px; }
.dmy .custom8-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 28px; }
.dmy .custom8-field label { display: block; margin-bottom: 7px; color: var(--ink8); font-size: 13px; font-weight: 600; }
.dmy .custom8-field input, .dmy .custom8-field select { display: block; width: 100%; min-width: 0; min-height: 48px; border: 1px solid #b8c7bf; border-radius: 4px; padding: 11px 14px; background: #fff; color: var(--ink8); font: 14px var(--font-body); }
.dmy .custom8-field input:focus-visible, .dmy .custom8-field select:focus-visible { outline: 2px solid var(--g8); outline-offset: 2px; }
.dmy .custom8-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; }
.dmy .custom8-bottom p { max-width: 68ch; }
.dmy .custom8-bottom .btn8 { flex: none; }
.dmy.custom8-band { background: var(--g8-l); border-top: 1px solid var(--line8); padding: 36px 0; }
.dmy.custom8-band .wrap8 { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dmy.custom8-band h2 { font-family: var(--font-display); font-size: 24px; line-height: 1.25; margin: 6px 0 10px; }
.dmy.custom8-band p { max-width: 76ch; font-size: 13px; color: var(--mut8); }
.dmy.custom8-band .btn8 { flex: none; }
.dmy .pd-main { touch-action: pan-y; }
.dmy .pd-media .pd-big { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.dmy .pd-media .pd-cap { min-height: 42px; padding: 10px 12px; margin: 0; line-height: 1.4; }
.dmy .pd-thumbs > li { flex: none; }
@media (max-width: 1100px) {
 .dmy-header .nav, .dmy-header .bar > .btn { display: none; }
 .dmy-header .mnav { display: block; }
}
@media (max-width: 760px) {
 .dmy .custom8-head { grid-template-columns: 1fr; gap: 14px; }
 .dmy .custom8-fields { grid-template-columns: 1fr; gap: 16px; }
 .dmy .custom8-bottom, .dmy.custom8-band .wrap8 { flex-direction: column; align-items: stretch; gap: 18px; }
 .dmy .custom8-hint { flex-wrap: wrap; }
 .dmy .custom8-hint b { margin-left: 26px; }
}

.dmy .acc8-fit p { color: var(--on-dark); }
.dmy .pd8-ov .acc8-fit > p { color: #e8efeb; }

/* DMY enquiry form: real CF7 block fields, 2026-10-21. */
.dmy .qform .qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.dmy .qform .qfield { min-width: 0; }
.dmy .qform .qfield.full { grid-column: 1 / -1; }
.dmy .qform .qfield > p, .dmy .qform .qsubmit > p { margin: 0; }
.dmy .qform .qfield label { margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.4; }
.dmy .qform .qfield .wpcf7-form-control-wrap { display: block; width: 100%; min-width: 0; }
.dmy .qform .qfield input, .dmy .qform .qfield select, .dmy .qform .qfield textarea { width: 100%; min-width: 0; min-height: 46px; margin: 0; border-radius: 5px; background: #f7f9f8; border-color: #cbd6d0; }
.dmy .qform .qfield textarea { height: 112px; min-height: 104px; max-height: 260px; resize: vertical; }
.dmy .qform .qfield input[type=file] { min-height: 46px; padding: 9px; font-size: 13px; background: #fff; }
.dmy .qform .qfield small { font-size: 12px; line-height: 1.5; margin-top: 0; }
.dmy .qform .qfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line8); }
.dmy .qform .qfoot > p { margin: 0; }
.dmy .qform .qfoot .small { flex: 1; min-width: 180px; font-size: 12px; line-height: 1.5; color: var(--mut8); }
.dmy .qform .qsubmit { flex: none; }
.dmy .qform .qsubmit .btn { min-height: 46px; padding: 12px 24px; border-radius: 5px; background: var(--amb); border-color: var(--amb); }
.dmy .qform .wpcf7-response-output:empty { display: none; }
.dmy-quote { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 10px; overscroll-behavior: contain; }
.dmy-quote:not(.drawer) { margin-block: auto !important; }
.dmy-quote .dq-head { position: sticky; top: 0; z-index: 3; padding: 24px 28px 16px; background: #fff; border-bottom: 1px solid var(--line8); }
.dmy-quote .dq-head .display { font-size: clamp(23px, 2.4vw, 28px); line-height: 1.2; }
.dmy-quote .dq-head .small { font-size: 13px; line-height: 1.5; max-width: 58ch; }
.dmy-quote .dq-head .eyebrow { display: none; }
.dmy-quote .qform { padding: 20px 28px 24px; }
.dmy-quote .close { width: 40px; height: 40px; min-height: 40px; font-size: 24px; border-color: #cbd6d0; }
.dmy-quote.drawer .qform .qgrid { grid-template-columns: 1fr; }
@media (max-width: 560px) {
 .dmy .qform .qgrid { grid-template-columns: 1fr; gap: 14px; }
 .dmy .qform .qfield input, .dmy .qform .qfield select, .dmy .qform .qfield textarea { font-size: 16px; min-height: 48px; }
 .dmy .qform .qfield textarea { height: 116px; min-height: 104px; }
 .dmy .qform .qfoot { align-items: stretch; gap: 10px; }
 .dmy .qform .qsubmit { width: 100%; }
 .dmy .qform .qsubmit .btn { width: 100%; }
 .dmy .qform .qfoot .small { min-width: 0; flex-basis: 100%; }
 .dmy-quote { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
 .dmy-quote .dq-head { padding: 18px 18px 14px; gap: 10px; }
 .dmy-quote .qform { padding: 18px; }
 .dmy-quote .dq-head .display { font-size: 23px; }
}

/* One continuous enquiry form; hints never count as customer input. */
.dmy .qform .qfield input::placeholder,
.dmy .qform .qfield textarea::placeholder { color: #748078; opacity: 1; font-weight: 400; }
.dmy .qform .qgrid--all { gap: 14px 20px; }
@media (max-width: 560px) { .dmy .qform .qgrid--all { gap: 14px; } }


/* Project enquiry workspace — shared form, 2026-10-21. */
.dmy .qform { padding: 0; border-radius: 10px; border: 1px solid #cbd6d0; background: #fff; color: #1b2420; box-shadow: 0 12px 36px rgba(16,46,37,.06); }
.dmy .qform > h3 { margin: 0; padding: 24px 26px 0; font: 700 21px/1.3 "Montserrat",sans-serif; }
.dmy .qform .q-frame { min-width: 0; }
.dmy .qform .q-entry { min-width: 0; padding: 24px 26px; }
.dmy .qform .q-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; font: 400 12px/1.5 "Inter",sans-serif; color: #59665f; }
.dmy .qform .q-meta strong { color: #1d4d3c; font-weight: 600; }
.dmy .qform .q-meta > span { flex: none; }
.dmy .qform .q-meta > p { display: contents; color: inherit; font: inherit; margin: 0; }
.dmy .qform .q-star { color: #8c5011; font-weight: 600; }
.dmy .qform .qgrid--all { gap: 13px 18px; }
.dmy .qform .qfield label { gap: 6px; font: 500 12px/1.5 "Inter",sans-serif; color: #1b2420; }
.dmy .qform .q-label { display: block; }
.dmy .qform .qfield input, .dmy .qform .qfield select, .dmy .qform .qfield textarea { height: 44px; min-height: 44px; padding: 10px 12px; border: 1px solid #cbd6d0; border-radius: 5px; background: #f7f9f8; font: 400 14px/1.5 "Inter",sans-serif; color: #1b2420; transition: border-color .15s,box-shadow .15s,background-color .15s; box-shadow: none; }
.dmy .qform .qfield textarea { height: 88px; min-height: 88px; max-height: 260px; }
.dmy .qform .qfield input::placeholder, .dmy .qform .qfield textarea::placeholder { color: #66736b; opacity: 1; }
.dmy .qform .qfield input:hover, .dmy .qform .qfield select:hover, .dmy .qform .qfield textarea:hover { border-color: #83988a; }
.dmy .qform .qfield input:focus-visible, .dmy .qform .qfield select:focus-visible, .dmy .qform .qfield textarea:focus-visible { outline: 2px solid #1d4d3c; outline-offset: 2px; border-color: #1d4d3c; background: #fff; box-shadow: none; }
.dmy .qform .q-upload { position: relative; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; border: 1px dashed #91aa9b; border-radius: 5px; background: #f3f6f5; cursor: pointer; }
.dmy .qform .q-upload-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; font: 400 27px/1 sans-serif; color: #1d4d3c; }
.dmy .qform .q-upload-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.dmy .qform .q-file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: #1d4d3c; }
.dmy .qform .q-upload small { font-size: 11px; line-height: 1.5; font-weight: 400; color: #59665f; }
.dmy .qform .q-upload-action { flex: none; color: #1d4d3c; font-size: 12px; font-weight: 600; border-bottom: 1px solid #91aa9b; }
.dmy .qform .q-upload .wpcf7-form-control-wrap { position: absolute; inset: 0; }
.dmy .qform .q-upload input[type=file] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.dmy .qform .q-upload:focus-within { outline: 2px solid #1d4d3c; outline-offset: 2px; }
.dmy .qform .q-upload:hover, .dmy .qform .q-upload.has-file { border-color: #1d4d3c; background: #eaf1ed; }
.dmy .qform .q-upload .wpcf7-not-valid-tip { position: absolute; top: 100%; left: 0; font-size: 12px; }
.dmy .qform .qfield:has(.wpcf7-not-valid-tip) { padding-bottom: 4px; }
.dmy .qform .qfield:has(.q-upload .wpcf7-not-valid-tip) { padding-bottom: 22px; }
.dmy .qform .qfoot { margin-top: 20px; padding-top: 18px; gap: 12px 18px; border-color: #dfe5e2; }
.dmy .qform .qfoot .small { min-width: 150px; font: 400 11px/1.6 "Inter",sans-serif; color: #59665f; }
.dmy .qform .qsubmit { position: relative; }
.dmy .qform .qsubmit .btn { min-height: 46px; padding: 12px 26px; background: #d98a2b; border: 1px solid #d98a2b; border-radius: 5px; color: #102e25; font: 700 14px/1.5 "Inter",sans-serif; box-shadow: none; }
.dmy .qform .qsubmit .btn:hover { background: #efad55; border-color: #efad55; transform: none; }
.dmy .qform .qsubmit .btn:focus-visible { outline: 2px solid #1d4d3c; outline-offset: 3px; }
.dmy .qform .wpcf7-spinner { position: absolute; top: 11px; right: -8px; margin: 0; }
.dmy .qform .q-advice { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px 26px; background: #f3f6f5; border-top: 1px solid #dfe5e2; border-radius: 0 0 10px 10px; min-width: 0; }
.dmy .qform .q-context { display: none; }
.dmy .qform .q-advice h4 { margin: 0 0 9px; font: 600 11px/1.5 "Inter",sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #1d4d3c; }
.dmy .qform .q-advice ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.dmy .qform .q-advice li { position: relative; padding-left: 12px; font: 400 12px/1.5 "Inter",sans-serif; color: #42544a; }
.dmy .qform .q-advice li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: #d98a2b; }
.dmy .qform .q-advice li > p { margin: 0; font: inherit; color: inherit; }
.dmy .qform .q-context > p:first-child, .dmy .qform .q-direct > p:has(> a) { margin: 0; }
.dmy .qform .q-advice p { margin: 10px 0 0; font: 400 12px/1.65 "Inter",sans-serif; color: #59665f; }
.dmy .qform .q-direct a { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font: 600 12px/1.5 "Inter",sans-serif; color: #1d4d3c; text-decoration: none; overflow-wrap: anywhere; }
.dmy .qform .q-direct a:hover { text-decoration: underline; }
.dmy .qform .q-direct a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.dmy .q8 .qform { padding: 0; }
.dmy .q8.q8--light .qform { padding: 0; border-color: #cbd6d0; }
.dmy-quote { width: min(1080px,calc(100vw - 40px)); max-height: calc(100dvh - 40px); border-radius: 12px; }
.dmy-quote .dq-head { padding: 21px 28px 19px; align-items: center; border-bottom: 1px solid #dfe5e2; }
.dmy-quote .dq-head .display { font-size: 24px; letter-spacing: -.025em; }
.dmy-quote .dq-head .small { font-size: 12px; margin-top: 4px; color: #59665f; }
.dmy-quote .close { width: 36px; height: 36px; min-height: 36px; border-radius: 50%; font-size: 23px; background: #f3f6f5; }
.dmy-quote .qform { padding: 0; border: 0; box-shadow: none; border-radius: 0; }
.dmy-quote .qform .q-entry { padding: 24px 28px; }
.dmy-quote .qform .q-advice { border-radius: 0; }
.dmy-quote .qform .wpcf7-response-output { margin: 0 28px 24px; }
@media (min-width: 1000px) {
 .dmy-quote:not(.drawer) .qform .q-frame { display: grid; grid-template-columns: 280px minmax(0,1fr); }
 .dmy-quote:not(.drawer) .qform .q-entry { grid-column: 2; grid-row: 1; }
 .dmy-quote:not(.drawer) .qform .q-advice { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 32px; padding: 30px 28px; background: #1d4d3c; border: 0; color: #fff; }
 .dmy-quote:not(.drawer) .qform .q-context { display: block; }
 .dmy-quote:not(.drawer) .qform .q-brand { display: block; font: 600 11px/1.5 "Inter",sans-serif; letter-spacing: .12em; color: #e4b87f; }
 .dmy-quote:not(.drawer) .qform .q-context h3 { margin: 18px 0 12px; color: #fff; font: 600 28px/1.18 "Montserrat",sans-serif; letter-spacing: -.035em; }
 .dmy-quote:not(.drawer) .qform .q-context p { font-size: 13px; line-height: 1.8; }
 .dmy-quote:not(.drawer) .qform .q-advice h4 { color: #e4b87f; }
 .dmy-quote:not(.drawer) .qform .q-advice li { color: #fff; font-size: 13px; }
 .dmy-quote:not(.drawer) .qform .q-advice p { color: #d2e1d9; }
 .dmy-quote:not(.drawer) .qform .q-direct { margin-top: auto; padding-top: 24px; border-top: 1px solid #527663; }
 .dmy-quote:not(.drawer) .qform .q-direct a { color: #fff; font-size: 13px; }
}
@media (max-width: 560px) {
 .dmy .qform > h3 { padding: 22px 20px 0; font-size: 20px; }
 .dmy .qform .q-entry { padding: 20px; }
 .dmy .qform .qgrid--all { gap: 14px; }
 .dmy .qform .qfield label { font-size: 13px; }
 .dmy .qform .qfield input, .dmy .qform .qfield select, .dmy .qform .qfield textarea { min-height: 48px; height: 48px; font-size: 16px; }
 .dmy .qform .qfield textarea { height: 110px; min-height: 110px; }
 .dmy .qform .q-meta { align-items: center; gap: 10px; font-size: 11px; margin-bottom: 18px; }
 .dmy .qform .q-meta strong { max-width: 14ch; }
 .dmy .qform .q-upload { padding: 12px 10px; gap: 8px; }
 .dmy .qform .q-upload-action { display: none; }
 .dmy .qform .q-upload small { font-size: 10px; }
 .dmy .qform .q-advice { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
 .dmy .qform .q-direct { padding-top: 16px; border-top: 1px solid #cbd6d0; }
 .dmy .qform .qfoot .small { font-size: 11px; }
 .dmy-quote { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
 .dmy-quote .dq-head { padding: 18px 20px 16px; gap: 14px; }
 .dmy-quote .dq-head .display { font-size: 21px; line-height: 1.25; }
 .dmy-quote .dq-head .small { max-width: 28ch; font-size: 11px; }
 .dmy-quote .close { width: 44px; height: 44px; min-height: 44px; }
 .dmy-quote .qform { padding: 0; }
 .dmy-quote .qform .q-entry { padding: 20px; }
 .dmy-quote .qform .wpcf7-response-output { margin: 0 20px 20px; }
}
.dmy-quote.drawer .qform { padding: 0; }
.dmy-quote.drawer .qform .q-advice { grid-template-columns: 1fr; }
@media (min-width: 1000px) and (max-height: 800px) {
 .dmy-quote:not(.drawer) .dq-head { padding: 12px 28px; }
 .dmy-quote:not(.drawer) .dq-head .display { font-size: 22px; }
 .dmy-quote:not(.drawer) .dq-head .small { display: none; }
 .dmy-quote:not(.drawer) .qform .q-entry { padding: 16px 28px; }
 .dmy-quote:not(.drawer) .qform .q-meta { margin-bottom: 10px; }
 .dmy-quote:not(.drawer) .qform .qgrid--all { gap: 8px 18px; }
 .dmy-quote:not(.drawer) .qform .qfield input:not([type=file]), .dmy-quote:not(.drawer) .qform .qfield select { height: 40px; min-height: 40px; padding-block: 8px; }
 .dmy-quote:not(.drawer) .qform .qfield textarea { height: 64px; min-height: 64px; }
 .dmy-quote:not(.drawer) .qform .q-upload { min-height: 60px; padding-block: 9px; }
 .dmy-quote:not(.drawer) .qform .qfoot { margin-top: 12px; padding-top: 12px; }
 .dmy-quote:not(.drawer) .qform .q-advice { padding-top: 26px; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
 .dmy .qform .qfield input, .dmy .qform .qfield select, .dmy .qform .qfield textarea { transition: none; }
}

/* Factory imagery supports the enquiry, separate from the field and submit area. */
.dmy-header .bar > .btn:hover { transform: none; }
.dmy .qform .q-factory { display: none; }
.dmy .q-factory .q-factory-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
.dmy .q-factory .q-factory-photos > p { display: contents; margin: 0; }
.dmy .q-factory .q-factory-photos img { display: block; width: 100%; min-width: 0; height: 90px; object-fit: cover; border-radius: 4px; }
.dmy .q-factory .q-factory-photos .q-factory-main { grid-column: 1/-1; height: 142px; object-position: 50% 54%; }
.dmy .q-factory .q-factory-cut { object-position: 50% 57%; }
.dmy .q-factory .q-factory-assembly { object-position: 50% 43%; }
.dmy .q-factory .q-brand { display: block; font: 600 10px/1.5 "Inter",sans-serif; letter-spacing: .1em; color: #e4b87f; }
.dmy .q-factory .q-factory-profile h3 { margin: 10px 0; font: 600 25px/1.2 "Montserrat",sans-serif; letter-spacing: -.025em; color: inherit; }
.dmy .q-factory .q-factory-profile p { margin: 0; font: 400 12px/1.8 "Inter",sans-serif; color: inherit; }
.dmy .q-factory .q-factory-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; font: 600 12px/1.5 "Inter",sans-serif; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.dmy .q-factory .q-factory-link:hover { color: #e4b87f; }
.dmy .q-factory .q-factory-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.dmy-quote:not(.drawer) .qform .q-factory { display: flex; flex-direction: column; gap: 24px; padding: 26px 24px; color: #fff; }
.dmy-quote .qform .q-factory .q-factory-profile { margin-top: 0; }
.dmy-quote .qform .q-factory .q-factory-profile p { color: #d2e1d9; }
.dmy .q-inline-factory { display: grid; gap: 18px; margin: 22px 0; padding: 20px 0; border-top: 1px solid rgba(203,214,208,.25); border-bottom: 1px solid rgba(203,214,208,.25); color: #fff; }
.dmy .q-inline-factory .q-factory-photos { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dmy .q-inline-factory .q-factory-photos img, .dmy .q-inline-factory .q-factory-photos .q-factory-main { grid-column: auto; height: 128px; }
.dmy .q-inline-factory .q-factory-profile h3 { margin-top: 8px; font-size: 21px; }
.dmy .q-inline-factory .q-factory-profile p { color: #d2e1d9; font-size: 13px; line-height: 1.7; }
.dmy .q-inline-factory .q-factory-link { margin-top: 12px; }
.dmy .q8--light .q-inline-factory { color: #1d4d3c; border-color: #cbd6d0; }
.dmy .q8--light .q-inline-factory .q-brand { color: #8c5011; }
.dmy .q8--light .q-inline-factory .q-factory-profile p { color: #59665f; }
.dmy-quote.drawer .qform .q-frame { display: flex; flex-direction: column; }
.dmy-quote.drawer .qform .q-factory { display: grid; grid-template-columns: 100px minmax(0,1fr); order: -1; gap: 16px; padding: 20px; background: #1d4d3c; color: #fff; border: 0; }
.dmy-quote.drawer .qform .q-factory .q-factory-photos { display: block; }
.dmy-quote.drawer .qform .q-factory .q-factory-photos img:not(.q-factory-main) { display: none; }
.dmy-quote.drawer .qform .q-factory .q-factory-main { height: 100%; min-height: 160px; }
.dmy-quote.drawer .qform .q-factory .q-factory-profile h3 { font-size: 20px; }
.dmy-quote.drawer .qform .q-factory .q-factory-profile p { font-size: 11px; }
@media (max-width: 999px) {
 .dmy-quote .qform .q-frame { display: flex; flex-direction: column; }
 .dmy-quote:not(.drawer) .qform .q-factory { display: grid; grid-template-columns: 160px minmax(0,1fr); order: -1; gap: 20px; padding: 20px 28px; background: #1d4d3c; color: #fff; border: 0; }
 .dmy-quote .qform .q-factory .q-factory-photos { display: block; height: 174px; }
 .dmy-quote .qform .q-factory .q-factory-photos img:not(.q-factory-main) { display: none; }
 .dmy-quote .qform .q-factory .q-factory-main { height: 174px; min-height: 0; max-height: 174px; }
 .dmy-quote .qform .q-factory .q-factory-profile h3 { font-size: 22px; }
 .dmy-quote .qform .q-factory .q-factory-profile p { font-size: 12px; }
}
@media (max-width: 560px) {
 .dmy-quote:not(.drawer) .qform .q-factory { grid-template-columns: 94px minmax(0,1fr); padding: 18px 20px; gap: 14px; }
 .dmy-quote .qform .q-factory .q-factory-profile h3 { font-size: 19px; margin: 8px 0; }
 .dmy-quote .qform .q-factory .q-factory-profile p { font-size: 11px; line-height: 1.65; }
 .dmy-quote .qform .q-factory .q-factory-link { margin-top: 10px; font-size: 11px; gap: 8px; }
 .dmy .q-inline-factory .q-factory-photos img, .dmy .q-inline-factory .q-factory-photos .q-factory-main { height: 100px; }
 .dmy .q-inline-factory .q-factory-profile h3 { font-size: 21px; }
}
@media (min-width: 1000px) and (max-height: 800px) {
 .dmy-quote:not(.drawer) .qform .q-factory { gap: 22px; padding: 22px 24px; }
 .dmy-quote .qform .q-factory .q-factory-photos .q-factory-main { height: 128px; }
 .dmy-quote .qform .q-factory .q-factory-photos img { height: 78px; }
 .dmy-quote .qform .q-factory .q-factory-profile h3 { font-size: 23px; }
}

/* ===== Quick-contact rail, ALUX layout in DMY colours (2026-10-26) ===== */
.dmy-fab { display: none !important; }
.dmy-top { display: none !important; }
.dmy.dmy-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; gap: 6px; padding: 9px 8px; border-radius: 18px; background: #fff; box-shadow: 0 16px 44px -14px rgba(13,40,30,.32); }
.dmy .rail-item { position: relative; width: 52px; height: 52px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--ink8); background: transparent; text-decoration: none; cursor: pointer; padding: 0; transition: background .25s, color .25s, transform .25s; }
.dmy .rail-item svg { width: 24px; height: 24px; }
.dmy .rail-item svg[fill="currentColor"] { stroke: none; }
.dmy .rail-item:hover, .dmy .rail-item:focus-visible { background: var(--g8); color: #fff; transform: translateY(-2px); }
.dmy .rail-quote { background: var(--amb); color: #fff; }
.dmy .rail-quote:hover, .dmy .rail-quote:focus-visible { background: var(--amb-d); }
.dmy .rail-divider { height: 1px; background: var(--line8); margin: 3px 6px; }
.dmy .rail-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px); white-space: nowrap; background: var(--g8-d); color: #fff; font: 600 13px "Inter", sans-serif; padding: 9px 14px; border-radius: 9px; opacity: 0; pointer-events: none; box-shadow: 0 10px 26px -10px rgba(13,40,30,.5); transition: opacity .25s, transform .25s; }
.dmy .rail-tip::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--g8-d); }
.dmy .rail-item:hover .rail-tip, .dmy .rail-item:focus-visible .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.dmy.dmy-mnav { display: none; }
@media (max-width: 760px) {
  .dmy.dmy-rail { display: none; }
  .dmy.dmy-mnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; min-height: 62px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line8); box-shadow: 0 -8px 22px -18px rgba(13,40,30,.4); backdrop-filter: blur(8px); }
  .dmy.dmy-mnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 50px; border-radius: 9px; color: var(--ink8); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .dmy.dmy-mnav svg { width: 21px; height: 21px; }
  .dmy.dmy-mnav svg[fill="currentColor"] { stroke: none; }
  .dmy.dmy-mnav span { font: 700 10.5px/1 "Inter", sans-serif; white-space: nowrap; }
  .dmy.dmy-mnav a:active, .dmy.dmy-mnav a[aria-current="page"] { background: var(--g8-l); color: var(--g8); }
  .dmy.dmy-mnav .mnav-quote { color: var(--amb-d); }
  .dmy.dmy-mnav .mnav-quote::before { content: ""; position: absolute; top: 7px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--amb); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .dmy .rail-item, .dmy .rail-tip { transition: none; } }

/* phones: keep the cookie banner above the bottom quick-links bar */
@media (max-width: 760px) { .cky-consent-container.cky-banner-bottom { bottom: calc(64px + env(safe-area-inset-bottom)) !important; } }

/* product pages: the sticky section nav duplicated the header's Get a quote button; the header and side rail keep it */
.dmy.pd8-nav .btn8 { display: none; }

/* Copy-to-clipboard notice for email/phone links on desktop (2026-10-28) */
.dmy.dmy-toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; transform: translate(-50%, 12px); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 10px; background: var(--g8-d); color: #fff; font: 600 14px/1.4 "Inter", sans-serif; box-shadow: 0 14px 34px -14px rgba(13,40,30,.55); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.dmy.dmy-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Breadcrumb on one line on phones (2026-10-28): it wrapped to two lines when the web font arrived and pushed the page down (CLS 0.19) */
@media (max-width: 760px) {
  .dmy .crumbs { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dmy .crumbs::-webkit-scrollbar { display: none; }
}

/* Content stays clear of the quick-contact rail (2026-10-28): the rail sits 18 px from the right edge and is 68 px wide,
   so below 1380 px the 1240 px wrap ran under it (66 px at 1280). The 3D designer is wider than the wrap. */
@media (min-width: 761px) and (max-width: 1379px) {
  .dmy .wrap, .dmy .wrap8 { max-width: calc(100vw - 140px); }
  .dmy.dmi .di-wrap { max-width: calc(100vw - 92px); margin-left: auto; margin-right: auto; }        /* information pages: 48 px inner padding */
  .dmy.dmy3d-product .dmy3d-product__inner { max-width: calc(100vw - 188px); margin-left: auto; margin-right: auto; }   /* 3D preview on product pages */
}
@media (min-width: 761px) {
  .entry-content > .dmy3d.dmy3d--designer { max-width: min(1400px, calc(100vw - 190px)); margin-left: auto !important; margin-right: auto !important; }
}

/* Cookie settings: on phones the floating button covered page content (the 3D designer's product picker);
   the footer "Cookie Settings" link reopens the same preferences on every page (2026-10-29) */
@media (max-width: 760px) {
  .cky-btn-revisit-wrapper { display: none !important; }
}
.dmy-footer .dmy-cookie-link { padding: 0; border: 0; background: none; color: var(--on-dark); font: inherit; cursor: pointer; text-align: left; }
.dmy-footer .dmy-cookie-link:hover { color: #fff; text-decoration: underline; }

/* Privacy policy page (2026-10-28) */
.dmy.legal8 .wrap8 { max-width: 820px; }
.dmy.legal8 h1 { font-size: clamp(30px, 4vw, 44px); margin: 18px 0 6px; }
.dmy.legal8 h2 { font-size: 21px; margin: 32px 0 8px; }
.dmy.legal8 p { color: var(--ink8); line-height: 1.7; }
.dmy.legal8 .legal8-date { color: var(--mut8); font-size: 14px; }
/* breadcrumb sits on white here, not on a dark hero */
.dmy.legal8 .crumbs, .dmy.legal8 .crumbs a { color: var(--mut8); }
.dmy.legal8 .crumbs a:hover { color: var(--g8); }
.dmy.legal8 .crumbs [aria-current] { color: var(--ink8); }

/* Phones get the 800 px copy of section backgrounds (2026-10-29) */
@media (max-width: 760px) { .dmy.band8 { background-image: var(--bg-sm, var(--bg)); } }

/* Fabric section on the zip-screen pages stops below the sticky nav like the other sections (2026-10-29) */
.dmy.s8#custom-fabrics { scroll-margin-top: calc(var(--hdr, 0px) + 56px) !important; }

/* sticky header works on the template-part wrapper */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.wp-site-blocks > header.wp-block-template-part .dmy-header { position: static; }


:root{--dmy-bar-h:6px}
.dmy-progress{display:none!important}
.dmy-reading,.dmy-reading *{box-sizing:border-box}
.dmy-reading{position:fixed;inset:auto 0 var(--bar-bottom,0px);height:36px;z-index:65;pointer-events:none;color:#1d4f3f}
.dmy-reading[hidden]{display:none!important}
.reading-track{position:absolute;inset:auto 0 0;height:var(--dmy-bar-h);background:#dce6e1;box-shadow:inset 0 1px 0 #ffffffb3;pointer-events:none}
.reading-fill{position:absolute;inset:0 auto 0 0;width:var(--bar-p,0%);overflow:hidden;background:linear-gradient(90deg,#1d4f3f 0%,#3b8271 78%,#be963e 100%);box-shadow:inset 0 1px 0 #ffffff45,inset 0 -1px 0 #00000014}
.reading-beam{position:absolute;left:-112px;top:0;bottom:0;width:112px;background:linear-gradient(100deg,transparent 0%,#e0f3e51a 22%,#fff1cfcc 52%,#ffffff38 65%,transparent 100%);animation:reading-flow 2.2s linear infinite;will-change:transform}
@keyframes reading-flow{from{transform:translateX(0)}to{transform:translateX(var(--bar-travel,112px))}}
.reading-tip{position:absolute;left:var(--bar-p,0%);top:0;width:2px;height:100%;transform:translateX(-2px);background:#fff1cf;box-shadow:0 0 4px #efbf6899;animation:reading-glint 1.8s ease-in-out infinite}
@keyframes reading-glint{0%,100%{opacity:.45}50%{opacity:1}}
.dmy-reading[data-empty=true] .reading-tip{display:none}
.reading-cue{position:absolute;left:50%;bottom:var(--dmy-bar-h);transform:translateX(-50%);display:flex;align-items:center;gap:10px;min-height:44px;max-width:320px;padding:10px 18px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;font:600 16px/22px 'Segoe UI',sans-serif;white-space:nowrap;cursor:pointer;pointer-events:auto;text-shadow:none;isolation:isolate}
.reading-cue::before{content:'';position:absolute;inset:10px 0 0;background:#1d4f3f;border:0;border-radius:5px 5px 0 0;box-shadow:none;z-index:-1;pointer-events:none}
.reading-cue svg{width:13px;height:16px;overflow:visible;flex-shrink:0}
.reading-cue path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reading-cue:focus-visible{outline:2px solid #d98925;outline-offset:-3px}
.dmy-reading[data-cue-hidden=true] .reading-cue{visibility:hidden;pointer-events:none}
.dmy-reading[data-paused=true] *{animation-play-state:paused!important}
@media(max-width:760px){:root{--dmy-bar-h:4px}.reading-cue{font-size:14px;gap:8px;max-width:280px;padding:12px 16px 0}.reading-cue::before{top:12px}.reading-cue svg{width:12px;height:15px}}
@media(prefers-reduced-motion:reduce){.dmy-reading *{animation:none!important}}