/* ==========================================================================
   Site V2 - scoped styles for the modern header + Returning-Customer banner.
   Everything is namespaced under .hv2* so it CANNOT collide with the legacy
   Bootstrap parity CSS. Loaded only when a V2 element renders (see layout.tsx).
   Brand tokens taken from the legacy theme: green #39b54a, red #ED1C24,
   dark #282828.
   ========================================================================== */

.hv2 {
  --hv2-green: #39b54a;
  --hv2-green-dark: #2f9c3f;
  /* Deep complementary green - used for the CTA button + top-bar contact icons
     (replacing red), a richer forest tone that pairs with the brand green. */
  --hv2-green-deep: #147a3e;
  --hv2-green-deep-hover: #0f6031;
  --hv2-red: #ed1c24;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
  --hv2-radius: 8px;
  /* The wrapper carries scoped tokens + font but MUST NOT create a box, else it
     becomes the sticky containing block and the pinned header releases at its
     bottom edge. `display: contents` removes the box while still cascading the
     custom properties + font to the children (inherited props pass through). */
  display: contents;
  /* Match the site body font (Poppins) - see public/css/fonts.css. */
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  color: var(--hv2-ink);
}

.hv2 *,
.hv2-drawer *,
.hv2-overlay {
  box-sizing: border-box;
}

.hv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.hv2-visually-hidden,
.hv2 .hv2-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Utility bar ---------------------------------------------------------- */
.hv2-utility {
  /* Legacy #top-header is brand green with white 15px text - match it. */
  background: var(--hv2-green);
  font-size: 15px;
}
/* The legacy theme has `p,a,span { color:#444 }` (theme-default.css) which is
   same-specificity and loads after us - force white with a compound selector
   so the utility-bar text isn't dragged dark. */
.hv2-utility,
.hv2-utility p,
.hv2-utility a,
.hv2-utility .hv2-strapline {
  color: #fff;
}
.hv2-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}
.hv2-strapline {
  margin: 0;
}
.hv2-contact {
  margin: 0;
  display: flex;
  gap: 18px;
  white-space: nowrap;
}
.hv2-contact a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hv2-contact a:hover {
  text-decoration: underline;
}
/* Phosphor phone/envelope icons: deep-green accent against the brand-green bar
   (they inherit currentColor), vertically centred with the text. */
.hv2-contact a svg {
  color: var(--hv2-green-deep-hover);
  flex: 0 0 auto;
}

/* ---- Main bar ------------------------------------------------------------- */
/* Sticky: the utility bar scrolls away, then the logo/search + nav rows pin to
   the top for the whole page. The banner is a sibling OUTSIDE <header> so this
   doesn't release at the header's bottom edge. High z-index keeps it above the
   green page-title bar (.header-page) it would otherwise stick behind. */
.hv2-main {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 200;
}
/* Row 1: logo left, search (or mobile controls) right. */
.hv2-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.hv2-brand-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hv2-logo {
  flex: 0 0 auto;
  line-height: 0;
}
.hv2-logo img {
  height: 48px;
  width: auto;
  display: block;
}

/* Row 2: primary nav on its own full-width row. A rule above (from the brand
   row) and below (here) frame it with equal spacing; the banner sits flush to
   the lower rule. */
.hv2-nav-row {
  border-top: 1px solid var(--hv2-line);
  border-bottom: 1px solid var(--hv2-line);
}
/* The legacy theme has `nav { margin-bottom: 30px }` (theme-default.css) which
   leaks onto our <nav>, adding phantom space below the items. Reset it so the
   space below the nav matches the space above. */
.hv2-nav {
  margin: 0;
}
.hv2-nav-list {
  padding: 6px 0;
}

/* ---- Desktop nav ---------------------------------------------------------- */
.hv2-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
}
.hv2-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  /* Legacy nav: 13px, uppercase, weight 500. */
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--hv2-ink);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.hv2-nav-link:hover,
.hv2-nav-link:focus-visible {
  background: #f2f7f2;
  color: var(--hv2-green-dark);
  outline: none;
}
.hv2-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-top: 1px;
}

.hv2-has-children {
  position: relative;
}
.hv2-dropdown {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  top: calc(100% + 6px);
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--hv2-line);
  border-radius: var(--hv2-radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 60;
}
/* Invisible bridge over the 6px gap so moving the pointer from the trigger to
   the menu doesn't cross dead space and close the (hover-opened) dropdown. */
.hv2-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
.hv2-dropdown[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hv2-dropdown a {
  display: block;
  padding: 9px 12px;
  color: var(--hv2-ink);
  text-decoration: none;
  border-radius: 6px;
  /* Match the top-level nav links: 13px, uppercase, weight 500. */
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.hv2-dropdown a:hover,
.hv2-dropdown a:focus-visible {
  background: #f2f7f2;
  color: var(--hv2-green-dark);
  outline: none;
}

/* ---- Active (current page) ------------------------------------------------ */
/* Top-level bar link (or the group whose child is current): colour + heavier
   weight, no background chip. */
.hv2-nav-link.is-active {
  color: var(--hv2-green-dark);
  font-weight: 700;
}
/* Current item inside a dropdown. */
.hv2-dropdown a.is-active {
  color: var(--hv2-green-dark);
  background: #eef5ee;
  font-weight: 700;
}

/* ---- Desktop search ------------------------------------------------------- */
.hv2-search-desktop {
  flex: 0 0 auto;
}
.hv2-search-field input {
  width: 180px;
  max-width: 22vw;
  padding: 9px 14px;
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
}
.hv2-search-field input:focus-visible {
  outline: 2px solid var(--hv2-green);
  outline-offset: 1px;
}

/* ---- Mobile controls / drawer -------------------------------------------- */
.hv2-mobile-controls {
  display: none;
  margin-left: auto;
  gap: 4px;
}
.hv2-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--hv2-ink);
  cursor: pointer;
}
.hv2-icon-btn:hover,
.hv2-icon-btn:focus-visible {
  background: #f2f2f2;
  outline: none;
}

.hv2-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
}
.hv2-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(84vw, 340px);
  background: #fff;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.hv2-drawer[data-open="true"] {
  transform: translateX(0);
}
.hv2-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hv2-line);
}
.hv2-drawer-title {
  font-weight: 600;
  color: var(--hv2-green-dark);
}
.hv2-drawer-list {
  list-style: none;
  margin: 0;
  padding: 8px;
}
.hv2-drawer-list a,
.hv2-drawer-list summary {
  display: block;
  padding: 12px 12px;
  color: var(--hv2-ink);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}
.hv2-drawer-list a:hover,
.hv2-drawer-list summary:hover {
  background: #f2f7f2;
}
.hv2-drawer-list a.is-active {
  color: var(--hv2-green-dark);
  background: #eef5ee;
  font-weight: 700;
}
.hv2-drawer-list details ul {
  list-style: none;
  margin: 0 0 6px;
  padding: 0 0 0 12px;
}
.hv2-drawer-list summary {
  font-weight: 600;
  list-style: none;
}
.hv2-drawer-list summary::-webkit-details-marker {
  display: none;
}
.hv2-drawer-list summary::after {
  content: "▾";
  float: right;
  color: #9a9a9a;
}

/* ---- Returning-Customer banner ------------------------------------------- */
.hv2-rc-banner {
  background: linear-gradient(90deg, #f2faf3, #eaf6ec);
  /* Flush under the nav row's bottom rule (no doubled border). */
  border-bottom: 1px solid var(--hv2-line);
}
.hv2-rc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hv2-rc-copy {
  min-width: 0;
}
.hv2-rc-title {
  margin: 0 0 2px;
  font-weight: 700;
  color: var(--hv2-green-dark);
  font-size: 18px;
}
.hv2-rc-text {
  margin: 0;
  color: #444;
  font-size: 15px;
}
.hv2-rc-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Deep complementary green, rounded-RECTANGLE to match the site's other CTAs
     (.btnx/.questions-button ~3–5px), not a pill. */
  background: var(--hv2-green-deep);
  color: #fff;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 5px;
  font-weight: 600;
  /* Uppercase to match the site's CTA convention (.btnx / .questions-button). */
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}
.hv2-rc-cta:hover,
.hv2-rc-cta:focus-visible {
  background: var(--hv2-green-deep-hover);
  outline: none;
}
.hv2-rc-arrow {
  transition: transform 0.15s ease;
}
.hv2-rc-cta:hover .hv2-rc-arrow {
  transform: translateX(3px);
}

