/* Keep the first-screen composition independent of the title's fitted size.
   Minimum height lets content grow safely on shorter or zoomed viewports. */
body{--site-header-height:107px;--hero-screen-height:calc(100svh - var(--site-header-height))}
body.home-page .hero,.design-page .hero,.design-page .platform-hero,.design-page .sample-opening,.about-page .about-hero{
 min-height:var(--hero-screen-height);display:flex;align-items:center;padding:clamp(20px,3svh,60px) 0
}
body.home-page .hero>.container,.design-page .hero>.container,.design-page .platform-hero>.container,.design-page .sample-opening>.container,.about-page .about-hero>.container,.design-page .contact-hero>.container,.design-page .blog-hero>.container,.design-page .pricing-opening>.container{width:100%}
body.home-page .hero .hero-grid,.design-page .hero .hero-grid{padding:0}
.design-page .process-hero-grid{min-height:var(--hero-screen-height);align-content:center;padding-top:clamp(20px,3svh,60px);padding-bottom:clamp(20px,3svh,60px)}
.design-page .pricing-intro{margin-bottom:0}
.design-page .pricing-details{padding:110px 0;border-bottom:1px solid var(--line)}
.design-page .article-hero{min-height:var(--hero-screen-height)}
@media(max-width:1180px){body{--site-header-height:87px}}
@media(max-width:700px){
 body.home-page .hero,.design-page .hero,.design-page .platform-hero,.design-page .sample-opening,.about-page .about-hero{padding:clamp(20px,3svh,60px) 0}
 .design-page .process-hero-grid{padding-top:clamp(20px,3svh,60px);padding-bottom:clamp(20px,3svh,60px)}
}

/* Utility pages get compact introductions so their content appears sooner. */
.design-page .blog-hero{display:block;min-height:0;padding:64px 0 58px}
.design-page .contact-hero{display:block;min-height:0;padding:64px 0 60px}
.design-page .contact-section{padding-top:80px;padding-bottom:100px}
.design-page .pricing-opening{display:block;min-height:0;padding:58px 0 44px}
.design-page .pricing-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:end;margin:0}
.design-page .pricing-intro h1{margin:0}
.design-page .pricing-intro>p{font-size:21px;line-height:1.7;max-width:650px}
.design-page .pricing-details{padding:64px 0 100px}
.design-page .blog-list-section{padding-top:70px}

/* Both offers share title, amount, description, detail, and CTA rows. */
.design-page .pricing-options{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:0;grid-template-rows:auto auto auto 1fr auto}
.design-page .pricing-option{display:grid;grid-template-rows:subgrid;grid-row:span 5;padding:42px;border:0;box-shadow:inset 0 1px #536348}
.design-page .pricing-option-primary{box-shadow:none}
.design-page .pricing-option h2{min-height:0}
.design-page .pricing-option .button{margin-top:0;align-self:end;justify-self:start}
@media(max-width:1050px){
 .design-page .pricing-option{padding:32px}
 .design-page .pricing-options{column-gap:30px}
}
@media(max-width:900px){.design-page .pricing-intro{grid-template-columns:1fr;gap:25px}}
@media(max-width:700px){
 .design-page .blog-hero,.design-page .contact-hero{padding:50px 0 46px}
 .design-page .contact-section{padding:64px 0 80px}
 .design-page .pricing-opening{padding:48px 0 38px}
 .design-page .pricing-intro>p{font-size:19px}
 .design-page .pricing-details{padding:25px 0 72px}
 .design-page .pricing-options{display:flex;flex-direction:column;gap:35px}
 .design-page .pricing-option{display:flex;padding:29px 25px}
 .design-page .pricing-option .button{margin-top:auto;align-self:flex-start}
 .design-page .blog-list-section{padding-top:50px}
}