@charset "UTF-8";
/* CSS Document */

/* =========================
   Colours
   ========================= */

		:root{
      --white:#ffffff;
      --grey-dark:#6a6a6a;
      --grey-mid:#e0e0e0;
      --grey-hover:#f2f2f2;
      --grey-light:#fbfbfb;
      --charcoal:#0a0a0a;
      --red:#cc3333;
      --red-dark:#a91315;
      --green:#336633;
      --green-dark:#003300;
			--green-muted:#e1e9d0;
			--green-mid:#7aa141;
      --yellow:#f4c522;
      --orange:#f09a22;
      --blue:#007bff;
      --cream:#fffeef;
      --ink:#1d1d1d;
      --charcoal:#1d1d1d;
      --muted:#6a6a6a;
      --card:#fffeef;
      --border:#e6e6e6;
      --shadow:0 10px 24px rgba(0,0,0,.12);
      --radius:10px;
      --max:1080px;
			
			--page-max: calc(var(--max) + 32px); /* wrap max + left/right padding */
			
			--promo-top-factor: 0.34; /* 0.00 (top) to 1.00 (bottom) */
			--promo-ribbon-w: 40px;
			--hero-top-offset: 34px;   /* tweak this to move text up/down */
  		--hero-side-pad: 16px;
			--hero-bottom-pad: 26px;
			
			/* CA-specific Custom styles*/
			--ca-para-margin-top: 10px;
			--ca-para-margin-bottom: 5px;
			--ca-line-height: 1.3em;
    }

/* =========================
   Fonts: Raleway (local)
   CSS:   /css/kwd1.css
   Fonts: /fonts/Raleway/...
   ========================= */

