/* Fonts are self-hosted in /fonts (SIL Open Font License), so no visitor data goes to Google.
   Rules are exactly as Google Fonts serves them; unicode-range means each browser only downloads the subsets it needs. */
/* Karla normal — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/karla-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla normal — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/karla-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla normal — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/karla-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla normal — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/karla-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla normal — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/karla-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla normal — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/karla-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Karla normal — latin-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/karla-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Karla normal — latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/karla-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Libre Baskerville italic — latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/libre-baskerville-italic-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Libre Baskerville italic — latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/libre-baskerville-italic-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Libre Baskerville normal — latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libre-baskerville-normal-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Libre Baskerville normal — latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/libre-baskerville-normal-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Parisienne normal — latin-ext */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/parisienne-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Parisienne normal — latin */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/parisienne-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --paper: #FFFFFF;
  --ink: #141414;
  --ink-soft: #4A4A4A;
  --green: #5FA980;
  --green-deep: #367556; /* 5.5:1 on white, 4.9:1 on --green-pale */
  --green-darker: #2A5C43;
  --green-pale: #EAF6EF;
  --card: #FFFFFF;
  --border: rgba(20,20,20,0.13);
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; /* same width on every page, scrollbar or not */ }
body{
  margin:0;
  font-family:var(--sans);
  background-color:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
picture{ display:block; }
a{ color:inherit; }
h1,h2,h3{
  font-family:var(--serif);
  font-weight:700;
  color:var(--ink);
  margin:0 0 0.5em;
  line-height:1.16;
}
h1{ font-size:clamp(2.3rem, 4.6vw, 3.4rem); letter-spacing:-0.01em; }
h2{ font-size:clamp(1.7rem, 3vw, 2.2rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1.1em; color:var(--ink-soft); max-width:62ch; }
.container{ max-width:1080px; margin:0 auto; padding:0 32px; }

.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.8rem;
  color:var(--green-deep);
  letter-spacing:0.03em;
}
.eyebrow-lg{ font-size:1.2rem; font-weight:700; }

/* masthead — crisp white, black hairline */
.site-header{
  position:relative; /* anchors the mobile dropdown nav */
  z-index:50;        /* keeps the open dropdown above page photos */
  background:var(--paper);
  border-bottom:3px solid var(--green);
}
.header-inner{
  max-width:1080px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
}
.wordmark{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  text-decoration:none; color:var(--ink);
  font-family:'Parisienne', var(--serif), cursive; font-size:2.1rem; font-weight:400;
  letter-spacing:0.01em; line-height:1.1;
  margin-left:-12px;
}
.wordmark-mark{ width:46px; height:46px; flex-shrink:0; }
.wordmark-text{ display:flex; flex-direction:column; white-space:nowrap; }   /* the logo never wraps onto two lines */
.wordmark-tagline{
  font-family:var(--sans); font-weight:500; font-size:0.88rem; color:var(--green-deep);
  margin-top:3px; letter-spacing:0.02em;
}
nav.main-nav{ display:flex; gap:0; align-items:center; }
nav.main-nav a{
  text-decoration:none;
  font-size:0.92rem;
  font-weight:500;
  color:var(--ink-soft);
  padding:9px 10px;
  transition:color .15s ease;
  border-bottom:2px solid transparent;
  white-space:nowrap;   /* #1: a menu item never breaks onto two lines */
}
nav.main-nav a:hover{ color:var(--ink); }
nav.main-nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--green); }
nav.main-nav a.nav-portal-link{
  font-weight:600;
  font-size:0.83rem;
  border:1px solid var(--ink);
  padding:7px 12px;
  margin-left:8px;
  color:var(--ink);
}
nav.main-nav a.nav-portal-link:hover{ background:var(--green-pale); border-color:var(--green-deep); color:var(--green-deep); }
/* "Contact Me" stands out as an outlined button */
nav.main-nav a.nav-cta{
  margin-left:4px; padding:8px 14px;
  border:1.5px solid var(--green-deep); border-radius:2px;
  color:var(--green-deep); font-weight:600;
  transition:background .15s ease, color .15s ease;
}
nav.main-nav a.nav-cta:hover{ background:var(--green-pale); color:var(--green-darker); }
nav.main-nav a.nav-cta[aria-current="page"]{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
/* ☰ menu button: three clean rounded lines (no box), a 44px tap area, and it turns into an ✕ when open */
.nav-toggle{
  display:none; position:relative; flex-shrink:0;
  width:44px; height:44px; margin-right:-10px; padding:0;
  background:none; border:0; border-radius:8px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:focus-visible{ outline:2px solid var(--green-deep); outline-offset:2px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; display:block; width:24px; height:2px; border-radius:2px;
  background:var(--ink); transition:transform .2s ease, background .2s ease;
}
.nav-toggle span{ left:10px; top:21px; }
.nav-toggle span::before{ left:0; top:-7px; }
.nav-toggle span::after{ left:0; top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* #2: medium-width windows — slightly smaller logo and tighter menu so it all fits on one row */
@media (max-width: 1180px){
  .header-inner{ padding-left:24px; padding-right:24px; gap:16px; }
  .wordmark{ font-size:1.95rem; gap:7px; margin-left:-6px; }
  .wordmark-mark{ width:42px; height:42px; }
  .wordmark-tagline{ font-size:0.8rem; }
  nav.main-nav a{ padding:9px 8px; font-size:0.9rem; }
  nav.main-nav a.nav-cta{ margin-left:6px; padding:8px 13px; }
}

/* #3: narrower windows get the ☰ menu button instead of squeezing six items in (was 820px) */
@media (max-width: 1040px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--ink);
    flex-direction:column; align-items:stretch; padding:8px 24px 18px;
    display:none;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ padding:12px 6px; border-bottom:1px solid var(--border); }
  .nav-toggle{ display:block; }
  nav.main-nav a.nav-portal-link{ margin-left:0; margin-top:8px; width:fit-content; border:1px solid var(--ink); }
  nav.main-nav a.nav-cta{ margin:10px 0 0; width:fit-content; padding:10px 18px; border:1.5px solid var(--green-deep); }
}

/* footer — plain white, black hairline */
.site-footer{
  background:var(--paper);
  color:var(--ink);
  margin-top:20px;
  padding:48px 0 40px;
  border-top:3px solid var(--green);
}
.footer-inner{
  max-width:1080px; margin:0 auto; padding:0 32px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px;
  font-size:0.92rem;
}
.footer-inner a{ text-decoration:underline; text-underline-offset:3px; color:var(--green-deep); }
.footer-note{ max-width:440px; color:var(--ink-soft); }
.footer-license{ display:block; margin-top:10px; font-size:0.85rem; }
.footer-links{ display:flex; flex-direction:column; gap:8px; }
.footer-nav{
  max-width:1080px; margin:28px auto 0; padding:18px 32px 0;
  border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:8px 26px;
}
.footer-nav a{
  font-size:0.9rem; font-weight:600; color:var(--ink-soft); text-decoration:none;
}
.footer-nav a:hover{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{
  max-width:1080px; margin:18px auto 0; padding:18px 32px 0;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 28px;
  font-size:0.85rem; color:var(--ink-soft);
}
.footer-bottom p{ margin:0; max-width:none; }
.footer-bottom a{ color:var(--green-deep); font-weight:600; }

/* buttons — black/white with a green CTA accent */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:0.94rem;
  padding:13px 24px; border-radius:2px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--green-deep); color:#fff;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
  padding-right:30px;
}
.btn-primary:hover{ background:var(--green-darker); }
/* clip-path hides outlines, so drop the notch while focused */
.btn-primary:focus-visible{ clip-path:none; outline:2px solid var(--ink); outline-offset:2px; }

