@charset "UTF-8";

/* Loaded only on phones; desktop and tablet keep their existing layouts. */
html{scroll-padding-top:100px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
.wrap,.header-inner{
  width:calc(100% - 32px);
  width:calc(100% - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px)));
}
.section-space{padding-block:48px}
h2{font-size:30px;line-height:1.5;letter-spacing:.02em}
.text-link{min-height:48px;max-width:100%;gap:20px}
.text-link>span{flex-shrink:0}
.back-link{min-height:44px;display:inline-flex;align-items:center;line-height:1.5}

.site-header{position:sticky;top:0;padding-top:env(safe-area-inset-top,0px)}
.header-inner{grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;min-height:76px;padding-block:12px}
.brand{gap:8px;min-width:0;min-height:48px}
.brand img{width:34px;height:34px;flex-shrink:0}
.brand>span{min-width:0}
.brand strong{font-size:24px;letter-spacing:.02em;line-height:1.3;overflow-wrap:anywhere}
.lang-en .brand strong{font-size:20px;letter-spacing:0;max-width:none;line-height:1.25}
.menu-toggle,.language-button{width:44px;height:48px}
.menu-toggle{padding:9px}
.menu-toggle span{margin-block:7px}
.main-nav{max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;padding:8px 16px 16px;box-shadow:0 12px 18px rgba(43,43,43,.08)}
.main-nav>a{min-height:52px;padding:12px 8px;white-space:normal;line-height:1.5}
.main-nav>a::after{left:8px}
.language-switcher{top:calc(100% + 4px);width:180px;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto}
.language-switcher a{min-height:48px}

