/* Buckminster Funerals — CLEAN CORE (structural only)
   - Header / photos / nav / sidebar / footer are shared and bulletproof   - NO shared page-specific layout logic
   Breakpoints:
   - Mobile:   <= 767.98px
   - Tablet:   768px – 1179.98px
   - Desktop:  >= 1180px
*/

:root{
  --nav-height: 40px;
  --button-blue: #0000B3;
  --button-hover: #3333FF;
  /* Default max width for main content on desktop. Override per page.
     Example: body[data-page=\"coffins-caskets\"]{ --content-max: 760px; } */
  --content-max: 700px;
}

*,
*::before,
*::after{ box-sizing:border-box; border-radius:0; }


body{
  margin:0;
  font-family:"Times New Roman", Times, serif;
  background:#fff;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* Guard: never constrain root width (prevents mystery 15px shrink) */
html, body{ max-width:none; }

/* Utility */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.no-break{ white-space:nowrap; }
img, video, canvas{ max-width:100%; height:auto; }

/* ===== HEADER TITLE ===== */
header{
  background:var(--button-blue);
  color:#fff;
  padding:12px 20px;
  text-align:center;
  font-size:40px;
  font-weight:bold;
}
header h1, .site-title{ margin:0; font:inherit; line-height:inherit; }

/* ===== HEADER PHOTOS ===== */
.header-photos{
  text-align:center;
  margin:0;
  padding:0 10px 12px;
  background:linear-gradient(to bottom,#d6dcef 0%,#eef1fb 100%);
}
.header-photos img{ margin:0; padding:0; vertical-align:top; }

/* Desktop individual photos/logos */
.saif-logo{
  width:125px;
  margin-right:60px;
  margin-left:20px;
  position:relative;
  left:-70px;
  top:10px;
}
.header-photos img.middle-photo{
  width:180px;
  height:auto;
  object-fit:contain;
  margin:0 2px;
}
.header-photos img.middle-photo.wide{ width:330px; }
.middle-photo.first{ margin-left:120px; }
.golden-logo{
  width:105px;
  position:relative;
  left:60px;
  top:15px;
  margin-right:20px;
}

/* Composite assets */
.header-composite,
.tablet-composite,
.header-logos-mobile{ display:none; }

/* Mobile: show composite + mobile logos; hide desktop individual items */
@media (max-width:767.98px){
  /* Mobile header (locked at 32px) */
  header{
    font-size:32px;
    padding:10px 20px;
  }

  /* Mobile header photos spacing: 6 top, 8 sides, 8 bottom */
  .header-photos{
    padding:6px 8px 8px;
  }


  .header-photos{ padding:6px 8px 8px; }
  .header-composite{ display:block; width:100%; height:auto; margin:0 auto; }
  .header-logos-mobile{
    display:flex;
    justify-content:center;
    gap:15px;
    padding:6px 0 0px;
  }
  .header-logos-mobile .logo-mobile{ height:34.6px; width:auto; display:block; }

  .header-photos .saif-logo,
  .header-photos .golden-logo,
  .header-photos .middle-photo,
  .tablet-composite{ display:none !important; }
}

/* Tablet: show tablet composite; hide desktop individual items */
@media (min-width:768px) and (max-width:1179.98px){
  .tablet-composite{ display:block; width:100%; height:auto; margin:0 auto; }
  .header-photos .saif-logo,
  .header-photos .golden-logo,
  .header-photos .middle-photo,
  .header-composite,
  .header-logos-mobile{ display:none !important; }

  /* === Tablet layout fit ===
     The desktop skeleton (200px sidebar + 700px content) overflows 768–1179px.
     On tablet we keep the desktop-style sidebar, but let the content flex to the
     remaining width so nothing gets clipped.
  */
  .page-layout{ width:100%; }
  .sidebar{
    width:180px;
    padding-top:80px;
  }
  .sidebar nav::after{ right:-12px; }
  .content{
    flex:1 1 auto;
    width:auto;
    max-width:none;
    margin-left:16px;
    padding:16px;
    min-width:0;
  }

  /* Buttons can wrap on iPad widths */
  .nav-buttons{ flex-wrap:wrap; gap:12px; }
}

/* Desktop: show individual items; hide composites */
@media (min-width:1180px){
    .site-footer .footer-links{ transform:translateX(-30px); }
.header-composite,
  .tablet-composite,
  .header-logos-mobile{ display:none !important; }
  .header-photos .saif-logo,
  .header-photos .golden-logo,
  .header-photos .middle-photo{ display:inline-block !important; }
}

/* ===== LAYOUT SKELETON ===== */
.page-layout{
  display:flex;
  align-items:flex-start;
}

/* Sidebar (desktop/tablet only) */
.sidebar{
  width:200px;
  background:#fff;
  padding-top:100px;
  flex-shrink:0;
  position:relative;
}
.sidebar nav a{
  display:block;
  padding:0 12px;
  height:var(--nav-height);
  line-height:var(--nav-height);
  margin-bottom:5px;
  background:var(--button-blue);
  color:#fff;
  text-decoration:none;
  font-size:14px;
}
.sidebar nav a:hover,
.sidebar nav a:focus{ background:var(--button-hover); }
.sidebar nav a.active{
  background:var(--button-hover);
  font-weight:bold;
}
.sidebar nav{ position:relative; }
.sidebar nav::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:2px;
  background:#000;
  right:-17px;
}

/* Main content shell (page-scoped layout lives inside .content-inner) */
.content{
  position:relative;
  padding:20px;
  width:100%;
  max-width: var(--content-max, 700px);
  margin-left:20px;
  min-width:0;
}
.content-inner{ padding-right:0; }

/* Top desktop buttons */
.nav-buttons{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  margin-top:20px;
}
.main-btn,
.price-btn{
  background:var(--button-blue);
  color:#fff;
  font-size:16px;
  font-weight:bold;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.main-btn{
  padding:0 30px;
  height:var(--nav-height);
  line-height:var(--nav-height);
  width:165px;
  flex:0 0 165px;
  text-align:center;
}
.price-btn{
  padding:10px 20px;
  white-space:normal;
  line-height:1.2;
  text-align:center;
  margin:0px;
  width:320px;
  flex:0 0 320px;
}
.main-btn:hover,.price-btn:hover,
.main-btn:focus,.price-btn:focus{ background:var(--button-hover); }
.main-btn.active{ background:var(--button-hover); }

/* Intro desktop divider */
hr{ border:none; border-top:1px solid #000; margin:20px 0; }

/* Mobile title banner (kept simple + stable) */
.intro-sub-banner{ display:none; }
@media (max-width:767.98px){
  .intro-sub-banner{
    display:block;
    background:var(--button-blue);
    padding:12px 13px;
    box-sizing:border-box;
    margin:-4px 0 8px;
    color:#fff;
    /* Full-width bar within the content padding on mobile */
    margin-left:-14px;
    margin-right:-14px;
  }

  

  .intro-sub-banner h1{
    margin:0;
    font-size: 27.4px;
    font-weight:normal;
    text-align:left;
    line-height:1.1;
  }
  .intro-title, .intro-title + hr{ display:none; }
}


/* ===== FOOTER (mobile sizing only; no gutter/layout hacks) ===== */
@media (max-width:767.98px){
  .site-footer{ padding:16px 14px 14px; }

  /* Stack columns */
  .site-footer .footer-inner{ flex-direction:column; gap:14px; }
  .site-footer .footer-col{ min-width:0; }

  /* Left column */
  .site-footer .footer-left .footer-brand{ font-size:18px; margin-bottom:6px; }
  .site-footer .footer-address{ font-size:10.5px; line-height:1.15; }
  .site-footer .footer-contact,
  .site-footer .footer-email{ font-size:11px; line-height:1.2; }

  /* Useful links */
  .site-footer .footer-links{ text-align:left; }
  .site-footer .footer-links .footer-heading{
    left:0;
    margin-left:18px;
    font-size:13px;
  }
  .site-footer .footer-list,
  .site-footer .footer-list li a{ font-size:12px; line-height:1.3; }

  /* Right column / legal */
  .site-footer .footer-right-title{ font-size:14px; line-height:1.2; }
  .site-footer .footer-right-sub{ font-size:12px; line-height:1.2; }
  .site-footer .footer-legal{ font-size:10.5px; line-height:1.2; white-space:normal; }
}


/* ===== MOBILE TOP NAV ===== */
.mobile-top-nav, #mobile-menu-slot{ display:none; }
.fn-button-grid{ display:none; }
.mobile-menu-btn-row{ display:none; }
.mobile-price-btn{ display:none; }

@media (max-width:767.98px){
  /* Stack layout */
  .page-layout{ flex-direction:column; }

  /* Hide sidebar */
  .sidebar{ display:none; }

  /* Content full width */
  .content{
    max-width:none;
    width:100%;
    margin:0;
    padding:16px 14px;
  }

  /* Hide desktop nav-buttons */
  .nav-buttons{ display:none; }

  /* Show mobile nav */
  .mobile-top-nav,
  #mobile-menu-slot{ display:block; }

  .fn-button-grid{
    display:flex;
    flex-wrap:nowrap;
    gap: 4.8px;
    padding: 9px 8px 6px;
    width:100%;
    box-sizing:border-box;
  }
  .fn-button-grid a{
    flex:1 1 0;
    min-width:0;
    background:var(--button-blue);
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    font-size: 12px;
    line-height:0.96;
    padding: 7px 4px;
    text-align:center;
    white-space:nowrap;
    word-break:break-word;
  }
  .fn-button-grid a:hover,
  .fn-button-grid a:focus,
  .fn-button-grid a.active{ background:var(--button-hover); }

  .mobile-menu-btn-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 12px 8px;
    margin-bottom: 2px;
  }
  .mobile-menu-btn-row .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--button-blue);
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    font-size:13px;
    line-height:1.2;
    height:27.2px;
    padding:0 14px;
    border:0;
    cursor:pointer;
    white-space:nowrap;
  }
  .mobile-menu-btn-row .menu-btn:hover,
  .mobile-menu-btn-row .menu-btn:focus{ background:var(--button-hover); }

  /* ===== MOBILE MENU OVERLAY (single definitive implementation) ===== */
  .menu-overlay{
    position:fixed;
    inset:0;
    overflow:hidden;
    display:none;
    z-index:2147483647;
    background:linear-gradient(180deg,#e7ecfb 0%,#f6f7fd 100%);
  }
  .menu-overlay.open{ display:block; }
  .menu-overlay .panel{
    position:fixed;
    top:0; right:0; bottom:0;
    width:85vw;
    max-width:420px;
    max-width: min(420px, 100vw);
    /* prevent horizontal overflow on narrow screens */
    min-width:0;
    background:#0000B3; /* solid surface so no “white gaps” */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0;
  }
  .menu-overlay .panel-header{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    background:#0000B3;
    color:#fff;
    font-weight:bold;
    font-size:16px;
    border-bottom:1px solid #2b2bff;
  }
  .menu-overlay .close-btn{
    background:transparent;
    border:0;
    color:#fff;
    font-size:24px;
    line-height:1;
    padding:6px 8px;
    cursor:pointer;
  }
  .menu-overlay .section-title{
    display:block;
    width:100%;
    background:#4a63c7;
    color:#fff;
    padding:12px 14px;
    font-weight:bold;
    border-top:1px solid #2b2bff;
    border-bottom:1px solid #2b2bff;
  }
  .menu-overlay a{
    display:block;
    width:100%;
    padding:12px 14px;
    background:#0000B3;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid #2b2bff;
    font-size:16px;
  }
  .menu-overlay a:hover,
  .menu-overlay a:focus{ background:#3333FF; }

  /* Lock scroll behind menu (scripts_tail toggles .menu-lock) */
  body.menu-lock{ overflow:hidden; touch-action:none; }
}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--button-blue);
  color:#fff;
  margin-top:20px;
  padding:20px 20px 18px;
}
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:focus-visible{ text-decoration:underline; }

