/* ----------  TOKENS  ---------- */
:root{
  --paper:#EDEAE1;
  --paper-2:#E4E0D4;
  --ink:#1B2420;
  --ink-soft:#46514A;
  --ink-muted:#3A4540;
  --pine:#243A2F;
  --pine-2:#2F4A3C;
  --sage:#AEB7A6;
  --sage-soft:#C9CDBF;
  --brass:#A8812F;
  --brass-2:#92702A;
  --brass-text:#7A5E22;
  --brass-dark:#6B5219;

  --display:"Libre Caslon Display", Georgia, serif;
  --body:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --gutter:clamp(34px, 8vw, 132px);
  --colpad:clamp(24px, 4vw, 56px);
  --secpad:clamp(72px, 11vh, 140px);
  --measure:680px;
}
@media (min-width:1240px){
  :root{--gutter:clamp(170px, 15vw, 240px)}
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  font-size:clamp(16px,1.0vw + 13px,18px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
.wrap{flex:1}

::selection{background:var(--pine);color:var(--paper)}
/* on the dark band the pine highlight disappears — lift to a light marker */
.band ::selection{background:var(--sage);color:var(--pine)}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:1px}
/* v6: sage-soft on pine = 8.05:1 */
.band :focus-visible{outline-color:var(--sage-soft)}
/* v7: pine on brass-text = 8.9:1 — buttons need a dark ring, not brass-on-brass */
.btn:focus-visible,
.ham-cta:focus-visible{outline-color:var(--pine)}
/* v7: .over-band class (JS-managed) covers sticky-nav items that visually overlap .band */
.sticky-link.over-band:focus-visible,
.sticky-subs.over-band .sticky-sub:focus-visible{outline-color:var(--sage-soft)}

/* ----------  SKIP LINK  ---------- */
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-100%;
  padding:12px 20px;
  background:var(--pine);
  color:var(--paper);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  z-index:100;
  border-radius:0 0 2px 0;
  transition:top .15s ease;
}
.skip-link:focus{top:0}

/* ----------  THE LEDGER LINE (signature)  ---------- */
.ledger{
  position:fixed;
  left:var(--gutter);
  top:0;
  width:1px;
  height:100vh;
  background:var(--sage);
  z-index:10;
  transform-origin:top;
}
.ledger.draw{animation:draw 1.1s cubic-bezier(.7,0,.2,1) .15s both}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.marker{
  position:fixed;
  left:var(--gutter);
  top:0;
  width:9px;height:9px;
  margin-left:-4.5px;margin-top:-4.5px;
  border-radius:50%;
  background:var(--brass);
  z-index:11;
  opacity:0;
  will-change:transform,opacity;
}
.marker.show{opacity:1;transition:opacity .4s ease}

/* ----------  LAYOUT SCAFFOLD  ---------- */
.wrap{position:relative;z-index:2;padding-left:var(--gutter)}
section{padding-block:var(--secpad)}
.col{
  position:relative;
  max-width:var(--measure);
  padding-left:var(--colpad);
  padding-right:clamp(20px,5vw,40px);
}

.tick{
  position:relative;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:30px;
}
.tick::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--colpad));
  top:.55em;
  width:var(--colpad);
  height:1px;
  background:var(--sage);
}
.tick::after{
  content:"";
  position:absolute;
  left:calc(-1 * var(--colpad));
  top:.55em;
  width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:var(--sage);
}

