/* ═══════════════════════════════════════════════════════════
   Exceed Finance — Fluid Alive Experience
   Brand: Navy #00317A · Blue #3E78C2 · Poppins
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#00317A;--navy-dark:#001F55;--blue:#3E78C2;--blue-dark:#2E5FA0;
  --slate:#59677C;--slate-light:#8797AE;--slate-pale:#B9C4D5;
  --ink:#13203B;--offwhite:#F1F7F8;--white:#FFFFFF;
  --sky:#8FBEF0;
  --navy-grad-1:#013A8F;--navy-grad-2:#001A4A;
  --navy-06:rgba(0,49,122,.06);--navy-08:rgba(0,49,122,.08);--navy-12:rgba(0,49,122,.12);--navy-15:rgba(0,49,122,.15);--navy-20:rgba(0,49,122,.20);--navy-25:rgba(0,49,122,.25);
  --blue-10:rgba(62,120,194,.10);--blue-15:rgba(62,120,194,.15);--blue-20:rgba(62,120,194,.20);
  --white-06:rgba(255,255,255,.06);--white-10:rgba(255,255,255,.10);--white-60:rgba(255,255,255,.60);--white-80:rgba(255,255,255,.80);
  --shadow-sm:0 1px 3px rgba(19,32,59,.05),0 1px 2px rgba(19,32,59,.03);
  --shadow:0 1px 3px rgba(19,32,59,.04),0 4px 16px rgba(19,32,59,.07);
  --shadow-lg:0 2px 6px rgba(19,32,59,.04),0 12px 36px rgba(19,32,59,.10);
  --shadow-xl:0 4px 12px rgba(19,32,59,.06),0 20px 56px rgba(19,32,59,.14);
  --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --radius-sm:6px;--radius:12px;--radius-lg:20px;--maxw:min(90vw,1600px);--gut:clamp(22px,5vw,44px);
  --font:'Poppins','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-weight:400;line-height:1.7;color:var(--slate);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s}a:hover{color:var(--blue-dark)}
ul{list-style:none}::selection{background:var(--blue-10);color:var(--navy)}section{position:relative}

/* ── Weaving scroll line (SVG) ── */
.scroll-line-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:2;overflow:visible}
.scroll-line-svg path{fill:none;stroke:var(--navy);stroke-width:2;opacity:.35;stroke-linecap:round;stroke-linejoin:round}
.scroll-line-svg circle{fill:var(--navy);opacity:.6}

/* ── Typography ── */
h1{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:600;letter-spacing:-.02em;color:var(--navy);line-height:1.16}
h2{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:600;letter-spacing:-.015em;color:var(--navy);line-height:1.2}
h3{font-size:clamp(1.05rem,1.4vw,1.22rem);font-weight:600;letter-spacing:-.01em;color:var(--navy);line-height:1.28}
h4{font-size:.9rem;font-weight:600;letter-spacing:.01em;color:var(--navy)}p{color:var(--slate);line-height:1.75}
.text-balance{text-wrap:balance}

/* ── Layout ── */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:1}
.section{padding:clamp(80px,10vw,130px) 0}
.section--tight{padding:clamp(44px,5vw,64px) 0}
main>section:last-child{padding-bottom:clamp(48px,6vw,72px)}
.section--navy{background:var(--navy);color:var(--white);position:relative;overflow:hidden}.section--navy h2,.section--navy h3,.section--navy h4{color:var(--white)}.section--navy p{color:var(--white-80)}
/* Subtle house-logo watermark in navy areas */
.section--navy::after{content:"";position:absolute;right:-3%;bottom:-12%;width:clamp(220px,28vw,400px);height:clamp(220px,28vw,400px);background:url("../assets/img/house-white.svg") no-repeat center/contain;opacity:.05;pointer-events:none;z-index:0}
.section--offwhite{background:var(--offwhite)}.section--ink{background:var(--ink)}.section--ink h2,.section--ink h3{color:var(--white)}.section--ink p{color:var(--white-80)}
.eyebrow{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.section--navy .eyebrow,.section--ink .eyebrow{color:var(--slate-pale)}
.lead{font-size:clamp(.95rem,1.15vw,1.08rem);color:var(--slate);max-width:54ch;font-weight:400;line-height:1.8}
.center{text-align:center}.center .lead{margin-inline:auto}.section--navy .lead,.section--ink .lead{color:var(--white-60)}
.section-head{max-width:600px;margin-bottom:clamp(38px,4vw,54px)}.center.section-head{margin-inline:auto}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.4em;cursor:pointer;border:0;font-family:var(--font);font-weight:600;font-size:.88rem;line-height:1;padding:.8rem 1.4rem;border-radius:6px;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s var(--ease-out);white-space:nowrap}
.btn svg{width:1em;height:1em;flex:0 0 auto}.btn:active{transform:scale(.97);transition:transform .06s}
.btn--primary{background:var(--navy);color:var(--white);box-shadow:0 2px 10px var(--navy-12)}
.btn--primary:hover{background:var(--navy-dark);transform:translateY(-2px);box-shadow:0 6px 20px var(--navy-12)}
.btn--outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--slate-pale)}
.btn--outline:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn--white{background:var(--white);color:var(--navy);box-shadow:0 1px 6px rgba(19,32,59,.06)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(19,32,59,.10)}
.btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--white-10)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--white-60);color:var(--white);transform:translateY(-2px)}
.btn--lg{padding:.95rem 1.75rem;font-size:.93rem}.btn--block{width:100%;justify-content:center}

