/* =====================================================================
   FastDriver Plugin 1360 - Badge Hero With Media
   Colour, spacing and layout only. No font-size and no font-family are
   declared anywhere in this file, so headings and body copy inherit the
   site defaults from theme-css.css (body -> --creote-family-two /
   --font-size-base, h1..h6 -> --creote-family-one at the theme's own
   sizes and line heights, p -> 16px / 26px). Change the theme type scale
   and this section follows it.
   All selectors are scoped under .fdbh-hero.
   ===================================================================== */

.fdbh-hero,.fdbh-hero *,.fdbh-hero *::before,.fdbh-hero *::after{box-sizing:border-box}

.fdbh-hero{
  --fdbh-lime:var(--primary-color-one,#C1F11D);
  --fdbh-ink:var(--primary-color-two,#141414);
  --fdbh-head:var(--heading-dark,#141414);
  --fdbh-body:var(--text-color-dark,#4a4e56);
  --fdbh-mute:var(--text-color-dark-two,#888888);
  --fdbh-line:var(--border-color-dark,#e4e7ee);
  /* tinted band: the accent colour mixed into white */
  --fdbh-tint:#f8fde8;
  --fdbh-tint:color-mix(in srgb, var(--fdbh-lime) 13%, #ffffff);
  background:var(--fdbh-tint);
  border-bottom:1px solid var(--fdbh-line);
  padding:64px 0 72px;
  color:var(--fdbh-body);
  -webkit-font-smoothing:antialiased;
}
.fdbh-hero a{text-decoration:none}
.fdbh-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.fdbh-grid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:52px;align-items:center}
/* no image chosen -> single column, text keeps a readable measure */
.fdbh-hero--solo .fdbh-grid{grid-template-columns:1fr}
.fdbh-col{min-width:0}

/* Eyebrow pill */
.fdbh-badge{
  display:inline-block;
  margin:0;
  background:var(--fdbh-lime);
  color:var(--fdbh-ink);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:9px 18px;
  border-radius:100px;
  line-height:1.2;
}

/* Heading */
.fdbh-title{
  margin:16px 0 0;
  font-weight:600;
  color:var(--fdbh-head);
}

/* Lead paragraph */
.fdbh-lead{margin-top:22px;max-width:58ch}
.fdbh-lead p{margin:0 0 14px;color:var(--fdbh-body)}
.fdbh-lead p:last-child{margin-bottom:0}
.fdbh-lead a{color:var(--fdbh-head);text-decoration:underline}

/* Buttons */
.fdbh-btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.fdbh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:18px 32px;
  border-radius:100px;
  font-weight:600;
  line-height:1;
  transition:filter .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.fdbh-btn--solid{background:var(--fdbh-ink);color:var(--fdbh-lime)}
.fdbh-btn--solid:hover{filter:brightness(1.25);color:var(--fdbh-lime)}
.fdbh-btn--lime{background:var(--fdbh-lime);color:var(--fdbh-ink)}
.fdbh-btn--lime:hover{filter:brightness(.94);color:var(--fdbh-ink)}
.fdbh-btn--ghost{background:#fff;border:1px solid var(--fdbh-line);color:var(--fdbh-head);font-weight:500;padding:18px 30px}
.fdbh-btn--ghost:hover{border-color:var(--fdbh-head);color:var(--fdbh-head)}
.fdbh-btn--light{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:500;padding:18px 30px}
.fdbh-btn--light:hover{background:#fff;color:var(--fdbh-ink)}

/* Fine print */
.fdbh-fine{margin-top:20px}
.fdbh-fine p{margin:0;color:var(--fdbh-mute)}

/* Media */
.fdbh-media{min-width:0}
.fdbh-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:18px;
  background:var(--fdbh-tint);
}

@media(max-width:1000px){
  .fdbh-grid{grid-template-columns:1fr}
  .fdbh-media{order:2}
}
@media(max-width:760px){
  .fdbh-hero{padding:40px 0 48px}
  .fdbh-wrap{padding:0 20px}
  .fdbh-grid{gap:32px}
  .fdbh-btns .fdbh-btn{width:100%}
}
@media(max-width:400px){
  .fdbh-wrap{padding:0 16px}
}