@media (min-width:1240px){
  .tick{
    position:absolute;
    top:12px;
    right:calc(100% + 18px);
    width:calc(var(--gutter) - 56px);
    margin-bottom:0;
    text-align:right;
    line-height:1.7;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .tick::before{left:auto;right:-18px;width:18px;top:.6em}
  .tick::after{left:auto;right:-18px;margin:-2.5px -2.5px 0 0;top:.6em}
  .wrap{z-index:auto}
  .tick{z-index:9}
}

/* ----------  TYPE  ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.01em}
h1{font-size:clamp(40px,7.2vw,86px)}
h2{font-size:clamp(30px,4.6vw,54px)}
h3{font-size:clamp(21px,2.4vw,28px)}
.lede{font-size:clamp(18px,1.4vw,22px);color:var(--ink-soft);max-width:36em;margin-top:28px}
@media (max-width:480px){.lede{margin-top:18px}}
p{max-width:34em}
p + p{margin-top:1.1em}

/* inline cross-links within prose — understated underline, brass on hover */
.prose-link{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(168,129,47,.4);padding-bottom:1px;
  transition:color .25s,border-color .25s;
}
.prose-link:hover{color:var(--brass-dark);border-bottom-color:var(--brass-dark)}
/* on the dark band, brass-text is too dark — lift to brass */
.band .prose-link{border-bottom-color:rgba(168,129,47,.55)}
.band .prose-link:hover{color:var(--brass);border-bottom-color:var(--brass)}

/* ----------  HEADER / WORDMARK  ---------- */
header{
  position:sticky;top:0;z-index:8;
  background:var(--paper);
  padding:clamp(14px,1.8vw,22px) clamp(20px,5vw,48px) clamp(14px,1.8vw,22px) var(--gutter);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  transition:transform .35s ease;
}
header.header-hidden{transform:translateY(-100%)}
.mark{padding-left:var(--colpad)}
.mark .name{font-family:var(--display);font-size:25px;letter-spacing:.01em}
.mark .name a{text-decoration:none;color:inherit}
/* wordmark holds full 25px down to ~450px (where the sub-line also starts shrinking),
   then scales down so the name and sub-line shrink together on small screens */
@media (max-width:450px){.mark .name{font-size:clamp(16px,6.9vw - 6px,25px)}}
/* sub-line fluidly shrinks on narrow viewports so "Bookkeeping · Tax · Accounting"
   stays on one row: font eases down gently (floor 10px) while the dot spacing carries
   most of the compression via a fluid negative word-spacing */
.mark .sub{font-family:var(--mono);font-size:clamp(10px,1.6vw + 5px,12px);letter-spacing:clamp(.04em,1.6vw - 5px,.16em);word-spacing:clamp(-7px,3vw - 16px,-3px);text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.mark .sub a{text-decoration:none;color:inherit;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .25s,color .25s}
.mark .sub a:hover{color:var(--ink);border-bottom-color:var(--sage)}
.mark .sub a.active{color:var(--brass)}

/* ----------  HEADER RIGHT  ---------- */
.header-right{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,22px);
  flex-shrink:0;
  align-self:center;
}
.header-cta-mobile{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--sage);
  padding-bottom:2px;
  white-space:nowrap;
  transition:border-color .25s,color .25s;
}
.header-cta-mobile:hover{border-color:var(--brass-text);color:var(--brass-text)}
@media (min-width:1080px){.header-cta-mobile{display:none}}
/* v6: hide mobile CTA at narrow viewports so the wordmark + service sub-line
   ("Bookkeeping · Tax · Accounting") stays on one row */
@media (max-width:580px){.header-cta-mobile{display:none}}

