/*
Theme Name: CVB 2026
Theme URI: https://www.cvbookkeeping.ca/
Description: CV Bookkeeping 2026 website design. GeneratePress child theme built from the website prototype (Website/Prototype_Source). Rebuild with Website/WordPress_Build/build_wp_package.py instead of editing on the server.
Author: CV Bookkeeping
Template: generatepress
Version: 1.0.0
Text Domain: cvb-2026
*/

:root{
  --forest:#3A6B4E; --forest-deep:#2C5440; --forest-night:#1F3A2B; --forest-mid:#4D8264;
  --blush:#FAF0EC; --cream:#FBF6F2; --white:#FFFFFF; --pink:#F5D9D8;
  --sage:#C8DDD2; --gold:#C9A227; --gold-hover:#B8921F; --gold-light:#F0DFA0; --rose:#D98989;
  --brown:#7B4A2D; --ink:#1E1E1E; --ink-soft:#4A4A4A; --taupe:#6B6057; --linen:#E8E2DC;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Lato", "Helvetica Neue", Arial, sans-serif;
  --mono:"DM Mono", "Courier New", monospace;
  --gutter:clamp(16px, 4vw, 40px);
  --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light; scroll-behavior:smooth}
body{margin:0; background:var(--blush); color:var(--ink); font:400 17px/1.65 var(--body); -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:var(--forest)}
h1,h2,h3{font-family:var(--display); color:var(--forest); line-height:1.14; margin:0; text-wrap:balance}
p{margin:0}
ul,ol{margin:0}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{font:500 .76rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--taupe)}
.section{padding-block:clamp(3rem, 7vw, 5.5rem)}
.section-head{display:grid; gap:.6rem; max-width:42rem; margin-bottom:clamp(1.8rem, 4vw, 2.6rem)}
.section-head h2{font-size:clamp(1.8rem, 3.4vw, 2.5rem)}
.section-head p{color:var(--ink-soft); font-size:1.06rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; font:700 1rem/1.2 var(--body); text-decoration:none; border-radius:6px; padding:.85rem 1.5rem; border:2px solid transparent; transition:background-color .2s ease, color .2s ease, transform .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-gold:hover{background:var(--gold-hover)}
.btn-ghost{border-color:var(--forest); color:var(--forest); background:transparent}
.btn-ghost:hover{background:var(--forest); color:var(--white)}
.text-link{font-weight:700; text-decoration:none; border-bottom:2px solid var(--gold-light)}
.text-link:hover{border-bottom-color:var(--gold)}
:focus-visible{outline:3px solid var(--forest); outline-offset:3px; border-radius:4px}

/* mockup bar: sits outside the site design */
.mockbar{position:sticky; top:0; z-index:60; background:#262422; color:#F1EBE4; font:400 .8rem/1.4 var(--mono)}
.mockbar .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.1rem; padding-block:.5rem}
.mockbar .tag{color:var(--gold-light); letter-spacing:.1em; text-transform:uppercase}
.mockbar details{margin-left:auto}
.mockbar summary{cursor:pointer; list-style:none; color:#F1EBE4; border:1px solid #5A5550; border-radius:999px; padding:.2rem .75rem}
.mockbar summary::-webkit-details-marker{display:none}
.mockbar details[open] summary{background:#F1EBE4; color:#262422}
.notes{position:absolute; top:calc(100% + 6px); left:var(--gutter); right:var(--gutter); margin-left:auto; max-width:600px; max-height:min(70vh, 640px); overflow-y:auto; background:#2F2C29; border:1px solid #57524C; border-radius:12px; padding:1.1rem 1.25rem 1.2rem; font:400 .92rem/1.55 var(--body); color:#F1EBE4; box-shadow:0 18px 40px rgba(0,0,0,.35)}
.notes h4{font:500 .72rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); margin:1rem 0 .4rem}
.notes h4:first-child{margin-top:0}
.notes ul{padding-left:1.1rem; display:grid; gap:.25rem}
.notes code{font:400 .85rem var(--mono); color:#F7E7B0}

/* shared site pieces */
.site-footer{background:var(--forest-night); color:#D8E3DB; font-size:.94rem}
.site-footer .wrap{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2rem; padding-block:3rem 2rem}
.site-footer h3{font:500 .74rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); margin-bottom:.8rem}
.site-footer ul{list-style:none; padding:0; display:grid; gap:.45rem}
.site-footer a{color:#EEF4F0; text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot-brand{display:grid; gap:.8rem; align-content:start}
.foot-brand img{width:84px; height:84px; border-radius:50%; background:var(--cream)}
.foot-legal{border-top:1px solid rgba(255,255,255,.14)}
.foot-legal .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; padding-block:1rem; font-size:.84rem; color:#B9C9BE; grid-template-columns:none}
.mobile-book{display:none}
.placeholder-note{font:500 .7rem/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe)}

@media (max-width:900px){
  .site-footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{padding-bottom:5rem}
  .site-footer .wrap{grid-template-columns:1fr}
  .mobile-book{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; gap:.6rem; padding:.65rem 16px calc(.65rem + env(safe-area-inset-bottom)); background:rgba(251,246,242,.97); border-top:1px solid var(--linen); box-shadow:0 -8px 24px rgba(30,30,30,.08)}
  .mobile-book .btn{flex:1}
  .notes{left:12px; right:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}

/* Clear Path pieces */
.cp .util{background:var(--forest-deep); color:#E7F0EA; font-size:.87rem}
.cp .util .wrap{display:flex; justify-content:flex-end; gap:1.5rem; padding-block:.45rem}
.cp .util a{color:#E7F0EA; text-decoration:none}
.cp .util a:hover{text-decoration:underline}
.cp .site-header{background:var(--cream); border-bottom:1px solid var(--linen)}
.cp .site-header .wrap{display:flex; align-items:center; gap:1.6rem; padding-block:.85rem}
.cp .brand img{height:46px; width:auto}
.cp .nav{display:flex; gap:1.5rem; margin-left:auto; font-weight:700; font-size:.95rem}
.cp .nav a{color:var(--ink-soft); text-decoration:none}
.cp .nav a:hover{color:var(--forest)}
.cp .menu-btn{display:none; margin-left:auto; min-height:44px; padding:.5rem .9rem; border:1px solid var(--linen); background:var(--white); border-radius:6px; font:700 .92rem var(--body); color:var(--ink)}
.cp .hero{padding-block:clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem)}
.cp .hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center}
.cp .hero-copy{display:grid; gap:1.1rem}
.cp .hero h1{font-size:clamp(2.35rem, 5vw, 3.7rem); font-weight:700; letter-spacing:-.01em}
.cp .hero .sub{font-size:clamp(1.05rem, 1.6vw, 1.2rem); color:var(--ink-soft); max-width:34em}
.cp .actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.6rem}
.cp .fine{font:400 .8rem/1.4 var(--mono); color:var(--taupe); letter-spacing:.03em}
.cp .art{position:relative; justify-self:end; width:100%; max-width:540px}
.cp .plate{border-radius:18px; overflow:hidden; box-shadow:0 22px 44px -22px rgba(31,58,43,.55)}
.cp .plate img{width:100%; aspect-ratio:6/5; object-fit:cover}
.cp .close-card{position:absolute; left:clamp(-2.2rem, -3vw, -1rem); bottom:-2rem; width:min(300px, 82%); background:var(--white); border-radius:12px; padding:1rem 1.15rem 1.1rem; box-shadow:0 18px 38px -16px rgba(30,30,30,.38); font:400 .84rem/1.35 var(--mono)}
.cp .close-card .cc-head{display:flex; justify-content:space-between; gap:.5rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe)}
.cp .close-card ul{list-style:none; padding:0; margin-top:.65rem; display:grid; gap:.42rem}
.cp .close-card li{display:grid; grid-template-columns:1.1rem 1fr; gap:.4rem; color:var(--ink)}
.cp .close-card .tick{color:var(--forest); font-weight:500}
.cp .close-card li{animation:settle .5s ease both}
.cp .close-card li:nth-child(2){animation-delay:.15s}
.cp .close-card li:nth-child(3){animation-delay:.3s}
.cp .close-card li:nth-child(4){animation-delay:.45s}
@keyframes settle{from{opacity:.45; transform:translateY(3px)} to{opacity:1; transform:none}}
.cp .trust{background:var(--cream); border-block:1px solid var(--linen)}
.cp .trust ul{list-style:none; padding:0; padding-block:1.05rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.6rem 1.5rem; font-size:.93rem; color:var(--ink-soft)}
.cp .trust strong{font-family:var(--display); color:var(--forest); font-size:1.08rem; margin-right:.35rem}
.cp .who-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem}
.cp .who{background:var(--white); border-radius:12px; padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.5rem}
.cp .who h3{font-size:1.22rem}
.cp .who p{color:var(--ink-soft); font-size:.97rem}
.cp .who .text-link{margin-top:auto; padding-top:.5rem; align-self:flex-start; font-size:.95rem}
.cp .software{background:var(--forest-deep); color:#E9F1EC}
.cp .software .wrap{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem, 5vw, 4rem); align-items:center}
.cp .software .eyebrow{color:var(--gold-light)}
.cp .software h2{color:var(--white); font-size:clamp(1.8rem, 3.4vw, 2.5rem)}
.cp .software .intro{display:grid; gap:1rem}
.cp .points{list-style:none; padding:0; display:grid; gap:.6rem; margin-top:.4rem}
.cp .points li{display:grid; grid-template-columns:1.2rem 1fr; gap:.5rem}
.cp .points li::before{content:""; width:.62rem; height:.62rem; margin-top:.5rem; border-radius:50%; background:var(--gold)}
.cp .flow{display:grid; grid-template-columns:1fr auto 1.15fr; align-items:center; gap:1rem}
.cp .apps{list-style:none; padding:0; display:grid; gap:.55rem}
.cp .apps li{border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); border-radius:8px; padding:.6rem .85rem; font:500 .92rem var(--mono); color:var(--white)}
.cp .arrow{position:relative; width:52px; height:2px; background:var(--gold)}
.cp .arrow::after{content:""; position:absolute; right:-2px; top:-6px; border:7px solid transparent; border-left-color:var(--gold); border-right-width:0}
.cp .qbo{background:var(--white); color:var(--ink); border-radius:12px; padding:1.15rem 1.2rem}
.cp .qbo .eyebrow{color:var(--taupe)}
.cp .qbo strong{display:block; font-family:var(--display); font-size:1.35rem; color:var(--forest); margin:.2rem 0 .6rem}
.cp .qbo ul{list-style:none; padding:0; display:grid; gap:.35rem; font:400 .85rem/1.35 var(--mono)}
.cp .qbo li::before{content:"\2713  "; color:var(--forest)}
.cp .steps{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.2rem, 3vw, 2.2rem)}
.cp .step{display:grid; gap:.55rem; align-content:start; padding-top:1.1rem; border-top:3px solid var(--gold)}
.cp .step h3{font-size:1.32rem}
.cp .step p{color:var(--ink-soft)}
.cp .packages{background:var(--cream)}
.cp .tiers{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
.cp .tier{background:var(--white); border:1px solid var(--linen); border-radius:12px; padding:1.35rem 1.25rem; display:flex; flex-direction:column; gap:.5rem}
.cp .tier.featured{background:var(--sage); border:2px solid var(--forest)}
.cp .tier .flag{font:500 .68rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--forest); min-height:.7rem}
.cp .tier h3{font-size:1.18rem}
.cp .from{font:400 .76rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); margin-top:.3rem}
.cp .price{font-family:var(--display); font-weight:700; font-size:2.1rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.cp .price span{font:400 .95rem var(--body); color:var(--ink-soft)}
.cp .tax{font-size:.82rem; color:var(--taupe)}
.cp .best{color:var(--ink-soft); font-size:.95rem; margin-top:.3rem}
.cp .tier-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:1.6rem}
.cp .tier-foot p{max-width:46rem; color:var(--ink-soft); font-size:.95rem}
.cp .quotes{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem}
.cp .quote{border:2px dashed #CFC4BA; border-radius:12px; padding:1.4rem; display:grid; gap:.9rem; align-content:start; background:rgba(255,255,255,.55)}
.cp .quote p{font-family:var(--display); font-style:italic; font-size:1.12rem; color:var(--ink-soft)}
.cp .quote .who-said{font:400 .8rem var(--mono); color:var(--taupe)}
.cp .corrie .wrap{display:grid; grid-template-columns:minmax(220px, 360px) 1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center}
.cp .portrait{position:relative; margin:0 18px 18px 0}
.cp .portrait::before{content:""; position:absolute; inset:18px -18px -18px 18px; border-radius:16px; background:var(--gold-light)}
.cp .portrait img{position:relative; border-radius:16px; aspect-ratio:1; object-fit:cover}
.cp .corrie-copy{display:grid; gap:1rem; max-width:38rem}
.cp .corrie-copy h2{font-size:clamp(1.9rem, 3.6vw, 2.6rem)}
.cp .corrie-copy p{color:var(--ink-soft)}
.cp .faq .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 5vw, 4rem); align-items:start}
.cp .faq-list{display:grid; gap:.6rem}
.cp .faq-list details{background:var(--white); border:1px solid var(--linen); border-radius:10px; padding:.95rem 1.15rem}
.cp .faq-list summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:700; min-height:32px}
.cp .faq-list summary::-webkit-details-marker{display:none}
.cp .faq-list summary::after{content:"+"; font:500 1.2rem var(--mono); color:var(--forest); transition:transform .2s ease}
.cp .faq-list details[open] summary::after{transform:rotate(45deg)}
.cp .faq-list details p{margin-top:.55rem; color:var(--ink-soft)}
.cp .blog{background:var(--cream)}
.cp .posts{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem 2.2rem}
.cp .posts li{border-top:1px solid #DCD2C8; padding-top:1rem; display:grid; gap:.45rem}
.cp .posts .meta{font:400 .74rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--taupe)}
.cp .posts a{color:var(--forest); text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.18rem; line-height:1.25}
.cp .posts a:hover{text-decoration:underline}
.cp .blog-more{margin-top:1.8rem}
.cp .cta{position:relative; overflow:hidden; background:var(--forest); color:var(--white)}
.cp .cta::after{content:""; position:absolute; top:0; bottom:0; right:0; width:48%; background:url("images/pattern.webp") center/300px repeat; mix-blend-mode:multiply; opacity:.55; -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%)}
.cp .cta .wrap{position:relative; z-index:1; display:grid; gap:1rem; justify-items:start; padding-block:clamp(3rem, 7vw, 4.8rem)}
.cp .cta h2{color:var(--white); font-size:clamp(1.9rem, 3.8vw, 2.8rem); max-width:18ch}
.cp .cta p{color:#E2EDE6; max-width:36rem}
.cp .cta .client{color:var(--gold-light); font-weight:700}
@media (max-width:980px){.cp .hero .wrap, .cp .software .wrap, .cp .corrie .wrap, .cp .faq .wrap{grid-template-columns:1fr}
.cp .art{justify-self:start}
.cp .who-grid, .cp .tiers{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:860px){.cp .nav{display:none}
.cp .menu-btn{display:inline-flex; align-items:center}}
@media (max-width:640px){.cp .header-book, .cp .util .hide-sm{display:none}
.cp .util .wrap{justify-content:space-between}
.cp .brand img{height:38px}
.cp .close-card{position:relative; left:auto; bottom:auto; width:auto; margin:-2.2rem 12px 0}
.cp .trust ul{flex-direction:column}
.cp .who-grid, .cp .tiers, .cp .quotes, .cp .posts, .cp .steps{grid-template-columns:1fr}
.cp .flow{grid-template-columns:1fr}
.cp .arrow{width:2px; height:34px; justify-self:center}
.cp .arrow::after{right:-6px; top:auto; bottom:-2px; border:7px solid transparent; border-top-color:var(--gold); border-bottom-width:0}
.cp .cta::after{width:100%; opacity:.25}}
/* Storybook pieces */
.sb{background:var(--cream)}
.sb .site-header{background:var(--cream)}
.sb .site-header .wrap{display:flex; align-items:center; gap:1.2rem; padding-block:1rem}
.sb .brand{display:flex; align-items:center; gap:.8rem; text-decoration:none}
.sb .brand .badge{width:62px; height:62px; border-radius:50%; box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--sage)}
.sb .brand img.word{height:40px; width:auto}
.sb .nav{display:flex; gap:1.4rem; margin-left:auto; font-weight:700; font-size:.95rem}
.sb .nav a{color:var(--ink-soft); text-decoration:none}
.sb .nav a:hover{color:var(--forest)}
.sb .menu-btn{display:none; margin-left:auto; min-height:44px; padding:.5rem .9rem; border:1px solid var(--linen); background:var(--white); border-radius:6px; font:700 .92rem var(--body); color:var(--ink)}
.sb .hero{padding-block:clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem); overflow:hidden}
.sb .hero .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center}
.sb .hero-copy{display:grid; gap:1.2rem}
.sb .hero h1{font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:700; letter-spacing:-.015em; line-height:1.04}
.sb .hero h1 em{display:block; font-style:italic; font-weight:600; color:var(--brown)}
.sb .hero .sub{font-size:clamp(1.05rem, 1.6vw, 1.2rem); color:var(--ink-soft); max-width:31em}
.sb .actions{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-top:.4rem}
.sb .storyplate{position:relative; width:100%}
.sb .storyplate::before{content:""; position:absolute; inset:6% -4% -5% 5%; background:var(--sage); border-radius:58% 42% 52% 48% / 46% 54% 46% 54%}
.sb .storyplate img{position:relative; width:100%; aspect-ratio:11/9; object-fit:cover; border-radius:56% 44% 50% 50% / 50% 46% 54% 50%; border:8px solid var(--white)}
.sb .ribbon{height:clamp(84px, 11vw, 120px); background:var(--white) url("images/pattern.webp") center/clamp(210px, 26vw, 280px) repeat; border-block:1px solid var(--linen)}
.sb .familiar{background:var(--blush)}
.sb .notes-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.2rem, 3vw, 2rem); margin-top:.6rem}
.sb .paper{position:relative; background:var(--white); border-radius:4px; padding:2rem 1.4rem 1.5rem; box-shadow:0 12px 26px -16px rgba(123,74,45,.45); transition:transform .25s ease}
.sb .paper:nth-child(1){transform:rotate(-1.4deg)}
.sb .paper:nth-child(2){transform:rotate(1deg)}
.sb .paper:nth-child(3){transform:rotate(-.6deg)}
.sb .paper:hover{transform:rotate(0)}
.sb .paper::before{content:""; position:absolute; top:-10px; left:50%; width:84px; height:22px; margin-left:-42px; background:rgba(217,137,137,.55); transform:rotate(-3deg)}
.sb .paper p{font-family:var(--display); font-size:1.28rem; line-height:1.3; color:var(--ink)}
.sb .reassure{margin-top:clamp(2rem, 5vw, 3rem); font-family:var(--display); font-style:italic; font-size:clamp(1.35rem, 2.6vw, 1.9rem); color:var(--forest); max-width:30ch}
.sb .month{position:relative; list-style:none; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:1.2rem; margin-top:.8rem}
.sb .month::before{content:""; position:absolute; top:.55rem; left:.55rem; right:.55rem; height:2px; background:repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px)}
.sb .month li{position:relative; display:grid; gap:.45rem; padding-top:2rem}
.sb .month li::before{content:""; position:absolute; top:0; left:0; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--forest); box-shadow:0 0 0 5px var(--cream)}
.sb .month .when{font:500 .76rem/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brown)}
.sb .month h3{font-size:1.15rem}
.sb .month p{color:var(--ink-soft); font-size:.95rem}
.sb .journey .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 5vw, 4rem); align-items:center}
.sb .path{list-style:none; padding:0; display:grid; gap:1.25rem; counter-reset:path}
.sb .path li{display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; counter-increment:path}
.sb .path li::before{content:counter(path); display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--forest); color:var(--white); font:500 1rem var(--mono)}
.sb .path h3{font-size:1.2rem}
.sb .path p{color:var(--ink-soft)}
.sb .loon img{border-radius:22px 22px 22px 90px; border:8px solid var(--white); box-shadow:0 20px 40px -22px rgba(31,58,43,.5)}
.sb .loon figcaption{font:400 .78rem var(--mono); color:var(--taupe); margin-top:.7rem}
.sb .words{background:var(--blush)}
.sb .masonry{columns:3 260px; column-gap:1.2rem}
.sb .masonry figure{break-inside:avoid; margin:0 0 1.2rem; border:2px dashed #CFC4BA; border-radius:14px; padding:1.3rem; background:rgba(255,255,255,.6); display:grid; gap:.7rem}
.sb .masonry p{font-family:var(--display); font-style:italic; font-size:1.1rem; color:var(--ink-soft)}
.sb .masonry figcaption{font:400 .8rem var(--mono); color:var(--taupe)}
.sb .corrie{background:var(--pink)}
.sb .corrie .wrap{display:grid; grid-template-columns:minmax(220px, 340px) 1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center}
.sb .portrait img{border-radius:50%; aspect-ratio:1; object-fit:cover; border:10px solid var(--white); box-shadow:0 0 0 3px var(--gold)}
.sb .corrie-copy{display:grid; gap:1rem; max-width:40rem}
.sb .corrie-copy h2{font-size:clamp(2rem, 4vw, 2.9rem)}
.sb .corrie-copy p{color:var(--ink)}
.sb .facts{list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:.7rem 1.6rem; margin-top:.4rem}
.sb .facts li{border-top:1px solid rgba(123,74,45,.25); padding-top:.6rem; font-size:.96rem}
.sb .facts strong{display:block; font:500 .72rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brown); margin-bottom:.15rem}
.sb .help-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem 2.4rem}
.sb .help-list article{display:grid; gap:.45rem; align-content:start}
.sb .help-list h3{font-size:1.3rem}
.sb .help-list p{color:var(--ink-soft)}
.sb .pricing-line{margin-top:1.8rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; font-size:1.02rem}
.sb .pricing-line strong{font-family:var(--display); font-size:1.3rem; color:var(--forest)}
.sb .cta{background:var(--forest); color:var(--white)}
.sb .cta .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 5vw, 4rem); align-items:center; padding-block:clamp(3rem, 7vw, 5rem)}
.sb .cta img{border-radius:48% 52% 45% 55% / 55% 45% 55% 45%; border:8px solid rgba(255,255,255,.9); aspect-ratio:1; object-fit:cover}
.sb .cta-copy{display:grid; gap:1rem; justify-items:start}
.sb .cta h2{color:var(--white); font-size:clamp(1.9rem, 3.8vw, 2.8rem); max-width:20ch}
.sb .cta p{color:#E2EDE6; max-width:34rem}
.sb .cta .client{color:var(--gold-light); font-weight:700}
@media (max-width:980px){.sb .hero .wrap, .sb .journey .wrap, .sb .corrie .wrap, .sb .cta .wrap{grid-template-columns:1fr}
.sb .storyplate{max-width:620px}
.sb .notes-grid, .sb .help-list{grid-template-columns:1fr 1fr}
.sb .month{grid-template-columns:1fr; gap:1.4rem; padding-left:2.2rem}
.sb .month::before{top:.5rem; bottom:.5rem; left:.5rem; right:auto; width:2px; height:auto; background:repeating-linear-gradient(180deg, var(--gold) 0 10px, transparent 10px 18px)}
.sb .month li{padding-top:0}
.sb .month li::before{left:-2.2rem; top:.15rem}
.sb .cta img{max-width:280px}
.sb .portrait{max-width:300px}}
@media (max-width:860px){.sb .nav{display:none}
.sb .menu-btn{display:inline-flex; align-items:center}}
@media (max-width:640px){.sb .header-book, .sb .brand img.word{display:none}
.sb .brand .badge{width:54px; height:54px}
.sb .notes-grid, .sb .help-list, .sb .facts{grid-template-columns:1fr}
.sb .paper:nth-child(n){transform:none}}
/* blend (same as Hybrid A2) */
[hidden]{display:none !important}
.sb{background:transparent}
.sb .ribbon{height:clamp(170px, 20vw, 250px); background-size:clamp(260px, 30vw, 340px) auto}
/* coin ribbon stays still while the page scrolls past it (iOS ignores this and scrolls normally) */
.sb .ribbon{background-attachment:fixed}
@media (prefers-reduced-motion:reduce){ .sb .ribbon{background-attachment:scroll} }
.cp .art .storyplate img{aspect-ratio:1/1}
.cp .art .storyplate{margin-bottom:1rem}
.cp .art{margin-bottom:3rem}
.cp .art .close-card{left:clamp(-3.75rem, -4vw, -1.5rem); bottom:-4.5rem; background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
@media (max-width:640px){ .cp .art{margin-bottom:0} .cp .art .close-card{left:auto; bottom:auto} }
.cp .quote.real{border:0; border-left:4px solid var(--gold); border-radius:0 12px 12px 0; background:var(--white)}
.cp .quote.real .placeholder-note{color:var(--forest)}
.cp .quote .lead{font:400 var(--fs-xs) var(--body); font-style:normal; color:var(--taupe)}
.cp .nav a[aria-current="page"]{color:var(--forest); box-shadow:inset 0 -2px 0 var(--gold)}
.cp .nav .nav-drop{position:relative; display:flex; align-items:center}
.cp .nav .nav-drop > a::after{content:""; display:inline-block; width:.38em; height:.38em; margin:0 0 .2em .45em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.6}
.cp .nav .nav-sub{display:none; position:absolute; top:calc(100% + .7rem); left:-.9rem; z-index:60; flex-direction:column; min-width:15.5rem; padding:.45rem; background:var(--white); border:1px solid var(--linen); border-radius:12px; box-shadow:0 18px 36px -18px rgba(31,58,43,.35)}
.cp .nav .nav-sub::before{content:""; position:absolute; left:0; right:0; top:-.8rem; height:.8rem}
.cp .nav .nav-drop:hover .nav-sub, .cp .nav .nav-drop:focus-within .nav-sub{display:flex}
.cp .nav .nav-sub a{padding:.55rem .75rem; border-radius:8px; font-weight:600; white-space:nowrap}
.cp .nav .nav-sub a:hover, .cp .nav .nav-sub a:focus{background:var(--cream); color:var(--forest)}
.cp .nav .nav-drop.open .nav-sub{display:flex}
.cp .nav .nav-drop.esc .nav-sub{display:none}
.software :focus-visible, .cta :focus-visible, .cta-band :focus-visible, .inline-cta :focus-visible, .path-card.new :focus-visible, .util :focus-visible, .site-footer :focus-visible{outline-color:var(--gold-light)}
body .cp .faq-list details{padding:0}
body .cp .faq-list summary{min-height:44px; padding:.95rem 1.15rem}
body .cp .faq-list details p{padding:0 1.15rem; margin:0 0 .55rem}
body .cp .faq-list details p:last-child{margin-bottom:1rem}
.site-footer li a{display:inline-block; padding-block:.4rem}
.site-footer ul{gap:0}
.cp .util a{display:inline-block; padding-block:.6rem}
body.no-book-bar .mobile-book{display:none!important}
body.no-book-bar{padding-bottom:0!important}
.site-footer .footer-home{display:inline-block; border-radius:50%}
.mag-section{background:var(--cream)}
.mag-wrap{align-items:center}
.mag-card{position:relative; margin:0; background:var(--white); border:1px solid var(--linen); border-radius:16px; padding:1.5rem 1.5rem 1.2rem; box-shadow:0 22px 44px -26px rgba(31,58,43,.45); max-width:32rem; justify-self:center; width:100%}
.mag-bird{position:absolute; top:-30px; right:14px; width:64px; height:auto}
.mag-head{display:grid; gap:.1rem; margin-bottom:1rem}
.mag-kicker{font:500 var(--fs-xs)/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe)}
.mag-head strong{font-family:var(--display); font-size:1.5rem; color:var(--forest-deep)}
.mag-tiles{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.mag-tile{border-radius:10px; background:var(--cream); padding:.75rem .85rem; display:grid; gap:.15rem}
.mag-tile span{font:500 var(--fs-xs)/1.2 var(--mono); letter-spacing:.06em; color:var(--ink-soft)}
.mag-tile b{font:700 1.25rem/1.2 var(--body); color:var(--ink)}
.mag-tile.gold{background:#FBF0D2}
.mag-tile.forest{background:var(--forest-deep)}
.mag-tile.forest span{color:#D8E7DD}
.mag-tile.forest b{color:var(--white)}
.mag-bar{display:flex; height:16px; border-radius:99px; overflow:hidden; margin:1.1rem 0 .55rem; background:var(--linen)}
.mag-bar .c{background:var(--sage)} .mag-bar .t{background:var(--gold)} .mag-bar .y{background:var(--forest-deep)}
.mag-key{list-style:none; padding:0; margin:0; display:grid; gap:.3rem; font:400 var(--fs-xs)/1.4 var(--body); color:var(--ink-soft)}
.mag-key li{display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:.5rem}
.mag-key li b{font-weight:500; color:var(--ink)}
.mag-key li::before{align-self:center}
.mag-key li::before{content:""; width:.7rem; height:.7rem; border-radius:3px}
.mag-key .c::before{background:var(--sage)} .mag-key .t::before{background:var(--gold)} .mag-key .y::before{background:var(--forest-deep)}
.mag-foot{margin:.9rem 0 0; padding-top:.8rem; border-top:1px dashed var(--linen); font-size:var(--fs-sm); color:var(--ink-soft)}
@media (max-width:640px){ .mag-tile b{font-size:1.05rem} .mag-bird{width:52px; top:-24px} }

.reviews-link{margin-top:1.4rem}
.sb .words-taped{background:var(--blush)}
.sb .paper.qp{margin:0; display:grid; gap:.8rem; align-content:start; padding:2.1rem 1.5rem 1.5rem}
.sb .paper.qp p{font-size:var(--fs-md); line-height:1.55; font-style:italic; color:var(--ink)}
.sb .paper.qp .lead{display:block; font:400 var(--fs-xs) var(--body); font-style:normal; color:var(--taupe)}
.sb .paper.qp figcaption{font:400 var(--fs-xs) var(--mono); color:var(--taupe)}
.sb .paper.qp.ph{background:rgba(255,255,255,.55); box-shadow:none; border:2px dashed #CFC4BA}
.sb .quotes-taped{align-items:start}
.sb .quotes-taped.duo{grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:54rem}
@media (max-width:640px){ .sb .quotes-taped.duo{grid-template-columns:1fr} }
.sb .quotes-taped .paper:nth-child(4){transform:rotate(1.2deg)}
.sb .quotes-taped .paper:nth-child(5){transform:rotate(-0.8deg)}
.sb .quotes-taped .paper:nth-child(6){transform:rotate(0.6deg)}
@media (max-width:640px){ .sb .quotes-taped .paper:nth-child(n){transform:none} }
.sb .quotes-taped.single{grid-template-columns:minmax(0, 42rem)}
.sb .quotes-taped .paper.qp.founder-note{transform:none; background:var(--white); box-shadow:none; border:1px solid var(--linen); border-left:4px solid var(--forest-mid); border-radius:12px; padding:1.5rem 1.6rem}
.sb .paper.qp.founder-note::before{display:none}
.sb .paper.qp.founder-note figcaption{display:flex; align-items:center; gap:.65rem}
.sb .paper.qp.founder-note figcaption img{width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none}

/* prototype bar */
.mockbar .pages-menu{margin-left:0}
.mockbar #route-label{color:#F1EBE4}
.mockbar #route-url{color:#C9C0B6}
.notes .pagelist{list-style:none; padding:0; display:grid; gap:.1rem}
.notes .pagelist a{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.2rem 1rem; color:#F1EBE4; text-decoration:none; padding:.4rem .55rem; border-radius:6px}
.notes .pagelist a:hover, .notes .pagelist a[aria-current="page"]{background:#45403B}
.notes .pagelist code{color:#C9C0B6}
.serp{background:#FFFFFF; color:#202124; border-radius:8px; padding:.8rem .9rem; font-family:Arial, sans-serif; display:grid; gap:.15rem}
.serp .u{font-size:var(--fs-xs); color:#4D5156}
.serp .t{font-size:var(--fs-base); color:#1A0DAB; line-height:1.3}
.serp .d{font-size:var(--fs-xs); color:#4D5156; line-height:1.45}

/* inner pages */
.pg-hero{background:var(--cream); border-bottom:1px solid var(--linen)}
.pg-hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.5rem, 5vw, 4rem); align-items:center; padding-block:clamp(2.2rem, 5vw, 4rem)}
.pg-hero.solo .wrap{grid-template-columns:1fr}
.crumbs{font:400 var(--fs-xs) var(--mono); color:var(--taupe); display:flex; flex-wrap:wrap; gap:.45rem}
.crumbs a{color:var(--taupe)}
.pg-hero h1{font-size:clamp(2.1rem, 4.4vw, 3.2rem); margin-top:.6rem}
.pg-hero .lead{font-size:clamp(1.05rem, 1.6vw, 1.18rem); color:var(--ink-soft); max-width:36em; margin-top:.9rem}
.pg-hero .actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.3rem}
.tm{display:block; font-size:var(--fs-xs); color:var(--taupe); margin-top:.35rem}
.foot-legal .wrap.legal-stack{flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; gap:.3rem}
.who-open{max-width:52rem; margin:1.4rem auto 0; text-align:center; color:var(--ink-soft)}
.who-open a{font-weight:700}
.niche-also{margin-top:.85rem; font-size:var(--fs-sm); color:var(--ink-soft)}
.pg-hero .pic img{border-radius:18px; border:8px solid var(--white); box-shadow:0 20px 40px -22px rgba(31,58,43,.5)}
.pg-hero .pic img.logo-plain{border:0; border-radius:0; box-shadow:none}
.pg-hero .pic img.niche-cutout{border:0; border-radius:0; box-shadow:none; width:100%; height:auto; background:none}
.pg-hero .wrap:has(img.niche-cutout){grid-template-columns:1fr 1.05fr; align-items:end}
.pg-hero .pic:has(img.niche-cutout){line-height:0}
@media (max-width:980px){ .pg-hero .pic:has(img.niche-cutout){max-width:600px} }
.pg-hero .pic.round{max-width:340px; justify-self:center}
.pg-hero .pic.round img{border-radius:50%; aspect-ratio:1; object-fit:cover; box-shadow:0 0 0 3px var(--gold)}
.tint{background:var(--blush)}
.cream-bg{background:var(--cream)}
.check-list{list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:.65rem 2rem}
.check-list li{display:grid; grid-template-columns:1.2rem 1fr; gap:.5rem}
.check-list li::before{content:"\2713"; color:var(--forest); font-family:var(--mono)}
.panel{background:var(--white); border:1px solid var(--linen); border-radius:12px; padding:clamp(1.2rem, 3vw, 1.8rem)}
.panel-note{margin-top:1rem; font-size:var(--fs-sm); color:var(--taupe)}
.section-head p.panel-note, .cp .section-head p.panel-note, .sb .section-head p.panel-note{font-size:var(--fs-sm); line-height:1.6}
.flag-note{font:500 var(--fs-xs)/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--brown); background:var(--gold-light); padding:.2rem .55rem; border-radius:4px; justify-self:start; display:inline-block}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 3rem); align-items:start}
.cta-band{background:var(--forest); color:var(--white)}
.cta-band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 3rem; padding-block:clamp(2.6rem, 6vw, 4rem)}
.cta-band h2{color:var(--white); font-size:clamp(1.7rem, 3.4vw, 2.4rem); max-width:22ch}
.cta-band p{color:#DDE9E1; margin-top:.4rem}
.cta-band .stack{display:grid; gap:.7rem; justify-items:start}
.cta-band .client{color:var(--gold-light); font-weight:700}
/* coin fade on the closing green bands (from the original Clear Path) */
.sb .cta, .cta-band{position:relative; overflow:hidden}
.sb .cta::after, .cta-band::after{content:""; position:absolute; top:0; bottom:0; right:0; width:48%; background:url("images/pattern.webp") center/300px repeat; mix-blend-mode:multiply; opacity:.55; -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%); pointer-events:none}
.sb .cta .wrap, .cta-band .wrap{position:relative; z-index:1}
@media (max-width:640px){ .sb .cta::after, .cta-band::after{width:100%; opacity:.25} }
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{font:500 var(--fs-xs)/1.2 var(--mono); padding:.4rem .8rem; border-radius:999px; border:1px solid var(--linen); background:var(--white); color:var(--ink)}
button.chip{cursor:pointer; min-height:38px}
button.chip[aria-pressed="true"]{background:var(--forest); color:var(--white); border-color:var(--forest)}

/* services: estimator */
.est{display:grid; grid-template-columns:1.35fr .65fr; gap:1.4rem; align-items:start}
.est fieldset{border:0; margin:0; padding:0; display:grid; gap:.45rem}
.est fieldset + fieldset{margin-top:1.4rem}
.est legend{font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); margin-bottom:.5rem; padding:0}
.opt{display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.75rem; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--linen); background:var(--white); cursor:pointer}
.opt:has(input:checked){border-color:var(--forest); background:#EEF4F0}
.opt input{width:18px; height:18px; accent-color:var(--forest); margin:.2rem 0 0}
.opt strong{display:block; font-size:var(--fs-base)}
.opt small{display:block; color:var(--ink-soft); font-size:var(--fs-sm); line-height:1.4; margin-top:.1rem}
.opt .amt{font:500 var(--fs-sm) var(--mono); color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.est-total{position:sticky; top:4.5rem; background:var(--forest); color:var(--white); border-radius:12px; padding:1.5rem; display:grid; gap:.45rem}
.est-total .l{font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light)}
.est-total .big{font-family:var(--display); font-weight:700; font-size:var(--fs-3xl); line-height:1; font-variant-numeric:tabular-nums}
.est-total .big small{font:400 var(--fs-base) var(--body)}
.est-total .once{font:400 var(--fs-sm) var(--mono); color:#DDE9E1; font-variant-numeric:tabular-nums}
.est-total p{font-size:var(--fs-sm); color:#DDE9E1}
.est-total .btn{margin-top:.7rem}
.more-services{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.more-services article{background:var(--white); border-radius:12px; padding:1.3rem; display:grid; gap:.45rem; align-content:start}
.more-services h3{font-size:var(--fs-lg)}
.more-services p{color:var(--ink-soft); font-size:var(--fs-base)}
.more-services .price-line{font:500 var(--fs-sm) var(--mono); color:var(--ink)}
.more-services.two{grid-template-columns:repeat(2, 1fr)}
.compare-wrap{overflow-x:auto; border:1px solid var(--linen); border-radius:12px; background:var(--white)}
.compare{width:100%; min-width:700px; border-collapse:collapse; font-size:var(--fs-base)}
.compare th, .compare td{padding:.85rem 1rem; text-align:center; border-bottom:1px solid var(--linen); vertical-align:middle}
.compare thead th{font-family:var(--display); color:var(--forest); font-size:var(--fs-base); font-weight:600; background:var(--cream); line-height:1.25}
.compare thead th:first-child{background:var(--white)}
.compare thead th.featured, .compare td.hl{background:#EEF4F0}
.compare thead th .th-sub{display:block; font:400 var(--fs-xs)/1.3 var(--body); color:var(--ink-soft); margin-top:.25rem}
.compare tbody th{text-align:left; font-weight:400; color:var(--ink); width:32%}
.compare tbody th small{display:block; color:var(--taupe); font-size:var(--fs-xs)}
.compare td{font-variant-numeric:tabular-nums; color:var(--ink)}
.compare td.yes{color:var(--forest); font-weight:700; font-size:var(--fs-md)}
.compare td.no{color:var(--taupe)}
.compare td.you{color:var(--ink-soft); font-size:var(--fs-sm)}
.compare tfoot th, .compare tfoot td{border-bottom:0; font:500 var(--fs-sm) var(--mono); color:var(--ink)}
.compare tfoot th{text-align:left}
.compare-note{margin-top:.9rem; font-size:var(--fs-sm); color:var(--taupe); max-width:52rem}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.more-services.four{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.more-services article.wide-card{grid-column:1 / -1; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center}
.more-services article.wide-card .ico{grid-row:span 2; margin:0}
.more-services article.wide-card.tall{align-items:start; background:var(--white); border-top:4px solid var(--gold); box-shadow:0 10px 24px -16px rgba(31,58,43,.45)}
.more-services article.wide-card.tall .ico{grid-column:1; grid-row:1 / -1; align-self:start}
.more-services article.wide-card.tall > :not(.ico){grid-column:2}
.tool-groups{display:grid; gap:1.1rem}
.tool-groups .eyebrow{margin-bottom:.45rem}
.chip.pick{background:var(--gold-light); border-color:var(--gold)}
.tax-box{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; background:var(--sage); border-radius:12px; padding:1.2rem 1.4rem; margin-top:1.4rem}
.tax-box strong{font-family:var(--display); color:var(--forest-deep); font-size:var(--fs-md)}
.tax-box.keyed{border-top:4px solid var(--key)}
.tb-head{display:inline-flex; align-items:center; gap:.5rem}
ol.steps.four{grid-template-columns:repeat(4, 1fr)}
@media (max-width:1000px){ol.steps.four{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:600px){ol.steps.four{grid-template-columns:1fr}}
.tax-box > strong{display:flex; flex-direction:column; align-items:flex-start; align-self:stretch; gap:1rem; max-width:11rem}
.tip-bird{width:96px; height:96px; margin:auto 0 -.3rem -.4rem; filter:drop-shadow(0 6px 8px rgba(31,58,43,.28))}
@media (max-width:600px){.tax-box{grid-template-columns:1fr; gap:.5rem} .tax-box > strong{max-width:none; flex-direction:row; align-items:center; gap:.6rem} .tip-bird{width:64px; height:64px; margin:0}}

/* about */
.badges{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
.badge-card{background:var(--white); border:1px solid var(--linen); border-radius:12px; padding:1rem 1.1rem; display:grid; gap:.25rem; align-content:start}
.badge-card strong{font-family:var(--display); color:var(--forest); font-size:var(--fs-md); line-height:1.2}
.badge-card span{font-size:var(--fs-sm); color:var(--ink-soft)}
.story{max-width:40rem; display:grid; gap:1rem}
.story p{font-size:var(--fs-md)}
.values{display:grid; grid-template-columns:repeat(5, 1fr); gap:1rem}
.value{background:var(--white); border-radius:12px; padding:1.2rem; border-top:3px solid var(--gold); display:grid; gap:.45rem; align-content:start}
.value h3{font-size:var(--fs-md)}
.value p{font-size:var(--fs-sm); color:var(--ink-soft)}
.team{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 320px)); gap:1rem}
.person{background:var(--white); border-radius:12px; padding:1.4rem; display:grid; gap:.5rem; justify-items:start; align-content:start}
.person img{width:96px; height:96px; border-radius:50%; object-fit:cover}
.person h3{font-size:var(--fs-lg)}
.person .role{font:400 var(--fs-xs) var(--mono); color:var(--taupe)}
.person p{color:var(--ink-soft); font-size:var(--fs-base)}
.person.ph{border:2px dashed #CFC4BA; background:transparent}
.person .ph-circle{width:96px; height:96px; border-radius:50%; background:var(--linen)}
.giving{list-style:none; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
.giving-top{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.5rem, 4vw, 3rem); align-items:center; margin-bottom:1.6rem}
.giving-top .section-head{text-align:left; margin-inline:0; max-width:40rem}
.giving-art{width:100%; max-width:330px; height:auto; display:block; justify-self:end; border-radius:16px}
@media (max-width:980px){ .giving-top{grid-template-columns:1fr} .giving-art{max-width:270px; justify-self:start} }
.giving li{background:var(--white); border-radius:12px; padding:1.1rem; font-family:var(--display); color:var(--forest); font-size:var(--fs-md)}

/* contact, consult, scheduler */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.path-card{border-radius:12px; padding:1.6rem; display:grid; gap:.6rem; align-content:start; justify-items:start}
.path-card.new{background:var(--forest); color:var(--white)}
.path-card.new h2{color:var(--white)}
.path-card.new p{color:#E2EDE6}
.path-card.client{background:var(--sage)}
.path-card h2{font-size:var(--fs-xl)}
.contact-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:1.5rem; align-items:start}
.form{display:grid; gap:.9rem}
.form label{display:grid; gap:.3rem; font-weight:700; font-size:var(--fs-sm)}
.form input, .form textarea{font:400 var(--fs-base) var(--body); padding:.75rem .85rem; border:1px solid #CFC4BA; border-radius:8px; background:var(--white); color:var(--ink); min-height:48px; width:100%}
.form textarea{min-height:140px; resize:vertical}
.privacy-note{font-size:var(--fs-sm); color:var(--ink); background:var(--blush); border-left:3px solid var(--rose); border-radius:0 8px 8px 0; padding:.7rem .9rem}
.details-list{list-style:none; padding:0; display:grid; gap:1rem}
.details-list strong{display:block; font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); margin-bottom:.15rem}
.embed-ph{border:2px dashed #CFC4BA; border-radius:12px; padding:1.2rem; background:var(--white); display:grid; gap:1rem}
.embed-live{border:0; padding:0; background:none}
.book-frame{width:100%; min-height:820px; border:1px solid var(--linen); border-radius:12px; background:var(--white); display:block}
.embed-fallback{font-size:var(--fs-sm); color:var(--taupe); margin:0}
.book-grid{display:grid; gap:1.6rem}
.book-aside{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; align-items:start}
.book-aside .panel-note{grid-column:1 / -1}
@media (max-width:860px){ .book-aside{grid-template-columns:1fr} }
@media (max-width:860px){ .book-grid > .embed-ph{order:-1} }
@media (max-width:640px){ .book-frame{min-height:900px} }
.cal-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--display); color:var(--forest); font-size:var(--fs-lg)}
.cal{display:grid; grid-template-columns:repeat(7, 1fr); gap:.35rem; font:400 var(--fs-sm) var(--mono); text-align:center}
.cal span{padding:.5rem 0; border-radius:6px}
.cal .h{color:var(--taupe); font-size:var(--fs-xs)}
.cal .d{background:var(--cream); color:var(--taupe)}
.cal .a{background:#EEF4F0; color:var(--forest); font-weight:500}
.cal .sel{background:var(--forest); color:var(--white)}
.slots{display:flex; flex-wrap:wrap; gap:.5rem}
.slot{font:500 var(--fs-sm) var(--mono); padding:.55rem .85rem; border:1px solid var(--forest); border-radius:6px; color:var(--forest); background:var(--white)}
.meet-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.meet{background:var(--white); border:1px solid var(--linen); border-radius:12px; padding:1.4rem; display:flex; flex-direction:column; gap:.6rem}
.meet.paid{border:2px solid var(--gold)}
.meet h2{font-size:var(--fs-xl)}
.meet p{color:var(--ink-soft)}
.meet .btns{margin-top:auto; display:grid; gap:.5rem; padding-top:.6rem}
.bookmark{display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; background:var(--gold-light); border-radius:10px; padding:.8rem 1rem; font-size:var(--fs-base); margin-top:1.2rem}

/* blog + post */
.post-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem; margin-top:1.4rem}
.post-card{background:var(--blush); border-radius:12px; padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; border-top:3px solid var(--rose)}
.post-card h2{font-size:var(--fs-lg)}
.post-card h2 a{color:var(--forest); text-decoration:none}
.post-card h2 a:hover{text-decoration:underline}
.post-card p{color:var(--ink-soft); font-size:var(--fs-base)}
.post-card .meta{font:400 var(--fs-xs) var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--taupe)}
.post-card .text-link{margin-top:auto; align-self:flex-start}
.post-cover{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:var(--cream)}
.post-card .post-cover{width:calc(100% + 2.8rem); max-width:none; margin:-1.4rem -1.4rem .2rem; border-radius:9px 9px 0 0}
.posts .post-cover{border-radius:10px; margin-bottom:.35rem}
.cp .posts li:has(> .post-cover){border-top:0; padding-top:0}
.article .post-cover.post-hero{max-width:720px; margin-inline:auto}
.article{max-width:44rem; margin-inline:auto; display:grid; gap:1.1rem}
.article h1{font-size:clamp(2rem, 4.4vw, 3rem)}
.article h2{font-size:var(--fs-xl); margin-top:.8rem}
.article p, .article li{font-size:var(--fs-md)}
.article ul{padding-left:1.2rem; display:grid; gap:.4rem}
.byline{display:flex; align-items:center; gap:.8rem; font-size:var(--fs-sm); color:var(--ink-soft)}
.byline img{width:48px; height:48px; border-radius:50%; object-fit:cover}
.sample-banner{font:500 var(--fs-xs)/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--brown); background:var(--gold-light); padding:.55rem .8rem; border-radius:6px}
.takeaway{background:var(--sage); border-radius:12px; padding:1.2rem 1.4rem; display:grid; gap:.4rem}
.takeaway strong{font-family:var(--display); color:var(--forest-deep); font-size:var(--fs-md)}
.author-box{display:grid; grid-template-columns:80px 1fr; gap:1rem; align-items:center; background:var(--cream); border-radius:12px; padding:1.2rem}
.author-box img{width:80px; height:80px; border-radius:50%; object-fit:cover}
.inline-cta{background:var(--forest); color:var(--white); border-radius:12px; padding:1.5rem; display:grid; gap:.7rem; justify-items:start}
.inline-cta h2{color:var(--white); margin:0; font-size:var(--fs-xl)}
.inline-cta p{color:#E2EDE6}

/* thank-you + legal */
.ty{max-width:46rem; margin-inline:auto; display:grid; gap:1.2rem}
.ty h1{font-size:clamp(2.2rem, 5vw, 3.2rem)}
.ty h2{font-size:var(--fs-xl); margin-top:.6rem}
.ty .steps-ty{list-style:none; padding:0; display:grid; gap:1rem; counter-reset:t}
.ty .steps-ty li{display:grid; grid-template-columns:2.4rem 1fr; gap:.9rem; counter-increment:t}
.ty .steps-ty li::before{content:counter(t); display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--forest); color:var(--white); font:500 var(--fs-base) var(--mono)}
.ty ul.plain{padding-left:1.2rem; display:grid; gap:.35rem}
.ty ol.qbo-steps{padding-left:1.3rem; display:grid; gap:.35rem}
.signoff{font-family:var(--display); font-style:italic; font-size:var(--fs-lg); color:var(--forest)}
.legal{display:grid; grid-template-columns:230px 1fr; gap:2.5rem; align-items:start}
.toc{position:sticky; top:4.5rem; display:grid; gap:.3rem; font-size:var(--fs-sm)}
.toc strong{font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); margin-bottom:.3rem}
.toc a{color:var(--ink-soft); text-decoration:none; border-left:2px solid var(--linen); padding:.2rem 0 .2rem .7rem}
.toc a:hover{border-left-color:var(--gold); color:var(--forest)}
.legal article{display:grid; gap:.9rem; max-width:44rem}
.legal h2{font-size:var(--fs-xl); margin-top:.8rem; scroll-margin-top:4rem}
.tpl-text{color:var(--taupe); font-style:italic}
.giving li{display:grid; gap:.35rem; align-content:start; font-family:var(--body); font-size:var(--fs-sm); color:var(--ink-soft)}
.giving .yr{font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; color:var(--taupe)}
.giving li strong{font-family:var(--display); color:var(--forest); font-size:var(--fs-md)}
.ph-circle.initials{display:grid; place-items:center; font:500 var(--fs-xl) var(--mono); color:var(--forest); background:var(--sage)}
.cats-head{font-size:var(--fs-xl); margin:2.2rem 0 1rem}
.giving li strong a{color:var(--forest); text-decoration:none; border-bottom:2px solid var(--gold-light)}
.giving li strong a:hover{border-bottom-color:var(--gold)}
.pv-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.pv-col{border-radius:12px; padding:1.5rem 1.6rem}
.pv-col.pains{background:var(--white); border:1px solid var(--linen)}
.pv-col.gains{background:var(--sage)}
.pv-col h3{font-size:var(--fs-lg); margin-bottom:.9rem}
.pv-col.pains h3{color:var(--brown)}
.pv-col ul{list-style:none; padding:0; display:grid; gap:.65rem}
.pv-col li{display:grid; grid-template-columns:1.2rem 1fr; gap:.5rem}
.pv-col.pains li::before{content:"\2022"; color:var(--rose); font-size:var(--fs-xl); line-height:1.1}
.pv-col.gains li::before{content:"\2713"; color:var(--forest); font-family:var(--mono)}
@media (max-width:640px){ .pv-grid{grid-template-columns:1fr} }
.contact-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.contact-cards .panel{display:grid; gap:.55rem; align-content:start}
.big-contact{font-family:var(--display); font-size:var(--fs-xl); color:var(--forest); line-height:1.25}
.big-contact a{color:var(--forest); text-decoration:none; border-bottom:2px solid var(--gold-light)}
.big-contact a:hover{border-bottom-color:var(--gold)}
@media (max-width:980px){ .contact-cards{grid-template-columns:1fr} }
.land{font-size:var(--fs-sm); color:#B9C9BE; max-width:62rem}
/* client handbook */
.hb-glance{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem}
.hb-glance article{background:var(--white); border-radius:12px; padding:1.2rem; border-top:3px solid var(--gold); display:grid; gap:.4rem; align-content:start}
.hb-glance .when{font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe)}
.hb-glance h3{font-size:var(--fs-md)}
.hb-glance p{font-size:var(--fs-sm); color:var(--ink-soft)}
.legal article h3{font-size:var(--fs-md); margin-top:.5rem}
.legal article ul{padding-left:1.2rem; display:grid; gap:.45rem}
@media (max-width:980px){ .hb-glance{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .hb-glance{grid-template-columns:1fr} }
/* about: team and cat photos as wide as their cards */
.person img, .person .ph-circle{width:100%; height:auto; aspect-ratio:1/1; border-radius:10px; object-fit:cover}
.person .ph-circle.initials{font-size:var(--fs-3xl)}
.hb-figure{margin:.8rem 0 .4rem; display:grid; gap:.6rem}
.hb-figure svg{width:100%; height:auto; display:block}
.hb-figure figcaption{font-size:var(--fs-sm); color:var(--ink-soft)}
.check-list li > span strong{color:var(--forest)}
.hb-layout .hb-doc{margin-inline:0}

/* sticky header on desktop (NN/g: small, opaque, no fancy animation); phones keep the bottom booking bar instead */
@media (min-width:901px){
  .masthead-sticky{position:sticky; top:0; z-index:40}
  .masthead-sticky .site-header{box-shadow:0 8px 18px -16px rgba(31,58,43,.55)}
  .legal .toc{top:6rem}
  .legal h2, .hb-doc h2, .hb-doc h3, .hb-toc, #compare, .dl-card{scroll-margin-top:6rem}
@media (prefers-reduced-motion: no-preference){.dl-card:target{animation:dl-flash 2.4s ease-out 1}}
@keyframes dl-flash{0%,35%{box-shadow:0 0 0 3px var(--gold)}100%{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion: reduce){.dl-card:target{box-shadow:0 0 0 3px var(--gold)}}
}
/* back to top: long pages only (more than 4 screens), lower right, labelled */
.to-top{position:fixed; right:1rem; bottom:1.2rem; z-index:45; display:inline-flex; align-items:center; gap:.4rem; background:var(--forest); color:var(--white); text-decoration:none; font:700 var(--fs-sm)/1 var(--body); padding:.7rem .95rem; border-radius:999px; box-shadow:0 8px 20px -10px rgba(31,58,43,.6)}
.to-top:hover{background:var(--forest-deep, #2F5A41)}
.to-top:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
@media (max-width:640px){ .to-top{bottom:5.2rem; right:.75rem; min-height:44px} }
.link-cols{gap:2.4rem 3rem}
.link-block{display:grid; gap:.5rem; align-content:start}
.link-block h2{font-size:var(--fs-xl)}
.lb-head{display:flex; align-items:center; gap:.75rem}
.cp .site-header .brand img{height:52px}
@media (max-width:640px){ .cp .site-header .brand img{height:42px} }
.want-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:clamp(1.2rem, 3vw, 2.4rem); row-gap:.5rem; grid-template-rows:repeat(4, auto)}
.want-item{display:grid; grid-template-rows:subgrid; grid-row:span 4}
.want-guide{border-top:1px solid var(--linen); padding-top:.7rem; margin-top:.25rem; font-size:var(--fs-sm); align-self:start}

@media (max-width:980px){ .want-grid{grid-template-rows:none; row-gap:clamp(1.2rem, 3vw, 2.4rem)} .want-item{grid-row:auto; grid-template-rows:none; gap:.5rem} }
.cmp-top{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.2rem, 3vw, 2.5rem); align-items:center; margin-bottom:1.1rem}
.cmp-top .section-head{text-align:left; margin-inline:0}
.cmp-art{width:100%; max-width:340px; height:auto; display:block; justify-self:end}
@media (max-width:980px){ .cmp-top{grid-template-columns:1fr} .cmp-art{max-width:280px; justify-self:start} }
@media (max-width:760px){ .want-grid{grid-template-columns:1fr} }
.lb-head .ico{margin:0}
.text-link{border-bottom-color:var(--gold); width:fit-content}
.text-link:hover{border-bottom-color:var(--forest)}
.link-list a::after{content:"↗"; display:inline-block; margin-left:.3rem; font-size:.85em; color:var(--gold); text-decoration:none}
.link-block > p{color:var(--ink-soft)}
.link-list{list-style:none; padding:0; display:grid; gap:.75rem; margin-top:.3rem}
.link-list li{display:grid; gap:.1rem; padding-left:.9rem; border-left:3px solid var(--gold-light)}
.link-list a{font-weight:700; color:var(--forest)}
.link-list span{font-size:var(--fs-base); color:var(--ink-soft)}
.value-icon{font-size:var(--fs-2xl); line-height:1; display:block; margin-bottom:.15rem}
.art-img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; margin-bottom:.9rem}
.art-img-page{max-width:26rem; margin-top:1.2rem; margin-bottom:0}
.art-ph{aspect-ratio:4/3; border:2px dashed #CFC4BA; border-radius:10px; display:grid; place-items:center; text-align:center; padding:.8rem; background:var(--cream); margin-bottom:.9rem}
.art-ph span{font:500 var(--fs-xs)/1.45 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--taupe)}
.art-ph-page{max-width:24rem; margin-top:1.2rem; margin-bottom:0}
.faq-list details p.faq-note, .cp .faq-list details p.faq-note{font-size:var(--fs-sm); margin-top:.45rem}
.stock-photo{display:block; width:100%; max-width:24rem; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:10px; margin-top:1.2rem; box-shadow:var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08))}
.setaside{width:100%; border-collapse:collapse; font-size:var(--fs-md)}
.setaside th, .setaside td{padding:.75rem .9rem; border-bottom:1px solid var(--linen); text-align:left}
.setaside thead th{font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe)}
.setaside td.pct{font-family:var(--display); font-weight:700; color:var(--forest); font-size:var(--fs-xl); white-space:nowrap; text-align:right}
.setaside thead th:last-child{text-align:right}
.setaside-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:start}
@media (max-width:980px){ .setaside-grid{grid-template-columns:1fr} }

@media (max-width:980px){ .hb-layout > .toc{display:none} }
mark.confirm{background:var(--gold-light); color:var(--ink); padding:0 .25em; border-radius:3px}
.hb-glance .hbg-t{font-family:var(--display); font-weight:600; color:var(--forest); font-size:var(--fs-md); line-height:1.25}
@media (max-width:640px){ .team{grid-template-columns:1fr} }
/* client handbook as one long document */
.hb-doc{max-width:48rem; margin-inline:auto; display:grid; gap:.9rem}
.hb-doc h2{font-size:var(--fs-xl); margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--linen); scroll-margin-top:4rem}
.hb-doc h2#hb-welcome{border-top:0; padding-top:0}
.hb-doc h2{display:flex; align-items:center; gap:.7rem}
.hb-note{background:var(--white); border:1px solid var(--linen); border-left:4px solid var(--gold); border-radius:0 10px 10px 0; padding:.95rem 1.15rem; display:grid; gap:.45rem; margin-block:.5rem}
.hb-note .hb-note-label{font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe)}
.hb-note.quick{border-left-color:var(--forest)}
.hb-note.with-bird{grid-template-columns:1fr 84px; column-gap:.9rem; align-items:center}
.hb-note.with-bird .hb-note-label, .hb-note.with-bird > p{grid-column:1}
.hb-note .note-bird{grid-column:2; grid-row:1 / span 2; width:84px; height:auto; align-self:center; filter:drop-shadow(0 6px 8px rgba(31,58,43,.22))}
.page-fine{max-width:48rem; margin-inline:auto; text-align:center; font-size:var(--fs-xs); color:var(--taupe)}
.valley{margin:clamp(1.4rem, 3vw, 2.2rem) 0 0}
.valley-art{width:100%; height:auto; display:block; border-radius:16px}
.valley figcaption{margin-top:.7rem; text-align:center; font-size:var(--fs-xs); color:var(--taupe)}
@media (max-width:640px){ .hb-note.with-bird{grid-template-columns:1fr 58px} .hb-note .note-bird{width:58px} }
.hb-note > p{margin:0}
.hb-note > ul{margin:0; padding-left:1.2rem; display:grid; gap:.45rem}
.hb-doc h2 .hb-ico{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--sage); color:var(--forest); flex:none}
.hb-doc h2 .hb-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hb-doc h3{font-size:var(--fs-md); margin-top:.5rem; scroll-margin-top:4rem}
.hb-doc ul{padding-left:1.2rem; display:grid; gap:.45rem}
.hb-doc .hb-glance{grid-template-columns:1fr 1fr; margin-block:.4rem}
.hb-doc .hb-glance article{border:1px solid var(--linen); background:var(--cream)}
@media (max-width:640px){ .hb-doc .hb-glance{grid-template-columns:1fr} }
.hb-toc{background:var(--cream); border:1px solid var(--linen); border-radius:12px; padding:1.4rem 1.6rem; scroll-margin-top:4rem}
.hb-toc > strong{display:block; font:500 var(--fs-xs) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); margin-bottom:.8rem}
.hb-toc ol{margin:0; padding-left:1.4rem; columns:2 17rem; column-gap:2.5rem}
.hb-toc ol > li{break-inside:avoid; margin-bottom:.8rem; font-weight:700; color:var(--forest)}
.hb-toc ul{list-style:none; padding:0; margin-top:.3rem; display:grid; gap:.2rem; font-weight:400}
.hb-toc a{color:var(--forest); text-decoration:none}
.hb-toc a:hover{text-decoration:underline}
.hb-toc ul a{color:var(--ink-soft); font-size:var(--fs-sm)}
.hb-back{font-size:var(--fs-sm); margin:0}
.hb-back a{color:var(--taupe)}


