/* ==========================================================================
   Business Energy page (extends style.css)
   ========================================================================== */

.page-energy {
  --navy: #102a43;
  --green: #0e7d4b;
  --green-dark: #0b6a3f;
  --tint: #e6f4ec;
  --light: #f6f8f7;
  --line: #e4e9ee;
  --body: #52606d;
  --sand: #fdf6ec;
  --sand-line: #e8d9be;
  --amber: #f5a623;
  --navy-2: #1a3a5a;
  --err: #ba1a1a;
  --err-bg: #ffdad6;
  --mute: #d5e4f4;
  background: #fff;
  color: var(--navy);
}
.page-energy h1, .page-energy h2, .page-energy h3, .page-energy h4 { color: var(--navy); }
.page-energy p { margin: 0; }
.page-energy button { font-family: inherit; }

.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }

/* Material icon helper */
.ms { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 1; flex: none; }
.ms.g { color: var(--green); }
.ms.amber { color: var(--amber); }
.stars { display: inline-flex; color: var(--amber); }
.stars .ms { font-size: 16px; }
.stars.big .ms { font-size: 18px; }

/* Buttons */
.btn-green { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 600; font-size: 14px; border: 0; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: opacity .2s, transform .15s; }
.btn-green:hover { opacity: .93; }
.btn-green:active { transform: scale(.98); }
.btn-green .ms { font-size: 18px; font-variation-settings: "FILL" 0; }
.btn-green.sm { height: 40px; padding: 0 20px; }
.btn-green.lg { height: 52px; padding: 0 32px; border-radius: 12px; box-shadow: 0 6px 14px rgba(14, 125, 75, .25); }
.btn-green.block { width: 100%; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 600; font-size: 14px; }
.btn-outline:hover { background: var(--light); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.link-green { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; font-size: 14px; }
.link-green:hover { text-decoration: underline; }
.link-green .ms { font-size: 18px; font-variation-settings: "FILL" 0; }

/* ===== Header ===== */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .05); }
.topbar { height: 36px; background: var(--navy); color: #fff; font-size: 12px; }
.topbar-in { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 24px; }
.tb-rating { display: flex; align-items: center; gap: 6px; }
.tb-rating strong { font-size: 13px; font-weight: 600; }
.tb-fca { display: flex; align-items: center; gap: 6px; color: var(--mute); }
.tb-fca .ms { color: #96f7b9; font-size: 16px; }
.tb-phone { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; }
.tb-phone .ms { color: #96f7b9; font-size: 16px; }
.tb-hours { color: var(--mute); }
.tb-div { width: 1px; height: 12px; background: rgba(73, 96, 124, .6); }
.tb-links { display: flex; gap: 12px; color: var(--mute); }
.tb-links a:hover { color: #fff; }

.mainbar { height: 76px; background: #fff; }
.mainbar-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--green); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 22px; }
.brand-mark.sm { width: 36px; height: 36px; border-radius: 8px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: var(--font-head); font-size: 24px; color: var(--navy); }
.brand-text small { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--body); margin-top: 4px; }
.brand.light b { font-family: var(--font-head); font-size: 24px; color: #fff; }

.pillnav.site-nav { margin: 0; flex: none; background: var(--light); padding: 4px; border-radius: 999px; box-shadow: 0 1px 8px rgba(0, 0, 0, .04); align-items: center; gap: 0; }
.pillnav a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #3f4941; border-radius: 999px; border: 0; white-space: nowrap; }
.pillnav a:hover { color: var(--green); }
.pillnav a.active { background: var(--tint); color: #006239; font-weight: 700; }
.pillnav .dot { width: 6px; height: 6px; background: var(--green); }
.hdr-cta { display: flex; align-items: center; gap: 12px; }
.hdr-call { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--navy); }
.hdr-call:hover { background: #ecf4ff; }

main { padding-top: 112px; }

/* Breadcrumb */
.crumbs { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 12px; color: var(--body); }
.crumbs .wrap { display: flex; align-items: center; gap: 8px; }
.crumbs a:hover { color: var(--navy); }
.crumbs .ms { font-size: 14px; color: var(--green); }
.crumbs strong { color: var(--navy); font-weight: 600; }

/* ===== Hero ===== */
.e-hero { background: #fff; padding: 90px 0 80px; }
.e-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tint-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--tint); color: var(--green); font-size: 14px; font-weight: 600; letter-spacing: .03em; padding: 6px 14px; border-radius: 999px; margin-bottom: 24px; }
.e-hero h1 { font-size: clamp(38px, 4.8vw, 60px); line-height: 1.12; margin: 0 0 24px; }
.body-lg { font-size: 18px; line-height: 1.7; color: var(--body); max-width: 500px; margin-bottom: 32px !important; }
.body { font-size: 16px; line-height: 1.7; color: var(--body); }
.trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--body); }
.tl-rating { display: flex; align-items: center; gap: 6px; }
.tl-rating strong { font-size: 14px; color: var(--navy); }
.tl-item { display: flex; align-items: center; gap: 4px; color: var(--navy); }
.tl-item .ms { font-size: 18px; }

.e-hero-visual { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; }
.glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(230, 244, 236, .7); filter: blur(48px); z-index: -1; }
.hv-photo { position: absolute; overflow: hidden; background: #fff; }
.hv-photo img { width: 100%; height: 100%; object-fit: cover; }
.hv-photo.main { position: relative; width: 420px; height: 360px; border-radius: 24px; border: 4px solid #fff; box-shadow: 0 20px 40px rgba(16, 42, 67, .18); }
.hv-photo.tr { top: 8px; right: 24px; width: 200px; height: 140px; border-radius: 16px; border: 6px solid #fff; box-shadow: 0 10px 24px rgba(16, 42, 67, .18); }
.hv-photo.bl { bottom: 8px; left: 24px; width: 190px; height: 140px; border-radius: 16px; border: 6px solid #fff; box-shadow: 0 10px 24px rgba(16, 42, 67, .18); }
.hv-badge { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 10px 24px rgba(16, 42, 67, .15); }
.hv-badge.b1 { top: -16px; left: 24px; }
.hv-badge.b2 { bottom: -16px; right: 32px; }
.hv-badge b, .float b { display: block; font-family: var(--font-head); font-size: 16px; line-height: 1.2; color: var(--navy); }
.hv-badge small, .float small { display: block; font-size: 11px; color: var(--body); margin-top: 2px; }
.ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--tint); color: var(--green); flex: none; }
.ico .ms { font-size: 20px; }
.ico.err { width: 40px; height: 40px; background: var(--err-bg); color: var(--err); }
.ico.err .ms { font-size: 24px; }
.ico.lg { width: 48px; height: 48px; border-radius: 12px; }
.ico.lg .ms { font-size: 28px; }

/* Suppliers */
.suppliers { background: var(--light); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; }
.kicker-center { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--body); margin-bottom: 32px !important; }
.supplier-list { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px 32px; opacity: .75; }
.supplier-list li { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--navy); transition: color .2s; }
.supplier-list li:hover { color: var(--green); }

