/* =============================================================
   Landing Shell — shared design system for the shared header/footer
   (tokens + fonts + footer + floating action buttons)
   Loaded LAST so component styles win over legacy page CSS.

   IMPORTANT: This file deliberately contains NO global reset and
   NO element-wide spacing rules. Inner pages are built on Bootstrap,
   and a universal * { margin:0; padding:0 } reset destroys their
   container gutters and vertical rhythm. Only scoped component
   styles live here.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --green:#1b6533; --green-dark:#0f5132; --white:#ffffff;
  --green-tint:#f3f8f4; --green-line:#d8e7dd; --ink:#13261b;
  --muted:#5b6b60; --gold:#c79a3e; --wa:#25d366;
}

/* Typography — font FAMILIES + TITLE COLORS.
   Spacing (margins, line-heights) is left to each page's own CSS
   (Bootstrap + style.css) so no layout shifts.
   ALL titles use the common brand green #1b6533 (--green).
   Titles inside dark panels (bg-darker, understand, final, bg-hero,
   overlay-hero, footer) keep WHITE via the :not() guard below.
   The landing page (body.landing-page) is exempt from these rules:
   it styles its own headings directly. */
body:not(.landing-page){
  font-family:'Inter',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
body:not(.landing-page) h1,
body:not(.landing-page) h2,
body:not(.landing-page) h3,
body:not(.landing-page) h4,
body:not(.landing-page) h5,
body:not(.landing-page) h6{
  font-family:'Fraunces',serif;
  color:var(--green);
}
/* white headings stay white on dark panels */
.bg-darker h1,.bg-darker h2,.bg-darker h3,.bg-darker h4,.bg-darker h5,.bg-darker h6,
.bg-hero h1,.bg-hero h2,.bg-hero h3,.bg-hero h4,.bg-hero h5,.bg-hero h6,
.overlay-hero h1,.overlay-hero h2,.overlay-hero h3,.overlay-hero h4,.overlay-hero h5,.overlay-hero h6,
.understand h1,.understand h2,.understand h3,.understand h4,.understand h5,.understand h6,
.final h1,.final h2,.final h3,.final h4,.final h5,.final h6{
  color:var(--white);
}
/* links that look like titles (card titles as <a>) follow their heading colour */
body:not(.landing-page) h1 a,
body:not(.landing-page) h2 a,
body:not(.landing-page) h3 a,
body:not(.landing-page) h4 a,
body:not(.landing-page) h5 a,
body:not(.landing-page) h6 a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{transition:color .2s}

/* ============ Footer (identical to landing) ============ */
footer{background:var(--green);color:#d4e4da;padding:56px 0 30px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px}
.foot-logo{height:70px;width:auto;margin-bottom:18px;display:block}
.foot-about{color:#d4e4da;font-size:14px;max-width:260px;line-height:1.7}
footer h4,body:not(.landing-page) footer h4{color:var(--white)!important;font-size:17px;font-weight:600;font-family:'Inter',sans-serif;margin-bottom:18px}
.foot-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;color:#d4e4da}
.foot-row svg{flex-shrink:0;margin-top:3px;opacity:.85}
footer a{color:#d4e4da;text-decoration:none}
footer a:hover{color:var(--white)}
.foot-links a{display:block;margin-bottom:14px}
.foot-addr p{margin-bottom:14px;line-height:1.5;color:#d4e4da}
.foot-divider{border:none;border-top:1px solid rgba(255,255,255,.18);margin:36px 0 22px}
.foot-legal{text-align:center;color:#cfe1d6;font-size:13.5px}
.foot-legal a{color:#cfe1d6}
.foot-copy{text-align:center;color:#bcd4c4;font-size:13px;margin-top:14px}

/* ============ Floating action buttons (identical to landing) ============ */
.fab{position:fixed;right:22px;z-index:120;width:54px;height:54px;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.25);color:#fff;text-decoration:none;transition:transform .15s}
/* Beat Font Awesome's .fab (brands) display rule which loads after this sheet on inner pages */
a.fab{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;line-height:1!important}
.fab:hover{transform:scale(1.08)}
.fab-wa{bottom:90px;background:var(--wa);animation:bob 2.6s ease-in-out infinite}
.fab-call{bottom:26px;background:#1a8fd1}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ============ Responsive (identical to landing) ============ */
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}