/* Art of Bookkeeping: layout and components. Theme-agnostic: every colour, font, and ornament comes from theme.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body-size)/1.6 var(--sans);text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track);line-height:1.04;margin:0;text-wrap:balance}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
figure{margin:0}
.wrap{width:min(100% - 2*var(--m),1320px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:9;background:var(--ink);color:var(--bg);padding:10px 16px}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.soft{color:var(--muted);font-size:.9em}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;background:var(--accent);color:var(--on-accent)!important;
 text-decoration:none;font:500 16px/1.2 var(--sans);border:0;border-radius:var(--radius-btn);cursor:pointer;transition:background .2s}
.btn:hover{background:var(--accent-hover)}.btn[disabled]{opacity:.6;cursor:wait}
.arrow{display:inline-flex;gap:8px;align-items:center;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.arrow::after{content:"→";transition:transform .2s}.arrow:hover::after{transform:translateX(3px)}
.avatar{border-radius:50%;object-fit:cover;aspect-ratio:1}

/* header */
.top .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px 0;border-bottom:var(--rule-strong)}
.dateline{grid-column:1;grid-row:1;margin:0;font-size:14px;color:var(--muted)}
.mark{grid-column:2;font-family:var(--display);font-size:28px;letter-spacing:var(--display-track);text-decoration:none;white-space:nowrap}
.nav{grid-column:3;justify-self:end;display:flex;gap:24px;align-items:center}
.nav a:not(.btn){text-decoration:none;font-size:15px}.nav a[aria-current]:not(.btn){text-decoration:underline}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--ink);font-weight:500;font-size:15px}
.mnav summary::-webkit-details-marker{display:none}
.mnav nav{position:absolute;right:0;top:calc(100% + 8px);z-index:5;display:grid;gap:4px;min-width:220px;padding:12px;background:var(--surface);border:1px solid var(--ink)}
.mnav nav a:not(.btn){padding:10px 8px;text-decoration:none;font-size:17px}.mnav .btn{margin-top:6px}

/* sections */
.sec{border-top:var(--rule-strong);padding:var(--sec-pad) 0}
.sh{display:grid;grid-template-columns:4fr 7fr;gap:var(--gap);margin-bottom:48px;align-items:start}
.sh h2,.sec h2{font-size:var(--h2)}
.dek{font-family:var(--display);font-size:var(--dek);line-height:1.45;max-width:40ch}
.sh .dek{margin-bottom:20px}.sh .dek:last-child{margin-bottom:0}
.lede{font-family:var(--display);font-size:var(--dek);font-style:var(--lede-style);color:var(--muted);line-height:1.4}

/* home hero and page heads */
.hero{padding:72px 0 88px}
.h-grid,.ph-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end}
.hero h1{font-size:var(--h1-hero);font-weight:var(--h1-weight)}
.phead{padding:64px 0 80px}.phead h1{font-size:var(--h1)}
.hero .dek,.phead .dek{margin:28px 0 32px;max-width:34ch}
.h-pic img,.ph-pic img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:var(--photo-filter)}
.ph-pic img{aspect-ratio:5/4}
.h-pic figcaption{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--muted);margin-top:14px}
.h-pic figcaption .avatar{width:88px;height:88px;flex:none}.h-pic figcaption b{color:var(--ink);font-weight:500}
.byline{display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--ink);padding-top:16px;margin-top:44px;font-size:15px;color:var(--muted)}
.byline b{color:var(--ink);font-weight:500}
.jump{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.jump a{display:inline-flex;min-height:44px;align-items:center;padding:0 16px;border:1px solid var(--ink);text-decoration:none;font-size:15px;border-radius:var(--radius-btn)}
.jump a:hover{background:var(--ink);color:var(--bg)}

/* intro */
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--hair);padding-top:28px;font-size:16px}
.cols4 b{display:block;font-family:var(--display);font-weight:400;font-size:22px;margin-bottom:6px}