/* ----------  STICKY SIDE NAV (desktop)  ---------- */
.sticky-nav{
  position:fixed;
  right:clamp(20px,2.5vw,40px);
  top:clamp(14px,1.8vw,22px);
  z-index:8;
  display:none;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  opacity:0;
}
@keyframes stickyFadeIn{to{opacity:1}}
@media (min-width:1080px){
  .sticky-nav{display:flex;animation:stickyFadeIn .6s ease .3s both}
}
.sticky-link{
  font-family:var(--mono);font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;padding-bottom:2px;
  transition:border-color .25s,color .25s;
}
.sticky-link.primary{color:var(--brass);border-bottom:1px solid rgba(168,129,47,.35);padding-bottom:3px}
.sticky-link.secondary{color:var(--ink-soft);border-bottom:1px solid transparent}
.sticky-link.primary:hover{border-color:var(--brass-text);color:var(--brass-text)}
.sticky-link.secondary:hover{border-color:var(--sage);color:var(--ink)}
.sticky-link.active{color:var(--brass);border-bottom-color:transparent}
.sticky-link.secondary.over-band{color:var(--sage-soft);border-bottom-color:transparent}
.sticky-link.secondary.over-band:hover{color:var(--paper);border-bottom-color:var(--sage-soft)}
.sticky-link.active.over-band{color:#d4aa56;border-bottom-color:transparent}
.sticky-link.login{color:var(--ink-soft);border-bottom:1px solid transparent}
.sticky-link.login:hover{border-color:var(--sage);color:var(--ink)}
.sticky-link.login + .sticky-link.secondary{margin-top:clamp(16px,2.5vh,28px)}
/* breathing room before the in-page section anchors (stickyDetail / stickyMore) */
.sticky-link.section-gap{margin-top:clamp(10px,1.6vh,18px)}
.sticky-link.login.active{color:var(--brass);border-bottom-color:transparent}
.sticky-link.section-active{color:var(--brass);border-bottom-color:transparent}
.sticky-link.section-active:hover{color:var(--brass);border-bottom-color:var(--sage)}
.sticky-link.section-active.over-band{color:#d4aa56}
.sticky-link.section-active.over-band:hover{color:#d4aa56;border-bottom-color:var(--sage-soft)}
/* v5: cross-page indicator */
.sticky-link.cross-page::before{
  content:"\2190";
  display:inline-block;
  margin-right:5px;
  opacity:.38;
  transition:opacity .2s;
}
.sticky-link.cross-page:hover::before{opacity:.72}

.sticky-subs{
  display:none;flex-direction:column;align-items:flex-end;
  gap:4px;position:relative;padding-right:10px;margin-top:-2px;
}
@keyframes subs-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes subs-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-5px)}}
.sticky-subs.visible{display:flex;animation:subs-in .2s ease both}
.sticky-subs.visible.subs-hiding{animation:subs-out .2s ease both}
.sticky-subs::after{
  content:"";position:absolute;right:0;top:-8px;bottom:10px;width:1px;background:var(--sage);
}
.sticky-sub{
  position:relative;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);white-space:nowrap;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.sticky-sub::after{
  content:"";position:absolute;right:-10px;top:calc(50% - 0.5px);width:7px;height:1px;background:var(--sage);
}
.sticky-sub:hover{color:var(--ink);border-bottom-color:var(--sage)}
.sticky-sub.active{color:var(--brass);border-bottom-color:transparent}
.sticky-sub.active:hover{border-bottom-color:var(--sage)}
.sticky-subs.over-band::after,
.sticky-subs.over-band .sticky-sub::after{background:rgba(174,183,166,.45)}
.sticky-subs.over-band .sticky-sub{color:rgba(201,205,191,.7)}
.sticky-subs.over-band .sticky-sub:hover{color:var(--paper);border-bottom-color:rgba(174,183,166,.5)}
.sticky-subs.over-band .sticky-sub.active{color:#d4aa56;border-bottom-color:transparent}
.sticky-subs.over-band .sticky-sub.active:hover{border-bottom-color:rgba(174,183,166,.5)}

/* ----------  HAMBURGER BUTTON  ---------- */
.ham-btn{
  background:none;border:none;cursor:pointer;
  padding:10px;margin:-10px;
  display:flex;flex-direction:row;align-items:center;gap:8px;
  flex-shrink:0;
}
.ham-icon{display:flex;flex-direction:column;justify-content:center;gap:5.5px}
.ham-icon span{display:block;width:22px;height:1.5px;background:var(--ink)}
/* font-size tracks the sub-line so "Menu" and the wordmark sub-line stay consistent
   as they shrink together on narrow viewports */
.ham-label{
  font-family:var(--mono);font-size:clamp(10px,1.6vw + 5px,12px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);line-height:1;user-select:none;
}
@media (min-width:1080px){.ham-btn{display:none}}

/* ----------  HAMBURGER MENU  ---------- */
.ham-menu{
  display:none;position:fixed;inset:0;z-index:20;
  background:var(--paper);overflow-y:auto;opacity:0;
  pointer-events:none;transition:opacity .22s ease;
}
.ham-menu.open{opacity:1;pointer-events:auto}
@media (max-width:1079px){.ham-menu{display:flex;flex-direction:column}}

.ham-inner{
  flex:1;position:relative;display:flex;flex-direction:column;
  margin-left:var(--gutter);background:var(--paper);
  padding:clamp(14px,1.8vw,22px) clamp(20px,5vw,48px) clamp(40px,6vh,64px) var(--colpad);
}
.ham-inner::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--sage);pointer-events:none;
}
.ham-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(32px,4vh,48px)}
.ham-inner .mark{padding-left:0}

