/* The first screen includes the header; content can grow on short viewports. */
.hero--fullscreen {
  --hero-viewport:100vh;
  --hero-top-offset:136px;
  --hero-screen-height:calc(var(--hero-viewport) - var(--hero-top-offset));
}
:is(.home .hero--fullscreen,.hero--fullscreen.hero--service) {
  background-color:var(--color-background);
  background-image:url('../images/hero-pattern.svg');
  background-position:center top;
  background-repeat:repeat;
  background-size:560px 480px;
}
@supports(height:100svh) {
  .hero--fullscreen {--hero-viewport:100svh}
}
.hero--fullscreen .hero-inner {
  min-height:var(--hero-screen-height);
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
  gap:clamp(28px,5svh,64px);
  padding-top:clamp(28px,6svh,80px);
  padding-bottom:clamp(28px,4svh,64px);
}
.hero--fullscreen .hero-copy {grid-row:1}
.hero--fullscreen .hero-image {
  top:auto;
  bottom:0;
  transform:none;
  width:min(calc(var(--hero-screen-height) * .92),calc(100vw * .6));
  height:auto;
  max-height:100%;
  aspect-ratio:1;
}
@media(min-width:1101px) {
  .hero--fullscreen .hero-image {right:-110px}
}
.hero--fullscreen .benefits {grid-row:2;margin-top:0;align-self:end}
@media(min-width:1600px) {
  :is(.page-template-page-service,.page-template-page-city) .site-header .container,:is(.page-template-page-service,.page-template-page-city) .hero--fullscreen .hero-inner {
    --container:min(2560px,calc(1160px + (100vw - 1400px) * .5));
  }
  .hero--fullscreen .hero-image {right:calc(-1 * clamp(90px,6vw,180px))}
}
@media(min-width:768px) and (max-width:1100px) {
  .hero--fullscreen {--hero-top-offset:136px}
  .hero--fullscreen .hero-inner {padding-block:28px}
  .hero--fullscreen .hero-image {width:min(560px,var(--hero-screen-height))}
  .hero--fullscreen .benefits {margin-top:0}
}
@media(max-width:767px) {
  .hero--fullscreen {--hero-top-offset:106px}
  .hero--fullscreen .hero-inner {display:flex;flex-direction:column;justify-content:center;gap:0;padding-block:clamp(28px,5svh,60px)}
  .hero--fullscreen .hero-image {
    position:relative;
    top:auto;
    bottom:auto;
    transform:none;
    width:320px;
    height:auto;
    max-height:none;
    flex-shrink:0;
  }
  .hero--fullscreen .benefits {margin-top:0}
}

/* Inner-page heroes use the same viewport rhythm, with their own illustration proportions. */
@media(min-width:768px) {
  .hero--fullscreen.hero--service .hero-inner {grid-template-rows:1fr;gap:0}
  .hero--fullscreen.hero--service .hero-image {
    width:min(calc(var(--hero-screen-height) * .8),calc(100% - 660px));
    height:auto;
    aspect-ratio:483 / 560;
    object-fit:contain;
    object-position:center bottom;
    right:-27px;
  }
  .hero--fullscreen .city-illustration {
    width:min(clamp(320px,calc(var(--hero-screen-height) * .65),650px),calc(100% - 685px));
    height:auto;
    aspect-ratio:468 / 512;
    top:50%;
    right:0;
    transform:translateY(-60%);
  }
  .hero--fullscreen .city-illustration::before {top:8.6%}
  .hero--fullscreen .city-illustration>img {width:54.7%;height:auto;aspect-ratio:256 / 402}
}

/* Home follows the shared 1160 px / 12-column Figma grid (71 px columns, 28 px gutters).
   Fullscreen growth changes the vertical space, never the page's horizontal grid. */
@media(min-width:1101px) {
 .home .hero--fullscreen .hero-inner {
  --hero-compression:max(0px,calc((680px - var(--hero-screen-height)) / 3));
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--grid-gap);
  row-gap:max(28px,calc(58px - var(--hero-compression)));
  padding-top:max(28px,calc(80px - var(--hero-compression)));
  padding-bottom:max(28px,calc(100px - var(--hero-compression)));
 }
 .home .hero--fullscreen .hero-copy {grid-column:1 / span 7;max-width:none;align-self:end}
 .home .hero--fullscreen .benefits {grid-column:1 / -1}
 .home .hero--fullscreen .hero-image {
  grid-column:7 / -1;
  grid-row:auto;
  width:min(660px,calc(100% + 94px),max(460px,var(--hero-screen-height)));
  max-width:none;
  height:auto;
  max-height:none;
  top:auto;
  bottom:0;
  right:-60px;
  transform:none;
 }
}

/* Let the portrait fill large first screens while its left edge stays on the hero grid. */
@media(min-width:1440px) {
 .home .hero--fullscreen .hero-image {
  --hero-photo-size:min(max(660px,var(--hero-screen-height)),calc(660px + (100vw - 1400px) * .5));
  width:var(--hero-photo-size);
  right:calc(600px - var(--hero-photo-size));
 }
}