/* Generated by tools/wp/build.mjs from the mockup (mockups/src/assets/css: base.css + utilities.css). Edit the mockup, then rebuild. */

/* ===== base.css ===== */
/* The Rooted CFO — Atelier site mockup
   Palette, fonts and rules follow Brand Kit - Synthesized/brand-kit.md.
   Cormorant Garamond is the one typeface added on top of the brand kit (the Atelier direction). */

:root {
  --cream: #F7F2E8; --stone: #D4D2BC; --stone-soft: #E6E4D2; --sage: #8E9E7B; --sage-deep: #555F4A; --sage-mist: #ECEADD;
  --rust: #90380A; --rust-deep: #732D08; --rust-mist: #EDDFD2; --taupe: #6F685E; --ink: #403C37; --ink-2: #36322D;
  --body: #4b463f; --muted: #5a554d; --rule: rgba(64, 60, 55, .18); --rule-2: rgba(64, 60, 55, .1);
  --serif: "Cormorant Garamond", Georgia, serif; --caps: "Cinzel", Georgia, serif;
  --sans: "Open Sans", "Segoe UI", sans-serif; --script: "Allison", cursive;
  --pad: 48px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
[id] { scroll-margin-top: 92px; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--pad); }
.center { text-align: center; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream); padding: 10px 14px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }
html.sheet-open, html.menu-open { overflow: hidden; }

/* ---------- type ---------- */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font: 600 12px/1.45 var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--rust); }
.eyebrow::before { content: ""; width: 44px; height: 1px; flex: none; background: currentColor; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 44px; height: 1px; flex: none; background: currentColor; }
.display { font: 300 clamp(58px, 7.4vw, 116px)/.94 var(--serif); letter-spacing: -.015em; color: var(--ink-2); margin: 0 0 40px; }
.h1 { font: 300 clamp(48px, 6.1vw, 94px)/.98 var(--serif); letter-spacing: -.015em; color: var(--ink-2); margin: 0 0 30px; }
.h2 { font: 300 clamp(40px, 4.3vw, 64px)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink-2); margin: 0 0 24px; }
.h3 { font: 400 clamp(28px, 2.5vw, 38px)/1.08 var(--serif); color: var(--ink-2); margin: 0 0 12px; }
/* WCAG 1.4.12 text spacing: with wider letter and word spacing a long word in big type ("knowing",
   "Bookkeeping") is wider than a 320 px phone. Break it only then; at normal spacing nothing changes
   (checked on every page from 320 to 1440 px, 2026-11-11). */
.display, .h1, .toc .ttl, .menu-item .head h3 { overflow-wrap: anywhere; }
.display em, .h1 em, .h2 em, .h3 em { font-style: italic; font-weight: 400; color: var(--rust); }   /* 400, not the headings' 300, so thin italics read as rust, not orange */
.standfirst { font: italic 400 clamp(22px, 2.05vw, 29px)/1.36 var(--serif); color: #4b463f; margin: 0 0 26px; max-width: 640px; }
.prose p { margin: 0 0 18px; color: var(--body); max-width: 660px; }
.prose p.lead { font-size: 18px; line-height: 1.65; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink-2); font-weight: 600; }
.prose a:not(.link):not(.btn), .faq .a a:not(.link), .callout a { color: var(--rust); border-bottom: 1px solid rgba(144, 56, 10, .4); }
.prose a:not(.link):not(.btn):hover, .faq .a a:not(.link):hover { border-bottom-color: var(--rust); }
.smallcaps { font: 600 10.5px/1.9 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.dropcap::first-letter { float: left; font: 400 76px/.72 var(--serif); color: var(--rust); padding: 7px 7px 0 0; margin-left: -2px; }
.sig { font: 400 88px/.7 var(--script); color: var(--rust); margin: 30px 0 34px; }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 26px; border: 0; cursor: pointer;
       font: 600 14px/1 var(--sans); letter-spacing: .04em; transition: background .2s, color .2s, box-shadow .2s; }
.btn .arr { font-family: var(--serif); font-size: 20px; line-height: 0; transition: transform .2s; }
@media (hover: hover) { .btn:hover .arr { transform: translateX(3px); } }   /* on touch screens a hover stays stuck after a tap */
.btn--solid { background: var(--rust); color: var(--cream); }
.btn--solid:hover { background: var(--rust-deep); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--cream); }
.btn--sm { padding: 12px 16px; font-size: 12.5px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.link { display: inline-flex; gap: 8px; font: 600 14px/1 var(--sans); color: var(--ink); border-bottom: 1px solid var(--rust); padding-bottom: 5px; transition: color .2s; }
.link:hover { color: var(--rust); }
.links { display: flex; flex-wrap: wrap; gap: 28px; }

/* ---------- masthead ---------- */
.masthead { position: relative; z-index: 50; }
.meta { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.meta a:hover { color: var(--rust); }
.brand { display: flex; justify-content: center; padding: 22px 0 26px; }
.brand img { width: 270px; }
.mainnav { position: relative; display: flex; justify-content: center; align-items: center; gap: 44px; height: 58px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
           font: 500 12.5px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; }
.mainnav > a, .has-menu > a { display: flex; align-items: center; height: 100%; transition: color .2s; }
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--rust); }
.mainnav .cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: auto; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: none;
                padding: 12px 16px; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.mainnav .cta:hover { background: var(--ink); color: var(--cream); }
