:root {
  color-scheme: light;
  --green: #0b5a33;
  --green-deep: #073d24;
  --green-dark: #073d24;
  --green-soft: #e7f0ea;
  --navy: #0b2636;
  --ink: #102938;
  --text: #102938;
  --muted: #536472;
  --line: #d8e1dc;
  --border: #d8e1dc;
  --paper: #f7f9f7;
  --canvas: #f7f9f7;
  --white: #fcfdfc;
  --surface: #fcfdfc;
  --panel: #eef3ef;
  --radius: 12px;
  --radius-card: 12px;
  --radius-control: 8px;
  --shell: min(1440px, calc(100vw - 152px));
  --header-height: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--text); background: var(--canvas); font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 10px 14px; color: var(--white); background: var(--green-deep); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; top: 0; z-index: 20; min-height: var(--header-height); padding: 10px clamp(18px, 4vw, 58px); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 22px; background: rgb(252 253 252 / .94); border-bottom: 1px solid rgb(216 225 220 / .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; }
.brand img { width: auto; height: 48px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.7vw, 24px); white-space: nowrap; color: var(--text); font-size: 14px; font-weight: 500; }
.desktop-nav a { position: relative; padding: 12px 0; }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; background: var(--green); opacity: 0; transform: scaleX(.4); transition: transform 180ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a[aria-current="page"] { color: var(--green); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .desktop-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.header-tools { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 500; }
.mobile-nav { display: none; }

.button, .header-cta { min-height: 44px; padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-control); color: #f8fbf9; background: var(--green); font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1); }
.header-cta { padding: 0 14px; font-size: 14px; }
.button:hover, .button:focus-visible { background: var(--green-deep); }
.header-cta:hover, .header-cta:focus-visible { background: var(--green-dark); }
.button:active { transform: translateY(1px); }
.text-link { display: inline-flex; align-items: center; min-height: 42px; color: var(--green-deep); font-weight: 600; border-bottom: 1px solid currentColor; }

.hero { position: relative; isolation: isolate; min-height: calc(100dvh - var(--header-height)); overflow: hidden; display: flex; align-items: center; background: #f4f6f4; }
.hero-photo { position: absolute; inset: 0; z-index: -2; background-image: url("/assets/images/products/gallery/promo-69432/02.jpg"); background-repeat: no-repeat; background-size: min(72vw, 1040px) auto; background-position: calc(50% + 320px) center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #f4f6f4 0%, rgb(244 246 244 / .98) 34%, rgb(244 246 244 / .58) 53%, rgb(244 246 244 / 0) 76%); }
.hero-copy { width: var(--shell); margin: 0 auto; padding: 56px 0 64px; }
.eyebrow, .component-label { margin: 0 0 12px; color: var(--green); font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 0; color: var(--navy); font-size: clamp(42px, 4.3vw, 62px); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; }
.hero h1 span { display: block; }
.hero-copy > p:not(.eyebrow) { max-width: 550px; margin: 26px 0 0; color: #405047; font-size: 20px; line-height: 1.5; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 26px; }

.section-shell { width: var(--shell); margin-inline: auto; }
.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading h2, .brief-copy h2, .faq-intro h2 { margin: 0; color: var(--navy); font-size: clamp(29px, 3.4vw, 48px); line-height: 1.14; letter-spacing: -.025em; font-weight: 620; }
.section-heading p:not(.eyebrow), .brief-intro, .faq-intro > p { max-width: 700px; margin: 18px 0 0; color: var(--muted); font-size: 17px; }

.products-section { padding: 116px 0 130px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; row-gap: 54px; }
.product-card { min-width: 0; display: grid; grid-template-rows: auto 1fr; align-content: start; border-top: 1px solid #bfcac3; }
.product-image { min-width: 0; height: 340px; padding: 14px; display: grid; place-items: center; overflow: hidden; background: var(--white); }
.product-image img { width: 100%; height: 100%; object-fit: contain; }
.product-copy { padding: 16px 4px 0; display: flex; flex-direction: column; }
.product-code { color: var(--green); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.product-card h3 { margin: 9px 0 8px; color: var(--navy); font-size: 20px; line-height: 1.28; letter-spacing: 0; font-weight: 620; }
.product-summary { margin: 0 0 9px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.product-use { margin: 0 0 14px; color: #42534a; font-size: 12px; line-height: 1.55; }
.product-use span { color: var(--green-deep); font-weight: 600; }
.product-card dl { margin: 0; padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); }
.product-card dl div { min-width: 0; }
.product-card dt { color: #728078; font-size: 11px; font-weight: 600; }
.product-card dd { margin: 3px 0 0; font-size: 13px; line-height: 1.35; font-weight: 500; }

.project-start { padding: 112px 0 126px; border-top: 1px solid var(--line); }
.project-start .section-heading { max-width: 860px; }
.project-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #b8c5bd; border-bottom: 1px solid #b8c5bd; }
.project-start-grid article { padding: 28px 32px 30px; border-right: 1px solid #b8c5bd; }
.project-start-grid article:last-child { border-right: 0; }
.project-start-grid span { color: var(--green); font-size: 11px; letter-spacing: .12em; }
.project-start-grid h3 { margin: 22px 0 10px; color: var(--navy); font-size: 21px; line-height: 1.3; font-weight: 600; }
.project-start-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.custom-brief { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(520px, .9fr); background: #eef2ef; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brief-visual { min-height: 100dvh; padding: clamp(24px, 3.4vw, 58px); display: grid; place-items: center; background: #e9eeea; }
.brief-mosaic { width: 100%; max-width: 820px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.brief-mosaic figure { position: relative; min-width: 0; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--white); }
.brief-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.brief-mosaic figcaption { position: absolute; right: 7px; bottom: 7px; left: 7px; padding: 5px 7px; color: #f8fbf9; background: rgb(7 38 29 / .78); border-radius: 4px; font-size: 9px; font-weight: 550; line-height: 1.2; text-align: center; backdrop-filter: blur(5px); }
.brief-copy { padding: 32px 4.5vw; display: flex; flex-direction: column; justify-content: center; }
.brief-copy h2 { max-width: 620px; }
.custom-scope { margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #b9c5bd; border-left: 1px solid #b9c5bd; }
.custom-scope span { min-height: 58px; padding: 12px 14px; display: flex; align-items: center; border-right: 1px solid #b9c5bd; border-bottom: 1px solid #b9c5bd; font-size: 12px; font-weight: 550; line-height: 1.3; background: rgb(255 255 255 / .56); }
.brief-extra { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.commercial-grid { margin: 30px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.commercial-grid article { padding: 17px 18px; border-radius: var(--radius); background: var(--white); }
.commercial-grid strong { display: block; color: var(--green-deep); font-size: 14px; font-weight: 600; }
.commercial-grid span { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.brief-copy .button { align-self: flex-start; }

.component-section { padding: 126px 0 138px; }
.component-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.component-tab { min-height: 76px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: #536159; font-size: 12px; font-weight: 550; line-height: 1.25; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.component-tab:hover, .component-tab:focus-visible { border-color: #8da396; color: var(--green); }
.component-tab.is-active { color: var(--white); border-color: var(--green); background: var(--green); }
.component-explorer { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(440px, .94fr); min-height: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.component-stage { min-height: 560px; padding: 30px; display: grid; place-items: center; overflow: hidden; background: var(--panel); }
.component-stage a { width: min(100%, 470px); height: 470px; display: grid; place-items: center; background: var(--white); border-radius: 8px; }
.component-stage img { width: 100%; height: 100%; object-fit: contain; }
.component-panel { padding: 40px; display: flex; flex-direction: column; }
.component-panel h3 { margin: 0; color: var(--navy); font-size: 30px; line-height: 1.14; letter-spacing: -.025em; font-weight: 650; }
.component-panel > p:not(.component-label):not(.availability-note) { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.component-options { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.component-option { min-height: 96px; padding: 10px; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--white); cursor: pointer; }
.component-option:hover, .component-option:focus-visible { border-color: #8da396; }
.component-option.is-active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.component-option img { width: 64px; height: 64px; object-fit: contain; background: var(--paper); }
.component-option strong { display: block; font-size: 13px; line-height: 1.25; font-weight: 600; }
.component-option span { display: block; margin-top: 5px; color: #718077; font-size: 11px; line-height: 1.35; }
.availability-note { margin: auto 0 0; padding-top: 24px; color: #6d7b73; font-size: 12px; border-top: 1px solid var(--line); }
.component-product-link { margin-top: 14px; align-self: flex-start; color: var(--green-deep); font-size: 13px; font-weight: 600; border-bottom: 1px solid currentColor; }
.component-help { margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.component-help a { color: var(--green-deep); font-weight: 600; border-bottom: 1px solid currentColor; }
.option-coverage-title { margin: 30px 0 14px; color: var(--navy); font-size: 22px; line-height: 1.25; font-weight: 600; }
.option-coverage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--white); }
.option-coverage article { padding: 0; display: grid; grid-template-rows: 178px auto; border-right: 1px solid var(--line); }
.option-coverage article:last-child { border-right: 0; }
.option-coverage img { width: 100%; height: 178px; object-fit: contain; background: #f4f6f4; }
.option-coverage article > div { padding: 18px 22px 20px; }
.option-coverage h3 { margin: 0; color: var(--navy); font-size: 16px; font-weight: 600; }
.option-coverage p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.process-section { padding: 118px 0 132px; border-top: 1px solid var(--line); }
.process-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; border-top: 1px solid #b9c4bd; border-bottom: 1px solid #b9c4bd; }
.process-grid li { padding: 24px 20px 26px; border-right: 1px solid #b9c4bd; }
.process-grid li:last-child { border-right: 0; }
.process-grid strong { display: block; color: var(--green-deep); font-size: 17px; line-height: 1.3; font-weight: 600; }
.process-grid p { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.production-heading { max-width: 820px; margin: 78px 0 30px; }
.production-heading h3 { margin: 0; color: var(--navy); font-size: 32px; line-height: 1.2; letter-spacing: -.02em; font-weight: 620; }
.production-heading > p:not(.eyebrow) { margin: 14px 0 0; color: var(--muted); font-size: 16px; }
.factory-proof { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.factory-proof figure { position: relative; min-width: 0; margin: 0; display: flex; flex-direction: column; overflow: visible; border-radius: var(--radius); background: var(--white); }
.factory-proof figure:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 106px; right: -18px; width: 18px; color: var(--green); font-size: 22px; line-height: 1; text-align: center; }
.factory-proof img { width: 100%; height: 228px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.factory-proof figcaption { padding: 15px 14px 17px; border-radius: 0 0 var(--radius) var(--radius); }
.factory-proof strong, .factory-proof span { display: block; }
.factory-proof strong { font-size: 13px; line-height: 1.35; font-weight: 600; }
.factory-proof span { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.55; }

.delivery-section { padding: 118px 0 126px; color: #ecf4f0; background: #0a2d3c; }
.delivery-section .section-heading { max-width: 860px; }
.delivery-section .section-heading h2 { color: #f6faf8; }
.delivery-section .section-heading p:not(.eyebrow) { color: #c4d4d7; }
.delivery-section .eyebrow { color: #7fc29b; }
.delivery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgb(222 238 232 / .24); border-bottom: 1px solid rgb(222 238 232 / .24); }
.delivery-grid article { min-height: 244px; padding: 30px 34px; border-right: 1px solid rgb(222 238 232 / .24); }
.delivery-grid article:last-child { border-right: 0; }
.delivery-grid span { color: #8dc6a3; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.delivery-grid h3 { margin: 30px 0 12px; color: #f6faf8; font-size: 24px; line-height: 1.2; font-weight: 600; }
.delivery-grid p { margin: 0; color: #c4d4d7; font-size: 13px; line-height: 1.65; }

.faq-section { padding: 126px 0 140px; background: #edf1ee; border-top: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 84px; align-items: start; }
.faq-intro { position: sticky; top: 110px; }
.faq-intro h2 { font-size: 46px; }
.faq-intro .text-link { margin-top: 24px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.faq-list details { border-bottom: 1px solid #bcc7c0; }
.faq-list summary { min-height: 84px; padding: 22px 38px 22px 0; position: relative; display: flex; align-items: center; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; line-height: 1.35; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 5px; top: 50%; color: var(--green); font-size: 24px; font-weight: 400; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: -2px 0 24px; padding-right: 28px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.site-footer { padding: 62px clamp(18px, 5vw, 76px) 82px; background: #071f2d; color: #edf4f1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .9fr .9fr; gap: 38px; max-width: 1440px; margin: 0 auto; }
.footer-logo-plate { display: inline-flex; align-items: center; justify-content: center; width: 172px; min-height: 76px; margin-bottom: 18px; padding: 10px 16px; border-radius: 8px; background: #f6faf7; }
.site-footer .footer-logo { width: 136px; height: 56px; object-fit: contain; }
.site-footer h3 { margin: 0 0 14px; color: #f2f7f4; font-size: 16px; font-weight: 600; }
.site-footer p, .site-footer a { color: #c5d7d0; font-weight: 400; }
.site-footer p { max-width: 410px; margin: 0; font-size: 13px; line-height: 1.65; }
.site-footer a { display: block; margin: 9px 0; font-size: 13px; }
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; }
.footer-bottom { max-width: 1440px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgb(226 239 232 / .16); color: #a9c0b7; font-size: 13px; }

:focus-visible { outline: 3px solid rgb(23 79 56 / .34); outline-offset: 3px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  :root { --shell: calc(100vw - 48px); }
  .site-header { padding-inline: 24px; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 10px; }
  .desktop-nav, .header-tools { display: none; }
  .menu-toggle { display: inline-flex; grid-column: 3; justify-self: end; }
  .mobile-nav.open { position: fixed; z-index: 19; top: 72px; right: 0; left: 0; padding: 18px 24px 24px; display: grid; gap: 2px; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 36px rgb(8 48 34 / .12); }
  .mobile-nav.open a { min-height: 44px; padding: 10px 4px; display: flex; align-items: center; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 500; }
  .mobile-nav.open a[aria-current="page"] { color: var(--green); }
  .mobile-language-panel { display: grid; gap: 10px; padding: 14px 4px 2px; }
  .mobile-language-label { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-language-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mobile-nav.open .mobile-language-options a { min-height: 44px; justify-content: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font-size: 13px; }
  .mobile-nav.open .mobile-language-options a[aria-current="true"] { border-color: rgb(23 79 56 / .42); background: #edf5f0; color: var(--green); }
  .mobile-language-options .ph-check-circle { display: none; }
  .hero-photo { background-size: 78vw auto; background-position: calc(50% + 285px) center; }
  .custom-brief { grid-template-columns: minmax(0, 1fr) 540px; }
  .brief-copy { padding: 46px 3.5vw; }
  .custom-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .component-explorer { grid-template-columns: minmax(0, 1fr) 500px; }
  .component-panel { padding: 32px; }
  .component-option { grid-template-columns: 64px 1fr; }
  .component-option img { width: 64px; }
  .faq-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 52px; }
}

@media (max-width: 920px) {
  :root { --shell: calc(100vw - 32px); }
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .hero { min-height: 760px; align-items: flex-end; }
  .hero-photo { background-size: 1160px auto; background-position: 54% 8%; opacity: .42; }
  .hero::after { background: linear-gradient(0deg, #f4f6f4 0%, rgb(244 246 244 / .9) 42%, rgb(244 246 244 / .12) 80%); }
  .hero-copy { padding: 320px 0 54px; }
  .hero h1 { max-width: 680px; font-size: clamp(44px, 8vw, 62px); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-start-grid { grid-template-columns: 1fr; }
  .project-start-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid #b8c5bd; }
  .project-start-grid article:last-child { border-bottom: 0; }
  .custom-brief { grid-template-columns: 1fr; }
  .brief-visual { min-height: auto; padding: 42px 18px; }
  .brief-mosaic { max-width: 760px; }
  .brief-copy { padding: 72px 24px; }
  .component-explorer { grid-template-columns: 1fr; }
  .component-stage { min-height: 480px; }
  .component-stage a { width: min(100%, 390px); height: 390px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid li { min-height: auto; border-right: 0; border-bottom: 1px solid #b9c4bd; }
  .factory-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factory-proof figure::after { display: none; }
  .option-coverage, .delivery-grid { grid-template-columns: 1fr; }
  .option-coverage article, .delivery-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .option-coverage article { grid-template-columns: 180px 1fr; grid-template-rows: 1fr; }
  .option-coverage img { height: 100%; min-height: 170px; }
  .option-coverage article:last-child, .delivery-grid article:last-child { border-bottom: 0; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .faq-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .mobile-language-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: 42px; }
  .hero-copy > p:not(.eyebrow) { font-size: 17px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .products-section, .project-start, .component-section, .process-section, .delivery-section, .faq-section { padding-block: 82px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 0; }
  .component-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-panel { padding: 26px 18px; }
  .component-options { grid-template-columns: 1fr; }
  .commercial-grid { grid-template-columns: 1fr; }
  .brief-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .brief-mosaic figcaption { font-size: 8px; }
  .factory-proof { grid-template-columns: 1fr; }
  .option-coverage article { grid-template-columns: 1fr; grid-template-rows: 178px 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep product media inside its allocated track at wide and narrow widths. */
body[data-page="customization"] .product-image { height: auto; aspect-ratio: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 0; }
body[data-page="customization"] .product-image img { display: block; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; object-position: center; }
body[data-page="customization"] .component-option { min-width: 0; }
body[data-page="customization"] .component-option > span { min-width: 0; overflow-wrap: anywhere; }

body[data-page="customization"] .component-options { max-height: 424px; overflow-y: auto; align-content: start; padding: 2px 8px 4px 2px; scrollbar-width: thin; scrollbar-color: #9bb1a3 transparent; }
body[data-page="customization"] .component-stage a { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
body[data-page="customization"] .component-stage img { min-width: 0; min-height: 0; }
body[data-page="customization"] .availability-note { margin-top: 18px; }

/* Custom-only real-photo cover panels. Labels remain localizable HTML. */
body[data-page="customization"] .product-image { position: relative; }
body[data-page="customization"] .custom-cover-view { position: absolute; top: 7%; color: #64786c; font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.25; pointer-events: none; }
body[data-page="customization"] .custom-cover-open { left: 6%; }
body[data-page="customization"] .custom-cover-stored { left: 80%; right: 2%; text-align: center; }