/* Shared reading scale and layouts: headings follow the content, not the viewport. */
:root{--section-space:72px;--reading-width:64ch}
body{font-size:1rem;line-height:1.75}
h1,h2,h3{text-wrap:balance}
p{max-width:var(--reading-width);text-wrap:pretty}
.wrap{max-width:1440px}
.section,.home-page .section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
h2,.home-page h2{font-size:clamp(1.875rem,2.5vw,2.5rem);line-height:1.2;letter-spacing:-.025em}
h3{font-size:1.5rem;line-height:1.3;letter-spacing:-.02em}
.eyebrow{font-size:.8125rem;letter-spacing:.1em;margin-bottom:16px}
.section-head .eyebrow{margin-bottom:14px}
.section-head{align-items:start;gap:32px;margin-bottom:32px}
.section-head>div{min-width:0}
.section-aside{max-width:360px}
.section-aside p{margin:0 0 10px}
.text-link{gap:20px;line-height:1.5;min-height:44px}
.text-link svg{flex-shrink:0}
.breadcrumb{font-size:.8125rem;padding-top:22px}
.page-intro{padding-top:30px;padding-bottom:40px}
.page-intro h1{font-size:clamp(2.2rem,3.25vw,3.25rem);line-height:1.16;max-width:26ch}
.page-intro>p,.page-intro-split p{font-size:1.0625rem;line-height:1.75;margin:22px 0 0;max-width:64ch}
.page-intro-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:6%;padding-bottom:56px}
.page-intro-split h1{max-width:18ch}
.page-intro-split figure{margin:0;min-width:0}
.page-intro-split img{height:auto;aspect-ratio:3/2;object-fit:contain;background:var(--stone)}
.content-pair{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7%;align-items:start}
.content-pair h2{max-width:24ch}
.content-pair>*,.contact-layout>*,.photo-detail>*{min-width:0}
.content-pair p{margin-bottom:18px}
.about-overview{border-top:1px solid var(--line)}
.about-overview h2{max-width:100%}
.process-section,.home-page .process-section{padding-top:0}
.home-process{padding-top:var(--section-space)}
.process-grid{gap:28px;margin-top:30px;list-style:none;padding-left:0}
.step{padding-top:18px}
.step>span{font-size:1rem;color:var(--bronze)}
.step h3{font-size:1.25rem;line-height:1.4;margin:14px 0 10px}
.step p{font-size:1rem;line-height:1.7;margin:0}
.faq{width:100%;min-width:0}
.faq details{padding:18px 0}
.faq summary{font-size:1rem;line-height:1.65;gap:20px}
.faq summary:after{flex-shrink:0}
.faq details p{font-size:1rem;margin:16px 24px 0 0}
.home-questions{gap:7%}
.home-questions h2{margin-bottom:18px}
.cta{padding:48px 0}
.cta h2,.closing-grid h2{font-size:clamp(2rem,2.8vw,2.75rem);line-height:1.2;max-width:25ch}
.cta p{margin:16px 0 0;max-width:52ch}
.cta .eyebrow{margin-bottom:12px}
.home-closing{padding:54px 0}
.closing-grid{grid-template-columns:1fr 1fr;gap:7%}
.closing-grid p{font-size:1rem;max-width:48ch;margin:0 0 20px}
.closing-phone{margin-top:12px}
.home-intro{gap:7%;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.intro-editorial>p{font-size:1rem;margin-bottom:24px}
.intro-points{gap:20px;padding-top:0}
.intro-points h3{font-size:1.125rem;line-height:1.4;margin:10px 0 6px}
.intro-points p{font-size:.9375rem;line-height:1.65}
.intro-points>div>span{font-size:.8125rem}
.home-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.home-projects .project-card:nth-child(2){margin-top:0}
.project-info{align-items:start;gap:20px;margin-top:18px}
.project-info>div{min-width:0}
.project-info>svg{margin-top:30px}
.home-projects .project-info{padding-bottom:22px}
.home-projects .project-info h3,.gallery-grid .project-info h3{font-size:1.5rem;line-height:1.3;max-width:28ch}
.project-info .eyebrow{font-size:.8125rem;margin-bottom:8px}
.gallery-note{grid-column:1/-1;margin-top:0;padding:20px 0;gap:22px}
.gallery-note .note-number{font-size:1.25rem}
.gallery-note .eyebrow{font-size:.8125rem;margin-bottom:6px}
.gallery-note h3{font-size:1.375rem}
.gallery-grid{gap:32px;padding-bottom:64px}
.gallery-grid .project-card{border-bottom:1px solid var(--line);padding-bottom:22px}
.material-library-grid{gap:7%;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.material-feature img{max-height:490px}
.material-choice summary{min-height:74px;gap:14px}
.material-choice h3{font-size:1.65rem;line-height:1.25}
.material-choice-body{padding-bottom:22px}
.material-feature figcaption>span:last-child{font-size:.8125rem}
.material-jump{gap:10px}
.material-jump a{gap:14px}
.material-guide{padding-top:36px!important}
.material-detail{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:7%;padding:36px 0}
.material-detail h2{font-size:2rem}
.material-kind{margin-top:10px}
.material-detail .eyebrow{margin-bottom:14px}
.material-detail p{margin-bottom:12px}
.care-note{margin:20px 0 8px;padding-left:18px}
.material-help{padding:30px;margin-top:28px}
.material-help h2{font-size:1.75rem;margin-bottom:16px}
.wide-image img{height:auto;max-height:580px;object-fit:contain;background:var(--stone)}
.wide-image figcaption{font-size:.875rem;margin-top:12px}
.home-craft{gap:7%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.craft-editorial h2{margin-bottom:18px}
.craft-details{margin-top:22px}
.craft-details>div{padding:16px 0}
.everyday-image figcaption{font-size:1rem;padding:18px 20px;margin-left:0;gap:14px}
.caption-rule{margin-top:12px}
.mood-controls{margin-bottom:28px}
.mood-controls button{padding:14px 18px;font-size:.9375rem}
.mood-story h3{font-size:1.75rem;line-height:1.3;margin-bottom:16px}
.mood-story>.eyebrow{margin-bottom:12px}
.mood-story>p{max-width:46ch}
.palette{margin:20px 0;gap:22px}
.palette-chip{width:36px;height:36px}
.palette li{font-size:.875rem}
.photo-detail{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:8%;padding-top:44px;padding-bottom:40px}
.photo-detail h2{font-size:2rem;margin-bottom:18px}
.photo-detail .notice{max-width:42ch}
.contact-layout{gap:7%;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);padding-bottom:64px}
.contact-details h2{font-size:1.75rem;margin-bottom:20px}
.contact-form{padding:30px}
.contact-form legend{font-size:1.5rem;line-height:1.4}
.form-grid{gap:20px}
.contact-form .form-help{margin:14px 0 24px}
.footer{padding-top:44px}
.footer-top{padding-bottom:36px}
.footer-links{gap:6px;font-size:.9375rem}
.footer-links a{min-height:32px}
.footer h3{font-size:.875rem;margin-bottom:16px}
.video-copy{max-width:790px}
.video-copy h1{font-size:clamp(3rem,4.4vw,4.75rem);line-height:1.08;max-width:20ch}
.video-copy>p{max-width:48ch}
html[lang=zh-CN] h1,html[lang=zh-CN] h2,html[lang=zh-CN] h3{letter-spacing:0;line-break:strict;word-break:normal}
html[lang=zh-CN] h2,html[lang=zh-CN] .home-page h2{font-size:clamp(1.75rem,2.2vw,2.125rem);line-height:1.4}
html[lang=zh-CN] .page-intro h1{font-size:clamp(2rem,2.8vw,2.75rem);line-height:1.35;max-width:22ch}
html[lang=zh-CN] .page-intro-split h1{max-width:11em}
html[lang=zh-CN] .eyebrow{letter-spacing:.045em}
html[lang=zh-CN] .step h3,html[lang=zh-CN] .intro-points h3{font-size:1.125rem;line-height:1.5}
html[lang=zh-CN] .mood-story h3{font-size:1.5rem;line-height:1.5}
html[lang=zh-CN] .project-info h3{font-size:1.375rem;line-height:1.5}
html[lang=zh-CN] .video-copy h1{font-size:clamp(2.5rem,3.5vw,3.6rem);line-height:1.4;max-width:14em}
html[lang=zh-CN] .video-copy>p{max-width:28em}
@media(max-width:1000px){
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .section-head{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
  .section-aside{max-width:40rem;margin-top:0}
  .section-head>p,.material-library .section-head>p{margin:0;max-width:40rem}
  .home-intro,.home-craft{grid-template-columns:minmax(0,1fr);gap:28px}
  .intro-points{max-width:800px}
  .everyday-image{max-width:760px}
}
@media(max-width:850px){
  :root{--section-space:52px}
  .page-intro-split{grid-template-columns:minmax(0,1fr);gap:30px;padding-bottom:40px}
  .page-intro-split h1{max-width:26ch}
  .page-intro-split figure{max-width:760px}
  .content-pair,.home-questions,.contact-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .content-pair h2{max-width:100%}
  .home-questions h2{margin-bottom:12px}
  .mood-story h3{font-size:1.75rem}
  .material-detail{grid-template-columns:minmax(0,1fr);gap:18px}
  .material-kind{margin-top:8px}
  .material-detail .eyebrow{margin-bottom:8px}
  .photo-detail{grid-template-columns:minmax(0,1fr);gap:22px}
  .home-projects,#spaces .home-projects{grid-template-columns:minmax(0,1fr);gap:28px}
  .gallery-note,#spaces .gallery-note{grid-column:auto;margin-top:0}
  .closing-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .cta-inner{gap:24px}
}
@media(max-width:600px){
  :root{--section-space:44px}
  .page-intro{padding-top:24px;padding-bottom:30px}
  .page-intro h1{font-size:2.125rem;line-height:1.2}
  .page-intro>p,.page-intro-split p{font-size:1rem;margin-top:18px}
  h2,.home-page h2,.cta h2,.closing-grid h2{font-size:1.875rem;line-height:1.25}
  .section-head,#spaces .section-head{gap:18px;margin-bottom:26px}
  .eyebrow{font-size:.8125rem;letter-spacing:.07em}
  .intro-points{grid-template-columns:minmax(0,1fr);gap:0}
  .intro-points>div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:3px 12px;padding:15px 0}
  .intro-points>div>span{grid-row:1/3;padding-top:2px}
  .intro-points h3{font-size:1.125rem;margin:0}
  .intro-points p{grid-column:2;font-size:.9375rem}
  .process-grid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:24px}
  .step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px 16px;padding:20px 0}
  .step>span{grid-row:1/3;padding-top:2px}
  .step h3{font-size:1.1875rem;margin:0}
  .step p{grid-column:2}
  .gallery-grid{grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:44px}
  .home-projects .project-info h3,.gallery-grid .project-info h3{font-size:1.375rem}
  .gallery-note{gap:16px}
  .gallery-note h3{font-size:1.25rem}
  .material-library-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .material-feature{max-width:320px}
  .material-feature img{max-height:350px}
  .material-choice h3{font-size:1.5rem}
  .material-choice summary{min-height:70px}
  .material-jump{padding-bottom:24px}
  .material-jump a{font-size:.875rem;padding:9px 12px}
  .material-detail{padding:28px 0}
  .material-help{padding:24px}
  .material-help h2{font-size:1.5rem}
  .photo-detail h2{font-size:1.75rem}
  .contact-details .contact-phone{font-size:1.75rem}
  .contact-form{padding:24px 20px}
  .contact-form legend{font-size:1.375rem}
  .home-closing,.cta{padding:40px 0}
  .mood-story h3{font-size:1.5rem}
  .mood-controls button{font-size:.9375rem;min-height:52px}
  .palette{gap:22px}
  .video-copy h1{font-size:clamp(2rem,8.4vw,3.1rem);max-width:20ch}
  .video-copy>p{max-width:36ch}
  .video-copy .eyebrow{font-size:.75rem}
  .hero-caption,.video-toggle{font-size:.75rem}
  html[lang=zh-CN] .page-intro h1{font-size:1.875rem;line-height:1.4;max-width:100%}
  html[lang=zh-CN] h2,html[lang=zh-CN] .home-page h2{font-size:1.625rem;line-height:1.45}
  html[lang=zh-CN] .video-copy h1{font-size:clamp(1.875rem,7.7vw,2.75rem);line-height:1.4}
  html[lang=zh-CN] .mood-story h3{font-size:1.375rem}
  html[lang=zh-CN] .project-info h3{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Avoid doubling the space between consecutive sections on interior pages. */
.inner-page .process-section+.content-pair,.contact-layout+.content-pair{padding-top:0}
#spaces,#questions{scroll-margin-top:110px}

.material-choice summary{grid-template-columns:30px minmax(0,1fr) 24px;padding-right:6px}
.expand-mark{width:24px;height:24px;line-height:24px;font-size:24px}

/* A readable company name beside the original logo, including narrow screens. */
.site-header .brand-lockup{max-width:none;min-width:0;flex-shrink:0;gap:16px}
.brand-name{font:400 1.5rem/1.15 var(--serif);letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
@media(max-width:1250px){
  .desktop-nav,.nav-actions>.button{display:none}
  .menu-toggle{display:inline-block}
  .mobile-nav.is-open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:92px;background:var(--paper);padding:15px var(--gutter) 25px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px #102a4310}
  .mobile-nav a{padding:13px 0;border-bottom:1px solid var(--line)}
}
@media(max-width:850px){
  .mobile-nav.is-open{top:78px}
  .site-header .brand-lockup{gap:12px}
  .brand-name{font-size:1.25rem}
}
@media(max-width:600px){
  .site-header .brand-lockup{gap:10px}
  .site-header .brand-lockup img{width:64px;height:auto;max-width:none}
  .brand-name{font-size:1.25rem;line-height:1.12;letter-spacing:0}
  .brand-name>span{display:block;font-size:1rem}
  .header-inner{gap:8px}
  .nav-actions{gap:2px}
  .menu-toggle{width:44px;flex-shrink:0}
}
@media(max-width:359px){
  .site-header .brand-lockup img{width:48px}
  .site-header .brand-lockup{gap:8px}
  .brand-name{font-size:1.125rem}
  .brand-name>span{font-size:.9375rem}
}