.text-link{ color:var(--green-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.btn-outline{ border:1px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--green-pale); border-color:var(--green-deep); color:var(--green-deep); }

/* hero */
.hero{ padding:64px 0 0; position:relative; }
.hero-inner{ max-width:680px; }
.hero p.lede{ font-size:1.14rem; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:20px; }
/* "Accepting New Clients" pill on the home page */
.status-badge{
  display:flex; width:fit-content; align-items:center; gap:9px;
  margin:0 0 0 auto; padding:6px 14px 6px 12px; align-self:center;   /* auto pushes it to the right margin */
  border:1px solid var(--green); border-radius:999px; background:var(--green-pale);
  font-size:0.88rem; font-weight:600; color:var(--green-darker);
}
a.status-badge{ text-decoration:none; transition:background .15s ease, border-color .15s ease; }
a.status-badge:hover, a.status-badge:focus-visible{ background:#D6EEDF; border-color:var(--green-deep); }
.status-badge[hidden]{ display:none; }   /* so the "hidden" switch wins over inline-flex */
.status-dot{
  width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(95,169,128,0.25);
}
.hero-facts{ margin:18px 0 0; font-size:0.95rem; font-weight:600; color:var(--ink-soft); }
.hero.page-hero{ padding-bottom:0; }

/* inner pages: intro text on the left, photo on the right */
.page-hero-grid{
  display:grid; grid-template-columns:minmax(0, 1fr) 340px;
  gap:56px; align-items:center;
}
.page-photo, .photo-cta-photo{
  margin:0; overflow:hidden;
  border:3px solid var(--green); background:var(--green-pale);
}
.page-photo{ aspect-ratio:4/5; }
.page-photo picture, .photo-cta-photo picture{ height:100%; }
.page-photo img, .photo-cta-photo img{ width:100%; height:100%; object-fit:cover; }
/* FAQ: questions sit in the left column under the intro, photo stays at the top right */
.page-hero-top{ align-items:start; }
.page-hero-top .faq-list{ margin-top:28px; }
/* FAQ right column: photo + "Still have questions?" card */
.faq-help-card{
  margin-top:24px; padding:24px 24px 20px; background:var(--card);
  border:1px solid var(--border); border-top:5px solid var(--green); border-radius:4px;
  box-shadow:0 3px 8px rgba(95,169,128,0.25), 0 10px 26px rgba(95,169,128,0.28);
}
.faq-help-card h2{ font-size:1.3rem; margin-bottom:6px; }
.faq-help-card p{ font-size:0.95rem; margin-bottom:16px; }
.faq-help-card .faq-help-phone{ margin:14px 0 0; font-size:0.9rem; }
.page-hero-top .page-photo{ margin-top:123px; }
/* mirrored version (My Approach): photo on the left, text on the right */
.page-hero-flip{ grid-template-columns:340px minmax(0, 1fr); }
.page-hero-flip .page-photo{ order:-1; }
/* lines text up with the right-hand column of the flipped intro (photo 340px + 56px gap) */
.prose-offset{ margin-left:396px; }

/* home page: closing call to action with photo */
.photo-cta{ padding:24px 0 8px; }
.photo-cta-grid{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr);
  gap:56px; align-items:center;
}
.photo-cta-photo{ aspect-ratio:3/2; }
/* ===== tablets and phones (860px and narrower): stack the photo layouts ===== */
@media (max-width: 860px){
  .faq-side{ max-width:340px; }
  .page-hero-top .page-photo{ margin-top:8px; }   /* no extra drop */
  .prose-offset{ margin-left:0; }
  .page-hero-grid{ grid-template-columns:1fr; gap:28px; }
  .page-photo{ max-width:340px; }
  .page-hero-flip .page-photo{ order:0; }   /* text first, like every other page */
  .photo-cta-grid{ grid-template-columns:1fr; gap:28px; }
}

/* photo protection: no dragging, selecting, or long-press save menu (iOS); right-click is blocked in site.js */
img{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.hero.hero-full-photo{ padding-top:0; }
.hero-full-photo .container{ padding-top:40px; }
.hero-full-photo .hero-inner{ max-width:none; }   /* full width so the badge can reach the right margin */
.hero-full-photo .eyebrow,
.section-head .eyebrow{ font-size:1rem; }
.hero-photo-frame{
  position:relative;
  width:100%;
  margin-bottom:0;
  overflow:hidden;
}
/* cap height on wide screens so the CTAs stay near the fold */
.hero-photo-frame img{
  width:100%; height:auto; max-height:70vh;
  object-fit:cover; object-position:center 60%;
}
.hero-photo-frame::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:48%;
  background:linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.65) 55%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hero-photo-caption{
  position:absolute; left:0; right:0; bottom:22px; z-index:1;
  margin:0; padding:0 36px;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--ink);
  font-size:clamp(1.5rem, 3.6vw, 2.5rem);
  line-height:1.28;
}
@media (max-width: 600px){
  .hero-photo-caption{ bottom:14px; padding:0 20px; }
}

