/* Background restoration only. Existing desktop typography, content widths,
   section layouts and approved mobile rules remain in desktop-system.css. */
@layer desktop-restoration {
  @media (min-width: 901px) {
    html, body { background: #f1e9dc !important; }
    main { background: #f1e9dc !important; }
    main:is(.variant-page,.alta-page,.duo-classic-page) { gap: 18px !important; }

    /* Keep the already approved color panels without flattening their surface. */
    main :is(.variant-hero,.alta-hero,.duo-classic-hero) { background-color: #f2f5f1 !important; }
    main :is(.variant-media,.alta-gallery,.duo-classic-media,.trio-full-door-option,
      .duo-white-finish-option,.three-story-detail-gallery,.three-story-enclosure) {
      background-color: #e7f0f4 !important;
    }

    /* The homepage keeps its original type and composition. The photo must
       fit the hero row rather than forcing that row beyond the rounded edge. */
    main.brand-home .brand-hero {
      grid-template-rows: minmax(0,1fr) !important;
      align-items: stretch !important;
      padding: 22px !important;
    }
    main.brand-home .brand-hero > div,
    main.brand-home .brand-hero > figure { min-height: 0 !important; max-height: 100% !important; }
    main.brand-home .brand-hero > figure {
      height: 100% !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
    main.brand-home .brand-hero > figure > img {
      display: block !important;
      width: auto !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      border-radius: 24px !important;
      clip-path: inset(0 round 24px) !important;
      object-fit: contain !important;
    }

    /* Restore the separate colored installation panel and journey cards. */
    main.brand-home .brand-real-homes { background: #dfeadb !important; }
    main.brand-home .brand-process { background: #dcebf0 !important; }
    main.brand-home .brand-process ol { align-items: stretch !important; gap: 16px !important; }
    main.brand-home .brand-process li {
      padding: 24px 18px !important;
      border-radius: 22px !important;
      border: 1px solid rgba(65,89,82,.18) !important;
      background: #dfeadb !important;
    }
    main.brand-home .brand-process li:nth-child(2) { background: #f3ddc5 !important; }
    main.brand-home .brand-process li:nth-child(3) { background: #e7f0f4 !important; }
    main.brand-home .brand-process li:nth-child(4) { background: #383d3f !important; color: #fff !important; }
    main.brand-home .brand-process li:nth-child(4) :is(h3,p,svg) { color: #fff !important; }

    /* Restore the compact closing band; a natural-height photo must never
       expand this footer call-to-action back into another hero. */
    main.brand-home .brand-contact-band {
      height: 390px !important;
      min-height: 0 !important;
      grid-template-rows: minmax(0,1fr) !important;
      padding: 20px !important;
      gap: 20px !important;
      align-items: center !important;
    }
    main.brand-home .brand-contact-band > div { padding: 12px 20px !important; min-height: 0 !important; }
    main.brand-home .brand-contact-band h2 { font-size: clamp(30px,2.2vw,36px) !important; line-height: 1.08 !important; margin-bottom: 12px !important; }
    main.brand-home .brand-contact-band .brand-kicker { margin-bottom: 8px !important; }
    main.brand-home .brand-contact-band > div > p:not(.brand-kicker) { margin-bottom: 14px !important; }
    main.brand-home .brand-contact-band > img {
      width: auto !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 348px !important;
      min-height: 0 !important;
      padding: 0 !important;
      justify-self: center !important;
      border-radius: 24px !important;
      clip-path: inset(0 round 24px) !important;
      object-fit: contain !important;
      background: transparent !important;
    }
  }
}

/* Nested surfaces: background restoration only, scoped to desktop. */
@layer desktop-restoration {
 @media (min-width:901px) {
  /* Keep a single continuous beige canvas behind every page's panels. */
  html, body, main[data-design-page] { background-color:#f1e9dc !important; background-image:none !important; }

  /* Installation information stays in separate, visible colored boxes. */
  main .installation-assurance { gap:18px !important; }
  main .installation-assurance > article,
  main .installation-steps > article {
    border:1px solid rgba(65,89,82,.24) !important;
    border-radius:22px !important;
    padding:24px !important;
    box-sizing:border-box !important;
  }
  main .installation-roadmap { background:#e7f0f4 !important; }
  main .installation-prep { background:#dfeadb !important; }
  main .installation-financing { background:#f3ddc5 !important; }

  /* Restore the colored card families that late transparent/white rules erased. */
  main :is(.installation-assurance,.installation-steps,.about-credentials,.about-principles,
    .coastal-reasons,.costs-factor-grid,.variant-facts,.alta-features,.duo-classic-feature-grid) > article,
  main .gh-meaning > div > article,
  main .finance-details > ul > li,
  main :is(.brand-model,.compare-model-card,.curated-model-card,.video-library-card) {
    background:#dfeadb !important;
    border:1px solid rgba(65,89,82,.24) !important;
    border-radius:22px !important;
    color:#383d3f !important;
  }
  main :is(.installation-assurance,.installation-steps,.about-credentials,.about-principles,
    .coastal-reasons,.costs-factor-grid) > article:nth-child(3n+2),
  main .gh-meaning > div > article:nth-child(3n+2),
  main .finance-details > ul > li:nth-child(3n+2),
  main :is(.brand-model,.compare-model-card,.curated-model-card,.video-library-card):nth-of-type(3n+2) { background:#dcebf0 !important; }
  main :is(.installation-assurance,.installation-steps,.about-credentials,.about-principles,
    .coastal-reasons,.costs-factor-grid,.variant-facts,.alta-features,.duo-classic-feature-grid) > article:nth-child(3n+3),
  main .gh-meaning > div > article:nth-child(3n+3),
  main .finance-details > ul > li:nth-child(3n+3),
  main :is(.brand-model,.compare-model-card,.curated-model-card,.video-library-card):nth-of-type(3n+3) { background:#f3ddc5 !important; }

  /* Existing dark cards retain their white foreground as a paired treatment. */
  main :is(.about-principles,.variant-facts,.alta-features,.duo-classic-feature-grid) > article:nth-child(3n+2),
  main .coastal-reasons > article:last-child { background:#383d3f !important; color:#fff !important; }
  main :is(.about-principles,.variant-facts,.alta-features,.duo-classic-feature-grid) > article:nth-child(3n+2) *,
  main .coastal-reasons > article:last-child * { color:#fff !important; }
  main .coastal-reasons > article:nth-child(3) { background:#f3ddc5 !important; }
  main .coastal-reasons > article:nth-child(3) * { color:#383d3f !important; }

  main :is(.installation-prep,.costs-scope,.coastal-detail) > aside,
  main .article-body > aside { background:#e7f0f4 !important; border-radius:22px !important; }
  main .factory-brochure-card { background:#dcebf0 !important; }
  main .factory-brochures-note { background:#f3ddc5 !important; }
 }
}

/* MOBILE_PANEL_COLORS_START */
@layer desktop-restoration { @media (min-width:901px) {
main[data-design-page="about-us"] > section:nth-of-type(6) { background-color: rgb(231, 240, 244) !important; background-image: none !important; }
main[data-design-page="build-down-installations"] > section:nth-of-type(1) { background-color: rgb(56, 61, 63) !important; background-image: none !important; }
main[data-design-page="compare"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="compare"] > section:nth-of-type(3) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="custom-colors"] > section:nth-of-type(1) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="factory-brochures"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="factory-brochures"] > section:nth-of-type(3) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="gallery-of-installs-florida"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="good-housekeeping-seal"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="meet-the-team"] > section:nth-of-type(3) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="meet-the-team"] > section:nth-of-type(4) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-alta-new-model"] > section:nth-of-type(4) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-alta-new-model"] > section:nth-of-type(5) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-classic"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-classic"] > section:nth-of-type(6) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-classic"] > section:nth-of-type(7) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-thru-car"] > section:nth-of-type(1) { background-color: rgb(242, 245, 241) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-thru-car"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-thru-car"] > section:nth-of-type(4) { background-color: rgb(231, 240, 244) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-thru-car"] > section:nth-of-type(5) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-thru-car"] > section:nth-of-type(6) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-vista"] > section:nth-of-type(1) { background-color: rgb(242, 245, 241) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-vista"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-vista"] > section:nth-of-type(4) { background-color: rgb(231, 240, 244) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-vista"] > section:nth-of-type(5) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="stiltz-duo-vista"] > section:nth-of-type(6) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="stiltz-news"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-new-model"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-new-model"] > section:nth-of-type(6) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-new-model"] > section:nth-of-type(7) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-thru-car"] > section:nth-of-type(1) { background-color: rgb(242, 245, 241) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-thru-car"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-thru-car"] > section:nth-of-type(4) { background-color: rgb(231, 240, 244) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-thru-car"] > section:nth-of-type(5) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="stiltz-trio-alta-thru-car"] > section:nth-of-type(6) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="testimonials"] > section:nth-of-type(3) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="trio-alta-three-story"] > section:nth-of-type(1) { background-color: rgb(242, 245, 241) !important; background-image: none !important; }
main[data-design-page="trio-alta-three-story"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="trio-alta-three-story"] > section:nth-of-type(4) { background-color: rgb(231, 240, 244) !important; background-image: none !important; }
main[data-design-page="trio-alta-three-story"] > section:nth-of-type(8) { background-color: rgb(243, 221, 197) !important; background-image: none !important; }
main[data-design-page="trio-alta-three-story"] > section:nth-of-type(9) { background-color: rgb(220, 235, 240) !important; background-image: none !important; }
main[data-design-page="videos"] > section:nth-of-type(2) { background-color: rgb(223, 234, 219) !important; background-image: none !important; }
main[data-design-page="home"] > section:nth-of-type(7) { background-color: rgb(56, 61, 63) !important; background-image: none !important; }
} }
/* MOBILE_PANEL_COLORS_END */