/* ============================================================
   Custom Properties
   ============================================================ */
:root {
  --navy:        #0B1F3A;
  --navy-dark:   #071426;
  --blue:        #1A4B8C;
  --blue-mid:    #1E56A0;
  --accent:      #2E7DD1;
  --accent-light:#5B9FE4;
  --white:       #FFFFFF;
  --off-white:   #F4F7FB;
  --gray-100:    #F1F5F9;
  --gray-200:    #E2E8F0;
  --gray-400:    #94A3B8;
  --gray-600:    #475569;
  --gray-800:    #1E293B;

  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container: 1200px;
  --nav-h: 140px;
  --jump-h: 0px;   /* height of the sticky .jump-nav-wrap; set by main.js */
  --r:  8px;
  --rl: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  --ease: 220ms ease;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--gray-800); background: var(--white); }
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  color: var(--navy);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: 1rem; font-weight: 700; }

.eyebrow {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: 100px 0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .02em;
  padding: 12px 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
}
.btn-lg { padding: 15px 34px; font-size: .95rem; }

.btn-primary        { background: var(--accent);   color: var(--white); border-color: var(--accent); }
.btn-primary:hover  { background: var(--blue-mid);  border-color: var(--blue-mid); }

.btn-ghost          { background: transparent; color: var(--white); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn-ghost:hover    { color: var(--accent-light); }

.btn-white          { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-white:hover    { background: var(--off-white); }

/* Outline button for LIGHT backgrounds. Pair it with .btn-outline-white on any
   dark section (page heroes, cta strips, the Fast Track band) or the label
   inherits dark body text and disappears. */
.btn-outline             { background: transparent; color: var(--navy); border-color: var(--gray-400); }
.btn-outline:hover       { color: var(--accent); border-color: var(--accent); }

.btn-outline-white       { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-outline-white:hover { background: rgba(255,255,255,.08); border-color: var(--white); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .875rem;
  color: var(--accent);
  transition: gap var(--ease);
}
.link-arrow:hover { gap: 14px; }

/* ============================================================
   Header / Nav
   ============================================================ */
/* wrapper div is the sticky element — the header partial loads inside it */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}
/* Desktop: grid using the bar's vertical space —
   row 1: logo | nav links | Get a Quote
   row 2: Pay Now image button, centered across the full bar */
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  /* ⛔ Do NOT set this to var(--nav-h). That variable is MEASURED from
     #site-header by syncNavHeight() in main.js, and this nav sits INSIDE
     #site-header, so using it here creates a feedback loop: the nav is sized
     from a measurement that includes the nav.
     It bit us for real. While the temporary Option A/C review switcher shared
     that wrapper, every window resize folded the switcher's ~47px into the nav,
     so the bar grew on each resize (236 to 266 to 314) and only a reload reset
     it. The switcher is gone now, but the loop would return the moment anything
     else is added to the wrapper.
     The nav sizes to its own content instead: two rows, driven by the 128px
     logo. --nav-h stays purely an OFFSET for the sticky jump nav below. */
  min-height: 140px;
}
.nav-logo     { grid-row: 1 / 3; grid-column: 1; }
.nav-logo img { height: 128px; width: auto; object-fit: contain; }
.nav-links {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-links a {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-600);
  padding: 10px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color var(--ease), background var(--ease);
}

/* between full desktop and the 768px hamburger, tighten so links never crowd the logo */
@media (max-width: 1280px) {
  .nav-links a { font-size: .9rem; padding: 9px 10px; }
  .nav-cta     { font-size: .875rem; padding: 12px 22px; }
}
.nav-links a:hover { color: var(--navy); background: var(--gray-100); }
.nav-cta    { grid-row: 1; grid-column: 3; flex-shrink: 0; font-size: .95rem; padding: 13px 28px; margin-left: 2px; }

/* ePay button — official ePayPolicy image, centered below the nav links */
.nav-epay {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-block;
  line-height: 0;
  transition: filter var(--ease), transform var(--ease);
}
.nav-epay img { height: 58px; width: auto; }
.nav-epay:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nav-active { color: var(--navy) !important; background: var(--gray-100) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all var(--ease);
}

/* ============================================================
   Hero — split layout
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  min-height: 600px;
}

.hero-left {
  background: var(--navy);
  padding: 88px 64px 88px 0;
  padding-left: max(32px, calc((100vw - var(--container)) / 2 + 32px));
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
  position: relative;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 540px;
  min-width: min(100%, 540px);
}
/* diagonal clip on the right edge of hero-left */
.hero-left::after {
  content: '';
  position: absolute;
  top: 0; right: -48px; bottom: 0;
  width: 96px;
  background: var(--navy);
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.hero-left .eyebrow { color: var(--accent-light); }

.hero-left h1 {
  color: var(--white);
  margin-bottom: 24px;
}
.hero-left h1 em {
  font-style: normal;
  color: var(--accent-light);
}

.hero-sub {
  color: rgba(255,255,255,.75);
  font-size: 1.05rem;
  max-width: 480px;
  margin-bottom: 44px;
}

.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.hero-right {
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
  z-index: 0;
}
/* subtle grid pattern on hero-right */
.hero-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 280px;
  position: relative;
  z-index: 1;
}

.hero-stat-block {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--rl);
  padding: 24px 28px;
  backdrop-filter: blur(4px);
}
.hero-stat-number {
  display: block;
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.hero-stat-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-badge {
  background: var(--accent);
  border-radius: var(--rl);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--white);
}
.hero-badge i   { font-size: 1.4rem; flex-shrink: 0; }
.hero-badge span { font-family: var(--font-head); font-size: .875rem; font-weight: 700; line-height: 1.4; }