/* Legacy flat reorder banner (header-on, banner-off) - mirror the original
   `.site-banner` spacing: a little top breathing room + 20px below. */
.hv2-legacy-banner {
  padding-top: 20px;
  padding-bottom: 20px;
}
.hv2-legacy-banner a {
  display: block;
  line-height: 0;
}
.hv2-legacy-banner img {
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .hv2-nav-row,
  .hv2-search-desktop {
    display: none;
  }
  .hv2-mobile-controls {
    display: flex;
  }
  .hv2-utility-inner {
    justify-content: center;
  }
  /* Mobile: favour the tappable phone number over the long strapline. Hide the
     strapline + email; centre the phone so it's the one clear call to action. */
  .hv2-strapline {
    display: none;
  }
  .hv2-contact {
    display: flex;
    justify-content: center;
  }
  .hv2-contact-email {
    display: none;
  }
  .hv2-contact-phone {
    font-weight: 600;
  }
  .hv2-logo img {
    height: 40px;
  }
  .hv2-rc-inner {
    justify-content: center;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .hv2-drawer,
  .hv2-overlay {
    display: none;
  }
  /* Mobile controls (burger/search) never show on desktop - nav row does. */
  .hv2-mobile-controls {
    display: none;
  }
}

/* ==========================================================================
   Site search - header typeahead (desktop field + mobile overlay) + the
   /search results page. Scoped .hv2-ta* / .hv2-search*.
   ========================================================================== */

.hv2-ta {
  position: relative;
}
.hv2-ta-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  padding: 0 12px;
}
.hv2-ta-field:focus-within {
  border-color: var(--hv2-green);
  box-shadow: 0 0 0 2px rgba(57, 181, 74, 0.18);
}
.hv2-ta-icon {
  color: #888;
  flex: 0 0 auto;
}
.hv2-ta-field input {
  border: 0;
  outline: none;
  font: inherit;
  font-size: 13px;
  padding: 9px 0;
  background: transparent;
  min-width: 0;
}
.hv2-ta-desktop .hv2-ta-field input {
  width: 240px;
  max-width: 30vw;
}
/* Overlay (mobile) search fills the bar so the placeholder never clips. */
.hv2-ta-overlay .hv2-ta-field {
  width: 100%;
}
.hv2-ta-overlay .hv2-ta-field input {
  flex: 1 1 auto;
  width: auto;
  font-size: 16px; /* >=16px stops iOS zoom-on-focus */
}
/* Placeholder a touch smaller/lighter so it never clips in the pill. */
.hv2-ta-field input::placeholder {
  font-size: 13px;
  color: #999;
}
.hv2-ta-close {
  background: none;
  border: 0;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 4px 6px;
}

/* Dropdown panel */
.hv2-ta-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, 92vw);
  background: #fff;
  border: 1px solid var(--hv2-line);
  border-radius: var(--hv2-radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  padding: 8px;
  z-index: 120;
  max-height: 70vh;
  overflow-y: auto;
}
.hv2-ta-overlay .hv2-ta-panel {
  position: static;
  width: 100%;
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--hv2-line);
  border-radius: 0;
  margin-top: 10px;
  max-height: none;
}
.hv2-ta-note {
  margin: 0;
  padding: 12px;
  color: #777;
  font-size: 14px;
}
.hv2-ta-group + .hv2-ta-group {
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  padding-top: 4px;
}
.hv2-ta-group-label {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9a9a9a;
}
.hv2-ta-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hv2-ta-group a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--hv2-ink);
}
.hv2-ta-group a.is-active,
.hv2-ta-group a:hover {
  background: #f2f7f2;
}
.hv2-ta-title {
  font-size: 15px;
}
.hv2-ta-cat {
  font-size: 12px;
  color: #888;
}
.hv2-ta-all {
  display: block;
  padding: 11px 12px;
  margin-top: 4px;
  border-top: 1px solid #f0f0f0;
  color: var(--hv2-green-dark);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.hv2-ta-all:hover {
  text-decoration: underline;
}

/* Mobile search overlay */
.hv2-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.98);
  z-index: 130;
  padding: 16px;
}
.hv2-search-overlay-inner {
  max-width: 640px;
  margin: 0 auto;
}
.hv2-search-overlay .hv2-ta-field {
  border-width: 2px;
}

/* /search results page */
.hv2-search-page {
  max-width: 820px;
  padding-top: 20px;
  padding-bottom: 40px;
}
.hv2-search-page-form {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.hv2-search-page-form input {
  flex: 1 1 auto;
  padding: 11px 16px;
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
}
.hv2-search-page-form input:focus-visible {
  outline: 2px solid var(--hv2-green);
  outline-offset: 1px;
}
.hv2-search-page-form button {
  flex: 0 0 auto;
  background: var(--hv2-green);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.hv2-search-page-form button:hover {
  background: var(--hv2-green-dark);
}
.hv2-search-empty {
  color: #666;
  font-size: 16px;
}
.hv2-search-group {
  margin-bottom: 28px;
}
.hv2-search-group h2 {
  font-size: 18px;
  color: var(--hv2-green-dark);
  border-bottom: 1px solid var(--hv2-line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.hv2-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hv2-search-results a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--hv2-ink);
}
.hv2-search-results a:hover {
  border-color: var(--hv2-green);
  background: #f7fcf8;
}
.hv2-search-r-title {
  font-size: 16px;
  font-weight: 500;
}
.hv2-search-r-cat {
  font-size: 13px;
  color: #888;
}

/* ==========================================================================
   OTHER SITES (V2) - logo-first cards, no star page-break. Scoped .osv2*.
   ========================================================================== */
/* .osv2 / .fv2 render OUTSIDE the .hv2 wrapper, so they don't inherit its
   custom properties - redeclare the tokens they use here. */
.osv2,
.fv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
}
.osv2 {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  /* Subtle green tint, matching the Returning-Customer banner. */
  background: linear-gradient(90deg, #f2faf3, #eaf6ec);
  border-top: 1px solid var(--hv2-line);
  padding: 44px 0 52px;
}
.osv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.osv2 .osv2-title {
  text-align: center;
  margin: 0;
  /* Match the site's section titles (e.g. "RECENT BLOG POSTS" =
     .block-title-w h2): 24px bold uppercase Roboto Condensed, #444. */
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444444 !important;
}
.osv2-sub {
  text-align: center;
  margin: 6px 0 30px;
  color: #6b7d72;
  font-size: 15px;
}
.osv2-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.osv2-card {
  display: flex;
}
.osv2-card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid #e6ece8;
  border-radius: 10px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.osv2-card-link:hover,
.osv2-card-link:focus-visible {
  border-color: var(--hv2-green);
  box-shadow: 0 14px 30px rgba(20, 122, 62, 0.12);
  transform: translateY(-3px);
  outline: none;
}
.osv2-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: #fafbfa;
  border: 1px solid #eef2ef;
  overflow: hidden;
}
.osv2-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Scope the colours under .osv2 so they beat the legacy `span { color:#444 }`
   (theme-default.css), which loads later at the same specificity. */
/* !important to beat the legacy heading/text colour rules (some use !important)
   that otherwise force these dark. */
.osv2 .osv2-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--hv2-green) !important;
  margin-bottom: 6px;
}
.osv2 .osv2-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #555 !important;
  flex: 1 1 auto;
}
.osv2 .osv2-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hv2-green) !important;
}
.osv2-visit svg {
  transition: transform 0.15s ease;
}
.osv2-card-link:hover .osv2-visit svg {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .osv2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .osv2-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER (V2) - dark deep-green/charcoal. Scoped .fv2*.
   ========================================================================== */
.fv2 {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  /* Deep green-tinted charcoal. */
  background: #16241c;
  color: #cfe0d6;
  font-size: 15px;
  line-height: 1.6;
}
.fv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.fv2-main {
  padding: 46px 0 40px;
}
.fv2-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 40px;
}
/* The legacy theme has `.lgreen p, h2, ul li { color:#000 !important }` and
   `h1..h6 { color:#39b54a !important }` - both bare `h2`/`hN` with !important,
   so our heading needs !important too (plus scoping) to render white. */
