/** Site Theme Tokens **/

:root {
    --core-site-font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --core-site-heading-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --core-site-heading-size-h2: clamp(1.9rem, 3.4vw, 3rem);
    --core-site-heading-size-h3: var(--text-size-2xl);
    --core-site-heading-line-height: 1.04;
    --core-site-heading-line-height-h3: 1.15;
    --core-site-heading-weight: 800;
    --core-site-heading-margin: 0;
    --core-site-color-text: var(--color-text);
    --core-site-color-link: var(--color-slate-dark);
    --core-accent: var(--color-brand);
    --core-radius: 4px;
}
body { font-family: var(--core-site-font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--core-site-heading-font); }
h2 { font-size: var(--core-site-heading-size-h2); }
h3 { font-size: var(--core-site-heading-size-h3); }
h1, h2, h3, h4, h5, h6 { line-height: var(--core-site-heading-line-height); }
h3 { line-height: var(--core-site-heading-line-height-h3); }
h1, h2, h3, h4, h5, h6 { font-weight: var(--core-site-heading-weight); }
h1, h2, h3, h4, h5, h6 { margin-block: var(--core-site-heading-margin); }
body { color: var(--core-site-color-text); }
a { color: var(--core-site-color-link); }


/** Site Custom Stylesheet (From File) **/ 



 /** Site Custom Styles (From DB) **/ 