/* Hero contact card */
.hero-contact {
  flex: 0 0 280px;
  align-self: center;
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: var(--rl);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-lg);
}
.hc-eyebrow {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hc-phone {
  display: block;
  font-family: var(--font-head);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -.01em;
  transition: color var(--ease);
}
.hc-phone:hover { color: var(--accent); }
.hc-tollfree {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-top: 4px;
  transition: color var(--ease);
}
.hc-tollfree:hover { color: var(--accent); }
.hc-divider { height: 1px; background: var(--gray-200); margin: 18px 0; }
.hc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.hc-item:last-child { margin-bottom: 0; }
.hc-item > i {
  color: var(--accent);
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.hc-item-body { display: flex; flex-direction: column; }
.hc-address { font-size: .92rem; font-weight: 600; color: var(--gray-800); line-height: 1.45; }
.hc-directions {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--ease), color var(--ease);
}
.hc-directions:hover { color: var(--blue); gap: 9px; }
.hc-directions i { font-size: .72rem; }
.hc-hours { font-size: .9rem; font-weight: 500; color: var(--gray-600); }

/* ============================================================
   Affiliation bar
   ============================================================ */
.affil-bar {
  background: var(--navy-dark);
  padding: 14px 0;
  overflow: hidden;
}
.affil-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.affil-inner span {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}
.affil-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

/* ============================================================
   Services
   ============================================================ */
.services-section { background: var(--white); }

.services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.services-header h2 { margin: 0; }
.services-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.services-header-right p { color: var(--gray-600); font-size: 1.025rem; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.service-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
  padding: 20px 20px 20px 20px;
  transition: all var(--ease);
}
.service-card:hover {
  border-color: var(--accent);
  background: var(--off-white);
  box-shadow: var(--shadow);
}

.service-icon-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
  transition: background var(--ease), color var(--ease);
}
.service-card:hover .service-icon-wrap {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.service-card-body { flex: 1; }
.service-card-body h3 { font-size: .9rem; color: var(--navy); margin-bottom: 3px; }
.service-card-body p  { font-size: .8rem; color: var(--gray-600); line-height: 1.5; margin: 0; }

.service-arrow {
  font-size: .75rem;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: color var(--ease), transform var(--ease);
}
.service-card:hover .service-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* Bond directory — "What We Bond" 3-column layout */
.bond-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bond-col {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--rl);
  padding: 32px 30px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.bond-col:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.bond-col-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--gray-200);
}
.bond-col-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.bond-col-head h3 { font-size: 1.2rem; color: var(--navy); margin-bottom: 4px; }
.bond-col-head p  { font-size: .85rem; color: var(--gray-600); line-height: 1.45; margin: 0; }
.bond-group { margin-bottom: 16px; }
.bond-group-label {
  display: block;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 5px;
}
.bond-group-items { font-size: .9rem; color: var(--gray-800); line-height: 1.55; margin: 0; }
.bond-list { list-style: none; margin: 0; padding: 0; }
.bond-list li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: .95rem;
  color: var(--gray-800);
  border-bottom: 1px solid var(--gray-100);
}
.bond-list li:last-child { border-bottom: none; }
.bond-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.bond-list li.bond-list-more { color: var(--gray-600); font-style: italic; }
.bond-list li.bond-list-more::before { background: var(--gray-400); }
.bond-col-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  transition: gap var(--ease), color var(--ease);
}
.bond-col-link:hover { gap: 12px; color: var(--blue); }
.bond-catchall { text-align: center; margin-top: 32px; color: var(--gray-600); font-size: 1rem; }
.bond-catchall a {
  color: var(--accent);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--ease), color var(--ease);
}
.bond-catchall a:hover { gap: 12px; color: var(--blue); }

