:root { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; color: #10211d; background: #f7f5f0; font-synthesis: none; --navy:#061d35; --pine:#0b4b3d; --pine-dark:#07382f; --pine-soft:#e5eee9; --stone:#f7f5f0; --paper:#fffefa; --ink:#10211d; --muted:#66716d; --line:rgba(16,33,29,.16); --red:#a83828; --serif:"Noto Serif SC","Songti SC",serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top:110px; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--stone); -webkit-font-smoothing: antialiased; }
[hidden] { display:none!important; } body.modal-open { overflow:hidden; }
button,a { font: inherit; } button { color: inherit; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; }
.site-shell { overflow:clip; } .page-width { width:min(1240px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:1000; background:white; padding:12px 16px; } .skip-link:focus { top:16px; }
.utility-bar { background:var(--navy); color:rgba(255,255,255,.78); font-size:.78rem; }
.utility-inner { height:34px; display:flex; justify-content:space-between; align-items:center; }
.utility-inner div { display:flex; gap:24px; } .utility-inner button,.utility-inner a { border:0; background:transparent; color:inherit; cursor:pointer; }
.site-header { height:92px; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(16,33,29,.08); position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); }
.header-inner { height:100%; display:grid; grid-template-columns:300px 1fr auto; align-items:center; gap:28px; }
.brand { border:0; background:transparent; padding:0; cursor:pointer; text-align:left; display:flex; align-items:center; gap:12px; } .brand-symbol { width:58px; height:76px; overflow:hidden; flex:none; display:block; } .brand-symbol img { width:252px; height:76px; max-width:none; object-fit:contain; object-position:left center; } .brand-copy { font-family:var(--serif); font-size:1rem; font-weight:700; white-space:nowrap; }
.main-nav { display:flex; justify-content:center; gap:34px; height:100%; }
.main-nav a { border:0; background:transparent; font-size:.95rem; cursor:pointer; position:relative; padding:0 2px; white-space:nowrap; display:flex; align-items:center; }
.main-nav a::after { content:""; position:absolute; height:2px; background:var(--pine); left:0; right:100%; bottom:24px; transition:right .22s ease; }
.main-nav a:hover::after,.main-nav a.active::after { right:0; }
.header-actions { display:flex; align-items:center; gap:12px; } .icon-button,.menu-button { border:0; background:transparent; cursor:pointer; display:grid; place-items:center; width:40px; height:40px; }
.consult-button,.primary-button { border:0; background:var(--pine); color:white; display:inline-flex; align-items:center; gap:14px; padding:15px 22px; cursor:pointer; font-weight:600; transition:transform .2s,background .2s; }
.consult-button:hover,.primary-button:hover { background:var(--pine-dark); transform:translateY(-2px); } .menu-button { display:none; }

.hero { min-height:700px; position:relative; background:#dbe4e1; display:flex; flex-direction:column; justify-content:flex-end; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(239,245,243,.95) 0%,rgba(240,246,244,.82) 28%,rgba(240,246,244,.1) 55%,rgba(7,25,32,.12) 100%); }
.hero-content { position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-block:72px 110px; }
.eyebrow { font-size:.75rem; letter-spacing:.18em; color:var(--pine); text-transform:uppercase; margin:0 0 16px; font-weight:600; }
.hero h1,.section-heading h2,.materials-copy h2,.knowledge h2,.brand-story h2,.product-modal h2 { font-family:var(--serif); font-weight:700; letter-spacing:-.04em; }
.hero h1 { font-size:clamp(3.8rem,6vw,6.4rem); line-height:1.1; margin:0 0 28px; max-width:760px; color:#092b2d; }
.hero-copy { font-size:1.15rem; line-height:1.9; margin:0 0 34px; color:#324b46; }
.hero-proof { position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); width:min(1240px,calc(100% - 64px)); margin-inline:auto; color:white; background:rgba(5,28,44,.84); backdrop-filter:blur(12px); }
.hero-proof>div { min-height:84px; display:flex; align-items:center; justify-content:center; gap:18px; border-right:1px solid rgba(255,255,255,.28); font-size:1.08rem; }
.hero-proof>div:last-child { border-right:0; } .proof-icon { font-family:var(--serif); font-size:1.55rem; border-bottom:1px solid rgba(255,255,255,.5); }
.proof-mark { width:34px; height:34px; border:1px solid rgba(255,255,255,.55); display:grid; place-items:center; font-family:var(--serif); }

.section { padding:96px 0; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:42px; }
.section-heading h2 { font-size:clamp(2.1rem,3.5vw,3.35rem); line-height:1.2; margin:0; } .section-heading>p { max-width:440px; margin:0; color:var(--muted); line-height:1.75; } .section-heading.compact { margin-bottom:32px; }
.finder { background:var(--paper); } .finder-heading { align-items:center; }
.need-switch { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.need-switch button { min-height:84px; border:0; border-right:1px solid var(--line); background:transparent; padding:20px 28px; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; text-align:left; font-size:1rem; }
.need-switch button:last-child { border-right:0; } .need-switch button span { color:var(--muted); font-family:var(--serif); } .need-switch button.is-selected { background:var(--pine); color:white; } .need-switch button.is-selected span { color:rgba(255,255,255,.7); }
.need-switch i { visibility:hidden; font-style:normal; } .need-switch .is-selected i { visibility:visible; }
.recommendation { margin-top:26px; display:grid; grid-template-columns:270px 1fr auto; gap:34px; align-items:center; padding:28px 32px; background:var(--pine-soft); border-left:4px solid var(--pine); }
.recommendation div { display:grid; gap:6px; } .recommendation div span { color:var(--muted); font-size:.82rem; } .recommendation p { margin:0; line-height:1.75; color:#49605b; }
.recommendation button,.text-button,.product-card button,.product-cell button { border:0; background:transparent; color:var(--pine); font-weight:600; display:inline-flex; align-items:center; gap:10px; cursor:pointer; padding:8px 0; white-space:nowrap; }

.comparison { background:#f5f3ed; } .comparison-table { border:1px solid var(--line); background:var(--paper); overflow:hidden; }
.comparison-row { display:grid; grid-template-columns:170px repeat(3,1fr); } .comparison-row+.comparison-row { border-top:1px solid var(--line); } .comparison-row>*+* { border-left:1px solid var(--line); }
.row-label { padding:24px 20px; font-weight:600; background:#f0f0eb; display:flex; align-items:center; }
.product-head { border:0; background:transparent; padding:0 0 22px; cursor:pointer; text-align:left; transition:background .2s; } .product-head img { width:100%; height:146px; object-fit:cover; margin-bottom:18px; } .product-head strong { padding:0 22px; display:block; font-family:var(--serif); font-size:1rem; line-height:1.55; }
.product-head.is-active,.product-cell.is-active { background:#edf4f0; } .product-cell { padding:22px; line-height:1.65; color:#4e5b57; transition:background .2s; }
.action-row .product-cell { display:flex; align-items:center; justify-content:space-between; gap:12px; } .source-note { font-size:.75rem; color:var(--muted); } .mobile-product-tabs { display:none; }

.materials { background:var(--paper); } .materials-grid { display:grid; grid-template-columns:.82fr 1.55fr .72fr; gap:44px; align-items:center; }
.materials-copy h2 { font-size:clamp(2.2rem,3.4vw,3.4rem); line-height:1.34; margin:0 0 26px; } .materials-copy>p:not(.eyebrow):not(.evidence-boundary) { color:var(--muted); line-height:1.9; }
.evidence-boundary { margin-top:32px; padding-top:20px; border-top:1px solid var(--line); color:#7b837f; font-size:.78rem; line-height:1.7; }
.cutaway-figure { margin:0; } .cutaway-figure img { width:100%; aspect-ratio:1.25; object-fit:cover; } .cutaway-figure figcaption { font-size:.72rem; color:var(--muted); margin-top:10px; text-align:center; }
.material-list { display:grid; } .material-list>div { padding:24px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:34px 1fr; column-gap:12px; }
.material-list span { grid-row:span 2; color:var(--red); font-family:var(--serif); } .material-list strong { font-family:var(--serif); font-size:1.15rem; } .material-list p { margin:6px 0 0; color:var(--muted); font-size:.85rem; line-height:1.55; }

.product-cards { background:#f3f1eb; padding-top:84px; } .cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { background:var(--paper); border-bottom:3px solid transparent; transition:transform .25s,border-color .25s; } .product-card:hover { transform:translateY(-5px); border-color:var(--pine); }
.product-card>img { width:100%; height:260px; object-fit:cover; } .product-card-body { padding:26px 26px 22px; } .product-card h3 { font-family:var(--serif); font-size:1.35rem; line-height:1.45; margin:0 0 12px; } .product-card p { color:var(--muted); line-height:1.7; margin:0 0 16px; }

.service { background:var(--paper); } .service-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); }
.service-steps li { padding:32px; min-height:200px; border-right:1px solid var(--line); position:relative; } .service-steps li:last-child { border-right:0; } .step-icon { width:38px; height:38px; border:1px solid var(--pine); color:var(--pine); display:grid; place-items:center; margin-bottom:25px; font-family:var(--serif); font-weight:600; }
.service-steps span { position:absolute; top:32px; right:26px; font-family:var(--serif); color:var(--red); } .service-steps strong { display:block; font-family:var(--serif); font-size:1.15rem; } .service-steps p { color:var(--muted); line-height:1.6; font-size:.88rem; }

.knowledge { background:#f1efe9; } .knowledge-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:70px; } .knowledge h2 { font-size:3rem; margin:0 0 32px; }
.article-links { border-top:1px solid var(--line); } .article-links>a { display:grid; grid-template-columns:45px 1fr auto; gap:18px; padding:26px 0; border-bottom:1px solid var(--line); align-items:start; transition:color .2s,transform .2s; }
.article-links>a:hover { color:var(--pine); transform:translateX(4px); } .article-links>a span { color:var(--red); font-family:var(--serif); } .article-links>a h3 { font-family:var(--serif); margin:0 0 8px; font-size:1.2rem; } .article-links>a p { color:var(--muted); line-height:1.65; margin:0; }
.faq-block { background:var(--paper); padding:34px 40px; } .faq-title { display:flex; gap:16px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line); color:var(--pine); }
.faq-title div { display:grid; gap:4px; } .faq-title strong { font-family:var(--serif); font-size:1.35rem; } .faq-title span { color:var(--muted); font-size:.78rem; }
.faq-item { border-bottom:1px solid var(--line); } .faq-item>button { width:100%; border:0; background:transparent; padding:22px 0; display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left; font-weight:600; }
.faq-caret { transition:transform .2s; font-size:1.25rem; } .faq-item.is-open .faq-caret { transform:rotate(180deg); } .faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.faq-badge { width:36px; height:36px; display:grid; place-items:center; border:1px solid currentColor; font-family:var(--serif); }
.faq-answer p { min-height:0; overflow:hidden; margin:0; color:var(--muted); line-height:1.8; } .faq-item.is-open .faq-answer { grid-template-rows:1fr; } .faq-item.is-open .faq-answer p { padding-bottom:22px; }

.brand-story { background:var(--pine); color:white; padding:68px 0; } .brand-story-inner { display:flex; justify-content:space-between; align-items:center; gap:80px; }
.brand-story h2 { font-size:clamp(2.2rem,4vw,4.2rem); margin:0 0 20px; } .brand-story p:not(.eyebrow) { max-width:760px; line-height:1.85; color:rgba(255,255,255,.72); } .brand-story .eyebrow { color:#d9c5a1; } .brand-story svg { color:rgba(255,255,255,.34); flex:none; }
.story-mark { color:rgba(255,255,255,.25); font:700 5.4rem/1 var(--serif); border:1px solid rgba(255,255,255,.2); padding:18px; }
.story-link { display:inline-flex; margin-top:18px; color:#f1dfbc; font-weight:700; border-bottom:1px solid rgba(241,223,188,.5); padding-bottom:6px; }
.inline-detail-link { display:inline-flex; margin-top:10px; color:var(--pine); font-weight:700; }

.subpage-hero { background:#e9eee9; min-height:610px; display:flex; align-items:center; overflow:hidden; }
.subpage-hero-grid { display:grid; grid-template-columns:.93fr 1.07fr; gap:70px; align-items:center; padding-block:74px; }
.subpage-hero h1,.company-intro h2,.brand-belief h2,.certificate-copy h2,.material-guide h2,.next-link-band h2 { font-family:var(--serif); letter-spacing:-.04em; }
.subpage-hero h1 { font-size:clamp(3.2rem,5vw,5.5rem); line-height:1.15; margin:0 0 26px; color:#092b2d; }
.subpage-hero p:not(.eyebrow) { max-width:650px; color:#435852; font-size:1.05rem; line-height:1.9; margin:0 0 32px; }
.subpage-hero figure { margin:0; position:relative; }
.subpage-hero figure img { width:100%; height:430px; object-fit:cover; box-shadow:30px 30px 0 rgba(11,75,61,.1); }
.subpage-hero figcaption { margin-top:13px; color:var(--muted); font-size:.74rem; line-height:1.6; }
.breadcrumb { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.8rem; margin-bottom:42px; }
.breadcrumb a:hover { color:var(--pine); }
.product-page-hero figure img { object-position:center 42%; }
.about-page-hero { background:linear-gradient(125deg,#e9eee9 0%,#f6f2e8 100%); }
.about-hero-mark { min-height:420px; background:var(--pine); display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; position:relative; box-shadow:30px 30px 0 rgba(11,75,61,.1); }
.about-hero-mark img { width:min(330px,65%); filter:brightness(0) invert(1); }
.about-hero-mark span { position:absolute; bottom:32px; font-family:var(--serif); letter-spacing:.25em; color:rgba(255,255,255,.62); }

.architecture { background:var(--paper); }
.architecture-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:20px; }
.architecture-card { background:#f2f1eb; padding:38px 34px; min-height:390px; display:flex; flex-direction:column; border-top:4px solid transparent; }
.architecture-card.featured { background:var(--pine); color:white; border-color:#d9c5a1; }
.architecture-card>span { color:var(--red); font:700 1rem/1 var(--serif); }
.architecture-card.featured>span { color:#e1c899; }
.architecture-card h3 { font-family:var(--serif); font-size:1.55rem; line-height:1.45; margin:25px 0 14px; }
.architecture-card p { line-height:1.8; color:var(--muted); margin:0; }
.architecture-card.featured p,.architecture-card.featured li { color:rgba(255,255,255,.73); }
.architecture-card ul { margin:24px 0 28px; padding-left:20px; color:#4f5e59; line-height:2; }
.architecture-card a { margin-top:auto; color:var(--pine); font-weight:700; }
.architecture-card.featured a { color:#f1dfbc; }

.product-detail-section { background:#f2f0ea; }
.detail-products { display:grid; gap:34px; }
.detail-product { display:grid; grid-template-columns:1fr 1fr; background:var(--paper); min-height:470px; }
.detail-product.reverse img { order:2; }
.detail-product>img { width:100%; height:100%; min-height:470px; object-fit:cover; }
.detail-product>div { padding:50px; display:flex; flex-direction:column; justify-content:center; }
.detail-number { color:var(--red); font-family:var(--serif); }
.detail-product h3 { font-family:var(--serif); font-size:2rem; line-height:1.35; margin:14px 0 9px; }
.detail-product .lead { color:var(--pine); font-weight:700; line-height:1.7; margin:0 0 22px; }
.detail-product dl { margin:0; border-top:1px solid var(--line); }
.detail-product dl div { padding:16px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:100px 1fr; gap:18px; }
.detail-product dt { font-weight:700; }
.detail-product dd { margin:0; color:var(--muted); line-height:1.75; }

.evolution { background:var(--paper); }
.generation-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.generation-card { background:#f2f1eb; min-height:390px; padding:30px; border-bottom:3px solid transparent; }
.generation-card:first-child { padding:0 0 30px; }
.generation-card:first-child>div:last-child { padding:0 30px; }
.generation-card:hover { border-color:var(--pine); }
.generation-visual { position:relative; margin-bottom:26px; }
.generation-visual img { height:175px; width:100%; object-fit:cover; }
.generation-visual span { position:absolute; left:18px; bottom:0; transform:translateY(50%); background:var(--red); color:white; padding:8px 13px; font-size:.8rem; }
.generation-index { color:var(--red); font:700 2.5rem/1 var(--serif); margin-bottom:55px; }
.generation-card h3 { font-family:var(--serif); font-size:1.3rem; line-height:1.4; margin:0 0 15px; }
.generation-card p { color:var(--muted); line-height:1.8; margin:0; }
.generation-card small { display:block; margin-top:18px; color:#89918e; }

.material-guide { background:#dfe9e4; }
.material-guide-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:90px; }
.material-guide h2 { font-size:clamp(2.3rem,3.6vw,3.8rem); line-height:1.3; margin:0 0 25px; }
.material-guide-grid>div>p:not(.eyebrow) { color:#49605a; line-height:1.9; }
.material-guide ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; }
.material-guide li { padding:22px; border-left:1px solid rgba(11,75,61,.2); border-bottom:1px solid rgba(11,75,61,.2); display:flex; gap:18px; line-height:1.75; color:#4e625d; }
.material-guide li:nth-child(-n+2) { border-top:1px solid rgba(11,75,61,.2); }
.material-guide li b { color:var(--red); font-family:var(--serif); }
.material-guide li strong { color:var(--ink); display:block; }
.boundary-band { background:#efe6d7; padding:30px 0; }
.boundary-band .page-width { display:grid; grid-template-columns:180px 1fr; gap:30px; align-items:start; }
.boundary-band strong { font-family:var(--serif); color:#742d22; }
.boundary-band p { margin:0; color:#6f5e52; line-height:1.8; font-size:.9rem; }

.company-facts { background:var(--navy); color:white; }
.company-facts-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.company-facts-grid>div { min-height:120px; padding:26px; border-right:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; justify-content:center; gap:9px; }
.company-facts-grid>div:last-child { border-right:0; }
.company-facts span { color:rgba(255,255,255,.55); font-size:.78rem; }
.company-facts strong { font-family:var(--serif); line-height:1.55; }
.company-intro { background:var(--paper); }
.company-intro-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; }
.company-intro h2 { font-size:clamp(2.4rem,4vw,4rem); line-height:1.28; margin:0; }
.company-copy { border-left:1px solid var(--line); padding-left:55px; }
.company-copy p { margin:0 0 24px; color:#52605c; font-size:1rem; line-height:2; }
.company-timeline { background:#f1efe9; }
.timeline-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.timeline-list li { display:grid; grid-template-columns:210px 1fr; gap:50px; padding:34px 0; border-bottom:1px solid var(--line); }
.timeline-list time { font:700 1.25rem/1.4 var(--serif); color:var(--red); }
.timeline-list h3 { font-family:var(--serif); font-size:1.3rem; margin:0 0 10px; }
.timeline-list p { margin:0; color:var(--muted); line-height:1.8; }
.brand-belief { background:var(--pine); color:white; padding:80px 0; }
.brand-belief-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:90px; align-items:start; }
.brand-belief .eyebrow { color:#dbc69e; }
.brand-belief h2 { font-size:clamp(3.2rem,6vw,6rem); margin:0; }
.brand-belief-grid>div:last-child>p { color:rgba(255,255,255,.78); font-size:1.08rem; line-height:2; margin:0 0 22px; }
.brand-belief .belief-note { border-top:1px solid rgba(255,255,255,.2); padding-top:20px; font-size:.85rem!important; color:rgba(255,255,255,.58)!important; }
.certificate-section { background:var(--paper); }
.certificate-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }
.certificate-card { margin:0; background:#f2f0e9; padding:18px; }
.certificate-card img { width:100%; }
.certificate-card figcaption { text-align:center; color:var(--muted); font-size:.78rem; margin-top:14px; }
.certificate-copy h2 { font-size:clamp(2.3rem,3.4vw,3.6rem); margin:0 0 24px; }
.certificate-copy>p:not(.eyebrow) { color:var(--muted); line-height:1.9; }
.certificate-copy dl { margin:26px 0; border-top:1px solid var(--line); }
.certificate-copy dl div { padding:15px 0; display:grid; grid-template-columns:140px 1fr; gap:18px; border-bottom:1px solid var(--line); }
.certificate-copy dt { font-weight:700; }
.certificate-copy dd { margin:0; color:var(--muted); }
.boundary-note { background:#f3eee4; border-left:4px solid var(--red); padding:20px 22px; }
.boundary-note p { margin:8px 0 0; color:#715f54; font-size:.85rem; line-height:1.8; }
.company-scope { background:#f1efe9; }
.scope-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.scope-grid article { background:var(--paper); padding:30px; min-height:260px; }
.scope-grid span { color:var(--red); font-family:var(--serif); }
.scope-grid h3 { font:700 1.35rem/1.4 var(--serif); margin:32px 0 12px; }
.scope-grid p { color:var(--muted); line-height:1.8; margin:0; }
.next-link-band { background:#d9c5a1; padding:58px 0; }
.next-link-band .page-width { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.next-link-band h2 { font-size:clamp(2rem,3vw,3.2rem); margin:0; }
.primary-button.light { background:var(--paper); color:var(--pine); }

footer { background:var(--navy); color:rgba(255,255,255,.75); padding:64px 0 26px; } .footer-grid { display:grid; grid-template-columns:1.3fr .65fr 1.25fr; gap:80px; padding-bottom:46px; }
.footer-grid>div { display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:.88rem; line-height:1.65; } .footer-grid img { width:220px; height:68px; object-fit:contain; object-position:left; filter:brightness(0) invert(1); opacity:.92; }
.footer-grid strong { color:white; font-family:var(--serif); font-size:1.1rem; margin-bottom:8px; } .footer-grid button { border:0; background:transparent; color:inherit; padding:0; cursor:pointer; } .footer-grid a { color:white; display:inline-flex; align-items:center; gap:8px; } .footer-grid small { color:rgba(255,255,255,.48); }
.official-badge { margin-top:6px; color:#d9c5a1; border:1px solid rgba(217,197,161,.38); padding:8px 12px; font-size:.78rem; }
.footer-bottom { padding-top:22px; border-top:1px solid rgba(255,255,255,.15); display:flex; justify-content:space-between; gap:40px; font-size:.72rem; color:rgba(255,255,255,.45); }

.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(2,15,25,.72); display:grid; place-items:center; padding:24px; backdrop-filter:blur(7px); }
.product-modal { width:min(980px,100%); max-height:min(760px,92vh); overflow:auto; background:var(--paper); display:grid; grid-template-columns:1.05fr .95fr; position:relative; box-shadow:0 30px 100px rgba(0,0,0,.3); }
.product-modal>img { width:100%; height:100%; object-fit:cover; min-height:560px; } .product-modal>div { padding:58px 48px; } .product-modal h2 { font-size:2.4rem; line-height:1.3; margin:0 0 18px; } .product-modal>div>p { color:var(--muted); line-height:1.75; }
.product-modal dl { margin:30px 0; border-top:1px solid var(--line); } .product-modal dl div { padding:18px 0; border-bottom:1px solid var(--line); } .product-modal dt { font-weight:600; margin-bottom:6px; } .product-modal dd { margin:0; color:var(--muted); line-height:1.6; }
.modal-close { position:absolute; top:18px; right:18px; border:0; background:white; width:42px; height:42px; display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,.12); }

@media (max-width:1020px) {
  .page-width { width:min(100% - 40px,900px); } .header-inner { grid-template-columns:240px 1fr; }
  .main-nav { position:absolute; left:0; right:0; top:92px; background:white; display:none; height:auto; flex-direction:column; padding:24px; box-shadow:0 18px 40px rgba(0,0,0,.12); }
  .main-nav.is-open { display:flex; } .main-nav a { padding:14px 0; text-align:left; } .main-nav a::after { bottom:5px; } .header-actions { justify-self:end; } .menu-button { display:grid; }
  .hero-proof { width:min(100% - 40px,900px); } .materials-grid { grid-template-columns:1fr 1.3fr; } .material-list { grid-column:1/-1; grid-template-columns:repeat(4,1fr); gap:22px; } .material-list>div { display:block; } .material-list span { display:block; margin-bottom:10px; }
  .comparison-row { grid-template-columns:140px repeat(3,1fr); } .product-head strong { padding:0 14px; font-size:.9rem; } .product-cell { padding:16px 12px; font-size:.85rem; } .action-row .product-cell { display:block; }
  .cards-grid { gap:12px; } .product-card>img { height:210px; } .service-steps li { padding:24px 20px; } .knowledge-grid { gap:30px; }
  .subpage-hero-grid { gap:38px; } .architecture-grid { grid-template-columns:1fr; } .architecture-card { min-height:0; } .generation-timeline { grid-template-columns:1fr 1fr; }
  .material-guide-grid,.company-intro-grid,.brand-belief-grid,.certificate-grid { gap:45px; } .scope-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:720px) {
  .page-width { width:calc(100% - 32px); } .utility-bar { display:none; } .site-header { height:74px; } .header-inner { grid-template-columns:1fr auto; } .brand-symbol { width:43px; height:58px; } .brand-symbol img { width:192px; height:58px; } .brand-copy { font-size:.83rem; } .main-nav { top:74px; } .icon-button,.consult-button { display:none; }
  .hero { min-height:700px; } .hero-image { object-position:61% center; } .hero-wash { background:linear-gradient(180deg,rgba(240,246,244,.84) 0%,rgba(240,246,244,.64) 43%,rgba(8,32,36,.18) 100%); } .hero-content { justify-content:flex-start; padding-top:70px; } .hero h1 { font-size:clamp(2.75rem,14vw,4.1rem); } .hero-copy { font-size:1rem; }
  .hero-proof { width:100%; grid-template-columns:1fr; background:rgba(5,28,44,.92); } .hero-proof>div { min-height:58px; justify-content:flex-start; padding:0 22px; border-right:0; border-bottom:1px solid rgba(255,255,255,.18); font-size:.9rem; }
  .section { padding:68px 0; } .section-heading { display:block; margin-bottom:28px; } .section-heading h2 { font-size:2.3rem; } .section-heading>p { margin-top:18px; }
  .need-switch { grid-template-columns:1fr; } .need-switch button { border-right:0; border-bottom:1px solid var(--line); } .recommendation { grid-template-columns:1fr; gap:14px; padding:24px; }
  .mobile-product-tabs { display:flex; overflow-x:auto; gap:8px; margin:0 -16px 16px; padding:0 16px 6px; } .mobile-product-tabs button { border:1px solid var(--line); background:var(--paper); padding:10px 14px; white-space:nowrap; font-size:.82rem; } .mobile-product-tabs button.is-active { background:var(--pine); color:white; }
  .comparison-table { overflow-x:auto; } .comparison-row { min-width:760px; grid-template-columns:120px repeat(3,1fr); } .product-head img { height:110px; }
  .materials-grid { grid-template-columns:1fr; gap:34px; } .materials-copy h2 { font-size:2.4rem; } .cutaway-figure img { aspect-ratio:1.15; } .material-list { grid-column:auto; grid-template-columns:1fr 1fr; }
  .cards-grid { grid-template-columns:1fr; gap:18px; } .product-card>img { height:250px; } .service-steps { grid-template-columns:1fr 1fr; } .service-steps li:nth-child(2) { border-right:0; } .service-steps li:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .knowledge-grid { grid-template-columns:1fr; } .knowledge h2 { font-size:2.4rem; } .faq-block { padding:26px 22px; } .brand-story-inner { align-items:flex-end; } .story-mark { font-size:3rem; padding:12px; }
  .footer-grid { grid-template-columns:1fr; gap:34px; } .footer-bottom { flex-direction:column; gap:10px; } .product-modal { grid-template-columns:1fr; max-height:92vh; } .product-modal>img { min-height:260px; height:260px; } .product-modal>div { padding:36px 26px; } .product-modal h2 { font-size:1.85rem; }
  .subpage-hero { min-height:0; } .subpage-hero-grid { grid-template-columns:1fr; padding-block:48px 68px; } .subpage-hero h1 { font-size:clamp(2.65rem,13vw,4rem); } .subpage-hero figure img { height:300px; box-shadow:14px 14px 0 rgba(11,75,61,.1); } .breadcrumb { margin-bottom:28px; }
  .about-hero-mark { min-height:310px; box-shadow:14px 14px 0 rgba(11,75,61,.1); }
  .detail-product,.detail-product.reverse { grid-template-columns:1fr; } .detail-product.reverse img { order:0; } .detail-product>img { min-height:270px; height:270px; } .detail-product>div { padding:30px 24px; } .detail-product dl div { grid-template-columns:1fr; gap:6px; }
  .generation-timeline { grid-template-columns:1fr; } .generation-card { min-height:0; } .generation-index { margin-bottom:34px; }
  .material-guide-grid,.company-intro-grid,.brand-belief-grid,.certificate-grid { grid-template-columns:1fr; gap:34px; } .material-guide ol { grid-template-columns:1fr; } .material-guide li:nth-child(2) { border-top:0; } .boundary-band .page-width { grid-template-columns:1fr; gap:10px; }
  .company-facts-grid { grid-template-columns:1fr 1fr; } .company-facts-grid>div:nth-child(2) { border-right:0; } .company-facts-grid>div:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.15); }
  .company-copy { border-left:0; padding-left:0; } .timeline-list li { grid-template-columns:1fr; gap:12px; } .scope-grid { grid-template-columns:1fr; } .scope-grid article { min-height:0; } .next-link-band .page-width { display:block; } .next-link-band .primary-button { margin-top:24px; }
}

@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition-duration:.01ms!important; } }