/* Palette from the card (approx) */
:root{
  --green:#5A764D;
  --navy:#1D3557;
  --sage:#DCE2D3;
  --ink:#223;
  --bg:#fff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

.container{max-width:960px;margin:0 auto;padding:0 16px}

.site-header{
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--navy)}
.logo{height:36px;width:auto;margin-right:10px}
.brand-text{font-weight:700;font-size:18px}

.nav a{
  color:var(--navy);
  text-decoration:none;
  margin-left:16px;
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
.nav a:hover{border-color:var(--green)}

.site-main.container{padding:28px 16px}

.hero{
  background:linear-gradient(to bottom, rgba(29,53,87,.05), rgba(90,118,77,.05)), var(--sage);
  border:1px solid rgba(0,0,0,.05);
  padding:48px 16px;
  border-radius:16px;
  margin:8px 0 24px;
}
.hero-inner{max-width:780px;margin:0 auto;text-align:center}
.hero h1{color:var(--navy);margin:0 0 8px}
.btn{
  display:inline-block;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  border-radius:999px;
  border:none;
  cursor:pointer;
}
.btn:hover{opacity:.92}

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.link{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(29,53,87,.3)}
.link:hover{border-color:var(--navy)}

label{display:block;margin:12px 0}
label span{display:block;font-weight:600;margin-bottom:6px}
input[type="text"],input[type="email"],textarea{
  width:100%;padding:10px;border:1px solid rgba(0,0,0,.2);border-radius:8px
}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.flash{padding:12px 14px;border-radius:10px;margin-bottom:16px}
.flash-success{background:#e9f6ec;border:1px solid #b9e0c2}
.flash-error{background:#fdebec;border:1px solid #f3b5ba}

.site-footer{
  margin-top:40px;padding:20px 0;border-top:1px solid rgba(0,0,0,.06);background:#fff
}
.site-footer .container{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sep{opacity:.4;margin:0 6px}
.small{font-size:13px;opacity:.8}

/* Basic headings */
h1,h2,h3{color:var(--navy);line-height:1.2}
h1{font-size:32px;margin:0 0 12px}
h2{font-size:24px;margin:24px 0 8px}

/* Mobile tweaks */
@media (max-width:640px){
  .nav a{margin-left:10px}
  h1{font-size:28px}
}

 .hero {
    background: linear-gradient(to bottom, rgba(29, 53, 87, .05), rgba(90, 118, 77, .05)), var(--sage);
    border: 1px solid rgba(0, 0, 0, .05);
    padding: 20px 16px;
    border-radius: 16px;
    margin: 16px 0 24px;
}
 /* Sticky header */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background:#d1dac3; border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(4px);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}

.nav a{
  color:var(--navy); text-decoration:none; margin-left:16px; padding:6px 2px;
  border-bottom:2px solid transparent;
}
.nav a:hover{border-color:var(--green)}

/* Hamburger button (hidden on desktop) */
.nav-toggle{
  display:none; border:0; background:transparent; padding:8px; margin-left:auto; cursor:pointer;
}
.nav-toggle-box{display:inline-block; width:28px; height:22px; position:relative}
.nav-toggle-bar{
  position:absolute; left:0; right:0; height:2px; background:var(--navy);
  transform-origin:center; transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle-bar:nth-child(1){top:0}
.nav-toggle-bar:nth-child(2){top:10px}
.nav-toggle-bar:nth-child(3){top:20px}

/* Mobile nav (closed by default) */
@media (max-width: 820px){
  .nav-toggle{display:block}
  .nav{position:absolute; inset:auto 0 0 0; top:56px; /* below header */
       background:#fff; border-top:1px solid rgba(0,0,0,.06);
       display:none; flex-direction:column; padding:10px 16px}
  .nav a{margin:8px 0; padding:10px 0}

  /* when open */
  .nav.is-open{display:flex}

  /* animate hamburger to X */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){top:10px; transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){top:10px; transform:rotate(-45deg)}
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #d1dac3;
}
/* About split layout (text left, square image right) */
.about-split{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr);
  gap:28px;
  align-items:start;
  margin:8px 0 2px;
}

.about-media{
  margin:0;
  /* keep the frame square regardless of viewport */
  aspect-ratio: 1 / 1;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.about-media img{
  width:100%;
  height:100%;
  object-fit:cover;   /* fills square nicely */
  display:block;
}

/* Stack on mobile: text first, image second */
@media (max-width: 820px){
  .about-split{grid-template-columns:1fr}
}

.memberships-logos{
	text-align:center;
}
.hero-banner{position:relative;isolation:isolate;border-radius:16px;overflow:hidden;margin:8px 0 24px}
.hero-img{width:100%;height:clamp(260px,45vw,520px);object-fit:cover;display:block}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05) 55%, rgba(0,0,0,0));}
.hero-text{position:absolute;inset:auto 0 0 0;display:grid;place-items:center;padding: 28px 16px 20px;color:#fff;text-align:center}
.hero-text h1{margin:0 0 10px;font-size:clamp(22px,3.2vw,36px);line-height:1.2}

/* Make the header a proper anchor for the absolutely positioned nav */
.site-header .container { position: relative; }

/* Mobile menu: opaque background, tight spacing, full width */
@media (max-width: 820px){
  .nav{
    position: absolute;
    top: 100%;              /* drops just below the header */
    left: 0;
    right: 0;
    z-index: 1100;
    display: none;          /* stays hidden until .is-open */
    flex-direction: column;
    background: #fff;       /* or var(--sage) if you want the tint */
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 6px 12px;      /* less air */
  }
  .nav.is-open{ display:flex; }

  .nav a{
    display:block;
    margin:0;               /* kill the big gaps */
    padding: 12px 4px;      /* ~44px touch target without looking chunky */
    line-height: 1.2;
    border-bottom: 1px solid rgba(0,0,0,.06);
    color: var(--navy);
    text-decoration: none;
	background: #fff; 
  }
  .nav a:last-child{ border-bottom: 0; }
}
/* Grid layout already exists; ensure sensible columns */
.grid.cards{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding-top: 10px;
}
@media (max-width: 900px){ .grid.cards{ grid-template-columns:1fr 1fr } }
@media (max-width: 560px){ .grid.cards{ grid-template-columns:1fr } }

/* Card with image + overlayed content */
.card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#eee;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}

/* Force consistent size across all images */
.card-img{
  width:100%;
  aspect-ratio: 4 / 5;       /* same frame for all; tweak if you want */
  object-fit:cover;
  display:block;
}

/* Overlay with gradient so text is readable on any photo */
.card-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding:16px;
  color:#fff; text-align:left;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 75%);
}
.card-overlay h2{margin:0 0 4px; color:#fff}
.card-overlay p{margin:0 0 10px; color:#fff}

/* Button over image */
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  padding:10px 14px; border-radius:999px; font-weight:600;
}
.btn-light{ background:var(--green); color:#fff }
.btn-light:hover{ opacity:.92 }

/* Better tap targets on mobile without giant spacing */
@media (max-width:560px){
  .card-overlay{ padding:14px }
  .btn{ padding:12px 16px }
}

.pullquote{
  max-width: 60ch;
  margin: 2rem auto;
  padding: 1rem;
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--navy);
}
.pullquote footer{
  margin-top: .5rem;
  font-size: .9rem;
  font-style: normal;
  color: var(--green);
}

:root{
  --navy:#1D3557;
  --green:#5A764D;
  --sage:#DCE2D3;
  --cream:#F7F4EE; /* try #F3EFE8 if you want warmer */
  --ink:var(--navy);
  --bg:var(--cream);
}
body{ background:var(--bg); color:var(--ink); }

/* Headings and links in navy */
h1,h2,h3,.nav a,.link{ color:var(--navy); }

/* Buttons stay green */
.btn{ background:var(--green); color:#fff }

/* Hero overlay warmed and deepened for readability */
.hero-overlay{
  background:
    linear-gradient(to top, rgba(35,45,30,.55), rgba(35,45,30,.12) 55%, rgba(0,0,0,0)),
    rgba(245,244,238,.08); /* subtle warm wash */
}

/* Optional: alternate sections on sage for rhythm */
.section-alt{ background:var(--sage); border-radius:16px; }
.site-footer{
	background:#f7f4ee;
}
/* Theme vars (already close to yours) */
:root{
  --navy:#1D3557;
  --green:#5A764D;
  --cream:#F7F4EE;
}

/* Cookie banner */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--cream);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -8px 24px rgba(0,0,0,.12);
}
.cookie-inner{
  max-width: 960px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.cookie-text{ margin: 0; color: var(--navy); font-size: 14px; line-height: 1.5 }
.cookie-link{ color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(29,53,87,.3) }
.cookie-link:hover{ border-color: var(--navy) }

/* Button styled to match your site */
.btn.btn-cookie{
  background: var(--green); color: #fff; border: 0;
  padding: 10px 14px; border-radius: 999px; font-weight: 600; cursor: pointer;
}
.btn.btn-cookie:focus{ outline: 2px solid var(--navy); outline-offset: 2px }

/* Stack on small screens */
@media (max-width: 560px){
  .cookie-inner{ flex-direction: column; align-items: stretch }
  .btn.btn-cookie{ width: 100% }
}
.site-footer {
    margin-top: 0px;
}
/* ------------------------------
   Footer layout — strong override
   Paste at the end of your main CSS
   ------------------------------ */
.site-footer {
  background: var(--cream) !important;
  color: var(--navy) !important;
  font-size:15px !important;
  margin-top: 40px !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
}

/* Ensure the container inside footer is the grid */
.site-footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr !important;
  gap: 18px 28px !important;
  padding: 18px 20px !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
  .hero-home-p{
		background:#9ec9e970;
		border-radius: 16px; 
		padding-left:10px; 
		padding-right:10px;
	}
/* Responsive breakpoints */
@media (max-width: 900px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-home-p{
		background:#9ec9e9aa;
	}
}
@media (max-width: 560px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Make lists look like tidy columns (not giant stacked text) */
.site-footer .footer-nav,
.site-footer .footer-legal,
.site-footer .footer-contact {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Links - consistent styling */
.site-footer a {
  color: var(--navy) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  width: fit-content !important;
}
.site-footer a:hover { border-color: rgba(29,53,87,.35) !important; }

/* bottom bar */
.site-footer .footer-bottom {
  border-top: 1px solid rgba(0,0,0,.06) !important;
  padding: 1px 16px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.nav a{
  border-bottom:2px solid transparent;
  text-decoration:none;
  padding-bottom:2px;
}
.nav a:hover{ border-bottom-color: var(--green); }
.nav a.is-active{
  border-bottom-color: var(--green);
  font-weight: 600; /* optional but helps on mobile */
}




/* ====== HERO UTILITIES ====== */
/* Aspect ratios */
.hero--16x9   { aspect-ratio: 16 / 9; }
.hero--12x5   { aspect-ratio: 12 / 5; }   /* your 600x250 */
.hero--3x1    { aspect-ratio: 3 / 1; }

/* Height guards */
.hero--short  { min-height: 180px; }
.hero--tall   { min-height: 320px; }
.hero--max    { max-height: 520px; }

/* Corner radius + shadow */
.hero--rounded-s { border-radius: 10px; overflow: hidden; }
.hero--rounded   { border-radius: 16px; overflow: hidden; }
.hero--shadow    { box-shadow: 0 10px 28px rgba(0,0,0,.12); }

/* Text alignment inside .hero-text */
.hero--text-left   .hero-text { justify-content: flex-start;  text-align: left;  }
.hero--text-center .hero-text { justify-content: center;      text-align: center;}
.hero--text-right  .hero-text { justify-content: flex-end;    text-align: right; }

/* Vertical placement (uses flex on .hero-text container) */
.hero--text-top    .hero-text { align-items: flex-start;  padding-top: 16px; }
.hero--text-middle .hero-text { align-items: center; }
.hero--text-bottom .hero-text { align-items: flex-end; }

/* Overlay strength (adjust hero-overlay background) */
.hero--tint-weak  .hero-overlay { background: linear-gradient(to top, rgba(35,45,30,.30), rgba(35,45,30,.10) 55%, transparent); }
.hero--tint-mid   .hero-overlay { background: linear-gradient(to top, rgba(35,45,30,.48), rgba(35,45,30,.18) 55%, transparent); }
.hero--tint-strong.hero-overlay,
.hero--tint-strong .hero-overlay { background: linear-gradient(to top, rgba(35,45,30,.65), rgba(35,45,30,.25) 55%, transparent); }

/* Warm filter on the image itself */
.hero--warm   .hero-img { filter: saturate(.9) hue-rotate(-6deg) brightness(.98); }

/* Focal position for cropping */
.hero--pos-left  .hero-img { object-position: 20% 50%; }
.hero--pos-right .hero-img { object-position: 80% 50%; }
.hero--pos-60    .hero-img { object-position: 60% 50%; }  /* bias a tad right */
.hero--pos-40    .hero-img { object-position: 40% 50%; }

/* Button tweaks */
.hero--btn-pill .hero-text .btn { border-radius: 999px; }
.hero--btn-ghost .hero-text .btn { background: transparent; border:2px solid var(--green); color:#fff; }

/* Lock the hero stack */
.hero-banner{ position:relative; }
.hero-banner .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-banner .hero-overlay{ position:absolute; inset:0; z-index:1;
  /* stronger overlay for readability */
  background: linear-gradient(to top, rgba(35,45,30,.62), rgba(35,45,30,.22) 55%, transparent);
}
.hero-banner .hero-text{
  position:absolute; inset:0; z-index:2;      /* text above overlay */
  display:flex; align-items:flex-end; justify-content:center; /* center on mobile */
  padding:14px; text-align:center; color:#fff;
}

/* Headline styling that actually reads on a photo */
.hero-banner .hero-text h1{
  margin:0 0 8px;
  color:#fff;                                   /* stop the navy */
  font-size: clamp(20px, 3.4vw, 32px);
  line-height:1.2;
  max-width: 28ch;                              /* keep lines tidy */
  text-shadow: 0 2px 16px rgba(0,0,0,.45);      /* legibility insurance */
}

/* Button stays visible over image */
.hero-banner .hero-text .btn{
  background: var(--green); color:#fff; border-radius:999px;
  text-decoration:none; padding:10px 14px; font-weight:600;
}

/* Desktop: left-align but keep vertical bottom */
@media (min-width: 780px){
  .hero-banner .hero-text{
    justify-content:flex-start; text-align:left; padding:18px 20px;
  }
}

/* HERO: give the container height so the abs-pos image has space */
.hero-banner{
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5;     /* matches your 600×250 crop */
  min-height: 240px;        /* safety net on tiny screens */
  max-height: 460px;        /* optional guardrail on huge screens */
  border-radius: 16px;
  overflow: hidden;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1) {
  .hero-banner::before{
    content:"";
    display:block;
    padding-top: 41.67%;    /* 12/5 ratio = 5/12 ≈ 41.67% */
  }
}

/* Layers */
.hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block; z-index: 0;
}
.hero-overlay{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(35,45,30,.62), rgba(35,45,30,.22) 55%, transparent);
}
.hero-text{
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; color: #fff;
}
.hero-text h1{
  margin: 0; max-width: 28ch;
  font-size: clamp(22px, 3.6vw, 34px);
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.hero-banner .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:#00000000;
}

/* Layout */
.info-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  align-items:start;
  margin: 16px 0 24px;
}
@media (max-width: 820px){ .info-split{ grid-template-columns:1fr; } }

/* Headings + lists */
.info-split h3{ margin:0 0 8px; color:var(--navy); }
.memberships-list,
.qualifications-list{
  margin:0; padding-left: 18px;
}
.memberships-list li,
.qualifications-list li{ margin:6px 0; }

/* Links styled to match theme */
.memberships-list a{
  color:var(--navy); text-decoration:none; border-bottom:1px solid rgba(29,53,87,.28);
}
.memberships-list a:hover{ border-color: var(--navy); }

/* Optional subtle card look */
.memberships, .qualifications{
  background: #fff; /* or var(--cream) if you prefer flat */
  border:1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 12px 14px;
}

/* A11y helper */
.visually-hidden{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  padding:0 !important; border:0 !important; height:1px !important; width:1px !important; overflow:hidden;
}
/* Footer tone: warmer/darker than page bg */
:root{
  --footer-bg: #EFECE4;   /* darker cream than your body #F7F4EE */
  /* alt option if you prefer a green tint: --footer-bg: #E6ECDF; */
}

.site-footer{
  background: var(--footer-bg) !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
  margin-top: 0px !important;
  padding:0;
}

.site-footer .footer-bottom{
  background: transparent;           /* keep same tone */
  border-top: 0px solid rgba(0,0,0,.08) !important;
}

/* Ensure links stay readable on the warmer tone */
.site-footer a{ color: var(--navy) !important; }
.site-footer small{ opacity:.9; }
/* Make footer blurb justified and tidy */
.footer-sub{
  max-width: 52ch;              /* nice readable line length */
  text-align: justify;
  text-justify: inter-word;     /* better spacing in supported browsers */
  hyphens: auto;                /* needs language set to work well */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  margin: 0;                    /* keep it snug */
}

/* Keep the last line normal (not stretched) */
.footer-sub{ text-align-last: left; }
.site-main.container {
    padding: 15px 16px;
}