.site-footer .footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:34px;
}
.site-footer .footer-col{ flex:1 1 0; min-width:220px; }
.site-footer address{ font-style:normal; }

/* Left */
.site-footer .footer-left .footer-brand{
  font-size:20px;
  font-weight:bold;
  margin:0 0 7px 0;
  line-height:1.15;
}
.site-footer .footer-address{
  font-size:13px;
  line-height:1.35;
  margin:0;
}
.site-footer .footer-contact{
  font-size:14px;
  line-height:1.45;
  margin:2px 0 0 0;
}
.site-footer .footer-email{ margin-top:12px; }

/* Middle */
.site-footer .footer-links{ text-align:center; }

/* Desktop pixel-perfect "USEFUL LINKS" block (from index_ZZZZ_clean) */
.site-footer .footer-links .footer-heading{
  font-size:16px;
  position:relative;
  left:-75px;
  font-weight:bold;
  letter-spacing:0.6px;
  margin:2px 0 10px 0;
}

.site-footer .footer-links ul.footer-list{
  display:inline-block;
  text-align:left;
  font-size:16px;
  list-style:disc !important;
  padding-left:18px !important;
  margin-top:6px !important;
  margin-left:0;
  margin-right:0;
  margin-bottom:0;
}

.site-footer .footer-links ul.footer-list li{
  list-style:disc;
  margin:0 !important;
  padding:0 !important;
  line-height:1.16 !important;
}