.ham-close{
  background:none;border:none;cursor:pointer;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  position:relative;margin:-8px;padding:0;flex-shrink:0;
}
.ham-close span{display:block;position:absolute;width:20px;height:1.5px;background:var(--ink)}
.ham-close span:nth-child(1){transform:rotate(45deg)}
.ham-close span:nth-child(2){transform:rotate(-45deg)}

.ham-cta{
  display:inline-flex;align-items:center;gap:14px;align-self:flex-start;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--paper);background:var(--brass-text);
  padding:15px 24px;border-radius:2px;border:1px solid var(--brass-text);
  transition:background .25s,transform .25s;
}
.ham-cta:hover{background:var(--brass-dark);border-color:var(--brass-dark);transform:translateY(-1px)}

.ham-nav{margin-top:clamp(28px,4vh,42px);display:flex;flex-direction:column}
/* v7: bottom border + margin separates the service sub-group from the main nav items */
.ham-group{
  display:flex;flex-direction:column;
  border-bottom:1px solid var(--sage);
  margin-bottom:clamp(4px,.8vh,8px);
}
.ham-item{
  display:block;position:relative;font-family:var(--display);
  font-size:clamp(24px,4.5vw,30px);line-height:1.1;text-decoration:none;
  color:var(--ink);padding:clamp(11px,1.6vh,16px) 0;transition:color .25s;
}
.ham-item:hover{color:var(--brass)}
.ham-item.active{color:var(--brass)}
.ham-item.active::before,.ham-item.section-active::before{
  content:"";position:absolute;left:calc(-1 * var(--colpad));top:50%;
  width:7px;height:7px;margin-left:-3.5px;margin-top:-3.5px;
  border-radius:50%;background:var(--brass);
}
.ham-item.section-active{color:var(--brass)}
/* v7: sub-links in mono to match desktop sticky-subs taxonomy */
.ham-sub{
  display:block;position:relative;font-family:var(--mono);
  font-size:clamp(12px,1.8vw,14px);letter-spacing:.12em;text-transform:uppercase;line-height:1.5;
  text-decoration:none;color:var(--ink-soft);
  padding:clamp(10px,1.4vh,14px) 0 clamp(10px,1.4vh,14px) clamp(16px,2.5vw,26px);
  transition:color .25s;
}
.ham-sub:last-child{padding-bottom:clamp(16px,2.2vh,22px)}
.ham-sub:hover{color:var(--brass)}
.ham-sub.active{color:var(--brass)}
.ham-sub.active::before{
  content:"";position:absolute;left:calc(-1 * var(--colpad));top:50%;
  width:6px;height:6px;margin-left:-3px;margin-top:-3px;border-radius:50%;background:var(--brass);
}

.ham-foot{margin-top:auto;padding-top:clamp(24px,3.5vh,40px);border-top:1px solid var(--sage)}
.ham-login{
  display:block;position:relative;font-family:var(--display);
  font-size:clamp(22px,3.8vw,28px);line-height:1.1;text-decoration:none;
  color:var(--ink-soft);padding-top:clamp(20px,2.8vh,30px);transition:color .25s;
}
.ham-login:hover{color:var(--brass)}
.ham-login.active{color:var(--brass)}
.ham-login.active::before{
  content:"";position:absolute;
  left:calc(-1 * var(--colpad));top:calc(.55em + clamp(20px,2.8vh,30px));
  width:6px;height:6px;margin-left:-3px;margin-top:-3px;border-radius:50%;background:var(--brass);
}

/* ----------  CLIENT PORTAL BUTTONS  ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.btn-row .btn{margin-top:0}

/* ----------  HERO  ---------- */
.hero{padding-top:clamp(28px,5vh,70px)}
.hero h1{max-width:13ch}
.line-break{display:block}
.hero .stamp{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:38px;display:flex;align-items:center;gap:14px;
}
@media (max-width:480px){.hero .stamp{margin-bottom:22px}}
.hero .stamp::before{content:"";width:34px;height:1px;background:var(--brass);flex-shrink:0}
/* hide "Napa Valley, California" (and its · separator) at the same breakpoint
   where the header "Book a Call" drops, leaving only "Since 2017" in the stamp */
@media (max-width:580px){
  .stamp-loc,.stamp-sep{display:none}
}