/* ============================================================
   Stats Callout
   ============================================================ */
.stats-callout {
  background: var(--navy);
  padding: 80px 0;
}
.stats-callout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat-callout-item {
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.stat-callout-item:first-child { padding-left: 0; }
.stat-callout-item:last-child  { border-right: none; }

.sc-number {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
.sc-label {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent-light);
  margin-bottom: 12px;
}
.sc-desc {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}

/* ============================================================
   Why SBAI
   ============================================================ */
.why-section { background: var(--off-white); }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Left visual column */
.why-visual-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.why-block {
  border-radius: var(--rl);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.why-block-icon {
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.why-block strong {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  display: block;
}
.why-block p { font-size: .875rem; margin: 0; line-height: 1.55; }

.why-block--blue  {
  background: var(--blue);
  color: var(--white);
}
.why-block--blue .why-block-icon { color: var(--accent-light); }
.why-block--blue p { color: rgba(255,255,255,.75); }

.why-block--navy  {
  background: var(--navy);
  color: var(--white);
}
.why-block--navy .why-block-icon { color: var(--accent-light); }
.why-block--navy p { color: rgba(255,255,255,.7); }

.why-block--accent {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--navy);
}
.why-block--accent .why-block-icon { color: var(--accent); }
.why-block--accent p { color: var(--gray-600); }

/* Right content column */
.why-content-col { padding-top: 8px; }
.why-content-col h2 { margin-bottom: 20px; }
.why-body {
  color: var(--gray-600);
  font-size: 1.025rem;
  margin-bottom: 32px;
  line-height: 1.7;
}
.why-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9rem;
  color: var(--gray-700, #374151);
}
.why-list li i {
  color: var(--accent);
  font-size: .75rem;
  margin-top: 4px;
  flex-shrink: 0;
}

/* ============================================================
   Testimonials (slider)
   ============================================================ */
.testimonials-section { background: var(--white); }

.testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}
.testimonials-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.t-prev, .t-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  background: var(--white);
  color: var(--navy);
  font-size: .875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease);
}
.t-prev:hover, .t-next:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.testimonials-slider-wrap {
  overflow: hidden;
}
.testimonials-slider {
  display: flex;
  gap: 24px;
  transition: transform 400ms cubic-bezier(.4,0,.2,1);
}
.testimonial-card {
  flex: 0 0 calc(33.333% - 16px);
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--rl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stars { color: #F59E0B; font-size: .8rem; letter-spacing: 3px; }
.testimonial-card p {
  font-size: .9rem;
  color: var(--gray-600);
  line-height: 1.75;
  flex: 1;
  font-style: italic;
}
.reviewer {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.t-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--ease), width var(--ease);
}
.t-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

/* ============================================================
   Interior Page Hero — shared by every page except the homepage
   (services, contractors, insurance-agents, applications, faq, contact)
   ============================================================ */
.page-hero {
  background: linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 60%, var(--blue) 100%);
  padding: 72px 0;
}
.page-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.page-hero .eyebrow { color: var(--accent-light); }
.page-hero h1       { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.page-hero-sub      { color: rgba(255,255,255,.72); font-size: 1.025rem; max-width: 540px; line-height: 1.7; }
.page-hero-cta      { display: flex; gap: 16px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }

@media (max-width: 768px) {
  .page-hero-inner { flex-direction: column; align-items: flex-start; }
  .page-hero-cta   { flex-direction: row; }
}
@media (max-width: 520px) {
  .page-hero-cta { flex-direction: column; width: 100%; }
  .page-hero-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Jump Nav — sticky in-page category nav (services, faq)
   Paired with initJumpNav() in main.js, which highlights the active link.
   ============================================================ */
.jump-nav-wrap {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  box-shadow: var(--shadow-sm);
}
.jump-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 0;
}
.jump-nav::-webkit-scrollbar { display: none; }

.jump-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
  padding: 7px 14px;
  border-radius: 20px;
  white-space: nowrap;
  transition: all var(--ease);
  border: 1px solid transparent;
}
.jump-link i { font-size: .7rem; }
.jump-link:hover   { color: var(--navy); background: var(--gray-100); }
.jump-link.active  { color: var(--white); background: var(--accent); border-color: var(--accent); }