.site-footer .footer-links ul.footer-list li a{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.16 !important;
}

/* Right */
.site-footer .footer-right{
  text-align:center;
  display:flex;
  flex-direction:column;
  height:100%;
}
.site-footer .footer-right-title{
  font-size:22px;
  margin:0 0 6px 0;
  line-height:1.25;
}
.site-footer .footer-right-sub{
  font-size:16px;
  margin-top:10px;
  margin-bottom:auto;
  line-height:1.25;
}
.site-footer .footer-legal{
  font-size:13px;
  line-height:1.25;
  margin-top:18px;
}

/* Footer middle legal line */
.site-footer .footer-middle-legal{
  text-align:center;
  font-size:10.5px;
  margin-top:10px;
  color:#fff;
}

/* Mobile footer: stack columns + fit narrow screens */
@media (max-width:767.98px){
  .site-footer .footer-inner{
    flex-direction:column;
    gap:14px;
    align-items:stretch;
  }
  .site-footer .footer-col{ min-width:0; }
  .site-footer .footer-links{ text-align:left; }
  .site-footer .footer-links .footer-heading{
    left: 0 !important;
    position: relative;
    margin-left: 18px;
    font-size: 13px;
  }
  .site-footer .footer-address,
  .site-footer .footer-contact,
  .site-footer .footer-email{ font-size:11px; line-height:1.2; }
  .site-footer .footer-links ul.footer-list{
    font-size: 12px;
    line-height: 1.3;
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: left;
    list-style: disc !important;
    padding-left: 16px !important;
    margin-top: 6px !important;
  }
  .site-footer .footer-legal{ font-size:10.5px; margin-top:6px; white-space:normal; }
}