/* ===== Generic sections ===== */
.e-section { padding: 96px 0; }
.e-section.white { background: #fff; }
.e-section.light { background: var(--light); }
.head { margin-bottom: 64px; }
.head.center { text-align: center; max-width: 672px; margin-left: auto; margin-right: auto; }
.head.split { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.head h2, .copy h2 { font-size: 32px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; }
.head.center .body { margin-top: 12px; }
.kicker { display: block; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.kicker.light { color: var(--tint); font-size: 12px; }
.center { text-align: center; }
.mb32 { margin-bottom: 32px !important; }
.mb48 { margin-bottom: 48px; }
.err-t { color: var(--err); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.g24 { gap: 24px; } .g32 { gap: 32px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.copy { display: flex; flex-direction: column; align-items: flex-start; }
.two-col .copy { padding-left: 24px; }
.two-col .media + .copy { padding-left: 24px; }
.two-col .copy:first-child { padding-left: 0; }
.copy .body { margin-bottom: 24px; }
.media { position: relative; }
.media-img { width: 100%; object-fit: cover; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 16px 32px rgba(16, 42, 67, .12); }
.media-img.h420 { height: 420px; }
.media-img.h460 { height: 460px; }
.float { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: 0 16px 32px rgba(16, 42, 67, .18); }
.float.warn { bottom: 24px; right: 24px; }
.float.warn small { font-size: 12px; font-weight: 600; }
.float.wide { left: 24px; right: 24px; bottom: 24px; padding: 20px; gap: 16px; border-radius: 16px; }
.float.wide b { font-family: var(--font-body); font-size: 16px; font-weight: 700; }
.float.wide small { font-size: 13px; }

.tick-list { display: grid; gap: 16px; margin-bottom: 32px; }
.tick-list li { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.tick-list.light li { color: #fff; font-size: 14px; }
.tick-list.light .ms { color: #96f7b9; }
.tick-list .ms { font-size: 20px; font-variation-settings: "FILL" 0, "wght" 600; }

/* How it works */
.step-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 64px; }
.step-cards::before { content: ""; position: absolute; top: 48px; left: 17%; right: 17%; border-top: 2px dashed rgba(14, 125, 75, .3); }
.step-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); transition: box-shadow .25s; }
.step-card:hover { box-shadow: 0 10px 24px rgba(16, 42, 67, .1); }
.step-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tint); color: var(--green); margin-bottom: 24px; }
.step-ico .ms { font-size: 32px; }
.step-ico b { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; }
.step-card h3 { font-size: 24px; margin: 0 0 12px; }
.step-card p { color: var(--body); line-height: 1.65; }

/* Tariffs */
.tariff { display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); transition: transform .25s, box-shadow .25s; }
.tariff:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(16, 42, 67, .1); }
.sq-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tint); color: var(--green); margin-bottom: 16px; }
.sq-ico .ms { font-size: 26px; }
.sq-ico.dk { background: rgba(255, 255, 255, .1); color: #fff; margin-bottom: 24px; }
.tariff h3 { font-size: 20px; margin: 0 0 8px; }
.tariff p { font-size: 15px; line-height: 1.65; color: var(--body); margin-bottom: 16px; }
.best { font-size: 12px; color: #49607c; border-top: 1px solid var(--line); padding-top: 12px; }
.best strong { color: var(--navy); }
.best strong.err-t { color: var(--err); }

/* Numbered list */
.mb32.h2 { margin-bottom: 32px; }
.copy h2.mb32 { margin-bottom: 32px !important; }
.num-list { display: grid; gap: 24px; }
.num-list li { display: flex; gap: 16px; align-items: flex-start; }
.num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--green); font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.num-list h4 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.num-list p { color: var(--body); line-height: 1.6; }

/* Navy band */
.band-wrap { padding: 24px 0; background: #fff; }
.navy-band { background: var(--navy); color: #fff; border-radius: 24px; padding: 96px 24px; }
.navy-band > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.navy-band h2 { color: #fff; text-align: center; font-size: 32px; margin-bottom: 64px; }
.band-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; padding-bottom: 64px; margin-bottom: 64px !important; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.band-stats strong { display: block; font-family: var(--font-head); font-size: 54px; line-height: 1; color: var(--tint); margin-bottom: 8px; }
.band-stats span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.dark-card { background: rgba(26, 58, 90, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 32px; }
.dark-card h3 { color: #fff; font-size: 20px; margin: 0 0 12px; }
.dark-card p { color: var(--mute); font-size: 15px; line-height: 1.65; }

/* Timeline */
.timeline-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); }
.timeline-card h4 { font-size: 18px; margin: 0 0 24px; }
.timeline { position: relative; display: grid; gap: 24px; }
.timeline::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 13px; width: 2px; background: var(--line); }
.timeline li { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.tdot { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.tdot .ms { font-size: 14px; font-variation-settings: "FILL" 0, "wght" 700; }
.timeline b { display: block; color: var(--navy); font-weight: 700; }
.timeline p { font-size: 14px; color: var(--body); line-height: 1.6; }

/* Plain cards */
.plain-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); }
.plain-card .sq-ico { margin-bottom: 24px; }
.plain-card h3 { font-size: 18px; margin: 0 0 12px; }
.plain-card p { font-size: 15px; line-height: 1.65; color: var(--body); }

/* Sand band */
.sand-wrap { background: #fff; padding: 48px 0; }
.sand-band { background: var(--sand); border: 1px solid var(--sand-line); border-radius: 24px; padding: 48px; }
.sand-kicker { display: flex; align-items: center; gap: 8px; color: #764c00; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.sand-kicker .ms { font-size: 18px; }
.sand-band h2 { font-size: 32px; margin: 0 0 16px; }
.sand-band .body { max-width: 672px; }
.sand-card { background: #fff; border: 1px solid var(--sand-line); border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); }
.sc-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sc-h .ms { font-size: 24px; }
.sc-h h3 { font-size: 18px; margin: 0; }
.sand-card p { font-size: 14px; line-height: 1.65; color: var(--body); }

/* Testimonials */
.tp-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--light); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; font-size: 14px; }
.quote-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); }
.qc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mini-tag { background: var(--tint); color: var(--green); font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.quote-card blockquote { margin: 0 0 24px; font-style: italic; line-height: 1.7; color: var(--body); }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-card figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote-card figcaption b { display: block; font-size: 14px; font-weight: 700; }
.quote-card figcaption small { font-size: 12px; color: var(--body); }

/* Guides */
.guide-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow .25s; }
.guide-card:hover { box-shadow: 0 10px 24px rgba(16, 42, 67, .1); }
.gc-img { position: relative; height: 192px; overflow: hidden; }
.gc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.guide-card:hover .gc-img img { transform: scale(1.05); }
.gc-tag { position: absolute; top: 16px; left: 16px; background: var(--green); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.gc-body { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 16px; }
.gc-body h3 { font-size: 18px; line-height: 1.35; margin: 0 0 8px; transition: color .2s; }
.guide-card:hover h3 { color: var(--green); }
.gc-body p { font-size: 14px; line-height: 1.65; color: var(--body); }
.gc-body small { font-size: 12px; color: #49607c; }

/* FAQ */
.faq-wrap { background: #fff; padding: 24px 0; }
.faq-band { background: var(--tint); border-radius: 24px; padding: 96px 24px; }
.faq-band h2 { text-align: center; font-size: 32px; margin: 0 0 64px; }
.faq2 { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.faq2-col { display: grid; gap: 16px; }
.faq2 details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(16, 42, 67, .06); }
.faq2 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--navy); }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary .ms { color: var(--green); font-size: 24px; transition: transform .2s; }
.faq2 details[open] summary .ms { transform: rotate(180deg); }
.faq2 details p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; color: var(--body); }

/* Quote form */
.quote-wrap { padding: 64px 0; background: #fff; }
.quote-band { background: var(--navy); border-radius: 32px; padding: 64px; box-shadow: 0 30px 60px rgba(16, 42, 67, .3); display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; color: #fff; }
.qb-copy h2 { color: #fff; font-size: 32px; margin: 0 0 16px; }
.qb-copy > p { color: var(--mute); line-height: 1.7; margin-bottom: 32px; }
.qb-copy .tick-list { gap: 12px; margin-bottom: 40px; }
.advisor { display: inline-flex; align-items: center; gap: 16px; background: rgba(26, 58, 90, .8); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 16px; }
.adv-img { position: relative; display: block; }
.adv-img img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.online { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 2px solid var(--navy); }
.advisor small { display: block; font-size: 12px; color: var(--mute); }
.advisor b { font-family: var(--font-head); font-size: 16px; color: #fff; }

.qb-form { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 24px; padding: 32px; box-shadow: 0 20px 40px rgba(0, 0, 0, .2); }
.steps-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.steps-head #step-count { color: var(--green); }
.steps-head .muted { color: var(--body); }
.prog { height: 8px; background: var(--light); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.prog div { height: 100%; background: var(--green); transition: width .3s; }
.fstep { display: grid; gap: 16px; margin-bottom: 20px; }
.fstep[hidden] { display: none; }
.qb-form label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.qb-form select, .field input { width: 100%; height: 48px; margin-top: 6px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font-size: 16px; font-family: inherit; text-transform: none; letter-spacing: 0; }
.qb-form select:focus, .field input:focus { outline: 2px solid var(--green); outline-offset: 0; }
.field { position: relative; display: block; }
.field .ms { position: absolute; left: 14px; top: 50%; transform: translateY(-2px); color: var(--body); font-size: 20px; margin-top: 3px; pointer-events: none; font-variation-settings: "FILL" 0; }
.field input { padding-left: 44px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; background: var(--light); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg button { height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.seg button:hover { color: var(--navy); }
.seg button.on { background: var(--tint); color: var(--green); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px !important; font-size: 12px; color: var(--body); }
.safe .ms { font-size: 16px; }

/* Footer */
.foot { background: var(--navy); color: #fff; padding: 80px 0 48px; }
.foot-grid { display: grid; grid-template-columns: 4fr 2fr 2fr 4fr; gap: 24px; margin-bottom: 48px; }
.fg-brand p { color: var(--mute); max-width: 384px; margin: 16px 0 24px; line-height: 1.6; }
.soc { display: flex; gap: 12px; }
.soc a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-2); color: var(--mute); }
.soc a:hover { color: #fff; }
.foot h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.foot li { margin-bottom: 12px; color: var(--mute); }
.foot li a:hover { color: #fff; }
.fg-news p { color: var(--mute); margin-bottom: 16px; line-height: 1.6; }
.news { display: flex; align-items: center; gap: 8px; }
.news .field { flex: 1; }
.field.dk input { margin-top: 0; height: 44px; border-radius: 999px; background: var(--navy-2); border-color: transparent; color: #fff; font-size: 16px; }
.field.dk input::placeholder { color: var(--mute); }
.field.dk .ms { color: var(--mute); margin-top: 0; }
.legal { background: rgba(26, 58, 90, .4); border-radius: 12px; padding: 24px; margin-top: 32px; }
.legal p { font-size: 12px; line-height: 1.7; color: var(--mute); margin-bottom: 16px; }
.legal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--mute); }
.ll { display: flex; gap: 24px; }
.ll a:hover { color: #fff; }

/* ===== Responsive ===== */
@media (min-width: 1025px) {
  .pillnav.site-nav { display: flex; }
  .nav-toggle { display: none; }
}
@media (max-width: 1024px) {
  .nav-toggle { display: block; margin-left: auto; }
  .pillnav.site-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; border-radius: 0; padding: 12px 24px 20px; background: #fff; box-shadow: 0 12px 20px rgba(16, 42, 67, .1); }
  .pillnav.site-nav.open { display: flex; }
  .pillnav a { border-radius: 10px; }
  .hdr-call { display: none; }
  .e-hero-grid, .two-col, .quote-band { grid-template-columns: 1fr; }
  .two-col .copy { padding-left: 0; }
  .e-hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .tb-hours, .tb-fca { display: none; }
}
@media (max-width: 800px) {
  .grid3, .step-cards, .band-stats { grid-template-columns: 1fr; }
  .grid2, .faq2 { grid-template-columns: 1fr; }
  .step-cards::before { display: none; }
  .e-section { padding: 64px 0; }
  .head { margin-bottom: 40px; }
  .navy-band, .faq-band { padding: 56px 20px; }
  .sand-band { padding: 28px 20px; }
  .quote-band { padding: 28px 18px; }
  .qb-form { padding: 22px 18px; }
  .band-stats strong { font-size: 40px; }
}
@media (max-width: 560px) {
  .tb-left .tb-div, .tb-right .tb-links { display: none; }
  .hdr-cta .btn-green span { display: none; }
  .hdr-cta .btn-green { padding: 0 14px; }
  .brand-text small { display: none; }
  .e-hero { padding: 48px 0 56px; }
  .e-hero-visual { height: 440px; }
  .hv-photo.main { width: 82%; height: 300px; }
  .hv-photo.tr { width: 150px; height: 110px; right: 0; }
  .hv-photo.bl { width: 140px; height: 110px; left: 0; }
  .hv-badge { padding: 8px; }
  .hv-badge b { font-size: 13px; }
  .hv-badge.b1 { left: 0; } .hv-badge.b2 { right: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .news { flex-direction: column; align-items: stretch; }
}

/* Breadcrumb stays visible under the fixed header */
.crumbs { position: sticky; top: 112px; z-index: 90; }

/* ===== Footer variant used on every page ===== */
.foot-grid.even { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.news.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.news.stack .field input.sq { height: 44px; border-radius: 8px; padding: 0 16px; background: var(--navy-2); border: 0; color: #fff; width: 100%; font-size: 16px; margin-top: 0; }
.news.stack .field input.sq::placeholder { color: var(--mute); }
.news.stack .btn-green.sq { border-radius: 8px; height: 44px; width: 100%; }
.legal.plainlegal { background: none; border-top: 1px solid rgba(176, 201, 232, .2); border-radius: 0; padding: 32px 0 0; margin-top: 32px; }
.legal.plainlegal p { margin-bottom: 16px; }
@media (max-width: 1100px) { .foot-grid.even { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid.even { grid-template-columns: 1fr; } }

/* ===== Form feedback ===== */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-status { margin: 14px 0 0 !important; text-align: center; font-size: 15px; line-height: 1.4; }
.form-status strong { display: block; font-weight: 700; }
.form-status small { display: block; margin-top: 2px; font-size: 13px; color: var(--body); }
.form-status.ok { color: var(--green); }
.form-status.err { color: var(--err); }
.foot .form-status.ok { color: #6ee7a8; }
.foot .form-status small { color: var(--mute); }
.form-status[hidden] { display: none; }

/* Selected option pills: solid green */
body .opts button.on, body .seg button.on, body .pills button.on { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 2px 6px rgba(14, 125, 75, .3); }
body .opts button.on:hover { background: var(--green-dark); }