/* Keep the opening composition together at laptop and desktop heights. */
.hero-headline-line{display:block}
.hero-lead-secondary{display:block}
@media(min-width:1101px){
  body{--opening-row:clamp(82px,5.4vw,110px);--opening-nav:clamp(68px,4.7vw,92px)}
  body .reference-top{grid-template-columns:minmax(0,1.15fr) minmax(0,.65fr) minmax(0,1fr) minmax(0,1.85fr) minmax(0,.8fr);column-gap:clamp(14px,1.2vw,26px);min-height:var(--opening-row);padding:10px 0 6px}
  .reference-top>*{min-width:0}
  body .reference-brand strong{font-size:clamp(21px,1.4vw,29px)}
  body .reference-brand small{font-size:clamp(14px,1vw,20px)}
  body .reference-paw{width:clamp(40px,2.6vw,54px);height:clamp(40px,2.6vw,54px)}
  body .header-rating>strong{font-size:clamp(20px,1.3vw,26px)}
  body .header-rating>span{font-size:clamp(14px,.95vw,19px)}
  body .header-rating .rating-stars{font-size:clamp(25px,1.7vw,34px);line-height:1;margin-top:2px}
  body .header-email{min-width:0;min-height:56px;padding:12px 18px;gap:10px;font-size:clamp(14px,.95vw,19px)}
  body .header-email svg{width:22px;height:22px;flex:none}
  body .header-contact{min-width:0;font-size:clamp(12px,.98vw,20px);line-height:1.35;gap:clamp(10px,1vw,20px)}
  body .header-portrait{width:clamp(50px,3.5vw,70px);height:clamp(50px,3.5vw,70px)}
  body .header-socials :is(button,a){font-size:clamp(14px,1vw,20px);padding:4px 10px}
  body .header-socials svg{width:20px;height:20px}
  body .header-preview-note{font-size:11px;line-height:14px;margin:0;padding:0 0 6px}
  body .nav.reference-menu{min-height:var(--opening-nav);padding:14px clamp(24px,2.2vw,44px);font-size:clamp(16px,1.05vw,22px);gap:24px;align-items:center}
  body .reference-menu .home svg{width:clamp(28px,2vw,38px);height:clamp(28px,2vw,38px)}
  body .hero{--opening-hero:calc(100svh - var(--opening-chrome,calc(var(--opening-row) + var(--opening-nav) + 20px)) + 2px);grid-template-columns:minmax(0,52.3fr) minmax(0,47.7fr);height:var(--opening-hero);min-height:0;max-height:none;gap:0;align-items:stretch;padding:0}
  body .hero-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(24px,3.1vh,38px) clamp(24px,3.2vw,64px) clamp(24px,3.1vh,38px) clamp(30px,3.4vw,68px)}
  body .hero h1{font-size:clamp(31px,2.9vw,64px);line-height:1.23;margin:0;max-width:100%;flex:none}
  body .hero h1 em{display:block;min-height:1.23em;line-height:inherit;white-space:nowrap}
  body .hero-headline-line{white-space:nowrap}
  body .hero .lead{font-size:clamp(16px,1.2vw,25px);line-height:1.4;max-width:34em;padding-left:clamp(25px,1.8vw,36px);margin:clamp(24px,4.6vh,48px) 0 0}
  body .hero .lead-play{font-size:clamp(24px,1.8vw,36px);top:-3px}
  body .hero .actions{display:flex;flex-wrap:nowrap;margin:clamp(26px,4.6vh,48px) 0 0;gap:18px}
  body .hero .actions .btn{flex:0 1 360px;width:100%;max-width:100%;min-height:clamp(64px,8.5vh,94px);padding:18px 26px;font-size:clamp(18px,1.2vw,25px);border-radius:999px;line-height:1.2}
  body .hero .visual.montage{height:var(--opening-hero);min-height:0;max-height:none;margin:0;align-self:stretch;padding:0}
  body .hero .showcase-column{min-height:0;max-height:none;margin:0}
  body .hero .showcase-motion{align-items:flex-start}
  body .hero .montage-card{min-width:0}
  body .strip{padding-block:20px}
}
@media(min-width:801px) and (max-width:1100px){
  body .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);height:auto;min-height:calc(100svh - var(--opening-chrome,72px) + 2px);align-items:stretch}
  body .hero-copy{padding:40px 24px}
  body .hero h1{font-size:clamp(25px,3.1vw,34px);line-height:1.25}
  body .hero .lead{font-size:16px;line-height:1.4;margin-top:24px}
  body .hero .actions{margin-top:26px}
  body .hero .btn{min-height:64px;font-size:17px}
  body .hero .visual.montage{height:auto;min-height:420px;align-self:stretch;margin:0}
}
@media(max-width:800px){
  body .hero{min-height:calc(100svh - var(--opening-chrome,65px) + 2px)}
  body .hero h1{margin-top:22px}
  body .hero .lead{line-height:1.4}
  body .hero-lead-secondary{margin-top:6px}
  body .hero .actions{order:2}
  body .hero .visual.montage{order:3;margin:0}
  body .hero .actions .btn{width:100%;max-width:360px;min-height:64px;font-size:18px}
}