/* =========================================================
   FOOTER: desktop must match legacy pixel-perfect layout
   - Hide mobile-only tagline & middle legal line on desktop/tablet
   - Show them only on mobile
   ========================================================= */
.site-footer .footer-mobile-tagline,
.site-footer .footer-middle-legal{ display: none; }

@media (max-width: 767.98px){
  /* Avoid repeated right-column labels on mobile; use footer-mobile-tagline + footer-middle-legal instead */
  .site-footer .footer-right-title,
  .site-footer .footer-right-sub,
  .site-footer .footer-legal{ display:none; }

  .site-footer .footer-mobile-tagline{
    display:flex;
    justify-content:center;
    gap:65px;
    width:100%;
    box-sizing:border-box;
    padding:0 12px;
    margin-top:10px;
    font-size:18px;
    line-height:1.2;
    color:#fff;
    text-align:center;
  }
  .site-footer .footer-mobile-tagline .tag-left,
  .site-footer .footer-mobile-tagline .tag-right{
    white-space: nowrap;
  }

  .site-footer .footer-middle-legal.mobile-only{
    display:block;
    text-align:center;
    font-size:8.5px;
    margin-top:10px;
    color:#fff;
  }
}

/* =========================================================
   FOOTER: helper spans for controlled wrapping in Useful Links
   ========================================================= */
