/* Reusable layouts for architecture category pages. */
.category-hero{aspect-ratio:1688/547;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.category-hero:after{background:#0008}
.category-hero>.photo-bg{object-position:center 50%}
.category-hero h1{text-align:center;font-size:clamp(24px,2.8vw,48px);letter-spacing:.19em;line-height:1.35;margin:0 24px 2.8%}
.category-hero .header-contact{background:white;color:var(--ink);border-radius:30px;padding:12px 28px;font-size:14px}
.category-intro{text-align:center;max-width:1100px;margin:auto;padding:clamp(65px,7vw,120px) 24px clamp(65px,6.8vw,116px)}
.category-intro h2{font-size:clamp(25px,2.35vw,40px);line-height:1.3}
.category-intro p{max-width:790px;margin:clamp(28px,3vw,48px) auto 40px;font-size:clamp(15px,1.07vw,18px);line-height:1.69}
.category-intro>img{width:65px;height:67px;object-fit:contain;margin:0 auto 54px}
.category-intro .pill{min-height:40px;font-size:13px;padding:12px 22px}
.product-showcases{display:grid;gap:var(--gutter)}
.product-showcase{aspect-ratio:1689/900;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:4.4% 24px}
.product-showcase:after{background:linear-gradient(#0000 45%,#0004)}
.product-showcase h2{font-size:clamp(26px,3.7vw,64px);line-height:1.25;letter-spacing:.09em;margin:0 0 30px}
.product-showcase .pill{font-size:clamp(13px,1.4vw,24px);padding:12px 30px}
.product-showcase--door>.photo-bg{width:123.16%;height:114.21%;max-width:none;left:-17.47%;object-fit:fill}
.contact-callout{text-align:center;padding:clamp(60px,6vw,100px) 24px}
.contact-callout h2{max-width:994px;margin:0 auto 38px;font-size:clamp(26px,2.8vw,48px);line-height:1.3}
.contact-callout .pill{min-width:180px}
.catalog-banner{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:1689/337;min-height:160px}
.catalog-banner>.photo-bg{object-position:center top}
.catalog-banner:after{background:#0004}
.catalog-banner h2{font-size:clamp(26px,3.7vw,64px);letter-spacing:.09em;padding:20px}
@media(max-width:700px){
 .category-hero{aspect-ratio:auto;min-height:360px}
 .category-hero h1{font-size:26px;letter-spacing:.12em;margin:0 20px 32px;overflow-wrap:anywhere}
 .category-hero header{padding:18px 14px}
 .category-hero .header-contact{font-size:10px;padding:9px 12px}
 .category-intro{padding:52px 16px}
 .category-intro p{font-size:16px;margin:26px auto 30px}
 .category-intro>img{width:52px;height:54px;margin-bottom:32px}
 .product-showcases{gap:15px}
 .product-showcase{aspect-ratio:4/5;min-height:420px;padding:36px 20px}
 .product-showcase h2{font-size:27px;letter-spacing:.07em;margin-bottom:24px;overflow-wrap:anywhere}
 .product-showcase>.photo-bg{object-position:50% center}
 .product-showcase--door>.photo-bg{width:100%;height:100%;left:0;object-fit:cover;object-position:60% center}
 .contact-callout{padding:58px 18px}
 .contact-callout h2{font-size:26px;margin-bottom:28px}
 .catalog-banner{min-height:210px}
 .catalog-banner h2{font-size:29px}
}
@media(max-width:380px){.category-hero h1{font-size:22px;letter-spacing:.09em}.product-showcase h2{font-size:23px}.category-page .footer-columns{grid-template-columns:1fr}.category-page .newsletter{grid-column:auto}}
.category-hero,.catalog-banner,.product-showcase{width:100%;min-width:0}
@media(max-width:380px){.category-hero .brand img{width:75px;height:50px}.category-hero .header-contact{font-size:9px;padding:9px}.category-hero header{padding-inline:12px}}

/* Bottom framing keeps the curved bench visible, as in Figma. */
.product-showcase--bottom>.photo-bg{object-position:center bottom}

/* Figma's infrastructure source is sideways; rotate the image at render time. */
.category-hero--rotated{container-type:inline-size}
.category-hero--rotated>.photo-bg{inset:auto;left:50%;top:50%;width:max(50cqw,300px);height:max(100cqw,600px);max-width:none;transform:translate(-50%,-50%) rotate(90deg)}
@media(max-width:700px){.category-hero--rotated>.photo-bg{width:max(50cqw,360px);height:max(100cqw,720px)}}
@media(max-width:380px){.category-hero--rotated h1{font-size:18px;letter-spacing:.06em}}