/* footer: 5 columns on desktop (brand, contact, explore, who I help, clients) */
@media (min-width:901px){ .site-footer .wrap{grid-template-columns:1.2fr 1fr .8fr 1fr .8fr} }

@media (max-width:980px){
  .pg-hero .wrap, .est, .contact-grid, .legal, .two-col{grid-template-columns:1fr}
  .pg-hero .wrap:has(img.niche-cutout){grid-template-columns:1fr; align-items:start}
  .values, .badges, .giving{grid-template-columns:repeat(2, 1fr)}
  .meet-grid, .post-grid, .more-services{grid-template-columns:1fr 1fr}
  .est-total, .toc{position:static}
  .pg-hero .pic{max-width:440px}
}
@media (max-width:640px){
  .check-list, .values, .badges, .paths, .meet-grid, .post-grid, .more-services, .giving{grid-template-columns:1fr}
  .author-box{grid-template-columns:1fr}
  .more-services.two{grid-template-columns:1fr}
}

/* ===== 2026-09-14 design review: type scale, readability, icons, phone pricing cards ===== */
:root{--fs-xs:.8rem; --fs-sm:.9rem; --fs-base:1rem; --fs-md:1.1rem; --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:2rem; --fs-3xl:2.7rem}
/* small labels never below 0.8rem */
.eyebrow{font-size:var(--fs-xs)}
.cp .close-card .cc-head, .cp .fine, .cp .quote .who-said, .cp .posts .meta, .cp .tier .flag, .cp .from, .sb .facts strong, .sb .masonry figcaption, .sb .loon figcaption, .sb .month .when, .sb .paper.qp figcaption{font-size:var(--fs-xs)}
/* typewriter font is for labels only; content reads in Lato */
.cp .close-card{font:400 var(--fs-sm)/1.45 var(--body)}
.cp .close-card .cc-head{font-family:var(--mono)}
.cp .portrait.cutout{margin:0}
.cp .portrait.cutout::before{display:none}
.cp .portrait.cutout img{border-radius:0; object-fit:contain; background:none}
.cp .qbo ul{font:400 var(--fs-sm)/1.45 var(--body)}
.cp .apps li{font:700 var(--fs-sm)/1.3 var(--body)}
.chip{font:400 var(--fs-sm)/1.2 var(--body)}
.price-line, .more-services .price-line{font:700 var(--fs-base)/1.3 var(--body); color:var(--forest)}
.compare tfoot th, .compare tfoot td{font:700 var(--fs-base) var(--body)}
.opt .amt, .est-total .once{font-family:var(--body)}
.cp .quote p{font-size:var(--fs-md)}
/* icons */
.ico{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--sage); color:var(--forest); flex:none; margin-bottom:.35rem}
.ico svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cream-bg .more-services .ico, .tint .more-services .ico{background:#EEF4F0}
/* niche pages: meet Corrie */
.author-box.meet-corrie{max-width:42rem; margin-top:1.6rem; background:var(--cream)}
.author-box.meet-corrie strong{font-family:var(--display); color:var(--forest); font-size:var(--fs-md)}
.author-box.meet-corrie p{font-size:var(--fs-sm); color:var(--ink-soft); margin:.2rem 0 .4rem}
/* pricing examples become stacked cards on phones */
.compare-cards{display:none}
@media (max-width:640px){ .compare-wrap{display:none} .compare-cards{display:grid; gap:1rem} }
.cc-card{background:var(--white); border:1px solid var(--linen); border-radius:12px; padding:1.2rem 1.25rem; display:grid; gap:.45rem}
.cc-card.featured{border:2px solid var(--forest); background:#EEF4F0}
.cc-card.keyed{border-top:4px solid var(--key)}
.cc-card h3{font-size:var(--fs-lg)}
.cc-sub{font-size:var(--fs-sm); color:var(--ink-soft)}
.cc-card ul{list-style:none; padding:0; margin:0; display:grid}
.cc-card li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--linen); font-size:var(--fs-sm)}
.cc-card li .v{text-align:right; color:var(--ink-soft); flex:none; max-width:45%}
.cc-card li .v.yes{color:var(--forest); font-weight:700}
.cc-card li .v.no{color:var(--taupe)}
.cc-price{font:700 var(--fs-md) var(--body); color:var(--forest); margin-top:.2rem}

