.section.about.office-showcase{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;gap:7%;align-items:center;padding:80px 8%;background:#33372e}
.office-backdrop{position:absolute;inset:-3%;z-index:-2;background-size:cover;background-position:center 64%;opacity:.22;filter:saturate(.65);transform:scale(1.025);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.office-showcase::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(37,42,32,.9),rgba(37,42,32,.55) 52%,rgba(37,42,32,.18));pointer-events:none}
.office-showcase .about-copy{grid-column:1;grid-row:1;position:relative;padding:0;max-width:540px}
.office-showcase .about-photo{grid-column:2;grid-row:1;display:block;position:relative;min-height:0;aspect-ratio:auto;width:100%;max-width:520px;justify-self:end;margin:0;border:1px solid #ffffff2b;background:#ffffff0c;box-shadow:0 24px 70px #10150f38;overflow:hidden}
.office-showcase .about-photo img{display:block;width:100%;height:auto;max-height:660px;object-fit:contain;opacity:.88;transition:opacity .8s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.office-showcase .about-photo:hover img{opacity:1;transform:scale(1.015)}
.office-photo-caption{position:absolute;bottom:0;left:0;right:0;margin:0;padding:30px 22px 17px;background:linear-gradient(transparent,#20251e9e);color:#fff;font-size:11px;letter-spacing:.14em;text-align:left}
.office-showcase .about-lead,.office-showcase .values p{color:#eeeae0}
.office-enter .about-photo{opacity:0;transform:translateY(28px);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.office-visible .about-photo{opacity:1;transform:translateY(0)}
.office-visible .office-backdrop{transform:scale(1)}
@media(max-width:760px){.section.about.office-showcase{grid-template-columns:1fr;gap:32px;padding:56px 7%}.office-showcase .about-copy{grid-column:1;grid-row:1}.office-showcase .about-photo{grid-column:1;grid-row:2;justify-self:center;max-width:460px}.office-showcase .about-photo img{max-height:none}.office-showcase::after{background:linear-gradient(180deg,#252a20e8,#252a2070)}.office-backdrop{opacity:.2}}
@media(prefers-reduced-motion:reduce){.office-showcase .about-photo,.office-showcase .about-photo img,.office-backdrop{transition:none!important;transform:none!important;opacity:1}.office-backdrop{opacity:.22}}
/* Work leads the page; supporting sections stay compact. Hero is unchanged. */
.manifesto{padding-top:36px;padding-bottom:36px}
.section.services{padding-top:54px;padding-bottom:54px}
.services .service{min-height:150px;padding-top:24px;padding-bottom:24px}
.services .service.preview-open{min-height:470px;padding-top:285px;padding-bottom:36px}
.section.portfolio{padding-top:76px;padding-bottom:76px}
.portfolio .section-intro h2{font-size:clamp(32px,3.5vw,46px)}
.section.benefits{padding-top:50px;padding-bottom:50px}
.benefit-card{min-height:380px}
.section.process{padding-top:46px;padding-bottom:46px}
.process .section-intro{margin-bottom:24px}
.section.about.office-showcase{padding-top:40px;padding-bottom:40px;grid-template-columns:1.25fr .75fr;gap:6%}
.office-showcase .about-photo{max-width:285px}
.office-showcase .about-photo img{max-height:380px}
.office-showcase .about-copy h2{font-size:clamp(27px,2.7vw,36px);margin-bottom:20px}
.office-showcase .about-copy .about-lead{font-size:14px;margin-bottom:18px}
.office-showcase .values article{padding-top:14px}
.section.location{padding-top:44px;padding-bottom:44px}
#office-map{height:300px}
.section.contact{padding-top:50px;padding-bottom:28px}
.contact h2{font-size:clamp(36px,4vw,54px)}
@media(max-width:760px){
 .manifesto{padding-top:30px;padding-bottom:30px}
 .section.services,.section.benefits{padding-top:40px;padding-bottom:40px}
 .services .service{min-height:150px;padding-top:22px;padding-bottom:22px}
 .services .service.preview-open{min-height:420px;padding-top:235px;padding-bottom:36px}
 .section.portfolio{padding-top:52px;padding-bottom:52px}
 .portfolio .section-intro h2{font-size:31px}
 .benefit-card{min-height:430px}
 .section.process{padding-top:36px;padding-bottom:36px}
 .process-steps li{padding-top:16px;padding-bottom:16px}
 .section.about.office-showcase{padding-top:32px;padding-bottom:32px;grid-template-columns:1fr;gap:20px}
 .office-showcase .about-photo{max-width:210px;justify-self:center}
 .office-showcase .about-photo img{max-height:280px}
 .office-showcase .about-copy h2{font-size:27px;margin-bottom:16px}
 .office-showcase .about-copy .about-lead{margin:16px 0}
 .office-photo-caption{font-size:9px;padding:24px 12px 12px}
 .section.location{padding-top:36px;padding-bottom:36px}
 #office-map{height:260px}
 .section.contact{padding-top:40px;padding-bottom:24px}
 .contact h2{font-size:35px}
}
.construction-guide summary{font-size:17px;font-weight:600;cursor:pointer;padding:8px 0;min-height:44px}
.construction-guide[open] summary{margin-bottom:16px}
@media(max-width:760px){
 .section.services,.section.benefits,.section.process,.section.location{padding-top:28px;padding-bottom:28px}
 .section-top .eyebrow{margin-bottom:12px}
 .section-intro{margin:14px 0 20px}
 .section-intro h2{font-size:25px;line-height:1.4}
 .section-intro>p{margin-top:12px;line-height:1.65}
 .services .service{min-height:0;padding:16px 10px;gap:7px}
 .service h3{font-size:21px}.service p{font-size:12px;line-height:1.65}.service-tag{font-size:10px}
 .section.portfolio{padding-top:32px;padding-bottom:32px}
 .portfolio .section-intro h2{font-size:28px}
 .portfolio .work-stage{height:clamp(210px,38svh,360px);aspect-ratio:auto}
 .work-toolbar{padding-top:16px;gap:10px}
 .work-caption{min-height:0}.work-caption>span{margin-bottom:5px;font-size:10px}
 .work-caption h3{font-size:21px;margin-bottom:5px}.work-caption p{font-size:13px;line-height:1.65}
 .work-navigation button{width:40px;height:40px;font-size:22px}
 .work-dots{margin-top:16px}
 .benefits-heading{margin-bottom:16px}.benefits-heading h2{font-size:26px}
 .benefit-card{min-height:0;padding:20px 6% 72px;justify-content:flex-start}
 .benefit-card .why-number{margin-bottom:12px}.benefit-card .why-concern{margin-bottom:8px;font-size:12px}
 .benefit-card h3{font-size:24px;line-height:1.4}
 .benefit-card .why-description{font-size:13px;line-height:1.7;margin:12px 0}
 .benefit-card .why-detail{font-size:10px;line-height:1.6;padding-top:8px}
 .benefit-example{margin-top:10px}.benefit-example img{height:90px}.benefit-example figcaption{font-size:10px;margin-top:4px}
 .construction-guide{margin-top:16px;padding-top:10px}
 .process-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
 .process-steps li{display:block;padding:12px 0;min-width:0}
 .process-steps li>span{font-size:11px}.process-steps .step-icon{width:34px;height:34px;margin:8px 0}
 .step-icon .line-icon{width:19px;height:19px}
 .process-steps h3{font-size:14px;margin:6px 0}.process-steps p{font-size:12px;line-height:1.6;margin:0}
 .process-steps p br{display:none}
 .section.about.office-showcase{padding-top:28px;padding-bottom:28px;gap:16px}
 .office-showcase .about-photo{max-width:165px}.office-showcase .about-photo img{max-height:220px}
 .office-showcase .about-copy .eyebrow{margin-bottom:14px}
 .office-showcase .about-copy h2{font-size:25px;line-height:1.4;margin-bottom:12px}
 .office-showcase .about-copy .about-lead{font-size:13px;line-height:1.65;margin:12px 0}
 .office-showcase .values article{padding-top:10px}.office-showcase .values h3{font-size:14px;margin-bottom:6px}
 #office-map{height:220px}.location-layout{gap:18px}.location-calls{margin-top:16px;gap:12px}
 .section.contact{padding-top:30px;padding-bottom:22px}.contact h2{font-size:31px;margin:16px 0}
}
/* Mobile process: one compact, unambiguous top-to-bottom path. */
@media(max-width:760px){
 #process .section-intro{margin-bottom:20px}
 #process .section-intro>p{margin-top:10px}
 #process .process-steps{display:block;list-style:none;margin:0;padding:0}
 #process .process-steps li{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 28px;grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-content:start;min-height:72px;padding:0 0 18px;border:0}
 #process .process-steps li:last-child{min-height:0;padding-bottom:0}
 #process .process-steps li>span{grid-column:1;grid-row:1/3;align-self:start;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;width:38px;height:38px;padding:0;border:1px solid #b6a48a;border-radius:50%;background:#f7f4ed;color:#69553b;font-size:16px;line-height:1;font-weight:650;font-variant-numeric:tabular-nums}
 #process .process-steps li:first-child>span{background:#695a45;border-color:#695a45;color:#fff}
 #process .process-steps li:last-child>span{background:#e8e9df;border-color:#959c83;color:#515c43}
 #process .process-steps li:not(:last-child)::before{content:'';position:absolute;left:18px;top:40px;bottom:3px;width:1px;background:#c9baa4}
 #process .process-steps li:not(:last-child)::after{content:'';display:block;position:absolute;left:15px;top:auto;right:auto;bottom:5px;width:6px;height:6px;border-right:1px solid #aa9578;border-bottom:1px solid #aa9578;transform:rotate(45deg)}
 #process .process-steps h3{grid-column:2;grid-row:1;margin:1px 0 0;font-size:15px;line-height:1.45;font-weight:650}
 #process .process-steps p{grid-column:2;grid-row:2;margin:0;font-size:12px;line-height:1.6;color:#6d665c;word-break:keep-all}
 #process .process-steps p br{display:none}
 #process .process-steps .step-icon{grid-column:3;grid-row:1/3;align-self:start;width:26px;height:26px;margin:4px 0 0;border:0;background:transparent;border-radius:0}
 #process .process-steps .step-icon .line-icon{width:22px;height:22px;color:#8c7c65}
}