.focus-row{
  display:flex; flex-wrap:wrap; gap:12px;
}
.focus-chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 18px 10px 12px;
  border:1px solid var(--border);
  background:var(--card);
  text-decoration:none; color:var(--ink);
  font-size:0.92rem; font-weight:500;
  transition: border-color .15s ease, background .15s ease;
}
.focus-chip svg{ width:26px; height:26px; flex-shrink:0; }
.notfound-links{ display:flex; flex-wrap:wrap; gap:12px; }
.focus-chip:hover{ border-color:var(--green-deep); background:var(--green-pale); }

/* section */
section{ padding:32px 0; }
.section-head{ max-width:60ch; margin-bottom:38px; }
.section-head-tight{ margin-bottom:26px; }
.container-narrow{ max-width:720px; }

/* centered call-to-action block at the bottom of a page */
.cta-block{ text-align:center; padding-top:34px; padding-bottom:10px; }
.cta-block p{ max-width:50ch; margin:0 auto 20px; }
.cta-block .hero-actions{ justify-content:center; }
.cta-block-after-steps{ padding-top:10px; padding-bottom:30px; }
.cta-block-after-steps p{ max-width:none; }   /* lets the FAQ sentence sit on one line */
.section-band{
  /* fades in from white at the top and back out to white at the bottom */
  background: linear-gradient(to bottom, var(--paper) 0%, var(--green-pale) 10%, var(--green-pale) 90%, var(--paper) 100%);
  color: var(--ink);
  padding:60px 0;
  margin:8px 0 48px;
}
/* solid version with green rules (Services rates) */
.section-band.section-band-solid{
  background:var(--green-pale);
  border-top:3px solid var(--green);
  border-bottom:3px solid var(--green);
}
.section-band .pull-quote{ color:var(--ink); border-left-color:var(--green); }
.section-band a:not(.btn){ color:var(--green-deep); }