.fv2 .fv2-heading,
.fv2 h2.fv2-heading {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff !important;
  padding-bottom: 10px;
  position: relative;
}
.fv2-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--hv2-green);
}
.fv2-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fv2-links li {
  margin-bottom: 9px;
}
.fv2-links a,
.fv2-copy a,
.fv2-address a,
.fv2-contact-line a {
  color: #cfe0d6;
  text-decoration: none;
  transition: color 0.15s ease;
}
.fv2-links a:hover,
.fv2-copy a:hover,
.fv2-contact-line a:hover,
.fv2-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}
/* Scope + !important so the copy isn't dragged to #444 by the legacy `p { color:#444 }`. */
.fv2 .fv2-copy p {
  margin: 0 0 12px;
  color: #cfe0d6 !important;
}
.fv2 .fv2-copy a {
  color: #7fd39a;
  text-decoration: none;
}
.fv2 .fv2-copy a:hover {
  text-decoration: underline;
}
.fv2-address {
  font-style: normal;
  margin: 0 0 14px;
  color: #b9cdc0;
}
.fv2-contact-line {
  margin: 0 0 8px;
}
.fv2-social {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
}
.fv2-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #cfe0d6;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.fv2-social a:hover,
.fv2-social a:focus-visible {
  background: var(--hv2-green);
  color: #fff;
  outline: none;
}
.fv2-social i {
  font-size: 17px;
}

.fv2-bottom {
  background: #0e1712;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 0;
}
.fv2-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fv2-copyright,
.fv2-credit {
  margin: 0;
  font-size: 13px;
  color: #9db3a6;
}
.fv2-credit a {
  color: #7fd39a;
  text-decoration: none;
}
.fv2-credit a:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .fv2-cols { grid-template-columns: 1fr; gap: 30px; }
  .fv2-bottom-inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   BLOG ROLL (V2) - static 4-up card grid. Scoped .blv2*.
   ========================================================================== */
.blv2,
.rvv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
}
.blv2 {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  background: #f4f7f5;
  padding: 44px 0 52px;
}
.blv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.blv2 .blv2-title {
  text-align: center;
  margin: 0;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444444 !important;
}
.blv2-sub {
  text-align: center;
  margin: 6px 0 30px;
  color: #6b7d72;
  font-size: 15px;
}
.blv2-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ---- Carousel (blog roll) ------------------------------------------------- */
.blv2-carousel {
  position: relative;
}
/* The track reuses .blv2-grid but switches to a horizontal scroll-snap row. */
.blv2-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.blv2-track::-webkit-scrollbar {
  display: none;
}
.blv2-track > .blv2-card {
  flex: 0 0 calc((100% - 3 * 24px) / 4); /* 4 across on desktop */
  scroll-snap-align: start;
}
.blv2-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--hv2-green-deep);
  border: 1px solid var(--hv2-line);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.blv2-arrow:hover {
  background: var(--hv2-green);
  color: #fff;
}
.blv2-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.blv2-arrow-prev { left: -10px; }
.blv2-arrow-next { right: -10px; }

@media (max-width: 991px) {
  .blv2-track > .blv2-card { flex-basis: calc((100% - 24px) / 2); } /* 2 across */
}
@media (max-width: 560px) {
  .blv2-track > .blv2-card { flex-basis: 86%; } /* ~1 across, peek next */
  .blv2-arrow { display: none; }
}

.blv2-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6ece8;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.blv2-card:hover {
  border-color: var(--hv2-green);
  box-shadow: 0 14px 30px rgba(20, 122, 62, 0.12);
  transform: translateY(-3px);
}
.blv2-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef2ef;
  line-height: 0;
}
.blv2-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.blv2-card:hover .blv2-image img {
  transform: scale(1.04);
}
.blv2-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 16px 18px;
}
.blv2 .blv2-card-title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}
.blv2 .blv2-card-title a {
  color: var(--hv2-ink) !important;
  text-decoration: none;
}
.blv2 .blv2-card-title a:hover {
  color: var(--hv2-green) !important;
}
.blv2 .blv2-excerpt {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #555 !important;
  flex: 1 1 auto;
}
.blv2-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #f0f2f0;
  padding-top: 12px;
}
.blv2 .blv2-date {
  font-size: 13px;
  color: #8a978f !important;
}
.blv2 .blv2-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hv2-green) !important;
  text-decoration: none;
  white-space: nowrap;
}
.blv2-readmore svg {
  transition: transform 0.15s ease;
}
.blv2-readmore:hover svg {
  transform: translateX(3px);
}
.blv2-all {
  text-align: center;
  margin-top: 30px;
}
.blv2 .blv2-all a {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid var(--hv2-green);
  border-radius: 5px;
  color: var(--hv2-green) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.blv2 .blv2-all a:hover {
  background: var(--hv2-green);
  color: #fff !important;
}

@media (max-width: 991px) {
  .blv2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .blv2-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REVIEWS (V2) - section frame around the Elfsight widget. Scoped .rvv2*.
   ========================================================================== */
.rvv2 {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  background: #ffffff;
  /* Top rule to separate from the green delivery section above. */
  border-top: 1px solid var(--hv2-line);
  padding: 44px 0 40px;
}
.rvv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.rvv2 .rvv2-title {
  text-align: center;
  margin: 0;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444444 !important;
}
.rvv2 .rvv2-sub {
  text-align: center;
  margin: 6px 0 30px;
  color: #6b7d72 !important;
  font-size: 15px;
}
/* The widget wrapper keeps the legacy `reviews` class (the Elfsight button
   legibility fix keys off it), which drags in style-main.css's
   `.reviews{padding:50px 0 50px 0}`. That top 50px pushes the widget away from
   the rvv2 title. Drop the top gap here (higher specificity than .reviews, no
   !important needed); keep the bottom 50px so the next section isn't crowded. */
.rvv2 .rvv2-widget {
  padding-top: 0;
}

/* ==========================================================================
   BLOG PAGE (V2) - /blog index + article. Scoped .bpv2* / .artv2*.
   ========================================================================== */
.bpv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  color: var(--hv2-ink);
}
.bpv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.bpv2-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Dark editorial hero (index) ----------------------------------------- */
.bpv2-hero {
  /* Deep forest green from the approved mockup. */
  background: #123d29;
  color: #cfe0d6;
  padding: 62px 0 56px;
}
/* Hero content spans ~75% of the column (not centred, left-aligned block). */
.bpv2-hero .bpv2-container > * {
  max-width: 75%;
}
.bpv2 .bpv2-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  /* Main site green. */
  color: #39b54a !important;
}
.bpv2 .bpv2-hero-title {
  margin: 0 0 22px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: #ffffff !important;
}
.bpv2 .bpv2-hero-intro,
.bpv2 .bpv2-hero-intro p {
  font-size: 16px;
  line-height: 1.65;
  color: #b9cdc0 !important;
  margin: 0 0 16px;
}
.bpv2 .bpv2-hero-intro a {
  color: #7fd39a !important;
}

/* Hero search - header search field, but a rounded RECTANGLE (5px) to match the
   site's other form fields rather than a full pill. */
