/**
* Falcon Broadband Networks - Modern UI layer
* Loaded AFTER style2.css. Refreshes typography, color, spacing, and
* component styling on top of the existing BizLand markup.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
  --fbn-brand: #0b63d6;
  --fbn-brand-dark: #0a4fab;
  --fbn-brand-light: #3b8af2;
  --fbn-brand-tint: #eaf2fe;
  --fbn-accent: #00b894;

  --fbn-ink: #101828;
  --fbn-body: #475467;
  --fbn-muted: #98a2b3;
  --fbn-line: #e4e7ec;

  --fbn-surface: #ffffff;
  --fbn-canvas: #f6f8fb;
  --fbn-canvas-alt: #eef3f9;

  --fbn-radius-sm: 10px;
  --fbn-radius: 16px;
  --fbn-radius-lg: 24px;

  --fbn-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --fbn-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  --fbn-shadow-lg: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.1);

  --fbn-sans: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fbn-display: "Plus Jakarta Sans", "Inter", "Poppins", sans-serif;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fbn-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fbn-body);
  background-color: var(--fbn-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fbn-display);
  color: var(--fbn-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

a {
  color: var(--fbn-brand);
}

a:hover {
  color: var(--fbn-brand-dark);
}

img {
  max-width: 100%;
}

::selection {
  background: var(--fbn-brand);
  color: #fff;
}

*:focus-visible {
  outline: 3px solid rgba(11, 99, 214, 0.35);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
# Top bar
--------------------------------------------------------------*/
#topbar {
  background: var(--fbn-ink);
  height: 42px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

#topbar .contact-info a,
#topbar .contact-info {
  color: rgba(255, 255, 255, 0.82);
}

#topbar .contact-info a:hover {
  color: #fff;
}

#topbar .social-links a {
  color: rgba(255, 255, 255, 0.55);
}

/*--------------------------------------------------------------
# Header / navigation
--------------------------------------------------------------*/
#header {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  padding: 16px 0;
  top: 42px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
  box-shadow: none;
}

#header.header-scrolled {
  top: 0;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--fbn-shadow-sm);
}

#header .logo img {
  max-height: 46px;
  transition: max-height 0.3s ease;
}

#header.header-scrolled .logo img {
  max-height: 38px;
}

/* #topbar is d-none d-lg-flex, so it appears at >=992px. The header offset must
   flip at the same boundary or the two stack on top of each other at exactly
   992px. Bootstrap's lg edge is 991.98px, not 992px. */
@media (min-width: 992px) {
  #header {
    top: 42px;
  }
}

@media (max-width: 991.98px) {
  #header {
    top: 0;
    padding: 12px 0;
  }
}

.nav-menu > ul > li {
  padding: 8px 0 8px 6px;
}

.nav-menu a {
  font-family: var(--fbn-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--fbn-ink);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Replace the underline slide with a soft pill highlight */
.nav-menu > ul > li > a:before {
  display: none;
}

.nav-menu a:hover,
.nav-menu li:hover > a {
  background: var(--fbn-brand-tint);
  color: var(--fbn-brand);
}

.nav-menu .active > a {
  background: var(--fbn-brand-tint);
  color: var(--fbn-brand);
  font-weight: 600;
}

/* Last nav item ("Pay Online") becomes a solid CTA */
.nav-menu > ul > li:last-child > a {
  background: var(--fbn-brand);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

.nav-menu > ul > li:last-child > a:hover {
  background: var(--fbn-brand-dark);
  color: #fff;
}

.mobile-nav {
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-lg);
  padding: 12px 0;
}

.mobile-nav a {
  font-family: var(--fbn-sans);
  font-weight: 500;
  color: var(--fbn-ink);
  border-radius: var(--fbn-radius-sm);
  margin: 2px 10px;
  padding: 10px 14px;
}

.mobile-nav a:hover,
.mobile-nav .active > a {
  background: var(--fbn-brand-tint);
  color: var(--fbn-brand);
}

.mobile-nav-toggle i {
  color: var(--fbn-ink);
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
#hero {
  margin-top: 0;
  padding-top: 150px;
  padding-bottom: 96px;
  height: auto;
  min-height: 640px;
  max-height: 820px;
  display: flex;
  align-items: center;
  position: relative;
  /* Tinted scrim over the photo keeps the headline readable at any size */
  background:
    linear-gradient(100deg, rgba(4, 26, 64, 0.93) 0%, rgba(7, 52, 120, 0.84) 42%, rgba(17, 115, 214, 0.58) 100%),
    url("/images/bg-10.png") center / cover no-repeat;
  overflow: hidden;
}

/* Soft glow so the flat gradient reads as depth */
#hero:before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(59, 138, 242, 0.45) 0%, rgba(59, 138, 242, 0) 65%);
  z-index: 0;
}

