/* =====================================================================
   pages.css — styles used by the inner pages (about, services,
   get-involved, contact). Loaded after site.css.
   ===================================================================== */

/* ---------- inner-page header ---------- */
.page-head{background:var(--cream);border-bottom:1px solid var(--line)}
.page-head-in{padding-block:clamp(2.5rem,5vw,4rem)}
.crumbs{font-size:var(--t-xs);font-weight:600;color:var(--ink-soft);margin-bottom:1.1rem;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.crumbs a{color:var(--green-700);text-decoration:none;font-weight:700}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.45}
.page-head h1{max-width:17ch;margin-bottom:1rem;
  font-size:clamp(2.1rem,4.6vw,3.25rem);line-height:1.06;letter-spacing:-.032em}
.page-sub{color:var(--ink-soft);max-width:56ch;font-size:var(--t-md);line-height:1.55}
.page-head-actions{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:1.9rem}

.page-head.with-photo .page-head-in{display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
.page-head-photo{position:relative;margin:0}
.page-head-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block}
.page-head-photo.wide img{aspect-ratio:2.33}
@media(max-width:900px){
  .page-head.with-photo .page-head-in{grid-template-columns:1fr}
  .page-head h1{max-width:none}
}

/* ---------- long-form prose ---------- */
.prose{max-width:38rem}
.prose>*+*{margin-top:1.1rem}
.prose p{color:var(--ink-soft)}
.prose h3{margin-top:2rem;font-size:1.3rem}
.prose strong{color:var(--ink);font-weight:700}
.lead{font-size:var(--t-md);line-height:1.55;color:var(--ink);font-weight:500;max-width:46ch}

/* ---------- generic two-column split ---------- */
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split2.tight{gap:clamp(1.5rem,3.5vw,3rem)}
.split2 img{width:100%;border-radius:var(--r);object-fit:cover}
.split2 .ph-4-3 img,.split2 img.ph-4-3{aspect-ratio:4/3}
.split2 img.ph-1-1{aspect-ratio:1}
.split2 img.ph-4-5{aspect-ratio:4/5}
@media(max-width:900px){.split2{grid-template-columns:1fr}}
@media(max-width:900px){.split2.flip-mobile img{order:-1}}

/* ---------- pillar cards (mission values) ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,2.2vw,1.8rem)}
.pillar .pi{width:2.8rem;height:2.8rem;border-radius:12px;background:var(--gold-100);
  color:var(--green-800);display:grid;place-items:center;margin-bottom:1rem}
.pillar h3{font-size:1.1rem;margin-bottom:.45rem}
.pillar p{font-size:var(--t-sm);color:var(--ink-soft)}
@media(max-width:940px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* ---------- service detail rows ---------- */
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.svc-row:first-of-type{border-top:0;padding-top:0}
.svc-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.svc-row:nth-child(even) .svc-row-media{order:-1}
.svc-row-no{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--t-xs);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-600);
  margin-bottom:.9rem}
.svc-row-no b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--gold);color:var(--green-900);font-size:.8rem;letter-spacing:0}
.svc-row h2{font-size:clamp(1.6rem,3vw,1.95rem);margin-bottom:.8rem}
.svc-row>div>p{color:var(--ink-soft);max-width:48ch}
.svc-includes{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.6rem}
.svc-includes li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-sm);
  color:var(--ink-soft)}
.svc-includes svg{flex:none;margin-top:.24em;color:var(--green-600)}
.svc-for{margin-top:1.5rem;background:var(--mint);border-left:3px solid var(--green-600);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:.9rem 1.1rem;font-size:var(--t-sm)}
.svc-for b{color:var(--green-800);font-weight:700}
@media(max-width:900px){
  .svc-row{grid-template-columns:1fr;gap:1.5rem}
  .svc-row:nth-child(even) .svc-row-media{order:-1}
}

/* ---------- numbered process (vertical) ---------- */
.flow{display:grid;gap:0;counter-reset:flow}
.flow-item{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);
  padding-block:1.6rem;border-top:1px solid var(--line)}
.flow-item:last-child{border-bottom:1px solid var(--line)}
.flow-item b{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  background:var(--green-800);color:var(--gold);font-size:1rem;font-weight:800}
.flow-item h3{font-size:1.15rem;margin-bottom:.4rem}
.flow-item p{font-size:var(--t-sm);color:var(--ink-soft);max-width:60ch}
@media(max-width:620px){.flow-item{grid-template-columns:1fr;gap:.8rem}}

/* ---------- quote ---------- */
.quote{background:var(--green-800);border-radius:var(--r-lg);color:#fff;
  padding:clamp(2rem,4.5vw,3.5rem);position:relative;overflow:hidden}