/* ---- Variable fonts (preferred) ---- */
@font-face{
  font-family: "Raleway";
  src:
    local("Raleway"),
    url("../fonts/Raleway/Raleway-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Raleway";
  src:
    local("Raleway Italic"),
    url("../fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Static fonts (fallback layer) ---- */
/* Normal */
@font-face{
  font-family: "Raleway";
  src: local("Raleway Thin"), url("../fonts/Raleway/static/Raleway-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway ExtraLight"), url("../fonts/Raleway/static/Raleway-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Light"), url("../fonts/Raleway/static/Raleway-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Regular"), url("../fonts/Raleway/static/Raleway-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Medium"), url("../fonts/Raleway/static/Raleway-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway SemiBold"), url("../fonts/Raleway/static/Raleway-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Bold"), url("../fonts/Raleway/static/Raleway-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway ExtraBold"), url("../fonts/Raleway/static/Raleway-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Black"), url("../fonts/Raleway/static/Raleway-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face{
  font-family: "Raleway";
  src: local("Raleway Thin Italic"), url("../fonts/Raleway/static/Raleway-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway ExtraLight Italic"), url("../fonts/Raleway/static/Raleway-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Light Italic"), url("../fonts/Raleway/static/Raleway-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Italic"), url("../fonts/Raleway/static/Raleway-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Medium Italic"), url("../fonts/Raleway/static/Raleway-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway SemiBold Italic"), url("../fonts/Raleway/static/Raleway-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Bold Italic"), url("../fonts/Raleway/static/Raleway-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway ExtraBold Italic"), url("../fonts/Raleway/static/Raleway-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Raleway";
  src: local("Raleway Black Italic"), url("../fonts/Raleway/static/Raleway-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Global stack ---- */
:root{
  --font-sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}



/* =========================
   Styles
   ========================= */

    *{ box-sizing:border-box; }

    body{
      margin:0;
      font-family: var(--font-sans);
			font-optical-sizing: auto;
      color:var(--ink);
      background: var(--red); /* #e6e6e6; */
    }

		/* finite-width page container */
		.site-shell{
			width:100%;
			/* max-width: var(--page-max); */
			margin: 0 auto;
			background:var(--red); /* #fff; */
			box-shadow: 0 18px 40px rgba(0,0,0,.18);
			min-height: 100vh;
		}

		/* on small screens, let it go full width and drop heavy shadow */
		@media (max-width: 980px){
			.site-shell{
				max-width: 100%;
				box-shadow: none;
			}
		}
	
		main {
			background: #fff;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			overflow: hidden;
		}

		.main-secondary {
			padding-bottom: 16px;
		}

	a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; margin: 15px 30px; }

    .wrap{ max-width:var(--max); margin:0 auto; padding:0; }

		/* Always keep some horizontal breathing room inside section wraps */
		section.wrap{
			padding-left: clamp(5px, 2vw, 16px)!important;
			padding-right: clamp(5px, 2vw, 16px)!important;
		}

		section.why.wrap{
			padding-bottom: 10px;
		}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border:0;
      padding:12px 18px;
      border-radius:8px;
      letter-spacing:.2px;
      cursor:pointer;
      text-transform:uppercase;
      font-size:14px;
			font-weight: 400;
      line-height:.2;
      white-space:nowrap;
    }
    .btn--green{ background:var(--green-mid); color:#fff; font-size:16px; font-weight: 600; padding:0 25px 0 25px;}
    .btn--orange{ background:var(--orange); color:#fff; font-size:16px; font-weight: 600; padding:0 25px 0 25px; }
    .btn--red{ background:var(--red); color:#fff; }
    .btn--white{ background:#fff; color:var(--ink); border:1px solid var(--border); }

    .clr-green-dark{ color:var(--green-dark);}
    .clr-green-mid{ color:var(--green-mid);}
    .clr-yellow{ color:var(--yellow);}
		.clr-orange{ color:var(--orange);}
    .clr-red{ color:var(--red);}
    .clr-red-dark{ color:var(--red-dark);}
    .clr-ink{ color:var(--ink);}
    .clr-white{ color:#fff; }


/* =========================================================
   HEADER + MOBILE NAV OVERLAY (single source of truth)
   ========================================================= */

header.site-header{
  background: var(--red);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 3000;                 /* keep above swipe stacks and drawers */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  overflow: visible;             /* avoid shadow clipping */
}

header.site-header .wrap{
  padding: 0;                    /* you set section.wrap padding elsewhere */
}

/* 2 columns: [logo] [content], 2 rows: [nav] [ctas] */
header.site-header .header-grid{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
}

/* Logo column spans both rows */
header.site-header .brand{
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

/* Logo fills header height minus requested margins */
header.site-header .brand .site-logo .shop-logo{
  display: block;
  width: auto;
  height: calc(100% - 30px);     /* 15px top + 15px bottom */
  margin: 15px 30px!important;
}

header.site-header nav.primary-nav .mobile-nav-head,
header.site-header nav.primary-nav .mobile-nav-foot{
  display: none;
}

/* Top row: menu area */
header.site-header .topbar{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 15px 0 6px 0;
}

/* Desktop nav */
header.site-header nav.primary-nav{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

header.site-header nav.primary-nav a{
  font-family: var(--font-sans);
  font-weight: 400;              /* Raleway Regular */
  font-size: 13px;
  text-transform: none;
  opacity: .95;
  padding: 6px 8px;
  border-radius: 6px;
}

header.site-header nav.primary-nav a:hover,
header.site-header nav.primary-nav a.is-active{
  background: rgba(255,255,255,.14);
  opacity: 1;
}

/* Toggle hidden on desktop */
header.site-header .nav-toggle{
  display: none;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 800;
  min-height: 46px;
}

/* Bottom row: CTAs */
header.site-header .cta-row{
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 60px;
  justify-content: flex-start;
  padding: 0 0 14px 8px;
}

/* =========================================================
   MOBILE NAV: full-screen overlay expanding from top-right
   (activates when .nav-toggle is shown)
   ========================================================= */

@media (max-width: 980px){

  /* show toggle on smaller screens */
  header.site-header .nav-toggle{
    display: inline-flex;
    margin-left: auto;         /* right-align within .topbar */
    margin-right: 20px;
		font-size: 18px;             /* larger for usability */
    padding: 14px 18px;
    min-height: 48px;
    min-width: 84px;
  }


  /* CTA row spans full width under logo + toggle */
  /*
	header.site-header .cta-row{
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 30px 14px 30px;   // align to logo margins
  }
	*/
	
  /* The overlay nav itself (closed state) */
  header.site-header nav.primary-nav{
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 14px 16px 20px;
    gap: 8px;

    background: rgba(255,255,255,.98);
    color: var(--red-dark);

    transform-origin: top right;
    transform: scale(.96);
    opacity: 0;
    pointer-events: none;

    z-index: 9999;               /* above everything */
    overflow: auto;              /* allow growth for long menus/footers */
    -webkit-overflow-scrolling: touch;

    transition: transform 180ms ease, opacity 180ms ease;
  }
	
	
  header.site-header nav.primary-nav .mobile-nav-head{
    display: flex;
  }

  header.site-header nav.primary-nav .mobile-nav-foot{
    display: block;
	}
	
  /* Open state */
  header.site-header nav.primary-nav.is-open{
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* Optional "head row" inside the nav (requires small HTML addition) */
  header.site-header nav.primary-nav .mobile-nav-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    position: sticky;
    top: 0;
    padding: 6px 0 12px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(0,0,0,.08);
    z-index: 1;
  }

  header.site-header nav.primary-nav .mobile-nav-head .site-logo{
    height: 44px;
    width: auto;
    margin: 0;                   /* override header logo margins */
  }

  header.site-header nav.primary-nav .mobile-nav-close{
    appearance: none;
    border: 0;
    background: rgba(0,0,0,.06);
    color: var(--red);
    border-radius: 10px;
    padding: 7px 14px 12px 14px;
    font-weight: 200;
		font-size: 4rem;
		line-height: 2rem;
    cursor: pointer;

  }

  header.site-header nav.primary-nav a{
    font-size: 18px;
    font-weight: 600;
    color: var(--red-dark);
    padding: 14px 12px;
    border-radius: 12px;
    background: rgba(192,24,27,.06);
  }

  header.site-header nav.primary-nav a:hover,
  header.site-header nav.primary-nav a.is-active{
    background: rgba(192,24,27,.12);
  }
}

/* CTA buttons: equal sizing and wrapping behaviour at <= 820px */
@media (max-width: 820px){
  header.site-header .cta-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }

  header.site-header .cta-row .btn{
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 48px;

    justify-content: center;
    align-items: center;
    text-align: center;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.2;
  }
}

/* Scroll lock when nav open (use JS to toggle this class) */
body.is-mobile-nav-open{
  overflow: hidden;
}
    /* ===== HERO ===== */
    .hero .wrap{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;       /* horizontal centring */
			justify-content: flex-start;

			text-align: center;        /* centre text lines */
			padding-top: var(--hero-top-offset);
			padding-left: var(--hero-side-pad);
			padding-right: var(--hero-side-pad);
			padding-bottom: var(--hero-bottom-pad);
    }

		/* background driven by HTML (CMS) */
		.hero{
			color:#fff;
			position: relative;
			overflow: hidden;
			min-height:260px;
      align-items:flex-start;


			/* CMS sets this per-hero in HTML:
				 style="--hero-bg: url('/assets/hero_bins1.jpg');" */
			background-image: var(--hero-bg);
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;

			background-color: #1d1d1d; /* fallback */
		}

		/* overlay for readability (kept in CSS, not in CMS-provided background) */
		.hero::before{
			content:"";
			position:absolute;
			inset:0;
			background: rgba(0,0,0,.28);
			pointer-events:none;
		}

		/* ensure hero text sits above the overlay */
		.hero .wrap{
			position: relative;
			z-index: 1;
		}

   	/* CMS-safe typography: scales and wraps cleanly */
		.hero h1{
			margin: 0 0 8px;
			max-width: 900px;

			font-size: clamp(24px, 3.2vw, 40px);
			line-height: 1.08;

			overflow-wrap: anywhere;
		}

		.hero p{
			margin: 0;
			max-width: 820px;

			font-size: clamp(14px, 1.5vw, 18px);
			line-height: 1.35;

			overflow-wrap: anywhere;
		}

		/* ===== HERO carousel ===== */
		.hero-carousel{
			position: relative;
			overflow: hidden;
		}

		.hero-track{
			display: flex;
			transition: transform 350ms ease;
			will-change: transform;
		}

		.hero-slide{
			flex: 0 0 100%;
		}

		/* arrows */
		.hero-nav{
			position:absolute;
			top:50%;
			transform: translateY(-50%);
			border:0;
			width:44px;
			height:44px;
			border-radius:999px;
			background: rgba(255,255,255,.82);
			font-size:26px;
			cursor:pointer;
			z-index: 2;
		}
		.hero-prev{ left: 14px; }
		.hero-next{ right: 14px; }

		/* dots */
		.hero-dots{
			position:absolute;
			left: 50%;
			bottom: 12px;
			transform: translateX(-50%);
			display:flex;
			gap:8px;
			z-index: 2;
		}
		.hero-dot{
			width:10px; height:10px;
			border-radius:999px;
			border:0;
			background: rgba(255,255,255,.55);
			cursor:pointer;
		}
		.hero-dot.is-active{ background: rgba(255,255,255,.95); }




    .promo-badge{
      position:absolute;
      right:18px;
      top:50%;
      transform:translateY(-50%);
      width:150px;
      height:150px;
      background:radial-gradient(circle at 30% 30%, #ffe27a, var(--yellow));
      border-radius:999px;
      box-shadow:var(--shadow);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:18px;
      color:#b1161a;
      font-weight:1000;
      text-transform:uppercase;
    }
    .promo-badge strong{ font-size:46px; display:block; line-height:.9; }
    .promo-badge span{ font-size:13px; display:block; letter-spacing:.6px; }

    /* ===== SERVICES ROW ===== */
    .services{
      padding:18px 0 0;
      background:#fff;
    }
    .services-grid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:12px;
      align-items:stretch;
    }
    .service-card{
      border:1px solid var(--border);
      background:var(--card);
      border-radius:8px;
      overflow:hidden;
      box-shadow:0 6px 16px rgba(0,0,0,.06);
      display:flex;
      flex-direction:column;
      min-height:340px;
    }
    .service-card .title{
      background:var(--green-dark);
      color:#fff;
      font-weight:600;
			font-size: 1.8em;
      text-transform:capitalize;
      padding:10px 14px;
      text-align:center;
    }
    .service-card .media{
      flex:1;
      background:
        linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.06)),
        var(--service-bg) top/cover no-repeat;
      min-height:120px;
      position:relative;
    }

		.service-card .media .mini-badge{
			position:absolute;
			right:0;
			bottom:0;

			background: var(--splash-bg) 0 0 no-repeat;
			background-position: bottom right;
			background-size: contain;

			color:var(--red);
			font-weight:1000;
			text-transform:uppercase;
			font-size:1.3em;

			min-width:140px;
			min-height:140px;

			display:flex;
			justify-content:flex-end;
			align-items:flex-end;
			padding:4px 8px;
			text-align:right;
		}

		.service-card .actions{
      padding:10px;
      display:flex;
      justify-content:center;
      background:var(--red);
			font-weight: 600;
			font-size: 1.3em;
			text-transform:uppercase;
    }

    .side-ribbon{
      background:var(--yellow);
      border:1px solid rgba(0,0,0,.08);
      box-shadow:0 10px 18px rgba(0,0,0,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      font-weight:1000;
      color:#b1161a;
      text-transform:uppercase;
      letter-spacing:.7px;
      padding:10px 8px;
      text-align:center;
    }

    /* ===== SECTION HEADERS ===== */
    .section-title{
      text-align:center;
      font-weight:800;
      margin:18px 0 10px;
      font-size:24px;
      color:var(--green-dark);
    }
    .divider{
      height:1px;
      background:var(--border);
      margin:16px 0;
    }

    /* ===== LATEST NEWS ===== */
    .news{
      padding:6px 0 10px;
    }
    .news-grid{
      display:grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      gap:12px;
    }
    .news-card{
      border:1px solid var(--border);
      border-radius:10px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 6px 16px rgba(0,0,0,.06);
      min-height:160px;
			max-height: 200px;
    }
    .news-card .pad{ padding:12px; }
    .voucher{
      font-weight:1000;
      text-transform:uppercase;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:14px;
    }
    .voucher strong{ font-size:32px; display:block; line-height:1; }
    .voucher span{ font-size:13px; display:block; margin-top:6px; }
    .news-card h3{
      margin:0 0 6px;
      font-size:14px;
      font-weight:1000;
      text-transform:uppercase;
      color:#214f2a;
    }
    .news-card p{
      margin:0;
      /* color:var(--muted);  <- now in CMS */
      font-size:13px;
      line-height:1.35;
      font-weight:700;
    }
    .schedule-thumb{
      min-height:120px;
      background:
        linear-gradient(135deg, rgba(0,0,0,.10), rgba(0,0,0,.04)),
        url("assets/collection-schedule.jpg") center/cover no-repeat;
      display:flex;
      align-items:flex-end;
      justify-content:flex-end;
      padding:10px;
    }
    .schedule-thumb .tag{
      background:rgba(255,255,255,.90);
      border:1px solid rgba(0,0,0,.08);
      border-radius:999px;
      padding:8px 10px;
      font-weight:1000;
      font-size:12px;
    }

    /* ===== WHY CHOOSE ===== */
    .why{
      padding:8px 0 0;
    }
    .why-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:10px;
    }
    .why-card{
      background:var(--red);
      color:#fff;
      border-radius:10px;
      padding:14px 14px 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      min-height:120px;
			max-height: 160px;
      box-shadow:0 10px 20px rgba(0,0,0,.12);
      border:1px solid rgba(255,255,255,.12);
      font-weight:1000;
    }
    .why-card .why-card-icon{
      height:34px;
      margin:5px auto 5px auto;
			
    }

    .why-card h3.why-card-heading{
      display:block;
      font-weight:600;
      margin:4px auto 2px auto;
      text-transform:none;
			color: var(--yellow);
    }

		.why-card small{
      display:block;
      font-weight:400;
      margin-top:0px;
      text-transform:none;
    }

    /* ===== MULTI-COLUMN LAYOUTS ===== */
		/* 2 Column layout */
		.toggle-tab-2col {
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			padding-right: 30px;
		}

		.two-col-wrap {
			display: flex;
			align-items: flex-start;
			gap: 0;
			position: relative;
			background: #fff;
			padding:0 16px;
		}

		.left-2col {
			flex: 1;
			overflow: hidden;
			min-width: 0;
			width: 33.33%;
			position: sticky;
			top: 0;
			height: fit-content;
			align-self: flex-start;
  		z-index: 2;
			min-height: 0px;
			padding: 1.5rem;
		}

		.left-2col-inner {
			position: relative;
			padding-right: 0px;
			margin-right:10px!important;
		}

		.left-2col.expanded .left-2col-inner {
			height: auto;
		}

		.right-2col {
			flex: 2;
			padding: 1.5rem!important;
			border-left: 2px solid red;
		}

		/* Responsive: Stack columns under 980px */
		@media (max-width: 980px) {
			.two-col-wrap {
				flex-direction: column;
			}

			.left-2col {
				width: 100%;
				border-right: none;
				border-bottom: 2px solid var(--red);
				max-height: 25vh;
				overflow: hidden;
				position: relative;
				transition: max-height 0.3s ease;
			}
			
			.left-2col-inner {
				overflow: hidden;
				transition: height 0.3s ease;
				position: relative;
				padding: .5rem!important;
			}

			.left-2col.expanded {
				max-height: none;
			}
			
		 #leftContent-2col.has-shadow::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 40px;
				background: linear-gradient(to bottom, rgba(255,255,255,0), white);
				z-index: 5;
				pointer-events: none;
			}			
			
			.toggle-tab-2col {
				position: absolute;
				display: block;
				bottom: 0;
				left: 40px;
				transform: translateX(-50%);
				background-color: var(--red);
				background-repeat: no-repeat;
				background-position: right;
				color: #fff;
				padding: 0.3rem 1rem;
				padding-right: 20px;
				border: none;
				cursor: pointer;
				z-index: 10;
			}

			.toggle-expanded {
				background-image: url( "../assets/up3.png");
			}

			.toggle-collapsed {
				background-image: url( "../assets/down3.png");
			}
			
			.right-2col {
				border-left: none;
				padding: .5rem!important;

			}
		}

		/* 3 Columns */
    .three-col{
      padding:12px 0 6px;
      background:var(--green-muted);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      margin-top:14px;
    }
    .copy-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
      padding:14px 0;
    }
    .copy-block{
      border:none;
      padding:12px;
			text-align: center;
    }
    .copy-block h4{
      margin:0 0 6px;
      color:var(--green-dark);
      font-weight:800;
    }
    .copy-block p{
      margin:0;
      /* color:var(--green-dark); SET IN CMS*/
      font-weight:600;
      font-size:.8em;
      line-height:1.4;
    }

    /* ===== FOOD WASTE BAND ===== */
    .band{
      background:var(--green-mid);
      color:#fff;
      padding:22px 0;
      text-align:center;
    }
    .band h2{
      margin:0 0 4px;
      font-size:1.8em;
      font-weight:600;
    }
    .band p{
      margin:0;
      font-weight:400;
      font-size:1em;
    }

    /* ===== MAP CTA ===== */
    .map-cta{
      padding:34px 0;
      border-bottom:1px solid var(--border);
    }
    .map-cta .inner{
      text-align:center;
      max-width:820px;
      margin:0 auto;
    }
    .map-cta h3{
      margin:0 0 10px;
      font-size:22px;
      font-weight:800;
      color:var(--green-dark);
    }

    /* ===== FOOTER ===== */
    footer.site-footer{
      background:var(--red);
      color:#fff;
      padding:clamp(5px, 2vw, 16px);
			padding-top: 30px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      gap:14px;
      align-items:start;
    }
    .footer-card h5{
      margin:0 0 8px;
      font-weight:600;
			color: var(--yellow);
      font-size:.9em;
    }
    .footer-card p,
    .footer-card a{
      margin:0;
      color:#fff;
      font-weight:400;
      font-size:12.5px;
      line-height:1.55;
      display:block;
    }

    .footer-brand{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }

    .footer-logo{
      width:70px;
			margin:-10px 0 10px 0;
    }

    .footer-bottom{
      display:flex;
      justify-content:space-between;
      gap:10px;
      /* flex-wrap:wrap; */
      margin-top:14px;
      padding-top:12px;
      border-top:1px solid rgba(255,255,255,.25);
      font-size:.7em;
      font-weight:400;
    }
    .footer-bottom a{ display:inline; margin-left:10px; }

		/* =========================
			 RESPONSIVE <= 820px
			 ========================= */

    @media (max-width: 820px){
      .topbar{
        flex-wrap:wrap;
      }
      .nav-toggle{ display:inline-flex; }
			
			header.site-header .header-grid{
				grid-template-columns: 1fr auto;
				grid-template-rows: auto auto;
			}

			header.site-header .site-logo {
				max-width: 100px;
				margin:15px 30px;

			}
			
		/* Make the CTA row a 2-column grid so both buttons share the same row height */
			header.site-header .cta-row{
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 12px;                 /* equal horizontal spacing */
				align-items: stretch;      /* equal heights (row height = tallest button) */
			}

			/* Equal size buttons, centered text, allow wrapping at spaces */
			header.site-header .cta-row .btn{
				display: flex;             /* ensure full-height centering */
				width: 100%;
				height: 100%;
				min-height: 48px;          /* touch-friendly */
				padding: 14px 14px;        /* consistent padding for both */

				justify-content: center;
				align-items: center;
				text-align: center;

				white-space: normal;       /* allow wrap */
				word-break: normal;        /* do not break words */
				overflow-wrap: normal;     /* do not force mid-word breaks */
				hyphens: auto;             /* optional: hyphenation where supported */
				line-height: 1.2;          /* improves readability when wrapping */
			}			
			
			header.site-header .brand{
				grid-column: 1;
				grid-row: 1;
			}

			header.site-header .topbar{
				grid-column: 2;
				grid-row: 1;
				position: relative;     /* anchor for absolute dropdown */
				flex-wrap: nowrap;      /* prevents layout expansion */
				padding: 0;
				align-items: flex-start;
				justify-content: flex-end;
			}

			/* Put toggle comfortably on the right with the same 30px margin as the logo */
			header.site-header .nav-toggle{
				margin: 15px 30px 0 0;
				font-size: 17px;
				padding: 14px 18px;
				min-height: 48px;
			}

			/* CTAs span full width, side-by-side under logo + menu */
			header.site-header .cta-row{
				grid-column: 1 / -1;
				grid-row: 2;
				padding: 0 30px 14px 30px;  /* align with logo margins */
				gap: 12px;
				flex-wrap: nowrap;          /* keep side-by-side */
			}

			header.site-header .cta-row .btn{
				flex: 1 1 0;
				min-height: 48px;
				justify-content: center;
			}

    }


		/* =========================
			 RESPONSIVE <= 600px
			 ========================= */

    @media (max-width: 600px){
      .services-grid{ grid-template-columns: 1fr; }
			.services-grid .side-ribbon{
				writing-mode: horizontal-tb;
				transform: none;
				padding: 10px 12px;
				font-size: 1.1em;
			}
      .news-grid{ grid-template-columns: 1fr; }
      .why-grid{ grid-template-columns: 1fr; }
      .copy-grid{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr; }
			.hero-carousel { display:none; }
			.copy-block h4{font-size: 1.2em;}
			.copy-block p{font-size: 1em;}


			
			header.site-header .topbar{ justify-content: flex-end; }
			header.site-header .nav-toggle{
				margin-left: auto;
				font-size: 16px;
				padding: 12px 16px;
				border-width: 2px;
				min-height: 44px;
				min-width: 80px;
			}
			
			.card-hide-small {display: none }
			
			.footer-bottom{
				justify-content:stretch;
				}

		/* =========================
			 Latest News swipe stack (<= 600px)
			 ========================= */


  .js-swipe-stack.is-swipe-stack{
    /* tweakables */
    --stack-peek: 10px;          /* vertical offset between cards */
    --stack-scale-step: 0.02;    /* scale reduction per layer */
    --stack-opacity-step: 0.05;  /* opacity reduction per layer */
    --stack-max-layers: 3;       /* how many layers visibly "peek" */
    --stack-radius: 14px;

    position: relative;
    display: block;              /* overrides grid/flex layouts */
    width: 100%;
    max-width: 520px;
    margin: 0 auto;

    /* height set by JS */
    overflow: visible;
    padding-bottom: 18px;
  }

  .js-swipe-stack.is-swipe-stack > *{
    position: absolute;
    inset: 0;
    margin: 0;

    /* set by JS per item */
    --ty: 0px;
    --s: 1;
    --z: 1;
    --op: 1;

    transform: translateY(var(--ty)) scale(var(--s));
    z-index: var(--z);
    opacity: var(--op);

    transition: transform 220ms ease, opacity 220ms ease;
    touch-action: pan-y;        /* allow page vertical scroll */
    user-select: none;
    cursor: grab;
  }

  .js-swipe-stack.is-swipe-stack > *.is-dragging{
    transition: none;
    cursor: grabbing;
  }

  .js-swipe-stack.is-swipe-stack > *.is-dismissing{
    transition: transform 260ms ease, opacity 260ms ease;
  }

  /* Visual clue: deck shadow/outline */
  .js-swipe-stack.is-swipe-stack::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius: var(--stack-radius);
    /* box-shadow: 0 10px 26px rgba(0,0,0,.12); */
    pointer-events:none;
  }

  /* Visual clue: "Swipe" pill (text comes from data-swipe-hint if provided) */
  .js-swipe-stack.is-swipe-stack::after{
    content: attr(data-swipe-hint);
    position:absolute;
    right: 12px;
    bottom: -2px;
    z-index: 50;

    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(0,0,0,.10);
    color: var(--ink);
    font-weight: 800;
    font-size: 13px;
    pointer-events:none;
  }

  /* If no hint provided, supply a default */
  .js-swipe-stack.is-swipe-stack:not([data-swipe-hint])::after{
    content: "Swipe ‹ ›";
  }
		
	/* Why Cards */
	.why-card .why-card-icon{
		height:50px;
		margin:5px auto 5px auto;
	}

	.why-card h3.why-card-heading{
		display:block;
		font-weight:800;
		font-size: 1.2em;
		margin:6px auto 4px auto;
	}

	.why-card small{
		font-weight:600;
		font-size: 1em;
		margin-top:0px;
		text-transform:none;
	}
			
}

@media (max-width: 380px){
  header.site-header .cta-row{ flex-wrap: wrap; }
}

/* =========================
   Promo drawer (off-canvas)
   ========================= */

body.is-modal-open{ overflow:hidden; }

.promo-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
}

/* Outer: only ribbon width when CLOSED, full width when OPEN */
.promo-drawer{
  --promo-w: min(60vw, 680px);
  --promo-h: 186px;

  position: fixed;
  right: 0;

  top: clamp(
    90px,
    calc(var(--promo-top-factor) * 100vh),
    calc(100vh - var(--promo-h) - 40px)
  );

  height: min(var(--promo-h), calc(100vh - 140px));
  width: var(--promo-ribbon-w);
  overflow: hidden;
	box-shadow: 0 10px 18px rgba(0,0,0,.18);
  display: flex;
  justify-content: flex-start; /* was flex-end */
  align-items: stretch;
	border-radius:var(--radius) 0 0 var(--radius); 

  z-index: 1001;

  transition: width 220ms ease;

  /* Intro animation (vertical only) */
  opacity: 0;
  transform: translateY(-150px);
  animation: promoDockIn 1000ms cubic-bezier(.22,.9,.26,1) 180ms forwards;
}

.promo-drawer.is-open{
  width: var(--promo-w);
	overflow: visible;
}

@keyframes promoDockIn{
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .promo-drawer{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Inner: fixed width, prevent shrinking, sits at the right edge of the clipped outer */
.promo-drawer__inner{
  width: var(--promo-w);
  height: 100%;
  flex: 0 0 auto;             /* prevent flex shrink */
  display: flex;
  align-items: stretch;
}

/* Ribbon button styling (keep your existing vertical-text span behaviour) */
.promo-drawer .side-ribbon{
  writing-mode: horizontal-tb;
  transform: none;

  height: 100%;
  width: var(--promo-ribbon-w);

  border: 1px solid rgba(0,0,0,.08);
  border-right: 0;

  box-shadow: none;
  cursor: pointer;

  appearance: none;
  background: var(--yellow);
  padding: 0;
}

#promoRibbon{
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

/* Vertical text + bottom chevrons */
.promo-ribbon{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 10px 6px;
}

.promo-ribbon__text{
  flex: 1 1 auto;
  display: flex;
  align-items: center;

  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;

  font-weight: 1000;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .05rem;
  color: #b1161a;
}

.promo-ribbon__chev::before{
  content: "«";
}

.promo-drawer.is-open .promo-ribbon__chev::before{
  content: "»";
}

.promo-ribbon__chev{
  display:block;
  width:100%;
  text-align:center;

  writing-mode: horizontal-tb;
  transform: none;

  padding: 5px 0 0px 0;
  font-weight: 1000;
  font-size: 2em;
  color: var(--red-dark);
  line-height: 1;
}

/* Panel */
.promo-panel{
  flex: 1;
  background: var(--orange);
  position: relative;
  padding: 16px 18px 14px;
  overflow: hidden;
}

/* Small-format */
@media (max-width: 560px){
  :root{ --promo-top-factor: 0.22; }
	.promo-ribbon__text{
  	align-items: center;
		font-size: 1.2em;
  	letter-spacing: .1rem;
	}

}

@media (max-width: 980px){
  .services-grid .side-ribbon{ writing-mode:horizontal-tb; transform:none; padding:10px 12px; }
	.promo-ribbon__text{
  	align-items: center;
		font-size: 1.2em;
  	letter-spacing: .1rem;
	}
	.promo-drawer{
    --promo-w: min(88vw, 360px);
    --promo-h: 230px;
    top: 200px;
  }

}

.promo-panel h2{
  margin:0 0 8px;
  color:#b1161a;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2px;
  font-size: 26px;
  line-height:1.0;
}

.promo-panel p{
  margin:0;
  color:#fff;
  font-weight:400;
  font-size:18px;
  line-height:1.25;
  max-width: 560px;
}

/*.promo-panel p strong{ color:#b1161a; } */

.promo-details{
  position:absolute;
  right:18px;
  bottom:14px;
  color:#b1161a;
  font-weight:1000;
  font-size:20px;
  text-transform:lowercase;
}

.promo-details:hover{ text-decoration:underline; }

/* =========================
   Generic modal
   ========================= */
/* Force the HTML hidden attribute to actually hide, even if later rules set display */
[hidden] { display: none !important; }

body.is-ui-modal-open{
  overflow: hidden;
}

.kwd-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
	display:none;
}
.kwd-modal-overlay:not([hidden]) { display: block; }

.kwd-modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  z-index: 9999;
}
.kwd-modal:not([hidden]) { display: flex; }

.kwd-modal-src { display: none; }

.kwd-modal__dialog{
  width: min(760px, calc(100vw - 36px));
  max-height: min(78vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  position: relative;
  padding: 18px 18px 16px;
}

.kwd-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0;
  background: rgba(0,0,0,.06);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
	flex: 0 0 auto;
}

.kwd-modal__close:hover{
  background: rgba(0,0,0,.10);
}

/* Scrollable body */
.kwd-modal__body{
  flex: 1 1 auto; 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
}

.kwd-modal__body h2{
  margin: 0 44px 10px 0; /* leave room for close button */
  font-size: 22px;
  font-weight: 800;
  color: var(--green-dark);
}

.kwd-modal__body p{
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}

/* Small screens */
@media (max-width: 600px){
  .kwd-modal{
    padding: 18px 12px;
    align-items: center; 
  }
  .kwd-modal__dialog{
    width: 100%;
    max-height: 88vh;
  }
}

/* Service selection radios */
.loc-service{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end; /* aligns nicely within your header row */
}

.loc-service__radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.loc-service__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.65);
  color: var(--green-dark);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
}

/* hover matches your general interaction pattern */
.loc-service__pill:hover{
  background: var(--orange);
  color: var(--white);
  transform: translateY(-1px);
}

/* checked state */
.loc-service__radio:checked + .loc-service__pill{
  background: var(--green);
  color: var(--white);
  border-color: rgba(0,0,0,.08);
}

/* focus accessibility */
.loc-service__radio:focus-visible + .loc-service__pill{
  outline: 3px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}


/* =========================
   Location Checker drawer
   ========================= */

:root{
  /* Adjust this to move the location ribbon up/down as a factor from top */
  --loc-top-factor: .4;
}

.loc-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
}

/* Outer: ribbon-only when closed; expands when open */
.loc-drawer{
  --loc-ribbon-w: 40px;
  --loc-w: min(80vw, 760px);
  --loc-h: min(45vh, 600px);

  position: fixed;

  /* KEY: only ribbon remains inside the viewport when closed */
  right: calc(-1 * (var(--loc-w) - var(--loc-ribbon-w)));

  top: clamp(
    90px,
    calc(var(--loc-top-factor) * 100vh),
    calc(100vh - var(--loc-h) - 0px)
  );

  width: var(--loc-w);
  height: auto; 
	min-height: 600px;

  display: flex;
  align-items: stretch;

  z-index: 9999;

  /* keep shadow visible; no clipping required */
  overflow: visible;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);

  transition: right 220ms ease;
}


.loc-drawer.is-open{
  width: var(--loc-w);
  overflow: visible; /* allow shadow/contents when open */
	right: 0;
}

.loc-drawer__inner{
  width: var(--loc-w);
  height: 100%;
  display: flex;
	align-items: center;
}

/* Ribbon (vertical text + bottom chevron) */
.loc-ribbon{
  width: var(--loc-ribbon-w);
  border: .5px solid rgba(255,255,255,1.00);
  border-right: 0;
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);

  background: var(--green);
  color: #fff;

  cursor: pointer;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0px;
	height: clamp(100px, 30vh, 120px);  /* tweak values as desired */
  align-self:flex-end;
	flex: 0 0 var(--loc-ribbon-w);
}