/* ── Navigation ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:box-shadow .3s var(--ease-out),background .3s,border-color .3s}
.site-header.scrolled{box-shadow:0 1px 3px rgba(19,32,59,.04);background:rgba(255,255,255,.94);border-bottom-color:var(--navy-06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.nav__logo{flex:0 0 auto}.nav__logo img{height:36px;width:auto;max-width:none}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__links a{color:var(--slate);font-weight:500;font-size:.92rem;padding:.42rem .82rem;border-radius:6px;transition:color .2s,background .2s}
.nav__links a:hover{color:var(--navy);background:var(--navy-06)}.nav__links a.active{color:var(--navy);font-weight:600}
.nav__cta{display:flex;align-items:center;gap:12px}
.nav__phone{display:inline-flex;align-items:center;gap:.3em;font-weight:600;color:var(--navy);font-size:.92rem;padding-right:12px;border-right:1px solid var(--slate-pale)}
.nav__phone svg{width:14px;height:14px;color:var(--blue)}.nav__phone:hover{color:var(--blue)}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--navy);border-radius:8px;transition:background .2s}.nav__toggle:hover{background:var(--navy-06)}.nav__toggle svg{width:24px;height:24px;display:block}.nav__toggle svg path{transition:transform .35s var(--ease-out),opacity .25s;transform-origin:center}
/* Nav breakpoints (retuned Jul 2026)
   The desktop nav needs ~830px of room for the logo + 6 links + CTA button,
   and ~960px with the phone number showing. The old values (phone hidden at
   900px, hamburger at 760px) meant that on tablets and small laptops the row
   ran wider than the container and the "Book a free review" button was pushed
   off the right edge of the screen. Measured widths, then set the breakpoints
   above them with headroom. */
@media(max-width:1180px){.nav__phone{display:none}}
@media (max-width: 1079px) {
.nav__links,.nav__phone,.nav__cta{display:none}
.nav__toggle{display:block}
/* Backdrop — appended to body by JS */
.nav-backdrop{position:fixed;inset:0;background:rgba(0,16,40,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:998;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out)}
.nav-backdrop.visible{opacity:1;pointer-events:auto}
/* Mobile menu overlay — built by JS, appended to body, starts below header */
.mobile-menu{position:fixed;top:70px;left:0;right:0;bottom:0;z-index:999;background:var(--navy);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .35s var(--ease-out),visibility 0s .35s;overflow-y:auto;padding:32px var(--gut) max(32px,env(safe-area-inset-bottom,20px))}
.mobile-menu.open{opacity:1;visibility:visible;transition:opacity .35s var(--ease-out),visibility 0s 0s}
/* Links inside overlay (cloned from header .nav__links) */
.mobile-menu .nav__links{display:flex;flex-direction:column;gap:0;flex:1 0 auto}
.mobile-menu .nav__links a{display:flex;align-items:center;padding:20px 4px;font-size:1.3rem;font-weight:500;color:var(--white);border-bottom:1px solid rgba(255,255,255,.08);transition:color .2s,padding-left .25s var(--ease-out)}
.mobile-menu .nav__links a:hover,.mobile-menu .nav__links a:focus-visible{padding-left:12px;color:var(--white)}
.mobile-menu .nav__links a:active{color:var(--sky)}
.mobile-menu .nav__links a.active{color:var(--sky);font-weight:600;border-bottom-color:rgba(255,255,255,.2)}
/* CTA inside overlay (cloned from header .nav__cta) */
.mobile-menu .nav__cta{display:flex;flex-direction:column;gap:14px;padding:24px 0 8px;border-top:1px solid rgba(255,255,255,.12);flex:0 0 auto}
.mobile-menu .nav__cta .nav__phone{display:flex;align-items:center;justify-content:center;gap:8px;border-right:none;padding:0;font-size:1rem;font-weight:500;color:var(--white-80)}
.mobile-menu .nav__cta .nav__phone svg{color:var(--sky);width:16px;height:16px}
.mobile-menu .nav__cta .btn{width:100%;justify-content:center;padding:16px;font-size:1rem;border-radius:10px}
/* Solid header background when menu open */
body.menu-open .site-header{background:rgba(255,255,255,.98);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Hamburger → X */
.nav.open .nav__toggle svg path:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .nav__toggle svg path:nth-child(2){opacity:0}
.nav.open .nav__toggle svg path:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
/* Mobile menu overlay & backdrop must never appear on desktop */
@media(min-width:761px){.mobile-menu,.nav-backdrop{display:none!important}}

/* ── Guides dropdown (CSS-only, works hover + focus) ── */
.nav__dropdown{position:relative}
.nav__dropdown-toggle{display:inline-flex;align-items:center;gap:.25em;color:var(--slate);font-weight:500;font-size:.92rem;padding:.42rem .82rem;border-radius:6px;transition:color .2s,background .2s;user-select:none}
.nav__dropdown-toggle::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:transform .25s var(--ease-out);margin-left:1px}
.nav__dropdown-toggle:hover{color:var(--navy);background:var(--navy-06)}
.nav__dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);background:var(--white);border:1px solid var(--navy-08);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:220px;padding:6px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease-out),visibility 0s .2s,transform .25s var(--ease-out);z-index:1001}
/* Show on hover OR focus-within (keyboard a11y) */
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);transition:opacity .2s var(--ease-out),visibility 0s 0s,transform .25s var(--ease-out)}
.nav__dropdown:hover .nav__dropdown-toggle::after,
.nav__dropdown:focus-within .nav__dropdown-toggle::after{transform:translateY(1px) rotate(-135deg)}
.nav__dropdown-menu li{display:block}
.nav__dropdown-menu a{display:block;padding:.56rem .82rem;font-size:.85rem;color:var(--slate);border-radius:6px;white-space:nowrap;transition:color .2s,background .2s}
.nav__dropdown-menu a:hover,.nav__dropdown-menu a:focus-visible{color:var(--navy);background:var(--navy-06);outline:none}
.nav__dropdown-menu a.active{color:var(--navy);font-weight:600;background:var(--navy-06)}
/* Touch devices: first tap opens, second tap navigates */
@media(hover:none){
  .nav__dropdown-toggle{pointer-events:none}
  .nav__dropdown-menu{pointer-events:auto}
}
/* Mobile: dropdown items flatten into the overlay
   (must match the hamburger breakpoint above — 1079px) */
