/* TaxReck Fees page: its own rules on top of the shared blocks (blocks.css) and the split screen (split.css).
   Class names start with f-. Rebuilt 23 Sep 2026 around what is happening to the client rather than what kind
   of client they are: a track of eight moments, each carrying the prices that belong to it. Nothing adds up. */

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- 01 the track of moments ---------- */
.f-lede{max-width:62ch;color:var(--graphite);font-size:17.5px;line-height:1.65}
.f-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,26px) 6px;margin:clamp(28px,3.2vw,40px) 0 clamp(26px,3vw,36px)}
.f-stop{position:relative;padding:22px 6px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;line-height:1.3;text-align:center;cursor:pointer}
.f-stop::before{content:"";position:absolute;left:0;right:0;top:29px;height:2px;background:var(--line)}
.f-stop i{position:relative;z-index:1;display:block;width:16px;height:16px;margin:0 auto 12px;border-radius:50%;border:2px solid var(--line);background:#fff;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.f-stop:hover{color:var(--ink)}
.f-stop:hover i{border-color:var(--acc-text)}
.f-stop[aria-selected="true"]{color:var(--ink)}
.f-stop[aria-selected="true"] i{border-color:var(--acc-text);background:var(--acc);transform:scale(1.35)}

.f-panel{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,3.4vw,52px);align-items:center;animation:fIn .4s var(--ease) both}
.f-panel[hidden]{display:none}
@keyframes fIn{from{opacity:0;transform:translateY(10px)}}
.f-panel h3{margin:0;color:var(--ink);font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.f-what{margin-top:12px!important;max-width:56ch;color:var(--graphite);font-size:16.5px;line-height:1.6}
.f-we{margin:18px 0 0;padding:0;list-style:none}
.f-we li{position:relative;padding:7px 0 7px 26px;color:var(--muted);font-size:14.5px;line-height:1.5}
.f-we li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.f-prices{display:flex;flex-wrap:wrap;gap:12px 30px;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--line);list-style:none}
.f-prices b{display:block;color:var(--ink);font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.f-prices span{display:block;margin-top:5px;max-width:24ch;color:var(--muted);font-size:12.5px;line-height:1.4}
.f-ph{margin:0}
.f-ph img{display:block;width:100%;height:clamp(280px,31vw,370px);object-fit:cover;object-position:55% 45%;-webkit-mask-image:radial-gradient(74% 80% at 52% 50%,#000 34%,transparent 84%);mask-image:radial-gradient(74% 80% at 52% 50%,#000 34%,transparent 84%);animation:bSettle 1.6s var(--ease) both}

/* ---------- 02 everything else ---------- */
.f-rest-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,3.4vw,50px);align-items:center;margin-top:4px}
.f-rest{margin:0;padding:0;list-style:none}
.f-rest li{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.f-rest li:last-child{border-bottom:1px solid var(--line)}
.f-rest b{flex:none;width:74px;color:var(--acc-text);font-size:21px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.f-rest span{color:var(--ink);font-size:15.5px;font-weight:700}
.f-rest i{display:block;margin-top:2px;color:var(--muted);font-size:12.5px;font-style:normal;font-weight:500;line-height:1.45}
.f-rest-ph{margin:0}
.f-rest-ph img{display:block;width:100%;height:clamp(240px,27vw,320px);object-fit:cover;object-position:45% 50%;border-radius:24px;animation:bSettle 1.7s var(--ease) both}
.f-rest-ph figcaption{margin-top:12px;color:var(--muted);font-size:13.5px;line-height:1.55}
.f-foot{margin-top:26px!important;max-width:74ch;color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- 03 never on the bill ---------- */
.f-never-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,3.4vw,50px);align-items:center;margin-top:4px}
.f-never{margin:0;padding:0;list-style:none}
.f-never li{padding:16px 0;border-top:1px solid var(--line)}
.f-never li:last-child{border-bottom:1px solid var(--line)}
.f-never b{display:block;color:var(--ink);font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.f-never span{display:block;margin-top:5px;color:var(--muted);font-size:14.5px;line-height:1.55}
.f-never-ph{margin:0}
.f-never-ph img{display:block;width:100%;height:clamp(250px,28vw,330px);object-fit:cover;object-position:55% 42%;-webkit-mask-image:radial-gradient(72% 78% at 52% 50%,#000 32%,transparent 82%);mask-image:radial-gradient(72% 78% at 52% 50%,#000 32%,transparent 82%);animation:bSettle 1.8s var(--ease) both}
.f-hours{margin-top:clamp(24px,3vw,32px)!important;max-width:68ch;color:var(--graphite);font-size:16.5px;line-height:1.65}
.f-hours b{color:var(--ink);font-weight:800}

/* ---------- narrower screens ---------- */
@media (max-width:1000px){
  .f-panel,.f-rest-wrap,.f-never-wrap{grid-template-columns:1fr}
  .f-ph,.f-rest-ph,.f-never-ph{order:-1}
  .f-ph img,.f-never-ph img{height:clamp(220px,40vw,300px)}
  .f-track{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .f-track{grid-template-columns:1fr;gap:2px}
  .f-stop{display:flex;align-items:center;gap:12px;padding:10px 0 10px 2px;border-top:1px solid var(--line);text-align:left}
  .f-stop::before{display:none}
  .f-stop i{margin:0}
  .f-rest b{width:66px;font-size:19px}
  .f-prices{gap:12px 20px}
}
@media (prefers-reduced-motion:reduce){
  .f-panel,.f-ph img,.f-rest-ph img,.f-never-ph img{animation:none}
  .f-stop,.f-stop i{transition:none}
}

/* A link to one moment (for example fees.html#staff) lands with its heading clear of the top edge, and on smaller screens
   clear of the fixed top bar */
.f-panel h3[id]{scroll-margin-top:28px}
@media (max-width:1099px){ .f-panel h3[id]{scroll-margin-top:96px} }