/* ==========================================================================
   MH Finance — site-wide styles
   ========================================================================== */ /* ---- Colour palette ---- */ :root  {
  /* Hi-vis amber — the brand mark colour and the CTA colour */ --color-hi-vis: #f6c643;
  --color-hi-vis-light: #fad97f;
  --color-hi-vis-lighter: #fdedc4;
  --color-hi-vis-dark: #d9a81f;
  --color-hi-vis-darker: #a67d0f;
  /* Slate — the dark ground for hero, proof and closing panels */ --color-slate: #3f3d54;
  --color-slate-light: #5a5773;
  --color-slate-lighter: #8e8ba3;
  --color-slate-lightest: #e4e3ea;
  --color-slate-dark: #2e2c3e;
  --color-slate-darker: #1d1c28;
  /* Concrete — the light working ground */ --color-concrete: #f4f3f1;
  --color-concrete-warm: #eae6df;
  --color-concrete-dark: #d6d3cd;
  /* Ink — body copy and rules */ --color-ink: #16151c;
  /* Semantic anchors */ --color-brand: var(--color-hi-vis);
  --color-text: var(--color-ink);
  --color-bg: #ffffff;
  /* Slight softening on boxes — buttons, cards, fields */ --radius-box: 4px;
  --radius-panel: 6px;
}
/* Background utilities — one per palette variant */ .bg-hi-vis  {
  background-color: var(--color-hi-vis);
}
.bg-hi-vis-light  {
  background-color: var(--color-hi-vis-light);
}
.bg-hi-vis-lighter  {
  background-color: var(--color-hi-vis-lighter);
}
.bg-hi-vis-dark  {
  background-color: var(--color-hi-vis-dark);
}
.bg-hi-vis-darker  {
  background-color: var(--color-hi-vis-darker);
}
.bg-slate  {
  background-color: var(--color-slate);
}
.bg-slate-light  {
  background-color: var(--color-slate-light);
}
.bg-slate-lighter  {
  background-color: var(--color-slate-lighter);
}
.bg-slate-lightest  {
  background-color: var(--color-slate-lightest);
}
.bg-slate-dark  {
  background-color: var(--color-slate-dark);
}
.bg-slate-darker  {
  background-color: var(--color-slate-darker);
}
.bg-concrete  {
  background-color: var(--color-concrete);
}
.bg-concrete-warm  {
  background-color: var(--color-concrete-warm);
}
.bg-concrete-dark  {
  background-color: var(--color-concrete-dark);
}
.bg-ink  {
  background-color: var(--color-ink);
}
.bg-white  {
  background-color: #ffffff;
}
/* ---- Base type (values with no theme-token knob) ---- */ body  {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4  {
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p  {
  margin: 0;
  text-wrap: pretty;
}
a  {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover  {
  color: var(--color-hi-vis-darker);
}
:focus-visible  {
  outline: 3px solid var(--color-hi-vis-dark);
  outline-offset: 2px;
}
::selection  {
  background: var(--color-hi-vis);
  color: var(--color-ink);
}
img  {
  max-width: 100%;
  display: block;
}
/* Eyebrow label above a section heading — used across every section. The size,
   weight, tracking and case are unified here for ALL eyebrow variants, so every
   section's small uppercase label reads at exactly the same size. The size is
   marked !important so no per-section container font-size (e.g. .fit-aside sets
   18px on the Good Fit column) can win via inheritance and make one eyebrow read
   larger/smaller than the rest. Individual sections may still recolour their
   eyebrow (e.g. hi-vis on dark grounds), but the sizing is governed here alone. */ .eyebrow, .hero-eyebrow  {
  font-size: var(--text-size-2xs) !important;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-slate-light);
  margin-bottom: 0.9rem;
}
/* ---- Shared components (used across multiple sections) ---- */ /* Buttons */ .btn  {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  font-family: inherit;
  font-size: var(--text-size-reg);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 1.05rem 1.5rem;
  min-height: 3.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-box);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary  {
  background-color: var(--color-hi-vis);
  color: var(--color-ink);
  border-color: var(--color-hi-vis);
}
.btn-primary:hover  {
  background-color: var(--color-hi-vis-dark);
  border-color: var(--color-hi-vis-dark);
  color: var(--color-ink);
}
.btn-primary:active  {
  background-color: var(--color-hi-vis-darker);
  border-color: var(--color-hi-vis-darker);
}
.btn-outline  {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-outline:hover  {
  background-color: var(--color-ink);
  color: #ffffff;
}
.btn-outline-light  {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline-light:hover  {
  background-color: #ffffff;
  color: var(--color-ink);
  border-color: #ffffff;
}
.btn-block  {
  width: 100%;
  justify-content: flex-start;
}
/* Risk-reversal line, repeated near every CTA */ .risk-reversal  {
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-slate-light);
}
.risk-reversal-light  {
  color: rgba(255, 255, 255, 0.72);
}
/* ---- Animations (name-registering at-rules must live site-wide) ---- */ @keyframes hero-rule-draw  {
  from  {
    transform: scaleX(0);
  }
  to  {
    transform: scaleX(1);
  }
}
@keyframes proof-bar-lender-belt  {
  from  {
    transform: translateX(0);
  }
  to  {
    transform: translateX(-50%);
  }
}


 /** Content Section Styles **/ 

.content-section-3012  {
  &.content-section  {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 2px solid var(--color-ink);
  }
  .content-section-inner  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .logo img  {
    height: 4.5rem;
    width: auto;
  }
  .header-actions  {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
  }
  .header-phone  {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-size-lg);
    text-decoration: none;
    color: var(--color-ink);
    white-space: nowrap;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
  }
  .header-phone:hover  {
    color: var(--color-hi-vis-darker);
  }
  .header-phone svg  {
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.4em;
    flex: 0 0 auto;
  }
  .header-phone-label  {
    font-size: var(--text-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-slate-light);
    margin-right: 0.5rem;
  }
  @media (max-width: 767px)  {
    .content-section-inner  {
      flex-direction: column-reverse;
      align-items: stretch;
      row-gap: 0.75rem;
    }
    .header-actions  {
      justify-content: space-between;
      column-gap: 0.75rem;
    }
    .logo  {
      display: block;
      width: 100%;
    }
    .logo img  {
      height: auto;
      width: 100%;
    }
    .header-phone-label  {
      display: none;
    }
    .header-actions .btn  {
      padding-left: 1rem;
      padding-right: 1rem;
      font-size: var(--text-size-xs);
      white-space: nowrap;
    }
  }
  @media (max-width: 639px)  {
    .header-phone  {
      font-size: var(--text-size-reg);
    }
  }
}
.content-section-3013  {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  &.content-section  {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-size-sm);
  }
  .content-section-inner  {
    display: grid;
    row-gap: 2.25rem;
  }
  a  {
    color: #ffffff;
  }
  a:hover  {
    color: var(--color-hi-vis);
  }
  .footer-cols  {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 2rem;
  }
  .footer-col  {
    display: grid;
    row-gap: 0.4rem;
    align-content: start;
  }
  .footer-heading  {
    font-size: var(--text-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-hi-vis);
    margin-bottom: 0.5rem;
  }
  .footer-social  {
    display: flex;
    column-gap: 0.6rem;
    margin-bottom: 0.75rem;
  }
  .social-btn  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--color-hi-vis);
    border-radius: var(--radius-box);
    transition: background-color 0.15s;
  }
  .social-btn:hover  {
    background-color: var(--color-hi-vis-dark);
  }
  .social-btn svg  {
    width: 1.4rem;
    height: 1.4rem;
    fill: var(--color-ink);
  }
  .footer-base  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 2rem;
    row-gap: 0.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
  }
  @media (max-width: 639px)  {
    .footer-cols  {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}
.content-section-3014  {
  background: linear-gradient(90deg, rgba(29, 28, 40, 0.88) 0%, rgba(29, 28, 40, 0.74) 50%, rgba(29, 28, 40, 0.42) 100%), url('/site-assets/images/hero-warehouse.jpg') 62% center / cover no-repeat;
  &.content-section  {
    color: #ffffff;
  }
  .content-section-inner  {
    display: grid;
    align-items: start;
  }
  .hero-copy  {
    max-width: none;
  }
  h1  {
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    color: #ffffff;
    max-width: 30ch;
  }
  .hero-rule  {
    height: 6px;
    width: 100%;
    max-width: 20.5rem;
    background-color: var(--color-hi-vis);
    margin: 1.6rem 0;
    transform-origin: left center;
    animation: hero-rule-draw 0.6s ease-out both;
  }
  .hero-lede  {
    font-size: var(--text-size-2xl);
    color: rgba(255, 255, 255, 0.88);
    max-width: 72ch;
  }
  .hero-points  {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.5rem;
  }
  .hero-points li  {
    position: relative;
    padding-left: 1.4rem;
    padding-block: 0.4rem;
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
  }
  .hero-points li::before  {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 0.75rem;
    height: 3px;
    background-color: var(--color-hi-vis);
  }
  .hero-actions  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }
  .risk-reversal  {
    margin-top: 1rem;
  }
  /* Sizing/tracking/case for this eyebrow now come from the shared .eyebrow,
   .hero-eyebrow rule in site custom_styles, so every section's small label
   matches. Only the hi-vis colour is overridden here for the dark hero. */ .hero-eyebrow  {
    color: var(--color-hi-vis);
  }
  @media (prefers-reduced-motion: reduce)  {
    .hero-rule  {
      animation: none;
    }
  }
  @media (max-width: 1023px)  {
    h1  {
      max-width: 22ch;
    }
    .hero-points  {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 767px)  {
    .hero-actions  {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .hero-actions .btn  {
      width: 100%;
      max-width: 24rem;
      justify-content: center;
    }
    .risk-reversal  {
      text-align: center;
    }
  }
  @media (max-width: 639px)  {
    .hero-actions .btn  {
      width: 100%;
      justify-content: center;
    }
  }
}
.content-section-3015  {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
  .content-section-inner  {
    padding-bottom: 0.5rem;
  }
  .stat-row  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 1.75rem;
  }
  .stat  {
    border-left: 2px solid var(--color-ink);
    padding-left: 1.1rem;
  }
  .stat-figure  {
    display: block;
    font-size: clamp(2.4rem, 4.6vw, 3.75rem);
    font-weight: var(--font-weight-xbold);
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .stat-label  {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate);
  }
  .credential  {
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate);
  }
  .lender-belt  {
    margin-top: 2.5rem;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
  }
  .lender-track  {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 4.5rem;
    animation: proof-bar-lender-belt 150s linear infinite;
    will-change: transform;
  }
  /* Every logo shares ONE height with auto width, so each renders at the same
   visual height regardless of aspect ratio — wide wordmarks get wider, square
   marks stay narrow, but they all sit on the same height line. object-fit only
   matters for the max-width safety cap below. */ .lender-track img  {
    height: 2.75rem;
    width: auto;
    max-width: 13rem;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
  }
  /* A few source logos have heavy built-in whitespace baked into the file, so at a
   shared height their visible glyph still reads smaller than the rest. Scale ONLY
   those up to compensate. The newer, tighter-cropped Macquarie and Suncorp files
   need only a gentle bump — a big scale pushed their glyph past the row height and
   got clipped by .lender-belt's overflow:hidden. St George keeps the larger scale. */ .lender-track img[src*="st-george"]  {
    transform: scale(1.4);
  }
  .lender-track img[src*="macquarie"], .lender-track img[src*="suncorp"]  {
    transform: scale(1.12);
  }
  .lender-belt:hover .lender-track, .lender-track:focus-within  {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce)  {
    .lender-track  {
      animation: none;
    }
    .lender-belt  {
      overflow-x: auto;
    }
  }
  @media (max-width: 767px)  {
    .stat-row  {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 639px)  {
    .lender-belt  {
      margin-top: 1.75rem;
      mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    }
    .lender-track  {
      gap: 3rem;
    }
    .lender-track img  {
      height: 2.2rem;
      max-width: 10rem;
    }
  }
}
.content-section-3016  {
  padding-top: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  .content-section-inner  {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    column-gap: 4rem;
    row-gap: 2rem;
    align-items: start;
  }
  .fit-list  {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: 0;
    align-self: end;
  }
  .fit-list li  {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 0.75rem;
    padding: 1.1rem 0;
    border-top: 2px solid var(--color-concrete-dark);
    font-size: var(--text-size-lg);
  }
  .fit-list li:last-child  {
    border-bottom: 2px solid var(--color-concrete-dark);
  }
  .fit-list .tick  {
    font-weight: var(--font-weight-xbold);
    color: var(--color-hi-vis-darker);
    font-size: var(--text-size-xl);
    line-height: 1.35;
  }
  .fit-aside  {
    font-size: var(--text-size-lg);
    color: var(--color-slate);
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .fit-aside p  {
    margin-top: 1rem;
  }
  .fit-photo  {
    margin-top: 2rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 22rem;
    object-fit: cover;
    object-position: center 20%;
    border-radius: var(--radius-panel);
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      column-gap: 0;
    }
    .fit-photo  {
      flex: 0 0 auto;
      min-height: 0;
      aspect-ratio: 16 / 9;
    }
  }
}
.content-section-3017  {
  .content-section-inner  {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: 3rem;
    row-gap: 2.5rem;
  }
  .equipment-head  {
    grid-column: 1 / -1;
    max-width: 62ch;
  }
  .equipment-rule  {
    height: 4px;
    width: 5.5rem;
    background-color: var(--color-hi-vis);
    margin: 1.4rem 0;
  }
  .equipment-photo  {
    width: 100%;
    height: 100%;
    min-height: 22rem;
    object-fit: cover;
    border-radius: var(--radius-panel);
  }
  .equipment-head p  {
    margin-top: 1rem;
    font-size: var(--text-size-lg);
    color: var(--color-slate);
  }
  .grid  {
    column-gap: 2px;
    row-gap: 2px;
    background-color: var(--color-ink);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-panel);
    overflow: hidden;
  }
  .equipment-card  {
    background-color: #ffffff;
    padding: 1.75rem;
  }
  .equipment-card .card-index  {
    font-size: var(--text-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    color: var(--color-hi-vis-darker);
    display: block;
    margin-bottom: 0.9rem;
  }
  .equipment-card h3  {
    margin-bottom: 0.6rem;
    min-height: 2.4em;
  }
  .equipment-card p  {
    color: var(--color-slate);
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: minmax(0, 1fr);
      column-gap: 0;
    }
    .equipment-photo  {
      height: auto;
      min-height: 0;
      aspect-ratio: 16 / 9;
    }
    .equipment-card h3  {
      min-height: 0;
    }
  }
  @media (max-width: 639px)  {
    .grid  {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}
.content-section-3018  {
  &.content-section  {
    color: #ffffff;
  }
  /* Two-column grid. The heading spans both columns on the first row; the panels
   and the body prose sit side by side on the second row, so their tops line up
   exactly — no manual offset needed. */ .content-section-inner  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 2rem;
    align-items: start;
  }
  .why-head  {
    grid-column: 1 / -1;
  }
  h2  {
    color: #ffffff;
    max-width: 20ch;
  }
  .eyebrow  {
    color: var(--color-hi-vis);
  }
  .why-body p  {
    font-size: var(--text-size-lg);
    color: rgba(255, 255, 255, 0.82);
  }
  .why-body p + p  {
    margin-top: 1.1rem;
  }
  .compare  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2px;
    background-color: rgba(255, 255, 255, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-panel);
    overflow: hidden;
  }
  .compare-col  {
    background-color: var(--color-slate-dark);
    padding: 1.25rem;
    display: grid;
    grid-template-rows: auto 1fr;
  }
  .compare-col.is-mh  {
    background-color: var(--color-hi-vis);
    color: var(--color-ink);
  }
  .compare-col h4  {
    font-size: var(--text-size-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
  }
  /* Both lists share one implicit grid-row track set so equivalent items line up
   across the two columns; each item's divider then sits at the same height. */ .compare-col ul  {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-size-sm);
    display: grid;
    grid-template-rows: repeat(4, 1fr);
  }
  .compare-col.is-mh ul  {
    font-weight: var(--font-weight-semibold);
  }
  .compare-col li  {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
  }
  .compare-col li:first-child  {
    border-top: 0;
  }
  /* Marker icons — cross on the bank column, tick on the MH column.
   Both markers use an IDENTICAL box (1em) and the same left padding on the <li>
   (1.6rem) so the icon size and the gap to the text match exactly across the two
   columns. To make the glyphs themselves the same visual size despite the source
   SVGs filling their viewBox by different amounts, each glyph's own viewBox is
   tightened to the drawn shape: the cross viewBox is left at 0 0 24 24 (it fills
   the box), and the tick viewBox is cropped to just the checkmark path so it too
   fills the box — no more per-marker box-size compensation. */ .compare-col li::before  {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    background-color: var(--color-hi-vis);
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  }
  .compare-col.is-mh li  {
    border-top-color: rgba(22, 21, 28, 0.18);
  }
  /* Tick uses the SAME 1em box as the cross. Its viewBox is cropped to the drawn
   checkmark bounds (x 4→20, y 6→17) so the glyph fills the box like the cross
   does — matching visual size with no per-marker scaling. */ .compare-col.is-mh li::before  {
    background-color: var(--color-ink);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 5 18 13' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 5 18 13' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      column-gap: 0;
    }
  }
  @media (max-width: 639px)  {
    .compare  {
      grid-template-columns: 1fr;
      row-gap: 2px;
    }
    .compare-col ul  {
      grid-template-rows: none;
    }
  }
}
.content-section-3019  {
  .content-section-inner  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 3rem;
    row-gap: 1.75rem;
  }
  h2  {
    max-width: 24ch;
  }
  .cta-call-side  {
    display: grid;
    row-gap: 0.75rem;
    justify-items: start;
  }
  .cta-phone  {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: var(--font-weight-xbold);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-ink);
    text-decoration: none;
    border-bottom: 4px solid var(--color-ink);
    padding-bottom: 0.2rem;
    min-height: 3rem;
    display: inline-block;
  }
  .cta-phone svg  {
    width: 0.72em;
    height: 0.72em;
    margin-right: 0.4em;
    vertical-align: baseline;
  }
  .cta-phone:hover  {
    color: var(--color-slate-darker);
    border-color: var(--color-slate-darker);
  }
  .risk-reversal  {
    color: var(--color-ink);
  }
  .cta-call-note  {
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-semibold);
  }
}
.content-section-3020  {
  .process-head  {
    margin-bottom: 2.5rem;
    max-width: 58ch;
  }
  .process-head p  {
    margin-top: 1rem;
    font-size: var(--text-size-lg);
    color: var(--color-slate);
  }
  .step-list  {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: process-step;
    width: fit-content;
    max-width: 100%;
  }
  .step-list li  {
    counter-increment: process-step;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    column-gap: 1.5rem;
    align-items: baseline;
    padding: 1.4rem 0;
    border-top: 2px solid var(--color-concrete-dark);
  }
  .step-list li:last-child  {
    border-bottom: 2px solid var(--color-concrete-dark);
  }
  .step-list li::before  {
    content: counter(process-step, decimal-leading-zero);
    font-size: var(--text-size-3xl);
    font-weight: var(--font-weight-xbold);
    letter-spacing: -0.03em;
    color: var(--color-ink);
  }
  .step-title  {
    font-size: var(--text-size-xl);
    font-weight: var(--font-weight-bold);
    display: block;
  }
  .step-body  {
    color: var(--color-slate);
    margin-top: 0.3rem;
  }
  .process-footnote  {
    margin-top: 2rem;
    font-weight: var(--font-weight-semibold);
  }
  @media (max-width: 639px)  {
    .step-list li  {
      grid-template-columns: 3rem 1fr;
      column-gap: 1rem;
    }
  }
}
.content-section-3021  {
  .why-us-head  {
    margin-bottom: clamp(3rem, 6vw, 6rem);
  }
  h2  {
    max-width: 22ch;
  }
  .grid  {
    column-gap: 2.5rem;
    row-gap: 2.5rem;
  }
  .usp  {
    border-top: 4px solid var(--color-ink);
    padding-top: 1.1rem;
  }
  .usp h3  {
    margin-bottom: 0.5rem;
    font-size: var(--text-size-xl);
  }
  .usp p  {
    color: var(--color-slate);
  }
  @media (max-width: 1023px)  {
    .grid  {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 639px)  {
    .grid  {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}
.content-section-3022  {
  background: linear-gradient(180deg, rgba(29, 28, 40, 0.92) 0%, rgba(29, 28, 40, 0.86) 100%), url('/site-assets/images/testimonials-yard.jpg') center / cover no-repeat;
  &.content-section  {
    color: #ffffff;
  }
  h2  {
    color: #ffffff;
  }
  .eyebrow  {
    color: var(--color-hi-vis);
  }
  .testimonials-head  {
    margin-bottom: 2.5rem;
  }
  .core-content-slider  {
    position: relative;
  }
  .slider-track  {
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
    scrollbar-width: none;
  }
  .slider-track::-webkit-scrollbar  {
    display: none;
  }
  .slider-item  {
    flex: 0 0 100%;
    min-width: 0;
  }
  .quote-card  {
    background-color: var(--color-slate);
    border-top: 6px solid var(--color-hi-vis);
    border-radius: var(--radius-panel);
    padding: 2.25rem;
  }
  blockquote  {
    margin: 0;
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
    line-height: 1.4;
    font-weight: var(--font-weight-medium);
  }
  .quote-attrib  {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-hi-vis);
  }
  .slider-prev, .slider-next  {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-box);
    width: 3rem;
    height: 3rem;
    font-size: var(--text-size-2xl);
    cursor: pointer;
  }
  .slider-prev:hover, .slider-next:hover  {
    background-color: #ffffff;
    color: var(--color-ink);
    border-color: #ffffff;
  }
  .slider-controls  {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
    margin-top: 1.5rem;
  }
  .slider-dots  {
    margin-top: 0;
  }
  .slider-dot  {
    background: rgba(255, 255, 255, 0.4);
  }
  .slider-dot.active  {
    background: var(--color-hi-vis);
  }
}
.content-section-3023  {
  .content-section-inner  {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    column-gap: 4rem;
    row-gap: 2rem;
    align-items: start;
  }
  .faqs-aside  {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .faqs-rule  {
    height: 4px;
    width: 5.5rem;
    background-color: var(--color-hi-vis);
    margin: 1.4rem 0;
  }
  .faqs-aside p  {
    margin-top: 1rem;
    color: var(--color-slate);
    font-size: var(--text-size-lg);
  }
  .faqs-photo  {
    margin-top: 2rem;
    width: 100%;
    max-width: 22rem;
    flex: 1 1 auto;
    min-height: 12rem;
    object-fit: cover;
    border-radius: var(--radius-panel);
  }
  .core-accordion-01 > * + *  {
    margin-top: 0;
  }
  .core-accordion-01 details  {
    padding: 1.35rem 0;
    border-top: 2px solid var(--color-concrete-dark);
  }
  .core-accordion-01 details:last-of-type  {
    border-bottom: 2px solid var(--color-concrete-dark);
  }
  .core-accordion-01 details summary  {
    font-size: var(--text-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
  }
  .core-accordion-01 details p  {
    color: var(--color-slate);
    max-width: 68ch;
  }
  .faqs-cta  {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.3rem;
    max-width: 22rem;
    text-align: center;
  }
  .faqs-aside .faqs-cta  {
    flex: 0 0 auto;
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      display: flex;
      flex-direction: column;
      row-gap: 0;
      column-gap: 0;
    }
    .faqs-aside  {
      display: contents;
    }
    .core-accordion-01  {
      order: 1;
    }
    .faqs-cta  {
      order: 2;
      margin-top: 2rem;
      align-items: flex-start;
      text-align: left;
    }
    .faqs-photo  {
      flex: 0 0 auto;
      max-width: none;
      width: 100%;
      aspect-ratio: 16 / 9;
    }
  }
  @media (max-width: 767px)  {
    .core-accordion-01 details summary  {
      align-items: flex-start;
    }
    .core-accordion-01[data-icon="up-down"] details summary::after  {
      position: static;
      margin-top: 0.15em;
      flex: 0 0 auto;
    }
  }
}
.content-section-3024  {
  &.content-section  {
    color: #ffffff;
  }
  .content-section-inner  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 2.5rem;
    align-items: start;
  }
  h2  {
    color: #ffffff;
    max-width: 20ch;
  }
  .eyebrow  {
    color: var(--color-hi-vis);
  }
  .enquire-lede  {
    margin-top: 1.25rem;
    font-size: var(--text-size-lg);
    color: rgba(255, 255, 255, 0.82);
  }
  .enquire-proof  {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    row-gap: 0;
  }
  .enquire-proof li  {
    padding: 0.9rem 0;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
    font-size: var(--text-size-lg);
    font-weight: var(--font-weight-semibold);
  }
  .enquire-proof li:last-child  {
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  }
  .enquire-phone  {
    margin-top: 2rem;
    display: grid;
    row-gap: 0.4rem;
  }
  .enquire-phone a  {
    font-size: var(--text-size-3xl);
    font-weight: var(--font-weight-xbold);
    color: #ffffff;
    text-decoration: none;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
  }
  .enquire-phone a:hover  {
    color: var(--color-hi-vis);
  }
  .enquire-phone a svg  {
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
  }
  .form-card  {
    background-color: #ffffff;
    border-top: 6px solid var(--color-hi-vis);
    border-radius: var(--radius-panel);
    padding: 2rem;
    color: var(--color-ink);
    width: 100%;
    max-width: 26rem;
    margin-left: auto;
  }
  .form-card h3  {
    margin-bottom: 0.35rem;
    font-size: var(--text-size-3xl);
  }
  .form-card .form-intro  {
    font-size: var(--text-size-sm);
    color: var(--color-slate-light);
    margin-bottom: 1.25rem;
  }
  /* Embedded broker quote widget — the widget container fills the (now narrower)
   card. The card itself is capped at 26rem and its heading, intro and the widget
   all sit flush-left against the card's left padding, so the text above the form
   lines up with the left edge of the form. */ .form-card iframe, .form-card [data-widget], .form-card > div:not([class]), .form-card > div:not([class]) *  {
    max-width: 100%;
    box-sizing: border-box;
  }
  .form-card iframe, .form-card [data-widget], .form-card > div:not([class])  {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Enquiry form fields (bespoke source styling, kept over core-form-style) */ .enquiry-form  {
    display: grid;
    row-gap: 0.9rem;
  }
  .enquiry-form .field  {
    display: grid;
    row-gap: 0.35rem;
  }
  .enquiry-form label  {
    font-size: var(--text-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-slate);
  }
  .enquiry-form input, .enquiry-form select, .enquiry-form textarea  {
    font-family: inherit;
    font-size: var(--text-size-reg);
    color: var(--color-ink);
    background-color: #ffffff;
    border: 2px solid var(--color-concrete-dark);
    border-radius: var(--radius-box);
    padding: 0.85rem 0.9rem;
    min-height: 3rem;
    width: 100%;
    box-sizing: border-box;
  }
  .enquiry-form textarea  {
    min-height: 5.5rem;
    resize: vertical;
  }
  .enquiry-form input:hover, .enquiry-form select:hover, .enquiry-form textarea:hover  {
    border-color: var(--color-slate-lighter);
  }
  .enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus  {
    border-color: var(--color-slate);
    outline: none;
  }
  /* Post-submit success / fail messages (Basin inline render mode) */ .form-msg  {
    text-align: center;
    padding: 2.5rem 1.5rem;
  }
  .form-msg-icon  {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    position: relative;
    background: var(--color-hi-vis);
  }
  .form-msg-success .form-msg-icon::after  {
    content: "";
    position: absolute;
    left: 27px;
    top: 16px;
    width: 17px;
    height: 32px;
    border: solid var(--color-ink);
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
  }
  .form-msg-title  {
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    margin: 0 0 0.5rem;
  }
  .form-msg-text  {
    font-size: 1.1rem;
    margin: 0;
  }
  .form-msg-fail  {
    border: 2px solid #c0392b;
    border-radius: var(--radius-panel);
    background: rgba(192, 57, 43, 0.08);
    padding: 1.5rem;
  }
  .form-msg-fail .form-msg-title  {
    color: #c0392b;
    font-size: 1.25rem;
  }
  .form-msg-fail .form-msg-text  {
    font-size: 1rem;
  }
  .form-msg-fail a  {
    color: #c0392b;
  }
  @media (max-width: 1023px)  {
    .content-section-inner  {
      grid-template-columns: 1.05fr 0.95fr;
      column-gap: 2rem;
    }
    h2  {
      font-size: clamp(1.6rem, 3.4vw, 2.2rem);
      max-width: none;
    }
    .enquire-lede  {
      font-size: var(--text-size-reg);
      margin-top: 1rem;
    }
    .enquire-proof  {
      margin-top: 1.5rem;
    }
    .enquire-proof li  {
      font-size: var(--text-size-reg);
      padding: 0.7rem 0;
    }
    .enquire-phone  {
      margin-top: 1.5rem;
    }
    .enquire-phone a  {
      font-size: var(--text-size-2xl);
    }
    .form-card  {
      max-width: none;
      margin-left: 0;
      padding: 1.5rem;
    }
  }
  @media (max-width: 767px)  {
    .content-section-inner  {
      grid-template-columns: 1fr;
      column-gap: 0;
    }
    .form-card  {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      max-width: 26rem;
    }
    .enquiry-form label  {
      text-align: left;
    }
    .enquiry-form .btn-block  {
      justify-content: center;
    }
  }
  @media (max-width: 639px)  {
    .form-card  {
      padding: 1.25rem;
    }
  }
}