/* ==========================================================================
   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;
  /* Darkest tone - the utility bar. Same value as the page hero (.pgv2-hero) so
     the top of the page and the hero bookend the white logo row. */
  --hv2-green-darkest: #123d29;
  /* Light green for accents sitting ON the darkest tone - the deep green used
     elsewhere is invisible against it. */
  --hv2-green-on-dark: #7fd694;
  --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 {
  /* Dark green (= the hero tone) rather than the legacy brand green: the brand
     green now belongs to the nav row, and the dark top bar bookends the hero so
     the white logo row reads as a deliberate break instead of a stripe. */
  background: var(--hv2-green-darkest);
  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: a LIGHT green accent - the bar is dark green
   now, so the old deep-green accent would be all but invisible on it. */
.hv2-contact a svg {
  color: var(--hv2-green-on-dark);
  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;
}

/* Sentinel for the sticky-header state (HeaderStickyState). The negative margin
   cancels its height, so it costs no layout. */
.hv2-sticky-sentinel {
  height: 1px;
  margin-bottom: -1px;
}

/* Desktop: a larger logo while the page is at the top, easing back to the
   compact size once the header pins - the client wanted more presence on
   arrival without giving up vertical space while scrolling.
   64px is under the asset's native 80px, so it never upscales.
   Left alone below 1024px: the mobile header is already compact and the extra
   height would cost real estate that matters more on a phone. */
@media (min-width: 1024px) {
  .hv2-brand-row {
    min-height: 92px;
    transition: min-height 0.22s ease;
  }
  .hv2-logo img {
    height: 64px;
    transition: height 0.22s ease;
  }
  .hv2-main[data-stuck] .hv2-brand-row {
    min-height: 72px;
  }
  .hv2-main[data-stuck] .hv2-logo img {
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hv2-brand-row,
  .hv2-logo img {
    transition: none;
  }
}

/* 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. */
/* Brand green band. The grey hairlines are dropped - against green they read as
   a seam, and the colour change is its own separation. */
.hv2-nav-row {
  background: var(--hv2-green);
  border-top: 1px solid var(--hv2-green);
  border-bottom: 1px solid var(--hv2-green-dark);
}
/* 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;
  /* White on the green band. The caret inherits currentColor, so it follows. */
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
/* On green, a translucent white wash reads as a hover state at any nav width -
   a fixed tint would band against the bar. */
.hv2-nav-link:hover,
.hv2-nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  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;
}
/* The caret is a <span>, so the legacy `p,a,span { color:#444 }`
   (theme-default.css, same specificity but loaded after us) captures it and the
   currentColor triangle renders dark grey. Harmless while the nav text was dark;
   now the bar is green it would show as a grey pip. Force it back to the link
   colour with a compound selector that outranks the bare `span`. */
.hv2-nav-link .hv2-caret {
  color: inherit;
}

.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. */
/* Active: the old green-on-white cue is invisible on the green band, so the
   current page is marked with a solid white chip instead. */
.hv2-nav-link.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  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;
}
/* "Easy Re-Order" flash. Sits first in the strip so the eye reads a badge
   before it reads text - the banner was being mistaken for article copy. */
.hv2-rc-flash {
  flex: 0 0 auto;
  width: 144px;
  height: 62px;
  display: block;
}
.hv2-rc-flash-easy,
.hv2-rc-flash-main {
  font-family: "Roboto Condensed", "Roboto", system-ui, sans-serif;
  font-weight: 700;
}
.hv2-rc-flash-easy {
  font-size: 22px;
  letter-spacing: 1.2px;
  fill: #2f9c3f;
}
.hv2-rc-flash-main {
  font-size: 24px;
  letter-spacing: 0.6px;
  fill: #fff;
}
.hv2-rc-copy {
  min-width: 0;
  /* Take the free space so the CTA stays hard right once the flash is added. */
  flex: 1 1 auto;
}
.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;
}

/* Tighten the link rhythm on desktop only. Quick Links carries 10 items against
   two short columns, so at the base spacing it overran them by ~100px and set
   the footer's height on its own. Below 860px the columns stack - there is
   nothing to balance there, and the links are touch targets - so the roomier
   base spacing stays. */
@media (min-width: 861px) {
  .fv2-links li {
    margin-bottom: 3px;
    line-height: 1.45;
  }
}

@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;
}
/* ---- Expandable "Full specification" panel ------------------------------- */
/* flex-basis 100% inside the flex .mqv2-row drops these onto their own line
   under the summary + action buttons. */
.mqv2-detail-toggle {
  flex: 1 0 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 0;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px dashed #e3ebe6;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--hv2-green-deep) !important;
}
.mqv2-detail-toggle:hover { color: var(--hv2-green-deep-hover) !important; }
.mqv2-detail-caret { transition: transform 0.18s ease; }
.mqv2-detail-toggle[aria-expanded="true"] .mqv2-detail-caret {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .mqv2-detail-caret { transition: none; }
}
.mqv2-detail {
  flex: 1 0 100%;
  background: #f7faf8;
  border: 1px solid #e9f0eb;
  border-radius: 10px;
  padding: 16px 18px;
}
.mqv2-detail-head {
  margin: 0 0 12px;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 14px;
  color: var(--hv2-ink) !important;
}
.mqv2-detail-note { margin: 0; font-size: 14px; color: #6b7d72 !important; }
/* auto-fit so a short spec does not leave three empty columns. */
.mqv2-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 24px;
  margin: 0;
}
.mqv2-detail-grid div {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.mqv2-detail-grid dt {
  flex: 0 0 auto;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #7a857f !important;
}
.mqv2-detail-grid dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #3f4a43 !important;
  word-break: break-word;
}
.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. */
/* Secondary line beside the hero CTA. The link sits INSIDE a sentence now, so
   it is underlined by default - without that it reads as plain prose and the
   only clue it's clickable is hovering it. */
