:root{
  /* Surfaces */
  --bg:#FFFCF7;        /* bright warm off-white page */
  --wash:#FFFCF7;      /* same as --bg */
  --card:#FFFFFF;      /* cards stay white to pop */
  --line:#EFE7D8;

  /* Type (accessible) */
  --ink:#2C3A2E;       /* headings */
  --body:#2F3D31;      /* darker body text (AA+) */
  --muted:#746C49;     /* muted/captions (AA on bg) */

  /* Brand accents */
  --amber:#C86A3B;     /* terra brand accent (used for resource CTAs) */
  --amber-700:#A6542E;

  /* CTA / links (forest to match logo) */
  --cobalt:#4D613F;    /* links + primary/contact CTA */
  --cobalt-700:#3B4E33;/* hover/active */

  --sky:#E6DEC0;       /* focus ring */
  --radius:16px
}


/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--body);background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.7
}
a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--amber)}
a.btn{text-decoration:none}
h1,h2,h3{color:var(--ink);line-height:1.2;margin:0 0 .5rem}
h1{font-size:2.25rem}h2{font-size:1.75rem}h3{font-size:1.25rem}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.eyebrow{font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Header & nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,252,247,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line)
}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{padding:.5rem .25rem;text-decoration:none}
.site-nav a:hover,.site-nav a:focus-visible{
  color:var(--amber);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px
}
.nav-toggle{display:none}
@media (max-width:880px){
  .site-nav{
    display:none;position:absolute;right:1rem;top:60px;
    background:var(--bg);border:1px solid var(--line);
    border-radius:12px;padding:.75rem 1rem;
    flex-direction:column;align-items:flex-start;gap:.5rem;
    box-shadow:0 10px 30px rgba(15,23,42,.08)
  }
  .site-nav.open{display:flex}
  .nav-toggle{
    display:inline-block;border:1px solid var(--line);
    background:var(--bg);padding:.5rem .75rem;border-radius:10px
  }
}

/* Hero – softer mixed glow; keep text forward */
.hero{
  padding:4rem 0 3rem;position:relative;
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(46,111,99,.07), transparent),
    radial-gradient(700px 260px at   0%  10%, rgba(200,106,59,.08), transparent);
  border-bottom:1px solid var(--line)
}
.hero .lead{font-size:1.125rem;max-width:62ch;color:var(--body)}

/* Homepage hero logo */
.hero-logo{
  width: clamp(208px, 26vw, 336px);   /* responsive: 260–420px */
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.12));  /* soft depth, no box tile */
}

/* If your PNG has a non-transparent background and shows a box,
   temporarily add class="hero-logo tile" in the HTML and keep this: */
.hero-logo.tile{
  background: var(--bg);
  border-radius: 16px;
  padding: 8px;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.10));
}

/* Accent bits */
.badge{
  display:inline-block;background:var(--amber);color:#fff;
  border-radius:999px;padding:.35rem .6rem;font-weight:700;font-size:.85rem
}

/* Sections – alternating wash adds separation */
.section{padding:3rem 0;border-top:1px solid var(--line)}
.section:nth-of-type(odd){background:var(--wash)}
.section h2{position:relative;padding-bottom:.4rem;color:var(--ink)}
.section h2::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;
  background:var(--amber);border-radius:2px
}

/* Grid */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(15,23,42,.05)
}

/* Buttons */
.btn{
  display:inline-block;padding:.8rem 1rem;border-radius:var(--radius);
  border:1px solid transparent;font-weight:700
}
/* Primary CTA (spruce) */
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-700)}
/* Outline secondary */
.btn-outline{
  background:transparent;color:var(--cobalt);border:2px solid var(--cobalt)
}
.btn-outline:hover{color:#fff;background:var(--cobalt-700);border-color:var(--cobalt-700)}
/* Optional terracotta button (only if/where you want it) */
.btn-terra{background:var(--amber);color:#fff}
.btn-terra:hover{background:var(--amber-700)}
/* Focus ring */
.btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:12px;padding:.75rem;background:var(--card)}
.faq details+details{margin-top:.6rem}
.faq summary{cursor:pointer;list-style:none;font-weight:600;color:var(--ink)}

/* Forms */
.form label{display:block;font-weight:600;margin-top:.75rem;color:var(--ink)}
.form input,.form select,.form textarea{
  width:100%;padding:.65rem .75rem;border:1px solid var(--line);border-radius:10px
}
.form .help{font-size:.9rem;color:var(--muted)}
.form .actions{margin-top:1rem}

/* Blockquote – terracotta accent, light glow */
blockquote{
  font-family:"Newsreader",serif;font-size:1.125rem;color:var(--ink);
  margin:1rem 0;padding:.75rem 1rem;border-left:3px solid var(--amber);
  background:
    linear-gradient(var(--card),var(--card)),
    linear-gradient(90deg, rgba(200,106,59,.12), transparent);
  background-clip:padding-box, border-box
}

/* Media & footer */
.portrait{width:100%;max-width:340px;border-radius:18px;border:1px solid var(--line);box-shadow:0 14px 40px rgba(15,23,42,.12)}
.portrait-wrap{display:flex;justify-content:center;align-items:center}
.site-footer{border-top:1px solid var(--line);padding:2.5rem 0;margin-top:2rem}
.footer-grid{display:grid;gap:1rem;grid-template-columns:2fr 1fr 1fr}
.footer-grid .fine{color:var(--muted)}
.center{text-align:center}

/* Utilities */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--bg);border:2px solid var(--cobalt);padding:.25rem .5rem}


/* =========================================================
   Aliases (optional readability)
   ========================================================= */
:root{
  --btn-green: var(--cobalt);    /* contact CTAs */
  --btn-terra: var(--amber);     /* resource CTAs */
}


/* =========================================================
   Auto-style buttons by destination (global, no page edits)
   - Contact CTAs -> green (cobalt)
   - Resource CTAs / downloads -> terra (amber)
   ========================================================= */

/* CONTACT buttons (green). Do not override outline buttons. */
a.btn:not(.btn-outline)[href="/contact/"],
a.btn:not(.btn-outline)[href^="/contact/"],
a.btn:not(.btn-outline)[href*="/contact/"],
a.btn:not(.btn-outline)[href$="/contact/index.html"],
a.btn:not(.btn-outline)[href^="../contact/"]{
  background: var(--btn-green);
  border-color: var(--btn-green);
  color:#fff;
}
a.btn:not(.btn-outline)[href^="/contact/"]:hover,
a.btn:not(.btn-outline)[href*="/contact/"]:hover,
a.btn:not(.btn-outline)[href$="/contact/index.html"]:hover,
a.btn:not(.btn-outline)[href^="../contact/"]:hover{
  background: var(--cobalt-700);
}

/* RESOURCE buttons (terra/amber). Covers resource pages + PDF downloads. */
a.btn:not(.btn-outline)[href^="/resources/"],
a.btn:not(.btn-outline)[href*="/resources/"],
a.btn:not(.btn-outline)[href^="../resources/"],
a.btn:not(.btn-outline)[href^="/assets/downloads/"],
a.btn:not(.btn-outline)[href$=".pdf"][download]{
  background: var(--btn-terra);
  border-color: var(--btn-terra);
  color:#fff;
}
a.btn:not(.btn-outline)[href^="/resources/"]:hover,
a.btn:not(.btn-outline)[href*="/resources/"]:hover,
a.btn:not(.btn-outline)[href^="../resources/"]:hover,
a.btn:not(.btn-outline)[href^="/assets/downloads/"]:hover,
a.btn:not(.btn-outline)[href$=".pdf"][download]:hover{
  background: var(--amber-700);
}