/* TaxReck About page: its own rules on top of the shared blocks (blocks.css) and the split screen (split.css).
   Class names start with a-. Built 24 Sep 2026: the name found inside reckless, a letter from the founder,
   the team by speciality and the path a file takes, promises in numbers, credentials, and where we are. */

.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 name ---------- */
.a-entry{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,54px);align-items:center}
.a-rk{color:var(--ink);font-size:clamp(56px,7.4vw,104px);font-weight:800;letter-spacing:-.06em;line-height:.9;white-space:nowrap}
.a-rk s{position:relative;color:#C3CAD6;text-decoration:none}
.a-rk s::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:.1em;border-radius:.05em;background:var(--acc);transform:scaleX(0);transform-origin:left center;animation:aStrike .9s var(--ease) .6s forwards}
@keyframes aStrike{to{transform:scaleX(1)}}
.a-rk-say{margin-top:22px!important;color:var(--ink);font-size:clamp(20px,1.9vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.35}
.a-rk-say b{color:#9AA3B5;text-decoration:line-through;text-decoration-color:var(--acc);text-decoration-thickness:3px}
.a-rk-say i{font-style:normal;color:var(--acc-text)}
.a-rk-body{margin-top:14px!important;max-width:52ch;color:var(--graphite);font-size:16.5px;line-height:1.7}
.a-rk-end{margin-top:16px!important;color:var(--acc-text);font-size:16.5px;font-weight:800}
.a-mend{margin:0}
.a-mend img{display:block;width:100%;height:clamp(300px,34vw,420px);object-fit:cover;object-position:50% 50%;-webkit-mask-image:radial-gradient(72% 78% at 52% 50%,#000 34%,transparent 84%);mask-image:radial-gradient(72% 78% at 52% 50%,#000 34%,transparent 84%);animation:bSettle 1.7s var(--ease) both}
.a-intro{margin-top:clamp(26px,3vw,38px)!important;max-width:64ch;color:var(--graphite);font-size:17px;line-height:1.7}

/* ---------- 02 the founder's letter: one dark slab running off the right edge ---------- */
.a-letter{position:relative;overflow:hidden;margin-right:calc(var(--pad) * -1);padding:0 var(--pad) clamp(28px,3.2vw,44px) clamp(26px,3vw,44px);border-radius:30px 0 0 30px;background:linear-gradient(150deg,#16203B,#0B1020 60%);color:#fff}
.a-letter-ph{position:relative;height:clamp(170px,19vw,230px);margin:0 calc(var(--pad) * -1) 0 calc(clamp(26px,3vw,44px) * -1)}
.a-letter-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;opacity:.8;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.a-q{position:relative;margin-top:-54px!important;color:var(--acc);font-size:120px;font-weight:800;line-height:.6;letter-spacing:-.05em}
.a-letter-body{max-width:60ch}
.a-letter-body p{color:#DDE3EC;font-size:17.5px;line-height:1.75}
.a-letter-body p + p{margin-top:16px}
.a-letter-body .a-first{color:#fff;font-size:clamp(22px,2.2vw,27px);font-weight:700;letter-spacing:-.025em;line-height:1.35}
.a-letter-body b{color:var(--acc);font-weight:700}

/* ---------- 03 the people and the path a file takes ---------- */
.a-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,2.6vw,38px);margin:4px 0 0;padding:0;list-style:none}
.a-team li{padding:22px 0 24px;border-top:1px solid var(--line)}
.a-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:50%;background:var(--acc-soft);color:var(--acc-text)}
.a-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.a-team li.lead .a-ic{background:var(--ink);color:var(--acc)}
.a-team li.lead{border-top:2px solid var(--ink)}
.a-role{color:var(--ink);font-size:18px;font-weight:800;letter-spacing:-.025em}
.a-does{margin-top:8px!important;max-width:34ch;color:var(--muted);font-size:14.5px;line-height:1.6}
.a-work{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,50px);align-items:center;margin-top:clamp(30px,3.6vw,48px)}
.a-work figure{margin:0}
.a-work img{display:block;width:100%;height:clamp(240px,27vw,330px);object-fit:cover;object-position:50% 45%;border-radius:26px;animation:bSettle 1.7s var(--ease) both}
.a-path-k{color:var(--ink);font-size:18px;font-weight:800;letter-spacing:-.025em}
.a-path{position:relative;margin:18px 0 0;padding:0;list-style:none}
.a-path::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--acc),rgba(var(--acc-rgb),.2))}
.a-path li{position:relative;padding:9px 0 9px 38px;color:var(--graphite);font-size:15px;line-height:1.5}
.a-path li::before{content:"";position:absolute;left:4px;top:13px;width:14px;height:14px;border-radius:50%;border:2px solid var(--acc-text);background:#fff}
.a-path li:last-child::before{background:var(--acc)}
.a-path b{color:var(--ink);font-weight:800}

/* ---------- 04 promises in numbers ---------- */
.a-promises{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);margin:4px 0 0;padding:0;list-style:none}
.a-promises li{padding:20px 0;border-top:2px solid var(--ink)}
.a-promises b{display:block;color:var(--ink);font-size:clamp(28px,2.9vw,40px);white-space:nowrap;font-weight:800;letter-spacing:-.05em;line-height:1}
.a-promises span{display:block;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.55}
.a-hold{margin-top:clamp(22px,2.6vw,30px)!important;max-width:64ch;color:var(--graphite);font-size:16px;line-height:1.65}

/* ---------- 05 credentials ---------- */
.a-creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);margin:4px 0 0;padding:0;list-style:none}
.a-creds li{padding:18px 0;border-top:1px solid var(--line)}
.a-creds b{display:block;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.02em}
.a-creds span{display:block;margin-top:5px;color:var(--muted);font-size:14px;line-height:1.55}
.a-creds a{color:var(--acc-text);font-weight:700}
.a-soft{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 30px;margin-top:clamp(26px,3vw,36px);padding-top:24px;border-top:1px solid var(--line)}
.a-soft p{flex-basis:100%;color:var(--muted);font-size:13px;font-weight:700}
.a-soft img{display:block;width:auto;height:calc(var(--h) * 1px)}

