/* Service pages (/tax, /advisory, /bookkeeping): builds on the home page's inline styles, which each page carries too */
:root{--panel:#0D1628;--line-2:#26375A;--muted:#6E86B5;--blue-2:#8DB8FF;--green:#3FCF8E;--red:#F26D6D}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.eyebrow.c::after{content:"";width:1.5rem;height:1px;background:currentColor}
section[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}

/* current page in the nav */
.nav ul a[aria-current]{color:var(--text);position:relative}
.nav > .wrap ul a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-.45rem;height:2px;border-radius:2px;background:var(--gold)}
.nav .mnav li a[aria-current]{color:var(--gold)}

/* hero */
.svc .hero{grid-template-columns:1.1fr .9fr;padding-block:clamp(3.5rem,7vw,6rem) clamp(2.5rem,5vw,4rem)}
.svc .hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.svc .hero h1 span{display:block}
.hl{background:linear-gradient(90deg,var(--blue),#9CC2FF 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:var(--s-lg);line-height:1.6;color:var(--text-soft);max-width:35rem;margin-top:1.5rem}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.viz{width:100%;max-width:520px;justify-self:center;position:relative}
.viz::before{content:"";position:absolute;inset:-10%;background:radial-gradient(closest-side,rgba(76,141,246,.14),transparent);pointer-events:none}
.viz svg{display:block;width:100%;height:auto;position:relative}
@media (max-width:920px){.svc .hero{grid-template-columns:1fr}.viz{max-width:420px}}

/* sections */
.svc main > section{padding-block:clamp(4rem,8vw,6.5rem)}
/* the client review right under the hero, spaced like on the home page */
.svc main > section.quote-sec{padding-block:clamp(4.5rem,9vw,6.25rem) clamp(1rem,3vw,2rem)}
.head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.head.center{margin-inline:auto;text-align:center}
.head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:1rem}
.head p{color:var(--text-soft);margin-top:1rem;font-size:var(--s-lg);line-height:1.6}
.pts li{align-items:baseline}
.pts li::before{transform:translateY(-.3em)}
.btn-more{border-color:var(--line-2);color:var(--text);background:transparent;margin-top:.6rem}
.btn-more span{color:var(--gold);transition:transform .2s}
.btn-more:hover{border-color:var(--gold)}
.btn-more:hover span{transform:translateX(3px)}

/* split panels */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.pane{position:relative;border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);background:var(--deck);padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1rem;min-width:0}
.pane h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.pane > p{color:var(--text-soft)}
.pane .k{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
@media (max-width:780px){.split{grid-template-columns:1fr}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.chip{padding:.6rem 1.05rem;border:1px solid var(--line-2);border-radius:999px;font-size:var(--s-sm);color:var(--text);background:rgba(16,26,46,.5)}

/* tax calendar */
.cal{position:relative;overflow-x:auto;padding-bottom:.5rem}
.cal-track{position:relative;min-width:760px;height:220px}
.cal-axis{position:absolute;left:0;right:0;top:110px;height:2px;background:var(--line)}
.cal-m{position:absolute;top:122px;font-family:var(--f-mono);font-size:.68rem;color:var(--muted);transform:translateX(-50%)}
.cal-e{position:absolute;transform:translateX(-50%);width:132px;text-align:center;font-size:.8rem;line-height:1.35}
.cal-e b{display:block;font-family:var(--f-mono);font-weight:500;color:var(--gold);font-size:.72rem;letter-spacing:.06em;margin-bottom:.2rem}
.cal-e span{color:var(--text-soft)}
.cal-e.up{bottom:122px}.cal-e.dn{top:146px}
.cal-dot{position:absolute;top:104px;width:14px;height:14px;border-radius:50%;background:var(--void);border:2px solid var(--gold);transform:translateX(-50%);box-shadow:0 0 12px rgba(251,188,5,.45)}
.cal-plan{position:absolute;top:109px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--blue-2));opacity:.9}
.cal-legend{display:flex;gap:1.6rem;justify-content:center;margin-top:1rem;font-size:var(--s-sm);color:var(--text-soft);flex-wrap:wrap}
.cal-legend i{display:inline-block;width:18px;height:4px;border-radius:4px;vertical-align:middle;margin-right:.5rem;background:linear-gradient(90deg,var(--blue),var(--blue-2))}
.cal-legend i.g{width:10px;height:10px;border-radius:50%;border:2px solid var(--gold);background:none}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1.25rem;counter-reset:s}
.steps li{position:relative;padding-top:2.6rem;counter-increment:s;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;font:500 .78rem/1 var(--f-mono);color:var(--gold);letter-spacing:.1em}
.steps li::after{content:"";position:absolute;top:.4rem;left:2.4rem;right:0;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.steps h3{font-size:1.15rem}
.steps p{color:var(--text-soft);font-size:var(--s-sm);margin-top:.5rem;max-width:22rem}
@media (max-width:780px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* faq on service pages */
.svc .faq{max-width:46rem;margin-inline:auto}
.svc .faq details p{padding-right:0}

/* closing call to action */
.close{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:clamp(2.2rem,5vw,3.6rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem;background:radial-gradient(60% 120% at 50% 0%,rgba(76,141,246,.16),transparent 70%),var(--deck)}
.close::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--gold))}
.close h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.close p{color:var(--text-soft);max-width:32rem}
.close .rt{font-size:var(--s-sm)}
.close .rt b{color:var(--text)}

