/* Natural Hero: registered photograph layers, compact copy and one inline action. */
body[data-page='home'] .site-header::after {
  content: ''; position: absolute; inset: auto 0 0;
  border-bottom: 1px solid var(--line); pointer-events: none;
}
.hero--landscape .hero-stage {
  display: grid;
  grid-template-areas: "headline" "introduction" "scene";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  justify-items: center;
  height: auto; min-height: 0;
  padding: 1.5rem 0 .75rem;
  row-gap: .625rem;
}
.hero--landscape .hero-copy { display: contents; }
.hero--landscape .hero-headline {
  grid-area: headline; position: relative; z-index: 2; min-width: 0;
  width: min(var(--content), calc(100% - 4rem)); text-align: center;
}
.hero--landscape .hero-title { justify-content: center; text-align: center; }
.hero--landscape .hero-introduction {
  grid-area: introduction; position: relative; z-index: 2; min-width: 0;
  width: min(52rem, 48vw, calc(100% - 4rem)); max-width: 100%; margin: 0;
}
.hero--landscape .hero-description {
  max-width: none; margin: 0;
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem); line-height: 1.65;
  text-align: center; text-wrap: pretty;
}
.hero--landscape .hero-actions { display: inline; position: static; width: auto; margin: 0; }
.hero-work-link {
  display: inline-flex; align-items: center; gap: .5em; vertical-align: baseline;
  min-height: 2.75rem; margin: -.3rem 0 -.3rem .45em; padding: .3rem .15rem;
  color: var(--ink); font-size: inherit; font-weight: 600; line-height: inherit;
  white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .3em; text-decoration-color: var(--line);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.hero-work-link:hover, .hero-work-link:focus-visible { color: var(--hover); text-decoration-color: currentColor; }
.hero-work-link .arrow { font-size: 1.1em; }
.hero--landscape .hero-scene {
  grid-area: scene; align-self: start; position: relative;
  left: auto; bottom: auto; transform: none;
  width: min(calc(100% - 3rem), 120rem); max-width: none;
  aspect-ratio: 2560 / 1065; margin: -.625rem auto 0;
  isolation: isolate; pointer-events: none;
}
.hero--landscape .hero-image, .hero--landscape .hero-house-layer {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
}
.hero--landscape .hero-house-layer { display: none; position: absolute; inset: 0; z-index: 1; }
.hero--landscape .hero-baseline { width: min(calc(100% - 3rem), 120rem); }
/* The source pixels and registered roof mask remain unchanged. */
@supports ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  .hero--landscape .hero-image {
    -webkit-mask-image: linear-gradient(to bottom, transparent 21%, rgb(0 0 0 / 4%) 22%, rgb(0 0 0 / 25%) 23.2%, rgb(0 0 0 / 60%) 24.5%, rgb(0 0 0 / 90%) 25.7%, #000 27.2%);
    mask-image: linear-gradient(to bottom, transparent 21%, rgb(0 0 0 / 4%) 22%, rgb(0 0 0 / 25%) 23.2%, rgb(0 0 0 / 60%) 24.5%, rgb(0 0 0 / 90%) 25.7%, #000 27.2%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: alpha;
  }
  .hero--landscape .hero-house-layer {
    display: block;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202560%201065%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M797%20300%20L900%20220.5%20L1000%20142.8%20L1100%2064.5%20L1133.7%2037.3%20L1136%2037.8%20L1200%2068.3%20L1300%20116%20L1400%20163.5%20L1500%20208%20L1600%20252%20L1708%20300%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M1766.5%20248.5%20L1807.5%20230.8%20L1811%20231.2%20L1854.5%20250%20L1843.5%20251.5%20L1843.5%20300%20L1776.5%20300%20L1777%20253%20L1766.5%20251%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20300%20H2560%20V1065%20H0%20Z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202560%201065%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M797%20300%20L900%20220.5%20L1000%20142.8%20L1100%2064.5%20L1133.7%2037.3%20L1136%2037.8%20L1200%2068.3%20L1300%20116%20L1400%20163.5%20L1500%20208%20L1600%20252%20L1708%20300%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M1766.5%20248.5%20L1807.5%20230.8%20L1811%20231.2%20L1854.5%20250%20L1843.5%20251.5%20L1843.5%20300%20L1776.5%20300%20L1777%20253%20L1766.5%20251%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%20300%20H2560%20V1065%20H0%20Z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: alpha;
  }
}
@media (min-width: 1101px) and (max-height: 740px) {
  .hero--landscape .hero-stage { padding-top: 1rem; }
}
@media (max-width: 1180px) {
  .hero--landscape .hero-headline, .hero--landscape .hero-introduction { width: calc(100% - 3rem); }
  .hero--landscape .hero-introduction { max-width: 48rem; }
  .hero--landscape .hero-scene { width: calc(100% - 1.5rem); margin-top: 0; }
  .hero--landscape .hero-baseline { width: calc(100% - 1.5rem); }
}
@media (max-width: 640px) {
  .hero--landscape .hero-stage { padding-top: 1.125rem; row-gap: .5rem; padding-bottom: .625rem; }
  .hero--landscape .hero-headline, .hero--landscape .hero-introduction { width: calc(100% - 2.5rem); }
  .hero--landscape .hero-description { font-size: .875rem; line-height: 1.6; }
  .hero--landscape .hero-scene { width: calc(100% - .75rem); margin-top: 0; }
  .hero--landscape .hero-baseline { width: calc(100% - .75rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero--landscape .hero-fact { padding: .625rem .375rem; font-size: .6875rem; line-height: 1.45; }
  .hero--landscape .hero-fact + .hero-fact { border-top: 0; border-left: 1px solid var(--line); }
}
/* Larger text may grow vertically; no clipping or forced single-line copy. */
.has-scaled-text .hero--landscape .hero-stage {
  display: grid; grid-template-areas: "headline" "introduction" "scene";
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  height: auto; padding: 1.5rem 0 .75rem; gap: .75rem;
}
.has-scaled-text .hero--landscape .hero-headline,
.has-scaled-text .hero--landscape .hero-introduction { width: min(var(--content), calc(100% - 2rem)); }
.has-scaled-text .hero--landscape .hero-actions { display: inline; margin: 0; width: auto; }
.has-scaled-text .hero-work-link { white-space: normal; }
.has-scaled-text .hero--landscape .hero-scene { width: calc(100% - 2rem); margin: 0 auto; }
.has-scaled-text .hero--landscape .hero-baseline { width: calc(100% - 2rem); grid-template-columns: 1fr; }
.has-scaled-text .hero--landscape .hero-fact { font-size: .75rem; }
.has-scaled-text .hero--landscape .hero-fact + .hero-fact { border-left: 0; border-top: 1px solid var(--line); }