/* Balance the full-height opening without pushing the next section upward. */
.hero-location{white-space:nowrap}
@media(min-width:1101px){
 body .hero-copy{justify-content:flex-start;padding-top:clamp(64px,10svh,112px)}
 body .hero h1{font-weight:800;font-size:clamp(31px,2.75vw,60px);line-height:1.24}
 body .hero h1 em{font-weight:800}
 body .hero .lead{margin-top:clamp(28px,4.5svh,46px);font-size:clamp(17px,1.2vw,25px);line-height:1.5}
 body .hero .actions{margin-top:clamp(28px,4svh,44px)}
 body .hero .actions .btn{flex-basis:440px;min-height:clamp(68px,8svh,92px)}
}
@media(min-width:1101px) and (max-height:760px){body .hero-copy{padding-top:36px}body .hero .lead{margin-top:24px}body .hero .actions{margin-top:26px}}

/* Reference-scale hero: larger type, action and taller project previews. */
@media(min-width:1101px){
 body .hero{grid-template-columns:minmax(0,52.3fr) minmax(0,47.7fr)}
 body .hero-copy{justify-content:center;padding-top:40px;padding-bottom:48px}
 body .hero h1{font-size:clamp(36px,3.15vw,68px);font-weight:800;line-height:1.27}
 body .hero .lead{font-size:clamp(18px,1.3vw,27px);line-height:1.4;margin-top:clamp(32px,5.8svh,62px)}
 body .hero .actions{margin-top:clamp(32px,6svh,64px)}
 body .hero .actions .btn{flex-basis:480px;min-height:clamp(82px,11.5svh,124px);font-size:clamp(21px,1.4vw,29px);padding:24px 32px}
 body .hero .montage-card{aspect-ratio:1.05}
 body .hero .montage-card>img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:left top}
}
@media(min-width:1101px) and (max-height:760px){
 body .hero-copy{padding-top:26px;padding-bottom:26px}
 body .hero .lead{margin-top:26px}
 body .hero .actions{margin-top:28px}
 body .hero .actions .btn{min-height:80px}
}

/* Fill the reference composition with content rather than empty padding. */
@media(min-width:1101px){
 body .hero-copy{justify-content:center;padding-top:clamp(36px,5svh,60px);padding-bottom:clamp(36px,5svh,60px)}
 body .hero h1{font-size:clamp(38px,8.65cqw,74px);line-height:1.3;font-weight:800}
 body .hero .lead{font-size:clamp(18px,1.3vw,27px);line-height:1.35;margin-top:clamp(38px,6svh,66px);max-width:100%}
 body .hero .actions{margin-top:clamp(38px,6svh,66px);gap:clamp(16px,1.25vw,28px)}
 body .hero .actions .btn{flex:1 1 0;min-height:clamp(90px,12svh,128px);padding:22px 14px;font-size:clamp(18px,1.3vw,28px)}
 body .hero .hero-work-button{border-color:#079cfa;color:#079cfa;background:#fff}
}
@media(min-width:1101px) and (max-height:760px){
 body .hero-copy{padding-block:26px}
 body .hero h1{font-size:clamp(36px,7.8cqw,64px);line-height:1.24}
 body .hero .lead{margin-top:28px;font-size:18px}
 body .hero .actions{margin-top:30px}
 body .hero .actions .btn{min-height:80px;font-size:18px}
}
@media(max-width:1100px){.hero-work-button{display:none!important}}