/* ----------  PULL QUOTE SECTION  ---------- */
.section-pull{
  background:var(--paper-2);
  padding-block:clamp(48px,7vh,88px);
}
.pull-quote-wrap blockquote{
  font-family:var(--display);
  font-size:clamp(21px,2.5vw,30px);
  line-height:1.3;
  max-width:30ch;
  color:var(--ink);
  border-left:2px solid var(--brass);
  padding-left:clamp(16px,2.5vw,24px);
}
.pull-quote-wrap .cite{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:18px;
  padding-left:clamp(16px,2.5vw,24px);
}

/* ----------  BUTTON  ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  text-decoration:none;color:var(--paper);background:var(--brass-text);
  padding:17px 26px;border-radius:2px;margin-top:40px;
  transition:background .25s,transform .25s;border:1px solid var(--brass-text);
}
.btn:hover{background:var(--brass-dark);border-color:var(--brass-dark);transform:translateY(-1px)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}
/* v8: extract SVG icon sizing from clients.html inline styles */
.btn svg{flex-shrink:0;margin-left:2px}
/* Loading state: a spinning ring replaces the arrow while the form posts.
   The button keeps its width steady so the layout doesn't jump. */
.btn.is-loading{cursor:progress}
.btn.is-loading:hover{transform:none;background:var(--brass-text);border-color:var(--brass-text)}
.btn-spinner{
  display:inline-block;width:14px;height:14px;flex-shrink:0;
  border:2px solid color-mix(in srgb,var(--paper) 35%,transparent);
  border-top-color:var(--paper);border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ----------  SERVICES  ---------- */
.services{margin-top:54px}
/* subsection: a modest visual break within a section when the topic shifts
   (e.g. business → individuals under WHO and COST, and the prospect note on the
   client login page) — a hairline plus a small gap, nothing more */
.subsection{margin-top:clamp(22px,2.6vh,30px);padding-top:clamp(18px,2vh,24px);border-top:1px solid var(--sage)}
/* .note: quiet subtext that shouldn't pull the eye (prospect aside on clients page) */
.note{font-size:.9em;color:var(--ink-soft);max-width:34em}
.svc{padding:38px 0;border-top:1px solid var(--sage)}
.svc:first-child{padding-top:8px;border-top:none}
.svc:last-child{padding-bottom:8px}
.svc-head{display:flex;align-items:baseline;gap:clamp(14px,2.5vw,24px)}
.svc-head h3{white-space:nowrap}
.svc-head .leader{flex:1;border-bottom:1px dotted var(--sage);transform:translateY(-7px);min-width:30px}
.svc-head .cad{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.svc p{margin-top:18px;max-width:38em}
@media (max-width:480px){.svc-head{flex-wrap:wrap;gap:10px}.svc-head h3{flex-basis:100%}}
/* v9: increased tap target via top padding; arrow span enables translateX hover animation.
   bottom padding kept tight (2px) so the hover underline hugs the text instead of floating below it */
.svc-learn{
  display:inline-block;margin-top:4px;padding:10px 0 2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--brass-text);border-bottom:1px solid transparent;
  transition:border-color .25s,color .25s;
}
.svc-learn:hover{border-color:var(--brass-text);color:var(--brass-dark)}
.svc-learn .arrow{transition:transform .25s;display:inline-block}
.svc-learn:hover .arrow{transform:translateX(3px)}

/* anchor graphic: nested topographic contours that climb up-and-right (a
   growth read), pinned to the bottom of the services section as a deliberate
   pause. Purely decorative (aria-hidden); self-clips via the nested SVG, so the
   section keeps no overflow:hidden — that would clip the desktop .tick in the
   gutter. Height tracks viewport WIDTH (the art is a ~4:1 landscape stretched
   with preserveAspectRatio="none") so it stays a low band on narrow screens. */
#services{position:relative;--topo-h:clamp(92px,20vw,280px);padding-bottom:var(--topo-h)}
#services .col{z-index:1}                  /* copy stays above the contour art */
.topo{
  position:absolute;left:0;right:0;bottom:0;
  height:var(--topo-h);
  pointer-events:none;z-index:0;
  -webkit-user-select:none;user-select:none;
}
.topo svg{position:absolute;inset:0;width:100%;height:100%}
.topo .drift{animation:topo-drift 14s ease-in-out infinite}
@keyframes topo-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.topo .drift{animation:none}}