.has-menu { position: relative; height: 100%; }
.has-menu .chev { font-family: var(--sans); font-size: 8px; margin-left: 7px; transition: transform .2s; }
.has-menu:focus-within .chev, .has-menu.open .chev { transform: rotate(180deg); }
@media (hover: hover) { .has-menu:hover .chev { transform: rotate(180deg); } }
.dropdown { position: absolute; left: 50%; top: 100%; width: 580px; transform: translate(-50%, 10px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
            background: var(--cream); border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(64, 60, 55, .45); padding: 12px 0 8px; z-index: 70; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-menu:focus-within .dropdown, .has-menu.open .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) { .has-menu:hover .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); } }   /* touch: site.js opens it on the first tap (.open) */
.dropdown a { display: grid; grid-template-columns: 46px 1fr auto; gap: 2px 14px; align-items: baseline; padding: 14px 26px; text-transform: none; letter-spacing: 0; }
.dropdown a:hover { background: rgba(144, 56, 10, .05); }
.dropdown .num { font: 600 11px/1 var(--caps); letter-spacing: .14em; color: var(--rust); }
.dropdown .t { font: 400 24px/1.1 var(--serif); color: var(--ink-2); }
.dropdown .p { font: italic 400 17px/1 var(--serif); color: var(--rust); }
.dropdown .d { grid-column: 2 / 4; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.dropdown .all { display: block; margin-top: 6px; padding: 14px 26px 8px; border-top: 1px solid var(--rule-2); font: 600 11px/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--rust); }

/* compact bar that slides in after scrolling past the masthead */
.stickybar { position: fixed; inset: 0 0 auto; z-index: 60; background: rgba(247, 242, 232, .93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule);
             transform: translateY(-105%); visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s; }
/* visibility keeps its links out of the Tab order while it's tucked away above the page */
html.scrolled .stickybar { transform: none; visibility: visible; transition: transform .35s ease, visibility 0s; }
/* focus scrolled into view stops below the compact bar; [id] targets keep their 92 px in total */
@media (min-width: 1001px) {
  html { scroll-padding-top: 84px; }
  [id] { scroll-margin-top: 8px; }
}
.stickybar .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 30px; }
.stickybar .s-brand img { width: 148px; }
.stickybar .mainnav { border: 0; height: 66px; gap: 30px; font-size: 11.5px; }
.stickybar .mainnav .cta { position: static; transform: none; margin-left: 10px; }

/* mobile bar + drawer */
.mobilebar { display: none; align-items: center; justify-content: space-between; height: 70px; border-bottom: 1px solid var(--rule); }
.mobilebar img { width: 150px; }
.menu-btn { background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--caps); letter-spacing: .22em; padding: 10px 0; }
.menu-btn i { display: block; width: 22px; height: 1px; background: var(--ink); box-shadow: 0 6px 0 var(--ink), 0 -6px 0 var(--ink); }
.drawer { position: fixed; inset: 0; z-index: 90; background: var(--cream); display: flex; flex-direction: column; padding: 0 22px 28px;
          opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .25s, visibility .25s; overflow-y: auto; }