#hero .container {
  position: relative;
  z-index: 2;
  padding-top: 0;
  max-width: 900px;
}

#hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}

#hero h1 {
  margin: 0 0 14px 0;
  font-family: var(--fbn-display);
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  color: #fff;
  letter-spacing: -0.03em;
}

#hero h1 span {
  color: #7fc0ff;
}

#hero h2 {
  margin: 0 0 32px 0;
  font-family: var(--fbn-sans);
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
}

#hero .d-flex {
  flex-wrap: wrap;
  gap: 14px;
}

#hero .btn-get-started {
  font-family: var(--fbn-sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  margin: 0;
  background: #fff;
  color: var(--fbn-brand-dark);
  box-shadow: 0 8px 20px rgba(3, 22, 56, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#hero .btn-get-started:hover {
  background: #fff;
  color: var(--fbn-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(3, 22, 56, 0.34);
}

#hero .btn-hero-ghost {
  font-family: var(--fbn-sans);
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 999px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#hero .btn-hero-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-stats .hero-stat strong {
  display: block;
  font-family: var(--fbn-display);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.hero-stats .hero-stat span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 992px) {
  #hero {
    padding-top: 118px;
    padding-bottom: 72px;
    min-height: 0;
    max-height: none;
  }
  #hero .container {
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  #hero {
    margin-top: 0;
    height: auto;
  }
  #hero h1 {
    margin-top: 0;
    font-size: 34px;
    line-height: 1.15;
    color: #fff;
    font-weight: 800;
  }
  #hero h2 {
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 26px;
  }
  #hero .btn-get-started,
  #hero .btn-hero-ghost {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    width: 100%;
    text-align: center;
  }
  .hero-stats {
    gap: 24px;
    margin-top: 32px;
  }
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
main#main {
  overflow: hidden;
}

/* Interior pages put <main> directly after the fixed header, so it needs to
   clear the top bar + header. The home page has the hero in between. */
#header + main#main {
  padding-top: 132px;
}

#header + main#main > section {
  padding-top: 44px;
}

#header + main#main > .inner-page:first-child {
  display: none;
}

@media (max-width: 991.98px) {
  #header + main#main {
    padding-top: 88px;
  }
  #header + main#main > section {
    padding-top: 32px;
  }
}

/*--------------------------------------------------------------
# Interior page header (compact)
--------------------------------------------------------------*/
/* Mid-page section titles on the home page stay centered and large; interior
   pages get a tighter, left-aligned header so content starts higher up. */
#header + main#main .section-title {
  text-align: left;
  max-width: none;
  padding-bottom: 22px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--fbn-line);
}

#header + main#main .section-title h2 {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fbn-brand);
  margin-bottom: 8px;
}

#header + main#main .section-title h3 {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
}

#header + main#main .section-title p {
  width: auto;
  max-width: 640px;
  margin: 10px 0 0 0;
  font-size: 15.5px;
  color: var(--fbn-body);
}

@media (max-width: 575.98px) {
  #header + main#main .section-title {
    padding-bottom: 18px;
    margin-bottom: 24px;
  }
}

section {
  padding: 84px 0;
}

@media (max-width: 768px) {
  section {
    padding: 56px 0;
  }
}

.section-bg {
  background-color: var(--fbn-canvas-alt);
}

.section-title {
  text-align: center;
  padding-bottom: 44px;
  max-width: 720px;
  margin: 0 auto;
}

.section-title h2 {
  font-family: var(--fbn-sans);
  font-size: 12px;
  letter-spacing: 0.09em;
  font-weight: 700;
  padding: 6px 16px;
  background: var(--fbn-brand-tint);
  color: var(--fbn-brand);
  border-radius: 999px;
  text-transform: uppercase;
}