/* ----------  RHYTHM (how we work / how it works / what we help with)  ---------- */
.rhythm{display:grid;grid-template-columns:max-content 1fr;gap:0;margin-top:48px;border-top:1px solid var(--sage)}
.rhythm > div{
  grid-column:1/-1;padding:30px 0;border-bottom:1px solid var(--sage);display:grid;
  grid-template-columns:subgrid;column-gap:clamp(18px,3vw,40px);align-items:start;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1);
}
.rhythm > div.in{opacity:1;transform:none}
/* parent rhythm container becomes visible immediately — children handle the stagger */
.rhythm.reveal{opacity:1!important;transform:none!important;transition:none!important}
.rhythm .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);padding-top:5px;white-space:nowrap;min-width:11ch}
.rhythm h3{margin-bottom:8px}
.rhythm p{color:var(--ink-muted);max-width:42em}
@media (max-width:540px){.rhythm{grid-template-columns:1fr}.rhythm > div{grid-template-columns:1fr;gap:10px}}

.band{background:var(--pine);color:var(--paper)}
.band .tick{color:var(--sage-soft)}
@media (min-width:1240px){.band .tick{color:var(--ink-soft)}}
.band h2,.band h3{color:var(--paper)}
.band .lede{color:#D6D9CC}
.band .rhythm{border-top-color:rgba(237,234,225,.28)}
.band .rhythm > div{border-bottom-color:rgba(237,234,225,.28)}
.band .rhythm .k{color:var(--sage-soft)}
.band .rhythm p{color:#C2C7B8}
/* v6: semantic class for band section footnotes */
.band-note{margin-top:2.2em;color:var(--sage-soft)}

/* ----------  PEOPLE  ---------- */
.staff-track-outer{
  position:relative;margin-top:46px;
  margin-right:calc(-1 * clamp(20px,5vw,40px));
}
.staff-track-outer::after{
  content:"";position:absolute;top:0;right:0;bottom:12px;
  width:clamp(40px,6vw,72px);
  background:linear-gradient(to right,transparent,var(--paper));
  pointer-events:none;z-index:1;
  opacity:1;transition:opacity .3s;
}
.staff-track-outer.at-end::after{opacity:0}
.staff-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:12px;
  padding-right:clamp(40px,6vw,72px);
  cursor:grab;
}
.staff-track.dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.staff-track::-webkit-scrollbar{display:none}
.staff-track:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.staff-card{
  flex:0 0 clamp(168px,26vw,206px);scroll-snap-align:start;
  border-top:1px solid var(--sage);padding-top:22px;
}
.staff-card .ph{
  aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--sage);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:clamp(38px,5vw,52px);letter-spacing:.04em;
  color:var(--pine);margin-bottom:16px;text-align:center;padding:18px;
  position:relative;overflow:hidden;
}
/* v4: brass underline anchors the monogram so the placeholder reads intentional, not unbuilt */
.staff-card .ph::after{
  content:"";position:absolute;left:50%;bottom:20%;transform:translateX(-50%);
  width:26px;height:2px;background:var(--brass);
}
.staff-card .photo{
  aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;border:1px solid var(--sage);border-radius:2px;
  margin-bottom:16px;display:block;
}
.staff-card h3{font-size:23px}
.staff-card .role{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);margin-top:6px}

/* v11: closing end-cap — deliberately frameless so it reads as "end of list", not person #5 */
.staff-endcap{
  flex:0 0 clamp(168px,26vw,206px);scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  /* match the portrait's aspect box so the text sits where a face would, not floating */
  min-height:0;padding:22px 0;text-decoration:none;
}
.staff-endcap .endcap-lead{
  font-family:var(--display);font-size:clamp(24px,3vw,32px);line-height:1.05;color:var(--pine);
}
.staff-endcap .endcap-cta{
  align-self:flex-start;width:fit-content;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.staff-endcap .arrow{display:inline-block;transition:transform .25s;color:var(--brass)}
.staff-endcap .endcap-cta:hover{color:var(--brass)}
.staff-endcap .endcap-cta:hover .arrow{transform:translateX(4px)}
.staff-endcap .endcap-cta:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:2px}