/* ---------- 06 where we are ---------- */
.a-where{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(12px,1.6vw,20px)}
.a-where figure{margin:0;border-radius:24px;overflow:hidden}
.a-where img{display:block;width:100%;height:clamp(260px,29vw,360px);object-fit:cover;animation:bSettle 1.7s var(--ease) both}
.a-where figure + figure img{object-position:40% 50%}
.a-addr{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 clamp(18px,2.4vw,34px);margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none}
.a-addr li{padding:16px 0;border-top:1px solid var(--line)}
.a-addr small{display:block;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.a-addr b,.a-addr a{display:block;margin-top:6px;color:var(--ink);font-size:16px;font-weight:700;line-height:1.5;text-decoration:none}
.a-addr a:hover{color:var(--acc-text)}

/* ---------- narrower screens ---------- */
@media (max-width:1000px){
  .a-soft{justify-content:flex-start;gap:22px 34px}
  .a-soft img{height:calc(var(--h) * .82px)}
  .a-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-promises{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .a-entry,.a-work{grid-template-columns:1fr}
  .a-mend{order:-1}
  .a-mend img{height:clamp(220px,44vw,320px)}
  .a-where{grid-template-columns:1fr}
}
@media (max-width:900px){
  .a-letter{margin-left:calc(var(--pad) * -1);padding-left:var(--pad);border-radius:0}
  .a-letter-ph{margin-left:calc(var(--pad) * -1)}
}
@media (max-width:520px){
  .a-team{grid-template-columns:1fr}
  .a-creds{grid-template-columns:1fr}
  .a-rk{font-size:clamp(52px,17vw,80px)}
  .a-letter-body p{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .a-mend img,.a-work img,.a-where img{animation:none}
  .a-rk s::after{animation:none;transform:scaleX(1)}
}