.bpv2-hero-search {
  margin-top: 30px;
}
.bpv2-search-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--hv2-line);
  border-radius: 5px;
  padding: 0 12px;
}
.bpv2-search-field:focus-within {
  border-color: var(--hv2-green);
  box-shadow: 0 0 0 2px rgba(57, 181, 74, 0.18);
}
.bpv2-search-icon { color: #888; flex: 0 0 auto; }
.bpv2-search-field input {
  border: 0;
  outline: none;
  /* Explicit family + weight - `font: inherit` was picking up a bold weight
     from the hero context. */
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #1f2a24;
  padding: 9px 0;
  background: transparent;
  width: 240px;
  max-width: 30vw;
}
.bpv2-search-field input::placeholder { font-size: 13px; font-weight: 400; color: #999; }

/* Post grid (index + more-posts strip) - light grey canvas so the white cards
   lift off it. */
.bpv2-grid-section {
  padding: 48px 0 56px;
  background: #f2f4f3;
}
.bpv2-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bpv2-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  /* Slightly darker so cards separate from the grey grid canvas. */
  border: 1px solid #d5ded8;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.bpv2-card:hover {
  border-color: var(--hv2-green);
  box-shadow: 0 14px 30px rgba(20, 122, 62, 0.12);
  transform: translateY(-3px);
}
.bpv2-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eef2ef;
  line-height: 0;
}
.bpv2-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.bpv2-card:hover .bpv2-image img {
  transform: scale(1.04);
}
.bpv2-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px;
}
.bpv2 .bpv2-card-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
}
.bpv2 .bpv2-card-title a {
  color: var(--hv2-ink) !important;
  text-decoration: none;
}
.bpv2 .bpv2-card-title a:hover {
  color: var(--hv2-green) !important;
}
.bpv2 .bpv2-excerpt {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #555 !important;
  flex: 1 1 auto;
}
.bpv2-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #f0f2f0;
  padding-top: 12px;
}
.bpv2 .bpv2-date {
  font-size: 13px;
  color: #8a978f !important;
}
.bpv2 .bpv2-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hv2-green) !important;
  text-decoration: none;
  white-space: nowrap;
}
.bpv2-readmore svg {
  transition: transform 0.15s ease;
}
.bpv2-readmore:hover svg {
  transform: translateX(3px);
}
.bpv2-empty {
  text-align: center;
  color: #666;
  font-size: 16px;
}

/* ---- Article (artv2) ------------------------------------------------------ */
.artv2 {
  padding-top: 22px;
}
.artv2-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #8a978f;
  margin-bottom: 16px;
}
.artv2 .artv2-crumbs a {
  color: var(--hv2-green) !important;
  text-decoration: none;
}
.artv2 .artv2-crumbs a:hover {
  text-decoration: underline;
}
.artv2-crumb-current {
  color: #8a978f;
}
.artv2-head {
  border-bottom: 1px solid var(--hv2-line);
  padding-bottom: 18px;
  margin-bottom: 26px;
}
.artv2 .artv2-title {
  margin: 0 0 6px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 32px;
  line-height: 1.15;
  font-weight: bold;
  color: #333 !important;
}
.artv2 .artv2-date {
  margin: 0;
  font-size: 14px;
  color: #8a978f !important;
}
.artv2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
  padding-bottom: 48px;
}

/* Prose body - scoped typography for the CMS HTML */
.artv2-body {
  font-size: 16px;
  line-height: 1.7;
  color: #3f4a43;
  min-width: 0;
}
.artv2-body h2,
.artv2-body h3,
.artv2-body h4 {
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  color: var(--hv2-green-deep) !important;
  line-height: 1.25;
  margin: 1.6em 0 0.5em;
}
.artv2-body h2 { font-size: 24px; }
.artv2-body h3 { font-size: 20px; }
.artv2-body h4 { font-size: 17px; }
.artv2-body p { margin: 0 0 1.1em; color: #3f4a43 !important; }
.artv2-body a { color: var(--hv2-green) !important; text-decoration: underline; }
.artv2-body a:hover { text-decoration: none; }
.artv2-body ul,
.artv2-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.artv2-body li { margin-bottom: 0.5em; color: #3f4a43 !important; }
.artv2-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }
.artv2-body strong { color: #2a332e; }
.artv2-body blockquote {
  margin: 1.3em 0;
  padding: 6px 0 6px 18px;
  border-left: 4px solid var(--hv2-green);
  color: #56635a;
  font-style: italic;
}

/* Article sidebar */
.artv2-aside {
  position: sticky;
  top: 90px;
  background: #f7faf8;
  border: 1px solid #e6ece8;
  border-radius: 10px;
  padding: 18px;
}
.artv2 .artv2-aside-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hv2-green-deep) !important;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6ece8;
}
.artv2-aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.artv2-aside-list li + li {
  border-top: 1px solid #eef2ef;
}
.artv2-aside-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  text-decoration: none;
}
.artv2 .artv2-aside-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--hv2-ink) !important;
  line-height: 1.35;
}
.artv2-aside-list a:hover .artv2-aside-name {
  color: var(--hv2-green) !important;
}
.artv2 .artv2-aside-date {
  font-size: 12px;
  color: #9aa79f !important;
}
.artv2 .artv2-aside-all {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hv2-green) !important;
  text-decoration: none;
}
.artv2 .artv2-aside-all:hover { text-decoration: underline; }

/* More-posts strip */
.artv2-more { background: #f4f7f5; border-top: 1px solid var(--hv2-line); }
.artv2 .artv2-more-title {
  text-align: center;
  margin: 0 0 26px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #444 !important;
}

@media (max-width: 991px) {
  .bpv2-grid { grid-template-columns: repeat(2, 1fr); }
  .bpv2-hero .bpv2-container > * { max-width: 100%; }
  .artv2-layout { grid-template-columns: 1fr; }
  .artv2-aside { position: static; }
}
@media (max-width: 560px) {
  .bpv2-grid { grid-template-columns: 1fr; }
  .artv2 .artv2-title { font-size: 26px; }
}

/* ==========================================================================
   QUOTE STATS (V2) - white bordered row around the Elfsight quote-count widget.
   Scoped .qsv2*.
   ========================================================================== */
.qsv2 {
  /* Token redeclared: .qsv2 renders outside the .hv2 wrapper so it doesn't
     inherit --hv2-line (an undefined var → invalid border → no border). */
  --hv2-line: #e0e0e0;
  background: #ffffff;
  border-top: 1px solid var(--hv2-line);
  border-bottom: 1px solid var(--hv2-line);
  padding: 26px 0;
}
.qsv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ==========================================================================
   FREE DELIVERY (V2) - full-bleed green bar, white truck icon + copy. .dlv2*.
   ========================================================================== */
.dlv2 {
  --hv2-green: #39b54a;
  background: var(--hv2-green);
  color: #fff;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
}
.dlv2-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 16px;
}
/* Header row: icon + title/tagline inline. */
.dlv2-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.dlv2-icon {
  flex: 0 0 auto;
  line-height: 0;
}
.dlv2-icon img {
  width: 64px;
  height: 64px;
  /* The source PNG is black line-art - render it white. */
  filter: brightness(0) invert(1);
}
.dlv2-headings {
  min-width: 0;
}
.dlv2 .dlv2-title {
  margin: 0;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.1;
  color: #ffffff !important;
}
.dlv2 .dlv2-tagline {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #d8f5e1 !important;
}

/* Body panel: a LIGHTER green card than the bar, with an even lighter soft
   border (matches the reference). */
.dlv2-panel {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 20px 24px;
}
.dlv2 .dlv2-panel,
.dlv2 .dlv2-panel p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #eafbef !important;
}
.dlv2 .dlv2-panel p:last-child { margin-bottom: 0; }
.dlv2 .dlv2-panel a {
  color: #ffffff !important;
  text-decoration: underline;
  font-weight: 600;
}
.dlv2 .dlv2-panel a:hover { text-decoration: none; }