.track-hint{
  display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.55;margin-top:14px;
  text-align:right;padding-right:clamp(20px,3vw,36px);
}
.track-hint .nudge{display:inline-block;animation:hint-nudge 1.6s ease-in-out infinite}
.hint-touch{display:none}
/* v8: make the carousel's scrollability obvious on phones so the team isn't missed */
@media (max-width:767px){
  .track-hint{opacity:.85;color:var(--pine)}
  .hint-touch{display:inline}
  .hint-pointer{display:none}
}
@keyframes hint-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.track-hint .nudge{animation:none}}

/* ----------  TESTIMONIALS  ---------- */
.quotes{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--sage)}
.quote{padding:34px 0;border-bottom:1px solid var(--sage)}
.quote blockquote{font-family:var(--display);font-size:clamp(21px,2.5vw,30px);line-height:1.3;max-width:24ch}
.quote .cite{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:18px}
.placeholder{opacity:.62}

.embed-slot{margin-top:40px;min-height:320px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--sage);border-radius:2px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:24px}

/* ----------  FAQ (collapsible, call page)  ---------- */
.faq{margin-top:36px;max-width:var(--measure)}
.faq-item{border-top:1px solid var(--sage)}
.faq-item:last-child{border-bottom:1px solid var(--sage)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 36px 22px 0;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{display:inline;font-size:19px}
/* +/− toggle indicator on the right */
.faq-item summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:20px;line-height:1;color:var(--brass);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.faq-item p{color:var(--ink-soft);max-width:40em;margin:0 0 22px;padding-left:0}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}}

/* ----------  CLOSING CTA  ---------- */
.close{padding-bottom:clamp(90px,14vh,170px)}
.close h2{max-width:16ch}

/* ----------  FOOTER  ---------- */
footer{padding:22px clamp(20px,5vw,48px) 26px var(--gutter);position:relative;z-index:2}
.foot-inner{padding-left:var(--colpad);display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.foot-inner .fname{font-family:var(--display);font-size:clamp(20px,2.1vw,25px);letter-spacing:.01em;text-transform:none;color:var(--ink);text-decoration:none}
.foot-inner .fname:hover{text-decoration:none;border-bottom-color:transparent}
.foot-inner a{text-decoration:none;color:inherit;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .25s,color .25s}
.foot-inner a:hover{color:var(--ink);border-bottom-color:var(--sage)}
.foot-inner a.active{color:var(--brass)}

/* ----------  REVEAL MOTION  ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rhythm > div{opacity:1;transform:none;transition:none}
  .ledger.draw{animation:none}
  .marker{display:none}
  .btn,.btn .arrow,.header-cta-mobile{transition:none}
  .btn-spinner{animation-duration:1.6s}
  .sticky-nav{animation:none;opacity:1}
  .sticky-subs.visible,.sticky-subs.visible.subs-hiding{animation:none}
  header{transition:none}
  .ham-menu{transition:none}
  .ham-cta,.ham-item,.ham-sub,.ham-login{transition:none}
  .sticky-link.cross-page::before{transition:none}
}

/* ----------  HIGH CONTRAST  ---------- */
/* v9: prefers-contrast:more — raises soft token contrast and divider visibility */
@media (prefers-contrast:more){
  :root{
    /* Raise ink-soft from ~5.5:1 to ~9:1 on --paper */
    --ink-soft:#2C3830;
    /* Raise ink-muted from ~6.5:1 to ~10:1 on --paper */
    --ink-muted:#252E2A;
    /* Raise sage dividers from 1.7:1 to ~3.3:1 on --paper (WCAG 1.4.11) */
    --sage:#7A8578;
    /* Raise brass text from 3.3:1 to 5.2:1 on --paper (nav active states) */
    --brass:#7A5E22;
  }
  /* Placeholder testimonials: show at full opacity */
  .placeholder{opacity:1}
  /* Scroll hint: raise from .55 to .8 opacity */
  .track-hint{opacity:.8}
}

/* ----------  INTAKE FORM  ---------- */
.form-stack{display:flex;flex-direction:column;gap:clamp(26px,3.5vh,34px);margin-top:40px}
.field{display:flex;flex-direction:column;gap:8px}
.field > label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* Every input in a field except the radios, which style themselves below.
   Listing types by name meant each new kind of field needed a matching edit
   here, and an unstyled input falls back to the browser's own boxed look. */
.field input:not([type=radio]),
.field textarea{
  background:transparent;border:none;border-bottom:1px solid var(--sage);
  padding:10px 0 12px;font-family:var(--body);
  font-size:clamp(16px,1.0vw + 13px,18px);
  color:var(--ink);width:100%;border-radius:0;
  -webkit-appearance:none;appearance:none;transition:border-color .25s;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass)}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--sage)}