.quote .dots-q{right:2rem;bottom:-1rem;width:100px;height:70px;color:#fff;opacity:.15}
.quote p{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:600;line-height:1.4;
  max-width:34ch;position:relative;z-index:2}
.quote .mark{font-size:3.5rem;line-height:.6;color:var(--gold);display:block;margin-bottom:.5rem}
.quote cite{display:block;margin-top:1.5rem;font-style:normal;font-size:var(--t-sm);
  color:var(--on-green);position:relative;z-index:2}

/* ---------- gallery strip ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.4vw,1rem)}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm)}
.gallery img:nth-child(1),.gallery img:nth-child(4){aspect-ratio:3/4}
@media(max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}
  .gallery img,.gallery img:nth-child(1),.gallery img:nth-child(4){aspect-ratio:1}}

/* ---------- involve cards (big, with image) ---------- */
.involve{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.involve-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.involve-card img{width:100%;height:100%;min-height:16rem;object-fit:cover}
.involve-body{padding:clamp(1.6rem,3vw,2.4rem)}
.involve-body h2{font-size:clamp(1.5rem,2.8vw,1.85rem);margin-bottom:.7rem}
.involve-body>p{color:var(--ink-soft);max-width:52ch}
.involve-body .chip{display:inline-block;font-size:var(--t-xs);font-weight:700;
  padding:.3rem .8rem;border-radius:999px;margin-bottom:.9rem;
  background:var(--gold-100);color:#7A5407}
.involve-list{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;gap:.55rem}
.involve-list li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-soft)}
.involve-list svg{flex:none;margin-top:.24em;color:var(--green-600)}
@media(max-width:820px){
  .involve-card{grid-template-columns:1fr}
  .involve-card img{min-height:13rem;aspect-ratio:16/9}
}

/* ---------- contact cards ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.ccard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,2.4vw,2rem)}
.ccard .ci{width:2.8rem;height:2.8rem;border-radius:12px;background:var(--mint);
  color:var(--green-700);display:grid;place-items:center;margin-bottom:1rem}
.ccard h3{font-size:1.1rem;margin-bottom:.5rem}
.ccard p,.ccard address{font-size:var(--t-sm);color:var(--ink-soft);font-style:normal;line-height:1.7}
.ccard a{color:var(--green-700);font-weight:600;text-decoration:none}
.ccard a:hover{text-decoration:underline}
@media(max-width:860px){.contact-cards{grid-template-columns:1fr}}

/* ---------- form ---------- */
.form-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.5rem)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:var(--t-sm);font-weight:700;color:var(--ink)}
.field .hint{font-size:var(--t-xs);color:var(--ink-soft);font-weight:400}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink);
  padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;width:100%}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(30,122,97,.15)}
.form-note{font-size:var(--t-xs);color:var(--ink-soft);margin-top:1rem;line-height:1.6}
.form button{width:100%;justify-content:center;margin-top:.4rem}
.form-aside{display:grid;gap:1.25rem}
.form-aside img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.urgent{background:var(--green-800);color:#fff;border-radius:var(--r);padding:1.5rem}
.urgent h3{color:#fff;font-size:1.1rem;margin-bottom:.5rem}
.urgent p{font-size:var(--t-sm);color:var(--on-green)}
.urgent a{color:var(--gold);font-weight:700;text-decoration:none}
@media(max-width:900px){.form-wrap{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* ---------- hours table ---------- */
.hours-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.hours-table th,.hours-table td{text-align:left;padding:.7rem .2rem;
  border-bottom:1px solid var(--line);color:var(--ink-soft)}
.hours-table th{color:var(--ink);font-weight:700;width:12rem}
.hours-table tr:last-child th,.hours-table tr:last-child td{border-bottom:0}

/* ---------- map placeholder ---------- */
.map-card{position:relative;border-radius:var(--r);overflow:hidden}
.map-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.map-card.wide img{aspect-ratio:2.33}
.map-card .pin{position:absolute;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  background:#fff;border-radius:var(--r-sm);padding:1rem 1.2rem;box-shadow:var(--shadow);
  max-width:20rem}
.map-card .pin b{display:block;font-size:var(--t-sm);font-weight:800;margin-bottom:.25rem}
.map-card .pin span{font-size:var(--t-xs);color:var(--ink-soft);line-height:1.5;display:block}
.map-card .pin a{font-size:var(--t-xs);font-weight:700;color:var(--green-700);text-decoration:none}

/* ---------- closing CTA reused on inner pages ---------- */
.cta-band{background:var(--gold);border-radius:var(--r-lg);
  padding:clamp(2rem,4.5vw,3.25rem);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;
  position:relative;overflow:hidden}
.cta-band .dots-e{right:1.2rem;bottom:-1.2rem;width:110px;height:70px;
  color:var(--green-800);opacity:.28}
.cta-band h2{color:var(--green-900);max-width:18ch;margin-bottom:.7rem;position:relative;z-index:2}
.cta-band p{color:#59460F;max-width:48ch;font-weight:500;position:relative;z-index:2}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:.8rem;position:relative;z-index:2}
@media(max-width:820px){.cta-band{grid-template-columns:1fr}}

/* The current-page nav marker is defined once in site.css, on the light
   header. Do not redefine it here — pages.css loads afterwards and would
   override it. */

/* ---------- form status (success / failure) ---------- */
.form-status{display:none;border-radius:var(--r);padding:1.6rem 1.7rem;margin-top:1.2rem;
  font-size:var(--t-sm);line-height:1.65}
.form-status.is-on{display:block}
.form-status b{display:block;margin-bottom:.45rem;font-size:1.15rem;line-height:1.3}
.form-status a{font-weight:700;text-decoration:underline}
.form-status.ok{background:var(--mint);border:1px solid var(--green-600);color:var(--ink-soft)}
.form-status.ok b{color:var(--green-800)}
.form-status.ok a{color:var(--green-700)}
.form-status.err{background:var(--gold-100);border:1px solid #D9A93F;color:#5C4A12}
.form-status.err b{color:#7A5407}
.form-status.err a{color:#7A5407}