/* Shared public pages. Home's photographic scene remains scoped in home-hero.css. */
:root { --site-navy:#102b42; --site-blue:#315b78; --site-muted:#5c7283; --site-pale:#eef3f6; --site-paper:#f6f8f9; --site-line:#cedbe3; --site-green:#146b42; --site-mint:#8bebba; --site-space:clamp(24px,4vw,80px); }
html { scroll-behavior:smooth; }
body.site-page, body.admin-page { margin:0; background:var(--site-paper); color:var(--site-navy); font-family:Manrope,Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
a { color:inherit; }
[hidden] { display:none !important; }
.site-page :focus-visible, .site-footer :focus-visible, .explore-section :focus-visible { outline:2px solid var(--site-green); outline-offset:5px; }
.site-page .site-header { height:80px; padding:0 var(--site-space); color:#f6f9fd; background:rgb(16 43 66 / 88%); box-shadow:none; }
.site-page .site-header .brand, .site-page .site-header .brand b { color:inherit; }
.site-header a.contact-trigger { text-decoration:none; }
.site-page .primary-nav { display:flex; gap:32px; margin-left:auto; }
.site-page .primary-nav a { color:inherit; text-decoration:none; font-size:14px; border-bottom:1px solid transparent; padding:12px 0; }
.site-page .primary-nav a:hover, .site-page .primary-nav a[aria-current] { color:var(--site-mint); border-color:var(--site-mint); }
.site-page .contact-trigger { margin-left:28px; color:var(--site-mint); display:flex; gap:16px; align-items:center; font-size:14px; }
.site-page .nav-toggle { color:inherit; }
.site-page .nav-toggle span[aria-hidden] { background:currentColor; }
.site-footer { background:#0c2336; color:#dfe9ee; padding:64px var(--site-space) 24px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; max-width:1760px; margin:auto; }
.footer-brand { margin:0 0 16px; font-size:25px; letter-spacing:.1em; color:#fff; }
.footer-intro { max-width:30ch; font-size:13px; line-height:1.8; color:#aebfca; }
.footer-links { display:grid; align-content:start; gap:13px; }
.footer-links a { text-decoration:none; font-size:13px; }
.footer-links a:hover { color:var(--site-mint); }
.footer-caption { color:#849cac; font-size:10px; text-transform:uppercase; letter-spacing:.15em; margin:0 0 8px; }
.footer-contact-row { font-size:12px; line-height:1.7; margin:8px 0; overflow-wrap:anywhere; }
.footer-contact-row span { color:#91a8b7; margin-right:12px; }
.footer-bottom { max-width:1760px; margin:44px auto 0; border-top:1px solid #284052; padding-top:18px; color:#91a8b7; font-size:11px; display:flex; justify-content:space-between; gap:20px; }
.section-shell { padding:clamp(64px,7vw,132px) var(--site-space); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:40px; }
.eyebrow { margin:0 0 20px; color:var(--site-blue); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.section-head h2, .editorial-title { margin:0; font-size:clamp(30px,3vw,54px); line-height:1.15; font-weight:450; letter-spacing:-.04em; }
.section-note { max-width:38ch; color:var(--site-muted); font-size:14px; line-height:1.8; }
.text-link { display:inline-flex; align-items:center; gap:22px; padding:12px 0; color:var(--site-green); text-decoration:none; font-size:14px; font-weight:600; }
.text-link span { transition:transform .18s; }
.text-link:hover span { transform:translateX(4px); }
.image-placeholder { position:relative; overflow:hidden; min-width:0; background:linear-gradient(145deg,#64859c,#284c65); aspect-ratio:4/3; display:grid; place-items:center; }
.image-placeholder > .placeholder-number { color:rgb(255 255 255 / 12%); font-size:clamp(72px,12vw,220px); font-weight:300; letter-spacing:-.07em; line-height:1; }
.image-placeholder img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.image-placeholder[data-tone="2"] { background:linear-gradient(145deg,#758d9d,#385970); }
.image-placeholder[data-tone="3"] { background:linear-gradient(145deg,#46667f,#16364e); }
.image-placeholder[data-tone="4"] { background:linear-gradient(145deg,#8a9eaa,#456578); }
.explore-section { background:#dce9f0; color:var(--site-navy); overflow:hidden; }
.fan-deck { display:flex; gap:12px; min-height:520px; height:36vw; max-height:680px; padding:10px 6px; }
.fan-panel { flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:0; color:#fff; text-decoration:none; transform-origin:50% 90%; overflow:hidden; }
.fan-panel .image-placeholder { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.fan-panel .image-placeholder::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgb(7 30 47 / 16%) 0%,rgb(7 30 47 / 26%) 42%,rgb(7 30 47 / 72%) 100%); pointer-events:none; }
.fan-panel .image-placeholder img { transition:transform .5s ease,filter .35s ease; }
.fan-panel:hover .image-placeholder img,.fan-panel:focus-visible .image-placeholder img { transform:scale(1.035); filter:saturate(1.04) contrast(1.03); }
.fan-panel:nth-child(2) .image-placeholder img { object-position:center 18%; }
.fan-panel:nth-child(4) .image-placeholder img { object-position:center center; }
.fan-panel .placeholder-number { position:absolute; top:15%; left:10%; font-size:clamp(100px,14vw,250px); }
.fan-index,.fan-copy { position:relative; z-index:1; margin:30px; }
.fan-index { font-size:12px; letter-spacing:.15em; }
.fan-copy h3 { margin:0; font-size:clamp(14px,1.45vw,28px); font-weight:450; letter-spacing:-.025em; }
.fan-details { overflow:hidden; opacity:0; max-height:0; transition:opacity .2s,max-height .32s; }
.fan-panel.is-active .fan-details { opacity:1; max-height:130px; }
.fan-details p { font-size:13px; line-height:1.7; margin:12px 0 0; }
.fan-details .fan-zh { color:#bed0db; font-size:12px; }
.fan-arrow { display:block; color:var(--site-mint); font-size:24px; margin-top:18px; }
.brand-statement { padding:75px var(--site-space); display:flex; justify-content:space-between; align-items:center; gap:40px; background:#e3ebf0; color:var(--site-navy); }
.brand-statement p { max-width:26ch; font-size:clamp(25px,2.6vw,46px); line-height:1.3; letter-spacing:-.035em; margin:0; }
.page-hero { min-height:58svh; background:#173a54; color:#f6f9fd; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; padding:130px var(--site-space) 64px; gap:7vw; }
.page-hero .eyebrow { color:#9eb9cd; }
.page-hero h1 { font-size:clamp(40px,4.8vw,86px); line-height:1.06; font-weight:400; letter-spacing:-.05em; margin:0; }
.page-hero p:not(.eyebrow) { font-size:14px; color:#c2d3df; max-width:46ch; line-height:1.9; margin-top:25px; }
.page-hero .image-placeholder { aspect-ratio:1.5; }
.page-hero .hero-actions { margin-top:28px; }
.page-hero .text-link { color:var(--site-mint); }
.page-hero--compact { min-height:48svh; }
.page-hero--compact h1 { font-size:clamp(42px,5vw,84px); }
.split-section { display:grid; grid-template-columns:1fr 1.15fr; gap:7vw; align-items:center; }
.split-section h2 { margin-top:0; font-size:clamp(30px,3.2vw,56px); font-weight:450; letter-spacing:-.035em; }
.copy-slot { min-height:100px; max-width:50ch; color:var(--site-muted); line-height:1.8; }
.dev-note { color:var(--site-muted); font-size:12px; }
.family-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.family-entry { min-width:0; scroll-margin-top:100px; }
.family-entry .image-placeholder { aspect-ratio:1.25; }
.family-entry h3 { font-size:19px; font-weight:500; line-height:1.4; margin:20px 0 8px; }
.family-entry .zh { font-size:12px; color:var(--site-muted); margin:0 0 8px; }
.pending-label { color:var(--site-muted); font-size:12px; }
.section-tinted { background:#e6edf2; }
.contact-band { padding:64px var(--site-space); background:#dce7ee; display:flex; justify-content:space-between; align-items:center; gap:32px; }
.contact-band h2 { font-size:clamp(28px,3vw,48px); font-weight:450; margin:0; letter-spacing:-.04em; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:24px; min-height:48px; padding:12px 22px; border:1px solid #2c6e56; border-radius:0; background:var(--site-green); color:#fff; font-size:13px; text-decoration:none; cursor:pointer; }
.button--light { background:var(--site-mint); color:#102f25; border-color:var(--site-mint); }
.button--outline { background:transparent; color:var(--site-green); }
.button:hover { filter:brightness(1.08); }
.button:disabled { opacity:.45; cursor:default; }
.factory-gallery { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; }
.factory-gallery > .image-placeholder:first-child { grid-row:span 3; aspect-ratio:auto; }
.factory-gallery .factory-small { aspect-ratio:2.3; }
.capability-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; }
.capability-list h3 { font-size:17px; font-weight:500; }
.capability-list .copy-slot { min-height:65px; }
.three-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.category-chips { display:flex; flex-wrap:wrap; gap:12px 28px; padding:0; list-style:none; color:var(--site-muted); font-size:13px; }
.category-chips button { background:transparent; border:0; padding:12px 0; cursor:pointer; color:inherit; }
.category-chips button[aria-pressed="true"] { color:var(--site-green); border-bottom:1px solid currentColor; }
.certificate-stage { display:grid; grid-template-columns:1.7fr 1fr; gap:40px; align-items:start; }
.certificate-stage > .image-placeholder { aspect-ratio:1.5; }
.certificate-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.certificate-thumb { border:0; padding:0; width:100%; cursor:pointer; }
.certificate-thumb[aria-pressed="true"] { outline:2px solid var(--site-green); outline-offset:4px; }
.document-list { display:grid; grid-template-columns:repeat(2,1fr); gap:0 50px; }
.document-row { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--site-line); font-size:14px; }
.document-row span { font-size:11px; color:var(--site-muted); }
.breadcrumb { margin:0 0 28px; display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:#adc2d1; }
.breadcrumb a { text-decoration:none; }
@media(max-width:1100px) { .fan-index,.fan-copy { margin:23px 18px; } .family-grid { gap:18px; } .site-page .primary-nav { gap:18px; } .capability-list { grid-template-columns:repeat(3,1fr); } }
@media(max-width:900px) {
 .site-page .site-header { height:72px; } .site-page .nav-toggle { display:block; margin-left:auto; } .site-page .contact-trigger { margin-left:0; }
 .site-page .primary-nav { display:none; position:absolute; top:72px; left:0; right:0; padding:16px 24px; margin:0; background:#102b42; flex-direction:column; }
 .site-page .primary-nav.is-open { display:flex; }
 .section-head,.brand-statement,.contact-band { align-items:start; flex-direction:column; }
 .fan-deck { height:auto; max-height:none; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0; }
 .fan-panel { min-height:340px; padding:24px; transform:none!important; } .fan-index,.fan-copy { margin:0; }
 .fan-details { opacity:1; max-height:130px; } .fan-copy h3 { font-size:26px; }
 .page-hero,.split-section { grid-template-columns:1fr; gap:36px; } .page-hero { padding-top:118px; }
 .page-hero .image-placeholder { max-height:350px; width:100%; }
 .family-grid,.three-grid { grid-template-columns:1fr 1fr; }
 .footer-grid { grid-template-columns:1fr 1fr; } .footer-grid > :first-child { grid-column:1/-1; }
 .factory-gallery,.certificate-stage { grid-template-columns:1fr; } .factory-gallery > .image-placeholder { aspect-ratio:1.5; }
 .factory-gallery .factory-small { aspect-ratio:1.8; }
}
@media(max-width:540px) {
 .fan-deck,.family-grid,.three-grid,.capability-list,.document-list { grid-template-columns:1fr; }
 .fan-panel { min-height:320px; }
 .footer-grid { gap:32px; } .footer-bottom { flex-direction:column; }
 .section-shell { padding-block:64px; } .page-hero h1 { font-size:43px; }
}
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} *,*::before,*::after {scroll-behavior:auto!important;transition-duration:.01ms!important;} }

.site-page .page-hero :focus-visible { outline-color:var(--site-mint); }
.site-page section[id] { scroll-margin-top:96px; }

@media(min-width:901px) { .fan-panel.is-active .fan-copy h3 { font-size:clamp(20px,2vw,36px); } }
@media(max-width:900px) { .factory-gallery > .image-placeholder:first-child { grid-row:auto; } }