.section-title h3 {
  margin: 18px 0 0 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--fbn-ink);
}

.section-title h3 span {
  color: var(--fbn-brand);
}

.section-title p {
  /* style2.css pins this to width:50% above 1024px, which reads as a narrow column */
  width: auto;
  max-width: 640px;
  margin: 14px auto 0 auto;
  font-weight: 400;
  font-size: 16px;
  color: var(--fbn-body);
}

.section-title p + p {
  margin-top: 6px;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about {
  padding-top: 84px;
}

.about iframe {
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow);
  display: block;
}

/* The markup hard-codes pl-5, which misaligns the text under the video on
   small screens where the columns stack. */
@media (max-width: 991.98px) {
  .about .content {
    padding-left: 15px !important;
    margin-top: 24px;
  }
}

.about .content h3 {
  font-weight: 700;
  font-size: 22px;
  color: var(--fbn-ink);
  margin-bottom: 10px;
}

.about .content p {
  color: var(--fbn-body);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
}

.about .content ul i {
  font-size: 22px;
  color: var(--fbn-brand);
  background: var(--fbn-brand-tint);
  border-radius: 10px;
  padding: 8px;
  line-height: 1;
  flex: 0 0 auto;
}

.about .content ul h5 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.about .content ul p {
  font-size: 15px;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing {
  padding-top: 84px;
  background: var(--fbn-canvas);
}

.pricing .row {
  align-items: stretch;
}

.pricing .box {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  background: var(--fbn-surface);
  text-align: left;
  border: 1px solid var(--fbn-line);
  box-shadow: var(--fbn-shadow-sm);
  border-radius: var(--fbn-radius);
  overflow: visible;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pricing .box:hover {
  transform: translateY(-6px);
  box-shadow: var(--fbn-shadow-lg);
  border-color: rgba(11, 99, 214, 0.35);
}

.pricing .box h3 {
  margin: 0 0 6px 0;
  padding: 0;
  background: none;
  font-family: var(--fbn-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--fbn-ink);
  letter-spacing: -0.01em;
}

.pricing .box .plan-speed {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--fbn-brand-tint);
  color: var(--fbn-brand-dark);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
}

.pricing .box .plan-speed strong {
  font-family: var(--fbn-display);
  font-size: 17px;
  font-weight: 800;
}

.pricing .box h4 {
  font-family: var(--fbn-display);
  font-size: 40px;
  color: var(--fbn-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.pricing .box h4 sup {
  font-size: 22px;
  font-weight: 700;
  top: -16px;
  left: -2px;
  color: var(--fbn-ink);
}

.pricing .box h4 span {
  color: var(--fbn-muted);
  font-family: var(--fbn-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

.pricing .box ul {
  padding: 20px 0 0 0;
  margin: 18px 0 0 0;
  list-style: none;
  color: var(--fbn-body);
  text-align: left;
  line-height: 1.5;
  font-size: 14.5px;
  border-top: 1px solid var(--fbn-line);
  flex: 1 1 auto;
}

.pricing .box ul li {
  position: relative;
  padding: 0 0 12px 26px;
}

/* Check mark drawn in CSS so no icon font is required */
.pricing .box ul li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--fbn-accent);
  border-bottom: 2px solid var(--fbn-accent);
  transform: rotate(45deg);
}

.pricing .box ul .na {
  color: var(--fbn-muted);
  text-decoration: none;
}

.pricing .box ul .na:before {
  border-color: var(--fbn-muted);
  transform: none;
  width: 10px;
  height: 0;
  top: 11px;
  border-right: none;
  border-bottom: 2px solid var(--fbn-muted);
}

.pricing .box .plan-cta {
  display: block;
  margin-top: 22px;
  padding: 12px 20px;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--fbn-brand);
  background: var(--fbn-brand-tint);
  transition: background 0.2s ease, color 0.2s ease;
}

.pricing .box .plan-cta:hover {
  background: var(--fbn-brand);
  color: #fff;
}

/* Highlighted plan */
.pricing .box.featured {
  border-color: var(--fbn-brand);
  box-shadow: 0 0 0 1px var(--fbn-brand), var(--fbn-shadow);
}

.pricing .featured h3 {
  color: var(--fbn-ink);
  background: none;
}

.pricing .box.featured .plan-cta {
  background: var(--fbn-brand);
  color: #fff;
}

.pricing .box.featured .plan-cta:hover {
  background: var(--fbn-brand-dark);
}

/* Corner ribbons replaced with a clean pill badge */
.pricing .advanced,
.pricing .popular {
  position: absolute;
  top: -13px;
  right: 20px;
  left: auto;
  width: auto;
  transform: none;
  z-index: 2;
  font-family: var(--fbn-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--fbn-brand);
  box-shadow: var(--fbn-shadow-sm);
}

.pricing .advanced {
  background: var(--fbn-ink);
}

.pricing .col-lg-3,
.pricing .col-md-6 {
  position: relative;
  margin-bottom: 26px;
}

.pricing-note {
  margin-top: 10px;
  text-align: center;
  font-size: 14.5px;
  color: var(--fbn-body);
}

/*--------------------------------------------------------------
# Referral promo
--------------------------------------------------------------*/
.referral {
  padding: 0 0 84px;
  background: var(--fbn-canvas);
}

.referral-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--fbn-radius-lg);
  background: linear-gradient(120deg, #06255c 0%, #0b4ea8 55%, #1173d6 100%);
  color: #fff;
  padding: 48px;
  box-shadow: var(--fbn-shadow-lg);
}

.referral-card:before {
  content: "";
  position: absolute;
  top: -50%;
  right: -8%;
  width: 46%;
  padding-bottom: 46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 192, 255, 0.4) 0%, rgba(127, 192, 255, 0) 68%);
}

