/* Full-bleed illustrated posters; the headings, copy and links remain HTML. */
body[data-page-scene="catalog"] { --poster-image: url('/static/img/banners/catalog.webp'); }
body[data-page-scene="oem"] { --poster-image: url('/static/img/banners/oem.webp'); }
body[data-page-scene="private-label"] { --poster-image: url('/static/img/banners/private-label.webp'); }
body[data-page-scene="wholesale"] { --poster-image: url('/static/img/banners/wholesale.webp'); }
body[data-page-scene="samples"] { --poster-image: url('/static/img/banners/samples.webp'); }
body[data-page-scene="quality"] { --poster-image: url('/static/img/banners/quality.webp'); }
body[data-page-scene="supply-chain"] { --poster-image: url('/static/img/banners/supply-chain.webp'); }
body[data-page-scene="resources"] { --poster-image: url('/static/img/banners/resources.webp'); }
body[data-page-scene="shipping"] { --poster-image: url('/static/img/banners/shipping.webp'); }
body[data-page-scene="about"] { --poster-image: url('/static/img/banners/about.webp'); }
body[data-page-scene="contact"] { --poster-image: url('/static/img/banners/contact.webp'); }
body[data-page-scene="faq"] { --poster-image: url('/static/img/banners/faq.webp'); }
body[data-page-scene="quote"] { --poster-image: url('/static/img/banners/quote.webp'); }
body[data-page-scene="project"] { --poster-image: url('/static/img/banners/project.webp'); }

body[data-page-scene]:not([data-page-scene=""]) .page-intro {
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: clamp(460px, 35vw, 900px);
  padding: 80px 0;
  background: #f6ddc7 var(--poster-image) center top / cover no-repeat;
}
body[data-page-scene]:not([data-page-scene=""]) .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(255 249 239 / 50%), rgb(255 249 239 / 26%) 44%, transparent 64%);
}
body[data-page-scene]:not([data-page-scene=""]) .page-intro h1 {
  max-width: min(760px, 55%);
}
body[data-page-scene]:not([data-page-scene=""]) .page-intro p {
  max-width: min(680px, 51%);
  color: #77503a;
}
body[data-page-scene]:not([data-page-scene=""]) .page-intro .intro-actions {
  max-width: 54%;
}
body[data-page-scene]:not([data-page-scene=""]) .page-intro .intro-deco {
  display: none;
}

/* The homepage is a single continuous room rather than a separate image card. */
.hero-banner {
  isolation: isolate;
  min-height: clamp(640px, 42vw, 1050px);
  background: #f6ddc7 url('/static/img/banners/home.webp') center center / cover no-repeat;
}
.hero-banner::before {
  inset: 0;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(270deg, rgb(255 249 239 / 50%), rgb(255 249 239 / 22%) 40%, transparent 62%);
}
.hero-banner .hero-grid {
  display: flex;
  justify-content: flex-end;
  min-height: inherit;
}
.hero-banner .hero-copy {
  width: 51%;
  padding: 88px 10px 64px 34px;
}
.hero-banner .hero-visual,
.hero-banner .awning,
.hero-banner .hero-bottom-waves {
  display: none;
}
.hero-banner .hero-intro {
  color: #77503a;
}

@media (max-width: 1000px) and (min-width: 851px) {
  body[data-page-scene]:not([data-page-scene=""]) .page-intro h1 { font-size: 46px; }
  .hero-banner .hero-copy h1 { font-size: 50px; }
}
@media (max-width: 850px) {
  body[data-page-scene="catalog"] { --poster-image: url('/static/img/banners/catalog-mobile.webp'); }
  body[data-page-scene="oem"] { --poster-image: url('/static/img/banners/oem-mobile.webp'); }
  body[data-page-scene="private-label"] { --poster-image: url('/static/img/banners/private-label-mobile.webp'); }
  body[data-page-scene="wholesale"] { --poster-image: url('/static/img/banners/wholesale-mobile.webp'); }
  body[data-page-scene="samples"] { --poster-image: url('/static/img/banners/samples-mobile.webp'); }
  body[data-page-scene="quality"] { --poster-image: url('/static/img/banners/quality-mobile.webp'); }
  body[data-page-scene="supply-chain"] { --poster-image: url('/static/img/banners/supply-chain-mobile.webp'); }
  body[data-page-scene="resources"] { --poster-image: url('/static/img/banners/resources-mobile.webp'); }
  body[data-page-scene="shipping"] { --poster-image: url('/static/img/banners/shipping-mobile.webp'); }
  body[data-page-scene="about"] { --poster-image: url('/static/img/banners/about-mobile.webp'); }
  body[data-page-scene="contact"] { --poster-image: url('/static/img/banners/contact-mobile.webp'); }
  body[data-page-scene="faq"] { --poster-image: url('/static/img/banners/faq-mobile.webp'); }
  body[data-page-scene="quote"] { --poster-image: url('/static/img/banners/quote-mobile.webp'); }
  body[data-page-scene="project"] { --poster-image: url('/static/img/banners/project-mobile.webp'); }
  body[data-page-scene]:not([data-page-scene=""]) .page-intro {
    align-items: flex-start;
    min-height: 650px;
    padding: 48px 0 330px;
    background-position: center bottom;
  }
  body[data-page-scene]:not([data-page-scene=""]) .page-intro::before {
    background: linear-gradient(180deg, rgb(255 249 239 / 22%), rgb(255 249 239 / 18%) 45%, transparent 66%);
  }
  body[data-page-scene]:not([data-page-scene=""]) .page-intro h1,
  body[data-page-scene]:not([data-page-scene=""]) .page-intro p,
  body[data-page-scene]:not([data-page-scene=""]) .page-intro .intro-actions {
    max-width: 100%;
  }
  .hero-banner {
    min-height: 950px;
    background-image: url('/static/img/banners/home-mobile.webp');
    background-position: center bottom;
  }
  .hero-banner::before {
    background: linear-gradient(180deg, rgb(255 249 239 / 22%), rgb(255 249 239 / 18%) 50%, transparent 72%);
  }
  .hero-banner .hero-grid { align-items: flex-start; }
  .hero-banner .hero-copy { width: 100%; max-width: 700px; padding: 48px 0 380px; }
}
@media (max-width: 570px) {
  body[data-page-scene]:not([data-page-scene=""]) .page-intro { padding-top: 42px; }
  body[data-page-scene]:not([data-page-scene=""]) .page-intro .intro-actions { margin-top: 16px; gap: 8px; }
  body[data-page-scene]:not([data-page-scene=""]) .page-intro .intro-actions .btn { margin-top: 12px; }
  .hero-banner .hero-copy h1 { font-size: 42px; }
  .hero-banner .hero-copy { padding-top: 40px; }
}