/* Anchor targets must clear BOTH sticky bars (the header and, where present, the
   jump bar) or those bars cover the top of the section and it reads as having
   scrolled too far. Both heights are published by syncNavHeight() in main.js, so
   this stays correct on mobile too. --jump-h is 0px on pages with no jump bar,
   so the same rule is correct everywhere.

   Deliberately `section[id]` and NOT a list of page-specific classes. It used to
   be `.bond-section, .faq-group`, which silently broke privacy.html the moment it
   was added with `.pp-section`: clicking a jump link scrolled the sticky left rail
   into place (it re-pins itself below the bars) while the prose column's opening
   sentences stayed hidden underneath them, so only half the page looked wrong.
   EVERY anchor target on this site is a <section id>, so matching on that means a
   new page cannot forget to opt in. Do not narrow this back to class names. */
section[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--jump-h) + 16px);
}

/* ============================================================
   CTA Strip
   ============================================================ */
.cta-strip { background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 100%); padding: 72px 0; }
.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cta-strip h2 { color: var(--white); margin-bottom: 10px; }
.cta-strip p  { color: rgba(255,255,255,.7); font-size: 1.025rem; }
.cta-strip-actions { display: flex; gap: 16px; flex-wrap: wrap; flex-shrink: 0; }

/* ============================================================
   Shared form component  (.ct-* )
   Used by BOTH contact.html and applications.html, which is why it lives
   here rather than in a per-page file.

   NAMING WART, knowingly kept: the prefix is `ct-` (it started life on the
   contact page). It is NOT contact-specific any more. Renaming it would mean
   editing every class on a working, tested form for no functional gain, so the
   prefix stays and this note explains it.

   Markup contract, so both pages stay in sync:
     .ct-form-box > form.ct-form
       .ct-row            two fields side by side, stacks under 768px
       .ct-field          label + input/textarea/select
       .ct-field--error   red outline, added by js/contact.js on validation
       .ct-honeypot       offscreen spam trap
       .ct-consent        marketing opt-in + consent note
       .ct-form-foot      submit button + required-field note
       .ct-status         live region for pending/success/error
   ============================================================ */
/* ============================================================
   Form
   ============================================================ */
.ct-form-col h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom: 14px;
}
.ct-form-intro {
  color: var(--gray-600);
  font-size: 1.025rem;
  line-height: 1.75;
  margin-bottom: 32px;
}

/* Tinted panel behind the form. The inputs are white, so without this they
   bleed into the white section background and only their thin borders read. */
.ct-form-box {
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--rl);
  padding: 32px;
}

.ct-form { display: flex; flex-direction: column; gap: 20px; }