/* the ledger calculator */
.c-grid{display:grid;grid-template-columns:4fr 7fr;gap:var(--gap);align-items:start}
.c-say p{max-width:36ch;margin:24px 0}.c-say p+p{margin-top:0}
.calc{position:relative;background:var(--calc-bg);padding:36px 40px 32px var(--calc-indent)}
.calc-k{margin:0;font-family:var(--display);font-style:var(--lede-style);font-size:22px;color:var(--muted)}
.calc-total{margin:4px 0 0;font-family:var(--display);font-size:var(--calc-total);line-height:1.05;letter-spacing:var(--display-track)}
.calc-total small{display:block;font-family:var(--sans);font-size:15px;color:var(--muted);letter-spacing:0;margin-top:6px}
.calc-rate{margin:24px 0}
.calc-rate label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.calc-rate output{font-family:var(--display);font-weight:400;font-size:28px;color:var(--accent)}
.calc-rate input{width:100%;appearance:none;-webkit-appearance:none;height:8px;border-radius:99px;margin:18px 0 6px;cursor:pointer;
 background:linear-gradient(to right,var(--track-on) 0 var(--p,40%),var(--track) var(--p,40%) 100%)}
.calc-rate input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--thumb);border:4px solid var(--thumb-ring);cursor:grab}
.calc-rate input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--thumb);border:4px solid var(--thumb-ring)}
.calc-rows{margin:0;font-size:16px}
.calc-rows div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;min-height:40px}
.calc-rows dt span{display:block;font-size:.82em;color:var(--muted);margin-top:2px}
.calc-rows dd{margin:0;white-space:nowrap;font-family:var(--display);font-size:20px}
.calc-note{font-size:13px;color:var(--muted);margin:16px 0 0;font-style:italic}

/* service tabs: sticky list + panel; .as-acc (set by site.js on phones) turns it into an accordion */
.tabs{display:grid;grid-template-columns:4fr 7fr;gap:var(--gap);align-items:start}
.tabs [role=tablist]{position:sticky;top:24px;display:grid;border-top:1px solid var(--ink)}
.tabs [role=tab]{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:left;border:0;border-bottom:1px solid var(--ink);background:transparent;
 padding:18px 0;font-family:var(--display);font-size:26px;color:var(--muted);cursor:pointer;transition:color .2s,padding .25s}
.tabs [role=tab] em{font-family:var(--sans);font-style:normal;font-size:14px}
.tabs [role=tab]:hover{color:var(--ink)}.tabs [role=tab][aria-selected=true]{color:var(--accent);padding-left:18px;box-shadow:inset 4px 0 0 var(--accent)}
.plead{font-family:var(--display);font-style:var(--lede-style);font-size:26px;margin:0 0 28px;color:var(--muted)}
.svc{list-style:none;margin:0;padding:0}
.svc li{display:grid;grid-template-columns:5fr 7fr;gap:28px;padding:22px 0;border-top:1px solid var(--hair)}
.svc h4{font-size:24px;line-height:1.15}.svc p{margin:0;font-size:16px}
.acc{display:none;margin:0}
.acc button{all:unset;box-sizing:border-box;display:flex;width:100%;justify-content:space-between;align-items:center;cursor:pointer}
.acc button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.as-acc{display:block}.as-acc [role=tablist]{display:none!important}.as-acc .acc{display:block}.as-acc .panel:not(.open) .pbody{display:none}
.acc i,.faqs summary i{position:relative;width:14px;height:14px;flex:none}
.acc i::before,.acc i::after,.faqs summary i::before,.faqs summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;transition:transform .25s}
.acc i::after,.faqs summary i::after{transform:rotate(90deg)}.open .acc i::after,.faqs details[open] summary i::after{transform:none}
.services .sh .arrow{margin-top:4px}

/* features and numbered points */
.ft-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);align-items:start}
.ft-grid.flip{grid-template-columns:7fr 5fr}
.ft-pic img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:var(--photo-filter);position:sticky;top:24px}
.ft-grid h2{margin-bottom:32px}
.points{list-style:none;margin:0;padding:0;counter-reset:pt;display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.points li{counter-increment:pt;padding:18px 0 18px 52px;border-top:1px solid var(--hair);position:relative}
.points li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:20px;font-family:var(--display);font-size:20px;color:var(--accent)}
.points h3{font-size:22px;margin-bottom:6px}.points p{margin:0;font-size:16px}
.approach .points{grid-template-columns:repeat(3,1fr)}
.checks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"";position:absolute;left:2px;top:.55em;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.checks.big li{font-family:var(--display);font-size:22px}

