/* uatree.com — shared stylesheet.
   Every page links this before its own <style> block, so anything here is the
   site's default and anything in a page's <style> is that page overriding it.

   WHY THIS EXISTS. Until 2026-08-05 there was no shared stylesheet: ~129KB of
   inline CSS across 12 pages, each with its own copy of the tokens, the header
   and the footer. They drifted. The header was 79px tall on the homepage and
   68px everywhere else, sat 24px from the left edge on four pages and 48px on
   seven, and on a 390px phone the homepage's "Text David" button was pushed
   clean off the right edge. Every nav click moved the header.

   THE RULE: chrome (tokens, type, header, footer, mobile bar) lives HERE and
   nowhere else. If a page needs the header different, the header is wrong. */

/* ---------- tokens ---------- */
:root{
  --charcoal:#2C2416;--charcoal-light:#4A3D28;--parchment:#E8DFC8;--parchment-dark:#DCD2B6;
  --bark:#181210;--tan:#A8865C;--lichen:#8A9A72;
  /* inks — the darker pairs are the AA-contrast versions for light sections */
  --tan-ink:#7A5C33;--tan-ink-deep:#6A4E2A;--lichen-ink:#52613D;--lichen-ink-deep:#455333;
  --ink-body:#4A3D28;--ink-soft:#3D3220;
  --moss:#43522F;--spring:#A9B978;--ember:#8F4520;--slate:#4A5560;--ice:#8FA3B0;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* the fallback matters: glyphs Josefin lacks (the → in every CTA) come from
     the NEXT family, and swapping it re-measures every shrink-to-fit button */
  --sans:'Josefin Sans',sans-serif;
  /* header height — the nav is fixed, so anything that must clear it offsets by
     this. Keep it equal to the rendered height of the nav below. */
  --nav-h:68px;
}

/* ---------- reset + base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--parchment);color:var(--charcoal);font-family:var(--sans);font-weight:300;font-size:19px;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");pointer-events:none;z-index:1000}

/* ---------- header ---------- */
/* font-weight and line-height are pinned: the header inherits from body, and a
   page that sets its own body type (the homepage runs 400/1.65) was silently
   making its header 6px taller and its links 4px wider than everyone else's. */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:300;line-height:normal;background:rgba(24,18,16,.95);backdrop-filter:blur(8px);border-bottom:1px solid rgba(232,223,200,0.07)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.nav-stamp-img{width:32px;height:auto;flex-shrink:0;filter:invert(1);opacity:.75;transition:opacity .3s}
.nav-logo:hover .nav-stamp-img{opacity:1}
.nav-logo-text{font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:.1em;color:var(--parchment);opacity:.85;white-space:nowrap}
.nav-links{display:flex;gap:32px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:15px;letter-spacing:.15em;text-transform:uppercase;color:rgba(232,223,200,.7);text-decoration:none;transition:color .3s}
.nav-links a:hover{color:var(--lichen)}
.nav-cta{font-size:14px;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;color:var(--parchment);background:rgba(168,134,92,.25);border:1px solid rgba(168,134,92,.4);padding:10px 20px;text-decoration:none;transition:background .3s,border-color .3s}
/* dark text on the tan fill — parchment-on-tan measured 2.1:1 on the ten pages
   that had it; the homepage already flipped it and the homepage was right */
.nav-cta:hover{background:var(--tan);border-color:var(--tan);color:var(--bark)}

/* ---------- section system (the standard subpage) ---------- */
.s-hero{margin-top:var(--nav-h);background:var(--bark);padding:96px 24px 80px;text-align:center}
.s-hero-eyebrow{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--lichen);margin-bottom:18px}
.s-hero-title{font-family:var(--serif);font-weight:400;font-size:38px;letter-spacing:.02em;color:var(--parchment);line-height:1.15;margin-bottom:22px;max-width:680px;margin-left:auto;margin-right:auto}
.s-hero-title em{font-style:italic;color:var(--tan)}
.s-hero-sub{font-size:20px;line-height:1.7;color:rgba(232,223,200,.85);max-width:600px;margin:0 auto}
.divider{width:100%;height:1px;background:linear-gradient(to right,transparent,var(--tan),transparent);opacity:.22}
.s-section{padding:72px 24px}
.s-section-dark{padding:72px 24px;background:var(--charcoal);color:var(--parchment)}
.s-inner{max-width:680px;margin:0 auto}
.s-label{font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--lichen);margin-bottom:18px;display:block}
.s-title{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.2;margin-bottom:28px}
.s-title em{font-style:italic;color:var(--tan)}
.s-section-dark .s-title{color:var(--parchment)}
.s-text{font-size:19px;line-height:1.85;margin-bottom:22px;color:var(--charcoal-light)}
/* Legibility pass 2026-08-02 — BRAND.md floors + WCAG AA contrast (40s+ readers).
   Lichen/tan fail 4.5:1 on parchment; light sections use the darker inks. */