.desktop-space{ display:inline; }
.mobile-only-br{ display:none; }
@media (max-width: 767.98px){
  .desktop-space{ display:none; }
  .mobile-only-br{ display:inline; }
}



/* =========================
   MOBILE FRAMEWORK TUNING (NO ZOOM MIMIC)
   - Keeps header title in Times New Roman (inherits body)
   - Keeps header photos visible
   - Tunes ONLY mobile logos + mobile nav button sizing/spacing
   ========================= */

@media (max-width: 767.98px){

  /* Ensure header photos are never hidden by accident */
  .header-photos{ display:block !important; }

  /* Logo row: bring SAIF/Golden Charter down to benchmark-like size */
  .header-logos-mobile{
    display:flex;
    justify-content:center;
    gap:14.4px;
    padding:7px 0 0px;
  }
  .header-logos-mobile .logo-mobile{
    height:35.6px;
    width:auto;
    display:block;
  }

  /* Top row: Home / Contact Us / Map */
  .fn-button-grid{
    gap:6px;
    padding:10px 8px 4px;
  }
  .fn-button-grid a{
    font-family: "Raleway", Arial, sans-serif;
    font-size:11px;
    line-height:0.75;
    padding:8px 4px;
  }

  /* Second row: Menu (col 1) + Standardised Price List (col 3) with empty middle column */
  .mobile-menu-btn-row{
    display:grid;
    grid-template-columns: 1fr 0.8fr 1.3fr;
    gap:6px;
    padding:2px 8px 6px;
    margin-bottom:0;
    align-items:stretch;
  }
  .mobile-menu-btn-row .menu-btn{
    width:100%;
    font-family: "Raleway", Arial, sans-serif;
    font-size:10px;
    line-height:0.75;
    height:27px;
    padding:0 10px;
  }
  .mobile-menu-btn-row .menu-btn-left{ grid-column:1; }
  .mobile-menu-btn-row .menu-btn-right{ grid-column:3; }

  /* Prevent the right button from forcing weird extra width from long text */
  .mobile-menu-btn-row .menu-btn-right{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* =========================================================
   MOBILE FOOTER OVERRIDES (no stacking + no horizontal scroll)
   ========================================================= */
@media (max-width:767.98px){
  html, body{ overflow-x:hidden; }
  /* Prevent any full-width bars causing sideways scroll due to calc/rounding */
  .intro-sub-banner{ max-width:100vw; overflow-x:hidden; }

  .site-footer{ padding:12px 12px 12px; overflow-x:hidden; }
  .site-footer .footer-right{ display:none !important; }

  .site-footer .footer-inner{
    display:flex;
    flex-direction:row !important;
    flex-wrap:nowrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px !important;
    width:100%;
  }

  /* Ensure columns can shrink within the viewport */
  .site-footer .footer-col{ min-width:0 !important; }

  .site-footer .footer-left{ flex:0 1 58%; }
  .site-footer .footer-links{ flex:0 1 42%; text-align:left; }

  /* Typography (smaller than desktop, but readable) */
  .site-footer .footer-left .footer-brand{ font-size:16px; margin-bottom:4px; }
  .site-footer .footer-address{ font-size:8.8px; line-height:1.15; }
  .site-footer .footer-contact,
  .site-footer .footer-email{ font-size:8.8px; line-height:1.2; }

  .site-footer .footer-links .footer-heading{
    left:0 !important;
    margin-left:16px;
    font-size:10.4px;
  }
  .site-footer .footer-list,
  .site-footer .footer-list li a{ font-size:9.6px; line-height:1.25; }

  /* Bottom strip */
  .site-footer .footer-mobile-tagline{
    font-size:14.4px;
    margin-top:8px;
    gap:52px;
    padding:0 10px;
    white-space:nowrap;
  }
}


/* ===== FIX: Prevent desktop transform affecting tablet/mobile ===== */
@media (max-width:1179.98px){
  .site-footer .footer-links{
    transform:none !important;
  }
}

/* =========================================================
   MOBILE: stop footer text causing sideways scroll (keep your font sizes)
   ========================================================= */
@media (max-width:767.98px){
  /* The bottom tagline is the most common overflow culprit once fonts change */
  .site-footer .footer-mobile-tagline{
    white-space:normal !important;
    flex-wrap:wrap !important;
  }

  /* Keep each phrase intact, but allow the pair to wrap onto two lines */
  .site-footer .footer-mobile-tagline .tag-left,
  .site-footer .footer-mobile-tagline .tag-right{
    white-space:nowrap !important;
  }

  /* Nudge Useful Links slightly left (helps alignment + reduces width pressure) */
  .site-footer .footer-links .footer-heading{ margin-left:10px !important; }
  .site-footer .footer-links ul.footer-list{ padding-left:12px !important; }
}

/* Ultra-narrow: reduce gap so wrapping looks tidy */
@media (max-width:367px){
  .site-footer .footer-mobile-tagline{
    gap:18px !important;
    justify-content:space-between !important;
  }
}


/* =========================================================
   MOBILE FOOTER FIX (NO DOUBLE BULLETS + TIGHT LINES)
   - Keep native bullets (single marker)
   - Force UL to be a normal list (not flex/inline-block)
   - Tighten vertical rhythm without relying on extreme line-height
   - Keep your requested pixel nudges
   ========================================================= */
@media (max-width:767.98px){

  /* Pixel nudges */
  .site-footer .footer-left{
    transform: translate(6px, 4px) !important;   /* <-- TUNE */
  }
  .site-footer .footer-links{
    transform: translate(-14px, 2px) !important; /* <-- TUNE */
  }

  /* Ensure we are NOT using any custom bullets from other experiments */
  .site-footer .footer-links ul.footer-list.footer-list-bullets li::before{
    content:none !important;
  }

  /* Restore a normal bullet list with proper wrapped-line alignment */
  .site-footer .footer-links ul.footer-list.footer-list-bullets{
    display:block !important;
    list-style:disc !important;
    list-style-position:outside !important;
    padding-left:16px !important;  /* indent for bullet + text */
    margin-top:2px !important;
  }

  .site-footer .footer-links ul.footer-list.footer-list-bullets li{
    display:list-item !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.02 !important;   /* tight but readable at small sizes */
  }

  .site-footer .footer-links ul.footer-list.footer-list-bullets li a{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
    line-height:inherit !important;
  }
}

/* ultra-narrow phones */
@media (max-width:360px){
  .site-footer .footer-left{ transform: translate(3px, 3px); }
  .site-footer .footer-links{ transform: translate(-6px, 2px); }
}

/* =========================================================
   DESKTOP: H2 Vertical Nudge (ONLY moves the H2)
   - Does NOT affect divider line or layout flow
   - Adjust the 'top' value below
   ========================================================= */
@media (min-width:1180px){
  .content-inner h2{
    position: relative;
    top: 8px;   /* ↓ change this number: negative = UP, positive = DOWN */
  }
}

/* =========================================================
   ULTRA-NARROW MOBILE (<=349px): keep 2 columns but improve fit
   - Push Useful Links column further RIGHT (undo any left-shifts)
   - Improve wrapping for long link text (bullet + second line alignment)
   - Allow "Independent Funeral Directors" + "24 Hour Service" to stack
   ========================================================= */
@media (max-width:349px){

  /* Keep 2 columns */
  .site-footer .footer-inner{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  /* Columns */
  .site-footer .footer-left{ flex:0 1 63% !important; }
  .site-footer .footer-links{
    flex:0 1 37% !important;
    text-align:left !important;
    /* remove any leftward transforms that pull this column inward */
    transform: translate(0px, 0px) !important;
  }

  /* Heading: no left shift */
  .site-footer .footer-links .footer-heading{
    left:0 !important;
    margin-left:0 !important;
    transform:none !important;
  }

  /* Bullet list: wrapped lines align under text */
  .site-footer .footer-links ul.footer-list,
  .site-footer .footer-links ul.footer-list.footer-list-bullets{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    list-style:disc !important;
    list-style-position:outside !important;
    padding-left:14px !important;
    margin-top:2px !important;
  }

  .site-footer .footer-links ul.footer-list li,
  .site-footer .footer-links ul.footer-list.footer-list-bullets li{
    margin:0 0 1px 0 !important;
    padding:0 !important;
    line-height:1.08 !important;
  }

  .site-footer .footer-links ul.footer-list li a,
  .site-footer .footer-links ul.footer-list.footer-list-bullets li a{
    display:inline !important;
    white-space:normal !important;
  }

  /* Bottom tagline: stack the two phrases */
  .site-footer .footer-mobile-tagline{
    white-space:normal !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    justify-content:center !important;
  }
  .site-footer .footer-mobile-tagline .tag-left,
  .site-footer .footer-mobile-tagline .tag-right{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    white-space:normal !important;
  }
}
/* Framework: wide-mobile scaling (615px–767.98px)
   NOTE: This is a framework-wide rule (not gutter-related). */
@media (min-width:615px) and (max-width:767.98px){
  /* Keep the original behaviour you had in the previous build */
  header{
    font-size:40px !important;
  }
  /* And ensure the mobile page heading bar matches */
  .intro-sub-banner h1{
    font-size:34px !important;
  }
}

@media (min-width:768px) and (max-width:1110px){
  .nav-buttons{ flex-wrap:wrap !important; justify-content:center !important; gap:12px !important; }
  .main-btn{ width:auto !important; flex:1 1 150px !important; max-width:190px !important; padding:0 18px !important; }
  .price-btn{ width:100% !important; flex:1 1 100% !important; margin-left:0 !important; }
}
/* ==========================================================================
   TABLET OVERRIDES (clean, self-contained)
   Goal: preserve the desktop look but ensure nothing clips/overflows on 768–1179.
   These rules are appended at EOF so they win the cascade without refactoring.
   ========================================================================== */

@media (min-width:768px) and (max-width:1039.98px){
  /* Layout must fit the viewport */
  .page-layout{
    width:100%;
  }

  /* Sidebar: match legacy "nice" proportions using clamp */
  .page-layout > aside.sidebar,
  .page-layout > .sidebar{
    flex:0 0 clamp(150px, 17vw, 200px) !important;
    max-width:clamp(150px, 17vw, 200px) !important;
    width:auto !important;
    padding-top:80px !important;
  }

  /* Content: take remaining width cleanly (no fixed 700px) */
  .page-layout > main.content,
  .page-layout > .content{
    flex:1 1 auto !important;
    max-width:none !important;
    width:auto !important;
    min-width:0 !important;           /* critical to prevent flex overflow clipping */
    padding:16px !important;
    margin-left:16px !important;
  }


  /* Top buttons: keep ALL 4 on one row at 768px (no orphaned price button) */
  .nav-buttons{
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:6px !important;
  }
  /* allow gentle shrink to fit the available content width */
  .nav-buttons .main-btn{ flex:0 1 110px !important; }
  .nav-buttons .price-btn{
    flex:1 1 0 !important;
    min-width:230px !important;
  }
  /* ensure the long label can wrap inside the button */
  .nav-buttons a{ white-space:normal !important; }
}

@media (min-width:1040px) and (max-width:1179.98px){

  .page-layout{ width:100%; }

  /* Sidebar can be the full desktop width again at this range */
  .page-layout > aside.sidebar,
  .page-layout > .sidebar{
    flex:0 0 200px !important;
    max-width:200px !important;
    width:auto !important;
    padding-top:100px !important;
  }

  .page-layout > main.content,
  .page-layout > .content{
    flex:1 1 auto !important;
    max-width:none !important;
    width:auto !important;
    min-width:0 !important;
    padding:16px !important;
    margin-left:16px !important;
  }

  .nav-buttons{
    flex-wrap:nowrap;
  }
}

/* END TABLET OVERRIDES */

/* =========================================================
   TABLET BUTTON/SIDEBAR LINEAR RAMP (768px → 1179.98px)
   - Added on top of this existing (working) file
   - Overrides earlier tablet experiments (including any !important rules) using
     higher specificity + !important with VALID syntax.
   ========================================================= */
@media (min-width:768px) and (max-width:1179.98px){

  /* Sidebar: 150 → 200 */
  .page-layout > .sidebar,
  .page-layout > aside.sidebar{
    width:clamp(150px, calc(150px + (100vw - 768px) * 0.1213651), 200px) !important;
    flex:0 0 clamp(150px, calc(150px + (100vw - 768px) * 0.1213651), 200px) !important;
    max-width:none !important;
  }

  /* Content: must flex (avoid fixed 700px desktop shell on tablet) */
  .page-layout > .content,
  .page-layout > main.content{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }

  /* Buttons: clamp widths + clamp gaps; keep blank space to the right */
  .page-layout .nav-buttons{
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:clamp(6px, calc(6px + (100vw - 768px) * 0.03398223), 20px) !important;
  }

  /* Main buttons: 110 → 165 */
  .page-layout .nav-buttons .main-btn{
    width:clamp(110px, calc(110px + (100vw - 768px) * 0.1335016), 165px) !important;
    flex:0 0 clamp(110px, calc(110px + (100vw - 768px) * 0.1335016), 165px) !important;
    max-width:none !important;
  }

  /* Price button: 230 → 320 (explicitly prevent flex-grow and desktop auto-push) */
  .page-layout .nav-buttons .price-btn{
    width:clamp(230px, calc(230px + (100vw - 768px) * 0.2184572), 320px) !important;
    flex:0 0 clamp(230px, calc(230px + (100vw - 768px) * 0.2184572), 320px) !important;
    max-width:none !important;
    margin-left:0 !important;
  }
}
/* END TABLET BUTTON/SIDEBAR LINEAR RAMP */


/* LINEAR RAMP: USEFUL LINKS heading
   25px at 768px → smoothly reduces to 0px at 909px */
@media (min-width: 768px) and (max-width: 909.98px) {
  nav.footer-col.footer-links > .footer-heading {
    transform: translateX(
      clamp(
        0px,
        calc((909px - 100vw) * 39 / 141),
        39px
      )
    );
  }
}

/* === Mobile menu: remove bottom gap (panel should reach viewport bottom) === */
#mobile-menu.menu-overlay.open .panel{
  top: 0 !important;
  bottom: 0 !important;
  height: 100dvh !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}