/* Fluid page proportions for phone, laptop, desktop and ultrawide screens. */
:root{--page-gutter:clamp(1.25rem,4.5vw,8rem);--page-width:2400px}
.wrap{width:min(calc(100% - 2 * var(--page-gutter)),var(--page-width));max-width:none;padding-inline:0}
.header{width:min(calc(100% - 2 * var(--page-gutter)),var(--page-width));margin-inline:auto;padding:clamp(1.1rem,2vh,1.8rem) 0;gap:clamp(1rem,2vw,3rem)}
.header nav{font-size:clamp(.8rem,.65vw,1rem);gap:clamp(1rem,1.8vw,2.5rem)}
.header .button.small{font-size:clamp(.75rem,.6vw,.95rem)}
.home-hero .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,8rem);min-height:min(900px,calc(100svh - 200px));padding-block:clamp(3rem,6vh,6rem)}
.home-hero .hero h1{font-size:clamp(3.5rem,5.2vw,8rem);line-height:1.04;letter-spacing:-.055em;max-width:12ch;margin-bottom:clamp(1.5rem,3vh,2.5rem)}
.home-hero .lead{font-size:clamp(1rem,.8vw,1.25rem);line-height:1.75;max-width:46ch}
.home-hero .eyebrow{font-size:clamp(.6rem,.45vw,.8rem);margin-bottom:clamp(1.5rem,3vh,2.5rem)}
.home-hero .micro{font-size:clamp(.7rem,.5vw,.85rem)}
.home-hero .actions{gap:clamp(1.2rem,2vw,2.5rem)}
.home-hero .button,.home-hero .text-link{font-size:clamp(.85rem,.65vw,1rem)}
.studio-composition{width:100%;max-width:800px;min-height:0;margin:0;justify-self:end;gap:clamp(.8rem,1.3vh,1.2rem)}
.composition-ring{inset:0;pointer-events:none}
.composition-label,.composition-bottom{font-size:clamp(.6rem,.42vw,.75rem);color:#aaa}
.composition-nav{font-size:clamp(.6rem,.45vw,.8rem);padding:1.1rem 1.5rem}
.composition-nav b{font-size:clamp(.9rem,.6vw,1.1rem)}
.composition-content{padding:clamp(1.2rem,1.4vw,2.2rem);gap:clamp(.8rem,1.2vh,1.2rem)}
.composition-content>p,.composition-content>span,.composition-footer{font-size:clamp(.6rem,.4vw,.75rem)}
.composition-content>strong{font-size:clamp(2rem,2.2vw,3.5rem);line-height:1.08}
.composition-photo{height:clamp(170px,20vh,290px);aspect-ratio:auto;object-position:center 58%}
.composition-chip{padding:clamp(1rem,1.2vw,1.6rem);align-items:center}
.composition-chip>b{font-size:clamp(1.35rem,1.3vw,2rem);line-height:1.2}
.composition-chip>span:first-child{font-size:clamp(.6rem,.4vw,.75rem)}
.composition-chip .chip-arrow{font-size:1.5rem;align-self:center}
.hero-footer{font-size:clamp(.6rem,.43vw,.8rem);padding-block:1.3rem;flex-wrap:wrap}
.section-title{grid-template-columns:minmax(180px,.5fr) minmax(0,1fr);gap:0 clamp(2rem,5vw,8rem)}
.section-title h2{font-size:clamp(2.6rem,3.3vw,5rem);max-width:25ch}
.section-title>p:last-child{font-size:clamp(.95rem,.65vw,1.1rem);max-width:65ch}
h1,h2,h3{hyphens:none;overflow-wrap:break-word}
.photo-card .preview-photo{height:clamp(210px,14vw,330px)}
.photo-card .card-art strong,.photo-card .card-art .preview-content strong{font-size:clamp(1.8rem,2vw,3rem)}
.photo-card .preview-caption,.photo-card .preview-action,.preview-browser{font-size:.7rem}
.photo-card .preview-content{padding:clamp(1rem,1.5vw,2rem)}
.photo-card .card-bottom h3,.photo-card .card-bottom h2{font-size:clamp(.85rem,.65vw,1.1rem)}
.wrap.prose{max-width:900px}.wrap.cta-panel{padding:clamp(2rem,4vw,5rem);margin-inline:auto}
.home-questions{grid-template-columns:minmax(180px,.5fr) minmax(0,1fr)}
.home-questions .faq{max-width:1100px}
@media(min-width:2000px){.section{padding-block:clamp(5rem,6vh,8rem)}.footer-top,.footer-bottom{width:min(100%,2400px);margin-inline:auto}.process-grid p,.service-row p{font-size:1rem}}
@media(max-width:1100px){
.home-hero .hero{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:2rem;min-height:0;padding-block:3rem}
.home-hero .hero h1{font-size:clamp(3rem,5.7vw,4.4rem)}
.studio-composition{max-width:none}.composition-content>strong{font-size:clamp(1.7rem,3vw,2.3rem)}
.composition-photo{height:180px}.composition-label,.composition-bottom{font-size:.6rem}
.section-title,.home-questions{display:block}.section-title .eyebrow{margin-bottom:1.5rem}
}
@media(max-width:760px){
.header{padding-block:1rem;gap:1rem}.header nav{padding-top:.5rem}
.home-hero .hero{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding-block:2.5rem}
.home-hero .hero h1{font-size:clamp(2.8rem,10.5vw,4.7rem);max-width:13ch;letter-spacing:-.05em}
.home-hero .lead{font-size:1rem;max-width:46ch}
.studio-composition{max-width:580px;justify-self:center}
.composition-content>strong{font-size:clamp(1.9rem,6vw,2.6rem)}
.composition-photo{height:clamp(180px,40vw,250px)}
.composition-footer{flex-wrap:wrap;gap:.6rem}
.hero-footer{font-size:.6rem}.hero-footer>span:first-child{max-width:100%}
.section-title h2{font-size:clamp(2.3rem,8vw,3.4rem)}
.wrap.cta-panel{width:100%;padding:3rem var(--page-gutter);margin:0}
}
