/* Matt's Books: independent, responsive website styles. */
:root { --ink:#203d32; --text:#56615a; --green:#214b39; --sage:#e2eadb; --paper:#faf9f5; --line:#dbe1d6; --accent:#965a38; --white:#fff; --serif:Georgia,'Times New Roman',serif; --sans:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; scroll-padding-top:100px; }
body { margin:0; background:var(--paper); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
button { font:inherit; cursor:pointer; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { color:var(--ink); }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.045em; line-height:1.08; }
h1 { font-size:clamp(48px,5.3vw,76px); }
h2 { font-size:clamp(34px,3.4vw,48px); }
h3 { font-size:22px; line-height:1.25; letter-spacing:-.025em; font-weight:500; }
em { color:var(--accent); font-weight:400; }
.container { width:min(1180px,calc(100% - 96px)); margin-inline:auto; }
.section { padding-block:100px; }
.eyebrow { color:var(--green); font-size:12px; font-weight:700; letter-spacing:.10em; line-height:1.5; margin-bottom:22px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:28px; padding:16px 23px; border:1px solid var(--green); border-radius:5px; background:var(--green); color:var(--white); font-size:16px; font-weight:600; line-height:1.4; transition:background .2s,transform .2s; }
.button:hover { background:#163726; transform:translateY(-2px); }
.button span { font-size:20px; font-weight:400; }
.button-small { padding:11px 18px; gap:24px; }
.text-link { display:inline-flex; align-items:center; gap:16px; color:var(--green); font-size:15px; font-weight:600; padding-block:8px; border-bottom:1px solid #9eaf9f; }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; background:var(--green); color:white; padding:12px 20px; }
.skip-link:focus { top:12px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.site-header { position:relative; z-index:5; border-bottom:1px solid var(--line); }
.header-inner { min-height:100px; display:flex; justify-content:space-between; align-items:center; gap:25px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); flex-shrink:0; }
.brand img { border-radius:50%; width:48px; height:48px; }
.brand > span { font-family:var(--serif); font-size:26px; line-height:1.2; letter-spacing:-.04em; }
.brand small { display:block; font-family:var(--sans); font-size:12px; letter-spacing:.13em; margin-top:6px; }
#main-navigation { display:flex; align-items:center; gap:30px; font-size:15px; color:var(--ink); }
#main-navigation > a:not(.button):hover { color:var(--accent); }
.menu-toggle { display:none; border:1px solid var(--line); border-radius:5px; padding:8px 12px; color:var(--ink); background:transparent; font-size:15px; }
.hero { padding-block:70px 65px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:70px; align-items:center; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.13em; }
.status-dot { width:6px; height:6px; background:#789566; border-radius:50%; flex-shrink:0; }
.hero-description { max-width:450px; font-size:17px; line-height:1.8; margin-top:25px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:28px; }
.hero-actions .button { font-size:15px; padding-inline:18px; gap:20px; }
.hero-actions .text-link { font-size:15px; }
.location { margin-top:30px; font-size:13px; line-height:1.8; }
.location > span:first-child { color:var(--accent); padding-right:4px; }
.location > span:last-child { padding-left:14px; }
.portrait-card { position:relative; min-height:510px; background:var(--sage); border-radius:150px 150px 10px 10px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; }
.portrait-label { position:absolute; top:48px; font-size:12px; letter-spacing:.10em; color:#54704d; z-index:2; }
.portrait-circle { position:absolute; width:360px; height:360px; border:1px solid #becdb3; border-radius:50%; top:100px; left:50%; transform:translateX(-50%); }
.portrait { position:relative; width:360px; height:448px; object-fit:contain; object-position:bottom; z-index:1; }
.portrait-caption { position:absolute; bottom:24px; left:24px; right:24px; z-index:2; display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.96); padding:18px 20px; border-radius:6px; box-shadow:0 8px 25px #203d3208; }
.caption-mark { display:grid; place-items:center; width:35px; height:35px; border:1px solid #d2ddca; border-radius:50%; color:var(--green); }
.portrait-caption strong { color:var(--ink); font-size:16px; font-weight:500; line-height:1.25; display:block; }
.portrait-caption strong br { display:none; }
.portrait-caption small { font-size:13px; display:block; margin-top:3px; }
.portrait-footnote { font-family:var(--serif); font-style:italic; color:#56634f; text-align:center; margin-top:15px; font-size:16px; }
.experience-strip { background:#f0f2eb; border-block:1px solid var(--line); }
.experience-grid { display:grid; grid-template-columns:1fr 1fr 1fr; padding-block:28px; }
.experience-grid p { padding-left:35px; border-left:1px solid #d3dccc; }
.experience-grid p:first-child { border:0; padding-left:0; }
.experience-grid strong { display:block; font-family:var(--serif); font-size:25px; color:var(--ink); font-weight:400; line-height:1.3; letter-spacing:-.03em; }
.experience-grid span { font-size:13px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.about-copy { padding-top:4px; }
.about-copy p { font-size:16px; margin-bottom:18px; }
.about-copy .lead { color:var(--ink); font-size:20px; line-height:1.6; }
.about-copy .text-link { margin-top:4px; }
.services-section { background:#edf1e9; }
.section-heading { display:flex; justify-content:space-between; gap:60px; align-items:flex-end; margin-bottom:45px; }
.section-heading > p { font-size:16px; max-width:300px; padding-bottom:5px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.service-card { padding:30px 27px 22px; background:var(--paper); border:1px solid #dce3d6; border-radius:7px; min-height:300px; }
.service-number { color:#53694f; font-size:12px; letter-spacing:.12em; font-weight:600; }
.service-card h3 { margin-block:22px 15px; }
.service-card > p { font-size:16px; line-height:1.8; min-height:66px; }
details { border-top:1px solid var(--line); margin-top:22px; font-size:16px; }
summary { cursor:pointer; color:var(--green); font-size:15px; font-weight:600; padding-top:15px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; }
summary::-webkit-details-marker { display:none; }
summary span { font-size:19px; font-weight:400; transition:transform .2s; }
details[open] summary span { transform:rotate(45deg); }
details ul { padding-left:16px; margin-block:15px 0; }
details li { margin-block:8px; }
.approach-grid { display:grid; grid-template-columns:1fr 1fr; gap:95px; }
.approach-grid > div > p:last-child { max-width:370px; margin-top:24px; font-size:16px; }
.approach-items article { display:flex; gap:23px; padding-block:24px; border-bottom:1px solid var(--line); }
.approach-items article:first-child { padding-top:0; }
.approach-items article > span { color:var(--accent); font-family:var(--serif); font-size:18px; line-height:1.4; }
.approach-items h3 { font-size:18px; margin-bottom:10px; }
.approach-items p { font-size:16px; }
.software-strip { display:flex; align-items:center; justify-content:center; gap:50px; border-top:1px solid var(--line); margin-top:65px; padding-top:35px; }
.software-strip p { font-size:12px; letter-spacing:.13em; color:#56634f; }
.software-strip img { width:auto; max-width:170px; max-height:46px; object-fit:contain; }
.education-credential { flex-shrink:0; border-left:1px solid var(--line); padding-left:28px; line-height:1.4; text-align:center; }
.software-strip .credential-logo { display:block; width:170px; height:auto; max-height:none; margin-inline:auto; }
.credential-program { display:block; margin-top:5px; color:var(--text); font-size:13px; }
.pricing-section { background:#e6e9df; padding-block:65px; }
.pricing-inner { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.pricing-inner h2 { font-size:36px; }
.pricing-inner > div > p:not(.eyebrow) { font-size:16px; margin-bottom:16px; }
.contact-section { padding-bottom:70px; }
.contact-panel { background:var(--green); border-radius:10px; padding:65px; display:grid; grid-template-columns:1.35fr 1fr; gap:80px; color:#d1dfd3; }
.contact-panel .eyebrow { color:#bdcfaf; font-size:12px; }
.contact-panel h2 { color:#faf8ee; font-size:46px; }
.contact-copy > p:not(.eyebrow) { max-width:340px; font-size:16px; margin-block:22px 26px; }
.button-light { background:#f1f1e6; border-color:#f1f1e6; color:var(--green); gap:55px; }
.button-light:hover { background:#d8e2cb; }
.contact-copy > small { display:block; font-size:13px; color:#b7caba; margin-top:12px; }
.contact-details { border-left:1px solid #52715a; padding-left:45px; align-self:center; }
.contact-details > p { font-size:12px; letter-spacing:.10em; }
.contact-details h3 { color:white; font-family:var(--serif); font-size:30px; margin-block:8px 24px; }
.contact-details > a { display:flex; justify-content:space-between; gap:16px; color:#f7f5ed; border-bottom:1px solid #54705b; padding-block:12px; font-size:17px; }
.contact-details > a:hover { color:#d7e5b9; }
.contact-area { margin-top:30px; font-family:var(--serif); font-size:21px; color:#e7edde; line-height:1.4; }
.contact-area span { display:block; font:13px/1.7 var(--sans); color:#b5c7b7; margin-top:14px; }
.site-footer { padding-bottom:30px; }
.footer-inner { border-top:1px solid var(--line); padding-top:30px; display:flex; justify-content:space-between; align-items:center; gap:25px; }
.footer-brand { color:var(--ink); font-family:var(--serif); font-size:23px; letter-spacing:-.04em; }
.footer-brand span { display:block; font:13px/1.7 var(--sans); color:var(--text); letter-spacing:0; }
.footer-inner p,.back-top { font-size:13px; }
@media(min-width:1450px) { .hero { padding-block:90px; } }
@media(max-width:1050px) {
 .container { width:calc(100% - 64px); }
 .hero-grid { gap:35px; grid-template-columns:1.1fr 1fr; }
 h1 { font-size:56px; }
 .portrait-card { min-height:480px; border-radius:120px 120px 8px 8px; }
 .portrait { width:330px; height:410px; }
 #main-navigation { gap:20px; }
 .brand small { display:none; }
 .section { padding-block:75px; }
 .about-grid,.approach-grid,.pricing-inner { gap:45px; }
 .service-card { padding:25px 21px 20px; }
 .contact-panel { padding:45px; gap:40px; }
 .contact-panel h2 { font-size:40px; }
 .contact-details { padding-left:30px; }
}
@media(max-width:800px) {
 .header-inner { min-height:85px; flex-wrap:wrap; padding-block:15px; }
 .brand > span { font-size:23px; }
 .brand img { width:42px; height:42px; }
 .menu-toggle { display:block; }
 #main-navigation { display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding-block:10px; }
 #main-navigation.is-open { display:flex; }
 #main-navigation > a { padding:12px; }
 .hero { padding-top:45px; }
 .hero-grid { gap:25px; }
 h1 { font-size:46px; }
 .hero-copy .eyebrow { font-size:12px; }
 .hero-description { font-size:17px; }
 .portrait-card { min-height:430px; }
 .portrait { height:370px; }
 .portrait-caption { left:14px; right:14px; padding:14px; gap:10px; bottom:18px; }
 .portrait-caption strong { font-size:16px; }
 .portrait-caption small { font-size:13px; }
 .caption-mark { width:27px; height:27px; }
 .experience-grid p { padding-left:20px; }
 .experience-grid strong { font-size:21px; }
 .experience-grid span { font-size:13px; display:block; margin-top:5px; line-height:1.6; }
 .services-grid { grid-template-columns:repeat(2,1fr); }
 .section-heading { gap:30px; }
 .section-heading > p { max-width:230px; font-size:16px; }
 .software-strip { gap:30px; flex-wrap:wrap; }
 .software-strip p { width:100%; text-align:center; }
 .pricing-inner h2 { font-size:30px; }
 .contact-panel { grid-template-columns:1fr; gap:45px; }
 .contact-details { border-left:0; padding-left:0; border-top:1px solid #52715a; padding-top:30px; }
 .contact-details h3 { margin-bottom:12px; }
}
@media(max-width:600px) {
 .container { width:calc(100% - 40px); }
 .section { padding-block:60px; }
 .hero { padding:35px 0 40px; }
 .hero-grid { grid-template-columns:1fr; gap:38px; }
 h1 { font-size:clamp(42px,11vw,62px); }
 h2 { font-size:34px; }
 .hero-copy .eyebrow { font-size:12px; margin-bottom:22px; }
 .hero-description { font-size:17px; max-width:440px; margin-top:22px; }
 .hero-actions { gap:12px 20px; }
 .location { margin-top:22px; }
 .portrait-wrap { width:min(100%,390px); margin-inline:auto; }
 .portrait-card { min-height:425px; border-radius:140px 140px 8px 8px; }
 .portrait { width:315px; height:390px; }
 .portrait-label { top:26px; }
 .portrait-circle { width:300px; height:300px; top:65px; }
 .portrait-caption { left:20px; right:20px; }
 .portrait-footnote { font-size:16px; }
 .experience-grid { grid-template-columns:1fr; padding-block:12px; }
 .experience-grid p,.experience-grid p:first-child { display:flex; align-items:center; gap:15px; padding:14px 0; border:0; border-bottom:1px solid var(--line); }
 .experience-grid p:last-child { border:0; }
 .experience-grid strong { font-size:22px; min-width:145px; }
 .experience-grid span { margin:0; }
 .about-grid,.approach-grid,.pricing-inner { grid-template-columns:1fr; gap:28px; }
 .eyebrow { margin-bottom:16px; font-size:12px; }
 .about-copy .lead { font-size:20px; }
 .section-heading { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:30px; }
 .section-heading > p { max-width:100%; font-size:16px; }
 .services-grid { grid-template-columns:1fr; gap:14px; }
 .service-card { padding:25px; min-height:0; }
 .service-card h3 { font-size:25px; margin-top:18px; }
 .service-card h3 br { display:none; }
 .service-card > p { min-height:0; font-size:16px; }
 summary { font-size:15px; }
 details { font-size:16px; }
 .software-strip { margin-top:40px; padding-top:25px; gap:24px; }
 .software-strip img { max-width:135px; max-height:38px; }
 .education-credential { width:100%; border-left:0; padding:18px 0 0; text-align:center; }
 .pricing-section { padding-block:45px; }
 .pricing-inner h2 { font-size:34px; }
 .contact-panel { padding:32px 25px; width:calc(100% - 24px); gap:35px; }
 .contact-panel h2 { font-size:36px; }
 .contact-copy > p:not(.eyebrow) { font-size:16px; }
 .contact-details > a { font-size:17px; }
 .contact-copy > small { font-size:13px; }
 .footer-inner { flex-wrap:wrap; gap:20px; }
 .footer-brand { width:100%; }
 .footer-inner p { max-width:70%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }


/* Helpful customer questions, kept in the page HTML for visitors and crawlers. */
.faq-section { border-bottom:1px solid var(--line); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.faq-grid > div > p:last-child { font-size:16px; margin-top:22px; }
.faq-list details { margin:0; padding:0 0 20px; }
.faq-list details:first-child { border-top:0; }
.faq-list summary { padding-top:20px; font-size:16px; font-weight:500; line-height:1.5; }
.faq-list details:first-child summary { padding-top:0; }
.faq-list p { margin-top:16px; font-size:16px; line-height:1.8; }
.faq-list p a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1050px) { #main-navigation { gap:16px; } .faq-grid { gap:40px; } }
@media(max-width:600px) { .faq-grid { grid-template-columns:1fr; gap:30px; } .faq-list summary { font-size:16px; } }

/* Readability: comfortable line lengths and room for larger type. */
.hero-description, .about-copy p, .approach-items p, .faq-list p { line-height:1.75; }
.hero-copy, .portrait-wrap, .about-grid > div, .approach-grid > div, .pricing-inner > div, .faq-grid > div { min-width:0; }
.service-card { min-height:365px; }
.service-card > p { min-height:84px; }
.service-number { line-height:1.6; }
summary { min-height:44px; padding-bottom:8px; }
.portrait-label { text-align:center; width:calc(100% - 48px); }
.portrait-caption strong { line-height:1.4; }
.portrait-caption .caption-mark { flex-shrink:0; }
.location > span:last-child { padding-left:0; }
.contact-copy > p:not(.eyebrow) { max-width:40ch; }
@media(max-width:1100px) { .brand small { display:none; } }
@media(min-width:801px) and (max-width:1000px) {
 .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .header-inner { flex-wrap:wrap; justify-content:center; padding-block:20px; gap:18px; }
 #main-navigation { justify-content:center; flex-wrap:wrap; }
}
@media(max-width:800px) {
 .hero-grid { grid-template-columns:1fr; gap:38px; }
 .hero-description { max-width:55ch; }
 .portrait-wrap { width:min(100%,420px); margin-inline:auto; }
 .about-grid, .approach-grid, .pricing-inner, .faq-grid { grid-template-columns:1fr; gap:30px; }
 .section-heading { align-items:flex-start; flex-direction:column; gap:24px; }
 .section-heading > p { max-width:55ch; }
 .experience-grid { gap:20px; }
 .experience-grid p { padding-left:0; border-left:0; }
}
@media(max-width:600px) {
 .service-card { min-height:0; }
 .service-card > p { min-height:0; }
 .experience-grid { gap:0; }
 .experience-grid p, .experience-grid p:first-child { display:block; }
 .experience-grid strong { min-width:0; }
 .experience-grid span { margin-top:5px; }
 .portrait-caption { left:14px; right:14px; }
 .software-strip p { line-height:1.6; }
 .footer-inner p { max-width:100%; }
}


/* Monthly bookkeeping service page: shared branding, readable service detail. */
.breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; line-height:1.7; margin-bottom:40px; }
.breadcrumbs a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.monthly-hero { padding-block:35px 75px; }
.monthly-hero-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:center; }
.monthly-hero-grid > * { min-width:0; }
.monthly-page h1 { font-size:clamp(44px,5vw,70px); }
.monthly-intro { font-size:17px; line-height:1.75; max-width:52ch; margin-top:25px; }
.monthly-area { font-size:14px; line-height:1.7; margin-top:24px; max-width:50ch; }
.monthly-note { background:var(--sage); border:1px solid #cbd8c3; border-radius:12px; padding:38px; }
.monthly-note .eyebrow { display:block; }
.monthly-note h2 { font-size:38px; }
.monthly-checklist { padding:0; list-style:none; margin:28px 0; }
.monthly-checklist li { display:flex; align-items:baseline; gap:14px; border-bottom:1px solid #c4d0bd; padding-block:14px; color:var(--ink); font-size:16px; line-height:1.6; }
.monthly-checklist li::before { content:'✓'; color:var(--green); flex-shrink:0; }
.monthly-note-footer { display:flex; gap:16px; align-items:flex-start; }
.monthly-note-footer > span { font-size:26px; color:var(--green); line-height:1.3; }
.monthly-note-footer p { font-size:14px; line-height:1.7; }
.monthly-prose p { font-size:16px; line-height:1.8; margin-bottom:18px; }
.monthly-prose p:last-child { margin-bottom:0; }
.monthly-prose a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.monthly-inclusions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.monthly-inclusion { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:32px; }
.monthly-inclusion h3 { font-size:25px; margin-block:20px 16px; }
.monthly-inclusion p { font-size:16px; line-height:1.8; max-width:55ch; }
.monthly-scope { border-top:1px solid #cbd6c4; margin-top:35px; padding-top:30px; }
.monthly-scope h3 { margin-bottom:14px; }
.monthly-scope p { font-size:16px; line-height:1.8; max-width:85ch; margin-bottom:12px; }
.service-page-link { margin-top:16px; line-height:1.6; font-size:14px; }
@media(max-width:1050px) { .monthly-hero-grid { gap:35px; } .monthly-note { padding:28px; } .monthly-note h2 { font-size:34px; } }
@media(max-width:800px) { .monthly-hero-grid { grid-template-columns:1fr; gap:35px; } .monthly-hero { padding-bottom:55px; } .monthly-note { max-width:650px; } }
@media(max-width:600px) {
 .monthly-hero { padding-top:25px; }
 .breadcrumbs { font-size:13px; margin-bottom:30px; }
 .monthly-page h1 { font-size:clamp(38px,10.5vw,54px); }
 .monthly-note { padding:25px; }
 .monthly-note h2 { font-size:32px; }
 .monthly-inclusions { grid-template-columns:1fr; gap:16px; }
 .monthly-inclusion { padding:25px; }
 .monthly-inclusion h3 { font-size:23px; }
 .monthly-inclusion h3 br { display:none; }
 .monthly-page .contact-copy .button { gap:20px; }
}

/* Keep the logo and Menu button together on small phones. */
@media(max-width:380px) {
 .header-inner { column-gap:12px; }
 .brand { gap:8px; }
 .menu-toggle { padding-inline:10px; }
}