@media (max-width: 640px) {
  .dlv2-icon img { width: 52px; height: 52px; }
  .dlv2 .dlv2-title { font-size: 23px; }
  .dlv2-panel { padding: 16px 18px; }
}

/* ==========================================================================
   CMS CONTENT PAGES (V2) - dark hero + shaded body panels. Scoped .pgv2*.
   ========================================================================== */
.pgv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  color: var(--hv2-ink);
}
.pgv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---- Hero ----------------------------------------------------------------- */
.pgv2-hero {
  background: #123d29;
  color: #cfe0d6;
  padding: 40px 0 52px;
}
.pgv2-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 22px;
  color: #a9cbb9;
}
/* All crumb parts (links, arrow, current) the same legible colour; links only
   highlight on hover. */
.pgv2 .pgv2-crumbs a,
.pgv2 .pgv2-crumbs span {
  color: #a9cbb9 !important;
  text-decoration: none;
}
.pgv2 .pgv2-crumbs a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
.pgv2 .pgv2-eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #39b54a !important;
}
.pgv2 .pgv2-title {
  margin: 0;
  /* Span up to ~75% of the hero so long titles/subtitles use the width. */
  max-width: 75%;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: #ffffff !important;
}
.pgv2 .pgv2-subtitle {
  margin: 16px 0 0;
  max-width: 75%;
  font-size: 16px;
  line-height: 1.6;
  color: #b9cdc0 !important;
}

/* ---- Body ----------------------------------------------------------------- */
.pgv2-body {
  background: #fff;
  padding: 52px 0 60px;
}
/* Single-column body - full-width container (left edge lines up with the hero
   title). Prose uses the FULL column with just a 20px gutter each side (no
   readable-width cap); the hero title/subtitle keep their 75% cap. */
.pgv2-single { max-width: 1200px; padding-left: 20px; padding-right: 20px; }
.pgv2-single .pgv2-prose { max-width: none; }
.pgv2-split {
  display: grid;
  /* 60 / 40 split (matches the reference) - TEXT-TEXT default. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 44px;
  align-items: start;
}
/* TEXT-IMAGE uses an even 50 / 50 split so the image column matches the text. */
.pgv2-split-even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.pgv2-image-only {
  max-width: 900px;
  text-align: center;
}

/* Prose (rich CMS HTML) - same treatment as the article body. */
.pgv2-prose {
  font-size: 16px;
  line-height: 1.7;
  color: #3f4a43;
  min-width: 0;
}
.pgv2-prose h2,
.pgv2-prose h3,
.pgv2-prose h4 {
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  color: var(--hv2-ink) !important;
  line-height: 1.2;
  margin: 0 0 0.6em;
}
.pgv2-prose h2 { font-size: 27px; }
.pgv2-prose h3 { font-size: 21px; margin-top: 1.4em; }
.pgv2-prose h4 { font-size: 17px; margin-top: 1.3em; }
.pgv2-prose p { margin: 0 0 1.1em; color: #3f4a43 !important; }
.pgv2-prose a { color: var(--hv2-green-deep) !important; text-decoration: underline; }
.pgv2-prose a:hover { text-decoration: none; }
.pgv2-prose strong { color: #2a332e; }
/* Both ordered and unordered lists → green checkmarks (matches the site
   convention, legacy .primary-content ul li::before). The CMS exports process
   steps as <ol> from the Quill editor; render them as ticked items too, not
   raw numbers. */
.pgv2-prose ul,
.pgv2-prose ol {
  list-style: none;
  margin: 0 0 1.2em;
  padding-left: 4px;
}
.pgv2-prose ul li,
.pgv2-prose ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #3f4a43 !important;
}
.pgv2-prose ul li::before,
.pgv2-prose ol li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.4;
  color: var(--hv2-green) !important;
}
/* Quill leaves an empty <span class="ql-ui"> marker inside each <li>; hide it
   so it doesn't add stray inline space before the tick text. */
.pgv2-prose li .ql-ui { display: none; }
.pgv2-prose img { max-width: 100%; height: auto; border-radius: 8px; }

/* Shaded panel (right column / banner) - light green card. */
.pgv2-panel {
  background: #f2faf4;
  border: 1px solid #d9ece1;
  border-radius: 14px;
  padding: 22px;
}
.pgv2-panel-image { text-align: center; }
.pgv2-panel-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
/* TRADE right column: standalone product banners (not a card) linking to each
   category, then a CTA. Transparent panel so the banners read full-width. */
.pgv2-panel-trade {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pgv2-trade-card {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pgv2-trade-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.pgv2-trade-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.pgv2-trade-cta {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.5;
}
.pgv2-trade-cta strong {
  color: var(--hv2-green-deep) !important;
}

/* TRADE hero banner (red "NCR TRADE ALERT") - replaces the text subtitle. */
.pgv2 .pgv2-trade-alert {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 20px 0 0;
  border-radius: 6px;
}

/* Panel-as-text: recolour the CMS HTML for the light-green card. */
.pgv2-panel-text {
  font-size: 15px;
  line-height: 1.6;
  color: #3f4a43;
}
.pgv2-panel-text h2,
.pgv2-panel-text h3 {
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hv2-green-deep) !important;
  font-size: 16px;
  margin: 0 0 12px;
}
.pgv2-panel-text p { margin: 0 0 10px; color: #3f4a43 !important; }
.pgv2-panel-text p:last-child { margin-bottom: 0; }
.pgv2-panel-text ul { list-style: none; margin: 0; padding: 0; }
.pgv2-panel-text li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: #3f4a43 !important;
}
.pgv2-panel-text li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--hv2-green);
  font-weight: bold;
}
.pgv2-panel-text a { color: var(--hv2-green-deep) !important; }

.pgv2-panel-banner { padding: 12px; }
.pgv2-panel-banner img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.pgv2-image-cta { margin-top: 26px; }
.pgv2 .pgv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hv2-green-deep);
  color: #fff !important;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: background-color 0.18s ease;
}
.pgv2 .pgv2-cta:hover { background: #0f6031; }
.pgv2-cta svg { transition: transform 0.15s ease; }
.pgv2 .pgv2-cta:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .pgv2-split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .pgv2 .pgv2-title { font-size: 30px; }
  .pgv2-hero { padding: 30px 0 40px; }
}

/* ==========================================================================
   CONTACT (V2) - hero (shared .pgv2*) + form / address / map. Scoped .ctv2*.
   ========================================================================== */
/* CSS vars don't inherit outside .hv2, and .ctv2 also carries .pgv2, but
   redeclare the greens here so the ctv2 rules are self-contained. */
.ctv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-green-deep-hover: #0f6031;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
}
.ctv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---- Enquiry form card ---------------------------------------------------- */
.ctv2-form-card {
  background: #ffffff;
  border: 1px solid var(--hv2-line);
  border-radius: 16px;
  padding: 30px 30px 32px;
  box-shadow: 0 10px 30px rgba(18, 61, 41, 0.06);
}
.ctv2-form-title {
  margin: 0 0 8px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 22px;
  color: var(--hv2-ink) !important;
}
.ctv2-form-intro {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #3f4a43 !important;
}
.ctv2-form-intro a,
.ctv2-success a,
.ctv2-line a,
.ctv2-address a {
  color: var(--hv2-green-deep) !important;
  text-decoration: none;
}
/* Phone numbers highlight in the primary site green (email stays deeper). */
.ctv2 a[href^="tel:"] {
  color: var(--hv2-green) !important;
}
.ctv2-form-intro a:hover,
.ctv2-line a:hover { text-decoration: underline; }
.ctv2-field { margin-bottom: 16px; }
.ctv2-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #55605a !important;
}
.ctv2-field input,
.ctv2-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--hv2-ink);
  background: #f7faf8;
  border: 1px solid #d5e2da;
  border-radius: 10px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.ctv2-field textarea { min-height: 150px; resize: vertical; }
/* Beat the unscoped legacy placeholder rules (contact.css / style-main.css force
   16px) so placeholder text matches the 15px field/body text. Both the modern
   ::placeholder and the -webkit- prefix are needed to override the leaked
   vendor-prefixed rules. */
