/* Heartwood Montessori — shared stylesheet
   Brand anchors: #297100 (green), #3D2C20 (deep brown)
   Fonts: Google Sans (headings), Roboto (body)
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@500;700;800&display=swap');

:root{
  --color-primary:#297100;
  --color-primary-ink:#1f5a00;
  --color-brown:#3D2C20;
  --color-text:#3a3a3a;
  --color-heading:#222321;
  --color-muted:#6b6b6b;
  --color-bg:#fbfbf8;
  --color-surface:#ffffff;
  --color-bg-alt:#f3f5ef;
  --color-tint:#edf9e0;
  --color-border:rgba(61,44,32,.14);

  --font-heading:"Google Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.07);
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);

  --container: min(1200px, calc(100% - 2rem));
  --measure: 70ch;

  --space-1: clamp(.75rem, 1.2vw, 1rem);
  --space-2: clamp(1rem, 1.8vw, 1.5rem);
  --space-3: clamp(1.5rem, 2.6vw, 2.25rem);
  --space-4: clamp(2rem, 4vw, 3rem);
  --section-pad: clamp(3rem, 8vw, 6rem);

  --h1: clamp(2.6rem, 4.5vw, 3.4rem);
  --h2: clamp(1.9rem, 3vw, 2.25rem);
  --h3: clamp(1.25rem, 2vw, 1.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  color:var(--color-text);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(41,113,0,.10), transparent 55%),
    radial-gradient(900px 600px at 95% 10%, rgba(61,44,32,.08), transparent 50%),
    var(--color-bg);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top:.75rem;
  padding:.75rem 1rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  z-index:9999;
}
.skip-link:focus{left:.75rem; outline:none}

:focus-visible{
  outline:3px solid rgba(41,113,0,.35);
  outline-offset:3px;
  border-radius:10px;
}

/* Layout */
.container{width:var(--container); margin-inline:auto}
.section{padding:var(--section-pad) 0}
.section.alt{background:linear-gradient(180deg, var(--color-bg-alt), rgba(243,245,239,.35)); border-top:1px solid rgba(61,44,32,.08); border-bottom:1px solid rgba(61,44,32,.08)}

.prose{max-width:var(--measure)}

h1,h2,h3{font-family:var(--font-heading); color:var(--color-heading); line-height:1.18; margin:0 0 .75rem 0; letter-spacing:-.02em}
h1{font-size:var(--h1); font-weight:800}
h2{font-size:var(--h2); font-weight:800}
h3{font-size:var(--h3); font-weight:700}

.lede{font-size:1.05rem; color:#4f4f4f; max-width:var(--measure)}
.muted{color:var(--color-muted)}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--color-brown);
}
.kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--color-primary);
  box-shadow:0 0 0 6px rgba(41,113,0,.12);
}

/* Header + Nav (single nav, CSS-only toggle) */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(251,251,248,.78);
  border-bottom:1px solid rgba(61,44,32,.10);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
  min-width:220px;
}
.brand img{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  background:var(--color-surface);
}
.brand-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-title strong{font-family:var(--font-heading); font-weight:800; color:var(--color-heading); letter-spacing:-.01em}
.brand-title span{font-size:.95rem; color:var(--color-muted)}

.nav-toggle{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.nav-toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.65rem .9rem;
  border-radius:999px;
  border:1px solid rgba(61,44,32,.16);
  background:rgba(255,255,255,.72);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  cursor:pointer;
  user-select:none;
}
.nav-toggle-btn .lines{
  width:18px;
  height:12px;
  position:relative;
}
.nav-toggle-btn .lines span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--color-brown);
  border-radius:2px;
  transition:transform .2s ease, top .2s ease, opacity .2s ease;
}
.nav-toggle-btn .lines span:nth-child(1){top:0}
.nav-toggle-btn .lines span:nth-child(2){top:5px}
.nav-toggle-btn .lines span:nth-child(3){top:10px}

nav.site-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1rem;
}

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.25rem;
  padding:0;
  margin:0;
}

.nav-links a{
  display:inline-flex;
  align-items:center;
  padding:.55rem .85rem;
  border-radius:999px;
  text-decoration:none;
  color:var(--color-heading);
  transition:background-color .2s ease, transform .2s ease, color .2s ease;
}
.nav-links a:hover{background:rgba(41,113,0,.10)}
.nav-links a[aria-current="page"]{
  background:rgba(41,113,0,.14);
  color:var(--color-primary-ink);
  box-shadow:inset 0 0 0 1px rgba(41,113,0,.22);
}

@media (max-width: 860px){
  nav.site-nav{gap:.75rem}
  .nav-links{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:rgba(251,251,248,.92);
    border-bottom:1px solid rgba(61,44,32,.10);
    padding: .75rem 1rem 1rem;
    display:grid;
    gap:.25rem;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav-links a{justify-content:flex-start; padding:.75rem .9rem}

  /* Toggle open state */
  #nav-toggle:checked ~ nav.site-nav .nav-links{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  #nav-toggle:checked ~ .nav-toggle-btn .lines span:nth-child(1){top:5px; transform:rotate(45deg)}
  #nav-toggle:checked ~ .nav-toggle-btn .lines span:nth-child(2){opacity:0}
  #nav-toggle:checked ~ .nav-toggle-btn .lines span:nth-child(3){top:5px; transform:rotate(-45deg)}
}

/* Hero */
.hero{
  padding: clamp(3.25rem, 7vw, 6rem) 0;
}

/* Hero with background media + overlay */
.hero.hero-bg{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(61,44,32,.10);
}
.hero-media{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(900px 520px at 15% 10%, rgba(41,113,0,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(61,44,32,.18), transparent 55%),
    url("https://images.unsplash.com/photo-1604881991720-f91add269bed?auto=format&fit=crop&w=2400&q=70");
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.02);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(251,251,248,.92) 0%, rgba(251,251,248,.78) 45%, rgba(251,251,248,.55) 100%),
    linear-gradient(180deg, rgba(251,251,248,.35), rgba(251,251,248,.78));
}
.hero.hero-bg .hero-grid,
.hero.hero-bg .container{
  position:relative;
  z-index:1;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}