html.menu-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer .top { display: flex; justify-content: space-between; align-items: center; height: 70px; flex-shrink: 0; border-bottom: 1px solid var(--rule); }
.drawer .top img { width: 150px; }
.drawer nav { display: flex; flex-direction: column; padding: 18px 0; }
.drawer nav a { font: 300 36px/1.2 var(--serif); color: var(--ink-2); padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.drawer nav a[aria-current="page"] { color: var(--rust); font-style: italic; }
.drawer nav .sub { font-size: 23px; padding-left: 22px; }
.drawer .d-actions { display: grid; gap: 10px; margin-top: 20px; }
.drawer .d-meta { margin-top: 22px; font-size: 14px; color: var(--muted); }

/* ---------- shared bits ---------- */
.figure { margin: 0; position: relative; }
.figure .frame { position: relative; overflow: hidden; background: var(--stone); }
.figure .frame img { width: 100%; height: 100%; object-fit: cover; }
.figure .frame::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(247, 242, 232, .55); pointer-events: none; }
.pull { margin: 0; background: var(--sage-deep); padding: 26px 28px 24px; position: relative; box-shadow: 0 18px 40px -24px rgba(43, 40, 37, .5); }
.pull::before { content: ""; position: absolute; left: 28px; top: 0; width: 46px; height: 2px; background: var(--stone); }
.pull q { display: block; font: italic 400 26px/1.2 var(--serif); color: var(--cream); quotes: "\201C" "\201D"; }
.pull cite { display: block; margin-top: 12px; font: 600 10.5px/1 var(--caps); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--stone-soft); }
.ornament { display: flex; align-items: center; gap: 28px; }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.ornament img { width: 68px; opacity: .85; }
.section { padding-block: 96px; }
.rule-top { border-top: 1px solid var(--rule); }
.sec-head { margin-bottom: 48px; }
.sec-head.split { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.sec-head p.intro { max-width: 520px; color: var(--body); margin: 0; }
.fluent { margin: 34px 0 0; font: italic 400 21px/1.5 var(--serif); color: var(--taupe); }
.fluent b { margin-right: 12px; font: 600 10.5px/1 var(--caps); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }

/* ---------- home ---------- */
.home-hero { display: grid; grid-template-columns: 1.32fr 1fr; gap: 72px; align-items: start; padding-block: 62px 90px; }
.home-hero h1.eyebrow { margin-top: 6px; }
.hero-sub { margin: 0; max-width: 620px; font-size: 16.5px; line-height: 1.75; color: var(--body); }
.home-hero .actions { margin-top: 42px; }
.trust { margin: 26px 0 0; }
.hh-fig .frame { aspect-ratio: 4 / 5.3; }
.hh-fig .frame img { object-position: 30% 40%; }
.hh-fig .pull { position: absolute; left: -96px; bottom: 56px; width: 300px; }
.rooted { padding-block: 124px 132px; }
.rooted .h2 { max-width: 760px; }
.rooted .prose { max-width: 620px; }
.rooted .prose .link { margin-top: 10px; }
.paths { padding-block: 40px 96px; }
.paths-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.path { padding: 44px 64px 48px 0; }
.path + .path { padding: 44px 0 48px 64px; border-left: 1px solid var(--rule); }
.path .num { display: block; font: italic 300 56px/1 var(--serif); color: var(--rust); margin-bottom: 14px; }
.path .h3 { font-size: clamp(34px, 3vw, 46px); margin-top: 6px; }
.path > p:not(.smallcaps) { color: var(--body); margin: 0; max-width: 500px; }
.path > p.aside { margin: 20px 0 24px; font-size: 14px; color: var(--muted); }
.path .aside a { color: var(--rust); border-bottom: 1px solid currentColor; }
.more { display: grid; grid-template-columns: .9fr 1.5fr; gap: 90px; padding-block: 30px 110px; }
.more .prose { margin-bottom: 28px; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.toc a, .toc .row { display: grid; grid-template-columns: 64px 1fr auto; gap: 0 18px; align-items: baseline; padding: 26px 0 24px; border-bottom: 1px solid var(--rule); }
.toc .num { font: 600 13px/1 var(--caps); letter-spacing: .14em; color: var(--rust); }
.toc .ttl { display: flex; align-items: baseline; gap: 16px; font: 400 38px/1.05 var(--serif); color: var(--ink-2); transition: color .2s; }
.toc .ttl::after { content: ""; flex: 1; min-width: 40px; border-bottom: 1px dotted rgba(64, 60, 55, .45); transform: translateY(-6px); }
.toc .price { font: italic 400 22px/1 var(--serif); color: var(--rust); white-space: nowrap; }
.toc .desc { grid-column: 2 / 4; margin-top: 8px; font-size: 14.5px; color: var(--muted); max-width: 580px; }
.toc a:hover .ttl { color: var(--rust); }
.toc--plain .ttl::after { display: none; }   /* no price column, so no dotted leader */

/* reviews */
.reviews { border-top: 1px solid var(--rule); padding-block: 96px 100px; }
.rev-controls { display: flex; align-items: center; gap: 14px; }
.gmark { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; font: 600 16px/1 var(--caps); color: var(--ink-2); }
.arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(64, 60, 55, .3); background: transparent; cursor: pointer; font-size: 18px; color: var(--rust); transition: background .2s; }
.arrow:hover { background: rgba(144, 56, 10, .07); }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, calc((100% - 48px) / 3)); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.reviews-track::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; display: flex; flex-direction: column; min-height: 330px; background: var(--stone-soft); padding: 34px 32px 28px; }
.review .stars { color: var(--rust); letter-spacing: 4px; font-size: 14px; }
.review blockquote { margin: 16px 0 0; font: italic 400 21px/1.42 var(--serif); color: var(--ink-2); }
.review footer { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; font: 600 10px/1.5 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.review.ph i { display: block; height: 9px; border-radius: 5px; background: rgba(64, 60, 55, .08); margin-top: 16px; }
.review.ph i:nth-of-type(2) { width: 92%; } .review.ph i:nth-of-type(3) { width: 84%; } .review.ph i:nth-of-type(4) { width: 58%; }
.rev-note { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
/* Home: one testimonial until a reviews feed is connected (2026-11-11); the carousel styles above wait for that feed */
.reviews--one .wrap { display: grid; grid-template-columns: .9fr 1.5fr; gap: 90px; align-items: center; }
.testimonial { margin: 0; position: relative; background: var(--stone-soft); padding: 46px 48px 38px; }
.testimonial::before { content: ""; position: absolute; left: 48px; top: 0; width: 46px; height: 2px; background: var(--rust); }
.testimonial blockquote { margin: 0; font: italic 400 clamp(22px, 1.9vw, 27px)/1.42 var(--serif); color: var(--ink-2); }
.testimonial figcaption { margin-top: 24px; font: 600 10px/1.5 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* teaser */
.teaser { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; padding-block: 110px; }
.teaser .frame { aspect-ratio: 4 / 5; }
.teaser .frame img { object-position: 50% 25%; }
.teaser .links { margin-top: 18px; }

/* faq */
.faq-sec { display: grid; grid-template-columns: .9fr 1.5fr; gap: 90px; padding-block: 30px 110px; }
.faq-sec .side p:not(.eyebrow) { color: var(--body); max-width: 380px; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 54px 1fr 32px; align-items: baseline; gap: 0 6px; padding: 24px 0; font: 400 clamp(23px, 2vw, 28px)/1.22 var(--serif); color: var(--ink-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font: italic 400 21px/1 var(--serif); color: var(--rust); }
.faq summary .pm { position: relative; justify-self: end; width: 16px; height: 16px; align-self: center; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: var(--ink); transition: transform .25s; }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm::after { transform: rotate(0); }
.faq summary:hover { color: var(--rust); }
.faq .a { padding: 0 40px 28px 60px; color: var(--body); max-width: 780px; }
.faq .a p { margin: 0 0 12px; }

/* closing band */
.cta-band { position: relative; overflow: hidden; background: var(--stone); text-align: center; padding-block: 100px 90px; border-top: 1px solid var(--rule); }
.cta-band .ghost { position: absolute; left: 50%; bottom: -70px; width: 900px; max-width: none; transform: translateX(-50%); opacity: .06; pointer-events: none; }
.cta-band .h2 { position: relative; }
.chooser { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 920px; margin: 44px auto 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.chooser > div { padding: 34px 30px 38px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.chooser > div + div { border-left: 1px solid var(--rule); }
.chooser p { margin: 0; font: italic 400 24px/1.3 var(--serif); color: var(--ink-2); }
.chooser small { font-size: 13px; color: var(--muted); }
.cta-band .phone { position: relative; margin: 30px 0 0; font: italic 400 21px/1 var(--serif); color: var(--muted); }   /* Muted: Taupe is 3.6:1 on Stone */
.cta-band .phone a { color: var(--rust); border-bottom: 1px solid currentColor; }

/* ---------- inner pages ---------- */
.page-head { padding-block: 34px 80px; }
.ph-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 46px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font: 600 10.5px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.crumbs a:hover { color: var(--rust); }
.crumbs [aria-current] { color: var(--ink); }
.ph-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; }
.ph-grid.solo { grid-template-columns: 1fr; max-width: 980px; }
.ph-fig .frame { aspect-ratio: 4 / 5; }
.page-head .pull { max-width: 520px; margin-top: 8px; }   /* Team: a quote beside the intro photo */
/* A short verse: a quiet faith touch on a few pages (Ashley's ask, round 2) and in the footer */
.verse { margin: 40px 0 0; max-width: 640px; font: italic 400 21px/1.4 var(--serif); color: var(--ink-2); }
.verse::before { content: ""; display: block; width: 32px; height: 1px; margin-bottom: 14px; background: var(--rust); }
.verse q, .f-verse q { quotes: "\201C" "\201D"; }
.verse cite, .f-verse cite { display: inline-block; margin-left: 8px; font: 600 10.5px/1 var(--caps); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--rust); white-space: nowrap; }
.f-bottom .mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.f-verse { font: italic 400 16px/1.3 var(--serif); color: var(--ink-2); text-align: center; }
.f-verse cite { font-size: 9.5px; }
.price-chip { display: inline-flex; gap: 10px; align-items: baseline; margin: 6px 0 4px; font: italic 400 24px/1 var(--serif); color: var(--rust); }
.price-chip small { font: 600 10.5px/1 var(--caps); font-style: normal; letter-spacing: .22em; color: var(--taupe); text-transform: uppercase; }

/* article sections: one readable column, each opening on its heading */
.article { padding-block: 92px; position: relative; }
.article::before, .wide::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--rule); }
.article > .body { max-width: 1040px; }
.article .h3.sec { margin-bottom: 14px; }
.wide { padding-block: 92px; position: relative; }
.wide-head { margin-bottom: 48px; max-width: 1040px; }
.wide-head p { margin: 0; max-width: 640px; color: var(--body); }

.versus { display: grid; grid-template-columns: 1fr 1fr; margin-top: 34px; border: 1px solid var(--rule); }
.versus > div { padding: 26px 28px; }
.versus > div + div { border-left: 1px solid var(--rule); background: rgba(144, 56, 10, .035); }
.versus h3 { margin: 0 0 10px; font: 600 11px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--rust); }
.versus p { margin: 0; font: italic 400 22px/1.35 var(--serif); color: var(--ink-2); }

.signs { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.signs li { display: grid; grid-template-columns: 40px 1fr; padding: 17px 0; border-bottom: 1px solid var(--rule-2); font: 400 23px/1.32 var(--serif); color: var(--ink-2); }
.signs li::before { content: ""; width: 7px; height: 7px; margin-top: 12px; border: 1px solid var(--rust); transform: rotate(45deg); }
.callout { margin-top: 30px; padding: 22px 26px; background: var(--stone-soft); border-left: 2px solid var(--rust); font-size: 15px; color: var(--body); }
.callout b { color: var(--ink-2); }

.steps { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.step { padding: 30px 34px 34px 0; border-bottom: 1px solid var(--rule); }
.step:nth-child(even) { padding: 30px 0 34px 34px; border-left: 1px solid var(--rule); }
.step .n { font: italic 300 52px/1 var(--serif); color: var(--rust); }
.step h3 { font: 400 28px/1.15 var(--serif); color: var(--ink-2); margin: 14px 0 10px; }
.step p { margin: 0; color: var(--body); font-size: 15px; }
.steps.single { grid-template-columns: 1fr; }
.steps.single .step, .steps.single .step:nth-child(even) { padding: 22px 0 24px; border-left: 0; display: grid; grid-template-columns: minmax(54px, auto) 1fr; column-gap: 8px; }   /* grows only if "iii." needs more (wide text spacing) */
.steps.single .step .n { font-size: 40px; grid-row: span 2; }
.steps.single .step h3 { margin: 4px 0 6px; font-size: 25px; }
.step .when { display: inline-block; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); font: 600 10px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }

.packages { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.pkg { padding: 0 26px 34px; border-right: 1px solid var(--rule); }
.pkg:first-child { padding-left: 0; } .pkg:last-child { padding-right: 0; border-right: 0; }
.pkg .lvl { height: 3px; background: var(--rule-2); margin-bottom: 28px; position: relative; }
.pkg .lvl i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rust); }
.pkg .tier { font: 600 15px/1 var(--caps); letter-spacing: .3em; color: var(--rust); }
.pkg .for { font: italic 400 21px/1.35 var(--serif); color: var(--ink-2); margin: 16px 0 20px; min-height: 86px; }
.pkg .plus { margin: 0 0 8px; font: 600 10px/1.6 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.pkg ul { list-style: none; margin: 0; padding: 0; }
.pkg li { padding: 9px 0; border-top: 1px solid var(--rule-2); font-size: 14.5px; color: var(--body); }
.note-box { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; margin-top: 30px; padding: 30px 32px; background: var(--stone-soft); }
.note-box .mark { font: italic 300 60px/.8 var(--serif); color: var(--rust); }
.note-box p { margin: 0 0 10px; color: var(--body); }
.note-box p:last-child { margin: 0; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.tier-card { padding: 34px 34px 38px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.tier-card:first-child { padding-left: 0; } .tier-card:last-child { padding-right: 0; border-right: 0; }
.tier-card .name { font: 600 14px/1 var(--caps); letter-spacing: .28em; color: var(--rust); }
.tier-card .amount { font: 300 74px/1 var(--serif); color: var(--ink-2); margin: 22px 0 6px; letter-spacing: -.02em; }
.tier-card .amount small { font: italic 400 21px/1 var(--serif); color: var(--taupe); letter-spacing: 0; margin-left: 4px; }
.tier-card .fit { font: italic 400 20px/1.35 var(--serif); color: var(--body); margin: 0 0 18px; }
.tier-card ul { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--rule); }
.tier-card li { padding: 11px 0 11px 24px; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; color: var(--body); position: relative; }
.tier-card li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 6px; height: 6px; border: 1px solid var(--rust); transform: rotate(45deg); }
.tier-card .btn { margin-top: auto; align-self: flex-start; }
.compare { margin-top: 34px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.compare summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font: 600 11px/1 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.compare summary::-webkit-details-marker { display: none; }
.compare summary::after { content: "+"; font: 300 26px/1 var(--serif); color: var(--rust); }
.compare[open] summary::after { content: "−"; }
.table-wrap { overflow-x: auto; padding-bottom: 24px; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.cmp th, table.cmp td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
table.cmp thead th { font: 600 10.5px/1.4 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--rust); border-bottom: 1px solid var(--ink); }
table.cmp tbody th { font: italic 400 19px/1.3 var(--serif); color: var(--ink-2); width: 30%; }

.menu-list { border-top: 1px solid var(--ink); }
.menu-item { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; padding: 30px 0 28px; border-bottom: 1px solid var(--rule); }
.menu-item .num { font: 600 13px/2.6 var(--caps); letter-spacing: .14em; color: var(--rust); }
.menu-item .head { display: flex; align-items: baseline; gap: 14px; }
.menu-item .head h3 { margin: 0; font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--serif); color: var(--ink-2); }
.menu-item .head::after { content: ""; order: 1; flex: 1; min-width: 30px; border-bottom: 1px dotted rgba(64, 60, 55, .45); transform: translateY(-6px); }
.menu-item .head .price { order: 2; font: italic 400 25px/1 var(--serif); color: var(--rust); white-space: nowrap; }
/* the smallest phones: the price drops under the name instead of pushing past the screen edge */
@media (max-width: 360px) {
  .menu-item .head { flex-wrap: wrap; row-gap: 8px; }
  .menu-item .head::after { display: none; }
}
.menu-item .meta-line { margin: 10px 0 8px; font: 600 10.5px/1.8 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.menu-item p { margin: 0; color: var(--body); max-width: 720px; font-size: 15px; }
.menu-item .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 16px; border-top: 1px solid var(--rule-2); }
.menu-item .grid4 div { padding: 12px 14px 4px 0; }
.menu-item .grid4 b { display: block; font: italic 400 22px/1.2 var(--serif); color: var(--rust); font-weight: 400; }
.menu-item .grid4 span { font-size: 13px; color: var(--muted); }

.creds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 28px 0 0; border-top: 1px solid var(--rule); }
.creds div { padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.creds dt { font: 600 10.5px/1.6 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.creds dd { margin: 6px 0 0; font: 400 21px/1.3 var(--serif); color: var(--ink-2); }

.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split2 .figure .frame { aspect-ratio: 4 / 5; }
.helper-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.helper-links a { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.helper-links .q { font: italic 400 15px/1.4 var(--serif); color: var(--taupe); grid-column: 1 / 3; font-size: 18px; }
.helper-links .t { font: 400 30px/1.1 var(--serif); color: var(--ink-2); transition: color .2s; }
.helper-links .go { font: italic 400 20px/1 var(--serif); color: var(--rust); }
.helper-links a:hover .t { color: var(--rust); }

.book-sec { text-align: center; padding-block: 90px 96px; }
.book-sec .h2 { max-width: 880px; margin: 34px auto 18px; }
.book-sec p.sub { max-width: 560px; margin: 0 auto 32px; color: var(--body); }
.book-sec .helper { margin: 18px auto 0; font-size: 13.5px; color: var(--muted); max-width: 520px; }
.after { background: var(--stone); border-top: 1px solid var(--rule); }   /* Stone #D4D2BC, as Lance asked (2026-11-09); was Sage Mist */
.after .wrap { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 34px; }
.after p { margin: 0; font: italic 400 24px/1.35 var(--serif); color: var(--ink-2); }

/* services hub */
.hub { display: grid; grid-template-columns: 1.45fr 1fr; gap: 80px; align-items: start; padding-block: 20px 100px; }
.hub .toc a { grid-template-columns: 64px 1fr auto; }
.hub .toc .go { grid-column: 2 / 4; margin-top: 14px; font: 600 12px/1 var(--sans); letter-spacing: .04em; color: var(--rust); }
/* Phones under 360 px: the 40 px number column the other lists use there. With 64 px, "Bookkeeping"
   and its dotted leader pushed the list 21 px into the right margin at 320 px (2026-11-11). */
@media (max-width: 359px) { .hub .toc a { grid-template-columns: 40px 1fr auto; } }
.hub-fig { position: sticky; top: 100px; }
.hub-fig .frame { aspect-ratio: 4 / 5; }
.hub-fig .frame img { transition: opacity .35s; }
.hub-help { margin-top: 30px; font: italic 400 22px/1.4 var(--serif); color: var(--taupe); }
.hub-help a { color: var(--rust); border-bottom: 1px solid currentColor; }

/* about & team */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; }
.about-story .pull { margin-top: 34px; }
.about-story .figure .frame { aspect-ratio: 4 / 5; }
/* A quote placed after its photo in the markup, so phones show it under the photo (Lance, 2026-11-10).
   On wider screens it goes back to the text column, under the text, with the photo spanning both rows. */
@media (min-width: 1001px) {
  .about-story:has(> .pull), .ph-grid:has(> .pull) { grid-template-rows: auto 1fr; row-gap: 0; }
  .about-story > .prose, .ph-grid:has(> .pull) > div:first-child { grid-column: 1; grid-row: 1; }
  .about-story:has(> .pull) > .figure, .ph-grid:has(> .pull) > .figure { grid-column: 2; grid-row: 1 / span 2; }
  .about-story > .pull, .ph-grid > .pull { grid-column: 1; grid-row: 2; align-self: start; }
  .ph-grid > .pull { margin-top: 0; }
}
@media (max-width: 1000px) {
  .about-story > .pull, .ph-grid > .pull { margin-top: 0; }
}
.industries { columns: 2; column-gap: 40px; margin: 26px 0 0; padding: 0; list-style: none; }
.industries li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--rule-2); font: italic 400 21px/1.3 var(--serif); color: var(--ink-2); }
/* About · Experience: one statement sentence, then the industries in a single ruled line */
.xp-statement { margin: 2px 0 0; max-width: 960px; font: 300 clamp(30px, 3.1vw, 44px)/1.24 var(--serif); color: var(--ink-2); }
.xp-statement em { font-style: italic; font-weight: 400; color: var(--rust); }
.xp-inds { max-width: 1000px; margin: 42px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); }
.xp-lead { margin: 0 0 10px; font: italic 400 24px/1.4 var(--serif); color: var(--rust); }
.xp-inds ul { list-style: none; display: flex; flex-wrap: wrap; row-gap: 6px; margin: 0; padding: 0; }
.xp-inds li { font: 500 20px/1.5 var(--serif); color: var(--ink-2); }   /* not nowrap: each item already moves to the next line whole, and with wider text spacing one can be wider than a phone */
.xp-inds li:not(:last-child)::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 16px; border: 1px solid var(--rust); transform: translateY(-3px) rotate(45deg); }
.place { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 26px; }
.place div { padding: 22px 22px 6px 0; }
.place div + div { padding-left: 22px; border-left: 1px solid var(--rule); }
.place b { display: block; font: 300 40px/1 var(--serif); color: var(--ink-2); }
.place span { font-size: 14px; color: var(--muted); }
.profiles { border-top: 1px solid var(--rule); }
.profile { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; padding-block: 80px; border-bottom: 1px solid var(--rule); }
.profile:nth-child(even) { grid-template-columns: 7fr 5fr; }
.profile:nth-child(even) .figure { order: 2; }
.profile .figure .frame { aspect-ratio: 4 / 5; }
.profile .figure .frame img { object-position: 50% 22%; }
/* Team · a photo still to come: the tree mark on stone */
.profile .figure .frame--ph { display: grid; place-items: center; }
.profile .figure .frame--ph img { width: 34%; height: auto; opacity: .3; }
.profile .role { margin: 0 0 10px; font: 600 11.5px/1.6 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--rust); }
.profile .name { margin: 0 0 22px; font: 300 clamp(48px, 5vw, 76px)/1 var(--serif); color: var(--ink-2); }
.profile .name em { font-weight: 400; color: var(--rust); }
.profile .offclock { margin-top: 22px; font: italic 400 20px/1.4 var(--serif); color: var(--taupe); }

