/* ==========================================================================
Base reset — 由项目自己拥有，不再依赖 Tailwind 的 preflight。
出处：从 Tailwind CSS v3.4 的 preflight（MIT License，基于 modern-normalize）
的构建产物中逐字节提取并去除注释，以保证移除 Tailwind 前后基础样式完全一致。
提取方式与校验见 AUDIT_AND_TOOLING_PLAN.md 的 Phase 3 记录。
规则语义必须保持原样。尤其不要删掉：
*,::before,::after box-sizing / border 归零
h1..h6 取消浏览器默认字号与粗体
ol,ul,menu 取消列表样式与缩进
blockquote,dl,dd,h1..h6,hr,figure,p,pre 取消默认外边距
html 行高、字体栈、text-size-adjust
任何改动都必须用 145 点视觉基线做逐像素回归验证。
========================================================================== */
*,
::before,
::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: var(--border-color);
}
::before,
::after {
--tw-content: '';
}
html,
:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: Avenir Next, Avenir, Segoe UI Variable, Segoe UI, sans-serif;
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button,
select {
text-transform: none;
}
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
:-moz-focusring {
outline: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
progress {
vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[type='search'] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
dialog {
padding: 0;
}
textarea {
resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
color: var(--placeholder);
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: var(--placeholder);
}
button,
[role="button"] {
cursor: pointer;
}
:disabled {
cursor: default;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
/* Visually hidden but available to assistive technology.
这是项目此前唯一真正使用的 Tailwind 工具类，现在显式拥有。 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
:root { --page-background:#f6f3ed; --card-background:#fbfaf7; --text-primary:#171a18; --text-secondary:#4b514d; --brand-green:#2c6449; --font-sans:'Instrument Sans',"Avenir Next",Avenir,"Segoe UI Variable","Segoe UI",ui-sans-serif,sans-serif; --border-color:#d2d3cc; --dark-region-text:#f5f6f2; --dark-region-muted:#c5cbc6; --focus-ring:#174b34; --comparison-focus-ring:#174b34; --content-max:1380px; --page-gutter:clamp(24px,4vw,72px); --ink:var(--text-primary); --ink-soft:var(--text-secondary); --paper:var(--page-background); --surface:var(--card-background); --surface-green:#edf1ec; --white:#fff; --line:var(--border-color); --green:var(--brand-green); --green-dark:#174b34; --green-light:#8ed0ac; --warm:#b9936c; --danger:#982e2e; --surface-accent:#ded6c9; --placeholder:#646e68; --dark-region:#1d2721; --dark-region-line:#47514b; --muted-surface:#e9e5dc; --media-placeholder:#dde2e1; --line-strong:#8d938b; --warm-line:#c8bfaf; --warning:#9a6938; --error:var(--danger); --radius-media:16px; --shadow-soft:0 4px 20px rgba(0,0,0,.06); --shadow-lift:0 14px 44px rgba(0,0,0,.06); --header:clamp(96px,5.3vw,104px); --overlay-peek:rgba(0,0,0,.4); /* 图库展厅面（2026-09-29 业主指令：改回品牌浅色）：这 5 个 token 仍在，但**指向品牌变量**——
展厅从此与 Features / Models 同一张米白底，不再是一块黑。保留 token 名是为了让 application-gallery-hall.css
一行都不用改；指向变量则是为了让展厅自动跟随品牌色未来的任何调整。 */
--gallery-bg:var(--paper); --gallery-surface:var(--surface); --gallery-ink:var(--ink); --gallery-ink-soft:var(--ink-soft); --gallery-line:var(--line); --gallery-accent:var(--brand-green); --glass-line:rgba(255,255,255,.4); --brand-facebook:#1877f2; --brand-linkedin:#0a66c2; --brand-tiktok:#25f4ee; --brand-youtube:#ff0000; --brand-black:#000000; --social-pill:rgba(255,255,255,.9); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* 品牌字体必须落在 html 上。
* 为什么不能只写在 body 上：紧接其后的 `body,button,input,select,textarea{font:inherit}`
* 用 font 简写把 body 的 font-family 一并重置为 inherit，于是 body 实际继承 html；
* 而 html 的字体来自 reset.css 里 preflight 的字面量栈（"Avenir Next", Avenir, …）。
* 这是审计 VIS-001「源码品牌意图与产物不一致」的真正原因 —— 即使买下 Avenir Next 授权也不生效。
* reset.css 是逐字节保留的 vendored preflight，所以这里不改它，而在它之后覆盖 html。 */
html { font-family:var(--font-sans); }
body { margin:0; min-width:320px; overflow-x:hidden; color:var(--ink); background:var(--paper); font-size:1rem; -webkit-font-smoothing:antialiased; }
body,button,input,select,textarea { font:inherit; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:400; letter-spacing:-.035em; }
p { color:var(--ink-soft); font-size:1rem; line-height:1.65; }
:where(a,button,input,select,textarea,[tabindex]):not(.comparison):focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
.site-footer, .hero, .product-hero{ --focus-ring:var(--green-light); }
.route-focus-target:focus { outline:none; }
[id] { scroll-margin-top:calc(var(--header) + 20px); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:999; left:1rem; top:-100px; padding:.8rem 1rem; background:white; color:var(--text-primary); }
.skip-link:focus { top:1rem; }
.section-shell { width:min(var(--content-max),calc(100% - 80px)); margin-inline:auto; }
.section { padding:clamp(5rem,9vw,9rem) 0; }
.eyebrow { display:block; margin-bottom:1.1rem; color:var(--green); font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow.light { color:var(--green-light); }
.section-heading.light h2,.section-heading.light p { color:white; }
.text-link { min-height:44px; display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 0 .35rem; color:var(--green); border-bottom:1px solid currentColor; font-weight:600; font-size:.875rem; }
.text-link.light { color:var(--green-light); }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.15rem; border:1px solid transparent; border-radius:0; font-size:.875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; transition:background .2s,color .2s,border-color .2s,transform .2s; cursor:pointer; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--green); color:white; }
.button-primary:hover { background:var(--green-dark); }
/* Explicit inquiry role: shared by the header, page CTAs and enquiry submit. */
.button-inquiry { background:var(--green); color:white; border:1px solid transparent; border-radius:0; font-weight:700; gap:.5rem; }
.button-inquiry:hover:not(:disabled),.button-inquiry:active:not(:disabled) { background:var(--green-dark); color:white; transform:none; }
.button-inquiry:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-color:white; }
.button-inquiry:disabled { cursor:wait; }
/* 【2026-09-26 业主指令：导航栏是真正的**悬浮覆盖层**（Overlay Header）】
`position:fixed; top:0; left:0; width:100%; z-index:50` —— 导航栏**不占文档流**，
所有页面首屏（Hero / 大图 / 顶栏背景）一律从 top:0 开始渲染，收起时页面顶部露出的是
页面自己的背景图或背景色，**不存在任何底色缝隙**。
防遮挡的安全距离按业主口径加在**组件内部的内容容器**上（例如 `.editorial-carousel-copy`、
`.gallery-hall`、面包屑容器），绝不加在 body 或背景容器上 ——
上一版把 `padding-top:var(--header)` 塞在 body 上，收起时就会在顶部露出一条米白硬边（业主实测发现的 Bug）。 */
.site-header { position:fixed; z-index:50; top:0; left:0; width:100%; height:var(--header); display:flex; align-items:center; gap:clamp(24px,2vw,32px); padding:0 clamp(24px,4vw,72px); background:rgba(246,243,237,.94); border-bottom:1px solid rgba(23,26,24,.12); backdrop-filter:blur(16px); transform:translateY(0); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.site-header[data-header-state="hidden"] { transform:translateY(-100%); }
/* reduce 下完全不位移（useAutoHideHeader 也不会置 hidden，这里是双保险）。 */
@media (prefers-reduced-motion:reduce) { .site-header { transition:none; } }
.brand { display:flex; min-width:clamp(132px,5vw,190px); align-items:center; }
.brand-logo { width:clamp(132px,5vw,190px); height:auto; flex:none; -o-object-fit:contain; object-fit:contain; }
.site-header .brand { min-width:clamp(190px,10.5vw,210px); }
.site-header .brand-logo { width:clamp(190px,10.5vw,210px); }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:clamp(30px,1.8vw,36px); margin-left:auto; }
.desktop-nav :is(a, .series-trigger) { min-height:48px; display:flex; align-items:center; padding:.6rem 0; border-bottom:1px solid transparent; font-size:1.125rem; font-weight:600; white-space:nowrap; }
.desktop-nav :is(a, .series-trigger):hover,.desktop-nav :is(a, .series-trigger).active { color:var(--green); border-color:currentColor; }
.desktop-series { position:relative; align-self:stretch; display:flex; align-items:center; }
.desktop-series .series-trigger { border:0; border-bottom:1px solid transparent; background:transparent; color:inherit; cursor:pointer; display:flex; align-items:center; gap:.28rem; }
.desktop-series .series-trigger svg { transition:transform .2s cubic-bezier(.16,1,.3,1); }
.desktop-series.open .series-trigger svg { transform:rotate(180deg); }
.series-dropdown { position:absolute; z-index:120; top:100%; left:50%; width:clamp(340px,20vw,430px); padding:.65rem 1.4rem 1rem; color:var(--ink); background:var(--white); border-top:3px solid var(--green); box-shadow:18px 20px 42px rgba(16,28,21,.2); transform:translateX(-50%); animation:series-menu-in .18s cubic-bezier(.16,1,.3,1) both; }
.desktop-nav .series-dropdown a { min-height:clamp(54px,3vw,72px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; padding:.75rem .15rem; border-bottom:1px solid var(--line); font-size:clamp(.95rem,.5vw,1.12rem); font-weight:500; }
.desktop-nav .series-dropdown a:hover,.desktop-nav .series-dropdown a.active { border-color:var(--green); }
.series-dropdown a span { color:var(--placeholder); font-size:clamp(.76rem,.38vw,.9rem); font-weight:500; }
@keyframes series-menu-in { from { opacity:0; transform:translate(-50%,-8px); } to { opacity:1; transform:translate(-50%,0); } }
.header-quote { min-height:54px; display:flex; align-items:center; padding:0 22px; font-size:17px; white-space:nowrap; transition:background .2s ease; }
.menu-toggle,.mobile-nav { display:none; }
.hero { position:relative; min-height:calc(100svh - var(--header)); display:grid; align-items:end; overflow:hidden; color:white; background:var(--dark-region); }
.hero>img { position:absolute; inset:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center 58%; object-position:center 58%; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,13,10,.76) 0%,rgba(8,13,10,.28) 52%,rgba(8,13,10,.1) 100%); }
.hero-content { position:relative; z-index:1; width:min(1380px,calc(100% - 120px)); margin:0 auto clamp(4rem,10vh,8rem); }
.hero h1 { max-width:860px; margin-bottom:1.4rem; font-size:clamp(3rem,6vw,6.8rem); line-height:.92; }
.hero-content>p { max-width:620px; margin-bottom:2rem; color:var(--surface-green); font-size:clamp(1rem,1.4vw,1.22rem); }
.hero-note { position:absolute; z-index:1; right:3rem; bottom:2rem; margin:0; color:var(--dark-region-text); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.carousel-media, .carousel-media .carousel-slide, .carousel-media .carousel-slide>picture, .carousel-media img{ position:absolute; inset:0; width:100%; height:100%; }
.carousel-media .carousel-slide { opacity:0; transform:scale(1.025); transition:opacity .4s ease,transform .4s ease; }
.carousel-media .carousel-slide.active { opacity:1; transform:scale(1); }
.carousel-media img { display:block; -o-object-fit:cover; object-fit:cover; -o-object-position:var(--carousel-object-position,center); object-position:var(--carousel-object-position,center); }
.comparison-section{ scroll-margin-top:var(--header); }
.projects-library { width:min(1840px,calc(100% - clamp(48px,5vw,128px))); }
.video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.2vw,2.5rem); }
.video-grid article { min-width:0; display:flex; flex-direction:column; color:var(--ink); background:transparent; }
.video-frame>button:not(.video-close) { padding:0; border:0; overflow:hidden; cursor:pointer; }.video-frame>button:not(.video-close):hover img { transform:scale(1.02); filter:brightness(.78); }
.video-safe-fallback { min-height:160px; display:grid; place-items:center; color:var(--text-secondary); background:var(--media-placeholder); font-size:.875rem; }
.video-title { min-height:2.6em; margin:1.15rem 0 0; font-size:clamp(1.125rem,1.4vw,1.5rem); font-weight:500; line-height:1.25; letter-spacing:-.02em; }
.video-title span { display:block; }
.projects-library--single .video-grid { grid-template-columns:minmax(0,1fr); max-width:1200px; }
.assembly-film { display:grid; grid-template-columns:minmax(0,2fr) minmax(360px,1fr); gap:clamp(3rem,4vw,5rem); align-items:stretch; color:var(--ink); background:transparent; }
.assembly-film-media { position:relative; align-self:start; overflow:hidden; aspect-ratio:16/9; background:var(--media-placeholder); }
.assembly-film-media iframe,.style-a-film-media iframe,.style-b-film-media iframe,.style-bl-film-media iframe,.style-c-film-media iframe { display:block; width:100%; height:100%; border:0; }
.assembly-film video { display:block; width:100%; height:100%; -o-object-fit:contain; object-fit:contain; background:var(--media-placeholder); cursor:pointer; }
.assembly-film-proof { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); padding:0; }
.assembly-film-proof--materials { --material-copy-size:clamp(1.75rem,2vw,3rem); min-height:0; display:grid; grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.assembly-film-materials { min-width:0; display:flex; flex-wrap:wrap; align-content:center; gap:.18em .22em; margin:0; padding:clamp(1.4rem,2.5vw,3rem) 0; color:var(--ink); font-size:var(--material-copy-size); font-weight:400; line-height:1.08; letter-spacing:-.03em; }
.assembly-film-materials span { display:inline-flex; align-items:baseline; }
.assembly-film-materials span:not(:last-child)::after { content:' ·'; margin-left:.22em; color:var(--green); }
.assembly-film-material-message { min-width:0; display:flex; align-items:center; max-width:24ch; margin:0; padding:clamp(1.4rem,2.5vw,3rem) 0; border-top:1px solid var(--line); color:var(--ink); font-size:var(--material-copy-size); line-height:1.12; letter-spacing:-.03em; text-wrap:balance; }
.product-image-wrap>picture,.gallery-main>picture,.gallery-thumbs picture,.plan-grid picture { display:block; width:100%; height:100%; }
.comparison { --comparison-split:50%; position:relative; width:100%; margin-inline:auto; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.comparison .comparison-media,.comparison .comparison-image { display:block; width:100%; height:auto; pointer-events:none; }
.comparison-layer-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--comparison-split)) 0 0); pointer-events:none; }
.comparison-control { position:absolute; z-index:3; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
/* Comparison 控件（VIS-016）。两处都是可客观验证的修正：
① 端点裁切：容器 overflow:hidden，而手柄按 left:split + translate(-50%) 定位，0%/100% 时必然各裁掉半个圆。
修法只夹**手柄的视觉中心**（clamp 到 23px / 100%-23px），分割线仍停在真实 split 上 —— 语义不变。
② 对比度：原先 1px #8b928b 在浅石材上只有 2.18:1、在中灰石上 1.54:1，低于 WCAG 非文本 3:1；
审计建议的 rgba(23,26,24,.22) 实测更低（1.55:1，见 AUDIT §50.1），所以改用既有 token
--text-secondary(#4b514d)：白 8.13:1 / 浅石材 5.55:1 / 中灰石 3.93:1。纯白分割线则加深色投影。 */
.comparison-line { position:absolute; inset-block:0; left:var(--comparison-split); width:2px; background:white; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 0 2px rgba(0,0,0,.45)); }
.comparison-handle { position:absolute; top:50%; left:clamp(23px,var(--comparison-split),calc(100% - 23px)); width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--text-secondary); border-radius:50%; color:var(--text-primary); background:white; box-shadow:0 2px 12px rgba(0,0,0,.2); transform:translate(-50%,-50%); pointer-events:none; }
.comparison-layer-before,.comparison-line,.comparison-handle { transition-property:none; }
.comparison:has(.comparison-control:focus-visible) { outline:3px solid var(--brand-green); outline-offset:3px; }
.project-empty { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem; border:1px solid var(--line); background:var(--page-background); text-align:center; }
.project-empty h3 { margin-bottom:.6rem; font-size:2rem; }
.project-empty p { max-width:620px; }
.video-grid iframe,.video-grid button { border:0; }
.style-a-film-media,.style-b-film-media,.style-bl-film-media,.style-c-film-media,.assembly-film-media { position:relative; }
.local-video-poster { position:absolute; z-index:1; inset:0; width:100%; height:100%; display:block; -o-object-fit:cover; object-fit:cover; pointer-events:none; }
.footer-lead { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding:5rem 0; border-bottom:1px solid var(--dark-region-line); }
.footer-lead h2 { max-width:770px; margin:0; font-size:clamp(2.2rem,4vw,4.6rem); line-height:1; }
.page-hero { min-height:480px; display:flex; align-items:end; padding:6rem max(40px,calc((100% - 1380px)/2)); background:var(--muted-surface); }
/* 悬浮覆盖层（2026-09-26 业主指令）：`.page-hero` 是 features / contact / privacy / terms 的**首块**，
它的顶距就是"文字离页面顶部的距离" —— 因此安全距离加在这个内容容器上（取既有节奏与
导航栏高度 + 16px 的较大值，窄屏 `4rem`/`--rhythm-section` 都低于导航栏 76px，审计实测会遮挡）。 */
.page-hero { padding-top:max(6rem, calc(var(--header) + 16px)); }
.page-hero.with-image { position:relative; min-height:670px; color:white; overflow:hidden; }
.page-hero.with-image>.page-hero-image { position:absolute; inset:0; width:100%; height:100%; }
.page-hero.with-image>.page-hero-image img,.page-hero.with-image>img.page-hero-image { width:100%; height:100%; -o-object-fit:cover; object-fit:cover; }
.page-hero>div:last-child { position:relative; z-index:1; width:min(820px,100%); }
.page-hero h1 { margin-bottom:1.25rem; font-size:clamp(3rem,6vw,6.7rem); line-height:.93; }
.page-hero p { max-width:690px; font-size:1.1rem; }
.page-hero.with-image p { color:var(--dark-region-text); }
.page-hero.page-hero--utility { min-height:0; padding-top:max(var(--rhythm-section), calc(var(--header) + 16px)); padding-bottom:0; }
.page-hero--utility p:last-child { margin-bottom:0; }
.section:is(.projects-library,.contact-layout,.legal-copy) { padding-block:var(--rhythm-section) var(--rhythm-group); }
/* 悬浮覆盖层（2026-09-26 业主指令）：`/contact`、`/privacy`、`/terms` 是**文字打头**的页面，
没有通顶画幅可依赖，因此顶部安全距离加在这两个内容容器自己身上（`--rhythm-section` 在窄屏只有
48px < 导航栏 76px，审计实测会钻进导航栏底下）。`.projects-library` 不在此列：它排在 Hero 之后。 */
.section:is(.contact-layout,.legal-copy) { padding-block:calc(var(--header) + var(--rhythm-section)) var(--rhythm-group); }
.page-hero--utility h1 { font-size:clamp(3rem,5vw,5.4rem); }
/* VIS-018（业主 2026-09-21）：panel-section / panel-advantage-grid / feature-page-grid 这一套
"六宫格 + 深绿卡墙"模板语言，实测在全部预渲染 HTML 与 TSX 里零命中（只有两条文本断言
在替它们续命），属于"没有页面的样式" —— 连规则一起删除。现在的 /features 是 features-story
叙事 + 证据表，版式节奏由 features.css 负责。 */
.applications-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--rhythm-group) clamp(28px,2.4vw,40px); }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; }.contact-layout>div:first-child h2 { font-size:3rem; }.contact-card { padding:3rem; background:var(--surface-accent); }.contact-card h2 { font-size:2.4rem; }.contact-card :is(.eyebrow,.contact-list a) { color:var(--green-dark); }.contact-list { margin:1.5rem 0 0; padding:0; list-style:none; }.contact-list li { display:grid; grid-template-columns:80px 1fr; gap:1rem; padding:.8rem 0; border-top:1px solid var(--warm-line); }.contact-list li>span:first-child { color:var(--text-secondary); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.contact-list a { min-height:44px; display:inline-flex; align-items:center; color:var(--green); border-bottom:1px solid currentColor; }
.legal-copy { max-width:900px; }.legal-copy h2 { margin:var(--rhythm-group) 0 var(--rhythm-title); font-size:2rem; }.legal-copy h2:first-child { margin-top:0; }.legal-copy p { margin-bottom:0; font-size:1.08rem; }
.product-hero-carousel-slide, .product-hero-carousel-slide>picture, .product-hero-carousel-slide img{ position:absolute; inset:0; width:100%; height:100%; }
.product-hero-carousel-slide { opacity:0; transition:opacity .9s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.product-hero-carousel-slide.is-active { opacity:1; }
.product-hero-carousel-slide img { display:block; -o-object-fit:cover; object-fit:cover; }
.gallery-thumbs button.active { border-color:var(--green); }
.style-a-film-section,.style-b-film-section,.style-bl-film-section,.style-c-film-section { padding:clamp(2rem,4vw,4rem) 0; background:var(--surface); }
.style-a-film-layout,.style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { width:min(1600px,calc(100% - 80px)); margin-inline:auto; }
.style-a-film-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; }
.style-a-film-media { width:100%; padding:0; overflow:hidden; border:0; background:var(--media-placeholder); aspect-ratio:16/9; cursor:pointer; }
.style-a-film-media video { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; }
.style-a-film-media:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.style-a-film-copy { display:flex; align-items:center; }
.style-a-film-copy h2 { width:100%; margin:0; font-size:clamp(2.2rem,3.4vw,4.35rem); line-height:.96; letter-spacing:-.04em; text-wrap:balance; }
.style-a-film-copy h2 span { display:block; padding:clamp(1.2rem,2vw,2rem) 0; border-top:1px solid var(--line); }
.style-a-film-copy h2 span:last-child { border-bottom:1px solid var(--line); }
.style-b-film-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,2fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; }
.style-b-film-copy { display:flex; align-items:center; }
.style-b-film-copy h2 { width:100%; margin:0; font-size:clamp(2.35rem,3.7vw,4.6rem); line-height:.94; letter-spacing:-.04em; text-wrap:balance; }
.style-b-film-copy h2 span { display:block; padding:clamp(1.2rem,2vw,2rem) 0; border-top:1px solid var(--line); }
.style-b-film-copy h2 span:last-child { border-bottom:1px solid var(--line); }
.style-b-film-copy strong { display:block; margin-bottom:.35rem; color:var(--green); font-size:1.12em; font-weight:600; }
.style-b-film-media { width:100%; min-width:0; padding:0; overflow:hidden; border:0; background:var(--white); aspect-ratio:950/537; cursor:pointer; }
.style-b-film-media video { width:100%; height:100%; display:block; -o-object-fit:cover; object-fit:cover; transform:scale(1.006); }
.style-bl-film-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; }
.style-bl-film-media { width:100%; min-width:0; padding:0; overflow:hidden; border:0; background:var(--media-placeholder); aspect-ratio:16/9; cursor:pointer; }
.style-bl-film-media video { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; }
.style-bl-film-media:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.style-bl-film-proof { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); }
.style-c-film-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,2fr); gap:clamp(3rem,6vw,7rem); align-items:stretch; }
.style-c-film-copy { display:flex; align-items:center; }
.style-c-film-copy h2 { width:100%; margin:0; padding:clamp(1.2rem,2vw,2rem) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:clamp(2.15rem,3vw,3.8rem); line-height:.98; letter-spacing:-.04em; text-wrap:balance; }
.style-c-film-media { width:100%; min-width:0; padding:0; overflow:hidden; border:0; background:var(--media-placeholder); aspect-ratio:16/9; cursor:pointer; }
.style-c-film-media video { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; }
.style-c-film-media:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.plan-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }.plan-grid figure { margin:0; padding:1rem; background:var(--page-background); }.plan-grid img { width:100%; height:540px; -o-object-fit:contain; object-fit:contain; }.plan-grid figcaption { margin-top:1rem; color:var(--text-secondary); font-size:.875rem; }
.quote-form{ width:min(100%,800px); margin-inline:auto; }
.field { min-width:0; display:flex; flex-direction:column; }
.field.full,.checkbox.full { grid-column:1/-1; }
.field label { min-height:24px; margin-bottom:.5rem; font-size:.8rem; font-weight:700; letter-spacing:.015em; }
.field input,.field select,.field textarea { width:100%; min-height:56px; padding:.85rem 1rem; border:1px solid var(--line-strong); border-radius:0; color:var(--ink); background:var(--card-background); transition:border-color .16s,box-shadow .16s; }
.field input:focus,.field select:focus,.field textarea:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 2px rgba(21,72,51,.14); }
.field textarea { resize:vertical; }
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"] { border-color:var(--danger); }
.field-error { margin:.35rem 0 0; color:var(--danger); font-size:.8rem; }
.checkbox { min-height:44px; display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; line-height:1.5; cursor:pointer; }
.checkbox input { width:22px; height:22px; flex:none; margin-top:2px; }
.quote-submit-error { margin-top:1.25rem; padding:1rem; border-left:3px solid var(--danger); background:var(--muted-surface); }
.quote-form [aria-invalid="true"], .quote-success h1{ scroll-margin-top:calc(var(--header) + 24px); }
.quote-success { min-height:calc(100vh - var(--header)); /* 兜底 */
/* 【2026-10-01】同上：动态工具栏下用 dvh 才不会底部被裁。 */
min-height:calc(100dvh - var(--header)); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 1.5rem; text-align:center; }
.quote-success-number { color:var(--green); font-size:.75rem; font-weight:700; letter-spacing:.14em; }
.quote-success h1 { max-width:900px; font-size:clamp(2.8rem,5vw,5rem); line-height:1; }
.quote-success>p { max-width:650px; }
.quote-success-actions { display:flex; align-items:center; gap:2rem; margin-top:2rem; }
.quote-success-actions .text-link { display:inline-flex; align-items:center; gap:.5rem; }
.quote-success-reset { margin-top:2rem; padding:.5rem; border:0; border-bottom:1px solid currentColor; color:var(--placeholder); background:transparent; cursor:pointer; }
/* 「已入库」与「通知邮件已发出」是两件事：状态标签与说明文字分开呈现，绝不谎报已发送。 */
.quote-success-label { margin-top:1.5rem; color:var(--green); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.quote-success-status { margin-top:.5rem; max-width:650px; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.quote-success-status a { min-height:44px; display:inline-flex; align-items:center; color:var(--green-dark); font-weight:600; }
.quote-success-status a:hover { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:1023px) {
.assembly-film { grid-template-columns:1fr; gap:3rem; }
.assembly-film-media { width:min(100%,960px); margin-inline:auto; }
.assembly-film-proof { grid-template-rows:auto; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.assembly-film-proof--materials { min-height:clamp(420px,60vw,560px); display:grid; }
}
@media (min-width:901px) and (max-width:1279px) {
:root { --header:clamp(88px,7.3vw,94px); }
.site-header { gap:clamp(16px,1.7vw,22px); padding-inline:clamp(24px,2.5vw,32px); }
.site-header .brand { min-width:clamp(160px,14vw,178px); }
.site-header .brand-logo { width:clamp(160px,14vw,178px); }
.desktop-nav { gap:clamp(14px,1.3vw,20px); }
.desktop-nav :is(a, .series-trigger) { font-size:clamp(16px,1.25vw,17px); }
.header-quote { min-height:48px; padding-inline:clamp(14px,1.5vw,18px); font-size:1rem; }
}
@media (max-width:1279px) {
.applications-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
.video-grid { grid-template-columns:1fr; }
.style-a-film-layout,.style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { grid-template-columns:1fr; gap:2.5rem; }
.style-a-film-copy h2 { font-size:clamp(2.3rem,7vw,3.6rem); }
.style-b-film-copy h2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; font-size:clamp(2.3rem,7vw,3.6rem); }
.style-b-film-copy h2 span:last-child { border-bottom:0; }
.style-bl-film-proof { grid-template-rows:auto auto; gap:2.5rem; }
.style-c-film-copy h2 { font-size:clamp(2.3rem,7vw,3.6rem); }
.assembly-film-proof { grid-template-columns:1fr; grid-template-rows:auto auto; gap:2.5rem; }
.brand { min-width:118px; }.brand-logo { width:118px; }
:root { --header:76px; }.section-shell { width:min(100% - 40px,1380px); }.site-header { gap:16px; padding-inline:16px; }.site-header .brand { min-width:clamp(140px,38vw,150px); }.site-header .brand-logo { width:clamp(140px,38vw,150px); }.desktop-nav,.header-quote { display:none; }.menu-toggle { display:grid; place-items:center; width:44px; height:44px; margin-left:auto; padding:0; border:0; background:transparent; cursor:pointer; }.mobile-nav { position:absolute; z-index:90; top:100%; right:0; left:0; height:calc(100dvh - var(--header)); overflow-y:auto; display:flex; flex-direction:column; gap:0; padding:2rem 1.25rem; background:var(--paper); visibility:hidden; transition:opacity .2s,visibility .2s; }.mobile-nav.open { visibility:visible; }.mobile-nav>a:not(.button) { min-height:56px; display:flex; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.35rem; }.mobile-nav .button { margin-top:2rem; align-self:stretch; }
.mobile-series-block { border-bottom:1px solid var(--line); }.mobile-series-toggle { width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between; padding:0; border:0; background:transparent; font-size:1.35rem; text-align:left; }.mobile-series-toggle svg { transition:transform .2s; }.mobile-series-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }.mobile-series-links { display:flex; flex-direction:column; padding:0 0 1rem 1rem; }.mobile-series-links a { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); color:var(--text-secondary); font-size:.9rem; }.mobile-series-links a span { color:var(--text-secondary); font-size:.75rem; }
.mobile-nav a[aria-current="page"] { padding-left:.75rem; color:var(--green-dark); box-shadow:inset 3px 0 0 var(--green); font-weight:700; }
.mobile-nav { transform:none; opacity:0; pointer-events:none; }.mobile-nav.open { opacity:1; pointer-events:auto; }
.hero-content { width:calc(100% - 40px); }.hero-note { right:1.25rem; }.contact-layout{ grid-template-columns:1fr; }.plan-grid img { height:420px; }
}
@media (max-width:700px) {
.applications-index-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
.style-a-film-layout,.style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { width:calc(100% - 32px); }
.style-a-film-copy h2 { font-size:clamp(2.25rem,10vw,3.1rem); }
.style-b-film-layout,.style-bl-film-layout,.style-c-film-layout { gap:2rem; }
.style-b-film-copy h2 { grid-template-columns:1fr; gap:0; font-size:clamp(2.25rem,11vw,3.25rem); }
.style-b-film-copy h2 span:last-child { border-bottom:1px solid var(--line); }
.assembly-film-proof--materials { --material-copy-size:clamp(1.85rem,7.4vw,2.55rem); }
.assembly-film-material-message { max-width:22ch; }
.style-c-film-copy h2 { font-size:clamp(2.25rem,10vw,3.1rem); }
.menu-toggle { position:relative; z-index:95; color:var(--ink); }
.menu-toggle svg { width:24px; height:24px; display:block; stroke:currentColor; }
.projects-library { width:calc(100% - 32px); }
.assembly-film { gap:2rem; }
.assembly-film-proof { gap:2rem; padding:0; }
.section { padding:4.5rem 0; }.section-shell { width:calc(100% - 32px); }.footer-lead{ align-items:flex-start; flex-direction:column; }.hero { min-height:760px; }.hero>img { -o-object-position:58% center; object-position:58% center; }.hero-content { width:calc(100% - 32px); margin-bottom:5rem; }.hero h1 { font-size:3.2rem; }.hero-note { right:1rem; bottom:1rem; }.page-hero { min-height:480px; padding:max(4rem, calc(var(--header) + 16px)) 1rem; }.page-hero.with-image { min-height:620px; }.page-hero h1 { font-size:3.3rem; }.contact-card { padding:2rem 1.25rem; }.plan-grid { grid-template-columns:1fr; }.plan-grid img { height:auto; min-height:280px; }.quote-success dl { flex-direction:column; gap:1rem; }
}
/* Homepage and Series catalog. */
/* Application scene index. */
.applications-index-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--rhythm-group) clamp(24px,3vw,56px); }
/* Why EcoNest: residential product story first, manufacturing proof second. */
@media (max-width:767px) {
.applications-index-grid { grid-template-columns:1fr; }
}
/* Project portfolio. */
.projects-library { width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-wide)); }
.projects-library:not(.projects-library--single) .video-grid { display:grid; grid-template-columns:1fr; row-gap:var(--rhythm-group); }
.projects-library:not(.projects-library--single) .video-grid article {
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
align-items:end;
gap:clamp(36px,6vw,120px);
padding:0;
}
.projects-library:not(.projects-library--single) .video-grid article:nth-child(even) { grid-template-columns:minmax(300px,.65fr) minmax(0,1.35fr); }
.projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-frame { grid-column:2; }
.projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-project-copy { grid-column:1; grid-row:1; }
.projects-library .video-title { min-height:0; margin:0 0 18px; font-size:clamp(2rem,3vw,4.4rem); line-height:.94; letter-spacing:-.04em; }
.projects-library--single .video-grid { max-width:1480px; margin-inline:auto; }
@media (max-width:820px) {
.projects-library:not(.projects-library--single) .video-grid article,
.projects-library:not(.projects-library--single) .video-grid article:nth-child(even) { grid-template-columns:1fr; gap:var(--rhythm-caption); }
.projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-frame,
.projects-library:not(.projects-library--single) .video-grid article:nth-child(even) .video-project-copy { grid-column:auto; grid-row:auto; }
}
.quote-success h1:focus{ outline:none; }
@media (max-width:620px) {
.page-hero--utility { padding-inline:1rem; }
.page-hero--utility h1 { font-size:clamp(2.7rem,12vw,3.5rem); }
.video-title { min-height:0; font-size:1.125rem; }
}
@media (max-width:620px) and (orientation:portrait) {
.home-carousel .carousel-media .carousel-slide { transform:none; transition:opacity .4s ease; }
.home-carousel .carousel-media .carousel-slide.active { transform:none; }
}
/* Get a Quote — single-page architectural concierge layout. */
@media (max-width:620px) {
.quote-success-actions { align-items:stretch; flex-direction:column; }
}
@media (max-width:767px) and (orientation:portrait) {
.page-hero--mobile-split.with-image { min-height:0; display:grid; grid-template-rows:auto auto; align-items:stretch; padding:0; overflow:visible; color:var(--ink); background:var(--paper); }
.page-hero--mobile-split.with-image>.page-hero-image { position:relative; inset:auto; width:100%; height:auto; display:block; aspect-ratio:var(--mobile-hero-aspect,16/9); overflow:hidden; background:var(--paper); }
.page-hero--mobile-split.with-image>.page-hero-image img,
.page-hero--mobile-split.with-image>img.page-hero-image { width:100%; height:100%; -o-object-fit:contain; object-fit:contain; background:var(--paper); }
.page-hero--mobile-split.with-image>.hero-shade { display:none; }
.page-hero--mobile-split.with-image>div:last-child { position:relative; inset:auto; z-index:1; width:calc(100% - 32px); margin:0 auto; padding:clamp(2rem,8vw,2.75rem) 0 max(3rem,calc(2.5rem + env(safe-area-inset-bottom))); color:var(--ink); background:var(--paper); }
.page-hero--mobile-split h1 { max-width:13ch; margin-bottom:1rem; font-size:clamp(2.5rem,11vw,3.35rem); line-height:.96; letter-spacing:-.04em; overflow-wrap:normal; word-break:normal; text-wrap:balance; }
.page-hero--mobile-split.with-image p { max-width:40ch; margin-bottom:1.5rem; color:var(--ink-soft); font-size:1rem; line-height:1.6; overflow-wrap:break-word; }
}
@media (max-width:620px) and (orientation:portrait) and (pointer:coarse) {
}
/* Shared architectural editorial system. */
:root {
--content-max:2560px;
--content-wide:3320px;
--page-gutter:clamp(16px,3.25vw,96px);
--reading-measure:68ch;
--section-space:clamp(72px,7.5vw,180px);
--section-space-compact:clamp(48px,5vw,112px);
--display-xl:clamp(3.1rem,5.4vw,8rem);
--display-lg:clamp(2.55rem,4.25vw,6rem);
--display-md:clamp(2rem,3vw,4.1rem);
--header:clamp(76px,4.2vw,92px);
}
html { scroll-padding-top:calc(var(--header) + 24px); }
body { font-size:clamp(15px,.24vw + 14px,18px); line-height:1.65; }
p { max-width:var(--reading-measure); }
.section-shell { width:min(calc(100% - (var(--page-gutter) * 2)),var(--content-max)); }
.section { padding-block:var(--section-space); }
.eyebrow { letter-spacing:.16em; }
.section-heading h2,
.page-hero h1,
.marine-hero h1 { font-size:var(--display-lg); line-height:.94; letter-spacing:-.045em; text-wrap:balance; }
.button { min-height:48px; padding:0 1.45rem; border-radius:0; box-shadow:none; letter-spacing:.08em; }
.button:hover { transform:none; }
.text-link { border-bottom:1px solid currentColor; padding-bottom:.18rem; }
.site-header {
height:var(--header);
gap:clamp(18px,2vw,40px);
padding-inline:var(--page-gutter);
background:rgba(246,243,237,.97);
}
.site-header .brand { min-width:clamp(136px,9.5vw,190px); }
.site-header .brand-logo { width:clamp(136px,9.5vw,190px); max-height:calc(var(--header) - 24px); }
.desktop-nav { margin-left:auto; gap:clamp(16px,1.5vw,32px); }
.desktop-nav :is(a, .series-trigger) { letter-spacing:.045em; }
.header-quote { margin-left:clamp(0px,.7vw,12px); }
@media (min-width:2000px) {
.desktop-nav { font-size:1rem; }
}
@media (max-width:767px) {
:root { --section-space:clamp(58px,18vw,84px); --section-space-compact:48px; }
.section-shell { width:calc(100% - 32px); }
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1024px) {
:root { --header:64px; }
.site-header { padding-inline:max(16px,env(safe-area-inset-left)); }
.site-header .brand { min-width:126px; }
.site-header .brand-logo { width:126px; max-height:44px; }
.menu-toggle { width:44px; height:44px; }
}
/* Shared Series detail template. */
.product-page { overflow:clip; }
.gallery-thumbs button.active { border-color:var(--green); }
.plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,72px); }
.plan-grid figure { min-width:0; margin:0; display:flex; flex-direction:column; background:transparent; }
.plan-view-button { position:relative; width:100%; display:block; padding:0; border:0; background:white; cursor:pointer; }
.plan-view-button picture,
.plan-view-button img { width:100%; height:auto; display:block; -o-object-fit:contain; object-fit:contain; }
.plan-grid figcaption { position:static; min-height:0; padding:18px 0 0; color:var(--ink); background:transparent; font-size:.8rem; line-height:1.5; }
.plan-grid--wide-primary figure:first-child { grid-column:1/-1; }
.plan-lightbox { position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:clamp(16px,3vw,56px); background:rgba(15,20,17,.94); }
.plan-lightbox-close { position:absolute; z-index:2; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); color:white; background:var(--dark-region); cursor:pointer; }
/* 极简放大层（2026-09-22 业主规范）：只有遮罩 + 居中图片 + 右上角 X。
图片强制 contain，并同时受 90vw / 90vh 与 **2560px 上限**约束 —— 超宽屏上不会去要一张比
管线最大派生（2560）更大的图，也不会把图拉过它的原生宽度（管线的原则是不放大）。 */
.plan-lightbox-figure { display:grid; place-items:center; width:100%; height:100%; }
.plan-lightbox-figure picture,
.plan-lightbox-figure img { width:auto; height:auto; max-width:min(90vw,2560px); max-height:min(90vh,1600px); -o-object-fit:contain; object-fit:contain; }
/* 多图轮播（2026-09-29 业主指令）：左右翻页键 + 计数。单张图时这两个元素根本不渲染，
所以"只有一个 X"的极简观感对平面图之类的单图场景仍然成立。 */
.plan-lightbox-nav { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); color:white; background:var(--dark-region); cursor:pointer; }
.plan-lightbox-nav:hover { border-color:white; }
.plan-lightbox-nav:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.plan-lightbox-nav--prev { left:max(12px,env(safe-area-inset-left)); }
.plan-lightbox-nav--next { right:max(12px,env(safe-area-inset-right)); }
/* 复用 ChevronDown（图标集里没有左右箭头），各自旋转 90° —— 与图集翻页键的同一手法。 */
.plan-lightbox-nav--prev svg { transform:rotate(90deg); }
.plan-lightbox-nav--next svg { transform:rotate(-90deg); }
.plan-lightbox-counter { position:absolute; z-index:2; bottom:max(16px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); margin:0; color:var(--dark-region-muted); font-size:.875rem; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
@media (max-width:619px) {
.plan-lightbox-nav { width:44px; height:44px; }
}
@media (max-width:620px) {
.plan-grid { grid-template-columns:1fr; gap:38px; }
.plan-grid--wide-primary figure:first-child { grid-column:auto; }
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:520px) and (max-width:1024px) {
:root { --header:calc(52px + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .button:hover, .video-frame>button:not(.video-close):hover img, .product-image-wrap:hover img, .application-card:hover img{ transform:none!important; } }
@media (prefers-reduced-motion:reduce) { .home-carousel .carousel-slide{ transition:none!important; transform:none!important; } }
/* Detail Hero only: the image's intrinsic aspect ratio defines its full frame. */
@media (max-width:620px) and (orientation:portrait) and (pointer:coarse) {
/* Preserve Style A's existing mobile content order and controls outside this media frame. */
}
/* Projects films: click-to-play cards, independent of other video modules. */
.projects-library:has(.project-video-cards) { max-width:1840px; }
.project-video-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.project-video-card { display:flex; flex-direction:column; min-width:0; border-bottom:1px solid var(--line); padding-bottom:20px; }
.project-video-media { position:relative; aspect-ratio:16/9; background:var(--dark-region); }
.project-video-cover,.project-video-player,.project-video-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.project-video-cover { padding:0; cursor:pointer; background:var(--dark-region); }
.project-video-cover img { display:block; width:100%; height:100%; -o-object-fit:contain; object-fit:contain; }
.project-video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:var(--brand-green); background:var(--paper,var(--page-background)); }
.project-video-cover:hover .project-video-play { background:white; }
.project-video-cover:focus-visible { outline:3px solid var(--brand-green); outline-offset:4px; }
.project-video-card :is(h2,h3) { font-size:clamp(22px,1.6vw,26px); line-height:1.25; font-weight:500; letter-spacing:-.02em; margin:22px 0 12px; }
.project-video-card :is(h2,h3) a { color:inherit; text-decoration:none; }
.project-video-card :is(h2,h3) a:hover { text-decoration:underline; }
.project-video-description { font-size:1rem; line-height:1.6; color:var(--ink-soft); margin:0 0 20px; }
.project-video-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-top:12px; margin-top:auto; min-height:44px; }
.project-video-actions button { cursor:pointer; min-height:44px; background:none; color:var(--brand-green); }
.project-video-actions .text-link { border:0; padding:0; display:inline-flex; gap:8px; align-items:center; }
.project-video-dismiss { border:0; text-decoration:underline; padding:0; }
.project-video-status { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; color:white; background:var(--dark-region); }
.project-video-status p { margin:0; }
.project-video-status a { color:white; text-decoration:underline; }
@media(max-width:820px) {
.project-video-cards { grid-template-columns:1fr; gap:32px; }
.project-video-card :is(h2,h3) { font-size:22px; margin-top:18px; }
.project-video-actions { margin-top:0; }
}
.project-video-status p { color:inherit; }
.projects-library--single .project-video-cards { grid-template-columns:minmax(0,1fr); }
/* 内容来源提示（仅 cms 模式渲染，生产 local 构建不出现）。绿色=内容来自 CMS，红色=已回退本地。 */
.content-source-note { position:fixed; z-index:200; left:8px; bottom:8px; margin:0; padding:6px 10px; color:var(--dark-region-text); background:var(--green-dark); font-size:.75rem; font-weight:600; line-height:1.4; }
.content-source-note[data-content-source="local-fallback"] { background:var(--danger); }
/* ─────────────────────────────────────────────────────────────────────────────
【2026-10-01 上线前体检】手机端触摸热区与输入框字号
· iOS Safari：输入框字号 < 16px 时，点击会强制放大整个页面（防不住，只能把字号提到 16px）；
· 触摸目标：Apple/Google 的可用性基线是 44×44px（本项目筛选 chip 原为 43×38、手风琴按钮 32×32）。
只在窄屏生效，桌面端版式不受影响。
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.gallery-hall-chip { min-height: 44px; padding-inline: 14px; }
.applications-accordion-toggle { min-width: 44px; min-height: 44px; }
.application-search-row input,
.quote-layout .field input,
.quote-layout .field select,
.quote-layout .field textarea,
/* 通用兜底：仍留在 index.css 的输入框（报价表单字段本身已是 ≥16px）。
注意：同优先级的组件内规则可能因打包顺序覆盖本行 —— 组件专属规则要写在组件自己的 CSS 里。 */
.quote-layout .field input,
.quote-layout .field select,
.quote-layout .field textarea { font-size: 16px; }
}
/* One semantic palette, shared by all decorative icons. Controls inherit ink. */
:root { --icon-outline:var(--green-dark); --icon-neutral:#b7c8bc; --icon-material:#d5bda0; --icon-energy:#dfca88; --icon-base:#fbf8f1; --icon-edge:#d9dfd5; }
.site-icon { --icon-fill:var(--icon-neutral); display:inline-grid; place-items:center; flex:none; width:48px; height:48px; color:var(--icon-outline); background:var(--icon-base); border:1px solid var(--icon-edge); border-radius:10px; box-shadow:inset 0 1px 0 var(--white),0 3px 8px rgba(28,45,39,.08); vertical-align:top; }
.site-icon.site-icon--material { --icon-fill:var(--icon-material); }
.site-icon.site-icon--energy { --icon-fill:var(--icon-energy); }
.site-icon.site-icon--configuration { width:36px; height:36px; border-color:var(--icon-edge); box-shadow:inset 0 1px 0 var(--white),0 2px 5px rgba(28,45,39,.05); }
.site-icon > svg { display:block; flex:none; width:32px; height:32px; margin:0; color:var(--icon-outline); overflow:visible; }
.site-icon.site-icon--configuration > svg { width:24px; height:24px; }
.site-icon.site-icon--video { width:40px; height:40px; }
.site-icon.site-icon--video > svg { width:28px; height:28px; }
.site-action-icon { flex-shrink:0; vertical-align:middle; }
/* 应用卡片（`.application-foundation-card`）—— 用于**详情页底部 Related Applications 网格**。
2026-09-23 修复「底部 CTA 不对齐」：
卡片做成**纵向 Flex 并撑满网格行高**，文案区 `flex:1`，CTA 用 `margin-top:auto` 钉到底部 ——
于是同一行里无论标题/描述是 1 行还是 3 行，`Explore Application →` 都落在同一水平线上。
修复前实测（/applications/vacation-rental 三张卡）：CTA 底边 717 / 717 / 744，第三张低 27px。
根因：原先那两条 Flex 规则被限定在 `.applications-directory` 祖先下，而详情页的 Related 网格
不在该祖先内（它在 `.application-detail` 里），并且从来没有 `margin-top:auto`。 */
.application-foundation-card { min-width:0; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); }
/* 整卡由一个 包住（整卡可点，不再额外造锚点）；它要撑满卡片高度并继续纵向排布。 */
.application-foundation-card > a { display:flex; flex-direction:column; flex:1; }
/* 图片按 16:9 固定比例，且**不允许被 Flex 压缩** —— 否则同一行里文案长的卡会把图压扁。 */
.application-foundation-media { display:block; flex:none; }
.application-foundation-media img { width:100%; height:auto; aspect-ratio:16/9; -o-object-fit:contain; object-fit:contain; }
/* 文案区吃掉剩余高度（`flex:1`），把 CTA 推到卡片底部。 */
.application-foundation-copy { display:flex; flex-direction:column; flex:1; padding:clamp(20px,3vw,32px); }
.application-foundation-copy h3 { margin-bottom:12px; font-size:clamp(1.5rem,2.7vw,2.5rem); }
/* CTA 是**装饰性标签**（真实链接是外层 ，保持 VIS-013「每卡一个语义链接」）。 */
.application-foundation-copy > .text-link:last-child { margin-top:auto; }
.application-detail { background:var(--paper); color:var(--ink); }
.application-detail-shell { width:min(1360px,calc(100% - 80px)); margin-inline:auto; }
/* 悬浮覆盖层（2026-09-26 业主指令）：面包屑是这一批页面（案例页/案例索引/应用二级页/分类页）的
第一个内容容器，安全距离加在它自己身上 —— 背景仍从 top:0 通顶，收起导航时不露任何底色。 */
.application-breadcrumbs { padding-block:calc(var(--header) + 28px) 12px; font-size:.8rem; color:var(--ink-soft); }
.application-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.application-breadcrumbs li + li::before { content:'/'; padding-right:8px; opacity:.55; }
.application-breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; }
.application-breadcrumbs li { display:flex; align-items:center; }
.application-breadcrumbs a:hover { text-decoration:underline; }
/* ── 首屏看板（业主批评文档 2026-09-20）───────────────────────────────────────
左大图 + 右结构化规格面板：让客户在首屏就拿到"长什么样、什么板材、在什么地方"。
此前这些信息散落成主图下一行小字，而户型图与多款型号推荐反而铺满整页。
栅格：规格面板跨两行，场景图库落在主图下方同一栏 —— 既填满左栏空白，
也与批评文档的看板示意一致；单列时按 order 排成 图 → 规格 → 图库。 */
.application-lookbook { display:grid; grid-template-columns:minmax(0,60fr) minmax(0,40fr); grid-template-rows:auto 1fr; gap:clamp(24px,3vw,56px) clamp(28px,4vw,64px); align-items:start; padding-block:8px 0; }
.application-lookbook-media { grid-column:1; grid-row:1; margin:0; }
/* 站内放大触发器：应用详情页的主图 / 场景图库 / 平面图共用。样式主体来自全局 .plan-view-button
（尺寸、zoom-in 光标、右下角 Enlarge 角标、键盘焦点环），这里只把底色对齐本站图片面，
避免 contain 留边处出现纯白。全站图片放大都走站内 lightbox，不再开新标签页（2026-09-22）。 */
.application-zoom-button { background:var(--surface); }
.application-lookbook-media picture { display:block; }
.application-lookbook-media img { display:block; width:100%; height:auto; max-height:560px; -o-object-fit:contain; object-fit:contain; background:var(--surface); }
.application-lookbook-panel { grid-column:2; grid-row:1 / span 2; min-width:0; }
.application-lookbook-panel h1 { margin:14px 0 18px; font-size:clamp(1.9rem,2.7vw,3rem); line-height:1.06; letter-spacing:-.035em; }
.application-lookbook-summary { max-width:52ch; margin:0 0 28px; font-size:clamp(1rem,1.15vw,1.125rem); line-height:1.6; }
.application-detail-category { display:inline-flex; align-items:center; min-height:44px; color:var(--green-dark); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.application-detail-category:hover { text-decoration:underline; text-underline-offset:4px; }
/* 规格面板：定义列表，条目之间有细分隔线；限定语（note）不得省略。 */
.application-lookbook-specs { margin:0 0 28px; border-top:1px solid var(--line); }
.application-lookbook-row { display:grid; grid-template-columns:minmax(140px,34%) minmax(0,1fr); gap:8px 20px; padding:16px 0; border-bottom:1px solid var(--line); }
.application-lookbook-row dt { color:var(--green-dark); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding-top:4px; }
.application-lookbook-row dd { margin:0; min-width:0; }
.application-lookbook-place { display:block; font-weight:600; }
.application-lookbook-setting,.application-lookbook-facade { display:block; color:var(--ink-soft); }
.application-lookbook-spec-list { margin:0; padding:0; list-style:none; }
.application-lookbook-spec-list li + li { margin-top:20px; }
.application-lookbook-spec-label { display:block; color:var(--ink-soft); font-size:.8rem; }
.application-lookbook-spec-value { display:block; font-weight:600; }
.application-lookbook-spec-note { display:block; margin-top:2px; color:var(--ink-soft); font-size:.875rem; line-height:1.5; }
/* 2026-09-22 业主指令（方案 a，极简重构）：
· 删掉面板底部的重复报价 CTA（页头 / 页脚 / 底部报价带都已有报价入口）与 "Documented panel advantages" 链接；
平面图入口降级为规格区里的一条文字按钮（沿用同一 class，弹窗行为与门禁断言都不变）；
· BASE PLATFORM 每行不再有型号说明文字（型号链接保留）；
· 章节 eyebrow（01 / DESIGN & USE 等）连同样式一起删除。 */
.application-lookbook-plan-entry { margin:20px 0 0; }
.application-lookbook-plan-button { display:inline-flex; align-items:center; min-height:48px; padding:0; border:0; border-bottom:1px solid currentColor; color:var(--green-dark); background:transparent; font:inherit; font-size:.875rem; font-weight:600; cursor:pointer; }
.application-lookbook-plan-button:hover { text-decoration:underline; text-underline-offset:4px; }
.application-detail figure { margin:0; }
.application-detail picture { display:block; }
.application-detail figcaption { padding-top:12px; color:var(--ink-soft); font-size:.8rem; line-height:1.55; }
.application-detail-image-context { font-size:.8rem; margin:14px 0 0; }
/* 场景图库：主图下方同一栏，两列缩略图（条目少时自动占满一行）。 */
.application-lookbook-gallery { grid-column:1; grid-row:2; }
.application-lookbook-gallery ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.application-lookbook-gallery img { width:100%; height:auto; aspect-ratio:4/3; -o-object-fit:contain; object-fit:contain; background:var(--surface); }
.application-lookbook-gallery figcaption { padding-top:10px; }
.application-detail-section { padding-block:64px; border-bottom:1px solid var(--line); }
.application-section-heading { margin-bottom:40px; max-width:770px; }
.application-section-heading h2 { font-size:clamp(2rem,3vw,3rem); line-height:1.12; margin-bottom:16px; }
.application-section-heading p { margin:0; }
/* 亮点：把长拆解压成 3 条短句，完整文案收进折叠区（内容不删，只是不再铺满整页）。
2026-09-22（方案 a）：三条改成轻量卡片（既有 --surface / --line token），消除原先的大面积空白。 */
.application-highlight-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0 0 32px; padding:0; list-style:none; }
.application-highlight-list li { padding:24px; border:1px solid var(--line); background:var(--surface); }
.application-highlight-list h3 { margin:0 0 10px; font-size:1.25rem; }
.application-highlight-list p { margin:0; line-height:1.75; }
.application-design-notes > summary { display:inline-flex; align-items:center; min-height:48px; color:var(--green-dark); font-size:.875rem; font-weight:600; cursor:pointer; }
.application-design-notes > summary:hover { text-decoration:underline; text-underline-offset:4px; }
.application-design-notes[open] > summary { margin-bottom:28px; }
.application-story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.application-story-number { color:var(--green-dark); font-size:.85rem; display:block; margin-bottom:16px; }
.application-story h3 { font-size:1.6rem; margin-bottom:18px; }
.application-story p { line-height:1.8; }
.application-story .application-detail-figure { margin-top:24px; }
.application-detail-figure img { width:100%; height:auto; -o-object-fit:contain; object-fit:contain; }
.application-extra-body { max-width:800px; margin-top:32px; }
.application-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.application-related-grid .application-foundation-copy h3 { font-size:1.6rem; }
.application-detail-quote { display:flex; gap:32px; align-items:center; justify-content:space-between; padding:56px 40px; margin:64px 0; background:var(--surface-green); }
.application-detail-quote h2 { font-size:clamp(2rem,3vw,3rem); margin-bottom:16px; }
.application-detail-quote p { margin:0; }
.application-detail-quote .button { flex:none; }
/* ── 户型图弹窗 ──────────────────────────────────────────────────────────────
批评文档点四.1：平面图不再平铺主页面，改为右侧规格区的轻量入口。
原生