.loc-ribbon__text{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;

  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
}

.loc-ribbon__chev{
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 6px 0;
  line-height: 1;
  font-weight: 900;
  font-weight: 1000;
  font-size: 2em;
	
}

/* Closed: point LEFT (invite open). Open: point RIGHT (invite close). */
.loc-ribbon__chev::before{ content: "«"; }
.loc-drawer.is-open .loc-ribbon__chev::before{ content: "»"; }
.loc-drawer:not(.is-open) .loc-panel{ pointer-events: none; }

/* Panel */
.loc-panel{
  background: var(--green-muted);
  border: 1px solid rgba(0,0,0,.10);
  border-left: 0;
	border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);


  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
	height: 100%;
  align-self: stretch;
	flex: 1 1 auto;
	
	pointer-events: auto;
}

.loc-panel__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.loc-panel__header h2{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--green-dark);
}

.loc-panel__header h3{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-dark);
}

.loc-close{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0;
  background: rgba(0,0,0,.06);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.loc-help{
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

.loc-input{
  position: relative;
}

#locInput{
  width: 100%;
  padding: 10px 12px 0px 12px;
  border: 2px solid rgba(0,0,0,.14);
  border-radius: 10px;
  font-size: 16px;
  box-sizing: border-box;
}

.loc-input__row{
  display:flex;
  gap:8px;
  align-items:stretch;
}

#locInput{
  flex:1 1 auto;
  min-width:0;
}