.ctv2-field input::placeholder,
.ctv2-field textarea::placeholder {
  font-size: 15px;
  font-style: normal;
  color: #8a978f;
  opacity: 1;
}
.ctv2-field input::-webkit-input-placeholder,
.ctv2-field textarea::-webkit-input-placeholder {
  font-size: 15px;
  font-style: normal;
  color: #8a978f;
}
.ctv2-field input:focus,
.ctv2-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--hv2-green);
  box-shadow: 0 0 0 3px rgba(57, 181, 74, 0.15);
}
.ctv2-turnstile { margin: 4px 0 18px; }
.ctv2-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.ctv2-submit:hover { background: var(--hv2-green-deep); }
.ctv2-success {
  margin: 0;
  padding: 16px 18px;
  background: #eef7f0;
  border: 1px solid #cfe6d6;
  border-radius: 10px;
  color: #24502f !important;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Address / phone / email + map --------------------------------------- */
.ctv2-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ctv2-details {
  background: #f2faf4;
  border: 1px solid #d9ece1;
  border-radius: 16px;
  padding: 26px 28px;
}
.ctv2-info-title {
  margin: 0 0 14px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 20px;
  color: var(--hv2-green) !important;
}
.ctv2-address {
  font-style: normal;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #3f4a43 !important;
}
.ctv2-line {
  margin: 0 0 6px;
  font-size: 16px;
  color: #3f4a43 !important;
}
.ctv2-line span { color: var(--hv2-green); }
.ctv2-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hv2-line);
  /* Fill the remaining column height next to the form; min keeps it usable. */
  min-height: 340px;
  flex: 1 1 auto;
}
.ctv2-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; }

@media (max-width: 900px) {
  .ctv2-grid { grid-template-columns: 1fr; gap: 28px; }
  .ctv2-map { min-height: 300px; }
}

/* ==========================================================================
   RE-ORDER (V2) - hero (.pgv2*) + magic-link card + manual reorder card.
   Scoped .rov2*. And MY QUOTES (.mqv2*) below.
   ========================================================================== */
.rov2,
.mqv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-green-deep-hover: #0f6031;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
}
.rov2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.rov2-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--hv2-line);
  border-radius: 16px;
  padding: 28px 30px 30px;
  box-shadow: 0 10px 30px rgba(18, 61, 41, 0.06);
}
/* The magic-link card leads - green accent + brand-tinted panel. */
.rov2-magic {
  background: #f2faf4;
  border-color: #d9ece1;
}
.rov2-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--hv2-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.rov2-card-title {
  margin: 4px 0 8px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 22px;
  color: var(--hv2-ink) !important;
}
.rov2-card-intro {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #3f4a43 !important;
}
.rov2-form { margin: 0; }
.rov2-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rov2-field { margin-bottom: 16px; }
.rov2-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #55605a !important;
}
.rov2-field input,
.rov2-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--hv2-ink);
  background: #ffffff;
  border: 1px solid #d5e2da;
  border-radius: 10px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.rov2-magic .rov2-field input { background: #ffffff; }
.rov2-field textarea { min-height: 96px; resize: vertical; }
.rov2-field input::placeholder,
.rov2-field textarea::placeholder {
  font-size: 15px;
  font-style: normal;
  color: #8a978f;
  opacity: 1;
}
.rov2-field input::-webkit-input-placeholder,
.rov2-field textarea::-webkit-input-placeholder {
  font-size: 15px;
  font-style: normal;
  color: #8a978f;
}
.rov2-field input:focus,
.rov2-field textarea:focus {
  outline: none;
  border-color: var(--hv2-green);
  box-shadow: 0 0 0 3px rgba(57, 181, 74, 0.15);
}
.rov2-turnstile { margin: 4px 0 16px; }
.rov2-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.rov2-submit:hover { background: var(--hv2-green-deep); }
.rov2-submit:disabled { opacity: 0.6; cursor: default; }
/* The secondary (manual) card uses the deep green so the magic link leads. */
.rov2-submit-alt { background: var(--hv2-green-deep); }
.rov2-submit-alt:hover { background: var(--hv2-green-deep-hover); }
.rov2-sent {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #24502f !important;
}
.rov2-link-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--hv2-green-deep) !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
}
.rov2-error {
  margin: 0 0 14px;
  font-size: 14px;
  color: #b23b3b !important;
}

@media (max-width: 900px) {
  .rov2-grid { grid-template-columns: 1fr; gap: 26px; }
  .rov2-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- MY QUOTES (V2) - magic-link landing / quote list. Scoped .mqv2*. ----- */
.mqv2-body { max-width: 900px; }
.mqv2-status {
  font-size: 16px;
  color: #3f4a43 !important;
  padding: 20px 0;
}
.mqv2-list { display: flex; flex-direction: column; gap: 16px; }
.mqv2-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--hv2-line);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 6px 18px rgba(18, 61, 41, 0.05);
}
.mqv2-row-main { min-width: 0; flex: 1 1 260px; }
.mqv2-row-title {
  margin: 0 0 8px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 19px;
  color: var(--hv2-ink) !important;
}
.mqv2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
}
.mqv2-meta div { display: flex; gap: 6px; align-items: baseline; }
.mqv2-meta dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #7a857f !important;
}
.mqv2-meta dd { margin: 0; font-size: 14px; color: #3f4a43 !important; font-weight: 600; }
.mqv2-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mqv2-btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mqv2-btn-primary { background: var(--hv2-green); color: #fff !important; }
.mqv2-btn-primary:hover { background: var(--hv2-green-deep); }
.mqv2-btn-ghost {
  background: #fff;
  color: var(--hv2-green-deep) !important;
  border: 1px solid #cfe0d6;
}
.mqv2-btn-ghost:hover { background: #eef7f0; border-color: var(--hv2-green); }
.mqv2-btn:disabled { opacity: 0.6; cursor: default; }
.mqv2-done { color: var(--hv2-green-deep) !important; font-weight: 700; font-size: 14px; }
.mqv2-row-error { color: #b23b3b !important; font-size: 13px; width: 100%; }
.mqv2-panel {
  background: #f2faf4;
  border: 1px solid #d9ece1;
  border-radius: 16px;
  padding: 30px 32px;
  max-width: 620px;
}
.mqv2-panel-title {
  margin: 0 0 12px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 22px;
  color: var(--hv2-green-deep) !important;
}
.mqv2-panel-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #3f4a43 !important;
}
.mqv2-panel .mqv2-btn { margin-top: 4px; }

@media (max-width: 560px) {
  .mqv2-actions { width: 100%; }
  .mqv2-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   HOME (V2) - lighter hero + framed products + 3-step flow. Scoped .hmv2*.
   ========================================================================== */
.hmv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-green-deep-hover: #0f6031;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
}

/* ---- Hero: shares the dark .pgv2-hero (eyebrow/title/subtitle already styled
   for dark). Just the CTA row underneath, on the dark bg. -------------------- */
.hmv2-hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 26px;
}
.hmv2 .hmv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hmv2 .hmv2-cta:hover { background: #2fa03c; }
.hmv2 .hmv2-cta svg { transition: transform 0.15s ease; }
.hmv2 .hmv2-cta:hover svg { transform: translateX(3px); }
/* Ghost link sits on the dark hero - light text. */
.hmv2 .hmv2-cta-ghost {
  color: #cfe0d6 !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.hmv2 .hmv2-cta-ghost:hover { color: #fff !important; text-decoration: underline; }

/* ---- Sections ------------------------------------------------------------- */
.hmv2-section {
  background: #fff;
  padding: 52px 0;
}
.hmv2-products-section {
  background: #f7faf8;
  border-top: 1px solid #eef2f0;
}
.hmv2-section-title {
  text-align: center;
  margin: 0 0 6px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 26px;
  color: var(--hv2-ink) !important;
}
.hmv2-section-sub {
  text-align: center;
  margin: 0 0 34px;
  font-size: 15px;
  color: #6b7d72 !important;
}

/* ---- Intro (left) + How It Works vertical flow (right) -------------------- */
.hmv2-intro-section {
  border-bottom: 1px solid #eef2f0;
}
.hmv2-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.hmv2-intro {
  font-size: 16px;
  line-height: 1.8;
  color: #3f4a43;
}
.hmv2-intro p {
  margin: 0 0 1.1em;
  color: #3f4a43 !important;
}
.hmv2-intro p:last-child { margin-bottom: 0; }
.hmv2-intro a {
  color: var(--hv2-green-deep) !important;
  text-decoration: underline;
}
.hmv2-intro a:hover { text-decoration: none; }
/* Right column: "How It Works" as a vertical numbered flow. */
.hmv2-steps-col {
  position: sticky;
  top: 96px;
  background: #f7faf8;
  border: 1px solid #eef2f0;
  border-radius: 16px;
  padding: 28px 26px 24px;
}
.hmv2-steps-heading {
  margin: 0 0 20px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 20px;
  color: var(--hv2-ink) !important;
}

/* ---- Products (framed cards around the infographic PNGs) ------------------ */
.hmv2-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.hmv2-product {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--hv2-line);
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hmv2-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(18, 61, 41, 0.1);
  border-color: #cfe0d6;
}
.hmv2-product img {
  display: block;
  width: 100%;
  height: auto;
}
/* The options tile is a button (click to enlarge) - reset button chrome. */
button.hmv2-product {
  position: relative;
  flex-direction: column;
  gap: 10px;
  font: inherit;
  text-align: center;
}
.hmv2-enlarge-hint {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--hv2-green-deep);
}

/* ---- How It Works: vertical numbered flow (badge left, body right) -------- */
.hmv2-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hmv2-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding-bottom: 30px;
  /* Staggered fade-up on load (delay set inline per step). */
  opacity: 0;
  transform: translateY(12px);
  animation: hmv2-step-in 0.5s ease forwards;
}
.hmv2-step:last-child { padding-bottom: 0; }
/* Vertical connector line running through the badge centres. */
.hmv2-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 80px;
  bottom: 4px;
  width: 2px;
  background: #d5e6dc;
}
@keyframes hmv2-step-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hmv2-step { animation: none; opacity: 1; transform: none; }
}
/* Circular badge: green ring, icon centre, ordinal chip top-right. */
.hmv2-step-badge {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef7f0;
  border: 2px solid #cfe6d6;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.hmv2-step:hover .hmv2-step-badge {
  background: #e4f2e9;
  border-color: var(--hv2-green);
}
/* Provided line-art PNG icons (black silhouette, transparent bg) tinted to the
   deep brand green via CSS mask - the icon shape masks a solid green fill. */