/* Image-only hero variant (centered image, no text) */
.hero-center{
  min-height: clamp(22rem, 55vw, 34rem);
  display:grid;
  place-items:center;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}
.hero-center-image{
  width:min(520px, 78vw);
  height:auto;
  border-radius:24px;
  box-shadow:0 18px 55px rgba(0,0,0,.18);
  border:1px solid rgba(61,44,32,.14);
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}

.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border:1px solid rgba(61,44,32,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(800px 320px at 10% 0%, rgba(41,113,0,.18), transparent 55%),
    radial-gradient(700px 320px at 100% 20%, rgba(61,44,32,.14), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
.hero-card > *{position:relative}
.hero h1{margin-bottom:.6rem}
.hero .tagline{font-family:var(--font-heading); font-weight:700; color:var(--color-brown); font-size:1.15rem}

.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.2rem;
  border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;
  font-family:var(--font-heading);
  font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  min-height:44px;
}
.btn-primary{
  background:linear-gradient(180deg, var(--color-primary), #236100);
  color:#f6fff0;
  box-shadow:0 10px 22px rgba(41,113,0,.22);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 26px rgba(41,113,0,.26)}
.btn-secondary{
  background:rgba(255,255,255,.8);
  border-color:rgba(61,44,32,.18);
  color:var(--color-brown);
}
.btn-secondary:hover{transform:translateY(-1px); box-shadow:0 12px 22px rgba(0,0,0,.08)}

.hero-aside{
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(237,249,224,.9), rgba(255,255,255,.65));
  border:1px solid rgba(41,113,0,.16);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.hero-aside .aside-inner{padding:1.25rem 1.25rem 1.35rem}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(41,113,0,.10);
  color:var(--color-primary-ink);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.9rem;
}

.aside-list{margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.6rem}
.aside-list li{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  color:#4b4b4b;
}
.aside-list li::before{
  content:"";
  width:10px;
  height:10px;
  margin-top:.45rem;
  border-radius:999px;
  background:rgba(61,44,32,.55);
}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
}

/* Cards */
.grid{
  display:grid;
  gap:clamp(1.1rem, 2.4vw, 1.75rem);
}
.grid.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
}

.card{
  background:var(--color-surface);
  border:1px solid rgba(61,44,32,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(1.25rem, 2.4vw, 1.75rem);
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-top:4px solid rgba(41,113,0,.35);
  opacity:.9;
  pointer-events:none;
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.10)}

.meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin: .75rem 0 0;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:.35rem .65rem;
  border-radius:999px;
  background:rgba(61,44,32,.06);
  border:1px solid rgba(61,44,32,.12);
  color:#4a3b33;
  font-size:.95rem;
}

/* Quote / Testimonial styling */
.quote{
  background:linear-gradient(180deg, rgba(61,44,32,.06), rgba(255,255,255,.7));
  border:1px solid rgba(61,44,32,.14);
  border-radius:var(--radius);
  padding:clamp(1.5rem, 3vw, 2.25rem);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.quote::before{
  content:"“";
  position:absolute;
  top:-.65rem;
  left:1rem;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:4.5rem;
  color:rgba(41,113,0,.18);
  line-height:1;
}
.quote p{margin:0; font-style:italic; color:#3f3f3f}

/* Section heading accent */
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:var(--space-3);
}
.section-title h2{margin:0}
.section-title .accent{
  height:3px;
  width:min(220px, 30vw);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(41,113,0,.85), rgba(61,44,32,.55));
  opacity:.8;
}

/* Quick links */
.quick a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  text-decoration:none;
}
.quick .arrow{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(41,113,0,.10);
  border:1px solid rgba(41,113,0,.18);
  flex:0 0 auto;
}
.quick .arrow svg{width:18px; height:18px; fill:var(--color-primary-ink)}

/* Footer */
.site-footer{
  background:linear-gradient(180deg, rgba(61,44,32,.92), rgba(61,44,32,.98));
  color:rgba(255,255,255,.88);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:clamp(1.25rem, 3vw, 2.25rem);
  align-items:start;
}
.footer-brand{display:flex; align-items:center; gap:1rem}
.footer-brand img{width:52px; height:52px; border-radius:14px; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.25)}
.site-footer h2{color:#fff; font-size:1.2rem; margin:0 0 .75rem 0; letter-spacing:.02em}
.site-footer a{color:rgba(255,255,255,.92)}
.site-footer a:hover{text-decoration-thickness:2px}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:.35rem}
.footer-small{margin-top:2rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; color:rgba(255,255,255,.72); font-size:.95rem}

@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{transition:none !important}
}