/* ===== 2026-09-14 pricing story (Services) ===== */
#how-we-price, #case-studies, #compare, #price-list, #payroll, #add-ons, #one-time{scroll-margin-top:6rem}
.factors-wrap{margin-top:clamp(1.8rem, 4vw, 2.6rem)}
.factors-wrap h3{font-size:var(--fs-lg); margin-bottom:1rem}
.factors{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.1rem 1.6rem}
.factors li{display:grid; grid-template-columns:46px 1fr; gap:.8rem; align-items:start}
.factors .ico{margin:0}
.factors li > span{font-size:var(--fs-sm); color:var(--ink-soft)}
.factors strong{display:block; font-size:var(--fs-base); color:var(--forest)}
@media (max-width:980px){ .factors{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .factors{grid-template-columns:1fr} }
.cases{display:grid; grid-template-columns:repeat(3, 1fr); column-gap:1.1rem; row-gap:.65rem; grid-template-rows:repeat(10, auto); align-items:stretch}
.case{background:var(--white); border:1px solid var(--linen); border-radius:12px; padding:1.4rem; grid-row:span 10; display:grid; grid-template-rows:subgrid}
.case-art{width:100%; height:auto; display:block; align-self:end}
.case .case-basis{margin-top:0}
@media (max-width:980px){ .cases{grid-template-rows:none; row-gap:1.1rem} .case{grid-row:auto; display:flex; flex-direction:column; gap:.65rem} }
.key-diy{--key:#4D8264} .key-solo{--key:#D98989} .key-studio{--key:#C9A227} .key-clinic{--key:#7B4A2D}
.case.keyed{border-top:4px solid var(--key)}
.key-dot{display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--key); flex:none}
thead th.keyed{border-top:4px solid var(--key)}
thead th.keyed .key-dot{margin-right:.45rem; vertical-align:middle}
.case.featured{border:2px solid var(--forest)}
.case-top{display:flex; align-items:center; gap:.75rem}
.case-top .ico{margin:0}
.case-stage{font:500 var(--fs-xs)/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--taupe)}
.case h3{font-size:var(--fs-xl)}
.case .case-fee{font-family:var(--display); font-weight:700; font-size:var(--fs-2xl); color:var(--forest); line-height:1}
.case .case-fee small{font:400 var(--fs-sm) var(--body); color:var(--ink-soft)}
.case h4{font:700 var(--fs-sm)/1.3 var(--body); color:var(--brown); margin:.4rem 0 0}
.case > p{font-size:var(--fs-sm); color:var(--ink-soft)}
.case .check-list{grid-template-columns:1fr; gap:.4rem; font-size:var(--fs-sm)}
.case-basis{margin-top:auto; border-top:1px solid var(--linen); padding-top:.8rem}
.case-basis ul{list-style:none; padding:0; margin:.45rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem}
.case-basis li{background:var(--cream); border:1px solid var(--linen); border-radius:999px; padding:.25rem .7rem; font-size:var(--fs-xs); color:var(--ink)}
@media (max-width:980px){ .cases{grid-template-columns:1fr} }
.price-list-head{padding-bottom:0}
#payroll{padding-top:clamp(2rem, 4vw, 3rem)}
.jump-links{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem}
.jump-links a{font:700 var(--fs-sm)/1.2 var(--body); color:var(--forest); text-decoration:none; border:1px solid var(--forest); border-radius:999px; padding:.55rem 1rem; background:var(--white)}
.jump-links a:hover{background:var(--forest); color:var(--white)}