.hmv2-step-badge .hmv2-step-icon {
  display: block;
  width: 44px;
  height: 44px;
  background: var(--hv2-green-deep);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.hmv2-step-num {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--hv2-green);
  color: #fff;
  border: 2px solid #fff;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(18, 61, 41, 0.28);
}
.hmv2-step-body { padding-top: 3px; }
.hmv2-step-title {
  margin: 0 0 5px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 16px;
  color: var(--hv2-ink) !important;
}
.hmv2-step-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #3f4a43 !important;
}
@media (prefers-reduced-motion: reduce) {
  .hmv2-step-arrow { animation: none; }
}

/* ---- Click-to-enlarge lightbox ------------------------------------------- */
.hmv2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 26, 18, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hmv2-lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  /* The options graphic is a transparent PNG - white card so it reads. */
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.hmv2-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}

@media (max-width: 900px) {
  .hmv2-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hmv2-hero { padding: 40px 0 44px; }
  /* Stack: intro on top, How It Works full-width below (not sticky). */
  .hmv2-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .hmv2-steps-col { position: static; top: auto; }
}
@media (max-width: 480px) {
  .hmv2-products { grid-template-columns: 1fr; }
}

/* ==========================================================================
   QUOTE TOOL (V2) - title-only green bar + subtitle card + Start CTA reveal.
   Scoped .qtv2*. The form markup itself is the legacy #dynamicForm, unchanged.
   ========================================================================== */
.qtv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-green-deep-hover: #0f6031;
  --hv2-ink: #282828;
}
/* Green bar carries only the title now: match the "Any Questions" bar
   (.questions) - tight 10px padding, ~20px centred title, no bottom margin. */
.qtv2-bar {
  padding: 10px 0;
}
.qtv2-bar .quoteHeader {
  font-size: 20px;
  margin: 0 !important;
  padding: 9px 0;
  line-height: 1.3;
}

/* Subtitle + Start CTA inside the white card. */
.qtv2-intro {
  text-align: center;
  padding: 8px 0 4px;
}
.qtv2-subtitle {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
  color: #3f4a43 !important;
}
.qtv2-intro[data-started="true"] .qtv2-subtitle {
  margin-bottom: 26px;
}
.qtv2-start {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  cursor: pointer;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 34px;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.qtv2-start:hover { background: var(--hv2-green-deep); }
.qtv2-start svg { transition: transform 0.15s ease; }
.qtv2-start:hover svg { transform: translateX(3px); }

/* The form is collapsed (hidden) until the CTA reveals it. */
#qtv2-form-wrap[data-collapsed] {
  display: none;
}

/* ==========================================================================
   CATEGORY GRID (V2) - GRID-type category page: dark hero + breadcrumbs
   (shared .pgv2-hero) + intro + modern rounded card grid. Scoped .lsv2*/.cgv2*.
   ========================================================================== */
.lsv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
}
/* Multi-level breadcrumb (Home > root > current). */
/* Multi-level crumb wrapper (used on category .lsv2 AND form .fpv2 pages) - the
   [separator + label] pair; own gap so the arrow doesn't hug the next label. */
.pgv2-crumbs .lsv2-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pgv2-crumbs .lsv2-crumb a,
.pgv2-crumbs .lsv2-crumb span {
  color: #a9cbb9 !important;
  text-decoration: none;
}
.pgv2-crumbs .lsv2-crumb a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Intro prose beneath the hero (light section). */
.lsv2-intro-section {
  background: #fff;
  padding: 40px 0 8px;
}
/* Full-width, left-aligned intro with a solid primary-green bar down the left
   (no centred max-width cap - that left a disjointed wide gutter). */
.lsv2-intro {
  font-size: 16px;
  line-height: 1.75;
  color: #3f4a43;
  border-left: 4px solid var(--hv2-green);
  padding-left: 22px;
}
.lsv2-intro p { margin: 0 0 1.1em; color: #3f4a43 !important; }
.lsv2-intro p:last-child { margin-bottom: 0; }
.lsv2-intro a {
  color: var(--hv2-green-deep) !important;
  text-decoration: underline;
}
.lsv2-intro a:hover { text-decoration: none; }

/* Modern rounded card grid (keeps each image's baked-in label). */
.cgv2-section {
  background: #fff;
  padding: 34px 0 60px;
}
.cgv2-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.cgv2-tile {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(18, 61, 41, 0.08);
  border: 1px solid #eef2f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cgv2-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(18, 61, 41, 0.16);
}
.cgv2-tile a {
  display: block;
  overflow: hidden;
  line-height: 0;
}
.cgv2-tile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}
.cgv2-tile:hover img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .cgv2-tile,
  .cgv2-tile img { transition: none; }
  .cgv2-tile:hover { transform: none; }
  .cgv2-tile:hover img { transform: none; }
}