/* contact */
.choose { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.choose > div { padding: 40px 48px 44px 0; }
.choose > div + div { padding: 40px 0 44px 48px; border-left: 1px solid var(--rule); }
.choose .smallcaps { color: var(--rust); }
.choose h3 { font: 400 34px/1.1 var(--serif); color: var(--ink-2); margin: 12px 0 12px; }
.choose p { margin: 0 0 26px; color: var(--body); max-width: 440px; }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; padding-block: 92px 110px; }
.details { border-top: 1px solid var(--ink); }
.details div { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.details dt { font: 600 10.5px/1.6 var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.details dd { margin: 6px 0 0; font: 400 25px/1.3 var(--serif); color: var(--ink-2); }
.details dd small { display: block; font: 400 13.5px/1.5 var(--sans); color: var(--muted); margin-top: 4px; }
.details dd a:hover { color: var(--rust); }
.social { display: flex; gap: 22px; margin-top: 26px; font: 600 11px/1 var(--caps); letter-spacing: .22em; text-transform: uppercase; }
.social a { color: var(--ink); border-bottom: 1px solid var(--rust); padding-bottom: 5px; }
.form-card { background: var(--stone-soft); padding: 40px 44px 42px; }
.form-card .h3 { margin-bottom: 6px; }
.form-card > p { margin: 0 0 28px; color: var(--muted); font-size: 14.5px; }

/* forms (mock) */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 26px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; }
.field.full { grid-column: 1 / -1; }
.field > label, .field > legend { padding: 0; font: 600 10.5px/1.5 var(--caps); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(64, 60, 55, .38);
                                               border-radius: 0; padding: 10px 2px; -webkit-appearance: none; appearance: none; }
.field select { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2390380A' stroke-width='1.4'/></svg>") right 4px center no-repeat; padding-right: 26px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--rust); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { position: relative; cursor: pointer; }
.pills input { position: absolute; opacity: 0; inset: 0; }
.pills span { display: inline-block; padding: 9px 14px; border: 1px solid rgba(64, 60, 55, .3); font-size: 13.5px; color: var(--ink); transition: background .15s, color .15s, border-color .15s; }
.pills input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pills input:focus-visible + span { outline: 2px solid var(--rust); outline-offset: 2px; }
.form .submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.form .fineprint { font-size: 12.5px; color: var(--muted); }
.thanks { text-align: center; padding: 40px 10px; }
.thanks .h3 { margin: 18px 0 10px; }
.thanks p { color: var(--body); margin: 0 0 8px; }
.thanks small { display: block; margin-top: 16px; font-size: 12.5px; color: var(--muted); }

/* booking sheet */
.sheet { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.sheet.open { visibility: visible; }
.sheet .scrim { position: absolute; inset: 0; background: rgba(43, 40, 37, .42); opacity: 0; transition: opacity .3s; }
.sheet.open .scrim { opacity: 1; }
.sheet .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%); overflow-y: auto; background: var(--cream);
                box-shadow: -30px 0 60px -30px rgba(43, 40, 37, .5); padding: 40px 48px 44px; transform: translateX(40px); opacity: 0; transition: transform .35s ease, opacity .3s; }
.sheet.open .panel { transform: none; opacity: 1; }
.sheet .close { position: absolute; top: 22px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; cursor: pointer; font: 300 26px/1 var(--serif); color: var(--ink); }
.sheet .close:hover { background: rgba(144, 56, 10, .07); }
.sheet .s-head { padding-right: 50px; margin-bottom: 30px; }
.sheet .s-head .h2 { font-size: clamp(36px, 3.4vw, 50px); margin-bottom: 14px; }
.sheet .s-head p { margin: 0; color: var(--body); }
.sheet .s-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); }
.sheet .s-foot a { color: var(--rust); border-bottom: 1px solid currentColor; }
/* "Book a Discovery Call": first ask which call, then show that form */
.pick { display: grid; gap: 14px; }
.pick-opt { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; padding: 24px 26px 26px; background: var(--stone-soft); transition: background .2s; }
.pick-opt:hover { background: var(--stone); }
.pick-opt .smallcaps { grid-column: 1 / -1; color: var(--rust); }
.pick-opt b { font: 400 30px/1.1 var(--serif); color: var(--ink-2); }
.pick-opt .d { grid-column: 1; font-size: 14.5px; color: var(--body); }
.pick-opt .go { grid-column: 2; grid-row: 2 / 4; font: 300 32px/1 var(--serif); color: var(--rust); transition: transform .2s; }
@media (hover: hover) { .pick-opt:hover .go { transform: translateX(4px); } }

