/* base.css — shared styles verified identical across all pages */

:root {
  --brand-red: #B7232E;
  --hero-bg:   #414042;  /* brand dark gray; change to #000000 for black */
}

body { font-family: "Figtree", sans-serif; overflow-x: hidden; }

a, a:visited, a:hover, a:active { text-decoration: none; color: var(--hero-bg); }

.jsw { color: #B7232E; }

.border-swr { border-color: var(--brand-red) !important; }

.bg-swr { background-color: #B7232E; }

.bg-swg { background-color: var(--hero-bg); }

.bg-swl { background-color: #e8e6e6; }

.colbx { background-color: #fff; }

.butgry { background-color: var(--hero-bg) !important; color: #ffffff !important; }

.butgry:hover { background-color: #e8e6e6 !important; color: #000 !important; }

.bigtan { color: var(--hero-bg) !important; }

.bigtan:hover { background-color: #B7232E !important; color: #ffffff !important; }

.red2whi { color: #B7232E; }

.bigred:hover { background-color: var(--hero-bg); }

.navtext:hover { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: #B7232E; }

.navul, .navul:hover, .navul:visited, .navul:focus, .navul:active { text-decoration: underline !important; text-underline-offset: 8px; text-decoration-thickness: 2px !important; text-decoration-color: #B7232E !important; text-decoration-style: solid !important; }

.readytochat { color: #B7232E; }

.social { padding-left: 20px; color: #B7232E !important; }

.social:hover { color: var(--hero-bg) !important; }

.logobr { width: 100%; }
/* Footer 80yrs logo: one fixed size on every page (overrides per-page sw-s## widths) */
img.logobr { width: 170px; max-width: 170px; }

.dotsrl::before { white-space: nowrap; overflow: hidden; direction: ltr; content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; }

.dots { display: flex; }

.dots::after { white-space: nowrap; overflow: hidden; direction: rtl; content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; }

.carousel-cell { width: 100%; }

.carousel img { margin: 5px; display: block; height: 600px; object-fit: cover; }

/* slideshow photos keep their own proportions: fixed row height (inherited), auto width, no crop */
.carousel img.slide-photo { width: auto !important; object-fit: contain !important; }

.event-cell:before { display: none; }

.sw-marquee-inner { display: flex; width: max-content; animation: sw-scroll 96s linear infinite; }

.sw-marquee-img { height: 380px; width: auto; object-fit: cover; margin-right: 16px; flex-shrink: 0; }

@media (max-width: 767.98px) {
  .sw-marquee-img { height: 160px; margin-right: 10px; }
  .carousel img { height: 220px !important; }
}

@keyframes sw-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.tabloidtext { line-height: 2.5; font-size: 0.9rem; }

@supports (-webkit-touch-callout: none) { html { font-size: 120%; } }

@media (min-width: 1800px) {
   .natab { width: 80% !important; }
   .natabtext { margin-right: 15%; }
   .navtext { font-size: 1.3em !important; padding-right: 20px; font-weight: 700; }
  }

@media (min-width: 2200px) {
   .natab { width: 80% !important; }
   .supportbox { --bs-gutter-x: 10rem !important; --bs-gutter-y: 5rem !important; }
   .herobox { height: 600px !important; }
   .navtext { font-size: 1.3em !important; padding-right: 20px; font-weight: 700; }
  }

.sw-s2 { position:relative }

.sw-s3 { width:44px }

.sw-s4 { width:80%;height:auto;display:block; }

.sw-s5 { color:#B7232E;cursor:pointer;width:44px;flex-shrink:0 }

.sw-s6 { width:28px;height:28px }

.sw-s7 { height:clamp(70px,7vw,90px);width:auto;display:block; }

/* ── Phase 2a: Buttons ── */
.butred { background-color: #B7232E !important; color: #ffffff !important; }
.butred:hover { background-color: #e8e6e6 !important; color: #000 !important; }
/* finish-page CTA buttons: white bg, red border, red text on hover */
.butred.finish-cta:hover { background-color: #ffffff !important; color: #B7232E !important; border: 1px solid #B7232E !important; }

/* ══════════════════════════════════════════════
   Phase 2b: EYEBROW SYSTEM — unified across all pages
══════════════════════════════════════════════ */
.titlelines, .titlelinesbl, .titlelinesrd, .titlelineswt {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: max-content;
  max-width: 92vw;
  flex-shrink: 0;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  white-space: nowrap;
}
.titlelinesrd::before, .titlelinesrd::after { content: ''; border-top: 2px solid #B7232E; width: 50px; flex: none; margin: 0 0.75em; }
.titlelinesbl::before, .titlelinesbl::after { content: ''; border-top: 2px solid #000; width: 50px; flex: none; margin: 0 0.75em; }
.titlelines::before, .titlelines::after { content: ''; border-top: 2px solid #fff; width: 50px; flex: none; margin: 0 0.75em; }
.titlelineswt::before, .titlelineswt::after { content: ''; border-top: 2px solid rgba(255,255,255,0.4); width: 50px; flex: none; margin: 0 0.75em; }

.leftline {
  display: flex; justify-content: flex-start; align-items: center; text-align: left;
  width: max-content; max-width: 100%; color: #B7232E;
  flex-shrink: 0; font-size: 0.9rem; letter-spacing: 0.12em; font-weight: 800;
}
.leftline::before { content: ''; border-top: 2px solid #B7232E; width: 50px; flex: none; margin-right: 0.75em; }

.leftlinewt {
  display: flex; justify-content: flex-start; align-items: center; text-align: left;
  width: max-content; max-width: 100%; color: #fff;
  flex-shrink: 0; font-size: 0.9rem; letter-spacing: 0.12em; font-weight: 800;
}
.leftlinewt::before { content: ''; border-top: 2px solid #fff; width: 50px; flex: none; margin-right: 0.75em; }

/* ── Section headings (unified size across all pages) ── */
.section-heading {
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1.1;
}

/* ── Font-size utilities (jsfs*) — consolidated from per-page inline sw-s## rules ── */
.jsfs0dot65em { font-size:0.65em; }
.jsfs0dot9em { font-size:0.9em; }
.jsfs1em { font-size:1em; }
.jsfs1dot1em { font-size:1.1em; }
.jsfs1dot2em { font-size:1.2em; }
.jsfs1dot25em { font-size:1.25em; }
.jsfs1dot3em { font-size:1.3em; }
.jsfs1dot5em { font-size:1.5em; }
.jsfs2em { font-size:2em; }
.jsfs2dot5em { font-size:2.5em; }
.jsfs3em { font-size:3em; }
.jsfs4em { font-size:4em; }
.jsfs3emlh1dot1 { font-size:3em; line-height:1.1; }
.jsfs2dot5emlh1dot1 { font-size:2.5em; line-height:1.1; }
.jsfs1dot3emlh1dot6 { font-size:1.3em; line-height:1.6; }
.jsfs1dot3emcb7232e { font-size:1.3em; color:#B7232E; }
.jsfs1dot4emc1877f2 { font-size:1.4em; color:#1877F2; }

/* ── Mobile offcanvas menu: larger, more tappable nav links ── */
.menucanvas .navtext {
  font-size: 1.44em !important;
  padding: 0.4rem 0 !important;
}

/* Mobile footer nav links - 25% larger than other nav */
@media (max-width: 767.98px) {
  .flex-column > .btn.navtext {
    font-size: 1.875em !important;
  }
}

/* ── READY TO CHAT button hover state ── */
.readytochat:hover {
  background-color: #B7232E !important;
  color: #fff !important;
  border-color: #B7232E !important;
}

/* ── CTA "Let's Talk" button: hover inverts to red-on-white ── */
.cta-button:hover {
  background-color: #ffffff !important;
  color: #B7232E !important;
  border-color: #ffffff !important;
}

/* ────────────────────────────────────────────────────────────
   PHASE 3: Centralized responsive rules
   These rules are identical across all 7 pages.
   Pages should not duplicate them in their inline <style> blocks.
   ──────────────────────────────────────────────────────────── */

.bi { width: 18px; height: 18px; }

@media (max-width: 575.98px) {
  @supports (-webkit-touch-callout: none) { html { font-size: 100%; } }
  .supportbox { --bs-gutter-y: 3rem !important; margin-left: 5%; margin-right: 5%; }
  .topnav { display: none; }
  .contactcanvas { --bs-offcanvas-height: 100vh; }
  .menucanvas { --bs-offcanvas-height: 520px; }
  .bi-list { width: 48px; height: 48px; }
  .navtext { font-size: 1.5em !important; font-weight: 700; }
  .readytochat { border: 1px solid #B7232E; font-size: 10pt; }
}

@media (min-width: 576px) and (max-width: 768.98px) {
  @supports (-webkit-touch-callout: none) { html { font-size: 100%; } }
  .supportbox { --bs-gutter-x: 3rem !important; --bs-gutter-y: 3rem !important; }
  .topnav { display: none; }
  .contactcanvas { --bs-offcanvas-height: 100vh; }
  .menucanvas { --bs-offcanvas-height: 520px; }
  .bi-list { width: 48px; height: 48px; }
  .navtext { font-size: 0.85em !important; font-weight: 700; }
  .readytochat { border: 1px solid #B7232E; font-size: 10pt; margin-left: 0; }
}

@media (min-width: 769px) and (max-width: 992.98px) {
  @supports (-webkit-touch-callout: none) { html { font-size: 100%; } }
  .supportbox { --bs-gutter-x: 3rem !important; --bs-gutter-y: 3rem !important; }
  .topnav { display: none; }
  .contactcanvas { --bs-offcanvas-height: 635px; }
  .navtext { font-size: 0.9em !important; font-weight: 700; }
  .readytochat { border: 1px solid #B7232E; font-size: 12pt; margin-left: 10px; }
}

@media (min-width: 992px) and (max-width: 1219.98px) {
  .supportbox { --bs-gutter-x: 3rem !important; --bs-gutter-y: 3rem !important; }
  .topnav { display: none; }
  .contactcanvas { --bs-offcanvas-height: 635px; }
  .navtext { font-size: 1.1em !important; font-weight: 700; }
  .readytochat { border: 2px solid #B7232E; font-size: 14pt; margin-left: 30px; }
}

@media (min-width: 1220px) and (max-width: 1299.98px) {
  .supportbox { --bs-gutter-x: 3rem !important; --bs-gutter-y: 3rem !important; }
  .contactcanvas { --bs-offcanvas-height: 635px; }
  .navtext { font-size: 1.2em !important; font-weight: 800; }
  .readytochat { border: 2px solid #B7232E; font-size: 14pt; margin-left: 20px; }
}

@media (min-width: 1300px) {
  .supportbox { --bs-gutter-x: 3rem !important; --bs-gutter-y: 3rem !important; }
  .contactcanvas { --bs-offcanvas-height: 675px; }
  .navtext { font-size: 1.2em !important; padding-right: 20px; font-weight: 700; }
  .readytochat { border: 2px solid #B7232E; font-size: 14pt; margin-left: 30px; }
}

@media (min-width: 1500px) {
  .navtext { font-size: 1.3em !important; padding-right: 20px; font-weight: 700; }
}

/* ────────────────────────────────────────────────────────────
   PHASE 4: Component-style rules + utilities
   Identical across the 6 main content pages.
   ──────────────────────────────────────────────────────────── */

/* Global utilities */
.navtext { color: var(--hero-bg); }
.dotsrl { display: flex; }
.flickity-button { display: none; }
.sw-marquee-track { overflow: hidden; width: 100%; }
.tdls { text-align: left; vertical-align: top; }

/* Responsive component sizing */
@media (max-width: 575.98px) {
  .testbox { height: auto; min-height: 0; }
  .supportshort { padding-left: 50px; padding-right: 50px; }
  .testimonial { width: 80%; }
  .leadsimg, .commimg { width: 90%; }
  .threeboxes { align-self: stretch; height: 350px; }
  .dots, .dotsrl { display: block; }
  .dots::before, .dots::after, .dotsrl::before, .dotsrl::after { content: ""; }
  .event-cell { margin-left: 0; margin-right: 3px; }
  .tabloidheader, .tabloidheader2 { font-size: 2.5em; }
  .bgc { background-color: #eee; }
}

@media (min-width: 576px) and (max-width: 768.98px) {
  .testbox { height: 200px; }
  .supportshort { padding-left: 50px; padding-right: 50px; }
  .testimonial { width: 80%; }
  .leadsimg, .commimg { width: 60%; }
  .statcontainer { padding-right: 5%; }
  .carousel img { height: 220px; }
  .responsive-list { list-style-type: none; padding: 0; margin: 0; }
  .cost { font-size: 1.1em; }
  .dots, .dotsrl { display: block; }
  .dots::before, .dots::after, .dotsrl::before, .dotsrl::after { content: ""; }
  .event-cell { margin-left: 0; margin-right: 3px; }
  .tabloidheader, .tabloidheader2 { font-size: 2.5em; }
  .bgc { background-color: #ddd; }
}

@media (min-width: 769px) and (max-width: 992.98px) {
  .testbox { height: 150px; }
  .supportshort { padding-left: 50px; padding-right: 50px; }
  .testimonial { width: 90%; }
  .leadsimg, .commimg { width: 40%; }
  .ctamidtext { min-height: 150px; }
  .statcontainer { padding-right: 4%; }
  .cost { font-size: 1.2em; }
  .dots, .dotsrl { display: block; }
  .dots::before, .dots::after, .dotsrl::before, .dotsrl::after { content: ""; }
  .event-cell { margin-left: 0; margin-right: 3px; }
  .tabloidheader, .tabloidheader2 { font-size: 2.5em; }
  .bgc { background-color: #ccc; }
}

@media (min-width: 992px) and (max-width: 1219.98px) {
  .supportshort { padding-left: 100px; padding-right: 100px; }
  .testbox { height: 150px; }
  .testimonial { width: 60%; }
  .leadsimg { height: 70%; }
  .commimg { width: 70%; }
  .threeboxes { align-self: stretch; text-align: center; height: 375px; }
  .apline { padding-left: 38%; padding-right: 38%; }
  .cta { margin-top: -50px !important; }
  .ctamidtext { min-height: 200px; }
  .cost { font-size: 1.5em; }
  .event-cell { margin-left: 0; margin-right: 3px; }
  .tabloidheader { font-size: 2em; }
  .tabloidheader2 { font-size: 2.5em; }
  .bgc { background-color: #bbb; }
  .herobox { height: 400px !important; }
}

@media (min-width: 1220px) and (max-width: 1299.98px) {
  .supportshort { padding-left: 100px; padding-right: 100px; }
  .testbox { height: 300px; }
  .exptabs { height: 450px; }
  .testimonial { width: 50%; }
  .leadsimg { height: 70%; }
  .commimg { width: 70%; }
  .threeboxes { align-self: stretch; height: 450px; }
  .cta { margin-top: -50px !important; }
  .ctamidtext { min-height: 130px; }
  .cost { font-size: 1.5em; }
  .event-cell { margin-left: 0; margin-right: 3px; }
  .tabloidheader { font-size: 2em; }
  .tabloidheader2 { font-size: 2.5em; }
  .bgc { background-color: #aaa; }
  .herobox { height: 425px !important; }
}

@media (min-width: 1300px) {
  .supportshort { padding-left: 12%; padding-right: 12%; }
  .testbox { height: 250px; }
  .exptabs { height: 450px; }
  .testimonial { width: 32.7%; }
  .leadsimg { width: 80%; }
  .commimg { width: 80%; }
  .natab { width: 80% !important; }
  .natabtext { margin-right: 0%; }
  .teambox { padding-right: 5% !important; padding-left: 5% !important; }
  .statcontainer { padding-left: 5% !important; padding-right: 5% !important; }
  .threeboxes { align-self: stretch; height: 450px; }
  .cost { font-size: 1.5em; }
  .carousel img { height: 400px; }
  .event-cell { margin-left: 0; margin-right: 3px; }
  .tabloidheader { font-size: 2em; }
  .tabloidheader2 { font-size: 4em; }
  .bgc { background-color: #999; }
  .herobox { height: 475px !important; }
}

@media (min-width: 1500px) {
  .testbox { height: 250px; }
  .exptabs { height: 450px; }
  .tmtext { height: 400px; }
  .leadsimg { width: 65%; }
  .commimg { width: 65%; }
  .natab { width: 80% !important; }
  .natabtext { margin-right: 10%; }
  .threeboxes { align-self: stretch; height: 350px; }
  .ctamidtext { min-height: 100px; }
}

@media (max-width: 767.98px) {
  .leftline, .leftlinewt {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
  }
  .leftline::after { content: ''; border-top: 2px solid #B7232E; width: 50px; flex: none; margin-left: 0.75em; }
  .leftlinewt::after { content: ''; border-top: 2px solid #fff; width: 50px; flex: none; margin-left: 0.75em; }
}

/* Mobile heading normalization - consistent 32px section headings */
@media (max-width: 767.98px) {
  .section-heading:not(a),
  h1.sw-s27, h2.sw-s27, h3.sw-s27, b.sw-s27, p.sw-s27,
  h1.sw-s30, h2.sw-s30, h3.sw-s30, b.sw-s30,
  h1.sw-s32, h2.sw-s32, h3.sw-s32, b.sw-s32, p.sw-s32,
  h1.sw-s37, h2.sw-s37, h3.sw-s37, b.sw-s37,
  h1.sw-s50, h2.sw-s50, h3.sw-s50, b.sw-s50, p.sw-s50,
  h1.sw-s20, h2.sw-s20, h3.sw-s20, b.sw-s20, p.sw-s20,
  h1.sw-s24, h2.sw-s24, h3.sw-s24, b.sw-s24,
  h1.sw-s28, h2.sw-s28, h3.sw-s28, b.sw-s28,
  h1.sw-s36, h2.sw-s36, h3.sw-s36, b.sw-s36, p.sw-s36,
  b.sw-s42,
  .month-heading {
    font-size: 2em !important;
    line-height: 1.2 !important;
  }
  h1.sw-s32, h2.sw-s32, h3.sw-s32 {
    font-size: 2em !important;
    line-height: 1.2 !important;
  }
  /* meet-the-team plain h1 */
  h1:not(.sw-s10):not(.sw-s12) {
    font-size: 2em !important;
    line-height: 1.2 !important;
  }
}

/* Mobile body text normalization - consistent ~19px paragraphs */
@media (max-width: 767.98px) {
  /* Eyebrow normalization - consistent 14.4px */
  .titlelinesrd, .titlelineswt, .leftline, .leftlinewt,
  h1.titlelinesrd, h2.titlelinesrd, h3.titlelinesrd, h4.titlelinesrd, h5.titlelinesrd, h6.titlelinesrd,
  h1.leftline, h2.leftline, h3.leftline, h4.leftline, h5.leftline, h6.leftline {
    font-size: 0.9rem !important;
    letter-spacing: 0.05em;
  }
  h1.sw-s10,
  p.sw-s12 {
    font-size: 2.25em !important;
    line-height: 1.1 !important;
  }
  /* CTA buttons - consistent size */
  a.sw-s12.btn, a.sw-s13.btn, a.sw-s15.btn, a.sw-s16.btn,
  a.sw-s26.btn, a.sw-s33.btn, a.sw-s34.btn, a.sw-s42.btn,
  button.sw-s15.btn, button.sw-s32.btn {
    font-size: 1.2em !important;
  }
  p.sw-s14, h4.sw-s14, .sw-s14,
  p.sw-s24,
  p.sw-s25, .sw-s25,
  p.sw-s28, .sw-s28, .award-inline-body,
  p.sw-s29, .sw-s29,
  p.sw-s30,
  p.sw-s31,
  p.sw-s37,
  p.sw-s38, .sw-s38,
  p.sw-s39,
  p.sw-s46, .sw-s46,
  p.sw-s50 {
    font-size: 1.2em !important;
    line-height: 1.5 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* ── Offcanvas close buttons (added by offcanvas-fix.js) ── */
/* Top X: vertically centered in red banner, top-right corner (desktop ≥768px) */
.offcanvas-x-pinned {
  position: absolute;
  top: 50%;
  right: 62px;
  transform: translateY(-50%);
  z-index: 1050;
  opacity: 0.9;
}
.offcanvas-x-pinned:hover,
.offcanvas-x-pinned:focus {
  opacity: 1;
}
/* Bottom X: at the end of the white content area (mobile <768px) */
.offcanvas-x-bottom {
  margin-top: 1rem;
}


/* ── Boxed canvas: cap content at 1984px on large screens, white gutters ── */
/* Note: previously had clip-path on body for rounded-canvas effect, but it
   clipped position:fixed offcanvases too (hiding the close X). Removed it —
   each individual section (.herobox, .cta-banner, #video) provides its own
   visible rounding, which is what was actually doing the work visually. */
@media (min-width: 1984px) {
  html { background: #ffffff; }
  body {
    max-width: 1984px;
    margin: 0 auto;
    background: #ffffff;
  }
  /* Hero 30% taller in boxed mode (475px × 1.3 ≈ 618px), rounded corners */
  .herobox { height: 618px !important; border-radius: 24px; }
  /* CTA banner gets matching rounded corners */
  .cta-banner { border-radius: 24px; }
}

/* ── Mobile nav menu offcanvas: full viewport height ── */
.menucanvas { height: 100vh !important; }


/* ════════════════════════════════════════════════════════════════
   FAQ section (moved from per-page inline styles -> shared here)
   Used by: index, experienced-agent, new-agent, pre-licensed
   ════════════════════════════════════════════════════════════════ */
/* ── FAQ: full-width hook bar, content inside a constrained inner ── */
.faq-section { background-color: #fff; padding-top: 0; padding-bottom: 2rem; }
.faq-wrap { max-width: 1000px; margin: 0 auto; padding: 0 1rem; }
.faq-hook-btn {
  display: block;
  width: 100%;
  background-color: #f1f1f1;
  color: #1a1a1a;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.faq-hook-btn:hover { background-color: #e8e8e8; color: #B7232E; }
.faq-hook-btn[aria-expanded="true"] { background-color: #f1f1f1; color: #B7232E; }
.faq-hook-inner {
  position: relative;
  padding: 1.5rem 4rem 1.5rem 1.5rem;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 1.3;
  text-transform: uppercase;
}
.faq-hook-icon {
  color: #B7232E;
  font-size: 1.4em;
  font-weight: 900;
  line-height: 1;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s;
}
.faq-hook-btn[aria-expanded="true"] .faq-hook-icon { transform: translateY(-50%) rotate(45deg); }

.faq-accordion { margin-top: 1rem; }
.faq-accordion .accordion-item {
  border: 1px solid #e5e5e5;
  border-radius: 12px !important;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-accordion .accordion-button {
  font-weight: 700;
  font-size: 1.3rem;
  color: #1a1a1a;
  background-color: #fff;
  padding: 1.25rem 1.5rem;
  line-height: 1.3;
}
.faq-accordion .accordion-button:not(.collapsed) { color: #B7232E; background-color: #fff; box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B7232E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.faq-accordion .accordion-body {
  padding: 0.5rem 1.5rem 1.5rem;
  color: #1a1a1a;
  line-height: 1.5;
  font-size: 1.3rem;
}
@media (max-width: 767.98px) {
  .faq-hook-inner { font-size: 1.1em; padding: 1.25rem; text-align: center; }
  .faq-hook-icon { position: static; display: block; transform: none; margin-top: 0.5rem; }
  .faq-hook-btn[aria-expanded="true"] .faq-hook-icon { transform: rotate(45deg); }
  .faq-accordion .accordion-button { font-size: 1.1rem; padding: 1rem 1.5rem; justify-content: center; text-align: center; }
  .faq-accordion .accordion-button::after { display: none; }
  .faq-accordion .accordion-body { padding: 0.5rem 1.25rem 1.25rem; font-size: 1.05rem; }
}
/* XXXXL: CTA + hook fuse into one rounded card */
@media (min-width: 1984px) {
  .cta-banner { border-radius: 24px 24px 0 0 !important; }
  .faq-hook-btn { border-radius: 0 0 24px 24px; }
}

/* unified hero headline (white line + .jsw red line via single h1+br); desktop shadow */
.herotitle { font-size:2.6em; font-weight:700; line-height:1.2; text-shadow:2px 2px 8px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9); }