/* niche pages: centre the single quote and the meet-Corrie box (Corrie, 2026-09-14) */
.sb .quotes-taped.single{justify-content:center}
.author-box.meet-corrie{margin-inline:auto}
.author-box.meet-corrie.with-note{max-width:46rem; margin-top:0; align-items:start; background:var(--white); border:1px solid var(--linen); border-left:4px solid var(--forest-mid); padding:1.5rem 1.6rem}
.author-box.meet-corrie p.am-quote{font:italic 500 var(--fs-md)/1.55 var(--display); color:var(--ink); margin:0 0 .9rem}

/* consistency sweep 2026-09-14: counsellors page has two quotes, centred like the other niche pages */
.sb .quotes-taped.duo{margin-inline:auto}
/* every quote section centred: headings and reviews link too (Corrie, 2026-09-14) */
.sb .words-taped .section-head{text-align:center; margin-inline:auto}
.sb .words-taped .reviews-link{text-align:center}
/* home trust strip: four even, centred columns, label over text (Corrie, 2026-09-14) */
.cp .trust ul.wrap{display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.9rem 2rem; text-align:center; align-items:start; justify-items:center}
.cp .trust ul.wrap li{display:flex; flex-direction:column; align-items:center; gap:.2rem; max-width:15rem}
.cp .trust ul.wrap li strong{display:block; margin:0}
@media (max-width:760px){ .cp .trust ul.wrap{grid-template-columns:repeat(2, minmax(0, 1fr))} }
/* credential badges: official CPB Canada and QuickBooks ProAdvisor images, shown as supplied, never recoloured, cropped or stretched (2026-09-14) */
img.cred-img{display:block; width:auto; max-width:none; height:88px; object-fit:contain}
.cp .trust ul.wrap li img.cred-img{margin:0 auto .5rem}
.cp .trust ul.wrap li.cred-none{padding-top:calc(88px + .5rem)}
@media (max-width:760px){ .cp .trust ul.wrap li.cred-none{padding-top:0} }
.badge-card img.cred-img{height:96px; margin:0 auto .55rem}
.badges .badge-card{text-align:center; justify-items:center}
.badge-card a.cred-link{display:block; border-radius:8px}
.cp .trust ul.wrap li a.cred-link{display:block; border-radius:8px}
.badge-card svg.cred-illo{display:block; width:96px; height:96px; margin:0 auto .55rem}
.cp .trust ul.wrap li svg.cred-illo{display:block; width:88px; height:88px; margin:0 auto .5rem}
.cp .trust ul.wrap li img.cred-img.cred-wide{height:auto; width:180px; max-width:100%; margin:18px auto calc(18px + .5rem)}
.badge-card img.cred-img.cred-wide{height:auto; width:200px; max-width:100%; margin:20px auto calc(19px + .55rem)}
.badge-card.cred-none{padding-top:calc(1rem + 96px + .55rem)}
@media (max-width:980px){ .badge-card.cred-none{padding-top:1rem} }
/* home Before / With CV Bookkeeping: mirror-image boxes (Corrie, 2026-09-14) */
.page[data-route="home"] .pv-grid{max-width:none; margin-inline:0; align-items:stretch; gap:1.25rem}
.page[data-route="home"] .pv-col{border-radius:14px; padding:1.5rem 1.7rem 1.4rem; border:1px solid; box-shadow:none}
.page[data-route="home"] .pv-col.pains{background:var(--white); border-color:var(--linen)}
.page[data-route="home"] .pv-col.gains{border-color:var(--sage)}
.page[data-route="home"] .pv-col h3{font-size:var(--fs-lg); margin:0 0 .85rem}
.page[data-route="home"] .pv-col ul{display:grid; gap:.75rem; margin:0}
.compare tfoot th small{display:block; font:400 var(--fs-xs) var(--body); color:var(--taupe)}

