/* ============================================================
 SHARED SITE STYLESHEET
 Base variables, fonts, header, footer and common components.
 Linked from every page — editing this file updates every page
 that includes it (rather than the header/footer markup itself,
 which lives in js/header.js and js/footer.js).
 ============================================================ */

@font-face {
  font-family: 'Cabinet Grotesk Extrabold';
  src: url('../fonts/CabinetGrotesk-Extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk Black';
  src: url('../fonts/CabinetGrotesk-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk Bold';
  src: url('../fonts/CabinetGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk Regular';
  src: url('../fonts/CabinetGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat Medium';
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat Bold';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat SemiBold';
  src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --navy: #081e3d;
  --navy-2: #0e2c56;
  --gold: #f4b342;
  --gold-light: #ffcb63;
  --paper: #f6f7f9;
  --ink: #081e3d;
  --muted: #5c6b82;
  --line: #e3e7ee;
  --teal: #5fd8c8;
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
img { display: block; max-width: 100%; }

/* ---------- Header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  max-width: 1160px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.2px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo span { color: var(--gold); }
.logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.logo-img-mobile { display: none; }
.logo-img-squeeze {
  display: none;
  height: 32px;
  width: auto;
}
@media (min-width: 1001px) and (max-width: 1160px) {
  .logo-img { display: none; }
  .logo-img-squeeze { display: block; }
}
@media (max-width: 600px) {
  .logo-img { display: none; }
  .logo-img-mobile { display: block; height: 27.2px; }
  .nav-cta { padding-left: 26px; }
}
nav.links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.links a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  font-family: 'Montserrat SemiBold', 'Cabinet Grotesk', sans-serif;
  transition: color .2s ease;
}
nav.links a:hover { color: var(--gold); }
.nav-item { position: relative; }
.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-item > a .caret { font-size: 10px; transition: transform .18s ease; }
.nav-item:hover > a .caret,
.nav-item:focus-within > a .caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  background: #1f2f45;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  padding: 0;
  min-width: 200px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 50;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  white-space: nowrap;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { background: #303f53; color: var(--gold); }
.nav-cta {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 6.27px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-cta svg { display: block; flex-shrink: 0; }
.nav-cta:hover { background: rgba(255,255,255,0.15); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-book-call {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  padding: 6.27px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .2s ease, border-color .2s ease;
}
.nav-book-call svg { display: block; flex-shrink: 0; }
.nav-book-call:hover { background: transparent; color: var(--gold); }
.nav-toggle { display: none; }

.mobile-nav {
  display: none;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 24px 20px;
}
.mobile-nav.open { display: block; }
.mobile-nav-heading {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-family: 'Montserrat SemiBold', 'Cabinet Grotesk', sans-serif;
  padding: 14px 0 6px;
}
.mobile-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Montserrat SemiBold', 'Cabinet Grotesk', sans-serif;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav a.mobile-sub-link {
  padding-left: 14px;
  font-size: 14px;
  color: rgba(255,255,255,0.45);
}
.mobile-nav a.mobile-nav-heading {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-family: 'Montserrat SemiBold', 'Cabinet Grotesk', sans-serif;
  padding: 14px 0 6px;
  border-bottom: none;
  cursor: pointer;
}
.mobile-nav a:hover { color: var(--gold); }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav-actions {
  display: flex;
  gap: 10px;
  padding: 16px 0 4px;
}
.mobile-nav-actions a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
}
.mobile-nav-actions a svg { display: block; flex-shrink: 0; }
.mobile-nav-actions .mobile-book-call {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  transition: background .2s ease, color .2s ease;
}
.mobile-nav-actions .mobile-client-login {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  transition: background .2s ease;
}
.mobile-nav-actions .mobile-book-call:hover { background: transparent; color: var(--gold); }
.mobile-nav-actions .mobile-client-login:hover { background: rgba(255,255,255,0.15); color: #fff; }

@media (max-width: 1000px) {
  nav.links { display: none; }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    order: 2;
  }
  .nav-actions { display: none; }
}
@media (min-width: 1001px) {
  .mobile-nav { display: none !important; }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover { background: var(--gold-light); }
.btn-outline {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
}
.btn-outline:hover { border-color: #fff; }

/* ---------- Video play button (site-wide default) ----------
   Use on any video placeholder or thumbnail. Structure:
   <button type="button" class="video-play-btn" aria-label="Play video">
     <img src="images/Play.svg" alt="" class="video-play-icon">
   </button>
   Add the "overlay" modifier when the button sits on top of a
   real image/thumbnail (rather than inside a flex-centered
   empty placeholder) so it centers via absolute positioning. */
.video-play-btn {
  width: 84px;
  height: 84px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.video-play-btn:hover { transform: scale(1.08); }
.video-play-icon { width: 100%; height: 100%; display: block; }
.video-play-btn.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.video-play-btn.overlay:hover { transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 600px) {
  .video-play-btn { width: 45px; height: 45px; }
}

/* ---------- Section shared ---------- */
section { padding: 84px 0; }
.section-head { max-width: 620px; margin: 0 0 44px; }
.kicker { color: var(--gold); background: rgba(244,179,66,0.12); display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.kicker.on-light { background: #fdf1dc; }
.section-title { font-size: 32px; line-height: 1.15; font-weight: 700; margin: 0 0 14px; letter-spacing: -0.3px; }
.section-desc { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0; }
.sub-heading { font-size: 19px !important; font-weight: 400 !important; }
.title-underline { position: relative; padding-bottom: 10px; }
.title-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.google-reviews-badge { display: flex; align-items: center; margin-top: 16px; }
.google-reviews-logo { height: 32px; width: auto; display: block; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  padding: 64px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-grid > .footer-col:last-child {
  justify-self: end;
  text-align: left;
}
.footer-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.footer-logo-img { height: 28px; width: auto; display: block; }
.footer-tag { font-size: 12px; line-height: 1.6; max-width: 280px; margin: 0 0 22px; color: rgba(255,255,255,0.75); font-family: 'Montserrat Medium', 'Cabinet Grotesk', sans-serif; }
.footer-slogan { margin: 0 0 22px; }
.footer-slogan-img { height: 22px; width: auto; display: block; }
.footer-medals { margin-bottom: 14px; }
.footer-medals img { height: 51px; width: auto; }
.footer-caption { font-size: 13px; color: rgba(255,255,255,0.6); font-family: 'Montserrat Medium', 'Cabinet Grotesk', sans-serif; }

.footer-col h4 { color: var(--gold); font-size: 12.5px; letter-spacing: 0.6px; margin: 0 0 18px; font-weight: 700; text-transform: uppercase; font-family: 'Montserrat Bold', 'Cabinet Grotesk', sans-serif; }
.footer-heading { color: #f4b342; font-size: 12.5px; letter-spacing: 0.6px; margin: 0 0 18px; font-weight: 700; text-transform: uppercase; font-family: 'Montserrat Bold', 'Cabinet Grotesk', sans-serif; }
.footer-col a, .footer-col p { display: block; color: #fff; text-decoration: none; font-size: 15px; margin-bottom: 14px; line-height: 1.5; font-family: 'Montserrat Medium', 'Cabinet Grotesk', sans-serif; }
.footer-col a:hover { color: var(--gold); }
.footer-col a.no-hover-gold:hover { color: #fff; }
.footer-locations { white-space: nowrap; }
.footer-locations .footer-location { display: inline; color: var(--gold); font-weight: 600; font-family: 'Montserrat SemiBold', 'Cabinet Grotesk', sans-serif; }
.footer-locations span:not(.footer-location) { display: inline; color: rgba(255,255,255,0.4); margin: 0 6px; }

.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 0; }

.footer-mid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding: 36px 0;
  align-items: start;
}
.footer-social { display: flex; gap: 12px; flex-wrap: nowrap; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.footer-social a img { width: 100%; height: 100%; }
.footer-social a:hover { opacity: 0.8; }
.footer-members { display: flex; align-items: center; gap: 36px; flex-wrap: nowrap; opacity: 0.5; }
.footer-members img { height: 30px; }
.footer-members img.reiq-logo { height: 25.5px; }

.footer-bottom {
  padding-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-family: 'Montserrat Medium', 'Cabinet Grotesk', sans-serif;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-mid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid > .footer-col:last-child { justify-self: start; text-align: left; }
}
@media (max-width: 600px) {
  .footer-bottom { font-size: 12px; }
  .footer-members {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    align-items: center;
    gap: 24px 32px;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Caifu Video Template
   --------------------------------------------------------------------------
   Reusable YouTube video player component (video.js + videojs-youtube tech,
   fully custom controls, native YouTube chrome suppressed). Drop the markup
   from templates/caifu-video-template.html into any page and set
   data-youtube-url on the .caifu-video element — that is the only input
   that changes between instances. Poster thumbnails, controls, and mobile/
   desktop behavior are handled automatically by js/caifu-video.js.
   Requires this page to also load, once, in this order:
     <link rel="stylesheet" href="https://vjs.zencdn.net/8.16.1/video-js.css">
     ...
     <script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/videojs-youtube@3/dist/Youtube.min.js"></script>
     <script src="js/caifu-video.js"></script>
   ========================================================================== */
.caifu-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Safari (and any browser) that mishandles aspect-ratio on an element with
   no intrinsic content collapses this box to 0 height, which hides the
   poster and leaves only the absolutely-positioned controls floating on the
   page background. This padding-bottom fallback guarantees the 16:9 box
   always has real height even if aspect-ratio is ignored or fails to apply. */
@supports not (aspect-ratio: 16 / 9) {
  .caifu-video-wrap { height: 0; padding-bottom: 56.25%; }
}
@media (max-width: 600px) {
  .caifu-video-wrap { border-radius: 14px; }
}
/* Equity Eligibility Check video (the first .bie-fee-card in the "Ready to
   get started?" section) sits flush against the fee-block text below it,
   not against a rounded card edge — so only round its top corners to match
   the card, and square off the bottom so it doesn't look like a mismatched
   gap against the white card background. */
.bie-fee-media .caifu-video-wrap { border-radius: 20px 20px 0 0; }
@media (max-width: 600px) {
  .bie-fee-media .caifu-video-wrap { border-radius: 14px 14px 0 0; }
}
/* "Fullscreen" is a self-contained CSS class we toggle ourselves from
   js/caifu-video.js (.caifu-video-fs-active), not the real browser
   Fullscreen API. Two things ruled the native API out: video.js reacts to
   ANY native fullscreenchange event on the document — not just ones it
   triggered itself — by adding its own .vjs-fullscreen class, which its
   stylesheet forces to position:fixed + z-index:1000, yanking the player
   over the whole viewport above our controls no matter which element we
   actually asked to go fullscreen; and iOS Safari's support for
   requestFullscreen() on a non-<video> element is inconsistent — it can
   visually "expand" an element without ever hiding Safari's own chrome.
   The rule below neutralizes .vjs-fullscreen as a safety net in case
   anything still triggers it; the .caifu-video-fs-active rules are the
   real, fully self-controlled fullscreen implementation. */
.video-js.caifu-video.vjs-fullscreen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: auto !important;
}
.caifu-video-wrap.caifu-video-fs-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* iOS Safari: 100vh ignores the address bar's docked/expanded
                     state, leaving a gap at the bottom where page content and
                     the browser chrome show through. 100dvh tracks the real
                     visible viewport instead. */
  aspect-ratio: auto;
  border-radius: 0;
  background: #000;
  z-index: 2147483000;
}
html.caifu-video-fs-lock,
body.caifu-video-fs-lock {
  overflow: hidden;
}
.caifu-video-wrap.caifu-video-fs-active .caifu-video-controls {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (max-width: 600px) {
  .caifu-video-wrap.caifu-video-fs-active .caifu-video-ctrl-btn {
    padding: 10px;
  }
  .caifu-video-wrap.caifu-video-fs-active .caifu-video-ctrl-btn svg {
    width: 22px;
    height: 22px;
  }
}
.video-js.caifu-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-js.caifu-video video,
.video-js.caifu-video .vjs-tech {
  width: 100%;
  height: 100%;
}
/* Safari promotes the poster image and the YouTube iframe onto their own
   compositing layers (needed below via transform: translateZ(0), so they
   stack correctly on iOS) — and WebKit has a long-standing bug where
   overflow:hidden + border-radius on an ancestor fails to clip a composited
   descendant, letting its square corners poke out over the wrap's rounded
   navy background instead of the video reaching all the way to the rounded
   edge. Rounding each composited layer directly (tracking whatever radius
   the wrap currently has, including the bie-fee-media override above) fixes
   it at the source instead of depending on ancestor clipping. */
.video-js.caifu-video,
.video-js.caifu-video .vjs-tech,
.video-js.caifu-video .vjs-poster,
.video-js.caifu-video .vjs-poster img {
  border-radius: inherit;
  overflow: hidden;
}
/* The embedded YouTube iframe has its own hover-triggered overlay (title,
   logo, "watch on YouTube" chrome) that YouTube's own script fades out on a
   ~3-4s delay after the mouse leaves — that timing lives inside YouTube's
   cross-origin iframe, so our CSS/JS can't shorten it directly. Since every
   control here (big play button, progress bar, mute/fullscreen/quality) is
   our own custom UI and none of it needs direct mouse interaction with the
   iframe itself, blocking pointer events on the iframe stops the mouse from
   ever reaching YouTube's player — so its overlay never appears/fades at all. */
.video-js.caifu-video .vjs-tech {
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
}
/* Some mobile browsers (notably iOS Safari) composite an <iframe> onto its
   own layer and can render it above sibling elements regardless of the
   z-index stacking order, unless those siblings are also promoted onto their
   own compositing layer via a transform. Giving the poster and the big play
   button an explicit transform (even a no-op translateZ(0)) forces that
   promotion so they reliably stack above the YouTube iframe on mobile. */
.video-js.caifu-video .vjs-poster {
  background-size: cover;
  background-position: center;
  z-index: 2;
  transform: translateZ(0);
}
/* video.js renders the actual poster as an <img> inside .vjs-poster (wrapped
   in a <picture>), and its own default stylesheet sets that img to
   object-fit: contain with max-width/max-height: 100% — which shrinks the
   thumbnail to fit inside the 16:9 frame instead of filling it, causing the
   pillarboxed/letterboxed bars. Force it to fill and crop like a cover image
   instead. */
.video-js.caifu-video .vjs-poster img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.video-js.caifu-video .vjs-control-bar {
  display: none !important;
}
.video-js.caifu-video .vjs-big-play-button {
  width: 84px;
  height: 84px;
  line-height: 84px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate3d(-50%, -50%, 0);
  background: transparent;
  border: none;
  box-shadow: none;
  z-index: 5;
}
.video-js.caifu-video .vjs-big-play-button .vjs-icon-placeholder {
  display: none;
}
.video-js.caifu-video .vjs-big-play-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/Play.svg') center / contain no-repeat;
}
.video-js.caifu-video:hover .vjs-big-play-button,
.video-js.caifu-video .vjs-big-play-button:focus,
.video-js.caifu-video.vjs-hover .vjs-big-play-button {
  background: transparent;
}
@media (max-width: 600px) {
  .video-js.caifu-video .vjs-big-play-button {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
}
.caifu-video-enable-sound {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8,30,61,0.65);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: 'Montserrat SemiBold', 'Cabinet Grotesk', sans-serif;
  cursor: pointer;
  transition: opacity .2s ease, visibility .2s ease;
}
.caifu-video-enable-sound svg { display: block; flex-shrink: 0; }
.caifu-video-enable-sound.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.caifu-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  padding: 0 16px 12px;
  pointer-events: none;
  transform: translateZ(0);
  opacity: 1;
  transition: opacity 0.3s ease;
}
/* Auto-hide: js/caifu-video.js toggles this class on .caifu-video-wrap after
   2s of inactivity during playback, and removes it on any tap/click/
   mousemove. Fade the bar out and make it (and the quality menu it hosts)
   un-clickable while hidden, so an invisible button can't still be tapped —
   the wrap itself still listens for the next tap to bring it back. */
.caifu-video-wrap.caifu-video-controls-hidden .caifu-video-controls {
  opacity: 0;
}
.caifu-video-wrap.caifu-video-controls-hidden .caifu-video-ctrl-btn,
.caifu-video-wrap.caifu-video-controls-hidden .caifu-video-quality,
.caifu-video-wrap.caifu-video-controls-hidden .caifu-video-progress {
  pointer-events: none;
}
.caifu-video-progress {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  margin-bottom: 10px;
  cursor: pointer;
  pointer-events: auto;
}
.caifu-video-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
}
.caifu-video-progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.caifu-video-controls-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.caifu-video-ctrl-btn {
  background: none;
  border: none;
  padding: 4px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.caifu-video-ctrl-btn svg { display: block; }
.caifu-video-play-pause {
  background: rgba(8,30,61,0.55);
  border-radius: 50%;
  padding: 7px;
}
@media (max-width: 600px) {
  .caifu-video-play-pause { padding: 9px; }
  .caifu-video-play-pause svg { width: 20px; height: 20px; }
}
.caifu-video-hd-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  cursor: pointer;
  display: inline-block;
}
.caifu-video-quality {
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.caifu-video-quality-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  background: #1f2f45;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  min-width: 110px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 20;
}
.caifu-video-quality:hover .caifu-video-quality-menu,
.caifu-video-quality:focus-within .caifu-video-quality-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.caifu-video-quality-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 9px 12px 7px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.caifu-video-quality-option {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 8px 12px;
  cursor: pointer;
}
.caifu-video-quality-option:last-child { border-bottom: none; }
.caifu-video-quality-option:hover { background: #303f53; color: var(--gold); }
.caifu-video-quality-option.is-active { background: rgba(255,255,255,0.12); color: var(--gold); }

/* ============================================================
 SCROLL REVEAL — fade + slide-up entrance animation.
 Add class="reveal" to any element; js/reveal.js adds "is-visible"
 the first time it scrolls into view. Reusable on any page.
 ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
 READY TO GET STARTED — CTA / fee breakdown / accordion.
 Shared markup lives in js/ready-to-start.js. Editing the CSS
 here updates every page that includes the template.
 ============================================================ */

/* ---------- Ready to get started CTA ---------- */
.bie-cta-section { background: var(--navy); padding: 64px 0 56px; }
.bie-cta-section .section-head { text-align: center; max-width: 640px; margin: 0 auto; }
.bie-cta-section .section-title { color: #fff; }
.bie-cta-section .title-underline::after { left: 50%; transform: translateX(-50%); }
.bie-cta-section .section-desc { margin-top: 14px; color: rgba(255,255,255,0.72); }
.bie-process-visual { margin: 28px auto 0; max-width: 883px; }
.bie-process-desktop,
.bie-process-mobile { width: 100%; }
.bie-process-svg { display: block; width: 100%; height: auto; }
.bie-process-mobile { display: none; }
@media (max-width: 760px) {
  .bie-process-desktop { display: none; }
  .bie-process-mobile { display: block; }
}

.process-icon-grp { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.process-icon-grp:hover { animation: processIconBounce 0.6s ease-in-out infinite; }
@keyframes processIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .process-icon-grp:hover { animation: none; }
}

/* ---------- Fee breakdown ---------- */
.bie-fees-wrap { max-width: 1040px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; gap: 24px; }
.bie-fee-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.bie-fee-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bie-fee-block { padding: 32px; }
.bie-fee-title { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.bie-fee-price { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--muted); background: #eef0f3; padding: 5px 12px; border-radius: 999px; margin: 0 0 20px; }
.bie-fee-divider { border: none; border-top: 1px solid var(--line); margin: 0 0 20px; }
.bie-fee-text { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.bie-fee-text:last-child { margin-bottom: 0; }
.bie-fee-list { margin: 0 0 16px; padding: 0; list-style: none; }
.bie-fee-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 10px;
}
.bie-fee-list li:last-child { margin-bottom: 0; }
.bie-fee-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.bie-fee-list li strong { color: var(--navy); }

/* ---------- Fee accordion ---------- */
.bie-acc-list { border-top: 1px solid var(--line); margin: 0 0 16px; }
.bie-acc-item { border-bottom: 1px solid var(--line); }
.bie-acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  padding: 16px 2px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.bie-acc-q svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.bie-acc-q.open svg { transform: rotate(180deg); }
.bie-acc-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.bie-acc-a.open { max-height: 300px; }
.bie-acc-a-inner { padding: 0 2px 16px; }
.bie-acc-a-inner p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.bie-fee-disclaimer { font-size: 12px; line-height: 1.6; color: var(--muted); text-align: left; margin: 16px 0 0; opacity: 0.7; font-style: italic; }
@media (max-width: 760px) {
  .bie-fees-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bie-fee-block { padding: 24px 20px; }
}