.referral-card > * {
  position: relative;
  z-index: 1;
}

.referral-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.referral-card h3 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 800;
  margin-bottom: 12px;
}

.referral-card h3 span {
  color: #7fc0ff;
}

.referral-card p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16.5px;
  margin-bottom: 0;
  max-width: 520px;
}

.referral-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.referral-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.9);
}

.referral-steps .step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fbn-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.referral-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 13px 30px;
  border-radius: 999px;
  background: #fff;
  color: var(--fbn-brand-dark);
  font-weight: 600;
  font-size: 15.5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 20px rgba(3, 22, 56, 0.25);
}

.referral-cta:hover {
  color: var(--fbn-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(3, 22, 56, 0.32);
}

.referral-terms {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 560px;
}

@media (max-width: 768px) {
  .referral-card {
    padding: 32px 24px;
  }
  .referral-steps {
    margin-top: 28px;
  }
}

/* Slim announcement strip under the nav */
.promo-strip {
  background: var(--fbn-accent);
  color: #fff;
  text-align: center;
  font-size: 14.5px;
  font-weight: 500;
  padding: 11px 16px;
}

.promo-strip a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-strip a:hover {
  color: #fff;
  opacity: 0.85;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
/* style2.css used margin-top:200px to dodge the fixed header;
   #header + main#main now handles that offset. */
.contact {
  margin-top: 0;
}

/* Let each column stretch and its card fill it, so the cards in a row match
   height without height:100% overrunning the column's bottom margin. */
.contact .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.contact .info-box,
.contact .info-box-hours,
.contact .php-email-form {
  flex: 1 1 auto;
  width: 100%;
}

.contact .info-box {
  background: var(--fbn-surface);
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-sm);
  padding: 26px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.contact .info-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--fbn-shadow);
}

.contact .info-box i {
  font-size: 24px;
  color: var(--fbn-brand);
  background: var(--fbn-brand-tint);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  padding: 0;
}

.contact .info-box h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--fbn-ink);
  margin: 14px 0 6px 0;
}

.contact .info-box p {
  font-size: 15px;
  color: var(--fbn-body);
  margin-bottom: 0;
  line-height: 1.5;
  /* the email address is one long unbreakable token and will spill into the
     neighbouring card without this */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact .info-box-hours {
  background: var(--fbn-surface);
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-sm);
  padding: 26px;
  margin-bottom: 0;
}

.contact .info-box-hours h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--fbn-ink);
  margin-bottom: 14px;
}

.contact .info-box-hours table {
  width: 100%;
  font-size: 15px;
}

.contact .info-box-hours table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--fbn-line);
  color: var(--fbn-body);
}