/* ---------- section bands: cream page, stone bands, one deep-sage band ---------- */
.band { position: relative; }
.band--stone { background: var(--stone); }
.band--dark { background: var(--sage-deep); color: var(--cream); }
.band + .reviews { border-top: 0; }
.band .article::before, .band .wide::before, .band + .article::before, .band + .wide::before { display: none; }
.band--contours { overflow: hidden; }
.band--contours::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
                          background: url("../motifs/contours-taupe.svg") 60% 50% / cover no-repeat;
                          -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 66%); mask-image: linear-gradient(90deg, transparent 22%, #000 66%); }
.band--contours > .wrap { position: relative; }
.band--dark .eyebrow { color: var(--stone-soft); }
.band--dark .h2 { color: var(--cream); }
.band--dark .h2 em { color: var(--stone); }
.band--dark .prose p { color: var(--cream); }
.band--dark .sig { color: var(--stone); }
.band--dark .link { color: var(--cream); border-bottom-color: var(--stone); }
.band--dark .link:hover { color: var(--stone); }
.band--dark .figure .frame { background: #4b5441; }
.band--dark :focus-visible { outline-color: var(--stone); }
/* Contrast (WCAG 2.2 AA): small Taupe text is 3.6:1 on Stone and 4.3:1 on Stone Soft, under the 4.5:1
   it needs, so on those surfaces it uses Muted, the palette's darker Taupe (4.8:1 and 5.8:1).
   QA of the preview, 2026-11-07. */
.band--stone :is(.creds dt, .pkg .plus, .menu-item .meta-line, .helper-links .q, .smallcaps, .step .when, .meta),
.review footer, .form-card .field > label, .form-card .field > legend { color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--ink); padding-top: 72px; }
.f-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 72px; padding-bottom: 56px; border-bottom: 1px solid var(--rule); }
.f-brand img { width: 220px; }
.f-brand p { margin: 22px 0 28px; max-width: 360px; font: italic 400 23px/1.35 var(--serif); color: var(--taupe); }
.f-brand .actions { flex-direction: column; align-items: flex-start; gap: 10px; }
.f-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.f-col h2 { margin: 0 0 16px; font: 600 10.5px/1.6 var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--rust); }
.f-col a, .f-col p { display: block; margin: 0; font-size: 14.5px; line-height: 2; color: var(--body); }
.f-col a:hover { color: var(--rust); }
.f-col p.small { font-size: 13px; line-height: 1.55; margin-top: 4px; color: var(--muted); }
.f-col .gap { margin-top: 22px; }
.f-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 24px 36px; font-size: 12.5px; color: var(--taupe); }
.f-bottom .mid img { width: 46px; opacity: .8; }
.f-bottom a:hover { color: var(--rust); }