/* trail-legend list */
.legend-list{ display:flex; flex-direction:column; }
.legend-item{
  padding:22px 0 20px; position:relative;
  display:grid; grid-template-columns:44px minmax(0, 1fr); gap:20px; align-items:start;
}
.legend-icon{ width:44px; height:44px; margin-top:2px; }
/* 1px green dividers with a soft light-green glow (same green as the approach cards) */
.legend-item::before, .legend-item:last-child::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:var(--green);
  box-shadow:0 3px 10px rgba(95,169,128,0.45), 0 0 16px rgba(95,169,128,0.30);
}
.legend-item::before{ top:0; }
.legend-item:last-child::after{ bottom:0; }
.legend-item h3{ margin-bottom:6px; }
.legend-item p{ margin-bottom:0; }
.legend-item .legend-note{
  font-family:var(--sans); font-weight:600; font-size:0.8rem; color:var(--green-deep);
  display:block; margin-bottom:6px;
}

/* rates info */
.info-row{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.info-row:first-child{ padding-top:0; }
.info-row .label{ font-weight:600; min-width:150px; font-size:0.92rem; }
.info-row .value{ color:var(--ink-soft); font-size:0.92rem; }
.notice-box{
  border:1px solid var(--ink); border-left:8px solid var(--green);
  padding:18px 20px; font-size:0.9rem; margin-top:22px;
  background:var(--green-pale);
}
.section-band .notice-box{ background:var(--card); }
.rates-note{ margin-top:24px; }
.notice-box.rates-notice{ margin-top:28px; }

/* waypoints (getting started): "the journey path" —
   numbered green circles on a solid green path, each step in a glowing card, ending with the sprout */
.path-wrap{ position:relative; max-width:720px; }
.waypoint{
  display:grid; grid-template-columns:48px minmax(0, 1fr); gap:22px;
  padding:0 0 22px; position:relative;
}
.wp-marker{
  width:48px; height:48px; margin-top:14px; border-radius:50%;
  background:var(--green-deep); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:1.05rem;
  box-shadow:0 0 0 5px var(--paper), 0 0 0 6px rgba(95,169,128,0.35);   /* white ring, then a faint green edge */
  position:relative; z-index:2;
}
/* the path: runs from the bottom of each circle down to the next one */
.wp-line{
  position:absolute; left:22.5px; top:62px; bottom:-14px; width:3px;
  background:var(--green); border-radius:2px; z-index:1;
}
.wp-content{
  background:var(--card); border:1px solid var(--border); border-radius:4px;
  padding:20px 24px;
  box-shadow:0 3px 8px rgba(95,169,128,0.25), 0 10px 26px rgba(95,169,128,0.28);   /* same glow as the approach cards */
}
.wp-content h3{ margin-bottom:6px; }
.wp-content p{ margin-bottom:0; }
/* end of the path */
.waypoint-end{ padding-bottom:0; align-items:center; }
.wp-marker-end{ background:var(--green-pale); border:2px solid var(--green); }
.wp-marker-end svg{ width:30px; height:30px; }
.wp-end-text{
  margin:14px 0 0; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--green-deep);
}

/* faq list width */
.faq-list{ max-width:720px; }

