/* =========================================================
   Global tokens
   ========================================================= */
:root{
  --bg:#fbfbfe;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#2fb07f;
  --brand-dark:#1c8a62;
  --accent:#f5c84b;
  --soft:#eef2ff;
  --card:#ffffff;

  --container-max:1240px;
  --gutter:clamp(24px,6vw,80px);
  --radius:22px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  cursor:none; /* custom cursor */
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.kicker{letter-spacing:.18em;text-transform:uppercase;color:#0055a4;font-weight:800}
.lead{color:var(--muted)}

/* Container */
.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #edf0f7}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:60px;display:block}
.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{padding:10px;border-radius:12px;color:var(--ink)}
.nav a.btn{color:#fff}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:700;border:0}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 20px rgba(47,176,127,.28)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff;border:1px solid #e5e7eb}

/* =========================================================
   Parallax shapes (global background)
   ========================================================= */
.parallax-wrap{position:fixed;inset:0;pointer-events:none;z-index:-1}
.p-shape{position:absolute;display:block;opacity:.35;filter:blur(.3px)}
.p-shape.bubble{width:180px;height:180px;background:#e6fffa;border-radius:30px;left:4%;top:14%;transform:rotate(12deg)}
.p-shape.pill{width:220px;height:80px;background:#fff5d6;border-radius:40px;right:6%;top:10%;transform:rotate(-8deg)}
.p-shape.triangle{width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:120px solid #eef2ff;left:8%;bottom:10%}
.p-shape.dot{width:28px;height:28px;background:#ffd8e1;border-radius:999px;right:12%;bottom:14%}

/* =========================================================
   Homepage sections
   ========================================================= */
/* Hero (index.html) */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-block:clamp(24px,6vw,72px)}
.hero h1{font-size:clamp(30px,3.2vw,46px);line-height:1.15;margin:.25rem 0 .6rem}
.cta-row{display:flex;gap:12px;margin-top:12px}
.hero-benefits{display:flex;gap:18px;list-style:none;padding:0;margin:16px 0 0;color:#475569}
.hero-benefits strong{font-size:1.05rem;color:#0f172a}
.hero-media{position:relative}
.hero-img{width:100%;display:block;border-radius:var(--radius);box-shadow:0 20px 60px rgba(2,6,23,.08)}
.hero-img.overlay{position:absolute;width:44%}
.hero-img.overlay.a{left:-6%;top:10%}
.hero-img.overlay.b{right:-6%;bottom:-6%}

/* FEATURES STRIP — tidy layout */
.features-strip{
  background:#0ea5a5 linear-gradient(90deg,#0ea5a5,#22c55e);
  color:#fff;
  padding-block: clamp(12px, 3.5vw, 28px); /* more breathing room */
}

.features-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(18px, 2.2vw, 28px);
  align-items: center;
}

/* stack title + description next to the icon */
.feature{
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;   /* icon | text */
  grid-template-rows: auto auto;     /* h3 over p */
  align-items: center;
  gap: 6px 12px;
  padding: 6px 10px;
}

.f-icon{
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: saturate(140%) blur(2px);
  position: relative;
  overflow: hidden; /* keeps inner shapes neat */
}

/* Remove the glowing dot (optional decorative) */
.f-icon::before{
  display: none;
}

/* Make the actual SVG or <img> scale and center properly */
.f-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1); /* white on gradient */
}

/* tiny glowing dot inside the pill for polish */
.f-icon::before{
  content:"";
  width: 12px; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 5px rgba(255,255,255,.22) inset;
}

.feature h3{
  grid-column: 2;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 800;
}
.feature p{
  grid-column: 2;
  margin: 0;
  color: rgba(255,255,255,.92);
}

/* subtle vertical separators between features on desktop */
@media (min-width: 901px){
  .feature:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-14px; top:50%; transform:translateY(-50%);
    width: 2px; height: 34px;
    background: rgba(255,255,255,.25);
    border-radius: 1px;
  }
}

/* responsive: stack features */
@media (max-width: 900px){
  .features-grid{ grid-template-columns: 1fr; }
  .feature::after{ display: none; }
}


/* Benefits */
.benefits{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.benefit-media{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.benefit-media img{width:100%;border-radius:18px}
.benefit-bullets{display:grid;gap:10px;margin-top:10px}
.benefit-bullets div{background:#fff;border:1px solid #edf0f7;border-radius:14px;padding:12px 14px}
.benefit-bullets strong{display:block}

/* ===== BENEFITS (single image + external parallax) ===== */
.benefits-single{
  position: relative;
  padding-block: clamp(48px, 7vw, 96px);   /* space before & after */
  overflow: visible;
}
.benefits-single .benefit-wrap{
  position: relative;                      /* positioning context for shapes */
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

/* Image */
.benefits-single .benefit-media{
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(2,6,23,.12);
}
.benefits-single .benefit-media img{
  display: block;
  width: 100%;
  height: auto;
}

/* Copy */
.benefits-single .benefit-copy h2{
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.2;
  margin: 0 0 12px;
  color: #0f172a;
}
.benefits-single .benefit-copy p{
  color: #334155;
  margin: 0 0 10px;
}
.benefits-single .benefit-bullets{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.benefits-single .benefit-bullets div{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(2,6,23,.05);
}
.benefits-single .benefit-bullets strong{ display:block; color:#0f172a; }
.benefits-single .benefit-bullets span{ color:#475569; }

/* Shapes (outside the image box) */
.benefits-single .shape{
  position: absolute;
  z-index: 0;               /* behind text, outside the image clipping */
  opacity: .22;
  pointer-events: none;
  transform: translate3d(0,0,0);
  transition: transform .2s ease-out;
}

/* We'll position these via CSS variables set by JS */
.benefits-single .s-top{
  /* sits above + to the right edge of the image */
  width: 110px; height: 110px; border-radius: 20px; background:#22c55e;
  left: calc(var(--img-right-edge, 60%) - 55px);
  top: calc(var(--img-top, 0px) - 34px);
}
.benefits-single .s-bottom{
  /* sits below + to the left edge of the image */
  width: 0; height: 0;
  border-left: 44px solid transparent;
  border-right: 44px solid transparent;
  border-top: 84px solid #facc15;
  left: calc(var(--img-left, 10%) + 12px);
  top: calc(var(--img-bottom, 300px) - 20px);
}

/* Hover drift (subtle) */
.benefits-single .benefit-wrap:hover .shape{
  transform: translateY(-6px) rotate(3deg);
}

/* Responsive */
@media (max-width: 900px){
  .benefits-single .benefit-wrap{ grid-template-columns: 1fr; }
}


/* Metrics */
.metrics .metrics-card{background:linear-gradient(135deg,#f0fdf4,#fffbe8);border:1px solid #e5f0e9;border-radius:24px;padding:24px}
.metric-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;padding:0;margin:10px 0 16px}
.metric-list li{background:#fff;border:1px solid #edf0f7;border-radius:14px;padding:12px;text-align:center}
.metric-list strong{font-size:1.2rem;display:block}
.metric-list em{font-style:normal;color:#64748b;font-size:.9rem}
.metrics-banner{width:100%;border-radius:16px;border:1px dashed #cbd5e1;background:#fff}

/* Programs */
.programs .programs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.program-card{background:#fff;border:1px solid #edf0f7;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.program-card img{width:100%;height:160px;object-fit:cover}
.pc-body{padding:14px}
.pc-body p{color:#64748b;margin:.4rem 0 .6rem}
.pc-link{font-weight:700}

/* Testimonials */
.testimonials .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{background:#fff;border:1px solid #edf0f7;border-radius:18px;padding:18px}
.t-card cite{display:block;margin-top:8px;color:#64748b}

/* CTA Banner */
.cta-banner{margin:30px 0;background:linear-gradient(90deg,#dbeafe,#fef9c3)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px}

/* Blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-card{background:#fff;border:1px solid #edf0f7;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.blog-card img{width:100%;height:150px;object-fit:cover}
.bc-body{padding:14px}
.bc-body p{color:#64748b}

/* =========================================================
   ABOUT
   ========================================================= */
.about-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:clamp(20px,6vw,64px)}
.about-copy h1{font-size:clamp(28px,3.2vw,44px);line-height:1.15;margin:.25rem 0 .6rem}
.t-accent{color:#10b981}
.about-bullets{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin:16px 0 10px}
.ab-item{display:flex;gap:12px;align-items:flex-start}
.ab-ico{width:42px;height:42px;border-radius:14px;background:#fff7ed;border:1px solid #ffe2bf}
.ab-ico.lightning{background:#ecfeff;border-color:#bae6fd}
.about-rule{border:0;border-top:1px solid #e5e7eb;margin:18px 0}
.about-sub{color:#475569;margin:0 0 12px}
.about-media{position:relative}
.about-photo{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 60px rgba(2,6,23,.08)}
.about-photo.inset{position:absolute;right:6%;bottom:-10%;width:46%;border-radius:16px;background:#fff;outline:10px solid #fff}
.about-deco{position:absolute;pointer-events:none;display:block}
.about-deco.scribble{top:-8%;left:16%}
.about-deco.dots{top:10%;left:48%}

/* =========================================================
   BIO (Founder)
   ========================================================= */
.bio-hero {
  margin-top: 10px;
  padding-block: clamp(16px, 4vw, 40px);
}

.bio-panel {
  background: #dff5ef;
  border: 1px solid #cdebe4;
  border-radius: 36px;
  padding: 24px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.bio-left {
  padding: 8px 8px 8px 16px;
}

.bio-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(2, 6, 23, 0.08);
  object-fit: cover;
}

.bio-right {
  padding: 8px 14px;
}

.bio-name {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
  margin: 0 0 6px;
}

.bio-role {
  font-weight: 700;
  color: #0f172a;
  margin: 0.25rem 0 1rem;
}

.bio-intro {
  color: #475569;
  margin: 0 0 1rem;
}

.bio-facts {
  margin: 8px 0 12px;
}

.fact-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 8px 0;
}

.fact-row dt {
  font-weight: 800;
  color: #0f172a;
}

.fact-row dd {
  margin: 0;
  color: #0f172a;
}

.fact-row a {
  color: var(--brand);
}

.bio-social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.sbtn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 6px 14px rgba(47, 176, 127, 0.25);
}

.sbtn:hover {
  background: var(--brand-dark);
}

.bio-expertise {
  margin: 28px 0;
}

.bio-expertise h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  margin-bottom: 8px;
}

.bio-expertise p {
  color: #334155;
}

/* =========================
   MOBILE RESPONSIVE FIXES
   ========================= */
@media (max-width: 768px) {
  .bio-panel {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 24px;
    gap: 18px;
  }

  .bio-left {
    padding: 0;
    display: flex;
    justify-content: center;
  }

  .bio-photo {
    max-width: 240px;
    width: 100%;
  }

  .bio-right {
    padding: 0;
  }

  .bio-name,
  .bio-role,
  .bio-intro {
    text-align: center;
  }

  .bio-intro {
    font-size: 0.95rem;
  }

  .bio-facts {
    margin-top: 16px;
  }

  .fact-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 0;
  }

  .fact-row dt {
    font-size: 0.9rem;
  }

  .bio-social {
    justify-content: center;
    margin-top: 10px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .bio-panel {
    padding: 16px 14px;
  }

  .bio-name {
    font-size: 1.6rem;
  }

  .bio-intro {
    font-size: 0.9rem;
  }
}


/* =========================================================
   SERVICES (hero + icon tiles + “Why Choose…”)
   ========================================================= */
/* Hero */
.svc-hero{
  display:grid;
  grid-template-columns:minmax(420px,1.05fr) minmax(420px,.95fr);
  align-items:center;
  gap:clamp(20px,4vw,48px);
  padding-block:clamp(24px,6vw,72px);
}
.svc-hero h1{font-size:clamp(32px,3.4vw,48px);line-height:1.1;margin:.25rem 0 .5rem}
.svc-hero .lead{max-width:62ch}
.svc-hero .cta-row{display:flex;gap:12px;margin-top:12px}
.svc-hero-right{position:relative;min-width:0}
.svc-hero-img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:0 20px 60px rgba(2,6,23,.08)}
.hero-deco{position:absolute;pointer-events:none;display:block;opacity:.5}
.hero-deco.hex{width:54px;height:54px;background:#7c3aed;border-radius:12px;top:-14px;left:-14px;transform:rotate(18deg)}
.hero-deco.dot{width:28px;height:28px;background:#22c55e;border-radius:999px;top:14%;right:12%}
.hero-deco.tri{width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid #f59e0b;right:-10px;bottom:-12px}

/* Icon-ready tiles */
.services-tiles.v2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(14px,2vw,22px);
  align-items:stretch;
  margin-block:40px;
}
.svc-card{
  background:#fff;border:1px solid #e9eef8;border-radius:var(--radius);padding:22px;
  box-shadow:0 10px 34px rgba(2,6,23,.05);position:relative;overflow:visible;
  transition:transform .2s,box-shadow .2s;
}
.svc-card:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(2,6,23,.08)}
.svc-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tile-icon{width:42px;height:42px;object-fit:contain}
.svc-card .bullet{margin:0;padding-left:18px}
.svc-card p{color:#334155}

/* pastel per card */
.services-tiles.v2 .svc-card:nth-child(1){background:#fdeef7;border-color:#f8d7ea}
.services-tiles.v2 .svc-card:nth-child(2){background:#f0fde6;border-color:#d2f2bd}
.services-tiles.v2 .svc-card:nth-child(3){background:#e9f2ff;border-color:#cfe3fe}
.services-tiles.v2 .svc-card:nth-child(4){background:#fff7e8;border-color:#ffe2b7}
.services-tiles.v2 .svc-card:nth-child(5){background:#f2f0ff;border-color:#e1dcff}

/* Corner CTA (SVG chevron only) */
.tile-cta{
  --cta-size:52px;
  position:absolute;right:18px;bottom:18px;width:var(--cta-size);height:var(--cta-size);
  display:inline-grid;place-items:center;border-radius:14px;
  background:linear-gradient(180deg,#16a34a,#0ea5a5);
  box-shadow:0 10px 24px rgba(14,165,165,.35);
  transition:transform .15s,box-shadow .15s,background .2s;
  z-index:2;
}
.tile-cta svg{pointer-events:none}
.tile-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(14,165,165,.4)}
.tile-cta:active{transform:translateY(0);box-shadow:0 8px 18px rgba(14,165,165,.35)}
.tile-cta:focus{outline:none;box-shadow:0 0 0 4px rgba(34,197,94,.25),0 10px 24px rgba(14,165,165,.35)}
.tile-cta::before{content:none} /* kill legacy pseudo-chevron */
.svc-card{padding-bottom:84px} /* reserve space so CTA doesn’t sit on text */

/* Why Choose… (text + image) */
.svc-side-image.v2{
  display:grid;
  grid-template-columns:minmax(520px,1fr) minmax(480px,1fr);
  gap:clamp(20px,4vw,56px);
  align-items:center;
  margin-block:clamp(24px,6vw,72px);
}
.svc-side-left{min-width:0}
.svc-list{counter-reset:svcstep;list-style:none;padding:0;margin:0;max-width:68ch}
.svc-list li{counter-increment:svcstep;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;margin:0 0 22px}
.svc-list li::before{content:counter(svcstep);width:56px;height:56px;border-radius:999px;display:grid;place-items:center;background:#fbe7f1;color:#7a1e48;font-weight:800;box-shadow:0 4px 16px rgba(2,6,23,.05)}
.svc-list h3{margin:0 0 6px;font-size:clamp(18px,2vw,22px);line-height:1.25}
.svc-list p{margin:0;color:#334155;line-height:1.6;white-space:normal;word-break:normal}
.svc-image-wrap{position:relative;min-width:420px}
.svc-image-wrap img{width:100%;height:auto;border-radius:16px;box-shadow:0 18px 60px rgba(2,6,23,.08)}
.svc-deco{position:absolute;pointer-events:none;display:block}
.svc-deco.yellow{width:110px;height:110px;background:#ffd54a;border-radius:16px;top:-38px;right:16%;transform:rotate(10deg)}
.svc-deco.triangle{width:0;height:0;border-left:42px solid transparent;border-right:42px solid transparent;border-top:72px solid #3ddc84;right:-10px;bottom:-18px;transform:rotate(12deg)}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{margin-top:40px;background:#666664;color:#e5e7eb}
.site-footer a{color:#a7f3d0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding-top:20px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.footer-brand{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.footer-logo{width:240px;height:auto;display:block;}

/* =========================================================
   Custom cursor
   ========================================================= */
.cursor,.cursor-outline{position:fixed;top:0;left:0;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);mix-blend-mode:multiply}
.cursor{width:8px;height:8px;border-radius:999px;background:#0ea5a5}
.cursor-outline{width:36px;height:36px;border-radius:999px;border:2px solid rgba(14,165,165,.6);transition:width .2s,height .2s,border-color .2s}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1100px){
  .hero,.about-hero,.svc-hero{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .programs .programs-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials .t-grid{grid-template-columns:1fr 1fr}
  .services-tiles.v2{grid-template-columns:repeat(2,1fr)}
  .svc-side-image.v2{grid-template-columns:1fr}
  .svc-image-wrap{min-width:0}
  .bio-panel{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .programs .programs-grid,
  .blog-grid,
  .services-tiles.v2{grid-template-columns:1fr}
  .svc-list li{grid-template-columns:48px 1fr}
  .svc-list li::before{width:48px;height:48px}
  .tile-cta{--cta-size:46px;right:14px;bottom:14px}
}

/* ============= LAYOUT BREATHING ROOM PATCH ============= */

/* Wider gutters site-wide (also respects iOS safe area) */
:root{
  --gutter: clamp(28px, 7vw, 96px);
  --header-h: 76px;             /* header row height */
}

/* Container paddings */
.container{
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
@supports (padding:max(0px)){
  .container{
    padding-left: max(var(--gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--gutter), env(safe-area-inset-right)) !important;
  }
}

/* Header: taller row so the logo/nav aren’t cramped */
.site-header{
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
}
.header-inner{
  min-height: var(--header-h);
  padding-block: 10px;          /* vertical breathing room */
}
.logo img{
  height: 52px;                 /* footer gets its own size below */
}

/* HERO SECTIONS (all pages) — real vertical padding */
.page-hero,
.hero,
.about-hero,
.svc-hero{
  padding-top: clamp(48px, 8vw, 96px) !important;
  padding-bottom: clamp(28px, 6vw, 72px) !important;
}

/* SERVICES “Why Choose…” in case it still feels tight below tiles */
.svc-side-image.v2{
  margin-top: clamp(24px, 6vw, 72px) !important;
  margin-bottom: clamp(24px, 6vw, 72px) !important;
}

/* FOOTER — roomy top/bottom padding and comfy grid gap */
.site-footer{
  padding-top: clamp(28px, 4vw, 48px) !important;
  padding-bottom: clamp(24px, 4vw, 40px) !important;
}
.footer-grid{ gap: 28px !important; }
.footer-bottom{
  padding-top: 14px;
  padding-bottom: 10px;
}
.footer-logo{
  width: 240px;                 /* larger footer logo */
  height: auto;
}

/* Prevent any accidental super-narrow columns for text blocks */
.svc-list{ max-width: 68ch !important; }
.about-copy .lead,
.bio-intro,
.hero .lead{ max-width: 62ch; }

/* Keep parallax shapes behind header/content so they don’t “sit” on the edges */
.parallax-wrap{ z-index: -1 !important; }

/* ===== BLOG INDEX ===== */
.blog-index{ padding-block: clamp(24px, 6vw, 72px); }

.blog-head h1{
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.15;
  margin: .25rem 0 .6rem;
}

.post-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: 18px;
}

.post-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-media{
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.post-media:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(2,6,23,.12);
}

.post-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  letter-spacing: .02em;
  color: #6b7280;
  text-transform: uppercase;
}
.post-meta .post-cat{ font-weight: 800; color: #111827; }
.post-meta .dot{
  width: 8px; height: 8px; border-radius: 999px; background: #10b981;
  display: inline-block;
}

.post-title{
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  margin: 2px 0 0;
}
.post-title a{
  color: #0f172a;
  text-decoration: none;
}
.post-title a:hover{ text-decoration: underline; }

.post-read{
  margin-top: 4px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-block;
  color: #0ea5a5;
}
.post-read:hover{ color: #1c8a62; }

/* Pagination */
.pager{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(24px, 5vw, 40px);
}
.pager .page{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  color: #111827;
  background: #fff;
}
.pager .current{
  background: #111827;
  color: #fff;
  border-color: #111827;
}
.pager .page:hover{ text-decoration: none; border-color: #cbd5e1; }

/* Responsive */
@media (max-width: 1200px){
  .post-grid{ grid-template-columns: repeat(3, 1fr); }
  .post-media img{ height: 210px; }
}
@media (max-width: 900px){
  .post-grid{ grid-template-columns: repeat(2, 1fr); }
  .post-media img{ height: 200px; }
}
@media (max-width: 580px){
  .post-grid{ grid-template-columns: 1fr; }
  .post-media img{ height: 200px; }
}

/* ===== CONTACT PAGE ===== */
.contact-page{ padding-block: clamp(24px, 6vw, 72px); }

.contact-head h1{
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.15;
  margin: .25rem 0 .6rem;
}

.contact-wrap{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  margin-top: 12px;
}

/* Left info column */
.contact-info{ display: grid; gap: 18px; }
.ci{ display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; }
.ci-ico{
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center;
  color: #18a08b;
  background: #eaf8f4;
  border: 1px solid #cdebe4;
}
.ci h4{ margin: 0 0 4px; font-size: 1.02rem; }
.ci a{ font-weight: 800; color: #0f172a; }
.ci p{ margin: 0; color: #475569; }

/* Form */
.contact-form{ display: grid; gap: 12px; }
.row{ display: grid; gap: 12px; }
.row.two{ grid-template-columns: 1fr 1fr; }
.field{ display: grid; gap: 6px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: .9rem; color: #475569; }
.field input,
.field select,
.field textarea{
  width: 100%;
  height: 56px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.field textarea{ height: auto; resize: vertical; min-height: 160px; }
.field input::placeholder,
.field textarea::placeholder{ color:#94a3b8; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

.contact-submit{
  margin-top: 6px;
  padding: 14px 22px;
  font-size: 1.02rem;
}

/* Status area (optional) */
.form-status{ margin-top: 8px; color:#0f766e; font-weight:600 }

/* Responsive */
@media (max-width: 1040px){
  .contact-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .row.two{ grid-template-columns: 1fr; }
}

/* ===== HEADER BUTTON PAIR ===== */
.nav-cta{
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:12px;
}

.btn-donate{
  background:#0055a4;        /* goldish yellow */
  color:#ffffff;
  box-shadow:0 6px 18px rgba(59, 37, 170, 0.35);
  font-weight:700;
}
.btn-donate:hover{
  background:#facc15;        /* slightly brighter on hover */
  box-shadow:0 8px 22px rgba(245,200,75,.45);
}
.btn-donate:active{
  background:#eab308;
  box-shadow:0 4px 14px rgba(234,179,8,.4);
}

/* ===== SINGLE POST ===== */
.post-hero{ padding-block: clamp(28px, 6vw, 80px); }
.post-hero-media{ position: relative; }
.post-hero-media img{
  width: 100%;
  height: clamp(260px, 48vw, 520px);
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(2,6,23,.08);
}
.post-hero-chip{
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(17,24,39,.8); color: #fff; backdrop-filter: blur(4px);
  font-size: .85rem; letter-spacing: .02em;
}
.post-hero-chip .cat{ font-weight: 800; }
.post-hero-chip .dot{ width: 6px; height: 6px; border-radius: 999px; background: #22c55e; }

.post-hero-head{ margin-top: 16px; }
.post-hero-head h1{
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
  margin: 0;
}
.post-meta-line{
  margin-top: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.post-author{ display:flex; align-items:center; gap:10px; }
.post-author .avatar{ width:42px; height:42px; border-radius:999px; object-fit:cover }
.post-author strong{ display:block; line-height:1.1 }
.post-author span{ color:#64748b; font-size:.9rem }

.post-share{ display:flex; align-items:center; gap:8px; }
.post-share .sh{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:#f1f5f9; color:#0f172a;
}
.post-share .sh:hover{ background:#e2e8f0; }

/* Body */
.post-body{
  padding-block: clamp(16px, 4vw, 36px);
  max-width: 80ch;
}
.post-body p{ color:#334155; }
.post-body h2{
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  margin: 20px 0 8px;
}
.post-body ul{ padding-left: 18px; }
.post-body hr{ border:0; border-top:1px solid #e5e7eb; margin: 18px 0; }
.post-body .pull{
  margin: 14px 0;
  padding: 16px 18px;
  background:#fff7e6;
  border:1px solid #ffe2b7;
  border-radius: 16px;
  font-weight: 600;
  color:#7a5800;
}
.post-body figure.wide{ margin: 16px 0; }
.post-body figure.wide img{
  width:100%; height:auto; border-radius: 16px;
  box-shadow: 0 18px 48px rgba(2,6,23,.08);
}
.post-body figcaption{
  margin-top: 6px; color:#64748b; font-size:.92rem;
}

/* Post footer */
.post-foot{
  padding-block: clamp(8px, 3vw, 20px);
  display:grid; gap: 16px;
  border-top: 1px solid #e5e7eb;
}
.post-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.post-tags a{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:#eef2ff; border:1px solid #dbeafe; color:#1e293b; font-weight:700; font-size:.92rem;
}
.post-pager{
  display:flex; justify-content:space-between; gap:12px;
}
.post-pager a{ color:#0ea5a5; font-weight:800; }

/* Author box */
.author-box{
  display:grid; grid-template-columns: 64px 1fr; gap:14px; align-items:center;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius: 16px;
  padding: 14px; margin-block: 10px 24px;
}
.author-box .avatar{ width:64px; height:64px; border-radius:999px; object-fit:cover }
.author-box h3{ margin:0 0 4px; }

/* Comments */
.comments{ padding-block: clamp(12px, 4vw, 28px); }
.comment-list{ list-style:none; padding:0; margin: 0 0 12px; display:grid; gap:12px; }
.comment{
  display:grid; grid-template-columns: 44px 1fr; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px;
}
.comment .avatar{ width:44px; height:44px; border-radius:999px; object-fit:cover }
.comment .c-body strong{ display:block; }
.comment .c-body time{ color:#64748b; font-size:.9rem; }

.comment-form{ display:grid; gap:12px; }
.comment-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.comment-form .field{ display:grid; gap:6px; }
.comment-form input, .comment-form textarea{
  width:100%; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  padding:12px 14px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.comment-form textarea{ min-height: 140px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus{
  border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.15);
}

/* Related posts grid reusing your blog cards */
.related-posts{ padding-block: clamp(12px, 4vw, 28px); }
.related-posts h3{ margin: 0 0 10px; }
.related-posts .rp-grid .post-media img{ height: 170px; }

/* Responsive */
@media (max-width: 980px){
  .post-meta-line{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (max-width: 680px){
  .comment-form .row{ grid-template-columns:1fr; }
}

/* ===== NEWSLETTER STRIP ===== */
.subscribe-strip{
  background: linear-gradient(90deg,#e0f2fe,#fef9c3);
  padding-top: clamp(40px,6vw,72px);   /* top spacing */
  padding-bottom: clamp(40px,6vw,72px); /* bottom spacing */
  margin-top: clamp(40px,6vw,72px);     /* adds space before section */
  margin-bottom: clamp(40px,6vw,72px);  /* adds space after section */
}


.subscribe-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(16px,4vw,32px);
}

.subscribe-text h3{
  font-size: clamp(20px,2.4vw,28px);
  margin: 0 0 4px;
  color: #0f172a;
}
.subscribe-text p{
  margin: 0;
  color: #334155;
  max-width: 55ch;
}

.subscribe-form{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.subscribe-form input{
  flex: 1;
  min-width: 240px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  font-size: 1rem;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.subscribe-form input::placeholder{ color: #94a3b8; }
.subscribe-form input:focus{
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

.subscribe-form .btn{
  white-space: nowrap;
  padding: 14px 22px;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 900px){
  .subscribe-grid{ grid-template-columns: 1fr; }
  .subscribe-form{ justify-content: flex-start; flex-wrap: wrap; }
}

/* ================= Greater Grace: Header/Nav ================= */
.gg-header{
  position:sticky; top:0; z-index:100; background:#fff;
  border-bottom:1px solid #eef2f7;
}
.gg-header-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:72px;
}

/* Logo */
.gg-logo img{ display:block; height:60px; width:auto; }
@media (max-width:920px){ .gg-logo img{ height:38px; } }

/* Reset any global .btn rules leaking into our buttons */
.gg-nav-toggle, .gg-nav-close{
  all:unset; /* hard reset */
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:#f1f5f9; cursor:pointer;
  box-sizing:border-box;
}
.gg-nav-toggle:focus-visible, .gg-nav-close:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }

.gg-icon{ width:22px; height:22px; stroke:#0f172a; stroke-width:2.25; fill:none; stroke-linecap:round; display:block; }

/* Desktop nav */
.gg-nav{
  display:flex; align-items:center; gap:10px;
}
.gg-nav > a{
  padding:8px 10px; border-radius:10px; color:#0f172a;
}
.gg-nav > a:hover{ background:#f8fafc; text-decoration:none; }
.gg-nav-cta{ display:flex; gap:10px; margin-left:8px; }

/* Hide mobile-only controls on desktop */
.gg-nav-close{ display:none; }
.gg-nav-toggle{ display:none; }

/* ================= Mobile (≤ 920px): transform nav into a slide-in panel ================= */
@media (max-width:920px){
  .gg-nav-toggle{ display:inline-flex; }

  .gg-nav{
    position:fixed; top:72px; right:0; bottom:0; width:min(88vw,360px);
    background:#fff; border-left:1px solid #e5e7eb; box-shadow:-8px 0 28px rgba(2,6,23,.15);
    display:grid; align-content:start; gap:8px; padding:16px;
    transform:translateX(100%); transition:transform .22s ease;
    z-index:101;
  }
  /* open state */
  .gg-header[data-state="open"] .gg-nav{ transform:translateX(0); }

  .gg-nav > a{
    display:block; padding:12px 14px; font-weight:700; color:#0f172a;
    border:1px solid #e5e7eb; border-radius:12px; background:#f8fafc;
  }
  .gg-nav-cta{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:6px; }
  .gg-nav > a.btn{ text-align:center; }

  .gg-nav-close{ display:inline-flex; position:absolute; top:10px; right:10px; }

  .gg-nav-backdrop{
    position:fixed; inset:0; background:rgba(2,6,23,.45); opacity:0; pointer-events:none; transition:opacity .2s ease;
    z-index:100;
  }
  .gg-header[data-state="open"] ~ .gg-nav-backdrop{ opacity:1; pointer-events:auto; }

  /* Prevent body scroll when open */
  body.gg-no-scroll{ overflow:hidden; }
}

/* =================== Metrics Section =================== */
.metrics { margin-block: 24px; }

.metrics-card{
  /* Soft background like your screenshot */
  background: linear-gradient(180deg, #f7fbff 0%, #f8fff3 100%);
  border:1px solid #e6eef6;
  border-radius: 20px;
  padding: 18px;
  display: grid;
  gap: 14px;
  overflow: hidden; /* keeps rounded corners for inner image */
}

/* Heading spacing/size that scales a bit */
.metrics-card h3{
  margin: 2px 2px 6px;
  line-height: 1.25;
  font-weight: 800;
  font-size: clamp(18px, 3.8vw, 22px);
  color:#0f172a;
}

/* Stats: wrap into neat grid */
.metric-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* phones: 2 across */
  gap: 10px;
}

/* Each pill */
.metric-list li{
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 4px;
  min-height: 92px;
  padding: 12px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(2,6,23,0.03);
}

/* Optional decorative icon (hidden for now so it can't misalign) */
.metric-list .m-ico{ display:none; }

/* Number line */
.metric-list strong{
  display: block;
  font-weight: 800;
  font-size: clamp(18px, 5vw, 22px);
  line-height: 1.1;
  color:#0f172a;
  white-space: nowrap;            /* prevents awkward wraps like "1 Mission" */
}

/* Label line */
.metric-list em{
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 1.25;
  color:#475569;
}

/* Banner image: always contained & rounded */
.metrics-banner{
  width: 100%;
  height: clamp(120px, 26vw, 220px);
  object-fit: cover;
  display: block;
  border-radius: 16px;
  border:1px solid #e5e7eb;
}

/* ====== Breakpoints ====== */
/* Small tablets (~≥480px): 3-up grid if space allows */
@media (min-width: 480px){
  .metric-list{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Tablets / desktops (~≥900px): 4-up */
@media (min-width: 900px){
  .metrics-card{
    padding: 22px;
    gap: 16px;
  }
  .metric-list{
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
  }
  .metric-list li{
    min-height: 100px;
    padding: 14px 12px;
  }
  .metrics-banner{
    height: clamp(160px, 22vw, 260px);
  }
}

/* Contact form status banners */
.form-status{
  display:none;
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.5;
}
.form-status--ok{
  background:#ecfeff;
  border:1px solid #bae6fd;
  color:#0c4a6e;
}
.form-status--error{
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#7f1d1d;
}

/* Feature cards */
.feature1{background:#fff;border:1px solid #e8eef6;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.feature__title{color:var(--brand-700);margin:0 0 6px}
.list{padding-left:18px}
.list li{margin:8px 0}

.feature__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  opacity: 0.9;
}

/* Grids */
.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.fee-card {
  background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%) !important;
  border: 1px solid #d6e7ff;
}
.fee-card {
  box-shadow: 0 4px 20px rgba(20, 45, 80, 0.08);
}

/* Responsive */
@media (max-width: 1024px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .hero{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .grid--gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}