.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ct-field { display: flex; flex-direction: column; }
.ct-field label {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.ct-field label span { color: var(--accent); }

.ct-field input,
.ct-field textarea,
.ct-field select {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--gray-800);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
  padding: 13px 15px;
  transition: border-color var(--ease), box-shadow var(--ease);
  width: 100%;
}
.ct-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* Select: the native control is styled inconsistently across browsers, so the
   platform arrow is removed and replaced with an inline SVG chevron. The SVG is
   a data URI because the site has a strict no-external-assets habit, and padding
   on the right keeps long option text off the chevron. */
.ct-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
/* An unchosen select shows the placeholder option, so grey it to match a real
   input placeholder instead of looking like a filled-in answer. */
.ct-field select:invalid { color: var(--gray-400); }

.ct-field input::placeholder,
.ct-field textarea::placeholder { color: var(--gray-400); }

.ct-field input:focus,
.ct-field textarea:focus,
.ct-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,125,209,.14);
}

.ct-field--error input,
.ct-field--error textarea,
.ct-field--error select {
  border-color: #D14343;
  box-shadow: 0 0 0 3px rgba(209,67,67,.12);
}

/* Honeypot: kept in the layout but visually gone and out of tab order */
.ct-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   Consent block
   Sits above the submit button so the agreement is read before the
   click, not after it. The checkbox is marketing only and optional;
   consent to a reply about the request itself is the note underneath.
   ============================================================ */
.ct-consent {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
}
.ct-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--gray-600);
}
/* Sized up from the browser default, which is too small to hit on a phone
   and too small to read as a deliberate choice. */
.ct-consent-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: .12em;
  accent-color: var(--accent);
  cursor: pointer;
}
.ct-consent-check:hover { color: var(--gray-800); }

.ct-consent-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--gray-400);
}
.ct-consent-note a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ease);
}
.ct-consent-note a:hover { color: var(--accent); }

.ct-form-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ct-form-foot .btn { cursor: pointer; }
.ct-form-foot .btn:disabled { opacity: .6; cursor: default; }
.ct-required-note {
  font-size: .82rem;
  color: var(--gray-400);
  margin: 0;
}
.ct-required-note span { color: var(--accent); }

/* Status messages */
.ct-status { font-size: .9rem; line-height: 1.65; }
.ct-status:empty { display: none; }
.ct-status--pending {
  color: var(--gray-600);
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
}
.ct-status--success {
  color: #1B6B3A;
  background: #E8F6EE;
  border: 1px solid #B7E0C7;
  border-left: 3px solid #2E9C5B;
  border-radius: var(--r);
  padding: 14px 17px;
  font-weight: 500;
}
.ct-status--error {
  color: #8C2B2B;
  background: #FCEDED;
  border: 1px solid #F0C4C4;
  border-left: 3px solid #D14343;
  border-radius: var(--r);
  padding: 14px 17px;
}
.ct-status a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* Responsive rules for the form component. These live WITH the component
   rather than in a page file, so both pages using it stay correct. */
@media (max-width: 768px) {
  .ct-row      { grid-template-columns: 1fr; gap: 20px; }
  .ct-form-box { padding: 24px 20px; }
}
@media (max-width: 520px) {
  .ct-form-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .ct-form-foot .btn { width: 100%; justify-content: center; }
  .ct-required-note { text-align: center; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,.65); padding-top: 72px; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  padding-bottom: 56px;
}
/* NOTE: the footer logo was removed 2026-07-28. It used
   `filter: brightness(0) invert(1)` to render white on the dark footer, but
   logo.jpg is a JPEG with NO alpha channel, so the filter turned the entire
   rectangle solid white instead of just the mark. It showed as a white block.
   That trick only works on a PNG/SVG with transparency. The space now holds
   the payment methods below. */

/* Payment methods
   The card artwork is dark on transparent (Visa navy, cash dark green), so it
   would disappear straight into the dark footer. Each icon sits on a white
   tile, which is both legible and the conventional way to badge payments. */
.footer-pay { margin-top: 26px; }
.footer-pay-label {
  display: block;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}