/* segmented control: Individual / Business */
.seg{display:flex;border:1px solid var(--sage);border-radius:2px;overflow:hidden;width:fit-content;margin-top:4px}
.seg input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.seg label{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:11px 26px;cursor:pointer;
  border-right:1px solid var(--sage);transition:background .2s,color .2s;user-select:none;
}
.seg label:last-of-type{border-right:none}
.seg input[type=radio]:checked + label{background:var(--pine);color:var(--paper)}
.seg input[type=radio]:focus-visible + label{outline:2px solid var(--brass);outline-offset:-2px;border-radius:1px}

/* entity type radio list */
.radio-list{display:flex;flex-direction:column;margin-top:4px;border-top:1px solid var(--sage)}
.radio-list label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;padding:10px 0;
  border-bottom:1px solid var(--sage);transition:color .2s;user-select:none;
}
.radio-list label:hover{color:var(--ink)}
.radio-list input[type=radio]{
  width:15px;height:15px;border:1px solid var(--sage);border-radius:50%;
  -webkit-appearance:none;appearance:none;flex-shrink:0;cursor:pointer;
  position:relative;transition:border-color .2s,background .2s;
}
.radio-list input[type=radio]:checked{border-color:var(--brass);background:var(--brass)}
.radio-list input[type=radio]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--paper)}
.radio-list input[type=radio]:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

#entity-field{display:none}
#entity-field.visible{display:flex}

.form-footer{position:relative}
.form-error{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:#7A3030;position:absolute;top:calc(100% + 8px);left:0;width:100%}
.form-error a{color:inherit;text-decoration:underline}
.field input.field-invalid,.field textarea.field-invalid{border-bottom-color:#7A3030}
.seg.field-invalid{border-color:#7A3030}
.field-hint{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--brass-text);margin-top:6px}
.hint-fix{background:none;border:none;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;padding:0}
button.btn{cursor:pointer;-webkit-appearance:none;appearance:none;margin-top:0}
button.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ----------  PRINT  ---------- */
/* v8: print styles ensure clean, ink-efficient output for clients who print service pages */
@media print{
  /* Remove navigation, decorative, and interactive chrome */
  .ledger,.marker,.sticky-nav,.ham-btn,.ham-menu,
  .skip-link,.header-cta-mobile,.track-hint,
  #intake-form{display:none!important}

  /* Show all reveal content immediately */
  .reveal,.rhythm > div{
    opacity:1!important;transform:none!important;transition:none!important
  }

  /* Freeze header in place */
  header{position:static;transition:none}
  header.header-hidden{transform:none}

  /* Remove CTA buttons — they require screen interaction */
  .btn{display:none}

  /* Dark band sections: remove pine background, revert text to dark */
  .band{
    background:transparent;
    color:var(--ink);
  }
  .band h2,.band h3{color:var(--ink)}
  .band .lede{color:var(--ink-soft)}
  .band .tick{color:var(--ink-soft)}
  .band .rhythm{border-top-color:var(--sage)}
  .band .rhythm > div{border-bottom-color:var(--sage)}
  .band .rhythm .k{color:var(--ink-soft)}
  .band .rhythm p{color:var(--ink-muted)}
  .band-note{color:var(--ink-soft)}

  /* Pull quote: remove tinted background */
  .section-pull{background:transparent;border-top:1px solid var(--sage)}

  /* Staff track: unwrap for print layout */
  .staff-track{overflow:visible;flex-wrap:wrap;gap:16px;padding-right:0}
  .staff-track-outer{margin-right:0}
  .staff-track-outer::after{display:none}

  /* Testimonial placeholders: show at full opacity in print */
  .placeholder{opacity:1}

  /* Links: remove hover underlines */
  .foot-inner a,.mark .sub a{border-bottom:none}

  /* Avoid breaking sections across page breaks */
  section{break-inside:avoid}
  .svc,.quote,.rhythm > div{break-inside:avoid}
}