/* My Approach page cards */
.approach-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;
  max-width:920px; margin-top:22px;
}
.approach-card{
  border:1px solid var(--border); border-top:5px solid var(--green);
  background:var(--card); padding:22px 24px;
  box-shadow:0 3px 8px rgba(95,169,128,0.25), 0 10px 26px rgba(95,169,128,0.28);   /* soft light-green glow (--green) */
}
.approach-card h3{ font-size:1.12rem; margin-bottom:8px; }
.approach-card p{ margin:0; font-size:0.96rem; }

/* credentials item that links to My Approach */
/* looks like the other items until hovered (or reached with the keyboard) */
.creds-list a{ color:inherit; text-decoration:none; }
.creds-list a:hover, .creds-list a:focus-visible{
  color:var(--green-darker); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}

/* long-form text pages (privacy policy, my approach) */
.prose{ max-width:720px; }
.prose h2{ font-size:1.35rem; margin:40px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose ul{ margin:0 0 1.1em; padding-left:20px; color:var(--ink-soft); }
.prose li{ margin-bottom:6px; }
.prose li::marker{ color:var(--green-deep); }

/* faq */
.faq-item{ border-bottom:1px solid var(--border); padding:22px 0; }
.faq-item summary{
  cursor:pointer; font-family:var(--serif); font-size:1.1rem; font-weight:700;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--sans); font-weight:500; font-size:1.4rem; color:var(--green-deep); flex-shrink:0;
  transition:transform .15s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-a{ margin-top:12px; max-width:66ch; }

/* contact */
/* contact form in a glowing card (same style as the approach and FAQ cards) */
.form-card{
  background:var(--card); border:0; border-top:2px solid var(--green);
  padding:28px 30px 30px;
}
/* contact page: two full-width bands, Direct Info on top, the form card below */
.contact-stack{ display:grid; gap:44px; }
.direct-info{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:22px 56px; align-items:start;
}
.direct-info .info-row .label{ min-width:100px; }   /* leaves room for the full email on one line */
.direct-info .next-steps{ margin-top:0; }
.direct-info .next-steps h3{ margin-top:2px; }
/* form fields side by side: Name | Email | Phone, then the rest full width */
.form-card form{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px 22px; }
.form-card form > :nth-child(n+4){ grid-column:1 / -1; }
.form-card form .btn{ justify-self:start; }
@media (max-width: 700px){
  .approach-grid{ grid-template-columns:1fr; }
  .direct-info{ grid-template-columns:minmax(0, 1fr); }
  .form-card form{ grid-template-columns:minmax(0, 1fr); }
}
/* softer crisis box on the contact page: green outline instead of black */
.contact-stack .notice-box{ border-color:var(--green); border-left-width:8px; margin-top:0; }
/* "What Happens Next": a mini version of the Getting Started path */
.next-steps{ margin-top:34px; }
.next-steps h3{ margin-bottom:16px; }
.next-steps ol{ list-style:none; margin:0; padding:0; }
.next-steps li{
  position:relative; display:flex; align-items:flex-start; gap:14px;
  padding:0 0 18px; color:var(--ink-soft); font-size:0.98rem; line-height:1.5;
}
.next-steps li:last-child{ padding-bottom:0; }
.next-steps li > span:last-child{ padding-top:4px; }
.ns-num{
  width:32px; height:32px; flex-shrink:0; border-radius:50%;
  background:var(--green-deep); color:#fff; font-weight:700; font-size:0.9rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px var(--paper); position:relative; z-index:1;
}
/* the green line joining the circles */
.next-steps li:not(:last-child)::before{
  content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--green);
}
.info-row .value{ overflow-wrap:anywhere; }
.footer-phone{ color:var(--ink-soft); }
/* ===== phones (480px and narrower) ===== */
@media (max-width: 480px){
  /* logo sized to the screen so the ☰ button always has room */
  .header-inner{ padding-left:18px; padding-right:18px; gap:10px; }
  .wordmark{ font-size:clamp(1.3rem, 6.4vw, 1.75rem); gap:6px; margin-left:-4px; }
  .wordmark-mark{ width:32px; height:32px; }
  .wordmark-tagline{ font-size:0.7rem; }
  /* "Areas I Work With": stack the topic buttons */
  .focus-row{ flex-direction:column; gap:10px; }
  .focus-chip{ width:100%; }
  .status-badge{ margin-left:0; }   /* wraps under the buttons on phones */
  .legend-item{ grid-template-columns:34px minmax(0, 1fr); gap:14px; }
  .legend-icon{ width:34px; height:34px; }
  .waypoint{ grid-template-columns:40px minmax(0, 1fr); gap:14px; }
  .wp-marker{ width:40px; height:40px; font-size:0.95rem; }
  .wp-line{ left:18.5px; top:54px; }
  .wp-content{ padding:16px 18px; }
  .form-card{ padding:22px 18px 24px; }
  .info-row .label{ min-width:96px; }
}
form{ display:flex; flex-direction:column; gap:16px; }
label{ font-size:0.85rem; font-weight:600; color:var(--ink); display:block; margin-bottom:6px; }
input, textarea, select{
  width:100%; font-family:var(--sans); font-size:0.95rem;
  padding:11px 13px; border-radius:2px; border:1px solid var(--border);
  background:var(--card); color:var(--ink);
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--green); outline-offset:1px; }
textarea{ resize:vertical; min-height:110px; }
input[aria-invalid="true"]{ border-color:#B3261E; }
input[aria-invalid="true"]:focus{ outline-color:#B3261E; }
.field-error{ margin:6px 0 0; font-size:0.85rem; font-weight:600; color:#B3261E; }
form .btn{ align-self:flex-start; }

/* required acknowledgement checkbox (insurance disclaimer) */
.consent{ border:0; padding:0; margin:4px 0 0; min-width:0; }
.consent legend{ padding:0; margin-bottom:8px; font-size:0.85rem; font-weight:600; color:var(--ink); }
.consent-required{ font-weight:500; color:var(--ink-soft); }
.check{
  display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer;
  font-size:0.95rem; font-weight:400; color:var(--ink-soft); line-height:1.5;
}
.check input{
  width:18px; height:18px; margin:2px 0 0; padding:0; flex-shrink:0;
  accent-color:var(--green-deep); cursor:pointer;
}
.form-success{ color:var(--green-deep); font-weight:600; font-size:0.9rem; }

/* about page specifics */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:start; }
@media (max-width: 800px){ .about-grid{ grid-template-columns:1fr; } }
.portrait-frame{
  aspect-ratio:4/5; border:3px solid var(--green); background:var(--green-pale);
  overflow:hidden;
}
.portrait-frame picture{ height:100%; }
.portrait-frame img{ width:100%; height:100%; object-fit:cover; }
.about-list{ list-style:none; padding:0; margin:0 0 1.3em; max-width:56ch; }
.about-list li{ padding:6px 0 6px 20px; position:relative; color:var(--ink-soft); font-size:0.98rem; }
.about-list li::before{ content:"—"; position:absolute; left:0; color:var(--green-deep); }

.creds-list{ list-style:none; padding:0; margin:22px 0; }
.creds-list li{
  padding:11px 0 11px 22px; border-bottom:1px solid var(--border); position:relative;
  font-family:var(--sans); font-size:0.86rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.09em; line-height:1.5;
  color:var(--green-deep);
}
.creds-list li::before{ content:"—"; position:absolute; left:0; color:var(--green-deep); }

.pull-quote{
  font-family:var(--serif); font-size:1.55rem; font-weight:400; font-style:italic;
  color:var(--ink);
  max-width:52ch; line-height:1.4; margin:44px 0;
  border-left:2px solid var(--green); padding-left:24px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:16px; top:16px; }

/* ===== laptops: short windows (under 800px tall, e.g. a 13" MacBook) get a more compact layout ===== */
@media (max-height: 800px){
  /* 1. smaller main headings (was up to 3.4rem / 54px) */
  h1{ font-size:clamp(2rem, 3.4vw, 2.55rem); }
  h2{ font-size:clamp(1.5rem, 2.4vw, 1.85rem); }
  .hero{ padding-top:40px; }
  /* 2. slimmer header */
  .header-inner{ padding-top:10px; padding-bottom:10px; }
  /* 3. shorter home page photo (was 70% of the window height) */
  .hero-photo-frame img{ max-height:55vh; }
  .hero-full-photo .container{ padding-top:26px; }
  .hero-photo-caption{ font-size:clamp(1.4rem, 3vw, 2.1rem); }
}
@media (max-height: 800px) and (min-width: 861px){
  /* 4. smaller inner-page photos (340px -> 270px wide), with the text columns re-aligned */
  .page-hero-grid{ grid-template-columns:minmax(0, 1fr) 270px; gap:48px; }
  .page-hero-flip{ grid-template-columns:270px minmax(0, 1fr); }
  .prose-offset{ margin-left:318px; }   /* 270px photo + 48px gap */
  .page-hero-top .page-photo{ margin-top:90px; }
}