@media(max-width:1079px){
  .nav__dropdown-toggle{pointer-events:auto;color:var(--white);font-weight:500;font-size:1.3rem;padding:20px 4px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;margin-bottom:0}
  .nav__dropdown-toggle:hover{color:var(--white);background:transparent}
  .nav__dropdown-toggle::after{display:none}
  .nav__dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;background:transparent;border:0;box-shadow:none;min-width:0;padding:0 0 0 16px;border-left:1px solid var(--white-06)}
  .nav__dropdown-menu a{font-size:1rem;padding:14px 4px;color:var(--white-80);border-bottom:1px solid rgba(255,255,255,.06)}
  .nav__dropdown-menu a:hover,.nav__dropdown-menu a:focus-visible{padding-left:8px;color:var(--white);background:transparent}
  .nav__dropdown-menu a.active{color:var(--sky);font-weight:600}
}

/* ═══════════ HERO — Immersive brand experience ═══════════ */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:flex-start;padding-top:70px;
  background:linear-gradient(180deg, #001a4a 0%, var(--navy) 40%, #001840 100%);
  color:var(--white)}

/* ── Full-bleed video background ── */
.hero__video-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;will-change:opacity;transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1)}
.hero__video--house{z-index:1;opacity:1}
.hero__video--car{z-index:0;opacity:0}
.hero__video--car.visible{z-index:2;opacity:1}
.hero__video--house.hidden{z-index:0;opacity:0}
/* Dark scrim over video for text readability */
.hero__video-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,10,30,.65) 0%, rgba(0,31,85,.45) 40%, rgba(0,10,40,.7) 100%);
}
/* Reduce overlay on mobile for better video visibility */
@media(max-width:760px){.hero__video-overlay{background:linear-gradient(180deg, rgba(0,10,30,.72) 0%, rgba(0,31,85,.55) 40%, rgba(0,10,40,.78) 100%)}}

/* ── Ambient floating house icons ── */
.hero__ambient{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.hero__house{position:absolute;background:url("../assets/img/house-white.svg") no-repeat center/contain;opacity:.05;animation:houseDrift 20s ease-in-out infinite}
.hero__house--1{width:120px;height:120px;top:15%;left:8%;animation-delay:0s;animation-duration:22s}
.hero__house--2{width:80px;height:80px;top:55%;right:10%;animation-delay:-7s;animation-duration:18s;opacity:.07}
.hero__house--3{width:200px;height:200px;bottom:20%;left:60%;animation-delay:-14s;animation-duration:26s;opacity:.03}
.hero__house--4{width:100px;height:100px;top:30%;right:30%;animation-delay:-3s;animation-duration:20s;opacity:.04}
@keyframes houseDrift{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(20px,-15px) rotate(3deg)}50%{transform:translate(-10px,-25px) rotate(-2deg)}75%{transform:translate(-15px,10px) rotate(1deg)}}