/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .mainnav { gap: 30px; }
  .hh-fig .pull { left: -56px; width: 280px; }
}
@media (max-width: 1100px) {
  .mainnav { gap: 22px; font-size: 11.5px; letter-spacing: .18em; }
  .packages { grid-template-columns: 1fr 1fr; }
  .pkg:nth-child(2) { border-right: 0; padding-right: 0; }
  .pkg:nth-child(3) { padding-left: 0; }
  .pkg { border-bottom: 1px solid var(--rule); padding-top: 0; }
}
@media (max-width: 1000px) {
  :root { --pad: 22px; }
  .masthead .meta, .masthead .brand, .masthead .mainnav, .stickybar { display: none; }
  .mobilebar { display: flex; }
  .home-hero, .ph-grid, .more, .teaser, .faq-sec, .hub, .split2, .about-story, .profile, .profile:nth-child(even), .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .profile:nth-child(even) .figure { order: 0; }
  .hh-fig .pull { position: relative; left: auto; bottom: auto; width: auto; margin: -40px 18px 0; }
  .paths-grid, .chooser, .choose, .steps, .tiers, .versus, .place, .creds { grid-template-columns: 1fr; }
  .path, .path + .path, .choose > div, .choose > div + div, .tier-card, .tier-card:first-child, .tier-card:last-child { padding: 34px 0; border-left: 0; border-right: 0; }
  .path + .path, .choose > div + div, .tier-card + .tier-card { border-top: 1px solid var(--rule); }
  .place div + div { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  /* Stacked boxes keep their own padding: zeroing the second one's left padding pushed the
     "Your fractional CFO" box flush left and the second CTA chooser 15 px off-centre (2026-11-09). */
  .chooser > div + div, .versus > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .step, .step:nth-child(even) { padding: 26px 0; border-left: 0; }
  .packages { grid-template-columns: 1fr; }
  .pkg, .pkg:nth-child(2), .pkg:nth-child(3) { padding: 0 0 28px; border-right: 0; }
  .pkg .for { min-height: 0; }
  .rooted { padding-block: 80px 86px; }
  .band--contours::before { opacity: .3; -webkit-mask-image: none; mask-image: none; }
  .hub-fig { position: static; }
  .sec-head.split, .after .wrap, .f-bottom { flex-direction: column; align-items: flex-start; }
  .f-bottom .mid { align-items: flex-start; }
  .f-verse { text-align: left; }
  .toc .ttl { font-size: 28px; }
  .toc a, .toc .row { grid-template-columns: 40px 1fr; }
  .toc .price { grid-column: 2; margin-top: 8px; }
  .menu-item { grid-template-columns: 40px 1fr; }
  .menu-item .grid4 { grid-template-columns: 1fr 1fr; }
  .industries { columns: 1; }
  .f-top, .f-cols { grid-template-columns: 1fr; gap: 36px; }
  .form { grid-template-columns: 1fr; }
  .sheet .panel { padding: 30px 22px 34px; }
  .form-card { padding: 28px 22px; }
  .reviews-track { grid-auto-columns: 86%; }
  .reviews--one .wrap { grid-template-columns: 1fr; gap: 30px; }
  .testimonial { padding: 36px 26px 30px; }
  .testimonial::before { left: 26px; }
  .section, .article, .wide, .reviews, .book-sec, .cta-band { padding-block: 64px; }
}
/* Reduce Motion (an accessibility setting on phones and computers): menus, panels and the compact
   header appear without sliding, and in-page links jump instead of gliding. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 600px) {
  .xp-inds ul { display: block; }
  .xp-inds li { display: inline-block; line-height: 1.9; }
  .pick-opt { padding: 20px 20px 22px; }
  .pick-opt b { font-size: 26px; }
  /* FAQs on phones: smaller indents, so long questions and answers get a readable line length (2026-11-11) */
  .faq summary { grid-template-columns: 36px 1fr 24px; padding: 20px 0; font-size: 22px; }
  .faq .a { padding: 0 0 24px 42px; }
}