/* letter */
.l-col{max-width:680px;margin-inline:auto}
.l-col .avatar{width:200px;height:200px;margin-bottom:28px}
.l-col h2{margin-bottom:28px}.l-col p{font-family:var(--display);font-size:20px;line-height:1.6}
.sign{font-family:var(--display);font-style:italic;font-size:30px!important;margin:32px 0 28px!important}
.sign span{display:block;font-family:var(--sans);font-style:normal;font-size:14px;color:var(--muted)}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.words .quotes:has(.q:nth-child(4)){grid-template-columns:repeat(2,1fr)}
.q{border-top:1px solid var(--ink);padding-top:22px}
.q blockquote{margin:0 0 18px;font-family:var(--display);font-size:22px;line-height:1.4}
.q blockquote p::before{content:"“"}.q blockquote p::after{content:"”"}
.q figcaption{font-size:14px;color:var(--muted)}.q figcaption b{display:block;color:var(--ink);font-weight:500}

/* faq */
.fq-grid{display:grid;grid-template-columns:4fr 7fr;gap:var(--gap);align-items:start}
.fq-h{position:sticky;top:24px}.fq-h .arrow,.fq-h .soft{margin-top:16px;display:inline-flex}
.faqs{border-top:1px solid var(--ink)}
.faqs details{border-bottom:1px solid var(--ink)}
.faqs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--display);font-size:24px;line-height:1.25}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:hover{color:var(--accent)}
.ans{padding:0 0 24px;max-width:68ch;font-size:17px}.ans ul{margin:0;padding-left:20px;display:grid;gap:8px}

/* about */
.st-grid{display:grid;grid-template-columns:7fr 4fr;gap:var(--gap);align-items:start}
.st-text h2{margin-bottom:20px}.st-text .lede{margin-bottom:28px;max-width:34ch}.st-text p{max-width:62ch}
.st-pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.st-pic figcaption{font-size:14px;color:var(--muted);margin-top:14px}.st-pic figcaption b{color:var(--ink);font-weight:500}
.glance{border-top:1px solid var(--ink);padding-top:20px}.glance h3{font-size:26px;margin-bottom:18px}
.n-grid{display:grid;grid-template-columns:4fr 7fr;gap:var(--gap);align-items:start}
.badge{display:flex;gap:16px;align-items:center;margin-top:28px;font-size:15px;color:var(--muted);max-width:30ch}.badge img{width:72px;flex:none}
.figs{margin:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.figs div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:24px 24px 24px 0;border-bottom:1px solid var(--hair)}
.figs dd{margin:0;font-family:var(--display);font-size:clamp(3rem,6vw,5.4rem);line-height:1;letter-spacing:var(--display-track)}
.figs dd i{font-style:normal;color:var(--accent)}.figs dt{font-size:15px;color:var(--muted);max-width:24ch}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.logos li{background:var(--bg);display:grid;place-items:center;padding:28px 24px;min-height:120px}
.logos img{max-height:64px;width:auto;filter:grayscale(1);opacity:.85;mix-blend-mode:multiply}

/* contact band */
.b-grid{display:grid;grid-template-columns:7fr 4fr;gap:var(--gap);align-items:end}
.b-say{font-size:var(--h2)!important}
.b-who .avatar{width:96px;height:96px;margin-bottom:20px}
.b-links{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin:20px 0}
.b-links .arrow{overflow-wrap:anywhere}