/* ── Subtle grid overlay ── */
.hero__grid-overlay{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask:radial-gradient(ellipse 80% 70% at 50% 45%,#000 25%,transparent 72%);
  -webkit-mask:radial-gradient(ellipse 80% 70% at 50% 45%,#000 25%,transparent 72%)}

/* ── Bottom wave transition ── */
.hero__wave{position:absolute;left:0;right:0;bottom:-2px;z-index:6;pointer-events:none;line-height:0}
.hero__wave svg{width:100%;height:clamp(40px,6vw,90px);display:block}
.hero__wave path{fill:var(--offwhite)}

/* ── Centered content ── */
.hero__center{position:relative;z-index:5;max-width:780px;margin-inline:auto;text-align:center;padding:clamp(48px,10vh,120px) 0 clamp(16px,3vh,48px)}

/* ── Logo ── */
.hero__logo{width:clamp(130px,18vw,180px);height:auto;margin:0 auto clamp(8px,1.2vw,16px);display:block;filter:drop-shadow(0 0 40px rgba(62,120,194,.25))}

/* ── Headline ── */
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.12;color:#fff;letter-spacing:-.032em;max-width:16ch;margin:0 auto;font-weight:700}
.hero__accent{font-size:clamp(.95rem,1.2vw,1.1rem);font-weight:400;line-height:1.6;color:rgba(255,255,255,.65);max-width:38ch;margin:clamp(12px,1.8vw,18px) auto 0}

/* ── Actions ── */
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.hero__trust{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:.92rem;color:rgba(255,255,255,.82);margin-top:clamp(18px,2.2vw,26px)}
.hero__stars{color:#F59E0B;letter-spacing:2px;font-size:1.05em;text-shadow:0 0 18px rgba(245,158,11,.35)}
.hero .btn--ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.30)}
.hero .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
/* Hero primary CTA — brand navy */
.hero .btn--white{background:var(--navy);color:var(--white);box-shadow:0 2px 16px rgba(0,49,122,.35)}
.hero .btn--white:hover{background:var(--navy-dark);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,49,122,.45)}

/* ── Scroll indicator ── */
.hero__scroll{position:absolute;left:50%;bottom:clamp(30px,5vw,56px);transform:translateX(-50%);z-index:5;display:inline-flex;flex-direction:column;align-items:center;gap:5px;color:var(--white-60);font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transition:color .25s}
.hero__scroll:hover{color:#fff}.hero__scroll svg{width:18px;height:18px;animation:scrollBob 2.2s ease-in-out infinite}
@keyframes scrollBob{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(5px);opacity:1}}

/* ── Hero card (used on contact page) ── */
.hero__card{background:var(--white);border:1px solid var(--navy-08);border-radius:var(--radius-lg);padding:clamp(22px,2.5vw,30px);box-shadow:var(--shadow-lg);position:relative;z-index:1}
.hero__card::before{content:"";position:absolute;top:0;left:1.2rem;right:1.2rem;height:2px;background:var(--navy);border-radius:0 0 2px 2px}
.hero__card h3{font-size:1.12rem;margin-bottom:2px}.hero__card .muted{font-size:.8rem;margin-bottom:18px}
.hero .hero__card{box-shadow:0 30px 70px -28px rgba(0,10,40,.65),0 0 0 1px rgba(255,255,255,.06)}
.hero .hero__card::before{background:linear-gradient(90deg,var(--blue),var(--navy))}

/* ── Responsive ── */
@media(max-width:520px){
  .hero__logo{width:clamp(64px,25vw,90px)}
  .hero__actions .btn{width:100%}
  .hero__house--1,.hero__house--4{display:none}
}

/* word reveal — with proper spacing */

.word-reveal .word{display:inline-block;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);margin-right:.25em}
.word-reveal.revealed .word{opacity:1;transform:none}

/* ── Forms ── */
.field{margin-bottom:13px}.field label{display:block;font-size:.72rem;font-weight:600;color:var(--navy);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;font-family:var(--font);font-size:.86rem;color:var(--ink);padding:.72rem .8rem;border:1.5px solid var(--slate-pale);border-radius:var(--radius-sm);background:var(--offwhite);transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px var(--blue-10)}
.field textarea{resize:vertical;min-height:80px}.field--row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2359677C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:.7rem;color:var(--slate-light);margin:2px 0 14px}.consent input{margin-top:2px;width:14px;height:14px;flex:0 0 auto;accent-color:var(--blue)}.consent a{color:var(--blue)}
.form-privacy{font-size:.7rem;color:var(--slate-light);line-height:1.6;margin:12px 0 0;text-align:center}.form-privacy a{color:var(--blue)}
.form-status{font-size:.7rem;color:var(--slate-light);margin-top:10px;text-align:center}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{text-align:center;padding:24px 16px;position:relative}
.stat::after{content:"";position:absolute;right:0;top:25%;height:50%;width:1px;background:var(--navy-08)}.stat:last-child::after{display:none}
.stat__num{font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:700;color:var(--navy);letter-spacing:-.03em;line-height:1;font-feature-settings:"tnum"}
.stat__label{font-size:.76rem;color:var(--slate-light);margin-top:8px;font-weight:500}
.section--navy .stat__num,.section--ink .stat__num{color:var(--white)}.section--navy .stat__label,.section--ink .stat__label{color:var(--white-60)}.section--navy .stat::after,.section--ink .stat::after{background:var(--white-06)}