/* advisory */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);overflow:hidden}
.cell{background:var(--void);padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.7rem;min-width:0;transition:background .2s}
.cell:hover{background:var(--deck)}
.cell svg{width:26px;height:26px;color:var(--blue)}
.cell h3{font-size:1.12rem}
.cell p{color:var(--text-soft);font-size:var(--s-sm)}
@media (max-width:860px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grid3{grid-template-columns:1fr}}
.memo{display:grid;grid-template-columns:1.15fr .85fr;gap:1.25rem;align-items:stretch}
@media (max-width:860px){.memo{grid-template-columns:1fr}}
.scn{display:grid;gap:1.1rem}
.scn-row{display:grid;grid-template-columns:9.5rem 1fr 5.5rem;gap:1rem;align-items:center;font-size:var(--s-sm)}
.scn-row .nm small{display:block;color:var(--text-soft);font-size:.78rem}
.scn-bar{height:10px;border-radius:10px;background:var(--line);position:relative;overflow:hidden}
.scn-bar i{position:absolute;inset:0 auto 0 0;border-radius:10px;background:var(--blue)}
.scn-row.best .scn-bar i{background:linear-gradient(90deg,var(--gold),#FFD666);box-shadow:0 0 14px rgba(251,188,5,.5)}
.scn-row .v{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.scn-row.best .v{color:var(--gold)}
@media (max-width:520px){.scn-row{grid-template-columns:1fr 4.5rem}.scn-bar{grid-column:1/-1;grid-row:2}}
.rec{border:1px solid rgba(251,188,5,.35);background:linear-gradient(180deg,rgba(251,188,5,.07),transparent 60%),var(--deck)}
.rec .big{font:600 1.35rem/1.3 var(--f-display);letter-spacing:-.015em}

/* bookkeeping: signature page */
/* Hero: same split as the other service pages (copy left, visual right). The dashboard is laid out at one fixed
   design width (--dw) and scaled down as a whole to fit its column (services.js sets zoom), so its cards never
   reflow or wrap, on phones too. */
.svc .hero.bk-hero{grid-template-columns:.95fr 1.05fr}
.svc .hero.bk-hero > *{min-width:0}
.viz.dash-viz{max-width:640px;--dw:900px;min-width:0}
.dash-viz .app{width:var(--dw)}
.app{position:relative;border-radius:20px;padding:1px;background:linear-gradient(140deg,rgba(251,188,5,.55),rgba(76,141,246,.35) 35%,rgba(255,255,255,.06) 60%,rgba(251,188,5,.4));box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
@media (max-width:920px){.svc .hero.bk-hero{grid-template-columns:1fr}.viz.dash-viz{max-width:none}}
.app-in{border-radius:19px;overflow:hidden;background:radial-gradient(70% 50% at 10% 0%,rgba(76,141,246,.14),transparent 60%),radial-gradient(50% 40% at 100% 100%,rgba(251,188,5,.06),transparent 60%),#070C17}
.app-top{display:flex;align-items:center;gap:1.2rem;padding:.75rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.app-top .mk{width:22px;height:22px;flex:none}
.app-tabs{display:flex;gap:.2rem;font-size:.74rem;color:var(--text-soft);overflow:hidden;min-width:0}
.app-tabs span{padding:.35rem .7rem;border-radius:999px;white-space:nowrap}
.app-tabs span.on{background:rgba(255,255,255,.07);color:var(--text)}
.app-scope{margin-left:auto;display:flex;border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:2px;font-size:.68rem;flex:none}
.app-scope span{padding:.25rem .6rem;border-radius:999px;color:var(--text-soft)}
.app-scope span.on{background:var(--gold);color:var(--gold-ink);font-weight:700}
.app-body{padding:1.1rem 1.1rem 1.3rem;text-align:left}
.greet{font:500 1.05rem/1.2 var(--f-display);margin:0 0 1rem .2rem;letter-spacing:-.01em}
.greet b{color:var(--gold);font-weight:600}
.dash{display:grid;grid-template-columns:1.05fr 1.5fr 1fr;grid-template-areas:"acct nw tax" "acct pl bud";gap:.85rem}
.card{background:rgba(16,26,46,.5);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);border-radius:12px;padding:.95rem 1rem;min-width:0;display:flex;flex-direction:column;gap:.6rem}
.card h4{font:600 .8rem/1.2 var(--f-display);letter-spacing:-.005em;margin:0}
.card .hero-n{font:600 1.45rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trend{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--text-soft)}
.trend b{color:var(--green);font-weight:600}
.trend i{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;background:rgba(63,207,142,.14);color:var(--green);font-style:normal;font-size:.62rem}
.acct{grid-area:acct}.nw{grid-area:nw}.bud{grid-area:bud}.pl{grid-area:pl}.tax{grid-area:tax}
.tree{display:grid;gap:.1rem;font-size:.72rem}
.tree .grp{color:var(--text-soft);font-size:.66rem;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:.45rem}
.tree .grp:first-child{margin-top:0}
.tree .row{display:flex;align-items:center;gap:.45rem;padding:.3rem .35rem;border-radius:6px}
.tree .row:hover{background:rgba(255,255,255,.04)}
.tree .row span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree .row em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--text-soft)}
.tree .row em.neg{color:#F5A3A3}
.own{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;font:700 .55rem/1 var(--f-body);flex:none}
.own.p{background:rgba(76,141,246,.18);color:var(--blue-2)}
.own.b{background:rgba(251,188,5,.16);color:var(--gold)}
.card svg{display:block;width:100%;height:auto}
.bars{display:grid;gap:.55rem;font-size:.7rem}
.bars div{display:grid;grid-template-columns:1fr auto;gap:.25rem .5rem}
.bars div span:last-of-type{color:var(--text-soft);font-variant-numeric:tabular-nums}
.bars i{grid-column:1/-1;height:5px;border-radius:5px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:5px;background:var(--c,var(--green))}
.fscore{align-items:center}
.fscore h4{align-self:flex-start}
.card svg.fs-dial{width:min(100%,180px);margin-top:.3rem}
.fs-word{margin:0;font-size:.78rem;font-weight:600;color:#A3D96B;text-align:center}
.leg{display:flex;justify-content:center;gap:1rem;font-size:.66rem;color:var(--text-soft);flex-wrap:wrap}
.leg span{display:flex;align-items:center;gap:.35rem}
.leg i{width:3px;height:12px;border-radius:2px;background:var(--c)}

/* personal / business switch */
.scope{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:860px){.scope{grid-template-columns:1fr}}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--deck)}
.seg button{font:600 var(--s-sm)/1 var(--f-body);color:var(--text-soft);background:none;border:0;border-radius:999px;padding:.6rem 1.1rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
.scope-card{border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);background:var(--deck);padding:clamp(1.4rem,3vw,2rem);display:grid;gap:1.4rem}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.kpi span{display:block;font-size:var(--s-xs);color:var(--text-soft)}
.kpi b{display:block;font:600 clamp(1.15rem,2.4vw,1.6rem)/1.2 var(--f-display);font-variant-numeric:tabular-nums;margin-top:.3rem;letter-spacing:-.02em}
@media (max-width:480px){.kpis{grid-template-columns:1fr 1fr}}

/* features */
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.feat > div{display:flex;flex-direction:column;gap:.55rem;min-width:0;padding-top:1.1rem;border-top:1px solid var(--line)}
.feat svg{width:22px;height:22px;color:var(--gold)}
.feat h3{font-size:1.02rem}
.feat p{font-size:var(--s-sm);color:var(--text-soft)}
@media (max-width:900px){.feat{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.feat{grid-template-columns:1fr}}


@media (max-width:600px){
  .svc main > section{padding-block:3.25rem}
  .ctas .btn{flex:1 1 auto;justify-content:center}
}