/* contact form */
.contact .ph-grid{align-items:start}
form.lead{display:grid;gap:18px;max-width:640px;margin-top:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld label{display:block;font-weight:500;font-size:15px;margin-bottom:6px}.fld label span{font-weight:400;color:var(--muted)}
.fld input,.fld textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--field-bg);border:1px solid var(--ink);border-radius:var(--radius-field);padding:12px 14px;min-height:48px}
.fld textarea{resize:vertical}
.fld [aria-invalid=true]{border-color:var(--alert);box-shadow:inset 0 0 0 1px var(--alert)}
.err{color:var(--alert);margin:0;min-height:0}.err:empty{display:none}
.fine{font-size:13px;color:var(--muted);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{padding:28px;border:1px solid var(--ink);background:var(--surface);font-family:var(--display);font-size:22px;max-width:640px}
.ct-side h2{font-size:30px!important;margin:32px 0 18px}
.who{display:flex;gap:14px;align-items:center}.who .avatar{width:64px;height:64px}.who b{display:block;font-weight:500}
.info{margin:24px 0 0;display:grid;border-top:1px solid var(--ink)}
.info div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.info dt{color:var(--muted);font-size:15px}.info dd{margin:0;overflow-wrap:anywhere}

/* footer */
.foot{border-top:var(--rule-strong);padding:56px 0 32px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.f-h{font-family:var(--display);font-size:var(--h2);font-weight:var(--h1-weight);letter-spacing:var(--display-track);line-height:1.04;margin-bottom:24px;max-width:16ch}
.foot h2{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);margin-bottom:12px}
.foot ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:4px}.foot a{text-decoration:none;overflow-wrap:anywhere}.foot a:hover{text-decoration:underline}
.colophon{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--ink);padding-top:16px;margin-top:48px;font-size:13px;color:var(--muted)}

/* entrances (site.js adds .rise and .in) */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* tablet */
@media (max-width:960px){
 .h-grid,.ph-grid,.c-grid,.sh,.tabs,.ft-grid,.ft-grid.flip,.fq-grid,.st-grid,.n-grid,.b-grid{grid-template-columns:1fr;gap:36px}
 .tabs [role=tablist],.fq-h,.ft-pic img{position:static}
 .ft-pic img{aspect-ratio:16/10}.ft-grid.flip .ft-pic{order:-1}
 .cols4{grid-template-columns:1fr 1fr}.quotes,.words .quotes:has(.q:nth-child(4)){grid-template-columns:1fr 1fr}.approach .points{grid-template-columns:1fr}
 .f-grid{grid-template-columns:1fr 1fr}.f-say{grid-column:1/-1}
 .st-pic{max-width:420px}
}
/* phone */
@media (max-width:760px){
 .top .bar{grid-template-columns:1fr auto;padding:14px 0}.dateline{display:none}.mark{grid-column:1;font-size:22px}
 .nav{display:none}.mnav{display:block;grid-column:2}
 .hero{padding:36px 0 56px}.phead{padding:36px 0 52px}
 .h-pic img{aspect-ratio:4/3}.ph-pic img{aspect-ratio:4/3}
 .sh{margin-bottom:24px;gap:16px}
 .calc{padding:24px 16px 24px var(--calc-indent-phone)}.calc-rows dd{font-size:17px}
 .as-acc .panel{border-top:1px solid var(--ink)}.as-acc .panel:last-child{border-bottom:1px solid var(--ink)}
 .as-acc .acc button{padding:18px 0;font-family:var(--display);font-size:24px;min-height:44px}.as-acc .pbody{padding-bottom:20px}
 .plead{font-size:20px;margin-bottom:12px}.svc li{grid-template-columns:1fr;gap:6px;padding:16px 0}.svc h4{font-size:21px}
 .cols4,.points,.quotes,.words .quotes:has(.q:nth-child(4)),.figs,.row2{grid-template-columns:1fr}
 .figs div{padding-right:0}
 .faqs summary{font-size:20px}
 .info div{grid-template-columns:1fr;gap:2px}
 .l-col p{font-size:18px}
}
/* a section head with no dek or link is a single column */
.sh:has(> div:empty){grid-template-columns:1fr}.sh > div:empty{display:none}
@media (max-width:760px){.f-grid{grid-template-columns:1fr;gap:28px}.colophon{flex-direction:column;gap:6px}}