/* niche heroes: the $350 starting line (2026-09-14) */
.pg-hero .price-note, .cp .hero .price-note{font-size:var(--fs-sm); color:var(--ink-soft); margin-top:1rem; max-width:34em}

/* DIY box: support limits list (2026-09-14) */
.tax-box .tb-body{display:grid; gap:.6rem}
.tax-box .tb-body ul{margin:0; padding-left:1.1rem; display:grid; gap:.3rem}
.tax-box .tb-sub{font:700 var(--fs-base)/1.3 var(--body); color:var(--forest-deep)}

/* phone menu (2026-09-15 review): the open panel, the Who I help group, and the client links */
.cp .nav .only-sm{display:none}
@media (max-width:860px){
  .cp .site-header{position:relative}
  .cp .site-header.menu-open .nav{display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
    position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--white);
    padding:1rem 16px 1.2rem; box-shadow:0 18px 30px -20px rgba(31,58,43,.45)}
  .cp .site-header.menu-open .nav-drop{flex-direction:column; align-items:flex-start; width:100%; gap:.5rem}
  .cp .site-header.menu-open .nav-sub{position:static; display:flex; flex-direction:column; gap:.5rem;
    background:transparent; box-shadow:none; border:0; padding:.2rem 0 0 .9rem; min-width:0}
  .cp .site-header.menu-open .nav .only-sm{display:block}
  .cp .site-header.menu-open .nav .client-link{margin-top:.3rem; padding-top:.9rem; border-top:1px solid var(--linen); width:100%}
}
/* ===== patch 300: final design review 2 (2026-09-16) ===== */
.nw{white-space:nowrap}
/* S4 lining figures everywhere; Playfair defaults to old-style numbers */
html{font-variant-numeric:lining-nums}
.compare td, .est-total .big, .est-total .once, .est .amt{font-variant-numeric:lining-nums tabular-nums}
/* S2 and S3 client quotes: readable Lato italic, equal-height cards, gentler tilt */
.sb .quotes-taped{align-items:stretch}
.sb .paper.qp{align-content:center}
.sb .paper.qp p{font-family:var(--body); font-style:italic; font-size:1.05rem; line-height:1.65}
.sb .paper.qp figcaption{font:600 var(--fs-xs)/1.4 var(--body); letter-spacing:0; color:var(--taupe)}
.sb .quotes-taped .paper:nth-child(1){transform:rotate(-.5deg)}
.sb .quotes-taped .paper:nth-child(2){transform:rotate(.4deg)}
.sb .quotes-taped .paper:nth-child(3){transform:rotate(-.3deg)}
@media (max-width:640px){ .sb .quotes-taped .paper:nth-child(n){transform:none} }
.author-box.meet-corrie p.am-quote{font:italic 400 1.05rem/1.65 var(--body)}
/* S6 niche hero art centred against the copy column */
.pg-hero .wrap:has(img.niche-cutout){align-items:center}
@media (max-width:980px){ .pg-hero .wrap:has(img.niche-cutout){align-items:start} }
/* S7 hero card label */
.cp .close-card .cc-head{justify-content:flex-start}
/* home Who-we-help links on one line */
.cp .who .text-link{white-space:nowrap}
/* home Meet Corrie facts: credentials across the top, three short facts in a row */
.corrie .facts{grid-template-columns:repeat(3, minmax(0, 1fr))}
.corrie .facts li:first-child{grid-column:1 / -1}
@media (max-width:640px){ .corrie .facts{grid-template-columns:1fr} }
/* home phone: stat tile labels on one line; CPB wordmark inside its column */
@media (max-width:480px){ .mag-tile span{white-space:nowrap; font-size:.7rem; letter-spacing:.02em} }
.trust ul.wrap li{min-width:0; max-width:100%}
.trust ul.wrap li a.cred-link{max-width:100%}
/* services: example card lists no longer stretch; equal comparison columns; one-time service links on one baseline */
.case .check-list{align-content:start; align-self:start}
.case > p{align-self:start}
.compare{table-layout:fixed}
.compare thead th:first-child, .compare tbody th{width:32%}
.compare thead th:not(:first-child){width:17%}
.compare td.you{font-size:var(--fs-base)}
.more-services article:not(.wide-card){display:flex; flex-direction:column; gap:.45rem}
.more-services article:not(.wide-card) > .text-link{margin-top:auto; padding-top:.4rem; align-self:flex-start}
/* niche What I handle: long lists get a full-width photo beside them */
.two-col:has(.check-list > li:nth-child(9)) .section-head .stock-photo{max-width:none}
/* about: team and cat rows centred */
.team{justify-content:center}
/* scheduler: province buttons in one row */
.meet.paid .btns{grid-template-columns:repeat(3, minmax(0, 1fr))}
.meet.paid .btns .btn{padding-inline:.5rem}
/* handbook table of contents: numbers right-aligned so 10 and 11 line up */
.hb-toc ol{list-style:none; counter-reset:toc; padding-left:0}
.hb-toc ol > li{counter-increment:toc; display:grid; grid-template-columns:1.8em minmax(0, 1fr); column-gap:.35em}
.hb-toc ol > li::before{content:counter(toc) "."; text-align:right; font-variant-numeric:lining-nums tabular-nums}
.hb-toc ol > li > *{grid-column:2}

