/* =========================================================
   Float Accounting & Advisory — styles.css
   v3: photo hero, video testimonials, Google reviews, sticky mobile CTA
   ========================================================= */

:root{
  --navy-d:#12293F; --navy:#1B3A5C; --navy-l:#2E5C87;
  --gold:#E5B04B; --gold-d:#CE9B36;
  --blue:#4A90D9; --blue-d:#2F6FB5;
  --ink:#0F1E2E; --ink-2:#4A5A6B; --ink-3:#647383;
  --line:#E3E9EF; --bg:#F6F9FC;
  --white:#ffffff;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
html{-webkit-text-size-adjust:100%;}
body{color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
a{color:inherit;}
.container{max-width:1140px;margin:0 auto;padding:0 24px;}
.stars{color:var(--gold);font-size:15px;letter-spacing:1px;}

/* ---------- NAV (logo only, centred) ---------- */
nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.navin{display:flex;align-items:center;justify-content:center;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand img{height:34px;width:auto;object-fit:contain;}

/* ---------- BUTTONS ---------- */
.btn{background:var(--gold);color:#1a1408;border:none;border-radius:6px;padding:13px 26px;
  font-size:15px;font-weight:700;cursor:pointer;transition:background .18s,transform .18s;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn:hover{background:var(--gold-d);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px;}
.btn.lg{padding:16px 40px;font-size:17px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.65;cursor:not-allowed;transform:none;}

/* =========================================================
   HERO — photo on mobile (top-anchored banner fading to navy),
   two-column split with a rounded photo card on desktop
   ========================================================= */
.hero{position:relative;background:linear-gradient(135deg,var(--navy-d) 0%,var(--navy) 45%,var(--navy-l) 100%);color:#fff;overflow:hidden;border-bottom:3px solid var(--gold);}
.herogrid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:76px;}
/* flex/grid items default to min-width:auto, which lets a wide descendant
   (the marquee track's width:max-content) inflate this box past the
   viewport instead of being clipped by the marquee's own overflow:hidden.
   min-width:0 + an explicit width forces it to the grid/flex track's
   actual size regardless of that descendant's intrinsic content width. */
.hero__copy{min-width:0;width:100%;}

.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:18px;}
h1{font-size:44px;line-height:1.14;font-weight:700;letter-spacing:-.02em;text-wrap:balance;}
h1 .hl{color:var(--blue);}
/* heavier weight + looser line-height + a tight, dark shadow, scoped to
   the hero headline only (site's other h1s — legal pages, /thanks —
   keep the base weight/line-height above) since this is specifically
   about legibility over the photo. Plain white throughout except the
   plain gold text on "actually" below (no background box). */
.hero__copy h1{color:#fff;font-weight:800;line-height:1.4;text-shadow:0 2px 8px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.9);}
.hero__copy h1 .hl{color:var(--gold);}
.hsub{font-size:17px;line-height:1.65;color:#F0F6FC;font-weight:500;margin-top:40px;max-width:34em;}
.hcta{margin-top:32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
/* auto-scrolling marquee: the track's content is duplicated once in the
   markup, so animating to exactly -50% loops seamlessly with no jump */
.trustline{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.trustline__track{display:flex;align-items:center;width:max-content;
  animation:trustScroll 26s linear infinite;}
.trustline__item{white-space:nowrap;font-size:13.5px;font-weight:600;color:#CBD9E6;display:inline-flex;align-items:center;gap:6px;}
.trustline__item .stars{margin-right:2px;}
.trustline__dot{color:#5f78a8;margin:0 14px;flex:none;}
@keyframes trustScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.trustline__track{animation:none;}}

/* the single responsive photo: full-bleed background of the whole hero
   on mobile, a contained rounded card in the right column on desktop */
.hero__media{position:relative;}
.hero__media-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
/* nearly clear for the top two-thirds (where the copy block no longer
   sits), concentrating into a strong, dark scrim over the bottom third
   where the text now lives; the headline also carries its own
   text-shadow as a second line of defence. No fade to white at the
   bottom — the hero ends in a flat, solid gold divider line instead
   (see .hero's border-bottom). */
.hero__media-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(18,41,63,.02) 0%,
    rgba(18,41,63,.04) 55%,
    rgba(18,41,63,.38) 68%,
    rgba(18,41,63,.78) 85%,
    rgba(18,41,63,.94) 100%);}

/* =========================================================
   VIDEO TESTIMONIALS
   ========================================================= */
.vidgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;}
.vidside{display:grid;gap:20px;}
.vid{position:relative;}
.vid__frame{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:#0A1622;
  box-shadow:0 14px 34px rgba(15,30,46,.18);}
.vid__poster{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease;}
.vid__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0A1622;}
.vid__play{position:absolute;inset:0;width:100%;height:100%;border:none;cursor:pointer;padding:0;
  background:linear-gradient(180deg,rgba(10,20,35,.05) 0%,rgba(10,20,35,0) 40%,rgba(10,20,35,.55) 100%);
  display:flex;align-items:center;justify-content:center;transition:opacity .2s ease;}
.vid__playcircle{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease,background .18s ease;}
.vid__playcircle svg{width:24px;height:24px;}
.vid--featured .vid__playcircle{width:82px;height:82px;}
.vid--featured .vid__playcircle svg{width:30px;height:30px;}
.vid__play:hover .vid__playcircle{transform:scale(1.06);background:rgba(255,255,255,.26);}
.vid.is-playing .vid__play,
.vid.is-playing .vid__poster{opacity:0;pointer-events:none;}
.vid__badge{position:absolute;left:14px;bottom:14px;z-index:2;color:#fff;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.5);}
.vid__name{font-size:14.5px;font-weight:700;}
.vid__role{font-size:12.5px;color:#DCE6F2;}
.vid__placeholder-tag{position:absolute;top:12px;right:12px;z-index:2;background:rgba(18,41,63,.72);color:#F3D998;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;pointer-events:none;}

/* ---------- SECTIONS ---------- */
section{padding:74px 0;}
.alt{background:var(--bg);}
.shead{text-align:center;max-width:640px;margin:0 auto 44px;}
/* tighter gaps around the video testimonials section specifically:
   less space between its heading and the video cards, and less space
   before the next ("What to do") section — scoped so no other
   section-to-heading or section-to-section gap on the page changes */
#videos .shead{margin-bottom:24px;}
#videos + .alt{padding-top:44px;}
/* "In their words" gets the same tightened rhythm as the video/what-to-do
   pairing above, so all three transitions read consistently */
#reviews .shead{margin-bottom:24px;}
.alt + #reviews{padding-top:44px;}
.slabel{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--blue-d);margin-bottom:12px;}
h2{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance;}
.ssub{font-size:16.5px;color:var(--ink-2);margin-top:14px;line-height:1.65;}
.shead__rating{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--ink-2);}

/* =========================================================
   GOOGLE REVIEWS
   ========================================================= */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;
  box-shadow:0 6px 20px rgba(15,30,46,.05);}
.review__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.review__stars{color:var(--gold);font-size:15px;letter-spacing:2px;}
.review__gicon{width:22px;height:22px;flex:none;}
.review p{font-size:15px;line-height:1.7;color:var(--ink);flex:1;}
.review__who{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.review__av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--navy);}
.review__n{font-size:14.5px;font-weight:700;}
.review__b{font-size:13px;color:var(--ink-3);}

/* =========================================================
   HOW IT WORKS — compact numbered rows
   ========================================================= */
/* pulled up to close the gap under its shead — reads as one connected
   block with the "Three steps" heading rather than two separate ones */
.hiw{display:flex;flex-direction:column;max-width:640px;margin:-28px auto 0;}
.hiwrow{display:flex;align-items:flex-start;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);}
.hiwrow:last-child{border-bottom:none;}
.hiwrow__num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.hiwrow__title{font-size:17px;font-weight:700;color:var(--ink);}
.hiwrow__text{font-size:14.5px;color:var(--ink-2);margin-top:4px;line-height:1.6;}

/* ---------- CTA BAND ---------- */
.band{background:linear-gradient(135deg,var(--navy-d),var(--navy-l));color:#fff;text-align:center;}
.band h2{color:#fff;}
.band p{font-size:17px;color:#CBD9E6;margin-top:14px;}
.band .btn{margin-top:28px;}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;}
details.f{border-bottom:1px solid var(--line);padding:20px 0;}
details.f summary{list-style:none;cursor:pointer;font-size:17px;font-weight:600;display:flex;justify-content:space-between;gap:16px;}
details.f summary::-webkit-details-marker{display:none;}
details.f summary::after{content:"+";color:var(--blue-d);font-size:22px;font-weight:400;line-height:1;flex:0 0 auto;}
details.f[open] summary::after{content:"\2013";}
details.f p{font-size:15px;color:var(--ink-2);line-height:1.7;margin-top:12px;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-d);color:#9FB5C9;padding:44px 0;font-size:13.5px;}
.finlogo{height:30px;width:auto;object-fit:contain;filter:brightness(0) invert(1);margin-bottom:16px;}
.fin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;}
.fin__links a{color:#CBD9E6;text-decoration:none;}
.fin__links a:hover{text-decoration:underline;}
.fin__dot{color:#4A5A6B;margin:0 8px;}

/* ---------- LEGAL PAGES ---------- */
.legalhead{background:#fff;border-bottom:1px solid var(--line);padding:16px 0;}
.legalhead .brand img{height:32px;}
.legalmain{padding:52px 0 64px;}
.legal{max-width:760px;margin:0 auto;}
.legal h1{font-size:34px;margin-bottom:8px;}
.legal__updated{font-size:13.5px;color:var(--ink-3);margin-bottom:30px;}
.legal h2{font-size:20px;font-weight:700;color:var(--ink);margin:30px 0 10px;}
.legal p{font-size:15px;line-height:1.75;color:var(--ink-2);margin-bottom:14px;}
.legal ul{margin:0 0 14px;padding:0;list-style:none;}
.legal li{font-size:15px;line-height:1.75;color:var(--ink-2);position:relative;padding-left:20px;margin-bottom:8px;}
.legal li::before{content:"\2022";position:absolute;left:4px;color:var(--blue-d);}
.legal a{color:var(--blue-d);}
.legal mark{background:#FDF1D9;color:var(--ink);padding:1px 5px;border-radius:4px;font-weight:600;}
.legal__home{display:inline-block;margin-top:26px;font-weight:600;color:var(--blue-d);text-decoration:none;}
.legal__home:hover{text-decoration:underline;}

/* =========================================================
   LEAD MODAL  (mobile-first shared with the /thanks stepper)
   ========================================================= */
.modal{position:fixed;inset:0;background:rgba(10,25,40,.62);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:16px;z-index:100;}
.modal.on{display:flex;}
.panel{position:relative;background:#fff;border-radius:18px;width:100%;max-width:470px;padding:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);max-height:92dvh;overflow-y:auto;}
.step{font-size:12.5px;font-weight:700;color:var(--blue-d);text-align:center;letter-spacing:.06em;}
.panel h3{font-size:22px;font-weight:700;text-align:center;margin-top:8px;line-height:1.3;}
.panel .psub{font-size:14px;color:var(--ink-2);text-align:center;margin-top:8px;}
.slide{display:none;}
.slide.on{display:block;animation:slidein .18s ease;}
@keyframes slidein{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}}
.choices{display:grid;gap:8px;margin-top:22px;}
.choice{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:11px;padding:11px 14px;font-size:15px;font-weight:500;cursor:pointer;transition:all .16s;font-family:inherit;color:var(--ink);}
.choice:hover{border-color:var(--blue);background:#F5FAFF;transform:translateX(2px);}
.choice:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px;}
.choice .ci{width:28px;height:28px;border-radius:8px;background:#EAF2FB;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.choice .arrow{margin-left:auto;color:var(--blue-d);flex:0 0 auto;}
.field{margin-top:15px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;}
.field input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:13px 14px;font-size:15px;font-family:inherit;}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,144,217,.15);}
.field input:invalid:not(:placeholder-shown){border-color:#D6455A;}
.back{background:none;border:none;color:var(--ink-3);font-size:13.5px;cursor:pointer;display:block;margin:16px auto 0;font-family:inherit;}
.back:hover{color:var(--blue-d);}
.panel .btn{width:100%;margin-top:20px;}
.tick{width:62px;height:62px;border-radius:50%;background:#E8F7EE;display:flex;align-items:center;justify-content:center;margin:6px auto 16px;}

/* ---------- /thanks qualification stepper (reuses .panel/.step/.slide/.choices/.choice) ---------- */
.thanks{background:var(--bg);min-height:100dvh;padding:56px 0 64px;}
.thanks__head{text-align:center;max-width:560px;margin:0 auto 30px;}
.thanks__badge{width:52px;height:52px;border-radius:50%;background:#E8F7EE;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.thanks__head h1{font-size:30px;}
.thanks__head p{font-size:15.5px;color:var(--ink-2);margin-top:10px;line-height:1.6;}
.progress{max-width:470px;margin:0 auto 22px;}
.progress__label{font-size:13px;font-weight:700;color:var(--blue-d);margin-bottom:8px;}
.progress__track{height:8px;border-radius:999px;background:var(--line);overflow:hidden;}
.progress__fill{height:100%;width:6%;border-radius:999px;background:var(--blue-d);transition:width .5s cubic-bezier(.2,.7,.3,1);}
.qcard{max-width:470px;margin:0 auto;background:#fff;border-radius:18px;padding:30px;box-shadow:0 14px 40px rgba(15,30,46,.10);}
.qdone{text-align:center;}
.qnext{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);text-align:left;}
.qnext h4{font-size:14px;font-weight:700;color:var(--ink);text-align:center;margin-bottom:14px;}
.qnext ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.qnext li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.55;color:var(--ink-2);}
.qnext svg{width:19px;height:19px;color:var(--blue-d);flex:none;margin-top:2px;}

/* =========================================================
   STICKY MOBILE CTA BAR
   ========================================================= */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(15,30,46,.12);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .25s ease;}
.stickycta.is-visible{transform:translateY(0);}
.stickycta.is-hidden{display:none !important;}
.stickycta__text{min-width:0;}
.stickycta__title{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;}
.stickycta__sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;}
.stickycta .btn{flex:none;padding:11px 20px;font-size:14px;}

/* =========================================================
   MOBILE — hero photo banner + general narrowing (below 900px)
   ========================================================= */
@media(max-width:899px){
  .navin{padding-top:9px;padding-bottom:9px;}
  .brand img{height:26px;}
  /* fallback colour only — fully covered by the photo below in normal use */
  .hero{background:var(--navy-d);}
  /* min-height gives the photo real room above the text (flex + flex-end
     bottom-anchors the copy block instead of it starting near the top).
     Kept tall enough for a full-bleed photo feel, but tuned down from the
     first pass so the CTA clears the fold on a real 390x844 screen. */
  .herogrid{display:flex;flex-direction:column;justify-content:flex-end;
    min-height:612px;padding-top:20px;padding-bottom:12px;}
  /* the photo is the background of the ENTIRE hero block: absolute +
     inset:0 makes it span herogrid's full padding box edge-to-edge
     (ignoring herogrid's own left/right padding), stretching to cover
     herogrid's min-height — full-bleed, no separate boxed image and no
     solid panel underneath it */
  .hero__media{position:absolute;inset:0;z-index:0;}
  /* text sits in normal flow, respecting the container's horizontal
     padding, directly on top of the photo + gradient (z-index above it) */
  .hero__copy{position:relative;z-index:2;}
  /* text-shadow carries legibility over the photo everywhere it sits,
     on top of the gradient overlay (headline's own shadow lives with
     its other base rules above, so it isn't overridden here) */
  .hero__copy .hsub{text-shadow:0 1px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.55);}
  .hero__copy .trustline{text-shadow:0 1px 6px rgba(0,0,0,.4);}
  /* tightened from the desktop values so the CTA clears the fold on a
     real 390x844 screen without losing the step-up between elements */
  .hero__copy .hsub{margin-top:30px;}
  .hero__copy .hcta{margin-top:24px;}
  .hero__copy .trustline{margin-top:12px;padding-top:12px;}
  h1{font-size:29px;}
  h2{font-size:27px;}
  .cards3{grid-template-columns:1fr;}
  .vidgrid{grid-template-columns:1fr;}
  .vidside{grid-template-columns:1fr 1fr;}
  section{padding:52px 0;}
  #videos + .alt{padding-top:28px;}
  .alt + #reviews{padding-top:28px;}
  .fin{flex-direction:column;text-align:center;}
  .stickycta{display:flex;}
  body{padding-bottom:0;}
  body.has-stickycta{padding-bottom:76px;}
}
@media(max-width:560px){
  .vidside{grid-template-columns:1fr;}
  .panel{padding:24px 20px;}
}

/* =========================================================
   DESKTOP — hero becomes a two-column split, photo is a card
   ========================================================= */
@media(min-width:900px){
  .hero__media-overlay{display:none;}
  .hero__media{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);
    aspect-ratio:628/910;max-width:420px;margin-left:auto;}
}

/* =========================================================
   MOTION SAFETY
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}