.footer-pay-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.footer-pay-list li {
  background: var(--white);
  border-radius: 5px;
  padding: 5px 8px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-pay-list img {
  display: block;
  height: 19px;
  width: auto;
}
.footer-brand .footer-pay-note {
  font-size: .74rem;
  color: rgba(255,255,255,.4);
  line-height: 1.55;
  margin: 0;
}
.footer-brand .footer-pay-note a {
  color: rgba(255,255,255,.6);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.footer-brand .footer-pay-note a:hover { color: var(--white); }
.footer-brand p    { font-size: .875rem; line-height: 1.7; color: rgba(255,255,255,.5); }
.footer-affil      { margin-top: 16px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45) !important; }

.footer-col h4 {
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255,255,255,.3);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a  { font-size: .875rem; color: rgba(255,255,255,.55); transition: color var(--ease); }
.footer-col a:hover { color: var(--white); }

.footer-contact-col p { font-size: .875rem; color: rgba(255,255,255,.55); margin-bottom: 14px; line-height: 1.65; }
.footer-contact-col a { color: rgba(255,255,255,.55); transition: color var(--ease); }
.footer-contact-col a:hover { color: var(--white); }

/* Google Maps directions link. Sits tight under the address, and is coloured
   as an action rather than inheriting the muted phone-link grey above. */
.footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -6px;
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  transition: gap var(--ease), color var(--ease);
}
.footer-contact-col .footer-map-link { color: var(--accent-light); }
.footer-contact-col .footer-map-link:hover { color: var(--white); gap: 11px; }
.footer-map-link i { font-size: .66rem; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding: 22px 0; }
.footer-bottom p { font-size: .78rem; color: rgba(255,255,255,.45); }
/* Copyright left, legal links right. Collapses to stacked and centred on
   narrow screens, which is why the <p> no longer hardcodes text-align. */
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  transition: color var(--ease);
}
.footer-legal a:hover { color: var(--white); }
@media (max-width: 620px) {
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr 340px; }
  .hero-left { padding-left: 32px; }
  .why-grid { gap: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .stats-callout-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .stat-callout-item { padding: 0 0 32px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat-callout-item:nth-child(3),
  .stat-callout-item:nth-child(4) { border-bottom: none; padding-bottom: 0; }
}

@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .container { padding: 0 20px; }

  /* Nav — two-row grid: logo + burger on top, Pay Now under the logo */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: auto;
    padding-top: 10px;
    padding-bottom: 12px;
    row-gap: 10px;
  }
  .nav-logo   { grid-row: 1; grid-column: 1; }
  .nav-toggle { grid-row: 1; grid-column: 2; margin-left: 0; }
  .nav-epay   { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    gap: 2px;
    z-index: 99;
  }

  /* Hero */
  .hero { grid-template-columns: 1fr; }
  .hero-left { padding: 64px 20px; }
  .hero-contact { flex-basis: auto; width: 100%; max-width: 400px; }
  .hero-left::after { display: none; }
  .hero-right { padding: 40px 20px; }

  /* Affil bar */
  .affil-inner { gap: 14px; }

  /* Services */
  .services-header { grid-template-columns: 1fr; gap: 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .bond-columns { grid-template-columns: 1fr; }

  /* Why */
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-visual-col { order: 2; }
  .why-content-col { order: 1; }

  /* Testimonials */
  .testimonial-card { flex: 0 0 calc(80vw); }

  /* CTA */
  .cta-strip-inner { flex-direction: column; text-align: center; }
  .cta-strip-actions { justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 520px) {
  .hero-left h1 { font-size: 2.1rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; }

  .stats-callout-grid { grid-template-columns: 1fr; }
  .stat-callout-item { padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat-callout-item:last-child { border-bottom: none; padding-bottom: 0; }

  .testimonial-card { flex: 0 0 calc(90vw); }

  .cta-strip-actions { flex-direction: column; width: 100%; }
  .cta-strip-actions .btn { width: 100%; justify-content: center; }

  .footer-grid { grid-template-columns: 1fr; }
}