/* ── Marquee ── */
.marquee{overflow:hidden;padding:4px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__track{display:flex;align-items:center;gap:36px;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.lender{font-weight:600;font-size:.98rem;letter-spacing:.02em;color:var(--slate-pale);white-space:nowrap;transition:color .3s;user-select:none}.lender:hover{color:var(--navy)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Cards ── */
.grid{display:grid;gap:22px}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--radius-lg);padding:32px;height:100%;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__icon{width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;margin-bottom:16px;background:var(--navy-06);color:var(--navy);transition:transform .3s var(--ease-spring)}
.card:hover .card__icon{transform:scale(1.06)}.card__icon svg{width:20px;height:20px}
.card h3{font-size:1.08rem;margin-bottom:6px}.card p{color:var(--slate);font-size:.86rem;margin-bottom:14px;line-height:1.7}
.card__link{font-weight:600;font-size:.83rem;display:inline-flex;align-items:center;gap:.3em;color:var(--blue)}.card__link:hover{color:var(--blue-dark)}
.card__link svg{width:13px;height:13px;transition:transform .2s}.card:hover .card__link svg{transform:translateX(2px)}

/* ── Split, Profile, Check-list, Steps, FAQ, etc ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,68px);align-items:center}
.split--wide-left{grid-template-columns:1.15fr 1fr}.split--wide-right{grid-template-columns:1fr 1.15fr}.split--reverse .split__media{order:2}
.profile-card{background:var(--navy);color:var(--white);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-xl);position:relative;overflow:hidden}
.profile-card::after{content:"";position:absolute;top:-20%;right:-10%;width:50%;height:100%;pointer-events:none;background:radial-gradient(ellipse,rgba(255,255,255,.03),transparent 65%)}
.profile-card::before{content:"";position:absolute;right:-11%;top:2%;width:clamp(150px,50%,240px);height:clamp(150px,50%,240px);background:url("../assets/img/house-white.svg") no-repeat center/contain;opacity:.06;pointer-events:none;z-index:0}
.profile-card h3{color:var(--white);font-size:1.22rem;margin-bottom:3px;position:relative;z-index:1}
.profile-card .role{color:var(--slate-pale);font-weight:500;font-size:.83rem;margin-bottom:16px;position:relative;z-index:1}
.profile-card ul{display:grid;gap:10px;position:relative;z-index:1}
.profile-card li{display:flex;gap:9px;align-items:flex-start;color:var(--white-80);font-size:.86rem}
.profile-card li svg{width:15px;height:15px;color:var(--blue);flex:0 0 auto;margin-top:2px}
.profile-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;margin-bottom:18px;border:2px solid var(--white-10);position:relative;z-index:1}
.profile-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.profile-card .photo-ph{width:80px;height:80px;border-radius:50%;background:var(--white-06);display:grid;place-items:center;font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:18px;border:2px solid var(--white-10)}
.check-list{display:grid;gap:10px;margin-top:4px}
.check-list li{display:flex;gap:10px;align-items:flex-start}.check-list li svg{width:18px;height:18px;color:var(--blue);flex:0 0 auto;margin-top:2px}
.check-list strong{display:block;color:var(--navy);font-weight:600}.check-list span{color:var(--slate);font-size:.86rem}
.section--navy .check-list strong{color:var(--white)}.section--navy .check-list span{color:var(--white-80)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.step__num{width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--navy);font-weight:700;display:grid;place-items:center;margin-bottom:14px;font-size:1rem;border:1px solid var(--navy-08);transition:box-shadow .3s,transform .3s var(--ease-spring)}
.step:hover .step__num{box-shadow:0 0 0 6px var(--navy-06);transform:scale(1.05)}
.step h3{font-size:.98rem;margin-bottom:4px}.step p{font-size:.84rem;color:var(--slate);line-height:1.7}
.section--navy .step h3{color:var(--white)}.section--navy .step p{color:var(--white-80)}.section--navy .step__num{background:var(--white);color:var(--navy)}
.reviews-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-bottom:2px}
.google-badge{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--navy);font-size:.78rem;background:var(--white);border:1px solid var(--slate-pale);border-radius:999px;padding:.28rem .72rem;box-shadow:var(--shadow-sm)}.google-badge .stars{color:var(--navy);letter-spacing:1px}
.quote{background:var(--white);border:1px solid var(--navy-06);border-radius:var(--radius-lg);padding:26px;height:100%;display:flex;flex-direction:column;gap:14px;transition:transform .4s var(--ease-out),box-shadow .4s}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.quote__stars{color:var(--navy);letter-spacing:2px;font-size:.8rem}
.quote p{color:var(--slate);font-size:.88rem;line-height:1.8;font-style:italic}
.quote__author{display:flex;align-items:center;gap:10px;margin-top:auto}
.quote__avatar{width:32px;height:32px;border-radius:50%;background:var(--navy-06);color:var(--navy);font-weight:700;display:grid;place-items:center;font-size:.76rem}
.quote__author b{color:var(--navy);font-size:.83rem;display:block}.quote__author small{color:var(--slate-light);font-size:.72rem}
.faq{max-width:720px;margin-inline:auto}.faq__item{border-bottom:1px solid var(--navy-06)}
.faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:var(--font);font-weight:600;color:var(--navy);font-size:.95rem;padding:19px 40px 19px 0;position:relative;line-height:1.4}
.faq__q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.1rem;color:var(--blue);font-weight:400;transition:transform .3s var(--ease-out)}
.faq__item.open .faq__q::after{content:"−";transform:translateY(-50%) rotate(180deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-out)}.faq__a p{padding:0 0 20px;color:var(--slate);line-height:1.8}
.section--navy .faq__q{color:var(--white)}.section--navy .faq__a p{color:var(--white-80)}.section--navy .faq__item{border-color:var(--white-06)}
.cta-band{background:var(--navy);color:var(--white);border-radius:var(--radius-lg);padding:clamp(44px,6vw,64px);text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-xl)}
.cta-band::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.04),transparent 60%)}
.cta-band::before{content:"";position:absolute;right:-2%;bottom:-22%;width:clamp(200px,24vw,320px);height:clamp(200px,24vw,320px);background:url("../assets/img/house-white.svg") no-repeat center/contain;opacity:.05;pointer-events:none;z-index:0}
.cta-band h2{color:var(--white);margin-bottom:10px;position:relative;z-index:1}
.cta-band p{color:var(--white-80);max-width:44ch;margin:0 auto 26px;position:relative;z-index:1;font-size:.98rem}
.cta-band .hero__actions{justify-content:center;position:relative;z-index:1}
.page-hero{background:var(--white);padding:clamp(100px,12vw,140px) 0 clamp(36px,5vw,52px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:0;right:0;width:40%;height:100%;pointer-events:none;background:radial-gradient(ellipse at 75% 30%,rgba(0,49,122,.02),transparent 60%)}
.page-hero .eyebrow{position:relative;z-index:1}.page-hero h1{font-size:clamp(1.8rem,3.8vw,2.6rem);margin-bottom:12px;position:relative;z-index:1}
.page-hero p{color:var(--slate);max-width:48ch;font-size:clamp(.92rem,1.1vw,1.04rem);position:relative;z-index:1}
.page-hero .hero__actions{justify-content:flex-start;position:relative;z-index:1}
.page-hero .btn--ghost{color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(0,49,122,.25)}
.page-hero .btn--ghost:hover{color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(0,49,122,.5);background:rgba(0,49,122,.04);transform:translateY(-2px)}
.breadcrumb{display:flex;gap:6px;font-size:.76rem;color:var(--slate-light);margin-bottom:16px;position:relative;z-index:1}
.breadcrumb a{color:var(--slate-light)}.breadcrumb a:hover{color:var(--navy)}
.svc-block{scroll-margin-top:80px}.svc-block+.svc-block{margin-top:clamp(44px,5vw,70px);padding-top:clamp(44px,5vw,70px);border-top:1px solid var(--navy-06)}
.pill-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding:0}
.pill-list li{display:inline-flex;align-items:center;background:var(--navy-06);color:var(--navy);font-weight:500;font-size:.78rem;padding:.4rem .78rem;border-radius:999px}
.pill-list li a{color:var(--navy)}.pill-list li a:hover{color:var(--blue)}
.pill-nav{justify-content:center;gap:8px}.pill-nav li{background:var(--white);border:1.5px solid var(--slate-pale);font-weight:600;padding:0;transition:all .2s;overflow:hidden}
.pill-nav li:hover{background:var(--navy);border-color:var(--navy)}.pill-nav li:hover a{color:var(--white)}.pill-nav li a{color:var(--navy);display:block;padding:.5rem .95rem;border-radius:999px}
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xl);background:var(--white)}
.calc__controls{padding:clamp(20px,2.5vw,30px)}.calc__result{background:var(--navy);color:var(--white);padding:clamp(20px,2.5vw,30px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.calc__result::before{content:"";position:absolute;top:-15%;right:-15%;width:50%;height:80%;pointer-events:none;background:radial-gradient(ellipse,rgba(255,255,255,.025),transparent 60%)}
.calc__row{margin-bottom:18px}.calc__row label{display:flex;justify-content:space-between;font-weight:600;color:var(--navy);font-size:.83rem;margin-bottom:8px}.calc__row output{color:var(--blue);font-weight:700}
input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:999px;background:var(--slate-pale);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;box-shadow:0 1px 6px var(--blue-15);border:2px solid var(--white);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--white)}
.calc__result .label{color:var(--slate-pale);font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;position:relative;z-index:1}
.calc__big{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:4px 0;position:relative;z-index:1;color:var(--white)}
.calc__freq{color:var(--white-60);font-size:.83rem;margin-bottom:20px;position:relative;z-index:1}
.calc__meta{display:flex;gap:22px;border-top:1px solid var(--white-06);padding-top:14px;position:relative;z-index:1}
.calc__meta div span{display:block;color:var(--white-60);font-size:.7rem}.calc__meta div b{font-size:.98rem;color:var(--white)}
.seg{display:inline-flex;background:var(--offwhite);border-radius:999px;padding:3px;gap:3px;margin-bottom:3px}
.seg button{border:0;background:none;font-family:var(--font);font-weight:600;font-size:.78rem;color:var(--slate);padding:.36rem .76rem;border-radius:999px;cursor:pointer;transition:all .2s}
.seg button.active{background:var(--navy);color:var(--white);box-shadow:var(--shadow-sm)}
.calc-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--offwhite);border-radius:999px;padding:4px;margin:0 auto clamp(22px,2.5vw,34px)}
.calc-tabs button{font-family:var(--font);font-weight:600;font-size:.83rem;color:var(--slate);padding:.5rem .95rem;border-radius:999px;cursor:pointer;transition:all .2s;white-space:nowrap;border:0;background:none}
.calc-tabs button.active{background:var(--navy);color:var(--white);box-shadow:0 2px 10px var(--navy-12)}
.calc-panel{display:none}.calc-panel.active{display:block}.calc__hint{font-size:.7rem;color:var(--slate-light);margin-top:5px}
.bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.site-footer{background:var(--ink);color:var(--white-80);padding:clamp(52px,7vw,72px) 0 0;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--white-06),transparent)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:44px}
.site-footer img.flogo{height:28px;margin-bottom:14px}.site-footer p{color:var(--white-60);font-size:.81rem;max-width:30ch;line-height:1.75}
.footer__col h4{color:var(--white);font-size:.83rem;margin-bottom:16px;letter-spacing:.02em}
.footer__col ul{display:grid;gap:8px}.footer__col a{color:var(--white-60);font-size:.81rem;transition:color .2s}.footer__col a:hover{color:var(--white)}
.footer__contact li{display:flex;gap:8px;align-items:flex-start;color:var(--white-60);font-size:.81rem;margin-bottom:11px}.footer__contact svg{width:14px;height:14px;color:var(--blue);flex:0 0 auto;margin-top:2px}
.footer__socials{display:flex;gap:8px;margin-top:4px}
.footer__socials a{width:34px;height:34px;border-radius:8px;background:var(--white-06);display:grid;place-items:center;color:var(--white-60);transition:background .2s,transform .2s var(--ease-spring),color .2s}
.footer__socials a:hover{background:var(--blue);color:var(--white);transform:translateY(-2px)}.footer__socials svg{width:15px;height:15px}
.footer__legal{border-top:1px solid var(--white-06);padding:20px 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.footer__legal small{color:var(--white-60);font-size:.7rem}.footer__legal a{color:var(--white-60)}
.compliance{background:rgba(0,0,0,.3);border-top:1px solid var(--white-06)}.compliance .container{padding-block:16px}
.compliance p{color:rgba(255,255,255,.5);font-size:.66rem;line-height:1.7;max-width:none}.compliance__attribution{margin-top:6px;font-size:.58rem!important;color:rgba(255,255,255,.36)!important}

/* ═══════════ SCROLL ANIMATIONS ═══════════ */
[data-reveal]{opacity:0;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal="up"]{transform:translateY(44px)}[data-reveal="down"]{transform:translateY(-44px)}[data-reveal="left"]{transform:translateX(-44px)}[data-reveal="right"]{transform:translateX(44px)}[data-reveal="scale"]{transform:scale(.92)}[data-reveal="fade"]{transform:none}
[data-reveal].revealed{opacity:1;transform:none}
[data-stagger] > *{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-stagger].revealed > *{opacity:1;transform:none}
[data-parallax]{will-change:transform}

/* ── Page load ── */
.preload .site-header{opacity:0}.preload .hero__card{opacity:0;transform:translateY(20px)}
.loaded .site-header{animation:navIn .5s var(--ease-out) .08s both}
.loaded .hero__card{animation:cardIn .6s var(--ease-out) .3s both}
@keyframes navIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ── Responsive ── */
@media(max-width:980px){.hero__grid{grid-template-columns:1fr;gap:34px}.hero__card{max-width:460px}.hero__float{display:none}.hero__geo--l1,.hero__geo--l3,.hero__geo--l4,.hero__geo--l5,.hero__geo--s1,.hero__geo--s3{display:none}.split,.split--wide-left,.split--wide-right{grid-template-columns:1fr;gap:34px}.split--reverse .split__media{order:0}.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.calc{grid-template-columns:1fr}.footer__grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat::after{display:none}.field--row{grid-template-columns:1fr}}
@media(max-width:520px){.grid--3,.grid--4,.grid--2{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.footer__grid{grid-template-columns:1fr}.btn{width:100%;justify-content:center}.hero__actions .btn{width:100%}.stats{grid-template-columns:1fr;gap:12px}.stat{padding:18px}}
@media(hover:none){.card:hover{transform:none;box-shadow:none}.card:hover .card__icon{transform:none}.quote:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto}[data-reveal]{opacity:1;transform:none}.marquee__track{animation:none}.preload .hero__card,.preload .site-header{opacity:1}.scroll-line-svg{display:none}
  /* Keep house video static, hide car crossfade */
  .hero__video--car{display:none}
  .hero__video--house{opacity:1!important}
}

/* Numbered step list — used on guide/article pages (added Jul 2026) */
.num-list{list-style:none;counter-reset:step;margin:0;padding:0}
.num-list li{position:relative;padding-left:48px;margin-bottom:18px;line-height:1.65}
.num-list li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--navy,#00317A);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:.95rem}

/* ═══ Long-form article / guide typography (added Jul 2026) ═══ */
.article{max-width:800px;margin-inline:auto;font-size:1.075rem;line-height:1.78;color:#33425c}
.article > p{margin:0 0 1.3em}
.article .lead{font-size:1.28rem;line-height:1.6;color:var(--ink);font-weight:400;max-width:none;margin-bottom:1.4em}
.article h2{font-size:clamp(1.45rem,2.1vw,1.8rem);color:var(--navy);line-height:1.24;margin:2.6em 0 .7em;letter-spacing:-.015em}
.article h2:first-of-type{margin-top:1.2em}
.article h2::before{content:"";display:block;width:38px;height:3px;background:var(--blue);border-radius:2px;margin-bottom:.85em}
.article h3{margin:2em 0 .5em}
.article a{color:var(--blue-dark);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-weight:500}
.article a:hover{color:var(--navy)}

/* Author byline — sits at the top of a guide's .article column */
.byline{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:0 0 22px;margin:0 0 34px;border-bottom:1px solid var(--navy-12)}
.byline__img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:center top;flex:none;box-shadow:0 0 0 1px var(--navy-12)}
.byline__fallback{width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--navy);color:var(--white);font-weight:600;font-size:16px;letter-spacing:.03em}
.byline__body{flex:1 1 260px;min-width:0}
.byline__name{display:block;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.35}
.article .byline__name a{color:inherit;text-decoration:none;font-weight:600}
.article .byline__name a:hover{color:var(--navy);text-decoration:underline}
.byline__meta{display:block;font-size:.875rem;color:var(--slate);line-height:1.55;margin-top:3px}
.byline__date{font-size:.845rem;color:var(--slate-light);white-space:nowrap;margin-left:auto}
@media(max-width:640px){.byline{gap:13px}.byline__date{margin-left:69px;flex-basis:100%}}
.article strong{color:var(--ink)}
.article .check-list{margin:1.4em 0}
.article .check-list li{margin-bottom:1em}
.article .num-list{margin:1.4em 0}
.article em{font-style:italic}
/* Callout — highlighted stat / example */
.callout{background:linear-gradient(180deg,var(--offwhite),#fff);border:1px solid var(--navy-08);border-left:4px solid var(--blue);border-radius:var(--radius);padding:22px 26px;margin:1.8em 0;font-size:1.02rem;line-height:1.7}
.callout .callout__k{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-dark);font-weight:600;margin-bottom:.5em}
.callout strong{color:var(--navy)}
/* Verdict / honest-take box */
.verdict{background:var(--navy);color:var(--white);border-radius:var(--radius-lg);padding:30px 32px;margin:2.2em 0}
.verdict h3{color:#fff;font-size:1.15rem;margin:0 0 .5em}
.verdict p{color:var(--white-80);margin:0}
.article-hr{border:0;border-top:1px solid var(--navy-08);margin:2.6em 0}
@media(max-width:600px){.article{font-size:1.02rem}.article .lead{font-size:1.14rem}.callout,.verdict{padding:20px}}

/* ═══ Homepage "What we do" cards — scoped lift (Jul 2026) ═══ */
.svc-cards .card{overflow:hidden}
.svc-cards .card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--blue),var(--navy));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.svc-cards .card:hover::before{transform:scaleX(1)}
.svc-cards .card:hover .card__icon{background:var(--navy);color:#fff}

/* ── Guide / legal document pages ──────────────────────────────────────────
   How this works, and why (researched against how MoneySmart and other
   long-form finance sites actually do it, 19 Jul 2026):

   A page does NOT fill a wide screen by stretching its paragraphs. Prose past
   roughly 90 characters a line gets hard to read. What good sites do instead
   is keep ONE flowing centred text column and periodically break WIDER
   elements out of it — callouts, tables, cards, images, colour bands — so the
   full width of the screen keeps getting re-established as you scroll. No
   sidebar, no split attention, and no dead margins that read as empty.

   Implemented with the standard CSS-grid breakout pattern (named grid lines,
   minmax tracks that collapse to zero on small screens, so the same markup is
   correct on a phone with no extra media queries):

     full     — the whole container width
     feature  — wide blocks: cards, tables, step lists, inline CTA
     popout   — slightly wide: callouts, verdict boxes
     content  — the reading column, everything else

   To make a block break out, just give it class="full" / "feature" / "popout"
   as a DIRECT child of .article.

   Self-applying: matches main:has(.article) as well as main.page--doc, because
   an earlier nav edit stripped the class off every guide page and silently
   reopened the layout bug. Header/footer sit outside <main> and stay untouched. */
main:has(.article) .container,
main.page--doc .container{max-width:min(94vw,1240px)}
main:has(.article) .page-hero p:not(.eyebrow),
main.page--doc .page-hero p:not(.eyebrow){max-width:70ch}

/* The hero is a full-width tinted band, so the top of the page reads as a
   designed block rather than text floating in white space */
main:has(.article) .page-hero,
main.page--doc .page-hero{background:var(--offwhite);border-bottom:1px solid var(--navy-08);padding-bottom:clamp(26px,3.5vw,40px)}
main:has(.article) .page-hero + .section,
main.page--doc .page-hero + .section{padding-top:clamp(34px,4vw,54px)}
main:has(.article) .section,
main.page--doc .section{padding:clamp(48px,6vw,82px) 0}
main:has(.article) .hero__geo,
main.page--doc .hero__geo{display:none}

/* ── The breakout grid ── */
.article{
  max-width:none;margin-inline:0;
  display:grid;
  grid-template-columns:
    [full-start] minmax(0,1fr)
    [feature-start] minmax(0,86px)
    [popout-start] minmax(0,62px)
    [content-start] min(100%,780px) [content-end]
    minmax(0,62px) [popout-end]
    minmax(0,86px) [feature-end]
    minmax(0,1fr) [full-end];
}
.article > *{grid-column:content}
.article > .callout,
.article > .verdict,
.article > .popout{grid-column:popout}
.article > .card,
.article > .table-scroll,
.article > .grid,
.article > .feature{grid-column:feature}
.article > .full{grid-column:full}
/* Headings clear the sticky header when linked to directly */
.article h2{scroll-margin-top:100px}
/* Kill trailing margins inside boxes — otherwise the last list item's margin
   stacks on the box padding and leaves ~100px of dead space at the bottom */
.article .card > :last-child,
.article .callout > :last-child,
.article .verdict > :last-child{margin-bottom:0}
.article .check-list li:last-child,
.article .num-list li:last-child{margin-bottom:0}
/* .card carries height:100% for equal-height card grids; standing alone in an
   article that stretched it and left dead space under the content */
.article > .card{height:auto}

/* Inline CTA — keeps a booking prompt inside the flow of the article without
   a sidebar competing for attention */
.article-cta{background:var(--navy);color:var(--white);border-radius:var(--radius-lg);padding:clamp(26px,3.2vw,40px);margin:2.6em 0;display:grid;gap:8px;justify-items:center;text-align:center}
.article-cta h3{color:#fff;font-size:clamp(1.15rem,1.8vw,1.4rem);margin:0}
.article-cta p{color:var(--white-80);margin:0 0 8px;max-width:56ch}
.article-cta__row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
/* Buttons inside an article must not inherit the underlined body-link styling */
.article a.btn{text-decoration:none}
.article a.btn--white{color:var(--navy)}
.article a.btn--ghost,
.article a.btn--primary{color:var(--white)}

/* Wide content (tables) scrolls in place rather than forcing the page sideways */
.article .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5em 0}
.article .table-scroll table{margin:0;min-width:520px}

/* Article tables (guide/credit-guide pages) */
.article table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.96rem}
.article th,.article td{text-align:left;padding:11px 14px;border:1px solid var(--navy-08);vertical-align:top}
.article thead th{background:var(--navy-06);color:var(--navy);font-weight:600}
.article tbody tr:nth-child(even){background:var(--offwhite)}