.contact .info-box-hours table tr:last-child td {
  border-bottom: none;
}

.contact .info-box-hours .days {
  font-weight: 600;
  color: var(--fbn-ink);
}

.contact .php-email-form {
  background: var(--fbn-surface);
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-sm);
  padding: 26px;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius-sm);
  box-shadow: none;
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.contact .php-email-form input {
  height: 46px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--fbn-brand);
  box-shadow: 0 0 0 4px rgba(11, 99, 214, 0.12);
  outline: none;
}

.contact .php-email-form button[type="submit"] {
  background: var(--fbn-brand);
  border: 0;
  border-radius: 999px;
  padding: 13px 34px;
  color: #fff;
  font-weight: 600;
  font-size: 15.5px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact .php-email-form button[type="submit"]:hover {
  background: var(--fbn-brand-dark);
  transform: translateY(-1px);
}

.contact .php-email-form .sent-message {
  background: #e7f8f2;
  color: #05614a;
  border-radius: var(--fbn-radius-sm);
  padding: 14px 16px;
}

.contact .php-email-form .error-message {
  background: #fdecec;
  color: #9b1c1c;
  border-radius: var(--fbn-radius-sm);
  padding: 14px 16px;
}

/*--------------------------------------------------------------
# FAQ page (Bootstrap 3 panels)
--------------------------------------------------------------*/
.FAQ-section {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.panels-container {
  margin-top: 8px;
}

.panel-group .panel {
  background: var(--fbn-surface);
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-sm);
  margin-bottom: 14px;
  overflow: hidden;
}

.panels-container > .panel-group > .panel > .panel-heading {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.panel-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--fbn-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--fbn-ink);
  line-height: 1.4;
  margin: 0;
  padding: 20px 24px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.panel-title:hover {
  color: var(--fbn-brand);
}

/* The "+" is drawn as an SVG rather than a text glyph: a typed "+" sits on the
   math axis, above the em box's centre, so it never optically centres in the
   circle no matter how the box is aligned. */
.panel-title::after {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--fbn-brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.25v9.5M1.25 6h9.5' fill='none' stroke='%230b63d6' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px 12px;
  transition: transform 0.25s ease;
}

.panel-title[aria-expanded="true"]::after {
  content: "";
  transform: rotate(45deg);
}

.panel-collapse .panel-body {
  padding: 0 24px 22px 24px;
  color: var(--fbn-body);
  font-size: 15.5px;
  line-height: 1.65;
  border-top: none;
}

.faq-followup {
  margin-top: 44px;
  text-align: center;
  background: var(--fbn-surface);
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-sm);
  padding: 34px 26px;
}

.faq-followup h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--fbn-ink);
  margin-bottom: 8px;
}

.faq-followup p {
  color: var(--fbn-body);
  margin-bottom: 22px;
}

.faq-followup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.faq-cta {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  background: var(--fbn-brand);
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}

.faq-cta:hover {
  background: var(--fbn-brand-dark);
  color: #fff;
}

.faq-cta--ghost {
  background: transparent;
  color: var(--fbn-brand-dark);
  border: 1px solid rgba(11, 99, 214, 0.35);
}

.faq-cta--ghost:hover {
  background: rgba(11, 99, 214, 0.08);
  color: var(--fbn-brand-dark);
}

/*--------------------------------------------------------------
# Help / step pages (how-to-payment, reset-*)
--------------------------------------------------------------*/
.steps,
.list-class {
  background: var(--fbn-surface);
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-sm);
  padding: 26px;
}

.steps-roww {
  border-bottom: 1px solid var(--fbn-line);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.steps-roww:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.steps-roww > span {
  background: var(--fbn-brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}

.steps-roww img {
  border-radius: var(--fbn-radius-sm);
  box-shadow: var(--fbn-shadow-sm);
}

/*--------------------------------------------------------------
# Coverage
--------------------------------------------------------------*/
.contact .img-fluid {
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow);
}

.map-card {
  border-radius: var(--fbn-radius);
  overflow: hidden;
  border: 1px solid var(--fbn-line);
  box-shadow: var(--fbn-shadow);
  background: var(--fbn-surface);
}

#coverage-map {
  height: 520px;
  width: 100%;
  background: var(--fbn-canvas-alt);
}