.hero{gap:0}
.hero-visual{order:-1}
.hero-visual>img{aspect-ratio:8/5;object-position:45% center}
.hero-copy{padding:28px 16px 32px;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.hero h1,.lang-en .hero h1{font-size:34px;line-height:1.45;letter-spacing:.02em}
.lang-en .hero h1{letter-spacing:0}
.hero-description{margin-top:18px;font-size:18px;line-height:1.85}
.hero .text-link{margin-top:18px}
.home-intro{gap:22px}
.home-intro h2,.material-copy h2{font-size:30px}
.intro-copy>p,.featured-copy>p,.priority-case>p,.material-copy>p:not(.material-name),.prose{line-height:1.85}
.section-heading{gap:16px;margin-bottom:26px}
.section-heading h2{font-size:30px}
.section-heading .text-link{padding-block:7px}
.priority-case-grid{gap:36px}
.priority-case h3,.featured-copy h3{font-size:28px;line-height:1.5}
.priority-case>p{margin-top:14px}
.priority-case>.text-link,.featured-copy .text-link{margin-top:16px}
.featured-layout{gap:24px}
.featured-image>img{aspect-ratio:4/3}
.case-card-title{margin-top:16px;gap:16px;min-height:44px}
.case-card h3,.works-grid .case-card h3{font-size:25px;line-height:1.5}
.home-case-grid,.works-grid{gap:30px}
.selected-section{padding-top:12px}
.contact-band{padding-block:40px;gap:20px}
.contact-band h2{font-size:28px;line-height:1.5}

.page-heading{padding-top:30px;padding-bottom:28px}
.page-heading h1,.lang-en .page-heading h1,.page-cases .page-heading h1{font-size:32px;line-height:1.5;overflow-wrap:break-word}
.about-story{gap:24px}
.story-copy h2{font-size:28px;margin-bottom:20px;line-height:1.5}
.prose p+p{margin-top:20px}
.facts{margin-top:32px;padding-block:8px}
.facts>div{padding-block:18px}
.fact-value{font-size:42px}
.fact-unit{font-size:22px}
.facts p{margin-top:8px}
.service-list{gap:28px}
.service-list article{padding-top:22px}
.service-list h3{font-size:26px;line-height:1.5}
.service-list p{margin-top:14px;line-height:1.85}

.product-catalog{padding-bottom:32px}
.product-grid{gap:28px}
.product-teaser{gap:16px;padding-bottom:22px}
.product-teaser-copy h3{font-size:26px}
.product-teaser-copy h3 a{display:inline-flex;align-items:center;min-height:44px}
.product-teaser-copy p{margin-block:10px 16px;line-height:1.85;max-height:5.55em}
.case-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;padding:0;margin-bottom:28px;align-items:stretch}
.case-filters>a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:52px;padding:10px 12px;border:1px solid var(--line);background:#fff;white-space:normal;line-height:1.5;text-align:center}
.case-filters>a[aria-current]{border-color:#c9b594;background:#eee4d4;color:var(--accent-dark)}
.case-filters>a[aria-current]::after{display:none}
.works-section{padding-bottom:40px}
.detail-heading{padding-top:20px;padding-bottom:24px}
.detail-heading .back-link{margin-bottom:16px}
.detail-heading h1{font-size:32px;line-height:1.5}
.detail-category{margin-top:14px;line-height:1.8}
.detail-cover{width:100%}
.detail-cover img{max-height:none}
.detail-info{gap:24px;padding-block:28px}
.project-meta>div{gap:16px;padding-block:12px;min-width:0}
.project-meta dt{flex:0 0 96px}
.project-meta dd{overflow-wrap:anywhere}
.gallery-grid{gap:24px}
.gallery-grid img{height:auto;max-height:none}
.detail-gallery{padding-bottom:32px}
.product-back{padding-top:16px}
.product-back .back-link{margin-bottom:14px}
.product-hero{gap:22px;padding-bottom:30px}
.product-hero-copy{display:contents}
.product-hero h1{order:-2;font-size:36px;line-height:1.4;overflow-wrap:anywhere}
.product-hero-image{order:-1}
.product-lead{font-size:18px;line-height:1.85;margin:0}
.product-description{padding-block:34px 40px}
.product-prose h2{font-size:27px;line-height:1.5;margin-block:30px 16px}
.product-prose p{font-size:18px;line-height:1.9}
.product-gallery .gallery-grid img,.product-gallery .gallery-grid figure:last-child:nth-child(odd) img{aspect-ratio:auto;max-height:none;object-fit:contain}
.product-gallery figcaption{font-size:18px;line-height:1.7}

.contact-layout{gap:32px;padding-bottom:40px}
.contact-details h2{font-size:28px;line-height:1.5;margin-bottom:20px}
.contact-people{margin-bottom:20px}
.contact-people>div{gap:8px 16px;padding-block:16px;align-items:center}
.contact-people a{min-height:48px;font-size:26px;gap:16px}
.contact-list>div{grid-template-columns:minmax(0,1fr);gap:6px;padding-block:14px}
.contact-list dt{font-weight:700}
.contact-list dd{overflow-wrap:anywhere;line-height:1.8}
.contact-list a{display:inline-flex;align-items:center;min-height:44px;max-width:100%}
.map-link{margin-top:8px;gap:10px}
.wechat-contact{gap:20px;padding-top:22px}
.wechat-contact img{width:124px;height:124px;flex-shrink:0}
.wechat-contact h3{font-size:22px}
.contact-form-wrap{padding:24px 18px}
.contact-form-wrap h2{font-size:28px;line-height:1.5}
.contact-form{margin-top:18px}
.contact-form label{margin-top:20px;line-height:1.6}
.contact-form input,.contact-form textarea{min-height:54px;margin-top:10px;padding:12px;border:1px solid #c9b594;background:rgba(255,255,255,.7);font-size:18px;line-height:1.7}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.contact-form textarea{min-height:170px}
.form-bottom{margin-top:24px}
.solid-button{min-height:56px;gap:20px;padding:14px 18px;line-height:1.5}
.form-alert{overflow-wrap:anywhere}

.footer-main{gap:24px;padding-block:32px}
.footer-brand>a{display:inline-flex;align-items:center;min-height:44px;font-size:26px}
.footer-address p,.footer-bottom{overflow-wrap:anywhere;line-height:1.8}
.footer-address>a{display:inline-flex;align-items:center;min-height:48px;font-size:24px}
.footer-links{gap:8px 22px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-bottom{gap:16px;padding-block:20px}
.site-footer{padding-bottom:env(safe-area-inset-bottom,0px)}

/* Full-width photos and 44px controls inside the native image dialog. */
.lightbox{width:calc(100% - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:16px}
.lightbox[open]{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px}
.lightbox-top{grid-column:1/-1;min-width:0;gap:12px;padding:0}
.lightbox-caption{min-width:0;overflow-wrap:anywhere;line-height:1.6}
.lightbox-close{width:44px;height:44px;flex-shrink:0}
.lightbox-image-wrap{display:contents}
.lightbox-image{grid-column:1/-1;grid-row:2;max-width:100%;max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px);width:auto;height:auto;margin-inline:auto}
.lightbox-prev,.lightbox-next{grid-row:3;width:44px;height:44px;border:1px solid var(--line);background:#fff;font-size:26px}
.lightbox-prev{grid-column:1}
.lightbox-next{grid-column:3}
.lightbox-prev[hidden],.lightbox-next[hidden]{display:none}
.lightbox-count{grid-column:2;grid-row:3;display:grid;place-items:center;margin:0;font-size:18px}

@media(max-width:360px){
  .hero h1,.lang-en .hero h1,.page-heading h1,.lang-en .page-heading h1,.detail-heading h1{font-size:30px}
  .brand strong{font-size:23px}
  .lang-en .brand strong{font-size:19px}
  .contact-people a{font-size:24px}
  .contact-details h2,.story-copy h2,.contact-form-wrap h2{font-size:26px}
  .priority-case h3,.featured-copy h3{font-size:26px}
}