.s-section .s-label{color:var(--lichen-ink)}
.s-section .s-workup-kicker{color:var(--lichen-ink)}
.s-section .s-title em{color:var(--tan-ink)}

/* ---------- section content ----------
   Everything from here to the end of the section system was written more than
   once: the bands, items, price, compare and FAQ blocks byte-for-byte in both
   soil-program.html and tree-steward.html, the text and link rules three and
   four times across services, service-area and tree-planting. They are the
   standard subpage's vocabulary, so they live with the rest of the vocabulary.
   A page's own <style> is for what only that page has. */

.s-text strong{font-weight:400;color:var(--charcoal)}
.s-section-dark .s-text{color:rgba(232,223,200,.88)}
.s-section-dark .s-text strong{color:var(--parchment)}
/* the emphasis line is Cormorant italic. soil-program and tree-steward left the
   family off, so theirs fell back to Josefin — which loads wght@300;400 and no
   italic at all, meaning the browser synthesized a slant. Same line, two
   typefaces, one of them not real. */
.s-text-em{font-family:var(--serif);font-size:21px;line-height:1.7;font-style:italic;color:var(--charcoal);margin-bottom:22px}
.s-section-dark .s-text-em{color:var(--parchment)}

/* Links carry the ground's tan, not one tan. --tan-ink is the AA-safe tan on
   parchment and measures 2.49:1 on charcoal — which is what services.html was
   actually serving in its dark section. tree-steward had already hit this and
   patched that one link inline to parchment; soil-program carried an inline
   #7A5C33 that only restated the light default. Both inlines are gone. */
.s-link{color:var(--tan-ink);text-decoration:none;border-bottom:1px solid rgba(122,92,51,.5);padding-bottom:2px;transition:color .3s}
.s-link:hover{color:var(--charcoal)}
.s-section-dark .s-link{color:var(--tan);border-bottom-color:rgba(168,134,92,.5)}
.s-section-dark .s-link:hover{color:var(--parchment)}

/* hero with a call to action (the program pages) */
.s-hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:var(--charcoal);background:var(--parchment);padding:20px 40px;text-decoration:none;transition:background .3s,color .3s}
.s-hero-cta:hover{background:var(--tan);color:var(--bark)}
.s-hero-meta{margin-top:20px;font-size:16px;letter-spacing:.12em;color:rgba(232,223,200,.65)}

/* the numbered list */
.s-items{margin:28px 0}
.s-item{display:flex;gap:14px;align-items:flex-start;font-size:18px;line-height:1.75;padding:16px 0;border-bottom:1px solid rgba(232,223,200,.07)}
.s-item:first-child{border-top:1px solid rgba(232,223,200,.07)}
.s-item-num{color:var(--lichen);font-size:18px;flex-shrink:0;width:28px}

/* a single price, and the band grid */
.s-price{margin:36px 0 22px;display:flex;align-items:baseline;gap:12px;justify-content:center}
.s-price-amount{font-family:var(--serif);font-weight:300;font-size:52px;color:var(--tan)}
.s-price-detail{font-size:16px;letter-spacing:.1em;color:rgba(232,223,200,.72);line-height:1.6}
.s-bands{display:grid;grid-template-columns:1fr;gap:8px;margin:36px 0 14px}
.s-band{background:rgba(232,223,200,.04);border:1px solid rgba(232,223,200,.08);padding:22px 18px;text-align:center}
.s-band-size{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,223,200,.75);margin-bottom:8px}
.s-band-price{font-family:var(--serif);font-weight:300;font-size:40px;color:var(--tan);line-height:1}
.s-band-per{font-size:14px;letter-spacing:.1em;color:rgba(232,223,200,.65);margin-top:6px}
.s-bands-note{font-size:16px;line-height:1.7;color:rgba(232,223,200,.72);text-align:center;margin-bottom:22px}

/* the two-column comparison */
.s-compare{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0}
.s-compare-col{padding:24px;background:rgba(232,223,200,.04);border:1px solid rgba(232,223,200,.08)}
.s-compare-label{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--lichen);margin-bottom:12px}
.s-compare-text{font-size:17px;line-height:1.7;color:rgba(232,223,200,.85)}
.s-compare-text em{color:var(--parchment);font-style:normal}

/* the questions */
.s-faq{margin:28px 0}
.s-q{padding:20px 0;border-top:1px solid rgba(44,36,22,.1)}
.s-q:last-child{border-bottom:1px solid rgba(44,36,22,.1)}
.s-q-prompt{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--charcoal);margin-bottom:12px;line-height:1.3}
.s-q-answer{font-size:18px;line-height:1.75;color:var(--charcoal-light)}