.hmv2 .hmv2-cta-note {
  margin: 0;
  color: #cfe0d6 !important;
  font-weight: 600;
  font-size: 15px;
}
.hmv2 .hmv2-cta-ghost {
  color: #cfe0d6 !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
}
.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;
}
/* Progressive step colours, carried over from the legacy home page's numbered
   dots (theme-default.css: .print-block-left/-center .print-icon) so the flow
   keeps the brand's familiar coral -> orange -> green progression:
     1 #fd5b4e   2 #ffa63e   3 #39b54a (the legacy base green)
   Each step sets the hue once here; the badge, icon tint and number bubble all
   read from these, so restyling a step is a one-line change. */
.hmv2-step:nth-child(1) {
  --step-c: #fd5b4e;
  --step-deep: #d8483d;
  --step-bg: #fff1ef;
  --step-ring: #f8c8c3;
}
.hmv2-step:nth-child(2) {
  --step-c: #ffa63e;
  --step-deep: #d9821c;
  --step-bg: #fff7ec;
  --step-ring: #ffd9a8;
}
.hmv2-step:nth-child(3) {
  --step-c: #39b54a;
  --step-deep: #2f9c3f;
  --step-bg: #eef7f0;
  --step-ring: #cfe6d6;
}
.hmv2-step {
  position: relative;
  display: grid;
  grid-template-columns: 96px 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. */
/* Vertical connector, tinted from this step's colour into the next one so the
   progression reads as a single flowing thread rather than three loose dots. */
.hmv2-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 47px;
  top: 96px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, var(--step-ring, #d5e6dc), var(--next-ring, #d5e6dc));
}
.hmv2-step:nth-child(1) { --next-ring: #ffd9a8; }
.hmv2-step:nth-child(2) { --next-ring: #cfe6d6; }
@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: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--step-bg, #eef7f0);
  border: 2px solid var(--step-ring, #cfe6d6);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.hmv2-step:hover .hmv2-step-badge {
  border-color: var(--step-c, 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: 54px;
  height: 54px;
  /* Tinted to this step's deep shade so the icon sits on its own tinted disc
     instead of a green icon on a coral/orange background. */
  background: var(--step-deep, 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: -8px;
  right: -8px;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  /* The legacy dot colour - this is what carries the progression. */
  background: var(--step-c, var(--hv2-green));
  color: #fff;
  border: 3px solid #fff;
  font-family: "Roboto Condensed", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 17px;
  line-height: 32px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(18, 61, 41, 0.26);
}
.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;
  /* Matches the .hmv2-intro body copy (16px). Slightly tighter leading than the
     intro's 1.8 because this column is roughly half the measure. */
  font-size: 16px;
  line-height: 1.7;
  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; }
  /* Trim the gap a little on a ~390px phone so the larger badge doesn't
     squeeze the step copy. Badge/bubble sizes themselves are unchanged. */
  .hmv2-step { gap: 14px; }
  .hmv2-steps-col { padding: 26px 20px 24px; }
}

/* ==========================================================================
   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. The card is full width, so a
   small flat button floats in a lot of empty space and reads as incidental -
   the block below is tightened and the CTA given real weight so the two work
   as one call to action. */
.qtv2-intro {
  text-align: center;
  padding: 18px 0 22px;
}
.qtv2-subtitle {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #123d29 !important;
}
/* The subtitle is an instruction for the CTA ("Click below to use our instant
   quote form"), so once the form is open it is describing a button that is no
   longer there. Drop it, and the whole intro block with it. */
.qtv2-intro[data-started="true"] {
  display: none;
}
.qtv2-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  background: var(--hv2-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  padding: 19px 52px;
  border-radius: 12px;
  /* Definition without elevation: a white ring hugging the green fill, then a
     crisp dark green outer ring. The 0-blur box-shadow is a ring, not a drop
     shadow - it keeps `outline` free for the keyboard focus indicator. The
     white ring belongs to the button, so this holds up on any card colour. */
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #123d29;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.qtv2-start:hover {
  background: var(--hv2-green-deep);
  box-shadow: 0 0 0 2px #123d29;
}
.qtv2-start:focus-visible {
  outline: 3px solid #123d29;
  outline-offset: 3px;
}
@media (max-width: 560px) {
  /* Full-width on a phone reads as the obvious next action. */
  .qtv2-start { width: 100%; justify-content: center; padding: 18px 24px; font-size: 18px; }
}
.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. Both quote forms
   gate the same way: the instant calculator and the static enquiry form. */
#qtv2-form-wrap[data-collapsed],
#sqv2-form-wrap[data-collapsed] {
  display: none;
}

/* Sticky-header clearance for anything the browser scrolls to inside the quote
   form - native #anchor jumps and scrollIntoView (the "Get Your Quote" CTA, the
   amend hand-off). Without it the target lands under the sticky header and its
   heading is hidden. The JS stepper applies the same offset itself, because
   jQuery's animate({scrollTop}) bypasses scroll-margin entirely. */
#dynamicForm,
#sqForm,
.qtv2 .ncr-section {
  scroll-margin-top: 122px;
}
@media (max-width: 1023px) {
  /* Mobile header is the logo row only - the nav row is hidden. */
  #dynamicForm,
  #sqForm,
  .qtv2 .ncr-section {
    scroll-margin-top: 84px;
  }
}

/* ==========================================================================
   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; }
}