/* =========================================================
   SKPCB v3.3.25 — UNIVERSAL LIGHT-GREEN SURFACES + DESKTOP HEADER
   Public-site visual layer only. Home slider motion/structure is untouched.
   ========================================================= */

:root{
  --sk-surface-green:#EAF7EF;
  --sk-surface-green-2:#E3F4E9;
  --sk-surface-line:#CFE7D8;
  --sk-surface-ink:#24312B;
}

/* Base canvas: all formerly white/light-neutral public page canvas becomes green. */
html,
body{
  background-color:var(--sk-surface-green) !important;
}
body > main,
main{
  background-color:var(--sk-surface-green) !important;
}

/* Elements tagged by site-green-surfaces-v3325.js because their computed
   background was white / near-white. This is intentionally generic so it also
   catches old pages and the 14k+ generated local SEO pages. */
.sk-green-surface{
  background-color:var(--sk-surface-green) !important;
}

/* Keep dark/premium zones dark even if a child style previously supplied white. */
footer,
.footer,
.site-footer,
.sk-global-footer,
.delivery-hero,
.page-home .hero-slider,
.price-panel,
.price-panel-inner,
[class*="dark"],
[class*="black"]{
  --sk-green-surface-skip:1;
}

/* Give green surfaces a subtle professional border wherever an old white card
   already had a visible border. No geometry/spacing is changed here. */
.sk-green-surface:is(
  .card,.panel,.box,.tile,.feature-card,.service-card,.product-card,
  .quality-card,.capability-card,.quote-card,.option-card,.form-card
){
  border-color:var(--sk-surface-line) !important;
}

/* ================= DESKTOP HEADER ONLY =================
   Phone header is intentionally untouched. Total desktop stack is roughly 30%
   shorter: 22px utility strip + 54px main navigation.
   ======================================================= */
@media (min-width:901px){
  html body{
    padding-top:76px !important;
  }

  html body .header,
  html body .site-header{
    min-height:76px !important;
    height:auto !important;
    background:rgba(234,247,239,.985) !important;
    border-bottom-color:#cfe3d6 !important;
  }

  html body .header.sk-contact-ready,
  html body .site-header.sk-contact-ready{
    min-height:76px !important;
  }

  html body .sk-header-contact{
    min-height:22px !important;
    height:22px !important;
  }
  html body .sk-header-contact-inner{
    min-height:22px !important;
    height:22px !important;
  }
  html body .sk-header-contact p{
    font-size:8.4px !important;
    line-height:1 !important;
    letter-spacing:.16em !important;
  }
  html body .sk-header-contact-links a{
    font-size:10.4px !important;
    line-height:1 !important;
  }

  html body .nav-container,
  html body .site-header .nav-wrap{
    min-height:54px !important;
    height:54px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  html body .nav,
  html body .site-header nav{
    gap:15px !important;
    align-items:center !important;
  }

  html body .nav a,
  html body .site-header nav a{
    font-size:11.5px !important;
    line-height:1.05 !important;
    min-height:32px !important;
    padding:7px 5px !important;
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
  }

  html body .nav a.nav-button,
  html body .nav a[href*="quotation"],
  html body .nav a[href*="quote"],
  html body .site-header nav a.nav-button,
  html body .site-header nav a[href*="quotation"],
  html body .site-header nav a[href*="quote"]{
    min-height:34px !important;
    padding:7px 15px !important;
  }

  html body .nav-container > .logo,
  html body .site-header .logo{
    font-size:18px !important;
    line-height:1 !important;
  }
}

/* ================= DELIVERY PHONE HARD FIX =================
   delivery.css has late desktop rules after its own mobile queries; these rules
   load last and permanently win on phones.
   =========================================================== */
@media (max-width:900px){
  html body.page-delivery .delivery-hero{
    width:calc(100% - 16px) !important;
    min-height:0 !important;
    margin:8px auto 0 !important;
    overflow:hidden !important;
  }
  html body.page-delivery .delivery-hero-grid{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
  }
  html body.page-delivery .delivery-copy,
  html body.page-delivery .delivery-visual{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  html body.page-delivery .delivery-copy{
    padding:26px 14px 2px !important;
  }
  html body.page-delivery .delivery-copy h1{
    width:100% !important;
    max-width:100% !important;
    margin:8px 0 11px !important;
    font-size:clamp(31px,9.4vw,42px) !important;
    line-height:.96 !important;
    letter-spacing:-1.35px !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  html body.page-delivery .delivery-copy :is(p,a,span,b,strong){
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
  html body.page-delivery .delivery-lead{
    width:100% !important;
    max-width:100% !important;
  }
  html body.page-delivery .delivery-visual{
    min-height:250px !important;
    padding:0 6px 8px !important;
  }
  html body.page-delivery .delivery-page-vehicle-wrap{
    width:min(94vw,440px) !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  html body.page-delivery .delivery-visual img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
  html body.page-delivery .delivery-section-heading,
  html body.page-delivery .delivery-cta-inner{
    grid-template-columns:minmax(0,1fr) !important;
    min-width:0 !important;
  }
  html body.page-delivery .delivery-option-grid{
    min-width:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  html body.page-delivery .delivery-option-card{
    min-width:0 !important;
    padding:14px 11px !important;
  }
  html body.page-delivery .delivery-option-card :is(h3,p,li,a,span){
    min-width:0 !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}

@media (max-width:390px){
  html body.page-delivery .delivery-option-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}