/* ---------- the section call to action ----------
   Which way round the button goes is the SECTION's business. `.s-cta` used to
   mean dark-on-light on about and service-area and light-on-dark on services,
   soil-program and tree-steward; services carried a second class for the other
   polarity, and the two program pages patched theirs with an inline style —
   which also killed their hover, because an inline background beats :hover.
   The mapping was never ambiguous: light section, dark button; dark section,
   light button. Every instance on all five pages. So let the ground decide, the
   same way it already decides .s-label and .s-link above.

   WIDTH is the layout's business, not the button's. Contained is the default,
   because a lone CTA under centered prose wants a shape. Where a CTA stacks
   under the price bands it aligns to that grid instead — .s-cta-wide, opted
   into where the grid is, not assumed from the page. */
.s-cta,.s-cta-alt{display:block;text-align:center;text-transform:uppercase;text-decoration:none;max-width:420px}
.s-cta{font-size:16px;letter-spacing:.18em;padding:22px;margin:0 auto 12px;transition:background .3s,color .3s}
.s-cta-wide{max-width:none}
.s-section .s-cta{color:var(--parchment);background:var(--charcoal)}
.s-section .s-cta:hover{background:var(--tan);color:var(--bark)}
.s-section-dark .s-cta{color:var(--charcoal);background:var(--parchment)}
.s-section-dark .s-cta:hover{background:var(--lichen);color:var(--bark)}
/* the secondary is an outline on dark ground only — it has no light-ground use */
.s-cta-alt{font-size:15px;letter-spacing:.15em;padding:20px;margin:0 auto;color:rgba(232,223,200,.72);border:1px solid rgba(232,223,200,.18);transition:border-color .3s,color .3s}
.s-cta-alt:hover{border-color:var(--tan);color:var(--tan)}

/* ---------- the season band ---------- */
/* The year in four colors — spring, summer, autumn, winter, in that order. It
   carries no content and no meaning a screen reader needs; it is the section
   break, and it exists so the seasons stay in the reader's eye between the
   sections that talk about them. A gradient, not four elements: one div. */
.szn-band{height:10px;background:linear-gradient(to right,
  var(--spring) 0 25%,var(--moss) 25% 50%,var(--ember) 50% 75%,var(--slate) 75% 100%)}
@media(max-width:860px){.szn-band{height:8px}}

/* ---------- footer ----------
   ONE footer, and it lives here. There were four: a 44px stamp on seven pages,
   120px on the homepage, 140px on two, 64px on the poems page — plus the
   homepage restyling the whole thing under .q/.a/.c, which is why not one of
   these rules ever reached the front door. The homepage's proportions won the
   arbitration (it is the newest and the most legible); the class names are the
   ones that say what the text IS, so the next page to be written inherits
   instead of re-deciding. Anything page-specific below this line is drift. */
footer{background:var(--bark);padding:56px 24px 46px;text-align:center}
.footer-stamp-img{width:120px;height:auto;filter:invert(1);opacity:.32;margin-bottom:32px}
.footer-quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;color:rgba(232,223,200,.75);margin-bottom:8px}
.footer-attr{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,223,200,.72);margin-bottom:28px}
.footer-rule{width:40px;height:1px;background:rgba(168,134,92,.25);margin:0 auto 28px}
.footer-links{margin:0 auto 22px;max-width:900px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 20px;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.footer-links a{display:inline-block;padding:9px 4px;color:rgba(232,223,200,.72);text-decoration:none;transition:color .25s;white-space:nowrap}
.footer-links a:hover{color:var(--lichen)}
.footer-copy{font-size:14px;color:rgba(232,223,200,.72);letter-spacing:.06em}
@media(max-width:860px){
  footer{padding:44px 20px 36px}
  .footer-stamp-img{width:92px;margin-bottom:26px}
  .footer-quote{font-size:20px}
}

/* ---------- mobile call bar ---------- */
.mobile-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:var(--charcoal);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(168,134,92,.2)}
.mobile-sticky-inner{display:flex;gap:8px}
.ms-text,.ms-call{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;letter-spacing:.12em;text-transform:uppercase;padding:14px 12px;text-decoration:none}
.ms-text{color:var(--charcoal);background:var(--parchment)}
.ms-call{color:var(--parchment);border:1px solid rgba(168,134,92,.4)}
.ms-text svg,.ms-call svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- scroll reveal ---------- */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  :root{--nav-h:62px}
  .site-nav{padding:12px 20px}
  .nav-logo{gap:8px}
  .nav-stamp-img{width:28px}
  .nav-logo-text{font-size:16px;letter-spacing:.06em}
  .nav-links{display:none}
  .nav-cta{letter-spacing:.12em;padding:10px 16px}
  .mobile-sticky{display:block}
  body{padding-bottom:76px}
}
@media(max-width:400px){
  .nav-logo-text{font-size:15px;letter-spacing:.02em}
  .nav-cta{padding:10px 12px;letter-spacing:.08em}
}
@media(min-width:861px){
  .site-nav{padding:14px 48px}
  .s-hero{padding:120px 48px 100px}
  .s-hero-title{font-size:52px}
  .s-section,.s-section-dark{padding:96px 48px}
  .s-title{font-size:38px}
  .s-compare{grid-template-columns:1fr 1fr}
  .s-bands{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}