/* ===== utilities.css ===== */
/* Utility classes for what the Atelier mockup set with inline styles (the CSP forbids style="",
   and WordPress's Element block keeps no style attribute). !important keeps them as strong as the
   inline styles they replace. Ported 2026-10-27. */

/* Photo focal points (object-position) */
.u-op-40-50 { object-position: 40% 50% !important; }
.u-op-42-50 { object-position: 42% 50% !important; }
.u-op-50-18 { object-position: 50% 18% !important; }
.u-op-50-20 { object-position: 50% 20% !important; }
.u-op-50-35 { object-position: 50% 35% !important; }
.u-op-50-42 { object-position: 50% 42% !important; }
.u-op-50-50 { object-position: 50% 50% !important; }
.u-op-50-55 { object-position: 50% 55% !important; }
.u-op-50-85 { object-position: 50% 85% !important; }
.u-op-56-50 { object-position: 56% 50% !important; }
.u-op-62-50 { object-position: 62% 50% !important; }
.u-op-82-50 { object-position: 82% 50% !important; }

/* Spacing */
.u-mt-18 { margin-top: 18px !important; }
.u-mt-22 { margin-top: 22px !important; }
.u-mt-26 { margin-top: 26px !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-mt-34 { margin-top: 34px !important; }
.u-m-40-0 { margin: 40px 0 0 !important; }
.u-mx-auto { margin-inline: auto !important; }
.u-list-none { list-style: none !important; }

/* The CFO packages' level bars */
.u-w-25 { width: 25% !important; }
.u-w-50 { width: 50% !important; }
.u-w-75 { width: 75% !important; }
.u-w-100 { width: 100% !important; }

/* The 404 page */
.u-pad-404 { padding-block: 70px 110px !important; }
.u-orn-404 { max-width: 520px !important; margin: 0 auto 34px !important; }
.u-links-404 { max-width: 720px !important; margin: 44px auto 0 !important; text-align: left !important; }