.loc-search-btn{
  flex:0 0 auto;
  width:44px;              /* good tap target */
  height:44px;
  border:0;
  border-radius:10px;
  background: var(--green);
  color: var(--white);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.loc-search-btn:hover{
  background: var(--orange);
  transform: translateY(-1px);
}

.loc-search-btn:active{
  transform: translateY(0);
}

.loc-search-btn svg{
  fill: currentColor;
}

.loc-autocomplete{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
  max-height: 280px;
  overflow: auto;
  z-index: 1200;
}

.loc-autocomplete .loc-item{
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 15px;
}

.loc-autocomplete .loc-item:hover{
  background: rgba(0,0,0,.04);
}

.loc-status{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  min-height: 18px;
}

.loc-map{
  width: 100%;
  height: 240px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  overflow: hidden;
  background: rgba(0,0,0,.04);
}

.loc-result{
  margin-top: 0;
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 10px;

  display: grid;
  grid-template-columns: 1fr auto;  /* left grows, right fits */
  align-items: center;              /* vertical alignment */
  column-gap: 10px;
}

.loc-result__msg{
  font-weight: 800;
  line-height: 1.35;
	min-width: 0;
}

.loc-result.is-good .loc-result__msg{ color: var(--green-dark); }
.loc-result.is-bad  .loc-result__msg{ color: var(--red-dark); }

.loc-result__actions{
  justify-content: flex-end;
}

.loc-button-order {
  height:44px;
  border:0.5px solid var(--white);
  border-radius:5px;
  color: var(--white);
	font-weight: 600;
	background-color: var(--orange);
  display:grid;
  align-items:center;
  cursor:pointer;
}

.loc-button-order:hover{
	background-color: var(--green-mid);
  color: var(--green-dark);
}
.loc-button-close {
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:0.5px solid var(--border);
  border-radius:5px;
  color: var(--white);
	background-color: var(--grey-mid);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.loc-button-close:hover{
  color: var(--charcoal);
	background-color: var(--grey-hover);
}

/* =========================================================
   Location Checker drawer: prevent closed drawer blocking clicks
   Put this at the END of kwd1.css so it overrides earlier rules
   ========================================================= */

/* Closed state: allow clicks THROUGH the (tall) drawer hitbox */
.loc-drawer{
  pointer-events: none;   /* critical: stops the tall closed strip blocking clicks */
  box-shadow: none;       /* remove ghost shadow when closed */
}

/* Keep the ribbon clickable even when the drawer itself is click-through */
.loc-drawer .loc-ribbon{
  pointer-events: auto;
  /* Optional: keep a subtle shadow on the visible tab */
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* Open state: panel becomes interactive again */
.loc-drawer.is-open{
  pointer-events: auto;
}

/* Better default alignment (panel stretches full height; ribbon can self-center) */
.loc-drawer__inner{
  align-items: stretch; /* overrides current center alignment */
}

/* Shadow should appear when OPEN, on the panel (not the whole drawer) */
.loc-panel{ box-shadow: none; }
.loc-drawer.is-open .loc-panel{
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* Avoid double-shadow when open (optional) */
.loc-drawer.is-open .loc-ribbon{
  box-shadow: none;
}


@media (max-width: 560px){
  .loc-drawer{
    --loc-w: min(92vw, 390px);
    --loc-h: min(82vh, 620px);
  }
	
  .loc-map{ height: 210px; }
	
	.loc-result{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
	
  .loc-result__actions{
    justify-content: flex-end;
  }
}

@media (max-width: 980px){
	.loc-ribbon__chev{
  font-weight: 1000;
  font-size: 2.2em;}
	.promo-ribbon__chev{
  font-weight: 1000;
  font-size: 2.2em;}
  .loc-service{
    flex-direction: column;
    align-items: stretch;     /* make each option full width */
    justify-content: flex-start;
    gap: 6px;
  }

  .loc-service__pill{
    width: 100%;
    justify-content: flex-start; /* left-align text inside pill */
  }	
	
	
}


/* ==================================
   CONTENT ACTIVATION STANDARD STYLES
   ================================== */
.ca-noshow {
	display: none;
}

div.ca-content {
	margin-right: clamp(0px,
    calc((var(--max) + var(--promo-ribbon-w) - 100vw) + var(--promo-ribbon-w) + 0px),
    calc(var(--promo-ribbon-w) + 0px)
  );
}

.ca-content h3 {
	color: var(--green-dark);
	font-size: 1.2rem;
	font-weight: 600;
}

.ca-content h4 {
	color: var(--green-dark);
	font-size: 1rem;
	font-weight: 600;
}

.ca-content p {
	margin-top: var(--ca-para-margin-top);
	margin-bottom: var(--ca-para-margin-bottom);
	line-height: var(--ca-line-height);
	font-size: 1em;
}

.left-2col-inner > section.band .wrap > p {
  font-size: .95em;
}


.ca-content a, .accordion-body a {
	color:var(--blue);
	text-decoration-line: underline;
  text-decoration-style:dashed;
  text-decoration-thickness: 1px; /* Optional: control line weight */
  text-underline-offset: 2px;
}

.ca-p-tight {
	margin:10px 0!important;
}

.ca-content ul {
	margin-top: var(--ca-para-margin-top);
	margin-bottom: var(--ca-para-margin-bottom);
	line-height: var(--ca-line-height);
	font-size: .9em;
}

@media (max-width: 980px){
	.ca-content p {
		font-size: 1.1em;
	}
	
	.ca-content ul {
		font-size: 1em;
	}
}

img.img-float-left {
    float: left;
    margin: 0 1rem 1rem 0;
    max-width: 50%;
    height: auto;
}
img.img-float-right {
    float: left;
    margin: 0 0 1rem 1rem;
    max-width: 50%;
    height: auto;
}
img.img-center {
    display: block;
    margin: 0.75rem auto;
    float: none;
    max-width: 100%;
    height: auto;
}
img.img-full {
    display: block;
    margin: 0.75rem 0;
    float: none;
}
img.img-circle-left {
    display: block;
    margin: 0.75rem 0;
    float: left;
    border-radius: 50%;
}

br.ca-clear-all { clear: both; }

/* =========================================================
   Skip Pre-Order Modal
   ========================================================= */
.skip-modal, .prod-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(100, 100, 100, 0.8);
  overflow: auto;
}

.skip-modal-card, .prod-modal-card {
	margin: 5vh auto 0 auto;
	width: auto;
	max-width: 600px;
	background-color: #EEEEEE;
	border-radius: var(--radius);
}

.skip-modal-card-title, .prod-modal-card-title {
	color: #CC3333;
	font-size: 1.4em;
	font-weight: 100;
}	
	
.skip-modal-card-header, .prod-modal-card-header {
  width: 100%;
  background-color:#FFFFFF;
	color: #CC3333;
  padding: 10px;
	overflow: hidden;
	text-align: left;
	font-size: 1.6em;
	font-weight: 700;
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.skip-modal-card-body, .prod-modal-card-body {
  padding: 10px;
  align-items: center;
	height: auto;
	min-height: 300px;
	text-align: center;
	overflow: hidden;
}
	
.skip-modal-container, .prod-modal-container {
	width: auto;
	min-width: 200px;
	max-width: 400px;
	height: auto;
	min-height: 400px;
	margin:auto;
}
	
.skip-modal-img, .prod-modal-img {
  display: block;
  margin: 0 auto;
  max-width: 300px;
}
	
.skip-modal-footer, .prod-modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 10px 20px 10px 20px;
}

/* Remove floats, tweak spacing */
.skip-modal-terms-btn, .prod-modal-terms-btn {
	font-size: 1em;
	padding: 5px;
	margin: 2px 0;
	border:2px solid var(--charcoal);
}

.skip-modal-terms-btn,
.skip-modal-terms-btn:focus, 
.prod-modal-terms-btn, .prod-modal-terms-btn:focus{
	color: var(--charcoal);
	width:auto;
	min-width: 160px !important;
	min-height: 35px;
	font-size: .9em;
	padding: 2px 10px;
	margin: 0; /* no right margin needed */
	overflow: hidden;
}

.skip-modal-terms-btn:hover, .prod-modal-terms-btn:hover {
	color: var(--red);
	border:2px solid var(--red);
}


.skip-modal-nxt-btn,
.skip-modal-nxt-btn:focus,
.prod-modal-nxt-btn,
.prod-modal-nxt-btn:focus {
	background-color: var(--red);
	color: var(--white);
	min-width: 160px !important;
	min-height: 35px;
	font-size: 1.3em;
	padding: 2px 10px;
	margin: 0; /* no right margin needed */
	overflow: hidden;
}

/* Optional: hover state */
.skip-modal-nxt-btn:hover, .prod-modal-nxt-btn:hover {
	background-color: var(--green-mid);
}

.skip-modal-cl-btn, .prod-modal-cl-btn {
	float:right!important;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
	
/* End Skip/prod Modal */


/*  ENSURE MAP CONTROL STYLES ARE PRESERVED */

#map .gm-style img {
  max-width: none !important;
}

#map .gm-style,
#map .gm-style * {
  filter: none !important; /* only matters if your theme uses invert/filters */
}
#map .gm-style svg,
#map .gm-style svg * {
  fill: unset !important;
	color:red !important;
}


/* FAQs  */
  .kwd-faq mark {
    background: #ffe599;
    padding: 0 .15em;
  }
 .kwd-faq .accordion-button {
    font-weight: 700;
		color: var(--green-dark);
  }
  .kwd-faq .accordion-button:not(.collapsed) {
    color: var(--green-dark);
    background-color: rgba(0,0,0,0.03);
  }
	.kwd-faq .accordion-button:hover {
				background-color: var(--grey-mid);
	}

	.accordion-item {
		background: var(--cream);
	}
	.accordion-body {
		overflow: hidden;
		height: auto;
	}
	
  .kwd-faq-cta {
    margin-top: 10px;
  }

  .kwd-faq-btn.prod-order {
    display: inline-block;
    font-size: 1.0em; 
    line-height: 1.1em;
    padding: 8px 12px;
    min-width: 140px;
    border-radius: 5px;
		background-color: var(--green-muted);
		color: var(--green-dark);
		text-decoration: none;

  }
.kwd-faq-btn.prod-order:hover {
		background-color: var(--orange);
		color: var(--white);
}
.kwd-faq-btn.prod-order a {
	text-decoration: none;
}

/* DOCUMENT FOR DOWNLOAD  */
.kwd-docs {
    display: grid;
    gap: 12px;
    margin-top: 12px;
  }

  .kwd-doc {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 14px 14px;
		border:1px solid var(--border);
		background:var(--card);
		border-radius:8px;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
  }

  .kwd-doc:hover {
		background:var(--grey-hover);
	}

  .kwd-doc__meta { flex: 1 1 auto; min-width: 0; }
  .kwd-doc__title a { 
		margin: 0 0 6px 0; 
		font-size: 1.1rem; 
		color: var(--green-dark)!important;
		text-decoration: none!important;
		text-decoration-line: none!important;
	}

  .kwd-doc__view {
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 800;
  }
  .kwd-doc__view:hover { text-decoration: underline; }

  .kwd-doc__desc { margin: 0; color: var(--grey-dark); line-height: 1.45; }


/* Allow "date/size" line under description */
.kwd-doc__sub {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--grey-dark);
  opacity: 0.9;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.kwd-doc__dot { opacity: 0.6; }

  .kwd-doc__actions { flex: 0 0 auto; display: flex; align-items: center; }

  /* Primary download button (icon-first) */
  .kwd-doc__download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 8px;
		background-color: var(--green-muted);
		color: var(--green-dark)!important;
		text-decoration: none;
		text-decoration-line: none!important;
    cursor: pointer;
    user-select: none;
    transition: background-color 160ms ease, transform 160ms ease;
  }

  /* Rollover colour aligns with your existing .prod-order hover */
  .kwd-doc__download:hover { 
		background-color: var(--orange);
		color: var(--white)!important;
		transform: translateY(-1px); 
		text-decoration: none;
	}

  .kwd-doc__download:active { transform: translateY(0px) scale(0.99); }

  /* Make focus accessible */
  .kwd-doc__download:focus-visible {
    outline: 3px solid rgba(0,0,0,0.2);
    outline-offset: 2px;
  }

  .kwd-doc__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
    position: relative;
  }

  .kwd-doc__downloadText {
    font-weight: 400;
    font-size: 1.0rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  /* SVG inherits currentColor for easy theming */
  .kwd-doc__icon svg { fill: currentColor; }

  /* Simple "download" animation: arrow drops into tray */
  .kwd-doc__stem { transform-origin: 50% 50%; }
  .kwd-doc__tray { opacity: 0.85; }

  .kwd-doc__download:hover .kwd-doc__stem {
    animation: kwdArrowDrop 600ms ease-in-out;
  }

.kwd-doc__download.is-clicked { transform: translateY(0px) scale(0.98); }

  @keyframes kwdArrowDrop {
    0%   { transform: translateY(0); }
    45%  { transform: translateY(4px); }
    70%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
  }

  /* Responsive: tighten spacing on small screens */
  @media (max-width: 520px) {
    .kwd-doc { flex-direction: column; align-items: stretch; }
    .kwd-doc__actions { justify-content: flex-end; }
    .kwd-doc__download { justify-content: center; }
  }

	/* CAREERS  */
	.kwd-vacancies { margin-top: 8px; }
	.kwd-vacancies__title { color: var(--green-dark); margin-bottom: 6px; }
	.kwd-vacancies__intro { margin-bottom: 14px; color: var(--grey-dark); }

	.kwd-vacancies__grid{
		display: grid;
		gap: 12px;
		grid-template-columns: repeat(12, 1fr);
	}

	.kwd-vacancy-card{
		grid-column: span 12;
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 14px;
		border: 1px solid var(--border);
		background: var(--card);
		border-radius: 8px;
		box-shadow: 0 6px 16px rgba(0,0,0,.06);
	}

	.kwd-vacancy-card:hover { background: var(--grey-hover); }

	.kwd-vacancy-card__title{
		margin: 0;
		font-size: 1.1rem;
		font-weight: 900;
		color: var(--green-dark);
	}

	.kwd-vacancy-card__outline{
		margin: 0;
		color: var(--grey-dark);
		line-height: 1.45;
	}

	/* Bottom-right action */
	.kwd-vacancy-card__actions{
		margin-top: auto;
		display: flex;
		justify-content: flex-end;
		padding-top: 6px;
	}

	/* Use your existing .prod-order but size it nicely for cards */
	.kwd-vacancy-btn.prod-order, .kwd-vacancy-apply-btn.prod-order {
    display: inline-block;
    font-size: 1.0em; 
    line-height: 1.1em;
    padding: 8px 12px;
    min-width: 140px;
    border-radius: 5px;
		background-color: var(--green-muted);
		color: var(--green-dark);
		text-decoration: none;
		flex: 0 0 auto; 
  	white-space: nowrap;
  }

	.kwd-vacancy-btn.prod-order:hover, .kwd-vacancy-apply-btn.prod-order:hover {
			background-color: var(--orange);
			color: var(--white);
	}

	.kwd-vacancy-btn.prod-order a, .kwd-vacancy-apply-btn.prod-order a {
		text-decoration: none;
	}

	/* Modal content formatting (inside generic modal) */
	.kwd-vacancy-modal__meta{
		margin: 6px 0 12px 0;
		color: var(--grey-dark);
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		align-items: center;
	}
	.kwd-vacancy-modal__title {
		color: var(--green-dark);
	}

	.kwd-dot { opacity: 0.6; }

	.kwd-vacancy-modal__apply{
		display: flex;
		flex-direction: column;
		align-items: left;

		margin-top: 14px;
		padding-top: 12px;
		border-top: 1px solid var(--border);
	}

	.kwd-vacancy-modal__note{
		margin-top: 10px;
		color: var(--grey-dark);
		font-size: 0.95rem;
	}

.kwd-vacancy-apply-row{
  display: flex;
  align-items: center;
  justify-content: space-between; /* left note, right button */
  gap: 12px;
  flex-wrap: nowrap;
	padding-bottom: 20px;
}

.kwd-vacancy-modal__note{
	color: var(--grey-dark);
	font-size: 0.95rem;
  margin: 10px 0 0 0;
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

	/* Responsive */
	@media (max-width: 900px){
		.kwd-vacancy-card{ grid-column: span 12; }
	}


/* Card: thumb left of outline 
.kwd-vacancy-card__outlineRow{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}*/

.kwd-vacancy-card__thumb{
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
}

/* Keep the existing outline styling; ensure margin doesn't fight layout */
.kwd-vacancy-card__outline{
  margin: 0;
}

/* Modal: float thumb left so body text wraps */
.kwd-vacancy-modal__thumbWrap{
  float: right;
  margin: 0 0 10px 14px;
}

.kwd-vacancy-modal__thumb{
  width: 200px;
  height: auto;
	margin: 0 14px 10px 0;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

@media (max-width: 520px){
  .kwd-vacancy-card__outlineRow{
    flex-direction: column;
  }
  .kwd-vacancy-modal__thumbWrap{
    float: none;
    margin: 0 20px 12px 0;
  }
  .kwd-vacancy-modal__thumb{
    width: 100%;
    height: auto;
  }
}