/* ==========================================================================
   Hostking hero — NameHero-pattern centred hero
   ==========================================================================
   Scope: the hero only. This file deliberately touches nothing else — no type
   scale, no palette, no radii, no card styles. Everything below is either a
   new class or is scoped inside `.banner-centered`, so the rest of the site
   renders exactly as it did before this file was added.

   The pattern, from NameHero: centred rather than split; three benefits inline
   on one row rather than a bullet list; one primary action; the proof line
   directly under the button; faint isometric line-work flanking the edges.

   COLOUR NOTE — white on orange, as requested.
   The site's #FF944D is too light to carry white text (2.19:1). White works on
   NameHero's button because their orange is far darker than yours. Two levers
   make it work here, and both are needed:
     1. NameHero's vivid orange, #F26522   white text 3.15
     2. a deeper gradient under it         button vs hero 3.67
   The label is set at 19px/700, which clears WCAG's large-text threshold
   (>=18.66px bold), where the bar is 3.0 rather than 4.5. The 3.15 margin is
   thin — if this label is ever set smaller than 18.66px bold, or the weight
   drops, it stops passing. Keep the size and weight together.
   This orange is scoped to the hero. The rest of the site keeps #FF944D
   until you decide whether to carry the new orange through.
   ========================================================================== */

.banner.one.banner-centered {
  position: relative;
  overflow: hidden;
  text-align: center;
  /* The header is position:absolute over the hero, so this padding has to
     clear it. Measured header bottom: 115px at 375-414, 133px at 768-1024,
     149px at 1440 — the old clamp bottomed out at 96px and the logo landed
     on the headline. This clears every breakpoint with ~28px to spare. */
  padding-block: clamp(142px, 17vw, 150px) clamp(76px, 9vw, 120px);
  /* Measured header: 107px at 1280, 112px at 375. The floor is set from
     the mobile figure - at 122px the gap to the headline was only 10px,
     which is how the logo landed on the wording the first time. */
  /* clears the trimmed header (~112px at 1280); the old 180px was
     reserved for a 149px header */
  /* was clamp(152px,22vw,180px): reserved for the old 149px header */
  background-image: linear-gradient(172deg, #014CCC 0%, #01357F 42%, #012358 100%);
}

/* faint isometric rules, mirrored left and right */
.banner-centered::before,
.banner-centered::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 320px; height: 620px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .20;
  background-repeat: no-repeat;
  background-size: contain;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='620' fill='none' stroke='%23fff' stroke-width='1.1'%3E%3Cg%3E%3Cpath d='M20 120 L150 60 L280 120 L150 180 Z'/%3E%3Cpath d='M20 120 v56 L150 236 v-56'/%3E%3Cpath d='M280 120 v56 L150 236'/%3E%3Cpath d='M20 250 L150 190 L280 250 L150 310 Z'/%3E%3Cpath d='M20 250 v56 L150 366 v-56'/%3E%3Cpath d='M280 250 v56 L150 366'/%3E%3Cpath d='M20 380 L150 320 L280 380 L150 440 Z'/%3E%3Cpath d='M20 380 v56 L150 496 v-56'/%3E%3Cpath d='M280 380 v56 L150 496'/%3E%3C/g%3E%3Cg opacity='.55'%3E%3Cpath d='M150 496 v70 L40 600'/%3E%3Cpath d='M150 566 L270 606'/%3E%3C/g%3E%3C/svg%3E");
}
.banner-centered::before { left: max(-70px, calc(50% - 760px)); }
.banner-centered::after  { right: max(-70px, calc(50% - 760px)); transform: translateY(-50%) scaleX(-1); }
@media (max-width: 1180px) {
  .banner-centered::before, .banner-centered::after { display: none; }
}

.banner-centered .container { position: relative; z-index: 1; }

/* the headline keeps a readable measure; the benefits row runs wider so the
   three items stay on one line */
.banner-centered .banner-heading { max-width: 1060px; margin-inline: auto; }

/* scoped to the centred hero only — the site's other headings are untouched.
   A centred hero needs tight leading; the inherited 1.5 leaves the two lines
   floating apart. */
.banner-centered .banner-heading h1 {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 26px;
  font-size: clamp(2.1rem, 1.30rem + 3.40vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* ---- the three benefits, one row ------------------------------------- */
.hero-checks {
  list-style: none;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin: 0 0 34px; padding: 0;
}
.hero-checks li {
  display: flex; align-items: center; gap: 9px;
  color: #fff;
  font-size: clamp(.95rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.35;
}
.hero-checks li b { font-weight: 700; }
.hero-checks .tick {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; line-height: 1;
  color: #fff;
  background: #F26522;
  border-radius: 50%;
}
@media (max-width: 640px) {
  .hero-checks {
    flex-direction: column; align-items: flex-start;
    text-align: left; max-width: 22rem; margin-inline: auto; gap: 11px;
  }
}

/* ---- one primary action, secondary path kept quiet -------------------- */
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.banner-centered .hero-cta .btns.one {
  background-color: #F26522;
  color: #fff;
  font-size: 19px;          /* >=18.66px bold -> WCAG large-text threshold */
  font-weight: 700;
  line-height: 1.2;
  padding: 18px 42px;
  border-radius: 6px;
  transition: background-color .18s ease;
}
.banner-centered .hero-cta .btns.one:hover,
.banner-centered .hero-cta .btns.one:focus {
  background-color: #D9551A;
  color: #fff;
}

.hero-cta .hero-secondary {
  color: rgba(255,255,255,.9);
  font-size: .95rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.hero-cta .hero-secondary:hover { color: #fff; }

/* ---- proof line ------------------------------------------------------- */
.banner-centered .hero-trust {
  margin: 30px 0 0;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  line-height: 1.7;
}
.banner-centered .hero-trust b { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .banner-centered .hero-cta .btns.one { transition: none; }
}

/* ---- lead and description ---------------------------------------------
   Money pages carry a subhead and a descriptive paragraph, often holding
   local-SEO terms (city names, market wording). Both are kept and centred
   rather than dropped, so no page loses copy in the restyle. */
.banner-centered .hero-lead {
  max-width: 62ch; margin: 0 auto 18px;
  color: rgba(255,255,255,.94);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  font-weight: 500; line-height: 1.5;
}
.banner-centered .hero-desc {
  max-width: 68ch; margin: 0 auto 30px;
  color: rgba(255,255,255,.80);
  font-size: .975rem; line-height: 1.65;
}
.banner-centered .hero-desc strong { color: #fff; font-weight: 700; }

/* the split-layout illustration has no place in a centred hero */
.banner-centered .col-lg-5 { display: none; }