/* ===== WordPress and GeneratePress integration (CVB 2026) ===== */
[hidden]{display:none !important}
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important}
.screen-reader-text:focus{clip:auto !important; clip-path:none; height:auto; width:auto; z-index:100000; padding:.8rem 1rem; background:#fff; color:#1E1E1E}
body.cvb-2026 .top-bar, body.cvb-2026 #mobile-header, body.cvb-2026 .main-navigation:not(.nav){display:none !important}
body.cvb-route-home .site, body.cvb-2026[class*="cvb-route-"] .site, body.cvb-2026[class*="cvb-route-"] .site-content,
body.cvb-2026[class*="cvb-route-"] .content-area, body.cvb-2026[class*="cvb-route-"] .site-main,
body.cvb-2026[class*="cvb-route-"] .inside-article, body.cvb-2026[class*="cvb-route-"] .entry-content,
body.cvb-2026[class*="cvb-route-"] article.page{max-width:none; width:100%; margin:0; padding:0; background:transparent; border:0; box-shadow:none}
body.cvb-2026[class*="cvb-route-"] .site-content{display:block}
body.cvb-2026[class*="cvb-route-"] .entry-content > .page{margin:0}
body.cvb-2026[class*="cvb-route-"] .entry-header, body.cvb-2026[class*="cvb-route-"] .comments-area{display:none}
body.cvb-2026 .cp .site-header .wrap{position:relative}
.embed-live{display:grid; place-items:center; text-align:center; gap:.6rem}
body.cvb-route-post .article ol, body.cvb-route-post .article ul{padding-left:1.4rem}
body.cvb-route-post .article li + li{margin-top:.35rem}