/* ---- TYPE_COL button cards: photo (no baked label) + green name button ---- */
.cgv2-card {
  background: #fff;
  border: 1px solid #eef2f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(18, 61, 41, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cgv2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(18, 61, 41, 0.16);
}
.cgv2-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.cgv2-card-media {
  display: block;
  padding: 22px 22px 8px;
  overflow: hidden;
}
.cgv2-card-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}
.cgv2-card:hover .cgv2-card-media img {
  transform: scale(1.04);
}
.cgv2-card-btn {
  margin: auto 18px 20px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  line-height: 1.35;
  transition: background 0.15s ease;
}
.cgv2-card:hover .cgv2-card-btn {
  background: var(--hv2-green-deep);
}
@media (prefers-reduced-motion: reduce) {
  .cgv2-card,
  .cgv2-card-media img { transition: none; }
  .cgv2-card:hover { transform: none; }
  .cgv2-card:hover .cgv2-card-media img { transform: none; }
}

/* ---- FORMS_ROOT cards: SAMPLE preview + name overlay strip + quote button --- */
.fgv2-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eef2f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(18, 61, 41, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fgv2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(18, 61, 41, 0.16);
}
.fgv2-media {
  position: relative;
  display: block;
  background: #f7faf8;
  /* Fixed A4-portrait box so every card is the same height whatever the source
     ratio. Equal inset padding gives the form's own border breathing room off
     the card edge (and keeps it clear of the rounded corners). A4 previews
     (315x445 ~= 0.707) still fill the padded area; a genuinely non-A4 preview
     (0.472 tall pad) letterboxes centred instead of breaking the row. */
  aspect-ratio: 210 / 297;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}
.fgv2-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.35s ease;
}
.fgv2-card:hover .fgv2-media img { transform: scale(1.03); }
/* Diagonal SAMPLE watermark over the preview. */
.fgv2-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: 6px;
  color: rgba(40, 40, 40, 0.16);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
/* Form name as a gradient overlay strip along the image bottom. */
.fgv2-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 18px 14px;
  background: linear-gradient(to top, rgba(18, 61, 41, 0.9) 12%, rgba(18, 61, 41, 0) 100%);
  color: #fff;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.25;
}
.fgv2-btn {
  margin: 0;
  padding: 14px 16px;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}
.fgv2-card:hover .fgv2-btn { background: var(--hv2-green-deep); }
@media (prefers-reduced-motion: reduce) {
  .fgv2-card,
  .fgv2-media img { transition: none; }
  .fgv2-card:hover { transform: none; }
  .fgv2-card:hover .fgv2-media img { transform: none; }
}

@media (max-width: 900px) {
  .cgv2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 560px) {
  .cgv2-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FORM PAGE (V2) - form detail + template: dark hero (.pgv2*) + modern 3-col
   (prose cards + centred image card + V2 actions/promo). Scoped .fpv2*.
   ========================================================================== */
.fpv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-green-deep-hover: #0f6031;
  --hv2-ink: #282828;
  --hv2-line: #e0e0e0;
}
.fpv2-body { background: #fff; }
.fpv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
/* Prose panels: soft-green card, recolour the CMS HTML for it. */
.fpv2-prose {
  background: #f2faf4;
  border: 1px solid #d9ece1;
  border-radius: 16px;
  padding: 26px 28px;
  font-size: 15px;
  line-height: 1.65;
  color: #3f4a43;
}
.fpv2-prose :is(h1, h2, h3) {
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  color: var(--hv2-green-deep) !important;
  margin: 0 0 12px;
  line-height: 1.2;
}
.fpv2-prose h1 { font-size: 24px; }
.fpv2-prose h2 { font-size: 20px; margin-top: 1em; }
.fpv2-prose h3 { font-size: 17px; margin-top: 1em; }
.fpv2-prose p { margin: 0 0 1em; color: #3f4a43 !important; }
.fpv2-prose p:last-child { margin-bottom: 0; }
.fpv2-prose a { color: var(--hv2-green-deep) !important; text-decoration: underline; }
.fpv2-prose ul { list-style: none; margin: 0 0 1em; padding: 0; }
.fpv2-prose li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  color: #3f4a43 !important;
}
.fpv2-prose li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: var(--hv2-green) !important;
}

/* Centre column: image card + actions + promo. */
.fpv2-media-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fpv2-media {
  position: relative;
  background: #f7faf8;
  border: 1px solid var(--hv2-line);
  border-radius: 16px;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(18, 61, 41, 0.06);
}
.fpv2-media img {
  display: block;
  width: 100%;
  height: auto;
}
.fpv2-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: 6px;
  color: rgba(40, 40, 40, 0.14);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
/* Primary action (Download / View Template). */
.fpv2 .fpv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.fpv2 .fpv2-btn:hover { background: var(--hv2-green-deep); }
/* Red promo (modernised - rounded, keeps the red accent so the offer stands out). */
/* Amber/gold highlight card - a warm accent distinct from all the green, so the
   free-template offer stands out without the old red clash. */
.fpv2-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff6e0;
  border: 1px solid #f2d493;
  border-left: 4px solid #e6a51e;
  border-radius: 12px;
  padding: 15px 18px;
  line-height: 1.35;
}
.fpv2-promo-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: #d0900f;
}
.fpv2-promo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fpv2-promo-text strong { font-size: 15px; color: #7a5107; }
.fpv2-promo-text span { font-size: 13px; color: #8a6a2c; }
.fpv2-promo-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #55605a !important;
  text-align: center;
}

@media (max-width: 900px) {
  .fpv2-grid { grid-template-columns: 1fr; gap: 22px; }
  /* Image + actions first on mobile, then the prose panels. */
  .fpv2-media-col { order: -1; }
}

/* ==========================================================================
   DOWNLOAD MODAL (V2) - purpose-built form-page download popup. Scoped
   #downloadModal.dmv2. The JS toggles display:block + .in + a .modal-backdrop
   and binds the #fdl-* ids; this is clean V2 markup (not the Bootstrap grid).
   ========================================================================== */
#downloadModal.dmv2 {
  --hv2-green: #39b54a;
  --hv2-green-deep: #147a3e;
  --hv2-ink: #282828;
  position: fixed;
  inset: 0;
  z-index: 1050;
  padding: 24px;
  overflow-y: auto;
  background: rgba(10, 26, 18, 0.55);
}
#downloadModal.dmv2 .modal-dialog {
  max-width: 560px;
  width: 100%;
  margin: 40px auto;
}
.dmv2-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.dmv2-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: #dfece4;
  opacity: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dmv2-close:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* Header: dark-green band, icon inline with the title, white context line. */
.dmv2-head {
  background: #123d29;
  padding: 24px 30px 22px;
}
.dmv2-head-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.dmv2-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--hv2-green);
  color: #fff;
}
.dmv2-title {
  margin: 0;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 22px;
  color: #ffffff !important;
}
.dmv2-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #cfe0d6 !important;
}

.dmv2-body { padding: 24px 30px 28px; }
.dmv2-form { margin: 0; }
.dmv2-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dmv2-field { margin-bottom: 16px; }
.dmv2-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #55605a;
}
.dmv2-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--hv2-ink);
  background: #f7faf8;
  border: 1px solid #d5e2da;
  border-radius: 10px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.dmv2-field input:focus {
  outline: none;
  background: #fff;
  border-color: var(--hv2-green);
  box-shadow: 0 0 0 3px rgba(57, 181, 74, 0.15);
}
/* Consent: checkbox + label on one line, label no longer lost. */
.dmv2-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #55605a;
  cursor: pointer;
}
.dmv2-consent input {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--hv2-green);
}
.dmv2-turnstile { margin: 0 0 18px; }
.dmv2-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 10px;
  transition: background 0.15s ease;
  text-shadow: none;
}
.dmv2-submit:hover { background: var(--hv2-green-deep); }
.dmv2-success {
  text-align: center;
  padding: 8px 0 4px;
}
.dmv2-success p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #24502f;
}

@media (max-width: 560px) {
  #downloadModal.dmv2 { padding: 12px; }
  #downloadModal.dmv2 .modal-dialog { margin: 16px auto; }
  .dmv2-row { grid-template-columns: 1fr; gap: 0; }
  .dmv2-head { padding: 22px 22px 18px; }
  .dmv2-body { padding: 22px 22px 24px; }
}