@media (max-width: 991.98px) {
  #coverage-map {
    height: 400px;
  }
}

@media (max-width: 575.98px) {
  #coverage-map {
    height: 320px;
  }
}

/* Leaflet ships its own control chrome; nudge it toward the site's look */
.leaflet-container {
  font-family: var(--fbn-sans);
}

.leaflet-control-zoom a,
.leaflet-control-layers {
  border-radius: var(--fbn-radius-sm) !important;
  box-shadow: var(--fbn-shadow-sm);
  color: var(--fbn-ink);
}

.leaflet-control-attribution {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.85) !important;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--fbn-body);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.legend-swatch--area {
  background: rgba(17, 115, 214, 0.22);
  border: 2px solid var(--fbn-brand);
}

.legend-swatch--town {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0b2d6b;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--fbn-line);
}

.legend-note {
  margin-left: auto;
  font-size: 13px;
  color: var(--fbn-muted);
}

.map-caption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fbn-body);
}

.coverage-panel {
  background: var(--fbn-surface);
  border: 1px solid var(--fbn-line);
  border-radius: var(--fbn-radius);
  box-shadow: var(--fbn-shadow-sm);
  padding: 26px;
  height: 100%;
}

.coverage-panel h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--fbn-ink);
  margin-bottom: 16px;
}

.coverage-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
}

.coverage-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 15px;
  color: var(--fbn-body);
  border-bottom: 1px solid var(--fbn-line);
}

.coverage-list li:last-child {
  border-bottom: none;
}

.coverage-list li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--fbn-accent);
  border-bottom: 2px solid var(--fbn-accent);
  transform: rotate(45deg);
}

.coverage-check {
  background: var(--fbn-brand-tint);
  border-radius: var(--fbn-radius-sm);
  padding: 20px;
}

.coverage-check h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--fbn-ink);
  margin-bottom: 8px;
}

.coverage-check p {
  font-size: 14.5px;
  color: var(--fbn-body);
  margin-bottom: 16px;
}

.coverage-cta {
  display: block;
  text-align: center;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  background: var(--fbn-brand);
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}

.coverage-cta:hover {
  background: var(--fbn-brand-dark);
  color: #fff;
}

.coverage-cta--ghost {
  margin-top: 10px;
  background: transparent;
  color: var(--fbn-brand-dark);
  border: 1px solid rgba(11, 99, 214, 0.35);
}

.coverage-cta--ghost:hover {
  background: rgba(11, 99, 214, 0.08);
  color: var(--fbn-brand-dark);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: var(--fbn-ink);
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  padding: 0;
}

#footer .footer-newsletter {
  display: none;
}

#footer .footer-top {
  background: transparent;
  padding: 60px 0 40px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#footer .footer-top .footer-contact p,
#footer .footer-top .footer-contact {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.9;
}

#footer .footer-top .footer-contact strong {
  color: #fff;
  font-weight: 600;
}

#footer .footer-top h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
}

#footer .footer-top .footer-links ul a {
  color: rgba(255, 255, 255, 0.68);
}

#footer .footer-top .footer-links ul a:hover {
  color: #fff;
}

#footer .footer-top .social-links a {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}

#footer .footer-top .social-links a:hover {
  background: var(--fbn-brand);
  transform: translateY(-2px);
}

#footer .container.mb-5 {
  padding-top: 26px;
  text-align: center;
  margin-bottom: 0 !important;
  padding-bottom: 30px;
}

/* style2.css floats these and paints them white - undo both */
#footer .copyright,
#footer .credits {
  background: transparent;
  float: none;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

#footer .copyright strong {
  display: inline;
  font-weight: 600;
}

#footer .copyright strong span {
  color: #fff;
}

#footer .footer-parent {
  margin-top: 8px;
  text-align: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.45);
}

#footer .footer-parent strong {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

/*--------------------------------------------------------------
# Back to top
--------------------------------------------------------------*/
.back-to-top i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fbn-brand);
  box-shadow: var(--fbn-shadow);
}

.back-to-top i:hover {
  background: var(--fbn-brand-dark);
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader:before {
  border: 4px solid var(--fbn-brand-tint);
  border-top-color: var(--fbn-brand);
}

/*--------------------------------------------------------------
# Motion preferences
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}